/* ============================================================================
   Swooo Company Deck — Slide presentation styles
   テンプレート: page-company-deck.php
   プレビュー: design-variants/slides-company-intro.html
   画像参照: ../images/company-deck/ （このファイルからの相対パス）
   ============================================================================ */

  :root {
    --paper: #ffffff;
    --paper-2: #fafaf9;
    --paper-3: #f4f4f2;
    --ink: #15181c;
    --ink-2: #1e232a;
    --ink-soft: #3a404a;
    --text: #4b5260;
    --text-2: #6b7280;
    --text-faint: #9ca3af;
    --line: #e4e4e0;
    --line-soft: #ededea;
    --navy: #0d2149;
    --navy-2: #1a3a6e;
    --navy-soft: #eef2f8;
    --teal: #0a9aa6;
    --teal-soft: #e6f7f8;
    --teal-link: #07868f; /* WCAG AA 用の濃いめ teal（4.59:1 on white） */
    --crimson: #8a2025;
    --crimson-soft: #fef2f2;
    --brass: #a67c3a;
    --brass-soft: #f6efde;
  }

  /* リセット — :where() で specificity 0 に落とす（後続の class セレクタが必ず勝つ） */
  :where(body.company-deck *),
  :where(body.company-deck *::before),
  :where(body.company-deck *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body.company-deck { scroll-behavior: smooth; }
  /* WPの admin bar が html に margin-top: 32px !important を入れるので相殺 */
  html.company-deck-page { margin-top: 0 !important; height: 100%; }
  body.company-deck { height: 100%; }
  html.company-deck-page #wpadminbar { display: none !important; }

  body.company-deck {
    background: var(--paper-3);
    color: var(--ink);
    font-family: "Noto Sans JP", -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
  }

  body.company-deck .serif { font-family: "Noto Serif JP", serif; font-feature-settings: "palt" 1; }

  body.company-deck a { color: inherit; text-decoration: none; }

  /* ============ TOPBAR ============ */
  body.company-deck .topbar {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  body.company-deck .topbar__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  @media (max-width: 768px) { body.company-deck .topbar__inner { padding: 12px 20px; } }

  body.company-deck .topbar__brand {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  body.company-deck .topbar__brand small {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.16em;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    text-transform: uppercase;
  }
  @media (max-width: 600px) { body.company-deck .topbar__brand small { display: none; } }

  body.company-deck .topbar__right { display: flex; align-items: center; gap: 16px; }

  body.company-deck .topbar__meta {
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.06em;
  }
  @media (max-width: 720px) { body.company-deck .topbar__meta { display: none; } }

  body.company-deck .topbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--paper);
    background: var(--ink);
    transition: all 200ms;
    letter-spacing: 0.04em;
  }
  body.company-deck .topbar__cta:hover { background: var(--navy); }

  /* ============ DECK & SLIDE FRAME ============ */
  .deck {
    height: calc(100vh - 57px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
  @media (max-width: 960px) {
    .deck { height: auto; overflow: visible; scroll-snap-type: none; }
  }

  .slide {
    min-height: calc(100vh - 57px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  @media (max-width: 960px) { .slide { min-height: auto; padding: 24px clamp(16px, 5vw, 24px); } }
  @media (max-width: 480px) { .slide { padding: 20px 20px; } }

  .slide__frame {
    width: 100%;
    max-width: 1240px;
    aspect-ratio: 16 / 9;
    /* Fallback: Safari 14 以前など aspect-ratio 未対応 */
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow:
      0 1px 0 rgba(15, 23, 42, 0.04),
      0 24px 60px -20px rgba(15, 23, 42, 0.18),
      0 8px 24px -12px rgba(15, 23, 42, 0.12);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    position: relative;
  }
  @media (max-width: 960px) {
    .slide__frame { aspect-ratio: auto; min-height: auto; }
  }
  @media (min-width: 961px) and (max-height: 820px) {
    .slide__frame {
      aspect-ratio: auto;
      height: calc(100vh - 97px);
      max-height: none;
    }
  }

  /* aspect-ratio 未対応ブラウザ (Safari < 15, 古いChromium) のフォールバック */
  @supports not (aspect-ratio: 1) {
    .slide__frame {
      aspect-ratio: auto;
      min-height: 680px;
    }
  }

  .slide__chapter {
    background: var(--navy);
    color: var(--paper);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 10px 24px;
    border-bottom: 2px solid var(--brass);
    position: relative;
  }
  .slide__chapter::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: var(--crimson);
    transform: translateX(-50%);
  }

  .slide__body {
    padding: clamp(14px, 1.8vw, 28px) clamp(20px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Firefox / Chrome 共通の細スクロールバー */
    scrollbar-width: thin;
    scrollbar-color: var(--text-faint) transparent;
  }
  @media (max-width: 480px) {
    .slide__body { padding: 20px 16px 24px; }
  }
  .slide__body::-webkit-scrollbar { width: 6px; }
  .slide__body::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 3px; }
  .slide__body::-webkit-scrollbar-track { background: transparent; }

  .slide__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(14px, 2vw, 24px);
  }

  .slide__subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, 1.05vw, 14px);
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    margin-top: -10px;
    margin-bottom: clamp(12px, 1.8vw, 22px);
    letter-spacing: 0.02em;
  }
  .slide__subtitle em { font-style: normal; color: var(--crimson); border-bottom: 2px solid var(--crimson); padding-bottom: 1px; }

  /* SP 改行ユーティリティ：PC では非表示、SP で改行として効かせる */
  .sp-br { display: none; }
  @media (max-width: 480px) { .sp-br { display: inline; } }

  /* SP の subtitle 余白：PC は negative margin で title 下罫線にくっつけるが
     SP だと title 罫線と subtitle 文字がほぼ密着して読みづらいので調整 */
  @media (max-width: 480px) {
    .slide__title { margin-bottom: 14px; }
    .slide__subtitle { margin-top: 0; margin-bottom: 22px; line-height: 1.7; font-size: 13px; }
  }

  .slide__foot {
    background: var(--paper-3);
    padding: 12px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
  }
  .slide__foot-left {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .slide__foot-brand {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.02em;
  }
  .slide__foot-url {
    font-size: 11px;
    color: var(--teal-link);
    text-decoration: underline;
    letter-spacing: 0.02em;
  }
  .slide__foot-page {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .slide__foot-page strong { color: var(--ink); font-weight: 900; }

  /* ============ SLIDE 1: COVER ============ */
  .cover {
    position: relative;
    grid-row: 1 / -1;
    background:
      linear-gradient(120deg, rgba(13, 33, 73, 0.94) 0%, rgba(13, 33, 73, 0.78) 50%, rgba(13, 33, 73, 0.55) 100%),
      radial-gradient(circle at 20% 80%, rgba(166, 124, 58, 0.28), transparent 50%),
      url("../images/company-deck/cover-bg.webp") center/cover no-repeat,
      var(--navy);
    color: var(--paper);
    display: grid;
    grid-template-columns: 1fr;
    align-content: end;
    padding: clamp(40px, 6vw, 80px);
    overflow: hidden;
  }
  .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 14px 14px;
    pointer-events: none;
  }
  .cover__art {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    color: var(--brass);
    opacity: 0.35;
    pointer-events: none;
  }
  .cover__art svg { width: 100%; height: 100%; display: block; }
  @media (max-width: 960px) { .cover__art { width: 240px; height: 240px; top: -40px; right: -40px; } }

  .cover__eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 0.18em;
    color: var(--brass);
    text-transform: uppercase;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }
  .cover__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(40px, 6vw, 84px);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
  }
  .cover__title em { font-style: normal; color: var(--brass); }
  .cover__rule {
    width: 80px;
    height: 1px;
    background: var(--brass);
    margin: 32px 0;
    position: relative;
    z-index: 1;
  }
  .cover__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    position: relative;
    z-index: 1;
  }
  .cover__company {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 500;
    color: rgba(255,255,255,0.88);
  }
  .cover__company strong { color: var(--paper); font-weight: 700; }
  .cover__company .ticker {
    display: inline-block;
    margin-left: 12px;
    padding: 2px 10px;
    border: 1px solid var(--brass);
    color: var(--brass);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    vertical-align: 3px;
  }
  .cover__brand {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 900;
    color: var(--paper);
    letter-spacing: -0.03em;
  }

  /* Cover: SP では背景チャートが透けて読みにくくなるので overlay を強める＋
     2 列 meta（株式会社アイビス / Swooo）を縦スタックして折り返し事故を防ぐ */
  @media (max-width: 480px) {
    .cover {
      background:
        linear-gradient(160deg, rgba(13, 33, 73, 0.96) 0%, rgba(13, 33, 73, 0.92) 60%, rgba(13, 33, 73, 0.86) 100%),
        radial-gradient(circle at 20% 80%, rgba(166, 124, 58, 0.28), transparent 50%),
        url("../images/company-deck/cover-bg.webp") center/cover no-repeat,
        var(--navy);
      padding: 32px 24px;
    }
    .cover__meta {
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: start;
    }
    .cover__company { white-space: nowrap; }
    .cover__brand { font-size: 44px; line-height: 1; }
    .cover__title { font-size: clamp(36px, 11vw, 48px); margin-bottom: 24px; }
    .cover__rule { margin: 24px 0; }
  }

  /* ============ SLIDE 2: AGENDA / TOC ============ */
  .toc {
    max-width: 720px;
    margin: 0 auto;
    background: var(--paper-3);
    border-radius: 14px;
    padding: clamp(18px, 2.4vw, 32px) clamp(28px, 5vw, 72px);
    width: 100%;
  }
  .toc__list { list-style: none; counter-reset: toc; }
  .toc__item {
    padding: 9px 0;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px dashed transparent;
  }
  .toc__item + .toc__item { border-top: 1px dashed var(--line); }
  .toc__num {
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--navy);
    letter-spacing: -0.02em;
  }
  .toc__name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 20px);
    color: var(--navy);
    letter-spacing: 0.02em;
  }
  .toc__pages {
    font-family: "Noto Serif JP", serif;
    font-size: 12px;
    color: var(--text-2);
    letter-spacing: 0.06em;
  }
  .toc__item.is-muted .toc__num,
  .toc__item.is-muted .toc__name { color: var(--text-faint); }
  .toc__item.is-active .toc__num,
  .toc__item.is-active .toc__name { color: var(--navy); }
  .toc__item.is-active .toc__name { position: relative; }
  .toc__item.is-active .toc__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 36px;
    height: 2px;
    background: var(--crimson);
  }

  /* slide-2 アジェンダ SP 用：ナンバー列(56px)と gap(16px) が広すぎて
     名前列の幅が足らず無駄に 3 行折り返してたので詰める */
  @media (max-width: 480px) {
    .toc { padding: 18px 16px; }
    .toc__item { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 0; }
    .toc__num { font-size: 20px; }
    .toc__name { font-size: 15px; line-height: 1.5; }
    .toc__pages { font-size: 11px; white-space: nowrap; }
  }

  /* ============ SLIDE 3: WHAT IS SWOOO ============ */
  .what {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(16px, 2vw, 24px);
  }
  .what__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 32px);
    position: relative;
  }
  .what__pill {
    position: absolute;
    top: -14px;
    left: 24px;
    background: var(--navy);
    color: var(--paper);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 999px;
    letter-spacing: 0.04em;
  }
  .what__pill--teal { background: var(--teal); }
  .what__lead {
    color: var(--navy);
    font-weight: 700;
    font-size: clamp(13px, 1.2vw, 15px);
    margin-bottom: 12px;
  }
  .what__lead em { font-style: normal; color: var(--crimson); border-bottom: 2px solid var(--crimson); padding-bottom: 1px; }
  .what__list { list-style: none; counter-reset: w; display: grid; gap: 8px; }
  .what__list li {
    counter-increment: w;
    padding-left: 30px;
    position: relative;
    font-size: clamp(13px, 1.05vw, 14px);
    line-height: 1.85;
  }
  .what__list li::before {
    content: counter(w) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: var(--navy);
  }
  .what__list li strong { color: var(--navy); font-weight: 700; border-bottom: 1px solid var(--navy); }
  .what__values { list-style: none; display: grid; gap: 6px; }
  .what__values li {
    padding-left: 18px;
    position: relative;
    font-size: clamp(13px, 1.05vw, 14px);
  }
  .what__values li::before {
    content: "●";
    position: absolute; left: 0; top: 0;
    color: var(--teal);
    font-size: 9px;
  }
  .what__values li strong { color: var(--ink); font-weight: 700; }

  /* slide-3「Swoooとは？」SP 用：カード内が窮屈なので各要素の縦余白を広げる */
  @media (max-width: 480px) {
    .what { gap: 28px; }
    .what__card { padding: 30px 20px 24px; border-radius: 14px; }
    .what__lead { margin-bottom: 18px; line-height: 1.75; }
    .what__list { gap: 14px; }
    .what__list li { padding-left: 26px; line-height: 1.8; }
    .what__values { gap: 14px; }
    .what__values li { padding-left: 20px; line-height: 1.8; }
  }

  /* ============ SLIDE 4: TRUST SIGNALS ============ */
  .trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
  }
  @media (max-width: 880px) { .trust { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }

  .trust__card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 24px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .trust__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px;
    height: 3px;
    background: var(--navy);
  }
  .trust__card--crimson::before { background: var(--crimson); }
  .trust__card--brass::before { background: var(--brass); }
  .trust__card--teal::before { background: var(--teal); }

  .trust__label {
    font-family: "Noto Serif JP", serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text-2);
    text-transform: uppercase;
    font-weight: 700;
  }
  .trust__num {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .trust__num small {
    font-size: 0.45em;
    font-weight: 700;
    color: var(--ink-soft);
    margin-left: 4px;
    letter-spacing: 0;
  }
  .trust__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    min-height: 3em;
  }
  .trust__desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    color: var(--text);
    line-height: 1.7;
    min-height: 3.4em;
    margin-top: auto;
  }

  /* ============ NEW SLIDE: 3つのサービス領域 ============ */
  .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 22px);
  }
  @media (max-width: 880px) { .services { grid-template-columns: 1fr; } }

  .service-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 24px);
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 10px;
    position: relative;
  }
  .service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--navy);
  }
  .service-card--crimson::before { background: var(--crimson); }
  .service-card--brass::before { background: var(--brass); }

  .service-card__num {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.18em;
    font-weight: 600;
    text-transform: uppercase;
  }
  .service-card__verb {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--brass);
    letter-spacing: 0.16em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--brass);
    padding-bottom: 6px;
    margin-bottom: 2px;
  }
  .service-card--crimson .service-card__verb { color: var(--crimson); border-bottom-color: var(--crimson); }
  .service-card--brass .service-card__verb { color: var(--teal); border-bottom-color: var(--teal); }
  .service-card__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1.35;
  }
  .service-card__desc {
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--ink-soft);
    line-height: 1.65;
  }
  .service-card__list { list-style: none; display: grid; gap: 6px; }
  .service-card__list li {
    padding-left: 16px;
    position: relative;
    font-size: clamp(11px, 0.95vw, 12.5px);
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .service-card__list li::before {
    content: "●";
    position: absolute; left: 0; top: 1px;
    color: var(--teal);
    font-size: 7px;
  }
  .service-card__list li strong {
    color: var(--navy);
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.02em;
  }
  .service-card--crimson .service-card__list li strong { color: var(--crimson); }
  .service-card--brass .service-card__list li strong { color: var(--teal); }

  .services__note {
    grid-column: 1 / -1;
    margin-top: clamp(8px, 1.4vw, 14px);
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(12px, 1.05vw, 14px);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .services__note em { font-style: normal; color: var(--crimson); border-bottom: 2px solid var(--crimson); padding-bottom: 1px; }

  /* ============ SLIDE 5: BEFORE / AFTER ============ */
  .ba {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    gap: 0;
    align-items: stretch;
  }
  @media (max-width: 880px) { .ba { grid-template-columns: 1fr; } .ba__arrow { display: none; } }

  .ba__col {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: clamp(20px, 2.4vw, 36px);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 18px;
  }
  .ba__col-head {
    background: var(--navy);
    color: var(--paper);
    text-align: center;
    padding: 12px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: clamp(13px, 1.2vw, 16px);
    margin: -24px -24px 0;
    border-radius: 4px;
  }
  .ba__col--after .ba__col-head { background: var(--teal); }
  .ba__col-title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.5;
  }
  .ba__list { list-style: none; display: grid; gap: 16px; }
  .ba__list li {
    padding-left: 36px;
    position: relative;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.85;
    color: var(--ink-soft);
  }
  .ba__list li::before {
    content: "×";
    position: absolute; left: 0; top: -2px;
    width: 24px; height: 24px;
    border: 1.5px solid var(--ink-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: var(--ink-soft);
    font-size: 14px;
  }
  .ba__col--after .ba__list li::before {
    content: "○";
    border-color: var(--teal);
    color: var(--teal);
  }
  .ba__list li strong, .ba__list li u {
    text-decoration: underline;
    text-decoration-color: var(--navy);
    text-underline-offset: 3px;
    color: var(--ink);
    font-weight: 600;
  }
  .ba__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 40px;
    font-weight: 900;
  }

  /* ============ SLIDE 6: 4 REASONS ============ */
  .reasons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    position: relative;
  }
  @media (max-width: 880px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .reasons { grid-template-columns: 1fr; } }

  .reasons__lead {
    grid-column: 1 / -1;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 500;
    color: var(--ink-soft);
    line-height: 1.85;
    padding: 0 clamp(0px, 2vw, 40px);
    margin-bottom: clamp(8px, 1.6vw, 20px);
    letter-spacing: 0.02em;
  }
  .reasons__lead em { font-style: normal; color: var(--crimson); border-bottom: 2px solid var(--crimson); padding-bottom: 1px; }

  .reason {
    text-align: center;
    padding: 8px;
  }
  .reason__num {
    width: clamp(56px, 7vw, 84px);
    height: clamp(56px, 7vw, 84px);
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 1.5px solid var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 900;
    color: var(--navy);
    position: relative;
  }
  .reason__num::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 1px;
    background: var(--brass);
  }
  .reason__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.45;
    min-height: 2.9em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reason__desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: var(--text);
    line-height: 1.85;
    min-height: 5.6em;
  }

  /* ============ SLIDE 7: PROCESS / FLOW ============ */
  .flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  @media (max-width: 880px) { .flow { grid-template-columns: 1fr; } }

  .flow__step {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-right: none;
    padding: clamp(14px, 1.8vw, 22px);
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 12px;
  }
  .flow__step:last-child { border-right: 1px solid var(--line); }
  .flow__step + .flow__step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    z-index: 2;
  }

  .flow__step-head {
    background: var(--navy);
    color: var(--paper);
    text-align: center;
    padding: 9px 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.1vw, 14px);
    letter-spacing: 0.04em;
    margin: -10px -10px 0;
  }
  .flow__step-no {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    color: var(--brass);
    letter-spacing: 0.16em;
    font-weight: 600;
    text-transform: uppercase;
  }
  .flow__step-thumb {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    height: clamp(60px, 9vh, 84px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }
  .flow__step-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .flow__step-thumb-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .flow__step-thumb-stack img { width: clamp(20px, 2.4vw, 26px); height: clamp(20px, 2.4vw, 26px); object-fit: contain; }
  .flow__step-thumb-stack span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .flow__step-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    background: linear-gradient(90deg, var(--ink) 0%, var(--crimson) 100%);
    color: var(--paper);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .flow__step-ai::before {
    content: "⚡";
    color: var(--brass);
    font-size: 11px;
    line-height: 1;
  }
  .flow__step-ai--placeholder {
    visibility: hidden;
    background: transparent;
    border: none;
  }
  .flow__step-ai--placeholder::before { content: "⚡"; visibility: hidden; }

  .flow__step-list { list-style: none; display: grid; gap: 6px; }
  .flow__step-list li {
    padding-left: 16px;
    position: relative;
    font-size: clamp(11px, 0.95vw, 13px);
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .flow__step-list li::before {
    content: "●";
    position: absolute; left: 0; top: 0;
    color: var(--teal);
    font-size: 9px;
  }

  /* ============ NEW SLIDE: CLAUDE CODE DETAILS ============ */
  .cc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.6vw, 20px);
  }
  @media (max-width: 880px) { .cc { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .cc { grid-template-columns: 1fr; } }

  .cc__card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: clamp(14px, 1.8vw, 22px);
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
  }
  .cc__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ink) 0%, var(--crimson) 100%);
  }
  .cc__phase {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--brass);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .cc__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
  }
  .cc__list { list-style: none; display: grid; gap: 4px; }
  .cc__list li {
    padding-left: 14px;
    position: relative;
    font-size: clamp(10.5px, 0.92vw, 12.5px);
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .cc__list li::before {
    content: "●";
    position: absolute; left: 0; top: 1px;
    color: var(--crimson);
    font-size: 7px;
  }
  .cc__foot {
    grid-column: 1 / -1;
    margin-top: clamp(10px, 1.6vw, 18px);
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    padding: 12px 20px;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: 0.02em;
    position: relative;
  }
  .cc__foot em { font-style: normal; color: var(--brass); }
  .cc__foot::before, .cc__foot::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    background: var(--brass);
    transform: translateY(-50%);
  }
  .cc__foot::before { left: 16px; }
  .cc__foot::after { right: 16px; }

  /* ============ BEFORE/AFTER METRICS ============ */
  .ba-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 20px);
    margin-top: clamp(14px, 2vw, 22px);
  }
  @media (max-width: 880px) { .ba-metrics { grid-template-columns: 1fr; } }

  .ba-metric {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    position: relative;
  }
  .ba-metric::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--crimson);
  }
  .ba-metric__val {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .ba-metric__val small { font-size: 0.45em; color: var(--ink-soft); font-weight: 700; margin-left: 2px; }
  .ba-metric__label {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10.5px;
    color: var(--text-2);
    letter-spacing: 0.04em;
    font-weight: 700;
    line-height: 1.55;
  }
  .ba-metric__label strong { color: var(--ink); }

  /* ============ INVESTMENT RANGE ============ */
  .invest {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    margin-bottom: clamp(10px, 1.4vw, 14px);
  }
  @media (max-width: 880px) { .invest { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .invest { grid-template-columns: 1fr; } }

  .invest__card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(8px, 1vw, 12px);
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 3px;
    position: relative;
  }
  .invest__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: var(--navy);
  }
  .invest__card--crimson::before { background: var(--crimson); }
  .invest__card--brass::before { background: var(--brass); }
  .invest__card--teal::before { background: var(--teal); }

  .invest__phase {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-2);
    text-transform: uppercase;
    font-weight: 700;
  }
  .invest__title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(12px, 1.05vw, 14.5px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
  }
  .invest__price {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .invest__price small { font-size: 0.62em; color: var(--ink-soft); font-weight: 700; }
  .invest__desc {
    font-size: 10.5px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  .pricing-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(6px, 1vw, 10px) 0 clamp(6px, 1vw, 10px);
  }
  .pricing-divider::before, .pricing-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .pricing-divider__text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-2);
    text-transform: uppercase;
    font-weight: 700;
  }

  /* ============ SLIDE 8: MAINTENANCE PLANS ============ */
  .plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    margin-bottom: 8px;
  }
  @media (max-width: 880px) { .plans { grid-template-columns: 1fr; } }

  .plan {
    background: var(--paper);
    border: 1px solid var(--line);
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
  }
  .plan__head {
    background: var(--navy);
    color: var(--paper);
    padding: 7px 14px;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(11.5px, 1vw, 13px);
    letter-spacing: 0.04em;
    position: relative;
  }
  .plan__badge {
    position: absolute;
    top: -14px;
    right: -8px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }
  .plan__target {
    padding: 7px 14px 2px;
    text-align: center;
    font-size: clamp(10.5px, 0.88vw, 12px);
    font-weight: 700;
    color: var(--ink);
  }
  .plan__price {
    text-align: center;
    padding: 2px 14px 8px;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.02em;
    line-height: 1;
    border-bottom: 1px solid var(--line);
  }
  .plan__price small {
    font-size: 0.4em;
    color: var(--ink-soft);
    font-weight: 700;
    margin-left: 2px;
  }
  .plan__list {
    list-style: none;
    padding: 6px 14px 7px;
    display: grid;
    gap: 2px;
  }
  .plan__list li {
    padding-left: 14px;
    position: relative;
    font-size: clamp(10.5px, 0.85vw, 12px);
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .plan__list li::before {
    content: "●";
    position: absolute; left: 0; top: 0;
    color: var(--teal);
    font-size: 9px;
  }
  .plan__list li u { text-decoration: underline; text-decoration-color: var(--navy); text-underline-offset: 2px; }

  .plans__note {
    border: 1px solid var(--line);
    padding: 6px 14px;
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .plans__note strong { color: var(--ink); font-weight: 700; }

  /* ============ SLIDE 9: FAQ ============ */
  .faq { display: grid; gap: 5px; }
  .faq__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    padding: 8px 18px;
    align-items: baseline;
  }
  .faq__item--q { background: var(--paper-3); }
  .faq__label {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: var(--navy);
    font-size: clamp(11px, 1vw, 13px);
  }
  .faq__item--a .faq__label { color: var(--teal); }
  .faq__text {
    font-size: clamp(11px, 0.92vw, 12.5px);
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .faq__item--q .faq__text { color: var(--ink); font-weight: 600; }

  /* ============ SLIDE 10: COMPANY OVERVIEW ============ */
  .company {
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .company__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .company__row:first-child { border-top: none; }
  @media (max-width: 720px) { .company__row { grid-template-columns: 120px 1fr; } }
  @media (max-width: 480px) {
    .company__row { grid-template-columns: 1fr; }
    .company__key { padding: 8px 14px; font-size: 11px; }
    .company__val { padding: 10px 14px 14px; font-size: 13px; }
  }

  .company__key {
    background: var(--paper-3);
    padding: 9px 20px;
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--ink-soft);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .company__val {
    padding: 9px 24px;
    font-size: clamp(11px, 1vw, 13px);
    color: var(--ink);
    line-height: 1.65;
  }
  .company__val strong { font-weight: 700; color: var(--navy); }
  .company__val a { color: var(--teal-link); text-decoration: underline; }
  .company__val .ticker {
    display: inline-block;
    padding: 1px 8px;
    background: var(--navy);
    color: var(--paper);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: 2px;
  }

  /* ============ SLIDE 11-12: CASE STUDIES ============ */
  .case {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.4vw, 36px);
    align-items: start;
  }
  @media (max-width: 880px) { .case { grid-template-columns: 1fr; } }

  .case__head {
    display: grid;
    gap: 10px;
  }
  .case__client {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    color: var(--text-2);
    font-weight: 600;
  }
  .case__service {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 900;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  .case__url {
    font-size: 11px;
    color: var(--teal-link);
    text-decoration: underline;
  }
  .case__tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .case__tag {
    padding: 3px 10px;
    background: var(--teal-soft);
    color: var(--teal);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.04em;
  }
  .case__stack {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
  }
  .case__stack-chip {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 10.5px;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--ink-soft);
    font-weight: 600;
    background: var(--paper);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
  }
  .case__stack-chip strong { color: var(--ink); }
  .case__stack-chip img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
  }

  .case__visual {
    background: linear-gradient(135deg, var(--paper-3) 0%, var(--navy-soft) 100%);
    border-radius: 8px;
    height: clamp(180px, 24vh, 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .case__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 12px;
  }
  .case__visual--phone img { object-fit: contain; padding: 8px; }

  .case__bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.8vw, 24px);
    margin-top: clamp(8px, 1.4vw, 16px);
  }
  @media (max-width: 880px) { .case__bottom { grid-template-columns: 1fr; } }

  .case__box {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: clamp(12px, 1.6vw, 18px);
  }
  .case__box-head {
    background: var(--navy);
    color: var(--paper);
    text-align: center;
    padding: 7px;
    font-weight: 700;
    font-size: clamp(11.5px, 1vw, 13px);
    margin: -12px -12px 10px;
  }
  .case__box--after .case__box-head { background: var(--teal); }
  .case__box-list { list-style: none; display: grid; gap: 5px; }
  .case__box-list li {
    padding-left: 16px;
    position: relative;
    font-size: clamp(10.5px, 0.92vw, 12.5px);
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .case__box-list li::before {
    content: "●";
    position: absolute; left: 0; top: 0;
    color: var(--navy);
    font-size: 8px;
  }
  .case__box--after .case__box-list li::before { color: var(--teal); }

  /* ============ SLIDE 13: PORTFOLIO ============ */
  .portfolio {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(16px, 2.4vw, 32px);
  }
  @media (max-width: 880px) { .portfolio { grid-template-columns: 1fr; } }

  .portfolio__col {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .portfolio__head {
    background: var(--navy);
    color: var(--paper);
    padding: 12px 20px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: 0.04em;
  }
  .portfolio__inner {
    padding: clamp(16px, 2vw, 24px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .portfolio__inner--single { grid-template-columns: 1fr; }
  @media (max-width: 880px) { .portfolio__inner { grid-template-columns: 1fr; } }

  .portfolio__group { display: grid; gap: 4px; }
  .portfolio__group-head {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--navy);
    margin-bottom: 4px;
    border-bottom: 1px solid var(--navy);
    padding-bottom: 4px;
  }
  .portfolio__list {
    list-style: none;
    display: grid;
    gap: 2px;
  }
  .portfolio__list li {
    font-size: clamp(11px, 0.95vw, 12px);
    color: var(--ink-soft);
    line-height: 1.6;
    padding-left: 12px;
    position: relative;
  }
  .portfolio__list li::before {
    content: "・";
    position: absolute; left: 0; top: 0;
    color: var(--text-2);
  }
  .portfolio__note {
    text-align: center;
    grid-column: 1 / -1;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--ink-soft);
    margin-bottom: clamp(8px, 1.4vw, 16px);
    line-height: 1.7;
  }
  .portfolio__note strong { color: var(--navy); }

  /* ============ SLIDE 14: CONTACT ============ */
  .contact { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; width: 100%; }
  .contact__lead {
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 6px;
  }
  .contact__box {
    border: 1px solid var(--line);
  }
  .contact__box-head {
    background: var(--teal);
    color: var(--paper);
    padding: 10px 20px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(13px, 1.1vw, 15px);
    letter-spacing: 0.04em;
  }
  .contact__box-body {
    background: var(--paper-3);
    padding: clamp(18px, 2.6vw, 32px) 20px;
    text-align: center;
  }
  .contact__email {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    display: block;
  }
  .contact__cta-line {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--ink);
    font-weight: 700;
  }
  .contact__url-box {
    border: 1px solid var(--ink);
    padding: 12px 20px;
    text-align: center;
  }
  .contact__url {
    color: var(--teal-link);
    font-weight: 700;
    font-size: clamp(13px, 1.15vw, 16px);
    text-decoration: underline;
    margin-bottom: 4px;
    display: block;
  }
  .contact__url-note {
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--ink-soft);
    font-weight: 600;
  }

  /* ============ DECK NAV: side dot navigator ============ */
  .deck-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 8px;
    z-index: 25;
  }
  @media (max-width: 960px) { .deck-nav { display: none; } }

  .deck-nav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    opacity: 0.5;
    transition: all 200ms;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .deck-nav__dot:hover { opacity: 1; transform: scale(1.4); }
  .deck-nav__dot.is-active { background: var(--navy); opacity: 1; width: 10px; height: 10px; }

  /* ============ KBD HINT (footer of viewport) ============ */
  .kbd-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 33, 73, 0.92);
    color: var(--paper);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.04em;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms;
  }
  .kbd-hint.is-visible { opacity: 1; }
  .kbd-hint kbd {
    background: rgba(255,255,255,0.18);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: inherit;
    font-weight: 600;
  }
  @media (max-width: 960px) { .kbd-hint { display: none; } }

  /* ============ ACCESSIBILITY ============ */
  /* キーボードフォーカス可視化 */
  body.company-deck a:focus-visible,
  body.company-deck button:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 2px;
  }
  body.company-deck .deck-nav__dot:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 4px;
  }

  /* 視覚的に非表示だがスクリーンリーダーには読まれる */
  body.company-deck .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* モーション抑止 */
  @media (prefers-reduced-motion: reduce) {
    body.company-deck,
    body.company-deck .deck {
      scroll-behavior: auto !important;
    }
    body.company-deck *,
    body.company-deck *::before,
    body.company-deck *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ============ PRINT / PDF EXPORT ============ */
  @media print {
    @page {
      size: 1240px 698px; /* 16:9 landscape */
      margin: 0;
    }
    body.company-deck {
      background: #fff !important;
      font-size: 14px;
    }
    body.company-deck .topbar,
    body.company-deck .deck-nav,
    body.company-deck .kbd-hint { display: none !important; }
    body.company-deck .deck {
      height: auto !important;
      overflow: visible !important;
      scroll-snap-type: none !important;
    }
    body.company-deck .slide {
      min-height: 0 !important;
      height: 698px;
      padding: 0 !important;
      page-break-after: always;
      break-after: page;
      scroll-snap-align: none !important;
    }
    body.company-deck .slide:last-child {
      page-break-after: auto;
      break-after: auto;
    }
    body.company-deck .slide__frame {
      aspect-ratio: auto !important;
      width: 1240px !important;
      height: 698px !important;
      max-width: none !important;
      max-height: none !important;
      box-shadow: none !important;
      border: none !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
    /* OGP/印刷時に背景画像も出力 */
    body.company-deck .cover {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }