/**
 * 固定ページ: ご相談・来店予約（/contact/）— 分類B（機能付き・D=フォーム機能を内包）ページ固有CSS（F分類）
 * 正本: design/pages/contact.html の <style id="page-scoped">（199行）＋ 末尾 .nowrap ユーティリティブロック。
 * 移植時そのまま（共有CSSは変更しない）。F/T判定は docs/29_template-map.md §2-2 が contact.css を
 * F分類として明記済み（199行＝100行超・独立ファイル化の基準を満たす）。
 */

/* ============================================================================
   [20260821aa] ディレクター指示「トップの見出しを news.html を基準に統一」（2026-08-21）。
   news.html（20260821q）は interview.html と完全一致の値に揃えてあるので、同じ値をここに複製する。
   ┌ 項目 ────────┬ 768px以上 ─────────────┬ 390px ─────────────────┐
   │ 赤英字ラベル   │ 16px / 500 / ls3.52px  │ 14px / 500 / ls2.8px   │
   │ ラベル下マージン│ 18px                   │ 14px                   │
   │ 黒見出し       │ 32px / 400 / ls1.68px  │ 28px / 400 / ls1.68px  │
   │                │ 行間 41.92px(1.31)     │ 行間 36.68px(1.31)     │
   │ 罫線           │ 40×1px #aaa・上20.64px │ 40×1px #aaa・上21.56px │
   │ 見出し下マージン│ 28px                   │ 28px                   │
   │ リード         │ 15px / 400 / ls0.96px / 行間 30.75px(2.05)      │
   │ リード上マージン│ 0px（間隔は見出し側の28pxが担う）              │
   └───────────────┴────────────────────────┴────────────────────────┘
   ※contact.html のFVには赤英字ラベルが無かったため **CONTACT を追加**した。
     新語ではなく、owners.html・realestate-info.html で既に使われている語をそのまま使用。
   ※リードに付いていたインライン `style="text-align:center;"` は、news.html の
     「文字は左揃え・箱は中央」と競合するため撤去した。
   ※罫線の上マージン calc(28px - .23em) の .23em ＝和文見出しのインク下端〜ボックス下端の実測値。
   ※c1-theme.css は変更禁止（docs/22 R09）のため、すべてページ内で解決している。
     リードは c1-theme の `.c1 .page-hero__lead`(0,2,0) に勝つ必要があるので同じ詳細度で書く。
   ============================================================================ */
.page-hero .c1-label{margin-bottom:14px;}
.page-hero__title{
  font-family:var(--ff-jp);
  font-weight:500;   /* [20260821ae] 400→500 */
  font-size:var(--fs-h2-sm);
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  margin-bottom:28px;
}
/* [20260821ag] ディレクター指示「home.html 以外のページのタイトル下罫線は削除」。
   20260821h〜ad で入れた見出し下の罫線（40×1px）を撤去した。
   見出し下のマージン28pxは、統一済みの余白としてそのまま維持する。 */
.c1 .page-hero__lead{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  margin-top:0;
  width:fit-content;max-width:var(--c1-measure);margin-inline:auto;text-align:left;
}
@media(min-width:768px){
  .page-hero .c1-label{margin-bottom:18px;}
  .page-hero__title{font-size:var(--fs-h2);}
}

/* [20260821ab] ディレクター指示「TEL／お電話でのお問い合わせはこちら／すぐに日程を決めたい方…
   も同じにしましょう」。＝TELブロックもFVと同じ「赤英字 ＋ 黒見出し ＋ 罫線 ＋ リード」に揃える。
   ラベル(.c1-label)と見出し(.section__title)の級数・ウェイト・字間は 20260821j の共有CSS改修で
   既にFVと同値になっているため、ここで足すのは **罫線と前後のマージン、リードの組み** だけ。
   ※適用は `#tel-lead` に限定する。同じ `.section__title` を使う FORM（お問い合わせ・来店ご予約
     フォーム）と FLOW（送信後の流れ）にも波及させないため。この2ブロックにも罫線を入れるかは要判断。 */
