/* =========================================================
   CleanBOX LP — style.css
   Phase 1: Desktop-only (1440px fixed) static styles
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   --------------------------------------------------------- */
:root {
  /* Brand greens */
  --c-green-deep:   #1b3a2a;
  --c-green-dark:   #265c3a;
  --c-green-mid:    #3a8a56;
  --c-green-bright: #4aad6a;
  --c-green-pale:   #d6ead8;
  --c-green-wash:   #eef5ef;
  --c-green-tint:   #f6faf6;

  /* Ink scale */
  --c-ink:    #1a1a1a;
  --c-ink-80: #333333;
  --c-ink-60: #666666;
  --c-ink-40: #999999;
  --c-ink-20: #cccccc;
  --c-ink-10: #e5e5e5;
  --c-ink-05: #f2f2f2;
  --c-white:  #ffffff;

  /* Accent */
  --c-rust:       #8b4424;
  --c-rust-bg:    #f7ece3;
  --c-paper:      #faf7f1;
  --c-warn-bg:    #fefbf0;
  --c-warn-border:#e8d88a;
  /* --c-page-bg は削除（Phase 4.5: フルブリード化で不要） */

  /* Typography */
  --font-mincho:  "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans:    "M PLUS 1p", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Barlow Condensed", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

  /* Layout */
  --page-width:      1440px;
  --content-max:     1280px;
  --content-narrow:  1040px;
  --content-faq:     1100px;
  --pad-x:           56px;

  /* Section vertical padding */
  --sec-pad-y-sm: 120px;
  --sec-pad-y-md: 140px;

  /* Breakpoints (参照用。@media内では直接参照できないためドキュメント目的)
     mobile  : 〜767px
     tablet  : 768〜1023px
     mid     : 1024〜1439px
     desktop : 1440px〜 */
  --bp-mobile: 767px;
  --bp-tablet: 1023px;
  --bp-mid:    1439px;

  /* Rules / borders */
  --rule-hairline: 1px solid var(--c-ink-10);
  --rule-soft:     1px solid var(--c-ink-20);
  --rule-strong:   2px solid var(--c-ink);

  /* Effects */
  /* --shadow-page は削除（Phase 4.5: アートボード風の浮遊感を廃止） */
  --shadow-badge: 0 8px 24px rgba(0, 0, 0, 0.20);
}

/* ---------------------------------------------------------
   2. Modern Reset (destyle-ish, minimal)
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }
blockquote { padding: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--c-green-pale); color: var(--c-ink); }

/* ---------------------------------------------------------
   3. Page Shell
   Phase 4.5: アートボード風の 1440px 固定枠を撤廃。
   各セクションが viewport 全幅で背景を張る「フルブリード設計」に移行。
   --page-width 変数はヒーローおよび各セクション内コンテナの
   「設計基準幅」として残す（直接参照は減少）。
   --------------------------------------------------------- */
.page {
  background: var(--c-white); /* セクションが覆わない隙間の保険 */
}

/* Layout container — inner section width */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container--narrow    { max-width: var(--content-narrow); }
.container--narrow-faq{ max-width: var(--content-faq); }

/* ---------------------------------------------------------
   4. Shared Components
   --------------------------------------------------------- */

/* Eyebrow — small label with dash rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.25em;
  font-weight: var(--fw-bold);
  color: var(--c-green-mid);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow__rule {
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow__dot { color: var(--c-ink-20); }
.eyebrow__no  { font-size: 10px; color: var(--c-ink-40); }

.eyebrow--rust   { color: var(--c-rust); }
.eyebrow--bright { color: var(--c-green-bright); }

/* Section header */
.section-header { display: flex; flex-direction: column; margin-bottom: 56px; }
.section-header--rust  { /* reserved */ }
.section-header--dark  { /* reserved for dark-bg sections */ }

.section-title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-black);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}
.section-title--accent { color: var(--c-green-dark); }
.section-title--light  { color: var(--c-white); }

/* Intro block — heading + lead side-by-side */
.section-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: flex-end;
  margin-bottom: 72px;
}
.section-lead {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
  color: var(--c-ink-80);
  max-width: 540px;
  justify-self: end;
  padding-bottom: 12px;
}
.section-lead--short {
  max-width: 520px;
  padding-bottom: 8px;
}
.section-lead--light { color: rgba(255, 255, 255, 0.7); max-width: 380px; }

/* Section footnote hairline row */
.section-footnote {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-60);
}
.section-footnote__tag { color: var(--c-ink-40); }
.section-footnote__rule { flex: 1; height: 1px; background: var(--c-ink-10); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  padding: 18px 36px;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease;
}
.btn--primary {
  background: var(--c-green-deep);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--c-ink); }
.btn__arrow { font-family: var(--font-display); }

/* -----------------------------------------------------------
   Phase 5: 画像要素（<img>単独）
   プレースホルダーSVG → 実webp画像 差替時も同じスタイルで表示
   ----------------------------------------------------------- */

/* §03 Feature 画像 (4:3) */
.feature-block__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-green-tint);
  border: 1px solid var(--c-ink-20);
}

/* §06 Size 製品写真 (1:1) */
.size-row__photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--c-green-tint);
  border: 1px solid var(--c-ink-20);
}

/* §07 Case 施設写真 (4:3) */
.case-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-green-tint);
  border: 1px solid var(--c-ink-20);
}

/* ═════════════════════════════════════════════════════════
   § 01 — HERO
   ═════════════════════════════════════════════════════════ */
/* Phase 4.5 (hero 高さ修正):
   - 固定 height: 820px を撤廃し、ビューポート高さに追従
   - 下限 100vh でファーストビューを占有
   - 上限 1200px で超縦長モニターの間延びを防止
   - min-height: 600px の下限保険は未採用:
     実コンテンツが約 734px 必要で常に min-height 超えとなるため効果なし
   - display: flex にして masthead(自然高) + hero__body(flex:1) の縦配分
 */
.hero {
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 1200px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  border-bottom: var(--rule-hairline);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-ink-60);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.masthead__group { display: flex; gap: 24px; align-items: center; }
.masthead__sep   { color: var(--c-ink-20); }
.masthead__stock { color: var(--c-green-mid); display: inline-flex; align-items: center; gap: 6px; }
.masthead__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hero__body {
  flex: 1;
  min-height: 0;  /* 親flexの残り空間に縮められるように */
  display: grid;
  grid-template-columns: 1fr 1.2fr;
}

/* Phase 4.5: .hero__left セルは viewport 左端まで白背景を伸ばし、
   内側の .hero__left-inner でコンテンツを max-width 制約 + 右寄せ。
   セルの 1fr の余剰幅分は白背景が埋める。 */
.hero__left {
  padding: 56px 0 48px;
  background: var(--c-white);
  display: flex;
  justify-content: flex-end;
}
.hero__left-inner {
  width: 100%;
  box-sizing: border-box;
  /* 設計基準: 1440px 幅時の左カラム分 (1440 * 1/2.2 ≈ 655) */
  max-width: 655px;
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between は撤廃。
     5子要素で均等配分されると title / specs 間などに不自然な空白が
     できるため、コンテンツは上から自然に流れ、.hero__actions のみ
     margin-top: auto で下端へ押し出す方式に変更 */
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.3em;
  color: var(--c-green-mid);
  margin-bottom: 28px;
}
.hero__eyebrow-rule {
  width: 32px; height: 2px;
  background: currentColor;
}

.hero__title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-black);
  font-size: 86px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--c-ink);
  margin-bottom: 32px;
}
.hero__title--accent { color: var(--c-green-dark); }
.hero__title--outline {
  -webkit-text-stroke: 2px var(--c-ink);
  color: transparent;
}

.hero__specs {
  display: flex;
  margin-bottom: 28px;
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}
.hero__spec {
  padding: 14px 0;
  width: 200px;
}
.hero__spec + .hero__spec {
  padding: 14px 24px;
  border-left: var(--rule-hairline);
}
.hero__spec dt {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-ink-40);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.hero__spec dd {
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.hero__lead {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2;
  color: var(--c-ink-80);
  max-width: 440px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  /* ヒーロー可変高さ時に CTA を下端へ押し出す */
  margin-top: auto;
  /* 下限の空き空間を確保（短いビューポート時に lead と密着しすぎない） */
  padding-top: 28px;
}
.hero__direct-line {
  font-size: 12px;
  color: var(--c-ink-60);
  line-height: 1.5;
}
.hero__direct-line-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-ink-40);
}
.hero__direct-line-number {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: 0.025em;
}

/* -----------------------------------------------------------
   Phase 5.5-B: hero-mobile.jsx 準拠の追加要素
   Desktop ではデフォルト非表示（モバイル @media で表示）
   ----------------------------------------------------------- */
.hero__cta-secondary { display: none; }    /* secondary CTA (価格を見る ↓) */
.hero__direct-line-text { display: block; } /* DIRECT LINE のテキスト群 */
.hero__direct-line-icon { display: none; } /* タップ電話アイコン円ボタン */

/* Hero right side — image + overlays */
.hero__right {
  position: relative;
  background: var(--c-green-deep);
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
}
.hero__image-src {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 58, 42, 0) 40%, rgba(27, 58, 42, 0.85) 100%);
  pointer-events: none;
}

