@charset "UTF-8";
/* CSS Document */

html {	
	font-size:0px;
	line-height:0px;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;

}
body {	
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	color: #333333;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 28px;
	line-height: 2.8rem;
}
@media (max-width: 991px) {
html {
	font-size: 55%!important;
	}
}
@media (max-width: 575px) {
html {
	font-size: 50%!important;
}
}



a:link{
	text-decoration: none;
}

.container{
	max-width: 940px;
}
body{
	background-image: url(../images/cmn_bg_gra02.jpg);
}
header{
	background: #ffffff;
	padding: 1.5rem 0.5rem;
	border-bottom: 1px solid #00B6FF
}
@media (max-width: 767px) {
	header .contact-img{
		display: none;
	}
}
footer p{
	background: #ffffff;
	text-align: center;
	font-size: 1rem;
	letter-spacing: 1px;
	padding: 1rem 0;
	border-top: 1px dotted #333;
}
footer p span{
	margin: 0 auto;
}

article{
	background:#ffffff;
	padding: 3rem;
}
article h2{
	text-align: center;
	font-size: 25px;
	font-size: 2.5rem;
	letter-spacing: 2px;
	font-weight: bold;
	margin-bottom: 3rem;
}
article h2 span{
	display: block;
	font-size: 70%;
	padding-top: 0.5rem;
	color: #00A0FF;
}


/* contactForm */

.contact-type input{
	display: none;
}
#contact dl{
	font-size: 0;
}
#contact dt{
	display: inline-block;
	width: 30%;
	vertical-align: top;
	font-size: 16px;
	font-size: 1.6rem;
	border-top: 1px dashed #b3b3b3;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	line-height: 25px;
	line-height: 2.5rem;
}
#contact dt span{
	display: block;
	font-size: 80%;
	color: #f15a24;
	font-weight: 400;
}
#contact dd{
	display: inline-block;
	width: 70%;
	font-size: 14px;
	font-size: 1.4rem;
	border-top: 1px dashed #b3b3b3;
	padding-top: 2.5rem;
	margin-top: 1.5rem;
}
#contact dd input, #contact dd textarea {
	border: 1px solid #999;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 9px;
	padding: 5px;
	border-radius: 5px;
	background-color: #f9f9f9;
}
#contact dd .addr1{
	width: 20%;
}
#contact dd .addr2{
	width: 25%;
}
#contact dd .button {
	display: inline-block;
	padding: 0px 10px;
	color: #fff;
	background-color: #00A0FF;
	margin-bottom: 10px;
	border-radius: 5px;
	cursor: pointer;
}
#contact .toi_h, #contact .toi_d{
	display: none;
}
#contact dd select{
	padding: 10px;
	font-size: 16px;
	font-size: 1.6rem;
	height: 4rem;
}
.contact-type div{
	display: block;
}
.contact-type div.recruit{
	border-top: 1px solid #ccc;
	padding-top: 1rem;
	margin-top: 0.5rem;
}
.contact-type input[type="radio"] + label, .contact-type input[type="checkbox"] + label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 20px;
	padding: 10px 20px;
	border-radius: 2px;
	color: #3e4956;
	font-size: 14px;
	text-align: center;
	line-height: 1;
}
.contact-type input[type="radio"] + label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #bdc3c7;
	border-radius: 50%;
}
.contact-type input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #00A0FF;
}
.contact-type input[type="checkbox"] + label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #bdc3c7;
	border-radius: 5px;
}
.contact-type input[type="checkbox"]:checked + label:after {
	position: absolute;
	content: url(img/contact-check.png);
	top: -7px;
	bottom: 0;
	left: -8px;
	margin: auto;
	width: 10px;
	height: 10px;
}


@media (max-width: 575px) {
	#contact form > dl dt{
		width: 100%;
		display: block;
		background-color: #CCC;
		padding: 1rem;
		border-top: 0px;
	}
	#contact form > dl dd{
		width: 100%;
		display: block;
		border-top: 0px;
		padding-top: 0rem;
	}
	#contact form > dl dt span{
		display: inline;
	}
	
	#contact .note h3{
		font-size: 2rem;
	}
	#contact .note dd, #contact .note dt{
		line-height: 170%;
		font-size: 1.6rem;
	}
}



#contact .note{
	border: 1px solid #cccccc;
	padding: 2rem;
	margin: 3em auto 5em;
}
#contact .note dl{
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 20px;
	line-height: 2rem;
	margin-top: 1em;
	font-weight: 400;
}
#contact .note dl dt{
	display: block;
	width: 100%;
	padding: 1rem 0 0;
	margin-top: 1rem;
}
#contact .note dl dd{
	display: block;
	width: 100%;
	border: none;
	padding-top: 0;
	margin: 0;
}
.submit_button{
	padding: 0.5rem 5rem;
	font-size: 20px;
	font-size: 2rem;
	background-color: #00A0FF;
	border: 0;
	border-radius: 50px;
	color: #ffffff;
	text-shadow: 2px 2px 0 #0064A0;
}
.submit_button:hover{
	background-color: #0064A0;
}

/* 子ページ */
#body dt{
	display: inline-block;
	width: 30%;
	color: #0064A0;
	border-top: solid #ccc 1px;
	text-align: left;
	padding: 1.5rem;
	vertical-align: top;
}
#body dd{
	display: inline-block;
	width: 60%;
	border-top: solid #ccc 1px;
	text-align: left;
	padding: 1.5rem;
	vertical-align: top;
}
.msg{
	color: #c1272d;
}
@media (max-width: 575px) {
#body dt{
	display: block;
	width: 100%;
	border-top: 0;
	background-color: #cccccc73;
	text-align: center;
	padding: 0.5rem;
}
#body dd{
	display: block;
	width: 100%;
	border-top: 0;
	text-align: center;
	padding: 0.5rem 0	2rem 0;
}
	#contact dd input{
		padding: 0.5em;
	}
	#contact dt, #contact dd{
		font-size: 16px;
	}
}