#tel-lead .section__title{margin-bottom:28px;}
#tel-lead .section__lead{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  margin-top:0;
  width:fit-content;max-width:var(--c1-measure);margin-inline:auto;text-align:left;
}
/* ============================================================================
   [20260810n] B確定トンマナ（design-rules §10）一貫性統一バッチ 適用済み
   ・級数   = --c1-fs-h2 / --c1-fs-h3 / --c1-fs-lead / --c1-fs-label-en（§10-2 L1〜L5）
   ・読み幅 = --c1-measure(720) / --c1-measure-narrow(640)（§10-5）
   ・画像幅 = 1480(--w-content) / 980 / 720 の3種のみ（§10-5）
   ・カードgap = --grid-gap(20px)／カード段組コンテナ = 980px（§10-5）
   ・セクション縦余白 = --sp-6/7/8/--sp-sec-sm の4段のみ（§10-5）
   ※本ブロック内に残る「C-1: SP22 / PC28」等のコメントは旧C-1級数時代の記述。
     現行の正は §10（B確定）＝上記トークン。
   ============================================================================ */

/* contact固有（WF由来。font-weight:bold→var(--fw-normal)／見出し固有クラスはfw明示） */
/* ==========================================================
   contact 専用（チャネルカード／フォーム／送信後フロー／拠点）
   ========================================================== */
/* ブロック2 方法の選択 */
.channel-list{display:grid;gap:var(--grid-gap);max-width:980px;margin:0 auto;}
@media(min-width:768px){.channel-list{grid-template-columns:repeat(3,1fr);}}
.channel{border:1px solid var(--c-line);background:var(--c-bg);padding:20px 16px;text-align:center;}
.channel--main{border:2px solid var(--c-text);}
/* イラスト（ディレクター支給 2026-08-09・contact-01〜03。原寸1254×1254→長辺800px webp q80）。
   既存の taisetsu（house）/ fuan（house-process）と同方針＝白背景・正方形・object-fit:contain。
   カード幅（PC約307px）に対して控えめな比率で「静かに添える」。 */
.channel__illust{display:block;width:min(150px,52%);margin:0 auto 10px;}
.channel__illust img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;}
@media(max-width:767px){.channel__illust{width:112px;}}
.channel__title{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);margin-bottom:6px;}  /* C-1: L3・見出し500 */
.channel__desc{font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.9;}                     /* C-1: L4 */

/* ブロック3 フォーム */
/* [20260924d] design/pages/contact.html へ追随。docs/19 P111② ＝ディレクター判断B（owners基準のカード型）。
   contact＝枠なし640px から、1px枠＋背景＋720px へ。margin は見出し直後のため 0 auto のまま。
   padding は owners と同じ可変（SP 32px 20px／768px以上 48px 56px）。 */
