@charset "utf-8";

.u-mv:before {
	background: url(../../img/contact/pc/bg-mv.jpg) no-repeat center;
	background-size: cover;
}


.sec h2{
	font-size: 27px;
	text-align: left;
}
@media screen and (max-width: 768px){
	.sec h2{
		font-size: 18px;
		text-align: center;
	}
}

/*  #telContact
--------------------------------------------------*/

#telContact {
	padding-top: 60px;
	padding-bottom: 80px;
}
	#telContact h2{
		margin-bottom: 48px;
	}
	.telBox{
		max-width: 560px;
		border: solid 1px #ccc;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 32px 10px 26px;
	}
		.telBox .tel{
			max-width: 300px;
			width: 100%;
			display: block;
			margin: 0 auto 17px;
		}
		.telBox p{
			text-align: center;
			line-height: 1;
		}
@media screen and (max-width: 768px){
	#telContact {
		padding-top: 30px;
		padding-bottom: 40px;
	}
		#telContact h2{
			margin-bottom: 20px;
		}
}

/*  #mailContact
--------------------------------------------------*/

#mailContact {
	padding-top: 73px;
	padding-bottom: 100px;
}
	#mailContact h2{
		margin-bottom: 33px;
	}

@media screen and (max-width: 768px){
	#mailContact {
		padding-top: 30px;
		padding-bottom: 40px;
	}
		#mailContact h2{
			margin-bottom: 15px;
		}
		#mailContact h2 + p{
			text-align:justify;
		}
}


/*  #mailform
--------------------------------------------------*/
#mailform{}


