/* CSS Document */

@import url(navi.css);
@import url(common.css);

.marker_yellow_line {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}



#main {
	width: 100%;
	height: calc(100vh - 197px);
	margin: -197px 0 0 0;
	text-align: center;
	padding: 200px 0 0 0;
}
	#main.comp {
	background-attachment: fixed;
	background:url(../img/company/main.jpg) no-repeat center top; 
	background-size: cover; 
	}
	#main.stff {
	background:url(../img/staff/main.jpg) no-repeat center top;
	background-size: cover;
	}
	#main.care {
	background-attachment: fixed;
	background:url(../img/shaken/main.jpg) no-repeat center top; 
	background-size: cover;  
	}
	#main.ment {
	background-attachment: fixed;
	background:url(../img/mente/main.jpg) no-repeat center top; 
	background-size: cover;  
	}
	#main.serv {
	background-attachment: fixed;
	background:url(../img/service/main.jpg) no-repeat center top; 
	background-size: cover; 
	}
	#main.hoke {
	background-attachment: fixed;
	background:url(../img/hoken/main.jpg) no-repeat center top; 
	background-size: cover;  
	}
	#main.cont {
	background-attachment: fixed;
	background:url(../img/contact/main.jpg) no-repeat center top;
	background-size: cover; 
	
	}


#main h1 {
	text-align: center;
	font-size: 33px;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-weight: 400;
	line-height: 33px;
}

#main h1 a {
text-decoration: none;
}

#main p {
	font-size: 16px;
	margin: 0;
	padding: 20px 0 0 0;
	line-height: 16px;
	font-family: 'Ubuntu Condensed', sans-serif,"Rounded Mplus 1c","游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	color: #ffffff;
}


.mincho {font-family: "Hannari", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;}
.right_img {float: right; margin: 0 0 0 30px;}


#main .maintxt {
	background: rgba(0,0,0,0.6);
	padding: 30px 0 0 0;
	height: 100px;
	margin-top: calc(100vh - 327px); 
}


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

#main {
	margin: 0;
	height: 400px;
}


}


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

#main {
	width: 100%;
	height: 300px;
	margin: 0;
	text-align: center;
	padding: 0px 0 0 0;
}

	#main.comp,
	#main.stff,
	#main.care,
	#main.ment,
	#main.serv,
	#main.hoke,
	#main.cont {background-attachment: scroll;}

#main h1 {
	padding: 8px 0 0 0;
	font-size: 22px;
}

#main p {
	padding:0px 0 8px 0;
	font-size: 14px;
}

#main .maintxt {
	padding:  0;
	height: auto;
	margin-top: 0; 
}

}



/*-------------------------------------------------------
会社案内
--------------------------------------------------------*/

#company {
	background-color: #2D4672;
	width: 100%;
	padding: 50px 0 100px 0;
	text-align: center;
	color: #ffffff;
}

	#company p.open {
	padding: 20px;
	border: 1px solid #ffffff;
	margin: 0 auto 80px auto;
	width: 90%;
	box-sizing: border-box;
	max-width: 400px;
	font-size: 18px;
	text-align: center;
	color: #ffffff;
	font-family: 'Ubuntu Condensed', sans-serif, "Rounded Mplus 1c","游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	}
	
	#company p.open strong {
		font-size: 30px;
	}
	
	#company p.open strong::after {
		content: "　";
	}
	

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

	#company p.open strong::after {
		content: "";
	}
	
	#company p.open {
	margin: 0 auto 30px auto;
	}
}



	#company p.prof {
	padding: 0;
	margin: 0px auto;
	font-size: 30px;
	font-family: 'Ubuntu Condensed', sans-serif, "Rounded Mplus 1c","游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	}
	
	#company h1 {
		font-size: 18px;
		padding: 20px 0 30px 0;
		font-weight: 400;
	}

	#company h2 {
		font-size: 14px;
		padding: 10px 0 30px 0;
		font-weight: 400;
		width: 90%;
		margin: 0 auto;
	}



	#company dl {
		max-width: 700px;
		width: 90%;
		margin: 0 auto 60px auto;
		text-align: left;
		font-size: 16px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	#company dt {
		float:left; 
		width:150px;
		clear:both;
		padding: 15px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
			
	#company dd {  
		width:auto; 
		padding: 15px 0;
		margin-left:150px;  
		border-top: 1px solid rgba(255,255,255,0.3);
		}
			

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


	#company dt {
		float:none; 
		width:100%;
		clear:both;
		padding: 15px 0 0 0;
		font-weight: normal;
	}
			
	#company dd {  
		width:100%; 
		padding: 0 0 15px 0;
		margin-left:0;  
		border-top: none;
		}
			
}



