/* ============ DESIGN TOKENS ============ */
:root {
  /* 紙面（スペックシート）カラー */
  --paper: #f4f2ed;      /* 基本地 */
  --paper-2: #eae7e0;    /* 交互セクション地 */
  --ink: #1a1a18;        /* 見出し・強罫線 */
  --ink-2: #2e2d29;      /* 本文（濃） */
  --ink-3: #4a4842;      /* 本文（標準） */
  --ink-4: #6b6a64;      /* 補足 */
  --ink-5: #8a887e;      /* 装飾モノラベル（実文には使わない） */
  --line: #d8d5cc;       /* 細罫線 */
  --line-2: #cfccc4;     /* 図版枠 */
  --line-3: #c9c5bb;     /* 交互セクション用罫線 */
  --red: #bf3a22;        /* 朱（アクセント） */
  --red-2: #e0704f;      /* 朱（ダーク面用） */
  --red-tint: rgba(191, 58, 34, 0.045);
  /* 図版プレースホルダー */
  --ph: #e6e3db;
  --ph-2: #ded9d0;
  --hatch: repeating-linear-gradient(135deg, rgba(26, 26, 24, 0.055) 0 1px, transparent 1px 7px);
  /* 書体 */
  --serif: "Shippori Mincho B1", serif;
  --sans: "Zen Kaku Gothic New", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  /* 寸法 */
  --pad-x: clamp(16px, 5vw, 80px);
  --sec-pad-y: clamp(80px, 11vw, 168px);
  --rail-w: clamp(40px, 6vw, 92px);
  --rail-gap: clamp(14px, 3.5vw, 48px);
  /* stickyヘッダーの実測高さ。main.js が更新する（JS無効時はこの既定値） */
  --header-h: 61px;
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 61px) + 12px); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }
::selection { background: var(--red); color: var(--paper); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============ 共通パーツ ============ */
/* モノスペースの小ラベル系はコンポーネント側で font-family: var(--mono) を指定する */

/* 節見出し（§番号 + ラベル + 罫線） */
.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sec-head__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.sec-head__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-5);
}
.sec-head__rule { height: 1px; flex: 1; background: var(--line); }

/* 図版枠（実写真をはめる。プレースホルダー時は hatch 地） */
.fig-frame {
  position: relative;
  background-color: var(--ph);
  background-image: var(--hatch);
  border: 1px solid var(--line-2);
}
.fig-frame--45 { aspect-ratio: 4 / 5; }
.fig-frame--sq { aspect-ratio: 1 / 1; }
.fig-frame--alt { background-color: var(--ph-2); border-color: var(--line-3); }
.fig-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 撮影トンボ（4隅の朱コーナーマーク） */
.fig-marks { position: absolute; inset: 0; pointer-events: none; }
/* ページ唯一の実写。線画＋生成りの紙面から浮かないよう、
   彩度をわずかに落として暖色へ寄せる（顔色が不自然にならない範囲） */
.founder__photo {
  filter: saturate(0.72) sepia(0.14) contrast(0.96) brightness(1.02);
}
/* モノスペースの図版キャプション（実写を「資料写真」として扱う） */
.fig-cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  line-height: 2;
}
.fig-frame--marks::before,
.fig-frame--marks::after,
.fig-marks::before,
.fig-marks::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
}
.fig-frame--marks::before { top: -7px; left: -7px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.fig-frame--marks::after { bottom: -7px; right: -7px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }
.fig-marks::before { top: -7px; right: -7px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); }
.fig-marks::after { bottom: -7px; left: -7px; border-bottom: 2px solid var(--red); border-left: 2px solid var(--red); }
/* 透過PNGの挿絵。枠を持たず紙面に直接置く（HEROのイラストと同じ扱い） */
.art-img {
  width: 100%;
  height: auto;
  opacity: 0.92;
}
/* ============ ヘッダー ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 242, 237, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* ロゴマーク（`uploads/logo-mark.png`）。HEROの紙飛行機を極限まで単純化した幾何形で、
   機首だけが朱。**高さで揃えること**（横長なので幅指定だと文字と天地が合わない）。
   表示は20px前後だが実体は512px幅なので、Retinaでも輪郭が保たれる */
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand__mark {
  display: block;
  width: auto;
  height: clamp(17px, 2vw, 20px);
  flex-shrink: 0;
}
.brand__name {
  font-family: var(--mono);
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.site-nav > a:not(.site-nav__cta) { color: var(--ink-3); }
.site-nav > a:not(.site-nav__cta):hover { color: var(--red); }
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  transition: background 0.25s, color 0.25s;
}
.site-nav__cta:hover { background: var(--red); color: var(--paper); }
.site-nav__cta-mark { font-size: 9px; }

/* ナビ開閉トグル。狭い幅かつJS有効時のみ現れる */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* 狭い幅：ナビは折り返して3行になりヘッダーがHEROを圧迫するため、
   JS有効時はドロワー化してヘッダーを1行に保つ（JS無効時は折り返し表示のまま） */
