/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/* ==========================================================================
   contact 共通要素
   ========================================================================== */
p,a,dt,tr,td,h1,h2,h3,h4,input,label,small{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.contact{
	margin: 0;
}

.header__inner{
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}
.header__inner h1{
	max-width: 288px
}

@media (max-width:750px) {
.header__inner h1{
	width: 100%;
	max-width: 180px;
	margin: 10px;
}	
}

.contact .contact__ttl {
	margin: 0;
	font-size: 30px;
	padding: 30px 20px 30px 20px;
	line-height: 1.4;
	text-align: center;
	background: #00627c;
	color: #fff;
	font-weight: bold;
}

.contact__inner{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1060px;
	width: 100%;
	margin-bottom: 100px;
	padding: 50px 50px 0 50px;
}

.contact__txt{
	text-align: center;
}	

footer{
	text-align: center;
	background: #f6f4f1;
	padding: 30px 20px 10px 20px;
}

footer p{
	max-width: 300px;
    margin: 0 auto;
	padding-bottom: 30px;
}

@media (max-width:750px) {
		
	.contact__inner{
		margin-bottom: 60px;
		padding: 30px 20px 0 20px;
	}
	
	.contact .contact__ttl {
		font-size: 20px;
		font-weight: bold;
	}
	footer p{
		width: 100%;
		max-width: 240px;
		padding-bottom: 20px;
	}

	
}


/* ==========================================================================
   contact input
   ========================================================================== */

/* --------------------- input form ---------------------*/

.formGroup__Label span{
	color: #cc6600;
	padding-left: 10px;
	font-size: 0.8em;
}

.contact .contact__form{
	width: 100%;
	margin-top: 60px;
}
.formGroup__Label{
	width:30%;
	padding:15px 50px 40px 0;
	vertical-align: top;
	text-align: left;
}

.formGroup__input{
	width: 70%;
	padding-bottom: 40px;
}

.formGroup__control{
	width: 100%;
	height: 54px;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
	padding-left:15px;
	font-size: 16px;
}

.formGroup__controlWide{
	width: 100%;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
	padding:15px 0 0 15px;
	font-size: 16px;
}

input::placeholder {
  color: #b3b3b3;
}

input:-ms-input-placeholder {
  color: #b3b3b3;
}

input::-ms-input-placeholder {
  color: #b3b3b3;
}

.formGroup__input .error .comment{
	color: #cc6600;
}

@media (max-width:750px) {
	
	.contact .contact__form{
		margin-top: 50px;
	}
	
	.formGroup__Label{
		display: block;
		width:100%;
		padding:0 0 5px 0;
	}
	
	.formGroup__input{
		display: block;
		width: 100%;
		padding-bottom: 30px;
	}
}

/* --------------------- input privacy ---------------------*/

.privacy {
	text-align: left;
	padding: 20px 30px;;
	background: #f1f1f1;
	}

.privacy span{
	color: #cc6600;
}
/* --------------------- input btn ---------------------*/

.formSubmit{
	text-align: center;
}

.confirm__btn{
	width: 400px;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;	
	margin-top: 50px;
	color: #fff;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 0;
	cursor: pointer;
	background: url(../img/btn_arrow.png) no-repeat right 27px;
	background-size: 10px;
	border: none;
	border-radius: 10px;
}

.formSubmit_inner{
	width: 400px;
	margin: 0 auto;	
	background: #00627c;
	border-radius: 10px;
	padding-right: 20px;
}

.formSubmit img{
	position: absolute;
	top: 0px;
	right: 10px;
	display: block;
}

@media (max-width:750px) {
	.submit__inner img{
		position: absolute;
		top: 30px;
		left: 60%;
	}
	
	.formSubmit{
		text-align: left;
	}
	
	.submit__inner input{
		margin-top: 20px;
	}
}


/* ==========================================================================
   contact confirm
   ========================================================================== */


.alpha{
	width: 100%;
	margin: 100px 0 100px 0;
}

.alpha th{
	width:30%;
	padding:0px 50px 55px 0;
	vertical-align: top;
	text-align: left;
}

.alpha td{
	width: 70%;
	height: 54px;
	vertical-align: top;	
}

.confirm__inner{
	margin: 0 auto;
	width: 1000px;
	padding: 0;
}

/* --------------------- confirmPage sendBtn ---------------------*/

.confirm__send{
	width: 400px;
	margin: 0 auto;	
	background: #00627c;
	border-radius: 10px;
	padding-right: 20px;
}

.send__btn{
	width: 400px;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;	
	margin-top: 20px;
	color: #fff;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 0;
	cursor: pointer;
	background: url(../img/btn_arrow.png) no-repeat right 27px;
	background-size: 10px;
	border: none;
	border-radius: 10px;
}


/* --------------------- confirmPage returnBtn ---------------------*/

.confirm__return{
	width: 400px;
	margin: 0 auto;	
	background: #fff;
	border-radius: 10px;
	padding-left: 20px;
	border:1px solid #00627c;	
}

.return__btn{
	width: 400px;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;	
	color: #00627c;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 0;
	cursor: pointer;
	background: url(../img/btn_arrow_02.png) no-repeat left 27px;
	background-size: 10px;
	border: none;
	border-radius: 10px;
	box-sizing: border-box;
}


/*.confirm__return img{
	position: absolute;
	top: 0px;
	left: 10px;
	display: block;
}*/


@media (max-width:750px) {
	
	.alpha th{
		width:100%;
		padding:0px 0px 5px 0;
		display: block;
	}

	.alpha td{
		width: 100%;
		height: inherit;
		padding:0px 0px 50px 20px;
		display: block;
		box-sizing: border-box;
	}
	
	.alpha{
		margin: 50px 0 0px 0;
	}
	
	.send__btn{
		margin-top: 20px;
	}
	
	.confirm__send img{
		position: absolute;
		top: 50px;
		right: 7%;
	}
}


/* ==========================================================================
   contact finish/error
   ========================================================================== */

h3{
	color: #00627c;;
	font-size: 44px;
	text-align: center;
}

h4{
	color: #00627c;;
	font-size: 30px;
	text-align: center;
}

.contact__btn{
	width: 400px;
	margin: 0 auto;	
	background: #00627c;
	border-radius: 10px;
	padding-left: 20px;
	margin-top:80px;
}

.contact__btn a{
	width: 400px;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;	
	margin-top: 20px;
	color: #fff;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 0;
	cursor: pointer;
	background: url(../img/btn_arrow_03.png) no-repeat left 27px;
	background-size: 10px;
	border: none;
	border-radius: 10px;
	text-decoration: none;
}

/* ==========================================================================
   レイアウト
   ========================================================================== */

.home_parts{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.home_parts label{
	width: 50%;
}

.form_notice{
	display: block;
	font-size: 0.8em;
	color: #000!important;
	padding: 0!important;
}

.privacy_check{
	margin: 0 auto;
	text-align: center;
	margin-top: 50px;
}

@media (max-width:750px) {
	.confirm__btn,
	.formSubmit_inner,
	.confirm__inner,
	.confirm__send,
	.send__btn,
	.confirm__return,
	.return__btn,
	.contact__btn,
	.contact__btn a{
		width: 100%;
		box-sizing: border-box;
	}
	
	.home_parts label{
	width: 50%;
}
	h3{
		font-size: 25px;
	}
	
	footer img{
		width: 70%;
		height: auto;
	}
	.contact-cat label{
		display: inline-block;
		width: 100%;
	}

}