main.campaign *,
main.quiz {
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: 1.5;
}

main.campaign :is(i, em),
main.quiz :is(i, em) {
    font-style: normal;
}

/** Utility **/
.container { padding-inline: 20px; }

.d-none { display: none !important; }
.d-block { display: block !important; }

.position-relative { position: relative !important; }

.w-100 { width: 100% !important; }

.mt-n60 { margin-top: calc(-60 / 440 * 100vw); }
.mt-n80 { margin-top: calc(-80 / 440 * 100vw); }

.mb-5 { margin-bottom: calc(5 / 440 * 100vw); }
.mb-10 { margin-bottom: calc(10 / 440 * 100vw); }
.mb-15 { margin-bottom: calc(15 / 440 * 100vw); }
.mb-20 { margin-bottom: calc(20 / 440 * 100vw); }
.mb-25 { margin-bottom: calc(25 / 440 * 100vw); }
.mb-30 { margin-bottom: calc(30 / 440 * 100vw); }
.mb-35 { margin-bottom: calc(35 / 440 * 100vw); }
.mb-40 { margin-bottom: calc(40 / 440 * 100vw); }
.mb-45 { margin-bottom: calc(45 / 440 * 100vw); }
.mb-50 { margin-bottom: calc(50 / 440 * 100vw); }
.mb-60 { margin-bottom: calc(60 / 440 * 100vw); }
.mb-65 { margin-bottom: calc(65 / 440 * 100vw); }
.mb-90 { margin-bottom: calc(90 / 440 * 100vw); }

.mx-auto { margin-inline: auto; }

.p-0 { padding: 0; }

.pt-10 { padding-top: calc(10 / 440 * 100vw); }
.pt-90 { padding-top: calc(90 / 440 * 100vw); }

.pb-15 { padding-bottom: calc(15 / 440 * 100vw); }
.pb-50 { padding-bottom: calc(50 / 440 * 100vw); }
.pb-120 { padding-bottom: calc(120 / 440 * 100vw); }
.pb-140 { padding-bottom: calc(140 / 440 * 100vw); }

.px-20 { padding-inline: calc(20 / 440 * 100vw); }

.bg-primary { background-color: #EDE800 !important; }
.bg-white { background-color: #FFF !important; }

.text-white { color: #fff !important; }
.text-black { color: #000 !important; }
.text-primary { color: #2E3192 !important; }

.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-black { font-weight: 900 !important; }

.fs-12 { font-size: calc(12 / 440 * 100vw); }
.fs-14 { font-size: calc(14 / 440 * 100vw); }
.fs-15 { font-size: calc(15 / 440 * 100vw); }
.fs-20 { font-size: calc(20 / 440 * 100vw); }
.fs-25 { font-size: calc(25 / 440 * 100vw); }

.font-antique { font-family: "Zen Kaku Gothic Antique", sans-serif !important; }
.font-fjalla { font-family: "Fjalla One", sans-serif !important; }

.lh-160 { line-height: 1.6; }

.text-center { text-align: center !important; }

.list-unstyled li { list-style: none; }

/** Hero **/
#hero {
    background: url("../img/campaign/bg_main_hero.png") repeat top center/cover;
}
#hero h1 img {
    width: 100%;
}

/** Campaign 1 **/
#campaign1 {
    background: url("../img/campaign/bg_main_campaign1.png") no-repeat top center/cover;
}
#campaign1 img[src*="btn_main_campaign1_01"] {
    max-width: calc(196 / 440 * 100vw);
}
#campaign1 .box {
    padding: calc(30 / 440 * 100vw);
    border: 3px solid #EDE800;
    border-radius: 2.5em;
}
#campaign1 dt::before,
#campaign1 dt::after {
    content: "-";
}
#campaign1 img[src*="btn_main_campaign1_02"] {
    max-width: 322px;
}

/** Campaign 2 **/
#campaign2 {
    background: url("../img/campaign/bg_main_campaign2.png") no-repeat top center/100%;
}
#campaign2 > .container {
    margin-inline: 20px;
    padding: 0;
    border-radius: 40px;
    background-color: white;
}
#campaign2 img[src*="img_main_campaign2_01"] {
    border-radius: 40px 40px 0 0;
}
#campaign2 > div > div > div {
    display: flex;
    margin-inline: calc(-5 / 440 * 100vw);
}
#campaign2 > div > div > div > div {
    padding-inline: calc(5 / 440 * 100vw);
}
#campaign2 img[src*="img_main_campaign2_04"] {
    position: absolute;
    bottom: calc(100% - 5 / 440 * 100vw);
    right: calc(5 / 440 * 110vw);
    z-index: 2;
    width: calc(86 / 440 * 100vw);
}
#campaign2 > div > div > p:nth-of-type(3),
#campaign2 > div > div > p:nth-of-type(4) {
    padding-left: 1em;
    text-indent: -1em;
}
#campaign2 > div > div > p:nth-of-type(3)::before,
#campaign2 > div > div > p:nth-of-type(4)::before {
    content: "※";
}
#campaign2 ol li {
    margin-bottom: 1em;
}
#campaign2 ol li h5::before {
    content: "- ";
}
#campaign2 ol li h5::after {
    content: " -";
}
#campaign2 img[src*="btn_main_campaign2_01"] {
    max-width: 287px;
}
#campaign2 ul li {
    padding-left: 1em;
    text-indent: -1em;
}
#campaign2 ul li::before {
    content: "・";
}
#campaign2 img[src*="btn_main_campaign2_02"] {
    max-width: 276px;
}

