@charset "utf-8";
/* CSS Document */
/* reset */
/* /reset */

/* all */
#campaign {
    font-family: "游ゴシック体 Pr6N M", sans-serif;
    font-size: 10px;
    color: #393939;
    padding-top: 90px;
    background-color: #f3f3e3;
    padding-bottom: 62px;
}
#campaign picture,
#campaign figure { display: block;}

#campaign img { width: 100%;}

#campaign a {
    opacity: 1;
	transition: opacity .25s ease-in-out;
}
#campaign a:hover {
    opacity: .65;
    text-decoration: none;
}
#campaign .br_sp { display: none;}

#campaign .subheading01 {
    max-width: 500px;
    margin: 0 auto;
    font-family: "ヒラギノ明朝 W4 JIS2004", serif;
    color: #E95E3D;
    font-style: italic;
    font-size: 36px;
    text-align: center;
    line-height: 1.5;
    padding-bottom: 48px;
}
#campaign .subheading01 .decoration {
    font-family: "游ゴシック体 Pr6N M", sans-serif;
    font-size: 22px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #0AC28F;
}
#campaign .subheading01 .decoration > span {
    letter-spacing: 3px;
    margin-left: 3px;
}
#campaign .subheading01 .decoration::before,
#campaign .subheading01 .decoration::after {
    content:"";
    display: block;
    width: 2.986%;
    height: auto;
    padding: 1.4% 0;
    background-image: url(../img/decoration_headline01.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 2.6%;
}
#campaign .subheading01 .decoration::after {
    transform: scale(-1, 1);
}

@media screen and (max-width:700px) {
    #campaign .br_pc { display: none;}
    #campaign .br_sp { display: block;}
    #campaign {
        padding-top: 120px;
        padding-bottom: 16%;
    }
    #campaign .subheading01 .decoration { font-size: 4.9867vw;}
    #campaign .subheading01 .decoration::before,
    #campaign .subheading01 .decoration::after {
        width: 3.385%;
        padding: 1.585% 0;
    }
    #campaign .subheading01 {
        font-size: 8vw;
        padding-bottom: 10.1%;
    }
}
/* /all */

/* header */
#campaign h1 {
    background-image: url(../img/bg_kv.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}
#campaign h1 picture {
    max-width: 1440px;
    margin: 0 auto;
}
#campaign .main-lead {
    max-width: 800px;
    width: 89.3334%;
    margin: 0 auto;
    font-family: "ヒラギノ明朝 W3 JIS2004", serif;
    font-size: 17px;
    line-height: 2.4;
    text-align: center;
    padding: 40px 0 30px;
}
@media screen and (max-width:700px) {
    #campaign h1 { background-image: none;}
    #campaign .main-lead {
        font-size: 4vw;
        text-align: left;
        padding: 9.2% 0 10.5%;
    }
}
/* /header */

/* overview */
#campaign .overview {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFF;
    background-image: url(../img/bg_overview_pc.webp);
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 66px;
    padding-bottom: 82px;
    border-radius: 0 0 40px 40px;
}

