/* ===== Design Tokens (CSS Custom Properties) ===== */
:root{
  /* Colors */
  --color-base: #fff;   /* ベースカラー */
  --color-main: #006;   /* メインカラー */
  --color-accent: #f00; /* アクセントカラー */
  --color-text: #0a0a0a;
  --color-muted: #0a0a0a; /* 本文の色 */
  --color-border: #e6e6e6;

  /* Typography & spacing */
  --ff: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
        "Yu Gothic", Meiryo, sans-serif;
  --fz-hero: clamp(2rem, 3.8vw, 3rem);
  --fz-h1: clamp(1.5rem, 2.6vw, 2.25rem);
  --fz-h2: clamp(1.25rem, 2vw, 1.6rem);
  --fz-body: 1rem;

  --radius-lg: 16px;
  --radius: 12px;
  --shadow: 0 8px 28px rgba(0,0,0,.08);

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

/* ===== Base Reset (最小限) ===== */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height: 100%; width: 100%;  overflow-x: hidden;}
body{
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fz-body);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: var(--color-main); text-decoration: underline;}
a:hover{ text-shadow: 1px 1px 2px #f4f6ff; }
:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ===== Utilities ===== */
.container{ width: 95%; max-width:1200px; margin-inline: auto; }
.section{ padding: var(--space-12) 0; }
.stack > * + *{ margin-top: var(--space-4); }
.eyebrow,.pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background:#f4f6ff; color:var(--color-main); font-weight:700; font-size:.86rem;
}

/* ===== Header / Nav ===== */
header{
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--color-base) 92%, #fff);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(6px) saturate(1.15);
}
.nav{ display:flex; align-items:center; gap:var(--space-2); padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; color:var(--color-main); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.logo{ inline-size:28px; block-size:28px; aspect-ratio: 1 / 1; border-radius:8px; background:var(--color-main); display:block;}
.nav-links{ margin-left:auto; display:flex; gap:var(--space-2); }
.nav-links a{ padding:.4rem .6rem; border-radius:8px; }
.nav-links a:hover{ background:#f4f6ff; text-shadow:none; }

/* ===== HERO ===== */
.hero{
  padding: clamp(2rem, 4vw, 3rem) 0 var(--space-12);
  background:
    radial-gradient(1100px 520px at 90% -10%, color-mix(in oklab, var(--color-main) 16%, transparent), transparent 60%),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-main) 6%, var(--color-base)), var(--color-base));
  border-bottom: 1px solid var(--color-border);
}
.hero-grid{ display:grid; gap:var(--space-8); align-items:center; }
.hero h1{ font-size: var(--fz-hero); line-height:1.15; margin:.2rem 0 var(--space-4); }
.hero p{ margin:0 0 var(--space-6); color: var(--color-muted); }

.hero-visual{
  min-height: 240px; border-radius: var(--radius-lg); border:1px dashed var(--color-main);
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 12px, #f3f6ff 12px, #f3f6ff 24px);
  box-shadow: var(--shadow);
}

/* ===== Hero video embed (portrait / landscape 両対応) ===== */
/* 既存の .hero-visual を動画ボックスとして使うための拡張 */
.hero-visual.video-embed{
  /* 既存の min-height を無効化してアスペクト比に任せる */
  min-height: 0;
  position: relative;
  overflow: hidden;
  /* 高さ暴走防止（必要に応じて調整） */
  max-block-size: 90vh;
  --ar-w: 9; 
  --ar-h: 16;
  aspect-ratio: var(--ar-w) / var(--ar-h);
}

/* アスペクト比を指定（縦動画＝9:16 / 横動画＝16:9） */
.video-embed--portrait{ aspect-ratio: 9 / 16; }
.video-embed--landscape{ aspect-ratio: 16 / 9; }
.video-embed--square{ aspect-ratio: 1 / 1; } /* 予備 */

/* iframe を枠いっぱいにフィット */
.video-embed > iframe{
  position: absolute;
  inset: 0;         /* top:0; right:0; bottom:0; left:0; の省略 */
  width: 100%;
  height: 100%;
  border: 0;
}

/* 古いブラウザ向けフォールバック（aspect-ratio 未対応） */
@supports not (aspect-ratio: 1 / 1){
  .hero-visual.video-embed{ height: 0; }
  .video-embed--portrait{ padding-top: 177.78%; } /* 9:16 = 16/9 * 100% */
  .video-embed--landscape{ padding-top: 56.25%; } /* 16:9 = 9/16 * 100% */
  .video-embed--square{ padding-top: 100%; }
  .video-embed > iframe{ position:absolute; inset:0; }
}

