@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 以下に追加 */

.headBlock{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: min(7.32vw,100px);
}

.headBlock .ttl_main{
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	span{
		font-weight: bold;
		font-size: calc(var(--px30) * var(--zoom));
	}
}

	@media screen and (max-width:768px){

	.headBlock{
		height: 11vw;
	}

	.headBlock .ttl_main{
		span{
			font-size: calc(3.91vw * var(--zoom));
		}
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ mailBlock */

#mailBlock > .inner{
	max-width: min(73.21vw,1000px);
	padding: 0 var(--px20) var(--px40);
	margin: auto;
	> .txt{
		font-size: calc(var(--px18) * var(--zoom));
	}
}

#mailBlock .inputArea{
	margin-top: var(--px30);
}

#mailBlock .inputArea label{
	margin-top: var(--px20);
}

#mailBlock .inputArea input{
	width: 100%;
	background: #eee;
	border: 1px solid #ddd;
	border-radius: var(--px3);
	padding: var(--px5);
	font-size: calc(var(--px18) * var(--zoom));
	margin-top: var(--px5);
}

#mailBlock .inputArea textarea{
	width: 100%;
	background: #eee;
	border: 1px solid #ddd;
	border-radius: var(--px3);
	padding: var(--px5);
	font-size: calc(var(--px18) * var(--zoom));
	margin-top: var(--px5);
	height: 12em;
}

#mailBlock .inputArea .name{
	font-size: calc(var(--px18) * var(--zoom));
}

#mailBlock .inputArea .name em{
	font-size: calc(var(--px18) * var(--zoom));
}

#mailBlock .bttn{
	text-align: center;
	margin-top: var(--px30);
}

#mailBlock .bttn a{
	width: min(17.57vw,240px);
}

	@media screen and (max-width:768px){

	#mailBlock > .inner{
		max-width: 100%;
		padding: 1.3vw 1.3vw 3.91vw;
		> .txt{
			font-size: calc(3vw * var(--zoom));
		}
	}

	#mailBlock .inputArea{
		margin-top: 2.6vw;
	}

	#mailBlock .inputArea label{
		margin-top: 3vw;
	}

	#mailBlock .inputArea input{
		padding: 0.65vw;
		font-size: calc(3vw * var(--zoom));
		margin-top: 1.3vw;
	}

	#mailBlock .inputArea textarea{
		padding: 0.65vw;
		font-size: calc(3vw * var(--zoom));
		margin-top: 1.3vw;
		height: 12em;
	}

	#mailBlock .inputArea .name{
		font-size: calc(3vw* var(--zoom));
	}

	#mailBlock .inputArea .name em{
		font-size: calc(3vw * var(--zoom));
	}

	#mailBlock .bttn{
		margin-top: 2.6vw;
	}

	#mailBlock .bttn a{
		width: 100%;
	}

	}/* --- max-width:768px */

/* ############################### telBox */

.telBox{
	margin-top: 60px;
	border: 2px solid #ab0000;
	border-radius: 10px;
	padding: 40px;
	text-align: center;
	position: relative;
	line-height: 1.5;
}

.telBox .ttl{
	font-weight: bold;
	color: #ab0000;
	position: absolute;
	text-align: center;
	display: block;
	width: 100%;
	left: 0;
	top: -10px;
}

.telBox .ttl span{
	display: inline-block;
	background: #fff;
	padding: 0 10px;
	font-weight: bold;
}

.telBox .txt{
	font-weight: bold;
}

.telBox .tel{
	margin-top: 10px;
}

.telBox .tel a{
	font-size: calc(1.5em * var(--zoom));
	font-weight: bold;
	text-decoration: none;
}

.telBox .address{
	font-size: calc(0.9rem * var(--zoom));
	font-weight: bold;
	margin-top: 10px;
}

	@media screen and (max-width:768px){

	.telBox{
		margin-top: 50px;
		border-radius: 5px;
		padding: 40px 20px 20px;
	}

	.telBox .ttl{
		top: -20px;
	}

	.telBox .ttl span{
		padding: 0 5px;
		margin: 0 5px;
	}

	.telBox .txt{
		font-weight: bold;
		font-size: calc(1.3rem * var(--zoom));
	}

	.telBox .tel{
		margin-top: 10px;
	}

	.telBox .tel a{
		font-size: calc(1.3rem * var(--zoom));
	}

	.telBox .address{
		font-size: calc(0.8rem * var(--zoom));
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ btn_nml */

.btn_nml{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--px18);
	height: min(5.12vw,70px);
	border: 1px solid #000;
	padding: 0 var(--px20);
	background: #fff;
	transition: background 0.3s 0s ease;
	em{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--px10);
		span{font-weight: bold}
		.arw{width: var(--px9);}
	}
}
.btn_nml:hover{background: #f0f0f0}

	@media screen and (max-width:768px){

	.btn_nml{
		font-size: calc(3.20vw * var(--zoom));
		height: 9.11vw;
		padding: 0 2.6vw;
		em{
			gap: 1.3vw;
			.arw{width: 1.17vw;}
		}
	}

	}/* --- max-width:768px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ js */

/* 初期状態 */
#mailBlock .inputArea{display: block;}
#mailBlock .sentArea{display: none;}
/* 入力 */
#mailBlock.input .input{display: block;}
#mailBlock.input .confirm{display: none;}
#mailBlock.input .sent{display: none;}
/* 確認 */
#mailBlock.confirm .input{display: none;}
#mailBlock.confirm .confirm{display: block;}
#mailBlock.confirm .sent{display: none;}
/* 完了 */
#mailBlock.sent .input{display: none;}
#mailBlock.sent .confirm{display: none;}
#mailBlock.sent .sent{display: block;}

#mailBlock.sent .inputArea{display: none;}
#mailBlock.sent .sentArea{display: block;}

#mailBlock label{
	display: block;
}

#mailBlock label .errBox{
	display: none;
	margin-top: 8px;
	font-size: calc(0.9em * var(--zoom));
	color: #660000;
}

#mailBlock label.is_err .errBox{
	display: block;
}

#mailBlock label.is_err input,
#mailBlock label.is_err textarea{
	background: #ffdbdb;
}

#mailBlock.confirm .inputArea input{
	background: #dddddd !important;
}
#mailBlock.confirm .inputArea textarea{
	background: #dddddd !important;
}

#mailBlock.confirm label.is_err input,
#mailBlock.confirm label.is_err textarea{
	background: #ddd;
	border: none;
}

.btn_nml.submit{border-color: #660000;color: #fff;background: #660000;}
.btn_nml.submit:hover{background: #fff;color: #660000;}

.verEn{
	.telBox{display: none !important;}
}