@charset "utf-8";

/* 00.USUAL
--------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

main#stripeBg {
    background: none !important;
}

article#apppay {}

article#apppay img {
    max-width: 100%;
    height: auto;
}

article#apppay a {
    text-decoration: underline;
}

article#apppay a,
article#apppay a img {
    transition: 0.1s ease-in;
}

article#apppay a:hover img {
    transform: scale(1.1);
}

article#apppay div.container {
    margin: 0 auto;
    padding: 0;
}

article#apppay .pcNone {
    display: none;
}


/* 01.MV
--------------------------------------------------- */
article#apppay section#mv {
    background: #ffde00;
    text-align: center;
    padding: 5% 0;
}

article#apppay section#mv p.mv__catch {
    width: 90%;
    margin: 0 auto 16px;
}

article#apppay section#mv div.mv__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}

article#apppay section#mv div.mv__head h1 {
    margin: 0 auto;
    flex-basis: 100%;
}

article#apppay section#mv p.mv__benefit {
    width: 90%;
    margin: 16px auto 0;
}

/* 02.HOWTO
--------------------------------------------------- */
article#apppay section.payment {
    padding-top: 6em;
    background: #ffde00;
}

article#apppay section.payment div.container {
    position: relative;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    border: 3px solid #000;
    background: #fff;
    border-radius: 20px;
}

article#apppay section.payment h2 {
    position: absolute;
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
    top: -50px;
    right: 0;
    left: 0;
    background: #fff;
    border: 3px solid #000;
    padding: 25px;
    border-radius: 100px;
    text-align: center;
}

article#apppay section.paymenth2 img {
    width: 90%;
}

article#apppay section.payment .ic_image {
    width: fit-content;
    height: 25px;
    vertical-align: baseline;
}

article#apppay section.payment .lg_wrapper {
    margin-top: 8rem;
}

article#apppay section.payment .lg_area {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
article#apppay section.payment .lg_area.pay {
    width: 67%;
}

@media screen and (max-width: 768px) {
    article#apppay section.payment .lg_area.pay {
        width: 88%;
    }
}
article#apppay section.payment .credit {
    justify-content: space-between;
}

article#apppay section.payment .credit img {
    height: clamp(30px, 10vw, 115px);
}

article#apppay section.payment .pay {
    justify-content: center;
    gap: 24px;
}

article#apppay section.payment .pay img {
    height: clamp(32px, 6vw, 60px);
}

article#apppay section.payment ol {
    width: 90%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0 5%;
    margin: 5rem auto 4rem;
    padding: 0;
}

article#apppay section.payment ol li {
    position: relative;
    background: #fffcc4;
    border-radius: 20px;
    padding: 15px;
}

article#apppay section.payment ol li:nth-child(1)::before,
article#apppay section.payment ol li:nth-child(2)::before {
    content: "";
    background: url(../img/1.svg) no-repeat;
    display: block;
    position: absolute;
    top: 10px;
    width: 100%;
    height: 50px;
    opacity: .5;
}

article#apppay section.payment ol li:nth-child(2)::before {
    background: url(../img/2.svg) no-repeat;
}
article#apppay section.payment .relative {
    position: relative;
}
article#apppay section.payment ol::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 32.5px;
    height: 75px;
    background: url(../img/right.svg) no-repeat;
}

article#apppay section.payment ol li h3 {
    margin: 30px 0;
}

article#apppay section.payment ol li h3 img {
    max-width: 85%;
}

/* article#apppay section.payment ol li h3 img.emphasis {
    max-width: 85%;
} */

article#apppay section.payment ol li p {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 1rem;
}

article#apppay section.payment .caption {
    width: 90%;
    margin: 0 auto 4px;
    text-align: center;
    font-weight: bold;
}

article#apppay section.payment .cv_btn {
    display: block;
    text-align: center;
}

article#apppay section.payment .cv_btn .caption {
    font-weight: bold;
}

article#apppay section.payment .cv_btn img {
    width: 80%;
    max-width: 500px;
}

article#apppay section.payment div.btn__sugukara {
    width: 75%;
    max-width: 440px;
    margin: 0 auto;
}

article#apppay section.payment div.btn__sugukara img {
    display: block;
    margin: auto;
    padding: 3rem 0 0;
}

/* 03.CAMPAIGN
--------------------------------------------------- */
article#apppay section#campaign {
    background: #ff7300 url("../img/campaign_bg.png") no-repeat center top -70px / 100% auto;
    color: #fff;
}

article#apppay section#campaign ul.attentionNote {
    font-size: 106%;
    margin-top: 4rem;
    padding: 0 5%;
}

/* 04.barcode
--------------------------------------------------- */
article#apppay section#barcode.payment {
    padding-bottom: 6em;
}

article#apppay .payment ol li {
    flex-basis: 45%;
}

article#apppay section#barcode .dounyutenpo {
    padding-bottom: 4rem;
    width: 90%;
    margin: 0 auto;
}

article#apppay section#barcode .dounyutenpo .shop_list {
    background-color: #fef2f3;
    border-radius: 20px;
}

article#apppay section#barcode .dounyutenpo .inner {
    padding: 1.6em;
    margin: 0 auto;
}

article#apppay section#barcode .dounyutenpo .inner h3 {
    text-align: center;
    margin: 0;
}