.formWrap{
	padding: 80px 0 40px; 
}
	.formWrap .inner{
		max-width: 880px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
		.formWrap .contact_tb{
		}
			/* tr */
		    .formWrap .contact_tb .type{
		    }
		    .formWrap .contact_tb .name{
		    }
		    .formWrap .contact_tb .name-phonetic{
		    }
		    .formWrap .contact_tb .c-address{
		    }
		    .formWrap .contact_tb .mail{
		    }
		    .formWrap .contact_tb .tel{
		    }
		    .formWrap .contact_tb .message{
		    }
		       	/* th（タイトル）*/
		       	.formWrap .contact_tb th{
			        text-align: left;
			        position: relative;
			        padding-left: 70px;
			        width: 260px;
			        font-size: 16px;
			        box-sizing: border-box;
			        line-height: 50px;
			    }
			    .formWrap .contact_tb .type th{
			    }
			    .formWrap .contact_tb .name th{
			    }
			    .formWrap .contact_tb .name-phonetic th{
			    }
			    .formWrap .contact_tb .c-address th{
			    }
			    .formWrap .contact_tb .mail th{
			    }
			    .formWrap .contact_tb .tel th{
			    }
			    .formWrap .contact_tb .message th{
			    	vertical-align: top;
   					padding-top: 36px;
   					line-height: 1;
			    }
			   
			    /* ----------------------------------- 必須のマーク（trにclass="required"） */
		        .contact_tb .required th:before{
		            content: "";
		            position: absolute;
		            /*top: 0;*/
		            top: 26px;
		            /*bottom: 0;*/
		            left: 0;
		            margin: auto;
		            width: 50px;
		            height: 30px;
		            background: url(../../img/contact/pc/icon_required.jpg) no-repeat center center/cover;
		        }
		        	/*個別*/
		        	.contact_tb .required.type th:before{
			        	top: 13px;
			        }
			        .contact_tb .required.message th:before{
			        	top: 30px;
			        }
			   
		        /* 必須のマーク ----------------------------------- */


			    /* td（入力欄）*/
			    .formWrap .contact_tb td{
			        width: 620px;
			        padding: 16px 0;
			        box-sizing: border-box;
			    }
			    .formWrap .contact_tb .type td{
			    }
			    .formWrap .contact_tb .name td{
			    }
			    .formWrap .contact_tb .name-phonetic td{
			    }
			    .formWrap .contact_tb .c-address td{
			    	display: block;
			    }
			    .formWrap .contact_tb .c-address td:nth-of-type(1){
			    }
			    .formWrap .contact_tb .c-address td:nth-of-type(2){
			    	padding-top: 14px;
			    }
			    .formWrap .contact_tb .c-address td.zip{
			    }
			    .formWrap .contact_tb .mail td{
			    }
			    .formWrap .contact_tb .tel td{
			    }
			    .formWrap .contact_tb .message td{
			    }

			    	/* input・textarea（入力欄）*/
			    	.formWrap .contact_tb td input{
				        max-width: 620px;
					    width: 620px;
					    height: 50px;
					    padding: 0;
					    box-sizing: border-box;
					    border: solid 1px #b3b3b3;
					    padding-left: 20px;
				    }
				    .formWrap .contact_tb td input:focus,
				    .formWrap .contact_tb td textarea:focus  {/*　入力エリア選択後の装飾　*/
					    border-color: #b3b3b3;   /* 枠線の色 */
					    background-color: #fff;  /* 背景色 */
					    outline: none;           /* ブラウザが標準で付加する線を消したいとき */
					}
					.formWrap .contact_tb td input:-webkit-autofill {
					    -webkit-box-shadow: 0 0 0px 1000px white inset;/* 文字入力後の背景色 */
					}
				    .formWrap .contact_tb .name td input{
				    	width: 380px;
				    }
				    .formWrap .contact_tb .name-phonetic td input{
				    	width: 380px;
				    }
				    .formWrap .contact_tb .c-address td input{
				    }
				    .formWrap .contact_tb .c-address td.zip input{
				    	width: 234px;
				    }
				    .formWrap .contact_tb .mail td input{
				    	width: 380px;
				    }
				    .formWrap .contact_tb .tel td input{
				    	width: 380px;
				    }
				    .formWrap .contact_tb .message td textarea{
				    	width: 100%;
				    	height: 200px;
				    	box-sizing: border-box;
				    	padding: 20px;
				    }

				    /* チェックボックスカスタマイズ （個人情報取扱同意含む）*/
				    .formWrap .contact_tb .type td .horizontal-item,
				    .agreeBtn .horizontal-item{
				    	 margin-left: 36px;
				    }
				    .formWrap .contact_tb .type td .horizontal-item:first-child{
				    	 margin-left: 0;
				    }
				    .formWrap .contact_tb .type label,
				    .agreeBtn label{
				        position: relative;/* ＜label＞を位置の指標になる指示を書きます*/
				        display: inline-block;
				       	padding-left: 30px;
				        cursor: pointer;
				    }
					    .formWrap .contact_tb .type td input[type="checkbox"],
					    .formWrap .contact_tb .type td .typeCheck,
					    .agreeBtn input[type="checkbox"]{
					    	display: none;
					    }
				    
					    .formWrap .contact_tb .type td .typeCheck + span:before,/* ＜span＞タグの疑似要素を作ります*/
					    .formWrap .contact_tb .type td .typeCheck + span:after,
					    .agreeBtn .agree + span:before,
					    .agreeBtn .agree + span:after {
					        position: absolute;
					        content: '';
					        top: 50%;
					        -webkit-transition: all .2s;
					        transition: all .2s;
					    }
					    .formWrap .contact_tb .type td .typeCheck + span:before,
					    .agreeBtn .agree + span:before  {
					        left: 0;
				            top: 0px;
						    bottom: 0;
						    margin: auto;
					        width: 20px;
					        height: 20px;
					        background: transparent;/* チェックボックスの元の色の指定*/
					        border: 1px solid #b3b3b3;
					    }
					    .formWrap .contact_tb .type td .typeCheck + span:hover:before {
					        background: #fff;/* チェックボックスのマウスオーバーしたときの色の指定*/
					    }
					    .formWrap .contact_tb .type td .typeCheck + span:after,
					    .agreeBtn .agree + span:after {
					        opacity: 0;
					        display: block;
							content: "";
							position: absolute;
							top: .5em;
							left: 6px;
							width: 8px;
							height: 3px;
							border-left: 2px solid #000;
							border-bottom: 2px solid #000;
							-webkit-transform: rotate(-45deg);
							transform: rotate(-45deg);
					    }
					    .formWrap .contact_tb .type td .typeCheck:checked + span:before {
					        border: 1px solid #b3b3b3;/* チェックボックスのチェックした時の枠の指定　*/
					    }
					    .formWrap .contact_tb .type td .typeCheck:checked + span:after,
					    .agreeBtn .agree:checked + span:after {
					        opacity: 1;/*　チェックマークの表示　*/
					    }

					/* 郵便番号 */

					.formWrap .contact_tb .c-address td.zip span:nth-child(1){
				    	margin-right: 13px;
				    }
				    .formWrap .contact_tb .c-address td.zip #zipBtn{
				    	cursor: pointer;
				    	margin-left: 21px;
				    	background-color: #000;
				    	color: #fff;
				    	text-align: center;
				    	line-height: 40px;
				    	padding: 0 15px;
				    	display: inline-block;
				    }

	   				/* ラジオボタンカスタマイズ */
				    .formWrap input[type="radio"]{
				        width: 25px;
				        height: 25px;
				        border-radius: 50%;
				    }
					    .formWrap input[type="radio"]:checked{
					        border: 6px solid #0d94a2;
					    }