/*--------------------------------------------------------------------------
車検
---------------------------------------------------------------------------*/

#shaken {
	width: 90%;
	margin: 0 auto;
	padding: 68px 0;
}

	#shaken h1 {
		font-size: 32px;
		font-weight: 500;
		color: #2D4672;
		text-align: center;
		padding: 0 0 20px 0;
	}
	
	#shaken p.htxt {
		font-size: 15px;
		text-align: center;
		padding: 10px 0;
		line-height: 110%;
	}

	#shaken .left {
		width: 45%;
		float: left;
		padding: 30px 0 0 0;
	}
	
	#shaken .right {
		width: 51%;
		float: right;
		padding: 30px 0;
	}
	
	#shaken .right h2 {
		font-size: 24px;
		margin: 0 0 10px 0;
		padding: 8px 15px;
		font-weight: 500;
		color: #2D4672;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px; 
	border-radius: 3px;
	background-color: #f6f6f6;
	line-height: 140%;
	}
	
	#shaken .right p {
		font-size: 17px;
		margin: 0 0 20px 0;
		padding: 15px;
		line-height: 160%;
	}
	
	#shaken .right p strong {
		font-size: 19px;
		font-weight: 500;
		line-height: 220%;
		color: #2D4672;
		border-bottom: 1px dotted #333333;
		background: linear-gradient(transparent 60%, #ffff66 60%);
	}
	
	
		#shaken .right .pix {
			display: inline-block;
			padding: 0 0 5px 0;
			width: 142px;
			margin: 0 5px;
			text-align: center;
			vertical-align: top;
		}
		
		#shaken .right .pix img {
			width: 100%;
			height: auto;
		}
		
		#shaken .right .pix p {
			padding: 0;
			margin: 0;
			font-size: 14px;
			text-align: center;
			line-height: 120%;
		}


#shaken2 .gray {
	width: 100%;
	background-color:#2D4672;
	margin: 0 auto;
	padding: 30px 0;
	clear: both;
}


	#shaken2 .waku {
		clear: both;
		width: 90%;
		max-width: 1400px;
		padding: 0 5% 30px 5%;
	}
	
	
	#shaken2 .box {
		width: 29.333%;
		float: left;
		margin: 30px 2%;
		background-color: #ffffff;
		padding: 10px;
		box-sizing: border-box;
	}
	
		#shaken2 .box .pix {
			width: 100%;
			height: 250px;
			border: 6px solid #ffffff;
			box-sizing: border-box;
		}
		
		#shaken2 .box .pix a {
			width: 100%;
			height: 250px;
			display: block;
			text-indent: 100%;
			white-space:nowrap;
			overflow: hidden;
		}
		
		#shaken2 .box .txt p {
		padding: 10px;
		}
		
		#shaken2 .box .txt h3 {
			background-color: #2D4672;
			padding: 10px 20px;
			color: #ffff00;
			font-weight: 400;
		}
		
	
/*------smp---------------------------*/
@media screen and (max-width: 800px) {

#shaken {
	padding: 50px 0;
}

	#shaken .left,
	#shaken .right {
		width: 100%;
		float:none;
		padding: 30px 0 0 0;
	}
	
	}
	
/*------smp---------------------------*/
@media screen and (max-width: 640px) {


	#shaken h1 {font-size: 24px;}
	#shaken p.htxt {text-align: left;}

	#shaken .left,
	#shaken .right {
		padding: 20px 0 0 0;
	}
	
	
	#shaken .right h2 {
		font-size: 18px;
	}
	
	#shaken .right p {
		font-size: 17px;
		margin: 0 0 20px 0;
		padding: 15px;
		line-height: 160%;
	}
	
	#shaken .right p strong {
		font-size: 17px;
		font-weight: 400;
		line-height: 160%;
	}
	
}

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


