/* ============================================================
   theme/light.css — クリーンテーマ（リファイン版）
   白背景 + ティール。余白・opacity階層・グラデーション重視。
   ============================================================ */

:root {
  /* 文字基準v3（2026-07-02 本人確定）: 本文17pt・読ませる文字14pt下限・見出しは抑制 */
  /* ── カラー（4段階のopacity階層） ── */
  --color-chrome:  #e0e0e0;
  --color-bg:      #ffffff;
  --color-fg:      #1a1a1a;                    /* 100% — 見出し */
  --color-fg-secondary: rgba(26,26,26,.7);     /* 70% — 本文 */
  --color-muted:   rgba(26,26,26,.5);          /* 50% — サブ */
  --color-subtle:  rgba(26,26,26,.3);          /* 30% — 最弱 */
  --color-accent:  #0d9488;
  --color-accent-soft: rgba(13,148,136,.06);
  --color-border:  rgba(26,26,26,.08);
  --color-num:     rgba(26,26,26,.18);
  --color-card-bg: rgba(13,148,136,.03);

  /* ── タイポグラフィ ── */
  --font-sans: "Poppins", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  /* 流体タイポグラフィ */
  --text-xs:   1.0rem;
  --text-sm:   1.17rem;
  --text-base: 1.4rem; --text-meta: 0.82rem;
  --text-lg:   2.17rem;
  --text-xl:   2.4rem;
  --text-2xl:  2.6rem;
  --text-3xl:  3.0rem;
  --text-4xl:  3.4rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold:   700;

  /* ── スペーシング（余白拡大） ── */
  --sp-xs:  .5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  75px;           /* 64px → 75px */
  --content-gap: 30px;

  /* ── その他 ── */
  --radius: 5px;
  --radius-lg: 10px;
  --border: 1px solid var(--color-border);
}

/* ── ベースタイポグラフィ ── */
body { font-family: var(--font-sans); }

.slide h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.slide h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.slide h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}
.slide p {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-fg-secondary);
}


/* ============================================================
   スライドタイプ
   ============================================================ */

.slide-title {
  justify-content: flex-end;
  gap: var(--sp-md);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: calc(var(--sp-xl) + 12px);
}
.slide-title .label {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: .15em;
  color: var(--color-accent);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
.slide-title h1 { max-width: 860px; }
.slide-title .sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 640px;
  line-height: 1.6;
}

.slide-content { gap: var(--content-gap); }
.slide-content .body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  flex: 1;
}

.slide-landing { 
  justify-content: center;
  align-items: flex-start;
  
  padding-left: calc(var(--sp-xl) - 3px);
}
.slide-landing h2 {
  font-size: var(--text-3xl);
  max-width: 900px;
  line-height: 1.35;
  font-weight: var(--weight-bold);
}

.slide-end {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
}
.slide-end .mark {
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  margin: 0 auto;
  border-radius: 2px;
}

.slide-section {
  justify-content: center;
  gap: var(--sp-sm);
}
.slide-section h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}
.slide-section p {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 640px;
}


/* ============================================================
   ユーティリティクラス
   ============================================================ */
.accent     { color: var(--color-accent); }
.muted      { color: var(--color-muted); }
.subtle     { color: var(--color-subtle); }
.mono       { font-family: var(--font-mono); }
.bold       { font-weight: var(--weight-bold); }
.semibold   { font-weight: var(--weight-semibold); }

.divider { width: 100%; height: 1px; background: var(--color-border); }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--content-gap); }
.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--content-gap); margin-block: auto; }

.list { display: flex; flex-direction: column; gap: var(--sp-sm); list-style: none; }
.list li { display: flex; align-items: baseline; gap: var(--sp-sm); font-size: var(--text-lg); color: var(--color-fg-secondary); line-height: 1.7; }
.list li::before { content: ''; display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); margin-top: .6em; }

.card {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--content-gap);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}
.card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.card p  { font-size: var(--text-base); color: var(--color-fg-secondary); }