#campaign .overview .subheading01 + .grid-container {
    max-width: 666px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45.4955% 45.4955%;
    justify-content: space-between;
}
#campaign .overview .subheading02 {
    width: 303px;
    margin: 0 auto;
    font-family: "游ゴシック体 Pr6N D", sans-serif;
    font-size: 22px;
    text-align: center;
    background-image: url(../img/decoration_headline02.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 15px 0 25px;
    line-height: 1;
    position: relative;
}
#campaign .overview .subheading01 + .grid-container p {
    font-family: "游ゴシック体 Pr6N D", sans-serif;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    padding: 13px 0 2px;
    background-image: url(../img/bg_marker01.webp);
    background-repeat: no-repeat;
    background-size: 68.6469%;
    background-position: center bottom;
}
#campaign .overview .subheading01 + .grid-container ul {
    padding-top: 22px;
}
#campaign .overview .subheading01 + .grid-container li {
    font-size: 16px;
    line-height: 1.3;
    text-indent: -1.3em;
    padding-left: 1.3em;
}
#campaign .overview li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #393939;
    margin: 0 9px 4px;
}
#campaign .overview .apply {
    padding-top: 63px;
}
#campaign .overview .apply .subheading_apply {
    width: 303px;
    margin: 0 auto;
    font-size: 22px;
    font-family: "游ゴシック体 Pr6N M", sans-serif;
    color: #FFF;
    text-align: center;
    background-image: url(../img/decoration_headline03.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 7px 0 16px;
    position: relative;
}
#campaign .overview .apply .subheading_apply::after {
    content: "";
    display: block;
    width: 45px;
    height: 43px;
    background-image: url(../img/decoration_apply_pc.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -19px;
    right: -82px;
}
#campaign .overview .apply .grid-container {
    width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48.75% 48.75%;
    justify-content: space-between;
    padding-top: 39px;
}
#campaign .overview .apply .grid-item {
    width: 100%;
    border-radius: 40px;
    background-color: #F3FAF8;
    padding-bottom: 18px;
    position: relative;
}
#campaign .overview .apply .grid-item .decoration_step {
    width: 100%;
    font-family: "ヒラギノ明朝 W4 JIS2004", serif;
    font-style: italic;
    text-align: center;
    color: #E95E3D;
    font-size: 18px;
    background-image: url(../img/decoration_headline05.webp);
    background-repeat: no-repeat;
    background-size: 20.3847%;
    background-position: center;
    padding: 11px 0;
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#campaign .overview .apply .grid-item .decoration_step span {
    font-size: 26px;
    font-style: italic;
}
#campaign .overview .apply .grid-item p {
    font-family: "游ゴシック体 Pr6N D", sans-serif;
    font-size: 18px;
    text-align: center;
    line-height: 1.5;
    padding: 57px 0 19px;
}
#campaign .overview .apply .grid-item picture {
    width: 89.7436%;
    margin: 0 auto;
}
#campaign .overview .prize {
    padding-top: 84px;
    position: relative;
}
#campaign .overview .prize .subheading02::before {
    content: "";
    display: block;
    width: 45px;
    height: 41px;
    background-image: url(../img/decoration_prize_pc.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -34px;
    left: -64px;
}

#campaign .overview .prize .grid-container {
    max-width: 660px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 57.7273% 38.1819%;
    justify-content: space-between;
}
#campaign .overview .prize .grid-item p {
    font-family: "游ゴシック体 Pr6N D", sans-serif;
    font-size: 22px;
    text-align: left;
    line-height: 1.8;
    padding-top: 33px;
}
#campaign .overview .prize .grid-item p span {
    color: #E95E3D;
    background-image: url(../img/bg_marker02.webp);
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
}
#campaign .overview .prize .grid-item picture {
    padding-top: 7px;
    padding-bottom: 28px;
}

#campaign .overview .prize .infinite-slider .swiper-wrapper { transition-timing-function: linear;}
#campaign .overview .prize .infinite-slider .swiper-slide {
	width: 280px;
    margin: 0 5px;
}

