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

/* 初期化 */



*{
	margin:0;
	padding:0;
	list-style:none;
	outline:none;
	line-height:1.6;
	color:#555;
	font-size:12px;
	letter-spacing:0.5px;
	font-family: Verdana,"ヒラギノ角ゴ Pro W4","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック",Osaka,sans-serif;
}

html{background-color:#fbfbfb;}

body {
  -webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4,h5,p,dl,dt,dd,div,a,span,strong,ul,li{
	margin:0;
	padding:0;
	list-style:none;
	outline:none;
	line-height:1.6;
	color:#555;
	font-size:12px;
	font-family: Verdana,"ヒラギノ角ゴ Pro W4","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック",Osaka,sans-serif;
}

/* clearfix設定----------------- */
.clearfix{
    zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

a{
text-decoration:none;
}

a:hover{
text-decoration: underline;
}

img{
border:none;
-ms-interpolation-mode: bicubic;
}


/* --------------------------------------
   header
-------------------------------------- */


#wrapper{
	width:100%;
	background:url(../img/bg_body2.png) top repeat-x;
}

#subwrapper{
	width:100%;
	background:url(../img/bg_body3.png) top repeat-x;
}

#header{
	width:1100px;
	margin:0 auto;
	background:url(../img/mainimage3.png) no-repeat left top;
	min-height:690px;
	_height:690px;
}

#subheader{
	width:1100px;
	margin:0 auto;
	background:url(../img/mainimage4.png) no-repeat left top;
	min-height:190px;
	_height:190px;
}

#textarea{
	width:510px;
	margin:325px 0 0 30px;
	padding-bottom:35px;
	color:#fff;
	font-size:100%;
}


#wrapper h1{text-indent:-9999px;}

#logo{background:url(../img/logo.jpg) no-repeat left top;
width:90px;
height:125px;
text-indent:-9999px;
margin-left:29px;
}

#logo_sma{background:url(../img/logo_sma02.png) no-repeat left top;
width:355px;
height:125px;
text-indent:-9999px;
margin-left:20px;
display:none;
box-sizing:border-box;
}

#logo_sub{
display:block;
width:355px;
height:125px;
text-indent:-9999px;
margin-left:20px;
box-sizing:border-box;
margin-bottom:5px;
}

#logo_sub a{
	display:block;
	background:url(../img/logo_sma02.png) no-repeat left top;
	width:355px;
height:125px;}

#conbtn{
	width:92%;
	margin:0 auto;
	}


#conbtn li{
	display:inline-block;
	padding:0 5px;
	background-color:#930017;
	position:relative;
	}

#conbtn li a{
	color:#FBFBFB;
	font-size:15px;
	display:inline-block;
	text-decoration:none;
	font-family:Trebuchet MS,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	box-sizing: border-box;
	padding-bottom:5px;
	}

#conbtn li a img{
	vertical-align:middle;
	padding-right:5px;
	}

#conbtn li a:before {
	content:'';
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 0px;
	height: 2px;
	background: #fff;
	border-radius: 5px;
	transition: all 0.3s ease;}

#conbtn li:hover a:before {
	width: 100%;
}

/*
#btn01 a{
	width:188px;
	margin-right:15px;
	}
	
#btn02 a{
	width:176px;
	background-position:-188px top !important;
	margin-right:15px;
	}
	
#btn03 a{
	width:171px;
	background-position:-364px top !important;
	margin-right:15px;
	}
	
#btn04 a{
	width:139px;
	background-position:-535px top !important;
	margin-right:15px;
	}
	
#btn05 a{
	width:113px;
	background-position:-674px top !important;
	margin-right:15px;
	}

#btn01 a:hover{
	background-position:left bottom;}
	
#btn02 a:hover{
	background-position:-188px bottom !important;}
	
#btn03 a:hover{
	background-position:-364px bottom !important;}
	
#btn04 a:hover{
	background-position:-535px bottom !important;}

#btn05 a:hover{
	background-position:-674px bottom !important;}

*/

#mainContent h2{
	text-indent:-9999px;
	height:45px;
	width:330px;
	margin:0 0 20px 30px;}


#gallery{
	float:right;
	margin:0 40px 0 0;
	width:500px;
	height:300px;}


/* --------------------------------------
   共通
-------------------------------------- */

#classhead h3,#about_school h3,#contact h3,#event h3{
	height:28px;
	margin:5px 0 12px;
	text-indent:-9999px;}

#classhead h3,#about_school h3,#contact h3{width:278px;}
#event h3{width:195px;}