@media (max-width: 720px) {
  html.js .nav-toggle { display: flex; }
  html.js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--pad-x) 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgba(26, 26, 24, 0.35);
  }
  html.js .site-nav.is-open { display: flex; }
  html.js .site-nav > a:not(.site-nav__cta) {
    padding: 13px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  html.js .site-nav__cta { margin-top: 14px; justify-content: center; padding: 12px 16px; }
  .site-header { position: sticky; }
  .site-header__inner { flex-wrap: nowrap; position: relative; }
}

/* ============ HERO ============ */
/* 1画面（100svh−ヘッダー）に収める。背景は画像を使わずCSSのみ:
   左上からの採光 + 右下の陰 + 作図面の方眼を重ねて紙の質感を出す */
.hero {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 95% at 10% -12%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(95% 75% at 102% 104%, rgba(206, 197, 180, 0.34) 0%, rgba(206, 197, 180, 0) 62%),
    repeating-linear-gradient(0deg, rgba(26, 26, 24, 0.042) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(26, 26, 24, 0.042) 0 1px, transparent 1px 34px);
}
.hero__frame {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vh, 32px) var(--pad-x) clamp(18px, 3vh, 36px);
}
.hero .sec-head { margin-bottom: clamp(22px, 3.2vh, 44px); }
/* §00 のラベルは日本語なので、他セクションの縦書きレール（例: わたしたちの原点 §01）と同じ明朝に揃える。
   ラベル＝明朝、番号＝mono・朱。**幅で書体を切り替えないこと**（PCだけmonoに戻すと同じ文言が幅で化ける）。
   §10 CONTACT はラベルがラテン文字なので mono のまま据え置く。
   明朝はmonoより字幅が広く、折り返すと§番号・罫線とのリズムが崩れる。
   ラベルの文言を変えたら 360px 幅で1行に収まるか必ず実測すること */
.hero .sec-head__num { font-size: 10px; letter-spacing: 0.14em; }
.hero .sec-head__label {
  font-family: var(--serif);
  font-size: clamp(11px, 3.1vw, 12px);  /* 固定12pxだと360px幅で折り返すため可変にする */
  letter-spacing: 0.28em;
  color: var(--ink);
}

/* 最初のA案レイアウト：左＝見出し〜CTA、右＝図版＋運営者情報 の2カラム */
.hero__cols {
  display: flex;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: center;
}
.hero__main { flex: 1 1 460px; min-width: min(100%, 300px); }
.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(36px, 6.6vw, 88px);
  line-height: 1.48;
  letter-spacing: 0.005em;
}
.hero__side {
  flex: 0 1 560px;
  min-width: min(100%, 260px);
}
/* イラストの高さが伸びるとHEROが1画面に収まらなくなるので上限を持たせる */
.hero__art { display: flex; justify-content: center; }
.hero__art-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(200px, 42vh, 400px);
  /* 線画は紙面に馴染ませたいので、わずかに落ち着かせる */
  opacity: 0.92;
}
/* 1280px未満では右カラムを従来幅に戻す（560pxのままだと1100〜1250px幅で
   折り返しが起き、イラストがCTA下に落ちてHEROが縦に伸びるため） */
@media (max-width: 1279px) {
  .hero__side { flex-basis: 420px; }
  .hero__art-img { max-height: clamp(180px, 30vh, 320px); }
}
/* スマホ横向き〜小型タブレット（641〜959px）では折り返しを禁止して縮小で耐える。
   wrapのままだと flex-basis 合計（460+420+gap）が幅を超えた時点でイラストが
   CTA下に落ちるため、常に見出しの右側に置く（ユーザー指示 2026-07-31） */
@media (max-width: 959px) {
  .hero__cols { flex-wrap: nowrap; }
  .hero__main { flex: 1 1 auto; }
  .hero__side { flex: 0 1 clamp(200px, 32vw, 300px); min-width: 0; }
  .hero__art-img { max-height: clamp(150px, 40vh, 280px); }
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__line-in { display: inline-block; }
/* 見出しの朱は意味を持つ語だけに乗せる。助詞や句読点まで赤くすると
   面積が増えてCTA・イラストの朱と競合するため、「楽しく」「自由」に限定 */
.hero__em { color: var(--red); }
/* 句読点は本文と同じ墨色（朱を語だけに限定するため） */
.hero__punct { color: var(--ink); }

.hero__key {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 4.2vh, 44px);
}
.hero__key-rule {
  width: clamp(32px, 6vw, 64px);
  height: 1px;
  background: var(--red);
  transform-origin: left center;
}
.hero__key-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--red);
}
.hero__lead {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vw, 25px);
  line-height: 1.7;
  color: var(--ink);
}
.hero__desc {
  margin-top: 14px;
  max-width: 40em;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2;
  color: var(--ink-3);
}
.hero__stats {
  margin-top: clamp(28px, 4.5vh, 56px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
}
.hero__stat {
  flex: 1 1 220px;
  padding: 16px 24px 14px 0;
  border-right: 1px solid var(--line);
}
.hero__stat + .hero__stat { padding-left: 24px; }
.hero__stat:last-child { border-right: 0; padding-right: 0; }
.hero__stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-5);
}
.hero__stat-num {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.8vw, 40px);
  line-height: 1.2;
}
.hero__stat-num .em { color: var(--red); font-variant-numeric: tabular-nums; }
.hero__stat-note {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-4);
}

