/*========================================
骨組み系

　●　トップイメージ／ページヘッダーエリア
　●　h要素・background・a要素等
　●　サイドバナー
　●　ページ内アンカー
　●　問い合わせエリア
　●　フッターエリア
　●　年間予定表
　●　ボタン・ボタンエフェクト

========================================*/


/*========================================
　●　トップイメージ／ページヘッダーエリア
========================================*/
.topimageArea{
 width: 100%;
 padding-top: 16px;
 padding-bottom: 24px;
 line-height: 0;
 background: url("../images/bgdeco/bg_sedots02.png") repeat-x center top,var(--main-green);
}

.topimage{
 overflow: hidden;
 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 border: 8px solid var(--main-yegreen);
 border-radius: 20px;
 line-height: 1;
}

.topimage img{ width: 100%;}

/*----------*/
.pageheaderArea{
 width: 100%;
 padding-top: 16px;
 padding-bottom: 24px;
 line-height: 0;
 background: url("../images/bgdeco/bg_sedots02.png") repeat-x center top,var(--main-green);
}

.pageheader{
 position: relative;
 overflow: hidden;
 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 border: 8px solid var(--main-yegreen);
 border-radius: 20px;
 line-height: 1;
}

.pageheader h2{
 position: absolute; right: 0; bottom: 0;
}

.pageheader h2 img{ width: 100%; max-width: 490px;}

img.pageheader--bg{ width: 100%;}

/*-----*/

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.topimageArea,
.pageheaderArea{ background: var(--main-green);}
.pageheader h2 img{ width: 100%; max-width: calc(490px * 0.8);}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.pageheader h2 img{ width: 100%; max-width: calc(490px * 0.6);}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.pageheader h2 img{ width: 100%; max-width: calc(490px * 0.4);}
}/*----- media -----*/


/*========================================
　●　h要素・background等
========================================*/
/*------------------------------ h要素 */
.h_type01{
 margin-bottom: 24px;
 font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;
 font-size: 42px;
 line-height: 1.3;
 text-align: center;
}

.h_type01 .c-f36{}

.h_type02{
 margin-bottom: 24px;
 padding-bottom: 28px;
 color: var(--main-green);
 font-size: 28px;
 line-height: 1.3;
 text-align: center;
 background: url("../images/parts/h_type02.png") no-repeat center bottom;
}

/*-------------------- 見出し文字色用 */
.h_type01 .c1{ color: var(--main-pink);}
.h_type01 .c2{ color: var(--main-orange);}
.h_type01 .c3{ color: var(--main-green);}
.h_type01 .c4{ color: var(--main-blue);}
.h_type01 .c5{ color: var(--main-yellow);}


.c1{ color: var(--main-pink);}
.c2{ color: var(--main-orange);}
.c3{ color: var(--main-green);}
.c4{ color: var(--main-blue);}
.c5{ color: var(--main-yellow);}


/*------------------------------ background */
.bg_creamwave01{
 min-height: 100px;
 background:
  url("../images/bgdeco/deco_wave01_bottom-white.png") repeat-x center bottom,var(--main-cream);
}

.bg_dots{
 width: 100%;
 max-width: 1400px;
 margin-left: auto;
 margin-right: auto;
 background:
  url("../images/bgdeco/deco_dots_l.png") no-repeat left top / calc(304px * 1.0),
  url("../images/bgdeco/deco_dots_r.png") no-repeat right top / calc(304px * 1.0);
}

.bg_kid{
 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 background:
  url("../images/bgdeco/illust_kid01_01.png") no-repeat left 88% / calc(284px * 1.0),
  url("../images/bgdeco/illust_kid01_02.png") no-repeat right top / calc(244px * 1.0);
}

/*------------------------------ a要素 */
a.a_type01{ text-underline-offset: 6px;}
a.a_type01:link,
a.a_type01:visited{ color: var(--main-skyblue);}
a.a_type01:hover{ color: var(--main-yellow);}

a.a_type02{ text-underline-offset: 6px;}
a.a_type02:link,
a.a_type02:visited{ color: var(--main-pink);}
a.a_type02:hover{ color: var(--main-skyblue);}