#campaign .overview .winning {
    position: relative;
    padding: 87px 20px 0;
}
#campaign .overview .winning .subheading02::before {
    content: "";
    display: block;
    width: 43px;
    height: 41px;
    background-image: url(../img/decoration_winning_pc.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -30px;
    right: -77px;
}
#campaign .overview .winning .subheading02 + ul {
    padding-top: 25px;
    padding-bottom: 53px;
}
#campaign .overview .winning .subheading02 + ul li {
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
}
#campaign .overview .winning .container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #F3FAF8;
    border-radius: 40px;
    padding: 42px 20px 0;
}
#campaign .overview .winning .container .btn-apply {
    width: 460px;
    height: 80px;
    margin: 0 auto;
    background-color: #E2755B;
    border-radius: 70px;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    box-shadow: 0px 4px #AF4D35;
}
#campaign .overview .winning .container .btn-apply span {
    display: block;
    width: 73%;
    text-align: center;
    font-size: 24px;
    color: #FFF;
}
#campaign .overview .winning .container .btn-apply::after {
    content: "";
    display: block;
    background-image: url(../img/btn_vector.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 5.7%;
    height: auto;
    padding: 2% 0;
    margin-right: 8.1%;
}
#campaign .overview .winning .caution {
    color: #777777;
    padding-bottom: 21px;
}
#campaign .overview .winning .caution .subheading_caution {
    font-size: 15px;
    font-family: "游ゴシック体 Pr6N R", sans-serif;
    text-align: center;
    padding-top: 28px;
    padding-bottom: 5px;
}
#campaign .overview .winning .caution ul {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 5px;
}
#campaign .overview .winning .caution li {
    font-size: 14px;
    font-family: "游ゴシック体 Pr6N R", sans-serif;
    text-align: left;
    line-height: 1.3;
    text-indent: -1.25em;
    padding-left: 1.25em;
    padding-bottom: 8px;
}
#campaign .overview .winning .caution li::before {
    margin: 0 7px 4px;
    background-color: #777777;
}
#campaign .overview .winning .caution .btn_more {
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#campaign .overview .winning .caution .btn_more span { margin-left: 4px;}

@media screen and (max-width:800px) {
    #campaign .overview .apply .grid-container {
        display: block;
        width: 390px;
        padding-top: 40px;
    }
    #campaign .overview .apply .grid-item { margin-bottom: 50px;}
    #campaign .overview .prize { padding-top: 34px;}
    #campaign .overview .prize::before {
        top: 0px;
        left: 185px;
    }
}

