@charset "utf-8";

body{
	border-top:0px;
  font-size:93%;
}
.for_pc {
	display:none;
}
.for_pc_td {
	display:none;
}
.for_sm {
	display:block;
}
.for_sm320 {
	display:none;
}

/*---------- width  ----------*/
.inner{
  margin:0;
  width: 100%;
}

.button_style1{
	width:250px;
}

/* -------------------------------------------------------------------------------------------- */
/* container                                                                                    */
/* -------------------------------------------------------------------------------------------- */
#container{
  min-width:320px;
	 border-top:0px;

  }

/* -------------------------------------------------------------------------------------------- */
/* header　（スマホ用）                                                                           */
/* -------------------------------------------------------------------------------------------- */
header{
	position:relative;
	top:0;
	left:0;
	z-index:20000;
	width:100%;
	height:72px;
  }

#header_sm{
	position:fixed;
	width:100%;
	height:72px;
	background-color:#fff;
	padding-top:3px;
	background-image:url(../image/header_sm_bg.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom:1px solid #E4DCCB;

}
#header_sm h1{
	padding-top:5px;
	font-size:80%;
	line-height:1;
  }

#header_sm_logo{
	margin-left:5px;
	width:53%;
	float:left;
}

#header_sm_contact{
	margin-left:45px;
	margin-top:2px;
	width:20%;
	float:left;
  }

@media screen and (max-width: 380px) {
	header{
		height:70px;
	  }

	#header_sm{
		height:70px;
	}
	#header_sm_contact{
		margin-left:40px;
	  }
}

@media screen and (max-width: 350px) {
	header{
		height:68px;
	  }

	#header_sm{
		height:68px;
	}
	#header_sm_contact{
		margin-left:30px;
	  }

	.for_sm320 {
		display:block;
	}
}

.menu_style1{
	font-size:140%;
	font-weight:normal;
}

.menu_style2{
	font-size:90%;
	color:#444;
	font-weight:normal;
}



/* ------------------------------- */
/* go to pagetop                   */
/* ------------------------------- */

#page-top { 
    bottom: 100px; 
    right: 20px; 
} 

 
/* -------------------------------------------------------------------------------------------- */
/* top page                                                                                     */
/* -------------------------------------------------------------------------------------------- */
#top_image {
	border-bottom:0px;
}

#top_message {
	margin:20px 10px 30px 10px;
	font-size:105%;
}

/* ------------------------------- */
.top_school {
	margin:0 1% 30px 3%;
	padding:0;
	width:44%;
}

.top_school_info{
	padding-top:15px;
	width:auto;		
	float:none;
	text-align:center;
}
.top_school_info h2{
	margin-bottom:0;
	font-size:130%;
}
.top_school_info p{
	margin-bottom:10px;
	font-size:90%;
}

.top_school_photo{
	width:auto;
	height:auto;
	float:none;
}

/* ------------------------------- */
.top_link_style {
	margin:0 auto 40px auto;
	padding:0;
	width:90%;
	float:none;
}


.top_link_message p{
	min-height:auto;
}

/* ------------------------------- */
.top_request_info {
	margin:0 auto;
	padding:0;
	width:95%;
	text-align:center;
	float:none;
}

.top_request_info h2{
	margin:0 0 5px 0;
	font-size:250%;
	font-weight:normal;
	line-height:1;
}
.top_request_info h3{
	margin:0 0 10px 0;
	font-size:100%;
	font-weight:normal;
}

.top_request_info .button_style1{
	margin:0 auto 40px auto;
}


#top_request_image {
	margin:0 auto 30px auto;
	padding:0;
	width:90%;
	float:none;
}

/* ------------------------------- */
#top_profile h2{
	margin:0 0 5px 0;
	font-size:250%;
	font-weight:normal;
	line-height:1;
	width:100%;
	text-align:center;
	float:none;
}
#top_profile h3{
	margin:0 0 10px 0;
	font-size:100%;
	font-weight:normal;
	width:100%;
	text-align:center;
	float:none;
}

#top_profile p{
	margin:0 auto 20px auto;
	font-size:100%;
	font-weight:normal;
	width:90%;
	text-align:left;
	float:none;
}

