@charset "utf-8";

@import url(default.css);
@import url(base.css);


	#contentheader{margin-bottom:26px;}
	#index #contentheader{margin-bottom:40px;}

		#contentheader h1{width:299px;}
		.flexible #contentheader h1{width:224px;}
		.active-sp #contentheader h1{width:150px;}

		#contentheader ul{width:303px;}
		
		.flexible #contentheader h1 img{width:224px;}
		.active-sp #contentheader h1 img{width:150px;}


	.main{
		background:none;
		width:960px;
		margin:0 auto 60px;
	}

@media screen and (max-width:990px){
	.main{
		width:760px;
	}
}

@media screen and (max-width:780px){
	.main{
		width:480px;
	}
}

@media screen and (max-width:470px){
	.main{
		width:100%x;
	}
}
	
	.flexible .main#telcontact{margin:0 auto 40px;}

		.flexible #telcontact h1{padding-top:15px;}

		#telcontact h1 img{width:213px;}


		#emailcontact h1 img{width:199px;}
		
		#index .main h1{margin-bottom:20px;}
		
		.flexible#index .main h1{
			margin-left:3%;
		}

			.shop-tel{
				width:460px;
				float:left;
			}
			.flexible .shop-tel{width:360px;}
			.active .shop-tel{
				width:420px;
				float:none;
			}
			.active-sp2 .shop-tel{
				width:280px;
				margin:0 auto;
			}
			.active-sp2 #uki-fc{padding-top:30px;}

		
			#index .main h2{
				margin:0 0 20px 40px;
				padding-left:20px;
				font-size:120%;
				font-weight:bold;
				background:url(../contact/images/dot_square-pink.gif) no-repeat 0 4px;
			}
.active-sp#index .main h2{color:#c00;}
.active-sp2#index .main h2{color:#000;}






		

			.active-sp2#index .main h2{margin:20px 0;}


			.lbl_fd{
				width:95px;
				margin-left:60px;
				float:left;
				font-size:80%;
				line-height:130%;
			}
			.flexible .lbl_fd{margin-left:40px;}
			.active-sp2 .lbl_fd{
				width:200px;
				float:none;
				margin-left:20px;
			}
			
			.active-sp2 .lbl_fd br{display:none;}

				#telnum{
					width:210px;
					margin:0;
					padding-top:3px;
					float:left;
				}
				#kumamoto-fc #telnum img{width:196px;}
				#uki-fc #telnum img{width:210px;}
				
				.active-sp2 #telnum{margin:5px 0 0 20px;}


				.tel-fax{
					width:420px;
					color:#0d318f;
					padding:18px 0 0 20px;
					margin:12px 0 0 20px;
					border-top:1px dotted #ccc;
				}
				.flexible .tel-fax{
					width:360px;
					padding:18px 0 0 0;
				}
				.active .tel-fax{width:420px;}
				.active-sp2 .tel-fax{width:260px;}
				
				.tel-fax br,
				.tel-fax2 br{display:none;}
				
				.flexible .tel-fax br,
				.flexible .tel-fax2 br{display:inline;}
				
				.active .tel-fax br,
				.active .tel-fax2 br{display:none;}
				
				.active-sp2 .tel-fax br,
				.active-sp2 .tel-fax2 br{display:inline;}

					.tel-fax h3,
					.tel-fax2 h3{
						margin:0 10px 0 0;
						color:#444;
						font-size:90%;
						display:block;
						width:auto;
						float:left;
					}
					
					.tel-fax span,
					.tel-fax2 span{
						font-weight:bold;
						float:left;
						width:auto;
						margin-right:20px;
					}

					.tel-fax span{
						font-size:130%;
					}

				.tel-fax2{
					width:420px;
					color:#0d318f;
					padding:18px 0 0 20px;
					margin:12px 0 0 20px;
				}
				.flexible .tel-fax2{
					width:360px;
					padding:18px 0 0 0;
				}
				.active .tel-fax2{width:420px;}
				.active-sp2 .tel-fax2{width:260px;}

		#emailcontact #emailnote{margin:0 0 40px 40px;}
		.active-sp #emailcontact #emailnote{
			margin:0 3% 20px;
			font-size:90%;
		}
		
			.link-to-mailform{
				text-align:center;
			}
		
			.link-to-mailform img{
				-moz-border-radius:10px;
				-webkit-border-radius:10px;
				border-radius:10px;
				-moz-box-shadow:0px 0px 3px 0px #aaa;
				-webkit-box-shadow:0px 0px 3px 0px #aaa;
				box-shadow:0px 0px 3px 0px #aaa;
			}
		
			.active .link-to-mailform img{width:80%;}
			.active2 .link-to-mailform img{width:90%;}