#shaken2 .gray {
	padding: 20px 0 0 0;
}

	#shaken2 .waku {
		clear: both;
		width: 96%;
		padding: 0 2%;
	}
	
	
	#shaken2 .box {
		width: 47%;
		float: left;
		margin: 10px 1.5%;
	}
	
		#shaken2 .box .pix {
			height: 200px;
		}
		
		#shaken2 .box .pix a {
			height: 200px;
		}
		
		#shaken2 .box .txt p {
		padding: 10px;
		}
}

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

	#shaken2 .waku {
		width: 80%;
		padding: 0 10%;
	}
	
	
	
	#shaken2 .box {
		width: 100%;
		float: left;
		margin: 10px auto;
	}
	
		#shaken2 .box .pix {
			height: 200px;
		}
		
		#shaken2 .box .pix a {
			height: 200px;
		}
		
		#shaken2 .box .txt p {
		padding: 10px;
		}
}







/*---------------------------------------------------------------------------
鈑金塗装修理
下段のみ
-------------------------------------------------------------------------------*/
#mente2 .gray {
	width: 100%;
	background-color: #2D4672;
	margin: 0 auto;
	padding: 30px 0 50px 0;
	clear: both;
}

	#mente2 .waku {
		clear: both;
		width: 90%;
		max-width: 1400px;
		padding: 0 5% 30px 5%;
	}
	
	
	#mente2 .box {
		width: 29.333%;
		float: left;
		margin: 30px 2%;
		background-color: #ffffff;
		padding: 10px;
		box-sizing: border-box;
	}
	
		#mente2 .box .pix {
			width: 100%;
			height: 250px;
		}
		
		#mente2 .box .pix a {
			width: 100%;
			height: 250px;
			display: block;
			text-indent: 100%;
			white-space:nowrap;
			overflow: hidden;
		}
		
		#mente2 .box .txt p {
		padding: 10px;
		}
		
		#mente2 .box .txt h3 {
			background-color: #2D4672;
			padding: 10px 20px;
			color: #ffff00;
			font-weight: 400;
		}
		


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


#mente2 .gray {
	padding: 20px 0 20px 0;
}

	#mente2 .waku {
		clear: both;
		width: 96%;
		padding: 0 2%;
	}
	
	
	#mente2 .box {
		width: 47%;
		float: left;
		margin: 10px 1.5%;
	}
	
		#mente2 .box .pix {
			height: 200px;
		}
		
		#mente2 .box .pix a {
			height: 200px;
		}
		
		#mente2 .box .txt p {
		padding: 10px;
		}
}

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

	#mente2 .waku {
		width: 80%;
		padding: 0 10%;
	}
	
	
	
	#mente2 .box {
		width: 100%;
		float: left;
		margin: 10px auto;
	}
	
		#mente2 .box .pix {
			height: 200px;
		}
		
		#mente2 .box .pix a {
			height: 200px;
		}
		
		#mente2 .box .txt p {
		padding: 10px;
		}
}



/*------------------------------------------------------------------------------
サービス一覧
------------------------------------------------------------------------------*/

#sv {
	background-color: #2D4672;
	padding: 100px 0 50px 0;
	text-align: center;
}

#sv p.ettl {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #ffffff;
	font-family: 'Ubuntu Condensed', sans-serif;
	text-shadow: 1px 1px 2px #000000;
}

#sv h2 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: #ffffff;
	margin: 10px 0;
	text-shadow: 1px 1px 2px #000000;
}


#sv .waku {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

#sv .waku .box {
	width: 30.3333%;
	float: left;
	margin: 25px 1.5%;
}

#sv .waku .box .pix {
	width: 100%;
	height: 170px;
	box-sizing: border-box;
	border: 10px solid rgba(255,255,255,0.3);
	overflow: hidden;
}

#sv .waku .box .pix img {
	width: 100%;
	height: auto;
	margin: -20px;
}

#sv .waku .box .txt {
	font-size: 15px;
	text-align: left;
	padding: 5px 15px;
}

