@charset "UTF-8"; 
#menu{margin-bottom:0;}

.topimage{margin: 0 auto 50px; text-align: center;}
.topimage .slick-slider{margin-bottom:50px;}
.topimage .slider{margin: 0 0 50px;}
.topimage .slider img{max-width: 100%; height: auto; width /***/:auto;}

.topimage .single-item{margin: 0 auto 50px;}

.topimage .slick-prev:before, .topimage .slick-next:before{font-size: 24px;}
.topimage .slick-next,
.topimage .thumb-item-nav .slick-next,
.topimage .multiple-item .slick-next,
.topimage .center-item .slick-next{right: 20px; z-index: 99;}
.topimage .slick-prev,
.topimage .thumb-item-nav .slick-prev,
.topimage .multiple-item .slick-prev,
.topimage .center-item .slick-prev{left: 15px; z-index: 100;}
.topimage .single-item .slick-prev:before,
.topimage .single-item .slick-next:before {color: #666;}
.topimage .multiple-item li {margin: 0 5px;}


.topmovie{background:#000; padding:5px 0;}
.youtubelist{opacity:0; max-width:1400px; margin:0 auto; width:100%; padding:0 25px; height:30px; overflow:hidden; transition: all .5s; visibility: hidden;}
.youtubelist li{position:relative; margin:0 8px;}
.youtubelist li .ytbtn{position:absolute; top:0; left:0;}
.youtubelist .slick-prev{left:0;}
.youtubelist .slick-next{right:0;}
.youtubelist.is-show{opacity:1; visibility:visible; height:auto; min-height:30px; max-height:280px;}

@media screen and (min-width : 600px) {
.topmovie{background:#000; padding:25px 0;}
.youtubelist{width:95%; padding:0 50px; min-height:50px; max-height:380px; overflow:hidden;}
}

#message {background: #d70051; margin: 0 0 0 0; padding: 25px 0; text-align: center;}

#topteachers {text-align: center; background:#fff7af;}
#topteachers h2 {margin: 0 auto; padding: 15px 0; text-align: center;}
#topteachers #teachbtn{padding-bottom:10px;}
#topteachers #teachbtn a{display:block; margin: 0 auto; padding-bottom:5px; width: 100%;}
#topteachers #teachbtn img{text-align: center; margin: 5px 0;}
map.pc{display: none;}
#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; margin: 10px; font-weight: 600;}
.minute{font-weight: 600; color: #fff; font-size: 12px; background: #777; padding: 3px 5px; position: relative; top:-2px;}
table.price, table.price02{width: 100%; text-align: center; color: #666; margin-bottom: 10px;}
table.price tr th.gr, table.price02 tr th.gr{background: #ccc; border: 1px solid #ddd:}
table.price tr th.gr2, table.price02 tr th.gr2{background: #ddd; border: 1px solid #ddd: text-align;}
table.price tr td,table.price tr th, table.price02 tr td,table.price02 tr th{background: #fff; border: 1px solid #ddd; padding: 10px 5px;}

p.pr{margin: 0; font-weight: 600; text-align: left;}
#catch2{background: #d70051; color: #fff7af; font-weight: 600; text-align: center; padding: 20px 0; font-size: 1.9rem; line-height: 1.8em; margin-bottom: 15px;}
#catch2 a{color: #fff7af;}

@media screen and (min-width : 600px) {
#topteachers #teachbtn{max-width:710px; margin:0 auto;}
#topteachers #teachbtn a{display:inline-block; margin: 0; padding-bottom:5px; width:40%;}
#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; width: 300px; margin: 10px 0 ; font-weight: 600;}
table.price{width: 600px; text-align: center; color: #666;}
.grayback02 .maincontainer ul.course li{width: 45%;}
}

.teacherspickup {margin: 0 auto 20px; max-width:1500px; padding:0 40px;}
.teacherspickup .slick-slide{margin:0 8px;}
.teacherspickup .slider {margin: 0 0 50px;}
.teacherspickup .slider img {width: 100%; height: auto;}
.teacherspickup .single-item {margin: 0 auto 50px;}
.teacherspickup .slick-prev:before, .teacherspickup .slick-next:before {font-size: 24px; color: #000!important;}
.teacherspickup .slick-next,
.teacherspickup .thumb-item-nav .slick-next,
.teacherspickup .multiple-item .slick-next,
.teacherspickup .center-item .slick-next {right: 20px; z-index: 99;}
.teacherspickup .slick-prev,
.teacherspickup .thumb-item-nav .slick-prev,
.teacherspickup .multiple-item .slick-prev,
.teacherspickup .center-item .slick-prev {left: 15px; z-index: 100;}
.teacherspickup .single-item .slick-prev:before,
.teacherspickup .single-item .slick-next:before {color: #666;}
.teacherspickup .multiple-item li {margin: 0 5px;}

#feature {background: #e6e6e6; text-align: center; padding:15px 0;}
#feature h2{margin-bottom:10px;}
#feature #boxset{max-width: 980px;}
#feature #boxset .info{ background: #fefefe; text-align: left; padding:5px 10px; min-height: 168px; border-bottom: 1px solid #d70051; font-size:14px; font-size:1.4rem;}
#feature #boxset .info h3 {margin:8px 0; color: #d70051; font-size:17px; font-size:1.7rem;  font-weight: 600;}
#feature #boxset p{line-height: 1.6;}

#feature #featurebox{text-align: left; color: #604c3f; margin: 0 auto; margin-top:5px; padding:0 10px; font-weight: 600;}
#feature #featurebox ul li{border-bottom: 1px dotted #604c3f; padding:16px 0; font-size:15px; font-size:1.5rem;}
#feature #featurebox .pc{display: none;}

#links{background: #e6e6e6; text-align: center; padding: 5px 10px 30px 10px;}
#links a{display:block; margin: 8px 0;}


#topbottoms {padding: 25px 0;}
#topbottoms h2{font-size:14px; font-size:1.4rem; font-weight: normal; line-height: 2;}
#information{margin-top:10px; padding: 10px 0;}
#information h2{text-align: center; margin-bottom:10px; padding-bottom: 10px; border-bottom: 1px solid #604c3f;}
#information h4{font-size: 16px; font-weight: 600; margin: 0; padding: 0 0 1px 0;}
#information p{display: none;}

#information ul{list-style: none; margin: 0;}
#information ul li {list-style: none; font-size:14px; font-size:1.4rem; margin-bottom: 5px;}
#information ul li a{text-decoration: underline; font-weight:600;}
#information ul li span{ display: block;  font-size:12px; font-size:1.2rem;}
#bottom{margin:0 0 30px 0; text-align:left; padding:16px;}
#bottom h2{margin:16px 0;}
#bottom p{margin-bottom:16px;}
 
#banner{text-align: center; padding:0 16px;}
#banner a{display:block; margin-bottom:16px;}

.smp{background: #72b643; padding: 10px 10px; color: #fff;}
.smp a{color: #fff; text-decoration: underline;}
.smp a:hover{color: #eee; text-decoration: underline;}

@media screen and (min-width :640px){
#banner a{display:inline-block; width:49%;}

#feature #boxset{max-width:1025px; margin:0 auto;}
#feature #boxset .columns{box-sizing:border-box; width:33.3333%; float:left; padding:0 0.9375rem;}
#links{padding: 0 0 30px 0;}
#links a{display:inline-block; max-width: 48%;}
}

@media screen and (min-width:800px){
#information{max-width:1024px; margin:0 auto; margin-top:10px; text-align:left;}
#information ul{padding-left:20px;}
}

@media screen and (min-width : 950px) {
#feature #featurebox p{ font-size: 20px; text-align: center; font-weight: normal;}
#feature #featurebox .pc{display: inherit;}
#feature .info{height: 210px;}
#banner{max-width:1025px; margin:0 auto;}
#links img{border: 1px solid #999; margin: 5px; max-width: 470px; height: auto; width /***/:auto;}
map.pc{display: inherit;}
}
@media screen and (min-width : 1025px) {
#feature #featurebox{text-align: left; color: #604c3f; width: 950px; margin: 0 auto; margin-top: 20px; font-weight: 600; font-size: 15px;}
#middlebox{max-width:1025px; margin:0 auto;}
#information{width:58.33333%; float:left; text-align:left; padding:10px 0;}
#information:before,#information:after{box-sizing:inherit;}
#information h2{text-align:left; padding-left:20px;}

#banner{margin-top: 20px; float:right; width:38.66667%; padding:0 0.9375rem;}
#banner:before,#banner:after{box-sizing:inherit;}
#banner a{display:block; width:100%;}
#banner a img{width:100%;}
#bottom{width:1025px; margin: 0 auto; margin-top: 50px;}
table.price02{width: 48%; text-align: center; color: #666; float: left; margin-right: 10px;}
}

.error{margin-top:30px; padding-top:30px; padding-bottom:400px; border-top:4px solid #604c3f;}
.error h2{font-size:28px; font-size:2.8rem; font-family: 'Montserrat', sans-serif; font-weight:300;}
.error .btn a{display:inline-block; margin-top:30px; border:1px solid #604c3f; width:80%; padding:8px 0; text-decoration:none;}
.error .btn a:hover{background:#604c3f; color:#fff;}