#subtitle_con01{background:url(../img/classhead_con01.png) no-repeat left top;}
#subtitle_con02{background:url(../img/classhead_con02.png) no-repeat left top;}
#subtitle_con03{background:url(../img/classhead_con03.png) no-repeat left top;}
#subtitle_con04{background:url(../img/classhead_con04.png) no-repeat left top;}

#subtitle_con05{background:url(../img/about_school_con01.png) no-repeat left top;}
#subtitle_con06{background:url(../img/about_school_con02.png) no-repeat left top;}
#subtitle_con07{background:url(../img/about_school_con03.png) no-repeat left top;}
#subtitle_con08{background:url(../img/about_school_con04.png) no-repeat left top;}
#subtitle_con09{background:url(../img/about_school_con05.png) no-repeat left top;}
#subtitle_con10{background:url(../img/about_school_con06.png) no-repeat left top;}
#subtitle_con11{background:url(../img/about_school_con07.png) no-repeat left top;}
#subtitle_con12{background:url(../img/about_school_con08.png) no-repeat left top;}
#subtitle_con13{background:url(../img/about_school_con09.png) no-repeat left top;}
#subtitle_con14{background:url(../img/about_school_con10.png) no-repeat left top;}
#subtitle_con15{background:url(../img/about_school_con11.png) no-repeat left top;}
#subtitle_con16{background:url(../img/about_school_con12.png) no-repeat left top;}
#subtitle_con34{background:url(../img/about_school_con13.png) no-repeat left top;}
#subtitle_con35{background:url(../img/about_school_con14.png) no-repeat left top;}
#subtitle_con36{background:url(../img/about_school_con15.png) no-repeat left top;}
#subtitle_con37{background:url(../img/about_school_con16.png) no-repeat left top;}
#subtitle_con38{background:url(../img/about_school_con17.png) no-repeat left top;}
#subtitle_con39{background:url(../img/about_school_con18.png) no-repeat left top;}
#subtitle_con40{background:url(../img/about_school_con19.png) no-repeat left top;}

#subtitle_con17{background:url(../img/event_con01.png) no-repeat left top;}
#subtitle_con18{background:url(../img/event_con02.png) no-repeat left top;}
#subtitle_con19{background:url(../img/event_con03.png) no-repeat left top;}
#subtitle_con20{background:url(../img/event_con04.png) no-repeat left top;}
#subtitle_con21{background:url(../img/event_con05.png) no-repeat left top;}
#subtitle_con22{background:url(../img/event_con06.png) no-repeat left top;}
#subtitle_con23{background:url(../img/event_con07.png) no-repeat left top;}
#subtitle_con24{background:url(../img/event_con08.png) no-repeat left top;}
#subtitle_con25{background:url(../img/event_con09.png) no-repeat left top;}
#subtitle_con26{background:url(../img/event_con10.png) no-repeat left top;}
#subtitle_con27{background:url(../img/event_con11.png) no-repeat left top;}
#subtitle_con28{background:url(../img/event_con12.png) no-repeat left top;}
#subtitle_con29{background:url(../img/event_con13.png) no-repeat left top;}
#subtitle_con30{background:url(../img/event_con14.png) no-repeat left top;}
#subtitle_con31{background:url(../img/event_con15.png) no-repeat left top;}
#subtitle_con32{background:url(../img/event_con16.png) no-repeat left top;}
#subtitle_con33{background:url(../img/event_con17.png) no-repeat left top;}

/* --------------------------------------
   mainContent
-------------------------------------- */

#mainContent,#subContent{
	width:1100px;
	margin:35px auto 20px;
	clear:both;
}

#mainContent li{
	display:inline;
	float:left;
	}

#classhead li,#about_school li{
	width:470px;
	margin:0 40px 55px;
	}

#event li{
	width:195px;
	min-height:400px;
	margin:0 40px 55px;
	}

/* --------------------------------------
   Mush Roomの授業
-------------------------------------- */
#classhead{
	padding:50px 0 40px;}

#classhead h2{
	background:url(../img/title_con01.png) no-repeat left top;}

#classhead p{
	margin-top:10px;
	padding:0 3px;}

.longbox{
	background:url(../img/bar.png) no-repeat left bottom;
	height:730px;
	}
	

/* --------------------------------------
   プリスクールTime
-------------------------------------- */

#about_school_time{
	padding-top:50px;}

#about_school_time h2{
	background:url(../img/title_con05.png) no-repeat left top;}