#sv .waku .box .txt h3,
#sv .waku .box .txt p {
	margin: 0;
	padding: 0 0 2px 0;
	font-size: 17px;
	color: #ffffff;
	font-weight: 400;
}

#sv .waku .box .txt h3 a {
	text-decoration: none; 
	color: #ffff00; 
	font-size: 19px;
	border-bottom: 1px dotted rgba(255,255,255,0.4);
	display: block;
	padding: 10px 0 5px 0;
	margin: 0 0 10px 0;
	}


#sv .waku .tbox {
	width: 30.3333%;
	float: left;
	margin: 25px 1.5%;
	box-sizing: border-box;
	border: 10px solid rgba(255,255,255,0.3);
	overflow: hidden;
}

#sv .waku .tbox p {
	margin: 0;
	padding: 0;
}

#sv .waku .tbox p a {
	margin: 0;
	padding: 10px 0;
	text-decoration: none;
	display: block;
	color: #ffffff;
	background-color: transparent;
}

#sv .waku .tbox p a:hover {background-color:#131D2F;}

	#sv .waku .tbox p a {
	-webkit-transition: 0.5s ease-in-out;
	   -moz-transition: 0.5s ease-in-out;
		 -o-transition: 0.5s ease-in-out;
			transition: 0.5s ease-in-out;
			}


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


#sv {
	padding:50px 0;
	text-align: center;
}


#sv .waku {
	width: 90%;
	margin: 0 auto;
}

#sv .waku .box {
	width: 100%;
	float: none;
	margin: 25px auto;
}



#sv .waku .tbox {
	width: 100%;
	float: none;
	margin: 25px 0;
	box-sizing: border-box;
	border: 10px solid rgba(255,255,255,0.3);
	overflow: hidden;
}
}


/*--------------------------------------------------------------------------
スタッフ一覧
---------------------------------------------------------------------------*/

#staff {
	padding: 100px 0 50px 0;
	text-align: center;
}

#staff p.ettl {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 0.2em;
	font-family: 'Ubuntu Condensed', sans-serif;
	text-shadow: 1px 1px 2px #000000;
}

#staff h2 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: #ffffff;
	margin: 10px 0;
	text-shadow: 1px 1px 2px #000000;
}


#staff .waku {
	width: 880px;
	margin: 0 auto;
	letter-spacing: -0.4em;
	text-align: center;
}

#staff .waku .box {
	width: 250px;
	display: inline-block;
	letter-spacing: normal;
	margin: 25px 20px;
	vertical-align: top;
}

#staff .waku .box .pix {
	width: 250px;
	height: 250px;
	border: 10px solid rgba(45,70,114,0.6);
	overflow: hidden;
	box-sizing: border-box;
		-webkit-border-radius: 125px;
		-moz-border-radius: 125px;
		border-radius: 125px;
		text-align: center;
}

#staff .waku .box .pix a {
	width: 250px;
	height: 250px;
	display: block;
	text-indent: 100%;
	white-space:nowrap;
	overflow: hidden;

}

#staff .waku .box .pix:hover {
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		border-radius: 25px;
		border-color:rgba(255,150,33,1.00);
}


	#staff .waku .box .pix {
	-webkit-transition: 0.5s ease-in-out;
	   -moz-transition: 0.5s ease-in-out;
		 -o-transition: 0.5s ease-in-out;
			transition: 0.5s ease-in-out;
			}


#staff .waku .box .txt {
	font-size: 15px;
	text-align: left;
	padding: 5px 15px;
}

#staff .waku .box .txt p {
	margin: 0;
	padding: 0 0 2px 0;
	font-size: 15px;
	font-weight: 400;
}

#staff .waku .box .txt p.comm {
	padding: 5px 10px;
	border: 1px solid #d6d6d6;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		background-color: #f6f6f6;
	
}

#staff .waku .box .txt h3 a {
	color: #2C4672; 
	font-size: 19px;
	border-bottom: 1px dotted rgba(0,0,0,0.4);
	display: block;
	padding: 10px 0 5px 0;
	text-decoration: none;
	margin: 0 0 10px 0;
	}





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


#staff {
	padding: 50px 0 30px 0;
}

#staff p.ettl {
	font-size: 36px;
}

#staff .waku {
	width: 90%;
}

