:root {
  --kinari: #f4f0e6;
  --kinari-deep: #e9e1d1;
  --paper: #fbf8f0;
  --sumi: #22211d;
  --sumi-soft: #4f4c45;
  --ash: #777267;
  --line: rgba(34, 33, 29, .18);
  --line-strong: rgba(34, 33, 29, .34);
  --ai: #253f4b;
  --ai-light: #dbe3e3;
  --moss: #536354;
  --white: #fffdf8;
  --shadow: 0 18px 50px rgba(44, 39, 29, .09);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --content: 1120px;
  --measure: 34em;          /* = 34全角。ch ではなく em で持つ（和文の実効行長） */
  --section-y: clamp(64px, 6.4vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sumi);
  background:
    radial-gradient(circle at 16% 11%, rgba(255,255,255,.76), transparent 28rem),
    radial-gradient(circle at 82% 34%, rgba(37,63,75,.055), transparent 34rem),
    var(--kinari);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
  line-break: strict;             /* 小書き仮名・長音を行頭に送らない */
  overflow-wrap: anywhere;        /* 長い英数字の突き抜け防止（値側で打ち消す） */
  text-spacing-trim: trim-start;  /* 約物の過剰なアキを詰める */
  font-feature-settings: "palt" 0;/* 詰めるのは見出しだけ。本文に効かせると行長がずれる */
}

/* 孤立行対策は見出しだけでなく本文にも当てる。<summary> を落とさないこと
   （ネイティブ details は見出し扱いにならず、セレクタから漏れて2文字で折れる）。 */
h1, h2, h3, .lead, .hero-lead { text-wrap: balance; }
p, li, dd, dt, figcaption, summary, .fine, .note, .app-caption { text-wrap: pretty; }

/* 行長。注記・figcaption が独自の max-width を持って突き抜けるのを止める。 */
p, li, dd, .fine, .note, figcaption, .app-caption { max-width: var(--measure); }