article#apppay section#barcode .dounyutenpo .inner h3 img {
    display: block;
    max-width: 450px;
    margin: 0 auto 22.4px;
}

article#apppay section#barcode .dounyutenpo .areaname {
    font-size: 120%;
    color: #eb6066;
    background: #fff;
    border: 1px solid #eb6066;
    padding: 0.2em 1em;
    text-align: center;
    border-radius: 100px;
}

article#apppay section#barcode .dounyutenpo .arealist li a {
    font-size: 18px;
    line-height: 2;
}

/* 05.FIX
--------------------------------------------------- */
article#apppay section#fix {
    background: url("../img/campaign_fix_bg.png") repeat-x center top / 50px auto;
    position: fixed;
    bottom: 0;
    z-index: 100;
    width: 100%;
    padding: 1.5rem 0 0.75rem;
}

article#apppay section#fix dl.container {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

/* 06.FAQ
--------------------------------------------------- */
.faq {
    width: 90%;
    margin: auto;
    padding: 3rem 0;
}

.faq__title {
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 24px;
}

.faq__box {
    margin: 0 0 16px;
}

.faq__box:last-child {
    margin: 0;
}

.faq__question {
    cursor: pointer;
    position: relative;
    background: #FFDE00;
    padding: 24px 48px 24px 56px;
    border-radius: 4px;
    color: #000;
    font-weight: 700;
}

.faq__question::before {
    content: "";
    background: url(../img/Q.svg) no-repeat center;
    width: 24px;
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: auto;
}

.faq__answer {
    position: relative;
    border-radius: 0 0 4px 4px;
    background: #FFFBD9;
    font-weight: 700;
}

.faq__answer::before {
    content: "";
    background: url(../img/A.svg) no-repeat center;
    width: 24px;
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: auto;
    font-size: 40px;
    font-weight: 700;
    color: #ff7300;
    letter-spacing: -0.2em;
}

.faq__answer a {
    color: #333;
    text-decoration: underline;
}
.faq__answer__inner {
    padding: 24px 48px 24px 56px;
}
.icon-wrap {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translatey(-50%);
    width: 38px;
    height: 38px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon:before,
.icon:after {
    position: absolute;
    content: "";
    display: block;
    transition: all 0.4s;
    background: #FF5C00;
    left: 50%;
    top: 50%;
    width: 35%;
    height: 3px;
    transform: translate(-50%, -50%);
}

.icon:before,
.icon.nt:before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.icon.open:before {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* ==============================================================
 Less than 1100px
================================================================= */
@media screen and (max-width: 1100px) {

    article#apppay div.container,
    article#apppay section.payment div.container {
        width: 90%;
    }

    article#apppay section#fix dl.container {
        width: 94%;
    }
}

/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 959px) {
    article#apppay .spNone {
        display: none;
    }

    article#apppay .pcNone {
        display: block;
    }

    article#apppay section.payment ol {
        display: block;
        margin: 3rem auto;
    }

    article#apppay section.payment ol li {
        display: flex;
        justify-content: space-between;
        margin: 0 auto 5.5rem;
        min-height: 220px;
    }

    article#apppay section.payment ol li:last-child {
        margin: 0 auto;
    }

    article#apppay section.payment ol li:nth-child(1)::before,
    article#apppay section.payment ol li:nth-child(2)::before {
        top: 5%;
        height: 17%;
    }

    article#apppay section.payment ol::after {
        width: 75px;
        height: 32.5px;
        background: url(../img/bottom.svg) no-repeat;
    }

    article#apppay section.payment ol li h3 {
        margin: 16px 0 8px;
    }

    article#apppay section.payment ol li p {
        font-size: clamp(16px,3vw,21px);
    }

    article#apppay section.payment ol li img {
        max-width: 40%;
        object-fit: contain;
    }

    article#apppay section.payment ol li .howto_steptxt {
        width: 55%;
    }

    article#apppay section.payment ol li h3 img {
        max-width: 85%;
    }

    /* article#apppay section.payment ol li h3 img.emphasis {
        max-width: 85%;
    } */
}

/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:559px) {
    article#apppay div.container {
        padding: 0;
    }

    article#apppay section#mv {
        padding: 10% 0 0;
    }

    article#apppay section#mv div.mv__head {
        width: 90%;
    }

    article#apppay section#mv dl.mv__note dt {
        margin-bottom: 1rem;
    }

    article#apppay section#mv dl.mv__note dt img,
    article#apppay section#mv dl.mv__note dd img {
        width: 90%;
    }

    article#apppay section.payment h2 {
        margin-bottom: 2rem;
        padding: 10px 10px 15px;
        top: -40px;
    }

    article#apppay section.payment h2 img {
        width: auto;
    }

    article#apppay section.payment p img {
        width: 90%;
    }

    article#apppay section.payment ol li figcaption {
        font-size: 3vw;
    }

    article#apppay section.payment .lg_wrapper {
        margin: 4.5rem auto 0;
    }

    article#apppay section.payment .spacing {
        margin-top: 4rem;
    }

    article#apppay section.payment .ic_image {
        width: auto;
        height: 15px;
        vertical-align: baseline;
    }

    article#apppay section#campaign ul.attentionNote {
        padding: 0;
    }
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {}