@charset "utf-8";


h3.center{ font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
h3.center span{ padding: 0 0 15px; display: block; font-size: 20px; font-family: futura-pt,sans-serif; font-weight: 500;  }

section{ position: relative; }
section:before{ position: absolute; z-index: 50; content: ""; top: 30px; left: 50%; transform: translate(-50%,0); width: 4px; height: 80px; background: #000; }

/* ------------------------------------------------------------ aside */
main{ width: calc(100% - 370px); }

aside{ position: fixed; z-index: 200; top: 0; right: 0; width: 370px; height: 100vh; background: #f5f8f7; padding: 0 0 40px; overflow-y: scroll; }
aside .aside_inner{ width: 310px; margin: 0 auto; }
aside .item{ width: 100%; height: auto; padding: 0 0 45px; }

aside .w_box{ position: relative; padding: 29px 20px 27px; }
aside .w_box:first-of-type{ margin: 0 0 38px; }
aside .w_box p{ position: absolute; top: -13px; left: 50%; padding: 0 0 5px; transform: translate(-50%,0); background: linear-gradient(transparent 60%, #ffe400 60%); font-family: 'Noto-Sans-JP-Bold'; }
aside .w_box p strong{ font-size: 40px; font-weight: 600; }

aside .w_box dl{ padding: 0 0 14px; }
aside .w_box dt{ padding: 0 0 8px; font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; }
aside .w_box dt span{ display: inline-block; width: 40px; height: 40px; margin: 0 10px 0 0; border-radius: 50px; background: #3f97bf; line-height: 190%; text-align: center; font-size: 22px; font-family: din-2014,sans-serif; font-weight: 600; color: #fff; }
aside .w_box dd{ display: flex; text-align: center; justify-content: space-between; }

aside .w_box button, aside .w_box input[type="submit"] { border: none; position: relative; width: 100%; height: 40px; color: #fff; font-size: 14px; border-radius: 50px; }
aside .w_box button:after, aside .w_box input[type="submit"]:after { position: absolute; content: ""; top: 15px; right: 20px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

aside .w_box .line{ padding: 10px 0; }


/* input */
aside select{ appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding: 0 15px; border: 1px solid #c9c9c9; border-radius: 5px; }

aside input[type="radio"]+label:before, aside input[type="checkbox"]+label:before {
    content: "";
    display: inline-block;
    background-size: 110px;
    background-repeat: no-repeat;
    width: 125px;
    height: 90px;
    background-position: center;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
}
aside #one+label:before{
	background-image: url(../images/aside/icn_01.png);
}
aside #other+label:before{
	background-image: url(../images/aside/icn_02.png);
}
aside #out+label:before{
	background-image: url(../images/aside/icn_03.png);
}
aside #loof+label:before{
	background-image: url(../images/aside/icn_04.png);
}

aside input[type="radio"]:checked+label::before, aside input[type="checkbox"]:checked+label::before {
    border: 3px solid #85bdd6;
    box-sizing: border-box;
}
aside input[type="radio"], aside input[type="checkbox"] {
    display: none;
}



/* ------------------------------------------------------------ fv */
section#fv:before{ display: none; }
#fv{ width: 100%; height: calc(100vh - 97px); max-height: 1000px; min-height: 1000px; background: url(../images/bg_fv.jpg) center/cover no-repeat; }
#fv .fv_inner{ width: 915px; margin: 0 auto; padding: 200px 0  80px; }

#fv h2{ text-align: center; }

#fv dl{ display: flex; width: 660px; margin: 30px auto 40px; font-size: 24px; border: 1px solid #000; border-radius: 5px; background: #fff; }
#fv dl dt{ position: relative; padding: 13px 21px; color: #fff; background: #000; font-size: 24px; width: 210px; }
#fv dl dt:after{ position: absolute; content: ""; top: 50%; bottom: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); right: -15px; border-top: 45px solid transparent; border-bottom: 45px solid transparent; border-left: 15px solid #000; }
#fv dl dd{ padding: 13px 0 13px 30px; }

#fv dl dt.corre_area_title { display: flex; align-items: center; }
#fv dl dd ul.corre_area li { display: inline; line-height: 130%; padding-right: 15px; }
#fv dl dd ul.corre_area li p { display: inline; }
#fv dl dd ul.corre_area li strong{ font-family: 'Noto-Sans-JP-Bold'; }


#fv ul.fv_bottom_info{ width: 820px; margin: 0 auto; padding: 0 15px 15px; }
#fv ul.fv_bottom_info li{ position: relative; float: left; width: 260px; height: 150px; margin: 0 20px 0 0; padding: 25px 20px; filter: drop-shadow(13px 6px 17px rgba(0,0,0,0.6)); background: url(../images/bg_fvtext.png) center/cover no-repeat; box-sizing: border-box; color: #fff; text-align: center; }

#fv ul.fv_bottom_info li:last-of-type{ margin: 0; }
#fv ul.fv_bottom_info li h3{ padding: 0 0 15px; font-size: 26px; font-family: 'Noto-Sans-JP-Bold'; border-bottom: 1px solid #fff; }
#fv ul.fv_bottom_info li p{ padding: 10px 0 0; font-size: 18px; line-height: 150%; }



/* ------------------------------------------------------------ reason */
section#reason:before{ top: 70px; height: 96px; background: #3f97bf; }

#reason{ padding: 100px 0; text-align: center; }
#reason .box{ position: relative; padding: 100px 35px 50px; background: #deeef5 url(../images/bg_reason.png) right top/248px no-repeat; border-radius: 50px; }
#reason .box:before{ position: absolute; content: ""; top: 40px; right: 70px;  width: 160px; height: 254px; background: url(../images/icn_12.png) center/cover no-repeat; }
#reason .box h3{ font-size: 40px; font-family: 'Noto-Sans-JP-Bold'; }
#reason .box h3 img{ padding: 0 7px 33px; }
#reason .box h3 span{ display: inline-block; padding: 0 0 15px; font-size: 50px; background: url(../images/bg_text_01.png) center bottom no-repeat; }
#reason .box h3 strong{ font-size: 110px; vertical-align: middle; }

#reason .blue{ width: 656px; height: 74px; margin: 50px auto 66px; padding: 30px 0 0; box-sizing: border-box; background: #3f97bf; color: #fff; font-size: 24px; border-radius: 10px; }
#reason .blue strong{ font-size: 30px; }

#reason ul{ display: flex; justify-content: center; flex-wrap: wrap; }
#reason ul li{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 270px; height: 156px; margin: 0 30px 65px; padding: 40px 20px 25px; box-sizing: border-box; background: #fff; border-radius: 20px; box-shadow: 9.235px 11.82px 15px 0px rgba(66, 66, 66, 0.2); }
#reason ul li:nth-child(n+3):nth-child(-n+5){ margin: 0 25px 65px; }


#reason ul li .num{ position: absolute; top: -23px; left: 50%; transform: translate(-50%,0); font-size: 70px; font-family: din-2014,sans-serif; font-weight: 300; }
#reason ul li h4{ font-size: 23px; color: #3f97bf; font-family: 'Noto-Sans-JP-Bold'; line-height: 150%; }
#reason ul li h4 strong{ font-size: 60px; font-family: din-2014,sans-serif; font-weight: 600; }
#reason ul li .text{ padding: 10px 0 0; font-size: 14px; line-height: 150%; }

#reason ul li:nth-of-type(3) h4{ line-height: 180%; }
#reason ul li:nth-of-type(6) h4 strong{ font-size: 40px; }



/* ------------------------------------------------------------ strong */
#strong{ padding: 0 0 100px; background: url(../images/bg_strong_01.jpg) center/cover no-repeat; }
#strong:before{ top: 66px; background: #fff; }
#strong .bg{ padding: 175px 0 0; background: url(../images/bg_strong_02.png) calc(100% - 35px) top/140px no-repeat; }

#strong h3{ position: relative; background: url(../images/bg_text_02.png) calc(50% + 150px) 70px/120px no-repeat; font-size: 40px; color: #fff; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
#strong h3:before{ position: absolute; content: ""; bottom: 0; left: 0; width: 1030px; height: 206px; background: url(../images/bg_strong_03.png) center/cover no-repeat; }
#strong h3 strong{ font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; }
#strong h3 img{ padding: 0 0 42px; }


#strong article{ margin: 0 0 30px; padding: 40px; background: #fff; border-radius: 15px; }
#strong article .top{ /* display: flex; */ display: grid; gap: 20px 30px; grid-template-columns: 140px 795px; grid-template-rows: 88px 37px; padding: 0 0 30px; align-items: center; }
#strong article .top img{ display: block; width: 145px; height: auto; grid-row: 1/3; grid-column: 1/2; }
#strong article .top h4{ font-size: 34px; padding: 12px 0 0; line-height: 120%; grid-row: 1/2; grid-column: 2/3; font-family: 'Noto-Sans-JP-Bold'; }
#strong article .top p{ line-height: 150%; grid-row: 2/3; grid-column: 2/3; margin: -20px 0 0; }

#strong article .blue{ padding: 15px 0; background: #3f97bf; color: #fff; text-align: center; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; border-radius: 10px; }

#strong article .bottom{ display: flex; padding: 30px 0 0; }
#strong article .bottom img{ margin: 0 40px 0 0; width: 400px; height: auto; border-radius: 10px; }
#strong article .bottom h5{ padding: 0 0 20px; font-size: 30px; line-height: 140%; font-family: 'Noto-Sans-JP-Bold'; }
#strong article .bottom p{ line-height: 170%; }



/* ------------------------------------------------------------ why */
#why{ padding: 140px 0 100px; background: #deeef5; }

#why ul{ padding: 100px 0; }
#why ul li{ position: relative; float: left; width: 490px; height: 784px; padding: 85px 20px 30px; margin: 0 50px 0 0; box-sizing: border-box; border-radius: 20px; }
#why ul li:last-of-type{ margin: 0; }

#why ul li .num{ width: 120px; position: absolute; top: -60px; left: 50%; transform: translate(-50%,0); }
#why ul li .num img{ width: 100%; height: auto; }
#why ul li .item{ display: block; text-align: center; width: 90%; height: auto; margin: 0 auto; padding: 0 0 43px; }

#why ul li .point{ position: relative; padding: 22px 30px 13px; border: 3px solid #3f97bf; border-radius: 20px; background: url(../images/bg_repeat.png) center/cover; }
#why ul li .point p{ position: absolute; top: -15px; left: 50%; transform: translate(-50%,0); width: 100%; font-size: 22px; color: #fff; text-align: center; font-family: 'Noto-Sans-JP-Medium'; }
#why ul li .point p span{ margin: 0 -2px; padding: 0 5px; background: #3f97bf; border-radius: 50px; text-align: center; line-height: 120%; }
#why ul li .point h4{ font-size: 18px; line-height: 140%; text-align: center; text-shadow: 2px  2px 1px #ffffff, -2px  2px 1px #ffffff, 2px -2px 1px #ffffff, -2px -2px 1px #ffffff, 2px  0px 1px #ffffff, 0px  2px 1px #ffffff, -2px  0px 1px #ffffff, 0px -2px 1px #ffffff; color: #3f97bf; font-family: 'Noto-Sans-JP-Bold'; }


#why .b_box{ position: relative; width: 800px; margin: 0 auto; padding: 40px 45px 35px; background: #3f97bf; border-radius: 15px; box-sizing: border-box; }
#why .b_box:before{ position: absolute; content: ""; top: -64px; right: 55px; width: 294px; height: 144px; background: url(../images/icn_05.png) center/cover no-repeat; }
#why .b_box h5{ font-size: 30px; padding: 0 0 18px; color: #fff; border-bottom: 2px solid #fff; font-family: 'Noto-Sans-JP-Bold'; }
#why .b_box p{ padding: 20px 0 0; font-size: 22px; color: #fff; font-family: 'Noto-Sans-JP-Regular'; }



/* ------------------------------------------------------------ cta */
.cta{ padding: 90px 0 60px; background: url(../images/cta/bg.jpg) center/cover; }
section.cta:before{ display: none; }

.cta .w_box{ position: relative; padding: 60px 40px 45px; border: 2px solid #000; }
.cta .w_box:before{ position: absolute; content: ""; top: -10px; right: 0; width: 143px; height: 169px; background: url(../images/icn_04.svg) center/cover no-repeat; }
.cta .w_box .ttl{ position: absolute; width: 700px; top: -25px; left: 50%; transform: translate(-50%,0); padding: 11px 10px 14px; font-size: 29px; color: #fff; background: #000; text-align: center; border-radius: 5px; }

.cta .bubble{ position: absolute; top: -60px; left: -30px; width: 150px; height: 150px; padding: 27px 0 0; color: #ffe400; letter-spacing: 0.08em; line-height: 120%; box-sizing: border-box; border-radius: 50%; background: #000; font-size: 38px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
.cta .bubble:after{ position: absolute; content: ""; bottom: 0; right: 13px; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 25px solid #000; transform: rotate(50deg); }

.cta .w_box img{ display: block; margin: 0 auto; padding: 0 0 30px; }
.cta .w_box img.SP{ display: none; }

.cta .w_box div{ display: flex; justify-content: space-between; }
.cta .w_box div a{ width: 445px; height: 70px; padding: 10px 0 0 30px; font-size: 18px; font-family: 'Noto-Sans-JP-Bold'; box-sizing: border-box; }
.cta .w_box div a:after{ top: 27px; right: 33px; width: 11px; height: 11px; }

.cta .w_box div a:before{ position: absolute; content: ""; width: 37px; height: 26px; top: 50%; left: calc(50% - 150px); transform: translate(0,-50%); background: url(../images/icn_pc.png) center/cover no-repeat; }
.cta .w_box div a:last-of-type:before{ width: 37px; height: 36px; background: url(../images/icn_line.png) center/cover no-repeat; }


/* ------------------------------------------------------------ intro */
section#intro:before{ top: 70px; }
#intro{ padding: 110px 0 100px; background: url(../images/bg_intro.jpg) center top/cover no-repeat; }
#intro .dot:before{ background: #000;}

#intro h3.center span{ padding: 0 0 30px; font-family: 'Noto-Sans-JP-Bold'; font-size: 30px; }
#intro h3 strong{ font-size: 50px; font-weight: 600; }

#intro .top h3 strong{ font-size: 70px; vertical-align: bottom; }
#intro .top .subttl{ padding: 0 0 35px; font-size: 30px; text-align: center; font-family: 'Noto-Sans-JP-Bold';  }

#intro .w_box{ position: relative; box-shadow: none; border-radius: 20px; }

#intro .top{ padding: 80px 60px 50px; }
#intro .top .box{ position: relative; margin: 73px 0 0; padding: 68px 40px 38px; background: #f0f0eb; border-radius: 10px; }
#intro .top .box .ttl{ position: absolute; top: -30px; left: 50%; width: 430px; transform: translate(-50%,0); padding: 13px 10px; border-radius: 10px; background: #313131; font-family: 'Noto-Sans-JP-Bold'; color: #fff; text-align: center; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; }
#intro .top .box .flex{ display: flex; align-items: center; justify-content: space-between; }

#intro .top .box .right{ width: 390px; }
#intro .top .box .right h4{ padding: 0 0 20px; font-size: 30px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; }
#intro .top .box .right p{ line-height: 170%; }

#intro .blue{ position: absolute; top: 41%; left: 50%; transform: translate(-50%,0); width: 320px; margin: 0 auto; padding: 15px 20px; font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; background: #3f97bf; border-radius: 10px; color: #fff; z-index: 10; }

#intro .b_box{ position: relative; background: #deeef5; padding: 85px 60px 80px; border-radius: 0 0 20px 20px; }
#intro .b_box:before{ position: absolute; content: ""; top: 0; left: 50%; transform: translate(-50%,0); border-top: 50px solid #fff; border-right: 515px solid transparent; border-left: 515px solid transparent; }

#intro .b_box h3{ font-size: 36px; line-height: 150%; }
#intro .b_box h3 span{ font-size: 50px; }
#intro .b_box h4{ padding: 0 0 20px; font-size: 30px; line-height: 140%; text-align: center; font-family: 'Noto-Sans-JP-Bold'; }
#intro .b_box p{ width: 600px; margin: 0 auto; line-height: 180%;  }

#intro .b_box img{ display: block; margin: 0 auto; padding: 30px 0 40px; }
#intro .b_box img.PC{ display: block; }
#intro .b_box img.SP{ display: none; }


/* ------------------------------------------------------------ choose */
#choose{ padding: 170px 0 100px; }
#choose .choose_inner{ width: 1130px; margin: 0 auto; }
#choose .dot:before{ background: #000; }

#choose p{ font-size: 30px; text-align: center; font-family: 'Noto-Sans-JP-Bold'; }
#choose h3{ padding: 35px 0 120px; font-size: 50px; text-align: center; font-family: 'Noto-Sans-JP-Bold'; }

#choose ul{ padding: 0 0 80px; }
#choose ul li{ position: relative; float: left; width: 350px; 560px; margin: 0 40px 0 0; padding: 90px 30px 40px; box-sizing: border-box; background: #fff; box-shadow: 6.157px 7.88px 30px 0px rgba(66, 66, 66, 0.2); border-radius: 20px; }
#choose ul li:last-of-type{ margin: 0; }

#choose ul li .num{ position: absolute; top: -50px; left: 50%; transform: translate(-50%,0); width: 120px; }
#choose ul li .num img{ width: 100%; height: auto; }
#choose ul li img{ display: block; width: 270px; height: auto; margin: 0 auto; }
#choose ul li h4{ padding: 24px 0 20px; text-align: center; font-size: 24px; line-height: 140%;  font-family: 'Noto-Sans-JP-Bold'; }
#choose ul li p{ font-size: 14px; line-height: 180%; font-family: 'Noto-Sans-JP-Regular'; text-align: left; }


#choose .box{ width: 900px; margin: 0 auto; padding: 30px; box-sizing: border-box; border: 3px solid #737373; background: url(../images/bg_repeat_02.png) center/cover; border-radius: 20px; }
#choose .box dl{ display: flex; align-items: center; justify-content: space-between; }
#choose .box dl dt{ width: 275px; padding: 15px 0 15px 60px; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; background: url(../images/icn_06.svg) left center/40px no-repeat; }
#choose .box dl dd{ width: 630px; padding: 0 0 0 25px; font-size: 14px; line-height: 150%; border-left: 3px solid #737373; }



/* ------------------------------------------------------------ wrong */
section#wrong:before{ background: none; }
#wrong{ padding: 90px 0 70px; background: url(../images/bg_wrong.jpg) center top/cover no-repeat; }

#wrong h3{ width: 900px; margin: 0 auto; position: relative; padding: 33px 0; font-size: 36px; text-align: center; color: #fff; font-family: 'Noto-Sans-JP-Bold'; border: 3px solid #fff; border-radius: 10px; }
#wrong h3:after{ position: absolute; content: ""; bottom: -18px; left: 50%; transform: translate(-50%,0); border-top: 18px solid #fff; border-left: 13px solid transparent; border-right: 13px solid transparent; }


#wrong ul{ margin: 40px 0; padding: 18px 40px; border-radius: 20px; }
#wrong ul li{ padding: 13px 0 13px 55px; border-bottom: 2px dotted #c9c9c9; background: url(../images/icn_08.png) left center/29px no-repeat; font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; line-height: 150%; }
#wrong ul li:last-of-type{ border: none; }

#wrong .middle{ font-size: 40px; line-height: 130%; font-family: 'Noto-Sans-JP-Bold'; color: #fff; text-align: center; }
#wrong .middle small{ font-size: 36px; }

/* #wrong .faq{ padding: 40px 0 0; } */
#wrong .faq .faq_box{ padding: 31px 0; border-bottom: 2px dotted #fff; }
#wrong .faq .faq_box:last-of-type{ border: none; }

#wrong .faq .faq_box h4{ padding: 23px 35px 23px 110px; font-size: 24px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; border-radius: 20px; background: #fff url(../images/faq_q.png) 35px center/55px no-repeat; }
#wrong .faq .faq_box dl{ margin: 20px 0 0; padding: 15px 35px; background: #fff; border-radius: 20px; }
#wrong .faq .faq_box dl dt{ padding: 25px 0 25px 75px; font-size: 24px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; 
	border-bottom: 2px dotted #c9c9c9; background: url(../images/faq_a.png) left center/55px no-repeat; }
#wrong .faq .faq_box dl dd{ padding: 17px 0 0; }
#wrong .faq .faq_box dl dd p{ line-height: 180%; }



/* ------------------------------------------------------------ satisfi */
section#satisfi:before{ background: none; }
#satisfi .satisfi_inner{ width: 1030px; margin: 0 auto; text-align: center; }

#satisfi .top{ padding: 40px 0; background: #3f97bf; }
#satisfi .top h3{ line-height: 160%; font-size: 40px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; color: #fff; }
#satisfi .top h3 span{ display: block;}
#satisfi .top h3 img { vertical-align: bottom; }


#satisfi .bottom{ padding: 70px 0 80px; background: #d5e9f1; }



/* ------------------------------------------------------------ case */
#case{ padding: 140px 0 120px; background: url(../images/bg_case.jpg) center; }

#case p{ position: relative; width: 780px; margin: 40px auto 27px; padding: 19px 0 18px 60px; background: #3f97bf; font-size: 24px; color: #fff; font-family: 'Noto-Sans-JP-Bold'; border-radius: 10px; }
#case p:after{ position: absolute; content: ""; bottom: -18px; left: 50%; transform: translate(-50%,0); border-top: 18px solid #3f97bf; border-left: 13px solid transparent; border-right: 13px solid transparent; }
#case p:before{ position: absolute; content: ""; width: 100px; height: 83px; top: -34px; right: 50px; background: url(../images/icn_07.svg) center/cover no-repeat; }


#case .slider{ padding: 20px 0 0; }
#case .slider.SP{ display: none; }
#case .slider img{ display: block; width: 710px!important; height: auto; margin: 0 45px; padding: 0 0 20px 0; filter: drop-shadow(15px 0px 28px rgba(0,0,0,0.1)); }

#case .slick-prev,
#case .slick-next{ width: 40px; height: 70px; z-index: 50; background: initial; }

#case .slick-prev:before,
#case .slick-next:before{ width: 40px; height: 75px; position: absolute; top: 0; left: 0; }

#case .slick-prev{ left: 16%; }
#case .slick-prev:before{ content: ""; background: url(../images/arrow_p.png) center/100% no-repeat; }

#case .slick-next{ right: 16%; }
#case .slick-next:before{ content: ""; background: url(../images/arrow_n.png) center/100% no-repeat; }

#case .slick-dots{ bottom: -55px; }
#case .slick-dots li button:before{ width: 12px; height: 12px; content: ''; background: #c9c9c9; border-radius: 50px; opacity: 1; }
#case .slick-dots li.slick-active button:before{ background: #3f97bf; opacity: 1; }



/* ------------------------------------------------------------ promise */
section#promise:before{ background: #fff; }
#promise{ padding: 160px 0 0; background: url(../images/bg_promiss_01.jpg) center; }
#promise .bg{ padding: 0 0 25px; background: url(../images/bg_promiss_02.png) calc(100% - 50px) bottom no-repeat; }

#promise h3{ margin: 0 0 75px; padding: 0 0 15px; color: #fff; background: url(../images/bg_text_03.png) center bottom no-repeat; }
#promise h3.center span{ padding: 0 0 20px; }
#promise h3 strong{ font-size: 90px; }

#promise .w_box{ text-align: center; position: relative; float: left; width: 300px; height: 340px; margin: 0 50px 75px 0; padding: 30px 25px; background: #fff; box-shadow: 9.235px 11.82px 15px 0px rgba(66, 66, 66, 0.2); border-radius: 20px; box-sizing: border-box; }
#promise .w_box:nth-of-type(3n){ margin-right: 0; }

#promise .w_box .num{ position: absolute; top: -35px; left: 20px; font-size: 70px; font-family: din-2014,sans-serif; font-weight: 300; }
#promise .w_box img{ display: block; margin: 0 auto; padding: 0 0 10px; }
#promise .w_box h4{ display: inline-block; padding: 0 0 10px; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; background: url(../images/bg_text_04.png) center bottom/100% no-repeat; }
#promise .w_box ul{ padding: 13px 0 0; }
#promise .w_box ul li{ font-size: 14px; line-height: 170%; text-indent: -1rem; padding-left: 1rem; text-align: left; }



/* ------------------------------------------------------------ flow */
#flow{ padding: 140px 0 80px; background: #d5e9f1; }

#flow ul{ width: 710px; margin: 0 auto; padding: 40px 0 0; }
#flow ul li{ width: 100%; /* height: 180px; */ margin: 0 0 30px; padding: 25px 0; box-sizing: border-box; background: #fff; box-shadow: 9.235px 11.82px 15px 0px rgba(66, 66, 66, 0.2); border-radius: 15px; }
#flow ul li .flex{ display: flex; align-items: center; }

#flow ul li .left{ display: flex; align-items: center; width: 245px; padding: 20px 0; }
#flow ul li .left .num{ width: 80px; padding: 12px 0 8px; border-radius: 0 10px 10px 0; color: #fff; background: #3f97bf; font-size: 40px; font-family: din-2014,sans-serif; font-weight: 300; text-align: center; }
#flow ul li .left .num span{ display: block; font-family: futura-pt,sans-serif; font-weight: 400; font-size: 20px }
#flow ul li .left img{ display: block; padding: 0 0 0 45px; }

#flow ul li .right{ width: 410px; padding: 20px 0 20px 40px; box-sizing: border-box; border-left: 2px solid #c9c9c9; }
#flow ul li .right h4{ padding: 0 0 20px; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; line-height: 120%; }
#flow ul li .right p{ font-size: 14px; line-height: 170%; font-family: 'Noto-Sans-JP-Medium'; }



/* ------------------------------------------------------------ campaign */
#campaign{ padding: 140px 0 100px; background: #fcd755; }

#campaign h3{ margin: 0 0 30px; }
#campaign .top_ttl{ width: 655px; margin: 0 auto 15px; padding: 10px 0; font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; background: url(../images/deco_L.png) left center/30px no-repeat, url(../images/deco_R.png) right center/30px no-repeat; }
#campaign .top_ttl .dot:before{ background: #000; }

#campaign .w_box{ text-align: center; background: none; margin: 0 auto 56px; box-shadow: none; }

#campaign .box{ position: relative; width: 700px; margin: 0 auto; padding: 32px 10px 18px; background: url(../images/bg_repeat_03.png) center; text-align: center; border-radius: 20px; border: 3px solid #000; }
#campaign .box .ttl{ width: 100%; position: absolute; top: -11px; left: 50%; transform: translate(-50%,0); text-align: center; color: #fff; font-size: 22px; font-family: 'Noto-Sans-JP-Medium'; }
#campaign .box .ttl span{ padding: 0px 6px; margin: 0 -2px; background: #000; border-radius: 50px; }
#campaign .box p:last-of-type{ font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; }

#campaign small{ display: block;width: 700px; margin: 0 auto; padding: 28px 0 0; font-size: 14px; line-height: 180%; }



/* ------------------------------------------------------------ area */
#area{ padding: 140px 0 100px; }

#area .box{ margin: 50px 0 66px; background: url(../images/pic_08.png) right top/320px no-repeat; }
#area .box h4{ font-size: 24px; line-height: 160%; font-family: 'Noto-Sans-JP-Bold'; }
#area .box h4 span{ display: block; width: 165px; border-radius: 50px; padding: 5px 0; margin: 0 0 11px; font-size: 20px; color: #fff; text-align: center; background: #3f97bf; }
#area .box h5{ padding: 50px 0 0; font-size: 36px; line-height: 130%; font-family: 'Noto-Sans-JP-Bold'; }
#area .box p{ width: 400px; padding: 30px 45px 0 0; border-radius: 20px; background: #fff; line-height: 180%; text-align:justify; font-family: 'Noto-Sans-JP-Light'; }


#area .b_box{ position: relative; padding: 55px 10px 40px; background: #d5e9f1; border-radius: 10px;  }
#area .b_box p{ position: absolute; top: -25px; left: 50%; transform: translate(-50%,0); padding: 15px 0; width: 450px; box-sizing: border-box; color: #fff; text-align: center; font-family: 'Noto-Sans-JP-Medium'; background: #3f97bf; border-radius: 50px; font-size: 20px; }
#area .b_box ul li{ float: left; width: 222px; padding: 6px 0; border-right: 1px solid #898989; text-align: center; }
#area .b_box ul li:nth-of-type(3n){ border: none; }



/* ------------------------------------------------------------ faq */
#faq{ padding: 140px 0 80px; background: url(../images/bg_case.jpg) center; }

#faq .faq_area{ width: 800px; margin: 0 auto; padding: 40px 0 0; }
#faq .faq_area dl{ margin: 0 0 20px; background: #fff; box-shadow: 9.235px 11.82px 15px 0px rgba(66, 66, 66, 0.2); border-radius: 15px; }
#faq .faq_area dl dt{ position: relative; padding: 30px 30px 30px 80px; background: url(../images/faq_q_b.png) 30px center/40px no-repeat; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 150%; }
#faq .faq_area dl dt:after{ position: absolute; content: ""; top: 50%; right: 50px; width: 7px; height: 7px; border-top: 2px solid #4cb5b3; border-right: 2px solid #4cb5b3; transform: rotate(135deg); transition: all .5s; }
#faq .faq_area dl dd{  border-top: 1px solid #b3b3b3; padding: 20px 30px 30px; }
#faq .faq_area dl dd p{ font-size: 14px; line-height: 180%; }

/* open */
#faq .faq_area dl.open dt:after{ transform: rotate(-45deg); transition: all .5s; }



/* ------------------------------------------------------------ contact */
section#contact:before{ background: none; }

#contact{ padding: 80px 0; background: url(../images/bg_contact.jpg) center/cover no-repeat; }
#contact h3{ padding: 0 0 30px; font-size: 29px; letter-spacing: 0.04em; text-align: center; color: #fff; font-family: 'Noto-Sans-JP-Medium'; }

#contact ul li{ float: left; display: flex; align-items: center; justify-content: center; width: 490px; height: 110px; margin: 0 10px; box-sizing: border-box; }
#contact ul li:first-of-type{ border: 1px solid #fff; }
#contact ul li:first-of-type p{ padding: 0 0 0 35px; color: #fff; font-size: 36px; background: url(../images/icn_10.png) calc(50% - 110px) center/20px no-repeat; }
#contact ul li:first-of-type small{ display: inline-block; padding: 5px 0 0 35px; font-size: 14px; font-family: 'Noto-Sans-JP-Regular'; text-align: center;}

#contact ul li:last-of-type{ background: #fff; }
#contact ul li:last-of-type p{ padding: 0 0 0 35px; color: #000; background: url(../images/icn_11.png) calc(50% - 130px) center/30px no-repeat; font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; }


/* ------------------------------------------------------------
	responsible 
------------------------------------------------------------ */
@media only screen and (max-width: 1350px) {
	
	body{ min-width: 1200px; }
	aside{ width: 270px; }
	main{ width: calc(100% - 270px); }
	
	.inner{ width: 880px; }
	.s_inner{ width: 650px; }
	
	h3.center{ font-size: 42px; }
	
	.dot:before{ width: 5px; height: 5px; }
	
	
	/* ------------------------------------------------------------ aside */
	aside .aside_inner{ width: 90%; }
	
	aside .w_box{ padding: 25px 10px 20px; }
	aside .w_box p strong{ font-size: 30px; }
	aside .w_box dt{ font-size: 17px; }
	aside .w_box dt span{ width: 35px; height: 35px; line-height: 170%; font-size: 21px; }
	
	aside select{ height: 40px; font-size: 13px; }
	aside input[type="radio"]+label:before, aside input[type="checkbox"]+label:before { width: 105px; height: 81px; background-size: 90px; }
	
	aside .w_box .line{ width: 100%; height: auto; }
	aside .w_box button:after{ width: 6px; height: 6px; }
	
	
	
	/* ------------------------------------------------------------ fv */
	#fv h2{ width: 90%; margin: 0 auto; }
	#fv h2 img{ width: 100%; height: auto; }

	#fv dl{ width: 600px; }
	#fv dl dt{ font-size: 22px; }
	#fv dl dt:after{ right: -14px; border-top: 24px solid transparent; border-bottom: 24px solid transparent; }
	#fv dl dd{ padding: 13px 28px; font-size: 20px; }


	
	/* ------------------------------------------------------------ reason */
	#reason{ padding: 100px 0 80px; }
	#reason .box{ padding: 100px 35px 30px; }
	
	#reason ul li{ width: 250px; height: 136px; margin: 0 25px 55px; padding: 35px 15px 20px; }
	#reason ul li:nth-child(n+3):nth-child(-n+5){ margin: 0 10px 55px; }
	
	#reason ul li .num{ font-size: 50px; }
	#reason ul li h4{ font-size: 20px; }
	#reason ul li .text{ padding: 7px 0 0; font-size: 13px; }


	
	/* ------------------------------------------------------------ strong */
	#strong h3{ font-size: 35px; }
	#strong h3:before{ width: 880px; }
	#strong h3 img{ padding: 0 0 35px; width: 240px; height: auto; }
	#strong h3 strong{ font-size: 44px; }
	
	#strong article .top{ gap: 15px 20px; grid-template-columns: 100px 695px; padding: 0 0 5px; }
	#strong article .top img{ width: 100px; }
	#strong article .top h4{ font-size: 30px; }
	#strong article .top p{ font-size: 14px; }
	
	#strong article .bottom{ padding: 25px 0 0; }
	#strong article .bottom img{ margin: 0 30px 0 0; width: 370px; }
	#strong article .bottom h5{ font-size: 27px; }
	#strong article .bottom p{ font-size: 14px; }
	
	
	
	/* ------------------------------------------------------------ why */
	#why ul li{ width: 425px; height: 660px; padding: 60px 20px 25px; margin: 0 30px 0 0; }
	#why ul li .num{ width: 100px; }
	#why ul li .point{ padding: 17px 30px 8px; }
	#why ul li .point p{ font-size: 19px; }
	#why ul li .point h4{ font-size: 16px; }
	
	
	
	/* ------------------------------------------------------------ cta */
	.cta .w_box:before{ width: 120px; height: 143px; }
	.cta .w_box .ttl{ width: 620px; font-size: 24px; }
	
	.cta .bubble{ left: -19px; width: 120px; height: 120px; font-size: 28px; }
	
	.cta .w_box img{ width: 600px; height: auto; padding: 0 0 25px; }
	.cta .w_box div a{ width: 380px; height: 60px; padding: 6px 0 0 40px; font-size: 16px; }
	.cta .w_box div a:before{ width: 34px; height: 23px; left: calc(50% - 130px); }
	.cta .w_box div a:last-of-type:before{ width: 32px; height: 31px; }
	.cta .w_box div a:after{ top: 22px; width: 9px; height: 9px; }
	
	
		
	/* ------------------------------------------------------------ intro */
	#intro{ padding: 110px 0 80px; }
	#intro .top{ padding: 75px 60px 40px; }
	#intro .top .subttl{ padding: 0 0 25px; font-size: 27px; }
	
	#intro .top .box{ padding: 60px 30px 38px; }
	#intro .top .box .ttl{ top: -25px; font-size: 22px; }
	#intro .top .box img{ width: 320px; height: auto; }
	
	#intro .top .box .right{ width: 350px; }
	#intro .top .box .right h4{ padding: 0 0 15px; font-size: 25px; }
	#intro .top .box .right p{ font-size: 14px; }

	#intro .blue{ width: 290px; padding: 14px 20px; font-size: 25px; }
	
	#intro .b_box{ padding: 85px 60px 70px; }
	#intro .b_box:before{ border-right: 455px solid transparent; border-left: 455px solid transparent; }
	
	#intro .b_box h3{ font-size: 30px; line-height: 140%; }
	#intro .b_box h4{ padding: 0 0 15px; font-size: 26px; line-height: 160%; }
	#intro .b_box p{ width: 500px; }
	#intro .b_box img{ width: 500px; height: auto; padding: 20px 0 30px; }
	
	
	
	/* ------------------------------------------------------------ choose */
	#choose .choose_inner{ width: 880px; }
	
	#choose p{ font-size: 28px; }
	#choose h3{ padding: 30px 0 100px; font-size: 40px; }
	
	#choose ul li{ width: 273px; margin: 0 30px 0 0; padding: 65px 25px 25px; }
	#choose ul li .num{ width: 90px; } 
	#choose ul li h4{ padding: 19px 0 15px; font-size: 20px; }
	#choose ul li p{ font-size: 13px; }
	#choose ul li img{ width: 100%; }
	
	
	#choose .box{ width: 750px; padding: 20px; }
	#choose .box dl dt{ width: 270px; font-size: 21px; }
	#choose .box dl dd{ width: 625px; padding: 0 0 0 20px; font-size: 13px; }
	
	
	
	/* ------------------------------------------------------------ wrong */
	#wrong{ padding: 140px 0 80px; }
	#wrong h3{ width: 800px; padding: 30px 0; font-size: 33px; }
	
	#wrong ul{ padding: 12px 30px; }
	#wrong ul li{ padding: 11px 0 11px 50px; background: url(../images/icn_08.png) left center/25px no-repeat; font-size: 17px; }
	
	#wrong .middle{ font-size: 35px; }
	#wrong .middle small{ font-size: 32px; }
	
	#wrong .faq .faq_box{ padding: 25px 0; }
	#wrong .faq .faq_box h4{ padding: 20px 30px 20px 100px; font-size: 20px; background: #fff url(../images/faq_q.png) 35px center/45px no-repeat; }
	#wrong .faq .faq_box dl{ margin: 17px 0 0; padding: 10px 40px; }
	#wrong .faq .faq_box dl dt{ padding: 20px 0 20px 60px; font-size: 20px; background: url(../images/faq_a.png) left center/45px no-repeat; }
	#wrong .faq .faq_box dl dd{ font-size: 15px; }
	
	#why .b_box{ width: 735px; padding: 35px 45px 29px; }
	#why .b_box:before{ top: -56px; right: 50px; width: 272px; height: 130px; }
	#why .b_box h5{ font-size: 27px; }
	#why .b_box p{ font-size: 20px; }
	
	
	
	/* ------------------------------------------------------------ satisfi */
	#satisfi .top h3{ font-size: 37px; }
	#satisfi .top h3 img{ width: 240px; height: auto; }
	
	
	#satisfi .bottom{ padding: 35px 0 50px; }
	#satisfi .satisfi_inner{ width: 900px; }
	#satisfi .satisfi_inner img{ width: 100%; height: auto; }
	
	
	
	/* ------------------------------------------------------------ case */
	#case{ padding: 140px 0 80px; }
	#case p{ width: 740px; padding: 19px 0 18px 53px; box-sizing: border-box; font-size: 23px; }
	#case p:before{ width: 86px; height: 73px; top: -25px; right: 35px; }
	
	
	#case .slider img{ width: 650px!important; margin: 0 30px; filter: drop-shadow(8px 0px 18px rgba(0,0,0,0.1)); }
	
	.slick-dotted.slick-slider{ margin-bottom: 20px; }
	#case .slick-dots{ bottom: -35px; }
	#case .slick-next{ right: 14%; }
	#case .slick-prev{ left: 14%; }
	
	
	
	/* ------------------------------------------------------------ promise */
	#promise .bg{ background: url(../images/bg_promiss_02.png) calc(100% - 10px) bottom/230px no-repeat; }
	#promise h3 strong{ font-size: 80px; }
	
	#promise .w_box{ width: 273px; height: 320px; margin: 0 30px 75px 0; padding: 30px 18px; }
	#promise .w_box .num{ font-size: 60px; }
	#promise .w_box img{ width: 65px; height: auto; }
	#promise .w_box h4{ padding: 0 0 7px; font-size: 22px; }
	
	
	
	/* ------------------------------------------------------------ campaign */
	#campaign{ padding: 140px 0 70px; }
	#campaign .w_box{ width: 800px; }
	#campaign .w_box img{ width: 100%; height: auto;}
	
	#campaign .box{ width: 650px; padding: 28px 10px 16px; }
	#campaign .box .ttl{ font-size: 20px; }
	#campaign .box p:last-of-type{ font-size: 22px; }
	
	#campaign small{ width: 650px; padding: 21px 0 0; font-size: 13px; }
	
	
	
	/* ------------------------------------------------------------ area */
	#area{ padding: 140px 0 80px; }
	#area .box h4{ font-size: 22px; line-height: 150%; }
	#area .box h4 span{ width: 155px; font-size: 18px; }
	#area .box h5{ padding: 35px 0 0; font-size: 33px; }
	#area .box p{ padding: 25px 30px 0 0; font-size: 15px; }
	
	
	#area .b_box{ padding: 45px 10px 35px; }
	#area .b_box p{ padding: 14px 0; width: 420px; font-size: 18px; }
	#area .b_box ul li{ width: 209px; font-size: 15px; }
	
	
	
	/* ------------------------------------------------------------ faq */
	#faq .faq_area{ width: 750px; padding: 35px 0 0; }
	#faq .faq_area dl dt{ padding: 25px 30px 25px 80px; background: url(../images/faq_q_b.png) 30px center/ 35px no-repeat; font-size: 16px; }
	#faq .faq_area dl dt:after{ top: 45%; right: 29px; }
	#faq .faq_area dl dd{ padding: 15px 30px 23px; }
	#faq .faq_area dl dd p{ font-size: 13px; }
	
	
	
	/* ------------------------------------------------------------ contact */
	#contact ul li{ width: 420px; }
	
	
	
	
}



/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	
	body{ min-width: 100%; }
	section:before{ width: 3px; height: 70px; top: 30px; }
	
	h3.center{ font-size: 30px; line-height: 140%; }
	h3.center span{ padding: 0 0 15px; font-size: 15px; }
	
	.inner, .s_inner { width: 90%; }
	
	/* ------------------------------------------------------------ aside */
	aside{ display: none; }


	
	/* ------------------------------------------------------------ fv */
	
	main{ width: 100%; }
	
	#fv{ height: auto; min-height: auto; max-height: auto; background: url(../images/bg_fv-sp.jpg) center/cover no-repeat; }
	#fv .fv_inner{ width: 85%; padding: 70px 0 100px; }
	
	#fv h2{ width: 100%; }
	#fv h2 img{ width: 100%; height: auto; }
	
	#fv dl{ flex-direction: column; width: 100%; margin: 25px auto 30px; font-size: 15px; text-align: center; border-radius: 10px; }
	#fv dl dt{ padding: 7px 0;width: 100%; font-size: 15px; border-radius: 8px 8px 0 0; }
	#fv dl dt:after{ top: initial; right: initial; border-bottom: initial; bottom: -8px; left: 50%; transform: translate(-50%,0); border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 8px solid #000; }
	#fv dl dd{ padding: 15px 15px 10px; }
	
	#fv dl dt.corre_area_title { justify-content: center; }
	#fv dl dd ul.corre_area li { display: flex; padding: 0 0 10px 0; }
	#fv dl dd ul.corre_area li:last-child { padding-bottom: 0; }
	#fv dl dd ul.corre_area li strong { font-size: 18px; }
	#fv dl dd ul.corre_area li p { width: calc(100% - 60px); line-height: 130%; text-align: left; font-size: 16px; }
	
	#fv ul.fv_bottom_info{ width: 100%; padding: 0; }
	#fv ul.fv_bottom_info li{ float: none; width: 100%; display: flex; align-items: center; height: 73px; margin: 0 0 15px; padding: 11.5% 5%; background: url(../images/bg_fvtext-sp.png) center/cover no-repeat; filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.3)); }
	#fv ul.fv_bottom_info li h3{ width: 32%; padding: 0 1% 0 0; border-bottom: none; line-height: 140%; font-size: 15px; }
	#fv ul.fv_bottom_info li p{ width: 64%; padding: 0 0 0 3%; font-size: 13px; text-align: left; line-height: 180%;  border-left: 1px solid #fff; }
	
	/* ------------------------------------------------------------ reason */
	section#reason:before{ top: 30px; height: 70px; }
	#reason{ padding: 60px 0; }
	#reason .box{ padding: 50px 5% 30px; border-radius: 25px; background: #deeef5 url(../images/bg_reason.png) right top/120px no-repeat; }
	#reason .box:before{ top: 20px; right: -13px; width: 70px; height: 118px; }
	#reason .box h3{ font-size: 25px; }
	#reason .box h3 img{ padding: 0; width: 150px; height: auto; vertical-align: bottom; }
	#reason .box h3 span{ padding: 0 15px; line-height: 200%; font-size: 30px; background: url(../images/bg_text_01.png) center bottom/100% no-repeat; }
	#reason .box h3 strong{ font-size: 60px; vertical-align: bottom; }
	

	#reason ul{ padding: 30px 0 0; }
	#reason ul li,
	#reason ul li:nth-child(n+3):nth-child(-n+5){ width: 90%; height: 110px; margin: 0 0 40px; padding: 30px 10px 20px; border-radius: 10px; box-shadow: 7px 10px 10px 0px rgba(66, 66, 66, 0.2); }
	#reason ul li:last-of-type{ margin: 0; }
	#reason ul li h4{ font-size: 20px; line-height: 140%; }
	#reason ul li h4 strong{ font-size: 50px; }
	#reason ul li:nth-of-type(6) h4 strong{ padding: 0 2px; }
	#reason ul li .num{ font-size: 58px; top: -35px; }
	#reason ul li .text{ padding: 4px 0 0; font-size: 12px; }
	
	
	
	/* ------------------------------------------------------------ strong */
	#strong{ padding: 0 0 35px; }
	#strong:before{ top: 30px; }
	#strong .bg{ padding: 120px 0 0; background: url(../images/bg_strong_02.png) calc(100% - 20px) top/80px no-repeat; }
	
	#strong h3{ padding: 0 0 25px; background: url(../images/bg_text_02.png) calc(50% + 80px) 40px/70px no-repeat; font-size: 20px; }
	#strong h3:before{ width: 50px; height: 90px; left: -10px; background: url(../images/icn_02.svg) center/cover no-repeat; }
	#strong h3 img{ padding: 0; width: 150px; height: auto; vertical-align: baseline; }
	#strong h3 strong{ font-size: 30px; }
	
	
	#strong article{ margin: 0 0 15px; padding: 20px 25px; }
	#strong article .top{ gap: 10px 15px; grid-template-columns: 68px calc(100% - 90px); grid-template-rows: 65px 40px; padding: 0 0 15px; }
	#strong article .top img{ width: 65px; grid-row: 1/2; }
	#strong article .top h4{ font-size: 19px; padding: 0; line-height: 130%; }
	#strong article .top p{ grid-column: 1/3; margin: 0; font-size: 10px; }
	
	#strong article .blue{ padding: 12px 0; font-size: 15px; border-radius: 5px; line-height: 150%; }
	
	#strong article .bottom{ padding: 15px 0 0; flex-direction: column; }
	#strong article .bottom img{ margin: 0 0 18px; width: 100%; border-radius: 5px; }
	#strong article .bottom h5{ padding: 0 0 15px; font-size: 18px; line-height: 160%; text-align: center; }
	#strong article .bottom p{ line-height: 200%; font-size: 13px; }
	

	
	/* ------------------------------------------------------------ why */
	#why{ padding: 120px 0 80px; }
	
	#why ul{ padding: 60px 0 35px; }
	#why ul li{ float: none; width: 100%; height: auto; padding: 60px 10px 25px; margin: 0 0 70px; border-radius: 10px; }
	#why ul li .num{ width: 80px; top: -42px; }
	
	#why ul li .point{ padding: 17px 15px 8px; border: 2px solid #3f97bf; border-radius: 10px; }
	#why ul li .point p{ top: -13px; font-size: 18px; }
	#why ul li .point p span{ padding: 2px 6px; font-size: 18px; }
	#why ul li .point h4{ font-size: 16px; line-height: 170%; }
	
	
	#why .b_box{ width: 100%; padding: 40px 45px 65px; border-radius: 10px; padding: 33px 30px 65px; }
	#why .b_box:before{ top: initial; bottom: -40px; width: 200px; height: 98px; }
	#why .b_box h5{ text-align: center; font-size: 20px; }
	#why .b_box p{ font-size: 16px; line-height: 180%; text-align: center; }
	
	
	
	/* ------------------------------------------------------------ cta */
	.cta{ padding: 25px 0; }
	.cta .bubble{ position: relative; top: initial; left: initial; width: 65%; height: 50px; margin: 0 auto 45px; padding: 10px 0 0; box-sizing: border-box; border-radius: 50px; font-size: 24px; color: #ffe400; background: #000; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
	.cta .bubble:after{ right: initial; left: 50%; bottom: -18px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 11px solid #000; transform: rotate(90deg) translate(-50%,0); }
	
	.cta .w_box{ padding: 50px 20px 14px; border: 1px solid #000; }
	.cta .w_box:before{ top: 60px; right: 25px; width: 60px; height: 70px; }
	.cta .w_box .ttl{ width: 80%; padding: 7px 10px 8px; font-size: 18px; line-height: 130%; }
	
	.cta .w_box img{ width: 77%; height: auto; padding: 0 0 20px; }
	.cta .w_box img.PC{ display: none; }
	.cta .w_box img.SP{ display: block; }
	
	.cta .w_box div{ flex-direction: column; }
	.cta .w_box div a{ width: 100%; height: 50px; padding: 7px 0 0 20px; font-size: 13px; margin: 0 0 11px; }
	.cta .w_box div a:after{ top: 19px; right: 24px; width: 9px; height: 9px; }
	.cta .w_box div a:before{ width: 23px; height: 16px; left: calc(50% - 100px); }
	.cta .w_box div a:last-of-type:before{ width: 22px; height: 21px; }
	
	
	
	/* ------------------------------------------------------------ intro */
	section#intro:before{ top: 25px; }
	#intro{ padding: 60px 0; background: url(../images/bg_intro-sp.jpg) center top/cover no-repeat; }
	
	#intro h3.center span{ padding: 0 0 15px; font-size: 18px; }
	#intro h3 strong{ font-size: 35px; }
	
	#intro .w_box{ border-radius: 10px; }
	
	#intro .top{ padding: 50px 5% 20px; }
	#intro .top h3 strong{ font-size: 45px; }
	#intro .top .subttl{ font-size: 18px; padding: 0 0 10px; }
	
	#intro .top .box{ margin: 35px 0 0; padding: 50px 5% 20px; border-radius: 5px; }
	#intro .top .box .ttl{ top: -17px; width: 75%; padding: 13px 5px; border-radius: 5px; font-size: 15px; }
	#intro .top .box .flex{ flex-direction: column-reverse; }
	#intro .top .box .flex img{ width: 100%; height: auto; }
	
	#intro .top .box .right{ width: 100%; }
	#intro .top .box .right h4{ text-align: center; padding: 0 0 15px; font-size: 20px; }
	#intro .top .box .right p{ line-height: 180%; font-size: 13px; padding: 0 0 20px; }

	#intro .blue{ width: 53%; top: 45.2%; padding: 10px 10px; font-size: 20px; border-radius: 5px; }
	
	
	#intro .b_box{ padding: 75px 6% 30px; border-radius: 0 0 10px 10px; }
	#intro .b_box:before{ border-right: 170px solid transparent; border-left: 170px solid transparent; }
	
	#intro .b_box h3{ font-size: 23px; }
	#intro .b_box img{ padding: 20px 0 25px; width: 95%; height: auto; }
	#intro .b_box img.PC{ display: none; }
	#intro .b_box img.SP{ display: block; }
	
	#intro .b_box h4{ padding: 0 0 15px; font-size: 19px; text-align: left; }
	#intro .b_box p{ width: 100%; line-height: 190%; font-size: 13px; }
	
	
	
	/* ------------------------------------------------------------ choose */
	#choose{ padding: 130px 0 50px; }
	#choose .choose_inner{ width: 100%; }
	
	#choose p{ font-size: 18px; }
	#choose h3{ padding: 15px 0 60px; font-size: 30px; line-height: 140%; }
	
	#choose ul{ padding: 0 0 40px; }
	#choose ul li,
	#choose ul li:last-of-type{ float: none; width: 85%; margin: 0 auto 60px; padding: 60px 5% 30px; border-radius: 10px; }
	#choose ul li:last-of-type{ margin-bottom: 0; }
	
	#choose ul li .num{ top: -40px; width: 25%; }
	#choose ul li img{ width: 100%; }
	#choose ul li h4{ padding: 20px 0 15px; font-size: 20px; }
	#choose ul li p{ font-size: 13px; text-align: left; }
	
	
	#choose .box{ width: 85%; padding: 15px 25px; border-radius: 10px; background: url(../images/bg_repeat_02.png) center/60px; }
	#choose .box dl{ flex-direction: column; }
	#choose .box dl dt{ width: 100%; margin: 0 0 7px; padding: 15px 0 15px 20px; font-size: 17px; background: url(../images/icn_06.svg) calc(50% - 80px) center/27px no-repeat; text-align: center; }
	#choose .box dl dd{ width: 100%; padding: 18px 0 0; font-size: 12px; line-height: 200%; border-top: 3px solid #737373; border-left: initial; }
	
	
	
	/* ------------------------------------------------------------ wrong */
	#wrong{ padding: 50px 0 40px; background: url(../images/bg_wrong-sp.jpg) center top/cover no-repeat; }
	#wrong h3{ width: 85%; padding: 8px 0; font-size: 23px; line-height: 130%; border: 2px solid #fff; border-radius: 5px; }
	#wrong h3:after{ bottom: -16px; border-top: 14px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; }
	
	#wrong ul{ margin: 30px 0; padding: 20px 15px 0; border-radius: 10px; }
	#wrong ul li{ padding: 12px 0 12px 40px; background: url(../images/icn_08.png) left center/33px no-repeat; font-size: 15px; }
	
	#wrong .middle{ font-size: 23px; line-height: 140%; font-family: 'Noto-Sans-JP-Bold'; padding: 0 0 20px; }
	#wrong .middle small{ font-size: 23px; }

	#wrong .faq .faq_box{ padding: 15px 0; }
	#wrong .faq .faq_box h4{ padding: 19px 10px 19px 55px; font-size: 15px; border-radius: 10px; background: #fff url(../images/faq_q.png) 10px center/35px no-repeat; }
	
	#wrong .faq .faq_box dl{ margin: 10px 0 0; padding: 0 10px; border-radius: 10px; }
	#wrong .faq .faq_box dl dt{ padding: 20px 0 20px 41px; font-size: 14px; background: url(../images/faq_a.png) left center/35px no-repeat; }
	#wrong .faq .faq_box dl dd{ padding: 10px 0 0; font-size: 13px; }
	#wrong .faq .faq_box dl dd p{ line-height: 190%; }
	
	
	
	/* ------------------------------------------------------------ satisfi */
	#satisfi .satisfi_inner{ overflow-x: scroll; width: 95%; padding: 0 0 0 5%; }
	
	#satisfi .top{ padding: 19px 0; }
	#satisfi .top h3{ line-height: 140%; font-size: 30px; }
	#satisfi .top h3 span{ font-size: 20px; padding: 0 0 5px; }
	#satisfi .top h3 img{ width: 170px; height: auto; }
	
	#satisfi .bottom{ overflow: hidden; padding: 40px 0; }
	#satisfi .bottom img{ width: 800px; height: auto; }

	
	
	/* ------------------------------------------------------------ case */
	#case{ padding: 120px 0 40px; }
	
	#case p{ width: 100%; margin: 35px auto; padding: 12px 60px 12px 30px; font-size: 15px; box-sizing: border-box; line-height: 140%; text-align: center; border-radius: 5px; }
	#case p:before{ width: 53px; height: 46px; top: 10px; right: 20px; }
	#case p:after{ bottom: -14px; border-top: 15px solid #3f97bf; border-left: 10px solid transparent; border-right: 10px solid transparent; }
	
	
	#case .slider{ padding: 0; }
	#case .slider.SP{ display: block; }
	#case .slider.PC{ display: none; }
	
	#case .slider img{ width: 330px!important; margin: 0 20px; filter: drop-shadow(10px 8px 12px rgba(0,0,0,0.1)); }
	
	#case .slick-next{ right: 3%; }
	#case .slick-prev{ left: 3%; }
	#case .slick-prev:before,
	#case .slick-next:before{ width: 30px; height: 65px; }
	
	#case .slick-dots{ bottom: -15px; }
	#case .slick-dots li,
	#case .slick-dots li button{ width: 10px; height: 10px; }
	#case .slick-dots li button:before{ width: 10px; height: 10px; }
		
	
	
	/* ------------------------------------------------------------ promise */
	#promise{ padding: 120px 0 0; }
	#promise .bg{ padding: 0; background: none; }
	
	#promise h3{ margin: 0 0 45px; padding: 0 0 5px; background: url(../images/bg_text_02.png) center bottom/60% no-repeat; }
	#promise h3.center span{ padding: 0 0 12px; }
	#promise h3 strong{ font-size: 58px; }
	
	#promise .w_box{ float: none; width: 100%; height: auto; margin: 0 0 47px; padding: 20px 25px; border-radius: 10px; }
	#promise .w_box:last-of-type{ margin: 0 0 15px; }
	#promise .w_box img{ padding: 0 0 20px; width: 70px; height: auto; }
	#promise .w_box h4{ padding: 0 0 7px; font-size: 20px; }
	#promise .w_box ul{ padding: 12px 0 0; }
	#promise .w_box ul li{ font-size: 13px; }
	
	#promise .object{ width: 90%; height: auto; margin: 0 auto; }
	
	
	
	/* ------------------------------------------------------------ flow */
	#flow{ padding: 120px 0 30px; }
	#flow ul{ width: 100%; padding: 20px 0 0; }
	#flow ul li{ position: relative; margin: 0 0 20px; padding: 82px 0 23px; border-radius: 10px; }
	#flow ul li .left{ width: 55px; padding: 0 20px 0 25px; }
	#flow ul li .left .num{ display: none; }
	#flow ul li .left img{ padding: 0; width: 100%; height: auto; }
	
	#flow ul li .right{ width: 70%; padding: 10px 20px; }
	#flow ul li .right h4{ padding: 0 0 15px; font-size: 17px; }
	#flow ul li .right p{ font-size: 12px; line-height: 160%; }
	
	#flow .num_sp{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 60px; height: 60px; box-sizing: border-box; padding: 9px 0 0; border-radius: 0 0 5px 5px; background: #3f97bf; color: #fff; font-size: 30px; font-family: din-2014,sans-serif; font-weight: 300; text-align: center; }
	#flow .num_sp span{ display: block; font-size: 14px; font-family: futura-pt,sans-serif; font-weight: 500; }
	


	/* ------------------------------------------------------------ campaign */
	#campaign{ padding: 120px 0 40px; }
	
	#campaign .top_ttl{ width: 85%; padding: 0; font-size: 17px; background: url(../images/deco_L.png) calc(50% - 155px) bottom/20px no-repeat, url(../images/deco_R.png) calc(50% + 150px) bottom/20px no-repeat; line-height: 150%; }
	

	#campaign .w_box{ width: 100%; margin: 0 auto 50px; box-shadow: none; }
	#campaign .w_box img{ width: 100%; height: auto; }
	
	#campaign .box{ width: 100%; padding: 19px 10px 11px; border-radius: 10px; box-sizing: border-box; }
	#campaign .box .ttl{ top: -13px; width: 230px; }
	#campaign .box .ttl span{ padding: 2px 7px; font-size: 18px; }
	#campaign .box p:last-of-type{ font-size: 17px; line-height: 140%; }
	
	#campaign small{ width: 100%; padding: 25px 0 0; font-size: 12px; line-height: 170%; }
	
	
	
	/* ------------------------------------------------------------ area */
	#area{ padding: 120px 0 50px; }
	#area .box{ margin: 40px 3% 0; background: url(../images/pic_08.png) center 100px/200px no-repeat;}
	#area .box h4{ font-size: 17px; text-align: center; }
	#area .box h4 span{ width: 110px; padding: 3px 0; margin: 0 auto 10px; font-size: 15px; text-align: center; }
	#area .box h5{ padding: 20px 0 0; font-size: 24px; margin: 60vw 0 0; background: #fff; border-radius: 0 10px 0 0; width: 70%; }
	#area .box p{ width: 100%; margin: 0 auto; padding: 14px 0 30px; font-size: 13px; line-height: 190%; }
	

	#area .b_box{ padding: 20px 30px; border-radius: 15px; }
	#area .b_box p{ position: relative; top: initial; left: initial; width: 90%; margin: 0 auto 15px; transform: none; padding: 9px 0; font-size: 12px; }
	#area .b_box ul li{ width: 49%; font-size: 12px; }
	#area .b_box ul li:nth-of-type(3n){ border-right: 1px solid #898989; }
	#area .b_box ul li:nth-of-type(even){ border: none; }
	
	
	
	/* ------------------------------------------------------------ faq */
	#faq{ padding: 120px 0 30px; background: url(../images/bg_case.jpg) center/80px; }
	#faq .faq_area{ width: 100%; padding: 20px 0 0; }
	#faq .faq_area dl{ border-radius: 5px; }
	#faq .faq_area dl dt{ height: 70px; box-sizing: border-box; display: flex; align-items: center; padding: 25px 15px 25px 50px; background: url(../images/faq_q_b.png) 14px center/25px no-repeat; font-size: 14px; }
	#faq .faq_area dl dt:after{ top: 38%; right: 15px; width: 10px; height: 10px; }
	#faq .faq_area dl dd{ padding: 10px 55px 15px 15px; }
	#faq .faq_area dl dd p{ font-size: 13px; }
	
	
	
	/* ------------------------------------------------------------ contact */
	#contact{ padding: 31px 0 22px; background: #3f97bf; }
	#contact h3{ padding: 0 0 20px; font-size: 20px; line-height: 150%; }
	
	#contact ul{ width: 80%; margin: 0 auto; }
	#contact ul li{ width: 100%; float: none; height: 80px; margin: 0 0 15px; }
	#contact ul li:first-of-type p{ padding: 0 0 0 27px; font-size: 27px; background: url(../images/icn_10.png) calc(50% - 80px) center/18px no-repeat; }
	#contact ul li:first-of-type small{ font-size: 12px; padding: 0 0 0 15px; }
	
	#contact ul li:last-of-type p{ padding: 0 0 0 30px; background: url(../images/icn_11.png) calc(50% - 100px) center/20px no-repeat; font-size: 15px; }
	
	


}