/* ================================================== */
/* お問い合わせフォーム */
/* ================================================== */

/* 調整用の値 */
.main-content {
--form-choice-gap:8px;
--form-choice-size:16px;
--form-field-gap:32px;
--form-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
--form-icon-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231815' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--form-input-h:32px;
--form-label-size:16px;
--form-line:var(--bk);
--form-list-gap:32px;
--form-nest-gap:32px;
--form-nest-indent:26px;
--form-select-w:350px;
--form-text-line:28px;
--form-text-size:16px;
}

/* ベース */
/* page.css の .common-content .page-title（sp 24px）を上書きする */
.common-content .page-title { margin-block-end:40px; }
.entry-content.form-content { display:flex; flex-direction:column; gap:var(--form-field-gap); padding-block:0 80px; }

/* 導入文・注意書き */
.form-lead { display:flex; flex-direction:column; font-size:var(--form-text-size); gap:8px; line-height:var(--form-text-line); }

/* エラーメッセージ */
.form-message { border:1px solid var(--rd); color:var(--rd); font-size:var(--form-text-size); font-weight:700; line-height:var(--form-text-line); padding:8px 16px; }

/* 項目 */
.form-field { display:flex; flex-direction:column; gap:4px; }
.form-fieldset { border:0; margin:0; min-inline-size:0; padding:0; }

/* 項目名 */
.form-label { color:var(--bl); display:block; font-size:var(--form-label-size); font-weight:700; line-height:var(--form-text-line); padding:0; }
.form-fieldset .form-label { margin-block-end:4px; }

/* 必須マーク */
.form-required { color:var(--rd); font-size:12px; font-weight:700; line-height:1; margin-inline-start:4px; }

/* 入力欄：共通 */
.form-input, .form-select, .form-textarea { background-color:var(--wh); border:1px solid var(--form-line); color:var(--bk); font-family:inherit; font-size:var(--form-text-size); inline-size:100%; line-height:var(--form-text-line); padding-inline:8px; }
.form-input::placeholder, .form-textarea::placeholder { color:var(--gray); opacity:.6; }
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { outline:2px solid var(--bl); outline-offset:1px; }

/* 入力欄：1行 */
.form-input { block-size:var(--form-input-h); }

/* 入力欄：プルダウン */
.form-select { appearance:none; background-image:var(--form-icon-select); background-position:right 8px center; background-repeat:no-repeat; background-size:24px 24px; block-size:var(--form-input-h); cursor:pointer; max-inline-size:var(--form-select-w); padding-inline-end:40px; }

/* 入力欄：複数行 */
.form-textarea { block-size:196px; padding-block:4px; resize:vertical; }

/* 選択肢：リスト */
.form-choice-list { display:flex; flex-direction:column; gap:var(--form-list-gap); }
.form-choice-list > li { display:flex; flex-direction:column; gap:var(--form-choice-gap); }

/* 選択肢：折り返しリスト（土建を知ったのは） */
.form-choice-list--wrap { column-gap:40px; flex-direction:row; flex-wrap:wrap; row-gap:0; }

/* 選択肢：入れ子リスト */
.form-choice-nest { display:flex; flex-direction:column; gap:var(--form-choice-gap); padding-inline-start:var(--form-nest-indent); }
.form-choice-nest::before, .form-choice-nest::after { display:none; }

/* 選択肢：入れ子リスト：常時横並び＋かっこ（組合加入） */
.form-choice-nest--inline { align-items:center; flex-direction:row; gap:var(--form-choice-gap); }
.form-choice-nest--inline::before, .form-choice-nest--inline::after { display:block; }
.form-choice-nest--inline::before { content:"（"; }
.form-choice-nest--inline::after { content:"）"; }
.form-choice-nest--inline > li + li { margin-inline-start:var(--form-nest-gap); }

/* 選択肢：入れ子のプルダウン（支部への問い合わせ） */
.form-choice-sub { padding-inline-start:var(--form-nest-indent); }

