@charset "utf-8"; 
/* CSS Document */

body{font-family: "Zen Kaku Gothic New", sans-serif;}
body *{font-family: "Zen Kaku Gothic New", sans-serif;}

/*----------------------------------------------------------------------------
***                                                              headerArea
----------------------------------------------------------------------------*/
#headerArea {border-bottom: 6px solid #f5458e;padding-top: 1em;}
#headerAreaInner {height: 72px;vertical-align: baseline;max-width: 1200px;padding: 0 2em;margin: 0 auto;box-sizing: border-box;}
#headerAreaTitle .floatR img {width: auto;max-height: 67px;}


/*----------------------------------------------------------------------------
***                                                                mianArea
----------------------------------------------------------------------------*/
#mianArea{font-size:1rem;}
#mianArea .secBox>.sectionInner{width: 984px;margin:0px auto;padding: 0px;font-weight: 550;}


/*----- mainView -----*/
#mainView{height: 550px;background: url("../../images/fv_contents01.jpg");background-repeat: no-repeat;	background-position: center; padding-top: 10px;}
#mainView.secBox>.sectionInner{width: 1040px;height: 550px;padding-top: 35px;background: url(../../images/fv_contents02.png);background-repeat: no-repeat;margin: 0 auto;position: relative;}
#mainView .textArea{font-size: 1.01em;}
#mainView p{line-height: 1.7em;}
#mainView h2{position: relative;}
#mainView h2 .imgMain{position: absolute; transform: translateY(50%); top: 50%; left: 10%;}
#mainView h2 .imgLogo{position: absolute; transform: translateX(-50%); top: 20px; left: 50%;}