@media screen and (max-width: 1000px){
	.formWrap .inner{
		margin-left: 0;
		margin-right: 0;
	}
		.formWrap .contact_tb th {
		    display: block;
		}
		.formWrap .contact_tb .message th {
			padding-top: 0;
		    line-height: 50px;
		}
		.formWrap .contact_tb td {
		    display: block;
		}

		/* ----------------------------------- 必須のマーク */
    	.contact_tb .required th:before{
           top: 10px;
        }
    	.contact_tb .required.type th:before{
        	top: 10px;
        }
        .contact_tb .required.message th:before{
        	top: 10px;
        }
        /* 必須のマーク -----------------------------------　*/
					    
}
	

@media screen and (max-width: 768px){
	.formWrap {
	    padding: 10px 0px 20px;
	}
		.formWrap .inner{
			max-width: 560px;
			margin-left: auto;
			margin-right: auto;
		}
		.formWrap .contact_tb{
		     display: block; 
		}
			.formWrap .contact_tb tbody {
			     display: block; 
			}
				.formWrap .contact_tb tr{
					display: block;
					margin-top: 20px;
			    }
			    .formWrap .contact_tb td {
			    	max-width: 560px;
				    width: 100%;
				  	padding: 5px 0 15px;
				}
				.formWrap .contact_tb .c-address td.zip {
				    padding-bottom: 0;
				}

					/* input・textarea（入力欄）*/
					.formWrap .contact_tb td input {
					    max-width: 560px;
					    width: 100%;
					    height: 40px;
					    border: solid 1px #b3b3b3;
					    padding-left: 10px;
					}
					.formWrap .contact_tb .name td input{
				    	max-width: 380px;
				    	width: 100%;
				    }
				    .formWrap .contact_tb .name-phonetic td input{
				    	max-width: 380px;
				    	width: 100%;
				    }
				    .formWrap .contact_tb .c-address td.zip input{
				    	max-width: 171px;
				    	width: 100%;
				    }
				    .formWrap .contact_tb .mail td input{
				    	max-width: 380px;
				    	width: 100%;
				    }
				    .formWrap .contact_tb .tel td input{
				    	max-width: 380px;
				    	width: 100%;
				    }
					.formWrap .contact_tb .c-address td.zip #zipBtn {
					    display: block;
					    width: 210px;
					    margin-top: 20px;
					    margin: 10px 0;
					}
					.formWrap .contact_tb .message td textarea {
					    border: solid 1px #b3b3b3;
					}

					/* チェックボックスカスタマイズ （個人情報取扱同意含む）*/
				    .formWrap .contact_tb .type td .horizontal-item,
				    .agreeBtn .horizontal-item{
				    	 margin-left: 5px;
				    }
				    .formWrap .contact_tb .type td .typeCheck + span:before, 
				    .agreeBtn .agree + span:before {
					    width: 16px;
					    height: 16px;
					}
					.formWrap .contact_tb .type td .typeCheck + span:after,
				    .agreeBtn .agree + span:after {
				        left: 4px;
				    }
}


/* #privacy ----------------------------------- */

#privacy {
	height: 182px;
	overflow-y: scroll;
	width: 100%;
	background-color: #fff;
	padding: 37px 60px 0;
	box-sizing: border-box;
	margin-bottom: 60px;
	margin-top: 15px;
}
	#privacy h3{
		line-height: 2.1875;
		font-size: 16px;
	}
	#privacy p{
		margin-bottom: 35px;
	}		

@media screen and (max-width: 768px){
	 #privacy {
	    height: 160px;
	    width: 100%;
	    padding: 30px 20px 20px;
	    margin-bottom: 30px;
	}
		#privacy h3{
			line-height: 1.8;
			text-align: center;
			margin-bottom: 15px;
		}
		#privacy p{
			text-align:justify;
		}

}

/* .agreeBtn ----------------------------------- */

.agreeBtn{
	text-align: center;
}


/* .valueBtn ----------------------------------- */

