@charset "utf-8";

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

.headBlock{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}

.headBlock .ttl_main{
	font-size: 2.7rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

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

	.headBlock{
		height: 50px;
	}

	.headBlock .ttl_main{
		font-size: 1.6rem;
	}

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

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

#mailBlock > .inner{
	max-width: 640px;
	padding: 0 20px 40px;
	margin: auto;
}

#mailBlock .inputArea{
	margin-top: 30px;
}

#mailBlock .inputArea label{
	margin-top: 20px;
}

#mailBlock .inputArea input{
	width: 100%;
	background: #efefef;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 5px;
	font-size: 1.4rem;
	margin-top: 5px;
}

#mailBlock .inputArea textarea{
	width: 100%;
	background: #efefef;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 5px;
	font-size: 1.4rem;
	margin-top: 5px;
	height: 12em;
}

#mailBlock .inputArea .name{
	font-size: 0.8em;
}

#mailBlock .inputArea .name em{
	font-size: 1.6rem;
}

#mailBlock .bttn{
	text-align: center;
	margin-top: 30px;
}

#mailBlock .bttn a{
	width: 240px;
}

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

	#mailBlock > .inner{
		padding: 10px 10px 30px;
	}

	#mailBlock .inputArea{
		margin-top: 20px;
	}

	#mailBlock .inputArea label{
		margin-top: 10px;
	}

	#mailBlock .inputArea .name{
		font-size: 0.8em;
	}

	#mailBlock .inputArea .name em{
		font-size: 1.4rem;
	}

	#mailBlock .bttn{
		margin-top: 20px;
	}

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

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

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

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

.telBox .ttl{
	font-weight: bold;
	color: #0b4800;
	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: 1.5em;
	font-weight: bold;
	text-decoration: none;
}

.telBox .address{
	font-size: 0.9em;
	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: 1.3rem;
	}

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

	.telBox .tel a{
		font-size: 1.3em;
	}

	.telBox .address{
		font-size: 0.8em;
	}

	}/* --- 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;}

#formBox label{
	display: block;
}

#formBox label .errBox{
	display: none;
	margin-top: 8px;
	font-size: 0.9em;
	color: #235900;
}

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

#formBox label.is_err input,
#formBox label.is_err textarea{
	background: #ffdbdb !important;
}

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

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