@charset "UTF-8";

/* --------------------------------------------------

contact（Contact Form 7）
旧 MailFormPro から CF7 へ移行したお問い合わせフォーム用。
基本部品（span.req / input / textarea / .center）は other.css の
汎用ルールが適用されるため、ここでは CF7 特有のマークアップ
（.contact_tbl / .wpcf7-*）と送信ボタンの見た目のみを補う。

 -------------------------------------------------- */



/* フォーム上部のご案内文（本番のインラインstyleを踏襲）
   赤太字の注意書き＋強調バッジ（白抜き赤地）＋青の下線リンク。
   移行時に本番のページ内 <style> が失われ未適用だったため復元。 */
.contact_fm .center {
	line-height: 1.8em;
}
.contact_fm .center span {
	color: red;
	font-weight: bold;
}
.contact_fm .center strong {
	display: inline-block;
	background-color: red;
	color: #fff;
	line-height: 1em;
	padding: .3em .4em;
	margin: 0 .3em;
}
.contact_fm .center a {
	text-decoration: underline;
	color: #0033aa;
	font-size: 115%;
}
.contact_fm .center a:hover {
	text-decoration: none;
}

/* テーブルレイアウト（other.css の .contact_fm と同等） */
table.contact_tbl {
	font-size: 95%;
	margin-top: 0;
	width: 100%;
}
table.contact_tbl th {
	width: 285px;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
	padding: 15px;
}
table.contact_tbl td {
	text-align: left;
	padding: 15px;
}
table.contact_tbl th p,
table.contact_tbl td p {
	margin: 0;
}

/* テキスト系入力欄の幅・内側余白
   other.css の汎用 input は height:28px 固定かつ padding 未指定のため、
   入力文字が枠に張り付く。ここで高さと内側余白を与える。 */
.contact_tbl input[type="text"],
.contact_tbl input[type="tel"],
.contact_tbl input[type="email"] {
	width: 400px;
	max-width: 100%;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	line-height: 1.5;
}
.contact_tbl textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px;
	line-height: 1.6;
}
.contact_tbl select {
	height: 40px;
	padding: 0 8px;
	box-sizing: border-box;
}

/* 姓/名・セイ/メイ の分割入力欄（横並び） */
.contact_tbl input[type="text"].half {
	width: 180px;
	margin-right: 4px;
}

/* バリデーションエラー時も姓/名を横並びに保つ。
   CF7 の .wpcf7-not-valid-tip は display:block のため、そのままだと
   姓の直後で改行され「名」が下段に落ちる。入力欄を包む
   .wpcf7-form-control-wrap を inline-block にして列を維持し、
   エラー文は各欄の下に表示する。textarea 等に影響しないよう
   姓名・フリガナ行（.text-set-contactform7）に限定する。 */
.contact_tbl td.text-set-contactform7 .wpcf7-form-control-wrap {
	display: inline-block;
	vertical-align: top;
}
.contact_tbl .wpcf7-not-valid-tip {
	font-size: 85%;
	margin-top: 4px;
	line-height: 1.4;
}

/* 確認画面のテーブル（confirm-plus）
   プラグインCSS（assets/css/styles.css）はテーマCSSより後に読み込まれるため、
   セレクタの詳細度を上げて上書きする。

   罫線について: セルの上下左右は #9FA0A0 で描かれるが、プラグインが
   border-bottom だけ rgba(0,0,0,0.08) を指定している。border-collapse:collapse
   では行間は「下のセルの border-top（濃い方）」が採用されるため中間行は見えるが、
   最終行の下には次のセルが無く薄い色だけが残り、線が消えて見える。
   そのため下線の色を他の罫線に揃える。 */
div#wpcf7cpcnf table,
div#wpcf7cpcnf table th,
div#wpcf7cpcnf table td {
	border-bottom-color: #9FA0A0;
}
div#wpcf7cpcnf table {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
div#wpcf7cpcnf table th,
div#wpcf7cpcnf table td {
	padding: 15px;
	text-align: left;
	vertical-align: top;
}

/* ラジオ／チェックボックス（other.css の汎用 input 装飾を打ち消す） */
.contact_tbl input[type="radio"],
.contact_tbl input[type="checkbox"] {
	width: auto;
	height: auto;
	margin: 0 .3em 0 0;
	border: none;
	vertical-align: middle;
}
/* CF7 のリスト先頭に付く左インデントを除去 */
.contact_tbl .wpcf7-list-item.first {
	margin-left: 0;
}

/* 送信／確認／「この内容で送信」ボタン（本番の配色 #06a を踏襲）
   confirm-plus の確認ボタンは form 外の div.wpcf7cp-btns に描画される */

/* 確認画面のボタン列は中央寄せ（入力画面の [submit] は
   フォーム定義側で <p style="text-align:center;"> により中央寄せ済み）。
   div.wpcf7cp-btns は confirm-plus 側で display:flex のため
   text-align ではなく justify-content で寄せる。ボタン間隔は
   プラグインの gap:1.5em に任せる。 */
div.wpcf7cp-btns {
	justify-content: center;
}

.wpcf7-form .wpcf7-submit,
.wpcf7cp-btns .wpcf7cp-cfm-submit-btn {
	width: auto;
	height: auto;
	border: none;
	background: #06a;
	padding: 14px 40px;
	margin-top: 20px;
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	border-radius: 5px;
	text-shadow: none;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7cp-btns .wpcf7cp-cfm-submit-btn:hover {
	background: #5ac;
	color: #fff;
	text-decoration: none;
}
/* 確認画面の「修正」ボタンはグレー（confirm-plus） */
.wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
	width: auto;
	height: auto;
	border: none;
	background: #999;
	padding: 14px 40px;
	margin-top: 20px;
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	border-radius: 5px;
	text-shadow: none;
}
.wpcf7cp-btns .wpcf7cp-cfm-edit-btn:hover {
	background: #bbb;
	color: #fff;
	text-decoration: none;
}



/* レスポンシブ */
@media screen and (max-width: 640px) {
	table.contact_tbl,
	table.contact_tbl tbody,
	table.contact_tbl tr,
	table.contact_tbl th,
	table.contact_tbl td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	table.contact_tbl th {
		padding-bottom: 0;
	}
	.contact_tbl input[type="text"],
	.contact_tbl input[type="tel"],
	.contact_tbl input[type="email"] {
		width: 100%;
	}
	.contact_tbl input[type="text"].half {
		width: 45%;
	}
}