@charset "UTF-8";
/* CSS Document */

/*==================================
　トップページ
==================================*/
@media(max-width:960px) {
.container {
    width:100%;
}
}
/*== キービジュアル =======================*/
.flickView ul li a:hover img {-moz-opacity:1; opacity:1; filter: alpha(opacity=100); background:none;}
/* スライドショー ============================================================= */
.flickSlider {margin: 0 auto 50px auto; text-align: center; /*display: none;*/ position: relative;}
/*.flickSlider {margin: 0 auto 100px auto; text-align: center; /*display: none;*/ /* position: relative;}*/
.flickSlider .flickView {width: 100%; text-align: left; position: relative; overflow: hidden;}
.flickSlider .flickView ul {top: 0; left: 0; width: 100%; position: absolute; overflow: hidden;}
.flickSlider .flickView ul li {width: 100%; float: left; display: inline; overflow: hidden;}
.flickSlider .flickView ul li img {width: 100%;}

/*サムネイル（文字）*/
.flickSlider .flickThumb {
    overflow: hidden;
    position:absolute;
    padding: 1em 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: inline-block;
}

.flickSlider .flickThumb ul {width: 100%; text-align: center;}

.flickSlider .flickThumb ul li {float:left; text-indent:-9999px; overflow:hidden; background:url(../images/top/dot.png) no-repeat left top; background-size:100%; margin-right:20px; width:16px !important; height:auto; padding-bottom:1em; display: inline-block;}
.flickSlider .flickThumb ul li.active {filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; background:url(../images/top/dot_o.png) no-repeat left top; background-size:100%;}
.flickSlider .flickThumb ul li:last-child {margin-right: 0;}

@media(max-width:480px) {
/*-- flickSliderサムネイルありの時 --*/
.flickSlider {margin: 0 auto 50px auto;}
/*-- flickSliderサムネイルなしの時 --*/
/*.flickSlider {margin: 0 auto 20px auto;}*/

.flickSlider .flickView ul li img {width: 100%;}
.flickSlider .flickThumb {margin-left: 2%; width:96%;}
.flickSlider .flickThumb ul li {width:14px !important; margin-right:14px;}
}


/* 全体の調整 ============================================================= */
* {
	  -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	      box-sizing: border-box;
}
@media screen and (max-width: 1800px) {
html  {font-size : 90.0%;}
}
@media screen and (max-width: 1510px) {
html  {font-size : 90.0%;}
}
@media screen and (max-width: 1250px) {
html {font-size : 100.0%;}
}
@media screen and (max-width: 1000px) {
html {font-size : 100.0%;}
}
@media screen and (max-width: 980px) {
html {font-size : 90.0%;}
}
@media screen and (max-width: 880px) {
html {font-size : 80.0%;}
}
@media screen and (max-width: 768px) {
html {font-size : 80.0%;}
}
@media screen and (max-width: 740px) {
html {font-size : 80.0%;}
}

.info {
    background: #F2EFE8;
    text-align: center;
    padding: 30px 0 50px 0;
    margin-bottom: 100px;
}

.info .inner {
    background: #FFF;
    max-width: 960px;
    margin: 0 auto;
    padding:10px 30px 30px 30px;
}
.info .ttl {
    background: url(../images/top/bg_img01.png) repeat-x left center;
    max-width: 960px;
    margin: 0 auto;
}
.info .ttl h2 {
    background: #F2EFE8;
    padding: 2% 8%;
    display: inline-block;
    margin: 0 auto;
    color: #00807C;
    font-size: 24px;
}

.info .box {
    border-bottom: dashed 1px #AAAAAA;
    padding:15px 0;
}
.info dl {float: left; width:70%; padding-top:2px;}

