/* 変数設定 */
:root {
	--f-gothic : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--color-red1 : #e60012;
	--color-red2 : #f00;
	--color-red3 : #ad0b1f;
}

.posRel{position:relative;}
.posAbs{position:absolute; top: 0; left:0; width:100%;}

.mailForm{
	padding-top:50px; padding-bottom:50px; margin-top: 95px;
	& .tit {
		font-size: 15px; color: #fff; background: var(--color-red1); margin-bottom:10px; line-height: 27px; padding: 0 0 0 24px; position: relative;
		&:before {
			content: ''; display: block; width: 9px; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; background-color: #3e3a39; border-right: 1px solid #fff;
		}
	}
	&.confirm {
		margin-top: 50px; padding-top: 0;
	}
}

.mailForm .txtRed1{ font-size: 12px; color: var(--color-red1); }
.mailForm .txtRed2{ font-size: 17px; color: var(--color-red1); font-weight: bold; letter-spacing: 0.05em;}
.mailForm .mark{color: var(--color-red1);}
.mailForm .pd-1{padding: 15px 25px 15px 42px;}

#frame-1{margin: 30px auto;}

.mailForm .txt{font-size:12px; margin-bottom:20px;}
.mailForm .note{color:var(--color-red2);}
.mailForm .arr{
	width: 0;
    height: 0;
	border-left: 23px solid transparent;
	border-right: 23px solid transparent;
	border-top: 25px solid #9fa0a0;
	margin: 30px auto 0;
}

.mailForm table {
	border-spacing: 0 8px; border-collapse: separate; margin-bottom:15px; width:100%; font-size: 12px;
}

.mailForm tr{position: relative;}