@media screen and (max-width:700px) {
    #campaign .overview {
        background-image: url(../img/bg_overview_sp.webp);
        padding-top: 12.8%;
        padding-bottom: 10.7%;
        border-radius: 0;
    }
    #campaign .overview .prize .infinite-slider .swiper-slide {
		width: 42.5%;
		margin: 0 0.5%;
	}
	#campaign .overview .prize.infinite-slider { padding-bottom: 27%;}

    #campaign .overview .subheading01 + .grid-container { display: block;}
    #campaign .overview .subheading02 {
        width: 65.2454%;
        font-size: 4.9867vw;
        padding: 3.1% 0 5.5%;
    }
    #campaign .overview .subheading01 + .grid-container p {
        font-size: 4.9867vw;
        padding: 3.6% 0 0.4%;
        margin-bottom: 13.8%;
        background-size: 47.1467%;
    }
    #campaign .overview .subheading01 + .grid-container ul { padding: 5.5% 5.3333% 0;}
    #campaign .overview .subheading01 + .grid-container li { font-size: 3.6267vw;}
    #campaign .overview .grid-container .grid-item:last-of-type .subheading02 { position: relative;}
    #campaign .overview .grid-container .grid-item:last-of-type .subheading02::before {
        content: "";
        display: block;
        width: 129.8362%;
        height: auto;
        padding: 13.5% 0;
        background-image: url(../img/decoration_eligibility_sp.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: -97%;
        left: -17.5%;
    }
    #campaign .overview .apply .subheading_apply {
        width: 65.2454%;
        font-size: 4.9867vw;
        padding: 2.7% 0 5%;
        line-height: 1;
    }
    #campaign .overview .apply .subheading_apply::after {
        width: 5.14%;
        height: auto;
        padding: 2.5% 0;
        background-image: url(../img/decoration_apply_sp.webp);
        top: -11%;
        right: -13%;
    }
    #campaign .overview .apply .grid-container {
        width: 89.3334%;
        padding-top: 6%;
    }
    #campaign .overview .apply .grid-item {
        padding-bottom: 4.5%;
        margin-bottom: 0;
    }
    #campaign .overview .apply .grid-item:first-of-type { margin-bottom: 11.5%;}
    #campaign .overview .apply .grid-item .decoration_step {
        font-size: 4.1227vw;
        top: -8.5%;
    }
    #campaign .overview .apply .grid-item p {
        font-size: 4.1227vw;
        padding: 14% 0 5%;
    }
    #campaign .overview .apply .grid-item .decoration_step span { font-size: 5.9547vw;}
    #campaign .overview .prize { padding-top: 13%;}
    #campaign .overview .prize .subheading02::before {
        width: 15.528%;
        height: auto;
        padding: 10% 0;
        background-image: url(../img/decoration_prize_sp.webp);
        top: -42%;
        left: -14.5%;
    }
    #campaign .overview .prize .grid-container {
        width: 89.3334%;
        margin: 0 auto;
        display: block;
    }
    #campaign .overview .prize .grid-item p {
        font-size: 4.9867vw;
        padding-top: 8.5%;
    }
    #campaign .overview .prize .grid-item p span { background-image: none;}
    #campaign .overview .prize .grid-item picture {
        width: 77.6389%;
        margin: 0 auto;
        padding-top: 4.5%;
        padding-bottom: 7.5%;
    }
    #campaign .overview .prize .infinite-slider .swiper-slide {
        width: 63.4667%;
        margin: 0 1.2%;
    }
    #campaign .overview .winning { padding: 13.1% 0 0;}
    #campaign .overview .winning .subheading02::before {
        width: 14.829%;
        height: auto;
        padding: 7.3% 0;
        background-image: url(../img/decoration_winning_sp.webp);
        top: -70%;
        right: -10.5%;
    }
    #campaign .overview .winning .subheading02 + ul {
        width: 89.3334%;
        margin: 0 auto;
        padding-top: 5.7%;
        padding-bottom: 9.5%;
    }
    #campaign .overview .winning .container {
        width: 89.3334%;
        margin: 0 auto;
        border-radius: 20px;
        padding: 8.5% 5% 0;
    }
    #campaign .overview .winning .caution .subheading_caution { font-size: 3.4667vw;}
    #campaign .overview .winning .caution li { font-size: 3.2vw;}
    #campaign .overview .winning .caution .btn_more { font-size: 3.4667vw;}
    #campaign .overview .winning .subheading02 + ul li { font-size: 3.6267vw;}
    #campaign .overview .winning .container .btn-apply {
        width: 100%;
        height: auto;
        padding: 5.8% 0 4.2%;
        position: relative;
    }
    #campaign .overview .winning .container .btn-apply span {
        width: 81.5%;
        font-size: 4.6614vw;
    }
    #campaign .overview .winning .container .btn-apply::after {
        width: 6.5%;
        margin-right: 7%;
        margin-bottom: 1.5%;
    }
    #campaign .overview .winning .container .btn-apply::before {
        content: "";
        display: block;
        width: 17.237%;
        height: auto;
        padding: 6.755% 0;
        background-image: url(../img/decoration_btn_sp.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: -102%;
        left: 1.3%;
    }
}
/* /overview */

/* recomendation */
#campaign .recommendation {
    max-width: 1000px;
    margin: 0 auto;
    padding: 92px 20px 0;
}
#campaign .recommendation .subheading01 {
    text-shadow: 2px 2px #FFF;
}
#campaign .recommendation .subheading01 span {
    text-shadow: none;
}
#campaign .recommendation .subheading01 .decoration {
    letter-spacing: 0;
}
#campaign .recommendation .subheading01 .decoration::before,
#campaign .recommendation .subheading01 .decoration::after {
    margin: 0 2.8%;
}
#campaign .recommendation .grid-container {
    font-family: "游ゴシック体 Pr6N D", sans-serif;
    max-width: 800px;
    display: grid;
    grid-template-columns: 485px 198px;
    column-gap: 22px;
    justify-content: left;
    background-color: #FFF;
    border-radius: 40px;
    padding: 24px 0 27px 60px;
    margin-bottom: 40px;
}
#campaign .recommendation .grid-container .subheading03 {
    font-size: 22px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding-top: 25px;
    padding-bottom: 19px;
}
#campaign .recommendation .grid-container .subheading03::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../img/decoration_headline04.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 12px;
}
#campaign .recommendation .grid-container p {
    font-family: "游ゴシック体 Pr6N R", sans-serif;
    font-size: 16px;
}
#campaign .recommendation .subheading01 + .grid-container p {
    padding-right: 40px;
}
#campaign .recommendation .grid-container figure {
    grid-column-start: 2;
    grid-row: 1 / 4;
}
#campaign .recommendation .grid-container:last-of-type {
    grid-template-columns: 364px 265px;
    column-gap: 52px;
    padding-top: 47px;
    padding-bottom: 38px;
    margin-left: auto;
}
#campaign .recommendation .grid-container:last-of-type .subheading03 { padding-top: 0;}
#campaign .recommendation .grid-container:last-of-type figure { padding-top: 12px;}
#campaign .recommendation .grid-container br { display: none;}
#campaign .recommendation a.btn_download { color: #393939;}

