/**** faq_block ***/
.faq_block{
	background-color: #edf9f6;
	padding: 80px;
}
.faq_block + .faq_block{
	margin-top: 10px;
}
.faq_block .subtitle{
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 0.16em;
	margin-bottom: 50px;
}
.faq_block .subtitle .title_text {
    background: url(../images/top/room_recomended_border.png) left bottom repeat-x;
    background-size: 160px 6px;
    padding-bottom: 15px;
}
.faq_block dl{
	border-bottom: 1px solid #644132;
	padding: 10px 0px;
}
.faq_block dl:first-of-type{
	border-top: 1px solid #644132;
}
.faq_block dl dt{
	padding: 20px 60px 20px 30px;
	position: relative;
	font-size: 0.94rem;
	line-height: 1.5;
}
.faq_block dl dt:hover{
	cursor: pointer;
}
.faq_block dl dt:before{
	content: "Q.";
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 20px;
}
.faq_block dl dt:after{
	content: "";
	display: inline-block;
	background: url("../images/faq/faq_icon01.svg") center center no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translate3d(0,-50%,0);
}
.faq_block dl.open dt:after{
	background: url("../images/faq/faq_icon02.svg") center center no-repeat;
}
.faq_block dl dd{
	padding: 0px 60px 20px 20px;
	position: relative;
	font-size: 0.94rem;
	margin-top: 20px;
}
.faq_block dl dd:before{
	content: "A.";
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 0px;
	line-height: 1.7;
	color: #e17837;
}
.faq_block dl dd *{
	font-size: 0.94rem;
}
.faq_block dl dd p:not(:last-child){
	margin-bottom: 1em;
}

.faq_block a{
	text-decoration: underline;
}

@media (max-width: 768px) {
	.faq_block{
		padding: 30px 20px;
	}
}

/**** form ****/
.form_inner{
	padding: 80px;
	background-color: #FFFFFF;
}
.form_table{
	width: 100%;
}
.form_table th{
	width: 290px;
	font-size: 1rem;
	font-weight: normal;
	letter-spacing: 0.16em;
	line-height: 1.5;
	vertical-align: top;
	position: relative;
	padding: 25px 80px 25px 0px;
}
.form_table th .required{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 24px;
	background-color: #001E07;
	font-size: 0.81rem;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	position: absolute;
	right: 0px;
	top: 25px;
}
.form_table td{
	padding: 20px 0px 20px 60px;
	vertical-align: top;
}
.form_wrap input[type="text"],
.form_wrap input[type="tel"],
.form_wrap input[type="email"],
.form_wrap textarea{
	width: 100%;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	padding: 10px;
}
.form_wrap textarea{
	width: 100%;
	height: 160px;
}
.radio_field,
.checkbox_field{
	display: block;
	font-size: 0.94rem;
	padding: 0px;
}
.radio_field + .radio_field,
.checkbox_field + .checkbox_field{
	margin-top: 10px;
}
.radio_field input[type="radio"],
.checkbox_field input[type="checkbox"]{
/* コンテンツの流れから切り離す */
  position: absolute;
  /* 誤ったコードに対処するための回避策 */
  white-space: nowrap;
  /* 可能な限り文字サイズを小さくするための処理
   * (スクリーンリーダー中には height と width が 0 のものを無視するため)
   */
  width: 1px;
  height: 1px;
  /* オーバーフローしているコンテンツを隠す */
  overflow: hidden;
  /* 要素サイズを変更しうるプロパティのリセット */
  border: 0;
  padding: 0;
  /* 要素のどの部分が表示されるかを定義するもの */
  /* 古いブラウザでは使用できない */
  clip: rect(0 0 0 0);
  /* 最近のブラウザ用
   * コンテンツを非表示にする設定  */
  clip-path: inset(50%); 
  /* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。
   * それに加えていくつか問題もあるそうです 
   * (参考: https://github.com/h5bp/html5-boilerplate/issues/1985)
   */
  margin: -1px;
}
.radio_field label,
.checkbox_field label{
	display: inline-block;
	padding-left: 25px;
	position: relative;
}
.radio_field label:hover,
.checkbox_field label:hover{
	cursor: pointer;
}
.radio_field label:after{
	content: "";
	display: inline-block;
	background: url("../images/faq/radio_off.svg") center center no-repeat;
	background-size: contain;
	width: 13px;
	height: 13px;
	position: absolute;
	left: 0px;
	top: 0.5em;
}
.radio_field label:has(input:checked):after{
	background-image: url("../images/faq/radio_on.svg");
}
.checkbox_field label:after{
	content: "";
	display: inline-block;
	background: url("../images/faq/checkbox_off.svg") center center no-repeat;
	background-size: contain;
	width: 13px;
	height: 13px;
	position: absolute;
	left: 0px;
	top: 0.5em;
}
.checkbox_field label:has(input:checked):after{
	background-image: url("../images/faq/checkbox_on.svg");
}

@media (max-width: 768px) {
	.form_inner{
		padding: 30px 20px;
	}
	.form_table,
	.form_table tbody,
	.form_table tr,
	.form_table th,
	.form_table td{
		display: block;
		width: auto;
	}
	.form_table th{
		border: none;
	}
	.form_table th,
	.form_table td{
		padding: 15px 0px;
	}
	.form_table th .required{
		top: 15px;
	}
}

@media (max-width: 768px) {
}