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

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
p,li{font-size: 18px;}
.dispFlex{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}

/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea { margin:0 auto;}
.contentInner{max-width: 1200px;padding: 60px 0;width: 95%;margin: auto;}

/*----------------------------------------------------------------------------
 ***                                                                   fvSec
----------------------------------------------------------------------------*/
#fvSec { background:url(../images/renewal/2408/img_main01.jpg) no-repeat top center; box-sizing: border-box;position: relative;background-size: cover;}
#fvSec .fvBox{text-align:center; max-width: 1200px;margin:0 auto; position:relative;padding: 4.6em 3%;}
#fvSec .fvBox .leftBox{width: 65%;z-index: 10;position: relative;}
#fvSec .fvBox .leftBox .textBox{margin:3em 0 3em;}
#fvSec .fvBox .leftBox .textBox h2{font-size: 70px;font-weight: bold;line-height: 1.2;color: #42210b;}
#fvSec .fvBox .leftBox .textBox h2 span{display: block;font-size: 50px;}
#fvSec .fvBox .leftBox .textBox p.mainTxt{font-size: 35px;margin: 0.8em 0 0.2em;font-weight: bold;color: #42210b;}
#fvSec .fvBox .leftBox .textBox p.subTxt{font-size: 22px;font-weight: bold;color: #42210b;}
#fvSec .fvBox .leftBox .appBox{width: 50%;margin:0 ;}
#fvSec .fvBox .leftBox .appBox p{font-size: 27px;position:relative;color: #e61e79;font-weight: bold;text-align: center;}
#fvSec .fvBox .leftBox .appBox p:before{ content:"／"; transform:scale(-1,1); left:13%;}
#fvSec .fvBox .leftBox .appBox p:after{ content:"／"; right:13%;}
#fvSec .fvBox .leftBox .appBox p:before,
#fvSec .fvBox .leftBox .appBox p:after{display:inline-block;font-size:1.25rem;position:absolute;top:0;bottom:0;margin:auto;}
#fvSec .fvBox .leftBox .appBox ul{display: flex;justify-content: center;align-items: center;}
#fvSec .fvBox .leftBox .appBox ul li{width: 55%;margin: 0 10px;}
#fvSec .fvBox .leftBox .appBox ul li img{width: 100%; height: auto;}
#fvSec .fvBox .rightBox { background:url("../images/renewal/2408/img_main02.png") no-repeat top right; box-sizing: border-box;position: absolute;width: 527px;top: 0;bottom: 0;right: 0;margin: auto;}
#fvSec .fvBox .rightBox p{text-align: center;margin-top: 1em;}
#fvSec .fvBox .rightBox video{width: 250px;height: auto;border-radius: 41px;}

/*----------------------------------------------------------------------------
 ***                                                                   mainSec
----------------------------------------------------------------------------*/
#mainSec{ padding:30px 0em 0;}
#mainSec .subtitleBox{ text-align: center;}
#mainSec .sectionInner{ padding:0px 75px 0;}

/*---------------------------------３つのポイント---------------------------------*/
#pointSec .titleBox h3{font-size: 40px;color: #42210b;text-align: center;margin-bottom: 0.5em;}
#pointSec ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: stretch;}
#pointSec ul li{width: calc(95% / 3);border-right: 1px solid #000;padding: 0 9px;}
#pointSec ul li:last-child{border-right: none;}
#pointSec ul li p{text-align: center;}
#pointSec ul li p.icon{}
#pointSec ul li h3{font-size: 30px;font-weight: bold;text-align: center;line-height: 1.3;margin-bottom: 0.3em;}
#pointSec ul li.point_a h3{color: #ff7b9e;}
#pointSec ul li.point_b h3{color: #e9851e;}
#pointSec ul li.point_c h3{color: #299dd4;}
#pointSec .Movie{ max-width:780px; margin:30px auto 0; padding: 15px 0 0px; text-align: center; background: #fff; border-radius: 30px;}
#pointSec .Movie iframe{border: solid 1px #ccc;}

/*---------------------------------オールジャンルの英語学習---------------------------------*/
#allgenreSec{background: #d2f4ff;}
#allgenreSec .titleBox h3{font-size: 40px;color: #42210b;text-align: center;margin-bottom: 0.5em;}
#allgenreSec .titleBox .text{text-align: center;font-size: 20px;}

#allgenreSec .app_contents{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; padding-top: 50px;}
#allgenreSec .app_contents li{ text-align:left; font-size:18px; width:49%; position:relative; margin:0 10px 0;max-width: 435px;background: #fff;border-radius: 30px; margin-bottom: 50px; }
#allgenreSec .app_contents li img {width: 100%; height: auto;}
#allgenreSec .app_contents li p {font-size: 90%;}
#allgenreSec .app_contents li span{ font-weight:bold;}

