@charset "UTF-8";

:root {
    --fnt-blue: #004c8a;
    --fnt-sky:#4cb2e7;
    --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: #ecf9ff;
}

.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_pink{color: var(--fnt-pink); font-weight: 600;}
.caution {
	font-size: 0.5em;
	vertical-align: top;
}

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

.kv{
    background-color: #ffffff;
    background-image: radial-gradient(circle, #ecf9ff 5px, transparent 5px);
    background-position: 0 0;
    background-size: 30px 30px;
}

.kv h1{ width: 90%; max-width: 1200px; margin: 0 auto;}
.kv .attend{ margin-top: 10px; width: 90%; max-width: 980px; margin: 0 auto}
.btn_area {
    margin: 5% auto 0;
    display: flex;
    width: 90%;
    max-width: 980px;
    gap: 0 20px;
    padding-bottom: 5%;
}
.btn_area .tel_attend{ color: #333; text-align: center;  padding: 3% 0 0; font-size: var(--font-18);}
.salon_btn button{cursor: pointer;}
.offer{ width: 90%; max-width: 980px; margin: 3% auto;}
.ttl{ width: 80%; margin: 0 auto 40px;}
.attend{margin-top: 20px;}

/* ABOUT */
.about{background-color: #c1e7fc;}
.about_desc,.check_desc,.option_desc{text-align: center; font-size: var(--font-20); line-height: 1.8;  color: var(--fnt-blue);}

/* check */
.check{background: #fff;}
.check_con{border: solid 1px #004c8a; padding: 5%; margin-top: 40px;}
.check_con_ex_list{display: flex; gap: 0 20px;}
.check_con_damage_list{gap: 0 40px;}
.check_con_ex_item p{text-align: center;}
.check_con_ex_item_desc{ margin-top: 10px;}
.check_con_ex_ttl,.check_con_damage_ttl{text-align: center; color: var(--fnt-blue); border: dashed 1px var(--fnt-sky); padding: 10px; font-size: var(--font-20); margin-bottom: 30px;}
.check_con_damage{margin-top: 5%;}
.check_con_damage_ttl{ background: var(--fnt-sky); color: #fff;}
.check_con_damage_item_sub{color: var(--fnt-blue); margin-bottom: 10px; font-size: var(--font-18);}
.check_con_damage_item_desc{margin-top: 10px; }

/* effect */
.effect_list{display: flex; gap: 20px; text-align: center; flex-wrap: wrap; justify-content: center}
.effect_item{ background-color: #fff; padding: 3%; width: 48%;}
.effect_item_ttl{
    border-top: 1px solid var(--fnt-blue);
    border-bottom: 1px solid var(--fnt-blue);
    color: var(--fnt-blue);
    padding: 5px;
    font-size: var(--font-20);
    margin-bottom: 7%
}

/* POINT */
.point{background-color: #fff;}
.point_item{padding: 0 5% 5%; border-bottom: dashed 1px #b2cde2;}
.point_item:last-child{border: none; padding-bottom: 0; padding-top: 5%;}
.point_item_ttl{width: 30%; margin-bottom: 3%;}
.point_item_desc{font-size: var(--font-18); line-height: 1.7; color: var(--fnt-blue);}
.point_item_ex{border: solid 1px var(--fnt-sky); padding: 3%; margin-top: 5%; text-align: center;}
.point_item_ex_ttl{color: var(--fnt-blue); font-size: var(--font-18); position: relative; display: inline-block; font-weight: 500;}
.point_item_ex_ttl::before{
    content: "";
    background: url(../images/epirush/border1.webp) center/contain no-repeat;
    left: -20%;
    top: 0;
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 30px;
}
.point_item_ex_ttl::after{
    content: "";
    background: url(../images/epirush/border2.webp) center/contain no-repeat;
    right: -20%;
    top: 0;
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 30px;
}
.point_item_ex picture{width: 90%; margin: 3% auto; display: block;}
.point_item_ex .attend{text-align: left;}


/* cycle */
.cycle{background-color: #d8f0ff; text-align: center;}
.cycle .ttl{width: 100%; text-align: center; font-size: var(--font-28); display: inline; position: relative; font-weight: 500;}
.cycle .ttl:before, .cycle .ttl::after{
    content: "";
    position: absolute;
    top: 60%;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #333;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
    z-index: 99;

}
.cycle .ttl::before{ left: -13%;}
.cycle .ttl::after{
    top: 60%;
    right: -13%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.cycle_con{
    background: #fff;
    padding: 3%;
    margin-top: 50px;
    display: flex;
    gap: 0 40px;
}

.cycle_con_desc{width: 50%; text-align: left;}
.cycle_con_desc h3{font-weight: 500; font-size: var(--font-24); margin-bottom: 10px;}
.cycle_con_desc p{font-size: var(--font-18); font-weight: 400;}
.cycle_con_img{width: 50%; text-align: right;}
.cycle_con_img .attend{margin-top: 10px;}
.cycle .attend{text-align: left;}
.cycle_con .attend{text-align: right;}

/* step */
.step{background: #ecf9ff;}
.step .ttl{width: 100%;}
.step_flow_list{display: flex; gap: 0 20px; margin-bottom: 40px;}
.step_flow_item{flex: 1; padding: 0 5px; margin-top: 10px; font-size: var(--font-18); line-height: 1.6;}

/* plan */
.plan{background: #c1e7fc;}
.plan_con,.option_con{display: flex; gap: 0 10px;}
.option{background: #ecf9ff;}
.option_con{margin-top: 30px;}
.option_flow{background-color: #fefefe; padding: 5%; border: dashed 1px var(--fnt-sky); margin-top: 40px; text-align: center;}
.option_flow_ttl{color: var(--fnt-blue); font-size: var(--font-20); font-weight: 500; margin-bottom: 4%;}
.option_flow_list{display: flex; gap: 0 40px; position: relative; justify-content: space-between; z-index: 0;}
.option_flow_list::before{
    content: "";
    position: absolute;
    top: 25%;
    left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    display: inline-block;
    width: 90%;
    height: 2px;
    border-bottom: 1px solid var(--fnt-sky);
    z-index: -1;

}
.option_flow_item picture{width: 30px; display: block; margin: 0 auto;}
.parts{background-color: #fff;}
.parts picture{display: block; width: 90%; margin: 0 auto;}
.offer_area .btn_area{  padding-bottom: 0;}

/* footer */
.footer_attend{background-color: #d8e4ee;}
.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%;
}
.footer_attend .attend:nth-child(1){  margin-bottom: 30px;}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    .kv h1{ width: 100%;}
}

/* スマートフォン用 */
@media screen and (max-width: 768px) {
    .wrapper{ width: 95%;}
    .pc-only{display: none;}
    .attend{font-size: 12px; line-height: 1.6;}
    .flattery_area{
        display: none;
        background-color: rgba(236, 236, 224, .8);
        height: 60px;
        position: fixed; width:100%;  z-index: 6; bottom: 0;
    }
    .head{
        position: fixed; width:95%;  z-index: 999; bottom: 10px; top: inherit;
        left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    }
    .kv{padding-bottom: 9%;}
    .kv .attend{width: 90%; margin-top: 3%;}
    .yoyaku_btn{width: 95%; 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: 95%; margin: 0 auto;}
    .btn_area{margin: 7% auto 0; display: block; width: 100%; padding-bottom: 0;}
    .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%;}
    .lp_footer .copy{margin: 5% 0 15%;}
    .check_con_ex_list{flex-wrap: wrap; justify-content: center; gap: 10px;}
    .check_con_ex_item{width: 31%;}
    .check_con_ex_item p{font-size: 12px}
    .check_con_ex_ttl, .check_con_damage_ttl{font-size: var(--font-18); padding: 5px;}
    .check_con_damage_item{width:40% ;}
    .check_con_ex_item p.check_con_damage_item_sub{font-size: 1rem;}
    .check_con_damage_list{gap: 20px; flex-wrap: nowrap;}
    .point_item_desc{font-size: 1rem;}
    .point_item{padding: 0 0 5%;}
    .point_item_ex{padding: 5% 3%;}
    .point_item_ex_ttl{font-size: 1rem;}
    .point_item_ex_ttl::before,.point_item_ex_ttl::after{height: 25px;}
    .point_item_ex picture{width: 100%;}
    .point_item_ttl{margin-bottom: 2%;}

    .cycle .ttl:before, .cycle .ttl::after{width: 30px;}
    .cycle .ttl::before{left: -10%;}
    .cycle .ttl::after{right: -10%;}
    .cycle_con{flex-direction: column;  margin-top: 4%;}
    .cycle_con_desc,.cycle_con_img{width: 100%;}
    .cycle_con_desc{ margin-bottom: 4%;}
    .cycle_con_desc h3{text-align: center;}
    .cycle_con_desc p{font-size: 1rem;}
    .step_flow_item p{font-size: 1rem;}
    .about_desc, .check_desc, .option_desc{line-height: 1.8rem; font-size: 1rem; letter-spacing: -0.08rem;}
    .option_flow_item p{font-size: var(--font-14);}
    .option_flow_list{gap: 0 10px;}
    .option_flow_item picture{width: 20px;}
    .option_flow{padding: 7% 3%; margin-top: 25px;}
    .option_flow_ttl{margin-bottom: 5%;}
    .parts picture{width: 100%;}
    .ttl{ width: 60%; margin: 0 auto 20px;}
    .step .ttl {  width: 60%;}
    .check_con{margin-top: 30px;}
    .effect_list{margin-top: 35px;}
    .effect_item_ttl{font-size: var(--font-18);}
    .btn_area .tel_attend{font-size: 1rem;}
}

@media screen and (max-width: 480px) {
    .wrapper{ padding: 10% 0;}
    .sp-only{display: block;}
    .attend{font-size: 11px;}
    .ttl{ width: 80%;}
    .step .ttl { width: 100%;}
    .check_con_damage_list{flex-wrap: wrap;}
    .effect_item{width: 100%; padding: 8% 4%;}
    .point_item_ttl{width: 50%;}
    .cycle_con_desc h3{ font-size: var(--font-18);}
    .cycle_con{padding: 7% 3%;}
    .cycle .ttl{font-size: var(--font-20);}
    .step_flow_list{flex-direction: column; justify-content: space-around; gap: 30px 0;}
    .step_flow{display: flex; gap: 0 10px; padding: 0 2%;}
    .step_flow_item{padding: 0; flex: none;}
    .plan_con, .option_con{flex-direction: column; gap: 10px 0; margin-top: 20px;}
    .option_flow_list{flex-wrap: wrap; gap: 20px; justify-content: space-around;}
    .option_flow_item{width: 28%;}
    .option_flow_list::before{
        top: 10%; width: 70%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    }
    .option_flow_list::after{
        content: "";
        position: absolute;
        top: 70%;
        left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
        display: inline-block;
        width: 50%;
        height: 2px;
        border-bottom: 1px solid var(--fnt-sky);
        z-index: -1;
    }

}