/* CSS Document */

@import url(navi.css);
@import url(common.css);
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');




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

header
indextとは別
-----------------------------------------------------------------*/

#header {
	width:100%;
	padding:0;
	margin:0 auto;
}

	#headl {
		width:44%;
		max-width: 576px;
		float: left;
		margin-left: 3%;
		padding: 21px 0 0 0;
	}
	
	#headl img {
	max-width: 90%;
	height: auto;
	}

	#headr {
		width:50%;
		float:right;
		margin-right: 3%;
		padding: 21px 0 0 0;
	}
	
	#headr .teln {
		font-family: 'Great Vibes', cursive;
		font-size: 30px;
		background: url(../img/common/tel.png) no-repeat left;
		line-height: 30px;
		padding: 0 0 0 30px;
		float: right;
	}

	#headr .ful {
		float: right;
		font-size: 14px;
		line-height: 20px;
		margin-right: 30px;
	}
		#headr h1,
		#headr h4 {
		font-size: 14px;
		margin: 0;
		padding: 0;
		font-weight: 500;
		text-align: right;
		}
	
	

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

	#headl {
		width:90%;
		max-width: 100%;
		float: none;
		margit:0 auto;
		padding: 10px 0 0 0;
	}
	
	#headl img {
	max-width: 100%;
	height: auto;
	}

	#headr {
		width:90%;
		float:none;
		margin:0 auto;
		padding: 10px 0 15px 0;
	}
	
	#headr .teln {
		padding: 0;
		background: none;
		float: none;
		text-align: center;
		font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
		font-size: 30px;
		line-height: 30px;
		margin: 0 0 10px 0;
	}
	
	#headr .teln::before {
	content: url(../img/common/tel.png);
	}

	#headr .ful {
		float: none;
		text-align: center;
		
		font-size: 12px;
		line-height: 20px;
		margin-right: 30px;
		margin: 0 auto;
	}
		#headr h1,
		#headr h4 {
		font-size: 13px;
		margin: 0;
		padding: 0;
		font-weight: 500;
		text-align: center;
		}	
}





#main {
	height:459px;
	background: url(../img/top/main.jpg) no-repeat center; 
	position: relative;
}

#main #copy {
	position: absolute;
	width: 40%;
	top: 130px;
	left: 60%;
	text-align: left;
}

	#copy h2 {
		font-size: 35px;
		font-weight: 500;
		font-family: "Hannari", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
	}
	
	#copy p {
		padding: 0px 10px;
		margin: 0;
	}
	
	#copy p.eng {
		font-size: 13px;
		letter-spacing: 0.2em;
		padding: 20px 10px;
		margin: 0;
	}
	
	#copy p .p1 {background-color:rgba(204,107,168,0.54); color: #ffffff; padding: 10px 20px}
	#copy p .p2 {background-color:rgba(239,145,142,0.54); color: #ffffff; padding: 10px 20px}
	#copy p .p3 {background-color:rgba(154,149,198,0.54); color: #ffffff; padding: 10px 20px}
	
	
#main #cl {
	position: absolute;
	bottom: -25px;
	right: 0;
}

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

#main {
	height:auto;
	background: url(../img/top/main_sm.jpg) no-repeat center; 
	position: relative;
	background-size: auto 300px;
	background-position: center top;
	padding: 260px 0 0 0;
}

#main #copy {
	position: static;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 30px 0 0 0;
}

	#copy h2 {
		font-size: 25px;
	}
	
	#copy p {
		padding: 0px 10px;
		margin: 0;
	}
	

	
	#copy p .p1,
	#copy p .p2,
	#copy p .p3 {padding: 10px 10px; white-space: nowrap;}
	
	
#main #cl {
	position: static;
	text-align: right;
}

#main #cl img {
max-width: 100%;
height: auto;
}

}


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

.top {}

.l48 {
	float: left;
	width: 45%;
}

.l48 iframe {
	width: 100%;
	height: 400px;
}

.r48 {
	float: right;
	width: 45%;
	margin-right: 2%;
}

img.r48img {
	float: right;
	width: 108px;
	height: auto;
	margin: 0 0 5px 20px;
}

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

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

