:root {
    --ink: #1a1d24;
    --muted: #626b7d;
    --line: #e3e7ee;
    --grid: #e9edf3;
    --bg: #f4f6f9;
    --paper: #ffffff;
    --accent: #2b4ba8;
    --accent-soft: #eef2fb;
    --brand: #075cf4;
    --warn-bg: #fff8ec;
    --warn-line: #e8a33d;
    --code-bg: #1d2230;
    --code-ink: #e6e9f2;
    --serif: "Shippori Mincho B1", "Yu Mincho", serif;
    --sans: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --mono: "IBM Plex Mono", Consolas, monospace;
    --header-h: 56px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
  body {
    margin: 0;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); }
  img, svg { max-width: 100%; }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 20;
    height: var(--header-h);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .site-header .inner {
    max-width: 1088px; height: 100%; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: .08em; flex: 0 0 auto; }
  .brand-mark { width: 20px; height: 20px; border-radius: 4px; background: var(--brand); display: grid; place-items: center; }
  .brand-mark::after { content: ""; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
  .chapter-nav { display: flex; gap: 4px; }
  .chapter-nav a {
    font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none;
    padding: 6px 12px; border-radius: 6px; white-space: nowrap;
  }
  .chapter-nav a:hover { color: var(--ink); background: #f2f4f8; }
  .chapter-nav a[aria-current="page"] { color: var(--brand); background: #eaf1ff; font-weight: 700; }
  .chapter-nav .short { display: none; }

  /* ---------- hero ---------- */
  .wrap { max-width: 1088px; margin: 0 auto; padding: 0 16px; }
  .hero { padding: 40px 0 8px; }
  .crumb { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
  .crumb a { color: var(--muted); }
  .label { font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: .12em; margin: 0 0 12px; }
  h1 {
    font-family: var(--serif);
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.4;
    letter-spacing: .04em;
    margin: 0 0 20px;
  }
  .lead { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 32px; }
  .notice {
    background: var(--paper);
    border-left: 3px solid var(--accent);
    padding: 14px 18px;
    font-size: 14px;
    margin: 0 0 40px;
  }
  .hr { border: 0; border-top: 1px solid #d9dee7; margin: 0 0 40px; }

  /* ---------- layout ---------- */
  .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 72px; }
  .toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: 4px; }
  .toc h2 { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .1em; margin: 0 0 12px; }
  .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid #d9dee7; }
  .toc a {
    display: grid; grid-template-columns: 34px 1fr; gap: 4px;
    padding: 7px 0 7px 14px; margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.6;
  }
  .toc a .n { font-family: var(--mono); font-size: 12px; color: #8a92a3; }
  .toc a:hover { color: var(--ink); }
  .toc a.is-active { border-left-color: var(--accent); color: var(--ink); font-weight: 700; }

  .content { max-width: 672px; }

  /* ---------- case tabs ---------- */
  .case-tabs [role="tablist"] { display: flex; flex-direction: column; border-left: 1px solid #d9dee7; }
  .case-tabs [role="tab"] {
    appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
    display: grid; grid-template-columns: 34px 1fr; gap: 4px;
    padding: 9px 0 9px 14px; margin-left: -1px;
    border-left: 2px solid transparent;
    font: 500 14.5px/1.6 var(--sans); color: var(--muted); letter-spacing: .02em;
  }
  .case-tabs [role="tab"] .n { font-family: var(--mono); font-size: 12px; color: #8a92a3; padding-top: 2px; }
  .case-tabs [role="tab"]:hover { color: var(--ink); }
  .case-tabs [role="tab"][aria-selected="true"] { border-left-color: var(--accent); color: var(--ink); font-weight: 700; }
  .case-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
  .case-tabs .tabs-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
  .case-intro { margin: 0 0 40px; color: var(--muted); }
  .case-panel[hidden] { display: none; }

  /* ---------- section ---------- */
  .section { margin: 0 0 72px; }
  .num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: 6px; }
  .section > h2 { font-family: var(--serif); font-size: clamp(23px, 3.4vw, 29px); line-height: 1.55; margin: 0 0 24px; letter-spacing: .04em; }
  .section h3 { font-size: 19px; line-height: 1.6; margin: 44px 0 14px; padding-left: 12px; border-left: 3px solid var(--accent); }
  .section h4 { font-size: 16.5px; line-height: 1.6; margin: 28px 0 10px; }
  .section p { margin: 0 0 18px; }
  .section ul, .section ol.plain { margin: 0 0 18px; padding-left: 1.4em; }
  .section li { margin: 0 0 6px; }
  strong { font-weight: 700; }
  .marker { background: linear-gradient(transparent 62%, #dfe7fb 62%); }
  .ui { font-family: var(--sans); font-weight: 700; background: #eef0f4; border: 1px solid #dde1e8; border-radius: 4px; padding: 0 6px; font-size: .92em; white-space: nowrap; }
  kbd { font-family: var(--mono); font-size: .85em; background: var(--paper); border: 1px solid #cfd5df; border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
  code.inline { font-family: var(--mono); font-size: .88em; background: #eef0f4; border-radius: 4px; padding: 1px 6px; word-break: break-all; }

  /* ---------- parts ---------- */
  .card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; margin: 0 0 18px; }
  .card > :last-child { margin-bottom: 0; }
  .card-title { font-weight: 700; margin: 0 0 8px; }
  .example { background: var(--accent-soft); border: 1px solid #d6dff5; border-radius: 10px; padding: 18px 22px; margin: 0 0 20px; }
  .example .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: #fff; border: 1px solid #d6dff5; border-radius: 999px; padding: 1px 10px; margin-bottom: 8px; }
  .example > :last-child { margin-bottom: 0; }

  .caution { background: var(--warn-bg); border: 1px solid #f1d8ad; border-left: 3px solid var(--warn-line); border-radius: 6px; padding: 14px 18px; margin: 0 0 20px; font-size: 15px; }
  .caution > :last-child { margin-bottom: 0; }
  .tip { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 14px 18px; margin: 0 0 20px; font-size: 15px; }
  .tip > :last-child { margin-bottom: 0; }

  .quote { margin: 28px 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-family: var(--serif); font-size: 19px; line-height: 1.8; position: relative; }
  .quote::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--accent); border-radius: 2px; }

  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
  .compare .card { margin: 0; }
  .compare .card.is-strong { border-color: #b9c8ef; box-shadow: 0 0 0 3px var(--accent-soft); }
  .compare .kicker { font-size: 12px; color: var(--muted); margin: 0 0 4px; }

  .types { display: grid; gap: 14px; margin: 0 0 24px; }
  .type { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
  .type .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
  .type h4 { font-size: 17px; margin: 0 0 4px; }
  .type .sub { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
  .type ul { margin: 0; padding-left: 1.2em; font-size: 15px; }
  .type .go { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; }

  .news { display: grid; gap: 14px; margin: 0 0 22px; }
  .news .card { margin: 0; }
  .news .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
  .news .company { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 8px; }
  .news .date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .news h4 { font-size: 18px; margin: 0 0 6px; }
  .news p { font-size: 15px; margin: 0 0 8px; }
  .news p:last-child { margin-bottom: 0; }

  .steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: step; }
  .steps > li { position: relative; padding: 0 0 26px 58px; margin: 0; }
  .steps > li::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--paper); border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 13px; color: var(--accent);
  }
  .steps > li::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 6px; width: 1px; background: #d9dee7; }
  .steps > li:last-child::after { display: none; }
  .steps .step-title { font-weight: 700; font-size: 17px; margin: 6px 0 6px; }
  .steps p { margin: 0 0 10px; }
  .steps ul { margin: 0 0 10px; }
  .steps .code, .steps .caution, .steps .tip { margin-bottom: 12px; }

  .flow { display: flex; align-items: center; gap: 12px; margin: 8px 0 26px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .flow .node { flex: 1; text-align: center; padding: 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
  .flow .node.is-cloud { background: var(--accent-soft); border-color: #cfd9f3; }
  .flow .node svg { display: block; margin: 0 auto 6px; color: var(--accent); }
  .flow .node b { display: block; font-size: 15px; }
  .flow .node span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
  .flow .arrow { flex: 0 0 auto; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.4; }
  .flow .arrow i { display: block; font-style: normal; font-size: 22px; color: var(--accent); }

  .loop { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 4px 0 22px; text-align: center; }
  .loop-steps { display: flex; align-items: stretch; gap: 8px; }
  .loop-step { flex: 1; background: var(--accent-soft); border: 1px solid #cfd9f3; border-radius: 10px; padding: 12px 10px; }
  .loop-step b { display: block; font-size: 16px; color: var(--accent); }
  .loop-step span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 4px; }
  .loop-arrow { align-self: center; color: var(--accent); font-size: 20px; }
  .loop-back { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
  .loop-back span::before { content: "↺ "; color: var(--accent); font-weight: 700; }
  .loop-done { margin: 12px auto 0; display: inline-block; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 4px 16px; }
  .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
  table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 420px; }
  th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.7; }
  thead th { background: #f7f8fb; font-size: 13px; color: var(--muted); font-weight: 700; }
  tbody tr:last-child td { border-bottom: 0; }
  td.yes { color: var(--accent); font-weight: 700; }
  td.no { color: #9aa1af; }

  .os { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--ink); border-radius: 4px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; letter-spacing: .04em; }
  .os.win { background: #2b6fd6; }

  .code { position: relative; margin: 0 0 18px; border-radius: 8px; background: var(--code-bg); }
  .code pre { margin: 0; padding: 14px 16px; padding-right: 76px; overflow-x: auto; color: var(--code-ink); font-family: var(--mono); font-size: 13.5px; line-height: 1.7; }
  .code .lang { position: absolute; left: 16px; top: -10px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; line-height: 18px; }
  .code button {
    position: absolute; right: 8px; top: 8px;
    font: 700 12px var(--sans); color: #c9cfdd; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 4px 10px; cursor: pointer;
  }
  .code button:hover { background: rgba(255,255,255,.16); color: #fff; }

  .todo-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: todo; }
  .todo-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 10px 46px; position: relative; margin: 0; }
  .todo-list li::before { counter-increment: todo; content: counter(todo); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 12px; display: grid; place-items: center; }
  .role { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 9px; margin-left: 6px; vertical-align: 2px; line-height: 20px; white-space: nowrap; }
  .role.ai { color: #fff; background: var(--brand); }
  .role.both { color: var(--accent); background: var(--accent-soft); border: 1px solid #cfd9f3; }
  .role.human { color: #8a4b00; background: #fff1dc; border: 1px solid #f1d8ad; }
  .section h4 + .steps, .section h4 + .table-wrap { margin-top: 4px; }
  .pill { display: inline-block; font-size: 12px; color: var(--muted); border: 1px dashed #c5ccd8; border-radius: 999px; padding: 1px 10px; margin-left: 6px; vertical-align: 2px; }

  .sources { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
  .sources a { color: var(--muted); }

  /* ---------- pager ---------- */
  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 80px; }
  .pager a { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; text-decoration: none; color: var(--ink); }
  .pager a:hover { border-color: #b9c8ef; }
  .pager .dir { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .pager .ttl { font-weight: 700; }
  .pager .next { text-align: right; grid-column: 2; }

  .site-footer { border-top: 1px solid var(--line); background: var(--paper); padding: 28px 0; font-size: 13px; color: var(--muted); }

  /* ---------- responsive ---------- */
  @media (max-width: 1000px) {
    .chapter-nav .long { display: none; }
    .chapter-nav .short { display: inline; }
  }
  @media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; gap: 0; }
    .toc { position: static; max-height: none; overflow: visible; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px 10px; margin: 0 0 48px; }
    .content { max-width: none; }
    .case-tabs [role="tablist"] { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid #d9dee7; }
    .case-tabs [role="tab"] { flex: 0 0 auto; margin: 0 0 -1px; padding: 8px 14px; border-left: 0; border-bottom: 2px solid transparent; grid-template-columns: auto auto; gap: 6px; }
    .case-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--accent); }
  }
  @media (max-width: 600px) {
    body { font-size: 15.5px; }
    .hero { padding-top: 28px; }
    .brand { font-size: 16px; }
    .chapter-nav a { padding: 6px 8px; font-size: 13px; }
    .compare { grid-template-columns: 1fr; }
    .type { grid-template-columns: 1fr; }
    .loop-steps { flex-direction: column; }
    .loop-arrow { transform: rotate(90deg); }
    .flow { flex-direction: column; padding: 16px; }
    .flow .node { width: 100%; }
    .flow .arrow i { transform: rotate(90deg); }
    .steps > li { padding-left: 52px; }
    .quote { font-size: 17px; padding: 18px 18px 18px 22px; }
    .pager { grid-template-columns: 1fr; }
    .pager .next { grid-column: 1; }
  }

@media (max-width:960px){.layout{grid-template-columns:minmax(0,1fr)}.layout>*{min-width:0}}

/* 上部メニュー。Web教材の共通ヘッダーと同じく、分類のボタンから子メニューを開く（決定2051）。開け閉めは menu.js。 */
.site-header{height:auto;}
.site-header .inner{height:auto;min-height:56px;padding-block:10px;gap:8px 24px;}
.chapter-nav{min-width:0;}
.chapter-nav .menu-list{margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;}
.chapter-nav .menu-group{position:relative;margin:0;padding:0;}
.chapter-nav .menu-toggle{margin:0;padding:6px 12px;display:flex;align-items:center;gap:6px;color:var(--muted);background:none;border:0;border-radius:6px;font:inherit;font-size:14px;font-weight:700;line-height:1.7;white-space:nowrap;cursor:pointer;}
.chapter-nav .menu-toggle:hover,.chapter-nav .menu-toggle[aria-expanded="true"],.chapter-nav .menu-group.is-current>.menu-toggle{color:var(--brand);background:#eaf1ff;}
.chapter-nav .menu-icon{width:12px;height:12px;display:block;flex-shrink:0;transition:rotate .2s ease;}
.chapter-nav .menu-toggle[aria-expanded="true"] .menu-icon{rotate:180deg;}
.chapter-nav .menu-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:30;margin:0;padding:8px;min-width:240px;max-width:calc(100vw - 32px);display:none;gap:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(23,45,54,.14);}
.chapter-nav .menu-panel.is-left{left:0;right:auto;}
/* ボタンから子メニューへマウスを下ろす間のすき間を、透明な面でつなぐ */
.chapter-nav .menu-panel::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:8px;}
.chapter-nav .menu-group.is-open>.menu-panel{display:grid;}
/* menu.js が読めなかったときの保険。マウスを乗せる・Tab で入ると開く（読めたら .is-ready が付き、こちらは効かない） */
.chapter-nav .menu-group:not(.is-ready):is(:hover,:focus-within)>.menu-panel{display:grid;}
.chapter-nav .menu-panel li{margin:0;}
.chapter-nav .menu-link{display:block;padding:10px 12px;color:#33476a;font-size:14px;font-weight:700;line-height:1.6;white-space:normal;text-decoration:none;border-radius:6px;}
.chapter-nav .menu-link:hover,.chapter-nav .menu-link[aria-current="page"]{color:var(--brand);background:#eaf1ff;}
.chapter-nav :is(a,button):focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.chapter-nav .menu-icon{transition:none;}}
@media(max-width:1000px){
  .site-header .inner{align-items:flex-start;flex-direction:column;}
  .chapter-nav{width:100%;}
  .chapter-nav .menu-list{position:relative;}
  .chapter-nav .menu-group{position:static;}
  .chapter-nav .menu-panel,.chapter-nav .menu-panel.is-left{left:0;right:0;min-width:0;max-width:none;}
}
/* 学習ガイドへ戻るボタン。本文の上と、前後の章の下に置く（決定1867）。 */
.hero-topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 18px;}
.hero-topline .crumb{margin:0;}
.return-guide{margin:0;}
.return-guide-link{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 18px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;}
.return-guide-link:hover{background:#dfe7fa;}
.return-guide-link:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
.pager{margin-bottom:16px;}
.return-guide.is-bottom{margin:0 0 80px;text-align:center;}

.table-wrap{max-width:100%;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#b4bfd3 #eef2f8;}
.table-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
@media(max-width:768px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-wrap::before{
    content:'表は左右にスライドできます';display:block;position:sticky;left:0;
    width:100%;padding:8px 12px;color:var(--muted);background:#f7f8fb;
    border-bottom:1px solid var(--line);font-size:12px;line-height:1.7;
  }
  .table-wrap table{min-width:640px;}
  .table-wrap table:has(thead tr>:nth-child(3)){min-width:760px;}
  .table-wrap table:has(thead tr>:nth-child(4)){min-width:960px;}
  .table-wrap th,.table-wrap td{min-width:140px;padding:12px 16px;}
  .table-wrap th:nth-child(2),.table-wrap td:nth-child(2){min-width:240px;}
}

.web-diagram{position:absolute;inset:0;overflow:hidden;background:#fff;--diagram-scale:1}
.d-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--diagram-scale));transform-origin:center;width:1280px;height:720px;box-sizing:border-box;padding:38px 54px 24px;font-family:system-ui,"Noto Sans JP",sans-serif;display:flex;flex-direction:column;color:#142b50;background:radial-gradient(ellipse at top left,#edf7ff,transparent 60%),#fff;text-align:left}
.d-heading{flex:none}.d-kicker{color:#4d89b3;font-size:18px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}.d-title{font-size:42px;line-height:1.35;font-weight:800;overflow-wrap:anywhere}
.d-body{display:grid;grid-template-columns:40% minmax(0,1fr);gap:32px;flex:1;min-height:0;padding-top:22px}
.d-art{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.web-diagram .d-canvas .d-art img{position:static;inset:auto;width:100%;height:100%;max-height:100%;object-fit:contain;min-height:0}
.d-sequence{display:flex;flex-direction:column;justify-content:center;gap:15px;min-width:0;min-height:0}
.d-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:15px 18px;border:2px solid #d5e9f8;border-radius:14px;background:#f3f9ff;box-sizing:border-box;min-width:0;flex-shrink:0}
.d-object svg{display:block;width:70px;height:70px}.d-words{min-width:0}.d-label{font-size:28px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}.d-note{margin-top:4px;font-size:21px;line-height:1.5;color:#466179;overflow-wrap:anywhere}
.d-footer{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;font-size:16px;line-height:1.4;color:#658098;flex:none;padding-top:16px}.d-footer>span:last-child{white-space:nowrap}
.layout-compare .d-body,.layout-rename .d-body{display:flex}.layout-compare .d-sequence,.layout-rename .d-sequence{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px;align-items:stretch;padding:22px 0}
.layout-compare .d-card,.layout-rename .d-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px}.layout-compare .d-object svg,.layout-rename .d-object svg{width:150px;height:150px}.layout-compare .d-label,.layout-rename .d-label{font-size:34px}.layout-compare .d-note,.layout-rename .d-note{font-size:26px;max-width:450px}
.layout-rename .d-card{position:relative}.layout-rename .d-card:first-child:after{content:'→';position:absolute;right:-40px;top:calc(50% - 25px);font-size:40px;color:#5aaddf;z-index:1}.layout-rename .d-card:last-child{background:#eaf6ff;border-color:#8bc8ef}
.layout-compare .d-sequence:has(>.d-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.layout-compare :where(.d-sequence:has(>.d-card:nth-child(3))) .d-card{padding:24px 18px}.layout-compare :where(.d-sequence:has(>.d-card:nth-child(3))) .d-label{font-size:30px}.layout-compare :where(.d-sequence:has(>.d-card:nth-child(3))) .d-note{font-size:24px}
.layout-sheet .d-sequence{gap:0;border:2px solid #c5dfef;border-radius:14px;overflow:hidden}.layout-sheet .d-card{border:0;border-bottom:2px solid #d4e7f2;border-radius:0;background:#fff}.layout-sheet .d-card:last-child{border-bottom:0}.layout-sheet .d-card:nth-child(2n){background:#f1f8fc}
.has-code .d-body{grid-template-columns:28% minmax(0,1fr)}.d-command{box-sizing:border-box;padding:18px 22px;background:#20314f;color:#eef7ff;border-radius:12px;flex-shrink:0;min-width:0}.d-command>span{display:block;font-size:17px;color:#b3d7ee;margin-bottom:8px}.d-command code{font-family:ui-monospace,Consolas,monospace;font-size:24px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;display:block;color:inherit;background:none;padding:0;border:0}
.d-address{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #c6dfef;border-radius:10px;padding:10px 15px;font-size:25px;font-weight:700;white-space:nowrap;max-width:100%;box-sizing:border-box;margin-top:10px}.d-address svg{width:35px;height:35px;flex-shrink:0}
.media-chapter{display:flex;align-items:center;gap:8px;width:100%;padding-top:4px}.media-chapter select{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}.media-chapter>span{white-space:nowrap}
@media(max-width:600px){
 .web-lesson.is-expanded .d-canvas{inset:0;left:0;top:0;width:100%;height:100%;padding:16px;transform:none;overflow:auto}
 .web-lesson.is-expanded .d-kicker{font-size:12px;margin-bottom:6px}.web-lesson.is-expanded .d-title{font-size:22px;line-height:1.4}
 .web-lesson.is-expanded .d-body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;padding-top:12px;overflow:auto}
 .web-lesson.is-expanded .d-art{height:135px;flex:0 0 135px}.web-lesson.is-expanded .d-art img{width:100%;height:135px}.web-lesson.is-expanded .d-address{font-size:15px;padding:4px 10px;position:absolute;bottom:0}.web-lesson.is-expanded .d-address svg{width:24px;height:24px}
 .web-lesson.is-expanded .d-sequence{gap:10px;flex-shrink:0;min-height:auto;padding:0;display:flex;flex-direction:column;overflow:visible;border:0;border-radius:0}
 .web-lesson.is-expanded .d-card{display:grid;grid-template-columns:45px minmax(0,1fr);gap:10px;padding:10px;border:1px solid #d5e9f8;border-radius:9px;text-align:left;align-items:center}
 .web-lesson.is-expanded .d-object svg{width:45px;height:45px}.web-lesson.is-expanded .d-label{font-size:17px;line-height:1.4}.web-lesson.is-expanded .d-note{font-size:14px;line-height:1.5;margin-top:2px}
 .web-lesson.is-expanded .d-footer{font-size:11px;line-height:1.4;padding-top:10px;gap:10px}.web-lesson.is-expanded .d-command{padding:12px}.web-lesson.is-expanded .d-command>span{font-size:12px}.web-lesson.is-expanded .d-command code{font-size:14px}
 .web-lesson.is-expanded .has-code .d-art{display:none}.web-lesson.is-expanded .layout-rename .d-card:first-child:after{display:none}
}

.web-title-content{display:block;width:100%}.web-title-line{display:block}
.web-lesson-stage{position:relative;container-type:inline-size}.web-lesson-title{position:absolute;inset:0;display:grid;place-items:center;box-sizing:border-box;margin:0;padding:clamp(10px,3vh,48px) 8%;background:#f6f8fb;color:#112447;text-align:center;font-family:system-ui,"Noto Sans JP",sans-serif;font-size:clamp(18px,min(5cqw,7vh),52px);font-weight:700;line-height:1.55;overflow-wrap:anywhere;line-break:strict}.web-lesson-stage>[hidden]{display:none!important}
.web-lesson-stage{aspect-ratio:16/9;background:#f6f8fb;display:grid;place-items:center;overflow:hidden}.web-lesson-stage img{display:block;width:100%;height:100%;object-fit:contain}.web-lesson audio{display:block;width:calc(100% - 24px);margin:12px;min-width:0}.web-lesson.is-expanded{position:fixed;inset:0;z-index:10000;margin:0;display:flex;flex-direction:column;background:#f6f8fb;overflow:auto;border:0;border-radius:0}.web-lesson.is-expanded .web-lesson-stage{position:relative;flex:1;min-height:0;aspect-ratio:auto}.web-lesson.is-expanded img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain}.web-lesson.is-expanded figcaption{display:none}.web-lesson.is-expanded audio,.web-lesson.is-expanded .media-actions{flex-shrink:0}body.has-expanded-lesson{overflow:hidden}
.web-motion{display:grid;place-items:center;background:#f5f9fc}.web-motion>svg{width:100%;height:100%;display:block;font-family:system-ui,"Noto Sans JP",sans-serif}.web-lesson-stage .web-motion svg{position:static}
.section-media{margin:22px 0 30px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.section-media figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:700}
.section-media .media-production-note{margin:0;padding:12px 16px;background:var(--warn-bg);border-bottom:1px solid var(--line);font-size:13px;line-height:1.8;color:var(--ink)}
.media-production-note strong{display:block;font-weight:700}
.section-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#f4f6f9}
.media-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;font-size:13px}
.media-actions button,.media-actions select{font:inherit;border:1px solid var(--line);border-radius:5px;padding:6px 12px;background:white;color:var(--ink)}
.media-actions .media-play{background:var(--accent);color:white;border-color:var(--accent);min-width:88px;cursor:pointer}
.media-actions label{display:flex;align-items:center;gap:8px;margin-left:auto}.media-status{width:100%;color:var(--muted)}.media-status:empty{display:none}
@media(max-width:480px){.media-actions{padding:10px;gap:8px}.media-actions select{padding:6px}}
@media(max-height:500px) and (min-width:601px){.web-lesson.is-expanded audio{height:36px;margin:4px 10px;width:calc(100% - 20px)}.web-lesson.is-expanded .media-actions{flex-wrap:nowrap;padding:5px 10px;gap:8px;font-size:11px}.web-lesson.is-expanded .media-actions button,.web-lesson.is-expanded .media-actions select{padding:5px 8px;min-height:32px}.web-lesson.is-expanded .media-chapter{flex:1;width:auto;min-width:0;padding:0}.web-lesson.is-expanded .media-chapter>span{display:none}.web-lesson.is-expanded .media-status:empty{display:none}}

.preview-access-note{margin:0 0 28px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper);font-size:14px}.preview-access-note strong{display:block;color:var(--accent)}
.course-paywall{padding:28px;margin:24px 0;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.course-paywall .paywall-label{font-size:12px;color:var(--accent);font-weight:700;margin:0 0 8px}.course-paywall h3{margin:0 0 14px;padding:0;border:0;font-size:22px;line-height:1.6}.course-paywall h3:before{display:none}
.course-paywall p{margin:0 0 16px}.paywall-links{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 14px}.paywall-links a{padding:10px 18px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-size:14px;text-decoration:none;font-weight:700}.paywall-links .paywall-secondary{background:var(--paper);color:var(--accent)}
.course-paywall .paywall-help{font-size:12px;color:var(--muted);margin-bottom:8px}.paywall-reload{font:inherit;font-size:13px;color:var(--accent);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline}.preview-locked-tag{font-size:13px;color:var(--muted)}
@media(max-width:480px){.course-paywall{padding:20px}.course-paywall h3{font-size:19px}.paywall-links{flex-direction:column}.paywall-links a{text-align:center}}

/* 最終更新: 2026-10-31 19:03 */