.hero__badge {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-green-bright);
  color: var(--c-green-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  transform: rotate(-8deg);
  box-shadow: var(--shadow-badge);
}
.hero__badge-top {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
}
.hero__badge-main {
  font-size: 22px;
  font-weight: var(--fw-xbold);
  line-height: 1;
}
.hero__badge-sub {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  margin-top: 2px;
}

.hero__caption {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  color: var(--c-white);
}
.hero__caption-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  color: var(--c-green-bright);
  margin-bottom: 8px;
  font-weight: var(--fw-bold);
}
.hero__caption-text {
  display: block;
  font-size: 18px;
  line-height: 1.6;
  max-width: 540px;
  font-family: var(--font-mincho);
  font-weight: var(--fw-medium);
}

.hero__edge-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.55em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════
   § 02 — PAIN POINTS
   ═════════════════════════════════════════════════════════ */
.pain {
  position: relative;
  background: var(--c-paper);
  padding: var(--sec-pad-y-sm) 0 140px;
  border-top: var(--rule-hairline);
}
.pain__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-rust);
}
.pain .section-intro {
  align-items: flex-end;
  margin-bottom: 72px;
}
.pain__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-strong);
  border-bottom: var(--rule-soft);
}
.pain-card {
  padding: 36px 28px 40px;
  border-right: var(--rule-soft);
}
.pain-card:last-child { border-right: none; }

.pain-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--rule-hairline);
}
.pain-card__no {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--fw-xbold);
  color: var(--c-rust);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pain-card__tag {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
}
.pain-card__title {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 12px;
}
.pain-card__body {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-ink-60);
}

/* ═════════════════════════════════════════════════════════
   § 03 — FEATURES
   ═════════════════════════════════════════════════════════ */
.features {
  background: var(--c-white);
  padding: var(--sec-pad-y-md) 0 120px;
}
.features .section-intro {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 96px;
}

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding-bottom: 80px;
  margin-bottom: 80px;
  border-bottom: var(--rule-hairline);
}
.feature-block--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.feature-block--reverse .feature-block__figure { order: 2; }
.feature-block--reverse .feature-block__text   { order: 1; }

.feature-block__figure { position: relative; }
.feature-block__caption {
  position: absolute;
  top: -12px;
  left: -12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
  background: var(--c-white);
  padding: 0 8px;
  z-index: 2;
}
.feature-block--reverse .feature-block__caption {
  left: auto;
  right: -12px;
}

/* Corner dimension marks on feature figure */
.feature-block__mark {
  position: absolute;
  width: 8px;
  height: 8px;
}
.feature-block__mark--tl { top: -4px;    left: -4px;  border-top:    2px solid var(--c-green-deep); border-left:  2px solid var(--c-green-deep); }
.feature-block__mark--tr { top: -4px;    right: -4px; border-top:    2px solid var(--c-green-deep); border-right: 2px solid var(--c-green-deep); }
.feature-block__mark--bl { bottom: -4px; left: -4px;  border-bottom: 2px solid var(--c-green-deep); border-left:  2px solid var(--c-green-deep); }
.feature-block__mark--br { bottom: -4px; right: -4px; border-bottom: 2px solid var(--c-green-deep); border-right: 2px solid var(--c-green-deep); }

.feature-block__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: var(--rule-hairline);
}
.feature-block__no {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.feature-block__category {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  color: var(--c-green-mid);
  font-weight: var(--fw-bold);
}

.feature-block__title {
  font-family: var(--font-mincho);
  font-size: 34px;
  font-weight: var(--fw-black);
  color: var(--c-ink);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.feature-block__body {
  font-size: 14px;
  line-height: 2;
  color: var(--c-ink-80);
}
.feature-block__body + .feature-block__body { margin-top: 10px; }
.feature-block__body:last-of-type { margin-bottom: 24px; }

.feature-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-block__tags li {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: var(--fw-bold);
  color: var(--c-green-deep);
  padding: 6px 12px;
  border: 1px solid var(--c-green-deep);
}

/* Additional features grid */
.features-grid {
  margin-top: 100px;
}
.features-grid__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.features-grid__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  color: var(--c-green-mid);
  font-weight: var(--fw-bold);
}
.features-grid__rule {
  flex: 1;
  height: 1px;
  background: var(--c-ink-10);
}
.features-grid__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
}

.features-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-soft);
  border-left: var(--rule-soft);
}
.feature-mini {
  padding: 32px 28px;
  border-right: var(--rule-soft);
  border-bottom: var(--rule-soft);
  min-height: 200px;
  position: relative;
}
.feature-mini__category {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
}
.feature-mini__no {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-pale);
  line-height: 1;
  margin-bottom: 18px;
}
.feature-mini__title {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  margin-bottom: 8px;
}
.feature-mini__body {
  font-size: 12px;
  line-height: 1.85;
  color: var(--c-ink-60);
}

/* ═════════════════════════════════════════════════════════
   § 04 — USE CASES (dark green)
   ═════════════════════════════════════════════════════════ */
.usecases {
  position: relative;
  background: var(--c-green-deep);
  color: var(--c-white);
  padding: var(--sec-pad-y-sm) 0;
  overflow: hidden;
}
.usecases__hatch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(118deg,
    transparent, transparent 56px,
    rgba(255, 255, 255, 0.018) 56px, rgba(255, 255, 255, 0.018) 57px);
  pointer-events: none;
}
.usecases__inner {
  position: relative;
  z-index: 1;
}
/* Phase 5.5-B 問題9: grid-template-areas で
   desktop: intro(col1 row1) / table(col2 span-rows) / note(col1 row2)
   mobile :   intro → table → note の縦積み  */
.usecases__layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-areas:
    "intro table"
    "note  table";
  column-gap: 80px;
  row-gap: 40px;
  align-items: start;
}
.usecases__intro { grid-area: intro; }
.usecases__table { grid-area: table; }
.usecases__note  { grid-area: note; }

/* Phase 5.5-A 問題1: §04 UseCases のリード文を明示的に左寄せ */
.usecases__intro .section-lead {
  justify-self: start;
  margin-left: 0;
  margin-right: auto;
  padding-bottom: 0;
  text-align: left;
}

.usecases__note {
  /* margin-top: 40px は grid row-gap で代替 */
  padding: 20px 24px;
  border-left: 2px solid var(--c-green-bright);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.9;
}

.usecases__table {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.usecase-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  align-items: stretch;
}
.usecase-row__category {
  padding: 26px 22px 26px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.usecase-row__category-no {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  color: var(--c-green-bright);
  font-weight: var(--fw-bold);
}
.usecase-row__category-jp {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--fw-black);
  color: var(--c-white);
  letter-spacing: 0.025em;
  line-height: 1.2;
}
.usecase-row__category-en {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: var(--fw-bold);
}

.usecase-row__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.usecase-row__items li {
  padding: 26px 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.usecase-row__items li + li { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.usecase-row__idx {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  min-width: 20px;
}
.usecase-row__items li > span:last-child {
  font-family: var(--font-mincho);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
  letter-spacing: 0.02em;
}

/* ═════════════════════════════════════════════════════════
   § 05 — SPEC TABLE
   ═════════════════════════════════════════════════════════ */
.spec {
  background: var(--c-paper);
  padding: var(--sec-pad-y-md) 0 160px;
}
.spec__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.spec__doc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  line-height: 1.9;
  text-align: right;
  padding-bottom: 10px;
}
.spec__doc-meta-item { display: block; }

/* Phase 5.5-B 問題10: モバイル専用「SWIPE →」スクロールヒント
   (sections-mobile.jsx L511-520 準拠) */
.spec__scroll-hint { display: none; }

.spec-sheet {
  border: 1px solid var(--c-ink);
  background: var(--c-white);
}
.spec-sheet__header {
  background: var(--c-green-deep);
  color: var(--c-white);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-ink);
}
.spec-sheet__title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  font-weight: var(--fw-xbold);
}
.spec-sheet__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.spec-sheet__thead {
  display: grid;
  grid-template-columns: 72px 200px 1fr 140px;
  background: var(--c-ink-05);
  border-bottom: 1px solid var(--c-ink);
}
.spec-sheet__th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: var(--c-ink-60);
  text-transform: uppercase;
  padding: 10px 16px;
  border-right: var(--rule-soft);
}
.spec-sheet__th:last-child { border-right: none; padding-left: 18px; }
.spec-sheet__th--item { padding: 10px 18px; }
.spec-sheet__th--spec { padding: 10px 18px; }

.spec-row {
  display: grid;
  grid-template-columns: 72px 200px 1fr 140px;
  border-bottom: var(--rule-hairline);
  align-items: stretch;
  min-height: 64px;
}
.spec-row:last-of-type { border-bottom: none; }

.spec-row__no {
  padding: 18px 16px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.01em;
  border-right: var(--rule-hairline);
  display: flex;
  align-items: center;
}
.spec-row__item {
  padding: 18px;
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  border-right: var(--rule-hairline);
  display: flex;
  align-items: center;
}
.spec-row__spec {
  padding: 18px;
  font-size: 14px;
  color: var(--c-ink-80);
  line-height: 1.7;
  border-right: var(--rule-hairline);
  display: flex;
  align-items: center;
}
.spec-row__cat {
  padding: 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
}