@media (min-width: 992px) {
    /** Utility **/
    .container { max-width: calc(1077px + 40px); margin-inline: auto; }

    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }

    .mt-lg-n120 { margin-top: max(-120px, calc(-120 / 1280 * 100vw)); }
    .mt-lg-n190 { margin-top: max(-190px, calc(-190 / 1280 * 100vw)); }

    .mb-lg-10 { margin-bottom: min(10px, calc(10 / 1280 * 100vw)); }
    .mb-lg-20 { margin-bottom: min(20px, calc(20 / 1280 * 100vw)); }
    .mb-lg-25 { margin-bottom: min(25px, calc(25 / 1280 * 100vw)); }
    .mb-lg-30 { margin-bottom: min(30px, calc(30 / 1280 * 100vw)); }
    .mb-lg-35 { margin-bottom: min(35px, calc(35 / 1280 * 100vw)); }
    .mb-lg-45 { margin-bottom: min(45px, calc(45 / 1280 * 100vw)); }
    .mb-lg-50 { margin-bottom: min(50px, calc(50 / 1280 * 100vw)); }
    .mb-lg-55 { margin-bottom: min(55px, calc(55 / 1280 * 100vw)); }
    .mb-lg-60 { margin-bottom: min(60px, calc(60 / 1280 * 100vw)); }
    .mb-lg-65 { margin-bottom: min(65px, calc(65 / 1280 * 100vw)); }
    .mb-lg-70 { margin-bottom: min(70px, calc(70 / 1280 * 100vw)); }
    .mb-lg-75 { margin-bottom: min(75px, calc(75 / 1280 * 100vw)); }
    .mb-lg-85 { margin-bottom: min(85px, calc(85 / 1280 * 100vw)); }
    .mb-lg-100 { margin-bottom: min(100px, calc(100 / 1280 * 100vw)); }

    .pt-lg-170 { padding-top: min(172px, calc(172 / 1280 * 100vw)); }
    
    .pb-lg-290 { padding-bottom: min(290px, calc(290 / 1280 * 100vw)); }
    .pb-lg-300 { padding-bottom: min(300px, calc(300 / 1280 * 100vw)); }

    .px-lg-30 { padding-inline: min(30px, calc(30 / 1280 * 100vw)); }

    .fw-lg-normal { font-weight: 400 !important; }
    .fw-lg-bold { font-weight: 700 !important; }

    .fs-lg-15 { font-size: min(15px, calc(15 / 1280 * 100vw)); }
    .fs-lg-20 { font-size: min(20px, calc(20 / 1280 * 100vw)); }
    .fs-lg-24 { font-size: min(24px, calc(24 / 1280 * 100vw)); }
    .fs-lg-40 { font-size: min(40px, calc(40 / 1280 * 100vw)); }
    .fs-lg-55 { font-size: min(55px, calc(55 / 1280 * 100vw)); }

    .lh-lg-150 { line-height: 1.5 !important; }

    .text-lg-left { text-align: left !important; }
    .text-lg-center { text-align: center; }

    /** Hero **/
    #hero h1 img {
        width: auto;
        max-width: 100%;
        max-height: 100vh;
        margin-inline: auto;
    }
    #hero > div {
        background-image: url("../img/campaign/bg_main_hero_lg.png"); 
    }

    /** Campaign 1 **/
    #campaign1 {
        background-image: url("../img/campaign/bg_main_campaign1_lg.png");
    }
    #campaign1 img[src*="btn_main_campaign1_01"] {
        max-width: 373px;
    }
    #campaign1 .box {
        padding-block: min(35px, calc(35 / 1280 * 100vw));
    }
    #campaign1 dt::before {
        content: none;
    }
    #campaign1 dt::after {
        content: "：";
    }
    #campaign1 ol {
        display: flex;
        margin-inline: min(-15px, calc(-15 / 1280 * 100vw));
    }
    #campaign1 li {
        padding-inline: min(15px, calc(15 / 1280 * 100vw));
    }
    #campaign1 img[src*="btn_main_campaign1_02"] {
        max-width: 615px;
    }

    /** Campaign 2 **/
    #campaign2 {
        background-image: url("../img/campaign/bg_main_campaign2_lg.png");
    }
    #campaign2 > .container {
        margin-inline: auto;
    }
    #campaign2 img[src*="img_main_campaign2_04"] {
        bottom: calc(100% - 10 / 1280 * 100vw);
        width: min(203px, calc(203 / 1280 * 100vw));
    }
    #campaign2 ol li {
        display: flex;
        margin-bottom: 0;
    }
    #campaign2 ol li h5::before {
        content: none;        
    }
    #campaign2 ol li h5::after {
        content: "｜";
    }
    #campaign2 img[src*="btn_main_campaign2_01"] {
        max-width: 507px;
    }
    #campaign2 img[src*="btn_main_campaign2_02"] {
        max-width: 445px;
    }
}