@charset "utf-8";
/* ------------------------------------------------------------ fv */
#fv { position: relative;
}
#fv .max_wrap {background: url(../images/index/fv_pc.jpg?2) no-repeat center/cover;  position: relative; height: calc( 100vh - 150px); padding: 0 0 0 50px; margin: 0 auto; min-height: 900px;}
h1 { color: #fff; font-size: 50px; line-height: 150%; letter-spacing: 2px; color: #000; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal;  padding: 0 50px; position: absolute; bottom: -110px; } 


#copy { text-align: center; padding: 120px 50px; }
#copy img { width: 100%; height: auto; }

#wrapper { position: relative; }
#reservation { position: fixed; bottom: 10px; width: 90%; padding: 0 5%; }
#reservation img { width: 35%; height: auto;  }
#reservation video { vertical-align: middle; margin-right: 10px; width: 60%; height: auto;  }

.max_wrap { position: relative; }

#image-container {  position: relative; margin: 0 auto; display: block; width: 400px; top: calc( 50% - -2%) }

 /* 吹き出しのスタイル */
        .image-style {
            position: relative;
            display: inline-block;
            margin: 20px;
        }

      
        /* 画像のスタイル */
        .bubble-image {
            width: 240px;
            height: auto;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* 表示中の画像 */
        .active {
            opacity: 1;
            z-index: 1;
        } 
#image1 { left: 0; right: inherit; }   
#image2 { right: -13%; left: inherit; }  
#image3 { left: 0; right: inherit; }  

       
/* ------------------------------------------------------------ intro */
#intro { padding: 0 0 220px; background: url(../images/index/pic_01.png) no-repeat calc(50% - 400px) top; }
#intro .inner { width: 520px; padding: 0 0 0 580px; }
#intro .inner h2 { font-size: 38px; text-align: left; line-height: 62px; margin: 0 auto 50px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal;}
#intro .inner p { font-size: 18px; line-height: 200%; text-align: left; }

#issue { padding: 0 0 50px; }
#issue h2 { background: url(../images/index/h_owl_01.png) no-repeat right bottom; padding: 20px 0 0; width: 980px; margin: 0 auto; margin-bottom: 90px;}
#issue h2 span.en { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; display: inline-block; }
#issue h2 span.jp { display: inline-block; width: 437px; font-size: 38px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 64px; padding: 0 0 0 30px; }

#issue .box { display: flex;  padding: 0 0 100px;}
#issue .box .box-inner { padding: 0 0 0 50px; }
#issue .box .box-inner h3 { font-size: 28px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 0 0 40px;}
#issue .box .box-inner p { font-size: 16px; line-height: 200%; }
#issue .box .box-inner.left { padding: 0 50px 0 0 ; }
#issue .box.left { flex-direction: row-reverse; }

.b-bnr { text-align: center; padding: 0 0 100px; }


#solution { padding: 0 0 150px; }
#solution h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: center; vertical-align: bottom; margin: 0 0 50px;}
#solution h2 img {vertical-align: bottom; padding: 0 20px 0 0; }
#solution p.lead { text-align: center; font-size: 38px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; }

#solution p.lead span.border { border-bottom: #FFF500 solid 13px; font-size: 38px; }
#solution p.lead span.notice { font-size: 12px; display: block; padding: 30px;}

#solution .content .danraku { display: flex; justify-content: space-between; padding: 50px 0 0;}
#solution .content .danraku p { width: 520px; line-height: 200%; }

#solution #block2 { display: flex; justify-content: space-between; padding: 120px 0 0 0;}
#solution #block2 h4 { width: 500px; font-size: 37px; line-height: 64px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; }
#solution #block2 p { width: 550px; line-height: 200%;}

#message { background: #F6B5A8; padding: 100px 0;}
#message h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: center; vertical-align: bottom; margin: 0 0 50px; }
#message h2 img { vertical-align: bottom; padding: 0 20px 0 0;}
#message .content { display: flex; justify-content: space-between; }
#message .content .right { width: 550px;  }
#message .content .right h3 { font-size: 35px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 0 0 30px; }
#message .content .right p { font-size: 16px; line-height: 200%;  }

#good { padding: 100px 0; }
#good h2 { padding: 0 0 50px; text-align: center; }
#good h2 span { font-size: 49px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; border-bottom: #FFF500 solid 13px;  }
#good .three { display: flex; justify-content: space-around; }
#good .three li { text-align: center; }
#good .three li h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 30px; padding: 20px 0 10px; }
#good .three li p { line-height: 160%; }
#good .notice { padding: 50px 0 ; text-align: center; }
#good .text { width: 900px; margin: 0 auto; line-height: 200%; } 


#teacher { background: #FDF9F0; padding: 100px 0 150px;}
#teacher h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: center; vertical-align: bottom; margin: 0 0 50px; }
#teacher h2 img { vertical-align: bottom; padding: 0 20px 0 0;}
#teacher .content { display: flex; justify-content: space-between; }
#teacher .content .right { width: 630px;  }
#teacher .content .right h3 { font-size: 35px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 0 0 30px; }
#teacher .content .right p { font-size: 16px; line-height: 200%;  }


#video { padding: 100px 0 0 ; }
#video h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: left; vertical-align: bottom; margin: 0 0 50px; }
#video h2 img { vertical-align: bottom; padding: 0 20px 0 0;}
#video h2 span {  font-size: 38px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; }
#video video { width: 100%; height: auto; }
#video div p { padding: 0 0 50px ; text-align: center; font-weight: 600; }
#video div h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 30px; padding: 20px 0 10px; text-align: center; }


#flow { padding: 100px 0; }
#flow h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: left; vertical-align: bottom; margin: 0 0 50px;  }
#flow h2 img { vertical-align: bottom; padding: 0 20px 0 0;}
#flow h2 span {  font-size: 38px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; }
#flow .three { display: flex; justify-content: space-around; }
#flow .three li { text-align: center; background: #D6E4AC url(../images/index/arrow.png) no-repeat right center; background-size: auto 100%;  padding: 30px 80px 30px 30px;}
#flow .three li h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 25px; padding: 20px 0 10px; }
#flow .three li p { line-height: 160%; font-size: 26px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; padding-bottom: 20px;}
#flow .three li span { display: block; }
#flow .notice { padding: 50px 0 ; text-align: center; }
#flow .text { width: 900px; margin: 0 auto; line-height: 200%; padding: 50px 0;} 

#flow .price { width: 1100px; margin: 0 auto; border: 5px solid #D5D5D5; border-radius: 20px;}
#flow .price h4 { text-align: center; font-size: 35px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; padding: 50px 0 0 0;}
#flow .price .p-inner img { vertical-align: bottom; }
#flow .price .p-inner p { display: inline-block;   }
#flow .price .p-inner p span.jp { font-size: 43px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;vertical-align: baseline; }

#flow .price .p-inner p span.num { font-size: 97px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; font-style: normal; vertical-align: baseline; line-height: 0; }
#flow .price .p-inner{ text-align: center ; padding: 50px 0 20px;}
#flow .price .p-inner p small { font-weight: bold; }
#flow .price .faster-w { text-align: center; padding: 0 0 50px;}
#flow .price .faster { display: inline-block; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; font-style: normal; font-size: 35px; border-bottom: 20px solid #FFDE2B;}
#flow .price .faster span { font-size: 72px; }


#voice { padding: 100px 0; background: #CEF0F0; }
#voice h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: left; vertical-align: bottom; margin: 0 0 50px;  }
#voice h2 span {  font-size: 38px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; }
#voice ul li { display: flex; justify-content: space-between; padding: 0 0 100px;}
#voice ul li .human p { text-align: center; padding: 10px 0 0 ; }
#voice ul li .baloon {  width: 825px; background: #fff url(../images/index/baloon_arrow.jpg) repeat-y left top; padding: 30px 30px 30px 80px; }
#voice ul li .baloon h4 { font-size: 24px; font-family: 'Noto-Sans-JP-Medium',sans-serif ; padding: 0 0 20px;}
#voice ul li .baloon p { line-height: 200%; }
#voice ul li .baloon.left { width: 825px; background: #fff url(../images/index/baloon_arrow_l.jpg) repeat-y right top; padding: 30px 80px 30px 30px; }


#goal { padding: 100px 0;  }
#goal h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 123px; text-align: center; vertical-align: bottom; margin: 0 0 50px;  }
#goal h2 span {  font-size: 38px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; text-align: center; padding: 20px;}
#goal ul  { padding: 0 0 100px; }
#goal ul li { display: flex; justify-content: space-between; padding: 50px; background: #FDF9F0; margin-bottom: 20px;}
#goal ul li .left p { text-align: center; padding: 10px 0 0 ; font-size: 109px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;  }
#goal ul li .left p span { font-size: 38px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; display: block;}
#goal ul li .right {  width: 786px; }
#goal ul li .right h4 { font-size: 24px; font-family: 'Noto-Sans-JP-Medium',sans-serif ; padding: 0 0 20px;}
#goal ul li .right p { line-height: 200%; }

#company { padding: 100px 0;  }
#company h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 83px; text-align: center; vertical-align: bottom; margin: 0 0 50px;  }
#company h2 span {  font-size: 18px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; text-align: center; padding:  20px;}
#company table { width: 800px; margin: 0 auto; font-size: 16px; border-top: 1px solid #E2E2E2; }
#company table th { padding: 30px 0; text-align: left; border-bottom: 1px solid #E2E2E2; }
#company table td { padding: 30px 0; text-align: left; border-bottom: 1px solid #E2E2E2;}

footer .inner { display: flex; justify-content: space-between; }
footer .inner nav a { padding: 0 0 0 100px; }
footer p { text-align: center; padding: 200px 0 10px; }

#ctr { background: #FFEF00; padding: 50px 0; }
#ctr .inner { position: relative; }
#ctr .inner img.boy { position: absolute; left: 700px; top: -132px; }
#ctr .head-b {}
#ctr .head-b h3 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 72px; padding: 0 0 20px;}
#ctr .head-b h3 span { font-size: 20px; font-family: source-han-sans-japanese, sans-serif;}
#ctr .head-b p { line-height: 160%; padding: 0 0 30px; }
#ctr .btns { display: flex; justify-content: space-around; }
#ctr .btns div { background: #fff; width: 470px; text-align: center; padding: 45px; box-sizing: border-box;}
#ctr .btns div p { font-size: 20px; padding: 0 0 20px; }
#ctr .btns div a { display: block; font-size: 20px; padding: 25px 0; background: #000; color: #fff; }

#ctr .btns div.mail a { background: #fff url(../images/index/email.svg) no-repeat 20px center ; color: #000; border: 1px solid #000; }
#ctr .btns div.line a { background: #03C755 url(../images/index/line.svg) no-repeat 20px center ;;}

#reservation { text-align: right; }
#reservation img { width: 200px; height: auto; }

/* ------------------------------------------------------------ mobile */


@media only screen and (min-width:1600px){

#comment-container {  bottom: 41%; }

}
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */
/* ------------------------------------------------------------ fv */
#fv { background: inherit; padding: 56px 0 0; min-height: inherit; }
#fv .max_wrap { max-width: 100%; margin: 0 auto; padding: 0; height: inherit; background: none; min-height: inherit;}
#fv .max_wrap img { width: 100%; height: auto; }


h1 { color: #fff; font-size: 23px; line-height: 150%; letter-spacing: 0; color: #000; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal;  padding: 0 4%; position: absolute; top: calc( 100vh - 472px); } 


#copy { text-align: center; padding: 120px 5%; }
#copy img { width: 100%; height: auto; }



#image-container {  position: absolute; top: calc( 60% - 13.5rem); margin: 0 auto;  display: inline-block; width: 60% ; right: calc( 100% - 78%);}

 /* 吹き出しのスタイル */
        .image-style {
            position: relative;
            display: inline-block;
            margin: 20px;
        }


      
      
        /* 画像のスタイル */
        .bubble-image {
            width: 240px;
            height: auto;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* 表示中の画像 */
        .active {
            opacity: 1;
            z-index: 1;
        } 
     #fv #image1 { width: 130px; }
     #fv #image2 { width: 130px; }
     #fv #image3 { width: 130px; }     


/* ------------------------------------------------------------ intro */
#intro { background: none; position: relative; padding: 40px 0; }
#intro #intro_magazine { right: 0; top: -42px; width: 90%; max-width: 320px; }
#intro #intro_magazine article { width: 100%; height: 84px; margin: 0 auto; }
#intro #intro_magazine article .img { width: 84px; height: 84px; }
#intro #intro_magazine article .textbox { padding: 10px; }
#intro #intro_magazine article .textbox p { font-size: 12px; line-height: 20px; max-height: 40px; margin: 0 auto 8px; }
#intro #intro_magazine article .textbox small { font-size: 11px; line-height: 14px; max-height: 14px; }
#intro .inner { width: 90%; padding: 0;}
#intro .inner h2 { font-size: 22px; line-height: 36px; margin: 0 auto 15px; }
#intro .inner p { font-size: 14px; line-height: 32px; margin: 0 auto 40px; text-align: left; }
#intro img.SP { width: 100%; height: auto; margin: 0 0 40px; }


#issue { padding: 0 0 50px; }
#issue h2 { background: url(../images/index/h_owl_01.png) no-repeat right top; background-size: 60px auto;  padding: 20px 0 0; width: inherit; margin: 0 auto; margin-bottom: 30px; text-align:center;}
#issue h2 span.en { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; display: inline-block; }
#issue h2 span.jp { display: inline-block; width: inherit; font-size: 22px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 20px 0 0 0; }

#issue .box { display: block;  padding: 0 0 50px;}
#issue .box img { width: 100%; height: auto; }
#issue .box .box-inner { padding: 30px 0 0 0; }
#issue .box .box-inner h3 { font-size: 20px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 0 0 20px;}
#issue .box .box-inner p { font-size: 14px; line-height: 200%; }
#issue .box .box-inner.left { padding: 30px 0 0 0 ;  }

.b-bnr { text-align: center; padding: 0 0 50px; }
.b-bnr img { width: 100%; height: auto; }

#solution { padding: 0 0 70px; }
#solution h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; text-align: center; vertical-align: middle; margin: 0 0 30px;}
#solution h2 img {vertical-align: bottom; padding: 0 10px 0 0; width: 50px ; height: auto;}
#solution p.lead { text-align: center; font-size: 22px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; }

#solution p.lead span.border { border-bottom: #FFF500 solid 6px; font-size: 22px; }
#solution p.lead span.notice { font-size: 12px; display: block; padding: 30px; line-height: 160%;}

#solution .content img { width: 100%; height: auto; }
#solution .content .danraku { display: block; padding: 30px 0 0;}
#solution .content .danraku p { width: 100%; line-height: 200%; font-size: 14px;}

#solution #block2 { display: block; padding: 70px 0 0 0;}
#solution #block2 h4 { width: 100%; font-size: 22px; line-height: 160%; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal;  padding: 0 0 20px; text-align: center;}
#solution #block2 p { width: 100%; line-height: 200%; font-size: 14px;}

#message { background: #F6B5A8; padding: 70px 0;}
#message h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; text-align: center; vertical-align: bottom; margin: 0 0 30px; }
#message h2 img { vertical-align: bottom; padding: 0 10px 0 0; width: 50px ; height: auto;}
#message .content { display: block; justify-content: space-between; }
#message .content img { width: 60%; height: auto; margin: 0 auto; display: block; padding: 0 0 20px;}
#message .content .right { width: 100%;  }
#message .content .right h3 { font-size: 22px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 0 0 30px; }
#message .content .right p { font-size: 14px; line-height: 200%;  }

#good { padding: 70px 0; }
#good h2 { padding: 0 0 50px; text-align: center; }
#good h2 span { font-size: 29px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; border-bottom: #FFF500 solid 13px;  }
#good .three { display: block; justify-content: space-around; }
#good .three li { text-align: center; }
#good .three li img { width: 50%; height: auto; }
#good .three li h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 25px; padding: 20px 0 10px; }
#good .three li p { line-height: 160%;  }
#good .notice { padding: 30px 0 ; text-align: center; line-height: 180%; font-size: 12px;}
#good .text { width: 100%; margin: 0 auto; line-height: 200%; font-size: 14px;} 


#teacher { background: #FDF9F0; padding: 70px 0 70px;}
#teacher h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; text-align: center; vertical-align: bottom; margin: 0 0 30px; }
#teacher h2 img { vertical-align: bottom; padding: 0 10px 0 0; width: 50px; height: auto;}
#teacher .content { display: block; justify-content: space-between; text-align: center;}
#teacher .content img { width: 80%; height: auto; }
#teacher .content .right { width: 100%; text-align: left; }
#teacher .content .right h3 { font-size: 22px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; line-height: 160%; padding: 30px 0 20px; }
#teacher .content .right p { font-size: 14px; line-height: 200%;  }


#video { padding: 70px 0 0 ; }
#video h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; text-align: left; vertical-align: bottom; margin: 0 0 30px; text-align: center; }
#video h2 img { vertical-align: bottom; padding: 0 10px 0 0; width: 50px; height: auto;}
#video h2 span { font-size: 20px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; padding: 5px 0 0 0;}
#video video { width: 100%; height: auto; }
#video div p { padding: 0 0 50px ; text-align: center;}
#good .three li h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 25px; padding: 20px 0 10px; }


#flow { padding: 70px 0; }
#flow h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 44px; text-align: left; vertical-align: bottom; margin: 0 0 30px; text-align: center; }
#flow h2 img { vertical-align: bottom; padding: 0 10px 0 0; width: 50px; height: auto;}
#flow h2 span { font-size: 20px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; padding: 5px 0 0 0;}
#flow .three { display: block; justify-content: space-around; }
#flow .three li { text-align: center; background: #D6E4AC ; background-size: auto 100%;  padding: 5% 0; display: flex; justify-content: space-around; margin: 0 0 10px 0;}
#flow .three li img { width: 30%; height: auto; }
#flow .three li h4 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 16px; padding: 20px 0 5px; }
#flow .three li p { line-height: 160%; font-size: 18px; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; padding-bottom: 20px;}
#flow .three li span { display: block; font-size: 12px;}
#flow .notice { padding: 50px 0 ; text-align: center; }
#flow .text { width: 100%; margin: 0 auto; line-height: 200%; padding: 20px 0; font-size: 12px;} 


#flow .price {  }
#flow .price h4 { font-size: 25px; line-height: 100%; padding: 20px 0 0 0; }
#flow .price h4 span { font-size: 14px; }
#flow .price { width: 100%; height: auto; }
#flow .price .p-inner img { vertical-align: bottom; width: 290px; height: auto;}
#flow .price .p-inner p { display: block; padding: 26px 5px 10px;}
#flow .price .p-inner p span.jp {  font-size: 20px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;vertical-align: baseline; }


#flow .price .p-inner p span.num { font-size: 43px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; font-style: normal; vertical-align: sub; line-height: 0; padding: 0 5px;}
#flow .price .p-inner{ text-align: center ; padding: 20px 0 10px;}
#flow .price .p-inner p small { font-weight: bold; }
#flow .price .faster-w { text-align: center; padding: 0 0 30px;}
#flow .price .faster { display: inline-block; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; font-style: normal; font-size: 20px; border-bottom:  9px solid #FFDE2B;}
#flow .price .faster span { font-size: 30px; }






#voice { padding: 70px 0; background: #CEF0F0; }
#voice h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 48px; text-align: center; vertical-align: bottom; margin: 0 0 50px;  }
#voice h2 span {  font-size: 20px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; padding: 5px 0 0 ;}
#voice ul li { display: flex; justify-content: space-between; padding: 0 0 30px;}
#voice ul li .human {  }
#voice ul li .human img { width: 50px; height: auto; }
#voice ul li .human p { text-align: center; padding: 10px 0 0 ; font-size: 12px; }
#voice ul li .baloon {  width: inherit; background: #fff url(../images/index/baloon_arrow.jpg) repeat-y left top; background-size: auto 100%; padding: 5% 4% 5% 40px; }
#voice ul li .baloon h4 { font-size: 16px; font-family: 'Noto-Sans-JP-Medium',sans-serif ; padding: 0 0 10px; line-height: 160%;}
#voice ul li .baloon p { line-height: 200%; font-size: 12px;}
#voice ul li .baloon.left { width: inherit; background: #fff url(../images/index/baloon_arrow_l.jpg) repeat-y right top; background-size: auto 100%; padding: 5% 40px 5% 4%; }


#goal { padding: 70px 0 0;  }
#goal h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 40px; text-align: center; vertical-align: bottom; margin: 0 0 30px;  }
#goal h2 span {  font-size: 20px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; text-align: center; padding: 10px;}
#goal ul  { padding: 0 0 20px; }
#goal ul li { display: block; justify-content: space-between; padding: 5% 7%; background: #FDF9F0; margin-bottom: 20px;}
#goal ul li .left p { text-align: center; padding: 10px 0 0 ; font-size: 50px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;  }
#goal ul li .left p span { font-size: 18px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; display: block;}
#goal ul li .right {  width: 100%; }
#goal ul li .right h4 { font-size: 22px; font-family: 'Noto-Sans-JP-Medium',sans-serif ; padding: 0 0 10px; line-height: 160%; text-align: center;}
#goal ul li .right p { line-height: 200%; font-size: 14px;}

#bnr img { width: 100%; height: auto; }

#company { padding: 70px 0;  }
#company h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 40px; text-align: center; vertical-align: bottom; margin: 0 0 20px;  }
#company h2 span {  font-size: 18px; vertical-align: middle; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; display: block; text-align: center; padding: 10px;}
#company table { width: 100%; margin: 0 auto; font-size: 13px; border-top: 1px solid #E2E2E2; }
#company table th { padding: 20px 0 0; text-align: left; border-bottom: none; display: block; font-family: source-han-sans-japanese, sans-serif; font-weight: 600; font-style: normal; }
#company table td { padding: 10px 0 15px; text-align: left; border-bottom: 1px solid #E2E2E2; line-height: 150%; display: block;}

footer .inner { display: block; justify-content: space-between;  }
footer .inner nav { margin: 0; }
footer .inner nav a { padding: 0 0 30px 0; display: block; text-align: left;}
footer p { text-align: center; padding: 50px 0 10px; }




#ctr { background: #FFEF00; padding: 150px 0 50px; }
#ctr .inner { position: relative; }
#ctr .inner img.boy { position: absolute; left: 0; right: 0; top: -170px; width: 200px; height: auto; margin: 0 auto; }
#ctr .head-b {}
#ctr .head-b h3 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 40px; padding: 0 0 20px; text-align: center;}
#ctr .head-b h3 span { display: block; font-size: 20px; font-family: source-han-sans-japanese, sans-serif; padding: 10px 0 0 ; text-align: center;}
#ctr .head-b p { line-height: 160%; padding: 0 0 30px; }
#ctr .btns { display: block; justify-content: space-between; }
#ctr .btns div { background: #fff; width: 100%; text-align: center; padding: 35px 20px; box-sizing: border-box; margin-bottom: 10px;}
#ctr .btns div p { font-size: 20px; padding: 0 0 20px; }
#ctr .btns div a { display: block; font-size: 18px; padding: 25px 0; background: #000; color: #fff; }

#ctr .btns div.mail a { background: #fff url(../images/index/email.svg) no-repeat 20px center ; color: #000; border: 1px solid #000; }
#ctr .btns div.line a { background: #03C755 url(../images/index/line.svg) no-repeat 20px center ;;}

#reservation img { width: 33%; height: auto; }
header .reserve { position: fixed; right: 0; top:0; }
header .reserve img { width: 120px; height: auto; }
}