@charset "utf-8";

/*------------------------------------------------------------------
	top.css
------------------------------------------------------------------*/
@media screen and (min-width: 641px){
.film_roll_wrapper img{ opacity:0.5; }
#slider{
	margin-bottom: 22px;
	height: 431px;
}
.film_roll_wrapper .active img{ opacity:1.0}


/*バナーエリア*/
ul.top_service {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.bnr_after{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 20px;

}
#bnr_blk{
	background: url(../common/img/conts_bg.png);
	padding-top: 30px;
	padding-bottom: 30px;
	text-align:center;
}

#bnr_blk section{width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-bottom: 0px;}
#bnr_blk ul li{     width: 270px;
    margin: 20px 10px;
    padding: 20px;
position:relative;
box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px;
-webkit-box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px;
-moz-box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px; 
background:#FFF;}
#bnr_blk ul li img{ width:100%; height:auto; margin:10px 0;}
#bnr_blk ul li h3{ color:#FFF; font-size:18px; line-height:30px; font-weight:300;}
#bnr_blk ul li p{ font-size:14px; text-align:left; line-height:18px; padding-bottom: 20px;}
#bnr_blk ul li span{
	color: #FFF;
    font-size: 14px;
    padding: 5px 20px 5px 10px;
    font-weight: 500;
    display: inline-block;
}

#bnr_blk section ul li:hover{ background:#fffcd5;}
#bnr_blk section ul li a{ display:block; position:absolute;
    width:100%;
    height:100%;}
#bnr_blk ul li.gakudo h3{ background:#f4802b;}
#bnr_blk ul li.afterschool h3 {background: #4493cf;}
#bnr_blk ul li.afterschool span{background: #4493cf url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.gakudo p{padding-bottom: 18px;}
#bnr_blk ul li.gakudo span{background: #f4802b url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.azukari h3{ background:#ec789b;}
#bnr_blk ul li.azukari span{background: #ec789b url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.preschool h3{ background:#5ec83a;}
#bnr_blk ul li.preschool span{background: #5ec83a url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.houmon h3{ background:#e60012;}
#bnr_blk ul li.houmon span{background: #e60012 url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.piano h3{ background:#1eb0d5;}
#bnr_blk ul li.piano span{background: #1eb0d5 url(../img/top/bnr_arw.png) no-repeat right;}
small {font-size: 15px;}
}

@media screen and (max-width: 640px){

#slider{ background:#000; margin-bottom:10px; height: 180px; width:100%; overflow:hidden;}
#slider img{ width: auto; height:180px;}

/*バナーエリア*/
#bnr_blk{
	background: url(../common/img/conts_bg.png);
	padding-top: 30px;
	padding-bottom: 20px;
	text-align:center;
}
.bnr_afterschool_sp{
	width: 96%;
	margin: 0 auto 10px;
	display: block;
}

#bnr_blk section{width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-bottom: 0px;}
#bnr_blk ul li{ float:left; width:42%; margin:3% 2%; padding:2%;
position:relative;
box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px;
-webkit-box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px;
-moz-box-shadow:rgba(102, 102, 102, 0.2) 0px 0px 5px 0px; background:#FFF;}
#bnr_blk ul li img{ width:100%; height:auto; margin:10px 0;}
#bnr_blk ul li h3{ color: #FFF;font-size: 15px; line-height: 20px;font-weight: 300;padding: 5px 0;}
#bnr_blk ul li p{ font-size:14px; text-align:left; line-height:18px;margin-bottom: 10px;}
#bnr_blk ul li span{
	color: #FFF;
	font-size: 11px;
	padding: 3px 14px 3px 5px;
	font-weight: 500;
	display: inline-block;
}

#bnr_blk section ul li:hover{ background:#fffcd5;}
#bnr_blk section ul li a{ display:block; position:absolute;
    width:100%;
    height:100%;}
#bnr_blk ul li.gakudo h3{ background:#f4802b;}
#bnr_blk ul li.gakudo span{background: #f4802b url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.afterschool h3{ background:#4493cf;}
#bnr_blk ul li.afterschool span{background: #4493cf url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.azukari h3{ background:#ec789b;}
#bnr_blk ul li.azukari span{background: #ec789b url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.preschool h3{ background:#5ec83a;}
#bnr_blk ul li.preschool span{background: #5ec83a url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.houmon h3{ background:#e60012;}
#bnr_blk ul li.houmon span{background: #e60012 url(../img/top/bnr_arw.png) no-repeat right;}
#bnr_blk ul li.piano h3{ background:#1eb0d5;}
#bnr_blk ul li.piano span{background: #1eb0d5 url(../img/top/bnr_arw.png) no-repeat right;}	
small {font-size: 13px;}
}

.scllBOX{
	height: 150px;
	padding: 0.5em;
	overflow: auto;
}
.memBG Ul{
	width: 98%;
	margin-left: 0px;
	margin-top: 1px;
}

.memBG li{
	padding: 10px 5px 10px 0px;
	border-bottom: dotted 1px #333333;
	color: #4a8d8a;
	font-size:13px;
	font-weight:300;
	text-align:left;
}
.insta{
	margin: auto;
	width: 90%;
	height: 470px;
}
.googleMap{
	margin: 50px 0;
}
.googleMap h3{
	font-size: 16px;
    font-weight: 700;
    color: #000;
    padding-bottom: 5px;
    padding-left: 5px;
    border-bottom: solid 3px #f19149;
    margin-bottom: 10px;
	width: 960px;
}


/* googleマップ　レスポンシブ対応
(640px以下のディスプレイで見た場合のスタイル) */
@media screen and (max-width: 640px) {
.googleMap iframe{
	width: 90%;
}
.googleMap h3{
	width: 100%;
}

}


/* IE10（\9なしでIE11にも適用） */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#bnr_blk ul li h3:not(:target) {
  color:#FFF; font-size:18px; padding-top:7px; font-weight:300;
	}
	#bnr_blk ul li span:not(:target) {
	color: #FFF;
	font-size: 11px;
	padding: 8px 14px 3px 5px;
	font-weight: 500;
	display: inline-block;
}
}