.valueBtn{
	text-align: center;
	max-width: 840px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 0;
}
	.valueBtn .btn{
		max-width: 400px;
		width: 100%;
		/*display: inline-block;*/
		display: inline;
		position: relative;
	}
	.valueBtn .btn + .btn{
		margin-left: 4.7619%;
	}
	.valueBtn input{
		max-width: 400px;
		width: 47.6190%;
		background-color: #000;
		color: #fff;
		line-height: 60px;
		font-size: 18px;
		transition: .3s;
		padding: 0;
		box-sizing: border-box;
	}
	.valueBtn input:hover{
		opacity: .7;
	}
	.valueBtn .btn:after, 
	.valueBtn .btn:before {
	    position: absolute;
	    top: -15px;
	    bottom: 0;
	    right: 0;
	    margin: auto;
	    content: "";
	    vertical-align: middle;
	}
	.valueBtn .btn:after{
	    right: 35px;
	    width: 10px;
	    height: 10px;
	    border-top: 1px solid #fff;
	    border-right: 1px solid #fff;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	.valueBtn .backBtn:after{
	    left: 35px;
	    right: auto;
	    -webkit-transform: rotate(-135deg);
	    transform: rotate(-135deg);
	}
	.valueBtn input + input{
		/*margin-left: 40px;*/
	}
	.valueBtn input[type="submit"][disabled] {
	    opacity: .4;
	    cursor: default;
	}

@media screen and (max-width: 768px){
	.valueBtn{
		max-width: 280px;
	}
		.valueBtn .btn{
			max-width: 280px;
			display: block;
		}
		.valueBtn .btn + .btn{
			margin-left: 0;
			margin-top: 10px;
		}
		.valueBtn .btn:after, 
		.valueBtn .btn:before {
		    top: 0;
		}
		.valueBtn .btn:after{
		    width: 6px;
		    height: 6px;
		}
		.valueBtn input{
			max-width: 280px;
			width: 100%;
			line-height: 50px;
			font-size: 16px;
		}
}
/* エラーメッセージ ----------------------------------- */

.mw_wp_form .error {
	font-size : 14px;
	margin-top: 10px;
}


/* 確認画面 ----------------------------------- */

#mailContact .desc .ika{
	font-size: 24px;
	text-align: center;
}
.mw_wp_form_confirm .formWrap{
	padding: 30px 0 50px; 
}
	.mw_wp_form_confirm .formWrap .contact_tb th{
		padding-left: 0;
	}
		.mw_wp_form_confirm .contact_tb .required th:before{
	 		display: none;
	 	}
	.mw_wp_form_confirm .formWrap .contact_tb td{
		border: solid 1px #b3b3b3;
	    line-height: 50px;
	    height: 50px;
	    padding: 0 20px;
	    margin: 20px 0;
	    display: block;
	}
	.mw_wp_form_confirm .formWrap .contact_tb .message td{
		height: auto;
		line-height: 2;
		padding: 20px;
	}
	.formWrap .contact_tb .c-address td:nth-of-type(2) {
	     padding-top: 0; 
	}
@media screen and (max-width: 1000px){
	.mw_wp_form_confirm .formWrap .contact_tb td {
	    margin: 0px 0 15px;
	}
}
@media screen and (max-width: 768px){
	#mailContact .desc .ika{
		font-size: 16px;
	}
	.mw_wp_form_confirm .formWrap{
		padding: 0 0 30px; 
	}
		.mw_wp_form_confirm .formWrap .contact_tb td {
		    line-height: 40px;
		    height: 40px;
		    margin: 0 0 10px;
		}
}

/* 送信完了画面 ----------------------------------- */

.complete{

}
	.complete .thanks{
		font-size: 26px;
		text-align: center;
		margin-bottom: 40px;
		line-height: 2;
	}
	.complete .topBack{
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
		line-height: 60px;
		font-size: 18px;
	}
		.complete .topBack a{
			display: block;
			color: #fff;
			position: relative;
			text-align: center;
			background-color: #000;
			transition: .3s;
		}
		.complete .topBack a:hover{
			opacity: .7;
		}
		.complete .topBack a:after, 
		.complete .topBack a:before {
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    margin: auto;
		    content: "";
		    vertical-align: middle;
		}
		.complete .topBack a:after{
		    left: 35px;
		    width: 10px;
		    height: 10px;
		    border-top: 1px solid #fff;
		    border-right: 1px solid #fff;
		    -webkit-transform: rotate(-135deg);
		    transform: rotate(-135deg);
		}

@media screen and (max-width: 768px){
	.complete .thanks{
	    font-size: 18px;
	    text-align: center;
	    margin-bottom: 20px;
	    line-height: 1.8;
	}
		.complete .topBack a:after{
		    width: 6px;
		    height: 6px;
		}
}