.info dl dt {font-size:14px; line-height: 1.4; float:left; width:16%; text-align: left;}
.info dl dd {font-size:14px; line-height: 1.4; float:left; margin-left:0; width:80%; text-align: left;}
.info dl dd a {color:#3030FF; text-decoration: underline;}

.info ul {float: right; width:30%;}
.info ul li {font-size:14px; line-height: 1.4; color: #FFF; width:23%; float: left; background:#AFC9B1; padding:1% 2%; margin-right: 5px; white-space: nowrap;}

.info ul li:last-child {margin-right: 0;}
.info ul li.on {background:#78A77F;}

@media(max-width:820px) {
.info dl dt {width:18%;}
.info dl {width:68%;}
.info ul {width:32%;}
}

/* スライダー ============================================================= */
.slidebox {max-width: 100%; margin: 0 auto;
	/*background-color:#F2EFE8;*/}
#pickupslide {
	padding: 50px 0 20px 0;
	/*padding: 50px 0;
	margin-bottom: 4%;*/
}
.slick-slider {margin-bottom: 0 !important;}
.slick_items {width: 100%; max-width: 970px; margin: 0 auto;}
.slick_items a {display: block; padding: 0 1%;}
.slick_items img {width: 100%; max-width: 310px;display: block;}

#pickupslide .slick_items a.sp_only  {display: none;}

/* 終了イベント(2017/08/22追加) =========== */
.slick_items div.layer a {
	position:relative;
	display:block;}
.slick_items div.layer a::before{
	display: block;
	position: absolute;
	content: '';
	left:0;
	top:0;
	background:url(../images/top/top_bnr_text.png) no-repeat center rgba(0,0,0,.65);
	background-size:70%;
	width:100%;
	height:100%;
	max-width:310px;
	margin-right:2%;
	}

/* 終了イベントここまで=========== */

@media screen and (max-width: 768px) {
.slidebox {max-width: 768px; margin: 0 auto;}
#pickupslide {padding: 50px 0 30px;}
.slick_items {width: 94%; max-width: 768px;}
.slick_items a {padding: 0 1%;}
.slick_items img {max-width: 100%;}
}

@media screen and (max-width: 740px) {
#pickupslide {padding: 6% 5.5% 6%;}
.slick_items {width: 95%;}
#pickupslide .slick_items a.sp_only  {display: block;}
#pickupslide .slick_items a.pc_only  {display: none;}
}

/* トピックスバナー ============================================================= */
.topics_bnr {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 960px; margin: 0 auto;}
.topics_bnr:after {content:""; display: block; width:32%;}
.topics_bnr li {width: 32%; margin-bottom: 20px;}
.topics_bnr li img {width: 100%;}

/* ボタンボックス ============================================================= */
.top_grid_bg {background: #016860; position: relative; z-index: 1; margin-bottom: 50px; text-align: center;}
.top_grid_bg:before {content:""; background: url(../images/common/line_bg.png) repeat left top; position: absolute; display: block; width: 100%; height: 100%; z-index: 2;}
/*.top_grid_bg {padding: 50px 0; position: relative; background-size: auto auto;
background-color: rgba(1, 104, 96, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(255, 255, 255, 1) 10px, rgba(255, 255, 255, 1) 11px );}*/

.top_grid_bg .container {padding: 50px 0 30px 0;}
h2.top_grid {position: relative; line-height: 1.2; font-size: 28px; text-align: center; color: #FFF; font-weight: bold; z-index: 10!important; padding-left: 34px; display: inline-block; margin: 0 auto 30px auto;}
h2.top_grid:before {position: absolute; content:""; display: block; width: 32px; height: 32px; background: url(../images/common/uma_logo.png) no-repeat center center; top:0; left:0; background-size: contain;}
h3.top_grid {position: relative; line-height: 1.2; font-size: 18px; text-align: center; color: #FFF; font-weight: bold; z-index: 10!important; padding-left: 24px; display: inline-block;  margin: 0 auto 30px auto;}
h3.top_grid:before {position: absolute; content:""; display: block; width: 22px; height: 22px; background: url(../images/common/uma_logo.png) no-repeat center center; top:0; left:0; background-size: contain;}

.btn_box {
    width:32.4%;
    /*border: solid 1px #888;*/
    float: left;
    margin-right: 1.4%;
    margin-bottom: 20px;
    padding: 14px;
		background: #FFF;
		position: relative;
		z-index: 3;
}
.btn_box.right {
    margin-right: 0;
}

.btn_box img {
    width: 100%;
}
.btn_box dl {
    min-height: 124px;
}

.btn_box h3 {
    font-size: 1.4rem;
    text-align: center;
    color: #E79134;
    padding: 5px;
    line-height: 1.4;
    font-weight: bold;
    margin: 10px auto;
}

.btn_box dl dd {
    font-size: 12px;
    line-height: 1.4;
    color: #444;
    text-indent: -1em;
    padding-left: 1em;
}

.btn_box a {
    display: block;
    font-size: 12px;
    padding: 2%;
    text-align: center;
    color: #000;
    background: #D7D7D7;
		font-weight: bold;
		text-shadow: none;
}

/* 東進中学NET ============================================================= */
a.top_bnr_area {
    display: flex;
	 flex-wrap: wrap;
		align-items: center;
    border: solid 1px #888;
    padding: 1%;
		background: #FFF;
	 justify-content: space-between;
}
a.top_bnr_area.reverse {flex-flow: row-reverse;}
a.top_bnr_area dl dt {
    font-size: 21px;
    padding: 0 0 10px 10px;
    color: #00807C;
    border-bottom: dotted 1px #888;
    font-weight: bold;
    text-align: center;
}

a.top_bnr_area dl {width: 62%; padding: 2% 1% 2% 2%;}
a.top_bnr_area img {width: 38%;}

a.top_bnr_area dl dt .sp_br {
    font-weight: bold;
}

a.top_bnr_area dl dd {
    font-size: 100%;
    padding: 10px 0 0 10px;
    color: #444;
}

/* 合格体験記 ============================================================= */
.taikenki {
    background:#F2EFE8;
    text-align: center;
    padding: 20px 0 50px 0;
    margin: 100px 0 30px 0;
}
.taikenki .ttl {
    background: url(../images/top/bg_img01.png) repeat-x left center;
    max-width: 960px;
    margin: 10px auto;
}
.taikenki .ttl h2 {
    background: #F2EFE8;
    padding: 2% 8%;
    display: inline-block;
    margin: 0 auto;
    color: #00807C;
    font-size: 24px;
}

.taikenki dl {
    float:left;
    width:32.4%;
    margin-right: 1.4%;
    border: solid 3px #78A77F;
    background: #FFF url(../images/top/top_img07.jpg) no-repeat 10px center;
    background-size: 34%;
    padding: 12px 10px 12px 130px;
}

.taikenki dl.no3 {
    margin-right: 0;
    background-image: url(../images/top/top_img09.jpg);
}

.taikenki dl.no2 {
    background-image: url(../images/top/top_img08.jpg);
}

.taikenki dl dt {
    font-size: 130%;
    color: #78A77F;
    line-height: 1.4;
    border-bottom: dotted 1px #666;
    text-align: left;
    font-weight: bold;
    padding-bottom: 10px;
}

.taikenki dl dt .small {
    font-size: 16px;
    display: block;
    font-weight: bold;
}

.taikenki dl dd {
    font-size: 18px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    padding-top: 8px;
    font-weight: bold;
}

.taikenki dl:nth-child(even){
    border-color: #00807C;
}

.taikenki dl:nth-child(even) dt{
    color: #00807C;
}

.taikenki a.btn {
    background: #FFF;
    display: inline-block;
    margin: 0 auto;
    color: #00807C;
    padding: 10px 80px;
    font-size: 16px;
    text-align: center;
    margin-top: 40px;
}
/* 体験記　修正 ============================================================= */
.taikenki_bnr {display:flex; flex-wrap: wrap; justify-content: space-between;} 
.taikenki_bnr li {width: 32%;}
.taikenki_bnr li img {width: 100%;}

/* よくある質問 ============================================================= */

.quetion_top {
    text-align: center;
    margin-bottom: 70px;
}

.quetion_top .ttl {
    background: url(../images/top/bg_img01.png) repeat-x left center;
    max-width: 960px;
    margin: 0 auto;
}

.quetion_top .ttl h2 {
    background: #FFF;
    padding: 2% 8%;
    display: inline-block;
    margin: 0 auto;
    color: #00807C;
    font-size: 24px;
}

.quetion_top .inner {
    max-width:960px;
    margin: 20px auto;
}

.quetion_top a {
    display: block;
    color: #333;
}

.quetion_top ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 0;
    margin-bottom: 10px;
}

.quetion_top ul li {
    display: table-cell;
    vertical-align: middle;
    background: #00807C;
    width:46%;
    padding:2% 1%;
}

.quetion_top ul li:first-child{
margin-right:4%;
}

.quetion_top ul li .icon {
    font-size: 32px;
    width:60px;
    padding:2% 0;
    text-align: center;
    display: table-cell;
    background: #FFF;
    vertical-align: middle;
}

.quetion_top ul li .text{
    color: #FFF;
    font-weight: bold;
    width:400px;
    padding: 0 0 0 2%;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
}

.quetion_top ul li .text .pc_br {
    font-weight: bold;
}

@media(max-width:900px) {
.quetion_top ul li .pc_br {
    display: inline;
}
}

.quetion_top a.btn {
    background: #EDEDED;
    display: inline-block;
    margin: 0 auto;
    color: #00807C;
    padding: 10px 80px;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
}


.quetion_top a.top_bnr_area {
    display: flex;
		padding: 1%;
}
.quetion_top a.top_bnr_area dl {
	padding:2% 3% 2% 1%;
}
.quetion_top a.top_bnr_area dl dd {text-align: justify;}


/* 問い合わせボタン ============================================================= */
.top .btn_area {
    background: #EDEDED;
    padding: 60px 0;
    margin-bottom: 0;
}

/*.top .btn_area ul li {
    width:40%;
    margin: 0 auto;
    float: none;
}

.top .btn_area ul li a {
    font-size: 21px;
}

@media(max-width:930px) {
.top .btn_area ul li {
    width:60%;
    margin: 0 auto;
    float: none;
}

}*/

/* 校舎を探す ============================================================= */
#school1 img {width: 100%; margin-top: 30px;} 



	
/*======================================================================================================
　タブレット
==================================*/
@media(max-width:768px) {
.container {
    width: 96%;
    margin: 0 2%;
}

/*- お知らせ -*/
.info .inner {
    background: #FFF;
    width: 96%;
    margin: 0 2%;
    padding: 2%;
}

.info .ttl {
    width: 96%;
    margin: 0 2%;
}
.info dl {width:60%;}
.info dl dt {width:22%;}
.info dl dd {width:76%;}

.info {
    margin-bottom: 10%;
}


/*- ボタンボックス -*/
.btn_box {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 50px;
    padding: 10px;
}
.btn_box img {
    width: 100%;
}
.btn_box dl {
    min-height: 140px;
}

/*- 合格体験記 -*/
.taikenki .ttl {
    width: 96%;
    margin: 0 2%;
}
.taikenki dl {
    width: 33%;
    margin-right: 0.5%;
    padding: 12px 10px 12px 90px;
}

/*- よくあるご質問 -*/
.quetion_top .ttl {
    width: 96%;
    margin: 0 2%;
}
.quetion_top ul li {
    width:48.6%;
    font-size: 14px;
}
.quetion_top ul li .icon {
    width: 12%;
    font-size: 20px;
}

.quetion_top .inner {
    width: 96%;
    margin: 20px 2%;
}

/*- 問い合わせボタン -*/
/*.top .btn_area ul li {
    width:60%;
    margin: 0 auto;
    float: none;
}*/

}/*=========max768==============*/


/*======================================================================================================
　スマートフォン
==================================*/
@media(max-width:740px) {
 /*- お知らせ -*/
.info dl {float: none; width:96%; margin: 0 2% 2% 2%;}
.info dl dt {float:none; width:100%;}
.info dl dd {float:none; width:100%;}
.info ul {float: none; width:96%; margin: 0 2%;}
.info ul li {font-size:12px; width:24%; margin-right: 1%;}
.info .ttl {margin-bottom: 1%;}
.info .ttl h2 {
    font-size: 18px;
    font-weight: bold;
}


.topics_bnr li {width: 48%;}
/*- ボタンボックス -*/
.btn_box {
    width: 98%;
    margin: 0 1% 10% 1%;
}
.btn_box img {
    width: 100%;
    margin: 0;
}
.btn_box dl {
    min-height: 0;
    padding-bottom: 2%;
}
.btn_box a {
    padding: 4%;
}

/*- 東進中学NET -*/
a.chugaku {
    background: url(../images/top/top_img10.jpg) no-repeat 98% 10%;
    background-size: 29%;
    width: 98%;
    margin: 5% 1%;
}

a.chugaku dl dt {
    font-size: 18px;
    padding: 0 0 10px 0;
    width: 100%;
    text-align: left;
}

a.chugaku dl dd {
    font-size: 14px;
    padding-left: 0;
    width: 100%;
}

/*- 合格体験記 -*/
.taikenki {
    margin: 50px 0 30px 0;
}

.taikenki dl {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 3%;
    background-size: 18%;
    padding: 12px 10px 12px 120px;
}

.taikenki .ttl {
    margin-bottom: 1%;
}
.taikenki .ttl h2 {
    font-size: 18px;
    font-weight: bold;
}

/*- よくあるご質問 -*/
.quetion_top .ttl {
    width: 96%;
    margin: 0 2% 1% 2%;
}
.quetion_top .ttl h2 {
    font-size: 18px;
    font-weight: bold;
}
.quetion_top ul {
    display: block;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.quetion_top ul li a {
    width:98%;
    padding: 0 1%;
}

.quetion_top ul li {
    width:100%;
    display: block;
    font-size: 14px;
    margin-bottom: 2%;

}
.quetion_top ul li .icon {
    width: 40px;
    font-size: 20px;
}
.quetion_top ul li .text {
    width: auto;
}
.quetion_top ul li .pc_br {
    display: inline;
}

.quetion_top .inner {
    width: 96%;
    margin: 20px 2%;
}

/*- 問い合わせボタン -*/
.top .btn_area {
    display: block;
}

.top .btn_area ul {
    margin: 0 auto;
}
.top .btn_area ul li {
    width: 100%;
}
.top .btn_area ul li:first-child {
    margin-bottom: 20px;
}

.top .btn_area ul li a {
    font-size: 16px;
}
	.top_grid_bg .container {padding: 30px 1% 30px 1%;}
	h2.top_grid {font-size: 24px; padding-left: 26px;}
	h2.top_grid:before {width: 26px; height: 26px; left: 10%;}	
	h3.top_grid {padding-left: 14px;}
	h3.top_grid:before {width: 20px; height: 20px; top:0; /*left: 16%;*/}	
	
	a.top_bnr_area {display: block;}
	a.top_bnr_area dl {width: 100%; padding: 4% 2% 2% 2%;}
	a.top_bnr_area img {width: 100%;}
	
	#school1 img {margin-top: 0;}
	
	.taikenki_bnr {display:block;} 
	.taikenki_bnr li {width: 100%; margin-top: 10px;}

}/*=========max740==============*/


/*======================================================================================================
　スマートフォン縦
==================================*/
@media(max-width:480px) {
 /*- 東進中学NET -*/
a.chugaku {
    background-size: 36%;
}

/*- 合格体験記 -*/
.taikenki {
    margin: 50px 0 30px 0;
}
.taikenki dl {
    background-size: 31%;
}
.taikenki .ttl {
    margin-bottom: 1%;
}
.taikenki .ttl h2 {
    font-size: 18px;
    font-weight: bold;
}

}/*==================max480=======================*/

/* 台風等緊急告知（画像差替対応版）============================================================= */
.emergency_info {text-align:center; margin-top: 2%;}
img.emergency {width: 660px: margin: 0 auto;}

@media screen and (max-width: 740px) {
img.emergency.sp_only {display:block; margin:0 auto;}
img.emergency.pc_only {display:none; width:auto;}
}
@media screen and (max-width: 660px) {
 img.emergency {width: 100%;}
}