/* 「1つの値」は途中で折らない。body の overflow-wrap: anywhere を明示的に打ち消す。 */
.price, .path-price, .metric strong, .num, .spec-value {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* 文節で折る。inline-block の塊は内部で折れないので、
   折返しは必ず文節境界で起きる（見出しが「見晴／らしへ。」と割れる事故を止める）。
   ⚠ 手打ちの <br> と text-wrap: balance は衝突するので、.bun を使う見出しでは balance を切る。 */
.bun { display: inline-block; }
h1:has(.bun), h2:has(.bun), h3:has(.bun) { text-wrap: wrap; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    /* 紙の粒子 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    /* 簀の目（漉き簀の縦筋）。1pxを7px間隔で、ほぼ見えない濃度で */
    repeating-linear-gradient(91deg, rgba(74,62,44,.028) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

/* ★フォーカスリングは**2色を重ねる**。1色では原理的に足りない。
   元の実装は `rgba(37,63,75,.42)` 1色で、この値は --ai (#253f4b) そのもの。
   背景が var(--ai) の `.section--ai` / `.cta-band` の上では合成後の色が背景と一致し、
   **コントラスト比 1.00 ＝ フォーカスしてもピクセル単位で何も変わらなかった**。
   そこにあるのがサイト最重要の「無料で診断をはじめる」と /contact の全入力欄。

   最初は「明るい面は墨・暗い面は生成り」と面ごとに出し分けたが、実ブラウザで測ったら
   **まだ落ちていた**:
     和紙セクションの主CTA … ボタン自身の背景が藍。墨のリングを乗せて 1.45
     藍帯のCTA            … ボタン自身の背景が生成り。白のリングを乗せて 1.00
   ＝ セクションの色とボタンの色が逆転するので、**面で分けても当たらない**。

   → 内側に生成り・外側に墨の二重リングにする。どんな背景でも必ず片方が 3:1 を超える。
   変更するときは `.hero` の主CTA と `.cta-band` の `.button--light` の**両方**で
   合成後コントラストを実測すること（片方だけ見ると必ず見落とす）。 */
:focus-visible {
  outline: 2px solid var(--sumi);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fffdf8;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: .65rem 1rem;
  background: var(--sumi);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(244,240,230,.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(calc(100% - 40px), var(--content));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* ブランドマーク。正典は tools/ogp/README.md のSVGパス（支給コンセプトシートから
   起こし、原画との一致は画素でIoU 0.9690）。CSSの近似図形で描き直さないこと
   ── 三枚の垂れ布が下で一本に収束する形（web集客からコンサルまでを一気通貫でつなぐ）
   が意匠の核で、border と ::before/::after では再現できない。 */
.brand-mark {
  width: 34px;
  height: 27px;
  flex: none;
  fill: currentColor;
  color: var(--sumi);
}
.site-footer .brand-mark { color: currentColor; }

.brand-type { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; letter-spacing: .12em; }
.brand-beta { color: var(--ai); font-size: .64rem; letter-spacing: .08em; padding-top: .2rem; }

.nav-list { display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.nav-list a { font-size: .78rem; text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--ai); }
.nav-list .nav-cta {
  padding: .62rem 1rem;
  border: 1px solid var(--ai);
  background: var(--ai);
  color: var(--white);
}
.nav-toggle { display: none; border: 0; background: transparent; padding: .5rem; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px 0; background: var(--sumi); }

main { overflow: hidden; }
.container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
.container.narrow { max-width: 820px; }
.section { padding: var(--section-y) 0; }
.section--compact { padding: calc(var(--section-y) * .72) 0; }
.section--paper { background: rgba(255,253,248,.55); border-block: 1px solid var(--line); }
.section--ai { background: var(--ai); color: var(--white); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: var(--ai);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.kicker::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; }
.section--ai .kicker { color: #d8e1df; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; font-feature-settings: "palt" 1; }
h1 { font-size: clamp(1.85rem, 8vw, 3.95rem); line-height: 1.34; letter-spacing: .012em; }
h2 { font-size: clamp(1.5rem, 6vw, 2.6rem); line-height: 1.42; letter-spacing: .018em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.5; letter-spacing: .01em; }
.lead { max-width: 50rem; color: var(--sumi-soft); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.section--ai .lead, .section--ai p { color: rgba(255,253,248,.78); }
.fine { color: var(--ash); font-size: .78rem; line-height: 1.8; }
/* 「〜です。」だけが最終行に残る孤立行を止める。文節で切ると必ず文の境界で折れる。 */
.hero-note { margin-top: 1rem; max-width: 30em; }
.quiet { color: var(--ash); }

.hero { display: grid; align-items: center; padding: clamp(52px, 6vw, 92px) 0 clamp(46px, 5vw, 76px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); align-items: center; gap: clamp(36px, 5vw, 76px); }
.hero-copy { position: relative; z-index: 2; }
.hero h1 em { color: var(--ai); font-style: normal; }
.hero-lead { max-width: 40rem; margin-bottom: 2rem; color: var(--sumi-soft); font-size: clamp(1rem, 1.45vw, 1.16rem); }
.beta-note { display: inline-block; margin-bottom: 1.5rem; padding: .24rem .7rem; border: 1px solid var(--line-strong); color: var(--sumi-soft); font-size: .72rem; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .72rem 1.25rem;
  border: 1px solid var(--sumi);
  background: transparent;
  color: var(--sumi);
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button--primary { border-color: var(--ai); background: var(--ai); color: var(--white); }
.button--light { border-color: var(--white); background: var(--white); color: var(--ai); }
.button--ghost { border-color: var(--line-strong); }
.button::after { content: "→"; font-weight: 400; }

/* ヒーローの暖簾。ロゴと同じ正典シルエット（tools/ogp/README.md のパス）を大きく描く。
   三枚の垂れが下で一本に収束する形が意匠の核なので、ヘッダーのマークと必ず同じ形にする。
   布3枚を clipPath にして内側に藍と織り目と屋号印を敷いてあるので、
   印は垂れの隙間で切れる＝本物の暖簾と同じ見え方になる。 */
.noren-visual {
  position: relative;
  display: grid;
  place-items: start center;
  padding-top: clamp(4px, 1.5vw, 22px);
}
.noren-art {
  position: relative;
  z-index: 1;
  width: min(100%, 404px);
  height: auto;
  filter: drop-shadow(0 20px 24px rgba(37,63,75,.16));
}
.noren-shadow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 74%;
  height: 40px;
  transform: translateX(-50%);
  background: rgba(37,63,75,.15);
  filter: blur(24px);
  border-radius: 50%;
}

.trust-line { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding: 1.15rem 0; border-block: 1px solid var(--line); }
.trust-line strong { font-family: var(--serif); font-weight: 500; white-space: nowrap; }
.trust-line p { margin: 0; color: var(--sumi-soft); font-size: .82rem; }

.split { display: grid; grid-template-columns: .94fr 1.06fr; gap: clamp(36px, 5.5vw, 78px); align-items: start; }
.split--center { align-items: center; }
/* 図版（実画面）を載せる列は広く取る。狭い器に入れると縮小されて判読できない。 */
.split--media { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.app-window { max-width: 640px; margin-inline: 0 0; }
.section-title { max-width: 13em; }
.rule-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rule-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.rule-list b { font-family: var(--serif); font-weight: 500; color: var(--ai); }
.rule-list strong { display: block; margin-bottom: .2rem; font-size: 1rem; }
.rule-list span { display: block; color: var(--sumi-soft); font-size: .86rem; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { min-height: 216px; padding: clamp(24px, 4vw, 46px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,253,248,.28); }
.feature-card .num { display: block; margin-bottom: 1.5rem; color: var(--ai); font-family: var(--serif); font-size: .78rem; letter-spacing: .1em; }
.feature-card p { margin-bottom: 0; color: var(--sumi-soft); font-size: .88rem; }
/* 05 は2列ぶち抜き。素直に積むと右半分が丸ごと空くので、中で横に流す。 */
.feature-card--wide {
  grid-column: span 2;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(15em, 21em) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(24px, 4vw, 56px);
}
.feature-card--wide .num { margin-bottom: 0; }
.feature-card--wide h3 { margin-bottom: 0; }
.feature-card--wide p { max-width: var(--measure); }

.app-window { position: relative; padding: 14px; border: 1px solid var(--line); background: rgba(255,253,248,.72); box-shadow: var(--shadow); }
.app-window::before { content: "実際の診断画面"; display: block; padding: 0 0 10px; color: var(--ash); font-size: .68rem; letter-spacing: .12em; }
.app-crop { overflow: hidden; background: #f3f3f5; }
.app-crop img { width: 100%; height: auto; }
.app-caption { margin: 1rem 0 0; color: var(--ash); font-size: .74rem; }

.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.path-card { padding: 2rem; background: var(--kinari); }
.path-card .num { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: 1.9rem; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--serif); }
.path-card h3 { min-height: 3.4rem; }
.path-card p { color: var(--sumi-soft); font-size: .84rem; }
.path-price { display: block; margin-top: 1.5rem; color: var(--ai); font-family: var(--serif); font-size: 1.25rem; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { counter-increment: steps; display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.steps li::before { content: "0" counter(steps); color: var(--ai); font-family: var(--serif); font-size: 1rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--sumi-soft); font-size: .88rem; }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.price-card { display: flex; flex-direction: column; padding: clamp(28px, 5vw, 52px); border: 1px solid var(--line-strong); background: rgba(255,253,248,.44); }
.price-card--main { border-top: 7px solid var(--ai); background: var(--white); box-shadow: var(--shadow); }
.price-name { margin-bottom: .5rem; color: var(--ai); font-weight: 700; font-size: .84rem; }
.price { margin-bottom: 1.4rem; font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.2; }
.price small { font-family: var(--sans); font-size: .78rem; }
.price-card ul { flex: 1; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.price-card li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.price-card li::before { content: "—"; margin-right: .6rem; color: var(--ai); }
.price-note { padding: 1.2rem 1.35rem; border-left: 3px solid var(--ai); background: var(--ai-light); font-size: .8rem; }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(255,255,255,.2); }
.metric { padding: 1.8rem; border-right: 1px solid rgba(255,255,255,.2); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; margin-bottom: .35rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.metric span { color: rgba(255,255,255,.68); font-size: .74rem; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; padding: 1.35rem 3rem 1.35rem 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.08rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .5rem; top: 1.25rem; color: var(--ai); font-family: var(--sans); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { max-width: 50rem; padding: 0 3rem 1.6rem 0; color: var(--sumi-soft); font-size: .88rem; }

.page-hero { padding: clamp(78px, 12vw, 150px) 0 clamp(58px, 9vw, 100px); border-bottom: 1px solid var(--line); }
/* ⚠ 基底の h1 とは別指定。ここを直し忘れると下層ページだけ 320px で最小43.2pxのまま
   残り、<br>で区切った9字の行が器(280px)に入らず語中で折れる（実測で発覚）。 */
.page-hero h1 { max-width: 11em; font-size: clamp(1.85rem, 7.5vw, 3.6rem); }
.page-hero .lead { max-width: 44rem; }
.breadcrumbs { margin-bottom: 2.5rem; color: var(--ash); font-size: .72rem; }
.breadcrumbs a { text-decoration: none; }

.legal { padding: clamp(64px, 9vw, 110px) 0; }
.legal h2 { margin-top: 3.8rem; font-size: 1.75rem; }
.legal h3 { margin-top: 2.4rem; font-size: 1.2rem; }
.legal p, .legal li, .legal td, .legal th { font-size: .88rem; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal table { width: 100%; border-collapse: collapse; }
.legal th, .legal td { padding: 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { width: 30%; color: var(--sumi-soft); font-weight: 700; }
.legal-callout { margin: 2rem 0; padding: 1.4rem; border: 1px solid var(--line-strong); background: rgba(255,253,248,.54); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { margin-bottom: 1.35rem; }
.field--wide { grid-column: span 2; }
.field label { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 700; }
.required { color: #8c3e32; font-size: .7rem; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(255,253,248,.62);
  padding: .85rem .95rem;
  color: var(--sumi);
}
.field textarea { min-height: 190px; resize: vertical; }
.check-field { display: flex; align-items: flex-start; gap: .7rem; font-size: .8rem; }
.check-field input { margin-top: .5rem; }
.form-status { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--ai); background: var(--ai-light); font-size: .82rem; }
.form-status[data-kind="error"] { border-left-color: #8c3e32; background: #f1ded7; }

.cta-band { padding: clamp(60px, 8vw, 94px) 0; background: var(--ai); color: var(--white); }
.cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
.cta-inner h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.cta-inner p { margin: .8rem 0 0; color: rgba(255,255,255,.72); font-size: .85rem; }

.site-footer { border-top: 1px solid var(--line); padding: 3.8rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
.footer-brand p { max-width: 24rem; margin: 1rem 0 0; color: var(--ash); font-size: .78rem; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: var(--sumi-soft); font-size: .76rem; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ash); font-size: .68rem; }

/* ★`.is-visible` を付けるのは js/noren.js の IntersectionObserver だけ。
   つまり **JSが1本落ちるとヒーローのH1からCTAまで丸ごと消えて空白になる**
   （/js/noren.js を404にして実測: index 19ブロック / features 9 / how-it-works 7 /
     pricing 5 / check 2 が非表示、残るのはヘッダーと .trust-line だけ）。
   旧サイトには `html:not(.js) .reveal{opacity:1}` というガードがあり、
   noren.css へ引き継がれていなかった＝退行。
   `<html class="no-js">` を head 先頭のインラインscriptが外すので、
   **JSが動かない／落ちた場合だけ** no-js が残って中身が見える。
   GSAP を積むと失敗の入口がもう1つ増えるので、演出を足す前にここを塞ぐ。 */
html.no-js [data-reveal] { opacity: 1; transform: none; }
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 1rem 20px 1.5rem; border-bottom: 1px solid var(--line); background: var(--kinari); }
  .site-nav.is-open { display: block; }
  .nav-list { align-items: stretch; flex-direction: column; gap: .2rem; }
  .nav-list a { display: block; padding: .7rem 0; font-size: .9rem; }
  .nav-list .nav-cta { margin-top: .5rem; text-align: center; }
  .hero-grid, .split, .cta-inner { grid-template-columns: 1fr; }
  .noren-visual { min-height: 420px; }
  .noren-frame { width: min(76vw, 360px); }
  .path-grid { grid-template-columns: 1fr; }
  .path-card h3 { min-height: 0; }
  .metric-row { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .metric:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .header-inner { width: min(calc(100% - 28px), var(--content)); min-height: 68px; }
  .container { width: min(calc(100% - 28px), var(--content)); }
  .brand-beta { display: none; }
  .hero { min-height: auto; }
  .hero-grid { gap: 20px; }
  .noren-visual { min-height: 340px; }
  .noren-frame { width: min(70vw, 300px); }
  .feature-grid, .pricing-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  /* ⚠ grid-column を戻すだけでは足りない。カード内部の
     grid-template-columns に minmax(15em,…) の下限が残っていると、
     320px幅で器より広い列を要求して横あふれする（実測で26要素）。 */
  .feature-card--wide, .field--wide { grid-column: auto; }
  .feature-card--wide { grid-template-columns: 1fr; row-gap: .9rem; align-items: start; }
  .feature-card--wide .num { margin-bottom: .6rem; }
  .feature-card { min-height: 0; }
  .footer-grid { gap: 2rem; }
  .legal th, .legal td { display: block; width: 100%; }
  .legal th { padding-bottom: 0; border-bottom: 0; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   スクロール演出まわり（js/noren-motion.js が使う）
   ★ここの指定は「演出が動いていない状態でも成立する」ことを条件にする。
     GSAP が落ちても、下のCSSだけで見た目が壊れないこと。
   ============================================================ */

/* ヘッダー: 少しスクロールしたら詰める。付け外しは ScrollTrigger（クラスだけ） */
.header-inner { transition: min-height .32s ease; }
.site-header { transition: background-color .32s ease, border-color .32s ease; }
.site-header.is-scrolled .header-inner { min-height: 60px; }
.site-header.is-scrolled { background: rgba(244,240,230,.96); border-bottom-color: var(--line-strong); }

/* 四つの軸を流す帯。
   ★JSが動かなくても「2組ぶんの静止した帯」として成立する（内容は読める）。
   ★overflow:hidden はこの要素の中だけ。ページ本体を横スクロールさせない。 */
.axis-rail {
  overflow: hidden;
  padding: clamp(18px, 3vw, 26px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* 端を地色へ溶かす。切り口が見えると「はみ出している」ように読める */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.axis-track { display: flex; width: max-content; will-change: transform; }
.axis-group { display: flex; flex-shrink: 0; }
.axis-item {
  display: inline-flex;
  align-items: baseline;
  gap: .7em;
  padding: 0 clamp(20px, 3vw, 40px);
  color: var(--sumi-soft);
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  letter-spacing: .06em;
  white-space: nowrap;
}
.axis-item .axis-en { color: var(--ai); font-size: .62em; letter-spacing: .16em; }

@media (prefers-reduced-motion: reduce) {
  .header-inner, .site-header { transition: none; }
  /* 流れないので、1組目だけを見せて静止した帯にする */
  .axis-track { width: 100%; }
  .axis-group + .axis-group { display: none; }
}

/* ============================================================
   編集レイヤー — 参考: https://www.ai-model.jp を実機で計測して型を取った
   （表現は真似ず、構造と寸法の考え方だけ持ってくる）

   実測した相手の寸法:
     地色 #F2F3F5 ／ 表示文字 **312px** ／ 1語の中で明朝とゴシックを交互に組む
     章番号 00/01/02 と走る索引バー ／ コンテナを持たずビューポート端まで使う

   こちらの翻訳:
     地色は和紙 #f4f0e6 のまま（相手の冷たいグレーは暖簾AIの世界観ではない）
     表示文字は和文なので 312px そのままだと1文字で画面が埋まる。
     **和文は 168〜232px、欧文は 200〜312px** に分け、和文＝明朝／欧文＝サンセリフで
     1語の中の対比を作る（相手が2書体でやっていることを、和欧の対比で置き換える）
   ============================================================ */

/* 端まで使う。
   ★`width: 100vw` にしない。100vw は**スクロールバーの幅を含む**ので、
     縦スクロールバーが出ている環境では常にビューポートより広くなる。
     390px幅で実測したら .display-rule が right=406px（16px はみ出し）だった。
     main{overflow:hidden} が隠すので画面では気づけず、要素の矩形を数えて初めて出た。
   ★この層の要素はすべて <main> の直下（<main> にガターは無い）なので、
     100% で端まで届く。将来コンテナの内側で使うなら、その時に負マージンを足す。 */
.bleed { width: 100%; }

/* ── 走る索引バー ─────────────────────────────
   いまページのどこを読んでいるかを、章番号と章名で常に出す。
   position: sticky なのでヘッダーの下に貼り付いて移動する。 */
/* ★position:sticky にしない。祖先の main に overflow:hidden があると sticky は無効化される
   （巨大な表示帯の横あふれを止めるために必要な指定なので、そちらは外せない）。
   sticky な .site-header の**子**にすることで、ヘッダーごと貼り付いて移動する。 */
.chapter-bar {
  display: grid;
  grid-template-columns: 2rem 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .55rem clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--sumi);
  background: var(--kinari);
  color: var(--sumi);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.chapter-bar .cb-mark { font-size: .8rem; line-height: 1; }
.chapter-bar .cb-num { font-variant-numeric: tabular-nums; }
.chapter-bar .cb-name { justify-self: end; text-align: right; }

/* ── 巨大な表示帯 ───────────────────────────────
   両端で見切れる大きさに組み、スクロールで横に流す（GSAPが担当）。
   ★JSが無くても「大きな見出しが端で切れている」だけで成立する。動かないだけ。 */
.display-band {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 3vw, 44px);
}
.display-row {
  display: flex;
  align-items: baseline;
  gap: clamp(24px, 4vw, 72px);
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.display-ja {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(74px, 17vw, 232px);
  line-height: .92;
  letter-spacing: .02em;
  color: var(--sumi);
  font-feature-settings: "palt" 1;
}
.display-en {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(64px, 15.5vw, 312px);
  line-height: .82;
  letter-spacing: -.02em;
  color: var(--sumi);
}
/* 章番号は帯の中に極小で置く（相手が 02 を語の間に落としているのと同じ役） */
.display-no {
  align-self: center;
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
/* ★.bleed の width:100% と左右マージンは**足し算**になる（100% + 32px）。
   罫はガターの内側に引くので、幅は auto に戻してマージンぶんだけ縮める。
   390px幅で right=406 になっていたのはこれ（幅は390で正しく、位置が16pxずれていた）。 */
.display-rule { width: auto; height: 1px; margin-inline: clamp(16px, 3vw, 40px); background: var(--sumi); }

/* ── 和欧の対の説明 ───────────────────────────
   小さい欧文（全大文字・字間広め）と和文を左右に並べる。 */
.cap-pair {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 40px) clamp(40px, 6vw, 88px);
}
.cap-pair .cp-no { color: var(--ash); font-size: .66rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.cap-pair .cp-en {
  color: var(--sumi-soft);
  font-size: .72rem;
  line-height: 2.05;
  letter-spacing: .1em;
  text-transform: uppercase;
  max-width: none;
}
.cap-pair .cp-ja { color: var(--sumi-soft); font-size: .84rem; line-height: 2.05; max-width: none; }

@media (max-width: 820px) {
  .cap-pair { grid-template-columns: 3rem 1fr; }
  .cap-pair .cp-ja { grid-column: 2; }
  .chapter-bar { grid-template-columns: 1.4rem auto 1fr; font-size: .56rem; }
  .chapter-bar .cb-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .display-row { transform: none !important; }
}

/* ── 写真のヒーロー ──────────────────────────────
   全幅の写真の上に見出しを置く。写真は「店の内側から見上げた暖簾」で、
   奥の通りはぼけていて何の店かは分からない ＝ **何も主張していない**。
   実績や導入企業を暗示する絵は使えない（納品実績はゼロなので）。比喩だけを持たせる。

   ★左側に濃度を寄せる。写真の左半分は実測で平均輝度41だが、
     生成画像は差し替わるので **CSSの側でも読めることを保証する**（画像頼みにしない）。 */
.hero--image {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(520px, 76vh, 760px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,22,28,.88) 0%, rgba(14,22,28,.72) 34%, rgba(14,22,28,.18) 62%, rgba(14,22,28,.05) 100%),
    linear-gradient(0deg, rgba(14,22,28,.42) 0%, transparent 38%);
}
.hero-inner { padding-bottom: clamp(48px, 7vw, 96px); padding-top: clamp(96px, 14vh, 160px); }
.hero--image .hero-copy { max-width: 40rem; color: var(--white); }
.hero--image h1 { color: var(--white); }
.hero--image h1 em { color: #cfe0e4; }
.hero--image .hero-lead { color: rgba(255,253,248,.86); }
.hero--image .kicker { color: #cfe0e4; }
.hero--image .beta-note { border-color: rgba(255,253,248,.5); color: rgba(255,253,248,.86); }
.hero--image .hero-note { color: rgba(255,253,248,.62); }
.hero--image .button--ghost { border-color: rgba(255,253,248,.62); color: var(--white); }
.hero--image .button--ghost:hover { background: rgba(255,253,248,.12); }
/* ★暗い面の上なので、フォーカスリングの内側（生成り）が効く側。2色リングのまま成立する。 */

/* 章の区切りに敷く和紙。装飾ではなく「紙に印刷された誌面」という前提を出すため。 */
.paper-band {
  height: clamp(120px, 18vh, 220px);
  background-image: url("/img/texture-washi-1600.webp?v=20260829b");
  background-size: cover;
  background-position: 50% 50%;
  border-block: 1px solid var(--line);
  filter: saturate(.55);
}

@media (max-width: 820px) {
  .hero--image { min-height: clamp(460px, 68vh, 620px); }
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(14,22,28,.5) 0%, rgba(14,22,28,.86) 48%, rgba(14,22,28,.92) 100%);
  }
  .hero-inner { padding-top: clamp(72px, 12vh, 120px); }
}

/* ============================================================
   誌面レイヤー — 雑誌の版面装置を持ち込む
   ============================================================
   参考サイトを実測して分かったのは「巨大文字」ではなく、**雑誌の骨格**を
   Webに持ち込んでいるということだった:
     ノンブル（章番号）／ランニングヘッド（索引バー）／ヘアライン罫／
     全幅ブリードの図版／非対称の見開き／小さい全大文字のキャプション

   こちらは商品がビジュアルではないので、写真は「商品説明」ではなく
   **手触りの宣言**として使う。素材（布・墨・紙・影）だけで、
   人物・文字・ロゴ・実績を想起させる物は一切写さない（納品実績ゼロのため）。

   実測した各画像の平均輝度/彩度:
     ed-cloth  167/0.144   ed-sumi 172/0.134
     ed-shoji  129/0.081   ed-layers 175/0.131
   ＝どれも明るく低彩度なので、**上に黒文字を置ける**（白文字は載らない）。
   暗い面が要るところは、画像ではなく --ai のベタで作る。
   ============================================================ */

/* ── 見開き: 図版と本文を非対称に置く ───────────────────
   誌面の見開きを1画面に落としたもの。左右の比率をわざと揃えない。 */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(28px, 5vw, 88px);
  padding-block: clamp(56px, 9vw, 132px);
}
.spread--flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.spread--flip .spread-figure { order: 2; }
.spread--flip .spread-body { order: 1; }

/* 図版は版面の外へ少しはみ出す。収まりよく置かない。 */
.spread-figure { position: relative; margin: 0; }
.spread-figure img { width: 100%; height: auto; display: block; }
.spread-figure--bleed-left { margin-left: calc(-1 * clamp(16px, 4vw, 88px)); }
.spread-figure--bleed-right { margin-right: calc(-1 * clamp(16px, 4vw, 88px)); }

/* キャプション: 小さい全大文字の欧文＋和文。図版の下に罫で吊る。 */
.fig-cap {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .9rem;
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--sumi);
  color: var(--sumi-soft);
}
.fig-cap .fc-no { font-size: .62rem; letter-spacing: .2em; color: var(--ash); font-variant-numeric: tabular-nums; }
.fig-cap .fc-en { display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.fig-cap .fc-ja { display: block; margin-top: .25rem; font-size: .74rem; line-height: 1.9; max-width: none; }

/* 本文側は上にたっぷり空ける（図版と天を揃えない＝雑誌の呼吸） */
.spread-body { padding-top: clamp(0px, 6vw, 92px); }
.spread-body .lead { max-width: 30rem; }

/* ── 全幅の図版帯。上に大きな和文見出しを黒で重ねる ───────── */
.plate {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(360px, 52vh, 560px);
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--line);
}
.plate img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* ★画像は明るい（実測 129〜175）ので、**黒文字を置くために白側へ寄せる**ベール。
   暗くして白文字、ではない。画像を差し替えても読めるようにCSS側で保証する。 */
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(244,240,230,.94) 0%, rgba(244,240,230,.82) 38%, rgba(244,240,230,.25) 78%, rgba(244,240,230,.05) 100%);
}
.plate-inner { padding-block: clamp(32px, 5vw, 64px); }
.plate h2 { margin-bottom: .6rem; }
.plate .lead { max-width: 26rem; }

/* ── ノンブル（章番号）を大きく置く ────────────────────
   参考サイトが 00/01/02 を版面のあちこちに落としているのと同じ役。 */
.nombre {
  display: block;
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 108px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .spread, .spread--flip { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
  .spread--flip .spread-figure, .spread--flip .spread-body { order: 0; }
  .spread-body { padding-top: 0; }
  .spread-figure--bleed-left, .spread-figure--bleed-right { margin-inline: calc(-1 * clamp(16px, 4vw, 20px)); }
  .plate::before {
    background: linear-gradient(180deg, rgba(244,240,230,.92) 0%, rgba(244,240,230,.86) 55%, rgba(244,240,230,.7) 100%);
  }
  .plate { min-height: clamp(300px, 44vh, 420px); }
}

/* ============================================================
   誌面レイヤー v2 — 「定規と断層」
   ============================================================
   4案を競わせて1位になった版面（77点）。既存クラスは1つも削除・改名していない。
   index.html だけがこの層を使う。他53ページは従来のまま。

   賭けていること: **破壊を装飾ではなく診断そのものにする。**
   左端に動かない定規を1本通し、他の全要素をモジュールの倍数だけズラす。
   ズレは上から下へ 4M → 3M → 2M → 1M → 0 と減衰し、CTA帯で初めて揃う。
   実績も第三者の名前も使わずに、版面が「バラバラな現在地 → ひとつの見晴らし」を実演する。

   ★寸法は 84px（1M）の倍数だけ。中間値を作らない。
   ★`100vw` は1箇所も書かない（390px幅でスクロールバー幅ぶんはみ出した事故と同型）。
   ★文字を写真の上に置かない。重ねないので、画像を差し替えるたびに可読性を
     再検証する運用負債が原理的に消える。
   ★横組みは64pxを超えない。64pxを超えてよいのは**和文の縦組みと数字だけ**。
     有償の欧文書体が無い以上、システム欧文を拡大すると字面の素性が出る。
     「大きさで殴る」役は和文の縦組みが引き受ける。
   ============================================================ */

.ed2 {
  --M: calc(100% / 18);        /* 固定pxで持たない。どの幅でもズレはモジュールの倍数 */
  --drift: 1;                  /* GSAPが 1→0 へ scrub。落ちればこの値で静止する */
  --off: 0px;
}
.ed2 .rail {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  width: 100%;
}
/* ズレを与えられる要素。**本文ブロックには付けない**（文字が動くと読めない） */
.ed2 .drift { transform: translateY(calc(var(--drift) * var(--off))); will-change: transform; }
.ed2 .off-4 { --off: calc(var(--M) * 4); }
.ed2 .off-3 { --off: calc(var(--M) * 3); }
.ed2 .off-2 { --off: calc(var(--M) * 2); }
.ed2 .off-1 { --off: calc(var(--M) * 1); }
.ed2 .off-0 { --off: 0px; }

/* ── 定規（datum rail）— 唯一動かない要素 ─────────────────
   ★地色のベタを敷く。敷かないと図版が定規の下をくぐって章番号が写真の上に乗る。
   ★position:fixed。sticky なら祖先の overflow:hidden に殺されるが、fixed は殺されない。 */
.datum {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 80;
  width: 84px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--kinari);
  border-right: 1px solid var(--line-strong);
  pointer-events: none;
}
.datum-no { font-size: 11px; letter-spacing: .22em; color: var(--ai); font-variant-numeric: tabular-nums; }
.datum-name {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .28em;
  max-height: 180px;
  overflow: hidden;
  color: var(--sumi);
}
.datum-count { font-size: 10px; letter-spacing: .16em; color: var(--ash); font-variant-numeric: tabular-nums; }

/* 定規のぶんだけ本文を右へ寄せる。ヘッダーも同じだけ寄せる。 */
.ed2 .site-header .header-inner,
.ed2 main { padding-left: 84px; }

/* ── 断層帯 ─────────────────────────────────────
   縦組みの柱が5本、天地がすべて違う。これがこの帯の主題。 */
.fault { background: var(--kinari-deep); padding-block: 84px; }
.fault-col { display: flex; flex-direction: column; align-items: center; border-left: 1px solid var(--line); padding-block: 12px; }
.fault-en { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ash); }
.fault-ja {
  writing-mode: vertical-rl;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  letter-spacing: .14em;
  color: var(--sumi);
  font-feature-settings: "palt" 1;
}
.fault-ja .tcu { text-combine-upright: all; -webkit-text-combine: horizontal; }
.fault-no { font-size: 10px; letter-spacing: .16em; color: var(--ash); font-variant-numeric: tabular-nums; }

/* ── 図版。器より高い画像を入れて overflow で切る（呼吸の余地） ── */
.ed2 figure { margin: 0; }

/* ★overflow:hidden で切らない。figure に aspect-ratio を与えたうえで overflow で切ると、
   **キャプションまで一緒に刈られる**（実際に .fig-cap が全図版で消えていた。しかも
   図版そのものは正しく出ているので、スクショを眺めても「そういう版面」に見えて気づけない）。
   行に分けて、余るぶんは object-fit:cover に食わせる。 */
.crop { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.crop > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }

/* ★右端の余白。18列目まで伸びてよいのは**図版だけ**で、文字と面は手前で止める。
   クラス名から拾うので、列の指定を足しても取りこぼさない（許可リストを手で並べると
   ブロックを増やすたびに静かに漏れる）。 */
.ed2 .rail:not(.mosaic) > *:not(figure)[class*="-18"] { margin-right: clamp(16px, 3.4vw, 60px); }
/* 図版自体は右端まで抜いてよいが、**キャプションは文字**なので同じだけ内側で止める。
   （図版を除外した規則を書くと、図版の中の文字がその除外にただ乗りして端に貼り付く） */
.ed2 .rail > figure[class*="-18"] figcaption { padding-right: clamp(16px, 3.4vw, 60px); }

/* ── 状態チップ（実装済／準備中）──────────────────────
   打消し表示は本文と同じ視野に、同じ大きさで置く。10pxに落とさない。 */
.state {
  display: inline-block;
  padding: .18em .6em;
  border: 1px solid var(--ai);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--ai);
  white-space: nowrap;
}
.section--ai .state, .cta-band .state { border-color: rgba(255,253,248,.7); color: rgba(255,253,248,.92); }

/* ── 段（spec §3 の9段。中間値を作らない）───────────────── */
.ed2 .t-en   { font-size: 10px; line-height: 2.2; letter-spacing: .26em; text-transform: uppercase; color: var(--ash); max-width: none; }
.ed2 .t-lbl  { font-size: 11px; line-height: 1.8; letter-spacing: .22em; color: var(--ai); font-variant-numeric: tabular-nums; }
.ed2 .t-body { font-size: 13.5px; line-height: 1.95; letter-spacing: .04em; color: var(--sumi-soft); max-width: 24em; }
.ed2 .t-lead { font-size: 15px; line-height: 1.95; letter-spacing: .04em; color: var(--sumi-soft); max-width: 26em; }
.ed2 h3      { font-family: var(--serif); font-size: 20px; line-height: 1.6; letter-spacing: .02em; font-weight: 500; }
.ed2 h2      { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.42; letter-spacing: .018em; font-weight: 500; }
.ed2 h1      { font-family: var(--serif); font-size: clamp(34px, 5vw, 72px); line-height: 1.28; letter-spacing: .01em; font-weight: 500; }
.ed2 .nombre { color: rgba(34,33,29,.14); }
.ed2 .price-big {
  font-family: var(--serif);
  font-size: clamp(56px, 6.6vw, 92px);
  line-height: 1.2; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* ★Yu Mincho には Windows に Demibold が無く、600 は合成太字で汚れる。
   見出しは 400/500 固定。階層は大きさと余白だけで作る。 */
.ed2 h1, .ed2 h2, .ed2 h3, .ed2 .price-big { font-weight: 500; }

@media (max-width: 900px) {
  .ed2 { --M: calc(100% / 6); }
  .datum { width: 28px; padding: 16px 0; }
  .datum-name { display: none; }
  .ed2 .site-header .header-inner, .ed2 main { padding-left: 28px; padding-right: 28px; }
  .ed2 .fault, .ed2 .mosaic, .ed2 .band-figure { margin-right: -28px; }  /* 全幅で抜く帯だけは戻す */
  .fault-ja { font-size: clamp(34px, 9vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .ed2 { --drift: 0; }
}

/* ── 列と天位置のユーティリティ ────────────────────────
   ★列は18分割の grid-column で、天位置は 84px の倍数の margin-top で持つ。
     縦を絶対配置しない（OS間の字面差や文言長で版面が割れるため）。
     min-height と padding で器を持ち、中身は流し込む。 */
.c1-1 { grid-column: 1 / 2; }
.c1-2 { grid-column: 1 / 3; }
.c1-3 { grid-column: 1 / 4; }
.c1-4 { grid-column: 1 / 5; }
.c1-5 { grid-column: 1 / 6; }
.c1-6 { grid-column: 1 / 7; }
.c1-7 { grid-column: 1 / 8; }
.c1-8 { grid-column: 1 / 9; }
.c1-9 { grid-column: 1 / 10; }
.c1-10 { grid-column: 1 / 11; }
.c1-11 { grid-column: 1 / 12; }
.c1-12 { grid-column: 1 / 13; }
.c1-13 { grid-column: 1 / 14; }
.c1-14 { grid-column: 1 / 15; }
.c1-15 { grid-column: 1 / 16; }
.c1-16 { grid-column: 1 / 17; }
.c1-17 { grid-column: 1 / 18; }
.c1-18 { grid-column: 1 / 19; }
.c2-2 { grid-column: 2 / 3; }
.c2-3 { grid-column: 2 / 4; }
.c2-4 { grid-column: 2 / 5; }
.c2-5 { grid-column: 2 / 6; }
.c2-6 { grid-column: 2 / 7; }
.c2-7 { grid-column: 2 / 8; }
.c2-8 { grid-column: 2 / 9; }
.c2-9 { grid-column: 2 / 10; }
.c2-10 { grid-column: 2 / 11; }
.c2-11 { grid-column: 2 / 12; }
.c2-12 { grid-column: 2 / 13; }
.c2-13 { grid-column: 2 / 14; }
.c2-14 { grid-column: 2 / 15; }
.c2-15 { grid-column: 2 / 16; }
.c2-16 { grid-column: 2 / 17; }
.c2-17 { grid-column: 2 / 18; }
.c2-18 { grid-column: 2 / 19; }
.c3-3 { grid-column: 3 / 4; }
.c3-4 { grid-column: 3 / 5; }
.c3-5 { grid-column: 3 / 6; }
.c3-6 { grid-column: 3 / 7; }
.c3-7 { grid-column: 3 / 8; }
.c3-8 { grid-column: 3 / 9; }
.c3-9 { grid-column: 3 / 10; }
.c3-10 { grid-column: 3 / 11; }
.c3-11 { grid-column: 3 / 12; }
.c3-12 { grid-column: 3 / 13; }
.c3-13 { grid-column: 3 / 14; }
.c3-14 { grid-column: 3 / 15; }
.c3-15 { grid-column: 3 / 16; }
.c3-16 { grid-column: 3 / 17; }
.c3-17 { grid-column: 3 / 18; }
.c3-18 { grid-column: 3 / 19; }
.c4-4 { grid-column: 4 / 5; }
.c4-5 { grid-column: 4 / 6; }
.c4-6 { grid-column: 4 / 7; }
.c4-7 { grid-column: 4 / 8; }
.c4-8 { grid-column: 4 / 9; }
.c4-9 { grid-column: 4 / 10; }
.c4-10 { grid-column: 4 / 11; }
.c4-11 { grid-column: 4 / 12; }
.c4-12 { grid-column: 4 / 13; }
.c4-13 { grid-column: 4 / 14; }
.c4-14 { grid-column: 4 / 15; }
.c4-15 { grid-column: 4 / 16; }
.c4-16 { grid-column: 4 / 17; }
.c4-17 { grid-column: 4 / 18; }
.c4-18 { grid-column: 4 / 19; }
.c5-5 { grid-column: 5 / 6; }
.c5-6 { grid-column: 5 / 7; }
.c5-7 { grid-column: 5 / 8; }
.c5-8 { grid-column: 5 / 9; }
.c5-9 { grid-column: 5 / 10; }
.c5-10 { grid-column: 5 / 11; }
.c5-11 { grid-column: 5 / 12; }
.c5-12 { grid-column: 5 / 13; }
.c5-13 { grid-column: 5 / 14; }
.c5-14 { grid-column: 5 / 15; }
.c5-15 { grid-column: 5 / 16; }
.c5-16 { grid-column: 5 / 17; }
.c5-17 { grid-column: 5 / 18; }
.c5-18 { grid-column: 5 / 19; }
.c6-6 { grid-column: 6 / 7; }
.c6-7 { grid-column: 6 / 8; }
.c6-8 { grid-column: 6 / 9; }
.c6-9 { grid-column: 6 / 10; }
.c6-10 { grid-column: 6 / 11; }
.c6-11 { grid-column: 6 / 12; }
.c6-12 { grid-column: 6 / 13; }
.c6-13 { grid-column: 6 / 14; }
.c6-14 { grid-column: 6 / 15; }
.c6-15 { grid-column: 6 / 16; }
.c6-16 { grid-column: 6 / 17; }
.c6-17 { grid-column: 6 / 18; }
.c6-18 { grid-column: 6 / 19; }
.c7-7 { grid-column: 7 / 8; }
.c7-8 { grid-column: 7 / 9; }
.c7-9 { grid-column: 7 / 10; }
.c7-10 { grid-column: 7 / 11; }
.c7-11 { grid-column: 7 / 12; }
.c7-12 { grid-column: 7 / 13; }
.c7-13 { grid-column: 7 / 14; }
.c7-14 { grid-column: 7 / 15; }
.c7-15 { grid-column: 7 / 16; }
.c7-16 { grid-column: 7 / 17; }
.c7-17 { grid-column: 7 / 18; }
.c7-18 { grid-column: 7 / 19; }
.c8-8 { grid-column: 8 / 9; }
.c8-9 { grid-column: 8 / 10; }
.c8-10 { grid-column: 8 / 11; }
.c8-11 { grid-column: 8 / 12; }
.c8-12 { grid-column: 8 / 13; }
.c8-13 { grid-column: 8 / 14; }
.c8-14 { grid-column: 8 / 15; }
.c8-15 { grid-column: 8 / 16; }
.c8-16 { grid-column: 8 / 17; }
.c8-17 { grid-column: 8 / 18; }
.c8-18 { grid-column: 8 / 19; }
.c9-9 { grid-column: 9 / 10; }
.c9-10 { grid-column: 9 / 11; }
.c9-11 { grid-column: 9 / 12; }
.c9-12 { grid-column: 9 / 13; }
.c9-13 { grid-column: 9 / 14; }
.c9-14 { grid-column: 9 / 15; }
.c9-15 { grid-column: 9 / 16; }
.c9-16 { grid-column: 9 / 17; }
.c9-17 { grid-column: 9 / 18; }
.c9-18 { grid-column: 9 / 19; }
.c10-10 { grid-column: 10 / 11; }
.c10-11 { grid-column: 10 / 12; }
.c10-12 { grid-column: 10 / 13; }
.c10-13 { grid-column: 10 / 14; }
.c10-14 { grid-column: 10 / 15; }
.c10-15 { grid-column: 10 / 16; }
.c10-16 { grid-column: 10 / 17; }
.c10-17 { grid-column: 10 / 18; }
.c10-18 { grid-column: 10 / 19; }
.c11-11 { grid-column: 11 / 12; }
.c11-12 { grid-column: 11 / 13; }
.c11-13 { grid-column: 11 / 14; }
.c11-14 { grid-column: 11 / 15; }
.c11-15 { grid-column: 11 / 16; }
.c11-16 { grid-column: 11 / 17; }
.c11-17 { grid-column: 11 / 18; }
.c11-18 { grid-column: 11 / 19; }
.c12-12 { grid-column: 12 / 13; }
.c12-13 { grid-column: 12 / 14; }
.c12-14 { grid-column: 12 / 15; }
.c12-15 { grid-column: 12 / 16; }
.c12-16 { grid-column: 12 / 17; }
.c12-17 { grid-column: 12 / 18; }
.c12-18 { grid-column: 12 / 19; }
.c13-13 { grid-column: 13 / 14; }
.c13-14 { grid-column: 13 / 15; }
.c13-15 { grid-column: 13 / 16; }
.c13-16 { grid-column: 13 / 17; }
.c13-17 { grid-column: 13 / 18; }
.c13-18 { grid-column: 13 / 19; }
.c14-14 { grid-column: 14 / 15; }
.c14-15 { grid-column: 14 / 16; }
.c14-16 { grid-column: 14 / 17; }
.c14-17 { grid-column: 14 / 18; }
.c14-18 { grid-column: 14 / 19; }
.c15-15 { grid-column: 15 / 16; }
.c15-16 { grid-column: 15 / 17; }
.c15-17 { grid-column: 15 / 18; }
.c15-18 { grid-column: 15 / 19; }
.c16-16 { grid-column: 16 / 17; }
.c16-17 { grid-column: 16 / 18; }
.c16-18 { grid-column: 16 / 19; }
.c17-17 { grid-column: 17 / 18; }
.c17-18 { grid-column: 17 / 19; }
.c18-18 { grid-column: 18 / 19; }
.mt0 { margin-top: 0px; }
.mt1 { margin-top: 84px; }
.mt2 { margin-top: 168px; }
.mt3 { margin-top: 252px; }
.mt4 { margin-top: 336px; }
.mt5 { margin-top: 420px; }
.mt6 { margin-top: 504px; }
.mt7 { margin-top: 588px; }
.mt8 { margin-top: 672px; }
.mt9 { margin-top: 756px; }
.mt10 { margin-top: 840px; }
.mt11 { margin-top: 924px; }
.mt12 { margin-top: 1008px; }
.mt13 { margin-top: 1092px; }
.mt14 { margin-top: 1176px; }

/* 節の器。高さは84の倍数、中身は流し込む（縦は絶対配置しない） */
.blk { position: relative; padding-block: 84px; }
.blk--840 { min-height: 840px; }
.blk--1176 { min-height: 1176px; }
.blk--756 { min-height: 756px; }
.blk--672 { min-height: 672px; }
.blk--588 { min-height: 588px; }
.blk--504 { min-height: 504px; }
.blk--420 { min-height: 420px; }
.blk--168 { min-height: 168px; padding-block: 42px; }
@media (max-width: 900px) {
  /* ★モバイルでは列指定を全部解いて1列にする。18列のズレをそのまま持ち込むと読めない */
  [class*="c1-"], [class*="c2-"], [class*="c3-"], [class*="c4-"], [class*="c5-"],
  [class*="c6-"], [class*="c7-"], [class*="c8-"], [class*="c9-"], [class*="c1"] { grid-column: 1 / -1 !important; }
  [class*="mt"] { margin-top: 0 !important; }
  .blk, .blk--840, .blk--1176, .blk--756, .blk--672, .blk--588, .blk--504, .blk--420 {
    min-height: 0; padding-block: 56px;
  }
  .ed2 .rail { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .ed2 .drift { transform: none; }
}


/* ── 誌面レイヤー v2 追補：まだ器の無かった4ブロック ─────────────────
   ここは「新しい見た目」ではなく、rail（18分割グリッド）の上に置いたときに
   子が1列に潰れないための最小限の器。面（カード）は敷かず、罫と天のズレだけで
   区切る ── 断層のルールに合わせている。                                */

.ed2 .path-row { align-items: start; }
.ed2 .path-row > article { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.ed2 .path-row > article > h3 { margin-top: .4rem; }

/* 料金：ここだけは面を敷く。★1枚だけ敷くから「ここが結論」だと分かる */
.ed2 .plan-card {
  background: var(--white);
  border: 1px solid var(--sumi);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: .9rem; align-items: flex-start;
}
.ed2 .plan-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.ed2 .plan-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .62rem; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.7;
}
.ed2 .plan-list li:last-child { border-bottom: 1px solid var(--line); }

/* 約束はしません：地は藍。★この節だけは演出を一切かけない（JSが落ちても必ず読める） */
.ed2 .promise-row > div { border-top: 1px solid rgba(255, 253, 248, .3); padding-top: 18px; }
.ed2 .promise-row > div:nth-child(1) { grid-column: 2 / span 4; }
.ed2 .promise-row > div:nth-child(2) { grid-column: 7 / span 4; margin-top: 84px; }
.ed2 .promise-row > div:nth-child(3) { grid-column: 12 / span 5; margin-top: 42px; }

@media (max-width: 900px) {
  .ed2 .promise-row > div:nth-child(1),
  .ed2 .promise-row > div:nth-child(2),
  .ed2 .promise-row > div:nth-child(3) { grid-column: 1 / -1; margin-top: 0; }
}

/* できること：面を敷かず、上辺の罫だけで5枚を区切る */
.ed2 .card-row { align-items: start; }
.ed2 .card-row > article { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.ed2 .card-row > article > h3 { margin-top: .35rem; }


/* ── 図版の帯（mosaic）─────────────────────────────
   断層帯の5本の柱と**同じ列境界**でタイルを置く。列幅が不揃いなので
   等分グリッドにならず、そのまま断層の続きになる。天のズレも柱と揃える。
   ★意味は上の縦組み5語が持っているので、画像は alt="" の装飾側に置く。 */
.mosaic > * { display: block; overflow: hidden; aspect-ratio: 1; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic > *:not(:first-child) { border-left: 1px solid var(--kinari); }

/* ── 暗い帯の図版パネル ────────────────────────────
   ★文字を写真に重ねない。帯の右半分を写真で埋め、文字は左に置く。
     こうしておくと画像を差し替えても可読性の再検証が要らない。 */
.section--ai, .cta-band { --panel: clamp(220px, 32%, 520px); }
.band-figure {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--panel);
  margin: 0; overflow: hidden;
}
/* ★写真は絶対配置なので、同じ帯の文字より**上に**描かれる。幅を空けずに置くと
   本文の右端が写真に飲まれて読めなくなる（実測で「…アクセス」で切れていた）。
   図版と同じ変数で本文側を狭める ── 2箇所に別々の数を書くと必ずズレる。 */
.section--ai > .rail, .cta-band > .rail { padding-right: calc(var(--panel) + clamp(24px, 3vw, 56px)); }
.band-figure img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.band-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #23414f 0%, rgba(35,65,79,.55) 32%, rgba(35,65,79,0) 100%);
}
.section--ai, .cta-band { position: relative; overflow: hidden; }

@media (max-width: 900px) {
  .band-figure { display: none; }   /* 幅が無いと文字の後ろへ回り込む。出さない方が正しい */
  .section--ai > .rail, .cta-band > .rail { padding-right: 0; }
}


@media (max-width: 900px) {
  /* ── 断層帯だけは1列に落とさない ──────────────────────
     縦組みを縦に積むと5語で2000px近くなり、装飾のためだけに延々スクロールさせる。
     5本を横に並べたまま小さくすると、天のズレ（この帯の主題）も残る。
     ★上の一括collapseを個別に打ち消すので !important が要る。 */
  .fault .rail { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; }
  .fault .rail > .fault-col { grid-column: auto !important; }
  .fault .rail > .fault-col:nth-child(2) { margin-top: 44px !important; }
  .fault .rail > .fault-col:nth-child(3) { margin-top: 14px !important; }
  .fault .rail > .fault-col:nth-child(4) { margin-top: 58px !important; }
  .fault .rail > .fault-col:nth-child(5) { margin-top: 28px !important; }
  .fault-ja { font-size: clamp(20px, 5.6vw, 26px); margin: 12px 0; letter-spacing: .1em; }
  .fault-en { font-size: 7.5px; letter-spacing: .12em; }
  .fault-no { font-size: 8px; }
  .fault-col { padding-inline: 2px; }

  /* ★図版の帯だけは5列を持ち込まない。390px幅では1枚72pxになり、
     何が写っているか分からない“点”が5つ並ぶだけになる（実測72×72）。
     2列に落として大きく見せ、最後の1枚は横長で全幅に敷く。 */
  .fault .rail.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2px !important; }
  .fault .rail.mosaic > * { grid-column: auto !important; }
  .fault .rail.mosaic > *:last-child { grid-column: 1 / -1 !important; aspect-ratio: 2 / 1; }
}


/* ── 下層ページを index と同じ語彙に揃える ─────────────────
   index は「面を敷かず、上辺の罫だけ」で区切る。下層だけ枠付きの箱が並ぶと、
   同じサイトの別ページに見える（ページごとにバラバラ、が今回の指摘の中身）。
   ★HTMLは触らず .ed2 の下でだけ上書きする。旧48ページ（配信対象外）は元のまま。 */
.ed2 .feature-grid { border: 0; column-gap: clamp(24px, 4vw, 64px); }
.ed2 .feature-card {
  min-height: 0; padding: 20px 0 0; background: none;
  border: 0; border-top: 1px solid var(--line-strong);
}
.ed2 .feature-card + .feature-card { margin-top: 0; }
.ed2 .feature-grid > .feature-card:nth-child(2n) { margin-top: 56px; }   /* 天をずらす＝断層の続き */
.ed2 .feature-card .num {
  margin-bottom: .8rem; font-family: var(--sans); font-size: 11px; letter-spacing: .22em;
}
.ed2 .path-card { background: none; padding: 20px 0 0; border-top: 1px solid var(--line-strong); }
.ed2 .path-card .num {
  width: auto; height: auto; border: 0; border-radius: 0; margin-bottom: .4rem;
  font-size: clamp(40px, 5vw, 72px); line-height: 1; color: rgba(34,33,29,.16);
}
.ed2 .app-window { padding: 0; border: 0; background: none; box-shadow: none; }
.ed2 .app-window::before { padding-bottom: 12px; letter-spacing: .22em; }
.ed2 .app-crop { border: 1px solid var(--sumi); }

@media (max-width: 900px) {
  .ed2 .feature-grid > .feature-card:nth-child(2n) { margin-top: 0; }
}

/* 漢数字の見出し番号。11px の .t-lbl に入れると「一」がただの横棒に見えて
   数字として読まれない（実測で確認）。明朝で大きく置く。 */
.ed2 .kanji-no {
  font-family: var(--serif);
  font-size: 26px; line-height: 1; margin-bottom: .5rem;
  color: var(--line-strong); letter-spacing: .1em;
}


/* ── 図版と紙の一体感（2026-08-29「画像が独立していて一体感がない」への修正）──
   実測で出た3つの原因のうち、②比率と③接地はここで扱う。
   ①地の色は tools/tone_figures.py（画像そのものを紙の調子に乗せる）。

   ★比率は 2:3 / 1:1 / 3:2 の**1家族**だけ。以前は同じ紙面に10種類が同居していて、
     1枚ごとに別の判断で置いたように見えていた。例外は2つだけで、どちらも
     「写真ではない物」＝全幅の罫（.band-rule）と、帯の高さに従うパネル（.band-figure）。 */

/* 実画面のスクリーンショットは切ると情報が消えるので、3:2 の枠の中に収める。
   ＝**枠のほうが**家族に属する。写真と同じ寸法体系に乗りつつ、中身は無傷。 */
.ed2 figure.shot { display: grid; place-items: center; background: var(--kinari); overflow: hidden; }
.ed2 figure.shot img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.ed2 figure.shot figcaption { grid-column: 1; align-self: end; }

/* 三つのはじめ方は、図版を記事から出して**隙間ゼロの帯**にした（.path-band）。
   ★文字と図版では必要な溝が違う。同じ器に入れると、どちらかが必ず妥協する:
     図版を隣り合わせにすれば文字も隣り合って読めなくなり、
     文字に溝を空ければ図版が浮く。器を分けると両方成り立つ。
   帯は入口（.mosaic）と同じ仕組みなので、ページの語彙も1つ増えない。 */
.ed2 .path-band > * { aspect-ratio: 2 / 3; }


/* ── ヒーローの図版は「カード」ではなく「面」 ───────────────────
   2:3 の枠に収めたら、かえって**前より浮いた**（四辺すべてが余白に囲まれた
   ただの矩形になったため）。ヒーローは節の天地いっぱいに立てて、
   右辺をページ端、天地を節の境界に接地させる。＝辺が3つ紙に触る。

   ★左辺だけは紙へフェードさせる。ここだけは「縁を消す」のが正しい ──
     写真が紙から立ち上がって見え、貼った四角に見えなくなる。
     文字は重ねないので、フェードは可読性の担保ではなく純粋に接合部の処理。 */
.has-plate { position: relative; overflow: hidden; --panel: clamp(240px, 34%, 560px); }
.plate-right {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--panel); margin: 0; overflow: hidden;
}
.plate-right img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-right::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--kinari) 0%, rgba(244, 240, 230, 0) 26%);
}
/* ヒーローは本文が c2-11 で止まるので、面と重ならない（実測: 文字の右端 605px /
   面の左端 979px）。ここに帯と同じ padding を足すと18列が縮み、h1 が3行に折れる。
   代わりに tools/layout_probe.js の §bandBleed が .has-plate も見張る。 */

@media (max-width: 900px) {
  /* 幅が無いと文字の後ろへ回り込む。モバイルは面をやめ、文章の**下に**横長で敷く。
     ★position:static に戻すとDOM順どおり見出しの「上」に出た（実機で確認）。
       節を flex 列にして order で下へ送る。DOMは組み替えない ── ここは h1 の
       直前で、読み上げ順を変えたくないため。
     ★overflow:hidden のままだと負のマージンが節の箱で刈られ、端まで抜けない
       （実測 left=28 / 幅334 で、両側28pxずつ内側で止まっていた）。 */
  .has-plate { display: flex; flex-direction: column; overflow: visible; }
  .has-plate > .rail { order: 1; padding-right: 0; }
  .ed2 .plate-right {
    order: 2;
    position: static; width: auto; aspect-ratio: 3 / 2;
    margin: 32px -28px 0;              /* 左右ともページ端まで抜く */
  }
  .plate-right::after { display: none; }
}