/* =====================================================================
   地域LP（/area/ 系）専用CSS  — lp_area/templates/assets/area.css
   - モバイルファースト。PCは @media (min-width: 641px) で上書き（既存LPの SP=640px 以下 と同じ境界）
   - クラス接頭辞 al-（area landing）。共通 /lp01/common/style.css は触らない前提で、このファイルだけで完結する
   - 色はモック（Claude Design「地域LPテンプレ」）で実LP /lp01/ta_chat/ から実測した値
   ===================================================================== */

/* フォント：元LP（/lp01/ta_chat/）と同じ自前配信。Noto Sans JP は build.py がページ内の文字だけでサブセット生成 */
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/NotoSansJP-subset.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Roboto.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Inter-opsz.woff2') format('woff2'); }

:root {
  --al-green: #005147;      /* 深緑（ブランド） */
  --al-green-dark: #00352E;
  --al-orange: #F68014;     /* オレンジ（強調） */
  --al-red: #C71714;        /* 電話番号の赤 */
  --al-gold: #806004;       /* 実績ラベルのゴールド */
  --al-brown: #66522D;      /* 見出し下線 */
  --al-cream: #F9F5EC;      /* 交互背景 */
  --al-sand: #F7F2DC;       /* フォーム背景 */
  --al-line: #DDD9D0;       /* 罫線 */
  --al-line-light: #EFEBE0;
  --al-text: #222222;
  --al-text-2: #333333;
  --al-text-3: #666666;
  --al-text-4: #757575;  /* 旧#999。コントラストAA(4.6:1)対応 2026-08-31 */
  --al-btn-top: #CFA265;    /* ゴールドボタン グラデ */
  --al-btn-bottom: #B9884A;
  --al-yellow: #FFEF3B;
  --al-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --al-font-num: Inter, "Noto Sans JP", sans-serif;
  --al-font-tel: Roboto, Inter, Arial, sans-serif;
}

