/* =========================================================
   AITailor サービスサイト
   トーン: 実直 ── 煽らず、具体で信頼を作る
   参照: japanese-lp-design（日本語組版・余白・配色）
         lp-pattern-catalog（役割・セクション順・証拠の作り方）
   ---------------------------------------------------------
   🔴 AI スロップ三点セットを踏まない
      ② 紫グラデ          → 生成りシェル ＋ 墨 ＋ 単一アクセント
      ③ 絵文字アイコン    → 線の SVG（currentColor）
   ---------------------------------------------------------
   フォントは依頼者指定で Google Fonts 配布の Noto Sans JP を
   --font の先頭に採用し、製品側のローカル資産から読み込み。失敗時のフォールバックとして
   游ゴシック体等はそのまま残す。
   ========================================================= */

:root {
  /* 面 ── 生成りシェル。純白ベタにしない */
  --paper:     #f7f6f4;
  --surface:   #ffffff;
  --surface-2: #efedea;
  --line:      #e2dfda;
  --line-2:    #cfcbc4;

  /* 字 ── 純黒 #000 を使わない。墨色 */
  --ink:    #22201e;
  --ink-2:  #484541;  /* 説明文・補助本文。逆背景と無効状態の色は別に保つ */
  --ink-3:  #97938c;
  --ink-rev:#ffffff;

  /* CTA はロゴと同じブランドブルー。共通アクセントは役割色と重ならないティールで分ける */
  --accent:     #267064;
  --accent-ink: #1d574e;
  --accent-bg:  #eaf3f1;
  --cta:        #1d55c6;
  --cta-ink:    #17449e;
  --cta-bg:     #eef3ff;

  --ok:      #2b6b4f;
  --ok-bg:   #e9f2ed;
  --warn:    #8a5a00;
  --warn-bg: #fbf2e3;

  /* 余白 ── セクション間 > 要素間 を徹底する */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --sec: clamp(72px, 9vw, 132px);      /* セクションの縦余白 */

  --r1: 3px; --r2: 6px; --r3: 10px; --r4: 999px;
  --shadow-1: 0 1px 2px rgba(34,32,30,.05);
  --shadow-2: 0 8px 28px rgba(34,32,30,.09);

  /* 依頼者指定: Google Fonts 配布の Noto Sans JP を先頭に。
     製品側で自己ホストし、読み込み失敗時のフォールバックは残す。 */
  --font: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Yu Gothic",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-num: "Manrope", "Helvetica Neue", Arial, "Yu Gothic Medium", sans-serif;

  /* 無効状態 ── 面と字をセットで持つ（opacity で薄めない） */
  --disabled-ink: #595652;
  --disabled-bg:  #e8e6e3;

  /* 仮画像（モック専用。実装時にこの2つは消える） */
  --ph-bg:  #dedbd6;
  --ph-ink: #6f6b64;

  /* 入力エラー */
  --danger: #b84040;

  /* 濃い面の上のフォーカスリング（白リングの外側に置く濃紺） */
  --focus-dark: #0b2c6f;

  --max: 1080px;
  --head-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  /* 🔴 行間は 依頼者指示で 一段 詰めた（1.95 → 1.8）。日本語なので 1.5 未満には しない。 */
  line-height: 1.8;
  letter-spacing: .06em;          /* 和文はやや開けると品が出る */
  /* 文字組み ──
     line-break: strict: 小書きかな・長音を 行頭に 落とさない
     text-spacing-trim: 行頭の 括弧の 余白を 詰める
     対応していない ブラウザでは 素の 挙動に 戻るだけ。
     🔴 本文は ベタ組み（行末を そろえる）のまま。文節折り返し（auto-phrase）は
        右端が 大きく 波打つので、見出しと 短い 文にだけ 掛ける（下の h1〜h4 ほか）。 */
  line-break: strict;
  text-spacing-trim: trim-start;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* 🔴 リンクは 対象別トーンに 関わらず ブランドブルー。
   トーンは 面・角丸・影・アイコンで 出す（色で 出すと 同じ ページに
   青い リンクと 橙の リンクが 混ざる）。 */
a { color: var(--cta-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.4;
  letter-spacing: .03em;
  font-weight: 600;               /* 太字を乱発しない */
  font-feature-settings: "palt";  /* 見出しだけ詰める */
  text-wrap: balance;             /* 2 行に なるとき、行の 長さを そろえる */
  word-break: auto-phrase;        /* 見出しは 文節で 折る（「ではあり／ません」を 防ぐ） */
}
h1 { font-size: clamp(26px, 4.4vw, 42px); }
h2 { font-size: clamp(21px, 2.6vw, 30px); }
h3 { font-size: 18px; }
p  { margin: 0 0 1.4em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.4em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
strong { font-weight: 600; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ 骨組み ============ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s5); }
.wrap--narrow { max-width: 760px; }

.sec { padding: var(--sec) 0; }
.sec--tint { background: var(--surface-2); }
.sec--paper { background: var(--surface); }
.sec__head { max-width: 720px; margin-bottom: var(--s8); }
.sec__eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .18em;
  color: var(--ink-2); margin-bottom: var(--s3); text-transform: uppercase;
  font-family: var(--font-num);
}
.sec__lead { color: var(--ink); margin: var(--s4) 0 0; }

/* ============ ヘッダー ============
   🔴 PCナビを たたむ しきい値は 1023px。
      ロゴ + ナビ(665px) + ログイン が 収まる 下限は 実測 978px。
      以前は 1180px で たたんでいたので、ノートPCや 最大化していない
      ウィンドウ（1024〜1180px）で メニューが 消えて 見えていた（2026-09-14 修正）。
      ナビの 項目を 増やすときは この 下限を 測り直す。 */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--cta);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
/* ヘッダーだけ本文より広く取る。本文幅に縛るとナビが折り返す */
.hdr .wrap { max-width: 1320px; }
.hdr__in { display: flex; align-items: center; gap: var(--s4); height: var(--head-h); }
.hdr__logo {
  display: block; flex: 0 0 auto;
  width: 120px; height: 44px;
  background: url("../brand/aitailor-logo.svg?v=6") center / 120px 32px no-repeat;
  filter: brightness(0) invert(1);
  color: transparent; font-size: 0;
  text-decoration: none; white-space: nowrap;
}
.hdr__logo:hover { text-decoration: none; }
.hdr__nav { display: flex; gap: var(--s5); margin-left: var(--s3); }
.hdr__signup { display: none; }
.hdr__nav > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-size: 14px; color: var(--ink-rev); letter-spacing: .02em;
  padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.hdr__nav > a:hover { text-decoration: none; border-bottom-color: rgba(255,255,255,.72); }
.hdr__nav > a[aria-current="page"] { border-bottom-color: var(--surface); }
/* その節に いる（下層ページ）── 現在地より 弱い 白で 示す。
   🔴 flow.css / price.css に 置くと それを 読まない 画面で 効かない。共通に 置く。 */
.hdr__nav > a[aria-current="location"] { border-bottom-color: rgba(255,255,255,.55); }
.hdr__sp { flex: 1; }
.hdr__act { display: flex; gap: var(--s2); }
.hdr__toggle { display: none; }