.form{max-width:var(--c1-measure);margin:0 auto;text-align:left;border:1px solid var(--c-line);background:var(--c-bg);padding:32px 20px;}
@media(min-width:768px){
  .form{padding:48px 56px;}
}
.form__row{margin-bottom:36px;}
.form__label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-normal);margin-bottom:8px;}
.form__req{font-size:var(--fs-micro);color:#fff;background:var(--c-btn);padding:1px 6px;margin-left:8px;vertical-align:middle;letter-spacing:.05em;}
.form__opt{font-size:var(--fs-micro);color:var(--c-text-sub);border:1px solid var(--c-line-dark);padding:1px 6px;margin-left:8px;vertical-align:middle;letter-spacing:.05em;}
.form__hint{font-size:var(--fs-note);color:var(--c-text-sub);margin-top:6px;line-height:1.8;}
.form__input,.form__select,.form__textarea{
  width:100%;padding:12px;font-size:16px;/* iOSズーム防止のため16px */
  border:1px solid var(--c-line-dark);background:var(--c-bg);
  font-family:inherit;color:var(--c-text);border-radius:0;
}
.form__textarea{min-height:110px;resize:vertical;}
.form__inline{display:grid;gap:10px;}
@media(min-width:768px){.form__inline--2col{grid-template-columns:1fr 1fr;}}
.form__choice{display:flex;flex-wrap:wrap;gap:10px;}
.form__choice-item{
  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-item input{width:18px;height:18px;accent-color:#2b2b2b;}
.form__consent{display:flex;align-items:flex-start;gap:10px;justify-content:center;font-size:var(--fs-caption);}
/* 禁則対策（QA contact-01）: SPで「…同意します（」と始め括弧が行末に取り残される。
   原因＝link-anim.css の .la-roll__w が display:inline-block（アトミックインライン）のため
   リンク直前が改行可能点になり、始め括弧の行末禁則が効かない。
   対処＝「（リンク）」を1かたまりとして折り返さないようにする。文言は不変。
   実測（375/320px）: 「…同意します（／プライバシーポリシー）」→「…同意します／（プライバシーポリシー）」・はみ出しなし。 */
.form__consent .nowrap{white-space:nowrap;}
/* 段落ち対策。最終行だけを調整する text-wrap-style:pretty を本文要素全般へ。
   <br> で複数文に分かれた段落では各文の末尾に落ちるため、クラス単位では取りこぼす（2026-08-19）。 */
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){
.section .section__title,.section p,.section li,.section dd,.section dt,
.section h3,.section h4,.section figcaption{text-wrap-style:pretty;}
}
.form__consent input{width:18px;height:18px;margin-top:4px;accent-color:#2b2b2b;}
.form__submit{margin-top:48px;text-align:center;}
/* 送信ボタン＝NEXT（次に読む）セクションのボタンと同寸へ拡大（ディレクター指示 2026-08-09）。
   実測合わせ（同ページ .next-read__main / Chrome実測）:
     PC1280 → 420 × 82.9px（min-width:min(420px,100%) ／ padding-block:22px ／ padding-inline:60px
                            ／ 文字18px × line-height 2.05 = 36.9px ／ border 1px×2）
     SP375  → 幅100% × 78.8px（padding-inline:42px ／ 文字16px × 2.05 = 32.8px）
   ※design-rules §8「ボタン高45px統一」に対する、本ページ送信ボタン**のみ**の意図的例外。
   ※min-height:0 は design-system.css `.btn:not(.btn--small){min-height:45px}` の解除。
   ※font-family:inherit ＝ button要素はfont-familyを継承せずArialで描画されていた（実測）ための明示指定。 */
.form__submit .btn{
  width:100%;
  font-family:inherit;
  font-size:var(--fs-h3);
  line-height:var(--lh-body);
  min-height:0;
  padding-block:22px;
  padding-inline:max(42px,min(64px,8%));
}
@media(min-width:768px){
  .form__submit .btn{width:auto;min-width:min(420px,100%);padding-inline:max(60px,min(64px,8%));}
}

/* ブロック4 送信後の流れ */
.flow-list{list-style:none;counter-reset:flow;max-width:var(--c1-measure-narrow);margin:0 auto;}
.flow-list__item{
  counter-increment:flow;position:relative;
  padding:0 0 32px 56px;
}
.flow-list__item::before{
  content:counter(flow);
  position:absolute;left:4px;top:0;
  width:34px;height:34px;border:1px solid var(--c-text);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-caption);background:var(--c-bg);
}
.flow-list__item::after{
  content:"";position:absolute;left:20px;top:38px;bottom:4px;
  width:1px;background:var(--c-line-dark);
}
.flow-list__item:last-child::after{display:none;}
.flow-list__title{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);line-height:1.8;}  /* C-1: L2・見出し500 */
.flow-list__text{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);}                   /* C-1: L4 */
/* C-1: 費用の一文はページ内で読ませたい一行＝L2へ引き上げ（太字に頼らずサイズで立てる） */
/* [20260821bu] ディレクター判断 P76-②（2026-08-24）＝「18px固定にして clamp だけ解消」。
   意図した級数は当初から18px（下のコメント参照）だったが、--c1-fs-lead は
   clamp(15px,1.35vw,19px) のため 1280px で17.3px／1440px で19px と幅により揺れていた。
   --fs-h3（SP16 / 768以上18px の固定トークン）へ置換。新規級数は作っていない。 */
.flow-fee{max-width:var(--c1-measure-narrow);margin:40px auto 0;text-align:center;font-size:var(--fs-h3);line-height:2;letter-spacing:var(--ls-1);border-top:1px solid var(--c-line);padding-top:32px;}
.flow-fee-note{max-width:var(--c1-measure-narrow);margin:14px auto 0;text-align:center;font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);}

/* [20260821ce] ディレクター判断 1-A（2026-08-24）＝「SPも18pxにする」。
   20260821bu で --c1-fs-lead(clamp) → --fs-h3 にした結果、--fs-h3 は SP16/768以上18px のため
   **SPだけ16px**となり、本文15pxとの差が1pxしか無く強調として機能していなかった（実測390px）。
   → SPでもPCと同じ18pxに揃える。
   ※18px は L2（--fs-h3）のPC値そのもので、**新しい級数を作ってはいない**（§10-2「中間サイズを新設しない」）。
   ※副作用として、SPでは L2見出し(16px) より強調文(18px) の方が大きくなる。
     PCでは 強調=L2見出し=18px で同値なので、SPだけ関係が変わる点はディレクターへ報告済み。 */
