@charset "UTF-8";
/*
Theme Name:  OrigenAI
Theme URI:   https://origen.click/
Author:      GATUN株式会社
Author URI:  https://gatun.co.jp
Description: OrigenAI コーポレートサイト専用テーマ。静的サイトのデザインを維持しつつ、レスポンシブ・アクセシビリティ・SEO を再設計したクラシックテーマ。ニュースと導入事例のみ管理画面から編集できる。
Version:     1.0.0
Requires at least: 6.4
Tested up to:      6.8
Requires PHP:      8.1
License:     Proprietary
Text Domain: origenai
Tags:        one-column, custom-menu, translation-ready
*/

/* ==========================================================================
   OrigenAI design system
   --------------------------------------------------------------------------
   置き換えたもの:
     - インライン style 属性 1,996 個 / 宣言セット 349 種
     - [style*="…"] 属性部分一致の上書きシート約 60 ルール（うち 21 は一致 0 件）
   1440px 時点で旧デザインとピクセル一致するよう、clamp() の係数は
   375px / 1440px の 2 点線形フィットの厳密解を入れている。
   ブレークポイント: sm 480 / md 700 / lg 900 / xl 1024 (px, rem 指定)
   ========================================================================== */

@layer tokens, reset, layout, components, utilities;

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* --- palette (静的サイトからの実値) ------------------------------- */
    --c-ink:          #22344a;
    --c-ink-strong:   #0e2740;
    --c-ink-muted:    #5d6f82;   /* 5.17:1 on #fff — 合格 */
    --c-blue:         #0098ff;   /* 装飾専用 (3.03:1) */
    --c-green:        #34ac77;   /* 装飾専用 (2.91:1) */
    --c-lime:         #b0d94d;
    --c-olive:        #8ab52f;

    /* --- 文字・アイコン用の a11y 対応色 (すべて #fff 上で 4.5:1 以上) --- */
    --c-blue-ink:     #0072c6;   /* 4.97:1 */
    --c-green-ink:    #17845a;   /* 4.68:1 */
    --c-danger-ink:   #c1392c;   /* 5.45:1 */

    --c-border:       #dfe9f1;
    --c-border-soft:  #eef4f8;
    --c-border-blue:  #cfe6f8;
    --c-border-field: #7f96a8;   /* 3.08:1 — 枠線が唯一の識別手段のため */

    --c-surface:      #f4f8fb;
    --c-surface-blue: #f7fbff;
    --c-surface-tint: #f7fbfe;
    --c-navy-deep:    #0b2036;
    --c-focus:        #0e2740;   /* 15.4:1 */

    --g-brand:   linear-gradient(100deg, #0098ff 10%, #34ac77 60%, #b0d94d 105%);
    --g-brand-d: linear-gradient(135deg, #0098ff 0%,  #34ac77 62%, #b0d94d 112%);
    --g-hero:    linear-gradient(100deg, rgba(11,63,110,.34) 0%, rgba(11,63,110,0) 52%),
                 linear-gradient(100deg, #0098ff 0%, #34ac77 58%, #b0d94d 108%);
    --g-cta:     linear-gradient(105deg, #0b3f6e 0%, #12744f 100%);
    --g-strip:   linear-gradient(180deg, #f2f9fd, #f6fcf8);

    /* --- layout ------------------------------------------------------- */
    --content-max: 83rem;                                       /* 1328px */
    --gutter:   clamp(1.25rem,  0.4577rem + 3.3803vw, 3.5rem);  /*  20 →  56 */
    --inset:    clamp(0.75rem,  0.5028rem + 1.0563vw, 1.5rem);  /*  12 →  24 */
    --sec-y:    clamp(2.75rem,  1.5972rem + 4.9296vw, 5.25rem); /*  44 →  84 */
    --sec-y-sm: clamp(2rem,     1.3972rem + 2.5352vw, 3.5rem);  /*  32 →  56 */
    --card-pad: clamp(1.25rem,  0.5465rem + 3.0047vw, 2.5rem);  /*  20 →  40 */
    --gap:      clamp(1rem,     0.5915rem + 1.8779vw, 2.25rem); /*  16 →  36 */
    --gap-sm:   clamp(0.625rem, 0.4207rem + 0.939vw,  1.25rem); /*  10 →  20 */

    /* --- type --------------------------------------------------------- */
    --ff-jp: "Noto Sans JP", "Noto Sans JP fb", "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
    --ff-display: "Outfit", "Outfit fb", system-ui, sans-serif;

    --fs-display: clamp(2rem,      1.3404rem + 2.8169vw, 3.875rem);  /* 32 → 62 */
    --fs-h1:      clamp(1.9375rem, 1.4313rem + 2.1596vw, 3.375rem);  /* 31 → 54 */
    --fs-h2:      clamp(1.5rem,    1.1479rem + 1.5023vw, 2.5rem);    /* 24 → 40 */
    --fs-h3:      clamp(1.1875rem, 0.9894rem + 0.8451vw, 1.75rem);   /* 19 → 28 */
    --fs-h4:      clamp(1.0938rem, 0.9946rem + 0.4225vw, 1.375rem);  /* 17.5 → 22 */
    --fs-lead:    clamp(1.0313rem, 0.9982rem + 0.1408vw, 1.125rem);  /* 16.5 → 18 */
    --fs-body:  1rem;        /* 16px 固定 — 日本語の可読性の下限 */
    --fs-sm:    0.875rem;    /* 14px */
    --fs-xs:    0.8125rem;   /* 13px — 欧文・数値のメタ情報のみ */
    --fs-eyebrow: 0.8125rem;
    --fs-metric: clamp(1.875rem, 1.5669rem + 1.3146vw, 2.75rem);     /* 30 → 44 */

    --lh-tight: 1.28;
    --lh-head:  1.45;
    --lh-body:  1.85;
    --fw-body: 400;
    --fw-bold: 700;
    --fw-display: 900;

    /* --- radii / shadow / motion -------------------------------------- */
    --r-pill: 999px; --r-2xl: 1.75rem; --r-xl: 1.375rem; --r-lg: 1.25rem;
    --r-md: 1rem;    --r-sm: 0.875rem; --r-xs: 0.75rem;  --r-2xs: 0.5rem;

    --sh-card:   0 12px 34px rgba(14,39,64,.12);
    --sh-lift:   0 22px 46px rgba(14,39,64,.13);
    --sh-btn:    0 4px 14px  rgba(0,152,255,.30);
    --sh-btn-lg: 0 8px 24px  rgba(11,63,110,.18);
    --sh-hover:  0 12px 30px rgba(0,152,255,.34);
    --sh-float:  0 16px 44px rgba(14,39,64,.34);
    --sh-glass:  0 10px 30px rgba(14,39,64,.13);
    --sh-plan:   0 18px 44px rgba(0,152,255,.16);
    --sh-form:   0 6px 24px  rgba(14,39,64,.06);

    --ease: cubic-bezier(.22,.7,.24,1);

    /* スティッキーヘッダーの実高。アンカーのスクロール補正を駆動する。 */
    --sticky-h: 0px;
  }

  /* ハンバーガー表示域ではヘッダーが sticky ピルになる */
  @media (max-width: 63.9375rem) {          /* < xl 1024px */
    :root { --sticky-h: 3.875rem; }         /* 10px offset + 44px pill + 8px */
  }
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  /* overflow はビューポートに伝播させたいので html に置く。
     body に置くと body が潜在的スクロールコンテナになり、
     scroll-padding-top と position:sticky が壊れる。 */
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sticky-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  @supports (overflow: clip) {
    html { overflow-x: clip; }   /* スクロールコンテナを作らずクリップ */
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  body {
    margin: 0;
    font-family: var(--ff-jp);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    color: var(--c-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }

  img, svg, video { max-width: 100%; height: auto; display: block; }

  a { color: var(--c-blue-ink); text-decoration: none; }
  a:hover { color: var(--c-green-ink); text-decoration: underline; }

  ul, ol { list-style: none; margin: 0; padding: 0; }
  h1, h2, h3, h4, h5, h6, p, table, figure, dl, dd { margin: 0; }
  button { font: inherit; color: inherit; }

  h1, h2, h3, h4 { color: var(--c-ink-strong); font-weight: var(--fw-display); }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
  h3 { font-size: var(--fs-h3); line-height: 1.5; }
  h4 { font-size: var(--fs-h4); line-height: 1.6; }

  /* 日本語は分かち書きしないので、ハードな <br> ではなく balance で折る */
  h1, h2, h3 { text-wrap: balance; font-feature-settings: "palt" 1; }
  p { text-wrap: pretty; }

  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }

  :target { scroll-margin-top: calc(var(--sticky-h) + 1rem); }

  /* フォーカス表示。旧実装は outline:none + 14% の box-shadow で
     実効コントラスト約 1.1:1、事実上不可視だった。 */
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .on-dark :where(a, button, summary):focus-visible,
  .mnav__panel :where(a, button):focus-visible { outline-color: var(--c-lime); }
  :where(.input, .select, .textarea):focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 1px;
    border-color: var(--c-blue-ink);
  }
  :focus:not(:focus-visible) { outline: none; }
  main:focus { outline: none; }

  @keyframes rise      { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
  @keyframes floaty    { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-18px,22px) } }
  @keyframes pulseDot  { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.7); opacity: .45 } }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
@layer layout {
  /* .section + .container が
     padding: Npx max(56px, calc((100vw - 1440px)/2 + 56px)) Mpx  (54 箇所) を置換。
     100vw を使わないのでクラシックスクロールバー分のずれも起きない。 */
  .section   { padding-block: var(--sec-y); padding-inline: var(--gutter); }
  .container { max-width: var(--content-max); margin-inline: auto; }
  .section--tight        { padding-block: var(--sec-y-sm); }
  .section--flush-top    { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: 0; }
  .section--surface      { background: var(--c-surface); }

  /* 角丸パネルを内側に持つセクション (旧 padding: 0 24px 24px) */
  .section--inset { padding-block: 0 var(--inset); padding-inline: var(--inset); }
  .panel {
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--sec-y) var(--gutter);
    border-radius: var(--r-2xl);
    background: var(--c-surface);
  }
  .panel--brand { background: var(--c-blue); }
  .panel--cta   { background: var(--g-cta); }
  .panel--clip  { position: relative; overflow: hidden; }
  .panel__inner { position: relative; max-width: var(--content-max); margin-inline: auto; }

  /* full-bleed な子を許す殻。front-page のヒーローと指標ストリップだけで使う。 */
  .l-shell {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, var(--content-max))
      [content-end] minmax(var(--gutter), 1fr)
      [full-end];
  }
  .l-shell > *        { grid-column: content; }
  .l-shell > .u-bleed { grid-column: full; }

  /* auto-fit グリッド。メディアクエリ不要で、markup 変更で無効化されない。 */
  .grid        { display: grid; gap: var(--gap); }
  .grid--2     { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
  .grid--3     { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
  .grid--4     { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
  .grid--tight { gap: var(--gap-sm); }

  /* 非対称分割だけはブレークポイントが必要。
     カスタムプロパティは @media の条件式に使えないのでリテラルで書く。 */
  .split { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
  @media (min-width: 56.25rem) {            /* lg 900px */
    .split--hero { grid-template-columns: 1.08fr 0.92fr; align-items: end; }
    .split--faq  { grid-template-columns: 7fr 13fr;      align-items: start; }
    .split--7030 { grid-template-columns: 0.9fr 1.1fr;   align-items: start; }
    .split--even { grid-template-columns: 1fr 1fr; }
  }

  /* 画像とテキストの交互配置 (11 箇所)。order を使い、
     モバイルでは DOM 順 = 読み順を保つ。 */
  .media {
    display: grid; gap: var(--gap); align-items: center;
    background: #fff; border-radius: var(--r-xl); padding: var(--card-pad);
  }
  @media (min-width: 56.25rem) {
    .media { grid-template-columns: 1fr 1fr; }
    .media--reverse > .media__body { order: 2; }
  }

  /* 課題 → 解決 の 3 カラム (旧 1fr 44px 1fr) */
  .pain {
    display: grid; grid-template-columns: 1fr; align-items: stretch;
    border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
  }
  .pain__from { padding: 1.375rem var(--gap-sm); background: var(--c-surface); }
  .pain__to   { padding: 1.375rem var(--gap-sm); background: #fff; }
  .pain__from p { color: var(--c-ink-muted);  font-weight: var(--fw-bold); }
  .pain__to   p { color: var(--c-ink-strong); font-weight: var(--fw-bold); }
  .pain__arrow {
    display: grid; place-items: center; background: var(--c-surface);
    color: var(--c-green-ink); font-size: 1.25rem; font-weight: 900;
    min-height: 2rem; rotate: 90deg;
  }
  @media (min-width: 43.75rem) {            /* md 700px */
    .pain { grid-template-columns: 1fr 2.75rem 1fr; }
    .pain__arrow { rotate: none; min-height: auto; }
  }

  .stack      { display: flex; flex-direction: column; gap: var(--gap-sm); }
  .stack--lg  { gap: var(--gap); }
  .row        { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }
  .row--center { justify-content: center; }
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */
@layer components {

  /* --- skip link ---------------------------------------------------- */
  .skip-link {
    position: fixed; inset-inline-start: 0.75rem; inset-block-start: -4rem; z-index: 2000;
    padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-xs) var(--r-xs);
    background: var(--c-ink-strong); color: #fff;
    font-weight: var(--fw-bold); font-size: 0.9375rem; text-decoration: none;
    transition: inset-block-start .15s ease;
  }
  .skip-link:focus-visible { inset-block-start: 0; outline: 3px solid var(--c-lime); outline-offset: 2px; }

  /* --- header ------------------------------------------------------- */
  .site-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.875rem 1.125rem;
    min-height: 4.75rem; padding: 0.875rem var(--gutter);
    background: #fff; border-block-end: 1px solid var(--c-border);
  }
  .site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
  .site-header__logo svg,
  .site-header__logo img { height: 2.5rem; width: auto; }

  .gnav { margin-inline-start: auto; }
  .gnav__list { display: flex; gap: 2px; align-items: center; }
  .gnav__link {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding-inline: 0.75rem; border-radius: var(--r-2xs);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--c-ink-strong); white-space: nowrap; text-decoration: none;
  }
  .gnav__link:hover { color: var(--c-blue-ink); background: rgba(0,152,255,.06); text-decoration: none; }
  .gnav .current-menu-item > .gnav__link,
  .gnav .current_page_item > .gnav__link,
  .gnav__link[aria-current="page"] { color: var(--c-blue-ink); background: rgba(0,152,255,.08); }
  .gnav__dot {
    width: 6px; height: 6px; margin-inline-start: 6px; border-radius: 50%;
    background: var(--c-lime); animation: pulseDot 2.6s ease-in-out infinite;
  }
  .site-header__text-link {
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--c-ink-strong); white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none;
  }

  /* --- mobile nav (details/summary — JS 無しで開閉する) --------------- */
  .mnav { display: none; position: static; }
  .mnav__btn {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.3125rem;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--g-brand-d); box-shadow: 0 6px 18px rgba(0,152,255,.34);
    list-style: none; position: relative; z-index: 1600;
  }
  .mnav__btn::-webkit-details-marker { display: none; }
  .mnav__btn::marker { content: ""; }
  .mnav__bar {
    display: block; width: 1.0625rem; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .2s var(--ease), opacity .2s ease;
  }
  /* バーは位置ではなくクラスで指定する。summary の中に
     アクセシブルな名前用の .u-vh を入れると nth-of-type がずれるため。 */
  .mnav[open] .mnav__bar--1 { transform: translateY(7px)  rotate(45deg); }
  .mnav[open] .mnav__bar--2 { opacity: 0; }
  .mnav[open] .mnav__bar--3 { transform: translateY(-7px) rotate(-45deg); }
  .mnav__panel {
    position: fixed; inset: 0; z-index: 1400;
    background: var(--c-navy-deep); padding: 5.5rem 1.375rem 1.875rem;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; justify-content: center;
  }
  .mnav__nav  { position: relative; display: flex; flex-direction: column; }
  .mnav__link {
    display: flex; align-items: baseline; gap: 0.875rem;
    padding-block: 0.6875rem; min-height: 2.75rem;
    border-block-end: 1px solid rgba(255,255,255,.13);
    color: #fff; font-size: 1.5rem; font-weight: 900; line-height: 1.35; text-decoration: none;
  }
  .mnav__link:hover { color: var(--c-lime); text-decoration: none; }
  .mnav__num {
    flex: 0 0 auto; font-family: var(--ff-display);
    font-size: 0.71875rem; font-weight: 800; letter-spacing: .12em; color: var(--c-lime);
  }
  .mnav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-lime); align-self: center; }
  .mnav__cta {
    position: relative; margin-block-start: 1.625rem;
    display: flex; align-items: center; justify-content: center; gap: 0.625rem;
    font-weight: var(--fw-bold); border-radius: var(--r-pill);
    background: var(--g-brand); color: #fff; padding: 1.125rem 1.375rem; font-size: 1.03125rem;
    box-shadow: 0 10px 30px rgba(0,152,255,.36); text-decoration: none;
  }
  .mnav__legal { position: relative; display: flex; gap: 1.25rem; justify-content: center; padding-block-start: 1.25rem; }
  .mnav__legal a {
    color: rgba(255,255,255,.72); font-size: var(--fs-xs); font-weight: 600;
    display: inline-flex; align-items: center; min-height: 2.75rem;
  }

  @media (max-width: 63.9375rem) {          /* < xl 1024px : sticky ピル */
    .site-header {
      position: sticky; inset-block-start: 0.625rem; z-index: 1500;
      margin: 0.625rem 0.75rem 0; padding: 0.5rem 0.5rem 0.5rem 1.125rem;
      min-height: 2.75rem; border: 0; background: transparent;
      isolation: isolate;
      flex-wrap: nowrap; justify-content: space-between; gap: 0.75rem;
    }
    /* ガラス表現は ::before に置く。ヘッダー自身に backdrop-filter を
       かけると position:fixed の包含ブロックになり、.mnav__panel が
       44px のピル内に閉じ込められる (Filter Effects 仕様)。
       旧実装は header:has(...) で打ち消していたため、:has() 非対応の
       Firefox 121 未満でモバイルメニューが壊れていた。 */
    .site-header::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      border-radius: var(--r-pill);
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(255,255,255,.65);
      box-shadow: var(--sh-glass);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
              backdrop-filter: blur(20px) saturate(180%);
    }
    .site-header__logo svg,
    .site-header__logo img { height: 1.75rem; }
    /* 旧実装は header > nav, header > a を display:none にしていたため、
       ロゴを <a> で包んだサブページ 10 枚でロゴ自体が消えていた。
       クラス指定にしたので該当要素だけが隠れる。 */
    .gnav, .site-header__text-link, .site-header__cta { display: none; }
    .mnav { display: block; }
  }
  @media (min-width: 64rem) { .mnav { display: none; } }

  html.is-mnav-open, html.is-mnav-open body { overflow: hidden; }

  /* --- buttons ------------------------------------------------------ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    min-height: 2.75rem; padding: 0.8125rem 1.625rem;
    border: 0; border-radius: var(--r-pill);
    font-family: inherit; font-size: 0.9375rem; font-weight: var(--fw-bold); line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  .btn:hover { transform: translateY(-2px); text-decoration: none; }
  .btn--grad    { background: var(--g-brand); color: #fff; box-shadow: var(--sh-btn); }
  .btn--grad:hover { color: #fff; box-shadow: var(--sh-hover); }
  .btn--light   { background: #fff; color: var(--c-ink-strong); box-shadow: var(--sh-btn-lg); }
  .btn--light:hover { color: var(--c-ink-strong); }
  .btn--outline { background: #fff; color: var(--c-ink-strong); border: 2px solid var(--c-ink-strong); }
  .btn--outline:hover { color: var(--c-ink-strong); }
  .btn--ghost   { background: rgba(255,255,255,.16); color: #fff; }
  .btn--ghost:hover { color: #fff; background: rgba(255,255,255,.26); }
  .btn--hollow  { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
  .btn--hollow:hover { color: #fff; background: rgba(255,255,255,.12); }
  .btn--lg      { padding: 1.1875rem 2.75rem; font-size: 1.0625rem; }
  .btn--full    { width: 100%; }
  .btn--arrow::after { content: "→"; }
  @media (max-width: 39.9375rem) {          /* < sm+ 640px */
    .btn--lg { padding: 1rem 1.625rem; font-size: 0.96875rem; }
    .row--center > .btn { width: 100%; }
  }

  /* --- floating CTA ------------------------------------------------- */
  .float-cta {
    position: fixed; inset-inline-end: 1.5rem; inset-block-end: 1.5rem; z-index: 1200;
    display: inline-flex; align-items: center; gap: 0.75rem;
    background: var(--c-ink-strong); color: #fff;
    border-radius: var(--r-pill); padding: 1.125rem 1.875rem;
    font-size: 1rem; font-weight: var(--fw-bold); white-space: nowrap;
    box-shadow: var(--sh-float); text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .float-cta:hover { color: #fff; text-decoration: none; }
  .float-cta__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-lime); animation: pulseDot 2.2s ease-in-out infinite; }
  .float-cta__arrow { color: var(--c-lime); }
  .float-cta.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
  @media (max-width: 39.9375rem) {
    .float-cta {
      inset-inline: 0.75rem; inset-block-end: 0.75rem;
      justify-content: center; padding: 0.9375rem 1.125rem; font-size: 0.90625rem;
    }
  }

  /* --- hero --------------------------------------------------------- */
  .hero { position: relative; overflow: hidden; background: var(--g-hero); }
  .hero__inner { position: relative; padding-block: var(--sec-y); padding-inline: var(--gutter); }
  .hero--flush .hero__inner { padding-block-end: 0; }
  .hero__body { max-width: 47.5rem; }
  .hero h1 { font-size: var(--fs-display); color: #fff; margin-block-end: 1.25rem; letter-spacing: .01em; }
  .hero__lead { font-size: var(--fs-lead); color: rgba(255,255,255,.94); font-weight: 500; margin-block-end: 2rem; }
  .hero__icon { height: 3.75rem; width: auto; margin-block-end: 1.125rem; opacity: .9; }
  .hero__pill {
    display: inline-block; font-size: 0.84375rem; font-weight: var(--fw-bold);
    color: var(--c-ink-strong); background: var(--c-lime);
    padding: 0.375rem 1rem; border-radius: var(--r-pill); margin-block-end: 1.5rem;
  }

  /* --- eyebrow (37 箇所) -------------------------------------------- */
  .eyebrow {
    display: block; margin-block-end: 0.75rem;
    font-family: var(--ff-display); font-size: var(--fs-eyebrow);
    font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-green-ink);
  }
  .on-dark .eyebrow, .hero .eyebrow, .panel--brand .eyebrow, .panel--cta .eyebrow { color: var(--c-lime); }

  .sec-head { margin-block-end: 2.75rem; }
  .sec-head--center { text-align: center; }
  .sec-head--center .eyebrow { margin-inline: auto; }
  .sec-head__lead { font-size: var(--fs-lead); color: var(--c-ink-muted); margin-block-start: 0.875rem; }
  .on-dark .sec-head__lead { color: rgba(255,255,255,.9); }

  /* --- cards -------------------------------------------------------- */
  .card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--card-pad);
  }
  .card--lift { transition: transform .28s var(--ease), box-shadow .28s ease; }
  .card--lift:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
  .card--soft { border: 0; background: var(--c-surface); border-radius: var(--r-sm); }
  .card--plain { border: 0; border-radius: var(--r-sm); }
  .card__title { margin-block-end: 0.625rem; }
  .card__text  { font-size: 0.9375rem; color: var(--c-ink-muted); }

  /* --- tick list (68 箇所) ------------------------------------------ */
  .ticklist { display: flex; flex-direction: column; gap: 0.5rem; }
  .ticklist > li {
    display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.625rem;
    font-size: var(--fs-sm); color: var(--c-ink);
  }
  /* 記号は CSS 側に持たせる。旧実装は ✓ が実テキストで、
     スクリーンリーダーが features ページで 68 回読み上げていた。
     alt-text 構文 (content: "x" / "") 非対応環境でも記号が消えないよう
     素の content を先に置き、@supports で上書きする。 */
  .ticklist > li::before { content: "✓"; color: var(--c-green-ink); font-weight: 900; line-height: inherit; }
  @supports (content: "a" / "b") { .ticklist > li::before { content: "✓" / ""; } }
  .ticklist--bold > li { font-weight: var(--fw-bold); color: var(--c-ink-strong); font-size: 0.9375rem; }

  /* --- stat strip --------------------------------------------------- */
  .statstrip {
    display: grid; gap: var(--gap-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    background: var(--g-strip); border-block-end: 1px solid var(--c-border);
    padding-block: 2.125rem; padding-inline: var(--gutter);
  }
  .statstrip__inner {
    max-width: var(--content-max); margin-inline: auto; width: 100%;
    display: grid; gap: var(--gap-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .stat { display: flex; align-items: baseline; gap: 0.875rem; }
  .stat + .stat { border-inline-start: 1px solid var(--c-border); padding-inline-start: 1.5rem; }
  @media (max-width: 56.1875rem) {          /* < lg 900px : 縦積み時は上罫線に */
    .stat + .stat {
      border-inline-start: 0; padding-inline-start: 0;
      border-block-start: 1px solid var(--c-border); padding-block-start: 1.125rem;
    }
  }
  .stat__num {
    flex-shrink: 0; white-space: nowrap; line-height: 1;
    font-family: var(--ff-display); font-size: var(--fs-metric); font-weight: 900;
    background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* 透明文字は Windows ハイコントラストで消えるので戻す */
  @media (forced-colors: active) { .stat__num { background: none; color: CanvasText; } }
  .stat__label { font-size: 0.90625rem; font-weight: var(--fw-bold); color: var(--c-ink-strong); line-height: 1.6; }
  .stat__note  { display: block; font-weight: 400; color: var(--c-ink-muted); font-size: var(--fs-xs); }

  .statbox { background: var(--c-surface); border-radius: var(--r-md); padding: 1.5rem 1.625rem; }
  .statbox__num  { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 900; line-height: 1.2; white-space: nowrap; }
  .statbox__text { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink-strong); }

  /* --- metric tiles ------------------------------------------------- */
  .metricrow { margin-block-start: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .metricrow--lg { gap: 0.75rem; max-width: 40rem; }
  .metric { text-align: center; background: var(--c-surface); border-radius: var(--r-xs); padding: 0.875rem 0.5rem; }
  .metricrow--lg .metric { padding: 1rem; border-radius: var(--r-sm); }
  .metric__num {
    display: block; white-space: nowrap; font-family: var(--ff-display);
    font-weight: 900; font-size: 1.3125rem; color: var(--c-ink-strong);
  }
  .metricrow--lg .metric__num { font-size: 1.5rem; }
  .metric__num small { font-size: 0.8125rem; }
  .metric__label { font-size: 0.6875rem; color: var(--c-ink-muted); }
  .metricrow--lg .metric__label { font-size: 0.71875rem; }

  /* --- steps -------------------------------------------------------- */
  .step {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border-radius: var(--r-sm); padding: 1.125rem 1.375rem;
  }
  .step--bordered { border: 1px solid var(--c-border); }
  .step__num {
    flex-shrink: 0; display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--c-ink-strong); color: #fff;
    font-family: var(--ff-display); font-weight: 900; font-size: 0.9375rem;
  }
  .step__title { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--c-ink-strong); }
  .step__text  { font-size: 0.84375rem; color: var(--c-ink-muted); }

  /* --- FAQ accordion ------------------------------------------------ */
  .faq { display: flex; flex-direction: column; gap: 0.625rem; }
  .faq__item { border-block-end: 1px solid var(--c-border); }
  .faq__item--card { border-block-end: 0; background: #fff; border-radius: var(--r-sm); padding-inline: 1.25rem; }
  .faq__q {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    min-height: 2.75rem; padding-block: 1.125rem; list-style: none;
    font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-ink-strong);
  }
  .faq__q::-webkit-details-marker { display: none; }
  /* 記号を CSS に移したので、旧実装で 1 件だけ ＋ が欠けていた不具合は
     構造的に再発しない。 */
  .faq__q::after { content: "＋"; color: var(--c-green-ink); flex-shrink: 0; font-weight: 900; }
  .faq__item[open] .faq__q::after { content: "−"; }
  @supports (content: "a" / "b") {
    .faq__q::after { content: "＋" / ""; }
    .faq__item[open] .faq__q::after { content: "−" / ""; }
  }
  .faq__a { padding-block-end: 1.125rem; font-size: 0.9375rem; color: var(--c-ink-muted); }

  /* --- pricing plans ------------------------------------------------ */
  .plan {
    display: flex; flex-direction: column; position: relative;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--card-pad);
  }
  .plan--featured { background: var(--c-surface-blue); border: 2px solid var(--c-blue); box-shadow: var(--sh-plan); }
  .plan__badge {
    position: absolute; inset-block-start: -0.875rem; inset-inline-start: 50%; translate: -50% 0;
    background: var(--g-brand); color: #fff;
    font-size: 0.78125rem; font-weight: var(--fw-bold);
    padding: 0.3125rem 1.25rem; border-radius: var(--r-pill); white-space: nowrap;
  }
  .plan__name  { font-size: 1.1875rem; font-weight: 900; color: var(--c-ink-strong); }
  .plan__note  { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-block-end: 1.25rem; }
  .plan__price { margin-block-end: 1.375rem; }
  .plan__price b { font-family: var(--ff-display); font-size: var(--fs-metric); font-weight: 900; color: var(--c-ink-strong); }
  .plan__price small { font-size: var(--fs-sm); color: var(--c-ink-muted); }
  .plan__price .plan__ask { font-size: var(--fs-h3); font-weight: 900; color: var(--c-ink-strong); }
  .plan--featured .plan__price b { color: var(--c-blue-ink); }
  .plan .ticklist {
    flex-grow: 1; border-block-start: 1px solid var(--c-border);
    padding-block-start: 1.125rem; margin-block-end: 1.5rem;
  }
  .plan--featured .ticklist { border-block-start-color: var(--c-border-blue); }

  /* --- tags / badges ------------------------------------------------ */
  .tag {
    align-self: flex-start; display: inline-block;
    padding: 0.25rem 0.875rem; border-radius: var(--r-pill);
    font-size: 0.78125rem; font-weight: var(--fw-bold);
    color: var(--c-blue-ink); background: rgba(0,152,255,.10);
  }
  .tag--green { color: var(--c-green-ink); background: rgba(52,172,119,.10); }
  .tag--lime  { color: #5c7a1e;           background: rgba(176,217,77,.24); }
  .badge {
    display: inline-block; white-space: nowrap;
    font-size: 0.71875rem; font-weight: var(--fw-bold);
    padding: 0.1875rem 0.75rem; border-radius: var(--r-pill);
  }
  .badge--solid   { background: var(--c-lime); color: var(--c-ink-strong); }
  .badge--outline { color: var(--c-green-ink); border: 1px solid var(--c-green-ink); background: transparent; }

  /* --- screenshots -------------------------------------------------- */
  .shot { border-radius: var(--r-sm); border: 1px solid var(--c-border); box-shadow: var(--sh-card); }
  .shot--hero {
    border-radius: 1rem 1rem 0 0; border-block-end: 0;
    border-color: rgba(255,255,255,.5); box-shadow: 0 -8px 60px rgba(11,63,110,.28);
  }
  .iconbox { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.6875rem; background: rgba(0,152,255,.10); }
  .iconbox--green { background: rgba(52,172,119,.10); }
  .iconbox--lime  { background: rgba(176,217,77,.20); }
  .sec-icon { height: 2.75rem; width: auto; margin-block-end: 0.75rem; }

  /* --- decorative circles ------------------------------------------- */
  .deco { position: absolute; border-radius: 50%; pointer-events: none; }
  .deco--tr {
    inset-inline-end: -7.5rem; inset-block-start: -7.5rem;
    width: 26.25rem; height: 26.25rem;
    background: rgba(255,255,255,.20); animation: floaty 11s ease-in-out infinite;
  }
  .deco--br {
    inset-inline-end: -5rem; inset-block-end: -8.75rem;
    width: 22.5rem; height: 22.5rem;
    background: rgba(176,217,77,.22); animation: floaty 13s ease-in-out infinite;
  }
  .deco--tab {
    inset-inline-start: 50%; inset-block-start: 0; transform: translateX(-50%);
    width: 18.75rem; height: 18.75rem; border-radius: 0 0 999px 999px;
    background: var(--c-ink-strong);
  }
  .deco--mnav-a {
    inset-inline-end: -6.25rem; inset-block-start: -4.375rem; width: 20rem; height: 20rem;
    background: radial-gradient(circle, rgba(52,172,119,.5) 0%, rgba(52,172,119,0) 70%);
  }
  .deco--mnav-b {
    inset-inline-start: -5.625rem; inset-block-end: 2.5rem; width: 17.5rem; height: 17.5rem;
    background: radial-gradient(circle, rgba(0,152,255,.42) 0%, rgba(0,152,255,0) 70%);
  }

  /* --- breadcrumb --------------------------------------------------- */
  .breadcrumb { padding-block: 1rem 0; padding-inline: var(--gutter); font-size: var(--fs-xs); color: var(--c-ink-muted); }
  .breadcrumb__inner { max-width: var(--content-max); margin-inline: auto; }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .breadcrumb li + li::before { content: "／"; margin-inline-end: 0.5rem; }
  .breadcrumb a { color: var(--c-ink-muted); display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* --- in-page pill nav (features) ---------------------------------- */
  .pillnav { display: flex; flex-wrap: wrap; gap: 0.625rem; }
  .pillnav a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding: 0.5rem 1.125rem; border-radius: var(--r-pill);
    background: rgba(255,255,255,.92); color: var(--c-ink-strong);
    font-size: 0.84375rem; font-weight: var(--fw-bold); text-decoration: none;
  }
  .pillnav a:hover { background: #fff; color: var(--c-blue-ink); text-decoration: none; }

  /* --- news list ---------------------------------------------------- */
  .newslist { border-block-start: 1px solid var(--c-border); }
  .newslist__item { border-block-end: 1px solid var(--c-border); }
  .newslist__link {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; align-items: center;
    padding: 1.25rem 0.25rem; color: var(--c-ink); text-decoration: none;
  }
  .newslist__link:hover { color: var(--c-blue-ink); background: var(--c-surface-tint); text-decoration: none; }
  .newslist__date { font-family: var(--ff-display); color: var(--c-ink-muted); font-size: var(--fs-xs); white-space: nowrap; }
  .newslist__title { font-size: 0.96875rem; font-weight: var(--fw-bold); flex: 1 1 100%; }
  @media (min-width: 43.75rem) { .newslist__title { flex: 1 1 auto; } }

  .article__body { max-width: 46rem; }
  .article__body :is(h2, h3) { margin-block: 2rem 0.75rem; }
  .article__body p { margin-block-end: 1.25rem; }
  .article__body :is(ul, ol) { margin-block-end: 1.25rem; padding-inline-start: 1.375rem; }
  .article__body ul { list-style: disc; }
  .article__body ol { list-style: decimal; }
  .article__body li { margin-block-end: 0.375rem; }
  .article__body a { text-decoration: underline; }
  .article__meta { display: flex; gap: 0.875rem; align-items: center; margin-block-end: 1rem; }

  /* --- company profile (旧 <table> を <dl> へ) ---------------------- */
  .profile {
    background: #fff; border-radius: var(--r-lg); overflow: hidden;
    max-width: 53.75rem; margin-inline: auto; border: 1px solid var(--c-border);
  }
  .profile__row { display: grid; grid-template-columns: 1fr; border-block-end: 1px solid var(--c-border-soft); }
  .profile__row:last-child { border-block-end: 0; }
  .profile dt {
    padding: 1rem 1.25rem; font-size: 0.90625rem; font-weight: var(--fw-bold);
    color: var(--c-ink-strong); background: var(--c-surface-tint);
  }
  .profile dd { padding: 1rem 1.25rem; font-size: 0.9375rem; color: var(--c-ink); }
  @media (min-width: 43.75rem) { .profile__row { grid-template-columns: 12.5rem 1fr; } }

  /* --- comparison table (local) ------------------------------------- */
  /* 旧実装は table { display:block; white-space:nowrap } で
     行・列の対応関係を壊し、company の 130 字のセルで
     数千 px の横スクロールを発生させていた。 */
  .cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .cmp-scroll:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
  .cmp {
    width: 100%; min-width: 34rem;
    border-collapse: separate; border-spacing: 0; font-size: 0.90625rem;
    background: #fff; border-radius: var(--r-lg); overflow: hidden;
  }
  .cmp caption { caption-side: top; text-align: start; padding-block-end: 0.75rem; font-size: var(--fs-xs); color: var(--c-ink-muted); }
  .cmp :is(th, td) { padding: 0.875rem 1.125rem; }
  .cmp thead th { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--c-ink-strong); background: var(--c-surface); text-align: center; }
  .cmp tbody th {
    text-align: start; font-weight: var(--fw-bold); color: var(--c-ink-strong);
    background: var(--c-surface); border-block-end: 1px solid var(--c-border-soft);
    position: sticky; inset-inline-start: 0; z-index: 1;
  }
  .cmp td { text-align: center; border-block-end: 1px solid var(--c-border-soft); color: var(--c-ink); }
  .cmp__hi { background: rgba(0,152,255,.06); font-weight: var(--fw-bold); color: var(--c-ink-strong); }
  .cmp thead .cmp__hi { border-block-start: 2px solid var(--c-blue); }
  .cmp__col-hi { border-inline: 2px solid var(--c-blue); }
  @media (min-width: 43.75rem) { .cmp { min-width: 0; } }

  /* --- forms -------------------------------------------------------- */
  .formcard {
    background: #fff; border-radius: var(--r-xl); padding: var(--card-pad);
    border: 1px solid var(--c-border); box-shadow: var(--sh-form);
  }
  .formgrid { display: grid; grid-template-columns: 1fr; gap: 1.125rem 1.25rem; }
  @media (min-width: 43.75rem) { .formgrid { grid-template-columns: 1fr 1fr; } }
  .formgrid__full { grid-column: 1 / -1; }
  .field { display: grid; gap: 0.375rem; }
  .field__label { font-size: 0.84375rem; font-weight: var(--fw-bold); color: var(--c-ink-strong); }
  .field__req { color: var(--c-danger-ink); }
  .field__error { font-size: var(--fs-xs); color: var(--c-danger-ink); font-weight: var(--fw-bold); }
  .input, .select, .textarea {
    width: 100%; padding: 0.8125rem 0.875rem; min-height: 2.75rem;
    font-family: inherit; font-size: 0.9375rem; color: var(--c-ink);
    background: #fff; border: 1.5px solid var(--c-border-field); border-radius: var(--r-xs);
  }
  .textarea { line-height: 1.8; resize: vertical; }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-danger-ink); }
  .radioset { display: flex; flex-wrap: wrap; gap: 0.625rem; border: 0; padding: 0; margin: 0; }
  .radioset legend { font-size: 0.84375rem; font-weight: var(--fw-bold); color: var(--c-ink-strong); margin-block-end: 0.625rem; }
  .radiopill {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
    padding: 0.625rem 1.125rem; cursor: pointer;
    background: var(--c-surface); border: 1.5px solid var(--c-border-field);
    border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--c-ink-strong);
  }
  .radiopill:hover { border-color: var(--c-blue-ink); }
  .radiopill input { accent-color: var(--c-blue); }
  .radiopill:has(:checked) { border-color: var(--c-blue-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--c-blue-ink); }
  .consent { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink); }
  .consent input { margin-block-start: 0.375rem; accent-color: var(--c-blue); width: 1.125rem; height: 1.125rem; }
  .form-note { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-block-start: 0.75rem; }
  .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

  .notice { border-radius: var(--r-sm); padding: 1.125rem 1.375rem; margin-block-end: 1.5rem; font-size: 0.9375rem; }
  .notice--ok    { background: rgba(52,172,119,.10); border: 1px solid var(--c-green-ink); color: #10603f; }
  .notice--error { background: rgba(193,57,44,.07);  border: 1px solid var(--c-danger-ink); color: #8f2a20; }
  .notice__title { font-weight: var(--fw-bold); margin-block-end: 0.375rem; }
  .notice ul { margin-block-start: 0.5rem; padding-inline-start: 1.25rem; list-style: disc; }

  /* --- footer ------------------------------------------------------- */
  .site-footer { background: var(--c-ink-strong); color: #fff; padding: 3.25rem var(--gutter) 6rem; }
  .site-footer__inner { max-width: var(--content-max); margin-inline: auto; }
  /* 旧実装は 640px 以下でカラム 2〜4 を display:none にしており、
     内部リンク 12 本がスマホから消えていた。2 カラムに畳んで全部見せる。 */
  .site-footer__cols { display: grid; gap: 1.75rem 2.25rem; grid-template-columns: 1fr; margin-block-end: 2.25rem; }
  @media (min-width: 30rem) {                /* sm 480px */
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
  }
  @media (min-width: 56.25rem) {             /* lg 900px */
    .site-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .site-footer__brand { grid-column: auto; }
  }
  .site-footer__brand svg,
  .site-footer__brand img { height: 2.375rem; width: auto; margin-block-end: 0.875rem; color: #fff; }
  .site-footer__tagline { font-size: var(--fs-xs); color: rgba(255,255,255,.72); }
  .fnav__title { font-size: 0.84375rem; font-weight: var(--fw-bold); letter-spacing: .06em; color: #fff; margin-block-end: 0.875rem; }
  .fnav__list a {
    display: flex; align-items: center; min-height: 2.75rem;
    font-size: 0.84375rem; color: #cfdbe7;      /* 11.1:1 — 合格 */
  }
  .fnav__list a:hover { color: var(--c-lime); text-decoration: underline; }
  .site-footer__legal {
    border-block-start: 1px solid rgba(255,255,255,.14); padding-block-start: 1.25rem;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.375rem;
    font-size: 0.78125rem; color: rgba(255,255,255,.72);
  }
  body:not(.has-floating-cta) .site-footer { padding-block-end: 3.25rem; }

  /* --- legal pages -------------------------------------------------- */
  .legal-body { max-width: 52rem; }
  .legal-body h2 { font-size: var(--fs-h3); margin-block: 2.25rem 0.875rem; }
  .legal-body h2:first-child { margin-block-start: 0; }
  .legal-body p { margin-block-end: 1.125rem; }
  .legal-body ol { list-style: decimal; padding-inline-start: 1.5rem; margin-block-end: 1.125rem; }
  .legal-body ul { list-style: disc;    padding-inline-start: 1.5rem; margin-block-end: 1.125rem; }
  .legal-body li { margin-block-end: 0.5rem; }
  .legal-body strong { color: var(--c-ink-strong); font-weight: var(--fw-bold); }
  .legal-body__meta { margin-block-start: 2.5rem; font-size: var(--fs-sm); color: var(--c-ink-muted); }
  .legal-body__meta p { margin-block-end: 0.25rem; }

  /* --- 404 / search ------------------------------------------------- */
  .errorpage { text-align: center; max-width: 40rem; margin-inline: auto; }
  .errorpage__code { font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 900; color: var(--c-blue-ink); line-height: 1; }

  /* --- scroll reveal ------------------------------------------------ */
  /* オプトイン方式。旧実装は全要素に inline で animation-timeline を付け、
     非対応環境で @supports not + !important で打ち消していた。
     ファーストビューの要素には付けない (opacity:0 の要素は LCP 候補にならない)。 */
  .reveal { opacity: 1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: rise .85s var(--ease) both;
        animation-timeline: view();
        animation-range: entry 0% cover 26%;
      }
    }
  }
}

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */
@layer utilities {
  .u-vh {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .u-center      { text-align: center; }
  .u-measure     { max-width: 34em; }
  .u-measure-lg  { max-width: 60em; }
  .u-nowrap      { white-space: nowrap; }
  .u-mt-0 { margin-block-start: 0; }
  .u-mt-1 { margin-block-start: 0.5rem; }
  .u-mt-2 { margin-block-start: 1rem; }
  .u-mt-3 { margin-block-start: 1.5rem; }
  .u-mt-4 { margin-block-start: 2rem; }
  .u-mt-6 { margin-block-start: 2.75rem; }
  .u-mb-1 { margin-block-end: 0.5rem; }
  .u-mb-2 { margin-block-end: 1rem; }
  .u-mb-3 { margin-block-end: 1.5rem; }
  .u-mb-4 { margin-block-end: 2rem; }
  .on-dark { color: #fff; }
  .on-dark :is(h1, h2, h3, h4) { color: #fff; }
  .on-dark p  { color: rgba(255,255,255,.94); }
  .on-dark a:not(.btn) { color: #fff; text-decoration: underline; }
  .u-white-svg { filter: brightness(0) invert(1); }
}