/*----- ctaBtn -----*/
.ctaBtn{width: fit-content; margin: 1em auto;}
.ctaBtn a{position: relative; display: block; width: fit-content; padding: 0.5em 2em 0.5em 1.5em; font-size: 20px; font-weight: bold; text-decoration: none; color: #fff; background: #000; border-radius: 2em;}
.ctaBtn a:hover{text-decoration: none;}
.ctaBtn a::after{position: absolute; content: ""; transform: translateY(-50%); top: 50%; right: 1em; border-left: #fff solid 0.6em; border-top: transparent solid 0.45em; border-bottom: transparent solid 0.45em;}
.ctaBtn a.taimen{background: #ff7bac;}
.ctaBtn a.online{background: #2eb69f;}


/*----- pointArea -----*/
#pointArea {background: #ff6d81;padding: 6em 0;margin: 0 auto;}
#pointArea h2{font-size: 230%;font-weight: bold;color: #fff;}
#pointArea .pointBox{display: flex;justify-content: space-between;}
#pointArea .pointInner{background: #fff;border-radius: 1em;padding: 1em;position: relative;width: 31%;}
#pointArea .pointInner  .pointNum{position: absolute;top:-15px;right: 0;transform: translate(-66%, 0%);}
#pointArea .pointInner .pointTop{font-size: 150%;font-weight: bold;color: #ff6d81;border-bottom: 2px dashed #bfbfbf;}
#pointArea .pointInner .pointTop.num02{padding: 1.4em 0 1em;}
#pointArea .pointInner .pointBottom{padding: 1em 0.5em;font-size: 90%;font-weight: bold;}
#pointArea .pointInner .pointBottom img{margin: 0.5em 2em 0;}
#mainView .textAreaInner {border: solid 2px #00c2cc;background: #ffffff;border-radius: 3px;padding: 2em 1.2em 1.15em;width: 472px;margin:0 auto;position: relative;}

/*----- overviewArea -----*/
#overviewArea{background: #faf9fa;margin: 0 auto;padding: 6em 0;}
#overviewArea h2{text-align: center;font-size: 230%;font-weight: bold;color: #4db0ce;}
#overviewArea table{margin: 2em auto; width: 100%}
#overviewArea .overviewInner{border: 4px solid #4db0ce;}
#overviewArea .overviewInner th{background: #4db0ce;color: #fff;border-bottom: 2px solid #fff;padding: 0.5em 3em;font-size: 130%; width: 35%;}
#overviewArea .overviewInner td{color: #4db0ce;font-size: 120%;font-weight: bold;padding: 1em;border-bottom: 2px solid #4db0ce;background: #fff;}

/*----- priceArea -----*/
#priceArea{background: #faf9fa;margin: 0 auto;padding: 0 0 6em;}
#priceArea h2{text-align: center;font-size: 230%;font-weight: bold;color: #2eb69f;}
#priceArea table{margin: 2em auto; width: 100%;}
#priceArea .overviewInner{border: 4px solid #2eb69f;}
#priceArea .overviewInner th{background: #2eb69f;color: #fff;border-bottom: 2px solid #fff;padding: 0.5em 3em;font-size: 130%; width: 35%;}
#priceArea .overviewInner td{color: #2eb69f;font-size: 120%;font-weight: bold;padding: 1em;border-bottom: 2px solid #2eb69f;background: #fff;}

/*----- flowArea -----*/
#flowArea{margin: 0 auto;padding: 6em 0 3em;width: 1130px;}
#flowArea h2{text-align: center;font-size: 230%;font-weight: bold;margin-bottom: 2em;color: #4574e0;}
#flowArea .flowUl .flowLi.nagare{border: 5px solid #4574e0;border-radius: 1em;padding: 3em 2em;position: relative;}
#flowArea .flowUl .flowLi.zoom{border: 5px solid #e74c72;border-radius: 1em;padding: 3em 2em;position: relative;}
#flowArea .flowUl .flowLi::after{content: "▶";color: #4574e0;padding-right: 0.5em;position: absolute;right: -40px;top: 50%;font-size: 100%;}
#flowArea .flowUl .flowLi:last-child::after {content: none;}
#flowArea .flowUl .flowLi.nagare .flowNum{position: absolute;top: 0;left: 0;padding: 0.3em 1em 0.4em 0.5em;color: #fff;font-weight: bold;font-size: 170%;background: #4574e0;border-radius: 0 0 2em 0;}
#flowArea .flowUl .flowLi.zoom .flowNum{position: absolute;top: 0;left: 0;padding: 0.3em 1em 0.4em 0.5em;color: #fff;font-weight: bold;font-size: 170%;background: #e74c72;border-radius: 0 0 2em 0;}

#flowArea .flowUl .flowLi.nagare dt{text-align: center;font-size: 120%;line-height: 1.3;color: #4574e0;font-weight: bold;margin-bottom: 1em;}
#flowArea .flowUl .flowLi.zoom dt{text-align: center;font-size: 120%;line-height: 1.3;color: #e74c72;font-weight: bold;margin-bottom: 1em;}

/*----- faqArea -----*/
#faqArea{padding: 3em 0;margin: 0 auto;height: auto;}
#faqArea h2{text-align: center;font-size: 200%;font-weight: bold;color: #6d60ff;}
#faqArea .faqBox dl{border: 3px solid #6d60ff;font-size: 140%;}
#faqArea .faqBox dl dt{padding: 0.8em 1em;color: #fff;background: #6d60ff;}
#faqArea .faqBox dl dd{padding: 0.8em 1em;color: #6d60ff;font-weight: bold;position: relative;}
#faqArea .faqBox dl dd img{position: absolute;bottom: 0;right: 1em;}

/*----- courselistArea -----*/
#courselistArea{padding: 3em 0 0; margin: 0 auto; height: 420px;}

/*----- コース一覧　KINDERコース -----*/
#kindercourseArea .coursetit{color:#f9c900;text-align: center;}
#kindercourseArea .courseBox{background:#fff4d9;width: 100%;margin: 0 auto 2em;}
/*----- コース一覧　小学生コース -----*/
#elementcourseArea .coursetit{color:#3c9ce6;text-align: center;}
#elementcourseArea .courseBox{background:#ebfafa;width: 100%;margin: 0 auto 2em;}


/*----- コース一覧 -----*/
.coursetit{border-bottom: 3px solid;font-size:1.8rem;margin: 40px 0 15px;text-align: center;}
.courseBox{margin-bottom:20px;padding: 30px 30px;font-size: 1.05rem}
.courseBox .descriptionArea{margin-left: 10px;}
.courseBox .descriptionArea .ttlBox{padding: 0.3em 0 0;}
.courseBox .descriptionArea .detailBox{margin: 10px 0 0;}
.courseBox .descriptionArea .detailBox p.txt{width: 54%;}
.courseBox .descriptionArea .detailBox .dekirukoto{color: #fb5c54; font-weight: bold;}
.detailAra{margin-bottom: 2px; text-indent: 9px;}
.detailAra h4{font-size: 1.4rem;}
.detailAra h4:last-child{border-bottom: 1px solid #333;}
.titArea {margin: 0 0 0.8em;}
.classDetail{font-size: 102%;margin: 0.6em 0 0 1.4em;text-align: center;color: #fb5c54;}

/* Gabaガイダンスページ */
#gabakids_guidance{padding-top: 3em;}
#nagareArea{padding: 3em 0;}
#nagareArea h2{color: #00b2be; font-weight: 900; font-size: 2em; margin-bottom: 0.9em;}
#nagareArea .nagareOl li{position:relative;margin-bottom: 2em;background: #fff;padding: 1em  2em 2.5em 1.5em;box-shadow: 10px 10px 10px -10px #00000050;border: 1px solid #ccc;}
#nagareArea .nagareOl li:after{content: "";display: block;width: 0;height: 0;border-style: solid;border-width: 10px 8px 0 8px;border-color: #00b2be transparent transparent transparent;position: absolute;bottom: -1.5em;left: 50%;transform: translateX(-50%);}
#nagareArea .nagareOl li:last-child{margin-bottom: 0;}
#nagareArea .nagareOl li:last-child:after{display: none;}
#nagareArea .nagareNum{font-size: 180%;line-height: 1;display: inline-block;color: #00b2be;font-weight: bold;}
#nagareArea .nagareNum .step{font-size: 70%;}
#nagareArea .nagareTxt{font-size: 100%;display: block;padding: 1em 0 1.5em 1em;margin-left: 0.2em;}

#courselistArea{padding: 4em 0 0;margin: 0 auto;}
#courselistArea .titArea{position: relative;margin: 0 0 0.8em;}
#courselistArea .titArea .coursetit{border-bottom: 3px solid;font-size:1.8rem;margin: 40px 0 15px;text-align: center;}
#courselistArea .titArea .classDetail{margin: 1em auto;text-align: center;color: #fb5c54;}
#courselistArea .courseBox{margin-bottom:20px;padding: 30px 30px;font-size: 1.05rem}
#courselistArea .courseBox .detailAra{margin-bottom: 2px; padding: 0 10px;}
#courselistArea .courseBox .detailAra h5{font-size: 1.4rem;}
#courselistArea .courseBox .detailAra h5:last-child{border-bottom: 1px solid #333;}
#courselistArea .courseBox .detailAra .unit{font-weight: normal;font-size: 80%;}
#courselistArea .courseBox .descriptionArea{margin-left: 10px;}
#courselistArea .courseBox .descriptionArea .ttlBox{padding: 0.3em 0;}
#courselistArea .courseBox .descriptionArea .detailBox{margin: 6px 0 0;}
#courselistArea .courseBox .descriptionArea .detailBox p.txt {width:54%;}
#courselistArea .courseBox .descriptionArea .detailBox .dekirukoto{color: #fb5c54;font-weight: bold;}
#courselistArea #kindercourseArea .coursetit{color:#f9c900;text-align: center;}
#courselistArea #kindercourseArea .courseBox{background:#fff4d9;width: 100%;margin: 0 auto 2em;}
#courselistArea #elementcourseArea .coursetit{color:#3c9ce6;text-align: center;margin-top: 80px;}
#courselistArea #elementcourseArea .courseBox{background:#ebfafa;width: 100%;margin: 0 auto 2em;}


/*----- backUsagiClubArea -----*/
.backUsagiClubArea{padding: 3em auto;}
.backUsagiClubArea .backUsagiClubBtn {display: block;max-width: 300px;margin: 2em auto 3em;}
.backUsagiClubArea .backUsagiClubBtn img{width: 100%; height: auto;}

/*----- backBtnArea -----*/
.backBtnArea .backBtn {display: block;max-width: 200px;margin: 4em auto 0; background: #ccc; color: #fff; text-align: center; font-size: 120%; padding: 0.5em; border-radius: 0.3em;}

/*----------------------------------------------------------------------------
***                                                              footerArea
----------------------------------------------------------------------------*/
#footerArea { padding:10px;background: #58595b;margin: 0 auto;}
#footerArea p{color: #fff;}
#totp{position: fixed;bottom: 5px;right: 10px;z-index:999;}