#about_school_time p{
	text-indent:-9999px;
	height:1270px;
	background:url(../img/time3.png) no-repeat left top;}


/* --------------------------------------
   イベント動画
-------------------------------------- */

#about_movie{
	padding-top:50px;
    padding-bottom: 50px;
}

#about_movie h2{
	background:url(../img/title_con07.png) no-repeat left top;}

.movieBox{
    margin-left:15px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
}

.movie-wrap {
    padding-left: 10px;
    padding-right: 10px;
}
 
.movie-wrap iframe {
   width: 500px;
}

#about_movie p{
    padding: 10px 40px 20px;
}

.linkBtn{
    margin-top: 30px;
}

.linkBtn a{
    display: block;
    color: #fff;
    padding: 20px;
    width: 25%;
    margin: auto;
    text-align: center;
    background-color: #A50319;
    text-decoration: none;
    font-size:120%;
}

.linkBtn a:hover{
    background-color: #C32238;
}


/* --------------------------------------
   プリスクールでは
-------------------------------------- */

#about_school{
	padding-top:50px;}

#about_school h2{
	background:url(../img/title_con02.png) no-repeat left top;}

#about_school{
	clear:both;}

#about_school li{
	height:330px;
	background:url(../img/bar.png) no-repeat left bottom;
	}
	
.this{
	background:none !important;
	margin:0 40px 0 !important;}

#about_school li p{
	float:left;
	width:250px;}
	
#about_school li img{
	margin-left:25px;
	}


/* --------------------------------------
   年間イベント
-------------------------------------- */

#event{
	padding-top:50px;
	margin-top:40px;}

#event h2{
	background:url(../img/title_con04.png) no-repeat left top;}

#event p{
	margin:10px 0 0 0;}


/* --------------------------------------
   お問合せ
-------------------------------------- */

#contact{
	padding:50px 0 50px;
	}

#contact h2{
	background:url(../img/title_con03.png) no-repeat left top;}

#contact .infoBox{
	padding:5px 0 0 40px;
}

#tel{
	padding-top: 5px;
	padding-left: 5px;
	font-size:40px;
	/*height:35px;
	text-indent:-9999px;
	background:url(../img/tel.png) no-repeat left top;*/
	}

#tel span{
	width: 35px;
	display: inline-block;
	padding-right: 3px;
	vertical-align: -3%;
}

#comment{
	margin:0 0 50px 4px;}

address{
	font-style:normal;
	font-size:14px;}

#contact h3{
	background:url(../img/contact_con01.png) no-repeat left top;
	margin-bottom:15px;}

#contact a{
	color:#936535;
	}

#contact span{
	display:inline-block;
	margin-top:5px;}

.mapBox div{
	float:left;
	padding-bottom:25px;
	}

.mapBox div h4{
	font-size:20px;
	font-weight:normal;
}

.last{
	padding-left:70px;
	margin-bottom:50px;
	}

.mapBox span{
	color:#A50319;
	font-size:14px;}

/* --------------------------------------
   footer
-------------------------------------- */

#page_top{
	display:inline;
	float:right;
	}

#page_top a{
	width:114px;
	height:28px;
	display:block;
	background:url(../img/topbtn.png) no-repeat left top;
	text-indent:-9999px;
	}

#page_top a:hover{
	background-position:bottom;}


#ft_wrapper{
	width:100%;
	background-color:#A50319;
	height:50px;
	clear:both;
}

#footer{
	width:1100px;
	margin:0 auto;
	
	}

#footer p,#footer p a{
	color:#fbfbfb;
	font-size:11px;}

#copy{
	padding-top:9px;
	}

#co_name{
	padding-left:5px;
	border-left:5px solid #ccc;
	margin-left:4px;}

#tel{
	margin-bottom:5px;}

.o_lesson{
	display:inline-block;
	vertical-align:top;
	margin-bottom:20px;
	}

.o_lesson h4{
	font-size:20px;
	font-weight:normal;
	padding-left:10px;
	border-left:5px solid #ccc;
	margin-bottom:5px;
	}

.o_lesson dl{
	width:250px;}

.o_lesson p{
	}

.o_lesson dt{
	float:left;}

.o_lesson dd{
	margin-left:38px;}

#o_lesson_contact a{
	display:block;
	border:4px solid #E7E7E7;
	margin-bottom:60px;
	text-align:center;
	padding:13px 0;}

#o_lesson_contact a:hover{
	background-color:#F5F5F5;
	text-decoration:none;}

