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

.pcNone{ display: none !important;}


/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body {}
body{ border:none;}
#wrap {width: 100%;}

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea {height: auto;padding: 10px 0 10px;border-bottom: 3px solid #00a1c9;border-top: 20px solid #00a1c9;}
#headerAreaInner {height: auto;position: relative; max-width: 860px;margin: 0 auto;}
#headerTitle{/* position:absolute; */width: 294px;top: 0;left: 0;}
#headerArea h1{position:initial;}
#headerLink{position: static;width: 248px;top: 0;right: 0;padding: 0;}

#headerArea .ttlTxt{font-size: 11px; color: #fff; font-weight: normal;position: absolute;top: -28px;line-height: 1.6; margin: 0;padding: 0;}
#headerArea .ttlSub{position: absolute;top: -28px;right: 0;color: #fff;font-size: 11px;text-align: right;width: 400px;line-height: 1.6;margin: 0;padding: 0;}

/*----------------------------------------------------------------------------
***                                                            breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{ max-width: 860px; margin: 10px auto 0 auto;width: 100%;}
#breadcrumbArea li{ float:left; font-size:10px; }
#breadcrumbArea li a{ display:block; background:url(https://www.nova.co.jp/common_images/icon_list03.gif) right 50% no-repeat; padding-right:25px;}

/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea {
    margin-bottom: 0px;
}
#contentsAreaInner {}

h2 {}

/*----------------------------------------------------------------------------
 ***                                                               mainView
----------------------------------------------------------------------------*/
#mainView{width: 100%;height: 350px;background-image: url(https://www.nova.co.jp/studystyle/images/bg_contents01b.jpg);background-repeat: repeat-x;background-position: center center;}
#mainView #mainViewInner {/* width: 80%; *//* max-width: 900px; *//* min-width: 800px; */height: 100%;position: relative;margin: 0 auto;width: 900px;}
#mainView #mainViewInner .img {position: absolute;right: 50px;top: -3px;-webkit-transform: translate(30%,0px);-ms-transform: translate(30%,0px);transform: translate(30%,0px);}
#mainView #mainViewInner h2 {position: relative;max-width: 500px;height: auto;z-index: 2;width: 100%;}
#mainView #mainViewInner h2 img {width: 100%;}
#mainView #mainViewInner h2:after {content: url(https://www.nova.co.jp/studystyle/images/img_contents10.png);position: absolute;bottom: 0;right: 110px;-webkit-transform: translate(0%, 55%);-ms-transform: translate(0%, 55%);transform: translate(0%, 55%);}
#mainView #mainViewInner .leftBox {width: auto;padding: 4.5em 0 0 2em;}
#mainView #mainViewInner .leftBox .txt {color: #fff; font-size: 20px; font-weight: bold; margin-top: 2em;}

/*----------------------------------------------------------------------------
 ***                                                               selectStyle
----------------------------------------------------------------------------*/
#selectStyle {max-width: 950px;margin: 0 auto;padding: 5em 0;}
#selectStyle ul li {max-width: 245px;width: 32%;}

#selectStyle ul li:hover {text-decoration: none;}
#selectStyle ul li a {text-decoration: none;}
#selectStyle ul {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-pack: distribute;justify-content: space-around;width: 100%;margin: 0 auto;font-size: 1.2em;}
#selectStyle ul li .ttl {background-color: #00a7b1;padding: 0.3em 0;font-size: 1.2em;text-align: center;color:#fff;font-weight:bold;}
#selectStyle ul li:nth-child(2) .ttl {background-color: #4f5cbf;} 
#selectStyle ul li:nth-child(3) .ttl {background-color: #ff8b22;} 
#selectStyle ul li .img {max-width: 235px;margin: 0 auto;}
#selectStyle ul li .btn {max-width: 170px;color: #aaa;background-color: #f2f2f2;border: 1px solid #aaa;font-weight: bold;text-align: center;margin: 1em auto 0 auto;border-radius: 30px;font-size: 1.2em;-webkit-transition: ease all .2s;-o-transition: ease all .2s;transition: ease all .2s;width: 90%;}

#selectStyle ul li:hover .btn {background-color: #ccc; color: #fafafa;}

/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection {float:none; position:relative;}
.mainSectionInner {padding: 0;}

/*----------------------------------------------------------------------------
 ***                                                              ekimaeSec
----------------------------------------------------------------------------*/

#ekimaeSec {width: 100%;background-color:#eafafb;padding: 0em 0 5em 0;}
#ekimaeSec h3 {text-align: center;color: #00a7b1;font-size: 3em;padding: 2em 0 1em 0;position: relative;}
#ekimaeSec h3:before {content: "衛生環境にこだわった校舎で英会話レッスン！"; width: 100%;font-size: 0.5em; color:#000; position: absolute; top: 1.5em;left:50%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);}
#ekimaeSec #ekimaeSecInner {background-color: #fff;padding: 25px 28px;width: 820px;margin: 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-sizing: border-box;box-sizing: border-box;}
/*#ekimaeSec #ekimaeSecInner .img {width: 320px;}*/
#ekimaeSec #ekimaeSecInner .img img {margin: 1em 0 0 0; width: 100%;height: auto;}
#ekimaeSec #ekimaeSecInner .detail {font-size: 1.4em;}
#ekimaeSec #ekimaeSecInner .detail p {line-height: 1.5;}
#ekimaeSec #ekimaeSecInner .detail .txt{padding: 1em; text-align: center;}
#ekimaeSec #ekimaeSecInner .btnBox {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-pack: distribute;justify-content: space-around;margin-top: 1em;padding-right: 35px;}
#ekimaeSec #ekimaeSecInner .btnBox .btn {width: 35%;}
#ekimaeSec #ekimaeSecInner .btnBox .btn a {color: #e21e79;padding: 0.4em 1em;text-align: center;background-color:#ffebf1;border: 1px solid #e21e79;border-radius: 3em;display: inline-block;width: 100%;-webkit-transition: ease all .2s;-o-transition: ease all .2s;transition: ease all .2s;}
#ekimaeSec #ekimaeSecInner .btnBox .btn a:hover {background-color: #e21e79; color: #ffebf1; text-decoration: none;}
#ekimaeSec #ekimaeSecInner h4 {font-size: 1.5em;text-align: center;border-bottom: solid 1px #00a7b1;padding-bottom: 0.3em;}
#ekimaeSec #ekimaeSecInner h4 span {position:relative;color: #00a7b1;font-size: 1.3em;text-align: center;padding-bottom: 0.3em;}
#ekimaeSec #ekimaeSecInner h4 span:after {content:"ハイジェニック";position:absolute; font-size:0.4em;display: block;top: -1.6em;right: 5em;}
#ekimaeSec .hybridBnrBox .ttl{position: relative;}
#ekimaeSec .hybridBnrBox .ttl:after {content: ""; width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #00a8b1 transparent transparent transparent; position: absolute; bottom: -1em;}

#ekimaeSec #ekimaeSecInner .school {color: #00a7b1;}
#ekimaeSec #ekimaeSecInner .introduction{text-align: center;}
/*----------------------------------------------------------------------------
 ***                                                              onlineSec
----------------------------------------------------------------------------*/
#onlineSec{width: 100%;background-color: #f0f3ff;padding: 1em 0 0em 0;}
#onlineSec h3 {text-align: center;color: #4f5cbf;font-size: 3em;padding: 2em 0 1em 0;position: relative;}
#onlineSec h3:before {content: "ご自宅やちょっとしたスキマ時間に…！"; width: 100%; font-size: 0.5em; color:#000; position: absolute; top: 1.5em;left:50%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);}
#onlineSec h4 {color: #4f5cbf;font-size: 1.6em;border-bottom: 1px solid;}
#onlineSec h4 .new {color:#e21e79;font-size: 60%;margin-left: 1em;}
#onlineSec #onlineSecInner {width: 100%;max-width: 820px;margin: 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-sizing: border-box;box-sizing: border-box;}
#onlineSec #onlineSecInner .label {background-color: #4f5cbf; padding:  0.5em 0;}
#onlineSec #onlineSecInner .label .type {color: #fff; font-size: 1.2em; line-height:20px; padding: 0 1em; border-right: 1px solid #fff;}
#onlineSec #onlineSecInner .label .device {display: inline-block; padding-left: 1em;}
#onlineSec #onlineSecInner .label .device li {display: inline-block;}
#onlineSec #onlineSecInner .list {border: 2px #4f5cbf solid;background-color: #fff;width: 100%;margin-bottom: 5em;}
#onlineSec #onlineSecInner .list .introduction .img {max-width:250px;width: 30%;}
#onlineSec #onlineSecInner .list .introduction .detail {width: 64%;font-size: 1.45em;position: relative;max-width: 540px;}
#onlineSec #onlineSecInner .list .introduction .detail p {padding-top: 0;line-height: 1.5}
#onlineSec #onlineSecInner .list .introduction p.txt {
    padding-top: 0.3em;
}
#onlineSec #onlineSecInner .list .introduction {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 1.7em 1.7em 1.7em 1.7em;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: space-between;-ms-flex-pack: space-between;justify-content: space-between;}
#onlineSec #onlineSecInner .list .btn a {display: block;width: 30%;border: 1px #4f5cbf solid;color: #4f5cbf;background-color:#f0f3ff;text-align: center;margin: 0 auto;padding: 0.3em 0.5em;border-radius: 2em;position: absolute;bottom: -1em;left: 50%;font-size: 1.2em;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: ease .2s all;-o-transition: ease .2s all;transition: ease .2s all;}
#onlineSec #onlineSecInner .list:nth-child(1) .btn a {display: block;width: 30%;border: 1px #4f5cbf solid;color: #4f5cbf;background-color:#f0f3ff;text-align: center;margin: 0 auto;padding: 0.3em 0.5em;border-radius: 2em;position: absolute;bottom: -2.7em;left: 50%;font-size: 1.2em;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: ease .2s all;-o-transition: ease .2s all;transition: ease .2s all;}
#onlineSec #onlineSecInner .list:nth-child(1) .introduction {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 1em 1.7em 4.5em 1.7em;}
#onlineSec #onlineSecInner .list:nth-child(4) .btn a {display: block;width: 30%;border: 1px #4f5cbf solid;color: #4f5cbf;background-color:#f0f3ff;text-align: center;margin: 0 auto;padding: 0.3em 0.5em;border-radius: 2em;position: absolute;bottom: -2.3em;left: 50%;font-size: 1.2em;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: ease .2s all;-o-transition: ease .2s all;transition: ease .2s all;}
#onlineSec #onlineSecInner .list:nth-child(4) .introduction {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 1em 1.7em 4em 1.7em;}
#onlineSec #onlineSecInner .list .btn a:hover {background-color: #4f5cbf; color: #f0f3ff; text-decoration: none;}