a.a_type03{ text-underline-offset: 6px;}
a.a_type03:link,
a.a_type03:visited{ color: var(--main-blue);}
a.a_type03:hover{ color: var(--main-orange);}

/*============================== □ max-width xxx */
@media screen and (max-width: 1280px){
.bg_dots{
 background:
  url("../images/bgdeco/deco_dots_l.png") no-repeat left top / calc(304px * 0.8),
  url("../images/bgdeco/deco_dots_r.png") no-repeat right top / calc(304px * 0.8);
}

.bg_kid{
 background:
  url("../images/bgdeco/illust_kid01_01.png") no-repeat left 88% / calc(284px * 0.8),
  url("../images/bgdeco/illust_kid01_02.png") no-repeat right top / calc(244px * 0.8);
}
}/*----- media -----*/

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.bg_dots{
 background:
  url("../images/bgdeco/deco_dots_l.png") no-repeat left top / calc(304px * 0.4),
  url("../images/bgdeco/deco_dots_r.png") no-repeat right top / calc(304px * 0.4);
}

.bg_kid{
 background:
  url("../images/bgdeco/illust_kid01_01.png") no-repeat left 72% / calc(284px * 0.6),
  url("../images/bgdeco/illust_kid01_02.png") no-repeat right 100% / calc(244px * 0.6);
}
}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.h_type01{ font-size: 32px;}
.h_type01 .c-f36{ font-size: 26px;}

.h_type02{ font-size: 22px;}

/*------------------------------ background */
.bg_creamwave01{
 background-size: 960px;;
}

.bg_dots{
 background:
  url("../images/bgdeco/deco_dots_l.png") no-repeat left top / calc(304px * 0.3),
  url("../images/bgdeco/deco_dots_r.png") no-repeat right top / calc(304px * 0.3);
}

.bg_kid{
 background:
  url("../images/bgdeco/illust_kid01_01.png") no-repeat left 74.5% / calc(284px * 0.45),
  url("../images/bgdeco/illust_kid01_02.png") no-repeat right 74.5% / calc(244px * 0.45);
}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.h_type01{ font-size: 28px;}
.h_type01 .c-f36{ font-size: 24px;}

.h_type02{ font-size: 20px;}

.bg_dots{
 background: none;
}

.bg_kid{
 padding-bottom: 160px;
 background:
  url("../images/bgdeco/illust_kid01_01.png") no-repeat left 98% / calc(284px * 0.45),
  url("../images/bgdeco/illust_kid01_02.png") no-repeat right 98% / calc(244px * 0.45);
}

}/*----- media -----*/


/*========================================
　●　サイドバナー
========================================*/
.side--business{
 position: fixed; right: 0; top: 120px; z-index: 10;
 font-size: 12px;
}

.side--tensaku{
 position: fixed; right: 0; top: 358px; z-index: 10;
 font-size: 12px;
}

.side--business,
.side--tensaku{ width: 60px;}

.side--business a,
.side--tensaku a{ transition: all 0.5s ease;}

.side--business a:hover,
.side--tensaku a:hover{ opacity: 0.6;}

.side--business img,
.side--tensaku img{ width: 100%; max-width: 60px;}


/*============================== □ max-width xxx */
@media screen and (max-width: 1280px){
.side--business,
.side--tensaku{ width: 45px;}

.side--tensaku{ top: 295px;}

}/*----- media -----*/


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.side--business,
.side--tensaku{ display: none; width: 30px;}

.side--business{ top: 120px;}
.side--tensaku{ top: 236px;}


}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/


/*========================================
　●　ページ内アンカー
========================================*/
.anchorArea{ margin-bottom: 14px;}