/* --------------------------------------
   galleryページ
-------------------------------------- */


/* IE */
@font-face {
	font-family: iconfont;
	src: url(CONDENSEicon.eot);
}
/* Firefox, Opera, Safari */
@font-face {
	font-family: iconfont;
	src: url(CONDENSEicon.otf) format("truetype");
	src: url(CONDENSEicon.otf) format("OpenType");
}

.icon {
	font-family: iconfont;
	font-weight: normal;
}

.icon:before {
	content: "í";
}


#subContent h1{
	font-family: 'Lora', serif;
	font-size:24px;
	font-weight:normal;
	}

#galleryImage{
	width:100%;
	margin:20px auto;
	text-align:center;}

#subContent{
	width:1100px;
	padding:0 3%;
	box-sizing:border-box;
	}

#subContent>div{
	margin-bottom:20px;}

#subContent>div:nth-child(2),#subContent>div:last-of-type{
	margin-bottom:80px;}

#dawnloadBox .schoolBox{
	width:33%;
	display:inline-block;
	vertical-align:top;
	}

.sub_school{
	margin-bottom:40px;}

.all_school{
	margin-bottom:70px;
}

.schoolBox h3{
	font-size:18px;}

.dataBox li{
	padding:13px 0;}

.dataBox a{
	border:solid 2px #39F;
	color:#39F;
	padding:10px 15px;
	line-height:1;
	border-radius:12px;
	-webkit-transition: background-color 1s linear, color 0.3s linear;
	-moz-transition: background-color 1s linear, color 0.3s linear;
	transition: background-color 1s linear, color 0.3s linear;
	text-decoration:none;
	font-weight:500;
	display:inline-block;
	}

.dataBox a:hover{
	background-color:#39F;
	color:#fff;}

.dataBox span{
	display:inline-block;
	margin-right:10px;
	margin-bottom:5px;
	font-size:120%;
	}

.dataBox span.hitoketa{
	margin-right:20px;
	}

.dataBox span:before{
	content:"";
	background:url(../img/dot.gif) no-repeat left center;
	padding-left:10px;}

#cautionBox,#manualBox{
	width:70%;
	background:url(../img/back_pattern01.gif) repeat;
	padding:6px;
	margin:0 auto;}

#cautionBox div,#manualBox div{
	background-color:#fbfbfb;
	padding:20px;
	}

#cautionBox h2{
	font-size:16px;
	margin-bottom:10px;}

#cautionBox  p{
	margin-bottom:10px;}

#cautionBox h3{
	padding-top:10px;}

#manualBox div ul{
	margin-bottom:25px;}

#manualBox div ul:last-of-type{
	margin-bottom:0px;}

#manualBox div ul li{
	margin-bottom:5px;}

#manualBox div>p{
	margin-bottom:5px;}

#manualBox div ul li p{
	padding-left:12px;}

.more{
	border:4px solid #EAEAEA;
	color:#A5A5A5;
	cursor:pointer;
	padding:10px;
	margin-top:20px;
	text-align:center;
	width:80%;
	-webkit-transition: background-color 0.7s linear, color 0.3s linear;
	-moz-transition: background-color 0.7s linear, color 0.3s linear;
	transition: background-color 0.7s linear, color 0.3s linear;}

.more:hover{
	background-color:#EFEFEF;}


#cautionBox h3,#manualBox h3{
	font-size:115%;
	margin-bottom:10px;
	padding-bottom:7px;
	border-bottom:1px dotted #ccc;}

#manualBox a{color:#39F;}


/* --------------------------------------
   Recruitmentページ
-------------------------------------- */

#recruitBox{
	padding-right:20%;}

#recruitBox h2{
	margin-top:20px;}

#recruitBox h3{
	margin-top:20px;
	margin-bottom:5px;}

table.r_waku{
	border-collapse:separate;
	width:100%;
	margin:30px 0 80px;
	background:url(../img/recruit_back.gif) repeat left top;
	
}

table.r_waku th{
	width:25%;
	
	text-align:center;
	vertical-align:middle;
	font-weight:normal;
	line-height:1.5;
	background-color:#fff;
	padding:0 15px 0 15px;
}

table.r_waku td{
	padding:15px 15px 15px 20px;
	background-color:#fff;
}

table.r_waku span{
	font-size:21px;
	font-weight:bold;
	}

table.r_waku a{color:#39F;}

#mailRequired{
	width:60%;
	margin:10px 0 50px;
	padding:5px;
	background:url(../img/recruit_back.gif) repeat left top;}

