/* =========================================================
   sema-theme page-contact.css（「お問い合わせ」固有）
   コンセプト＝「静かな対話の入口」。運営側の案内と来訪者の入力を、
   左端の一本の細い縦線（対話の流れ）でつなぐ。白い大きなフォームカードで囲まない。
   各入力は「箱の連続」ではなく「問いかけ（ラベル＋補助文）と回答欄（入力）」として見せる。
   落ち着き・誠実・清潔・話しかけやすさ。管理画面風の入力フォームにしない。
   共通土台（page.css）を継承。全クラス sema-cf- プレフィックス（他ページのクラスは流用しない）。
   ========================================================= */

/* =========================================================
   導入面（このページ専用）：広すぎない静かな導入。深緑の小さなマーク＝対話の線の起点
   ========================================================= */
.sema-cf-hero{
  background:var(--sema-ivory);
  border-bottom:1px solid var(--sema-line);
  padding:clamp(46px,6.5vw,84px) 0 clamp(24px,3.2vw,38px);
}
.sema-cf-hero__inner{ position:relative; }
.sema-cf-hero__mark{
  display:block; width:12px; height:12px; background:var(--sema-sage-deep); margin-bottom:1.1em;
}
.sema-cf-hero__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.4; letter-spacing:.12em;
  margin:0; color:var(--sema-ink); text-wrap:balance;
}

/* =========================================================
   本文：一本の縦線（対話の流れ）を左端に通し、内容はその右に沿わせる
   ========================================================= */
.sema-cf-body{
  position:relative; max-width:48rem;
  padding-left:clamp(20px,4vw,42px);
}
/* 対話の線（縦の極細罫線）。表組みに見せないよう横罫は最小限にする */
.sema-cf-body::before{
  content:""; position:absolute; left:0; top:.5em; bottom:.4em; width:1px;
  background:var(--sema-line-2);
}
/* 各ブロックの起点に置く控えめなブロンズの節（対話のリズム） */
.sema-cf-lead,
.sema-cf-intro,
.sema-cf-note,
.sema-cf-form{ position:relative; }
.sema-cf-lead::before,
.sema-cf-intro::before,
.sema-cf-note::before,
.sema-cf-form::before{
  content:""; position:absolute; left:calc(-1 * clamp(20px,4vw,42px));
  top:.75em; width:9px; height:1px; background:var(--sema-bronze);
}

/* --- 導入リード（確定原稿・既存本文） --- */
.sema-cf-body .sema-cf-lead{ margin:0 0 clamp(30px,4.5vw,48px); }
.sema-cf-body .sema-cf-lead p{
  font-family:var(--sema-serif); font-weight:500;
  font-size:clamp(1.08rem,1.6vw,1.22rem); line-height:2; letter-spacing:.04em;
  color:var(--sema-ink); margin:0;
}

/* --- 受付内容の案内＋店舗案内（確定原稿・既存本文） --- */
.sema-cf-body .sema-cf-intro{ margin:0 0 clamp(32px,5vw,52px); }
.sema-cf-body .sema-cf-accept > p{
  font-family:var(--sema-serif); font-size:1.04rem; letter-spacing:.04em;
  color:var(--sema-ink); margin:0 0 .9em;
}
.sema-cf-body .sema-cf-accept ul{
  list-style:none; margin:0; padding:0; max-width:36rem;
  border-top:1px solid var(--sema-line);
}
.sema-cf-body .sema-cf-accept li{
  position:relative; margin:0; padding:.7em 0 .7em 1.4em;
  border-bottom:1px solid var(--sema-line);
  font-family:var(--sema-sans); font-size:.96rem; line-height:1.7; color:var(--sema-ink-soft);
}
.sema-cf-body .sema-cf-accept li::marker{ content:none; }
.sema-cf-body .sema-cf-accept li::before{
  content:""; position:absolute; left:0; top:1.25em; width:12px; height:1px; background:var(--sema-bronze);
}
/* 店舗案内：警告ボックスにせず、淡いペーパー面＋左の深緑細線で静かに区切る「別窓口への案内」 */
.sema-cf-body .sema-cf-store{
  margin-top:clamp(22px,3vw,32px);
  padding:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,28px);
  background:var(--sema-paper);
  border-left:2px solid var(--sema-sage);
}
.sema-cf-body .sema-cf-store p{
  font-family:var(--sema-sans); font-size:.94rem; line-height:1.9; color:var(--sema-ink-soft); margin:0;
}
.sema-cf-body .sema-cf-store p + p{ margin-top:.7em; }
.sema-cf-body .sema-cf-store a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sema-sans); font-size:.92rem; letter-spacing:.05em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-cf-body .sema-cf-store a::after{
  content:"\2192"; color:var(--sema-bronze); transition:margin .25s var(--sema-ease);
}
.sema-cf-body .sema-cf-store a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-cf-body .sema-cf-store a:hover::after{ margin-left:.3em; }