/* メールフォーム */

	.flexible#mailform .main,
	.flexible#mailform2 .main{
		padding-top:40px;
	}
	.active#mailform .main,
	.active#mailform2 .main{width:92%;}
	.active-sp2.mailform .main{}
	
		.active-sp#mailform .remarks,
		.active-sp#mailform2 .remarks{
			font-size:90%;
			line-height:150%;
		}

		.mailform form table{
			width:100%;
			margin-left:20px;
		}
		.flexible#mailform form table,
		.flexible#mailform2 form table{
			margin-left:0;
		}

		.mailform form table{
			width:100%;
		}

			.mailform form th{
				width:100px;
				padding:5px 15px;
				text-align:left;
				font-weight:normal;
				background:#e5edff;
				color:#0c308e;
				vertical-align:top;
				line-height:140%;
			}

			.active-sp#mailform form th,
			.active-sp#mailform2 form th{
				width:20%;
				padding:5px 0 5px 1%;
				font-size:90%;
			}

			.mailform form td{
				padding:5px 10px;
				vertical-align:top;
			}

			#name,#furigana{width:160px;}
			#zip1,#zip2,#szip1,#szip2{width:40px;}
			#address,#saddress{width:400px;}
			#tel{width:120px;}
			#email{width:200px;}
			#message{width:90%;}

			.active-sp#mailform form td input,.active-sp#mailform2 form td input{width:100%;}
			.active-sp#mailform form td textarea,.active-sp#mailform2 form td textarea{width:100%;}
			.active-sp#mailform #zip1,
			.active-sp#mailform #zip2,
			.active-sp#mailform2 #zip1,
			.active-sp#mailform2 #zip2,
			.active-sp#mailform #szip1,
			.active-sp#mailform #szip2,
			.active-sp#mailform2 #szip1,
			.active-sp#mailform2 #szip2{width:40px;}
			#mailform2 form td input#keitai1,
			#mailform2 form td input#keitai2,
			#mailform2 form td input#keitai3,
			#mailform2 form td input#keitai4{width:auto;}

			.active-sp#mailform2 form td input.cbox{width:auto;}


			#mailform2 form td input.floor{width:20px;}
			#mailform2 form td input#build{width:30px;}

			#submitbox{
				text-align:center;
				margin:20px 0;
			}


			#thanksmessage{
				width:420px;
				margin:20px auto 0;
			}
			.active-sp2 #thanksmessage{
				width:96%;
			}

				#thanksmessage h1{
					font-weight:bold;
					font-size:160%;
					color:#c30;
					text-align:center;
					margin-bottom:20px;
				}

				.spbr{display:none;}
				.spbr2{display:none;}
				.active-sp2 .spbr{display:inline;}
				.active-sp .spbr2{display:inline;}


			#copyaddress{
				background:#eee;
				width:140px;
				margin-bottom:8px;
				font-size:80%;
				text-align:center;
				border-radius:3px;
				-moz-border-radius:3px;
				-webkit-border-radius:3px;
				-moz-box-shadow:1px 1px 0px 0px #aaa;
				-webkit-box-shadow:1px 1px 0px 0px #aaa;
				box-shadow:1px 1px 0px 0px #aaa;
				cursor:pointer;
			}
			
			#copyaddress:hover{
				filter:alpha(opacity=60);
				-moz-opacity:0.60;
				opacity:0.60;
			}