.spec-sheet__footer {
  border-top: 1px solid var(--c-ink);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  background: var(--c-ink-05);
}

.spec-note {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--c-ink-60);
  line-height: 1.8;
  padding: 14px 18px;
  border-left: 3px solid var(--c-green-deep);
  background: var(--c-white);
}
.spec-note__tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-green-deep);
  font-weight: var(--fw-xbold);
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   § 06 — SIZE & PRICE
   ═════════════════════════════════════════════════════════ */
.size-price {
  background: var(--c-white);
  padding: var(--sec-pad-y-md) 0;
  border-top: var(--rule-hairline);
}
.size-price .section-intro {
  margin-bottom: 56px;
}

.size-table {
  border: 1px solid var(--c-ink);
  background: var(--c-white);
}
.size-table__header {
  background: var(--c-green-deep);
  color: var(--c-white);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-ink);
}
.size-table__title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  font-weight: var(--fw-xbold);
}
.size-table__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.size-table__thead {
  display: grid;
  /* Phase 5.5-A 問題3: PHOTO / DRAWING のセル幅を均等化 (135 + 175 = 310 → 155 + 155) */
  grid-template-columns: 60px 120px 155px 155px 125px 240px 1fr;
  background: var(--c-ink-05);
  border-bottom: 1px solid var(--c-ink);
}
.size-table__th {
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: var(--c-ink-60);
  text-transform: uppercase;
  border-right: var(--rule-soft);
}
.size-table__th:last-child { border-right: none; }

.size-row {
  display: grid;
  /* Phase 5.5-A 問題3: PHOTO / DRAWING のセル幅を均等化 (135 + 175 = 310 → 155 + 155) */
  grid-template-columns: 60px 120px 155px 155px 125px 240px 1fr;
  border-bottom: var(--rule-hairline);
  min-height: 150px;
  align-items: stretch;
  transition: background 120ms ease;
}
.size-row:last-of-type { border-bottom: none; }
.size-row:hover { background: var(--c-green-tint); }

.size-row__no {
  padding: 24px 14px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.01em;
  border-right: var(--rule-hairline);
  display: flex;
  align-items: center;
}
.size-row__model {
  padding: 24px 18px;
  border-right: var(--rule-hairline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.size-row__rec-badge {
  position: absolute;
  top: 14px;
  left: 18px;
  background: var(--c-green-deep);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: var(--fw-xbold);
  letter-spacing: 0.15em;
  padding: 3px 7px;
}
.size-row--recommended .size-row__name { margin-top: 22px; }

.size-row__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: 0.02em;
  line-height: 1;
}
.size-row__code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-ink-40);
  margin-top: 6px;
}

.size-row__photo,
.size-row__drawing {
  padding: 14px;
  border-right: var(--rule-hairline);
  position: relative;
  cursor: pointer;
  /* Phase 5.5-A 問題3: セル高さがドローイング基準（最大セル）に
     揃うため、写真側で縦方向に中央寄せしないと上詰めに見える。
     flex で中央寄せに統一。 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.size-row__photo > img,
.size-row__photo > .size-row__photo-img,
.size-row__drawing > .drawing {
  width: 100%;
}
.size-row__drawing {
  background: #fafbf8;
}

.thumb-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  color: var(--c-green-deep);
  font-weight: var(--fw-bold);
  background: var(--c-white);
  padding: 2px 6px;
  border: 1px solid var(--c-green-deep);
  opacity: 0.85;
  transition: opacity 120ms, background 120ms, color 120ms, border-color 120ms;
}
.size-row:hover .thumb-hint {
  opacity: 1;
  background: var(--c-green-bright);
  color: var(--c-green-deep);
  border-color: var(--c-green-deep);
}

.size-row__weight {
  padding: 24px 18px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-80);
  border-right: var(--rule-hairline);
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.size-row__price {
  padding: 24px 20px;
  display: flex;
  /* Phase 5.5-A 問題3: 全要素を上下中央揃えに統一。
     ¥ / 数値 / TAX INCL. それぞれを vertical center に。
     ベースライン揃えの必要性は、見た目上 font-size 差が大きいため
     かえって崩れる。center で統一した方が自然。 */
  align-items: center;
  border-right: var(--rule-hairline);
  position: relative;
}
.size-row--recommended .size-row__price {
  background: linear-gradient(180deg, var(--c-green-tint) 0%, var(--c-white) 100%);
}
.size-row__yen {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-green-deep);
  margin-right: 4px;
  /* align-self は親の align-items: center を継承。明示不要 */
}
.size-row__amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.size-row__tax {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--c-ink-40);
  letter-spacing: 0.12em;
  margin-left: 6px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  /* align-self は親の align-items: center を継承 */
}

.size-row__use {
  padding: 24px 22px;
  font-family: var(--font-mincho);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-80);
  line-height: 1.6;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.size-table__footer {
  border-top: 1px solid var(--c-ink);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  background: var(--c-ink-05);
}

/* Drawing (SVG technical schematic) */
.drawing {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: #fafbf8;
  border: 1px dashed rgba(27, 58, 42, 0.25);
  /* corner crop marks (via background) */
  background-image:
    /* top-left */
    linear-gradient(to right, var(--c-green-deep) 6px, transparent 6px),
    linear-gradient(to bottom, var(--c-green-deep) 6px, transparent 6px),
    /* top-right */
    linear-gradient(to left, var(--c-green-deep) 6px, transparent 6px),
    linear-gradient(to bottom, var(--c-green-deep) 6px, transparent 6px),
    /* bottom-left */
    linear-gradient(to right, var(--c-green-deep) 6px, transparent 6px),
    linear-gradient(to top, var(--c-green-deep) 6px, transparent 6px),
    /* bottom-right */
    linear-gradient(to left, var(--c-green-deep) 6px, transparent 6px),
    linear-gradient(to top, var(--c-green-deep) 6px, transparent 6px),
    /* background grid */
    linear-gradient(to right, rgba(27, 58, 42, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 58, 42, 0.07) 1px, transparent 1px);
  background-size:
    6px 1px, 1px 6px,
    6px 1px, 1px 6px,
    6px 1px, 1px 6px,
    6px 1px, 1px 6px,
    6px 6px, 6px 6px;
  background-position:
    4px 4px, 4px 4px,
    calc(100% - 4px) 4px, calc(100% - 4px) 4px,
    4px calc(100% - 4px), 4px calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    0 0, 0 0;
  background-repeat:
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    repeat, repeat;
}
.drawing__svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* aspect-ratio 由来の親高さに対して height:100% が解決されない環境
   （特にモーダル拡大時のフレックス中央寄せ）でも枠いっぱいに満たすため
   絶対配置で inset:0 に固定する。DWG ラベル / SCALE は上に重なる。 */
.drawing__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.drawing__label {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--c-ink-60);
  font-weight: var(--fw-bold);
}
.drawing__scale {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--c-ink-40);
}

/* Size price — notes block */
.size-price__notes {
  margin-top: 20px;
  border: var(--rule-soft);
  background: var(--c-ink-05);
  padding: 16px 22px;
}
.size-price__notes-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--c-rust);
  font-weight: var(--fw-xbold);
  margin-bottom: 8px;
}
.size-price__notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: 11.5px;
  color: var(--c-ink-80);
  line-height: 1.75;
}

/* ═════════════════════════════════════════════════════════
   § 07 — CASE STUDIES
   ═════════════════════════════════════════════════════════ */
.cases {
  background: var(--c-paper);
  padding: var(--sec-pad-y-md) 0;
  border-top: var(--rule-hairline);
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--rule-soft);
  border-left: var(--rule-soft);
}
.case-card {
  padding: 36px 36px 40px;
  border-right: var(--rule-soft);
  border-bottom: var(--rule-soft);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-ink);
}
.case-card__no-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.case-card__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.27em;
  color: var(--c-green-mid);
  font-weight: var(--fw-bold);
}
.case-card__no {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-card__year {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-ink-40);
  letter-spacing: 0.09em;
  font-weight: var(--fw-bold);
}

.case-card__meta {
  border-top: var(--rule-hairline);
}
.case-card__meta-row {
  display: grid;
  grid-template-columns: 110px 70px 1fr;
  padding: 10px 0;
  border-bottom: var(--rule-hairline);
  align-items: baseline;
}
.case-card__meta-row dt {
  display: contents;
}
.case-card__meta-jp {
  font-family: var(--font-mincho);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-60);
}
.case-card__meta-en {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
}
.case-card__meta-row dd {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.case-card__quote {
  padding: 16px 18px;
  border-left: 3px solid var(--c-green-deep);
  background: var(--c-green-tint);
}
.case-card__quote-label {
  display: block;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--c-green-mid);
  font-weight: var(--fw-bold);
  margin-bottom: 6px;
}
.case-card__quote p {
  font-family: var(--font-mincho);
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--c-ink-80);
}

/* ═════════════════════════════════════════════════════════
   § 08 — CUSTOMER VOICES
   ═════════════════════════════════════════════════════════ */
.voices {
  background: var(--c-white);
  padding: var(--sec-pad-y-md) 0;
  border-top: var(--rule-hairline);
}

.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule-strong);
  border-bottom: var(--rule-soft);
}
.voice-card {
  padding: 40px 32px 44px;
  border-right: var(--rule-soft);
  position: relative;
}
.voice-card:last-child { border-right: none; }