/* ナビの「サービス」ドロップダウン（法人向け講座／個人向け講座／スキルアップ）
   🔴 このブロックの構造は 下の @media (max-width: 1023px) の
   .hdr__nav[data-open="1"] .hdr__drop* と、さらに末尾の
   body[data-memo="open"] 用ブロックの 3 箇所に登場する。1 箇所直したら残り 2 箇所も直す。 */
.hdr__drop { position: relative; }
.hdr__drop-btn {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 44px; min-height: 44px; justify-content: center;
  font: inherit; font-size: 14px; color: var(--ink-rev); letter-spacing: .02em;
  padding: 4px 0; border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; white-space: nowrap;
}
.hdr__drop-btn:hover { border-bottom-color: rgba(255,255,255,.72); }
.hdr__drop-btn[aria-current="page"] { border-bottom-color: var(--surface); }
/* 印は i-chevron-down（回さない）。開いたときだけ 180 度 返して 上向きにする */
.hdr__drop-ico { transition: transform .15s ease; }
.hdr__drop-btn[aria-expanded="true"] .hdr__drop-ico { transform: rotate(180deg); }
.hdr__drop-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: var(--s3);
  min-width: 200px; padding: var(--s2) 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shadow-2); z-index: 60;
}
.hdr__drop-menu a {
  display: block; padding: var(--s3) var(--s4);
  font-size: 14px; color: var(--ink); border-bottom: 0; white-space: nowrap;
}
.hdr__drop-menu a:hover { background: var(--surface-2); text-decoration: none; }
/* ドロップダウン内の 現在地。page（そのページ）と location（その節に いる）を 同じ 見た目に する。
   🔴 白い パネルの 上なので、ヘッダー本体の 白い 下線とは 別に 色で 示す。 */
.hdr__drop-menu a[aria-current] { color: var(--cta-ink); font-weight: 600; }
.hdr__drop:hover .hdr__drop-menu,
.hdr__drop:focus-within .hdr__drop-menu,
.hdr__drop-btn[aria-expanded="true"] + .hdr__drop-menu { display: block; }

@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  /* 印だけの ボタン。名前は aria-label で 渡している（文字を 出すと 390px で 折り返す）*/
  .hdr__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid rgba(255,255,255,.65); border-radius: var(--r2);
    flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font: inherit; color: var(--ink-rev); cursor: pointer;
  }
  .hdr__nav[data-open="1"] {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: var(--head-h); left: 0; right: 0;
    background: var(--cta); border-bottom: 1px solid rgba(255,255,255,.28);
    padding: var(--s3) var(--s5) var(--s5); margin: 0;
  }
  .hdr__nav[data-open="1"] > a { color: var(--ink-rev); padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.3); }
  /* スマホ幅では開閉式ドロップダウンではなく、常に開いた入れ子リストにする */
  .hdr__nav[data-open="1"] .hdr__drop { display: block; }
  .hdr__nav[data-open="1"] .hdr__drop-btn {
    width: 100%; justify-content: space-between;
    color: var(--ink-rev); padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.3);
  }
  /* 入れ子リストは 常に 開いているので 開閉の 印は 出さない */
  .hdr__nav[data-open="1"] .hdr__drop-ico { display: none; }
  .hdr__nav[data-open="1"] .hdr__drop-menu {
    display: block; position: static; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .hdr__nav[data-open="1"] .hdr__drop-menu a {
    padding: var(--s3) 0 var(--s3) var(--s4);
    border-bottom: 1px solid rgba(255,255,255,.22); font-size: 13px; color: rgba(255,255,255,.86);
  }
  .hdr__nav[data-open="1"] > a:hover,
  .hdr__nav[data-open="1"] .hdr__drop-btn:hover,
  .hdr__nav[data-open="1"] .hdr__drop-menu a:hover {
    color: var(--ink-rev);
    background: rgba(255,255,255,.12);
  }
}
@media (max-width: 620px) {
  .hdr__logo { width: 120px; height: 44px; background-size: 120px 32px; }
  .hdr__act .btn--ghost { display: none; }
}
@media (max-width: 390px) {
  .hdr .wrap { padding-inline: var(--s2); }
  .hdr__in { gap: var(--s1); }
  .hdr__act { gap: 0; }
  .hdr__act .btn--cta { min-height: 44px; padding: 9px var(--s2); font-size: 12px; }
}

/* ============ ボタン ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: 11px 22px;
  border: 1px solid transparent; border-radius: var(--r2);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; transition: .15s ease; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--cta { background: var(--cta); color: var(--ink-rev); }      /* 主 */
.btn--cta:hover { background: var(--cta-ink); }
.btn--line { background: var(--surface); color: var(--accent-ink); border-color: var(--accent); } /* 従 */
.btn--line:hover { background: var(--accent-bg); }
.btn--ghost { background: none; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn:disabled,
.btn:disabled:hover {
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border-color: var(--ink-3);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}
.btn--sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.hdr__act .btn { min-height: 44px; }
.hdr__act .btn--cta:not(:disabled) { background: var(--surface); color: var(--cta); }
.hdr__act .btn--cta:not(:disabled):hover { background: var(--cta-bg); }
.hdr__act .btn--ghost:not(:disabled) { color: var(--ink-rev); border-color: rgba(255,255,255,.65); }
.hdr__act .btn--ghost:not(:disabled):hover { color: var(--ink-rev); background: rgba(255,255,255,.12); }
.hdr a:focus-visible,
.hdr button:focus-visible {
  outline: 3px solid var(--surface);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-dark);
}
.btn--wide { width: 100%; }
.btn__note { display: block; font-size: 12px; color: var(--ink-2); margin-top: var(--s2); letter-spacing: .02em; }

/* ============ ヒーロー（獲得面: 左テキスト / 右ビジュアル） ============ */
.hero { padding: var(--s8) 0 var(--sec); background: var(--surface); border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
.hero__grid > * { min-width: 0; }
.hero__title { margin-bottom: var(--s5); }
.hero__lead { color: var(--ink-2); margin-bottom: var(--s6); }
.hero__act { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
/* 右が フォームの ときは 上ぞろえ。中央ぞろえだと 左の 見出しが 中途半端な 位置に 落ちる */
.hero__grid:has(.form) { align-items: start; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s7); } }
@media (max-width: 390px) {
  /* 🔴 ここで auto-phrase を 消すと 見出しが「4つのサービ／スがあります。」と 割れる。
     日本語は 既定で どこでも 折れるので anywhere は 要らない（むしろ 最悪の 位置で 折る）。
     長い 英字（ForwardDeployedEngineer 等）の はみ出しだけ break-word で 逃がす。
     390px は iPhone の 標準幅なので ここが いちばん 効く。 */
  .hero__grid h1,
  .hero__grid h2 { overflow-wrap: break-word; }
  .hero__grid .btn { white-space: normal; text-align: center; }
}