/* ============ ドキュメントセクション共通（縦書きレール付き） ============ */
.doc-sec--bordered { border-top: 1px solid var(--line); }
.doc-sec--alt { background: var(--paper-2); }
.doc-sec__inner {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--rail-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sec-pad-y) var(--pad-x);
}
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rail__label {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.34em;
  white-space: nowrap;
}
.rail__rule { width: 1px; flex: 1; min-height: 60px; background: var(--line-2); }
.doc-sec--alt .rail__rule { background: var(--line-3); }
.rail__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--red);
  writing-mode: vertical-rl;
}
.doc-sec__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 52px);
  line-height: 1.44;
  letter-spacing: 0.01em;
  max-width: 24em;
}
.doc-sec__lead {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 44em;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2.2;
  color: var(--ink-3);
}

/* ============ 01 VISION ============ */
.vision__title { max-width: 22em; }
/* COST §04 と同じ組み方：見出し＋リード ｜ 右に図版、その下に罫線を挟んで本文。
   図版は縦位置なので、幅ではなく **高さ** で頭を押さえること（幅で決めると縦に伸びて見出しより背が高くなる） */
.vision__head {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
  align-items: center;
}
.vision__head-main { flex: 1 1 420px; min-width: min(100%, 300px); }
/* figure の幅は中身の max-content で決まるため、縮められるようにしておかないと
   360px 幅で画面からはみ出す（`flex: 0 0 auto` + min-width auto だと横スクロールが出る） */
