/* ============================================================
   Contact Form 7 のフォーム
   （登録フォーム /tourokuform/、各種問合せ /inquery/）

   親テーマを外した際に、旧サイトの追加CSS（カスタマイザー）が
   引き継がれずフォームが素のままになっていたため、テーマ側で持つ。

   CF7 本体の styles.css は先に読み込まれる。
   screen-reader-response / hidden-fields-container / spinner は
   CF7 側が面倒を見ているので、ここでは触らない。

   セレクタは .sacs-content 配下に限定する
   （サイドバーの検索フォームに影響させないため）。
   ============================================================ */

.sacs-content .wpcf7 { margin-top: 8px; }

/* ---- 行の間隔 ----
   フォーム内の <p> は投稿本文の余白ルール（.sacs-content > *）の
   対象外なので、ここで明示する。 */
.sacs-content .wpcf7 form > p { margin: 0 0 22px; }

/* ---- 見出しラベル ----
   CF7 の出力は <p><label>ラベル文<br><span class="…-wrap"><input></span></label></p>。
   直下の label だけを拾い、チェックボックス各行の label には当てない。 */
.sacs-content .wpcf7 form > p > label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
}

/* 旧サイトの名残で <font size="1"> が残っている項目があるため打ち消す。
   本来は CF7 の管理画面側でタグを外すのが筋（/inquery/ のお名前）。 */
.sacs-content .wpcf7 font { font-size: inherit; }

/* ラベル末尾や、コントロール直後の <br> は
   コントロールをブロック化した結果ただの空行になるので詰める。
   本文中の <br>（プレミアムサービスの箇条書き等）は対象にしない。 */
.sacs-content .wpcf7 form > p > label > br:last-child,
.sacs-content .wpcf7 form > p > label + br,
.sacs-content .wpcf7 .wpcf7-form-control-wrap + br { display: none; }

/* ---- 入力欄 ---- */
.sacs-content .wpcf7 input[type="text"],
.sacs-content .wpcf7 input[type="email"],
.sacs-content .wpcf7 input[type="tel"],
.sacs-content .wpcf7 input[type="url"],
.sacs-content .wpcf7 input[type="number"],
.sacs-content .wpcf7 input[type="date"],
.sacs-content .wpcf7 textarea,
.sacs-content .wpcf7 select {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 11px 13px;
	border: 1px solid var(--sacs-line);
	border-radius: 4px;
	background: #fff;
	color: var(--sacs-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	transition: border-color .18s, box-shadow .18s;
}

/* CF7 は size="40" / cols="40" を出すが、幅は CSS 側で決める。
   1カラムいっぱいに伸ばすと氏名などが間延びするので上限を置く。 */
.sacs-content .wpcf7 input[type="text"],
.sacs-content .wpcf7 input[type="email"],
.sacs-content .wpcf7 input[type="tel"],
.sacs-content .wpcf7 input[type="url"] { max-width: 560px; }
.sacs-content .wpcf7 select { max-width: 320px; }
.sacs-content .wpcf7 input[type="number"] { max-width: 140px; }

.sacs-content .wpcf7 textarea { min-height: 150px; resize: vertical; }

.sacs-content .wpcf7 input:focus,
.sacs-content .wpcf7 textarea:focus,
.sacs-content .wpcf7 select:focus {
	outline: none;
	border-color: var(--sacs-green);
	box-shadow: 0 0 0 3px rgba(18, 91, 67, .12);
}

.sacs-content .wpcf7 ::placeholder { color: #9aa79f; }

/* ---- チェックボックス・ラジオ ----
   CF7 の既定は inline-block で横に流れるため、
   17目標や会員種類のような長い選択肢が読めなくなる。1件1行にする。 */
.sacs-content .wpcf7 .wpcf7-checkbox,
.sacs-content .wpcf7 .wpcf7-radio {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.sacs-content .wpcf7 .wpcf7-list-item { margin: 0; }

.sacs-content .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--sacs-line);
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	cursor: pointer;
	transition: border-color .18s, background-color .18s;
}

.sacs-content .wpcf7 .wpcf7-list-item label:hover {
	border-color: var(--sacs-green);
	background: var(--sacs-bg);
}

/* 選択済みの行を残す。テーマ内では .sacs-content p:has() でも :has() を使っている。 */
.sacs-content .wpcf7 .wpcf7-list-item label:has(input:checked) {
	border-color: var(--sacs-green);
	background: var(--sacs-bg);
}

.sacs-content .wpcf7 .wpcf7-list-item input[type="checkbox"],
.sacs-content .wpcf7 .wpcf7-list-item input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--sacs-green);
	cursor: pointer;
}

.sacs-content .wpcf7 .wpcf7-list-item-label { flex: 1 1 auto; min-width: 0; }

/* 17目標＋総合の18件だけは件数が多いので2カラムにする。 */
.sacs-content .wpcf7 [data-name="member_goals"] .wpcf7-checkbox {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- 送信ボタン（.sacs-btn--solid と同じ見た目） ---- */
.sacs-content .wpcf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 14px 32px;
	border: 1px solid var(--sacs-green);
	border-radius: 4px;
	background: var(--sacs-green);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s, border-color .18s;
}

.sacs-content .wpcf7 .wpcf7-submit:hover {
	background: var(--sacs-green-dark);
	border-color: var(--sacs-green-dark);
}

.sacs-content .wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--sacs-green);
	outline-offset: 2px;
}

.sacs-content .wpcf7 .wpcf7-submit:disabled { opacity: .5; cursor: default; }

/* ---- 検証メッセージ ---- */
.sacs-content .wpcf7 .wpcf7-not-valid { border-color: #c0392b; }

.sacs-content .wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
}

.sacs-content .wpcf7 form .wpcf7-response-output {
	margin: 26px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--sacs-line);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.8;
}

.sacs-content .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--sacs-green);
	background: var(--sacs-bg);
	color: var(--sacs-green);
}

.sacs-content .wpcf7 form.invalid .wpcf7-response-output,
.sacs-content .wpcf7 form.unaccepted .wpcf7-response-output,
.sacs-content .wpcf7 form.spam .wpcf7-response-output,
.sacs-content .wpcf7 form.failed .wpcf7-response-output,
.sacs-content .wpcf7 form.aborted .wpcf7-response-output {
	border-color: #c0392b;
	background: #fdf4f3;
	color: #8e2b20;
}

/* ---- 送信されない隠しフィールド ----
   本番はカスタマイザーの追加CSSで #textarea-hide を隠していた。
   テーマ側に持たせないと、ラベルの無い空の textarea が露出する。 */
.sacs-content .wpcf7 form > p:has(> [data-name="textarea-hide"]) { display: none; }

/* ---- 狭い画面 ---- */
@media screen and (max-width: 700px) {
	.sacs-content .wpcf7 [data-name="member_goals"] .wpcf7-checkbox {
		grid-template-columns: minmax(0, 1fr);
	}

	.sacs-content .wpcf7 input[type="text"],
	.sacs-content .wpcf7 input[type="email"],
	.sacs-content .wpcf7 input[type="tel"],
	.sacs-content .wpcf7 input[type="url"],
	.sacs-content .wpcf7 select { max-width: 100%; }

	.sacs-content .wpcf7 .wpcf7-submit { width: 100%; }
}