/* ============ グレーの仮画像 ============ */
.ph {
  position: relative; display: grid; place-items: center;
  background: var(--ph-bg);
  background-image: linear-gradient(135deg, rgba(255,255,255,.5) 25%, transparent 25%,
                    transparent 50%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.5) 75%,
                    transparent 75%);
  background-size: 14px 14px;
  border-radius: var(--r3); overflow: hidden;
  color: var(--ph-ink); font-size: 12px; letter-spacing: .1em; text-align: center;
  padding: var(--s4);
}
.ph::after {
  content: attr(data-label);
  display: block; max-width: 88%;
  background: rgba(255,255,255,.86); border-radius: var(--r1);
  padding: 6px 10px; line-height: 1.6;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x1  { aspect-ratio: 3 / 1; }
.ph--wide { aspect-ratio: 21 / 9; }
/* 生成した 実画像（2026-09-14〜）。.ph の 灰色枠を img に 置き換えたもの。比率は .ph--* を 使い回す。
   出所と 規範は docs/10_事業モデル/サイトデザイン設計/20260913-画像生成ガイドライン.md */
.fig { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--r3); }
img.voice__avatar { border: 0; padding: 0; object-fit: cover; }
img.hero__bg { width: 100%; height: 100%; object-fit: cover; }

/* ============ アイコン（線・currentColor） ============ */
/* 形は ../assets/icons.js（Lucide）が配る。ここが決めるのは 大きさと 線の太さだけ。 */
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--lg { width: 30px; height: 30px; }
.ico--sm { width: 17px; height: 17px; }

/* ============ 数値実績（証拠） ============ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s5); }
.stat { border-left: 2px solid var(--accent); padding-left: var(--s4); }
.stat__v { font-family: var(--font-num); font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; line-height: 1.2; }
.stat__v small { font-size: 15px; font-weight: 400; margin-left: 3px; letter-spacing: .04em; font-family: var(--font); }
.stat__k { font-size: 13px; color: var(--ink-2); margin-top: var(--s1); }

/* ============ カード ============ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* 4 枚の 組 ── 既定の auto-fit(260px) だと 1030px 幅で 3 列に なり、
   4 枚目が 1 枚だけ 次の 行に 取り残される。4 → 2×2 → 1 で 折り返す。 */
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards--4 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); padding: var(--s6);
}
.card__ico { color: var(--cta); margin-bottom: var(--s4); }
.card :is(h2, h3) { margin-bottom: var(--s3); }
.card p:last-child { margin-bottom: 0; }

/* 送客ハブの 振り分けカード */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: var(--s5); }
.pick__card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s6); color: inherit; text-decoration: none; transition: .16s ease;
}
.pick__card:hover { text-decoration: none; border-color: var(--cta); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pick__ico { color: var(--cta); margin-bottom: var(--s5); }
.pick__lead { font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: .03em; margin-bottom: var(--s3); font-feature-settings: "palt"; word-break: auto-phrase; }
.pick__note { font-size: 14px; color: var(--ink-2); margin-bottom: var(--s5); flex: 1; }
.pick__go {
  min-width: 44px; min-height: 44px; padding-block: var(--s2);
  font-size: 14px; font-weight: 600; color: var(--cta-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.pick--inverse { margin-top: 0; }
.pick--inverse .pick__card { background: var(--cta); border-color: var(--cta); color: var(--ink-rev); }
.pick--inverse .pick__card:hover { border-color: rgba(255,255,255,.72); box-shadow: var(--shadow-2); }
.pick--inverse .pick__note,
.pick--inverse .pick__go { color: var(--ink-rev); }

/* ============ 課題 → 解決（1対1で並べる） ============ */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s5); align-items: center;
        padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.pair:last-child { border-bottom: 0; }
.pair__q { color: var(--ink-2); }
.pair__arrow { color: var(--ink-2); }
.pair__a { font-weight: 600; }
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; gap: var(--s2); }
  .pair__arrow { justify-self: center; transform: rotate(90deg); }
}

/* ============ 手順 ============ */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { position: relative; padding: 0 0 var(--s6) var(--s8); }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 2px; width: 24px; text-align: center;
  font-family: var(--font-num); font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: .05em;
}
.steps li::after {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 6px; width: 1px; background: var(--line);
  transform: translateX(-50%);
}
.steps li:last-child::after { display: none; }
.steps :is(h2, h3) { margin-bottom: var(--s2); }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ============ 4 つの入口（.pick の 4 枚並び） ============
   3 枚のときは auto-fit で足りるが、4 枚だと 3＋1 に折れて 1 枚だけ余る。
   そのため 4 → 2×2 → 1 と、余りが出ない形で 段を 落とす。 */
.pick--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pick--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pick--4 { grid-template-columns: 1fr; } }

/* ============ 使い方の 実例（画像 ＋ 説明） ============
   ゴミ箱/design/top.html の「まず、この3つから選んでください。」を モックの 語彙に 置き直したもの。 */
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.case {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: var(--s6); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5);
}
.case__img { margin: 0; }
.case__no { display: block; font-family: var(--font-num); font-size: 12px; letter-spacing: .1em; color: var(--ink-2); margin-bottom: var(--s2); }
.case__body h3 { margin-bottom: var(--s3); }
.case__body p { margin-bottom: var(--s3); }
.case__body p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .case { grid-template-columns: 1fr; gap: var(--s4); } }

/* ============ 利用者の声 ============
   属性 → 編集部の 背景説明 → 本人の 言葉、の 順で 固定する（順番を 入れ替えない）。 */
.voices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s5); }
.voice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s6); }
.voice__head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.voice__avatar {
  width: 72px; height: 72px; min-width: 72px; flex: 0 0 72px; aspect-ratio: 1;
  display: grid; place-items: center; border: 1px dashed var(--ink-3); border-radius: var(--r2);
  background: var(--surface-2); color: var(--cta);
}
.voice__avatar .ico { width: 32px; height: 32px; }
.voice__who { font-size: 15px; margin: 0; }
.voice__label { font-size: 12px; letter-spacing: .14em; color: var(--ink-2); margin: 0 0 var(--s2); }
.voice__label + p { margin-bottom: var(--s5); }
.voice__said { margin: 0; padding-left: var(--s4); border-left: 2px solid var(--accent); }
.voice__said p { margin: 0 0 var(--s3); font-weight: 600; }
.voice__said p:last-child { margin-bottom: 0; }

/* ============ 表 ============ */
/* 表の 外枠 ── 狭い画面では 横に スクロールさせる。
   🔴 スクロールできることが 見えないと、右の 列は 無いのと 同じ。
   端の 影は 「まだ 続く」ときだけ 出る（background-attachment: local / scroll の 併用）。*/