.vision__fig { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
.vision__fig .art-img {
  width: auto;
  max-height: clamp(240px, 26vw, 320px);  /* 下限を切ると縦積みのスマホで極端に小さくなる */
  max-width: 100%;
}

/* --- 画面にコードが書かれていく表現 ---
   `vision-code.png` はモニターの画面が意図的に「空」のイラスト。その画面の内側に
   コード行を重ねて、1行ずつ引かれていく動きを付ける。GIF・動画にしないのは拡大で崩れず
   容量も増えないため。
   数値は切り抜き後の 1200x769 の実測値（画面の内側 = 左252px/上17px/右1009px/下443px）。
   **イラストを差し替えたら必ず測り直すこと。ずれると画面の外に線が出る** */
.code-anim { position: relative; display: inline-block; max-width: 100%; }
/* コード行はイラストの **下** に敷く。画面部分は切り抜きで透過しているので線が透けて見え、
   人物の頭や画面の枠には自然に隠れる。上に重ねると頭の上に線が乗ってしまう */
.code-anim .art-img { display: block; position: relative; z-index: 1; }
.code-anim__screen {
  position: absolute;
  z-index: 0;
  left: 21%;
  top: 2.2%;
  width: 63.1%;
  height: 55.4%;
  padding: 6% 5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4.4%;
  overflow: hidden;
}
.code-anim__line {
  height: 3.2%;
  min-height: 2px;
  flex: 0 0 auto;
  background: var(--ink-4);
  opacity: 0.34;
  transform-origin: left center;
}
.code-anim__line--1 { width: 62%; }
.code-anim__line--2 { width: 46%; margin-left: 8%; }
.code-anim__line--3 { width: 70%; margin-left: 8%; }
.code-anim__line--4 { width: 38%; margin-left: 16%; }
.code-anim__line--5 { width: 58%; margin-left: 16%; }
.code-anim__line--6 { width: 30%; margin-left: 8%; }
.code-anim__line--7 { width: 66%; }
.code-anim__line--8 { width: 44%; }
/* 書き終わりに朱のボタンが出る＝「動く画面ができた」。朱アクセントはここ1点だけ。
   人物の頭が画面の左下に重なるので、隠れないよう右寄せにする */
.code-anim__run {
  width: 24%;
  height: 6.4%;
  min-height: 4px;
  flex: 0 0 auto;
  align-self: flex-end;
  margin-top: 4%;
  background: var(--red);
  opacity: 0.88;
}

/* 初期状態はJSが `is-armed` を付けたときだけ。JS無効・reduced-motion では
   「書き終わった画面」がそのまま静止画として成立する */
.code-anim.is-armed .code-anim__line { transform: scaleX(0); }
.code-anim.is-armed .code-anim__run { opacity: 0; transform: translateY(5px); }

.code-anim.is-typing .code-anim__line {
  animation-name: code-type;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: forwards;
}
/* animation-delay は行クラス側に置く（is-typing 側で shorthand を使うと delay が潰れる） */
.code-anim__line--1 { animation-delay: 0.05s; }
.code-anim__line--2 { animation-delay: 0.28s; }
.code-anim__line--3 { animation-delay: 0.51s; }
.code-anim__line--4 { animation-delay: 0.74s; }
.code-anim__line--5 { animation-delay: 0.97s; }
.code-anim__line--6 { animation-delay: 1.20s; }
.code-anim__line--7 { animation-delay: 1.43s; }
.code-anim__line--8 { animation-delay: 1.66s; }
.code-anim.is-typing .code-anim__run {
  animation-name: code-run;
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: forwards;
  animation-delay: 2.1s;
}
@keyframes code-type { to { transform: scaleX(1); } }
@keyframes code-run { to { opacity: 0.88; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .code-anim.is-armed .code-anim__line { transform: none; }
  .code-anim.is-armed .code-anim__run { opacity: 0.88; transform: none; }
  .code-anim.is-typing .code-anim__line,
  .code-anim.is-typing .code-anim__run { animation: none; }
}
/* 本文は2段組み。1段のままだと右半分が空いて紙面が中途半端に見える。
   広い幅で1段にすると1行が50字を超えて読みにくくなるので、幅を余らせるより段を割る */
.vision__text {
  margin-top: clamp(40px, 5.5vw, 72px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--ink);
  columns: 2;
  column-gap: clamp(40px, 5vw, 80px);
}
/* 段の頭を揃えるため、段落の間隔は `p + p { margin-top }` ではなく margin-bottom で取る
   （margin-top だと2段目の先頭にも余白が乗って天地がずれる） */
.vision__text p { break-inside: avoid; margin: 0 0 1.9em; }
.vision__text p:last-child { margin-bottom: 0; }
/* 2段にすると1段あたりが約26字を切って窮屈になる幅からは1段に戻す */
@media (max-width: 1080px) {
  .vision__text { columns: 1; max-width: 46em; }
}
.vision__text p {
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2.3;
  color: var(--ink-2);
}

/* ============ 02 VIBE CODING ============ */
.steps { margin-top: clamp(40px, 5.5vw, 72px); border-top: 1px solid var(--ink); }
/* auto-fit だと列数が変わるたびに「行き先のない罫線」が残る
   （1列ではカード1〜3の右に、2列では2枚目の右に浮いた縦線が出る）。
   列数を明示し、各列数ごとに右端の罫線だけを消す。
   **ベース宣言を先に、メディアクエリは必ずその後に置くこと**
   （詳細度が同じ場合は後勝ちなので、順序が逆だと上書きされない） */
/* 4列だと1セル287pxしかなく、左のラベル列(64px)+余白を引くと本文が152px＝1行11字まで潰れ、
   見出しも「直したい所を伝／える」のように途中で折り返していた。
   §05のPHASEカードと同じ「左＝ラベル／右＝本文」の組み方は保ったまま、**2列**にして本文幅を確保する */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.steps__cell:nth-child(2n) { border-right: 0; }
/* 講座内容§05のPHASEカード（.phases__row / .phases__lead / .phases__main）と
   同じ「左＝ラベル+アイコンの固定列／右＝タイトル・本文」の組み方に統一
   （2026-08-01、ユーザー指示。以前は幅ごとにセルの中身が縦積み⇔横並びで
   切り替わる作りで、メディアクエリの順序バグも誘発しやすかったため、
   全幅で同じ構造にして崩れにくくした） */
.steps__cell {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  padding: 28px 26px 34px;
  border-right: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}
.steps__cell--last { border-right: 0; }
.steps__lead { flex: 0 0 64px; }
.steps__no {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
}
/* 各ステップの小さな線画。縦横比がまちまちなので高さで揃える */
.steps__icon {
  height: 52px;
  width: auto;
  margin-top: 14px;
  opacity: 0.92;
}
/* flexの折り返し判定は縮小後ではなく flex-basis の合計で行われるため、
   4列表示の狭いセル（900px前後）でも .steps__lead(64px)+gap(18px) と
   合計しても折り返さないよう、basisを小さく取って flex-grow で広げる */
.steps__main { flex: 1 1 90px; min-width: min(100%, 90px); }
.steps__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}
.steps__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .steps__grid { grid-template-columns: 1fr; }
  .steps__cell { border-right: 0; }
}
/* ============ 03 OUTPUT ============ */
.apps {
  margin-top: clamp(40px, 5.5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.apps__item {
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.5vw, 56px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  align-items: flex-start;
}
.apps__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
  flex: 0 0 auto;
  padding-top: 6px;
}
.apps__main { flex: 1 1 300px; min-width: min(100%, 240px); }
.apps__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.55;
}
.apps__text {
  margin-top: 16px;
  max-width: 38em;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-3);
}
.apps__meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.apps__meta-row { display: flex; gap: 8px; }
.apps__meta-row dt { color: var(--ink-5); }
/* 透過イラストなので枠を持たせず、紙面にそのまま置く */
.apps__shot {
  flex: 0 1 320px;
  min-width: min(100%, 240px);
}