/* カード背景バリエーション（線ではなく色で差別化） */
.card-accent  { background: var(--color-accent-soft); }
.card-warm    { background: rgba(245,158,11,.06); }
.card-cool    { background: rgba(59,130,246,.06); }

.flow { display: flex; align-items: center; gap: 0; flex: 1; }
.flow-step { flex: 1; text-align: center; padding: var(--sp-md) var(--sp-sm); background: var(--color-card-bg); border: var(--border); border-radius: var(--radius-lg); }
.flow-step h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--sp-xs); }
.flow-step p  { font-size: var(--text-sm); color: var(--color-muted); }
.flow-arrow { flex-shrink: 0; width: 40px; text-align: center; font-size: var(--text-xl); color: var(--color-accent); }

.stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); }
.stat .number { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-accent); font-family: var(--font-mono); line-height: 1; }
.stat .label { font-size: var(--text-sm); color: var(--color-muted); }

.slide-logo { position: absolute; bottom: var(--sp-xl); left: var(--sp-xl); height: 20px; opacity: .3; pointer-events: none; }
.slide-title .slide-logo { top: var(--sp-xl); right: var(--sp-xl); bottom: auto; left: auto; height: 24px; opacity: .4; }

.img-box { border-radius: var(--radius-lg); overflow: hidden; flex: 1; min-height: 0; }
.img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.text-img { display: grid; grid-template-columns: 1fr 1fr; gap: var(--content-gap); flex: 1; align-items: center; }
.text-img .text { display: flex; flex-direction: column; gap: var(--sp-sm); }

.tag {
  display: inline-block; font-size: var(--text-xs); font-family: var(--font-mono); font-weight: var(--weight-medium);
  color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 3px; padding: .2rem .6rem; letter-spacing: .05em;
}


/* ============================================================
   背景パターン
   ============================================================ */

.bg-mesh {
  background:
    radial-gradient(ellipse at 15% 85%, rgba(13,148,136,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(13,148,136,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(13,148,136,.02) 0%, transparent 70%),
    var(--color-bg);
}
.bg-dots { background-image: radial-gradient(circle, rgba(13,148,136,.08) 1px, transparent 1px); background-size: 28px 28px; }
.bg-stripe { background-image: repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(13,148,136,.03) 24px, rgba(13,148,136,.03) 25px); }
.bg-gradient { background: linear-gradient(135deg, var(--color-bg) 0%, rgba(13,148,136,.06) 50%, rgba(13,148,136,.02) 100%); }
.bg-corner::before { content: ''; position: absolute; top: 0; right: 0; width: 280px; height: 280px; background: radial-gradient(circle at 100% 0%, rgba(13,148,136,.08) 0%, transparent 70%); pointer-events: none; }

.bg-noise::after {
  content: ''; position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============================================================
   リッチメディア
   ============================================================ */
.video-box { border-radius: var(--radius-lg); overflow: hidden; flex: 1; min-height: 0; background: #000; }
.video-box video, .video-box iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: none; }
.video-box.contain video, .video-box.contain iframe { object-fit: contain; }
.slide-media { padding: 0 !important; }
.slide-media .video-box, .slide-media .img-box { border-radius: 0; width: 100%; height: 100%; }
.img-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); flex: 1; }
.img-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-sm); flex: 1; }
.img-grid-2 .img-box, .img-grid-3 .img-box { aspect-ratio: 16/9; flex: none; }
.text-video { display: grid; grid-template-columns: 1fr 1fr; gap: var(--content-gap); flex: 1; align-items: center; }
.text-video .text { display: flex; flex-direction: column; gap: var(--sp-sm); }
.fig { display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.fig .img-box { flex: 1; }
.fig figcaption { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }


/* ============================================================
   図解ユーティリティ
   ============================================================ */

.slide table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.slide table th { text-align: left; font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-fg); padding: var(--sp-sm); border-bottom: 2px solid var(--color-accent); }
.slide table td { padding: var(--sp-sm); border-bottom: 1px solid var(--color-border); color: var(--color-fg-secondary); font-size: var(--text-sm); line-height: 1.6; }
.slide table tr:last-child td { border-bottom: none; }

