/* common style
------------------------------------------------------------*/

@media screen and (min-width: 769px) {
.headerTop.changeNav{ opacity:100%}
}

.contact_spa_01{ margin-top:30%; clear:both;}

.contact_spa_02{ padding-top:2%;}

.contact_spa_03{ margin-top:4%; clear:both;}

.footer_color{ padding:3%; background-color:#d0dce8}


@media screen and (min-width: 769px) {
	
	.contact_spa_01{ margin-top:8%;}
	
.contact_spa_02{ padding-top:0}
}

/* #header_contact
------------------------------------------------------------*/

#header_contact{
	position:relative;
	background: url(../img/contact/contact_mv.jpg) no-repeat 40% 100% ;
	background-size:cover;
	-webkit-background-size: cover;
}


#header_contact #slogan{
	color: #fff;
	line-height: 1.2;
	text-align: center;
	padding:13% 0 5% 0;
}

#header_contact #slogan h1{
	font-size:500%;
	font-weight:bold;
	text-shadow:  3px 3px 10px rgba(0,0,0,.9);
}


@media screen and (max-width:767px) {
#header_contact{
	background: url(../img/contact/contact_sp_mv.jpg) no-repeat 100% 100%;
	background-size: cover;
	-webkit-background-size: cover;
}
#header_contact #slogan{padding:30% 0 20% 0;
}
#header_contact #slogan h1{
	font-size:300%;
	font-weight:bold;
}
}

/* .inner 
------------------------------------------------------------*/

.inner{
	width: 94%;
	margin: 0 auto;
}

/* RESPONSIVE*/
@media only screen and (min-width: 1200px){
	.inner{
		width:1350px;
	}
}

.inner h2{
	margin:15% 3% 13% 3% ;
	font-size:180%;
	font-weight: bold;
}

@media screen and (min-width:800px) {
	.inner h2{
		font-size:250%;}
}

 .inner .secTtlEng {
 display: block;
 font-size:1.6rem;
 font-weight: normal;
 color:#003268;
 font-family:"Roboto",sans-serif;
 margin:-3% 0 0 0;
}

.inner h3{
	background-color:#f2f2f2;
	padding: 1.5% 3%;
	font-size: 180%;
	font-weight: bold
}

.inner h4{
	margin:4% 0 3% 0;
	font-size: 180%;
	font-weight: bold;
	position:relative;
}


.inner h4:after{
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:2px;
 width:100px;
 text-align:left;
 background:#003366
}

.inner img{
	float:none;
	clear: both;
	margin:6% 0 0 0;
	width:100%;
}

.inner p{
	font-size: 100%;
	overflow: auto;
}

.inner .container{ margin: 0 0}


@media screen and (min-width:800px) {
	
 .inner h2{	margin: 9% 3% 3% 3% ;}


.inner .secTtlEng {
	display: inline;
	margin: 0 0 0 3%;
	vertical-align: middle;}
	
.inner h4{
	margin:0 0 2% 0;
}


.inner img{
	float: right;
	clear: right;
	width:auto;
	margin:0 0 0 5%
}

.inner .container{ margin:5% 5% 0 5%}
}

/* .tbl01 
------------------------------------------------------------*/

.inner .tbl01 tr th {padding-left:0%;}	
.inner .tbl01 tr td {  padding-right:0%}	
	
.inner .tbl01 tr th { font-size: 120%; }	

.inner .tbl01 th { border-bottom:none;}

.inner form{ margin:5% 2% 0 2%}

input{
		width:100%;
	  height:auto;
	  padding-left: 2%;
}


textarea{
		width:100%;
	  padding:2% 0 0 2%;
	
}

input, textarea {
	font-size: 100%;
	font-family:"メイリオ",Meiryo,Droid Sans,Roboto,HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Lucida Grande","Lucida Sans","Lucida Sans Unicode","Trebuchet MS","ＭＳ Ｐゴシック","MS PGothic",sans-serif;}

.inner .tbl01 tr th {vertical-align: top}


.container dl{
	background-color:#d0dce8;
	font-size:100%;
	margin:0 0;
	padding:4% 2%;
	text-align: center;
	line-height:160%;
}

.container dl dt{ display: block}

.container dl dt:first-child{margin-right:0% }

.container dl span{color:#003260; font-size:150%; margin-left:2%   }

@media screen and (min-width:1100px) {
	
.container dl{
	font-size:150%;
	margin:0 10%;
	padding:4% 2%;}
	
.container dl dt{ display: inline}

.container dl dt:first-child{margin-right:12% }
	
	.inner form{margin:5% 18% 0 18%}

	
}
@media screen and (min-width:800px) {
	
.inner .tbl01 tr th {
	width:25%; 
	padding-left:3%; 

	border-bottom:1px solid #d1dded;
	}	
.inner .tbl01 tr td {  padding-right:3%}

.inner .tbl01 tr th { font-size: 150%; }	

	
input, textarea {font-size: 150%;}
	
input{height:55px;}

}


@media screen and (max-width:800px) {
	
.inner .tbl01 tr th,
.inner .tbl01 tr td {
 text-align:left;
 display:block;
 width:100%;}	
.inner .tbl01 tr th{
 padding:3% 0 0 0;
}
.inner .tbl01 tr td {
 padding:1% 0 7% 0;
}

.footer .footerNav ul li {border-bottom:none!important;}

}