/* Renewal overrides: original common.css/style.css and DOM remain the base. */
body {
    background: #eb7e0a
}

picture {
    display: block
}

picture img {
    height: auto
}

.sec2-top .fv img {
    display: block;
    width: 100%;
    aspect-ratio: auto;
    object-fit: initial
}

.sec2-top .sec2-top-box {
    top: 72%;
    border: 3px solid #eb7e0a;
    outline: 2px solid white;
    width: 55.56%;
    border-radius: 1rem
}

.sec2-top-box:before {
    display: none
}

.sec2-top-data div {
    padding: 0 2rem
}

.sec2-top-data img {
    width: 100%;
    height: auto
}

.sec2-top-data {
    padding-top: 2rem
}

.sec2-top-box .sec2-top-txt {
    color: #231815
}

.sec2-top-box.sec3-top5 {
    border: 3px solid #eb7e0a;
    width: 80rem;
    max-width: 100%;
    margin-top: 4rem
}

.sec-banner {
    padding: 5rem 0 7rem
}

.renew-prizes {
    list-style: none;
    display: grid;
    gap: 3rem;
    max-width: 110rem;
    margin: auto
}

.renew-prizes img {
    display: block;
    width: 100%
}

.sec3-top:not(.sec5-top),
.sec4-top {
    background: #ffe368 url('../assets/pc/bg_yellow_pc.png') center top / 100% auto
}

.sec3-top2 {
    margin: 1rem auto 7rem;
    padding: 3rem;
    background: #ed7900;
    border-radius: 1rem;
    max-width: 100rem
}

.sec3-top2-img img {
    display: block;
    width: 100%
}

.title-style1 picture {
    display: inline-block
}

.title-style1 picture img {
    width: auto;
    height: 5.5rem
}

.sec5-top {
    background: #eb7e0a
}

#campaign-form-slot {
    min-height: 24rem;
    display: grid;
    align-content: center;
    gap: 1rem;
    text-align: center;
    font-size: 2rem;
    padding: 4rem
}

.postcard-pending {
    text-align: center;
    font-size: 1.8rem
}

.grid-step-sale-bottom {
    color: #231815;
    max-width: 100%
}

@media(max-width:750px) {
    .sec2-top .sec2-top-box {
        top: 72%;
        width: 92%
    }

    .sec2-top-data {
        padding-top: 2rem
    }

    .sec2-top-data div {
        padding: 0
    }

    .sec-banner {
        padding-top: 2rem
    }

    .renew-prizes {
        gap: 4rem
    }

    .sec3-top:not(.sec5-top),
    .sec4-top {
        background-image: url('../assets/sp/bg_yellow_sp.png');
        background-size: 100% auto
    }

    .sec3-top2 {
        padding: 4rem 7rem
    }

    .sec2-top-box.sec3-top5 {
        width: 100%
    }

    .sec2-top-box .sec2-top-txt {
        font-size: 2rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .cs-fadein {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* Every supplied foreground/background asset is used at its intended layer. */
.asset-base img,
.asset-period picture img,
.asset-steps img,
.asset-product img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%
}

.asset-period.sec2-top-box {
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    border-radius: 0
}

.asset-period .asset-date {
    position: absolute;
    left: 5%;
    top: 11%;
    width: 90%
}

.asset-period .asset-apply {
    position: absolute;
    left: 25%;
    top: 48%;
    width: 50%;
    display: block
}

.asset-period .asset-note {
    position: absolute;
    left: 22.25%;
    bottom: 10%;
    width: 55.5%
}

.asset-period.sec3-top5 .asset-date {
    top: 25%
}

.asset-period.sec3-top5 .asset-apply {
    top: 46%
}

.asset-product.sec3-top2 {
    padding: 0;
    background: none;
    position: relative
}

.asset-product .sec3-top2-img {
    position: absolute;
    left: 11.2%;
    top: 5%;
    width: 77.6%;
    max-width: none
}

.asset-intro {
    max-width: 64rem;
    margin: auto
}

.asset-intro img {
    width: 100%;
    height: auto
}

.asset-steps {
    display: block;
    position: relative
}

.asset-step-content {
    position: absolute;
    left: 10.5%;
    top: 17%;
    width: 79%
}

.postcard-pending {
    width: 54rem;
    max-width: 100%;
    margin: 4rem auto 0
}

.postcard-pending img {
    width: 100%;
    height: auto;
}

.asset-method-notes {
    width: 62rem;
    max-width: 100%
}

.asset-method-notes img {
    width: 100%;
    height: auto
}

@media(max-width:750px) {
    .asset-period .asset-date {
        left: 5%;
        top: 12%;
        width: 90%
    }

    .asset-period .asset-apply {
        left: 8%;
        top: 50%;
        width: 84%
    }

    .asset-period .asset-note {
        left: 5%;
        bottom: 10%;
        width: 90%
    }

    .asset-period.sec3-top5 .asset-date {
        top: 22%;
        left: 5.7%;
        width: 88.55%
    }

    .asset-period.sec3-top5 .asset-apply {
        top: 49%
    }

    .asset-product .sec3-top2-img {
        left: 10.8%;
        top: 5%;
        width: 78.4%
    }

    .asset-step-content {
        left: 7%;
        top: 9%;
        width: 86%
    }

    .postcard-pending,
    .asset-method-notes {
        width: 100%
    }
}