@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;}


/*----- typeArea -----*/
.typeArea h2{text-align: center;font-size: 230%;font-weight: bold;}
.typeArea .typeList{display: flex;justify-content: space-between;margin: 2em 0 0;}
.typeArea .typeList .typeBox{width: 47%; background: #fff;}
.typeArea .typeList .typeBox .detailBox{padding: 1em;}
.typeArea .typeList .typeBox .txtTop{text-align: center;padding: 0.5em;font-size: 170%;font-weight: bold;color: #fff;}
.typeArea .typeList .typeBox .subTxt{padding: 1em;font-size: 110%;}
.typeArea .typeList .typeBox.taimenBox{border: #ff7bac solid 3px;}
.typeArea .typeList .typeBox.taimenBox .txtTop{background: #ff7bac;}
.typeArea .typeList .typeBox.taimenBox .subTxt{background: #fff0f5;}
.typeArea .typeList .typeBox.onlineBox{border: #2eb69f solid 3px;}
.typeArea .typeList .typeBox.onlineBox .txtTop{background: #2eb69f;}
.typeArea .typeList .typeBox.onlineBox .subTxt{background: #ddefe8;}

.typeArea.link{padding: 3em 0 0;}
.typeArea.link .typeList .typeBox .subTxt{position: relative; padding-bottom: 3em;}
.typeArea.link .typeList .typeBox .subTxt::after{position: absolute; content: ""; transform: translateX(-50%) rotate(135deg); bottom: 1.5em; left: 50%; width: 1em; height: 1em; border-top: #fff solid 3px; border-right: #fff solid 3px; }
.typeArea.link .typeList .typeBox.taimenBox .subTxt::after{border-color: #ff7bac;}
.typeArea.link .typeList .typeBox.onlineBox .subTxt::after{border-color: #2eb69f;}

.typeArea.cta{padding: 4em 0;background: #ffe579;}
.typeArea.cta .typeList .typeBox .ctaBtn{margin: 0.5em auto;}
.typeArea.cta .typeList .typeBox .detailBtn a{color: #444; text-decoration: underline;}


/*----- taimenArea -----*/
#taimenArea{padding: 5em 0;}
#taimenArea h2{text-align: center;font-size: 230%;font-weight: bold;color: #ff7bac;}
#taimenArea .courseBox{margin: 30px auto; padding: 30px; background: #fff0f5;}
#taimenArea .courseBox .ttlTxt{font-size: 200%; border-bottom: #ff7bac solid 2px; padding: 0 10px 10px;}
#taimenArea .courseBox .subTxt{margin: 10px;}
#taimenArea .courseBox .detailBox{margin: 10px 10px 0;}
#taimenArea .courseBox .detailBox .ryokin tbody{border: #ff7bac 3px solid;}
#taimenArea .courseBox .detailBox .ryokin th{color: #fff; background: #ff7bac; border-bottom: #fff 2px solid; border-right: #fff 2px solid;}
#taimenArea .courseBox .detailBox .ryokin td{font-size: 120%; font-weight: bold; text-align: center; vertical-align: middle; background: #fff; border-bottom: #ccc 2px solid; border-right: #ccc 2px solid;}

#taimenArea .courseBox._01 .detailBox{display: grid; grid-template-columns: 1fr 300px; gap: 1em;}
#taimenArea .courseBox._01 .detailBox .detailImg{grid-column: 2; grid-row: 2; width: fit-content;}
#taimenArea .courseBox._01 .detailBox .detailTxt{grid-column: 1/3; grid-row: 1;}
#taimenArea .courseBox._01 .detailBox .ryokin{grid-column: 1; grid-row: 2; width: 100%;}

#taimenArea .courseBox._02 .detailBox{display: grid; grid-template-columns: 1fr 300px; gap: 1em;}
#taimenArea .courseBox._02 .detailBox .detailImg{grid-column: 2; grid-row: 2/4; width: fit-content;}
#taimenArea .courseBox._02 .detailBox .detailTxt{grid-column: 1/3; grid-row: 1;}
#taimenArea .courseBox._02 .detailBox .ryokin{grid-column: 1; grid-row: 2; width: 100%;}
#taimenArea .courseBox._02 .detailBox .theme{grid-column: 1; grid-row: 3; margin-top: -0.5em; background: #fff; padding: 0.5em 0.8em 0.8em;}


/*----- onlineArea -----*/
#onlineArea{padding: 5em 0;}
#onlineArea h2{text-align: center;font-size: 230%;font-weight: bold;color: #2eb69f;line-height: 1;}
#onlineArea h3{text-align: center; font-size: 180%; font-weight: bold; color: #444; margin-bottom: 0.4em;}
#onlineArea .detailBox{margin: 3em auto;}
#onlineArea table{width: 100%; margin: 0 auto;}
#onlineArea tbody{border: 3px solid #2eb69f;}
#onlineArea tbody th{background: #2eb69f;color: #fff;border-bottom: 2px solid #fff;padding: 0.5em 1em;font-size: 130%;width: 35%;}
#onlineArea tbody td{color: #444;font-size: 120%;font-weight: bold;padding: 1em 1.5em;border-bottom: 2px solid #ccc;background: #fff;}

#onlineArea .schedule span.kinder{position: relative; margin-left: 1.2em;}
#onlineArea .schedule span.kinder::before{position:absolute; content: ""; top: 0; left: -1.2em; width: 1em; height: 1em; background: #fff4d9; border: #ccc solid 1px;}
#onlineArea .schedule span.element{position: relative; margin-left: 1.2em;}
#onlineArea .schedule span.element::before{position:absolute; content: ""; top: 0; left: -1.2em; width: 1em; height: 1em; background: #ebfafa; border: #ccc solid 1px;}

#onlineArea .schedule table tbody{border: 3px solid #2eb69f;}
#onlineArea .schedule table tbody th{width: calc(100% / 8);border-right: 2px solid #fff;}
#onlineArea .schedule table tbody td{font-size: 110%; padding: 0; text-align: center; vertical-align: middle; border-right: 2px solid #ccc;}
#onlineArea .schedule table tbody td.kinder{background: #fff4d9;}
#onlineArea .schedule table tbody td.element{background: #ebfafa;}
#onlineArea .schedule table tbody .waveBefore th,
#onlineArea .schedule table tbody .waveBefore td{position: relative; border-bottom: none;}
#onlineArea .schedule table tbody .waveBefore th::after,
#onlineArea .schedule table tbody .waveBefore td::after{position: absolute; content: ""; left: 0; bottom: -5px; width: 100%; height: 10px; background: url(../../images/wave.svg) repeat-x;}
#onlineArea .schedule table tbody .waveAfter th,
#onlineArea .schedule table tbody .waveAfter td{border-top: none;}

/* Gabaガイダンスページ */
#gabakids_guidance #onlineArea{padding-top: 3em;}
#onlineArea #nagareArea{padding: 3em 0;}
#onlineArea #nagareArea h3{margin-bottom: 1em;}
#onlineArea #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;}
#onlineArea #nagareArea .nagareOl li:after{content: "";display: block;width: 0;height: 0;border-style: solid;border-width: 10px 8px 0 8px;border-color: #2eb69f transparent transparent transparent;position: absolute;bottom: -1.5em;left: 50%;transform: translateX(-50%);}
#onlineArea #nagareArea .nagareOl li:last-child{margin-bottom: 0;}
#onlineArea #nagareArea .nagareOl li:last-child:after{display: none;}
#onlineArea #nagareArea .nagareNum{font-size: 180%;line-height: 1;display: inline-block;color: #2eb69f;font-weight: bold;}
#onlineArea #nagareArea .nagareNum .step{font-size: 70%;}
#onlineArea #nagareArea .nagareTxt{font-size: 100%;display: block;padding: 1em 0 1.5em 1em;margin-left: 0.2em;}

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