/* ============ 04 COST ============ */
/* 見出し＋リードを左、対比イラストを右に置く2列 */
.cost-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.cost-head__main { flex: 1 1 420px; min-width: min(100%, 300px); }
.cost-head__fig {
  flex: 0 1 380px;
  min-width: min(100%, 260px);
  margin: 0;
}
.cost-table-wrap { margin-top: clamp(40px, 5.5vw, 72px); overflow-x: auto; }
.cost-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cost-table__h {
  text-align: left;
  padding: 14px 16px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cost-table__h--item {
  padding-left: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-5);
  font-weight: 400;
}
.cost-table__h--us { padding-right: 0; color: var(--red); }
.cost-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.9;
}
.cost-table__item { padding-left: 0; color: var(--ink-4); }
.cost-table__us { padding-right: 0; background: var(--red-tint); }
.cost-table__row-last td { border-bottom: 1px solid var(--ink); }

/* 狭い幅では比較表を縦積みカードに変換する。
   横スクロールだと「自分でつくる」列（結論側）が画面外に隠れてしまうため。
   列見出しを行ごとに繰り返すと6回同じ文言が並んで冗長なので（2026-08-01、
   一度「外部の場合／自分の場合」ラベルを毎行に付けたが、繰り返しがくどいとの
   指摘で撤回）、見出しは `.cost-table__legend` として表の上に一度だけ出し、
   各行は色（グレー＝外部／朱＝自分）とインデントだけで見分ける */
.cost-table__legend { display: none; }
@media (max-width: 560px) {
  .cost-table-wrap { overflow-x: visible; }
  .cost-table { min-width: 0; display: block; }
  .cost-table thead { display: none; }
  .cost-table tbody { display: block; }
  .cost-table tbody tr {
    display: block;
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--line);
  }
  .cost-table tbody tr:first-child { border-top: 1px solid var(--ink); }
  .cost-table__row-last { border-bottom: 1px solid var(--ink) !important; }
  .cost-table td { display: block; padding: 0; border: 0 !important; }
  .cost-table__item {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-5) !important;
    margin-bottom: 10px;
  }
  .cost-table__legend {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
  }
  .cost-table__legend-item {
    flex: 1;
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
    border-left: 2px solid transparent;
  }
  .cost-table__legend-item--them {
    background: var(--paper-2);
    border-left-color: var(--line-3);
    color: var(--ink-5);
  }
  .cost-table__legend-item--us {
    background: var(--red-tint);
    border-left-color: var(--red);
    color: var(--red);
  }
  /* 見出し語は`.cost-table__legend`で一度だけ示すので、行側は
     「左罫線つきの箱」の色だけで外部/自分を見分ける */
  .cost-table__them,
  .cost-table__us {
    display: block;
    font-size: 13.5px;
    line-height: 1.8;
    padding: 10px 12px !important;
    border-left: 2px solid transparent;
  }
  .cost-table__them {
    background: var(--paper-2) !important;
    border-left-color: var(--line-3);
  }
  .cost-table__us {
    background: var(--red-tint) !important;
    border-left-color: var(--red);
    margin-top: 8px;
  }
}

/* ============ 05 COURSE ============ */
.course-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.course-head__main { flex: 1 1 420px; min-width: min(100%, 300px); }
.course-head__fig {
  flex: 0 1 440px;
  min-width: min(100%, 260px);
  margin: 0;
}
.phases { margin-top: clamp(40px, 5.5vw, 72px); border-top: 1px solid var(--ink); }
.phases__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 48px);
  padding: 26px 0;
  border-bottom: 1px solid var(--line-3);
  align-items: baseline;
}
.phases__row--last { border-bottom: 1px solid var(--ink); }
/* 左柱はPHASEラベル＋小さな線画。行の baseline 揃えは
   この列の先頭行（ラベル）が基準になるので、見出しとの高さ関係は保たれる */
.phases__lead { flex: 0 0 88px; }
.phases__no {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--red);
}
.phases__icon {
  height: 52px;
  width: auto;
  margin-top: 14px;
  opacity: 0.92;
}
.phases__main { flex: 1 1 240px; min-width: min(100%, 200px); }
.phases__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.6;
}
.phases__text {
  margin-top: 12px;
  max-width: 34em;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--ink-3);
}
/* gapに地色を透かせて罫線を描いているので、列数がセル数を割り切らないと
   余った枠が灰色の穴として残る。auto-fitをやめ、割り切れる列数だけを使う */
.specs {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-3);
  border: 1px solid var(--line-3);
}
@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
}
.specs__cell { background: var(--paper-2); padding: 22px 24px 26px; }
.specs__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-5);
}
.specs__value { margin-top: 12px; font-size: 14.5px; line-height: 1.9; }

/* ============ 06 つながる場 ============ */
/* 見出し＋リード｜右にイラストの2列は §01/§04/§05/§07 と同型（.course-headを踏襲） */
.community-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.community-head__main { flex: 1 1 420px; min-width: min(100%, 300px); }
.community-head__fig {
  flex: 0 1 440px;
  min-width: min(100%, 260px);
  margin: 0;
}
/* .specsと同じ思想: grid gapに地色(--line-3)を透かせて罫線を表現する。
   3項目固定のため repeat(3, 1fr) で割り切れる列数のみを使う */
