@charset "utf-8";
/*
★font-size表★
0.6875rem = 11px
0.75rem = 12px
0.8125rem = 13px
0.875rem = 14px
1.0625rem = 17px
1.125rem = 18px
1.25rem = 20px
1.375rem = 22px
1.5rem = 24px
1.625rem = 26px
1.75rem = 28px
1.875rem = 30px
1.9375rem = 31px
★font-size表★
*/
/* CSS Document */
/*----------------------------------------------------------------------------
***                                                                    body
----------------------------------------------------------------------------*/
body{margin:0;padding:0;position: relative;min-width: 1230px;}
body.boxSize{box-sizing:border-box;}
body.boxSize *{box-sizing:border-box;}
/*#headerArea #totp{ position: fixed; bottom:0; right:0; z-index:999;}*/
h2{font-size: 270%; font-weight:bold;text-align: center;}
h3{font-size:21px; font-weight:bold;}
h4{}
/*----------------------------------------------------------------------------
***                                                             headerArea
----------------------------------------------------------------------------*/
#headerArea{position: sticky;width:100%;z-index: 99;top: 0;left: 0;background: #fff;}
#headerArea #headerAreaInner{position:relative;padding: 1.7em 2em 1em;max-width: 1000px;z-index: 2;/* background: rgba(255,255,255,0.2); */}
#headerArea .ttl{padding: 0px 0 0;}
#headerArea .logoBox .ttlTxt{font-size:11px;color: #333;font-weight:400;position:absolute;top: 2px;line-height:1.6;margin:0;padding:0;}
#headerArea .logoBox .ttlSub{position:absolute;top: 2px;right:0;color: #333;font-size:11px;text-align:right;width: 440px;line-height:1.6;margin:0;padding:0;}
#headerArea #menuBtnBox{width:30px;height:20px;cursor:pointer;margin:0 1em 0 0;}
#headerArea #menuBtnBox .menuBtn{position:relative;width:100%;height:100%;display:block;}
#headerArea #menuBtnBox .line,#headerArea #menuBtnBox .menuBtn:after,#headerArea #menuBtnBox .menuBtn:before{content:"";display:block;width:30px;height:2px;background:#000;position:absolute;right:0;border-radius:20px;transform-origin:center;transition:all .5s ease;}
#headerArea #menuBtnBox .line{top:0;}
#headerArea #menuBtnBox .menuBtn:before{top:calc(50% - 1px);}
#headerArea #menuBtnBox .menuBtn:after{bottom:0;}
#headerArea #menuBtnBox .menuBtn.open .line{top:calc(50% - 1px);transform:rotate(-45deg);}
#headerArea #menuBtnBox .menuBtn.open:before{top:calc(50% - 1px);opacity:0;}
#headerArea #menuBtnBox .menuBtn.open:after{bottom:calc(50% - 1px);transform:rotate(45deg);}
#headerArea .logoBox{display: flex;  align-items: center;}
#headerArea .logoBox img{display: block}
#headerArea .logoBox a{display: block;max-height: 46px;height: 5vh;}
#headerArea .logoBox a img{height: 100%; width: auto;}
#headerArea .ttl{padding: 0;}
#headerArea .tel{padding: 0 0 0 1.5em;margin: 0 0 0 1.5em;border-left: 1px solid #ccc;}
/*
#breadcrumbArea{max-width:980px;padding:0 1em;margin:1em auto 3em;position:absolute;top:1em;}
#breadcrumbArea li{float:left;font-size:10px;color:#fff;}
#breadcrumbArea li a{display:block;color:#fff;}
#breadcrumbArea li:before{content:">";display:inline-block;margin:0 .5em;}
#breadcrumbArea li:first-child:before{display:none;}
*/
#headerArea #totp{position: fixed;bottom: 5px;right: 10px;z-index:999;}

/*----------------------------------------------------------------------------
***                                                                   breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{display:block;vertical-align:bottom;}
#breadcrumbArea > .breadcrumbInner{padding: 15px 0;}
#breadcrumbArea ul{display:table;}
#breadcrumbArea ul li{font-size:14px; display:table-cell; white-space:nowrap; float:none;}
#breadcrumbArea ul li p span{display:inline-block; height:100%;}
#breadcrumbArea ul li a{display: block;color: #4D4D4D;text-decoration: none;}
#breadcrumbArea li a:after{content:">";display:inline;padding:0 0.5em;color: #4D4D4D;}
#breadcrumbArea ul li a img{padding-bottom: 1px;width: auto;height: 100%;display: inline-block;}


/*----------------------------------------------------------------------------
***                                                                    gNavi
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
***                                                        firstViewSec
----------------------------------------------------------------------------*/
#firstViewSec{}