.tw {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r3);
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,   rgba(34,32,30,.16), rgba(34,32,30,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(34,32,30,.16), rgba(34,32,30,0)) right center / 12px 100% no-repeat,
    var(--surface);
  background-attachment: local, local, scroll, scroll, local;
}
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t thead th { background: var(--surface-2); font-size: 13px; color: var(--ink-2); font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
/* 列を 潰さない ── 日本語は どこでも 折れるので、狭いと「無料会/員」の ように 語が 割れる。
   潰すくらいなら 横スクロールへ 逃がす（合図は .tw の 端の 影）。*/
table.t th, table.t td { min-width: 7em; }
@media (max-width: 620px) {
  /* 狭い画面では セルの 余白を 詰めて 文字に 幅を まわす */
  table.t th, table.t td { padding: var(--s3) var(--s4); }
}
table.t tbody th { width: 34%; font-weight: 600; color: var(--ink-2); font-size: 14px; }
table.t tr:last-child td, table.t tr:last-child th { border-bottom: 0; }
table.t .r { text-align: right; font-family: var(--font-num); white-space: nowrap; }

/* ============ FAQ（CTA の隣に置く） ============ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  list-style: none; cursor: pointer; padding: var(--s5) var(--s7) var(--s5) 0;
  position: relative; font-weight: 600; letter-spacing: .03em;
}
.faq summary > span { min-width: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: .18s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { display: flex; align-items: flex-start; gap: var(--s3); padding: 0 var(--s7) var(--s5) 0; color: var(--ink-2); font-size: 15px; }
.faq__a p { min-width: 0; }
.faq__a p:last-child { margin-bottom: 0; }

/* ============ CTA 帯 ============ */
.cta {
  background: var(--cta); color: var(--ink-rev);
  padding: var(--sec) 0; text-align: center;
}
.cta .btn--cta:not(:disabled) { background: var(--surface); color: var(--cta); border-color: var(--surface); }
.cta .btn--cta:not(:disabled):hover { background: var(--cta-bg); }
.cta h2 { color: var(--ink-rev); margin-bottom: var(--s4); }
.cta p { color: rgba(255,255,255,.86); max-width: 620px; margin: 0 auto var(--s7); }
.cta__act { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; }
.cta .btn--line { background: transparent; color: var(--ink-rev); border-color: rgba(255,255,255,.6); }
.cta .btn--line:hover { background: rgba(255,255,255,.12); }
.cta__note { margin-top: var(--s5); font-size: 13px; color: rgba(255,255,255,.75); }

/* ============ フォーム ============ */
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s7); }
.fld { margin-bottom: var(--s6); }
.fld__l { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.fld__req { font-size: 12px; padding: 2px 7px; border-radius: var(--r1); background: var(--cta-bg); color: var(--cta-ink); font-weight: 600; letter-spacing: .04em; }
.fld__opt { font-size: 12px; padding: 2px 7px; border-radius: var(--r1); background: var(--surface-2); color: var(--ink-2); }
.fld__h { font-size: 13px; color: var(--ink-2); margin-top: var(--s2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
textarea, select {
  width: 100%; font: inherit; font-size: 15px; letter-spacing: .04em;
  padding: 12px 14px; border: 1px solid var(--ink-3); border-radius: var(--r2);
  background: var(--surface); color: var(--ink);
}
select { min-height: 53px; padding-right: 40px; }
textarea { min-height: 130px; resize: vertical; line-height: 1.8; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-bg); }
.opts { display: flex; flex-direction: column; gap: var(--s2); }
.opts label {
  min-height: 44px; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2);
  font-size: 15px; cursor: pointer;
}
.opts label:hover { background: var(--surface-2); }
.opts input { accent-color: var(--cta); width: 18px; height: 18px; margin: 0; flex: none; }
.opts input:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; box-shadow: none; }
/* 選んだ 状態は 操作の 色（ブランドブルー）で 示す。
   🔴 丸は accent-color で 青、枠と 面だけ ティールだと 同じ 部品の 中で 色が ねじれる。 */
.opts label:has(input:checked) { border-color: var(--cta); background: var(--cta-bg); }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
input:disabled { color: var(--ink-3); background: var(--surface-2); cursor: not-allowed; }

/* ============ 記事・一覧 ============ */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posts li { border-bottom: 1px solid var(--line); }
.posts a { display: block; padding: var(--s5) 0; color: inherit; }
.posts a:hover { text-decoration: none; }
.posts a:hover .posts__t { color: var(--cta-ink); text-decoration: underline; }
.posts__m { font-size: 12px; color: var(--ink-2); font-family: var(--font-num); letter-spacing: .08em; }
.posts__t { display: block; font-weight: 600; margin-top: 3px; letter-spacing: .03em; }
.posts__d { font-size: 14px; color: var(--ink-2); margin: var(--s2) 0 0; }

.prose { max-width: 720px; }
.prose h2 { margin: var(--s8) 0 var(--s4); }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose p, .prose li { color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }

/* ============ 札 ============ */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
       padding: 4px 10px; border-radius: var(--r4); background: var(--surface-2); color: var(--ink-2); letter-spacing: .04em; }
.tag--ok   { background: var(--ok-bg); color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--cta  { background: var(--cta-bg); color: var(--cta-ink); }

/* 🔴 日本語の 本文は 1 行 45 字前後まで。1080px の .wrap いっぱいに 流すと
   74 字に なり、行末から 次の 行頭へ 目が 戻れなくなる。
   em で 指定するので 字を 大きくしても 1 行の 字数は 変わらない。 */
.note,
.sec > .wrap > p,
.sec > .wrap > ul:not([class]),
.sec > .wrap > ol:not([class]) { max-width: 44em; }
.note { border-left: 2px solid var(--line-2); padding: var(--s2) 0 var(--s2) var(--s5); color: var(--ink-2); font-size: 14px; }

/* ============ パンくず ============ */
/* app/assets/shell.css の .crumbs に そろえる。
   区切りは 文字では なく i-chevron-right（読み上げ対象に しない）。
   狭い 画面で 3 段に なっても 折り返せるよう flex-wrap を 効かせる。 */
/* 🔴 パンくずは「ヘッダの続き」。節の 中に 入れると 節の 上余白（--sec ＝ 最大 132px）の
   まん中に 浮いて、下の 見出しとだけ 近い という 収まりの 悪い 形に なる。
   だから ヘッダ直下の 細い 帯として 出し、続く 節の 上余白は その ぶん 詰める。 */
.crumbs-bar { padding: var(--s4) 0 0; }
.crumbs-bar + .sec, .crumbs-bar + .hero { padding-top: var(--s7); }
.crumbs-bar + .sec > .wrap > .sec__head:first-child { margin-top: 0; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: 12px; color: var(--ink-3); letter-spacing: .04em; line-height: 1.5;
  margin: 0;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--cta-ink); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs .ico { width: 13px; height: 13px; color: var(--line-2); }

/* ============ フッター ============ */
.ftr { background: var(--ink); color: rgba(255,255,255,.72); padding: var(--sec) 0 var(--s7); font-size: 14px; }
.ftr__tag { color: rgba(255,255,255,.6); }
.ftr a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: rgba(255,255,255,.82); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); margin-bottom: var(--s8); }
.ftr__logo {
  width: 135px; height: 36px; margin-bottom: var(--s3);
  background: url("../brand/aitailor-logo.svg?v=6") center / contain no-repeat;
  color: transparent; font-size: 0;
  filter: brightness(0) invert(1);
}
.ftr h4 { font-size: 12px; letter-spacing: .16em; color: rgba(255,255,255,.5); margin-bottom: var(--s4); font-weight: 600; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: var(--s3); }
.ftr__btm { border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s5); font-size: 12px; color: rgba(255,255,255,.5); }
.ftr__btm .sp { flex: 1; }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