/* 下矢印誘導（トップページ用） */
.down{ display:grid; place-items:center; padding: var(--space-6) 0 var(--space-8); color:#7a7a7a; font-weight:700; }
.caret{ width:16px; height:16px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform: rotate(45deg); }

/* ===== Repeating rows (トップページ用) ===== */
.row{ padding: var(--space-12) 0; border-top:1px solid var(--color-border); }
.row.alt{ background: #f8f9ff; }
.row-grid{ display:grid; gap:var(--space-8); align-items:center; }
.row h2{ font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin:0 0 var(--space-3); }
.row p{ margin:0; color: var(--color-muted); }
.illu{
  min-height:240px; border-radius:var(--radius); overflow: hidden; border:1px dashed var(--color-main);
  background:repeating-linear-gradient(-45deg, #fff, #fff 12px, #eef2ff 12px, #eef2ff 24px);
  box-shadow:var(--shadow);
}
.illu > img{ max-height: 100%; margin : 0 auto;}

/* ===== CTA ===== */
.cta{
  text-align:left;
  background: linear-gradient(to right, color-mix(in oklab, var(--color-main) 12%, #fff), #fff);
  border-top:1px solid var(--color-border);
}

/* ===== Footer ===== */
footer{
  padding: var(--space-8) 0;
  color:#6a6a6a; background:#fafaff; border-top:1px solid var(--color-border);
}
.footer-grid,.foot{ display:grid; gap: var(--space-6); }
.footer-col h4{ margin:.25rem 0 .5rem; color: var(--color-main); }
.copy{ margin-top: var(--space-6); font-size:.9rem; color:#7a7a7a; }

/* ===== Docs (Manual / Guide) ===== */
.docs{ padding-top: var(--space-8); }
.docs-grid{ display:grid; gap: var(--space-8); }

/* 目次 */
.toc{
  border:1px solid var(--color-border);
  border-radius:12px;
  padding: var(--space-4) var(--space-6);
  background:#fff;
  box-shadow: var(--shadow);
}
.toc h2{ margin:0 0 var(--space-3); font-size:1rem; color:var(--color-main); }
.toc ol{ margin:0; padding-left:1.25rem; }
.toc ol ol{ margin-top:.4rem; }

/* 文章と見出し */
.article h1{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height:1.25;
  margin: 0 0 var(--space-4);
}
.article h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: var(--space-8) 0 var(--space-3);
}
.article p{ margin: 0 0 var(--space-4); }
.article :target{ scroll-margin-top: 96px; }

/* アンカーリンク（見出し左に # を表示） */
.anchored{ position: relative; }
.anchor{
  position:absolute; left:-1.2rem; top:.2rem;
  opacity:0; text-decoration:none;
}
.anchor::before{ content:"#"; color: var(--color-main); font-weight:800; }
.anchored:hover .anchor{ opacity:.6; }

/* 注記（INFO/警告） */
.note{
  border-left:4px solid var(--color-main);
  background:#f5f8ff;
  padding: var(--space-4) var(--space-6);
  border-radius:8px;
  margin: var(--space-6) 0;
}
.note__title{ font-weight:700; margin:0 0 .25rem; color: var(--color-main); }
.note--warn{ border-left-color: var(--color-accent); background:#fff5f5; }
.note--warn .note__title{ color: var(--color-accent); }

/* 画像（figure） */
.figure{ margin: var(--space-6) 0; }
.img-doc{ height: 280px; } /* ドキュメント用の少し大きめプレースホルダ */
figcaption{
  margin-top:.5rem;
  text-align:center;
  font-size:.92rem;
  color: var(--color-muted);
}

/* ===== Responsive (Desktop: >=960px) ===== */
@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.618fr 1fr; }
  .foot{ grid-template-columns: 2fr 1fr 1fr; }

  /* ビデオの高さ制限 */
  .hero-visual.video-embed{ max-block-size: 75vh; }

  /* トップページの交互レイアウト */
  .row-grid{ grid-template-columns: 1.618fr 1fr; }
  .wide{ grid-template-columns: 1fr; }
  [data-reverse="true"] .row-grid{ grid-template-columns: 1fr 1.618fr; }
  [data-reverse="true"] .row-grid > :first-child{ order:2; }
  [data-reverse="true"] .row-grid > :last-child{ order:1; }
}

/* レイアウト：デスクトップでTOCを左に固定 */
@media (min-width: 960px){
  .docs-grid{ grid-template-columns: 260px 1fr; }
  .toc{ position: sticky; top: 72px; align-self: start; }
}


/* ===== Full-bleed helper: 小画面で端末幅に広げる ===== */
@media (max-width: 959px){
  .full-bleed-sm{
    /* viewport 幅に合わせる（対応ブラウザでは d/v/svw を優先） */
    width: 100vw;
    width: 100dvw;
    max-width: 100vw;

    /* コンテナ中央基準で左右にはみ出す */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* グリッド内でも1行全幅を占有 */
    grid-column: 1 / -1;
  }
}