#mailRequired div{
	padding:20px;
	background-color:#fff;}

#mailRequired div p{
	margin:0 0 5px 0;}
#mailRequired ul{
	}

#mailRequired li{
	font-family: verdana, 'trebuchet ms', sans-serif;
	display:inline-block;
	}
	

/*-----------------------------------------------------	*/
/*	for - 979px					*/
/*-----------------------------------------------------	*/

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



/*-----------------------------------------------------	*/
/*	for - 767px					*/
/*-----------------------------------------------------	*/

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

/*-----------------------------------------------------	*/
/*	for - 479px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 479px) {
	
	#logo{
		display:none;
	}

	#logo_sma{
	display:block;
	}
	
	#logo_sub{
		z-index:1000;}
		
	#header{
		width:100%;}
		
	#gallery{
	float:none;
	width:90%;
	margin:0 auto;
	}
	
	#gallery img{
		width:100%;}
	
	#wrapper #conbtn{
		width:100%;
		padding-bottom:50px !important;
		margin-top:-5%;
		}
	
	#subwrapper{
		background:url(../img/mainimage_sma02.png) no-repeat center top;
		}
		
	#subwrapper #conbtn{
		width:100%;
		margin-top:30px;
		}
		
	#conbtn li{
		display:block;
		padding:0;
		}
	
	#conbtn li a{
		width:100%;
		padding:5px 20px;}
	
	#conbtn li:last-child a{
		padding-bottom:10px;}
	
	#textarea{
		margin:0 auto;
		margin-top:-20%;
		width:90%;
		font-size:88%;	
	}

	#textBox{
		background:url(../img/mainimage_sma.png) no-repeat center bottom;
		background-size:cover;
		width:100%;
		}
	
	#wrapper,#subwrapper{
		width:100%;
		background:cover;
		}
	#header,#subheader{
		width:100%;
		background:none;}
	
	
	#mainContent h2{
		background-size:cover;
		margin:0 0 20px 0;}
	
	#mainContent{
		width:90%;
		margin:0 auto 20px;
		}
	#subContent{
		width:90%;
		margin:35px auto 20px;
		padding:0;
		}
	
	#mainContent li{
		float:none;
	}

	
	#galleryImage img{
		width:100%;
	}
	
	#recruitBox{
	padding-right:0;}
	
	#mailRequired{
	width:91%;
	}
	
	
	
	#classhead img{
		width:100%;}
	
	#classhead li p{
		margin-bottom:20px;}
		
	#about_school_time{
		width:100%;
		}
	
	#about_school_time p{
		background-size:130%;
		margin-left:-8%;
		margin-bottom:-700px;}
	
	#about_school li p{
		float:none;
		width:100%;}
	
	#about_school li,#classhead li{
		background:none;
		width:100%;
	}
	
	#about_school li img{
		margin:10px 0 20px;}
		
	#event h3{
		margin-top:20px;}
	
	.mapBox{
		width:100%;}
	
	.mapBox div{
	float:none;
	}
	
	.mapBox div img{
		width:100%;}
	
	#contact .infoBox{
	padding:5px 0 0 0;}
	
	.last{padding-left:0;
	margin-bottom:0;}
	
	#dawnloadBox .schoolBox{
		width:90%;
		display:block;
	}
	
	#cautionBox,#manualBox{
		width:95%;
		}
	
	#cautionBox div,#manualBox div{
	padding:20px;
	}
	
	.o_lesson p{
	width:100%;}
	
	#footer{
	width:100%;
	margin:0 auto;
	
	}
	
	#copy{
	padding-top:9px;
	padding-left:5%;
	}
	
	.all_school{
	margin-bottom:0px !important;
	}
	
	.as_box{
	margin-bottom:70px !important;
	}
	
	#tel{
	font-size: 33px;
	}
	
	#tel span{
	width: 25px;
	display: inline-block;
	padding-right: 3px;
	vertical-align: -5%;
}
    
    #about_movie{
	    padding-top:20px;
        padding-bottom: 30px;
    }
    
    .movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
    .movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
    }
    
    .movieBox{
        display: block;
        margin-left:0px;
        margin-right: 0px;
    }
    
    .movieBox div{
        margin-bottom: 25px;
    }
    
    #about_movie p{
        padding: 10px 0px 20px;
    }

    .linkBtn{
        margin-top: 30px;
    }

    .linkBtn a{
        width: 70%;
    }

	
	
	
	
	}