/* アンケート */


			#enquete .main{
				margin:20px auto;
				font-size:1.2em;
			}

		
			#enquete .main h2{
				margin:60px 0 20px;
				padding-left:20px;
				color:#c33;
				font-size:1.5em;
				font-weight:bold;
				background:url(../contact/images/dot_square-pink.gif) no-repeat 0 5px;
			}




		/* メールフォーム */

			#enquete table{
				width:100%;
				margin-bottom:30px;
				border-collapse:collapse;
			}
	 
				#enquete th{
					width:90px;
					height:70px;
					padding:0 5px 0 15px;
					color:#036;
					font-size:0.9em;
					font-weight:500;
					text-align:left;
					line-height:1.4em;
					background-color:#ccdcff;
					white-space:nowrap;
					border-bottom:5px solid #f9f9f9;
				}
				#enquete tr:last-child th{border-bottom:none;}
		
				#enquete td{
					width:calc(100% - 90px);
					padding:10px 0 0 20px;
					font-weight:400;
					background-color:#e5edff;
					border-bottom:5px solid #f9f9f9;
				}
				#enquete tr:last-child td{border-bottom:none;}
		
					#enquete td input{
						margin-bottom:10px;
						padding:10px 5px;
						font-weight:400;
						border:none;
						border-radius:5px;
					}
		
					#enquete  td textarea{
						width:91%;
						margin-bottom:10px;
						padding:10px 2%;
						font-weight:400;
						border:none;
						border-radius:5px;
					}
	

			#enquete #address{
				max-width:400px;
				width:90%;
			}

	
			#enquete #email,#enquete #email2{
				max-width:380px;
				width:90%;
			}
			#enquete #name1,#enquete #name2,#enquete #furigana1,#enquete #furigana2{
				max-width:145px;
				width:34%;
			}
			#enquete #tel1,#enquete #tel2,#enquete #tel3{
				max-width:80px;
				width:20%;
				text-align:center;
			}

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

				#enquete table{
					font-size:0.9em;
				}

			#name1,#name2,#furigana1,#furigana2{
				width:70%;
			}
		}
	
	
			#enquete #submit1{
				display:block;
				max-width:360px;
				width:80%;
				height:50px;
				margin:30px auto;
				color:#fff;
				font-size:1.1em;
				font-weight:500;
				letter-spacing:0.07em;
				text-align:center;
				line-height:50px;
				background-color:#030;
				border-radius:5px;
				cursor:pointer;
				-webkit-transition:opacity 0.3s ease-out;
				-moz-transition:opacity 0.3s ease-out;
				-ms-transition:opacity 0.3s ease-out;
				transition:opacity 0.3s ease-out;
			}
	
			#enquete #submit1:hover{
				filter:alpha(opacity=80);
				-moz-opacity:0.80;
				opacity:0.80;
			}


		@media screen and (max-width:480px){
			
			#enquete #submit1{
				margin:30px auto 0;
				font-size:1.0em;
			}
				
		}

		@media screen and (max-width:370px){
			
			#enquete #submit1{
				width:100%;
				height:40px;
				line-height:40px;
			}
				
		}


	
	
				#enquete tr:nth-of-type(5) th,
				#enquete tr:nth-last-of-type(1) th{
					padding-top:24px;
					vertical-align:top;
				}
	
					#enquete .hissu{
						width:30px;
						height:14px;
						color:#fff;
						font-size:0.7em;
						text-align:center;
						line-height:16px;
						float:right;
						background-color:#e73656;
						position:relative;
						top:-6px;
						margin-right:5px;
					}
	
		@media screen and (max-width:640px){
			
				#enquete td{
					padding:10px 0 0 10px;
				}
	
			#enquete #email,#enquete #email2{
				width:88%;
			}
			#enquete #furigana1,#enquete #furigana2{
				width:60%;
			}
	
				#enquete tr:nth-of-type(3) th,
				#enquete tr:nth-of-type(4) th,
				#enquete tr:nth-of-type(6) th{
					padding-top:24px;
					vertical-align:top;
				}
					
					#enquete tr:nth-of-type(3) .hissu{top:-17px;}
	
		}
	



		/* 戻る */

	#enquete .main{
		font-family:'kozuka-gothic-pro','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
		font-weight:400;
		line-height:1.7em;
		letter-spacing:0.07em;
		text-align:left;
	}

@media screen and (max-width:990px){
	#enquete .main{width:90%;}
}

@media screen and (max-width:780px){
	#enquete .main{width:90%;}
}

@media screen and (max-width:470px){
	#enquete .main{width:90%;}
}


		#enquete .main ol{
			margin:30px 0 40px;
		}

		#enquete .main ol li{
			padding:30px 0 15px 20px;
			border-bottom:1px dashed #ccc;
			position:relative;
			left:-10px;
			}
		#enquete .main ol li:nth-of-type(1){
			border-top:1px dashed #ccc;
		}
	
			#enquete .main li label{
				color:#c33;
				font-weight:500;
			}
	
			#enquete .main #q1{
				max-width:480px;
				width:90%;
				margin:20px 0;
				padding:10px;
				border-radius:5px;
				border:1px solid #ccc;
			}
	
			#enquete .main .q2,
			#enquete .main .q3{
				margin:20px 0;
				border:1px solid #ccc;
			}

			#enquete .main .q4{
				width:30px;
				padding:10px;
				border-radius:5px;
				border:1px solid #ccc;
			}

			#enquete .main .q5{
				padding:10px;
				border-radius:5px;
				border:1px solid #ccc;
			}

			#enquete .main #q5-1{
				width:200px;
			}

			#enquete .main #q5-2{
				width:100px;
			}

			#enquete .main #q5-3{
				width:100px;
			}





				#enquete .remarks{
					margin:10px 0;
					color:#369;
					font-size:0.9em;
				}

				#enquete .remarks.kome{
					margin-left:20px;
				}



	
			#enquete .main ol.marunum li:before{
				font-weight:500;
				color:#c33;
			}
				
				#enquete .modoru{
					display:block;
					max-width:360px;
					width:80%;
					height:50px;
					margin:30px auto;
					color:#fff;
					font-size:1.1em;
					font-weight:500;
					letter-spacing:0.07em;
					text-align:center;
					line-height:50px;
					background-color:#036;
					border-radius:5px;
					cursor:pointer;
					-webkit-transition:opacity 0.3s ease-out;
					-moz-transition:opacity 0.3s ease-out;
					-ms-transition:opacity 0.3s ease-out;
					transition:opacity 0.3s ease-out;
				}
				
				#enquete .modoru:hover{
					filter:alpha(opacity=80);
					-moz-opacity:0.80;
					opacity:0.80;
				}
			
			
					#enquete #thanksnote{
						width:90%;
						margin:20px auto;
						
					}