#allgenreSec .app_contents li .imgpoint{width: 153px; height: auto;position: absolute; right: 5px;bottom: 5px;}
#allgenreSec .app_contents li div{width: 230px; padding: 15px 0px 10px 25px;}
#allgenreSec .app_contents li h4{text-align: center; color: #0084ac; font-size: 125%; padding-top:0;}
#allgenreSec .app_contents #point01 .icon{margin-left: 80px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents #point02 .icon{margin-left: 85px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents #point03 .icon{margin-left: 80px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents #point04 .icon{margin-left: 88px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents #point05 .icon{margin-left: 85px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents #point06 .icon{margin-left: 85px; width: 60px; padding: 7px 0px;}
#allgenreSec .app_contents p{padding-top: 10px;}
#allgenreSec .app_contents #point04 div .btn{background-color: #0084ac;color: #fff; width: 250px; height: 20px; text-align: center; border-radius: 40px; padding: 5px;font-weight: bold;}
#allgenreSec .app_contents #point04 div .btn a{color: #fff;}

/*---------------------------------全方位からの英語学習---------------------------------*/
#exer6Sec{}
#exer6Sec .titleBox h3{font-size: 40px;color: #42210b;text-align: center;margin-bottom: 0.5em;}
#exer6Sec .titleBox .text{text-align: center;font-size: 20px;}

#exer6Sec ul{}
#exer6Sec .sectionInner{margin-top: 60px;}
#exer6Sec {margin: 0px auto;}
#exer6Sec .exerBox {position:relative; margin-top:0px;}
#exer6Sec .Slider_content .slick-slide{margin: 0 5em;}

#exer6Sec .exerBox h4{padding: 4px; font-size: 180%;text-align: center;color: #FFFFFF;}
#exer6Sec .exerBox#listening h4{background: #8CC63E;}
#exer6Sec .exerBox#vocabulary h4{background: #EA68A1;}
#exer6Sec .exerBox#reading h4{background: #00A2C8;}
#exer6Sec .exerBox#dictation h4{background: #F8921C;}
#exer6Sec .exerBox#dialog h4{background: #93268F;}
#exer6Sec .exerBox#speaking h4{background: #00AA9E;}

#exer6Sec .exerBox .exerBoxInner{ background:#FFF;}
#exer6Sec .exerBox .exerBoxInner p { padding:10px 0 20px 0px; margin:0;font-size:16px;text-align: center;}
#exer6Sec .exerBox .exerBoxInner ul { padding:0 0 0 30px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
#exer6Sec .exerBox .exerBoxInner ul li{font-size:16px;width: calc(95% / 3);text-align: center;}
#exer6Sec .exerBox .exerBoxInner ul li span{display: block;border-bottom: 1px solid #000;font-weight: bold;padding: 5px 0;margin-bottom: 5px;}
#exer6Sec .exerBox#listening .exerBoxInner ul li span{color: #8CC63E;}
#exer6Sec .exerBox#vocabulary .exerBoxInner ul li span{color: #EA68A1;}
#exer6Sec .exerBox#reading .exerBoxInner ul li span{color: #00A2C8;}
#exer6Sec .exerBox#dictation .exerBoxInner ul li span{color: #F8921C;}
#exer6Sec .exerBox#dialog .exerBoxInner ul li span{color: #93268F;}
#exer6Sec .exerBox#speaking .exerBoxInner ul li span{color: #00AA9E;}

#exer6Sec .exerSlider .ImgArea{ }
#exer6Sec .exerSlider .ImgArea img{width: 75%;height: auto;margin: 4em auto 0;opacity: 0.5;}
#exer6Sec .exerSlider .slick-current .ImgArea img{width: 100%;margin: 0;opacity: 1;}