/* --- フォーム直前の注意文（確定原稿）：警告ボックスにせず、流れの中で静かに区切る --- */
.sema-cf-body .sema-cf-note{
  margin:0 0 clamp(26px,4vw,42px); padding-top:clamp(24px,3.5vw,38px);
  border-top:1px solid var(--sema-line);
}
.sema-cf-body .sema-cf-note p{
  font-family:var(--sema-serif); font-size:1.02rem; line-height:1.95; color:var(--sema-ink); margin:0;
}

/* =========================================================
   フォーム（静的・非送信）：箱の連続にせず、問いかけと回答欄を縦の余白でつなぐ
   ========================================================= */
.sema-cf-body .sema-cf-form{ margin:0; }
.sema-cf-body .sema-cf-field{ margin:0 0 clamp(24px,3.4vw,36px); }

.sema-cf-body .sema-cf-label{
  display:block; font-family:var(--sema-sans); font-weight:700;
  font-size:1rem; letter-spacing:.04em; color:var(--sema-ink); margin:0 0 .35em;
}
.sema-cf-body .sema-cf-help{
  font-family:var(--sema-sans); font-size:.86rem; line-height:1.75;
  color:var(--sema-ink-mute); margin:0 0 .7em;
}

/* 必須・任意：控えめだが識別しやすい（色だけに依存せず文字とし枠でも示す） */
.sema-cf-body .sema-cf-req,
.sema-cf-body .sema-cf-opt{
  font-family:var(--sema-sans); font-weight:500; font-size:.68rem; letter-spacing:.08em;
  padding:.15em .55em; border-radius:2px; vertical-align:.12em; margin-left:.5em; white-space:nowrap;
}
.sema-cf-body .sema-cf-req{ color:var(--sema-sage-deep); background:var(--sema-sage-weak); border:1px solid var(--sema-sage-weak); }
.sema-cf-body .sema-cf-opt{ color:var(--sema-ink-mute); background:transparent; border:1px solid var(--sema-line-2); }

/* 入力欄：管理画面風の詰めた見た目にしない。文字は16pxでスマホの自動ズームを防ぐ */
.sema-cf-body .sema-cf-input{
  display:block; width:100%; max-width:34rem;
  font-family:var(--sema-sans); font-size:16px; line-height:1.7; color:var(--sema-ink);
  background:var(--sema-surface);
  border:1px solid var(--sema-line-2); border-radius:2px;
  padding:.7em .9em;
  transition:border-color .18s var(--sema-ease);
}
.sema-cf-body .sema-cf-input::placeholder{ color:var(--sema-ink-mute); }
.sema-cf-body .sema-cf-input:hover{ border-color:var(--sema-line-strong); }
.sema-cf-body .sema-cf-input:focus{ border-color:var(--sema-sage); }
/* focus-visible の可視アウトラインは base.css の共通指定を継承（outline は消さない） */

.sema-cf-body .sema-cf-select{ max-width:26rem; cursor:pointer; }
.sema-cf-body .sema-cf-textarea{ max-width:38rem; min-height:9.5em; resize:vertical; }