.voice-card__index {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
}
.voice-card__quote-mark {
  display: block;
  font-family: Georgia, "Noto Serif JP", serif;
  font-size: 72px;
  font-weight: var(--fw-bold);
  color: var(--c-green-pale);
  line-height: 0.6;
  margin-bottom: 12px;
}
.voice-card__body p {
  font-family: var(--font-mincho);
  font-size: 14.5px;
  line-height: 2;
  color: var(--c-ink-80);
  margin-bottom: 28px;
}
.voice-card__attr {
  padding-top: 16px;
  border-top: var(--rule-hairline);
}
.voice-card__role {
  display: block;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.25em;
  color: var(--c-green-mid);
  font-weight: var(--fw-bold);
  margin-bottom: 4px;
}
.voice-card__who {
  display: block;
  font-family: var(--font-mincho);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* ═════════════════════════════════════════════════════════
   § 09 — FAQ
   ═════════════════════════════════════════════════════════ */
.faq {
  background: var(--c-paper);
  padding: var(--sec-pad-y-md) 0;
  border-top: var(--rule-hairline);
}
.faq__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.faq__doc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  line-height: 1.9;
  text-align: right;
  padding-bottom: 10px;
}

.faq__list {
  border: 1px solid var(--c-ink);
  background: var(--c-white);
}
.faq-item {
  border-bottom: var(--rule-hairline);
}
.faq-item:last-child { border-bottom: none; }

.faq-item__summary {
  display: grid;
  grid-template-columns: 72px 1fr 60px;
  align-items: center;
  padding: 22px 28px;
  transition: background 120ms ease;
}
.faq-item[open] > .faq-item__summary {
  background: var(--c-green-tint);
}
.faq-item__summary:hover {
  background: var(--c-green-tint);
}

.faq-item__num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.01em;
}
.faq-item__question {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.faq-item__icon {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  line-height: 1;
  transition: transform 150ms ease;
}
.faq-item[open] > .faq-item__summary .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: grid;
  grid-template-columns: 72px 1fr 60px;
  padding: 0 28px 28px;
}
.faq-item__a-mark {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-xbold);
  color: var(--c-rust);
  letter-spacing: 0.025em;
  padding-top: 2px;
}
.faq-item__answer p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 2;
  color: var(--c-ink-80);
  border-left: 2px solid var(--c-green-pale);
  padding-left: 18px;
}

/* ═════════════════════════════════════════════════════════
   § 10 — CONTACT FORM
   ═════════════════════════════════════════════════════════ */
.contact {
  background: var(--c-white);
  padding: var(--sec-pad-y-md) 0;
  border-top: var(--rule-hairline);
}

.contact-form {
  border: 1px solid var(--c-ink);
  background: var(--c-white);
}
.contact-form__header {
  background: var(--c-green-deep);
  color: var(--c-white);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-ink);
}
.contact-form__title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  font-weight: var(--fw-xbold);
}
.contact-form__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.form-row {
  display: grid;
  grid-template-columns: 100px 240px 1fr;
  border-bottom: var(--rule-hairline);
  align-items: stretch;
  min-height: 72px;
}
.form-row--textarea { min-height: 180px; }

.form-row__no {
  padding: 20px 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.01em;
  border-right: var(--rule-hairline);
  background: var(--c-ink-05);
  display: flex;
  align-items: flex-start;
}
.form-row__label {
  padding: 20px;
  border-right: var(--rule-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--c-ink-05);
}
.form-row__label-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.form-row__label-main label {
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.form-row__required {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--c-white);
  background: var(--c-rust);
  padding: 2px 6px;
  font-weight: var(--fw-bold);
}
.form-row__label-en {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-ink-40);
  font-weight: var(--fw-bold);
}

.form-row__input {
  padding: 14px 20px;
  /* Phase 5.5-A 問題4: エラー要素は form-validation.js が
     .form-row__input の末尾に appendChild する。flex-direction: row
     のままだと入力欄の右側に並んでしまうため、column に変更して
     入力欄の「下」にエラーが表示されるようにする。 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-row__input input,
.form-row__input textarea {
  width: 100%;
  padding: 12px 14px;
  border: var(--rule-soft);
  background: var(--c-white);
  font-family: var(--font-sans);
  color: var(--c-ink);
  outline: none;
  border-radius: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-row__input input { font-size: 15px; }
.form-row__input textarea {
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
  min-height: 140px;
}
.form-row__input input:focus,
.form-row__input textarea:focus {
  border-color: var(--c-green-deep);
  box-shadow: 0 0 0 2px rgba(58, 138, 86, 0.15);
}

.contact-form__consent {
  padding: 24px 28px;
  border-bottom: var(--rule-hairline);
  background: var(--c-green-tint);
  display: flex;
  align-items: center;
  gap: 14px;
  /* Phase 5.5-A 問題4: エラー要素(flex-basis: 100%)を次行へ送る */
  flex-wrap: wrap;
}
.contact-form__consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-green-deep);
  cursor: pointer;
  flex-shrink: 0;
}
.contact-form__consent label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--c-ink-80);
  line-height: 1.7;
  cursor: pointer;
}
.contact-form__consent-link {
  color: var(--c-green-deep);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-form__submit-row {
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.contact-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  line-height: 1.8;
}
.contact-form__submit {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-xbold);
  letter-spacing: 0.22em;
  color: var(--c-white);
  background: var(--c-green-deep);
  padding: 20px 56px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--c-green-deep);
  transition: background 150ms ease;
}
.contact-form__submit:hover { background: var(--c-ink); border-color: var(--c-ink); }
.contact-form__submit-arrow { font-size: 20px; }

/* ═════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  background: var(--c-green-deep);
  color: var(--c-white);
  padding: 80px 0 32px;
  overflow: hidden;
}
.footer__hatch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(118deg,
    transparent, transparent 56px,
    rgba(255, 255, 255, 0.02) 56px, rgba(255, 255, 255, 0.02) 57px);
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  padding-bottom: 48px;
  margin-bottom: 40px;
}

.footer__about .eyebrow { margin-bottom: 14px; }
.footer__heading {
  font-family: var(--font-mincho);
  font-size: 36px;
  font-weight: var(--fw-black);
  color: var(--c-white);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1.3;
}
.footer__body {
  font-family: var(--font-mincho);
  font-size: 14px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
}

.footer__info {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 28px;
}
.footer__info-title {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  color: var(--c-green-bright);
  font-weight: var(--fw-bold);
  margin-bottom: 18px;
}
.footer__info-row {
  display: grid;
  grid-template-columns: 70px 60px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  align-items: baseline;
}
.footer__info-row dt {
  display: contents;
}
.footer__info-jp {
  font-family: var(--font-mincho);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.6);
}
.footer__info-en {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: var(--fw-bold);
}
.footer__info-row dd {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.footer__info-row dd a { text-decoration: none; }
.footer__info-row dd a:hover { color: var(--c-green-bright); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.09em;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 28px;
}
.footer__links {
  display: flex;
  gap: 20px;
  align-items: center;
}
.footer__links a:hover { color: var(--c-green-bright); }

/* Footer corporate link (Phase 2 追加) */
.footer__corp-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--c-white);
  transition: background 150ms ease, border-color 150ms ease;
}
.footer__corp-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-green-bright);
}
.footer__corp-link-label {
  font-family: var(--font-mincho);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.7);
}
.footer__corp-link-cta {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: var(--fw-bold);
  color: var(--c-green-bright);
  text-transform: uppercase;
}
.footer__corp-link-arrow {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--c-green-bright);
  margin-left: auto;
}

/* =========================================================
   Cases carousel dots — mobile only (hidden by default)
   ========================================================= */
.cases__dots { display: none; }

/* =========================================================
   Reduced motion — user preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   § MID BREAKPOINT — 1024〜1439 (中間)
   Phase 4.5 以降、.page は常に流動するため幅調整は不要。
   このブレイクポイントは現状オーバーライド項目なし（将来用に残す）。
   ========================================================= */
/* @media (max-width: 1439px) {} */

/* =========================================================
   § TABLET BREAKPOINT — 〜1023 (タブレット以下)
   - コンテナパディング縮小
   - Feature/UseCase ブロックを縦積みに
   - Size&Price テーブル → カード型
   ========================================================= */