@media(max-width:767px){
  .flow-fee{font-size:18px;}
}

/* ブロック2.5 電話（P54=統合。代表番号1本＝1カラム） */
.tel-list{display:grid;gap:var(--grid-gap);max-width:var(--c1-measure);margin:0 auto;}
@media(min-width:768px){.tel-list{grid-template-columns:1fr 1fr;}}
/* 2026-08-09 P54: 拠点2枚→代表番号1本に統合。1枚だけ横いっぱいに伸びるのを避け幅を絞る */
.tel-list--single{max-width:420px;}
@media(min-width:768px){.tel-list--single{grid-template-columns:1fr;}}
.tel-card{border:1px solid var(--c-line);background:var(--c-bg);padding:20px 16px;text-align:center;}
.tel-card__name{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);}  /* C-1: L3・見出し500 */
/* C-1: 電話番号＝この一群の主役。SP22 / PC28（batch1 .g-block>h3 と同じ扱い）で級数ジャンプを作る */
.tel-card__num{font-size:var(--c1-fs-h2);font-family:var(--ff-en);letter-spacing:.04em;line-height:1.4;display:block;margin:8px 0 0;text-decoration:none;padding:6px 0;}
.tel-card__hours{font-size:var(--fs-caption);color:var(--c-text-sub);}
.tel-hours{font-size:var(--fs-caption);color:var(--c-text-sub);text-align:center;margin-top:16px;letter-spacing:.04em;}

/* 電話番号のアイコン（20260810d QA対応: 電話アイコンを添える） */
.tel-card__ic{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;vertical-align:-.04em;margin-right:.3em;}
/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。 */
.nowrap{white-space:nowrap;}

/* [20261027m] 3カードの罫線を一辺ずつ描く（ディレクター指示 2026-10-27）＝JS（contact-channels.js）が .cl-draw／.is-in を付ける。
   枠線を透明にし、同じ色・太さの線を背景の4層（上・右・下・左）で描く。1本のアニメーションの中で 0→25→50→75→100% に1辺ずつ伸ばす。
   background-origin を border-box にして、元の枠と同じ位置に重ねる。JS が動かない・動きを減らす設定では .cl-draw が付かず、元の枠のまま */
.channel-list.cl-draw .channel{
  --cl-c:var(--c-line);--cl-w:1px;
  border-color:transparent;
  background-image:linear-gradient(var(--cl-c),var(--cl-c)),linear-gradient(var(--cl-c),var(--cl-c)),linear-gradient(var(--cl-c),var(--cl-c)),linear-gradient(var(--cl-c),var(--cl-c));
  background-repeat:no-repeat;background-origin:border-box;
  background-position:left top,right top,right bottom,left bottom;
  background-size:0 var(--cl-w),var(--cl-w) 0,0 var(--cl-w),var(--cl-w) 0;
}
.channel-list.cl-draw .channel--main{--cl-c:var(--c-text);--cl-w:2px;}
.channel-list.cl-draw.is-in .channel{animation:cl-draw 1.6s both;}
.channel-list.cl-draw.is-in .channel:nth-child(2){animation-delay:.22s;}
.channel-list.cl-draw.is-in .channel:nth-child(3){animation-delay:.44s;}
@keyframes cl-draw{
  0%  {background-size:0 var(--cl-w),var(--cl-w) 0,0 var(--cl-w),var(--cl-w) 0;animation-timing-function:cubic-bezier(.5,0,.3,1);}
  25% {background-size:100% var(--cl-w),var(--cl-w) 0,0 var(--cl-w),var(--cl-w) 0;animation-timing-function:cubic-bezier(.5,0,.3,1);}
  50% {background-size:100% var(--cl-w),var(--cl-w) 100%,0 var(--cl-w),var(--cl-w) 0;animation-timing-function:cubic-bezier(.5,0,.3,1);}
  75% {background-size:100% var(--cl-w),var(--cl-w) 100%,100% var(--cl-w),var(--cl-w) 0;animation-timing-function:cubic-bezier(.5,0,.3,1);}
  100%{background-size:100% var(--cl-w),var(--cl-w) 100%,100% var(--cl-w),var(--cl-w) 100%;}
}