.r48 {
	float: none;
	width: 100%;
	margin-right: 0;
}
}


	
		.top h3 {
			color: #9699C7;
			font-size: 1.6em;
			margin: 0 0 15px 0;
			padding: 0;
			font-weight: 400;
		}
		
		.top table {
			width: 100%;
			margin: 0 0 20px 0;
			border-spacing: 1px;
			background-color: #9699C7;
		}
		
		.top table th {
			background-color: #9699C7;
			padding: 3px 5px;
			text-align: center;
			color: #ffffff;
			border: 1px solid #ffffff;
		}
		
		.top table td {
			background-color: #ffffff;
			padding: 3px 5px;
			text-align: center;
		}
		
		.top table td.time {background-color:#F7F7F7; }
		.top table td sup {font-size: 10px; font-weight: bold;}
		
		

/*-------smp------------------------*/
@media screen and (max-width: 640px) {
	
	
		.top h3 {
			font-size: 1.6em;
			margin: 20px 5%;
			text-align: left;
		}
		
		.top table {
			width: 90%;
			margin: 0 auto 20px auto;
		}
		
		.top p {margin: 0; padding: 0 5%;}
}


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

#kamoku {
	width: 100%;
	clear: both;
	padding: 50px 0;
}

	#kamoku .box {
	width: 29%;
	float: left;
	margin: 0 4.33333% 0 0;
	}
	
	#kamoku .box .ttl,
	#blog .ttl,
	#access .ttl {
	border-left: 2px solid #000000;
	padding: 0px 0 0 20px;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 20px;
	}
	
		#kamoku .box .ttl h2,
		#blog .ttl h2,
		#access .ttl h2 {
			font-size: 22px;
			font-family: "Hannari", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
			margin: 0;
			padding: 0;
			font-weight: 500;
			text-align: left;
		}
		
		#kamoku .box .ttl h2 a {text-decoration: none;}
		
		#kamoku .box p {
			font-size: 14px;
			text-align: left;
			padding: 5px 10px 10px 10px;
		}
		
		#kamoku .box .ttl p,
		#blog .ttl p,
		#access .ttl p {
			font-size: 12px;
			letter-spacing: 0.1em;
			text-align: left;
			padding: 5px 0 0 0;
		}
		
		#kamoku .box img {
			max-width: 100%;
			height: auto;
		}

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

#kamoku {
	width: 92%;
	margin: 0 auto;
	clear: both;
	padding: 50px 0;
}

		#kamoku .box .ttl h2,
		#blog .ttl h2,
		#access .ttl h2 {
			font-size: 25px;
		}
		

	#kamoku .box {
	width: 48%;
	margin: 10px 1%;
	}
	
		#kamoku .box p {
			font-size: 16px;
			text-align: left;
			padding: 5px 10px 15px 10px;
		}

#kamoku .box .ttl p,
		#blog .ttl p,
		#access .ttl p {
			font-size: 12px;
			letter-spacing: 0.1em;
			text-align: left;
			padding: 5px 0 0 0;
		}
}



/*-------smp------------------------*/
@media screen and (max-width: 430px) {

#kamoku {
	width: 100%;
	clear: both;
	padding: 50px 0;
}

		#kamoku .box .ttl h2,
		#blog .ttl h2,
		#access .ttl h2 {
			font-size: 25px;
		}
		

	#kamoku .box {
	width: 90%;
	float: none;
	margin: 0 auto;
	}
	
		#kamoku .box p {
			font-size: 16px;
			text-align: left;
			padding: 5px 10px 15px 10px;
		}

#kamoku .box .ttl p,
		#blog .ttl p,
		#access .ttl p {
			font-size: 12px;
			letter-spacing: 0.1em;
			text-align: left;
			padding: 5px 0 0 0;
		}
}













#blog,
#access {
	width: 100%;
}
	#blog p.kiji {
		background-color: #F3F5FA;
		padding: 10px 20px;
		margin-bottom: 2px;
	}
	
	
#map_canvas {
	width: 100%;
	height: 300px;
}
#access h3 {
	color: #9699C7;
	font-size: 1.4em;
	margin: 0 0 15px 0;
	padding: 0;
	font-weight: 400;
}

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

#blog,
#access {
	width: 90%;
	margin: 0 auto;
}

#access img {
max-width: 100%;
height: auto;
}
	
	
#map_canvas {
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
}
#access h2 {
	color: #9699C7;
	font-size: 1.4em;
	margin: 0 0 15px 0;
	padding: 0 5%;
	font-weight: 400;
}
}