#staff .waku .box {
	width: 48%;
	float: left;
	margin: 25px 1%;
}

#staff .waku .box .pix {
	width: 100%;
	height: 180px;
	border: 10px solid rgba(45,70,114,0.6);
	overflow: hidden;
	box-sizing: border-box;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		text-align: center;
		background-size: 100% auto !important;
}

#staff .waku .box .pix a {
	width: 100%;
	height: 180px;
	display: block;
	text-indent: 100%;
	white-space:nowrap;
	overflow: hidden;

}
}


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


#staff {
	padding: 50px 0 30px 0;
}

#staff p.ettl {
	font-size: 36px;
}

#staff .waku {
	width: 90%;
}

#staff .waku .box {
	width: 100%;
	float: none;
	margin: 25px 0;
}

#staff .waku .box .pix {
	height: 240px;
	background-size: auto 100% !important;	
}

#staff .waku .box .pix a {
	height: 240px;

}
}





/*------------------------------------------------------------------------------
スタッフプロフィール
------------------------------------------------------------------------------*/
#staffp {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0 50px 0;
}

#staffp .left {
	width: 250px;
	float: left;
	text-align: left;
}

#staffp .right {
	width:  calc(100% - 300px);
	float: right;
}

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

#staffp .left .pix {
	width: 250px;
	height: 250px;
	border: 10px solid rgba(45,70,114,0.6);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	box-sizing: border-box;
		-webkit-border-radius: 125px;
		-moz-border-radius: 125px;
		border-radius: 125px;
}

#staffp .left h1 {
	color: #2C4672; 
	font-size: 19px;
	border-bottom: 1px dotted rgba(0,0,0,0.4);
	display: block;
	padding: 10px 0 5px 0;
	text-decoration: none;
	margin: 0 0 10px 0;
	}

#staffp .left p {
	margin: 0;
	padding: 10px 0;
}

#staffp .right .img {
	width: 100%;
	height: auto;
	padding-bottom: 30px;
}

#staffp .right figure {
	width: 25%;
	height: 180px;
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#staffp .right figure a {
	width: 100%;
	height: 180px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
	}


	#staffp .right figure a:hover {
		transform: scale(1.1);	/*画像の拡大率*/
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}


	#staffp .right h2 {
		color: rgba(45,70,114,1);
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: 500;
	}
	
	#staffp .right p {
		font-size: 16px;
		line-height: 220%;
		margin: 0;
		padding: 0;
	}
	
	#staffp .right p strong {
		color: rgba(45,70,114,1);
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: 500;
	}

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


#staffp .left {
	width: 200px;
}

#staffp .right {
	width:  calc(100% - 250px);
}

#staffp .left .pix {
	width: 200px;
	height: 200px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

#staffp .right figure {height: 150px;}

#staffp .right figure a {height: 150px;}
}


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

#staffp {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0 20px 0;
}

#staffp .left {
	width: 250px;
	float: none;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 30px;
}

#staffp .right {
	width: 100%;
	float: none;
}

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

#staffp .left .pix {
	width: 250px;
	height: 250px;
	-webkit-border-radius: 125px;
	-moz-border-radius: 125px;
	border-radius: 125px;
}

#staffp .left h1 {
	color: #2C4672; 
	font-size: 19px;
	border-bottom: 1px dotted rgba(0,0,0,0.4);
	display: block;
	padding: 10px 0 5px 0;
	text-decoration: none;
	margin: 0 0 10px 0;
	}

#staffp .left p {
	margin: 0;
	padding: 10px 0;
}

#staffp .right .img {
	width: 100%;
	height: auto;
	padding-bottom: 30px;
}

#staffp .right figure {
	width: 50%;
}
}







/*--------------------------------------------------------------------------
お知らせ
---------------------------------------------------------------------------*/

#info {
	width: 75%;
	padding: 40px 0;
	float: right;
	background-color: #ffffff;
}