@media (max-width: 1023px) {
  :root { --pad-x: 32px; }

  /* ── Section intro (heading + lead を縦積み) ── */
  .section-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 48px;
  }
  .section-lead,
  .section-lead--short,
  .section-lead--light {
    justify-self: start;
    max-width: 100%;
    padding-bottom: 0;
  }

  .section-title { font-size: 40px; }

  /* ── Masthead (タブレット) ── */
  .masthead {
    padding: 14px var(--pad-x);
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  .masthead__group { gap: 16px; }

  /* ── Hero (タブレット) ──
     .hero の min-height: 100vh / max-height: 1200px はベース継承。
     grid 比率のみ 1:1 に変更 */
  .hero__body {
    grid-template-columns: 1fr 1fr;
  }
  .hero__left { padding: 40px 0 40px; }
  .hero__left-inner { max-width: none; padding: 0 40px; }
  .hero__title { font-size: 64px; }
  .hero__specs { flex-wrap: wrap; }
  .hero__spec { width: 50%; }
  .hero__spec + .hero__spec {
    padding-left: 16px;
    padding-right: 0;
  }
  .hero__badge {
    width: 96px; height: 96px;
    top: 20px; right: 20px;
  }
  .hero__badge-main { font-size: 18px; }
  .hero__caption-text { font-size: 15px; }

  /* ── § 02 Pain (2col) ── */
  .pain {
    padding: 80px 0 96px;
  }
  .pain__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pain-card {
    border-right: var(--rule-soft);
    border-bottom: var(--rule-soft);
  }
  .pain-card:nth-child(2n) { border-right: none; }
  .pain-card:nth-last-child(-n+2) { border-bottom: none; }

  /* ── § 03 Features (stack) ── */
  .features { padding: 96px 0 96px; }
  .features .section-intro { grid-template-columns: 1fr; }

  .feature-block {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 56px;
    margin-bottom: 56px;
  }
  .feature-block--reverse .feature-block__figure { order: 1; }
  .feature-block--reverse .feature-block__text   { order: 2; }
  .feature-block--reverse .feature-block__caption {
    left: -12px;
    right: auto;
  }
  .feature-block__no { font-size: 56px; }
  .feature-block__title { font-size: 28px; }

  /* 追加features: 4col → 2col
     修正問題B: Features グリッドは JSX 原典で「border-top + border-left のみ（右下はセル側）」
     設計。2x2 でも cell 2/4 の border-right が右外枠を形成する必要がある。
     Phase 2 で誤って追加した `:nth-child(2n) { border-right: none }` を撤去。 */
  .features-grid { margin-top: 64px; }
  .features-grid__items { grid-template-columns: repeat(2, 1fr); }

  /* ── § 04 UseCases (縦積み) ── */
  .usecases { padding: 80px 0; }
  .usecases__layout {
    /* Phase 5.5-B 問題9: grid-template-areas で intro → table → note の順に積む */
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "table"
      "note";
    row-gap: 32px;
    column-gap: 0;
  }
  .usecases__note {
    /* margin-top: 24px は row-gap に集約（重複防止） */
  }
  .usecase-row {
    grid-template-columns: 160px 1fr;
  }
  .usecase-row__category { padding-right: 16px; }

  /* ── § 05 Spec (微調整) ── */
  .spec { padding: 96px 0 112px; }
  .spec__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .spec__doc-meta { text-align: left; padding-bottom: 0; }
  .spec-sheet__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .spec-sheet__thead,
  .spec-row {
    grid-template-columns: 56px 160px 1fr 100px;
  }

  /* ── § 06 Size&Price (カード型) ── */
  .size-price { padding: 96px 0 96px; }

  .size-table {
    border: none;
    background: transparent;
  }
  .size-table__header {
    border: 1px solid var(--c-ink);
    border-bottom: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px;
  }
  .size-table__thead { display: none; }
  .size-table__footer {
    border: 1px solid var(--c-ink);
    border-top: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 20px;
  }

  .size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "no     model"
      "photo  drawing"
      "price  price"
      "weight use";
    border: 1px solid var(--c-ink);
    border-top: none;
    min-height: auto;
  }
  .size-row:first-of-type { border-top: none; }
  .size-row:hover { background: var(--c-white); }
  .size-row--recommended { background: var(--c-green-tint); }

  .size-row__no {
    grid-area: no;
    padding: 16px;
    font-size: 18px;
    border-right: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
  }
  .size-row__model {
    grid-area: model;
    padding: 16px;
    border-bottom: var(--rule-hairline);
  }
  .size-row__photo {
    grid-area: photo;
    border-right: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
  }
  .size-row__drawing {
    grid-area: drawing;
    border-right: none;
    border-bottom: var(--rule-hairline);
  }
  .size-row__price {
    grid-area: price;
    padding: 20px 16px;
    border-right: none;
    border-bottom: var(--rule-hairline);
    justify-content: center;
    background: var(--c-ink-05);
  }
  .size-row--recommended .size-row__price {
    background: linear-gradient(180deg, var(--c-green-pale) 0%, var(--c-green-tint) 100%);
  }
  .size-row__weight {
    grid-area: weight;
    padding: 14px 16px;
    border-right: var(--rule-hairline);
    font-size: 16px;
  }
  .size-row__use {
    grid-area: use;
    padding: 14px 16px;
    white-space: normal;
  }

  /* size-price 注記 */
  .size-price__notes-grid { grid-template-columns: 1fr; }

  /* ── § 07 Cases (2 col のまま) ── */
  .cases { padding: 96px 0; }
  .case-card { padding: 28px 24px 32px; }
  .case-card__no { font-size: 40px; }

  /* ── § 08 Voices (縦2 → 3列維持だが padding 詰める) ── */
  .voices { padding: 96px 0; }
  .voice-card { padding: 32px 24px 36px; }

  /* ── § 09 FAQ ── */
  .faq { padding: 96px 0; }
  .faq__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .faq__doc-meta { text-align: left; padding-bottom: 0; }
  .faq-item__summary { padding: 20px 24px; grid-template-columns: 60px 1fr 40px; }
  .faq-item__answer  { padding: 0 24px 24px; grid-template-columns: 60px 1fr 40px; }
  .faq-item__question { font-size: 15px; }

  /* ── § 10 Contact ── */
  .contact { padding: 96px 0; }
  .contact-form__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .form-row { grid-template-columns: 80px 200px 1fr; }
  .form-row__no     { padding: 16px 14px; font-size: 18px; }
  .form-row__label  { padding: 16px; }
  .contact-form__submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .contact-form__submit { justify-content: center; padding: 18px 32px; }

  /* ── Footer ── */
  .footer { padding: 64px 0 28px; }
  .footer__top {
    gap: 40px;
    padding-bottom: 36px;
    margin-bottom: 28px;
  }
  .footer__heading { font-size: 28px; }
}

