@charset "utf-8";
/* ------------------------------------------------------------
  お問い合わせ（/contact/）
  旧 /contact_tpl.html のインライン style と /css/style.min.css 内の
  お問い合わせ関連の指定をまとめたもの（+ Contact Form 7 調整）
  ※ /css/contact.css は旧テンプレートで読み込んでいたがサーバーに存在しない
------------------------------------------------------------ */

/* 旧 contact_tpl.html のインライン style */
.gnav li { margin-left: -5px; }
#foot_spnav li { margin-left: -1vw; }


/* ------------------------------------------------------------
  style.min.css より
------------------------------------------------------------ */
.contact-page { background-image: url(/images/contact_header_img01.jpg); }
.contact-page .inner h2 { background-image: url(/images/contact_header_img.png); }

.contact-area { width: 800px; height: auto; margin: 0 auto; }

.sec-contact-info { text-align: left; color: #231815; }
.sec-contact-info p { font-size: 14px; line-height: 1.8; margin: 1em 0; }
.sec-contact-info p a { color: #231815; }
.sec-contact-info h2 { margin-top: 1.5em; font-size: 20px; }
.sec-contact-info .hr { display: block; width: 100%; height: 1px; background: #b7b7b7; }

.contact-form-area { border: 1px solid #7c7c7c; padding: 20px 50px; margin: 45px 0 30px; font-size: 14px; color: #231815; }
.contact-form-area .form-label { width: 140px; height: 70px; float: left; text-align: center; line-height: 1.5; border-bottom: 1px solid #7c7c7c;
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	-webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.contact-form-area .form-box { width: 530px; height: 70px; float: right; padding: 15px; border-bottom: 1px solid #7c7c7c; }
.contact-form-area .form-box input[type="text"] { margin: 5px; -webkit-appearance: none; border-radius: 0; }
.contact-form-area .form-box .text-s { width: 125px; height: 30px; border: 1px solid #868686; padding: 0.5em; }
.contact-form-area .form-box .text-l { width: 300px; height: 30px; border: 1px solid #868686; padding: 0.5em; }
.contact-form-area .form-box .select-d { position: relative; display: block; width: 300px; height: 30px; border: 1px solid #868686; color: #909090; background: #fff; }
.contact-form-area .form-box .select-d:before { position: absolute; top: 0; right: 0; margin: 0; width: 30px; text-align: center; border-left: 1px solid #868686; content: "\f107"; font-family: FontAwesome; line-height: 2; }
.contact-form-area .form-box select { position: relative; width: 300px; height: 30px; padding: 0 0.5em; cursor: pointer; border: none; outline: none; text-indent: 0.01px; text-overflow: ''; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; -webkit-appearance: button; -moz-appearance: button; appearance: button; }
.contact-form-area .form-box select option { background: #fff; }
.contact-form-area .form-box select::-ms-expand { display: none; }
.contact-form-area .form-box select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; }
.contact-form-area .form-box .inner { margin-top: 15px; }
.contact-form-area .form-box .inner .bloc { float: left; width: auto; }
.contact-form-area .form-box .radio-input { display: none; }
.contact-form-area .form-box .radio-input+label { cursor: pointer; padding-left: 20px; margin-right: 20px; position: relative; }
.contact-form-area .form-box .radio-input+label:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 1px solid #868686; border-radius: 50%; }
.contact-form-area .form-box .radio-input:checked+label:after { content: ""; display: block; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; background: #000; border-radius: 50%; }
.contact-form-area .form-box textarea { width: 100%; height: 170px; padding: 1em; -webkit-appearance: none; border-radius: 0; }
.contact-form-area .l { height: 235px; }
.contact-form-area .l p { font-size: 13px; line-height: 1.5; }
.contact-form-area .l p .red { color: #a10007; }
.contact-form-area .ml { height: 200px; border-bottom: none; }
.contact-form-area .clear { clear: both; }

.contact-btn1 { display: block; width: 250px; height: 60px; margin: 0 auto 70px; font-size: 20px; background: #fff; border: 1px solid #868686; cursor: pointer; }

@media screen and (max-width: 1119px) {
	.sec-contact-info p a { color: #231815; }
}

@media screen and (max-width: 750px) {
	.contact-area { width: 100%; padding: 0 5%; }
	.sec-contact-info p { font-size: 24px; font-size: 3.2vw; }
	.sec-contact-info p a { color: #231815; }
	.sec-contact-info h2 { font-size: 30px; font-size: 4vw; }
	.contact-form-area { font-size: 24px; font-size: 3.2vw; width: 100%; padding: 5%; }
	.contact-form-area .form-label { width: 100%; height: auto; padding: 1em 0; }
	.contact-form-area .form-box { width: 100%; height: auto; padding: 0.5em 0; border-bottom: none; }
	.contact-form-area .form-box .text-s { width: 36%; }
	.contact-form-area .form-box .text-l { width: 95%; }
	.contact-form-area .form-box .select-d { width: 100%; }
	.contact-form-area .form-box .select-d:before { height: 29px; }
	.contact-form-area .l { height: auto; }
	.contact-form-area .ml { height: auto; }
}


/* ------------------------------------------------------------
  送信完了（thanks.php）：テキストを縦横中央に
------------------------------------------------------------ */
.contact-area.contact-thanks { padding: 10rem 0; text-align: center; color: #231815; }
.contact-area.contact-thanks p { font-size: 18px; line-height: 1.8; margin: 0; }

@media screen and (max-width: 750px) {
	.contact-area.contact-thanks { padding: 10rem 5%; }
	.contact-area.contact-thanks p { font-size: 4vw; }
}


/* ------------------------------------------------------------
  Contact Form 7 調整
------------------------------------------------------------ */
/* 1行（.form-row）を flex にし、エラー表示で高さが変わっても項目名と入力欄の罫線を揃える */
#SMIL .contact-form-area .form-row { display: -webkit-box; display: -webkit-flex; display: flex; }
#SMIL .contact-form-area .form-row .form-label,
#SMIL .contact-form-area .form-row .form-box { float: none; height: auto; min-height: 70px; }
#SMIL .contact-form-area .form-row .form-label { -webkit-flex-shrink: 0; flex-shrink: 0; }
#SMIL .contact-form-area .form-row .form-box { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
#SMIL .contact-form-area .form-row.l,
#SMIL .contact-form-area .form-row.ml { height: auto; }
#SMIL .contact-form-area .form-row.ml .form-label,
#SMIL .contact-form-area .form-row.ml .form-box { border-bottom: none; }

#SMIL .wpcf7-form-control-wrap { display: block; }
#SMIL .contact-form-area .form-box input[type="email"],
#SMIL .contact-form-area .form-box input[type="tel"] { margin: 5px; -webkit-appearance: none; border-radius: 0; }
#SMIL .contact-form-area .l p { margin-top: 10px; }

/* セレクト：wrap の span を枠いっぱいに */
#SMIL .contact-form-area .form-box .select-d select { width: 100%; padding-right: 35px; }

/* ラジオ：CF7 の出力（label > input + span）に旧デザインの丸を適用 */
#SMIL .wpcf7-radio { display: block; margin-top: 7px; }
#SMIL .wpcf7-list-item { margin: 0 20px 0 0; }
#SMIL .wpcf7-list-item label { cursor: pointer; position: relative; padding-left: 20px; }
#SMIL .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#SMIL .wpcf7-list-item-label:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 1px solid #868686; border-radius: 50%; box-sizing: border-box; }
#SMIL .wpcf7-list-item input[type="radio"]:checked+.wpcf7-list-item-label:after { content: ""; display: block; position: absolute; top: 4px; left: 4px; width: 7px; height: 7px; background: #000; border-radius: 50%; }
#SMIL .wpcf7-list-item input[type="radio"]:focus-visible+.wpcf7-list-item-label:before { outline: 2px solid #868686; outline-offset: 2px; }

#SMIL .wpcf7-not-valid-tip { font-size: 13px; margin: 4px 5px 0; }
#SMIL .btns { margin-bottom: 70px; }
#SMIL .btns .contact-btn1 { margin: 0 auto 10px; font-family: inherit; color: #231815; -webkit-appearance: none; border-radius: 0; }
#SMIL .btns .contact-btn1:hover { background: #231815; color: #fff; }
#SMIL .btns .wpcf7-spinner { display: block; margin: 0 auto; }
#SMIL .wpcf7 form .wpcf7-response-output { margin: 0 0 30px; padding: 10px 15px; font-size: 14px; text-align: center; }

@media screen and (max-width: 750px) {
	#SMIL .contact-form-area .form-row { display: block; }
	#SMIL .contact-form-area .form-row .form-label,
	#SMIL .contact-form-area .form-row .form-box { min-height: 0; }
	#SMIL .contact-form-area .form-row .form-box { border-bottom: none; }
	#SMIL .contact-form-area .form-box input[type="email"],
	#SMIL .contact-form-area .form-box input[type="tel"] { margin: 5px 0; }
	#SMIL .contact-form-area .form-box .text-l { width: 100%; height: auto; }
	#SMIL .wpcf7-radio { text-align: center; }
	#SMIL .wpcf7-list-item { margin: 0 3vw; }
	#SMIL .wpcf7-not-valid-tip { font-size: 3.2vw; }
	#SMIL .btns .contact-btn1 { width: 80%; font-size: 4vw; }
	#SMIL .wpcf7 form .wpcf7-response-output { font-size: 3.4vw; }
}