.info p.small {
	font-size: 12px;
	padding: 10px 0;
}

	#info h1 {
	border-bottom: 1px solid #d6d6d6;
	padding: 20px 0;
	font-weight: 400;
	margin-bottom: 20px;
	color: #8187C1;
	line-height: 140%;
	font-size: 30px;
	}
	
	#info h1 a,
	#info h2 a {
	color: #8187C1;
	text-decoration: none;
	}
	
	#info h2 {
	padding: 20px 0;
	font-weight: 400;
	margin-bottom: 20px;
	color: #8187C1;
	line-height: 140%;
	font-size: 30px;
	}
	
	
	
	#infol {
		width: 65%;
		float: left;
	}
	
	#infol img {
	max-width: 100%;
	height: auto;
	}
	
	#infol dl {
		width:100%;
		margin:20px auto 0 auto;
	}
	
	#infol dt {
		float:left;  
		width:110px;  
		padding:8px 0 8px 0;  
		border-top:1px solid #d6d6d6;
		clear:both;
	}

	#infol dd {  
		margin-left:110px;  
		padding:8px 0 8px 5px;
		border-top:1px solid #d6d6d6;
		text-align:left;
		box-sizing: border-box;
	}

	
	#infor {
		width: 28%;
		float: right;
	}
	
	#infor h2,
	#infor h3 {
		color: #F3A9C9;
		font-weight: 500;
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 25px;
	}
	
	#infor p {
		margin: 0 0 20px 0;
		padding: 0;
	}
/*------smp---------------------------*/
@media screen and (max-width: 640px) {



#info {
	width: 90%;
	margin: 0 auto;
	padding: 40px 0;
	float: none;
	background-color: #ffffff;
}


	#info h1 {
	padding: 20px 0;
	margin-bottom: 20px;
	font-size: 20px;
	}
	
	#infol {
		width: 100%;
		float: none;
		padding-bottom: 30px;
	}
	
	#infol dl {
		width:100%;
		margin:20px auto 0 auto;
	}
	
	#infol dt {
		float:none;  
		width:100%;  
		padding:8px 0 0 0;  
	}

	#infol dd {  
		margin-left:0;  
		padding:0 0 8px 0;
		border-top:none;
		text-align:left;
		box-sizing: border-box;
	}

	
	#infor {
		width: 100%;
		float: none;
		padding: 30px 0;
		border-top: 4px solid #d6d6d6;
	}
	
	#infor h2 {
		color: #F3A9C9;
		font-weight: 500;
		margin: 0 0 10px 0;
		padding: 0;
	}
	
	#infor p {
		margin: 0 0 20px 0;
		padding: 0;
	}
	
}



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

お問合せ

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

#cform {
		width: 700px;
		padding: 30px;
		margin: 0 auto 60px auto;
		background-color: #ffffff;
	}

	
	#cform dl {
		width:620px;
		padding:0;
		margin:30px auto 0 auto;
		text-align:left;
	}

	#cform dt {
		float:left;  
		border-top:1px dotted #cccccc;
		width:180px;  
		padding:8px 0 8px 0;  
		clear:both;
		font-weight: bold;
	}

	#cform dd {  
		margin-left:180px;  
		border-top:1px dotted #cccccc;
		padding:8px 0 8px 5px;  
	}
	

	#cform p {
		padding: 40px 0 20px 0;
		margin: 0 auto;
		width: 620px;
		text-align: left;
		font-size: 16px;
	}
	
	#cform dl p {
		width: auto;
		margin: 0; padding: 0;
		} 
 
/*-------smp------------------------*/
@media screen and (max-width: 720px) {

 #cform {
		width: 100%;
		border: none;
		padding: 10px;
		margin: 0 auto 60px auto;
		box-sizing: border-box;
	}

	
	#cform dl {
		width:100%;
		padding:0;
		margin:30px auto 0 auto;
		text-align:left;
	}

	#cform dt {
		float:none;  
		border-top:1px dotted #cccccc;
		width:100%;  
		padding:5px;
		box-sizing: border-box;
		clear:both;
		font-weight: bold;
	}

	#cform dd {  
		margin-left:0;  
		border-top:none;
		padding:5px;
		box-sizing: border-box;
	}
	

	#cform p {
		padding: 20px 0 20px 0;
		margin: 0 auto;
		width: 100%;
		text-align: left;
	}
	
	#cform dl p {margin: 0; padding: 0;} 

}



#calend p.ettl,
#calend h2,
#calend p {color: #ffffff !important;}