#top_profile .button_style1{
	margin:0 auto 40px auto;
}


/* ------------------------------- */

#blog_feed{
	margin:0 auto 40px auto;
	padding:2%;
	width:92%;
	height:180px;
}

#blog_feed dl{
	margin-left:0;
	}
#blog_feed dt{
	padding:2px 0px 2px 15px;
	font-size:90%;
	color:#888;
	background-position:0 6px;
	}
#blog_feed dd{
	margin:-1.5em 0 5px 6.8em;
	font-size:95%;
	}


/* -------------------------------------------------------------------------------------------- */
/* sub page                                                                                     */
/* -------------------------------------------------------------------------------------------- */

#sub_title{
	height:70px;
	background-image:url(../image/sub_title_sm_bg.jpg);
}

#sub_title h2{
	padding:20px 0 0 35px;
}
.title_style1{
	font-size:220%;
	font-weight:normal;
}
.title_style2{
	font-size:95%;
	font-weight:normal;
}
@media screen and (max-width: 350px) {
	#sub_title h2{
		padding:20px 0 0 25px;
	}
	.title_style1{
		font-size:200%;
		font-weight:normal;
	}
	.title_style2{
		font-size:90%;
		font-weight:normal;
	}
}



#sub_menu{
	margin:20px 0 20px 0;
}

#sub_menu ul{
	margin:0 0 0 10px;
}

#sub_menu li{
	margin:0 15px 10px 0;
	font-size:90%;
}
#sub_menu a{
	padding:10px 0px;
}

.long_title{
	width:11.5em;
}
.short_title{
	width:7.5em;
}
.short_title2{
	width:8.5em;
}
.short_title3{
	width:5em;
}


.image_right1{
	margin:0 0 10px 20px;
	width:40%;
	float:right;
}
.image_right2{
	margin:0 0 10px 20px;
	width:45%;
	float:right;
}
.image_right3{
	margin:0 0 10px 20px;
	width:35%;
	float:right;
}
.image_bottom{
	margin:0 auto 20px auto;
	width:85%;
}






/* ------------------------------- */

#sub_style section{
	margin:0 auto 60px auto;
	padding:30px 3% 10px 3%;
	width:90%
	
}

#sub_style h3{
	font-size:180%;
	line-height:1.4;
}
#sub_style h4{
	margin-bottom:5px;
	font-size:160%;
	line-height:1.4;	
}
#sub_style h5{
	margin-bottom:10px;
	font-size:110%;	
}

.sub_message{
	margin:20px 10px;
}


/* ------------------------------- */
#concept_for_parents{
	margin:30px 0;
	padding:10px 10px 0 10px;
	border:3px solid #FFE2E6;
	
}

/* ------------------------------- */

.lesson_style1{
	margin-bottom:40px;
	padding:10px;
	border:3px solid #DEF5E6;

	
}
.lesson_style1 li span{
	font-size:105%;
	
}

#lesson_piano_table{
	margin:0 auto 20px auto;
	width:auto;
	
}

#lesson_piano_table td{
	width:auto;
	padding:0 10px;
	vertical-align:top;
}
/* ------------------------------- */

#sub_message{
	margin:20px 10px;
}

/* ------------------------------- */

.access_style {
	width:100%;
	float:none
	
}

.access_style img{
	margin:20px 0 30px 0;
	width:80%;
	
	
}

.map {
	margin:0 auto;
	width: 100%;
	float:none;
}
.map .map_inner {  /*スマホ用css のみで指定しないと menu_pc のz-indexが効かなくなる*/
	position: relative;
	height: 0;
	padding-top: 100%;
	overflow: hidden;
}

.map .map_inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ------------------------------- */
/* 投稿フォーム */
#form-tbl { margin: 0 auto; text-align: center; }
#form { width: 94%; margin: 10px auto 20px auto; }
#form th, #form td {
	text-align: left;
	width: 100%;
	display: block;
	padding: 6px 3px;
	border-top: none;
}
#form tr:first-child th	{ border-top: 1px solid #E4DCCB; }
p.btn input { width: 9em; }

/* サンクス */
p.msg { margin: 1em auto 1em 10px; }