/* ==========================================================
   forms.css — フォーム共通（Contact Form 7 の出力に当てる土台＋確認画面）
   P4-4（2026-10-16）。contact／document／owners の3ページだけで読み込む（inc/forms.php）。
   ページ固有の見た目（.form の器・入力欄・ボタン）は各ページの CSS（contact.css／owners.css）にあり、
   ここは「CF7 が出す余計なマークアップの整形」「document の form__* 化」「確認画面」「CF7 既定色の打ち消し」だけを持つ。
   色はすべてトークン経由（青・緑・赤の CF7 既定色は使わない）。
   ========================================================== */

/* 画面には出さず、読み上げだけに使うラベル（placeholder だけの入力欄に名前を付ける） */
.idw-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* ---- CF7 ラッパーの整形 ---- */
.wpcf7 .wpcf7-form-control-wrap{display:block;position:relative;}
.wpcf7 form .idw-step[hidden],
.wpcf7 form .idw-confirm[hidden],
.wpcf7 form .idw-done[hidden],
.wpcf7 form [data-idw-show-when][hidden],
.wpcf7 form [data-idw-hide-when][hidden]{display:none;}
.wpcf7 .wpcf7-list-item{display:block;margin:0;}
.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after{content:none;}
/* CF7 の form は既定で余白を持たない。ページ側の .form の器（枠・padding）だけを使う */
.wpcf7{margin:0;}

/* ---- 選択肢（チェックボックス／ラジオ） ---- */
/* contact＝.form__choice（枠付きの粒）。design の .form__choice-item と同じ見た目を list-item の label に当てる */
.form__choice{display:flex;flex-wrap:wrap;gap:10px;}
.form__choice .wpcf7-list-item label{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--c-line-dark);padding:10px 16px;background:var(--c-bg);
  font-size:var(--fs-body-sm);cursor:pointer;
}
.form__choice .wpcf7-list-item input{width:18px;height:18px;margin:0;accent-color:var(--c-btn);}
/* owners／document＝.form__choices（枠なしの横並び）。owners.css の .form__choices label を list-item 越しでも効かせる */
.form__choices{display:flex;flex-wrap:wrap;gap:10px 20px;}
.form__choices .wpcf7-list-item label{display:flex;align-items:center;gap:7px;font-weight:normal;line-height:1.6;cursor:pointer;}
.form__choices .wpcf7-list-item input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--c-btn);}
/* 20261026d：任意の「1つだけ選ぶ欄」（checkbox＋exclusive）をラジオと同じ丸に見せる。
   CF7 6.x は [radio] を必ず必須にするため、任意欄はこの書き方にした（tools/forms/house-document.txt）。 */
.wpcf7-exclusive-checkbox .wpcf7-list-item input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;
  border:1px solid var(--c-line-dark);border-radius:50%;background:var(--c-bg);cursor:pointer;
}
.wpcf7-exclusive-checkbox .wpcf7-list-item input[type="checkbox"]::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--c-btn);transform:scale(0);
}
.wpcf7-exclusive-checkbox .wpcf7-list-item input[type="checkbox"]:checked{border-color:var(--c-btn);}
.wpcf7-exclusive-checkbox .wpcf7-list-item input[type="checkbox"]:checked::before{transform:scale(1);}
.wpcf7-exclusive-checkbox .wpcf7-list-item input[type="checkbox"]:focus-visible{outline:2px solid var(--c-btn);outline-offset:2px;}

/* ---- 同意チェック（contact）---- */
.form__consent .wpcf7-list-item label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.form__consent .wpcf7-list-item input{flex:none;}

/* ---- 入力欄のフォーカス（キーボード操作のため輪郭を残す） ---- */
.wpcf7 form input:focus-visible,
.wpcf7 form select:focus-visible,
.wpcf7 form textarea:focus-visible,
.wpcf7 form button:focus-visible{outline:2px solid var(--c-text);outline-offset:2px;}

/* ---- 必須バッジ（20261027g）＝サイトのアクセント赤（--c1-accent・c1-theme.css）。contact／owners／document の3ページ共通。
   各ページ CSS の .form__req（#555・--c-btn）より後に読み込まれ、詳細度も上（.wpcf7 を付ける）なので、ここで上書きする。 */