#campaign .recommendation .btn_download {
    width: 344px;
    height: 60px;
    border-radius: 40px;
    border: solid 1px currentColor;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    box-sizing: border-box;
    margin-top: 13px;
}
#campaign .recommendation .btn_download span {
    width: 83%;
    font-family: "游ゴシック体 Pr6N M", sans-serif;
    font-optical-sizing: auto;
    font-size: 18px;
    text-align: center;
}
#campaign .recommendation .btn_download::after {
    content: "";
    display: block;
    width: 8%;
    height: 100%;
    background-image: url(../img/btn_vector_black.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-right: 5%;
}

@media screen and (max-width:860px) {
    #campaign .recommendation .grid-container,
    #campaign .recommendation .grid-container:last-of-type {
        padding: 4% 5%;
    }
}
@media screen and (max-width:800px) {
    #campaign .recommendation .grid-container {
        grid-template-columns: 61% 32%;
        column-gap: 0;
        justify-content: space-between;
    }
    #campaign .recommendation .grid-container br { display: block;}
    #campaign .recommendation .grid-container .subheading03 {
        padding-top: 0;
        padding-bottom: 3%;
    }
    #campaign .recommendation .grid-container:last-of-type {
        grid-template-columns: 61% 37%;
        column-gap: 0;
        margin: 0  auto;
    }
}
@media screen and (max-width:700px) {
    #campaign .recommendation { padding: 11.8% 0 0;}
    #campaign .recommendation .subheading01 { padding-bottom: 5%;}
    #campaign .recommendation .grid-container {
        display: block;
        width: 89.3334%;
        border-radius: 30px;
        margin: 0 auto 8.2%;
        padding: 7.8% 5% 0;
    }
    #campaign .recommendation .grid-container .subheading03 {
        font-size: 4.9867vw;
        padding-bottom: 1.5%;
    }
    #campaign .recommendation .grid-container p { font-size: 3.7334vw;}
    #campaign .recommendation .subheading01 + .grid-container p { padding-right: 0;}
    #campaign .recommendation .grid-container .subheading03::before {
        width: 11.43%;
        height: auto;
        padding: 5.715% 0;
        margin-right: 2.5%;
    }
    #campaign .recommendation .grid-container figure {
        width: 56.5%;
        margin-left: 31%;
        padding-top: 4.5%;
    }
    #campaign .recommendation .grid-container:last-of-type .subheading03 {
        padding-top: 3.4%;
        padding-bottom: 4%;
        letter-spacing: -0.03em;
    }
    #campaign .recommendation .grid-container:last-of-type {
        display: grid;
        grid-template-columns: 100%;
        padding: 4% 5% 7.2%;
    }
    #campaign .recommendation .grid-container:last-of-type p { order: 1;}
    #campaign .recommendation .grid-container:last-of-type figure {
        width: 81.5%;
        grid-column-start: unset;
        grid-row: unset;
        order: 2;
        margin-left: 8.3%;
        padding-top: 8.5%;
    }
    #campaign .recommendation .grid-container:last-of-type .btn_download {
        order: 3;
        width: 100%;
        height: auto;
        padding: 3.9% 0;
        margin-top: 11.5%;
    }
    #campaign .recommendation .btn_download { width: 100%;}
    #campaign .recommendation .btn_download span { font-size: 4.2667vw;}
}
/* /recomendation */