/*----------------------------------------------------------------------------
 ***                                                          appServiceSec
----------------------------------------------------------------------------*/
#appServiceSec{width: 100%;background-color: #fff1e6;padding: 1em 0 0em 0;}
#appServiceSec h3 {text-align: center;color: #ff8b22;font-size: 3em;padding: 2em 0 1em 0;position: relative;}
#appServiceSec h3:before {content: "他にも選択肢はいろいろ！";width: 100%;font-size: 0.5em;color:#000;position: absolute;top: 1.5em;left:50%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);}
#appServiceSec h4 {color: #ff8b22;font-size: 1.6em;border-bottom: 1px solid;}
#appServiceSec h4 .new {color:#e21e79;font-size: 70%; margin-left: 1em;}
#appServiceSec h4 .small {font-size: 75%;}
#appServiceSec #appServiceSecInner {width: 100%;max-width: 820px;margin: 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-sizing: border-box;box-sizing: border-box;}
#appServiceSec #appServiceSecInner .label {background-color: #ff8b22;padding:  0.5em 0;}
#appServiceSec #appServiceSecInner .label .type {color: #fff; font-size: 1.2em; line-height:20px; padding: 0 1em; border-right: 1px solid #fff;}
#appServiceSec #appServiceSecInner .label .device {display: inline-block; padding-left: 1em;}
#appServiceSec #appServiceSecInner .label .device li {display: inline-block;}
#appServiceSec #appServiceSecInner .list {border: 2px #ff8b22 solid;background-color: #fff;width: 100%;margin-bottom: 5em;}
#appServiceSec #appServiceSecInner .list .introduction .img {max-width: 250px;width: 30%;}
#appServiceSec #appServiceSecInner .list .introduction .detail {width: 64%;font-size: 1.45em;position: relative;max-width: 540px;}
#appServiceSec #appServiceSecInner .list .introduction .detail p {line-height: 1.5;padding-top: 0;}
#appServiceSec #appServiceSecInner .list .introduction p.txt {
    margin-top: 0.3em;
}
#appServiceSec #appServiceSecInner .list .introduction {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 1.7em;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: space-between;-ms-flex-pack: space-between;justify-content: space-between;}
#appServiceSec #appServiceSecInner .list .btn a {display: block;width: 30%;border: 1px #ff8b22 solid;color: #ff8b22;background-color: #fff1e6;text-align: center;margin: 0 auto;padding: 0.3em 0.5em;border-radius: 2em;position: absolute;bottom: -1em;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: ease .2s all;-o-transition: ease .2s all;transition: ease .2s all;font-size: 1.2em;}
#appServiceSec #appServiceSecInner .list .btn a:hover {background-color: #ff8b22; color: #fff1e6; text-decoration: none;}

.only_sp {
    display: none !important;
}
.only_pc {
    display: block !important;
}