.community-facts {
  margin-top: clamp(40px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-3);
  border: 1px solid var(--line-3);
}
@media (max-width: 900px) {
  .community-facts { grid-template-columns: 1fr; }
}
.community-facts__cell { background: var(--paper-2); padding: 22px 24px 26px; }
.community-facts__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-5);
}
.community-facts__value { margin-top: 12px; font-size: 14.5px; line-height: 1.9; }

/* ============ 07 受講者の声 ============ */
/* 見出し＋リード｜右にイラストの2列は §01/§04/§05 と同型（.course-headを踏襲）。
   ただしイラストは他の head 系より一段大きくして§07の顔にしている（flex-basisのみ440→520） */
.voices-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.voices-head__main { flex: 1 1 420px; min-width: min(100%, 300px); }
.voices-head__fig {
  flex: 0 1 380px;
  min-width: min(100%, 260px);
  margin: 0;
}
/* voices-illustration.pngは他の見出し図版（cost/course）より正方形に近い比率なので、
   幅だけ揃えても縦に大きく見える。width: auto にして高さ基準で縮小し、
   比率を保ったまま縦も抑える（.vision__fig .art-img と同じ手法） */
.voices-head__fig .art-img { width: auto; max-height: clamp(200px, 22vw, 280px); max-width: 100%; }
/* .specsと同じ思想: grid gapに地色(--line-3)を透かせて罫線を表現する。
   3件固定のため repeat(3, 1fr) で割り切れる列数のみを使う（上のコメント参照） */
.voices {
  margin-top: clamp(40px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-3);
  border: 1px solid var(--line-3);
}
@media (max-width: 900px) {
  .voices { grid-template-columns: 1fr; }
}
.voices__item {
  background: var(--paper-2);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.6vw, 28px);
}
.voices__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.voices__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.voices__score { color: var(--red); }
.voices__score strong { font-size: 13px; margin: 0 0.1em; }
.voices__text {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-3);
}

/* ============ 08 FAQ ============ */
.faq {
  margin-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--ink);
  max-width: 56em;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item--last { border-bottom: 1px solid var(--ink); }
.faq__q {
  display: flex;
  gap: clamp(14px, 2.5vw, 28px);
  align-items: baseline;
  padding: 24px 0;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.8;
  font-weight: 500;
}
.faq__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--red);
  flex: 0 0 auto;
}
.faq__q-text { flex: 1; }
.faq__mark {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-5);
  flex: 0 0 auto;
}
.faq__mark::before { content: "＋"; }
.faq__item[open] .faq__mark::before { content: "－"; }
.faq__a {
  padding: 0 0 26px clamp(28px, 4.5vw, 56px);
  max-width: 44em;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-3);
}

/* ============ 09 FOUNDER ============ */
/* 名前・肩書き（左）＋小さい写真（右）の2列見出しを上に置き、本文は下にフル幅で続ける
   （2026-08-01、以前の「大きい写真＋テキスト」2カラムから変更） */
.founder__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 30em;
}
.founder__head-text { flex: 1 1 140px; min-width: 0; }
/* 写真は旧サイズ(flex-basis 300px)の約1/3。トリミング用の飾り枠（fig-marks）・
   キャプションは小サイズだと相対的に大きく浮くため付けない（プレーンな fig-frame のみ） */
.founder__fig { flex: 0 0 100px; min-width: 72px; margin: 0; }
.founder__main { margin-top: clamp(24px, 3vw, 32px); }
.founder__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.founder__name {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.4;
}
.founder__sub {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  line-height: 2;
}
.founder__rule { height: 1px; background: var(--line-3); margin: 28px 0; }
/* 左＝本文／右＝運営情報の2列。1列だと本文の右に紙面の半分が空いたままになる */
.founder__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  align-items: flex-start;
}
.founder__prose { flex: 1 1 420px; min-width: min(100%, 300px); }
.founder__text {
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2.25;
  color: var(--ink-2);
}
.founder__text--follow { margin-top: 1.7em; }
.founder__facts {
  flex: 0 1 380px;
  min-width: min(100%, 260px);
  display: grid;
  gap: 1px;
  background: var(--line-3);
  border: 1px solid var(--line-3);
}
.founder__fact {
  background: var(--paper-2);
  display: flex;
  gap: 20px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.9;
}
.founder__fact dt {
  flex: 0 0 84px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-5);
  padding-top: 4px;
}

/* ============ 10 CONTACT ============ */
.contact { border-top: 1px solid var(--ink); background: var(--paper); }
.contact__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sec-pad-y) var(--pad-x);
}
.sec-head--contact { margin-bottom: clamp(36px, 5vw, 64px); }
.contact__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 80px);
  align-items: flex-end;
}
.contact__main { flex: 1 1 420px; min-width: min(100%, 280px); }
/* イラストは見出しの横ではなく **CTAと同じ右カラム** に置く（2026-08-03）。
   見出し側に置くと、左カラムの右端＝紙面の中央あたりに絵だけが浮いて、
   見出しにもボタンにも揃わない宙ぶらりんの位置になっていた。
   右カラムに移すと 挿絵→ボタン→注記 が1本の縦の塊になる */
