@charset "UTF-8";

:root {
    --fnt-blue: #004c8a;
    --fnt-sky:#5cb2f8;
    --contents-wd: 90%;
    --font-14: 0.875rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-22:1.375rem;
    --font-24:1.5rem;
    --font-28: 1.75rem;
    --font-30: 1.875rem;
    --font-36: 2.25rem;
    --font-38:2.375rem;
    --font-44:2.75rem;
}

html{
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #3a3012;
    font-size: clamp(0.9rem, 0.95rem + 0.4vw, 1rem);
    background-color: #fff;
}

.attend{ font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; font-size: var(--font-14);}
.wrapper{width: 90%; max-width: 980px; padding: 7% 0; margin: 0 auto;}
.fnt_red{color: #cc002b; font-weight: 600;}
.fnt_yellow{color: #fcff00;}
.marker_yellow{ background: linear-gradient(transparent 60%, #ffff00 60%);}
.caution {
	font-size: 0.5em;
	vertical-align: top;
}

.sp-only{display: none;}
a:hover{opacity: .8;}
video{width: 100%;}

.caution {
	font-size: 0.5em;
	vertical-align: top;
}

picture{
    vertical-align: top;
}



/* lazyloaded
=======================================*/
.box-fadein img{ opacity: 0; -webkit-transition: opacity 3s; transition: opacity 3s; }
.box-fadein.lazyloaded img.lazyloaded {opacity: 1;}
@keyframes scl {
   0%, 100% { transform: scale(0.95) }
   50% { transform: scale(1.0) }
}

.head{ position: fixed; right: 2%;  z-index: 1000; top: 2%; }
.flattery_area{display: none;}
.flattery{display: flex; align-items: center; width: 40%; max-width: 400px; gap : 0 10px; justify-content: center; z-index: 10;}

.kv{ background: url(../images/bodyepi/bg.webp) center/cover no-repeat;}
.kv h1{width: 90%; max-width: 980px; margin: 0 auto;}
.kv .attend{
    margin-top: 10px;
    width: 90%;
    max-width: 980px; margin: 0 auto
}

/* offer */
.offer{background: url(../images/bodyepi/offer_bg.webp) center/cover no-repeat;}
.offer_inner{background-color: #fff; padding: 7%; box-shadow: 0 0 8px gray;}
.offer_price{display: block;}
.btn_area {
    margin: 5% auto 0;
    display: flex;
    gap: 0 20px;
}
.btn_area .tel_attend{
    color: #333; text-align: center;  padding: 3% 0 0;
    font-size: var(--font-18);
}
.attend{margin-top: 20px;}


/* ranking */
.ranking{background: #fff;}
.ranking .ttl{
    text-align: center; font-size: var(--font-36); padding: 20px 0 25px;
    background: url(../images/bodyepi/ranking_bg.webp) left/contain repeat-x;
    color: #fff;
    line-height: 1.3;
}
.ranking .ttl span{font-size: var(--font-28); font-weight: 400;}
.ranking_con{
    margin: 5% auto 7%;
    width: 90%;
    max-width: 980px;

}
.ranking_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 10px;
    justify-content: center;
}
.ranking_item1{width: 60%;}
.ranking_item2,.ranking_item3{width: 48%;}

/* PARTS */
.parts{background: url(../images/bodyepi/blue_bg.webp) center/cover no-repeat; }
.parts_con{ background: #fff; padding: 7%;}
.parts_desc{width: 90%; margin: 0 auto;}
.offer_btn{
    width: 90%;
    max-width: 880px;
    margin: 7% auto;
}

/* ABOUT */
.about{background: #004c8a;}
.about_inner{  background-color: #fff; padding: 7% 10%; margin-top: 5%;}
.about_video {display: flex; width: 100%; margin: 0 auto; }
.about_video video{width: 48%; margin: 0 1%; overflow: hidden; border-radius: 8px;}
.about_con_ttl{color: #fff; text-align: center; font-size: var(--font-28);}
.about_con_ttl span{font-size: var(--font-36);}
.about_inner .attend{text-align: right;}
.about .arrow{width: 10%; margin: 5% auto 3%;}

/* POINT */
.point{background: #fff;}
.point .wrapper{padding-bottom: 0;}
.point .ttl{ background: linear-gradient(#d3e4fe 0%, #edf4ff 100%) no-repeat 0% 0% / 100% 100% ;}
.point .ttl picture{display: block; width: 60%; margin: 0 auto; padding: 3% 0;}
.point_list{display: flex; flex-direction: column; gap: 50px 0;}
.point_item_ttl{background:var(--fnt-sky); padding: 2%; margin-bottom: 2%;}
.point_item_ttl picture{display: block; width: 60%;}
.point_item_desc{font-size: var(--font-18); margin-left: 1%;}
.point_item_img{border: solid 1px #8ac5f6; margin: 3% auto 0; width: 90%;}
.point_item_img picture{display: block; width: 30%; margin: 0 auto;}
.point_list .dashed{border: dashed 1px var(--fnt-sky);}
.point_item_img2{padding: 5%;}
.point_item_sample1{width: 70%; margin: 0 auto 20px;}
.point_item_sample2{width: 90%; margin: 0 auto;}
.point_item .attend{ width: 90%; margin: 30px auto 0;}


/* step */
.step{background: #d8e4ee;}
.step .wrapper{padding-top: 5%;}
.step .ttl{
    background: url(../images/bodyepi/stripe_bg.webp) center/contain repeat;
    text-align: center;
    padding: 3% 0;
}
.step .ttl h2{
    color: #fff;
    font-size: var(--font-36);
}
.step_ttl_time{
    background: #fff;
    display: inline-block;
    border-radius: 100px;
    padding: 5px 30px;
    color: var(--fnt-blue);
    font-size: var(--font-18);
    margin-top: 1%;
}

.step_list{display: flex; flex-direction: column; gap: 40px 0;}
.step_item_con{border-radius: 10px; background-color: #fff; padding: 3%; }
.step_item{display: flex;  gap: 0 20px ;}
.step_item_desc_ttl{display: flex; gap: 0 15px; align-items:baseline}
.step_item_desc_ttl h3{color: #cc002b; font-size: var(--font-28); font-weight: 500;  margin-bottom: 10px;}
.step_item_img{width: 25%;}
.step_item_desc{width: 75%;}
.step_item_desc_num{width: 70px;}
.step_item_text{font-size: var(--font-18);}

.step_item_point{
    width: 70%;
    background-color: #f9f6ee;
    border: 1px solid #ba973b;
    border-radius: 5px;
    padding: 2% 3%;
    margin-top: 3%;
    font-size: var(--font-18);
}
.step_item_check{width: 80%; margin-top: 20px;}
.step_list .attend{margin: 0;}
.step .offer_btn{margin-bottom: 0; width: 100%;}


/* question */
.question{background: #fff;}
.question .ttl{font-size: var(--font-36); color: var(--fnt-blue); text-align: center;}
.faq_main{margin-top: 3%;}
.faq_item {
    margin-bottom: 2%;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    font-size: var(--font-18);
}
.faq_item:last-child{margin-bottom: 0;}
.faq_item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2% 3% 2% 8%;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--fnt-blue);
    display: inline-block;
    width: 100%;
}

.faq_item summary::before,
.faq_item p::before {
    position: absolute;
    left: 3%;
    font-weight: 600;
    font-size: 1.3em;
    top: 18%;
}

.faq_item summary::before { color: #fff; content: "Q.";}
.faq_item summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: "";
    transition: transform .5s;
    display: inline-block;
    position: absolute;
    right: 3%;
    top: 40%;
}


.faq_item[open] summary::after { transform: rotate(225deg);}
.faq_answer {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding:2% 4.5% 3%;
    font-size: var(--font-18);
    color: #333;
    transition: transform .5s, opacity .5s;
    border: solid 1px #929292;
    font-weight: 500;
    line-height: 1.7;
}

.faq_item[open] .faq_answer { transform: none; opacity: 1;}
.faq_answer::before {
    content: "A.";
    margin-right: 10px;
    color: #de0010;
}
.faq_answer_text{display: inline;}
.qa_img{margin: 3% auto;}
.qa_kouka{width: 80%;}

/* zisseki */
.zisseki{background: #65ace7;}
.zisseki .ttl{width: 90%; margin: 0 auto;}
.zisski_graph_con{margin: 3% auto; width: 70%;}
.zisseki_graph_con_img{width: 60%; margin: 0 auto;}
.zisski_graph_con .attend{text-align: center; color: #fff; margin-top: 20px;}
.zisseki_enquete_con{display: flex; gap: 0 50px; width: 90%; margin: 0 auto;}
.zisseki_enquete{border: solid 1px #fff; padding: 7% 3% 5%; margin-top: 10%; position: relative;}
.zisseki_enquete_ttl{
    text-align: center;
    background: #65ace7;
    position: absolute;
    top: -25px;
    left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    font-size: var(--font-30);
    padding: 0 40px;
    color: #fff;
}
.zisseki_enquete .attend{color: #fff; margin-top: 30px;}

/* PLAN */
.plan_ttl{
    background: #fbfbfb;
    position: relative;
    padding: 3% 0 0;
    text-align: center;
}
.plan_ttl::after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50vw 0 50vw;
    border-color: #fbfbfb transparent transparent transparent;
    position: absolute;
    bottom: -50px;
    left: 0;
}

.plan_ttl p{font-size: var(--font-22);}
.plan_ttl h2{font-size: var(--font-36); color: var(--fnt-blue);}
.plan_inner{background: #e2dfdf;}
.plan_inner_desc{
    text-align: center;
    font-size: var(--font-20);
    font-weight: 500;
    line-height: 1.6;
}

.plan_inner_op{
    border: 1px solid #7a7a7a;
    background:#fff ;
    margin-top: 3%;
    padding: 3% 5%;
}

.plan_inner_op_ttl{
    color: var(--fnt-blue);
    text-align: center;
    font-size: var(--font-28);
    font-weight: 500;
}
.plan_inner_op_ttl span{font-size: var(--font-24);}
.plan_inner_op_desc{width: 75%; margin: 3% auto 0;}


/* TEL */

.tel_area{ padding: 3%; background: #f6fbfd;}
.tel_area a{ text-decoration: none; color: #3a3012;}
.telbox{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 30px;
}

.telbox_message{
    font-size: var(--font-22);
    border: solid 1px #7a7a7a;
    padding: 1% 6%;
}

.footer_sp{display: none;}
.tel_area .number { font-size: var(--font-38); letter-spacing: 0.05em; line-height: 1; margin-bottom: 10px;}

/* footer */
.footer_attend{background-color: #d8e4ee;}
.footer_attend .attend:nth-child(1){margin-bottom: 20px;}
.footer_attend .attend:nth-child(2){margin-bottom: 40px;}
.footer_attend h4{margin-bottom: 3px;}
.footer_attend .attend{margin-top: 0;}
.footer_attend .attend p{ line-height: 1.6;}

.lp_footer{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    padding: 4% 0;
}

.lp_footer_logo{ width: 20%; margin: 0 auto 20px;}
.footer_link{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.footer_link a{
    color: #333;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-weight: 400;
    position: relative;
    padding-left: 20px;
    display: inline-block;
}
.footer_link a::before{
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.footer_link a:hover{ color: var(--fnt-pink);}
.lp_footer .copy{
    text-align: center;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: var(--font-14);
    font-weight: 400;
    margin-top: 5%;
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    .wrapper,.ranking_con,.offer_btn{ width: 90%; max-width: 800px;}
    .step_list{gap: 30px 0;}
    .step_item_desc_ttl h3{font-size: var(--font-24);}
    .step_item_desc_num{width: 60px;}
    .step_item_desc_ttl{gap: 0 10px;}
    .step_item_point{width: 90%;}
    .about_con_ttl{font-size: var(--font-28);}
    .point_item_ttl picture{width: 80%;}
    .step_item_check{width: 90%;}
    .telbox_message{font-size: var(--font-20);}
    .btn_area .tel_attend{font-size: 1rem;}
    .point .ttl picture{width: 70%;}
}


/* スマートフォン用 */
@media screen and (max-width: 768px) {
    .wrapper{ width: 95%;}
    .pc-only{display: none;}
    .attend{font-size: 12px; line-height: 1.6; margin-top: 10px;}
    .flattery_area{
        background-color: rgba(236, 236, 224, .8);
        height: 60px;
        position: fixed; width:100%;  z-index: 10; bottom: 0;
    }

    .head{
        position: fixed; width:95%;  z-index: 99; bottom: 10px; top: inherit;
        left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    }
    .kv .attend{width: 90%; margin-top: 3%;}
    .yoyaku_btn{width: 100%; margin:0 auto 5%;}
    .yoyaku_btn p{font-size: var(--font-22);}
    .yoyaku_btn p::before,.salon_btn p::before{width: 10px; height: 10px;}
    .salon_btn{width: 100%; margin: 0 auto;}
    .salon_btn p{font-size: var(--font-20);}
    .btn_area{margin: 7% auto 0; display: block; width: 100%; padding-bottom: 0;}
    .btn_area .tel_attend{padding-top: 1%;}
    .option_flow_list::before{width: 85%;}

    .lp_footer{padding: 7% 0;}
    .lp_footer_logo{width: 40%; max-width: 200px; margin-bottom: 7%;}
    .footer_link{
        flex-direction: column; gap: 5px;
        align-items: flex-start;
        margin: 5px;
        font-size: var(--font-14);
    }

    .footer_line{
        border-bottom: 1px solid #aeaeae;
        width: 100%;
    }
    .footer_attend .attend:nth-child(2) { margin-bottom: 30px;}
    .lp_footer .copy{margin: 5% 0 15%;}
    .offer_inner,.parts_con,.about_inner{padding: 7% 3%;}
    .about_con_ttl{font-size: var(--font-18);}
    .about_con_ttl span{font-size: var(--font-22);}
    .point .ttl picture{ width: 95%; padding: 5% 0;}
    .point .wrapper{padding-top: 5%;}
    .point_item_desc{font-size: 1rem; text-align: center;}
    .point_item_ttl{padding: 2% 0 2% 3%; margin-bottom: 4%;}
    .point_item_img picture{width: 50%;}
    .point_item_img2 picture{width: 90%;}
    .point_list{gap: 30px 0;}
    .point_item_sample2,.point_item_img{width: 100%;}
    .point_item_img{margin-top: 5%;}
    .point_item_sample1{width: 100%; margin: 0 auto 10px;}
    .point_item .attend{width: 100%; margin-top: 10px;}

    .ranking .ttl span{font-size: var(--font-18);}
    .ranking .ttl{font-size: var(--font-28); padding: 15px 0;}

    .step .ttl{background-repeat: no-repeat; background-size: cover; padding: 3%;}
    .step .ttl h2,.question .ttl{font-size: var(--font-24);}
    .step_ttl_time{font-size: 1rem; padding:3px 25px ; margin-top:2%}
    .step_list{gap: 15px 0;}
    .step_item{gap: 0 10px; border-radius: 5px;}
    .step_item_con{border-radius: 5px;}
    .step_item_img{width: 38%;}
    .step_item_desc{width: 62%;}
    .step_item_desc_ttl{flex-direction: column; gap: 5px;}
    .step_item_desc_num{width: 40px;}
    .step_item_desc_ttl h3{font-size: var(--font-20); margin-bottom: 5px;}
    .step_item_text{font-size: 1rem;}
    .step_item_desc_ttl{line-height: 1.2rem;}
    .step_item_desc_ttl span{font-size: var(--font-14);}
    .step_item_point{width: 100%; font-size: var(--font-14); text-align: center;}
    .step_item_check{width: 100%; margin-top: 8px;}

    .faq_item{font-size: 1rem; margin-bottom: 15px;}
    .faq_item summary{padding: 3% 10% 3% 9%; font-weight: 500;}
    .faq_answer{font-size: 1rem; line-height: 1.4; padding: 3% 3% 4%;}
    .faq_item summary::before, .faq_item p::before{ left: 4%; font-size: var(--font-18); top: 25%;}

    .faq_answer::before {margin-right: 0;}
    .faq_answer_text{font-weight: 400; line-height: 1.6;}
    .qa_kouka{width: 90%;}
    .qa_img{margin: 5% auto;}
    .zisski_graph_con{width: 100%;}
    .zisseki_enquete_ttl{font-size: var(--font-18); padding: 10px;}
    .zisseki_enquete_con{gap: 0 20px; width: 100%;}
    .zisseki_enquete .attend{margin-top: 10px;}

    .plan_ttl{padding-top: 5%;}
    .plan_ttl::after{
        border-width: 30px 50vw 0 50vw;
        bottom: -30px;
    }
    .plan_inner_op{margin-top: 5%; padding: 5% 3%;}
    .plan_inner_op_ttl span{font-size: 1rem;}
    .plan_inner_op_desc{width: 100%;}
    .tel_area{padding: 5%; text-align: center;}
    .telbox{flex-direction: column; gap: 10px;}
    .telbox_message{font-size: 1rem;}
    .tel_area .number{margin-bottom: 5px;}
    .zisseki .ttl{width: 100%;}
}


@media screen and (max-width: 480px) {
    .wrapper{ padding: 10% 0;}
    .sp-only{display: block;}
    .attend{font-size: 11px;}
    .ranking .ttl span{font-size: 1rem;}
    .ranking .ttl{font-size: var(--font-22); padding: 15px 0;}
    .ranking_list{flex-direction: column; gap: 15px 0;}
    .ranking_item1,.ranking_item2,.ranking_item3{width: 100%;}
    .point_item_ttl picture,.offer_btn{width: 95%;}
    .plan_inner_desc{font-size: 14px}
    .plan_ttl p{font-size: var(--font-18);}
    .plan_ttl h2{font-size: var(--font-24);}
    .plan_inner_op_ttl{font-size: var(--font-18);}
    .step_item_desc_ttl{ gap: 2px;}
    .step_item_desc_ttl h3{font-size: var(--font-18);}
    .step_item_text{font-size: var(--font-14);}
    .faq_item summary::before, .faq_item p::before{top: 15%;}
    .faq_item summary{padding: 3% 10% 3% 11%; }
}