.slick-prev, 
.slick-next {position: absolute; top: 65%;cursor: pointer; outline: none;background: #fff;font-size: 200%;text-align: center;border-radius: 50vw;width: 48px; height: 48px;display: flex!important;justify-content: center;align-items: center;z-index: 10;}
.slick-prev {left: 0%;}
.slick-next {right: 0%;}

/*---------------------------------レベルに沿った英語学習---------------------------------*/
#levelSec{}
#levelSec .titleBox h3{font-size: 40px;color: #42210b;text-align: center;margin-bottom: 0.5em;}
#levelSec .titleBox .text{text-align: center;font-size: 20px;}

#levelSec .tab_box{margin: 2em auto 0;}
#levelSec .tab_box .btn_area {margin: 0 0 1em;display: -webkit-box;display: flex;justify-content:center;align-items: center;width: 100%;padding-bottom: 0.7em;}
#levelSec .tab_box .tab_btn {width: 85px;height: 85px; padding:0.2em;cursor: pointer;border-radius:50vw;background: #dbccba;display: table;margin: 0 0.3em;}
#levelSec .tab_box .tab_btn.active {background: #3093c5;color: #fff;}
#levelSec .tab_box .tab_btn p{color: #fff;font-size:22px; font-weight: bold;text-align: center;display: table-cell;vertical-align: middle;line-height: 1.1;}
#levelSec .tab_box .tab_btn p span{display: block;font-size: 80%;}

#levelSec .tab_box .tab_panel {display:none;}
#levelSec .tab_box .tab_panel.active {display:block;}
#levelSec .tab_box .tabInner .overviewBox .colorTtl{font-size: 22px;font-weight: bold;text-align: center;color: #3093c5;}
#levelSec .tab_box .tabInner .overviewBox .txt{text-align: center;font-size: 18px;}

#levelSec .tab_box .tabInner .exampleBlock{border: 1px solid #42210b;margin: 1em auto 0;padding: 0;}
#levelSec .tab_box .tabInner .exampleBlock .brown{background: #42210b;color: #fff;font-size: 20px;font-weight: bold;line-height: 1;padding: 0.5em;text-align: center;margin: 0;}
#levelSec .tab_box .tabInner .exampleBlock .flexBox{display: flex;justify-content: space-between;align-items: flex-start;padding: 1.5em 3em 2em;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox{width: 70%;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .genre{width: 100%;border-bottom: 1px solid #42210b;font-size: 16px;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .stepBox{margin-top: 1em;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .stepBox .step span{color: #3093c5;font-weight:bold;font-size: 20px;display: inline-block;margin-right: 1em;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .stepBox .point{font-size: 16px;font-weight: bold;line-height: 1.2;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl{display: flex;justify-content: flex-start;align-items: stretch;margin: 0.5em 0 0;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt{padding: 1em;font-weight: bold;width: 18%;border-radius:1em;margin-right: 1em;display:table;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt p{display: table-cell;vertical-align: middle;text-align: center;color: #fff;font-size: 16px;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt.listening{background: #8cc63f;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt.vocabulary{background: #ff7bac;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt.leading{background: #29abe2;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt.dictation{background: #f7931e;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dt.dialog{background: #912793;}

#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dd{width: 70%;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dd p{line-height: 1.5;margin: 0;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dd .question{display: block;border-bottom: 1px solid #42210b;font-size: 16px;font-weight: bold;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox dl dd .choice{font-size: 16px;display: block;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .stepBox .step{font-size: 80%;line-height: 1.2;}
#levelSec .tab_box .tabInner .exampleBlock .exampleBox .stepBox .step span{font-size:120%;display: inline-block;margin-bottom: 0.5em;}

#levelSec .tab_box .tabInner .cheackBox{display: flex;flex-wrap: wrap;justify-content:center;align-items: center;}
#levelSec .tab_box .tabInner .cheackBox p{margin: 0.5em 1em;}

#levelSec .tab_box .tabInner .exampleBlock .mockBoc{position: relative;background: url("../images/renewal/2408/img_level_mock.png")no-repeat;width: 280px;background-position: center;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p{height: 565px;overflow-x: scroll;text-align: center;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::before{content: "";display: block;background: url("../images/renewal/2408/img_level_mock.png");background-position: top;background-repeat: no-repeat;width: 280px;height:45px;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::after{content: "";display: block;background: url("../images/renewal/2408/img_level_mock.png");background-position: bottom;background-repeat: no-repeat;width: 280px;height:77px;position: absolute;bottom: 0;left: 0;right: 0;margin: 0 auto;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::-webkit-scrollbar{overflow: hidden;width: 1px; background: #fafafa;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::-webkit-scrollbar-button{display: none;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::-webkit-scrollbar-corner{background: #fff;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p::-webkit-scrollbar-thumb{background: #fff;}
#levelSec .tab_box .tabInner .exampleBlock .mockBoc p img{padding-top: 2em;padding-bottom: 3em;}

/*---------------------------------ユーザーレビュー---------------------------------*/
#userSec .titleBox h3{font-size: 40px;color: #42210b;text-align: center;margin-bottom: 0.5em;}
#userSec .titleBox .text{text-align: center;font-size: 20px;}
#userSec .Backcolor02{margin-top: 4em;}
#userSec .Backcolor02 .voice{background: #f3ffdc; padding:2em 3em 2em 2em;margin: 1.5em auto;border-radius: 10px;}
#userSec .Backcolor02 p{border-left: 7px solid #fff;padding-left: 1.5em;margin: 0;}

/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{font-size: 74%;}

#box_policy{justify-content: center;align-items: center;background-color: #00A1BF; width: 100%; padding: 1em 0;}
#box_policy li{margin: 0 1em; padding: 0; text-align: center; width: 10em;}
#box_policy li:first-child {width: auto;}
#box_policy li a{color: #fff;}

#footerCopyright { margin:auto;}

@media(max-width: 1025px) and (min-width: 415px){
	#mainSec #exer6Sec dl{height: 750px}
	#mainSec #section03{padding: 0 1em;}
}