#coupon_details_content {
    display: grid;
    grid-template-columns: clamp(25em,30%,30em) 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 2em 3em;
    padding-block:3em}

#coupon_card .coupon {
    --coupon-txsize: 2.5em
}

#coupon_related {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-inline-start:1.5em}

#coupon_related h3 {
    font-size: 1em;
    font-weight: 800
}

#coupon_related .cpo_list {
    display: flex;
    flex-direction: column;
    gap: 1em
}

#coupon_details {
    grid-area: 1/2/3/3;
    background: var(--background-color-L3,#fff);
    border-radius: 1em
}

#coupon_infomation {
    background: var(--background-color-L2,#fff);
    border-radius: 1em 1em 0 0
}

#coupon_infomation>.inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 60em;
    margin-inline:auto;padding: 3em 2em;
    box-sizing: border-box
}

#coupon_infomation h1 {
    font-size: 2em;
    font-weight: 800
}

#coupon_infomation .intro {
    color: var(--body-text-color-a75,rgba(0 0 0/75%))
}

#content_tab {
    background: var(--background-color-L2,#fff);
    box-shadow: var(--body-text-color-a5,rgba(0 0 0/5%)) 0 -1px 0 inset;
    position: sticky;
    inset-inline: 0;
    inset-block-start: calc((var(--site-header-height) - var(--global-nav-height)) * 1px);
    z-index: 2
}

.T, #coupon_description{
    color: #ffffff;
}

.IconPic {
    height: 60px;
    width: 60px;
    border-radius: 10px;
}
#content_tab>ul {
    display: flex;
    align-items: center;
    gap: 2em;
    max-width: 60em;
    margin-inline:auto;padding-inline:2em;box-sizing: border-box
}

#content_tab>ul>li:only-child {
    display: none
}

#content_tab a.bt {
    display: block;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    padding-block:1.5em}

#content_tab a.bt>span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center
}

#content_tab a.bt:hover {
    color: #ebe5e5;
}

.content_tab_box {
    scroll-margin-block-start: calc((var(--site-header-height) - var(--global-nav-height)) * 1px + 5em)
}

.content_tab_box~.content_tab_box {
    box-shadow: var(--body-text-color-a5,rgba(0 0 0/5%)) 0 -1px 0
}

.content_tab_box>.inner {
    width: 100%;
    max-width: 60em;
    margin-inline:auto;padding: 2em;
    box-sizing: border-box
}

#coupon_itemlist>.inner {
    display: flex;
    flex-direction: column;
    gap: 2em
}

#coupon_itemlist .title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1em 2em
}

#coupon_itemlist .title h3 {
    font-size: 1.333334em;
    font-weight: 800;
    font-family: inherit;
    color: #ffffff;
}

#coupon_itemlist .title .cpt-search {
    max-width: 20em
}

#coupon_itemlist .ItemList {
    --W: 4.5em;
    --itemlist-gap: 1em 1.5em
}

#coupon_itemlist .ItemList>li.hide {
    display: none
}

#search_empty.hide {
    display: none
}

article.docs h1 {
    font-weight: 800;
    font-size: 2em;
    margin: 1em 0
}

article.docs h2 {
    font-weight: 800;
    font-size: 1.5em;
    margin: 1em 0
}

article.docs h2:first-of-type {
    margin-block-start:0}

article.docs h3 {
    font-weight: 800;
    font-size: 1.333334em;
    margin: 1em 0
}

article.docs ol,article.docs ul {
    margin: 1em 0;
    margin-inline-start:2em}

article.docs ul>li {
    list-style: disc outside;
    margin: 1em 0
}

article.docs ol>li {
    list-style: decimal outside;
    margin: 1em 0
}

article.docs ol>li::marker,article.docs ul>li::marker {
    color: var(--body-text-color-a50,rgba(0 0 0/50%))
}

article.docs a {
    font-weight: 800
}

article.docs a:hover {
    text-decoration: underline
}

article.docs img {
    vertical-align: top;
    max-width: 100%;
    width: auto;
    height: auto
}

article.docs .img {
    margin: 2em 0;
    max-width: 60em;
    background: var(--body-text-color-a5,#fff);
    box-shadow: var(--body-text-color-a10,rgb(0 0 0 / 5%)) 0 0 0 1px inset;
    border-radius: 1em;
    padding: 1em;
    box-sizing: border-box;
    text-align: center
}

article.docs .img>img {
    vertical-align: top;
    max-width: 100%;
    width: auto;
    height: auto
}

@media only screen and (max-width: 1280px) {
    #coupon_details_content {
        gap:2em;
        padding-block:2em}

    #coupon_infomation>.inner {
        padding: 2em
    }
}

@media only screen and (max-width: 1000px) {
    #coupon_details_content {
        grid-template-columns:1fr;
        max-width: 40em;
        margin-inline:auto}

    #coupon_related {
        order: 9
    }

    #coupon_details {
        grid-area: auto
    }

    #content_tab a.bt {
        padding-block:1.75em}

    #content_tab a.bt>span {
        display: block
    }

    #content_tab a.bt>span::before {
        content: none
    }

    #coupon_itemlist .title {
        grid-template-columns: 1fr auto
    }

    #coupon_itemlist .title h3 {
        font-size: 1em
    }

    #coupon_related {
        padding: 0;
        margin-inline:auto;width: 100%;
        max-width: 30em
    }
}

@media only screen and (max-width: 480px) {
    #coupon_card .coupon {
        --coupon-txsize:2em
    }

    #coupon_details {
        margin-inline:-2em}

    #coupon_infomation h1 {
        font-size: 1.5em
    }

    #coupon_itemlist .title {
        grid-template-columns: 1fr
    }

    #coupon_itemlist .title .cpt-search {
        max-width: unset
    }

    article.docs h1 {
        font-size: 1.5em
    }

    article.docs h2 {
        font-size: 1.25em
    }

    article.docs h3 {
        font-size: 1.166667em
    }
}