.wpcf7 .form__req{background:var(--c1-accent,#c0392b);color:#fff;}

/* ---- 入力エラー（20261027g）：項目ブロック全体を赤枠＋その下に「※この項目は必須です」。
   CF7 の標準表示（.wpcf7-not-valid-tip）は form-confirm.js が項目ごと1つのこの見た目に付け替える。
   枠は ::before（項目の外へ 10px×14px はみ出す＝行間の余白に収まる）。動き＝枠がふわっと赤くなる（.55s）→ 最初の1項目だけ横に1回揺れる（.55s）。 */
.wpcf7 form .idw-row--invalid{position:relative;isolation:isolate;}
.wpcf7 form .idw-row--invalid::before{
  content:"";position:absolute;inset:-10px -14px;z-index:-1;pointer-events:none;
  border:1px solid var(--c1-accent,#c0392b);
  background:color-mix(in srgb,var(--c1-accent,#c0392b) 4%,transparent);
  animation:idw-err-frame .55s var(--sm-ease-out,cubic-bezier(.16,1,.3,1)) both;
}
@media(max-width:767px){.wpcf7 form .idw-row--invalid::before{inset:-10px -10px;}}
.wpcf7 form .idw-row--shake{animation:idw-err-shake .55s var(--sm-ease-fade,cubic-bezier(.215,.61,.355,1)) 1;}
.wpcf7-not-valid-tip{
  display:block;margin-top:8px;font-size:var(--fs-note);line-height:1.7;color:var(--c1-accent,#c0392b);font-weight:500;
  animation:idw-err-tip .45s var(--sm-ease-out,cubic-bezier(.16,1,.3,1)) .1s both;
}
.wpcf7-not-valid-tip::before{content:"※";}
.wpcf7 .wpcf7-not-valid{border-color:var(--c1-accent,#c0392b);outline:none;}
@keyframes idw-err-frame{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
@keyframes idw-err-tip{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes idw-err-shake{
  0%,100%{transform:translateX(0);}
  18%{transform:translateX(-7px);}
  42%{transform:translateX(6px);}
  66%{transform:translateX(-3px);}
  86%{transform:translateX(1.5px);}
}
.wpcf7 form .wpcf7-response-output{
  margin:28px 0 0;padding:14px 18px;border:1px solid var(--c-line-dark);background:var(--c-bg-soft);
  font-size:var(--fs-body-sm);line-height:1.8;text-align:center;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--c-line-dark);}
/* 完了パネルを出している間は、同じ文を二重に見せない */
.wpcf7 form[data-idw-step="done"] .wpcf7-response-output{display:none;}

/* ---- 面の切り替え（20261027g）：入力面がふわっと消える → 確認面がフェードイン（戻るときは上から）。JS＝form-confirm.js の swap() ---- */
.wpcf7 form .idw-pane--out{opacity:0;transition:opacity .35s var(--sm-ease-fade,cubic-bezier(.215,.61,.355,1));}
.wpcf7 form .idw-pane--pre{opacity:0;}
.wpcf7 form .idw-pane--pre.idw-pane--down{transform:translateY(16px);}
.wpcf7 form .idw-pane--pre.idw-pane--up{transform:translateY(-16px);}
.wpcf7 form .idw-pane--in{transition:opacity .7s var(--sm-ease-fade,cubic-bezier(.215,.61,.355,1)),transform .8s var(--sm-ease-out,cubic-bezier(.16,1,.3,1));}

/* ---- 送信完了のサンクス枠（20261027g）：画面中央にふわっと。背景クリック・Esc・閉じるで閉じる ---- */
html.idw-modal-open{overflow:hidden;}
.idw-modal{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--c-dark,#1a1a1a) 55%,transparent);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--sm-ease-fade,cubic-bezier(.215,.61,.355,1)),visibility 0s linear .45s;
}
.idw-modal.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--sm-ease-fade,cubic-bezier(.215,.61,.355,1)),visibility 0s;}
.idw-modal__panel{
  width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;
  padding:48px 28px 40px;background:var(--c-bg);text-align:center;
  transform:translateY(18px) scale(.985);
  transition:transform .7s var(--sm-ease-out,cubic-bezier(.16,1,.3,1));
}
.idw-modal.is-open .idw-modal__panel{transform:none;}
.idw-modal__panel:focus{outline:none;}
.idw-modal__title{font-size:var(--fs-h3);line-height:1.6;margin:0 0 14px;}
.idw-modal__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);line-height:1.9;margin:0;}
/* [20261027l] border:none を外した＝hover で白面に反転したとき、他の .btn--primary と同じく濃色1pxの枠（--btn-inv-border）を残す（白い枠の上で形が消えないように） */
.idw-modal__close{width:100%;max-width:280px;margin:32px auto 0;cursor:pointer;font-family:inherit;}
@media(min-width:768px){.idw-modal__panel{padding:56px 48px 48px;}}

@media(prefers-reduced-motion:reduce){
  .wpcf7 form .idw-row--invalid::before,
  .wpcf7 form .idw-row--shake,
  .wpcf7-not-valid-tip,
  .wpcf7 form .idw-pane--out,
  .wpcf7 form .idw-pane--in,
  .idw-modal,
  .idw-modal.is-open,
  .idw-modal__panel{animation:none!important;transition:none!important;}
}

/* ---- 送信中のスピナー（CF7 既定の濃灰・淡灰をトークンへ） ---- */
.idw-confirm__actions .wpcf7-spinner{display:block;margin:14px auto 0;background-color:var(--c-btn);}
.idw-confirm__actions .wpcf7-spinner::before{background-color:var(--c-bg);}

/* ==========================================================
   確認画面（入力 → 確認 → 完了）。JS＝assets/js/form-confirm.js
   ========================================================== */
.idw-confirm__title{font-size:var(--fs-h3);font-weight:var(--fw-normal);line-height:1.6;margin:0 0 12px;text-align:center;}
.idw-confirm__title:focus{outline:none;}
.idw-confirm__lead{font-size:var(--fs-body-sm);color:var(--c-text-sub);text-align:center;margin:0 0 32px;line-height:1.9;}
.idw-confirm__list{margin:0;border-top:1px solid var(--c-line);}
.idw-confirm__item{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;border-bottom:1px solid var(--c-line);}
.idw-confirm__item dt{font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.7;}
.idw-confirm__item dd{margin:0;font-size:var(--fs-body);line-height:1.9;white-space:pre-wrap;word-break:break-word;}
.idw-confirm__line{display:block;}
.idw-confirm__empty{color:var(--c-text-note);}
@media(min-width:768px){
  .idw-confirm__item{grid-template-columns:200px 1fr;gap:24px;}
}
.idw-confirm__actions{margin-top:40px;text-align:center;}
.idw-confirm__actions .btn{width:100%;font-family:inherit;cursor:pointer;}
@media(min-width:768px){.idw-confirm__actions .btn{width:auto;min-width:min(360px,100%);}}
.idw-back{
  display:block;margin:20px auto 0;padding:8px 4px;border:0;background:none;
  font:inherit;font-size:var(--fs-body-sm);color:var(--c-text);text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}
.idw-done{padding:40px 20px;border:1px solid var(--c-line);background:var(--c-bg);text-align:center;}
.idw-done:focus{outline:none;}
.idw-done__title{font-size:var(--fs-h3);line-height:1.6;margin:0 0 12px;}
.idw-done__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);line-height:1.9;margin:0;}

/* ==========================================================
   document（資料請求）＝ form__* 化（docs/29 R-03・P95）。design/pages/document.html の見た目をそのまま再現
   （.form-block／.form-field／.form-choice／.tag-req／.tag-opt 相当）。
   ========================================================== */
.form-doc{max-width:var(--c1-measure-narrow);margin:0 auto;text-align:left;}
.form-doc .form__row{margin-bottom:28px;}
.form-doc .form__label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-normal);margin-bottom:8px;}
.form-doc .form__req,.form-doc .form__opt{
  display:inline-block;font-size:var(--fs-micro);font-weight:normal;letter-spacing:.05em;
  padding:0 6px;margin-left:8px;vertical-align:middle;border-radius:2px;
}
.form-doc .form__req{background:var(--c1-accent,#c0392b);color:#fff;}   /* 20261027g 必須バッジ＝アクセント赤 */
.form-doc .form__opt{border:1px solid var(--c-line-dark);color:var(--c-text-sub);}
.form-doc input[type="text"],
.form-doc input[type="email"],
.form-doc input[type="tel"],
.form-doc select{
  width:100%;border:1px solid var(--c-line-dark);background:var(--c-bg);border-radius:0;
  padding:12px 10px;font-size:var(--fs-body);font-family:inherit;color:var(--c-text);
}
.form-doc .form__hint{font-size:var(--fs-note);color:var(--c-text-sub);margin-top:4px;line-height:1.8;}
.form-doc .form__choices{display:block;}
.form-doc .form__choices .wpcf7-list-item label{
  align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);padding:9px 0;border-bottom:1px dotted var(--c-line);
}
.form-doc .form__choices .wpcf7-list-item input{margin-top:5px;}
.form__privacy{font-size:var(--fs-note);color:var(--c-text-sub);text-align:center;margin-top:32px;line-height:1.9;}
.form-doc .form__submit{margin-top:24px;text-align:center;}
.form-doc .form__submit .btn{width:100%;max-width:360px;border:none;cursor:pointer;font-family:inherit;}
.form-doc .idw-confirm__actions .btn{max-width:360px;}

/* 入力面の検証エラーの要約（form-confirm.js が role=alert で出す） */
.idw-error-summary{
  margin:0 0 20px;padding:12px 16px;border:1px solid var(--c1-accent,#c0392b);background:var(--c-bg-soft);
  font-size:var(--fs-body-sm);line-height:1.8;text-align:center;
}
.idw-error-summary[hidden]{display:none;}

/* 2026-10-16 CF7 の応答欄（.wpcf7-response-output）が空のときに枠だけ残るのを隠す（確認画面の下に空枠が出ていた） */
.wpcf7 form .wpcf7-response-output:empty { display: none; }

/* [20261027n] ディレクター指示（全フォーム統一）：
   ① 同意チェックはチェックボックスと文を同じ行に。CF7 は class: を input 自身に付けるため、旧指定（.form__consent .wpcf7-list-item label）が効いていなかった＝.wpcf7-acceptance を起点に書き直す
   ② 送信完了の表示にお礼と返信の目安（フォーム定義の .idw-done__lead。サンクス枠には form-confirm.js が .idw-modal__lead として複製） */
.wpcf7-acceptance .wpcf7-list-item label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-align:left;}
.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--c-btn);}
.idw-done__lead,.idw-modal__lead{font-size:var(--fs-body);line-height:1.9;margin:0 0 8px;}
.idw-modal__lead{margin:0 0 4px;}