/* 画面ごとに1列構成を選べるフッター。リンク群の後にコピーライトを置く */
@media (max-width: 820px) {
  .ftr--single .ftr__grid { grid-template-columns: 1fr; gap: 0; }
  .ftr--single .ftr__grid > div { padding: var(--s5) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .ftr--single .ftr__grid > div:first-child { padding-top: 0; }
  .ftr--single .ftr__btm { flex-direction: column; gap: var(--s2); }
  .ftr--single .ftr__copy { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.14); }
}

/* ============ モバイル追従 CTA ============ */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  gap: var(--s2); padding: var(--s3) var(--s4);
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.bar .btn { flex: 1; min-height: 44px; font-size: 14px; padding: 9px 10px; }
@media (max-width: 760px) { .bar { display: flex; } body { padding-bottom: 76px; } }
/* ヒーローの CTA が 見えている あいだは 引っ込める。
   🔴 同じ ボタンが ファーストビューに 2 つ 並ぶと、どちらを 押すか 迷う。
   data-rest は site.js が 付ける。JS が 動かない ときは 出たまま ＝ 導線は 必ず 残る。 */
.bar { transition: transform .22s ease, opacity .22s ease; }
.bar[data-rest="1"] { transform: translateY(115%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* ============ モックであることの印 ============
   🔴 依頼者指示でページ最下部（フッターより下）に配置。かつては最上部の帯だった名残で
   背景色がフッターと同じ --ink のため、境界線で仕切る（無いとフッターと溶けて見える）。 */
/* ============ 修正メモ（レビューの 道具）を 開いた とき ============
   メモ本体の 見た目は ../assets/memo.css が 持つ。ここに 書くのは
   「サイト側の 部品を どう よけるか」だけ。
   🔴 body に 余白を 付けて 押しのける（追従ヘッダは sticky ＝ 流れの中に いるので 一緒に 縮む）。
      被せるだけだと ヘッダ右端の「ログイン」「無料会員登録」が 押せなくなる。 */
/* memo.css の --mkm-w(340) ＋ 開閉タブ 40 ＋ 余白 4 */
/* 🔴 ヘッダの ナビは 折り返さない（white-space: nowrap）ので、狭くなった ぶん
   そのまま はみ出し、右端の「無料会員登録」が メモの タブの 下に 潜る。
   だから メモを 開いている あいだは、素の 1023px と 同じ「たたんだ ヘッダ」に 切り替える。
   しきい値 = 素の 1023 ＋ メモ 384。
   ⚠️ 中身は 上の @media (max-width: 1023px) と 同じ（.hdr__drop* も含む）。片方を 直したら もう片方も 直す。 */
/* モバイルの 追従 CTA は メモの ボタンに 重なるので、開いている あいだは 引っ込める */

/* PCナビを7px下げる。44pxの操作領域は68pxのヘッダー内に収める。
   ヘッダーは30枚で同じ形なので、この調整も全ページへ配る。 */
@media (min-width: 1024px) {
  .hdr__nav { transform: translateY(7px); }
  /* メニュー上の12pxの隙間もホバー領域に含め、項目まで途切れず移動できる。 */
  .hdr__drop-menu::before {
    content: ""; position: absolute; left: -1px; right: -1px;
    top: calc(-1 * var(--s3) - 1px); height: var(--s3);
  }
}


/* homeの紹介だけ圧縮する。図の比率と本文の行間は保つ。 */
.home-intro { padding-block: clamp(48px, 5vw, 72px); }
.home-intro .sec__head { margin-bottom: var(--s5); }
.home-intro__link { margin: var(--s5) 0 0; }

/* homeのChoice：スタイルガイドの部品構成に合わせ、アイコンとタイトルを横並びにする */
.pick--icon-title .pick__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* 🔴 grid では .pick__note の flex:1 が効かない。説明の行を伸ばして
     リンク（.pick__go）を カードの下端へ そろえる（説明が 2 行でも 4 行でも 同じ高さ）*/
  grid-template-rows: auto 1fr auto;
  column-gap: var(--s3);
  row-gap: var(--s3);
  align-items: center;
}
.pick--icon-title .pick__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
}
.pick--icon-title .pick__lead {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: 3em;
  margin-bottom: 0;
}
.pick--icon-title .pick__note,
.pick--icon-title .pick__go { grid-column: 1 / -1; }
/* 伸びた行の 中で 説明は 上づけ（中央だと カードごとに 始まりが ばらつく）*/
.pick--icon-title .pick__note { align-self: start; margin-bottom: 0; }

/* homeで採用する白いモバイルナビ。青いヘッダー本体とは面を分けて左揃えにする */
@media (max-width: 1023px) {
  .hdr__nav--light[data-open="1"] {
    background: var(--surface);
    border-bottom-color: var(--line);
    text-align: left;
  }
  .hdr__nav--light[data-open="1"] .hdr__signup { display: flex; order: -1; font-weight: 600; color: var(--cta); }
  .hdr__nav--light[data-open="1"] > a,
  .hdr__nav--light[data-open="1"] .hdr__drop-btn {
    justify-content: flex-start;
    color: var(--ink);
    border-bottom-color: var(--line);
    text-align: left;
  }
  .hdr__nav--light[data-open="1"] .hdr__drop-btn { justify-content: space-between; }
  .hdr__nav--light[data-open="1"] .hdr__drop-menu a {
    color: var(--ink-2);
    border-bottom-color: var(--line);
    text-align: left;
  }
  .hdr__nav--light[data-open="1"] > a:hover,
  .hdr__nav--light[data-open="1"] .hdr__drop-btn:hover,
  .hdr__nav--light[data-open="1"] .hdr__drop-menu a:hover {
    color: var(--accent-ink);
    background: var(--surface-2);
  }
}
/* 🔴 スマホ（〜719px）では メモが 下から 出る シートに なる（memo.css）。
   閉じている あいだ、開閉タブが 追従 CTA(.bar) に 重なるので その 高さぶん 持ち上げる。
   開くと .bar は 上の 行で 消えるので、持ち上げるのは 閉じている ときだけ。 */
/* .bar の 高さ ＝ body の padding-bottom と 同値 */

/* ============ 全画面ヒーロー（トップだけ・イメージ主導） ============
   🔴 素の .hero（左テキスト／右ビジュアル）は about / business / school /
      skillup / contact / students / school-keiba の 7 枚が 使っている。
      壊さないよう、home.html だけ .hero--full で 上書きする（追記のみ）。
   モックなので 写真は 無い。既存の 斜線プレースホルダ .ph を 全面に 敷き、
   墨（--ink）の 幕を かぶせて 文字を 乗せる。外から 画像は 読み込まない。 */