/* 同意文中のプライバシーポリシーリンク：色だけに依存せず下線で示す。チェックボックス操作は妨げない。 */
.sema-cf-body a.sema-cf-policy{
  color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.sema-cf-body a.sema-cf-policy:hover{ color:var(--sema-bronze); }

/* 同意：チェックは押しやすく、文と一体で扱う */
.sema-cf-body .sema-cf-consent{ margin-top:clamp(28px,4vw,40px); }
.sema-cf-body .sema-cf-consent-note{
  font-family:var(--sema-sans); font-size:.9rem; line-height:1.9; color:var(--sema-ink-soft);
  margin:0 0 .8em; max-width:38rem;
}
.sema-cf-body .sema-cf-consent-label{
  display:flex; align-items:flex-start; gap:.7em; cursor:pointer;
  font-family:var(--sema-sans); font-size:.96rem; line-height:1.7; color:var(--sema-ink);
}
.sema-cf-body .sema-cf-checkbox{
  flex:0 0 auto; width:1.25em; height:1.25em; margin-top:.15em;
  accent-color:var(--sema-sage); cursor:pointer;
}

/* 送信部：強すぎるCTA帯にしない。安心して最後の操作を行う「明確な終点」 */
.sema-cf-body .sema-cf-submit-row{
  margin-top:clamp(30px,4.5vw,48px); padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--sema-line);
}
.sema-cf-body .sema-cf-submit{
  font-family:var(--sema-sans); font-weight:700; font-size:.98rem; letter-spacing:.09em;
  color:#fff; background:var(--sema-sage-deep);
  border:1px solid var(--sema-sage-deep); border-radius:1px;
  padding:.95em 2.6em; cursor:pointer; white-space:nowrap;
  transition:background-color .2s var(--sema-ease), transform .2s var(--sema-ease);
}
.sema-cf-body .sema-cf-submit:hover{ background:var(--sema-sage); }
.sema-cf-body .sema-cf-submit:active{ transform:translateY(1px); }
/* 将来の無効状態（例：同意前）を実装しやすいように用意 */
.sema-cf-body .sema-cf-submit:disabled{ background:var(--sema-ink-mute); border-color:var(--sema-ink-mute); cursor:not-allowed; }

/* =========================================================
   スマホ：PCの縦積みを単純になぞらない。早く入力へ到達でき、押しやすく、はみ出さない。
   対話の線は細く保ち、入力欄は画面幅にきちんと収める。
   ========================================================= */
@media (max-width:767px){
  .sema-cf-body{ max-width:none; padding-left:clamp(16px,4.5vw,22px); }
  .sema-cf-body .sema-cf-lead p{ line-height:1.95; }
  /* 入力欄はスマホでは横幅いっぱいに（狭くしない・はみ出さない） */
  .sema-cf-body .sema-cf-input,
  .sema-cf-body .sema-cf-select,
  .sema-cf-body .sema-cf-textarea{ max-width:none; }
  .sema-cf-body .sema-cf-textarea{ min-height:8.5em; }
  /* 送信ボタンは親指で押しやすい高さ・幅に */
  .sema-cf-body .sema-cf-submit{ width:100%; padding:1.05em 1.5em; }
  /* 必須/任意が折り返しても崩れないように */
  .sema-cf-body .sema-cf-label{ line-height:1.9; }
}

/* =========================================================
   動的化で追加する状態（確定デザインは作り直さず、必要な状態だけを世界観に馴染ませる）
   エラー＝赤を主役にせず、深緑/ブロンズの中で視認できる控えめな警告色に留める。
   ========================================================= */

