/* =========================================================
   お問い合わせ(/contact/)固有 ── 元:mock/contact-v1.html
   ご予約の方法の3つの欄は、ご予約の帯と同じ部品(template-parts/oc/channels.php・base.css)
   ========================================================= */

/* ---------- ご予約・お問い合わせの方法 ---------- */
.oc-contact__panel.ways{margin-top:clamp(24px,3.5vw,36px); padding:10px clamp(12px,2vw,24px) 6px}

/* ---------- メールフォーム(見た目だけ。送信は第3回) ---------- */
.cform{margin-top:clamp(24px,3.5vw,36px); max-width:720px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.08); padding:clamp(22px,3.5vw,40px)}
.fld{margin:0 0 24px; padding:0; border:0}
.fld label,.fld legend{display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:500; margin-bottom:8px; padding:0}
.req,.opt{font-size:.72rem; font-weight:400; padding:2px 8px; border-radius:3px; letter-spacing:.06em}
.req{background:var(--red-soft); color:#fff}
.opt{background:#EDEDED; color:var(--ink-soft)}
/* 入力欄(Arkhe の input の枠・余白・文字色を打ち消す) */
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); padding:13px 14px; border:1px solid rgba(33,33,33,.22); border-radius:6px; background:#FCFBF9; transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.fld textarea{resize:vertical; line-height:1.8}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,32,135,.12); background:#fff}
.fld input::placeholder,.fld textarea::placeholder{color:#a9a9a9}
.fld small{display:block; margin-top:6px; font-size:.8rem; color:var(--ink-soft)}
/* お問い合わせの内容(丸いボタン型の選択肢。CF7 の形に合わせた指定は下の「Contact Form 7」の所) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.fld .chips label{margin:0; font-weight:400; cursor:pointer}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
/* 同意 */
.agree{display:flex; align-items:center; gap:10px; font-size:.92rem; margin:4px 0 26px; cursor:pointer}
.agree input{width:20px; height:20px; margin:3px 3px 3px 4px; padding:0; accent-color:var(--red-soft)} /* Arkhe の初期化で消えるブラウザ標準の余白を戻す */
/* 送信ボタンの行(ボタンの見た目は下の .cform input.wpcf7-submit) */
.send{text-align:center; margin-bottom:18px}
/* Turnstile(迷惑送信対策)のウィジェット:「同意する」の下・「確認画面へ」の上に、真ん中寄せ。描かれるまでの高さを取っておく(ずれ防止) */
.cform .wpcf7-turnstile{display:flex; justify-content:center; min-height:65px; margin:0 0 24px}
.cform .wpcf7-turnstile[data-size="compact"]{min-height:140px}
.cform .oc-note{text-align:center}

@media (max-width:720px){
  .oc-contact__panel.ways{padding:4px 14px}
  .cform{padding:22px 16px}

}

/* =========================================================
   Contact Form 7 + Confirm Plus(2026/10/07)
   フォームの中身は管理画面の「お問い合わせ」で持つ(reports/cc_04_form_paste.md)。今のクラス名・構造を残してある
   ========================================================= */
/* お問い合わせの内容(CF7 の radio は label > input + span.wpcf7-list-item-label の形) */
.chips .wpcf7-form-control-wrap,.chips .wpcf7-radio{display:flex; flex-wrap:wrap; gap:8px}
.chips .wpcf7-list-item{margin:0}
.chips .wpcf7-list-item > label{margin:0; font-weight:400; cursor:pointer}
.chips .wpcf7-list-item-label{display:inline-block; padding:9px 14px; border:1px solid rgba(27,32,135,.22); border-radius:999px; font-size:.9rem; background:#fff; transition:all .25s var(--ease)}
.chips input:checked + .wpcf7-list-item-label{background:var(--blue); border-color:var(--blue); color:#fff}
.chips input:focus-visible + .wpcf7-list-item-label{outline:2px solid var(--blue); outline-offset:2px}
/* 同意(CF7 の acceptance) */
.agree .wpcf7-list-item{margin:0}
.agree .wpcf7-list-item > label{display:flex; align-items:center; gap:10px; cursor:pointer}
.agree .oc-prose a{letter-spacing:.04em} /* 第18回 A45:同意の文の中のリンク(矢印なし・文中リンクの形) */
.oc-form-note{margin:12px 0 0} /* 第18回 A44:フォームの説明のすぐ後の注記 */
/* 「確認画面へ」(CF7 の submit は input なので、矢印は背景の絵で出す) */
.cform input.wpcf7-submit{appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit; font-size:1rem; font-weight:500; letter-spacing:.12em; line-height:normal; color:#fff; padding:18px 62px 18px 42px; border:1px solid var(--red-soft); border-radius:6px;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat right 32px center / 17px 17px;
  box-shadow:0 2px 4px -1px rgba(var(--red-soft-rgb),.25); transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease)}
.cform input.wpcf7-submit:hover{background-color:#fff; color:var(--red-soft); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(var(--red-soft-rgb),.45), 0 4px 10px -4px rgba(var(--red-soft-rgb),.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DA4A3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E")}
.cform input.wpcf7-submit:active{transform:none}
.cform input.wpcf7-submit:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
/* 送信中のくるくる:場所を取らないよう、ボタンのすぐ下に重ねて出す */
.cform .send{position:relative}
.cform .wpcf7-spinner{position:absolute; left:50%; top:100%; margin:4px 0 0 -12px}
/* 入力の誤り */
.cform .wpcf7-not-valid{border-color:var(--red-soft)!important; background:#FFF8F6}
/* エラーの文は、各欄の下の余白(24px)の中に重ねて出す。文が消えても高さが変わらず、すぐ下の欄(同意など)がずれない
   (2026/10/07:エラーのあと本文を入力してすぐ同意を押すと、ずれて1回で押せないことがあったため) */
.cform .wpcf7-form-control-wrap{position:relative; display:block}
.cform .wpcf7-not-valid-tip{position:absolute; left:0; top:100%; margin-top:3px; font-size:.82rem; line-height:1.4; color:#C4433A; white-space:nowrap}
.cform .agree .wpcf7-form-control-wrap{display:block}
/* メールアドレスの欄だけは下に注記(small)があるので、エラー文を重ねずに欄の下へ流して置き、注記をその下へ押し下げる(第23回 F-6)
   前は :has() で注記を 24px 下げていた。iPhone の Safari では、エラー文が後から入ったときに :has() が計算し直されないことがあり、注記に重なった
   data-name="your-email" は CF7 が欄の外側に付ける印(管理画面のフォームの [email* your-email])。エラーがないときの見た目は変わらない。長い文は折り返す */
.cform [data-name="your-email"] .wpcf7-not-valid-tip{position:static; display:block; margin-top:6px; white-space:normal}
/* 送信結果のメッセージ */
.cform .wpcf7-response-output{margin:18px 0 0!important; padding:14px 16px!important; border:1px solid rgba(27,32,135,.2)!important; border-radius:8px; background:var(--blue-pale); font-size:.92rem; line-height:1.8; color:var(--ink)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-color:rgba(218,74,63,.4)!important; background:#FFF8F6}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(27,32,135,.2)!important; background:var(--blue-pale)}

/* 確認画面(Confirm Plus:フォームの上に重ねて出る。Confirm Plus の div#wpcf7cpcnf … の指定より強くするため .wpcf7 を前に付ける)。入力した内容を表で見せ、「戻る」「送信する」の2つ */
.wpcf7 #wpcf7cpcnf{max-width:720px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.08); padding:clamp(22px,3.5vw,40px)}
.wpcf7 #wpcf7cpcnf table{width:100%; margin:0 0 8px; border:0; border-collapse:collapse}
.wpcf7 #wpcf7cpcnf th,.wpcf7 #wpcf7cpcnf td{--ark-padding--cell:14px 4px; border:0; border-bottom:1px solid rgba(33,33,33,.1); background:none; text-align:left; vertical-align:top; word-break:normal; font-size:.95rem; line-height:1.8}
.wpcf7 #wpcf7cpcnf tr:first-child th,.wpcf7 #wpcf7cpcnf tr:first-child td{border-top:1px solid rgba(27,32,135,.2)}
.wpcf7 #wpcf7cpcnf th{width:11em; font-weight:400; color:var(--blue); font-size:.88rem; letter-spacing:.06em}
.wpcf7 #wpcf7cpcnf td p{margin:0; white-space:pre-wrap}
.wpcf7 #wpcf7cpcnf .wpcf7cp-btns{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 18px; margin-top:28px}
.wpcf7 #wpcf7cpcnf .wpcf7cp-btns button{margin:0; font:inherit; cursor:pointer}
/* 送信する=予約ボタンと同じ形 */
.wpcf7 #wpcf7cpcnf .wpcf7cp-cfm-submit-btn{appearance:none; -webkit-appearance:none; font-size:1rem; font-weight:500; letter-spacing:.12em; line-height:normal; color:#fff; padding:18px 62px 18px 42px; border:1px solid var(--red-soft); border-radius:6px;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat right 32px center / 17px 17px;
  box-shadow:0 2px 4px -1px rgba(var(--red-soft-rgb),.25); transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease)}
.wpcf7 #wpcf7cpcnf .wpcf7cp-cfm-submit-btn:hover{background-color:#fff; color:var(--red-soft); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(var(--red-soft-rgb),.45), 0 4px 10px -4px rgba(var(--red-soft-rgb),.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DA4A3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E")}
.wpcf7 #wpcf7cpcnf .wpcf7cp-cfm-submit-btn:active{transform:none}
/* 戻る=控えめな枠のボタン */
.wpcf7 #wpcf7cpcnf .wpcf7cp-cfm-edit-btn{appearance:none; -webkit-appearance:none; font-size:.92rem; letter-spacing:.1em; line-height:normal; color:var(--ink); padding:16px 30px; border:1px solid rgba(33,33,33,.28); border-radius:6px; background:#fff; transition:border-color .25s var(--ease), background-color .25s var(--ease)}
.wpcf7 #wpcf7cpcnf .wpcf7cp-cfm-edit-btn:hover{border-color:var(--ink); background:var(--gray)}
.wpcf7 #wpcf7cpcnf button:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
@media (max-width:720px){
  .wpcf7 #wpcf7cpcnf th{width:auto; display:block; --ark-padding--cell:14px 2px 0; border-bottom:0}
  .wpcf7 #wpcf7cpcnf td{display:block; --ark-padding--cell:2px 2px 14px}
  .wpcf7 #wpcf7cpcnf tr:first-child td{border-top:0}
  .wpcf7 #wpcf7cpcnf .wpcf7cp-btns{flex-direction:column-reverse; align-items:stretch}
  .wpcf7 #wpcf7cpcnf .wpcf7cp-btns button{width:100%}
  .cform input.wpcf7-submit{padding:16px 54px 16px 30px; letter-spacing:.08em; background-position:right 24px center}
  .chips .wpcf7-list-item-label{font-size:.86rem; padding:8px 12px}
}