@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:20px/1.75 "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;color:#000;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt"; letter-spacing: 0.25rem;}
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#000;}
a:hover,a:active{color:#000;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}
.fixedMenu{ display: none;}

/* ヘッダー
------------------------------------------------------------*/
header{background:#fff; position: relative;padding:0 0 95px 0; margin-bottom: 40px;}

/* メイン画像
*****************************************************/
#kv{width:100%; background: url(images/kv.jpg) no-repeat; background-size: 100%;}
#kv img.kv,#kv source.kv{ width: 100%;}

@media only screen and (max-width:644px){
#kv{width:100%; background: url(images/sp_kv.jpg) no-repeat center top; background-size: 100% auto; margin-bottom: 30px;}
}



/* コンテンツ
*****************************************************/
#intro{ padding: 50px 0; position: relative;}
.webp #intro { background-image: url("images/webp/bg4.webp"),url("images/webp/bg5.webp"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
.no-webp #intro { background-image: url("images/bg4.png"),url("images/bg5.png"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
#intro h3{ text-align: center; color: #df6d7c; font-weight: bold; margin-bottom: 70px; font-size: 26px;}
#intro h3 span{background: linear-gradient(transparent 60%, #a7d9dd 30%); font-size: 36px;}
.webp #intro .txt{ background: url(images/webp/illust2.webp) no-repeat right bottom; padding-bottom: 50px;}
.no-webp #intro .txt{ background: url(images/illust2.png) no-repeat right bottom; padding-bottom: 50px;}
#intro .txt p{ text-align: center; margin-bottom: 35px;}
#intro .txt p span{color: #df6d7c; font-weight: bold;}

@media only screen and (max-width:644px){
#intro h3{font-size: 20px; margin-bottom: 40px;}
#intro h3 span{font-size: 23px;}
.webp #intro,.no-webp #intro{ background-size: 30% auto;}
#intro .txt p{ text-align: left;}
}

#merit{ background: #fbf7e0; padding: 50px 0;}
#merit ul li{ margin-bottom: 50px;}
#merit ul li::after{ display: block; clear: both; content: '';}
#merit ul li .img{ width: 32%; float: right;}
#merit ul li:nth-child(even) .img{float: left;}
#merit ul li .txt{ width: 65%; float: left;}
#merit ul li:nth-child(even) .txt{ float: right;}
#merit ul li .flag{ clear: both; width: 230px; color: #fff; padding: 17px 0 0 25px; height: 66px; line-height: 23px; font-weight: bold;box-sizing: border-box; margin-bottom: 20px;}
#merit ul li .flag span{ font-size: 16px;line-height: 25px;}
.webp #merit ul li .flag { background: url("images/webp/icon3.webp") no-repeat left top; }
.no-webp #merit ul li .flag { background: url("images/icon3.png") no-repeat left top; }
#merit ul li h3{ color: #df6d7c; font-weight: bold; margin-bottom: 20px; font-size: 26px; padding-left: 30px;}
#merit ul li ul._txt{ padding-left: 30px;}
#merit ul li ul._txt li{ position: relative; margin-bottom: 0; list-style-type: decimal; margin-left: 30px;}

@media only screen and (max-width:644px){
#merit{ padding-bottom: 20px;}
#merit ul li{ margin-bottom: 30px;}
#merit ul li .flag{ margin-bottom: 0;}
#merit ul li .img,#merit ul li .txt,#merit ul li:nth-child(even) .img,#merit ul li:nth-child(even) .txt{ float: none; width: 100%;}
#merit ul li .img{ margin-bottom: 15px;}
#merit ul li .img img{ width: 100%;}
#merit ul li h3{ font-size: 20px; padding-left: 10px; margin-bottom: 15px;}
#merit ul li ul._txt{ padding-left: 0;}
}

#osusume{ padding: 50px 0; position: relative;}
.webp #osusume { background-image: url("images/webp/bg4.webp"),url("images/webp/bg5.webp"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
.no-webp #osusume { background-image: url("images/bg4.png"),url("images/bg5.png"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
#osusume ul{ max-width: 830px; width: 96%; margin: 0 auto;}
#osusume ul li{ margin-bottom: 15px; font-weight: bold; padding-left: 40px;}
.webp #osusume ul li { background: url("images/webp/check.webp") no-repeat left center; }
.no-webp #osusume ul li { background: url("images/check.jpg") no-repeat left center; }

@media only screen and (max-width:644px){
.webp #osusume,.no-webp #osusume{ background-size: 30% auto;}
.webp #osusume ul li { background: url("images/webp/check.webp") no-repeat left top 5px; background-size: 5% auto; }
.no-webp #osusume ul li { background: url("images/check.jpg") no-repeat left top 5px; background-size: 5% auto; }
#osusume ul li{ padding-left: 7%;}
}

#cta2{ padding: 50px 0 ; background: #fbf7e0; position: relative; margin-bottom: 200px;}
#cta2 .detail{ background: #fff; border: 8px solid #fff1a0; padding: 50px 50px 100px 50px; box-sizing: border-box; position: relative; margin-bottom: 150px;}
#cta2 .detail p{ font-weight: bold;}
#cta2 .detail .cta{ bottom: -150px;}
#cta2 .detail .cta{ margin-bottom: 50px;}
#cta2 dl{ margin-bottom: 50px;}
#cta2 dl dt{ background: #fff; text-align: center; font-weight: bold; margin-bottom: 20px; padding: 5px 0;}
#cta2 dl dd{ margin-bottom: 50px; padding-left: 10px;}
#cta2 dl dd ul li{ list-style-type: decimal; margin-bottom: 10px; margin-left: 40px;}
#cta2 .btm{ text-align: center; font-weight: bold; color: #df6d7c; margin-bottom: 50px;}
#cta2 .btm span{background: linear-gradient(transparent 60%, #fff 30%);}
#cta2 .btm2{ text-align: center; font-weight: bold; color: #ffac62; margin-bottom: 20px;}
#cta2 .cta.org{ bottom: -100px;}

@media only screen and (max-width:644px){
#cta2{ padding-bottom: 10px; margin-bottom: 150px;}
#cta2 .detail{ padding: 20px 20px 50px 20px;}
#cta2 dl dd ul li{ margin-left: 20px;}
}

#message{ position: relative; padding-bottom: 95px; margin-bottom: 40px;}
#message .bgbox{ padding:50px 0 60px; background: #fbf7e0;}
#message .centerbox{width: 0;height: 0;	position: absolute;	top: 50px;	right: 0; left: 0; margin: auto;}
#message .h2balloon { position: absolute; top: 0; right: -450px; padding: 23px 30px 25px 30px;}
.webp #message .h2balloon { background: url("images/webp/balloon1.webp") no-repeat; }
.no-webp #message .h2balloon { background: url("images/balloon1.png") no-repeat; }
#message .messagebox::after{ display: block; clear: both; content: '';}
#message .messagebox .img{ float: right;}
#message .messagebox .txt{ float: left;}
#message .txt p{ margin-bottom: 40px;}
#message .txt p span{color:#df6d7c; font-weight: bold;}
#message .messageG{ border: 10px solid #a7d9dd; margin-bottom: 40px;}

@media only screen and (max-width:644px){
#message .bgbox { padding: 20px 0 40px;}
#message h2{ text-align: left;}
#message .h2balloon { top: 18px; right: -177px; padding: 11px 10px 11px 18px;font-size: 12px;}
.webp #message .h2balloon,.no-webp #message .h2balloon { background-size: 100% auto;}
#message .messagebox .img { float: none; margin-bottom: 20px;}
#message .messagebox .txt{ float: none;}
#message .txt p { margin-bottom: 20px;}
}

#nayami{ padding: 50px 0;}
.webp #nayami { background: url("images/webp/bg1.webp") no-repeat left -10px top -10px #fbf7e0; }
.no-webp #nayami { background: url("images/bg1.png") no-repeat left -10px top -10px #fbf7e0; }
#nayami ul{ margin: 0 0 100px 100px;}
#nayami ul li{ font-weight: bold; margin-bottom: 20px; padding-left: 40px; box-sizing: border-box;}
#nayami ul li span{color:#df6d7c;}
.webp #nayami ul li { background: url("images/webp/check.webp") no-repeat left center; }
.no-webp #nayami ul li { background: url("images/check.jpg") no-repeat left center; }
#nayami .txt{ border-radius: 50px; color: #fff; font-weight: bold; text-align: center; font-size: 26px; letter-spacing: 0.2rem;}
.webp #nayami .txt { background-image: url("images/webp/icon1.webp"),url("images/webp/icon2.webp"); background-repeat: no-repeat,no-repeat; background-position: left center,right center; background-color: #66b7bd; }
.no-webp #nayami .txt { background-image: url("images/icon1.png"),url("images/icon2.png"); background-repeat: no-repeat,no-repeat; background-position: left center,right center; background-color: #66b7bd; }


@media only screen and (max-width:644px){
#nayami { padding: 20px 0;}
.webp #nayami { background-size: 30% auto; }
.no-webp #nayami { background-size: 30% auto; }
#nayami ul { margin: 0;}
.webp #nayami ul li { background: url("images/webp/check.webp") no-repeat left top 5px; background-size: 5% auto; }
.no-webp #nayami ul li { background: url("images/check.jpg") no-repeat left top 5px; background-size: 5% auto; }
#nayami ul li{ padding-left: 7%;}
#nayami .txt{ font-size: 16px;}
.webp #nayami .txt { background-image: url("images/webp/icon1.webp"),url("images/webp/icon2.webp"); background-repeat: no-repeat,no-repeat; background-position: left -90px center,right -90px center; background-color: #66b7bd; }
.no-webp #nayami .txt { background-image: url("images/icon1.png"),url("images/icon2.png"); background-repeat: no-repeat,no-repeat; background-position:  left -90px center,right -90px center; background-color: #66b7bd; }
}

#program{ padding: 50px 0;}
.webp #program { background-image: url("images/webp/bg2.webp"),url("images/webp/bg3.webp"); background-repeat: no-repeat,no-repeat; background-position: right 10px top 135px,left -10px bottom 140px; background-color: #fbf7e0; }
.no-webp #program { background-image: url("images/bg2.png"),url("images/bg3.png"); background-repeat: no-repeat,no-repeat; background-position: right 10px top 135px,left -10px bottom 140px; background-color: #fbf7e0; }
#program dl{display: flex; flex-wrap: wrap; width: 100%;}
#program dl{display: flex; flex-wrap: wrap; width: 100%;}
#program dl dt,#program dl dd{ box-sizing: border-box; margin-bottom: 50px;}
#program dl dt{ clear: both; width: 230px; color: #fff; padding: 17px 0 0 25px; height: 66px; line-height: 23px; font-weight: bold; display: flex;}
#program dl dt span{ font-size: 16px; line-height: 25px;}
.webp #program dl dt { background: url("images/webp/icon3.webp") no-repeat left top; }
.no-webp #program dl dt { background: url("images/icon3.png") no-repeat left top; }
#program dl dd{ display: flex;width: 770px;}
#program dl dd span{color:#df6d7c;}
#program .btmbox{ box-sizing: border-box; padding: 20px; width: 100%; text-align: center;}
#program .btmbox span{color:#df6d7c; font-weight: bold;}
.webp #program .btmbox { background: url("images/webp/illust1.webp") no-repeat left 15px bottom 15px #fff; }
.no-webp #program .btmbox { background: url("images/illust1.jpg") no-repeat left 15px bottom 15px #fff; }
#program .mov{ margin-top: 50px;}
#program .mov video{ width: 100%;}

@media only screen and (max-width:644px){
#program dl dt{ margin-bottom: 10px;}
.webp #program,.no-webp #program { background-size: 30% auto; }

}

#price{ padding: 50px 0; position: relative;}
.webp #price { background-image: url("images/webp/bg4.webp"),url("images/webp/bg5.webp"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
.no-webp #price { background-image: url("images/bg4.png"),url("images/bg5.png"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
#price .centerbox{width: 0;height: 0;	position: absolute;	top: 30px;	right: 0; left: 0; margin: auto;}
#price .h2balloon { position: absolute; top: 0; right: -330px; padding: 23px 30px 25px 30px;}
.webp #price .h2balloon { background: url("images/webp/balloon1.webp") no-repeat; }
.no-webp #price .h2balloon { background: url("images/balloon1.png") no-repeat; }
#price .toptxt{ text-align: center;}
#price .toptxt p{ margin-bottom: 30px;}
#price .toptxt span{color:#df6d7c; font-weight: bold;}
#price .pricetxtbox{ background: #fbf7e0; padding: 25px 0; text-align: center; margin-bottom: 50px;}
#price .pricebox{ background: #e3f0d1; max-width: 740px; width: 90%; margin: 30px auto 0; border: solid 5px #b8cd9a; padding: 20px; box-sizing: border-box;position: relative;}
#price .pricebox .txt{ font-weight: bold; padding: 0 20px; border-bottom: #df6d7c solid 3px; max-width: 250px; width: 80%; margin: 15px auto;}
#price .pricebox .price{ font-size: 57px; font-weight: bold; color: #df6d7c; padding-top: 20px;}
#price .pricebox .price span{ font-size: 37px;}
.webp #price .pricebox .price { background: url("images/webp/arrow.webp") no-repeat center top; }
.no-webp #price .pricebox .price { background: url("images/arrow.png") no-repeat center top; }
#price .pricebox .off{ position: absolute; right: 140px; top: 85px; font-weight: bold; color: #fff; padding: 17px 15px 30px;}
.webp #price .pricebox .off { background: url("images/webp/balloon2.webp") no-repeat; }
.no-webp #price .pricebox .off { background: url("images/balloon2.png") no-repeat; }
#price .btmbox{ box-sizing: border-box; padding: 20px; width: 100%; text-align: center;}
#price .btmbox span{color:#df6d7c; font-weight: bold;}
.webp #price .btmbox { background: url("images/webp/illust1.webp") no-repeat left 15px bottom 15px #fff; }
.no-webp #price .btmbox { background: url("images/illust1.jpg") no-repeat left 15px bottom 15px #fff; }

@media only screen and (max-width:644px){
#price{ padding: 20px 0;}
#price .h2balloon { top: 0; right: -177px; padding: 11px 10px 15px 18px;font-size: 12px;}
.webp #price .h2balloon,.no-webp #price .h2balloon { background-size: 100% auto;}
.webp #price,.no-webp #price { background-size: 30% auto; }
#price .pricebox .txt{margin: 0 auto 15px;}
.webp #price .pricebox .off,.no-webp #price .pricebox .off { background-size: 100% auto;}
#price .pricebox .off { right: 20px; top: 55px;}
#price .pricebox {padding: 20px 20px 0 20px;}
}

#teacher{ padding: 50px 0;}
.webp #teacher { background: url("images/webp/bg1.webp") no-repeat left -10px top -10px #fbf7e0; }
.no-webp #teacher { background: url("images/bg1.png") no-repeat left -10px top -10px #fbf7e0; }
#teacher .teacherbox::after{ display: block; clear: both; content: '';}
#teacher .teacherbox .img{ width: 43.5%; float: left;}
#teacher .teacherbox .txt{ width: 56.5%; float: right;}
#teacher .teacherbox .txt .name{ font-weight: bold; font-size: 35px; margin-bottom: 20px;}
#teacher .teacherbox .txt .toptxt{ margin-bottom: 20px; font-size: 16px; letter-spacing: 0.1rem;}
#teacher .teacherbox .txt .toptxt span{ font-weight: bold;}
#teacher .teacherbox .txt .biography{ background: #fff; border: 5px solid #a7d9dd; padding: 15px; box-sizing: border-box; width: 100%; font-weight: bold; margin-bottom: 20px; font-size: 16px; letter-spacing: 0.1rem;}
#teacher .teacherbox .txt .btmtxt{ font-size: 14px; letter-spacing: 0.1rem;}

@media only screen and (max-width:644px){
#teacher{ padding: 20px 0;}
.webp #teacher,.no-webp #teacher{ background-size: 30% auto;}
#teacher .teacherbox .img,#teacher .teacherbox .txt{ width: 100%; float: none;}
#teacher .teacherbox .txt .name { font-size: 25px;}
}

#thought{ position: relative; padding-bottom: 95px; margin-bottom: 40px;}
#thought .bgbox{ padding:50px 0 60px; background: #fbf7e0;}
.webp #thought .bgbox { background-image: url("images/webp/bg2.webp"),url("images/webp/bg3.webp"); background-repeat: no-repeat,no-repeat; background-position: right 10px top 135px,left -10px bottom 140px; background-color: #fbf7e0; }
.no-webp #thought .bgbox { background-image: url("images/bg2.png"),url("images/bg3.png"); background-repeat: no-repeat,no-repeat; background-position: right 10px top 135px,left -10px bottom 140px; background-color: #fbf7e0; }
#thought p{ margin-bottom: 30px; letter-spacing: 0.1rem;}
#thought p span{color:#df6d7c; font-weight: bold;}

@media only screen and (max-width:644px){
.webp #thought .bgbox,.no-webp #thought .bgbox{ background-size: 30% auto;}
}

#voice{ position: relative; padding-bottom: 95px; margin-bottom: 40px;}
#voice .bgbox{ padding:50px 0 60px; background: #fbf7e0;}
.webp #voice .bgbox { background-image: url("images/webp/bg4.webp"),url("images/webp/bg5.webp"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top -75px; background-color: #e4f4f5; }
.no-webp #voice .bgbox { background-image: url("images/bg4.png"),url("images/bg5.png"); background-repeat: no-repeat,no-repeat; background-position: left -10px bottom 140px,right 10px top 135px; background-color: #e4f4f5; }
#voice ul li{ margin-bottom: 50px;}
#voice ul li::after{ display: block; clear: both; content: '';}
#voice ul li .img{ width: 19.5%; float: left;}
#voice ul li .txt{ width: 80.5%; float: right; letter-spacing: 0.1rem;}
#voice ul li .txt h3{color:#df6d7c; font-weight: bold; margin-bottom: 10px;}

@media only screen and (max-width:644px){
.webp #voice .bgbox,.no-webp #voice .bgbox{ background-size: 30% auto;}
#voice ul li .txt{ width: 75%; margin-left: 5.5%;}
}

/* 共通エリア
*****************************************************/
main .inner{ max-width: 1000px; width: 96%; margin: 0 auto;}
main h2{ text-align: center; color: #df6d7c; font-weight: bold; padding-bottom: 30px; margin-bottom: 46px; font-size: 26px;}
.webp main h2 { background: url("images/webp/h2.webp") no-repeat center bottom; }
.no-webp main h2 { background: url("images/h2.png") no-repeat center bottom; }

.cta{ position: absolute; bottom: 0; left: 0; right: 0; margin: auto;text-align: center;}
.cta .txt{font-size: 10px; margin-top: 20px;}

@media only screen and (max-width:644px){
main h2{ font-size: 20px; margin-bottom: 20px;}
.cta{ width: 80%;}
}

/* フッター
*****************************************************/
footer{ padding: 70px 0; text-align: center;}
footer .tit{ font-weight: bold; margin-bottom: 20px; font-size: 30px;}
footer ul{ width: 170px; margin: 0 auto 30px;}
footer ul:after{ clear: both; display: block; content: '';}
footer ul li{ width: 40px; float: left; margin-right: 25px;}
footer ul li:last-child{ margin-right: 0;}
footer .txt{ font-size: 16px;}
footer .pagetop{ position: fixed; bottom: 0; right: 0;opacity: 0;transition: all .5s ease;}
footer .pagetop.isActive{opacity: 1;}
address{padding:10px;background: #fbf7e0;font-size:10px;text-align:center;word-break:break-all;box-sizing:border-box;}

@media only screen and (max-width:644px){
footer{ padding: 0 0 70px;}
}


/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
body{ font-size: 16px; letter-spacing: 0.1rem;}
.pcDisp{display:none;}
.spDisp{display:block;}

.fixedMenu{width:100%;position:fixed;bottom:0;left:0;box-sizing:border-box;z-index:100;opacity: 0; transition: all .5s ease; display: block!important;}
.fixedMenu.isActive {opacity: 1;}
.fixedMenu ul{ display: flex;}
.fixedMenu ul li{ width: 100%; text-align: center; box-sizing: border-box;}
.fixedMenu ul li a{ text-align: center; color: #fff; font-weight: bold; padding: 10px; width: 100%; box-sizing: border-box; display: block; font-size: 14px;}
.fixedMenu ul li:first-child{ background: #df6d7c;}
.fixedMenu ul li:last-child{ background: #4cc764;position: relative; padding-left: 30px; box-sizing: border-box; padding-right: 0;}
.fixedMenu ul li:last-child img,.fixedMenu ul li:last-child source{ position: absolute; top: 0; bottom: 0; margin: auto; left: 22px; width: 30px; height: 30px;}


}