@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: #def4ff;
}

html, body {
    overflow-x: hidden;
  }

.attend{
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-weight: 400;
    font-size: var(--font-14);
    line-height: 1.4rem;
    margin-top: 20px;
}
.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%, #feffb2 60%);}
.marker_blue{ background: linear-gradient(transparent 60%, #b1e8ef 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;
}

.pull{display: none; background-color:#fdf8ed; }


/* 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: #000;
    padding: 3% 0 0;

}

.kv h1{max-width: 980px; margin: 0 auto;}
.kv .attend{
    margin-top: 10px;
    width: 90%;
    max-width: 980px; margin: 0 auto
}


/* offer */
/* .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);
}

/* PARTS */
.parts_inner::before{left: 0;}
.parts .attend{text-align: left; }
.pcg_staff {width: 70%; margin: 0 auto;}
.parts a {
    display: block;
    padding: 1.2%;
    color: #fff;
    font-size: var(--font-38);
    background: #004c8a;
    position: relative;
    text-align: center;
}
.parts a::after {
    content: '';
    width: 15px;
    height: 15px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(135deg);
    position: absolute;
    top: 0;
    bottom: 10%;
    margin: auto;
    font-size: 0.9em;
    position: absolute;
    right: 10%;
}
.parts a.action::after {
    content: '';
    width: 15px;
    height: 15px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    bottom: 10%;
    margin: auto;
    /* content: "▼"; */
    font-size: 0.9em;
    position: absolute;
    right: 10%;
}

.parts .step_list{padding: 3% 3% 5%;}
.pull{display: none; background-color:#efefef; text-align: left;}
.parts_inner{
    width: 80%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    gap: 20px 40px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3% 0;
}
.parts_inner_item{width: 20%;}

/* ABOUT */
.about{background: #fff;}
.popular_ttl{width: 80%; margin: -2% auto 4%;}
.about_con_ttl{
    color: #fff;
    text-align: center;
    font-size: var(--font-36);
    background-color: #004c8a;
    position: relative;
    padding-top: 2%;
}
.about_con_ttl::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 50vw 0 50vw;
    border-color: #004c8a transparent transparent transparent;
    position: absolute;
    bottom: -60px;
    left: 0;
}

.about_inner{margin: 2% auto 0;}
.about_video {display: flex; width: 100%; margin: 0 auto;  gap: 0 30px;}
.about_video video{width: 48%; margin: 0 1%; overflow: hidden; border-radius: 8px;}
.about_con_ttl span{font-size: var(--font-38)}
.about_inner .attend{text-align: right;}
.about_con_message{text-align: center; font-size: var(--font-24); margin-top: 5%;}
.about_con_message span{font-size: var(--font-36);}
.about .arrow{width: 10%; margin: 3% auto 3%;}
.about_graph{ border: solid 1px #8ac6f6; padding: 3%; margin-bottom: 5%;}
.about_graph_inner{display: flex;gap: 0 30px; align-items: center;}
.about_graph_desc{width: 60%;}
.about_graph_img{width: 40%;}
.about_graph_desc_dakara{width: 50%; margin: 0 auto 10px;}
.about_effect{width: 90%; margin: 0 auto;}
.effect_img{
    background-color: #45bdf9;
    padding: 2% 15%;
    margin-bottom: 2%;
}
.effect_message{font-size: var(--font-44); text-align: center;}


/* POINT */
.point{
    background: linear-gradient(#04a9f9 0%, #c2e9fb 100%) no-repeat 0% 0% / 100% 100% ;
}
.point .ttl picture{display: block; width: 80%; margin: 0 auto 3%; }
.point_list{display: flex; flex-direction: column; gap: 50px 0;}
.point_item{
    background: #fff;
    padding: 5%;
}
.point_item_ttl{display: flex; gap: 0 20px; margin-bottom: 4%;}
.point_item_ttl_num{width: 7%; margin-top: 5px;}
.point_item_ttl_text{font-size: var(--font-20); font-weight: 500; color: var(--fnt-blue);}
.point_item_ttl_text span{font-weight: bold; font-size: var(--font-28);}
.point_item_desc{font-size: var(--font-18); margin-left: 1%;}
.point_item_img{ margin: 3% auto 4%; width: 80%;}
.point_item_img .attend{text-align: right;}
.point_list .dashed{border: dashed 1px var(--fnt-sky);}
.point_item_img2{padding: 5%;}
.point_item_sample1{width: 70%; margin: 0 auto 30px;}
.point_item_sample2{width: 90%; margin: 0 auto;}
/* .point_item .attend{ text-align: right;} */
.point_message{text-align: center; font-size: var(--font-22); margin: 4% 0 8%;}
.point_op{text-align: center;}
.point_op:last-child{margin-top: 3%;}
.point_op a {
    display: block;
    padding: 1.2%;
    color: #fff;
    font-weight: bold;
    font-size: var(--font-24);
    background: #053054;
    position: relative;
}
.point_op a::after {
    content: "▼";
    font-size: 0.9em;
    transform: all .3s;
    position: absolute;
    right: 10%;
}
.point_op a.action::after { content: "▲";}
.point_op_desc{ font-size: var(--font-18); line-height: 1.5;}
.point_op .pull{background: #fff; border: solid 1px #053054; padding: 3%; text-align: center;}
.point_op_desc_tbc{
    color: var(--fnt-blue);
    font-size: var(--font-22);
    font-weight: 500;
    border-top: 1px solid var(--fnt-blue);
    border-bottom: 1px solid var(--fnt-blue);
    padding: 2% 0;
    width: 80%;
    margin: 3% auto 6%;
}
.point_op_desc_image{width: 60%; margin: 0 auto;}
.point_op_hada .point_op_desc_image{width: 80%; margin-top: 4%;}
.point_op_hada .point_op_desc_image .attend{text-align: right;}
.point_op_desc_ttl{
    font-size: var(--font-22); margin-bottom: 30px;
    position: relative;
    display: inline-block;
}
.point_op_desc_ttl::before,.point_op_desc_ttl::after{
    content: '';
    width: 60%;
    height: 2px;
    display: inline-block;
    background-color: #634c15;
    position: absolute;
    top: 50%;
}

.point_op_desc_ttl::before{ left: -70%; }
.point_op_desc_ttl::after{ right: -70%;}
.point_op_hada .point_op_desc_tbc{border: none; margin-bottom: 0;}
.point_op_trouble,.point_op_trouble_list2{display: flex; gap: 0 40px;}
.point_op_trouble_name{font-size: var(--font-18);}
.point_op_trouble_text{font-size: var(--font-14); margin-top: 3px;}
.point_item:last-child .point_item_img{text-align: center;}
.point_item_img_slide{
    position: relative;
    text-align: center;
    font-size: var(--font-18);
    display: inline-block;
}

.point_item_img_slide:before, .point_item_img_slide::after{
    content: '';
    position: absolute;
    top: 60%;
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: var(--fnt-blue);
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
.point_item_img_slide::before{ left: -15%;}
.point_item_img_slide::after{
    top: 60%;
    right: -16%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.point_item_img_image{border: solid 1px var(--fnt-sky); padding: 5px 0; margin: 2% 0; font-size: var(--font-18);}
.point_item_img_ttl{background-color: var(--fnt-blue); color: #fff; font-size: var(--font-20); padding: 5px 0;}
.point_item .btn-group{
    margin: 2% 0 4%;
    display: flex;
    gap: 0 20px;
    justify-content: center;
}
.point_item .btn-group button{
    background: #929292;
    color: #fff;
    padding: 10px;
    font-size: var(--font-20);
    border-radius: 5px;
    width: 200px;
    cursor: pointer;
}

.btn-group button.active { background-color: #00bfff;}
.point_item .attend span{  text-decoration: underline;}

/* ハンドル全体 */
.cocoen-drag {
    background: #cccccc;
    bottom: 0;
    cursor: ew-resize;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 0;
    width: 4px;

}
.cocoen-drag:before {
    content: '';
    background-image: url(../images/hige/compare_arrow.webp) ;
    background-size: 100%;
    background-repeat: no-repeat;
    border: 0;
    left: 50%;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: auto;
    bottom: 5%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, 0);
}

.cocoen-drag::before,
.cocoen-drag::after {
  content: '';
}

/* step */
.step .wrapper{padding-top: 5%;}
.step .ttl{
    background:#004c8a ;
    text-align: center;
    padding: 3% 0;
    position: relative;
}
.step .ttl::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 30px solid #004c8a;
    border-left: 10vw solid transparent;
    border-right: 10vw solid transparent;
}
.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% 5%;  position: relative;}
.step_item{display: flex;  gap: 0 20px ;}
/* .step_item_desc_ttl{display: flex; gap: 0 20px; align-items:baseline} */
.step_item_desc_ttl{color: var(--fnt-blue); font-size: var(--font-28); font-weight: 500;  margin-bottom: 10px;}
.step_item_num{width: 60px; position: absolute; top: -10%; left: -20px;}
.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%;}
.offer_btn{margin: 5% auto;}


/* 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_inner{background: #fff; padding: 5%; text-align: center;}
.zisseki .ttl{font-size: var(--font-24); color: var(--fnt-blue); font-weight: 500; position: relative; display: inline-block;}
.zisseki .ttl span{font-size: var(--font-38);}
.zisseki .ttl::before{
    content: '';
    background: url(../images/hige/zisseki_ashirai1.webp) center/contain no-repeat;
    width: 80px;
    position: absolute;
    top: 30%;
    left: -15%;
    bottom: 0;
}

.zisseki .ttl::after{
    content: '';
    background: url(../images/hige/zisseki_ashirai2.webp) center/contain no-repeat;
    width: 80px;
    position: absolute;
    top: 30%;
    right: -15%;
    bottom: 0;
}
.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{ padding: 7% 3% 0; position: relative;}
.zisseki_enquete .attend{ margin-top: 30px; text-align: left;}


/* VOICE */

.voice{
    background: linear-gradient(#3c9bff 0%, #c2e9fb 100%) no-repeat 0% 0% / 100% 100% ;
    text-align: center;
}
.voice_desc{ color: #fff; text-align: center; font-size: var(--font-24); margin-top: 3%;}
.voice_message{ display: inline-block; font-size: var(--font-18); color: #fff; margin-top: 3%; position: relative;}
.voice_message::before,.voice_message::after{
    content: '';
    position: absolute;
    top: 60%;
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: #fff;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
.voice_message::before{
    left: -15%;
}

.voice_message::after{
    top: 60%;
    right: -16%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.voice_list{display: flex; flex-wrap: wrap; gap: 30px; text-align: left; margin: 2% 0 0; justify-content: space-between;}
.voice_item{background-color: #fff; padding: 3% 2%; width: 48%;}
.voice_item_top{display: flex; gap: 0 20px; align-items: center; }
.voice_item_img{width: 30%;}
.voice_item_ttl{width: 70%; color: var(--fnt-blue); font-size: var(--font-22); font-weight: 500;}
.voice_item_comment{
    font-size: var(--font-18);
    margin: 3% 0 2%;
}
.voice_item_name{border-bottom: 1px solid #333; display: inline-block;}
.voice .attend{text-align: left; margin-top: 50px;}


/* 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_desc span{
    background: #f7feff;
    margin-right: 10px;
    padding: 0 10px;
}

.plan_inner_op{
    border: 1px solid #7a7a7a;
    background:#fff ;
    margin-top: 3%;
    padding: 4% 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;}



/* MAP */
.map_wrapper{background-color: #fff; padding: 5%; position: relative;}
.map_wrapper .map_ttl{font-weight: 500; line-height: 1.3;}
.map_wrapper .map_ttl span{font-size: var(--font-38);}
.map_wrapper .map_comment{text-align: center;}
.map_wrapper .map_comment p{left: 10%; top:30%; font-size: var(--font-24);}
.map_wrapper .map .attend{margin-top: 20px;}

.map .offer_btn{width: 90%; margin: 5% 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: #fff;}
.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_point{width: 90%;}
    .step_item_desc_ttl{font-size: var(--font-24); margin-bottom: 5px;}
    .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%;}
    .about_inner{width: 85%;}
    .about_graph{padding: 5%;}
    .about_graph_inner{gap: 0 40px;}
    .voice_list{gap: 30px 10px;}
    .voice_item_ttl{font-size: var(--font-18);}
    .voice_item_comment{font-size: 1rem;}
    .voice_item_name{font-size: var(--font-14);}
    .map_wrapper .map_comment p{font-size: var(--font-20); }
    .parts a{font-size: var(--font-28);}
}


/* スマートフォン用 */
@media screen and (max-width: 768px) {
    .wrapper{ width: 95%;}
    .pc-only{display: none;}
    .attend{font-size: 12px; line-height: 1.6; margin-top: 20px;}
    .flattery_area{
        background-color: rgba(236, 236, 224, .8);
        height: 60px;
        position: fixed; width:100%;  z-index: 6; bottom: 0;
        display: none;
    }
    .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: 95%; margin: 2% auto 0;}
    .sp-only.kv_attend{display: block; margin-bottom: -5%;}
    .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;}
    .parts a{font-size: var(--font-24); line-height: 1.3; padding: 2% 0;}
    .parts a::after{
        bottom: 10%;
        width: 10px;
        height: 10px;
    }

    .parts a.action::after{
        width: 10px;
        height: 10px;
        bottom: -20%;
    }
    .lp_footer .copy{margin: 5% 0 15%;}
    .about_con_ttl,.about_con_message{font-size: var(--font-20);}
    .about_con_ttl span{font-size: var(--font-22);}
    .about_con_message span{font-size: var(--font-28);}
    .about_con_ttl::after{
        border-width: 30px 50vw 0 50vw;
        bottom: -30px;
    }
    .about_inner{width: 100%;}
    .about_video{gap: 0 10px;}
    .about_graph_inner{flex-direction: column; gap: 30px 0;}
    .about_graph_desc,.about_graph_img{width: 90%;}
    .about_graph{padding: 7% 5%}
    .about_effect{width: 100%;}
    .effect_img{padding: 2% 10% 3%;}
    .effect_message .sp-only{display: none;}
    .effect_message{font-size: var(--font-24);}
    .effect_message span{font-size: var(--font-36);}
    .parts_inner{gap: 20px;}
    .parts_inner_item{width: 30%;}
    .point .ttl picture{ width: 95%; padding: 5% 0;}
    .point .wrapper{padding-top: 5%;}
    .point_item{padding: 7% 4%;}
    .point_item_desc{font-size: 1rem; text-align: center;}
    .point_item_ttl {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px 0;
    }
    .point_item_ttl_num{width: 40px;}
    .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_img .attend{margin-top: 10px;}
    .point_op a{font-size: var(--font-18); font-weight: 400;}
    .point_op_desc{font-size: 1rem;}
    .point_op_desc_tbc{
        width: 100%;
        margin: 6% auto ;
        font-size: var(--font-18);
        font-weight: 500;
    }
    .point_op_hada .point_op_desc_image{width: 100%;}
    .point_op .pull{padding: 5% 3% 8%;}
    .point_op_desc_ttl{font-size: 1rem; margin-bottom: 20px;}
    .point_op_desc_ttl::before, .point_op_desc_ttl::after{
        height: 1px;
        width: 20%;
    }
    .point_op_desc_ttl::before { left: -23%;}
    .point_op_desc_ttl::after { right: -23%;}
    .point_op_desc_image{width: 100%;}
    .point_op_trouble, .point_op_trouble_list2 {gap: 0 20px;}
    .point_item_img_image{font-size: 1rem;}
    .point_item .btn-group button{font-size: 1rem; padding:2% 2px;}
    .point_item .btn-group{gap: 0 0; justify-content: space-between; gap: 0 5px;}
    .point_item_img_ttl{font-size: var(--font-18);}
    .cocoen-drag:before{
        width: 40px;
        bottom: 0;
    }

    .step .wrapper{padding-top: 3%;}
    .step .ttl{background-repeat: no-repeat; background-size: cover; padding: 3%; margin-bottom: 5%;}
    .step .ttl h2,.question .ttl{font-size: var(--font-28);}
    .step .ttl::after{border-top: 15px solid #004c8a;}
    .step_ttl_time{font-size: 1rem; padding:3px 25px ; margin-top:2%}
    .step_list{gap: 30px 0;}
    .step_item{gap: 0 10px; border-radius: 5px;}
    .step_item_con{border-radius: 5px;}
    .step_item_img{width: 35%;}
    .step_item_desc{width: 65%;}
    .step_item_desc_ttl h3{font-size: var(--font-18); margin-bottom: 5px;}
    .step_item_text{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;}
    .step_item_num{ width: 40px; left: 0px;}
    .step_list .attend{margin-top: -20px;}
    .faq_item{font-size: 1rem; margin-bottom: 15px;}
    .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);}
    .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%;}
    .plan_inner_desc{font-size: var(--font-18);}

    .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_inner{padding: 5% 3%;}
    .zisseki .ttl{font-size: var(--font-20);}
    .zisseki .ttl span{font-size: var(--font-24);}
    .zisseki .ttl::before{
        left: -22%;
        transform: rotate3d(1, 1, 1, 30deg);
        top: 25%;
    }
    .zisseki .ttl::after{
        right: -22%;
        transform: rotate3d(1, 1, 1, -30deg);
        top: 25%;
    }
    .zisseki_enquete{padding: 5% 0;}

    .voice_list{gap: 20px 0;}
    .voice_desc,.voice_message{font-size: 1rem;}
    .voice_message::before, .voice_message::after {height: 1px;}
    .voice_item{width: 100%; padding: 5% 3%;}
    .voice_item_top{gap: 0 10px;}
    .voice_item_img{width: 20%;}
    .voice .attend{margin-top: 20px;}

    .map_wrapper{padding: 5% 0%;}
    .map_wrapper .map_ttl{font-weight: 500;}
    .map_wrapper .map_ttl span{font-size: var(--font-24);}
    .map_wrapper .map_comment p{font-size: 1rem;  top: 30%; left: 10%;}
    .map_wrapper .map_view{margin-bottom: 0;}
    .map .offer_btn{width: 100%;}
}

@media screen and (max-width: 480px) {
    .wrapper{ padding: 8% 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; line-height: 1.7;}
    .plan_ttl p{font-size: 1rem;}
    .plan_ttl h2{font-size: var(--font-22);}
    .plan_inner_op_ttl{font-size: var(--font-18);}
    .parts_inner_item{width: 45%;}
    .map_wrapper .map_comment p{top: 40%; font-size: var(--font-14);}
    .point_op_trouble{flex-direction: column; align-items: center; gap: 15px 0;}
    .point_op_trouble_list{width: 140px}
    .point_op_trouble_list2 {gap: 0 20px;}
    .point_item_img_slide{font-size: var(--font-14);}
    .point_item_img_slide:before, .point_item_img_slide::after {
        width: 20px; height: 1px;
    }
    .point_item_img_slide::before{ left: -10%; }
    .point_item_img_slide::after{ right: -10%;}
    .point_item_ttl_text{ font-size: var(--font-18);}
    .point_item_ttl_text span{font-size: var(--font-24);}
    .point_message{font-size: 1rem;}
    .point_op_desc_tbc{font-size: 1rem;}

    .step .wrapper{padding-top: 5%;}
    .step .ttl h2,.question .ttl{font-size: var(--font-22);}
    .step_item_desc_ttl{line-height: 1.2rem; font-size: var(--font-18);}
    .step_item_desc_ttl span{font-size: var(--font-14);}
    .faq_item summary{padding: 3% 10% 3% 11%; font-weight: 500;}
    .zisseki .ttl{font-size: var(--font-18);}
    .zisseki .ttl span{font-size: var(--font-20);}
    .plan .wrapper{padding-top: 10%;}
    .about_con_ttl,.about_con_message{font-size: var(--font-18);}
    .about_con_message span{font-size: var(--font-24);}
    .effect_img{padding: 2% 5% 3%;}
    .effect_message .sp-only{display: block;}

}