/* 2026-11-05 tag 20261105g：ディレクター指摘「罫線が2重」＝フォームの外枠（.form＝contact／owners／見学会の各記事）の中に、送信完了の面も枠を持っていた。
   外枠があるときは完了の面の枠を外す（余白だけ残す）。 */
.form .idw-done{border:0;padding:24px 0;}

/* 2026-11-05 tag 20261105h：ディレクター指示「下の面は見出しだけ」＝送信後は中央のお知らせ枠（form-confirm.js が .idw-done__lead を複製して出す）と、
   フォームの位置に残る完了の面で同じ文が2回出ていた。残る面は見出しだけにする（お礼・返信の目安・【確認用】の注記は中央の枠にだけ出る）。 */
.idw-done .idw-done__lead,.idw-done .idw-done__text{display:none;}
.idw-done .idw-done__title{margin-bottom:0;}

/* 2026-11-05 tag 20261105j→k：完了の表示。j で「枠をなくし文字だけ」→ 同日ディレクター「やっぱり文字だけだとおかしいので、枠を付けて」。
   送信後はフォームの外枠を外し（2重防止）、完了の面にだけ1本の枠（白地）。入力前の案内文は消す（見学会・イベントの記事） */
.wpcf7 form.form[data-idw-step="done"]{border:0;background:transparent;padding:0;}
.wpcf7 form[data-idw-step="done"] .idw-done{border:1px solid var(--c-line);background:var(--c-bg);padding:40px 20px;}
.ev-reserve__body:has(form[data-idw-step="done"]) > .section__lead,
.ev-reserve__body:has(form[data-idw-step="done"]) > .ev-reserve__lead{display:none;}