/* honeypot：画面にも支援技術にも出さない（display:none にせず送信は可能に保つ） */
.sema-cf-body .sema-cf-hp{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 警告色（控えめ・ブランド内）。赤の主役化を避けた深いテラコッタ寄り */
.sema-cf-body{ --sema-cf-alert:#8f3a2e; --sema-cf-alert-weak:#f0e4de; }

/* エラー概要：フォーム上部。淡い面＋左のブロンズ罫で静かに（大きな赤帯にしない） */
.sema-cf-body .sema-cf-errors{
  margin:0 0 clamp(26px,3.6vw,36px); padding:clamp(16px,2.4vw,22px) clamp(16px,2.4vw,24px);
  background:var(--sema-cf-alert-weak); border-left:2px solid var(--sema-cf-alert); border-radius:2px;
}
.sema-cf-body .sema-cf-errors:focus{ outline:2px solid var(--sema-focus); outline-offset:3px; }
.sema-cf-body .sema-cf-errors__title{
  font-family:var(--sema-sans); font-weight:700; font-size:.98rem; letter-spacing:.04em;
  color:var(--sema-cf-alert); margin:0 0 .5em;
}
.sema-cf-body .sema-cf-errors__form{
  font-family:var(--sema-sans); font-size:.92rem; line-height:1.8; color:var(--sema-ink-soft); margin:0;
}
.sema-cf-body .sema-cf-errors__list{ list-style:none; margin:.4em 0 0; padding:0; }
.sema-cf-body .sema-cf-errors__list li{ margin:.3em 0; }
.sema-cf-body .sema-cf-errors__list a{
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.03em;
  color:var(--sema-cf-alert); text-decoration:underline; text-underline-offset:2px;
}
.sema-cf-body .sema-cf-errors__list a:hover{ color:var(--sema-ink); }

/* 個別エラー：ラベルと入力の間に、色だけに依存しない小記号＋文言で */
.sema-cf-body .sema-cf-error{
  position:relative; margin:0 0 .5em; padding-left:1.25em;
  font-family:var(--sema-sans); font-size:.86rem; line-height:1.7; color:var(--sema-cf-alert);
}
.sema-cf-body .sema-cf-error::before{
  content:"!"; position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05em; height:1.05em; font-size:.72em; font-weight:700; line-height:1;
  color:#fff; background:var(--sema-cf-alert); border-radius:50%;
}

/* aria-invalid の入力：枠を警告色に（色だけでなく上のテキスト＋記号でも示す） */
.sema-cf-body .sema-cf-input[aria-invalid="true"]{ border-color:var(--sema-cf-alert); }
.sema-cf-body .sema-cf-input[aria-invalid="true"]:focus{ border-color:var(--sema-cf-alert); }

/* 送信中のボタン（JS補助時のみ）：文言変更＋操作不可の見た目 */
.sema-cf-body .sema-cf-submit.is-sending,
.sema-cf-body .sema-cf-submit[disabled]{ background:var(--sema-ink-mute); border-color:var(--sema-ink-mute); cursor:progress; }

/* =========================================================
   送信完了メッセージ（フォームの代わりに表示）：静かな達成感。急かさない・大CTAにしない
   ========================================================= */
.sema-cf-body .sema-cf-done{
  position:relative; margin:clamp(8px,2vw,16px) 0 0;
  padding:clamp(22px,3.4vw,32px) clamp(20px,3vw,30px);
  background:var(--sema-paper); border-left:2px solid var(--sema-sage);
}
.sema-cf-body .sema-cf-done:focus{ outline:2px solid var(--sema-focus); outline-offset:3px; }
.sema-cf-body .sema-cf-done__title{
  font-family:var(--sema-serif); font-weight:600; font-size:clamp(1.14rem,1.8vw,1.32rem);
  letter-spacing:.06em; color:var(--sema-sage-deep); margin:0 0 .5em;
}
.sema-cf-body .sema-cf-done__text{
  font-family:var(--sema-sans); font-size:.96rem; line-height:1.9; color:var(--sema-ink-soft); margin:0;
}

/* 動きの抑制設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .sema-cf-body .sema-cf-input,
  .sema-cf-body .sema-cf-submit,
  .sema-cf-body .sema-cf-store a::after{ transition:none; }
}