/*----------------------------------------------------------------------------
***                                                             contentsArea
----------------------------------------------------------------------------*/
/*----- 【全体設定】 -----*/
#top em, em,
#top strong, strong{font-weight:bold; font-style:normal;}
.secBox > .sectionInner{max-width: 960px;margin:0 auto;padding: 8em 0 8em;}
.secBox > .sectionInner > .titleBox{margin-bottom: 3em;}
.secBox > .sectionInner > .titleBox h3 span{display:block; text-align:center;}
.secBox > .sectionInner > .titleBox h3 span.titleTxt{font-size:1.5rem;}
.secBox > .sectionInner > .titleBox p{padding:0;}
.t_Blue{color:#00a1c9;}
.t_Pink{color:#ed1e79;}
.t_Yellow{color:#fff000;}
.t_White{color:#ffffff;}
.t_Black{color:#000000;}

/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{background: #484653;}
#footerArea .boxTop{width: 950px;margin:0 auto;padding: 45px 0 25px;}
#footerArea .link{padding:0.5em 0;}
#footerArea .link a{font-size:13px; color:#fff; text-decoration:none;}
#footerArea #footerLogoBox01{margin-bottom:35px;}
#copy{padding:10px 30px;}
#copy p{color: #ffffff;padding:0;}
#copy a{color:#fff;}



/*----------------------------------------------------------------------------
***                                                                  sideBox
----------------------------------------------------------------------------*/
/*----- 【汎用型】 -----*/
#sideBox{background:#fff;}
#sideBox nav#sidr{padding-top: 80px;}
#sideBox nav > ul{border-bottom:1px solid #ccc;}
#sideBox nav > ul:last-child{border-bottom:none;}
#sideBox nav li{font-size: 1.25rem;}
/*CLOSEボタン*/
#sideBox .other{}
#sideBox .other .closeBox{width: 100%;display: inline-block;text-align:right;}
#sideBox .other .closeBox .menuBtn{width: 20%;padding: 4% 2% 4% 0;display: inline-block;line-height: 1;}
/*タイトル*/
#sideBox .titleList{padding:3% 2%;}
#sideBox .titleList .titleBox{width: 100%;display: inline-block;text-align:left;padding:0% 0;}
#sideBox .titleList .titleBox .txt_title{font-weight:bold;}
/*無料体験レッスン・資料請求・スクールを探す・TEL*/
#sideBox .formBox{padding:3% 2%;}
#sideBox .formBox li:last-child{border-bottom:none;}
#sideBox .formBox .list00{width: 100%;float:none; clear:both; margin: 2% 0;}
#sideBox .formBox .list00 p{font-weight: bold; text-align: center; font-size: 1.5rem;}
#sideBox .formBox .list01{width: 49%;float:left;margin: 0 2% 2% 0;}
#sideBox .formBox .list02{width: 49%;float:left;margin-bottom: 2%;}
#sideBox .formBox .list03{clear:both;margin: 2% 0;}
/*各コンテンツリスト*/
#sideBox .contentsList > li{border-bottom:1px solid #ccc;}
#sideBox .contentsList li:first-child{border-top:1px solid #ccc;}
#sideBox .contentsList li:last-child{}
#sideBox .contentsList .titleTxt{/* background: url(../common_images/side/ico_plus.png) no-repeat left 3% center/ 10% auto; */padding: 1% 0%;font-size:1.25rem;color:#00a4c8;font-weight:bold;}
#sideBox .contentsList .titleTxt a{width:100%;display:block;text-align:  center; color: #727272;}
#sideBox .contentsList .titleTxt.open{background: url(../common_images/side/ico_minus.png) no-repeat left 3% center/ 10% auto;}
#sideBox .contentsList .moushikomiLink{background:#ffefeb;}
#sideBox .contentsList .childList{background:#f2f2f2;padding-left: 15%;border-top:1px solid #ccc;}
#sideBox .contentsList li.linkBtn{border-bottom:1px solid #ccc;}
#sideBox .contentsList li.linkBtn:last-child{border-bottom:none;}
#sideBox .contentsList li.linkBtn a{padding: 5% 0;line-height: 1; color:#00a4c8;  display: block;text-decoration: none;background: url(../common_images/side/ico_sideArrow.png) no-repeat right 5% center / 5% auto;}
/*大人リストを無効にする。*/
#sideBox .contentsList > li.otonaList{position:relative;}
#sideBox .contentsList > li.otonaList > *{opacity:0.5;}
/*その他リスト*/
#sideBox .otherList li{padding-left:15%;font-size:1.25rem;/* font-weight:bold; */}

body:before{content:"";display:block;width: 100%;height: 500px;position:absolute;top: -500px;left:0;background: #fff;z-index: 99999;}
/*----- 【mode_A 縦長の時の挙動】 -----*/
body.mode_A #mainArea{}
body.mode_A #sideBox{width: 100%;/* height: 100%; */overflow: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: transform 0.5s ease, opacity 0.5s ease;position: absolute;top: 0;left: 0;-webkit-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0);box-shadow: -1px 1px 4px 0px #aaa;opacity:0;z-index: 1;}
body.mode_A #sideBox.open{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;}
body.mode_A #sideBox .other .titleBox .txt_title{font-weight:bold;}

/*----- 【mode_B 横長の時の挙動】 -----*/
body.mode_B #dummyBox{}
body.mode_B #dummyBox img{width: 22%;}
body.mode_B #headerAreaInner{padding: 1% 3% 1% 3%;}
body.mode_B #headerAreaInner .logoBox{width: 100%;}
body.mode_B #headerArea .logoBox h1{width: 22%;margin-right: 48%;}
body.mode_B #headerArea .logoBox p{width: 13%;}
body.mode_B #menuBtnBox{display:none;}
body.mode_B #mainArea{float:left; width:65%;}
body.mode_B #sideBox{width:35%;transition:none;float:right;border-top:2px solid #e6e6e6; background:#f8f8f8;}
body.mode_B #sideBox *{}
body.mode_B #sideBox .contentsList .childList{/*background:#fff;*/}
body.mode_B #sideBox.open{right:0%;}
body.mode_B #sideBox .other{display:none;}
body.mode_B #sideBox .titleList{display:none;}
body.mode_B #sideBox .formBox .list01{/* display:none; */}
body.mode_B #sideBox .formBox .list02{/* display:none; */}