.mailForm th {
	width: 290px;
	font-family: inherit;
	color: #222;
	text-decoration: none;
	background-color: #dcdddd;
	padding: 11px; 
	text-align:center; 
	font-weight:bold;
	box-sizing: border-box;
	letter-spacing: 0.05em;
}
.mailForm td {
	background-color: #FFF;
	font-family: inherit;
	color: #222;
	text-decoration: none;
	box-sizing: border-box;
	border: 2px solid #dedfdf;
	padding: 11px 11px 11px 28px;
	position: relative;
	&.error_messe {
		color: var(--color-red1); font-weight: bold;
	}
	& p {
		display: block;
	}
}
.mailForm td:before{content: ''; display: block; width: 8px; height: 100%; position: absolute; top: -2px; left: -2px; bottom: -2px; border: 2px solid #fff;}
.mailForm td:after{content: ''; display: block; width: 2px; height: 100%; position: absolute; top: 0; left: 10px; bottom: 0; background-color: #dedfdf;}
.mailForm td input {
	&[type=text],&[type=tel],&[type=email] {
		width: 100%; border: none; box-sizing: border-box; font-size:12px; font-family: var(--f-gothic); }
}

.mailForm table tr:nth-of-type(1) td{font-size: 14px;}
.mailForm table tr:nth-of-type(1) td label:first-of-type{margin: 0 50px 0 0;}
.mailForm table tr:nth-of-type(1) input[type=radio]{position: absolute; visibility: hidden; -webkit-appearance: none;}
.mailForm td input[type=file] {
	display: inline-block; background: #f1f1f1; padding: 5px; min-width: 280px;
	
}
.mailForm td {
	& .fileinputWrap {
		& + button[type=button] {
			display: none;
			&.active {
				display: inline-block;
				+ p.txt1 {
					float: none; width: 100%; margin: 10px 0 0 0;
				}
			}
		}
	}
}
.mailForm table tr:nth-of-type(1) label{display: inline-block; position: relative; padding: 0 0 0 32px; z-index: 9; cursor: pointer;}
.mailForm table tr:nth-of-type(1) .check{display: block; position: absolute; 
	height: 21px;
	width: 21px;
	border: 1px solid #dedfdf;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 5;
}
.mailForm table tr:nth-of-type(1) input[type=radio]:checked ~ .check {opacity: 0.8;}
.mailForm table tr:nth-of-type(1) input[type=radio]:checked ~ .check::before{display: block;}

.mailForm table .check::before {display: none; position: absolute; content: ''; border-radius: 100%; height: 18px; width: 18px; top: 0; left: 3px;
	background: url(../../mail/images/tick.png) no-repeat top center;
	-webkit-background-size: 18px 18px;
	background-size: 18px 18px;
}

.mailForm tr:nth-of-type(10) td p > input[type=text]{width: 180px; line-height: 22px; border: 1px solid #dedfdf; margin: 0 10px 10px 10px;}
.mailForm tr:nth-of-type(10) td input[type=text]{width: 100%; line-height: 22px; border: 1px solid #dedfdf; margin: 10px 0 0;}
.mailForm tr:nth-of-type(10) td #state{margin: 0 0 10px 20px; border: 1px solid #dedfdf; width: 100%; max-width: 222px;} 
.mailForm tr:nth-of-type(11) td #state{margin: 0 0 5px; border: 1px solid #dedfdf; width: 100%; max-width: 300px;} 
.mailForm td textarea{width: 100%; height: 130px; border: none; resize: none; font-family: var(--f-gothic); }
.mailForm td .custom-file{ margin: 0 20px 0 0; }
.mailForm td .txt1{display: block; width: 100%; margin: 10px 0 0 0; }
.mailForm .boxNote{text-align: center; border: 1px solid #dedfdf; font-size: 13px; padding: 15px;}

#frame-2{margin: 0 auto 100px;}
#frame-2 .tit,#frame-3 .tit{font-size: 14px; background-color: #9fa0a0;}
#frame-2 .tit:before,#frame-3 .tit:before{background-color: var(--color-red1);}
#frame-2 p:nth-of-type(3){margin: 0 0 15px;}
#frame-2 .btn1{display: inline-block; color: #c30d23; background: #dcdddd; padding: 0 10px 0 30px; line-height: 25px; position: relative; margin: 0 0 0 30px;}
#frame-2 .btn1:before{content: ''; display: inline-block; position: absolute; left: 10px; top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-left: 11px solid #c30d23;
	border-bottom: 6px solid transparent;
}
#frame-2 table{margin: 20px 0 70px;} 

.list-btn{
	width: 100%; max-width: 730px; margin: 0 auto;
	&.noColumn {
		max-width: 350px;
		& li {
			width: 100%;
		}
	}
}
.list-btn li{float: left; width: 48%;}
.list-btn li:first-of-type{margin: 0 4% 0 0;}
.list-btn li .btn{cursor: pointer; width: 100%; text-align: center; display: block; outline: none; border: none; background-color: #dcdddd; line-height: 42px; transition: all 0.3s linear; font-family: var(--f-gothic);  }
.list-btn li .btn:hover{background: #9fa0a0;}

#frame-3 p:nth-of-type(3){margin: 0 0 20px;}
#frame-3 .fimg1{margin: 10px auto 60px;}
#frame-3 .fimg2{margin: 0 auto 40px;}
#frame-3 .fimg3{margin: 10px auto 15px;}
#frame-3 .btn2{display: inline-block; color: #c30d23; background: #dcdddd; padding: 0 30px 0 30px; line-height: 25px; position: relative; float: right;}
#frame-3 .btn2:before{content: ''; display: inline-block; position: absolute; left: 10px; top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-left: 11px solid #c30d23;
	border-bottom: 6px solid transparent;
}

.formbtn{width: 100%; max-width: 730px; margin: 55px auto 0;}
.formbtn button{float: left; width: 48%; /*padding: 7px 0;*/}
.formbtn button:first-of-type{margin: 0 4% 0 0;}

.err1,.err2{display: none; color: var(--color-red1);}
.error{color: var(--color-red1);}
#c-name-error{display: none;}
#c-name-hide{display: none; color: #767676;}

.form__table {

}

@media only screen and (max-width:736px){
	.mailForm .pd-1{padding: 11px;}
	.mailForm th,.mailForm td{display: block; width: 100%; text-align: left; float: none;}
	.mailForm td{padding: 11px;}
	.mailForm td::before,.mailForm td::after{display: none;}
	.mailForm td .txt1{float: none; width: 100%; padding: 10px 0 0;}

	#frame-2 .btn1{display: block; margin: 10px 0 0; width: 150px;}
}

@media only screen and (max-width:480px){
	.mailForm{padding-top:30px; padding-bottom:30px;}
	.mailForm .txtRed2{font-size: 15px;}
	.mailForm .txtRed2 br{display: none;}

	.mailForm tr:nth-of-type(10) td p > input[type="text"]{width: 130px;}
	.mailForm tr:nth-of-type(10) td p > input[type="tel"]{width: 130px;}
	.mailForm tr:nth-of-type(10) td p > input[type="email"]{width: 130px;}
	.mailForm tr:nth-of-type(10) td #state{display: block; margin: 10px 0;}

	#frame-2{margin: 0 auto 50px;}
	#frame-2 table{margin: 20px 0 30px;}

	#frame-3 .fimg1{margin-bottom: 40px;}

	.formbtn{margin: 15px auto 0;}
}