/* =========================================================
   § MOBILE BREAKPOINT — 〜767
   - 全セクション 1 カラム化
   - Hero: 写真 → コピー の順に縦積み
   - Size&Price: カード型はタブレットから継承（columns=2 → 1）
   - Cases: scroll-snap 横スライド + ドット
   - Voices: 縦1列
   - Form: 5項目フルスタック
   - Footer: 縦積み
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --pad-x:        20px;
    --sec-pad-y-sm: 64px;
    --sec-pad-y-md: 72px;
  }

  body { font-size: 14px; line-height: 1.75; }

  /* Phase 5.5-B 問題5: sections-mobile.jsx SectionHeaderM h2 は fontSize: 34 */
  .section-title { font-size: 34px; line-height: 1.22; }
  .section-header { margin-bottom: 28px; }
  .section-lead { font-size: 13px; line-height: 2; }

  .eyebrow { font-size: 10px; letter-spacing: 0.3em; gap: 10px; margin-bottom: 14px; }
  .eyebrow__rule { width: 22px; }
  .eyebrow__no   { font-size: 9px; }

  .section-footnote { font-size: 10.5px; }

  /* ── Masthead (2段組み) ── */
  .masthead {
    padding: 12px var(--pad-x);
    font-size: 10px;
    letter-spacing: 0.14em;
    line-height: 1.4;
    gap: 8px;
    flex-wrap: wrap;
  }
  .masthead__group { gap: 10px; flex-wrap: wrap; }

  /* ── § 01 Hero (縦積み: 写真 → コピー) ──
     モバイルはベース (min-height: 100vh / max-height: 1200px / display:flex) を
     解除し、コンテンツ自然高さ駆動に戻す */
  .hero {
    min-height: 0;
    max-height: none;
    height: auto;
    display: block;
  }
  .hero__body {
    flex: initial;  /* base の flex:1 を解除 */
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "photo"
      "copy";
  }
  .hero__left  { grid-area: copy; padding: 28px 0 8px; }
  .hero__left-inner { padding: 0 20px; max-width: none; }
  /* モバイルでは CTA 押し出し不要 → padding-top も控えめに */
  .hero__actions { margin-top: 0; padding-top: 0; }
  .hero__right {
    grid-area: photo;
    aspect-ratio: 375 / 280;
    border-bottom: 1px solid var(--c-ink-10);
  }

  .hero__eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    gap: 10px;
    margin-bottom: 20px;
  }
  .hero__eyebrow-rule { width: 24px; }
  .hero__title {
    /* Phase 5.5-B 問題5: hero-mobile.jsx L154 は 54 */
    font-size: 54px;
    line-height: 1.0;
    margin-bottom: 24px;
  }
  .hero__title--outline { -webkit-text-stroke: 1.5px var(--c-ink); }

  .hero__specs {
    display: block;
    margin: 0;
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
  }
  .hero__spec {
    width: 100%;
    padding: 11px 0;
    border-bottom: var(--rule-hairline);
  }
  .hero__spec + .hero__spec {
    padding: 11px 0;
    border-left: none;
  }
  .hero__spec:last-child { border-bottom: none; }

  .hero__lead {
    font-size: 14px;
    line-height: 2;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn--primary {
    justify-content: center;
    min-height: 56px;
    padding: 16px 24px;
    font-size: 15px;
    letter-spacing: 0.07em;
  }

  /* Phase 5.5-B 問題6: モバイルセカンダリ CTA「価格を見る ↓」
     (hero-mobile.jsx L206-215 準拠) */
  .hero__cta-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1.5px solid var(--c-ink-20);
    color: var(--c-ink);
    background: transparent;
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-decoration: none;
    font-family: var(--font-sans);
  }

  /* Phase 5.5-B 問題6: DIRECT LINE ブロックを独立配置
     (hero-mobile.jsx L217-250 準拠) */
  .hero__direct-line {
    padding: 14px 16px;
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
  }
  .hero__direct-line-text { flex: 1 1 auto; min-width: 0; }
  .hero__direct-line-label {
    font-size: 9.5px;
    letter-spacing: 0.25em;
  }
  .hero__direct-line-number {
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
  }
  /* Phase 5.5-B 問題6: タップ電話アイコン 44x44 円ボタン */
  .hero__direct-line-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--c-green-mid);
    color: var(--c-white);
    flex-shrink: 0;
    text-decoration: none;
  }
  .hero__direct-line-icon:hover { background: var(--c-green-deep); }
  .hero__direct-line-number { font-size: 22px; }

  /* Hero photo overlays (縮小) */
  .hero__badge {
    width: 84px; height: 84px;
    top: 16px; right: 16px;
  }
  .hero__badge-top { font-size: 9px; letter-spacing: 0.12em; }
  .hero__badge-main { font-size: 18px; }
  .hero__badge-sub { font-size: 8.5px; letter-spacing: 0.1em; }
  .hero__caption {
    left: 16px;
    right: 16px;
    bottom: 12px;
  }
  .hero__caption-label { font-size: 9.5px; letter-spacing: 0.22em; margin-bottom: 3px; }
  .hero__caption-text { font-size: 13px; line-height: 1.55; }
  .hero__edge-label {
    left: 4px;
    font-size: 8px;
    letter-spacing: 0.4em;
  }

  /* ── § 02 Pain (1 col) ──
     Phase 5.5-B 問題7: JSX は padding '64px 0 72px' */
  .pain { padding: 64px 0 72px; }
  .pain__grid {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--c-ink-20);
  }
  .pain-card {
    padding: 22px 0 26px;
    border-right: none !important;
    border-bottom: var(--rule-hairline);
  }
  .pain-card:last-child { border-bottom: none; }
  .pain-card__no { font-size: 34px; }
  /* Phase 5.5-B 問題5: sections-mobile.jsx PainSectionMobile は fontSize: 18 */
  .pain-card__title { font-size: 18px; margin-bottom: 8px; }
  /* Phase 5.5-B 問題7: body は JSX で fontSize 12.5 / lineHeight 1.9 */
  .pain-card__body { font-size: 12.5px; line-height: 1.9; }
  /* Phase 5.5-B 問題7: 強制改行 <br> をモバイルで無効化。
     JSX モバイルでは改行なしで自然に折り返すため、<br>が残ると
     「錆が進行し、/ 数年で...」のように早い位置で改行されて
     右側に不自然な空白が生じる */
  .pain-card__body br,
  .feature-mini__body br { display: none; }
  /* Phase 5.5-B 問題7: リード文下のマージンを JSX の 28 に揃える */
  .pain .section-lead { margin-bottom: 0; }
  .pain .section-intro { margin-bottom: 28px; }

  /* ── § 03 Features (全stack) ──
     Phase 5.5-B 問題8: JSX は padding '72px 0 64px' */
  .features { padding: 72px 0 64px; }
  /* Phase 5.5-B 問題8: sections-mobile.jsx FeatureSectionMobile の
     リード文と最初のブロック間マージンを JSX の 36 に揃える */
  .features .section-intro { margin-bottom: 36px; }
  .feature-block {
    gap: 22px;
    padding-bottom: 44px;
    margin-bottom: 44px;
  }
  .feature-block__no       { font-size: 44px; }
  /* Phase 5.5-B 問題5: JSX は fontSize: 24 */
  .feature-block__title    { font-size: 24px; margin-bottom: 14px; }
  .feature-block__category { font-size: 10px; }
  .feature-block__body     { font-size: 13px; line-height: 1.95; }

  .features-grid { margin-top: 48px; }
  .features-grid__items { grid-template-columns: repeat(2, 1fr); }
  .feature-mini {
    padding: 18px 16px 20px;
    min-height: 150px;
  }
  .feature-mini__no    { font-size: 28px; margin-bottom: 10px; }
  .feature-mini__title { font-size: 14px; }
  .feature-mini__body  { font-size: 10.5px; line-height: 1.8; }

  /* ── § 04 UseCases ──
     Phase 5.5-B 問題9: JSX は padding '72px 0' */
  .usecases { padding: 72px 0; }

  .usecase-row {
    grid-template-columns: 1fr;
    padding: 20px 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  /* Phase 5.5-B 問題9: CATEGORY ヘッダを「(no + jp) ... en」の
     2グループ左右分離レイアウトに。現状の justify-content: space-between
     + 3 子要素だと jp が中央に偏るため、jp に margin-right: auto で
     en だけを右端に追い出す */
  .usecase-row__category {
    padding: 0 0 14px;
    border-right: none;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
  }
  .usecase-row__category-no { font-size: 10px; letter-spacing: 0.25em; }
  .usecase-row__category-jp {
    font-size: 20px;
    margin-right: auto; /* ← en を右端へ押し出す */
  }
  .usecase-row__category-en { font-size: 9px; letter-spacing: 0.2em; }
  .usecase-row__items {
    grid-template-columns: 1fr;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .usecase-row__items li {
    padding: 10px 0 10px 14px;
    min-height: 44px;
    align-items: center;
  }
  .usecase-row__items li + li {
    border-left: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
  }
  .usecase-row__items li > span:last-child { font-size: 14.5px; }

  .usecases__note { margin-top: 20px; padding: 14px 16px; font-size: 10.5px; }

  /* ── § 05 Spec (横スクロール) ── */
  .spec { padding: 72px 0 80px; }

  /* Phase 5.5-B 問題10 + 修正問題A: sections-mobile.jsx SpecSectionMobile L499-509 準拠。
     モバイルの .spec__intro は flex-direction: column + align-items: flex-start のため、
     .spec__doc-meta はそのままだと幅が intrinsic（文字分のみ）になり
     justify-content: space-between が無効化される。
     align-self: stretch + width: 100% で親コンテナ全幅へ拡張し、
     左右両端への配置を有効化する。 */
  .spec__doc-meta {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    width: 100%;
    text-align: left;
    padding: 4px 0 14px;
    margin-bottom: 20px;
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
    font-size: 10.5px;
    line-height: 1.8;
  }

  /* 余白の二重加算を解消: JSX はフラット block 配置で、各要素自身の
     marginBottom のみで垂直リズムを作る設計。タブレットから継承される
     .spec__intro の `gap: 16` と `margin-bottom: 32` を相殺して、
     各要素の mb のみが効くようにする。
       title → doc-meta   : section-header mb 28 のみ
       doc-meta → scroll  : doc-meta mb 20 のみ
       scroll → table     : scroll-hint mb 8 のみ */
  .spec__intro {
    gap: 0;
    margin-bottom: 0;
  }
  .spec__doc-meta-item { display: inline; }
  /* PAGE: 05/10 はモバイルでは非表示 (JSX にも無し) */
  .spec__doc-meta-item--desktop { display: none; }

  /* Phase 5.5-B 問題10: モバイル限定「SWIPE → | 06 ITEMS」ヒント行 */
  .spec__scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--c-ink-40);
    font-weight: var(--fw-bold);
  }
  .spec__scroll-hint-rule { flex: 1; height: 1px; background: var(--c-ink-10); }

  .spec-sheet {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Phase 5.5-B 問題11: 緑ヘッダが overflow-x スクロール先で途切れるのを防止
     min-width: 640 で内部全幅に伸長 */
  .spec-sheet__header {
    padding: 14px 20px;
    flex-shrink: 0;
    min-width: 640px;
  }
  .spec-sheet__title { font-size: 12px; letter-spacing: 0.2em; }
  .spec-sheet__sub   { font-size: 9.5px; }
  .spec-sheet__thead,
  .spec-row {
    grid-template-columns: 56px 160px 1fr 108px;
    min-width: 640px;
  }
  .spec-sheet__thead { min-width: 640px; }
  .spec-sheet__footer { padding: 10px 20px; font-size: 10px; min-width: 640px; }
  .spec-row__no   { font-size: 18px; padding: 14px 12px; }
  .spec-row__item { padding: 14px; font-size: 14px; }
  .spec-row__spec { padding: 14px; font-size: 12px; line-height: 1.65; }
  .spec-row__cat  { padding: 14px; font-size: 10px; letter-spacing: 0.16em; }

  .spec-note { font-size: 11px; padding: 12px 14px; }
  .spec-note__tag { font-size: 10px; letter-spacing: 0.18em; }

  /* ── § 06 Size&Price (カード: 1col → 上下) ── */
  .size-price { padding: 72px 0; }

  /* Phase 5.5-B 問題12: PHOTO / DRAWING を横並び 2 列に変更
     §01〜05 のモバイルデザイン言語（詰まった一覧性）に合わせて
     カード縦長さを削減 */
  .size-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "no    model"
      "photo drawing"
      "price price"
      "weight use";
  }
  .size-row__photo,
  .size-row__drawing {
    border-right: var(--rule-hairline);
    padding: 12px;
  }
  .size-row__drawing { border-right: none; }
  .size-row__name { font-size: 22px; }
  /* Phase 5.5-B 問題13: ML おすすめ行の価格セルのグラデーションを撤去。
     カード全体が既に --c-green-tint 背景なので、価格セルは単色継承で統一 */
  .size-row--recommended .size-row__price {
    background: transparent;
  }

  .size-table__header { padding: 14px 20px; }
  .size-table__title { font-size: 12px; letter-spacing: 0.2em; }
  .size-table__sub { font-size: 9.5px; }

  /* ── § 07 Cases (scroll-snap 横スライド) ── */
  .cases { padding: 72px 0 80px; }
  .cases__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border: none;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .cases__grid::-webkit-scrollbar { display: none; }

  .case-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid var(--c-ink-20);
    padding: 24px 20px 28px;
  }
  .case-card__no { font-size: 36px; }

  .cases__dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    padding: 0;
  }
  .cases__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-ink-20);
    padding: 0;
    border: 0;
    transition: background 150ms ease, transform 150ms ease;
  }
  .cases__dot::before {
    /* 44px タップ領域確保 */
    content: '';
    position: absolute;
    inset: -18px;
  }
  .cases__dot.is-active {
    background: var(--c-green-deep);
    transform: scale(1.3);
  }
  .cases__dot:focus-visible {
    outline: 2px solid var(--c-green-deep);
    outline-offset: 4px;
  }

  /* ── § 08 Voices (縦1列) ── */
  .voices { padding: 72px 0; }
  .voices__grid {
    grid-template-columns: 1fr;
  }
  .voice-card {
    padding: 32px 20px 36px;
    border-right: none;
    border-bottom: var(--rule-hairline);
  }
  .voice-card:last-child { border-bottom: none; }
  .voice-card__body p { font-size: 13.5px; line-height: 1.95; }

  /* ── § 09 FAQ ── */
  .faq { padding: 72px 0; }
  .faq-item__summary {
    grid-template-columns: 48px 1fr 32px;
    padding: 18px 20px;
  }
  .faq-item__answer {
    grid-template-columns: 48px 1fr 32px;
    padding: 0 20px 20px;
  }
  .faq-item__num      { font-size: 18px; }
  .faq-item__question { font-size: 14px; line-height: 1.55; }
  .faq-item__icon     { font-size: 20px; }
  .faq-item__answer p { font-size: 13px; padding-left: 14px; }

  /* ── § 10 Contact (縦積み + タップ領域44px以上) ── */
  .contact { padding: 72px 0 80px; }

  .form-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "no"
      "label"
      "input";
    min-height: auto;
    padding: 0;
  }
  .form-row--textarea { min-height: auto; }

  .form-row__no {
    grid-area: no;
    padding: 12px 16px 4px;
    border-right: none;
    background: var(--c-ink-05);
    font-size: 16px;
  }
  .form-row__label {
    grid-area: label;
    padding: 4px 16px 12px;
    border-right: none;
    background: var(--c-ink-05);
  }
  .form-row__label-main label { font-size: 14px; }
  .form-row__input {
    grid-area: input;
    padding: 14px 16px 16px;
    background: var(--c-white);
  }
  .form-row__input input {
    min-height: 44px;
    font-size: 16px; /* iOS でズームされないよう16px */
  }
  .form-row__input textarea {
    min-height: 140px;
    font-size: 15px;
  }

  .contact-form__consent {
    padding: 20px 16px;
    gap: 12px;
  }
  .contact-form__consent label { font-size: 13.5px; }

  .contact-form__submit-row { padding: 20px 16px; }
  .contact-form__submit {
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.18em;
    padding: 18px 16px;
    min-height: 56px;
  }
  .contact-form__submit span { white-space: nowrap; }

  /* ── Footer (縦積み) ── */
  .footer { padding: 56px 0 24px; }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 28px;
    margin-bottom: 24px;
  }
  .footer__heading { font-size: 24px; margin-bottom: 14px; }
  .footer__body { font-size: 13.5px; line-height: 2; }

  .footer__info { padding: 20px; }
  .footer__info-row {
    grid-template-columns: 64px 52px 1fr;
    padding: 8px 0;
  }
  .footer__info-jp { font-size: 11.5px; }
  .footer__info-en { font-size: 9px; }
  .footer__info-row dd { font-size: 12.5px; }

  .footer__corp-link {
    margin-top: 16px;
    padding: 12px 14px;
  }
  .footer__corp-link-label { font-size: 11.5px; }
  .footer__corp-link-cta   { font-size: 11px; letter-spacing: 0.18em; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 10px;
    padding-top: 20px;
  }
  .footer__links { flex-wrap: wrap; gap: 10px; font-size: 10px; }
}

