@charset "utf-8";

/*
 contact.php
==================================== */

.base {
	width: calc(100% - 20px);
	max-width: 1080px;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 767px) {
		.base {
			width: 100%;
			max-width: 100%;
			padding: 0 15px;
		}
	}

div#contact {
	width: 100%;
	box-sizing: border-box;
	border-spacing: 0 20px !important;
	border-collapse: separate !important;
	margin: 40px auto;
}
	
div#contact dl {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
}
	
	div#contact dl dt {
		width: 250px;
		line-height: 140%;
		background-color: #C30D24;
		padding: 12px 15px 10px 15px;
		border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		float: left;
	}
		
		div#contact dl dt.must {
			width: 205px;
			padding: 10px 60px 8px 15px;
			position:relative;
		}
		
		div#contact dl dt.must::after {
			content:'必須';
			position:absolute;
			top:8px;
			right:10px;
			display:block;
			width:50px;
			height:22px;
			line-height:24px;
			background-color:#fff;
			color:#C30D24;
			font-size:0.85em;
			font-weight:bold;
			letter-spacing:5px;
			text-indent:5px;
			text-align:center;
		}

	div#contact dl dd {
		width: calc(100% - 320px);
		padding: 2px 0 8px 0;
		margin: 0 0 0 40px;
		font-size: 1.6rem;
		font-size: 16px;
		line-height: 140%;
		float: left;
	}
	
		div#contact dl dd input[type=text],
		div#contact dl dd input[type=tel],
		div#contact dl dd input[type=mail],
		div#contact dl dd textarea {
			padding: 8px 5px;
			width: calc(100% - 14px);
		}
		
		div#contact dl dd input[type=text].min,
		div#contact dl dd input[type=tel].min,
		div#contact dl dd input[type=mail].min {
			max-width: 80px;
		}
		
		div#contact dl dd input[type=text].mid,
		div#contact dl dd input[type=tel].mid,
		div#contact dl dd input[type=mail].mid {
			max-width: 300px;
		}
		
		div#contact dl dd textarea {
			min-height: 8.4em;
		}

		div#contact dd span {
			display:inline-block;
			margin: 0 0 0 10px;;
			font-size: 0.85em;
			color: #707070;
		}

div.button_box{
	letter-spacing:-0.4em;
	text-align:center;
}

	div.button_box a.bt,
	div.button_box a.bt:link{
		display:inline-block;
		margin:0 20px;
	}
	
div#contact > p{
	text-align:center;
	margin:20px auto;
}

@media screen and (max-width: 755px) { 
	div.button_box a.bt,
	div.button_box a.bt:link{
		width:calc(100% - 22px);
		max-width:278px;
		display:inline-block;
		margin:10px 20px;
	}
}

@media screen and (max-width: 700px) { 
	div#contact dl dt {
		width: calc(100% - 30px);
		margin:10px auto 20px auto;
		float:none;
	}
	div#contact dl dt.must {
		width: calc(100% - 75px);
	}
	
	div#contact dl dd {
		width: 100%;
		margin:10px auto 20px auto;
		float:none;
	}
	
	
}




/*ラジオボタン*/
#contact input[type=radio],
#contact input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
}
#contact input[type=radio] + label,
#contact input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	line-height: 30px;
	cursor: pointer;
}
 
@media (min-width: 1px) {
	#contact input[type=radio],
	#contact input[type=checkbox] {
		display: none;
		margin: 0;
	}
	#contact input[type=radio] + label,
	#contact input[type=checkbox] + label {
		padding: 0 0 0 24px;
	}
	#contact input[type=radio] + label::before,
	#contact input[type=checkbox] + label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background: #FFF;
	}
	#contact input[type=radio] + label::before {
		border: 2px solid #ccc;
		border-radius: 30px;
	}
	#contact input[type=checkbox] + label::before {
		border: 2px solid #ccc;
	}
	#contact input[type=radio]:checked + label::after,
	#contact input[type=checkbox]:checked + label::after {
		content: "";
		position: absolute;
		top: 50%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	#contact input[type=radio]:checked + label::after {
		left: 5px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		background: #C30D24;
		border-radius: 8px;
	}
}