.hero--full {
  position: relative;
  display: grid;
  align-items: center;
  padding: var(--s8) 0;
  overflow: hidden;
  /* 🔴 ヘッダは sticky なので その ぶんを 引く。100vh だと 初回表示が 画面から はみ出す。
     モバイルは アドレスバーで 100vh が 伸び縮みするため svh を 後から 上書きする。 */
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
}
/* 敷く プレースホルダ。角丸と 内側余白は 全面では 邪魔なので 消す */
.hero__bg {
  position: absolute; inset: 0;
  border-radius: 0; padding: 0;
}
/* 仮画像の 説明札は 中央だと 見出しと ぶつかる。左上へ 逃がす */
.hero__bg::after {
  position: absolute; left: var(--s5); top: var(--s5);
  max-width: min(420px, 76%); text-align: left;
}
/* 墨の 幕 ── 値は --ink(#22201e) の rgba。--shadow-* と 同じ書き方に そろえた */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(34,32,30,.78) 0%, rgba(34,32,30,.58) 46%, rgba(34,32,30,.30) 100%);
}
.hero__in { position: relative; z-index: 1; }
.hero--full .sec__eyebrow { color: rgba(255,255,255,.7); }
.hero--full .hero__title {
  color: var(--ink-rev);
  font-size: clamp(32px, 6.4vw, 64px);
  line-height: 1.3;               /* 大きい字は 行間を 詰めないと 間延びする */
  margin-bottom: var(--s5);
}
.hero--full .hero__lead {
  color: rgba(255,255,255,.88);
  max-width: 30em; margin-bottom: 0;
}
/* 下へ 続くことの 合図。文字は 置かず 下向きの 印だけ（i-chevron-down）*/
.hero__scroll {
  position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%);
  z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: rgba(255,255,255,.78);
}
.hero__scroll:hover { text-decoration: none; color: var(--ink-rev); }
.hero__scroll-ico { animation: hero-nudge 1.9s ease-in-out infinite; }
@keyframes hero-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll-ico { animation: none; } }
/* 狭い 画面 ── 札と 合図が ぶつからないよう 余白を 詰める */
@media (max-width: 620px) {
  .hero--full { padding: var(--s7) 0 var(--s8); }
  .hero__bg::after { left: var(--s4); top: var(--s4); font-size: 11px; }
  .hero__scroll { bottom: var(--s5); }
}

/* =========================================================
   お知らせのような 補助の 節 ── 縦を 詰める
   ---------------------------------------------------------
   .sec の 上下余白は --sec（最大 132px）で、これは「主役の 節」の 寸法。
   お知らせは 更新されているのが 分かれば いい 節なので、
   一段 浅い --s8（72px）に 落として 見出しと 行の 間も 詰める。
   他の 節との 対比は 保つため、--s7 より 下げない。
   ========================================================= */
/* お知らせを 縦に 短くする ── 題を 先に、日付は 右端（トップの「ニュース」で使う）。
   🔴 DOM も 題 → 日付 の 順。読み上げと 表示の 順を ずらさない。
   🔴 狭い 画面では 題が 折り返して 読みにくいので、素の 2 段組みへ 戻す。 */
.posts--compact a {
  display: flex; gap: var(--s5); align-items: baseline; justify-content: space-between;
  padding: var(--s3) 0;
}
.posts--compact .posts__t { margin-top: 0; font-size: 15px; }
.posts--compact .posts__m { flex: none; white-space: nowrap; }
@media (max-width: 620px) {
  .posts--compact a { display: block; padding: var(--s3) 0; }
  .posts--compact .posts__m { display: block; margin-top: 2px; }
}

.sec--tight { padding: var(--s8) 0; }
.sec--tight .sec__head { margin-bottom: var(--s5); }
.sec--tight .posts a { padding: var(--s4) 0; }
.sec--tight .posts--compact a { padding: var(--s3) 0; }   /* 🔴 上の行より後に置く（同じ強さなので順番で決まる） */
@media (max-width: 620px) {
  .sec--tight { padding: var(--s7) 0; }
}

/* ============ About だけの 組み（人物ページ） ============
   🔴 依頼者の 指示で「About は 他の 画面と 同じ 見た目に しない」。
      .sec ＋ .sec__head の 繰り返しを 使わず、この ブロックだけで 組む。
      使うのは site/about.html の 1 枚だけ。既存クラスは 書き換えて いない（追記のみ）。
      色・余白・角丸は すべて :root の トークンから 取る。 */

/* 帯 ── .sec と 同じ 縦余白。ただし 見出しの 作り（.sec__head）は 持たない */
.about-band { padding: var(--sec) 0; }
.about-band--paper { background: var(--surface); }

/* --- 導入 ── ポートレートを 大きく 使う --- */
.about-open {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s8) 0 var(--sec);
}
/* パンくずの 直後は 上余白を 詰める（.crumbs-bar + .sec / + .hero と 同じ 扱い）*/
.crumbs-bar + .about-open { padding-top: var(--s7); }
.about-open__grid {
  display: grid; grid-template-columns: .92fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* 写真は まだ 無い。既存の 斜線プレースホルダを 縦長で 使う（外から 画像は 読み込まない）*/
.ph--3x4 { aspect-ratio: 3 / 4; }
/* 広い 画面だけ 顔を 左に 置く。DOM は 文字が 先 ＝ 狭い 画面では 文字から 読める */
@media (min-width: 901px) { .about-open__fig { order: -1; } }
.about-open__title { margin-bottom: var(--s5); }
.about-open__lead { color: var(--ink-2); margin-bottom: var(--s6); }
.about-open__sig { border-top: 1px solid var(--line); padding-top: var(--s4); }
.about-open__name { font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.about-open__role { font-size: 13px; color: var(--ink-2); margin: 2px 0 0; }
@media (max-width: 900px) {
  .about-open { padding-bottom: var(--s8); }
  .about-open__grid { grid-template-columns: 1fr; gap: var(--s7); }
}

/* --- 見出し ── 上に 短い アクセントの 線を 引くだけ（.sec__head を 使わない）--- */
.about-h {
  position: relative;
  padding-top: var(--s4);
  margin-bottom: var(--s6);
  font-size: clamp(20px, 2.4vw, 27px);
}
.about-h::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 34px; height: 2px; background: var(--accent);
}

/* --- 語り ── 読み物として 1 カラム。行長は wrap--narrow（760px）に 収める --- */
.about-essay p { color: var(--ink-2); margin-bottom: 1.6em; }
/* 語り出しだけ 大きく、色も 本文の 墨に する（事実の 段落と リズムを 変える）*/
.about-essay .about-lede {
  font-size: 18px; color: var(--ink); line-height: 1.9;
  margin-bottom: var(--s6);
}
.about-essay .about-lede + p { margin-top: 0; }

/* 引用 ── 打ち合わせで 出た ひとこと */
.about-quote {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  align-items: start;
  margin: var(--s7) 0;
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--r3);
}
.about-quote .ico { color: var(--accent); margin-top: 3px; }
.about-quote p {
  margin: 0; color: var(--ink); font-size: 17px; font-weight: 600;
  line-height: 1.85; letter-spacing: .03em;
}

/* 名前の 由来 ── 語りの 終わりに 置く 小さな 定義 */
.about-name {
  margin: var(--s8) 0 0;
  padding: var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
}
.about-name dt { font-weight: 600; letter-spacing: .03em; margin-bottom: var(--s2); }
.about-name dd { margin: 0 0 var(--s6); color: var(--ink-2); font-size: 15px; }
.about-name dd:last-child { margin-bottom: 0; }

