/* ============================================================
   contact-form.css — 問い合わせフォーム専用スタイル
   ------------------------------------------------------------
   ・既存CSSを置換しない。body / h1 / input 等の汎用タグへは
     一切指定せず、すべて .contact- 系クラス配下に限定する。
   ・配色・角丸・タップ領域は既存の CSS 変数を参照するため、
     ブランドの見え方は既存ページと揃う。
   ============================================================ */

.contact-page{padding:clamp(24px,5vw,56px) 0 72px}
.contact-container{max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}

.contact-head{margin-bottom:clamp(20px,4vw,32px)}
.contact-kicker{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-dim);margin-bottom:10px}
.contact-page .contact-title{
  font-size:clamp(24px,4.4vw,34px);line-height:1.28;
  margin:0 0 12px;color:var(--ink);font-weight:700}
.contact-lead{color:var(--ink-dim);line-height:1.85;margin:0;font-size:15px}

.contact-section{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r,16px);padding:clamp(18px,3.4vw,30px);
  margin-bottom:20px;box-shadow:var(--shadow,0 1px 2px rgba(21,33,46,.06))}
.contact-section-h{
  font-size:16px;font-weight:700;color:var(--ink);
  margin:0 0 6px;display:flex;align-items:center;gap:9px}
.contact-section-h::before{
  content:"";width:3px;height:17px;border-radius:2px;
  background:var(--accentgrad,linear-gradient(120deg,#1f6feb,#16b886));flex:none}
.contact-section-note{
  color:var(--ink-faint);font-size:13px;line-height:1.75;
  margin:0 0 18px;padding-left:12px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.form-field.is-full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

.form-label{
  font-size:13.5px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form-req,.form-opt{
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;line-height:1.5}
.form-req{background:var(--rose,#e5604d);color:#fff}
.form-opt{background:var(--bg-soft);color:var(--ink-faint);border:1px solid var(--line)}
.form-hint{font-size:12.5px;color:var(--ink-faint);line-height:1.7}

.contact-page .form-input,
.contact-page .form-textarea{
  width:100%;box-sizing:border-box;
  min-height:var(--tap,48px);padding:11px 14px;
  font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg-elev);
  border:1px solid var(--line-bright);border-radius:10px;
  transition:border-color .16s var(--ease,ease),box-shadow .16s var(--ease,ease)}
.contact-page .form-textarea{min-height:150px;resize:vertical;line-height:1.8}
.contact-page .form-input:focus,
.contact-page .form-textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft)}
.contact-page .form-input[aria-invalid="true"],
.contact-page .form-textarea[aria-invalid="true"]{
  border-color:var(--rose,#e5604d);
  box-shadow:0 0 0 3px rgba(229,96,77,.14)}

/* 問い合わせ分類 */
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px}
.checkbox-card{
  display:flex;align-items:flex-start;gap:11px;
  min-height:var(--tap,48px);padding:13px 15px;
  background:var(--bg-elev);border:1px solid var(--line-bright);
  border-radius:11px;cursor:pointer;
  transition:border-color .16s var(--ease,ease),background .16s var(--ease,ease)}
.checkbox-card:hover{border-color:var(--blue);background:var(--blue-soft)}
.checkbox-card input[type="checkbox"]{
  width:19px;height:19px;margin:1px 0 0;flex:none;
  accent-color:var(--blue);cursor:pointer}
.checkbox-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.checkbox-card-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.checkbox-card-d{font-size:12px;color:var(--ink-faint);line-height:1.6}
.checkbox-card:has(input:checked){
  border-color:var(--blue);background:var(--blue-soft);
  box-shadow:inset 0 0 0 1px var(--blue)}
.checkbox-card:focus-within{box-shadow:0 0 0 3px var(--blue-soft)}

/* 添付ファイル */
.file-caution{
  margin:0 0 16px;padding:13px 15px;
  background:#fff8ec;border:1px solid #f0dcb4;
  border-left:3px solid var(--amber,#d98a1f);
  border-radius:10px;font-size:13px;line-height:1.85;color:#6b4a12}
.file-caution b{color:#5a3d0d}
.file-caution a{color:var(--blue);text-decoration:underline}
.file-list{display:flex;flex-direction:column;gap:11px}
.file-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.file-row-label{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:12px;color:var(--ink-faint);min-width:74px}
.contact-page .form-file{
  flex:1;min-width:210px;font:inherit;font-size:13.5px;color:var(--ink-dim)}
.contact-page .form-file::file-selector-button{
  font:inherit;font-size:13px;margin-right:11px;padding:8px 15px;
  color:var(--ink);background:var(--bg-soft);
  border:1px solid var(--line-bright);border-radius:8px;cursor:pointer}
.contact-page .form-file::file-selector-button:hover{
  background:var(--blue-soft);border-color:var(--blue)}
.file-total{
  font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  color:var(--ink-faint);margin-top:11px;padding-top:11px;
  border-top:1px dashed var(--line)}
.file-total.is-over{color:var(--rose,#e5604d);font-weight:700}

/* 同意 */
.consent-row{
  display:flex;align-items:flex-start;gap:11px;
  padding:15px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:11px}
.consent-row input[type="checkbox"]{
  width:19px;height:19px;margin:1px 0 0;flex:none;
  accent-color:var(--blue);cursor:pointer}
.consent-row label{font-size:13.5px;color:var(--ink);line-height:1.8}
.consent-row a{color:var(--blue);text-decoration:underline}

/* エラー表示 */
.form-error{
  display:none;font-size:13px;color:var(--rose,#e5604d);
  line-height:1.7;font-weight:600}
.form-error.is-shown{display:block}
.form-alert{
  display:none;margin-bottom:18px;padding:14px 17px;
  background:#fdecea;border:1px solid #f5c2bb;
  border-left:3px solid var(--rose,#e5604d);
  border-radius:10px;color:#8a2b1d;font-size:13.5px;line-height:1.8}
.form-alert.is-shown{display:block}
.form-alert ul{margin:8px 0 0;padding-left:20px}
.form-alert li{margin:3px 0}

/* 送信 */
.contact-submit-row{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:26px}
.contact-page .submit-button{
  min-height:54px;padding:0 44px;
  font:inherit;font-size:16px;font-weight:700;color:#fff;
  background:var(--accentgrad,linear-gradient(120deg,#1f6feb,#16b886));
  border:0;border-radius:12px;cursor:pointer;
  transition:transform .14s var(--ease,ease),opacity .14s var(--ease,ease);
  box-shadow:0 4px 14px rgba(31,111,235,.24)}
.contact-page .submit-button:hover:not(:disabled){transform:translateY(-1px)}
.contact-page .submit-button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.submit-note{font-size:12.5px;color:var(--ink-faint);text-align:center;line-height:1.8}

.recaptcha-wrap{display:flex;justify-content:center;margin:22px 0 4px}

/* ハニーポット：視覚と支援技術の双方から隠す */
.hp-field{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 送信完了ページ */
.thanks-box{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r,16px);padding:clamp(28px,5vw,48px);
  text-align:center;box-shadow:var(--shadow,0 1px 2px rgba(21,33,46,.06))}
.thanks-mark{
  width:62px;height:62px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-soft);border-radius:50%;
  color:var(--green-dim);font-size:30px;line-height:1}
.thanks-box h1{
  font-size:clamp(21px,3.6vw,27px);margin:0 0 14px;
  color:var(--ink);font-weight:700}
.thanks-box p{color:var(--ink-dim);line-height:1.9;margin:0 0 12px;font-size:15px}
.thanks-note{
  margin-top:26px;padding:15px 17px;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:11px;font-size:13px;color:var(--ink-dim);
  line-height:1.85;text-align:left}
.thanks-actions{
  display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin-top:26px}
.thanks-btn{
  min-height:var(--tap,48px);padding:0 26px;
  display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:600;text-decoration:none;
  border-radius:11px;transition:background .16s var(--ease,ease)}
.thanks-btn.is-primary{
  color:#fff;background:var(--accentgrad,linear-gradient(120deg,#1f6feb,#16b886))}
.thanks-btn.is-ghost{
  color:var(--ink);background:var(--bg-elev);border:1px solid var(--line-bright)}
.thanks-btn.is-ghost:hover{background:var(--bg-soft)}

/* EMB-25: 分類欄を fieldset/legend で実装（見た目は従来どおり） */
fieldset.checkbox-grid{border:0;margin:0;padding:0;min-width:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   v139: スキップリンク（キーボード操作時のみ表示）
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--blue,#1f6feb);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;
  font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}
main:focus-visible{outline:2px solid var(--blue,#1f6feb);outline-offset:2px}


/* v273: mobile/tablet form hardening */
@media(max-width:768px){
  .contact-container{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .contact-section{padding:18px 16px}
  .checkbox-grid{grid-template-columns:1fr}
  .contact-page .submit-button{width:100%;max-width:420px;min-height:56px}
  .file-row{align-items:stretch}
  .file-row-label{min-width:0;width:100%}
  .contact-page .form-file{min-width:0;width:100%;max-width:100%}
}
@media(max-width:360px){
  .contact-container{padding-left:10px;padding-right:10px}
  .contact-section{padding:16px 12px;border-radius:12px}
  .contact-page .form-input,.contact-page .form-textarea{padding-left:12px;padding-right:12px}
}