/* =========================================================
   株式会社関モクヒロックス | contact.css
   ----------------------------------------------------------
   Direction C — INK CINEMA
   CONTACT ページ専用スタイル。style.css の後に読み込む。
   生成り紙面に「帳票的な端正さ」でフォームを組む。
   影は使わない（入力フォーカスリングの box-shadow のみ）。
========================================================= */

/* ---------- Form section（生成り紙面） ---------- */
.contact{
  padding-block:clamp(84px,13vh,140px);
  background:var(--c-paper);
  border-bottom:1px solid var(--c-border-soft);
}
.contact__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}
.contact > .contact__inner > .eyebrow{margin-bottom:clamp(28px,4vh,40px)}

.contact__grid{
  display:grid;
  grid-template-columns:clamp(238px,26vw,320px) 1fr;
  gap:clamp(40px,5vw,84px);
  align-items:start;
  border-top:2px solid var(--c-text);
  padding-top:clamp(34px,5vh,56px);
}

/* ---------- 4択タブ（明朝見出し＋オレンジ idx） ---------- */
.contact-tabs__title{
  font-family:var(--ff-mincho);font-weight:600;
  font-size:18px;letter-spacing:.06em;color:var(--c-text);
  margin-bottom:18px;
}
.contact-tabs__list{border-top:1px solid var(--c-border)}
.contact-tab{
  position:relative;display:flex;align-items:center;gap:16px;
  width:100%;text-align:left;
  padding:17px 12px 17px 16px;
  border-bottom:1px solid var(--c-border-soft);
  transition:background .3s var(--ease-out),padding-left .35s var(--ease-out);
}
.contact-tab::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--c-brand);
  transform:scaleY(0);transform-origin:center;
  transition:transform .4s var(--ease-out2);
}
.contact-tab__idx{
  flex:none;width:20px;
  font-family:var(--ff-en);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--c-text-4);
  transition:color .3s var(--ease-out);
}
.contact-tab__label{
  flex:1;
  font-family:var(--ff-mincho);font-weight:600;
  font-size:16px;letter-spacing:.04em;line-height:1.5;
  color:var(--c-text-2);
  transition:color .3s var(--ease-out);
}
.contact-tab:hover{background:var(--c-paper-2);padding-left:22px}
.contact-tab:hover .contact-tab__label{color:var(--c-text)}
.contact-tab:hover .contact-tab__idx{color:var(--c-brand)}
.contact-tab.is-active{background:var(--c-paper-2)}
.contact-tab.is-active::before{transform:scaleY(1)}
.contact-tab.is-active .contact-tab__idx{color:var(--c-brand)}
.contact-tab.is-active .contact-tab__label{color:var(--c-text);font-weight:700}
.contact-tab:focus-visible{outline:2px solid var(--c-brand);outline-offset:-2px}

/* ---------- 電話案内 ---------- */
.contact-tel{
  margin-top:32px;padding-top:24px;
  border-top:1px solid var(--c-border-soft);
}
.contact-tel__label{font-size:12px;line-height:1.7;color:var(--c-text-3);letter-spacing:.02em}
.contact-tel__num{
  display:block;margin-top:7px;
  font-family:var(--ff-en);font-weight:700;font-size:26px;letter-spacing:.01em;line-height:1.2;
  color:var(--c-text);
}
.contact-tel__num:hover{color:var(--c-brand)}
.contact-tel__hours{margin-top:5px;font-size:13px;color:var(--c-text-3)}

/* ---------- フォーム本体 ---------- */
.contact-form{display:grid;gap:clamp(22px,3vh,30px)}
.contact-field{display:grid;gap:10px}
.contact-field__label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-jp);font-size:14px;font-weight:600;letter-spacing:.04em;
  color:var(--c-text);
}
.contact-field__label small{
  font-family:var(--ff-en);font-size:10px;font-weight:600;letter-spacing:.16em;
  color:var(--c-text-4);
}
.contact-field__label .req{
  margin-left:auto;
  font-family:var(--ff-jp);font-size:10.5px;font-weight:600;letter-spacing:.06em;line-height:1;
  color:#fff;background:var(--c-brand);
  padding:4px 9px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  background:#FDFBF6;            /* 生成りより明るい面 */
  border:1px solid var(--c-border);
  padding:15px 16px;
  font-family:var(--ff-jp);font-size:15px;line-height:1.7;color:var(--c-text);
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out);
}
.contact-form textarea{min-height:168px;resize:vertical}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--c-text-4)}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 3px rgba(235,97,1,.16);   /* フォーカスリング（許可された box-shadow） */
  background:#fff;
}
.contact-form input.is-error,
.contact-form textarea.is-error{
  border-color:var(--c-brand-deep);
  box-shadow:0 0 0 3px rgba(192,65,13,.14);
}

/* ---------- 送信ボタン＋注記 ---------- */
.contact-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px 28px;
  margin-top:6px;
}
.contact-actions .btn{flex:none}
.contact-actions__note{font-size:12px;line-height:1.95;color:var(--c-text-3);word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
.contact-actions__note a{
  color:var(--c-brand);font-weight:600;
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.contact-actions__note a:hover{color:var(--c-brand-deep)}

/* ---------- 送信デモの完了メッセージ ---------- */
.contact-form__done{
  margin-top:4px;padding:18px 20px;
  border:1px solid var(--c-brand);
  background:#FDFBF6;
  font-size:14px;line-height:1.85;color:var(--c-text);
}
.contact-form__done[hidden]{display:none}

/* ---------- Access section（ledger を生成り-2 面で流用） ---------- */
.contact-access{
  padding-block:clamp(84px,12vh,132px);
  background:var(--c-paper-2);
  border-top:1px solid var(--c-border-soft);
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .contact__grid{
    grid-template-columns:1fr;
    gap:38px;
    padding-top:30px;
  }
  .contact-tel__num{font-size:24px}
}
@media (max-width:479px){
  .contact-actions{gap:18px}
  .contact-actions .btn{width:100%;justify-content:center}
}

/* --- LIGHT × BLUE 上書き（青版・2026-07-14） --- */
.contact-form input,.contact-form textarea{background:#F8FAFC}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(11,99,206,.16);background:#fff}
.contact-form input.is-error,.contact-form textarea.is-error{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.contact-form__done{background:#EEF3FB}