/* ---------- ベース ---------- */
.al-page { margin: 0; font-family: var(--al-font); color: var(--al-text); background: #FFFFFF; line-height: 1.6; -webkit-text-size-adjust: 100%; }
.al-page *, .al-page *::before, .al-page *::after { box-sizing: border-box; }
.al-page img { max-width: 100%; height: auto; display: block; }
.al-page a { color: inherit; text-decoration: none; }
.al-inner { width: 100%; }
.al-nowrap { white-space: nowrap; }
.al-hl { }                                                                             /* 可変箇所（本番は装飾なし） */
.al-mark .al-hl, .al-hl--on { background: linear-gradient(transparent 64%, #FDE68A 64%); padding: 0 1px; }   /* --mark で可変箇所を黄色表示（レビュー用）。al-hl--on は本番でも黄色（★1の登録数・事務所数） */
.al-orange { color: var(--al-orange); font-weight: 700; }
.al-green { color: var(--al-green); font-weight: 700; }
.al-red { color: var(--al-red); }
.al-pc-only { display: none !important; }
.al-sp-only { display: block; }
.al-pc-inline { display: none !important; }      /* PCだけ表示する行内要素 */
.al-sp-inline { display: inline-block; }         /* SPだけ表示する行内要素 */
.al-sp-br { display: inline; }   /* SPだけ改行 */
.al-pc-br { display: none; }     /* PCだけ改行 */

/* ---------- ヘッダー ---------- */
.al-header { display: flex; justify-content: center; align-items: center; padding: 6px 14px; background: #FFFFFF; }
.al-header .al-header__logo { height: 36px; width: auto; max-width: 88%; }   /* .al-page img より優先させるため2段セレクタ */
.al-header__tel { display: none; }

/* ---------- FV ---------- */
.al-hero { background: linear-gradient(170deg, #FFFFFF 0%, #F8F4EC 50%, #F7F2DC 100%); overflow: hidden; }
.al-hero__photo { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 12px 16px 0 16px; background: linear-gradient(to top, #F7F2DC 0%, #FFFFFF 100%); overflow: hidden; }
.al-hero__photo img { width: 55%; max-width: 230px; }
.al-hero__title-wrap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF, 0 -2px 0 #FFF, 0 2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF, -3px 0 0 #FFF, 3px 0 0 #FFF, 0 -3px 0 #FFF, 0 3px 0 #FFF; }
.al-hero__title { margin: 0; font-size: 29px; font-weight: 900; color: var(--al-text); letter-spacing: -0.3px; line-height: 1.35; }
.al-hero__title em { font-style: normal; color: var(--al-orange); }
.al-hero__content { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px 10px 16px; text-align: center; }
/* 幅 360px 以下の端末（Android の主流）で 3 つの文言が枠内で折り返していた（必要幅 328px に対し内幅 328px 以下）。
   文字サイズを画面幅に合わせて縮め（375px 以上は従来と同じ 15／30／18px）、語の途中では折らない。
   それでも収まらない環境（端末の文字拡大など）では「NN年の信頼と実績」ごと 2 行目へ送る */
.al-hero__pioneer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0 3px; }
.al-hero__pioneer-label { font-size: clamp(12.5px, 4vw, 15px); font-weight: 800; color: var(--al-green); padding-bottom: 3px; white-space: nowrap; }
.al-hero__pioneer-num { font-size: clamp(26px, 8vw, 30px); font-weight: 800; color: var(--al-gold); line-height: 1; font-family: var(--al-font-num); white-space: nowrap; }
.al-hero__pioneer-tail { font-size: clamp(15px, 4.8vw, 18px); font-weight: 700; color: var(--al-gold); padding-bottom: 1px; white-space: nowrap; }
.al-hero__lead { font-size: 16px; font-weight: 600; line-height: 1.8; color: var(--al-text); }
.al-hero__lead strong { color: var(--al-orange); font-weight: 900; white-space: nowrap; }
.al-hero__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px 14px; }
.al-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 5px 4px; background: #FFFFFF; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.al-metric__label { font-size: 13px; font-weight: 700; color: var(--al-gold); }
.al-metric__value { font-size: 26px; font-weight: 700; color: var(--al-green); line-height: 1.2; font-family: var(--al-font-num); }
.al-metric__unit { font-size: 13px; font-weight: 600; color: var(--al-brown); }
.al-metric__sup { font-size: 11px; color: var(--al-text-3); vertical-align: super; }
.al-metric__note { font-size: 12px; color: var(--al-text-3); text-align: center; }
/* 実績タイルの置き場（2026-09-18 UI/UX 指摘 1 → 2026-09-24 案 3）：ヒーロー直下のフォーム＋電話 1 行の下。Meta の .meta-metrics を共通化 */
.al-metrics { background: #FFFFFF; padding: 14px 0 6px; }
.al-metrics .al-hero__metrics { padding: 0 16px 8px; }

/* ---------- 電話CTA ---------- */
.al-tel { padding: 14px 14px 18px 14px; background: #FFFFFF; }
.al-tel__box { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #FFFFFF; border: 2px solid var(--al-green); border-radius: 8px; padding: 12px 14px 14px 14px; }
.al-tel__head { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.al-tel__head::before, .al-tel__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--al-green); opacity: 0.45; }
.al-tel__head-text { font-size: 17px; font-weight: 700; color: var(--al-text-2); text-align: center; line-height: 1.5; flex-shrink: 0; }
.al-tel__num { display: flex; align-items: center; gap: 8px; }
.al-tel__num img { width: 42px; height: auto; }
.al-tel__digits { font-size: 31px; font-weight: 900; letter-spacing: 1px; line-height: 1; font-family: var(--al-font-tel); color: var(--al-text-2); }
.al-tel__digits b { font-weight: 900; color: var(--al-red); }
.al-tel__hours { font-size: 14px; font-weight: 700; color: var(--al-text-2); text-align: center; }

/* ---------- Web誘導＋STEP帯 ---------- */
.al-webcta { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 10px 0; background: #FFFFFF; }
.al-webcta__row { display: flex; align-items: center; gap: 6px; }
.al-webcta__label { font-size: 16px; font-weight: 900; color: var(--al-green); }
.al-webcta__badge { font-size: 14px; font-weight: 900; color: #FFFFFF; background: var(--al-orange); border-radius: 10px; padding: 2px 9px; }
.al-steps { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px 0; background: var(--al-green); }
.al-steps__label { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.al-steps__dots { display: flex; align-items: center; gap: 6px; }
.al-steps__dot { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #FFFFFF; font-size: 12px; font-weight: 700; color: #FFFFFF; }
.al-steps__dot--on { background: #FFFFFF; color: var(--al-green); font-weight: 900; }
.al-steps__line { width: 10px; height: 1px; background: #FFFFFF; }
.al-steps__tail { font-size: 14px; font-weight: 900; color: #FFFFFF; text-align: center; line-height: 1.2; }

/* ---------- フォーム（共通コンポーネント差し替え枠） ---------- */
.al-form { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px 20px; background: var(--al-sand); }
.al-form__head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.al-form__tag { font-size: 14px; font-weight: 700; color: #000000; background: var(--al-yellow); padding: 2px 10px; }
.al-form__title { font-size: 17px; font-weight: 900; color: #000000; margin: 0; }
/* SPは2列グリッド（/lp01/ta_chat/ と同じ。5個目は左カラム半分幅）。PCは@mediaで1列に戻す */
.al-form__choices { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; column-gap: 10px; row-gap: 8px; width: min(100%, 440px); margin: 0 auto; }   /* auto-rows:1fr で1行ラベルの箱（確定申告・その他）も2行ラベルの行と同じ天地に */
.al-form__choice { display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 6px 8px; text-align: center; line-height: 1.3; background: #FFFFFF; border: 1px solid var(--al-text-2); border-radius: 3px; font-size: 16px; font-weight: 700; color: var(--al-green); cursor: pointer; }
.al-form__submit { display: flex; justify-content: center; align-items: center; gap: 6px; height: 50px; background: linear-gradient(100deg, #F9A03F, #E0720C); border-radius: 4px; font-size: 16px; font-weight: 900; color: #FFFFFF; cursor: pointer; }   /* オレンジグラデ＝ta_chat .selector-form__button と同値（#f9a03f→--vc-orange-hover #e0720c） */
.al-form__submit em { font-style: normal; color: var(--al-yellow); }
.al-form__privacy { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 12px; color: var(--al-text-3); }
/* Step1フォームの選択状態（/lp01/ta_chat/ と同じふるまい：選択＝オレンジ、非選択＝グレーアウト、未選択時はボタン不活性） */
.al-form__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.al-form__choice { position: relative; user-select: none; -webkit-user-select: none; }
.al-form__choice:has(input:checked) { background: #FFF5EB; border-color: var(--al-orange); color: var(--al-orange); }
.al-form__choice.is-checked { background: #FFF5EB; border-color: var(--al-orange); color: var(--al-orange); } /* :has非対応ブラウザ用フォールバック */
.al-form__choices.has-selection .al-form__choice:not(.is-checked) { opacity: .55; }
button.al-form__submit { border: none; width: 100%; padding: 0; margin-top: 8px; font-family: inherit; -webkit-appearance: none; appearance: none; position: relative; }
.al-form__submit--inactive { opacity: .5; cursor: not-allowed; }
/* 選択後にボタンへ出る指アイコン（/lp01/ta_chat/ と同じ表現：絵文字を白シルエット化＋タップアニメ） */
.al-form__finger { display: none; position: absolute; z-index: 2; bottom: -12px; right: 32px; font-size: 30px; line-height: 1; pointer-events: none; filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.45)); animation: al-finger-tap .9s ease-in-out infinite; }
.al-form__choices.has-selection ~ .al-form__submit .al-form__finger { display: block; }
@keyframes al-finger-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 未選択でボタンを押したときの誘導（ヒント表示＋選択肢パルス） */
.al-form__hint { display: block; visibility: hidden; margin: 6px 0 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 1; min-height: 12px; color: var(--al-orange); }   /* スペースを常に確保（SP=親block）。表示切替で下のボタンは動かない */
.al-form__hint.is-on { visibility: visible; }
.al-form__choices.al-nudge .al-form__choice { animation: al-choice-pulse .5s ease-in-out 2; }
@keyframes al-choice-pulse { 50% { border-color: var(--al-orange); box-shadow: 0 0 0 2px rgba(246, 128, 20, .3); } }
@media (prefers-reduced-motion: reduce) { .al-form__finger, .al-form__choices.al-nudge .al-form__choice { animation: none; } }

/* ---------- セクション共通 ---------- */
.al-sec { padding: 24px 20px; background: #FFFFFF; }
.al-sec--cream { background: var(--al-cream); }
.al-sec__inner { display: flex; flex-direction: column; gap: 12px; }
.al-sec__title { margin: 0; font-size: 22px; font-weight: 900; color: #000000; line-height: 1.4; }
.al-sec__title::after { content: ""; display: block; width: 44px; height: 3px; background: var(--al-brown); margin-top: 4px; }
.al-sec__title--long { }   /* 34. 2026-10-05：市ページの「◯◯市を含む△△県で」は 1 行固定（nowrap＋縮小）をやめ、SP は「で」の後で改行（テンプレの al-sp-br）。小田原市・さいたま市で 360px 幅から 6px はみ出したため */
.al-sec__lead { font-size: 16px; color: var(--al-text-2); line-height: 1.8; }
.al-sec__note { font-size: 13px; color: var(--al-text-4); line-height: 1.6; }
.al-sec__sub { font-size: 16px; font-weight: 900; color: #000000; border-bottom: 2px solid var(--al-line); padding-bottom: 6px; }
.al-sec__catch { font-size: 14px; line-height: 1.8; color: var(--al-text-2); }
.al-row2 { display: flex; flex-direction: column; gap: 12px; }

/* ---------- ★1 登録税理士・事務所 ---------- */
.al-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.al-tile { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--al-line); border-radius: 4px; padding: 14px 12px; background: #FFFFFF; }
.al-tile__label { font-size: 14px; color: var(--al-text-2); }
.al-tile__value { margin-top: auto; font-size: 28px; font-weight: 900; color: var(--al-green); }   /* ラベルが2行になっても左右の数字を下端で揃える */
.al-tile__unit { font-size: 14px; }
.al-cards { display: flex; flex-direction: column; gap: 8px; }
.al-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--al-line); border-radius: 4px; padding: 12px 12px; background: #FFFFFF; }
.al-card__icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--al-cream); flex-shrink: 0; }
.al-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-card__name { font-size: 16px; font-weight: 700; color: #000000; }
.al-card__line { font-size: 16px; color: var(--al-text-3); }
/* 所在地・最寄り駅は語の途中で折らない（.al-nowrap）。ただし 1 語がカード幅より長い事務所（最寄り駅欄に案内文が入っている等）は
   画面外へはみ出して横スクロールが出ていたため、幅を超える語だけは枠内で折り返す */
.al-card__line .al-nowrap { display: inline-block; max-width: 100%; white-space: normal; vertical-align: top; }
.al-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.al-tag { font-size: 12px; color: var(--al-green); background: var(--al-cream); border-radius: 3px; padding: 2px 6px; }

/* ---------- ★2 相場表 ---------- */
.al-price { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; overflow: hidden; }
.al-price__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--al-line-light); }
.al-price__row:last-child { border-bottom: 0; }
.al-price__row--head { background: var(--al-green); border-bottom: 0; }
.al-price__row--head > div { font-size: 14px; font-weight: 700; color: #FFFFFF; padding: 8px 12px; }
.al-price__label { font-size: 15px; color: #000000; padding: 10px 12px; }
.al-price__value { font-size: 15px; font-weight: 900; color: var(--al-green); padding: 10px 12px; text-align: right; }
.al-price__value small { display: block; font-size: 13px; font-weight: 700; color: var(--al-text-3); }
.al-price__row--hot { background: #FFF6E8; }                                   /* 法人（KPI最優先）の行を目立たせる */
.al-price__row--hot .al-price__value { font-size: 17px; }
.al-price__hot { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #FFFFFF; background: var(--al-orange); border-radius: 3px; padding: 1px 6px; vertical-align: 1px; white-space: nowrap; }
.al-hours-hot { color: var(--al-green); font-weight: 900; }                     /* 土日・祝日も受付 */
.al-free { color: var(--al-orange); font-weight: 900; }                         /* 一切無料 */
.al-hero__local { font-weight: 700; }
.al-hero__local b { color: var(--al-green); font-size: 1.3em; font-weight: 900; font-family: var(--al-font-num); }
.al-reading { display: none; }   /* PCのみ表示する「相場の読み方」カード */

/* ---------- ★4 対応エリア ---------- */
.al-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.al-chip { font-size: 14px; font-weight: 700; color: var(--al-green); border: 1px solid var(--al-green); border-radius: 3px; padding: 6px 10px; }
.al-chip--tail { font-size: 14px; font-weight: 400; color: var(--al-text-2); border: 0; padding: 6px 4px; }
.al-areas__text { display: flex; flex-direction: column; gap: 12px; }
.al-areas__catch { font-size: 12px; }
.al-areas__map { margin-top: 14px; text-align: center; }
.al-areas__map img { width: 100%; height: auto; }   /* SPは中央寄せ・左右いっぱい */
.al-cities__catch-title { display: none; }

/* ---------- ★5 対応体制 ---------- */
.al-station { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; padding: 14px 14px; }
.al-station__photo { width: 46px; height: 46px; border-radius: 3px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--al-line); }
.al-station__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-station__name { font-size: 16px; font-weight: 700; color: #000000; }
.al-station__addr { font-size: 16px; color: var(--al-text-3); }
.al-station__manager { font-size: 14px; color: var(--al-text-2); }
.al-station__cover { font-size: 13px; font-weight: 700; color: var(--al-green); }
.al-station-lead { font-size: 14px; line-height: 1.8; color: var(--al-text-2); letter-spacing: -0.02em; text-align: justify; }   /* 強制改行なしで自然に流す（ユーザー指示）。1文字行落ちは字間で吸収 */
.al-station-lead__title { font-weight: 900; color: var(--al-green); }
.al-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; padding: 8px 10px; }
.al-strip__item { font-size: 13px; color: var(--al-text-3); }
.al-strip__item--on { font-weight: 900; color: #FFFFFF; background: var(--al-green); border-radius: 2px; padding: 1px 5px; }
.al-strip__sep { font-size: 12px; color: var(--al-line); }
.al-strip-card { display: contents; }   /* SPではストリップだけ出す。PCでカード化 */
.al-strip-card__title, .al-strip-card__method { display: none; }
.al-station-visual { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.al-station-visual__photo { margin: 0; border: 1px solid var(--al-line); border-radius: 4px; overflow: hidden; background: #FFFFFF; }
.al-station-visual__photo img { display: block; width: 100%; height: auto; }
.al-station-visual__photo figcaption { padding: 8px 12px; font-size: 12px; color: var(--al-text-2); background: #FFFFFF; }
.al-station-visual__map { border: 1px solid var(--al-line); border-radius: 4px; overflow: hidden; }
.al-station-visual__map iframe { display: block; width: 100%; height: 220px; }
.al-support { font-size: 16px; line-height: 1.7; color: var(--al-text-2); background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; padding: 12px 14px; letter-spacing: -0.02em; text-align: justify; }

/* ---------- ★3 見直し事例 ---------- */
.al-cases { display: flex; flex-direction: column; gap: 8px; }
.al-case { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--al-line); border-radius: 4px; padding: 12px 12px; background: #FFFFFF; }
.al-case__body { display: flex; flex-direction: column; gap: 3px; }
.al-case__who { font-size: 15px; color: var(--al-text-3); }
.al-case__fee { font-size: 16px; font-weight: 900; color: #000000; }
.al-case__before { color: var(--al-text-4); font-weight: 700; text-decoration: line-through; }
.al-case__after { color: var(--al-green); }
.al-case__badge { font-size: 14px; font-weight: 900; color: #FFFFFF; background: var(--al-orange); border-radius: 3px; padding: 4px 8px; flex-shrink: 0; }

/* ---------- ご紹介の流れ ---------- */
.al-flow__title { margin: 0; font-size: 19px; font-weight: 900; color: #000000; text-align: center; line-height: 1.4; }
.al-flow__title small { display: block; font-size: 16px; font-weight: 700; color: var(--al-green); }
.al-flow__list { display: flex; flex-direction: column; gap: 10px; }
.al-flow__item { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; padding: 13px 14px; }
.al-flow__num { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--al-green); font-size: 16px; font-weight: 900; color: #FFFFFF; flex-shrink: 0; }
.al-flow__body { display: flex; flex-direction: column; gap: 1px; }
.al-flow__head { font-size: 16px; font-weight: 700; color: #000000; }
.al-flow__desc { font-size: 16px; color: var(--al-text-3); }

/* ---------- 最終CTA ---------- */
.al-final { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; background: #FFFFFF; border-top: 1px solid var(--al-line); text-align: center; }
.al-final__title { margin: 0; font-size: 17px; font-weight: 900; color: #000000; }
.al-final__row { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.al-final__tel { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.al-final__tel-mark { width: 34px; height: auto; flex-shrink: 0; }   /* 実LPのフリーダイヤルマーク（logo-freedial.svg） */
.al-final__digits { font-size: 32px; font-weight: 900; color: var(--al-text-2); letter-spacing: 0.01em; line-height: 1; font-family: var(--al-font-tel); white-space: nowrap; }
.al-final__digits b { font-weight: 900; color: var(--al-red); }
.al-final__hours { font-size: 12px; color: var(--al-text-2); text-align: center; }
/* ★5「要予約」注記の予約電話導線（SPはモーダル経由・PCは直リンク。2026-09-01） */
.al-page .al-lead-tel { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--al-green); cursor: pointer; }
.al-lead-tel img { width: 22px; height: auto; }
.al-lead-tel__digits { color: var(--al-text-2); font-family: var(--al-font-tel); font-size: 17px; font-weight: 900; letter-spacing: 0.2px; }
.al-lead-tel b { color: var(--al-red); font-family: var(--al-font-tel); font-size: 17px; font-weight: 900; letter-spacing: 0.2px; }
.al-final__catch { font-size: 14px; line-height: 1.7; color: #000000; }

/* ---------- フッター ---------- */
.al-footer { padding: 18px 20px 16px 20px; background: #FFFFFF; border-top: 1px solid var(--al-line); font-size: 14px; color: var(--al-text-3); }
.al-footer .al-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.al-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }   /* SPは縦並び（区切りが行頭に落ちるのを防ぐ） */
.al-footer__links li { font-size: 14px; }
.al-footer__links a, .al-footer__pmark a { color: var(--al-green); text-decoration: underline; }
.al-footer__pmark { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.al-footer__pmark > a { display: block; width: 50px; height: 50px; flex-shrink: 0; }   /* リンク側が縮むと画像が潰れるので固定 */
.al-page .al-footer__pmark img { width: 50px; height: 50px; max-width: none; object-fit: contain; }   /* 元画像200×200（正方形）を等倍縮小 */
.al-footer__pmark p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--al-text-3); text-align: left; }
.al-footer__copy { font-size: 12px; color: var(--al-text-4); }
.al-footer-space { height: 66px; }   /* 追従バーぶんの余白（画像ボタン50px＋上下パディング） */

/* ---------- 追従CTAバー（SPのみ・画面下固定）
   /lp01/ta_chat/ の fixed_sp と同じ：画像ボタン2つ（btn_tel.svg／btn_web.svg）・半透明白地。
   初期非表示で、Step1フォーム通過後にフェード表示（JSが .is-on を付与。元ソースのfadeIn/Out相当） ---------- */
.al-fixedbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,0.9); box-shadow: 0 -10px 10px rgba(237,237,237,0.6); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.al-fixedbar.is-on { opacity: 1; visibility: visible; }
.al-fixedbar__tel { display: block; cursor: pointer; flex-shrink: 1; min-width: 0; }
.al-fixedbar__tel img { height: 50px; width: auto; max-width: 100%; }
.al-fixedbar__web { display: block; flex-shrink: 0; }
.al-fixedbar__web img { height: 50px; width: auto; }

/* ---------- 電話モーダル（SPの誤タップ防止・/lp01/ta_chat/ #commonModal と同じ見た目） ---------- */
.al-telmodal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; display: none; }
.al-telmodal.is-open { display: block; animation: al-telmodal-fade 0.6s; }
@keyframes al-telmodal-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
.al-telmodal__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; max-width: 400px; background: #FEFEFE; z-index: 2; border-radius: 5px; }
.al-telmodal__x { position: absolute; top: -55px; right: -12px; width: 50px; height: 50px; padding: 0; border: 0; background: none; color: #FFFFFF; font-size: 50px; line-height: 1; text-align: right; cursor: pointer; }
.al-telmodal__frame { margin: 5px; border: 3px solid var(--al-orange); border-radius: 5px; background: var(--al-orange); overflow: hidden; }
.al-telmodal__head { color: #FFFFFF; padding: 10px; text-align: center; }
.al-telmodal__head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.al-telmodal__body { background: #FFFFFF; padding: 5px; text-align: center; }
.al-telmodal__lead { margin: 0; padding: 5px; font-size: 16px; font-weight: 700; }
.al-page .al-telmodal__num { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.al-telmodal__num img { height: 26px; width: auto; }
.al-telmodal__digits { font-size: 30px; font-weight: 900; color: var(--al-text-2); font-family: var(--al-font-tel); letter-spacing: 0.5px; line-height: 1; }
.al-telmodal__digits b { font-weight: 900; color: var(--al-red); }
.al-telmodal__reception { display: block; width: 100%; height: auto; }
.al-telmodal__note { margin: 0; padding: 12px; font-size: 12px; color: var(--al-text-2); }
.al-telmodal__actions { display: flex; justify-content: center; align-items: center; gap: 2%; padding-bottom: 6px; }
.al-page .al-telmodal__actions .al-telmodal__call { display: block; width: 48%; }
.al-telmodal__actions img { width: 100%; height: auto; }
.al-telmodal__actions .al-telmodal__cancel { width: 48%; cursor: pointer; }
.al-telmodal__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1; }

/* =====================================================================
   PC（641px以上）— モックの「大阪版PC」を再現。内側幅960px・各ブロック中央揃え
   ===================================================================== */
@media (min-width: 641px) {
  .al-pc-only { display: block !important; }
  .al-sp-only { display: none !important; }
  .al-pc-inline { display: inline !important; }
  .al-sp-inline { display: none !important; }
  .al-sp-br { display: none; }
  .al-pc-br { display: inline; }
  .al-inner { max-width: 960px; margin: 0 auto; }

  /* ヘッダー：ロゴ左・電話右 */
  .al-header { padding: 12px 0; }
  .al-header .al-inner { display: flex; justify-content: space-between; align-items: center; }
  .al-header .al-header__logo { height: 44px; max-width: none; }
  /* ta_chat の .header_telbanner に合わせる（9px/26px黒一色/10px・左揃え・ロゴ30px） */
  .al-header__tel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; white-space: nowrap; }
  .al-header__tel-cap { font-size: 9px; line-height: 0.8; color: var(--al-text-2); }
  .al-header__tel-row { display: flex; align-items: center; gap: 5px; }
  .al-header__tel-row img { width: 30px; margin-bottom: -3px; }
  .al-header__tel-num { font-size: 30px; font-weight: 700; color: var(--al-text-2); font-family: var(--al-font-tel); line-height: 1; }
  .al-header__tel-hours { font-size: 10px; line-height: 1; color: var(--al-text-2); }

  /* FV：2カラム（テキスト左・写真右400px） */
  .al-hero .al-inner { display: flex; align-items: flex-end; }
  .al-hero__photo { position: static; order: 2; width: 400px; flex-shrink: 0; padding: 0; background: none; align-self: flex-end; }
  .al-hero__photo img { width: 400px; max-width: 400px; }
  .al-hero__title-wrap { display: none; }              /* SP用の写真上タイトルは非表示 */
  .al-hero__content { order: 1; flex: 1 1 0; min-width: 0; align-items: flex-start; text-align: left; gap: 14px; padding: 16px 24px 24px 0; position: relative; z-index: 2; }   /* 29 参照：本文は「枠 960 − 写真 400 ＝ 560px」に固定 */
  .al-hero__pioneer { justify-content: flex-start; gap: 4px; text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF; }
  .al-hero__pioneer-label { padding-bottom: 6px; }
  .al-hero__pioneer-num { font-size: 48px; }
  .al-hero__pioneer-tail { font-size: 22px; padding-bottom: 4px; }
  .al-hero__title--pc { display: block; margin: 0; font-size: 42px; font-weight: 900; line-height: 1.3; color: var(--al-text); letter-spacing: -0.5px; white-space: normal; }   /* 29 参照：長い見出しは <br class="al-pc-br"> の位置で 2 行に */
  .al-hero__title--pc .al-nowrap { white-space: nowrap; }
  .al-hero__title--pc em { font-style: normal; color: var(--al-orange); }
  .al-hero__lead { font-size: 18px; }
  .al-hero__metrics { display: flex; gap: 10px; padding: 0; }
  .al-metrics .al-inner { max-width: 640px; margin: 0 auto; }
  .al-metrics .al-hero__metrics { padding: 0 0 10px; }
  .al-metric { padding: 12px 18px 8px 18px; min-height: 90px; border-radius: 8px; }
  .al-metric__label { font-size: 16px; }
  .al-metric__value { font-size: 40px; }
  .al-metric__unit { font-size: 16px; }

  /* 電話CTA */
  .al-areas { display: flex; align-items: center; gap: 32px; width: 100%; }   /* 2026-09-17：左列にチップ＋見出し＋説明、右列に地図（チップだけが浮く余白をなくす） */
  .al-areas__text { flex: 1 1 auto; align-items: flex-start; gap: 14px; }
  .al-areas .al-chips { justify-content: flex-start; }
  .al-areas .al-cities__catch-title { text-align: left; }
  .al-areas__text .al-sec__catch { text-align: left; font-size: 13px; margin: 0; }
  .al-areas__map { margin-top: 0; flex: 0 0 auto; }
  .al-areas__map img { width: 260px; max-width: none; }
  .al-tel { padding: 12px 0 22px 0; background: var(--al-cream); }
  .al-tel__box { padding: 12px 24px 16px 24px; gap: 8px; }
  .al-tel__head { gap: 14px; }
  .al-tel__head-text { font-size: 24px; }
  .al-tel__num img { width: 60px; }
  .al-tel__digits { font-size: 62px; }
  .al-tel__hours { font-size: 16px; }
  .al-webcta { background: var(--al-cream); }
  .al-webcta__label { font-size: 18px; }

  /* フォーム */
  .al-form { padding: 26px 0 30px 0; }
  .al-form__hint { margin: -6px 0; }   /* 親flexのgap(14px)を相殺して確保高さを最小限に */
  .al-form .al-inner { display: flex; flex-direction: column; gap: 14px; }
  .al-form__title { font-size: 22px; }
  .al-form__privacy { font-size: 14px; }
  .al-metric__note { font-size: 14px; }
  /* PCは /lp01/ta_chat/ と同じく1列縦並び・幅440px中央寄せ */
  .al-form__choices { grid-template-columns: 1fr; column-gap: 0; }   /* PCは1列 */
  .al-form__choice { min-height: 52px; font-size: 16px; }
  .al-page button.al-form__submit { height: 56px; font-size: 20px; width: min(100%, 440px); margin: 8px auto 0; }

  /* セクション共通：見出し中央・下線中央 */
  .al-sec { padding: 30px 0; }
  .al-sec__inner { gap: 14px; align-items: center; }
  .al-sec__title { font-size: 28px; text-align: center; }
  .al-sec__title--long { font-size: 28px; letter-spacing: 0; }
  .al-sec__title::after { width: 52px; margin: 4px auto 0 auto; }
  .al-sec__lead { font-size: 18px; text-align: center; }
  .al-sec__note { font-size: 15px; text-align: center; }
  .al-sec__sub { font-size: 18px; text-align: center; padding: 0 20px 6px 20px; }
  .al-sec__catch { font-size: 16px; line-height: 1.9; text-align: center; }
  .al-row2 { flex-direction: row; gap: 20px; width: 100%; align-items: stretch; }
  .al-row2 > * { width: 470px; flex-shrink: 0; }

  /* ★1 */
  .al-tiles { display: flex; justify-content: center; gap: 14px; width: auto; }
  .al-tile { padding: 14px 22px; }
  .al-tile__label { font-size: 14px; }
  .al-tile__value { font-size: 30px; }
  .al-tile__unit { font-size: 16px; }
  .al-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
  .al-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 16px; }
  .al-card__icon { display: flex; }   /* PCでも人型アイコンを表示（縦並びカードの先頭） */
  .al-card__name { font-size: 17px; }
  .al-card__line { font-size: 16px; }
  .al-tag { font-size: 14px; padding: 2px 7px; }

  /* ★2：表＋「相場の読み方」の2カラム */
  .al-price__row--head > div { font-size: 14px; padding: 9px 14px; }
  .al-price__label, .al-price__value { font-size: 17px; padding: 11px 14px; }
  .al-price__row--hot .al-price__value { font-size: 19px; }
  .al-price__hot { font-size: 14px; }
  .al-price__value small { font-size: 15px; }
  .al-reading { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; overflow: hidden; text-align: left; }
  .al-reading__head { font-size: 14px; font-weight: 700; color: #FFFFFF; background: var(--al-green); padding: 9px 14px; }
  .al-reading__body { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.7; color: var(--al-text-2); padding: 12px 16px 14px 16px; }
  .al-reading__item { display: flex; gap: 6px; }
  .al-reading__item::before { content: "●"; color: var(--al-orange); font-weight: 900; flex-shrink: 0; }

  /* ★4 */
  .al-chips { justify-content: center; }
  .al-chip { font-size: 14px; padding: 7px 12px; }
  .al-cities__catch-title { display: block; font-size: 22px; font-weight: 900; color: var(--al-green); text-align: center; line-height: 1.3; padding-top: 4px; }

  /* ★5：担当ステーション＋全国15拠点の2カラム、リード文は見出し化 */
  .al-station-lead { text-align: center; font-size: 16px; line-height: 1.9; }
  .al-station-lead__title { display: block; font-size: 22px; line-height: 1.3; margin-bottom: 4px; }
  .al-station { padding: 16px 16px; gap: 14px; }
  .al-station__photo { width: 52px; height: 52px; }
  .al-station__name { font-size: 16px; }
  .al-station__addr { font-size: 16px; }
  .al-station__manager, .al-station__cover { font-size: 13px; }
  .al-strip-card { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; padding: 14px 16px; }
  .al-strip-card__title { display: block; font-size: 16px; font-weight: 900; color: var(--al-green); }
  .al-strip-card__method { display: block; font-size: 14px; color: var(--al-text-2); margin-top: 2px; }
  .al-strip { border: 0; padding: 0; justify-content: flex-start; gap: 4px 0; line-height: 1.6; }
  .al-strip__item { font-size: 15px; color: #555555; padding: 2px 3px; }
  .al-strip__item--on { color: #FFFFFF; border-radius: 3px; padding: 2px 7px; }
  .al-strip__sep { font-size: 14px; }
  .al-station-visual { flex-direction: row; gap: 20px; margin-top: 20px; width: 100%; }
  .al-station-visual__photo { flex: 1 1 0; display: flex; flex-direction: column; }
  .al-station-visual__photo img { flex: 1; object-fit: cover; min-height: 0; }
  .al-station-visual__map { flex: 1 1 0; }
  .al-station-visual__map iframe { height: 300px; }
  .al-support { width: 100%; font-size: 16px; line-height: 1.8; padding: 12px 16px; }

  /* ★3 */
  .al-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
  .al-case { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 16px; }
  .al-case__top { display: flex !important; justify-content: space-between; align-items: center; }   /* .al-pc-only の block を上書き */
  .al-case__who { font-size: 16px; }
  .al-case__fee { font-size: 17px; }

  /* 流れ */
  .al-flow__title { font-size: 24px; }
  .al-flow__title small { display: inline; font-size: 24px; color: #000000; }
  .al-flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
  .al-flow__head { font-size: 16px; }
  .al-flow__desc { font-size: 16px; }

  /* 最終CTA・フッター */
  .al-final { padding: 30px 0; }
  .al-final__title { font-size: 22px; }
  .al-final .al-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .al-final__row { flex-direction: row; gap: 24px; width: auto; }
  .al-final__digits { font-size: 48px; }
  .al-final__tel-mark { width: 48px; }
  .al-final__hours { font-size: 14px; }
  .al-final__web { flex-shrink: 0; }
  .al-final__catch { font-size: 14px; }
  .al-footer { padding: 22px 0 40px 0; font-size: 14px; }
  .al-footer__links { flex-direction: row; gap: 0; }
  .al-footer__links li { font-size: 14px; }
  .al-footer__links li + li::before { content: "｜"; color: var(--al-line); margin: 0 8px; }
  .al-footer__pmark p { font-size: 14px; }
  .al-footer__copy { font-size: 14px; }
  .al-footer-space { display: none; }
  .al-fixedbar { display: none; }
}

/* ===== 2026-09-17 案 A → 2026-09-24 案 3：ヒーロー直下の 1 画面お申込みフォーム（旧当社フォームの項目＋年商）と、その下の電話 1 行 ===== */
/* 2 カード（.al-ways）と受付時間の切替は 2026-09-24 に廃止（フォームまで届かない利用者が多く、電話タップも出なかったため） */
/* ---- 電話 1 行（フォーム直下）。番号は両端赤・中央黒（CLAUDE.md §2-2） ---- */
.al-inq-tel { padding: 12px 14px 18px; background: var(--al-sand); }   /* 下 18px：フォーム→電話の間隔（6+12）と同じにする（23 参照） */
.al-inq-tel .al-inner { max-width: 640px; margin: 0 auto; padding: 10px 14px 12px; border: 1px solid var(--al-line); border-radius: 8px; background: #FFFFFF; text-align: center; }
.al-inq-tel__label { margin: 0; font-size: 15px; line-height: 1.5; color: var(--al-text-3); }
.al-inq-tel__num { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; text-decoration: none; }
.al-inq-tel__num img { width: 44px; height: auto; display: block; }
.al-inq-tel__digits { font-family: var(--al-font-tel); font-size: clamp(26px, 9.6vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: 0; color: var(--al-text-2); white-space: nowrap; }   /* 32. 2026-10-05：320px で「0120-498-／541」と 2 行に割れていた（地域・リマケ・Meta 13 本とも）。折り返さず、354px 未満だけ文字を縮める */
.al-inq-tel__digits b { color: var(--al-red); }
.al-inq-tel__hours { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--al-text-3); }
/* ---- 案 3 のゲート：最初は「ご相談される方」のタイル行だけ（案内文は置かない・2026-09-24 ユーザー判断）。選ぶと JS が .is-gated を外して残りが開く ---- */
.al-inq__form.is-gated > *:not(.al-inq__row--type) { display: none; }
.al-inq__form:not(.is-gated) > .al-inq__row:not(.al-inq__row--type):not([hidden]), .al-inq__form:not(.is-gated) > .al-inq__privacy, .al-inq__form:not(.is-gated) > .al-inq__agree, .al-inq__form:not(.is-gated) > .al-inq__before-submit, .al-inq__form:not(.is-gated) > .al-inq__submit { animation: al-inq-reveal .35s ease-out both; }
@keyframes al-inq-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .al-inq__form > * { animation: none !important; } }
.al-inq__before-submit { margin: 2px 0 -2px; font-size: 13px; line-height: 1.6; color: var(--al-text-2); text-align: center; }
/* 6) フォームへの着地：枠を一瞬ハイライト（JS が .is-landed を付ける）。最初のタイルへのフォーカスは .al-inq__tile:focus-within の枠線で見える */
.al-inq__form.is-landed { animation: al-inq-land 1.2s ease-out; }
@keyframes al-inq-land { 0% { box-shadow: 0 0 0 4px rgba(246, 128, 20, .6); } 100% { box-shadow: 0 0 0 4px rgba(246, 128, 20, 0); } }
@media (prefers-reduced-motion: reduce) { .al-inq__form.is-landed { animation: none; } }
.al-inq { padding: 14px 14px 6px; background: var(--al-sand); }
.al-inq__title { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: var(--al-text); text-align: center; }
.al-inq__form { display: flex; flex-direction: column; gap: 9px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 6px; padding: 12px; }
.al-inq__row { display: flex; flex-direction: column; gap: 5px; }
.al-inq__row[hidden] { display: none; }
.al-inq__label { font-size: 14px; font-weight: 700; color: var(--al-text-2); }
.al-inq__labelsub { font-size: 12px; font-weight: 400; color: var(--al-text-3); }
.al-inq__req, .al-inq__opt { display: inline-block; font-size: 11px; font-weight: 700; color: #FFFFFF; border-radius: 2px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; line-height: 1.7; }
.al-inq__req { background: var(--al-red); }
.al-inq__opt { background: #8A8A8A; }
.al-inq__field input[type="text"], .al-inq__field input[type="tel"], .al-inq__field input[type="email"], .al-inq__field select, .al-inq__field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--al-text); background: #FFFFFF; border: 1px solid #B9B4A6; border-radius: 4px; padding: 10px 12px; }
.al-inq__field textarea { min-height: 72px; resize: vertical; }
.al-inq__field input:focus, .al-inq__field select:focus, .al-inq__field textarea:focus { outline: 2px solid var(--al-green); outline-offset: 1px; }
.al-inq__help { display: block; margin-top: 3px; font-size: 11px; color: var(--al-text-3); }
.al-inq__radios { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--al-text-2); }
.al-inq__radios label, .al-inq__checks label, .al-inq__agree { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.al-inq__radios input, .al-inq__checks input, .al-inq__agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--al-green); flex: 0 0 auto; }
.al-inq__checks { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 14px; color: var(--al-text-2); }
/* 法人／個人はタイル型（2026-09-18・案1）。フォーム先頭に置き、選ぶと貴社名・年商が続く（案2）。value・送信内容は変えない。
   選択中の枠色は JS が付ける .is-on（古い WebView で :has() が使えないため）。丸印だけは input:checked + 隣接で描く */
.al-inq__tiles { display: grid; grid-template-columns: 1fr; gap: 6px; }
.al-inq__tile { position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; border: 2px solid var(--al-line); border-radius: 6px; background: #FFFFFF; padding: 7px 10px; cursor: pointer; }
.al-inq__tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.al-inq__tile-dot { position: relative; flex: 0 0 auto; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid #B5BFBB; background: #FFFFFF; }
.al-inq__tile-dot::after { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: var(--al-green); transform: scale(0); transition: transform .12s; }
.al-inq__tile input:checked + .al-inq__tile-dot { border-color: var(--al-green); }
.al-inq__tile input:checked + .al-inq__tile-dot::after { transform: scale(1); }
.al-inq__tile.is-on { border-color: var(--al-green); background: #EEF5F3; }
.al-inq__tile:focus-within { outline: 2px solid var(--al-green); outline-offset: 1px; }
.al-inq__tile-text { display: flex; flex-direction: column; min-width: 0; }
.al-inq__tile-title { font-size: 14.5px; font-weight: 900; color: var(--al-text-2); line-height: 1.3; }
.al-inq__tile-sub { font-size: 11.5px; font-weight: 400; color: var(--al-text-3); line-height: 1.4; margin-top: 1px; }
.al-inq__privacy { font-size: 11.5px; line-height: 1.55; color: var(--al-text-3); background: var(--al-cream); border-radius: 4px; padding: 8px 10px; }
.al-inq__privacy p { margin: 0; }
.al-inq__privacy-title { font-weight: 700; color: var(--al-text-2); }
.al-inq__privacy a { color: var(--al-orange); text-decoration: underline; }
.al-inq__agree { font-size: 13px; font-weight: 700; color: var(--al-text-2); }
.al-inq__err { min-height: 18px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--al-red); text-align: center; }   /* 表示切替で下のボタンが動かないよう高さを確保 */
.al-inq__submit { height: 52px; border: 0; border-radius: 4px; background: linear-gradient(100deg, #F9A03F, #E0720C); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 900; cursor: pointer; }
.al-inq__submit:disabled { opacity: .5; cursor: default; }
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 641px) {
  .al-inq-tel { padding: 16px 0 24px; }   /* 下 24px：フォーム→電話の間隔（8+16）と同じにする（23 参照） */
  .al-inq-tel .al-inner { max-width: 720px; }
  .al-inq-tel__num img { width: 64px; }
  .al-inq-tel .al-inner { padding: 14px 20px 16px; }
  .al-inq-tel__label { font-size: 18px; }
  .al-inq-tel__hours { font-size: 16px; margin-top: 4px; }
  .al-inq-tel__num { gap: 12px; margin-top: 4px; }
  .al-inq-tel__digits { font-size: 52px; letter-spacing: 0.02em; }
  .al-inq__before-submit { font-size: 14px; }
  .al-inq { padding: 22px 0 8px; }
  .al-inq__title { font-size: 22px; }
  .al-inq__form { max-width: 720px; margin: 0 auto; padding: 16px 22px; gap: 10px; }
  .al-inq__row { flex-direction: row; align-items: flex-start; gap: 16px; }
  .al-inq__label { flex: 0 0 215px; padding-top: 10px; }   /* 「必須 ご相談される方について」が 1 行で収まる幅 */
  .al-inq__row--radio .al-inq__label { padding-top: 0; }
  .al-inq__row--type .al-inq__label { padding-top: 0; }
  .al-inq__tiles { grid-template-columns: 1fr; gap: 8px; }   /* 3 列だと 150px 幅で語中折れするため 1 列（SP と同じ並び） */
  .al-inq__tile { padding: 8px 12px; }
  .al-inq__tile-title { font-size: 16px; }
  .al-inq__tile-sub { font-size: 12.5px; }
  .al-inq__field { flex: 1 1 auto; min-width: 0; }
  .al-inq__field textarea { min-height: 84px; }
  .al-inq__checks { grid-template-columns: 1fr 1fr; }
  .al-inq__submit { width: 320px; margin: 0 auto; }
}

/* 7) 案 4（2026-09-29）：タイル→吹き出し→年商チップ→吹き出し→連絡先の順に開く。任意項目は「詳細を伝える」（details）に畳む。
      吹き出しは LINE 風（アバター＋名前＋吹き出し・2 つまで）。進み具合の帯は上に追従（sticky）。JS が hidden を外す */
.al-inq__form [hidden] { display: none !important; }
.al-inq__chat { padding: 2px 0; scroll-margin-top: 8px; }
#inq-chat2.al-inq__chat { scroll-margin-top: 64px; }   /* 2 つ目の吹き出しは追従帯の下に */
.al-inq__lc { display: flex; gap: 8px; align-items: flex-start; }
.al-inq__lc-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--al-green); display: flex; align-items: center; justify-content: center; margin-top: 14px; }
.al-inq__lc-avatar svg { display: block; }
.al-inq__lc-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 86%; }
.al-inq__lc-name { font-size: 11px; color: var(--al-text-3); padding-left: 2px; }
.al-inq__lc-bubble { position: relative; background: #E9F3EF; border-radius: 16px; border-top-left-radius: 4px; padding: 8px 12px; font-size: 13.5px; line-height: 1.55; color: var(--al-text-2); animation: al-inq-lc-pop .22s ease-out both; }
.al-inq__lc-bubble::before { content: ""; position: absolute; left: -6px; top: 6px; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #E9F3EF transparent transparent; }
.al-inq__lc-bubble b { color: var(--al-green); font-weight: 900; }
@keyframes al-inq-lc-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .al-inq__lc-bubble { animation: none; } }
.al-inq__prog { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; z-index: 3; background: #FFFFFF; margin: 0 -12px; padding: 8px 12px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.al-inq__prog-txt { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--al-text-3); }
.al-inq__prog-txt b { color: var(--al-green); font-size: 14px; }
.al-inq__prog-bar { height: 8px; border-radius: 4px; background: #E6E2D6; overflow: hidden; }
.al-inq__prog-fill { height: 100%; background: var(--al-green); width: 20%; transition: width .3s; }
.al-inq__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.al-inq__chip { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; min-height: 44px; box-sizing: border-box; border: 2px solid var(--al-line); border-radius: 6px; background: #FFFFFF; font-size: 13px; font-weight: 700; color: var(--al-text-2); text-align: center; line-height: 1.25; padding: 4px 6px; cursor: pointer; }
.al-inq__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.al-inq__chip.is-on { border-color: var(--al-green); background: #EEF5F3; color: var(--al-green); }
.al-inq__chip:focus-within { outline: 2px solid var(--al-green); outline-offset: 1px; }
.al-inq__more { border: 1px dashed #B9B4A6; border-radius: 6px; background: #FFFDF6; }
.al-inq__more > summary { list-style: none; cursor: pointer; padding: 10px 12px 10px 30px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.al-inq__more > summary::-webkit-details-marker { display: none; }
.al-inq__more > summary::before { content: "＋"; font-weight: 900; color: var(--al-green); position: absolute; left: 12px; top: 10px; font-size: 14px; }
.al-inq__more[open] > summary::before { content: "－"; }
.al-inq__more-ttl { font-size: 14px; font-weight: 700; color: var(--al-green); }
.al-inq__more-ttl small { font-weight: 400; color: var(--al-text-3); font-size: 12px; }
.al-inq__more-benefit { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--al-text-2); }
.al-inq__more-body { display: flex; flex-direction: column; gap: 9px; padding: 0 12px 12px; }
.al-inq__privacy--quiet { background: transparent; border-radius: 0; padding: 8px 0 12px; border-top: 1px solid #EFEBE0; border-bottom: 1px solid #EFEBE0; font-size: 11px; line-height: 1.5; }
.al-inq__privacy--quiet .al-inq__privacy-title { color: var(--al-text-3); font-size: 11px; }
.al-inq__privacy--quiet a { color: var(--al-text-3); }
.al-inq__agree--p4 { margin-top: 10px; padding: 8px 0 2px; font-size: 12.5px; }   /* 375px で「同意しま／す。」と 1 文字だけ行落ちしないよう 13→12.5px */
.al-inq__err--p4 { min-height: 14px; margin: -7px 0 -6px; font-size: 12.5px; }
@media (min-width: 641px) {
  .al-inq__prog { margin: 0 -22px; padding: 8px 22px 6px; }
  .al-inq__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .al-inq__chips--wish { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-inq__lc-col { max-width: 70%; }
  .al-inq__more > summary { padding-left: 34px; }
  .al-inq__more-body .al-inq__row { flex-direction: row; }
}
/* 8) 案 4 追加（2026-09-30）：希望の税理士（複数選択）。「特にこだわらない」は横幅いっぱい。選んだものに ✓ */
.al-inq__chip--wide { grid-column: 1 / -1; }
.al-inq__chip .al-nowrap { white-space: nowrap; }
/* 9) 2026-09-30 三代川さん指摘：数字の強調と PC の 3 列
      ・登録税理士数・事務所数のカード（.al-tile）の文字を大きく
      ・顧問料見直し事例（.al-case）の「→ 見直し後の月額」を大きく強調。SP は削減率バッジを右上に置き、金額の行を全幅に
      ・PC は「ご相談される方について」を見出しにしてタイル 3 つを横並び（フォーム幅 720→800px）
      ・日本語の折り返しは文節単位（word-break: auto-phrase 対応ブラウザのみ） */
.al-tile { padding: 16px 14px; }
.al-tile__label { font-size: 16px; line-height: 1.5; word-break: auto-phrase; }
.al-tile__value { font-size: 40px; line-height: 1.1; }
.al-tile__unit { font-size: 18px; margin-left: 2px; }
.al-case { position: relative; flex-direction: column; align-items: stretch; padding: 14px 14px 12px; }
.al-case__badge.al-sp-inline { position: absolute; top: 12px; right: 12px; }
.al-case__who { font-size: 16px; padding-right: 88px; }
.al-case__fee { font-size: 18px; line-height: 1.3; }
.al-case__after { font-size: 1.6em; letter-spacing: 0.01em; }
.al-case__badge { font-size: 16px; padding: 5px 10px; }
.al-inq__tile-sub { word-break: auto-phrase; }
@media (min-width: 641px) {
  .al-tile { padding: 20px 36px; min-width: 300px; }
  .al-tile__label { font-size: 18px; }
  .al-tile__value { font-size: 52px; }
  .al-tile__unit { font-size: 22px; }
  .al-case { padding: 20px 20px 18px; gap: 10px; }
  .al-case__who { font-size: 17px; padding-right: 0; }
  .al-case__fee { font-size: 20px; }
  .al-case__after { font-size: 1.7em; }
  .al-case__badge { font-size: 18px; padding: 6px 12px; }
  .al-inq__form { max-width: 800px; }
  .al-inq-tel .al-inner { max-width: 800px; }
  .al-inq__row--type { flex-direction: column; gap: 10px; }
  .al-inq__row--type .al-inq__label { flex: none; padding-top: 0; text-align: center; font-size: 16px; }
  .al-inq__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .al-inq__tile { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 14px 10px 12px; min-height: 100px; }
  .al-inq__tile-text { align-items: center; }
  .al-inq__tile-title { font-size: 17px; }
  .al-inq__tile-sub { font-size: 12.5px; }
}
/* 10) 2026-09-30：年商にも吹き出し／タイルを押したらフォームだけ
       body.is-formonly：フォームより下の本文・フッター・追従バーを隠す。吹き出しを画面上端まで送れるよう下に余白 */
.is-formonly .al-inq ~ section, .is-formonly .al-footer, .is-formonly .al-footer-space, .is-formonly .al-fixedbar { display: none !important; }
.is-formonly .al-inq { padding-bottom: 70vh; }
#inq-chat-rev.al-inq__chat { scroll-margin-top: 64px; }
.al-inq__telmini { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--al-text-3); }
.al-inq__telmini a { font-family: var(--al-font-tel); font-size: 24px; font-weight: 900; color: var(--al-text-2); text-decoration: none; margin-left: 4px; }
.al-inq__telmini a b { color: var(--al-red); }
.al-inq__back { display: block; margin: 2px auto 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--al-text-3); text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.al-inq__back[hidden] { display: none; }
@media (min-width: 641px) {
  .al-inq__telmini { font-size: 16px; }
  .al-inq__telmini a { font-size: 30px; }
  .is-formonly .al-inq { padding-bottom: 50vh; }
}
/* 11) 2026-09-30：事例カード。「→ 見直し後の月額」をひとかたまりにして、折り返すときは矢印ごと次の行へ。PC はバッジを業種・年商の上に */
.al-case__to { display: inline-block; white-space: nowrap; }
@media (min-width: 641px) {
  .al-case__top { flex-direction: column-reverse; align-items: flex-start !important; gap: 8px; }
  .al-case__who { white-space: nowrap; }
}
/* 12) 2026-09-30：数字のカードは 4 桁以上（東京 3,218 名・1,556 事務所）でも単位が回り込まないよう、
       SP は 1 列（横いっぱい）、数字と単位は改行しない。事例の削減率バッジは一回り小さく */
.al-tiles { grid-template-columns: minmax(0, 1fr); }
.al-tile__value { white-space: nowrap; }
.al-case__badge { font-size: 14px; padding: 3px 8px; }
.al-case__who { padding-right: 80px; }
@media (min-width: 641px) {
  .al-case__badge { font-size: 16px; padding: 5px 10px; }
  .al-case__who { padding-right: 0; }
}
/* 13) 2026-09-30 三代川さん指示：質問は吹き出しで伝えるので、「ご相談される方について」「ご希望の税理士」「年商」の項目名（必須ラベル）は画面から外す
       （読み上げ用には残す）。最初の質問も吹き出しで出す。進み具合の帯は出さない。連絡先（貴社名・お名前…）の項目名は今のまま */
.al-inq__row--type > .al-inq__label, .al-inq__row--wish > .al-inq__label, #inq-revenue-row > .al-inq__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.al-inq__form.is-gated > #inq-chat0 { display: block; }
.al-inq__prog { display: none !important; }
.al-inq__chat, #inq-chat2.al-inq__chat, #inq-chat-rev.al-inq__chat { scroll-margin-top: 8px; }
/* 14) 2026-09-30：選択肢の箱は吹き出しの本文の位置（アイコン 36px＋間 8px）まで右に寄せて、LINE の返信ボタンのように見せる */
.al-inq__row--type > .al-inq__field, .al-inq__row--wish > .al-inq__field, #inq-revenue-row > .al-inq__field { margin-left: 44px; }
/* 15) 2026-09-30：希望は 1 つだけ選ぶ（✓ は付けない）。個人の「頼みたいこと」は 3 択なので横 3 列 */
.al-inq__chips.al-inq__chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 16) 2026-09-30 三代川さん指摘：SP のファーストビューで、ヒーローの文とフォーム見出しの間が 40px 空いていたので詰める（約 14px に） */
@media (max-width: 640px) {
  .al-hero__lead { margin-top: 10px; margin-bottom: 4px; }
  .al-inq { padding-top: 6px; }
  .al-inq__title { margin-bottom: 8px; }
}
/* 17) 2026-09-30 三代川さん指摘：最初の 3 択（ご相談される方）の天地を詰め、ラジオの丸を外してボタン風に（選択は枠と背景の色で示す） */
.al-inq__tile .al-inq__tile-dot { display: none; }
.al-inq__tile { padding: 6px 12px; gap: 0; min-height: 0; }
.al-inq__tile-title { line-height: 1.25; }
.al-inq__tile-sub { line-height: 1.3; margin-top: 1px; }
.al-inq__tile.is-on .al-inq__tile-title { color: var(--al-green); }
@media (min-width: 641px) {
  .al-inq__tile { min-height: 0; padding: 10px 10px; gap: 2px; }
}
/* 18) PC のタイル行が中身の幅で止まり、下の選択肢より 6px 短かったので横いっぱいに */
@media (min-width: 641px) { .al-inq__row--type { align-items: stretch; } }
/* 19) 2026-09-30 三代川さん指示
       ・PC の連絡先（貴社名・お名前・お電話番号・メールアドレス）の項目名を入力欄側（右）に寄せる
       ・フォーム内の電話は PC でも 2 行（「お電話でも受け付けています」／番号）
       ・地域 LP のフォーム直下の電話の枠は囲いを強調（緑の太枠） */
.al-inq__telmini a { display: block; margin: 2px 0 0; }
/* 19 の緑太枠は廃止（電話カードは 1px の枠。フォーム側は 28 の白い面のみ） */
#area-inquiry + .al-inq-tel .al-inner { border: 1px solid var(--al-line); box-shadow: none; }
@media (min-width: 641px) {
  .al-inq__row[data-stage2] > .al-inq__label { text-align: left; flex-basis: 170px; padding-left: 32px; box-sizing: border-box; }   /* 24 参照：左寄せ（メールアドレスの「必須」の位置に揃える） */
}
/* 20) 2026-09-30 三代川さん指摘：SP で「日本全国対応・全15ステーション」の段落が両端揃え（justify）のため、
       改行しない塊の手前の行で字間が大きく開いていた。左揃えに戻し、本文と同じ 16px に */
.al-station-lead, .al-support { text-align: left; letter-spacing: 0; }
.al-station-lead { font-size: 16px; }
/* 21) 2026-09-30 三代川さん指示：PC もスマホと同じ考え方で文字を大きく（PC は画面が広い分、同じ px だと小さく見える）。
       フォーム（吹き出し・選択肢・項目名・同意・送信）と拠点の案内文。拠点の案内文は文節ごとに折り返す */
.al-station-lead .al-nowrap { white-space: nowrap; }
@media (min-width: 641px) {
  .al-inq__title { font-size: 26px; }
  .al-inq__lc-name { font-size: 13px; }
  .al-inq__lc-bubble { font-size: 17px; padding: 10px 16px; }
  .al-inq__lc-avatar { width: 42px; height: 42px; }
  .al-inq__row--type > .al-inq__field, .al-inq__row--wish > .al-inq__field, #inq-revenue-row > .al-inq__field { margin-left: 50px; }
  .al-inq__tile-title { font-size: 19px; }
  .al-inq__tile-sub { font-size: 14px; }
  .al-inq__tile { padding: 12px 10px; }
  .al-inq__chip { font-size: 15.5px; min-height: 52px; }
  .al-inq__label { font-size: 16px; }
  .al-inq__req, .al-inq__opt { font-size: 12px; }
  .al-inq__help { font-size: 13px; }
  .al-inq__field input[type="text"], .al-inq__field input[type="tel"], .al-inq__field input[type="email"] { font-size: 17px; padding: 12px 14px; }
  .al-inq__privacy--quiet, .al-inq__privacy--quiet .al-inq__privacy-title { font-size: 13px; }
  .al-inq__agree--p4 { font-size: 15px; }
  .al-inq__err--p4 { font-size: 14px; }
  .al-inq__submit { height: 60px; font-size: 20px; width: 360px; }
  .al-inq__telmini { font-size: 17px; }
  .al-inq__telmini a { font-size: 34px; }
  .al-inq__back { font-size: 15px; }
  .al-inq__row[data-stage2] > .al-inq__label { flex-basis: 190px; }
  .al-station-lead { font-size: 18px; }
}
/* 22) PC で文字を大きくした分、フォーム幅を 800→920px に。タイル見出し・吹き出しが語の途中で折れないように */
.al-inq__lc-bubble, .al-inq__tile-title, .al-inq__tile-sub, .al-inq__chip { word-break: auto-phrase; }
@media (min-width: 641px) {
  .al-inq__form, .al-inq-tel .al-inner { max-width: 920px; }
  .al-inq__lc-col { max-width: 80%; }
}
/* 23) 2026-09-30 三代川さん指摘：電話カードと実績 3 タイルの間が 4px しか無かった。フォーム→電話カードと同じ間隔（SP 18px・PC 24px）に
       （.al-inq-tel の下 padding を変更。実績側の白い帯の余白はそのまま） */
/* 24) 2026-09-30 三代川さん指示：PC の連絡先の項目名（貴社名・お名前・お電話番号）を、メールアドレスの「必須」の左端に揃えて左寄せ。
       入力欄の位置は変えない（列幅 190px はそのまま。19 の右寄せを左寄せ＋左 32px に変更） */
/* 25) 欠番（緑太枠案は 28 に置き換えて廃止） */
/* 26) 2026-09-30 三代川さん（案 ②）：最初の 3 択をボタンらしく。枠を緑 2px・見出しを緑にし、押した状態は緑の塗り＋白文字。
       PC はマウスを載せたときに薄い緑の地。大きさ・位置は変えない */
.al-inq__tile { border-color: var(--al-green); }
.al-inq__tile-title { color: var(--al-green); }
.al-inq__tile.is-on { background: var(--al-green); }
.al-inq__tile.is-on .al-inq__tile-title, .al-inq__tile.is-on .al-inq__tile-sub { color: #FFFFFF; }
@media (hover: hover) { .al-inq__tile:not(.is-on):hover { background: #EEF5F3; } }
/* 27) 2026-09-30：希望を 4 択にしたので、SP（2 列）では「特にこだわらない」を横いっぱいにせず 2×2 に並べる（空きマスを作らない）。PC は 3 列＋横いっぱいのまま */
@media (max-width: 640px) { .al-inq__chips--wish .al-inq__chip--wide { grid-column: auto; } }
/* 28) 2026-09-30 三代川さん：フォームの囲い（枠線・影）は無くし、背景色だけで区画を示す（白い面・角丸。枠なし）。
       25 の緑太枠は使わない。見送るときはこの 28 を消せば 25 の状態に戻る */
.al-inq__form { background: #FFFFFF; border: 0; box-shadow: none; border-radius: 10px; padding: 14px 12px; }
@media (min-width: 641px) { .al-inq__form { padding: 18px 22px; } }
/* 29) 2026-10-01 三代川さん指摘：PC のヒーローで本文ブロックの幅が見出しの長さで伸び、写真が枠（960px）の右へはみ出していた
       （地域 +4px・リマケ +45px）。Meta 5 本だけ meta.css で直してあったので、同じルールを共通化：本文 560px 固定・写真は 720〜1120px。
       長い見出し（リマケ・地域 7 都市）は Meta の医療・建設と同じく <br class="al-pc-br"> で 2 行にする */
/* 30) 2026-10-01 三代川さん指示：ヒーローの天地も 13 本で揃える。地域の説明文は PC も 2 行（area.html.j2）。
       地域の「登録税理士 N 名」の大きい数字が行の高さを 10px 押し広げていたので、数字の行高を 1 にして行の高さを他と同じにする */
.al-hero__local b { line-height: 1; }
/* 31) 2026-10-01 三代川さん指示
       ・フォームだけの表示でも、フォーム直下の電話カード（受付時間つき・枠あり）を残す（フォーム内の電話 1 行は廃止）
       ・吹き出しを画面上端へ送らなくなったので、フォーム下の大きな余白（70vh／50vh）は不要
       ・電話カードの見出しは「顧問料の目安はその場でお答えします」。入力が面倒な人を電話へ誘う一言なので濃い色・太字に */
.is-formonly .al-inq ~ section.al-inq-tel { display: block !important; }
.is-formonly .al-inq { padding-bottom: 6px; }
@media (min-width: 641px) { .is-formonly .al-inq { padding-bottom: 8px; } }
.al-inq-tel__label { color: var(--al-text-2); font-weight: 700; }
/* 23) 2026-10-02：法人の年商は 5 段。SP は 2 列で最後（5億円以上）を横いっぱい、PC は 5 列 */
#inq-revenue-chips .al-inq__chip:nth-child(5):last-child { grid-column: 1 / -1; }
@media (min-width: 641px) {
  #inq-revenue-chips:has(.al-inq__chip:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #inq-revenue-chips .al-inq__chip:nth-child(5):last-child { grid-column: auto; }
}
/* 24) 2026-10-02 三代川さん決定（F 案）：PC のヒーローは見出しを大きく、文字と写真をひとまとまりにして間を 48px に。
       写真は最大 460px（足元は帯に付けたまま頭が「31年の信頼と実績」の高さに）。文字が詰まらないようヒーローの横幅を 1080px に */
@media (min-width: 641px) {
  .al-hero .al-inner { max-width: 1080px; justify-content: center; gap: 48px; }
  .al-hero__content { flex: 0 1 auto; padding-right: 0; }
  .al-hero__photo { width: min(460px, 38vw); }
  .al-hero__photo img { width: 100%; max-width: 460px; }
  .al-hero__title--pc { font-size: 56px; line-height: 1.25; }
  .al-hero__pioneer-label { font-size: 18px; }
  .al-hero__pioneer-num { font-size: 56px; }
  .al-hero__pioneer-tail { font-size: 26px; }
  .al-hero__lead { font-size: 21px; word-break: keep-all; }
}
/* 25) Meta は見出しが長い（「顧問税理士を無料でご紹介」など）ので PC の見出しは 48px・語の途中で折らない */
@media (min-width: 641px) {
  .al-hero__title--pc { word-break: keep-all; }
  .meta-lp .al-hero__title--pc { font-size: 48px; }
}
/* 26) 2026-10-02 三代川さん指摘：ヒーローの強調をそろえる。地の文は 600、強調語は 900・オレンジ、数字は Inter・1.3 倍・900・オレンジ。
       電話番号は Roboto・900 にそろえる（PC ヘッダーが 700 だった） */
.al-hero__lead strong { color: var(--al-orange); font-weight: 900; }
.al-hero__lead .al-num { font-family: var(--al-font-num); font-size: 1.3em; font-weight: 900; line-height: 1; letter-spacing: 0.01em; }
.al-header__tel-num { font-weight: 900; }
/* 27) 2026-10-02 三代川さん指示：電話番号は /lp01/ta/ の FV（CallTracking/style.css .linka-tel：Roboto・bold）に合わせ、全箇所 Roboto 700・字間 0 */
.al-header__tel-num, .al-tel__digits, .al-final__digits, .al-lead-tel__digits, .al-lead-tel b, .al-telmodal__digits, .al-inq-tel__digits, .al-inq__telmini a, .al-telstrip__digits { font-family: var(--al-font-tel); font-weight: 700; letter-spacing: 0; }
.al-header__tel-num b, .al-tel__digits b, .al-final__digits b, .al-telmodal__digits b, .al-inq-tel__digits b, .al-inq__telmini a b, .al-lead-tel__digits b, .al-telstrip__digits b { font-family: var(--al-font-tel); font-weight: 700; }
/* 28) 2026-10-02 三代川さん指示：フォーム下の電話の受付時間の左に「受付時間」 */
.al-inq-tel__hours-label { font-weight: 700; margin-right: 0.6em; }
/* 29) 2026-10-02 三代川さん指示：個人情報は /lp01/ta_chat/ と同じく枠の中に /kj/kj.html を読み込む（中身は一元管理）。同意文は「下記…」で枠の上 */
.al-inq__privacy--kj { margin: 0; padding: 0; background: none; }
.al-inq__privacy--kj #rule { margin: 0; padding: 0; color: var(--al-text-3); }
.al-inq__privacy--kj .pp_h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--al-text-2); }
.al-inq__privacy--kj .rule_box { width: auto !important; height: 160px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #CFCFCF; border-radius: 4px; background: #FFFFFF; padding: 10px 12px; box-sizing: border-box;
  font-size: 12px; line-height: 1.6; text-align: left; overscroll-behavior: contain; }
.al-inq__privacy--kj .rule_box ul { margin: 0; padding: 0; list-style: none; }
.al-inq__privacy--kj .rule_box lh { display: block; margin-top: 0; color: var(--al-text-2); }
.al-inq__privacy--kj .rule_box li { margin: 0; }
.al-inq__privacy--kj .rule_box ul > br { display: none; }
.al-inq__privacy--kj .rule_box lh:not(:first-child) { margin-top: 0.8em; }
.al-inq__privacy--kj { margin: 6px 0 4px; }
@media (min-width: 641px) {
  .al-inq__privacy--kj .pp_h { font-size: 14px; }
  .al-inq__privacy--kj .rule_box { height: 200px; padding: 14px 18px; font-size: 13px; }
}

/* 30) 2026-10-02：幅 641〜1023px（タブレット・狭い PC）の崩れ
       ・相場の表と「相場の読み方」が 470px 固定×2 で横にはみ出していた（768px で +192px）→ 枠に合わせて縮める
       ・F 案の見出し 56px（Meta 48px）だと長い見出しが写真に重なる → この幅だけ見出しを縮める */
@media (min-width: 641px) {
  .al-row2 > * { width: auto; flex: 1 1 0; min-width: 0; max-width: 470px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .al-hero .al-inner { gap: 28px; }
  .al-hero__title--pc { font-size: clamp(30px, 4.2vw, 42px); }
  .meta-lp .al-hero__title--pc { font-size: clamp(26px, 3.6vw, 36px); }
  .al-hero__lead { font-size: 17px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .al-case__who { white-space: normal; }
  .al-case__who .al-nowrap, .al-case__who .al-hl { white-space: normal; }
  .al-header__tel-num { font-size: 24px; }
  .al-header__tel-cap, .al-header__tel-hours { font-size: 11px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .rm-delay__title .al-nowrap { white-space: normal; }
}
@media (min-width: 641px) and (max-width: 820px) {
  .meta-lp .al-header__sat { display: none; }   /* 満足度バッジは 821px 以上で表示（ロゴ・電話と並ぶと 700px 前後ではみ出す） */
}
/* 31) 2026-10-05：ボット対策の隠し欄は完全に非表示（自動入力の対象外にする）。同意の見落とし対策で、未チェック送信時は同意欄を強調 */
.al-hp, .al-hp[hidden] { display: none !important; }
.al-inq__agree--p4.is-attn { margin-top: 12px; padding: 12px 14px; border: 1.5px solid var(--al-red); border-radius: 8px; background: #FFF6F6; animation: al-attn-shake .4s ease-in-out 1; }
/* エラー文が出ている間は、上下の部品と間を取る（通常時は高さを詰めるため負のマージン）。行末の 1〜2 文字だけの行落ちを避ける */
.al-inq__err--p4:not(:empty) { margin: 10px 0 12px; line-height: 1.6; text-wrap: balance; }
@keyframes al-attn-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .al-inq__agree--p4.is-attn { animation: none; } }
/* 33) 2026-10-09 三代川さん決定（エリア LP・案 ②）：SP の 1 画面目に電話番号。ヘッダーの下に番号と受付時間の帯（ロゴの大きさは変えない・PC は出さない）。
       番号の書体・配色は他の電話と同じ（Roboto 700・両端赤・中央黒。§27 のリストに .al-telstrip__digits を追加済み） */
.al-telstrip { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 10px 5px; background: #FFFFFF; border-top: 1px solid var(--al-line); border-bottom: 1px solid var(--al-line); text-decoration: none; }
.al-telstrip__row { display: flex; align-items: center; gap: 6px; }
.al-telstrip__row img { width: 30px; height: auto; display: block; }
.al-telstrip__digits { font-size: clamp(22px, 7vw, 25px); line-height: 1.05; color: var(--al-text-2); white-space: nowrap; }
.al-telstrip__digits b { color: var(--al-red); }
.al-telstrip__hours { font-size: 11px; line-height: 1.25; color: var(--al-text-3); text-align: center; }
@media (min-width: 641px) { .al-telstrip { display: none !important; } }
/*     デッドクリック対策（Clarity 10/5〜10/8：区・市の名前と事務所カードがリンクでないのにタップされていた）。どちらも押すとフォームへ */
a.al-chip--link { display: inline-block; position: relative; padding-right: 24px; text-decoration: none; background: #FFFFFF; box-shadow: 0 1px 0 var(--al-green); }
a.al-chip--link::after { content: '›'; position: absolute; right: 9px; top: 50%; transform: translateY(-55%); font-size: 16px; line-height: 1; }
a.al-chip--link:hover, a.al-chip--link:focus-visible { background: var(--al-green); color: #FFFFFF; }
a.al-chip--link:hover .al-hl, a.al-chip--link:focus-visible .al-hl { color: #FFFFFF; }
a.al-card--link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
a.al-card--link:hover, a.al-card--link:focus-visible { border-color: var(--al-green); box-shadow: 0 2px 8px rgba(0, 81, 71, .12); }
.al-card__cta { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--al-green); }
.al-card__cta::after { content: ' ›'; }
/*     PR #115 AI テストの指摘：幅 320px で「…してもら／う ›」と 1 文字だけ落ちる → 「紹介してもらう」を折り返さない。
       PC はカードの高さがそろうため、文言をカードの下端にそろえる */
@media (min-width: 641px) {
  a.al-card--link .al-card__body { flex: 1 1 auto; width: 100%; }
  a.al-card--link .al-card__cta { margin-top: auto; padding-top: 8px; }
}
/*     PR #115 AI テストの指摘：幅 360px でも追従バーが「個人」のボタンに約 9px かかっていた → 電話の帯の上下の余白・行間を詰めた（上の 3 行）。
       幅 320px で実績の欄が「累計ご紹介実／績」「8,636／人※」と、360px で「44万件突破」が割れる → 狭い幅だけ文字を縮めて 1 行に（地域 LP だけ） */
@media (max-width: 374px) {
  body[data-area] .al-metric { padding-left: 2px; padding-right: 2px; }
  body[data-area] .al-metric__label { font-size: 11.5px; white-space: nowrap; letter-spacing: -0.02em; }
  body[data-area] .al-metric__value { font-size: 21px; white-space: nowrap; }
  body[data-area] .al-metric__unit { font-size: 11.5px; }
}
/*     PR #115 AI テスト（3 回目）：千葉の幅 641〜677px で「徒歩15／分」と落ちていた（.al-card__line .al-nowrap は塊の中で折り返す作り）→「徒歩N分」は折り返さない。
       追従バーの幅の端数で幅 338・339・361px に 2px のはみ出し → バーの外へ出ないように */
.al-card__walk { white-space: nowrap; }
.al-fixedbar { overflow: hidden; }

/* 2026-10-15：第 1 段の確認で、金額「〜30,000／円」が全ページ SP で 1 文字落ち → 金額は折り返さず（テンプレの .al-nowrap）、SP は金額の列を中身の幅にする（リマケ PR #119 と同じ） */
@media (max-width: 640px) {
  .al-price__row { grid-template-columns: minmax(0, 1fr) auto; }
  .al-price__row--head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 2026-10-15（PR #132 AI テスト）：本文の段落が「ご紹／介します」「弥生会／計」「一／切無料」のように言葉の途中で折り返していた。
   1 か所ずつ .al-nowrap を足すのはきりがないため、Chrome・Edge（Android の大半）では文節単位で折り返す（word-break: auto-phrase・lang="ja" が条件）。
   Safari は未対応で従来どおりの折り返し。1 文節が 1 行に入りきらないときは overflow-wrap で途中でも割る（はみ出し防止） */
body { word-break: auto-phrase; overflow-wrap: break-word; }
.al-metric { word-break: normal; }   /* 実績の 3 枠は幅が狭く、「※2026年10月時点」が 1 文節扱いで縮まずにページが 6px はみ出したため従来の折り返しに戻す */