.contact__fig {
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  max-width: 190px;
}
.contact__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.4;
}
.contact__desc {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 40em;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2.2;
  color: var(--ink-3);
}
.contact__alt {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-4);
}
.contact__alt a {
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-3);
  transition: border-color 0.25s, color 0.25s;
}
.contact__alt a:hover { color: var(--red); border-color: var(--red); }
.contact__side { flex: 0 1 340px; min-width: min(100%, 260px); }
/* スマホ用の追従CTA。HEROにボタンが無く、ヘッダーのCTAもドロワーの中に隠れるため、
   スマホでは最下部のCONTACTまでスクロールしないと導線が一切見えない状態だった。
   641px以上はヘッダーのCTAが常時見えているので出さない。
   表示の出し分けはJSが担うので `html.js` スコープに置く（JS無効時は出ない） */
.cta-float { display: none; }
/* 幅いっぱいの帯ではなく **右下の小さなボタン**。帯は本文の上に厚く乗って読書の邪魔になるため。
   角丸は使わない（LPの他のボタンが全て角のある矩形なので揃える） */
@media (max-width: 640px) {
  html.js .cta-float {
    display: block;
    position: fixed;
    left: auto;
    right: 16px;
    /* iPhoneのホームバーに潜り込まないよう safe-area を足す */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.3s cubic-bezier(.22, .61, .36, 1);
  }
  html.js .cta-float.is-visible { transform: translateY(0); }
  .cta-float__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: var(--paper);
    /* 縦paddingは13px。12pxだと高さ43pxでタップ目標の推奨44pxをわずかに下回る */
    padding: 13px 16px;
    font-size: 13px;
    letter-spacing: 0.06em;
    font-weight: 500;
    /* 紙面から浮かせて本文と区別する。影はここだけの例外 */
    box-shadow: 0 10px 24px -10px rgba(26, 26, 24, 0.55);
  }
  .cta-float__mark { font-family: var(--mono); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cta-float { transition: none; }
}

.contact__cta {
  display: flex;
  align-items: center;
  /* space-between だと文字が左端・▶が右端に張り付いて中央に見えない */
  justify-content: center;
  gap: 14px;
  background: var(--red);
  color: var(--paper);
  padding: 26px 30px;
  font-size: clamp(15px, 1.8vw, 17px);
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: background 0.25s;
}
.contact__cta:hover { background: var(--ink); color: var(--paper); }
.contact__cta-mark { font-family: var(--mono); font-size: 11px; }
.contact__note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  line-height: 2.1;
}

/* ============ フッター ============ */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.site-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px var(--pad-x) 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
}
.site-footer__name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.site-footer__tagline {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
}
.site-footer__legal {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  line-height: 2.2;
  text-align: right;
}

/* ============ モバイル調整 ============ */
@media (max-width: 560px) {
  .doc-sec__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
  }
  .rail__label { writing-mode: horizontal-tb; letter-spacing: 0.28em; }
  .rail__rule { width: auto; height: 1px; flex: 1; min-height: 0; }
  .rail__num { writing-mode: horizontal-tb; }
  /* 実績バー（.hero__stat*）・.hero__key の余白指定は @media (max-width: 640px) 側に一本化した
     （640pxブロックが後勝ちするため、ここに書いても常に上書きされ死んだルールになる） */
  .hero__frame { padding-top: 14px; padding-bottom: 16px; }
  .hero__lead { margin-top: 10px; font-size: 18px; line-height: 1.6; }
  .hero__desc { margin-top: 10px; font-size: 13.5px; line-height: 1.85; }
  .hero__stats { margin-top: 18px; }
  .hero .sec-head { margin-bottom: 28px; }
  .site-footer__legal { text-align: left; }
  /* スペック表は1列だと縦に間延びするため2列に。長いSTACKだけ全幅 */
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs__cell { padding: 14px 14px 16px; }
  /* セルが奇数個のときだけ最後を全幅に（偶数なら穴ができないので不要） */
  .specs__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .specs__value { margin-top: 8px; font-size: 13.5px; }
  /* イラストと2列で並ぶため、フルサイズ(clamp 28-60px)だと列幅が足りず
     細かく折り返す。列幅に合わせて縮める */
  .contact__title { font-size: clamp(18px, 6vw, 24px); }
  .contact__fig { flex-basis: 76px; }
  /* 写真と2列で並ぶため列幅が狭く、フルサイズだと「業経営者」等が3行目にあふれる */
  .founder__sub { font-size: 12px; letter-spacing: 0.03em; }
}