/* =========================================================
   Phase 3: Size-row thumbnail triggers (Lightbox)
   ========================================================= */
.size-row__photo:focus-visible,
.size-row__drawing:focus-visible {
  outline: 2px solid var(--c-green-deep);
  outline-offset: -2px;
}

/* =========================================================
   Phase 3: Lightbox
   ========================================================= */
body.is-lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  font-family: var(--font-sans);
}
.lightbox[hidden] { display: none !important; }
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  /* 工業グリーンを極薄でまぜた黒オーバーレイ */
  background:
    radial-gradient(ellipse at center, rgba(27, 58, 42, 0.25) 0%, rgba(0, 0, 0, 0) 70%),
    rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  width: min(92vw, 880px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  transform: translateY(10px);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox.is-open .lightbox__dialog { transform: translateY(0); }

/* ── Header ── */
.lightbox__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--c-ink);
  gap: 16px;
}
.lightbox__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lightbox__type-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  font-weight: var(--fw-bold);
  color: var(--c-green-mid);
  text-transform: uppercase;
}
.lightbox__title {
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: var(--fw-black);
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.lightbox__close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lightbox__close:hover {
  background: var(--c-ink);
  color: var(--c-white);
}
.lightbox__close:focus-visible {
  outline: 2px solid var(--c-green-deep);
  outline-offset: 2px;
}

/* ── Stage (media + nav) ── */
.lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 68px;
  background: var(--c-green-tint);
  overflow: auto;
}
.lightbox__media {
  max-width: min(70vw, 520px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__clone {
  width: 100%;
  display: block;
}
/* Phase 5: img 単独化に合わせて拡大表示スタイルを簡素化 */
img.lightbox__clone {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--c-green-tint);
  border: 1px solid var(--c-ink-20);
}
.lightbox__clone.drawing {
  aspect-ratio: 1 / 1;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-ink);
  background: var(--c-white);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lightbox__nav:hover {
  background: var(--c-green-deep);
  color: var(--c-white);
  border-color: var(--c-green-deep);
}
.lightbox__nav:focus-visible {
  outline: 2px solid var(--c-green-deep);
  outline-offset: 2px;
}
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

/* ── Footer (meta + counter) ── */
.lightbox__footer {
  border-top: 1px solid var(--c-ink);
  padding: 16px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 10px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--c-ink-80);
  line-height: 1.6;
}
.lightbox__meta-item {
  font-weight: var(--fw-bold);
}
.lightbox__meta-sep {
  color: var(--c-ink-20);
  font-family: var(--font-display);
}
.lightbox__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-ink-10);
  width: 100%;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--c-ink-60);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}
.lightbox__counter-current { color: var(--c-green-deep); font-size: 18px; }
.lightbox__counter-sep     { font-size: 14px; color: var(--c-ink-20); }
.lightbox__counter-total   { font-size: 14px; }

/* ── Lightbox: mobile adjustments ── */
@media (max-width: 767px) {
  .lightbox__dialog {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border: none;
    box-shadow: none;
  }
  .lightbox__header { padding: 14px 16px 10px; }
  .lightbox__title { font-size: 20px; }
  .lightbox__type-label { font-size: 10px; letter-spacing: 0.22em; }
  .lightbox__stage {
    padding: 20px 48px;
  }
  .lightbox__media { max-width: min(84vw, 420px); }
  .lightbox__nav {
    width: 36px; height: 36px;
  }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .lightbox__footer { padding: 12px 16px 16px; }
  .lightbox__meta { font-size: 11.5px; }
}

/* =========================================================
   Phase 3: Form validation — error states
   ========================================================= */
.form-row.has-error .form-row__input input,
.form-row.has-error .form-row__input textarea {
  border-color: var(--c-rust);
  box-shadow: 0 0 0 2px rgba(139, 68, 36, 0.12);
}
.form-row__error {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* Phase 5.5-A 問題4: 親 .form-row__input に gap:10px を設定したため、
     margin-top は不要（gap で十分な間隔を確保）。 */
  margin-top: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-rust);
}
.form-row__error-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--c-rust);
  transform: translateY(1px);
}
.form-row__error-text {
  font-weight: var(--fw-bold);
}

/* Consent error */
.contact-form__consent.has-error {
  background: var(--c-rust-bg);
  border-left: 3px solid var(--c-rust);
  padding-left: calc(28px - 3px);
}
.contact-form__consent-error {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-rust);
  font-weight: var(--fw-bold);
}