.timeline { display: flex; flex-direction: column; gap: 0; padding-left: var(--sp-md); border-left: 2px solid var(--color-accent); flex: 1; }
.timeline-item { position: relative; padding: var(--sp-xs) 0 var(--sp-md) var(--sp-md); }
.timeline-item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-md) - 5px); top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.timeline-item h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--sp-xs); }
.timeline-item p  { font-size: var(--text-sm); color: var(--color-muted); }

.matrix-2x2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; flex: 1; background: var(--color-border); }
.matrix-2x2 > div { background: var(--color-bg); padding: var(--content-gap); display: flex; flex-direction: column; gap: var(--sp-xs); }
.matrix-2x2 > div h3 { font-size: var(--text-lg); } .matrix-2x2 > div p { font-size: var(--text-sm); color: var(--color-muted); }

.cycle { display: flex; align-items: center; justify-content: center; gap: 0; flex: 1; }
.cycle-step { width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--color-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-sm); background: var(--color-card-bg); }
.cycle-step h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: 2px; } .cycle-step p { font-size: var(--text-xs); color: var(--color-muted); }
.cycle-arrow { font-size: var(--text-xl); color: var(--color-accent); padding: 0 var(--sp-xs); }

.callout { padding: var(--sp-md) var(--content-gap); background: var(--color-accent-soft); border-radius: var(--radius-lg); }
.callout p { font-size: var(--text-xl); font-style: italic; color: var(--color-fg); line-height: 1.6; }
.callout .attribution { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--sp-sm); font-style: normal; }

.blockquote { font-size: var(--text-2xl); font-style: italic; line-height: 1.4; color: var(--color-fg); max-width: 900px; position: relative; padding-left: var(--sp-lg); }
.blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.2em; font-size: var(--text-4xl); color: var(--color-accent); line-height: 1; }

.icon-list { display: flex; flex-direction: column; gap: var(--sp-md); list-style: none; }
.icon-list li { display: flex; align-items: flex-start; gap: var(--sp-md); font-size: var(--text-lg); color: var(--color-fg-secondary); line-height: 1.6; }
.icon-list .icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-soft); border: 1.5px solid var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--color-accent); font-weight: var(--weight-semibold); }

.pyramid { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.pyramid-level { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-sm) var(--sp-md); background: var(--color-card-bg); border: 1px solid var(--color-border); }
.pyramid-level:nth-child(1) { width: 40%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 2px solid var(--color-accent); }
.pyramid-level:nth-child(2) { width: 65%; }
.pyramid-level:nth-child(3) { width: 90%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.pyramid-level h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); } .pyramid-level p { font-size: var(--text-xs); color: var(--color-muted); }

.before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; flex: 1; }
.before-after .before, .before-after .after { padding: var(--content-gap); display: flex; flex-direction: column; gap: var(--sp-sm); }
.before-after .before { background: rgba(0,0,0,.03); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.before-after .after  { background: var(--color-accent-soft); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.before-after .arrow  { display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: var(--color-accent); padding: 0 var(--sp-md); }

.step-cards { display: flex; flex-direction: column; gap: var(--sp-sm); counter-reset: step-card; flex: 1; }
.step-card {
  counter-increment: step-card; display: flex; align-items: flex-start; gap: var(--sp-md);
  padding: var(--sp-md) var(--content-gap); background: var(--color-card-bg); border: var(--border);
  border-radius: var(--radius-lg); 
}
.step-card::before { content: counter(step-card, decimal-zero); font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-accent); line-height: 1; flex-shrink: 0; min-width: 2em; }
.step-card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.step-card p  { font-size: var(--text-sm); color: var(--color-fg-secondary); }


/* ============================================================
   ページ番号
   ============================================================ */
/* 中央配置: h2は上固定、コンテンツは残り空間の中央から広がる */
.slide-content .body > h2 { flex-shrink: 0; }
.slide-content .body > h2 + * { margin-top: auto; }
.slide-content .body > *:last-child { margin-bottom: auto; }