.anchorArea ul{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.anchorArea li{
 margin-bottom: 14px;
 margin-left: 8px;
 margin-right: 8px;
 font-size: 20px;
 list-style: none;
 text-align: center;
}

.anchorArea li a{
 display: block;
 padding: 8px 1.0em;
 text-decoration: none;
 border: 2px solid var(--main-yegreen);
 border-radius: 16px;
 transition: all 0.3s ease-out;
}

.anchorArea li a:link,
.anchorArea li a:visited{ color: var(--main-blue);}

.anchorArea li a:hover{
 color: #fff;
 background: var(--main-green);
 border: 2px solid var(--main-green);
}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/



/*========================================
　●　問い合わせエリア
========================================*/
.footerContactarea{
 padding-top: 37px;
 padding-bottom: 37px;
 padding-left: 4px;
 padding-right: 4px;
 background: url("../images/bgdeco/bg_contact.jpg") repeat-x center center;
}

.sec-contact{
 width: 100%;
 max-width: 1080px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 10px;
 padding-bottom: calc(16px + 16px);
 padding-left: 8px;
 padding-right: 8px;
 line-height: 1;
 background: rgba(255,255,255,0.96);
 border-radius: 20px;
}

.sec-contact h3{
 font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;
 font-size: 28px;
 line-height: 1.5;
 text-align: center;
}

.sec-contact p.contact-text01{
 padding-bottom: 9px;
 line-height: 1.8;
 text-align: center;
}

/*----------*/
.contactWrap{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.contactTel{
 width: 49.6%;
 max-width: 527px;
}

.contactMail{
 width: 49.6%;
 max-width: 431px;
}

.contactKaikou100{/*スクール情報ページ*/
 width: 100%;
 max-width: 992px;
 margin-top: 24px;
 margin-bottom: 48px;
}

.contactTel h4,
.contactMail h4,
.contactKaikou100 h4{
 margin-bottom: 21px;
 padding-bottom: 8px;
 padding-left: 48px;
 font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;
 font-size: 22px;
 line-height: 1.5;
 border-bottom: 2px solid var(--main-yegreen);
}

.contactTel h4{
 background: url("../images/parts/icon_tel01.png") no-repeat left 0px;
}

.contactMail h4{
 background: url("../images/parts/icon_mail01.png") no-repeat left 1px;
}

.contactKaikou100 h4{
 background: url("../images/parts/icon_clock01.png") no-repeat left 0px;
}

/*-----*/
.contactTel .telno{
 padding-bottom: 48px;
 font-size: 30px;
 line-height: 36px;
 text-align: center;
}

.contactTel .c-indent{ line-height: 1.5; text-align: center;}

/*-----*/
.contactMail .mailad{
 padding-bottom: 30px;
 font-size: 22px;
 line-height: 36px;
 text-align: center;
}

.contactKaikou{}

.contactKaikou figcaption{
 padding-bottom: 16px;
 color: var(--main-orange);
 text-align: center;
}

.kaikouTable{}

.kaikouTable dl{ margin-bottom: 1px;
 display: flex;
 width: 100%;
 max-width: 328px;
 margin-right: auto;
 margin-left: auto;
}

.kaikouTable dt,
.kaikouTable dd{
 padding: 0.6em 0.25em;
 line-height: 1.3;
 text-align: center;
}

.kaikouTable dt{
 width: 39%;
 background: var(--main-yellow);
 border: 1px solid var(--main-yellow);
}

.kaikouTable dd{ width: 61%; border: 1px solid var(--main-yellow);}

/*----- contactKaikou100Wrap */
.contactKaikou100Wrap{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.contactKaikou100Time{
 width: 50%;
}
.contactKaikou100Text{
 width: calc(50% - 3.0em);
}

/*---*/
.contactKaikou100 .kaikouTable{ margin-bottom: 12px;}
.contactKaikou100 .kaikouTable dl{ max-width: 100%;}

.contactKaikou100Text p{ line-height: 1.5;}

.contactKaikou100 .kaikouTable dt,
.contactKaikou100 .kaikouTable dd{ padding: 1.0em 0.25em}


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.sec-contact{ max-width: 840px;}

.contactTel{ width: 50%;}
.contactMail{ width: 42%;}

.contactKaikou100{/*スクール情報ページ*/
 width: 100%; max-width: 780px;
}


/*-----*/
.contactTel .telno{
 padding-bottom: 48px;
 font-size: 28px;
}

.contactTel .c-indent{ text-align: left;}

/*-----*/
.contactMail .mailad{
 padding-bottom: 30px;
 font-size: 20px;
}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.sec-contact p.contact-text01{
 padding-bottom: 16px;
 line-height: 1.8;
 text-align: center;
}

/*----------*/
.contactWrap{
 display: flex;
  align-items: center;
  flex-direction: column;
}

.contactTel{ width: 100%; max-width: 640px; margin-bottom: 32px;}
.contactMail{ width: 100%; max-width: 640px;}

.contactKaikou100{/*スクール情報ページ*/
 width: 100%; max-width: 640px;
}

/*-----*/
.contactTel .telno{ padding-bottom: 30px;}

.contactTel .c-indent{ text-align: center;}

/*----- contactKaikou100Wrap */
.contactKaikou100Time{ width: 100%;}
.contactKaikou100Text{ width: 100%;}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*-----*/
.contactTel .c-indent{ text-align: left;}

/*-----*/
.contactMail .mailad{
 font-size: 18px;
}

}/*----- media -----*/

/*========================================
　●　フッターエリア
========================================*/
.footerArea{
 min-height: 120px;
 padding-top: 45px;
 padding-bottom: 45px;
 line-height: 0;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center bottom,
  url("../images/bgdeco/bg_sedots03.png") repeat-y center top,
  var(--main-green);
}

footer{
 width: 100%;
 max-width: 1080px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 4px;
 padding-right: 20px;
 line-height: 1;
 background: #fff;
 border: 4px solid var(--main-yegreen);
 border-radius: 20px;
}

.footerWrap{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footerLogoarea{
 width: 40%;
 max-width: 420px;
 padding-top: 13px;
 padding-bottom: 13px;
 text-align: center;
}

.footerTextarea{
 width: 58%;
 max-width: 610px;
}

/*----------*/
.footerLogoarea img{
 width: 100%;
 max-width: 320px;
}

.footerLogoarea a{ transition: all 0.2s ease-out;}
.footerLogoarea a:hover{ opacity: 0.8;}

/*-----*/
ul.footerNav{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
 margin-bottom: 8px;
}

ul.footerNav li{
 padding-left: 1.0em;
 padding-right: 1.0em;
 line-height: 2.2;
 list-style: none;
}

ul.footerNav li.u-br{ padding-right: 0;}

ul.footerNav li a{
 text-decoration: none;
 transition: all 0.2s ease-out;
}

ul.footerNav li a:link,
ul.footerNav li a:visited{ color: var(--main-textcolor);}

ul.footerNav li a:hover{ color: var(--main-green);}

ul.footerSns{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
 margin-bottom: 1px;
}

ul.footerSns li{
 margin-bottom: 10px;
 padding-left: 12px;
 padding-right: 12px;
 list-style: none;
}

.footerInfo{
 font-size: 18px;
 line-height: 20px;
 text-align: right;
}

.footerInfo figcaption,
.footerInfo p{ padding-bottom: 8px;}

.footerInfo address{
 font-size: 16px;
 font-style: normal;
 line-height: 20px;
}

.footerInfo p br.u-br01{ display: none;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.footerArea{
 padding-top: 36px;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center bottom,
  url("../images/bgdeco/bg_sedots03.png") repeat-y center top / 1280px,
  var(--main-green);
}

footer{
 width: 100%;
 max-width: 840px;
 padding-left: 4px;
 padding-right: 4px;
 border-radius: 20px;
}

.footerWrap{
 display: flex;
  flex-direction: column;
  justify-content: center;
}

.footerLogoarea{
 width: 100%;
 padding-top: 20px;
}

.footerTextarea{ width: 100%;}

/*----------*/
/*-----*/
ul.footerNav{
 display: flex;
  justify-content: center;
}

ul.footerNav li.u-br{ padding-right: 1.0em;}

ul.footerSns{
 display: flex;
  justify-content: center;
}

.footerInfo{
 padding-bottom: 20px;
 text-align: center;
}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.footerArea{
 min-height: 120px;
 padding-top: 45px;
 padding-bottom: 45px;
 line-height: 0;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center bottom,
  var(--main-green);
}

.footerInfo p{ line-height: 24px;}

.footerInfo p br.u-br01{ display: block;}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/

/*========================================
　●　年間予定表
========================================*/
/*------------------------------ テキストタイプ */
a.calendarType01{
 display: block;
 width: fit-content;
 text-decoration: none;
 transition: all 0.2s ease-out;
}
a.calendarType01:link,
a.calendarType01:visited{ color: var(--main-textcolor);}
a.calendarType01:hover{ color: var(--main-green);}

a.calendarType01::before{
 display: inline-block;
 width: 29px;
 height: 15px;
 margin-right: 8px;
 content: "";
 background: url("../images/parts/mark_calendar01.png") no-repeat center center / cover;
}

/*-------------------- フッター余白等調整 */
footer a.calendarType01{
 margin-bottom: 20px;
 margin-left: auto;
}

/*-------------------- 学校情報部分 */
.contactKaikou100Time a.calendarType01{}

/*------------------------------ ボタンタイプ */
a.calendarType02{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 200px;
 height: 48px;
 margin-top: auto;
 text-decoration: none;
 background: var(--main-yellow);
 border-radius: 24px;
}

a.calendarType02:link{ color: var(--main-textcolor);}
a.calendarType02:visited{ color: var(--main-textcolor);}
a.calendarType02:hover{ color: #fff;}

a.calendarType02 .mark_calendar01{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
 height: 24px;
 padding-left: calc(39px + 0.5em);
 background: url("../images/parts/mark_calendar01.png") no-repeat center left / contain;
}

/*-------------------- News部分 */
.newsMain a.calendarType02{ margin-bottom: 12px;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
/*------------------------------ テキストタイプ */
/*-------------------- フッター余白等調整 */
footer a.calendarType01{
 margin-left: auto;
 margin-right: auto;
}
/*-------------------- 学校情報部分 */
.contactKaikou100Time a.calendarType01{ margin-bottom: 12px;}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ テキストタイプ */
/*-------------------- 学校情報部分 */
/*-------------------- 学校情報部分 */
.contactKaikou100Time a.calendarType01{ margin-left: auto;}
}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){

}/*----- media -----*/


/*========================================
　●　ボタン関係・ボタンエフェクト
========================================*/
/*------------------------------ ボタン関係 */
a.buttonBase{
  align-self: flex-end;
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 300px;
 height: 64px;
 margin-top: auto;
 text-decoration: none;
 background: var(--main-green);
 border-radius: 32px;
}

a.buttonBase:link{ color: #fff;}
a.buttonBase:visited{ color: #fff;}
a.buttonBase:hover{}


.icon_newtab01{
 padding-right: 1.5em;
 background: url("../images/parts/icon_newtab01.png") no-repeat center right;
}

.icon_arrow01{
 padding-right: 1.5em;
 background: url("../images/parts/icon_arrow01.png") no-repeat center right;
}

/*------------------------------ ボタンエフェクト */
.button_ef{
 overflow: hidden;
 position: relative;
 z-index: 1;
}

.button_ef > span.ef,
.button_ef > span.ef__green{
 position: absolute; top: 0; left: 0; z-index: -1;
 display: block;
 width: 100%;
 height: 100%;
}

.button_ef > span.ef:after{
 position: absolute; top: 0px; left: -120%; z-index: 0;
 display: block;
 width: 110%;
 height: 100%;
 content: "";
 background: var(--main-blue);
 transform: skewX(-30deg);
 transition: all 0.3s ease-out;
}

.button_ef:hover > span.ef:after{
 position: absolute; top: 0; left: -10%; z-index: -1;
 display: block;
 width: 120%;
 height: 100%;
 background: var(--main-blue);
 transform: skewX(-30deg);
}

/*---*/
.button_ef > span.ef__orange:after{
 position: absolute; top: 0px; left: -120%; z-index: 0;
 display: block;
 width: 110%;
 height: 100%;
 content: "";
 background: var(--main-orange);
 transform: skewX(-30deg);
 transition: all 0.3s ease-out;
}

.button_ef:hover > span.ef__orange:after{
 position: absolute; top: 0; left: -10%; z-index: -1;
 display: block;
 width: 120%;
 height: 100%;
 background: var(--main-orange);
 transform: skewX(-30deg);
}