/* 狭い幅：HEROは1画面フィットをやめ、密度を上げた「仕様書の1枚目」として組み直す。
   **必ずファイル末尾（上の 560px ブロックより後ろ）に置くこと。**
   メディアクエリは詳細度を上げないので、560px ブロックより前に書くと
   そこで再指定されている .hero__key / .hero__lead / .hero__desc の
   margin-top に負け、auto が効かず余白の詰まり方が崩れる。
   560pxより広いブレークポイントを後ろに置く形になるが、これは意図的。 */
@media (max-width: 640px) {
  /* 2026-08-01、CTAボタン撤去などで分量が変わったため1画面フィットに戻した
     （ユーザー指示）。base の .hero__frame（100svh centered）をそのまま使う */
  /* 2カラムのラッパーを外し、見出し〜CTA・イラスト・実績表を .hero__frame 直下の
     flexアイテムとして縦に並べる */
  /* .hero__frame の justify-content: center で見出しブロック全体を上下中央に置くため、
     .hero__main の開始位置は内容量によって変わる（固定オフセットではない）。
     以前は .hero__cols を display: contents にして .hero__side を .hero__frame 基準の
     絶対配置（top: 48px 固定）にしていたが、中央寄せに変えた際に基準がズレて
     イラストが見出しより上に浮いてしまった（2026-08-01、ユーザー指摘）。
     .hero__cols 自体を position: relative の実体ボックスとして残し、.hero__side を
     その中で絶対配置にすることで、見出しの開始位置が動いても常に追従するようにする */
  /* base の .hero__cols は display: flex（横並び用）のまま。position だけ足すと
     .hero__main が行方向のflexアイテムとして扱われ、flex-basis:auto（max-content）で
     縮小できず横にあふれる（2026-08-01、実際に説明文が画面外に溢れる形で発覚）。
     ここでは横並びは不要なので display: block にして通常のブロック幅（100%）で流す */
  .hero__cols { display: block; position: relative; }
  .hero__main { display: flex; flex-direction: column; }
  /* 余白は固定値で詰める。auto や vh で配ると縦の長い端末で間延びする */
  .hero__title { line-height: 1.4; }
  .hero__key { margin-top: 44px; }
  .hero__lead { margin-top: 10px; line-height: 1.7; }  /* KEY MESSAGE はラベルなので密着させる */
  .hero__desc { margin-top: 14px; line-height: 1.95; }
  /* 節見出しの書体・色はHEROの基本スタイルで全幅共通にした（幅で切り替えない）ため、ここでの上書きは不要 */

  /* イラストは見出し「デジタルを、もっと楽しく、」の右横の空きに絶対配置で置く
     （.hero__cols が position: relative）。実績表の下に全幅で置く旧案から変更 */
  .hero__side {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    /* 実効幅はこの min-width の 260px（33%はそれ未満のため）。
       959pxブロックの min-width: 0 に負けないようここで再指定する */
    min-width: min(100%, 260px);
    margin-top: 0;
    /* 見出し・リードの文字を優先し、図版は紙面の背面に敷く
       （.hero__frame が z-index:1 の stacking context なので背景より手前には残る） */
    z-index: -1;
  }
  .hero__art { display: flex; justify-content: center; }
  /* HEROの図版は静止画。以前あったスクロール連動（Scroll-driven Animations）は
     ユーザー判断で撤去した。動きを足すなら §01 のコードアニメと二重にならないか先に確認すること */
  .hero__art-img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 実績バーは3列タイルで試したが、「非エンジニア向け」等の折り返し対応に追われて
     窮屈になったため、ユーザー判断で縦積み（1項目=1行、ラベル左・数値右）に戻した
     （2026-08-01）。数値主役のトーンは維持しつつ、幅の制約から解放する */
  .hero__stats {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ink);
  }
  /* align-items: baseline→centerに変えても行が異常に高くなる症状が実機（iPhone Safari /
     モバイルChrome）で解消しなかった（2026-08-01）。揃え方ではなく、明朝Webフォント
     （Shippori Mincho B1）の行ボックス自体がSafari系ブラウザで想定よりかなり大きく
     計算される既知の類の問題と判断し、行の高さをフォントメトリクスに委ねず
     固定pxで強制する形にした。overflow: hidden で万一のはみ出しも吸収する */
  .hero__stat {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 46px;
    padding: 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  /* base（PC横並び用）の .hero__stat + .hero__stat { padding-left: 24px } が
     縦積みでも効いてSESSIONS以外の行だけ左にずれるため、ここで打ち消す */
  .hero__stat + .hero__stat { padding-left: 0; }
  .hero__stat:last-child { border-bottom: 0; }
  /* ラベル幅を固定にする。auto幅だと行ごとに文字数が違い、残り幅で中央揃えする
     数値の位置が行ごとにバラついて見える（2026-08-01、ユーザー指摘）ため、
     幅を揃えて数値の中央位置を行間で一致させる */
  .hero__stat-label {
    flex: 0 0 92px;
    height: 26px;
    display: flex;
    align-items: center;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .hero__stat-num {
    flex: 1 1 auto;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1;
  }
  /* 補足文は行が3要素になり崩れるため出さない（560px以下と同じ扱い） */
  .hero__stat-note { display: none; }
}