/* Phase 5.5-B 問題14: 旧いモバイル form-row__error padding 上書きを撤去。
   Phase 5.5-A の flex-direction: column + gap で適切な位置に表示されるため
   追加 padding は不要（過度な左右インデントを生むため削除） */
@media (max-width: 767px) {
  .contact-form__consent.has-error {
    padding-left: calc(16px - 3px);
  }
}

/* =========================================================
   Phase 4: Honeypot (visually hidden, not tabbable, not announced)
   ========================================================= */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* =========================================================
   Phase 4: General form error banner (server-side validation)
   ========================================================= */
.contact-form__general-error {
  padding: 16px 24px;
  background: var(--c-rust-bg);
  border-bottom: 1px solid var(--c-rust);
  color: var(--c-rust);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.7;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.contact-form__general-error-tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: var(--fw-xbold);
  color: var(--c-rust);
  flex-shrink: 0;
}
.contact-form__general-error-body {
  font-weight: var(--fw-bold);
}

@media (max-width: 767px) {
  .contact-form__general-error {
    padding: 14px 16px;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }
}

/* =========================================================
   Phase 4: Thanks page
   ========================================================= */
.thanks-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.thanks {
  flex: 1;
  padding: 96px 0 120px;
  background: var(--c-paper);
  border-top: var(--rule-hairline);
  position: relative;
}
.thanks::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-green-deep);
}

.thanks__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: var(--fw-bold);
  color: var(--c-green-mid);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.thanks__eyebrow-rule { width: 32px; height: 2px; background: currentColor; }
.thanks__eyebrow-dot  { color: var(--c-ink-20); }
.thanks__eyebrow-no   { font-size: 10px; color: var(--c-ink-40); font-family: var(--font-mono); }

.thanks__title {
  font-family: var(--font-mincho);
  font-size: 72px;
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin: 0 0 36px;
}

.thanks__rule {
  height: 1px;
  background: var(--c-ink);
  margin-bottom: 36px;
}

.thanks__body { margin-bottom: 40px; }

.thanks__lead {
  font-family: var(--font-mincho);
  font-size: 18px;
  line-height: 2;
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  margin: 0 0 28px;
}

.thanks__notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 22px;
  background: var(--c-white);
  border-left: 3px solid var(--c-green-deep);
}
.thanks__notice-tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-green-deep);
  font-weight: var(--fw-xbold);
  flex-shrink: 0;
}
.thanks__notice-body p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--c-ink-80);
  margin: 0;
}
.thanks__notice-body p + p { margin-top: 10px; }
.thanks__notice-body strong { color: var(--c-rust); font-weight: var(--fw-bold); }

.thanks__meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink-40);
  letter-spacing: 0.09em;
  margin-bottom: 36px;
  padding-top: 20px;
  border-top: 1px dashed var(--c-ink-10);
}
.thanks__time {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
}

.thanks__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.thanks__actions .btn {
  padding: 20px 40px;
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* compact footer on thanks page */
.footer--compact { padding: 36px 0 24px; }
.footer__bottom--compact {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 1023px) {
  .thanks { padding: 64px 0 96px; }
  .thanks__title { font-size: 56px; }
}
@media (max-width: 767px) {
  .thanks { padding: 48px 0 72px; }
  .thanks__eyebrow { font-size: 10px; gap: 10px; margin-bottom: 18px; }
  .thanks__title { font-size: 40px; margin-bottom: 28px; }
  .thanks__rule { margin-bottom: 28px; }
  .thanks__lead { font-size: 15px; line-height: 1.95; margin-bottom: 20px; }
  .thanks__notice { padding: 14px 16px; gap: 10px; grid-template-columns: 1fr; }
  .thanks__notice-body p { font-size: 12.5px; }
  .thanks__meta { flex-direction: column; gap: 4px; align-items: flex-start; }
  .thanks__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }
}

/* =========================================================
   Phase 5.5-C: Privacy Policy page
   thanks-page と同じページシェル構造を踏襲した読み物ページ
   ========================================================= */
.privacy-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.privacy {
  flex: 1;
  padding: 96px 0 120px;
  background: var(--c-paper);
  border-top: var(--rule-hairline);
  position: relative;
}
.privacy::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-green-deep);
}

.privacy__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: var(--fw-bold);
  color: var(--c-green-mid);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.privacy__eyebrow-rule { width: 32px; height: 2px; background: currentColor; }
.privacy__eyebrow-dot  { color: var(--c-ink-20); }
.privacy__eyebrow-no   { font-size: 10px; color: var(--c-ink-40); font-family: var(--font-mono); }

.privacy__title {
  font-family: var(--font-mincho);
  font-size: 56px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin: 0 0 28px;
}

.privacy__rule {
  height: 1px;
  background: var(--c-ink);
  margin-bottom: 36px;
}

.privacy__intro {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
  color: var(--c-ink-80);
  margin: 0 0 48px;
}

.privacy__section {
  padding-top: 32px;
  margin-bottom: 32px;
  border-top: 1px solid var(--c-ink-10);
}
.privacy__section:first-of-type { border-top: none; padding-top: 0; }

.privacy__heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--fw-xbold);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 18px;
}
.privacy__heading-no {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-xbold);
  color: var(--c-green-deep);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.privacy__section p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 2;
  color: var(--c-ink-80);
  margin: 0 0 14px;
}
.privacy__section p:last-child { margin-bottom: 0; }

/* Phase 5.5-C 修正: ダッシュ（—）を親要素の内側に配置。
   旧実装は left: -2px + transform: translateX(-100%) で
   ダッシュが左ボーダーより外側にはみ出していた。
   list に padding-left を設け、ダッシュを li の padding-left 内に収める。 */
.privacy__list {
  margin: 0 0 14px;
  padding: 0 0 0 22px;   /* ダッシュ分の左インデント（22px = ボーダー2 + 余白4 + ダッシュ16） */
  list-style: none;
  border-left: 2px solid var(--c-green-pale);
}
.privacy__list li {
  padding: 10px 0 10px 16px; /* テキストをダッシュからさらに 16px 右へ */
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-80);
  position: relative;
}
.privacy__list li + li { border-top: 1px dashed var(--c-ink-10); }
.privacy__list li::before {
  content: '—';
  position: absolute;
  left: 0;            /* li 自身の左端（= list padding-left 22 の内側） */
  top: 10px;          /* li の padding-top と一致させる */
  color: var(--c-green-mid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9;
}

.privacy__info {
  border-top: 1px solid var(--c-ink-10);
  border-bottom: 1px solid var(--c-ink-10);
  padding: 4px 0;
}
.privacy__info-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-ink-10);
  align-items: baseline;
  gap: 14px;
}
.privacy__info-row:last-child { border-bottom: none; }
.privacy__info-row dt {
  font-family: var(--font-mincho);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-60);
}
.privacy__info-row dd {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: 1.7;
}
.privacy__info-row dd a { text-decoration: underline; text-underline-offset: 3px; }

.privacy__placeholder {
  display: inline-block;
  background: var(--c-warn-bg);
  border: 1px dashed var(--c-warn-border);
  color: var(--c-rust);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  margin: 0 2px;
}

.privacy__contact {
  padding: 18px 22px;
  background: var(--c-white);
  border-left: 3px solid var(--c-green-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}
.privacy__contact-line {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--c-ink-80);
}
.privacy__contact-line a {
  color: var(--c-green-deep);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed var(--c-ink-10);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-ink-60);
  letter-spacing: 0.06em;
}
.privacy__meta-item { white-space: nowrap; }

.privacy__actions {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.privacy__actions .btn {
  padding: 18px 36px;
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ── Privacy tablet ── */
@media (max-width: 1023px) {
  .privacy { padding: 64px 0 96px; }
  .privacy__title { font-size: 44px; }
}

/* ── Privacy mobile ── */
@media (max-width: 767px) {
  .privacy { padding: 48px 0 72px; }
  .privacy__eyebrow { font-size: 10px; gap: 10px; margin-bottom: 18px; }
  .privacy__eyebrow-rule { width: 22px; }
  .privacy__title { font-size: 32px; margin-bottom: 22px; }
  .privacy__rule { margin-bottom: 28px; }
  .privacy__intro { font-size: 13.5px; line-height: 2; margin-bottom: 36px; }
  .privacy__section { padding-top: 24px; margin-bottom: 24px; }
  .privacy__heading { font-size: 17px; gap: 10px; margin-bottom: 14px; }
  .privacy__heading-no { font-size: 18px; }
  .privacy__section p { font-size: 13px; line-height: 1.95; }
  /* Phase 5.5-C 修正: モバイルもダッシュがボーダー外に出ないよう同じ相対配置を維持 */
  .privacy__list { padding-left: 18px; }
  .privacy__list li { font-size: 13px; padding: 8px 0 8px 14px; }
  .privacy__list li::before { top: 8px; font-size: 13px; }
  .privacy__info-row { grid-template-columns: 80px 1fr; gap: 10px; }
  .privacy__info-row dt { font-size: 12px; }
  .privacy__info-row dd { font-size: 13px; }
  .privacy__contact { padding: 14px 16px; }
  .privacy__contact-line { font-size: 13px; }
  .privacy__meta { flex-direction: column; gap: 4px; font-size: 11px; }
  .privacy__actions { margin-top: 36px; }
  .privacy__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}