/* 選択肢：1件 */
.form-choice { align-items:center; cursor:pointer; display:flex; font-size:var(--form-text-size); gap:var(--form-choice-gap); line-height:var(--form-text-line); }
.form-choice input { appearance:none; background-color:var(--wh); block-size:var(--form-choice-size); border:1px solid var(--form-line); cursor:pointer; display:grid; flex-shrink:0; inline-size:var(--form-choice-size); place-items:center; }
.form-choice input[type="radio"] { border-radius:50%; }
.form-choice input::before { background-color:var(--form-line); content:""; opacity:0; transition:opacity .2s; }
.form-choice input:checked::before { opacity:1; }
.form-choice input[type="radio"]::before { block-size:8px; border-radius:50%; inline-size:8px; }
.form-choice input[type="checkbox"]::before { block-size:10px; inline-size:10px; mask:var(--form-icon-check) no-repeat center / 100% 100%; }
.form-choice input:focus-visible { outline:2px solid var(--bl); outline-offset:2px; }

/* 確認・エラー画面の入力内容 */
.form-result { display:grid; }
.form-result :is(dt, dd) { border:1px solid var(--form-line); border-block-start:0; font-size:var(--form-text-size); line-height:var(--form-text-line); padding:8px 16px; }
.form-result dt { background-color:var(--ye); color:var(--bl); font-weight:700; }
.form-result > :first-child { border-block-start:1px solid var(--form-line); }

/* 完了メッセージ */
.form-thanks { font-size:var(--form-text-size); line-height:var(--form-text-line); text-align:center; }

/* 送信ボタン */
.form-submit { align-items:center; display:flex; flex-direction:column; gap:16px; margin-block-start:8px; }
.form-note { font-size:var(--form-text-size); line-height:var(--form-text-line); }
.form-note .form-required { margin-inline:0 4px; }
.form-submit .or-button, .form-button-set .or-button { inline-size:auto; margin:0; padding-inline:16px; }
.or-button[disabled] { cursor:not-allowed; opacity:.4; }

/* 戻るボタン */
.form-back { align-items:center; background-color:var(--wh); block-size:52px; border:2px solid var(--gray); border-radius:40px; color:var(--gray); display:flex; font-size:var(--form-text-size); font-weight:600; gap:8px; justify-content:center; margin:0; padding-inline:24px; transition:.3s; }
.form-back:hover { opacity:.7; transition:.3s; }

/* ボタン並び */
.form-button-set { align-items:center; display:flex; flex-direction:column-reverse; gap:16px; margin-block-start:40px; }
.form-button-set .form-submit { margin-block-start:0; }

/* cloudflare turnstile */
.form-turnstile { display:flex; justify-content:center; margin-block-start:40px; }

@container(min-width:960px) {

/* 調整用の値 */
.main-content {
--form-choice-size:18px;
--form-input-h:40px;
--form-label-size:18px;
--form-text-line:29px;
--form-text-size:18px;
}

/* ベース */
.entry-content.form-content { padding-block:0 40px; }

/* 項目名 */
.form-label { font-weight:800; }

/* 選択肢：チェックボックスは sp と同寸 */
.form-choice input[type="checkbox"] { block-size:16px; inline-size:16px; }

/* 選択肢：入れ子リストは横並び＋かっこ */
.form-choice-nest { align-items:center; flex-direction:row; gap:var(--form-choice-gap); }
.form-choice-nest::before, .form-choice-nest::after { display:block; }
.form-choice-nest::before { content:"（"; }
.form-choice-nest::after { content:"）"; }
.form-choice-nest > li + li { margin-inline-start:var(--form-nest-gap); }

/* 確認・エラー画面の入力内容 */
.form-result { grid-template-columns:14em 1fr; }
.form-result dd { border-inline-start:0; }
.form-result > :nth-child(2) { border-block-start:1px solid var(--form-line); }

/* 送信ボタン */
.form-submit { margin-block-start:48px; }
.form-submit .or-button, .form-button-set .or-button { padding-inline:40px; }

/* 戻るボタン */
.form-back { block-size:64px; padding-inline:40px; }

/* ボタン並び */
.form-button-set { flex-direction:row; gap:40px; justify-content:center; }

}