/* --- 経歴 ── 年表 --- */
.about-tl { list-style: none; margin: var(--s7) 0 0; padding: 0; }
.about-tl > li { position: relative; margin: 0; padding: 0 0 var(--s7) var(--s7); }
.about-tl > li:last-child { padding-bottom: 0; }
/* 縦の 線。丸の 下から 次の 項目まで */
.about-tl > li::before {
  content: ""; position: absolute; left: 14px; top: var(--s6); bottom: 0;
  width: 1px; background: var(--line);
}
.about-tl > li:last-child::before { display: none; }
.about-tl__dot {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: var(--r4);
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent);
}
.about-tl__yr {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: .08em; line-height: 30px;
}
.about-tl h3 { margin: var(--s2) 0 var(--s3); }
.about-tl p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* 使ってきた もの ── 札を 並べる（.tag を そのまま 使う）*/
.about-kicker { font-size: 13px; color: var(--ink-2); margin: var(--s8) 0 var(--s3); }
.about-chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.about-chips li { margin: 0; }
.about-after { margin: var(--s7) 0 0; color: var(--ink-2); }

/* --- 約束 ── 番号を 大きく 振る --- */
.about-vow {
  counter-reset: vow;
  list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid var(--line);
}
.about-vow > li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  margin: 0; padding: var(--s6) 0;
  border-top: 1px solid var(--line);
  counter-increment: vow;
}
.about-vow > li::before {
  content: counter(vow, decimal-leading-zero);
  font-family: var(--font-num); font-size: 20px; font-weight: 600;
  color: var(--accent); letter-spacing: .04em; line-height: 1.7;
}
.about-vow h3 { font-size: 19px; margin-bottom: var(--s3); }
.about-vow p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 620px) {
  .about-vow > li { gap: var(--s3); }
}

/* --- 閉じ ── 青い CTA 帯（.cta）は 使わず、静かに 終える --- */
.about-close { margin-top: var(--s8); }
.about-close h2 { font-size: clamp(20px, 2.4vw, 27px); margin-bottom: var(--s4); }
.about-close p { color: var(--ink-2); margin-bottom: var(--s6); }
.about-close__act { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* =========================================================
   1 枚に 複数の 節を 積む ページ（価格）── 節内リンクと 節の 顔
   ---------------------------------------------------------
   法人と 個人を 別ページに 分けず 縦に 並べる。長い 1 枚に なるので
     ① 上部の .jump で 目当ての 節へ 飛べるようにする
     ② 追従ヘッダ（--head-h）の 下に 潜らないよう 飛び先に 余白を 置く
     ③ 節ごとに 面の 色（.sec--paper / .sec--tint）と 印（.sec__ico）を 変え、
        いま どちらを 読んでいるかが ひと目で 分かるようにする
   ========================================================= */

/* 飛び先が 追従ヘッダに 隠れない。id を 持つ 節だけに 効かせる */
.sec[id] { scroll-margin-top: calc(var(--head-h) + var(--s5)); }

/* 見出しの 副題 ── h1 は 短く、内訳は 一段 小さく 下に 置く */

/* 節内リンク ── 押せることが 分かる 丸みの 札。横に 並べ、狭ければ 折り返す */
.jump { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.jump a {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 9px var(--s5); border: 1px solid var(--line-2); border-radius: var(--r4);
  background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.6;
}
.jump a:hover {
  text-decoration: none;
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink);
}
.jump .ico { color: var(--accent); }

/* 節の 印 ── 法人（building）／個人（user）を 見出しの 上に 置く */
.sec__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: var(--s4);
  border-radius: var(--r4); background: var(--accent); color: var(--ink-rev);
}

/* =========================================================
   トーンの 出し分け ── 法人（corp）と 個人（pop）
   ---------------------------------------------------------
   依頼: 「法人講座は ビジネスチックな お硬い感じ／個人講座は ポップで 楽しい感じ」
   🔴 画面ごとに 色や 余白を 直書きしない。ここで :root の トークンを 上書きし、
      既存の 部品（.btn .card .steps .pick .tag …）は そのまま 使う。

   🔴 トークンを 配る 先は body では なく「本文の 節」に する。
      ヘッダ・パンくず・フッター・モック帯は 44 枚で 形が そろっている 共通の 外枠で、
      2 つの トーンで 変えては いけない。カスタムプロパティは 継承なので、
      .hero / .sec / .cta / .bar に 配れば 本文の 中だけに 届き、外枠には 届かない。

   使い方:
     1 枚 まるごと … <body data-tone="corp">  /  <body data-tone="pop">
     節ごと（価格）… <section class="sec …" data-tone="corp">
   ========================================================= */

/* ---------- 法人 ＝ 硬い ----------
   CTA のブランドブルーとは明度を分けた落ち着いた青を使う。角丸を詰め、影を弱め、余白を広く、字を一段小さく。 */
body[data-tone="corp"] :is(.hero, .sec, .cta, .bar),
.sec[data-tone="corp"] {
  --accent: #2d5f91;
  --accent-ink: #21496f;
  --accent-bg: #edf3f8;
  --r1: 2px; --r2: 3px; --r3: 4px;
  --shadow-1: 0 1px 2px rgba(34,32,30,.04);
  --shadow-2: 0 2px 10px rgba(34,32,30,.07);
  --sec: clamp(84px, 10vw, 152px);   /* 既定より 一段 広い */
  font-size: 15px;                    /* 字は やや 小さめ */
  line-height: 1.95;                  /* 本文より 一段 広め（詰めた 1.8 に 対する 一段） */
}
/* 見出しも 一段 落として 詰め込まない。h1 は 各画面の 主張なので 触らない */
body[data-tone="corp"] :is(.sec, .cta) h2 { font-size: clamp(20px, 2.3vw, 27px); }

/* 装飾の アイコンを 減らす ── 印は 残すが 色を 引き、面積も 小さく。
   青の 大きな 印が 並ぶと 案内的（＝やわらかい）に 見えるため。 */
body[data-tone="corp"] .card__ico { color: var(--ink-3); margin-bottom: var(--s3); }
body[data-tone="corp"] .card__ico .ico--lg { width: 22px; height: 22px; }
/* カードは 面では なく 罫で 立てる。.stat と 同じ「左の 2px」に そろえた */
body[data-tone="corp"] .card {
  border-left: 2px solid var(--accent);
  box-shadow: none;
}
/* 節の 印（.sec__ico）も 丸から 角に する。価格の 1 枚で 法人（角）と 個人（丸）が
   並ぶので、切り替わりが ここで いちばん はっきり 出る。 */
body[data-tone="corp"] .sec__ico,
.sec[data-tone="corp"] .sec__ico { border-radius: var(--r2); }

/* 動きを 出さない ── 持ち上げ・浮きは 個人側の 語彙に する */
body[data-tone="corp"] .btn:hover { transform: none; }
body[data-tone="corp"] .pick__card:hover { transform: none; box-shadow: none; border-color: var(--cta); }

/* ---------- 個人 ＝ ポップ ----------
   個人向けのコーラルを本文アクセントに使い、主CTAのブランドブルーとは役割を分ける。
   地の色（--paper）は変えない ＝ 同じサイトに見えるための錨。 */
body[data-tone="pop"] :is(.hero, .sec, .cta, .bar),
.sec[data-tone="pop"] {
  --accent:     #d95f2b;
  --accent-ink: #b64a1c;
  --accent-bg:  #fdf1ea;
  --line:       #ece5de;
  --line-2:     #d8cec4;
  --r1: 6px; --r2: 12px; --r3: 18px;
  --shadow-1: 0 2px 8px rgba(155,84,40,.07);
  --shadow-2: 0 14px 32px rgba(155,84,40,.16);
  --sec: clamp(64px, 8vw, 112px);    /* 少し 詰めて リズムを 出す */
}
/* 見出しは 大きく。行間と 字間を 詰めて 塊に する */
body[data-tone="pop"] :is(.hero, .sec, .cta) h1,
.sec[data-tone="pop"] h1 { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.35; letter-spacing: .01em; }
body[data-tone="pop"] :is(.hero, .sec, .cta) h2,
.sec[data-tone="pop"] h2 { font-size: clamp(23px, 3vw, 34px); line-height: 1.38; letter-spacing: .01em; }
body[data-tone="pop"] .pick__lead { font-size: 23px; }

/* ---------- 無料講座 ＝ 気軽さ ----------
   スタイルガイド 06 の 定義に 合わせる（ティール #267064 / 角10px / 影なし）。
   角は 中間、影は 置かない。構えさせない ための 軽さを 面で 出す。 */
body[data-tone="free"] :is(.hero, .sec, .cta, .bar),
.sec[data-tone="free"] {
  --accent:     #267064;
  --accent-ink: #1d574e;
  --accent-bg:  #eaf3f1;
  --r1: 4px; --r2: 8px; --r3: 10px;
  --shadow-1: none;
  --shadow-2: none;
}

/* ---------- スキルアップ ＝ 専門性 ----------
   スタイルガイド 06 の 定義に 合わせる（パープル #76549f / 角10px / 細い影）。 */
body[data-tone="skill"] :is(.hero, .sec, .cta, .bar),
.sec[data-tone="skill"] {
  --accent:     #76549f;
  --accent-ink: #68458f;
  --accent-bg:  #f3eef8;
  --r1: 4px; --r2: 8px; --r3: 10px;
  --shadow-1: 0 1px 3px rgba(60,40,90,.08);
  --shadow-2: 0 6px 18px rgba(60,40,90,.10);
}

/* 🔴 タブで行き来する画面群（フロー・価格の4枚組）は 見出しの 大きさを 揃える。
   トーンで 42px ↔ 48px と 変わると、タブを 押すたびに 別の 階層へ 来たように 見える。
   トーンは 面・角丸・影・印で 出す（大きさでは 出さない）。 */
body:has(.flow-tabs) :is(.hero, .sec, .cta) h1,
body:has(.price-tabs) :is(.hero, .sec, .cta) h1 { font-size: clamp(26px, 4.4vw, 42px); line-height: 1.4; letter-spacing: .03em; }
body:has(.flow-tabs) :is(.hero, .sec, .cta) h2,
body:has(.price-tabs) :is(.hero, .sec, .cta) h2 { font-size: clamp(21px, 2.6vw, 30px); line-height: 1.4; letter-spacing: .03em; }


/* ヒーローを 白から 暖色の 面に する（面の 塗り分けを 増やす）*/

/* カードは 浮かせる。ホバーで もう 一段 持ち上がる */
body[data-tone="pop"] .card { box-shadow: var(--shadow-1); border-color: transparent; transition: .18s ease; }
body[data-tone="pop"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
body[data-tone="pop"] .pick__card:hover { transform: translateY(-4px); }
body[data-tone="pop"] .btn:hover { transform: translateY(-2px); }

/* 無効状態はCTA帯や対象別トーンより優先し、hoverでも色と位置を変えない。 */
:is(.cta, body[data-tone]) .btn:disabled,
:is(.cta, body[data-tone]) .btn:disabled:hover {
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border-color: var(--ink-3);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}

/* 印は 丸い 面に 載せる ── いちばん 効く ポップの 合図 */
body[data-tone="pop"] .card__ico,
body[data-tone="pop"] .pick__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r4);
  background: var(--accent); color: var(--ink-rev);
}
.sec[data-tone="pop"] .sec__ico,
body[data-tone="pop"] .sec__ico { background: var(--accent); color: var(--ink-rev); }

/* 手順の 番号も 丸い 札に する */
body[data-tone="pop"] .steps li { padding-left: var(--s8); }
body[data-tone="pop"] .steps li::before {
  display: grid; place-items: center;
  width: 28px; height: 28px; top: 0; border-radius: var(--r4);
  background: var(--accent); color: var(--ink-rev); font-size: 12px;
}
body[data-tone="pop"] .steps li::after { left: 14px; top: 34px; }

/* 箇条書きの 点にも 色を 入れる（markup は 足さない）*/
body[data-tone="pop"] :is(.sec, .hero) li::marker { color: var(--accent); }

/* CTA帯でも主ボタンはブランドブルーを維持し、共通の白い境界線で暖色の面と分ける。 */

/* 動きを 止めたい 人には 止める */
@media (prefers-reduced-motion: reduce) {
  body[data-tone="pop"] .card,
  body[data-tone="pop"] .pick__card,
  body[data-tone="pop"] .btn { transition: none; }
  body[data-tone="pop"] .card:hover,
  body[data-tone="pop"] .pick__card:hover,
  body[data-tone="pop"] .btn:hover { transform: none; }
}

/* =========================================================
   手順・カードの 見出しは h2 でも 大きさを 変えない
   ---------------------------------------------------------
   🔴 h1 の 次に h3 が 来ると、読み上げの 見出しジャンプが 飛ぶ。
      節が 1 つしか 無い 画面（flow-*・contact）では h2 に する。
      ただし 大きさは 階層では なく 役割で 決めるので、見た目は h3 のまま。
      トーンの h2 拡大（34px）と タブ群の 30px より 後に 置いて 上書きする。
   ========================================================= */
body :is(.hero, .sec, .cta) :is(.steps, .cards) :is(h2, h3) {
  font-size: 18px; line-height: 1.4; letter-spacing: .03em;
}


/* =========================================================
   節ごとの トーン ── 面は 白のまま、差し色で 見分ける
   ---------------------------------------------------------
   🔴 淡色を 面に 敷くと コントラストが 落ちて 濁る。
      彩度の ある 色を「短い 罫」「小見出し」「箇条書きの 印」の
      3 か所にだけ 置き、地は 白で 通す。
   ========================================================= */
.sec[data-tone] .sec__eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--accent-ink);
}
.sec[data-tone] .sec__eyebrow::before {
  content: ""; flex: none;
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--accent);
}
.sec[data-tone] :is(ul, ol) li::marker { color: var(--accent); }
/* 白が 続くので、節の 変わり目に 髪の毛ほどの 罫を 入れる */
.sec[data-tone] + .sec[data-tone] { border-top: 1px solid var(--line); }