/* Next Token — Parallel World  /  style.css  (v3: ダーク基調。温かい焦げ茶の黒)
   ground: warm espresso black / ink: cream / accent: amber (used sparingly) */

:root {
  --paper: #15110d;
  --paper-2: #1f1a14;
  --ink: #f6ead1;
  --text: #d9cdb4;
  --muted: #a0937c;
  --accent: #d8b36a;
  --line: rgba(246, 234, 209, .16);
  --serif: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", sans-serif;
  --body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Cormorant Garamond", "Times New Roman", serif;
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1280px;
  --deep: #0e0b08;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--ui); font-size: 15px; line-height: 1.85;
  line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--paper); }

.label { font-family: var(--ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter); color: #f6f0e4;
}
.site-header { transition: background .3s, padding .3s, box-shadow .3s; }
.site-header.is-solid, .site-header.scrolled { background: rgba(22,17,14,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-header.scrolled { padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(243,236,223,.12); }
.site-header.is-solid { position: sticky; top: 0; }
.nav .nav-ext { border: 1px solid rgba(246,240,228,.45); padding: 6px 12px; border-radius: 999px; opacity: 1; }
.nav .nav-ext:hover { background: rgba(246,240,228,.12); border-bottom-color: rgba(246,240,228,.45); }
html { scroll-padding-top: 72px; }
.brand { font-family: var(--en); font-size: 23px; font-weight: 500; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.brand span { opacity: .6; font-weight: 400; margin-left: .4em; }
.nav { display: flex; gap: clamp(16px, 2.6vw, 36px); font-size: 12.5px; letter-spacing: .14em; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; opacity: .88; transition: opacity .2s, border-color .2s; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { opacity: 1; border-bottom-color: currentColor; }
.nav small { display: none; }

/* ---------- hero (photo) ---------- */
.hero { position: relative; min-height: min(94svh, 940px); color: #f6f0e4; display: flex; align-items: flex-end; overflow: hidden; background: #0b0d12; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,0) 28%, rgba(10,8,6,0) 48%, rgba(10,8,6,.78) 100%); }
.hero-text { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px 60px; align-items: end; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5.6vw, 76px); line-height: 1.28; letter-spacing: .02em; font-feature-settings: "palt"; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero h1 small { display: block; font-family: var(--en); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .24em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px; opacity: .85; }
.hero p { margin: 0; font-family: var(--ui); font-weight: 400; font-size: 15px; line-height: 2; opacity: .92; }
.hero p a { display: inline-block; margin-top: 14px; font-family: var(--ui); font-size: 13px; letter-spacing: .14em; text-decoration: none; border-bottom: 1px solid rgba(246,240,228,.7); padding-bottom: 3px; }
.hero p a + a { margin-left: 24px; }

/* ---------- sections ---------- */
section { padding: clamp(64px, 9vw, 120px) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.4; font-feature-settings: "palt"; }
.sec-head .more { font-size: 12.5px; letter-spacing: .14em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* column feature */
.mag { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 44px); }
.m-main { grid-column: span 7; }
.m-side { grid-column: span 5; display: grid; gap: clamp(20px, 3vw, 36px); align-content: start; }
.item { display: block; text-decoration: none; }
.item .ph { overflow: hidden; background: var(--paper-2); aspect-ratio: 3 / 2; }
.item .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.item:hover .ph img { transform: scale(1.035); }
.item .meta { display: flex; gap: 14px; align-items: baseline; margin: 16px 0 6px; }
.item .no { font-family: var(--en); font-size: 17px; letter-spacing: .06em; }
.item h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; line-height: 1.5; font-feature-settings: "palt"; }
.m-main h3 { font-size: clamp(24px, 2.8vw, 36px); }
.m-side h3 { font-size: clamp(18px, 1.7vw, 22px); }
.item p { margin: 0; color: var(--muted); font-size: 14px; }
.m-side .item { display: grid; grid-template-columns: 44% 1fr; gap: 18px; align-items: start; }
.m-side .item .meta { margin-top: 0; }

.col-list { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.col-list li { border-bottom: 1px solid var(--line); }
.col-list a { display: grid; grid-template-columns: 148px 56px minmax(0, 1fr) auto; gap: 8px clamp(14px, 2.6vw, 34px); align-items: center; padding: 18px 0; text-decoration: none; }
.col-list .th { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.col-list .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.col-list a:hover .th img { transform: scale(1.06); }
.col-list .no { font-family: var(--en); font-size: 20px; }
.col-list h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.55; font-feature-settings: "palt"; }
.col-list .sub { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.col-list time { font-family: var(--en); font-size: 15px; letter-spacing: .06em; color: var(--muted); }

/* journal (photo band + typographic list) */
.band { position: relative; min-height: clamp(300px, 42vw, 520px); display: flex; align-items: flex-end; color: #f6f0e4; overflow: hidden; margin-bottom: clamp(36px, 5vw, 64px); }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,6,.72), rgba(10,8,6,.05) 62%); }
.band .in { position: relative; z-index: 1; padding: clamp(24px, 4vw, 52px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; width: 100%; }
.band h2 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.4; }
.band p { margin: 0; max-width: 34em; opacity: .9; font-size: 14.5px; }
.band .label { color: rgba(246,240,228,.75); }
.topics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 80px); border-top: 1px solid var(--line); }
.topics li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.topics .k { font-family: var(--en); font-size: 15px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.topics h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 20px; }
.topics p { margin: 0; color: var(--muted); font-size: 14px; }
.topics .wide { grid-column: 1 / -1; background: var(--paper-2); padding: 22px 20px; margin-top: 18px; border: 0; }
.soon { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-left: .8em; font-family: var(--ui); }

/* timeline teaser */
.tl-axis { display: flex; justify-content: space-between; font-family: var(--en); font-size: 15px; color: var(--muted); letter-spacing: .06em; margin-bottom: 8px; padding-left: 126px; }
.tl-lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; padding: 12px 0 32px; border-top: 1px solid var(--line); }
.tl-lane > b { font-size: 12px; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; }
.tl-track { position: relative; height: 30px; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); opacity: .35; }
.tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; background: var(--ink); border-radius: 50%; }
.tl-dot span { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--muted); }
.tl-note { margin: 28px 0 0; color: var(--muted); font-size: 13.5px; }

/* café (photo tiles) */
.cafe-sec { background: var(--ink); color: #f3ecdf; }
.cafe-sec .sec-head { border-bottom-color: rgba(243,236,223,.5); }
.cafe-sec .label { color: rgba(243,236,223,.65); }
.cafe-sec .lead { margin: 0 0 30px; max-width: 36em; opacity: .85; }
.cafe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cafe-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 18px; color: #f6f0e4; text-decoration: none; background: #000; }
.cafe-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cafe-card:hover img { transform: scale(1.06); }
.cafe-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 35%, rgba(0,0,0,.72)); }
.cafe-card > * { position: relative; z-index: 1; }
.cafe-card .time { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.cafe-card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; }
.cafe-card p { margin: 0; font-size: 12.5px; opacity: .85; }
.cafe-foot { margin-top: 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; opacity: .85; }
.cafe-foot a { letter-spacing: .12em; }


/* ---------- page tops (list pages) ---------- */
.page-top { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 112px); }
.page-top h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5vw, 60px); line-height: 1.35; margin: 10px 0 14px; font-feature-settings: "palt"; }
.page-top .lead { color: var(--muted); max-width: 36em; margin: 0 0 40px; }

/* ---------- article ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ink); z-index: 50; }
.cover { height: clamp(220px, 46vh, 520px); overflow: hidden; background: var(--ink); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.article-head { max-width: 980px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) 0; }
.crumb { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.article-head h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4.6vw, 52px); line-height: 1.42; margin: 18px 0 18px; font-feature-settings: "palt"; letter-spacing: .01em; }
.article-lede { font-family: var(--serif); font-size: clamp(17px, 1.9vw, 22px); color: var(--muted); margin: 0 0 26px; line-height: 1.85; }
.article-meta { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13.5px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.chip { font-size: 12px; letter-spacing: .08em; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; }
.article-body { max-width: 980px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter) 40px; font-family: var(--body); font-size: clamp(16.5px, 1.45vw, 18px); line-height: 2.1; }
.article-body > * { max-width: 40em; }
.article-body p { margin: 0 0 1.45em; text-wrap: pretty; }
.article-body h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.55; margin: 2.8em 0 1.2em; padding-top: 1em; border-top: 1px solid var(--ink); font-feature-settings: "palt"; }
.article-body blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.3em; border-left: 2px solid var(--ink); color: #4a3d33; }
.article-foot { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
.source-box { max-width: 40em; background: var(--paper-2); padding: 18px 22px; font-size: 14px; margin-bottom: 40px; }
.source-box a { color: var(--accent); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--gutter) clamp(64px, 9vw, 112px); max-width: 980px; margin: 0 auto; }
.pager a { text-decoration: none; border-top: 1px solid var(--ink); padding: 16px 0 0; display: block; }
.pager small { font-size: 11.5px; letter-spacing: .2em; color: var(--muted); }
.pager strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.55; margin-top: 6px; }
.pager a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.pager .next { text-align: right; }

/* ---------- café player ---------- */
.room-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 30px; }
.room-tab { appearance: none; border: 0; cursor: pointer; text-align: left; position: relative; overflow: hidden; aspect-ratio: 16 / 10; padding: 14px 16px; color: #f6f0e4; font-family: var(--ui); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background: #000; filter: brightness(.62) saturate(.85); transition: filter .25s; }
.room-tab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-tab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.8)); }
.room-tab > * { position: relative; z-index: 1; }
.room-tab small { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.room-tab strong { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.4; }
.room-tab span { font-size: 12px; opacity: .85; }
.room-tab.on, .room-tab:hover { filter: none; }
.player-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player-frame iframe, .facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade { appearance: none; cursor: pointer; background-size: cover; background-position: center; display: grid; place-items: center; padding: 0; }
.facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.facade .play { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid #f6f0e4; display: grid; place-items: center; transition: transform .25s, background .25s; }
.facade .play::before { content: ""; border-left: 20px solid #f6f0e4; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.facade:hover .play { transform: scale(1.08); background: rgba(0,0,0,.35); }
.player-bar { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 0 4px; font-family: var(--serif); font-weight: 700; }
.btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--ui); font-size: 13px; letter-spacing: .1em; text-decoration: none; padding: 9px 14px; border: 1px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.player-hint { margin: 0; color: var(--muted); font-size: 13px; }
.track-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-height: 560px; overflow: auto; }
.track-list li { border-bottom: 1px solid var(--line); }
.track-list button { appearance: none; width: 100%; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left; padding: 13px 8px; font: inherit; color: inherit; transition: background .2s; }
.track-list button:hover { background: rgba(43,35,29,.06); }
.track-list li.on button { background: rgba(43,35,29,.11); }
.track-list i { font-family: var(--en); font-style: normal; color: var(--muted); font-size: 16px; }
.track-list span { font-size: 14px; line-height: 1.55; }
.track-list em { font-style: normal; font-family: var(--en); color: var(--muted); font-size: 15px; letter-spacing: .04em; }
body.mini { background: var(--ink); color: var(--paper); }
.mini-wrap { padding: 14px; }
.mini-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--en); font-size: 20px; }
.mini-top select { background: #241c17; color: var(--paper); border: 1px solid rgba(243,236,223,.25); padding: 6px 8px; font-family: var(--ui); font-size: 13px; }
.mini-now { font-family: var(--serif); font-size: 15px; line-height: 1.6; padding: 12px 0; }
.mini-list { max-height: none; border-top-color: rgba(243,236,223,.35); }
.mini-list li { border-bottom-color: rgba(243,236,223,.12); }
.mini-list em, .mini-list i { color: rgba(243,236,223,.55); }
.mini-list button:hover { background: rgba(243,236,223,.08); }
.mini-list li.on button { background: rgba(243,236,223,.16); }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-text { grid-template-columns: 1fr; }
  .m-main, .m-side { grid-column: 1 / -1; }
  .m-side .item { grid-template-columns: 38% 1fr; }
  .col-list a { grid-template-columns: 96px minmax(0, 1fr); }
  .col-list .no, .col-list time { display: none; }
  .topics { grid-template-columns: 1fr; }
  .topics li { grid-template-columns: 96px 1fr; }
  .cafe-grid { grid-template-columns: 1fr 1fr; }
  .room-tabs { grid-template-columns: 1fr 1fr; }
  .player-wrap { grid-template-columns: 1fr; }
  .track-list { max-height: 420px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .tl-lane { grid-template-columns: 1fr; gap: 6px; }
  .tl-axis { padding-left: 0; }
}
@media (max-width: 520px) {
  .site-header { flex-wrap: wrap; gap: 10px 16px; padding-top: 16px; }
  .brand { font-size: 20px; }
  .nav { gap: 14px; font-size: 12px; letter-spacing: .06em; }
  .m-side .item { grid-template-columns: 1fr; }
}

/* world (animated AI scene) */
.world { position: relative; background: #060d18; color: #eaf3ff; min-height: clamp(380px, 52vw, 640px); overflow: hidden; margin-bottom: clamp(36px, 5vw, 64px); }
.world-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.world .in { position: relative; z-index: 1; pointer-events: none; padding: clamp(24px, 4vw, 52px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.world h2 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.4; }
.world p { margin: 0; max-width: 28em; opacity: .85; font-size: 14.5px; }
.world .label { color: rgba(190,220,255,.8); }
.world-mini { min-height: clamp(220px, 28vw, 340px); margin: 0; }
@media (max-width: 700px) { .world { min-height: 520px; } .world-mini { min-height: 240px; } }

/* footer */
.site-footer { background: var(--ink); color: rgba(243,236,223,.72); font-size: 13px; padding: clamp(44px, 6vw, 80px) var(--gutter) 28px; }
.site-footer a { color: #f3ecdf; text-decoration: none; }
.ft-main { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 32px 40px; padding-bottom: clamp(32px, 4vw, 52px); }
.ft-brand .brand { font-size: 28px; display: inline-block; color: #f3ecdf; }
.ft-brand p { margin: 14px 0 0; line-height: 1.9; max-width: 22em; }
.ft-col { display: flex; flex-direction: column; gap: 10px; }
.ft-col h4 { margin: 0 0 6px; font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,236,223,.5); }
.ft-col a { opacity: .88; width: fit-content; border-bottom: 1px solid transparent; }
.ft-col a:hover { opacity: 1; border-bottom-color: currentColor; }
.ft-bar { max-width: var(--max); margin: 0 auto; border-top: 1px solid rgba(243,236,223,.15); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; align-items: center; }
.ft-bar small { font-size: 12px; color: rgba(243,236,223,.55); letter-spacing: .02em; }
.ft-bar .totop { font-size: 12px; letter-spacing: .08em; }
@media (max-width: 900px) { .ft-main { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ft-main { grid-template-columns: 1fr 1fr; } .ft-bar { flex-direction: column; align-items: flex-start; } .nav .nav-ext { display: none; } }

/* timeline page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 13px var(--ui); letter-spacing: .06em; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; }
.tl-wrap { padding-top: 0; }
.tl-year { display: grid; grid-template-columns: 120px 1fr; gap: 12px 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.tl-year[hidden], .tl-card[hidden] { display: none; }
.tl-year > h2 { margin: 0; font-family: var(--en); font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: .02em; position: sticky; top: 84px; align-self: start; }
.tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tl-card { background: var(--paper-2); border-left: 3px solid var(--c, var(--ink)); padding: 14px 18px 16px; }
.tl-card .tag { font: 500 10.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c, var(--muted)); }
.tl-card h3 { margin: 6px 0 4px; font-family: var(--serif); font-weight: 700; font-size: 16.5px; line-height: 1.5; }
.tl-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8; }
@media (max-width: 700px) { .tl-year { grid-template-columns: 1fr; } .tl-year > h2 { position: static; } }

/* tables in articles, tag chips */
.article-body table { border-collapse: collapse; width: 100%; max-width: 40em; margin: 1.6em 0 2em; font-family: var(--ui); font-size: 14.5px; line-height: 1.8; }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-body thead th { border-bottom: 1px solid var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; }
.article-body ul { max-width: 40em; padding-left: 1.3em; margin: 0 0 1.45em; }
.article-body li { margin: .3em 0; }
.article-body a { text-underline-offset: 3px; }
.tagchip { display: inline-block; margin-top: 8px; font: 500 11px var(--ui); letter-spacing: .12em; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.article-meta .tagchip { margin-top: 0; }
@media (max-width: 700px) { .article-body table { display: block; overflow-x: auto; } }

/* ---------- café room (immersive) ---------- */
.cafe-room { position: relative; background: #0b0807; color: #f3ecdf; min-height: 100vh; overflow: hidden; }
.room-bg { position: absolute; inset: 0; z-index: 0; }
.room-bg i { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.15); transform: scale(1.08); opacity: 0; transition: opacity 1.2s ease; }
.room-bg i.on { opacity: .7; }
.room-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,8,7,.35) 0%, rgba(11,8,7,.72) 55%, #0b0807 100%); }
.room-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(56px, 8vw, 110px); }
.room-head .label { color: rgba(243,236,223,.7); }
.room-head h1 { margin: 10px 0 12px; font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5.6vw, 72px); line-height: 1.25; letter-spacing: .01em; }
.room-meta { margin: 0; color: rgba(243,236,223,.78); font-size: 14.5px; letter-spacing: .06em; }
.room-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 4vw, 44px) 0 clamp(22px, 3vw, 36px); }
.room-switch .room-tab { justify-content: flex-start; appearance: none; position: static; aspect-ratio: auto; filter: none; opacity: 1; overflow: visible; background: rgba(243,236,223,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(243,236,223,.2); border-radius: 999px; padding: 6px 18px 6px 6px; flex-direction: row; align-items: center; gap: 12px; color: #f3ecdf; transition: background .25s, border-color .25s; }
.room-switch .room-tab::after { display: none; }
.room-switch .room-tab img { position: static; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; filter: saturate(.9) brightness(.85); transition: filter .25s; }
.room-switch .room-tab .tx { display: flex; flex-direction: column; text-align: left; line-height: 1.35; }
.room-switch .room-tab strong { font-family: var(--serif); font-weight: 500; font-size: 15px; }
.room-switch .room-tab small { font-size: 11px; letter-spacing: .1em; color: rgba(243,236,223,.62); }
.room-switch .room-tab:hover { background: rgba(243,236,223,.16); }
.room-switch .room-tab.on { background: #f3ecdf; border-color: #f3ecdf; color: #16110e; }
.room-switch .room-tab.on small { color: rgba(22,17,14,.6); }
.room-switch .room-tab.on img { filter: none; }
.cafe-room .player-wrap { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; }
.cafe-room .player-frame { box-shadow: 0 30px 80px rgba(0,0,0,.55); border-radius: 4px; }
.cafe-room .player-bar { align-items: flex-end; padding: 18px 0 6px; font-family: var(--ui); font-weight: 400; flex-wrap: wrap; }
.cafe-room .np small { display: block; font-size: 10.5px; letter-spacing: .28em; color: rgba(243,236,223,.55); margin-bottom: 4px; }
.cafe-room .np span { font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.5; }
.cafe-room .ctrl { display: flex; gap: 8px; }
.cafe-room .btn { background: transparent; color: #f3ecdf; border: 1px solid rgba(243,236,223,.4); padding: 9px 16px; font: 500 13px var(--ui); letter-spacing: .06em; cursor: pointer; border-radius: 999px; transition: background .2s, border-color .2s; }
.cafe-room .btn:hover { background: rgba(243,236,223,.14); border-color: #f3ecdf; }
.cafe-room .player-hint { color: rgba(243,236,223,.55); }
.cafe-room .track-list { border-top: 1px solid rgba(243,236,223,.35); max-height: none; overflow: auto; background: rgba(11,8,7,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cafe-room .track-list li { border-bottom-color: rgba(243,236,223,.12); }
.cafe-room .track-list button:hover { background: rgba(243,236,223,.09); }
.cafe-room .track-list li.on button { background: rgba(243,236,223,.18); }
.cafe-room .track-list i, .cafe-room .track-list em { color: rgba(243,236,223,.55); }
.cafe-room .track-list span { color: #f3ecdf; }
.cafe-room .track-list li.on span { font-weight: 700; }
.room-more { margin: 36px 0 0; color: rgba(243,236,223,.6); font-size: 14px; }
.room-more a { color: #f3ecdf; }
@media (max-width: 900px) { .cafe-room .player-wrap { grid-template-columns: 1fr; } .cafe-room .track-list { max-height: 360px; } }
@media (max-width: 520px) { .room-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .room-switch .room-tab { padding: 5px 10px 5px 5px; gap: 8px; min-width: 0; } .room-switch .room-tab img { width: 34px; height: 34px; } .room-switch .room-tab strong { font-size: 12.5px; } .room-switch .room-tab small { display: none; } }

/* café room: English display type */
.room-head h1 { font-family: var(--en); font-weight: 600; font-size: clamp(46px, 8vw, 112px); line-height: 1.02; letter-spacing: .005em; margin: 14px 0 18px; }
.room-head .label { font-weight: 500; letter-spacing: .3em; }
.room-meta { font-family: var(--en); font-size: clamp(18px, 2vw, 24px); letter-spacing: .04em; font-style: italic; color: rgba(243,236,223,.85); }
.room-switch .room-tab strong { font-family: var(--en); font-weight: 600; font-size: 18px; letter-spacing: .01em; }
.room-switch .room-tab small { font-family: var(--en); font-size: 13px; letter-spacing: .03em; }
.cafe-room .np span { font-family: var(--en); font-weight: 600; font-size: clamp(19px, 2vw, 25px); }
@media (max-width: 520px) { .room-switch .room-tab strong { font-size: 15px; } }
.article-body pre { max-width: 40em; margin: 1.4em 0 1.8em; padding: 16px 18px; background: #16110e; color: #f3ecdf; overflow-x: auto; border-radius: 4px; font-size: 14px; line-height: 1.8; }
.article-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.article-body :not(pre) > code { background: var(--paper-2); padding: 1px 6px; border-radius: 3px; font-size: .9em; }
.article-body > table { max-width: 100%; display: block; overflow-x: auto; }
.article-body > table th, .article-body > table td { min-width: 5.5em; }

/* topics: clickable */
.topics h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.topics h3 a:hover { color: var(--accent); border-color: var(--accent); }
.topics .tcount { margin-left: 10px; font-family: var(--en); font-size: 13px; color: var(--accent); white-space: nowrap; }

/* outlook archive */
.ol-hero { margin-bottom: 0; }
.ol-hero h1 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5vw, 60px); line-height: 1.3; }
.ol-wrap { padding-top: clamp(24px, 4vw, 48px); }
.ol-list { border-top: 1px solid var(--line); }
.ol-day { display: grid; grid-template-columns: 150px 1fr; gap: clamp(20px, 4vw, 64px); padding: clamp(36px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.ol-date { position: sticky; top: 130px; align-self: start; font-family: var(--en); }
.ol-date time { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.2; }
.ol-date span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.ol-status { display: inline-block; margin-top: 14px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; font-style: normal; font-size: 12px; color: var(--accent); font-family: var(--ui); }
.ol-items { display: grid; gap: clamp(20px, 3vw, 32px); max-width: 44em; }
.ol-item { background: var(--paper-2); padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); border-radius: 4px; }
.ol-item header { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.ol-no { font-family: var(--en); font-size: 26px; color: var(--accent); line-height: 1; flex: none; }
.ol-item h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; }
.ol-flow { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.ol-flow li { font-size: 13px; line-height: 1.6; padding: 3px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.ol-flow li + li::before { content: "→"; margin-right: 8px; color: var(--accent); }
.ol-text p { margin: 0 0 1.1em; line-height: 2.05; font-size: 16px; letter-spacing: .02em; }
.ol-text p:last-child { margin-bottom: 0; }
.ol-sig { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--paper); font-size: 15px; line-height: 1.95; }
.ol-sig p { margin: 0 0 .6em; }
.ol-sig p:last-child { margin-bottom: 0; }
.ol-sig b { display: block; margin-bottom: 2px; font-family: var(--en); font-size: 12.5px; letter-spacing: .12em; color: var(--accent); font-weight: 600; }
.ol-siglist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ol-siglist li { display: grid; grid-template-columns: 2.6em 1fr; }
.ol-siglist li span { color: var(--accent); font-family: var(--en); }
.ol-src { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .ol-day { grid-template-columns: 1fr; } .ol-date { position: static; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .ol-date time { font-size: 26px; } .ol-nav { top: 56px; } }
@media (max-width: 760px) {
  .band.ol-hero { min-height: 380px; }
  .band.ol-hero img { object-position: 72% 50%; }
  .band.ol-hero::after { background: linear-gradient(to top, rgba(14,10,8,.88) 0%, rgba(14,10,8,.7) 45%, rgba(14,10,8,.15) 100%) !important; }
  .ol-hero h1, .ol-hero p, .ol-hero .label { text-shadow: 0 1px 10px rgba(0,0,0,.65); }
}



.ol-nav { margin: 0 0 clamp(24px, 3vw, 40px); }
.ol-day.is-off { display: none; }
.ol-day { scroll-margin-top: 84px; }
.ol-fallback { display: flex; flex-wrap: wrap; gap: 8px; }
.ol-fallback a { padding: 4px 12px; border: 1px solid #16110e; border-radius: 99px; color: #16110e; text-decoration: none; font-weight: 700; }
.ol-js .ol-fallback { display: none; }
.ol-cal { width: 100%; max-width: 340px; padding: 16px 18px 18px; background: #fffdf8; border: 1px solid rgba(22,17,14,.16); border-radius: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head strong { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.cal-head button { appearance: none; border: 0; background: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: #16110e; }
.cal-head button:hover:not(:disabled) { background: rgba(22,17,14,.08); }
.cal-head button:disabled { color: rgba(22,17,14,.2); cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-w { font-size: 11px; color: #8a7d6e; padding-bottom: 4px; }
.cal-grid .sun { color: #b0553a; } .cal-grid .sat { color: #3f6b99; }
.cal-grid .no { color: rgba(22,17,14,.28); }
.cal-grid .cal-w.sun, .cal-grid .cal-w.sat { opacity: .8; }
.cal-grid a, .cal-grid .no { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 14px; }
.cal-grid a.has { background: #f0e4d0; color: #8a3f26; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.cal-grid a.has:hover { background: #e3cdb0; }
.cal-grid a.has.cur { background: #b0553a; color: #fffdf8; }
@media (max-width: 760px) { .ol-cal { max-width: none; } }

.ol-up { position: fixed; right: 18px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid rgba(22,17,14,.2); border-radius: 99px; background: rgba(255,253,248,.96); color: #8a3f26; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em; box-shadow: 0 4px 18px rgba(22,17,14,.18); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.ol-up.show { opacity: 1; transform: none; pointer-events: auto; }
.ol-up:hover { background: #f0e4d0; }
.ol-up span { font-size: 16px; line-height: 1; }
.page-top.jr-top { padding-top: clamp(28px, 4vw, 48px); }

/* world hero (各ページの動く頭脳) */
.world-hero { display: flex; align-items: flex-end; min-height: clamp(340px, 38vw, 480px); margin-bottom: 0; }
.world-hero .in { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); }
.world-hero h1 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.3; color: #f2f7ff; }
.world-hero p { max-width: 30em; }
.world-hero + .page-top, .world-hero + main { }
@media (max-width: 700px) { .world-hero { min-height: 520px; } }
.scene-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.world-circuit { background: #04100f; }
.world-branch { background: #0a0a18; }
.world-timeline { background: #0a0d16; }
.world-circuit .label { color: rgba(150,235,215,.85); }
.world-branch .label { color: rgba(255,214,150,.85); }
.world-timeline .label { color: rgba(255,200,160,.85); }

/* ---------- IT記事: 分け方 ---------- */
.jr-h { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); margin: 6px 0 4px; font-feature-settings: "palt"; }
.jr-top .col-list { margin-top: 22px; }
.jr-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; margin: 0 0 clamp(48px, 6vw, 80px); }
.jr-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n tt ct" "dd dd dd"; gap: 6px 12px; align-items: baseline; padding: 18px 18px 16px; background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; transition: transform .25s, border-color .25s; }
.jr-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.jr-card .n { grid-area: n; font-family: var(--en); font-size: 20px; color: var(--accent); }
.jr-card .tt { grid-area: tt; font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.45; }
.jr-card .ct { grid-area: ct; font-size: 12px; color: var(--muted); white-space: nowrap; }
.jr-card .dd { grid-area: dd; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.jr-sec { padding: 0; margin: 0 0 clamp(40px, 5vw, 64px); scroll-margin-top: 88px; }
.jr-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.jr-sec-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); margin: 4px 0 2px; font-feature-settings: "palt"; }
.jr-sec-head p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 40em; }
.jr-rows { list-style: none; margin: 0; padding: 0; }
.jr-rows li { border-bottom: 1px solid var(--line); }
.jr-rows a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 4px; text-decoration: none; transition: background .2s; }
.jr-rows a:hover { background: rgba(168, 101, 31, .07); }
.jr-rows .no { font-family: var(--en); font-size: 17px; color: var(--muted); }
.jr-rows .t { font-family: var(--serif); font-size: 16px; line-height: 1.6; font-feature-settings: "palt"; }
.jr-rows time { font-family: var(--en); font-size: 14px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .jr-rows a { grid-template-columns: 30px minmax(0, 1fr); }
  .jr-rows time { display: none; }
  .jr-map { grid-template-columns: 1fr; gap: 8px; }
  .jr-card { padding: 13px 14px; }
  .jr-card .dd { display: none; }
}


/* ---------- IT記事: 数が増えても迷わない仕組み（検索・小分類・用語集・やりたいことから） ---------- */
.jr-more { margin: 10px 4px 0; font-size: 13px; }
.jr-more a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; color: var(--accent); }
.jr-quick { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin: 0 0 26px; }
.jr-quick > a { font-size: 13.5px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.jr-search { display: flex; flex: 1 1 320px; max-width: 520px; border: 1px solid var(--line); background: #fbf8f1; }
.jr-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 14px; font: inherit; color: var(--ink); outline: none; }
.jr-search button { border: 0; background: var(--ink); color: var(--paper); padding: 0 18px; font: inherit; font-size: 13px; letter-spacing: .1em; cursor: pointer; }
.jr-search.big { max-width: 640px; margin-top: 18px; }
.jr-search.big input { padding: 15px 16px; font-size: 16px; }
.jr-subnav { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 8px; }
.jr-subnav a { font-size: 13px; text-decoration: none; padding: 6px 14px; border: 1px solid var(--line); background: var(--paper-2); transition: border-color .2s, background .2s; }
.jr-subnav a:hover { border-color: var(--accent); background: #f1e9d8; }
.jr-subnav a small { margin-left: 6px; color: var(--muted); font-size: 11.5px; }
.jr-subsec { margin-top: 38px; scroll-margin-top: 90px; }
.jr-sub { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-feature-settings: "palt"; }
.jr-sub small { margin-left: 12px; font-size: 12px; font-family: var(--ui); color: var(--muted); font-weight: 400; }
.related { max-width: 52em; margin: 56px auto 0; padding: 0 var(--gutter); }
.related h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.gl-chips { max-width: 52em; margin: 40px auto 0; padding: 18px var(--gutter) 0; }
.gl-chips > div { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.gl-chips > div a { font-size: 13px; text-decoration: none; padding: 5px 13px; border: 1px solid var(--line); background: var(--paper-2); }
.gl-chips > div a:hover { border-color: var(--accent); }
.gl-chips .more { font-size: 12.5px; }
.article-meta .checked { color: var(--muted); font-size: 12.5px; }
.gl-sec { margin-top: 40px; scroll-margin-top: 90px; }
.gl-sec h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.gl-sec dl { margin: 0; }
.gl-item { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 4px 28px; padding: 16px 4px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gl-item dt { font-family: var(--serif); font-size: 17px; font-weight: 500; font-feature-settings: "palt"; }
.gl-item dd { margin: 0; }
.gl-item dd p { margin: 0 0 6px; line-height: 1.85; }
.gl-item .gl-s { font-size: 15px; }
.gl-item .gl-al { font-size: 12px; color: var(--muted); font-family: var(--ui); font-weight: 400; display: block; }
.gl-item .gl-see { font-size: 12.5px; color: var(--muted); }
.gl-item .gl-see a { margin-right: 14px; color: var(--accent); }
.gl-item:target { background: rgba(168, 101, 31, .09); }
.fd-sec { margin-top: 38px; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.fd-card { padding: 18px 18px 14px; background: var(--paper-2); border: 1px solid var(--line); }
.fd-card h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 0 0 6px; line-height: 1.5; font-feature-settings: "palt"; }
.fd-card p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.fd-card ul { margin: 0; padding: 0; list-style: none; }
.fd-card li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.fd-card li a { text-decoration: none; }
.fd-card li a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .gl-item { grid-template-columns: 1fr; gap: 2px; }
  .fd-grid { grid-template-columns: 1fr; }
  .jr-quick { gap: 10px 18px; }
}

/* ---------- 予測台帳 ---------- */
.lg-link { margin: 0 0 18px; font-size: 14px; }
.lg-link a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; color: var(--accent); }
.lg-rule { margin: 8px 0 24px; padding: 18px 22px; background: var(--paper-2); border: 1px solid var(--line); }
.lg-rule h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0 0 8px; }
.lg-rule ul { margin: 0; padding-left: 1.2em; line-height: 1.9; font-size: 15px; }
.lg-first { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.lg-count { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.lg-c { flex: 1 1 110px; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.lg-c b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.2; }
.lg-c span { font-size: 12.5px; color: var(--muted); }
.lg-month { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 36px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 22px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.lg-d time { display: block; font-family: var(--serif); font-size: 17px; }
.lg-badge { display: inline-block; margin-top: 6px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-family: var(--ui); color: var(--muted); }
.lg-row.st-hit .lg-badge { color: #2f6b3a; border-color: #2f6b3a; }
.lg-row.st-partial .lg-badge { color: #8a6a1f; border-color: #8a6a1f; }
.lg-row.st-miss .lg-badge { color: #9a3b2e; border-color: #9a3b2e; }
.lg-b h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.6; margin: 0 0 4px; font-feature-settings: "palt"; }
.lg-b h3 a { text-decoration: none; }
.lg-b h3 a:hover { color: var(--accent); }
.lg-b h3 .ol-no { margin-right: 8px; }
.lg-meta, .lg-note, .lg-links { margin: 2px 0; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.lg-note { color: var(--ink); }
.lg-back { margin: 40px 0 0; font-size: 14px; }
@media (max-width: 640px) { .lg-row { grid-template-columns: 1fr; } .lg-d { display: flex; gap: 12px; align-items: baseline; } }
.tl-card .tl-mo { margin-left: 8px; font-size: 12px; color: var(--muted); font-family: var(--ui); }
.stale-note { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--paper-2); font-size: 13.5px; line-height: 1.8; color: var(--ink); }

/* ---------- レベル表示・要点・くわしく・道筋 ---------- */
.lv { display: inline-block; margin-right: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 11.5px; font-family: var(--ui); font-weight: 500; line-height: 1.7; vertical-align: 2px; letter-spacing: .04em; color: var(--muted); background: var(--paper); text-decoration: none; }
.lv-1 { color: #2f6b3a; border-color: #2f6b3a; }
.lv-2 { color: #8a6a1f; border-color: #8a6a1f; }
.lv-3 { color: #7a3b2e; border-color: #7a3b2e; }
.lvb { margin-right: 0; }
.lvbig { font-size: 16px; padding: 2px 14px; margin-right: 10px; vertical-align: 6px; }
.jr-rows .t .lv { margin-right: 10px; }
.lvnav-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 26px; }
.lvnav-h { grid-column: 1 / -1; margin: 0 0 -2px; font-size: 13px; color: var(--muted); font-family: var(--ui); letter-spacing: .08em; }
.lvnav { display: block; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper-2); text-decoration: none; }
.lvnav:hover { border-color: var(--accent); }
.lvnav b { font-family: var(--serif); font-weight: 500; font-size: 18px; margin-right: 8px; }
.lvnav small { color: var(--muted); font-size: 12.5px; }
.lvnav span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.lvnav-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.lvnav-row .lvnav { padding: 8px 16px; }
.yoten { margin: 8px 0 30px; padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper-2); }
.yoten .yoten-h { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .12em; color: var(--accent); font-family: var(--ui); }
.yoten p { margin: 0 0 6px; }
.yoten ul, .yoten ol { margin: 4px 0 0; padding-left: 1.3em; }
.yoten li { margin: 4px 0; line-height: 1.85; }
details.deep { margin: 26px 0; border: 1px solid var(--line); background: var(--paper); }
details.deep > summary { cursor: pointer; padding: 12px 18px; font-family: var(--serif); font-size: 16px; list-style: none; position: relative; }
details.deep > summary::-webkit-details-marker { display: none; }
details.deep > summary::before { content: "＋"; margin-right: 10px; color: var(--accent); font-family: var(--ui); }
details.deep[open] > summary::before { content: "－"; }
details.deep[open] > summary { border-bottom: 1px solid var(--line); }
details.deep > :not(summary) { margin-left: 20px; margin-right: 20px; }
details.deep > summary + * { margin-top: 18px; }
details.deep > *:last-child { margin-bottom: 18px; }
.path-who { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.8; }
.path-list { list-style: none; margin: 10px 0 0; padding: 0; }
.path-list li a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; }
.path-list li a:hover b { color: var(--accent); }
.pn { font-family: var(--en); font-size: 24px; color: var(--accent); line-height: 1.2; text-align: center; }
.pt b { font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.6; display: block; }
.pt small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.7; }

/* contact */
.contact-box{margin:28px 0 8px;padding:22px 26px;border:1px solid var(--line,#ddd);border-radius:10px;background:rgba(127,127,127,.05)}
.contact-addr{font-size:1.35rem;margin:0 0 8px;letter-spacing:.02em;word-break:break-all}
.contact-addr a{text-decoration:underline;text-underline-offset:4px}
.contact-note{font-size:.85rem;opacity:.7;margin:0}
.contact-list{margin:12px 0 0;padding-left:1.2em;line-height:2}

/* books */
.book-rows a { grid-template-columns: 40px minmax(0, 1fr) auto; }
.book-rows .t b { display: block; font-weight: 500; }
.book-rows .t small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.book-orig { margin: -4px 0 8px; font-family: var(--en); font-style: italic; color: var(--muted); font-size: 15px; }
.book-rel { list-style: none; padding-left: 0; }
.book-rel li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.book-rel small { display: block; color: var(--muted); }
.book-full h3 { margin-top: 1.6em; }
.yoten ul { margin: 0; padding-left: 1.2em; }

/* books v2 */
.bk-bar { margin: 26px 0 6px; display: grid; gap: 14px; }
.bk-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--ui); font-size: 13px; }
.bk-filter > span { color: var(--muted); margin-right: 4px; }
.bk-filter button { font: inherit; padding: 5px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: inherit; cursor: pointer; }
.bk-filter button:hover { border-color: var(--accent, #a8651f); }
.bk-filter button.on { background: var(--accent, #a8651f); border-color: var(--accent, #a8651f); color: #fff; }
.bk-count { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.bk-sec[hidden], .bk-card[hidden] { display: none; }
.bk-sec { margin-top: 40px; }
.bk-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.bk-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent, #a8651f); border-radius: 8px; background: var(--paper); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.bk-card a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.bk-card[data-g="cs"] a { border-left-color: #3f7a8c; }
.bk-card[data-g="dev"] a { border-left-color: #5d7f4f; }
.bk-card[data-g="biz"] a { border-left-color: #8a4f6e; }
.bk-top { display: flex; justify-content: space-between; align-items: center; }
.bk-top .lv { margin-right: 0; }
.bk-yr { font-family: var(--en); font-size: 14px; color: var(--muted); }
.bk-t { font-family: var(--serif); font-size: 18px; line-height: 1.5; font-weight: 500; margin-top: 4px; }
.bk-au { font-size: 13px; color: var(--muted); }
.bk-one { font-size: 14px; line-height: 1.75; margin-top: 4px; }
.bk-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 6px; }
.bk-panel { padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(127,127,127,.05); }
.bk-panel h3 { margin: 0 0 6px; font-size: 13px; font-family: var(--ui); letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.bk-panel p { margin: 0; font-size: 15px; line-height: 1.85; }
.bk-pillars li { margin: .4em 0; }
@media (max-width: 560px) { .bk-grid { grid-template-columns: 1fr; } }

/* ---------- 用語集 v3（分野・ABC・検索・動く絵） ---------- */
.gl-top .gl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-bottom: 26px; }
.gl-top .gl-hero .lead { margin-bottom: 14px; }
.gl-how { margin: 0; font-size: 13.5px; color: var(--muted); }
.gl-anim { position: relative; aspect-ratio: 11 / 8; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 58%, #fffaf0 0%, var(--paper-2) 62%, #e1d8c3 100%); }
.gl-anim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(168,101,31,.10), transparent 60%); pointer-events: none; }
.gl-book { position: absolute; left: 50%; top: 58%; width: 54%; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 14px rgba(43,35,29,.18)); overflow: visible; }
.gl-book .pg { fill: #fffdf7; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.gl-book .sp { stroke: var(--ink); stroke-width: 2; fill: none; }
.gl-book .bk-t { font-family: var(--serif); font-size: 46px; fill: var(--ink); font-weight: 500; }
.gl-book .bk-l { fill: var(--accent); font-family: var(--en); font-size: 54px; }
.gl-flip { transform-origin: 100px 70px; transform-box: view-box; animation: glFlip 7.5s ease-in-out infinite; opacity: 0; }
.gl-flip path:first-child { fill: #f3e6cf; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.gl-flip .ln { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; opacity: .6; }
@keyframes glFlip { 0%, 24% { transform: scaleX(1); opacity: 0; } 26% { opacity: 1; } 52% { transform: scaleX(-1); opacity: 1; } 66% { transform: scaleX(-1); opacity: 0; } 100% { transform: scaleX(-1); opacity: 0; } }
.gl-w { position: absolute; left: 50%; top: 56%; font-family: var(--serif); font-size: clamp(12px, 1.35vw, 15px); line-height: 1; padding: 6px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--text);
  border-radius: 99px; white-space: nowrap; opacity: 0; box-shadow: 0 2px 6px rgba(43,35,29,.08);
  animation: glIn 10.8s ease-in-out infinite; animation-delay: var(--d); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
@keyframes glIn {
  0% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
  10% { opacity: 1; }
  58% { opacity: 1; }
  82% { opacity: 0; transform: translate(-50%, -34%) scale(.35); }
  100% { opacity: 0; transform: translate(-50%, -34%) scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-w { animation: none; opacity: .85; transform: translate(calc(-50% + var(--x) * .62), calc(-50% + var(--y) * .62)); }
  .gl-flip { animation: none; opacity: 0; }
}
.gl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font-family: var(--ui); font-size: 13px; }
.gl-filters button, .gl-views button { font: inherit; padding: 5px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: inherit; cursor: pointer; white-space: nowrap; }
.gl-filters button:hover, .gl-views button:hover { border-color: var(--accent); }
.gl-filters button[aria-pressed="true"], .gl-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gl-bar { position: sticky; top: var(--hh, 64px); z-index: 6; background: var(--paper); padding: 10px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gl-bar-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.gl-search { flex: 1 1 260px; min-width: 0; margin: 0; }
.gl-search input { width: 100%; font: inherit; font-size: 15px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.6); color: inherit; }
.gl-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gl-views { display: flex; gap: 6px; font-family: var(--ui); font-size: 13px; }
.gl-index { display: flex; gap: 2px 12px; overflow-x: auto; white-space: nowrap; padding: 8px 0 2px; font-size: 13px; scrollbar-width: thin; }
.gl-index a { text-decoration: none; padding: 2px 4px; color: var(--muted); }
.gl-index a:hover { color: var(--accent); }
.gl-count { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.gl-n { font-family: var(--ui); font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 12px; }
.gl-cat { display: inline-block; margin-left: 8px; font-family: var(--ui); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; line-height: 1.7; vertical-align: middle; font-weight: 400; }
.gl-ex, .gl-mis { font-size: 14px; line-height: 1.85; }
.gl-ex b, .gl-mis b { font-size: 11px; letter-spacing: .08em; color: var(--accent); margin-right: 10px; font-weight: 600; }
.gl-src { font-size: 12px; color: var(--muted); }
.gl-src a { margin-right: 10px; color: var(--accent); word-break: break-all; }
.gl-empty { padding: 40px 0; color: var(--muted); }
.gl-sec, .gl-item { scroll-margin-top: calc(var(--hh, 64px) + 140px); }
.gl-item { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.jr-rows .no { min-width: 2.4em; }
@media (max-width: 800px) {
  .gl-top .gl-hero { grid-template-columns: 1fr; }
  .gl-anim { aspect-ratio: 16 / 10; max-width: 520px; }
  .gl-views { width: 100%; }
}
@media (max-width: 520px) {
  .site-header .nav { flex-wrap: wrap; row-gap: 4px; }
}

.gl-en { display: none; font-family: var(--en); font-size: 15px; color: var(--accent); margin-top: 2px; word-break: break-word; }
[data-glview="abc"] .gl-en { display: block; }
#gl-body > .gl-sec:first-child { margin-top: 14px; }

/* ---------- トップの用語集の枠 ---------- */
.glh { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.glh .gl-anim { width: 100%; }
.glh-today { padding: clamp(4px, 1vw, 12px) 0; }
.glh-today .label em { font-style: normal; margin-left: 10px; color: var(--muted); letter-spacing: .06em; }
.glh-today h3 { margin: 10px 0 12px; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.3; font-feature-settings: "palt"; }
.glh-today h3 a { text-decoration: none; }
.glh-today h3 a:hover { color: var(--accent); }
.glh-today h3 .gl-cat { font-size: 11px; margin-left: 12px; }
.glh-today p { margin: 0 0 16px; font-size: 16px; line-height: 1.95; }
.glh-act { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.glh-act .more { font-size: 12.5px; letter-spacing: .14em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.glh-act button { font: inherit; font-family: var(--ui); font-size: 13px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: inherit; cursor: pointer; }
.glh-act button:hover { border-color: var(--accent); }
.glh-lead { margin: clamp(26px, 3.5vw, 40px) 0 18px; color: var(--muted); font-size: 14.5px; max-width: 46em; }
.glh-lead a { margin-left: 14px; white-space: nowrap; }
.glh-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.glh-cats a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-decoration: none; height: 100%; transition: border-color .2s, transform .2s; }
.glh-cats a:hover { border-color: var(--accent); transform: translateY(-2px); }
.glh-cats b { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.glh-cats i { font-style: normal; font-family: var(--ui); font-size: 12px; color: var(--accent); align-self: center; }
.glh-cats span { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 800px) {
  .glh { grid-template-columns: 1fr; }
  .glh .gl-anim { max-width: 520px; aspect-ratio: 16 / 10; }
}

/* ---------- 用語集・本の冒頭（動く暗い背景） ---------- */
.world-lexicon { background: #140e08; }
.world-shelf { background: #170c10; }
.world-lexicon .label { color: rgba(240,205,140,.9); }
.world-shelf .label { color: rgba(240,170,150,.9); }
.world-lexicon .in, .world-shelf .in { pointer-events: none; }
.gl-top.jr-top { padding-top: clamp(28px, 4vw, 48px); }


/* ---------- 音楽バー（右下。ページを移っても続く） ---------- */
#nt-player { position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; font-family: var(--ui); color: #f3ecdf; }
#nt-player > * { pointer-events: auto; }
.ntp-video { display: none; position: relative; width: 232px; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.ntp-live .ntp-video { display: block; }
.ntp-video iframe, .ntp-video #ntp-slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ntp-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 6px; background: rgba(22,17,14,.93); border: 1px solid rgba(243,236,223,.2); border-radius: 99px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.ntp-sw { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12.5px; letter-spacing: .08em; padding: 3px 8px; cursor: pointer; border-radius: 99px; }
.ntp-sw i { font-style: normal; font-size: 15px; color: #e8c58a; }
.ntp-sw b { font-weight: 500; min-width: 2.2em; text-align: left; }
.ntp-live .ntp-sw b { color: #e8c58a; }
.ntp-sw:hover { background: rgba(255,255,255,.08); }
.ntp-genre { font: inherit; font-size: 12px; background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(243,236,223,.22); border-radius: 99px; padding: 3px 8px; max-width: 150px; cursor: pointer; }
.ntp-genre option { color: #111; }
.ntp-more { display: none; gap: 2px; }
.ntp-live .ntp-more { display: flex; }
.ntp-more button { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.ntp-more button:hover { background: rgba(255,255,255,.12); }
.ntp-title { display: none; max-width: 232px; font-size: 11px; padding: 3px 10px; background: rgba(22,17,14,.88); border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntp-live .ntp-title:not(:empty) { display: block; }
.ntp-pageui:not(.ntp-on) #nt-player { display: none; }
#nt-player.ntp-dock { position: absolute; right: auto; bottom: auto; display: block; z-index: 40; }
#nt-player.ntp-dock .ntp-video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
#nt-player.ntp-dock .ntp-bar, #nt-player.ntp-dock .ntp-title { display: none; }
.site-footer { padding-bottom: 64px; }
.ntp-on:not(.ntp-docked) .site-footer { padding-bottom: 230px; }
.nt-busy, .nt-busy * { cursor: progress; }
@media (max-width: 520px) {
  #nt-player { right: 8px; bottom: 8px; }
  .ntp-video, .ntp-title { width: 200px; max-width: 200px; }
  .ntp-genre { max-width: 112px; }
}

/* ガジェット */
.world-devices { background: #0a1519; }
.world-devices .label { color: rgba(150, 225, 235, .9); }
.world-devices .in { pointer-events: none; }
.gd-card[data-g="apple"] a { border-left-color: #a63d40; }
.gd-card[data-g="smart"] a { border-left-color: #3e7d4f; }
.gd-card[data-g="aidev"] a { border-left-color: #2b6a8f; }
.gd-card[data-g="general"] a { border-left-color: #7a6a2d; }
.gd-st { display: inline-block; font-family: var(--ui); font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 99px; color: #fff; letter-spacing: .04em; }
.gd-st.s-out { background: #3e7d4f; }
.gd-st.s-pre { background: #a8651f; }
.gd-st.s-ann { background: #6b6f7a; }
.gd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 22px 0 6px; }
.gd-facts > div { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(127,127,127,.05); }
.gd-facts dt { font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.gd-facts dd { margin: 0; font-size: 15px; line-height: 1.8; }
.gd-src { padding-left: 1.2em; }
.gd-src li { margin: .35em 0; word-break: break-all; }
.gd-note { margin-top: 22px; font-size: 14px; color: var(--muted); line-height: 1.85; }
.bk-panel ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.85; }


/* ================= ダーク基調（2026-10-16） =================
   変数（--paper / --ink など）を暗色に反転したうえで、
   「もともと暗い面」と「固定の薄い色」を個別に直す。 */
::selection { background: rgba(216, 179, 106, .35); color: #fff; }
.cafe-sec, .site-footer, body.mini, .cover { background: var(--deep); }
.cafe-sec .sec-head { border-bottom-color: rgba(243,236,223,.35); }
.progress { background: var(--accent); }
.tl-track::before, .tl-dot { background: rgba(243,236,223,.55); }

/* 強い罫線（以前は濃い茶）が明るすぎないように */
.sec-head, .article-meta, .article-body h2, .pager a, .track-list, .jr-sec-head, .jr-sub,
.related h2, .gl-sec h2, .lg-month, .article-body thead th, .article-body blockquote { border-color: rgba(243,236,223,.34); }
.article-body blockquote { color: #c4b8a8; }
.chip:hover { border-color: var(--accent); }

/* ボタン類：反転して明るい面になるものは、暗い文字にそろえる */
.btn { border-color: rgba(243,236,223,.55); }
.btn:hover { background: var(--ink); color: var(--deep); }
.chip.on { background: var(--c, #8c6a45); border-color: var(--c, #8c6a45); color: #fff; }
.jr-search { background: #1f1914; }
.jr-search button { background: var(--accent); color: #1a1208; }
.jr-subnav a:hover { background: #2d241c; }
.gl-filters button[aria-pressed="true"], .gl-views button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #1a1208; }
.gl-search input { background: rgba(255,255,255,.06); }
.bk-filter button.on { color: #1a1208; }

/* コード */
.article-body pre { background: #0d0a08; border: 1px solid rgba(243,236,223,.12); }
.track-list button:hover { background: rgba(243,236,223,.07); }
.track-list li.on button { background: rgba(243,236,223,.13); }

/* AKIRAの予測：カレンダー・続きを読む */
.ol-cal { background: #1f1914; border-color: rgba(243,236,223,.16); }
.ol-fallback a { border-color: rgba(243,236,223,.5); color: var(--ink); }
.cal-head button { color: var(--ink); }
.cal-head button:hover:not(:disabled) { background: rgba(243,236,223,.1); }
.cal-head button:disabled { color: rgba(243,236,223,.25); }
.cal-w { color: #a39786; }
.cal-grid .sun { color: #e58b70; }
.cal-grid .sat { color: #7fabd8; }
.cal-grid .no { color: rgba(243,236,223,.3); }
.cal-grid a.has { background: #3a2c1d; color: #f0c28a; }
.cal-grid a.has:hover { background: #4d3a26; }
.cal-grid a.has.cur { background: #b0553a; color: #fffdf8; }
.ol-up { background: rgba(32,26,21,.96); border-color: rgba(243,236,223,.22); color: #f0c28a; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.ol-up:hover { background: #3a2c1d; }

/* 年表のレーン名：暗い地で読める明るさに */
.tl-card .tag { color: color-mix(in srgb, var(--c, #a0937c) 55%, #fff); }
.tl-card { background: var(--paper-2); }

/* 判定の色（暗い地で読める明るさに） */
.lg-row.st-hit .lg-badge, .lv-1 { color: #86c692; border-color: #86c692; }
.lg-row.st-partial .lg-badge, .lv-2 { color: #dcb764; border-color: #dcb764; }
.lg-row.st-miss .lg-badge { color: #e38d7e; border-color: #e38d7e; }
.lv-3 { color: #e39a86; border-color: #e39a86; }
.jr-rows a:hover { background: rgba(216, 179, 106, .09); }
.gl-item:target { background: rgba(216, 179, 106, .13); }

/* 本・ガジェットのカードの色の帯を、暗い地で見える色に */
.bk-card[data-g="cs"] a { border-left-color: #5fa6bb; }
.bk-card[data-g="dev"] a { border-left-color: #86ad73; }
.bk-card[data-g="biz"] a { border-left-color: #c0809f; }
.bk-card a:hover, .gd-card a:hover { box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.gd-card[data-g="apple"] a { border-left-color: #d1666a; }
.gd-card[data-g="smart"] a { border-left-color: #69ad7b; }
.gd-card[data-g="aidev"] a { border-left-color: #5aa0c8; }
.gd-card[data-g="general"] a { border-left-color: #b9a85a; }
.contact-box, .bk-panel, .gd-facts > div { background: rgba(255,255,255,.04); }

/* 用語集の本のアニメ（地とページ） */
.gl-anim { background: radial-gradient(ellipse at 50% 58%, #2c2219 0%, var(--paper-2) 62%, #17110d 100%); }
.gl-book .pg { fill: #2e241b; }
.gl-flip path:first-child { fill: #3b2d1f; }
.gl-w { box-shadow: 0 2px 8px rgba(0,0,0,.4); }


/* ================= ヘッダーのプルダウン（2026-10-16） ================= */
.nav { align-items: center; }
.nav-dd { position: relative; display: flex; align-items: center; gap: 2px; }
.nav .dd-head { padding-right: 0; }
.dd-btn { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 6px; line-height: 1; opacity: .75; font-size: 11px; transition: opacity .2s, transform .2s; }
.dd-btn:hover, .dd-btn:focus-visible { opacity: 1; }
.dd-btn:focus-visible, .dd-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-dd.open .dd-btn { opacity: 1; transform: rotate(180deg); }
.dd-menu { position: absolute; top: 100%; left: -14px; min-width: 188px; padding: 6px 0; margin-top: 8px; display: none; flex-direction: column;
  background: rgba(14,11,8,.97); border: 1px solid rgba(246,234,209,.18); box-shadow: 0 14px 34px rgba(0,0,0,.5); letter-spacing: .08em; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav .dd-menu a { display: block; padding: 10px 18px; border-bottom: 0; opacity: .9; font-size: 13px; }
.nav .dd-menu a:hover, .nav .dd-menu a[aria-current] { opacity: 1; background: rgba(216,179,106,.14); color: var(--accent); }
.nav-dd.open .dd-menu { display: flex; }
@media (hover: hover) { .nav-dd:hover .dd-menu { display: flex; } .nav-dd:hover .dd-btn { opacity: 1; } }
.nav-dd:focus-within .dd-menu { display: flex; }
@media (max-width: 520px) { .nav { gap: 10px; } .dd-menu { min-width: 170px; left: -10px; } }

/* ===== ラボ（/lab/） ===== */
.lab-wrap { max-width: 1040px; }
.lab-crumb { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.lab-back { color: var(--accent); text-decoration: none; }
.lab-back:hover { text-decoration: underline; }
.lab-sec { margin-top: 38px; scroll-margin-top: 90px; }
.lab-n { margin-left: 12px; font-size: 12px; font-family: var(--ui); color: var(--muted); font-weight: 400; }
.lab-n a { color: var(--accent); }
.lab-list, .lab-cards, .tpl-list, .nw-list, .lab-soon, .lab-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.lab-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lab-date { font-family: var(--en); font-size: 22px; color: var(--accent); line-height: 1.3; letter-spacing: .02em; }
.lab-main h3, .lab-card h3 { margin: 6px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.55; color: var(--ink); }
.lab-main p, .lab-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.85; }
.lab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lab-who { font-size: 13px; color: var(--muted); }
.lab-time { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.lab-kind { display: inline-block; font: 500 11.5px var(--ui); letter-spacing: .08em; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: var(--paper-2); }
.k-期限, .k-障害 { border-color: #c4574c; color: #f0b3ab; }
.k-終了, .k-品質低下, .k-料金, .k-上限 { border-color: #c98a3b; color: #ecc78d; }
.k-施行, .k-規制対応, .k-制度, .k-法的な判断, .k-規約 { border-color: #5f8fb8; color: #b4d0ea; }
.k-更新, .k-機能, .k-モデル名 { border-color: #5ea06f; color: #b2dcbc; }
.k-予定, .k-表記, .k-情報漏えい, .k-誤回答の影響, .k-安全対策 { border-color: var(--line); color: var(--text); }
.lab-note { color: var(--muted); }
.lab-links { font-size: 13px; color: var(--muted); }
.lab-links a, .lab-links-list a, .lab-doc a { color: var(--accent); }
.lab-links-list { margin: 8px 0 0; padding-left: 1.2em; line-height: 1.9; }
.lab-warn { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid #c98a3b; background: var(--paper-2); font-size: 14.5px; line-height: 1.85; }
.lab-warn ul { margin: 6px 0 0; padding-left: 1.2em; }
.lab-card { padding: 18px 20px; border: 1px solid var(--line); background: var(--paper-2); margin-bottom: 14px; }
.lab-ba { margin: 8px 0; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 6px 14px; font-size: 14.5px; line-height: 1.8; }
.lab-ba dt { color: var(--muted); font-size: 13px; }
.lab-ba dd { margin: 0; }
.lab-src ul, .lab-unc ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; }
.lab-src a { color: var(--accent); word-break: break-all; }
.lab-main details.deep, .lab-card details.deep, .lab-inc details.deep, .lab-app details.deep { margin: 10px 0; }
.lab-main details.deep > summary, .lab-card details.deep > summary, .lab-app details.deep > summary { font-size: 13.5px; padding: 8px 14px; }
/* インシデント */
.lab-index ol { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.lab-index a { display: block; padding: 10px 14px; border: 1px solid var(--line); background: var(--paper-2); text-decoration: none; color: var(--ink); font-size: 14px; line-height: 1.6; }
.lab-index a:hover { border-color: var(--accent); }
.lab-index small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.lab-index .lab-kind { margin-right: 8px; }
.lab-inc { margin-top: 34px; padding-top: 26px; border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.lab-inc h2 { margin: 8px 0 8px; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.5; color: var(--ink); }
.lab-tl { margin: 0; padding-left: 1.4em; line-height: 1.9; font-size: 14.5px; }
.lab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.lab-col { padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); }
.lab-col h4 { margin: 0 0 6px; font: 500 13px var(--ui); letter-spacing: .08em; color: var(--accent); }
.lab-col.ng h4 { color: #ecc78d; }
.lab-col ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; line-height: 1.85; }
.lab-lesson { font-size: 14.5px; line-height: 1.85; }
@media (max-width: 700px) { .lab-cols { grid-template-columns: 1fr; } .lab-item { grid-template-columns: 1fr; } .lab-ba { grid-template-columns: 1fr; } .lab-time { margin-left: 0; } }
/* タイル */
.lab-tiles { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lab-tile a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper-2); text-decoration: none; color: var(--text); transition: border-color .2s, background .2s; }
.lab-tile a:hover { border-color: var(--ink); }
.lab-tile strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.5; color: var(--ink); }
.lab-tile small { display: block; margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
.lab-tile span { display: block; font-size: 13.5px; line-height: 1.8; }
.lab-tile.big a { padding: 22px 22px; }
.lab-tile.big strong { font-size: 19px; }
.lab-soon { margin-top: 14px; }
.lab-soon li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.lab-soon .lab-date { display: inline-block; min-width: 3.6em; font-size: 17px; }
.lab-soon small { margin-left: 10px; color: var(--muted); }
/* 企業・ゼミ */
.lab-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3.2vw, 34px); margin: 4px 0 8px; color: var(--ink); }
.lab-h2 small { margin-left: 12px; font-size: 13px; color: var(--muted); font-family: var(--ui); }
.lab-lead { font-size: 16px; line-height: 1.95; max-width: 40em; }
.lab-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.lab-grid2 section, .lab-wrap > section h3 { }
.lab-grid2 section { padding: 14px 18px; border: 1px solid var(--line); background: var(--paper-2); }
.lab-wrap h3 { font-family: var(--serif); font-weight: 500; font-size: 16.5px; color: var(--ink); margin: 0 0 8px; }
.lab-grid2 ul, .lab-grid2 p { margin: 0; font-size: 14.5px; line-height: 1.85; padding-left: 0; }
.lab-grid2 ul { padding-left: 1.2em; }
@media (max-width: 760px) { .lab-grid2 { grid-template-columns: 1fr; } }
.lab-steps { counter-reset: st; }
.lab-step { padding: 18px 0; border-bottom: 1px solid var(--line); }
.lab-step h3 { display: flex; align-items: baseline; gap: 12px; }
.lab-step .n { font-family: var(--en); font-size: 24px; color: var(--accent); }
.lab-q { margin: 8px 0; padding: 8px 16px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 15px; background: var(--paper-2); }
.lab-watch { color: var(--muted); font-size: 14px; }
.lab-howto { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper-2); }
/* テンプレ */
.tpl { margin: 10px 0; }
.tpl details.deep { margin: 0; }
.tpl details.deep > summary { font-size: 15.5px; line-height: 1.6; }
.tpl details.deep > summary small { display: block; margin: 4px 0 0 28px; color: var(--muted); font: 400 12.5px var(--ui); }
.tpl-cat { display: inline-block; margin-right: 8px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 99px; font: 500 11.5px var(--ui); color: var(--accent); }
.tpl-pre { white-space: pre-wrap; word-break: break-word; margin: 14px 20px 8px; padding: 14px 16px; background: var(--deep); border: 1px solid var(--line); color: var(--ink); font: 14px/1.85 var(--ui); }
.tpl-copy { margin: 0 20px 10px; appearance: none; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 500 13px var(--ui); padding: 6px 16px; border-radius: 99px; cursor: pointer; }
.tpl-copy:hover { background: var(--accent); color: var(--deep); }
.tpl details.deep p, .tpl details.deep ul { font-size: 14.5px; line-height: 1.85; }
.chip small { margin-left: 6px; opacity: .7; }
/* 来週の見立て */
.nw { padding: 6px 20px 18px; border: 1px dashed var(--accent); }
.nw-list { counter-reset: nw; }
.nw-list li { counter-increment: nw; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nw-list li:last-child { border-bottom: 0; }
.nw-text { font-size: 16px; line-height: 1.9; color: var(--ink); }
.nw-text::before { content: "見立て " counter(nw); display: inline-block; margin-right: 10px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 99px; font: 500 12px var(--ui); color: var(--accent); }
.nw-list p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.85; }
.nw-st { color: var(--muted); }
/* Claude Code */
.lab-feature { margin: 26px 0; padding: 20px 24px; border: 1px solid var(--accent); background: var(--paper-2); }
.lab-feature h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
.lab-btn { display: inline-block; padding: 10px 22px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font: 500 14px var(--ui); letter-spacing: .06em; }
.lab-btn:hover { background: var(--accent); color: var(--deep); }
.lab-lv { display: inline-block; padding: 2px 11px; border-radius: 99px; font: 500 12px var(--ui); border: 1px solid var(--line); }
.lv-mcp { border-color: #5ea06f; color: #b2dcbc; background: rgba(94, 160, 111, .12); }
.lv-api { border-color: #c98a3b; color: #ecc78d; background: rgba(201, 138, 59, .12); }
.lv-com { border-color: #8b8b8b; color: #cfcfcf; }
.lv-none { border-color: #7a6a5a; color: var(--muted); border-style: dashed; }
.lab-lvbox { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); font-size: 13.5px; line-height: 2.3; background: var(--paper-2); }
.lab-tblwrap { overflow-x: auto; margin: 16px 0 6px; }
.lab-tbl { border-collapse: collapse; width: 100%; font: 14px/1.75 var(--ui); min-width: 640px; }
.lab-tbl th, .lab-tbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lab-tbl thead th { color: var(--accent); font-weight: 500; font-size: 12.5px; letter-spacing: .08em; border-bottom: 2px solid var(--ink); }
.lab-tbl tbody th { white-space: nowrap; font-weight: 500; }
.lab-tbl a { color: var(--ink); }
.lab-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-top: 20px; }
.lab-app { padding: 16px 20px; border: 1px solid var(--line); background: var(--paper-2); scroll-margin-top: 90px; }
.lab-app h3 { margin: 0 0 8px; }
.lab-app h3 small { margin-left: 10px; font: 400 12.5px var(--ui); color: var(--muted); }
.lab-app dl { margin: 10px 0; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 6px 12px; font-size: 14px; line-height: 1.8; }
.lab-app dt { color: var(--muted); font-size: 12.5px; }
.lab-app dd { margin: 0; word-break: break-word; }
@media (max-width: 560px) { .lab-apps { grid-template-columns: 1fr; } .lab-app dl { grid-template-columns: 1fr; } }
.lab-article-head { padding-top: clamp(40px, 6vw, 72px); }

/* ---- Claude Code 連携台帳（/lab/claude-code/db/） ---- */
.db-chip{display:inline-block;padding:.08em .62em;border-radius:999px;font-size:.78rem;line-height:1.6;border:1px solid var(--line);white-space:nowrap;letter-spacing:.02em}
.db-chip.st-yes{color:#9ed6a8;border-color:#3f6f4b;background:rgba(80,140,95,.14)}
.db-chip.st-no{color:var(--muted);border-color:var(--line);background:rgba(160,147,124,.08)}
.db-chip.st-unk{color:var(--accent);border-color:#7a6232;background:rgba(216,179,106,.10)}
.db-chip.st-warn{color:#f0a58f;border-color:#8a4a3a;background:rgba(200,100,80,.12)}
.db-chip.st-tp{color:#a9bde8;border-color:#475a86;background:rgba(110,140,210,.12)}
.db-legend{margin:1.2rem 0;line-height:2.1;font-size:.92rem;color:var(--text)}
.db-filter{margin:1.2rem 0 .6rem;display:grid;gap:.5rem}
.db-filter>div{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.db-filter b{font-weight:400;color:var(--muted);font-size:.85rem;min-width:4.5em}
.db-filter button{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:.25em .9em;font:inherit;font-size:.85rem;cursor:pointer}
.db-filter button.on{background:var(--accent);color:#1b150d;border-color:var(--accent)}
.db-count{margin:.2rem 0 0;color:var(--muted);font-size:.85rem}
.db-tbl th small{display:block;color:var(--muted);font-weight:400;font-size:.74rem}
.db-tbl td,.db-tbl th{vertical-align:top}
.db-tbl tbody th{position:sticky;left:0;background:var(--paper);z-index:1;min-width:9.5em}
.db-tbl tbody tr[hidden]{display:none}
.db-perm{margin:.6rem 0 1rem}
.db-perm dt{margin-top:1rem;color:var(--ink);font-weight:600}
.db-perm dd{margin:.25rem 0 0;color:var(--text);line-height:1.85}
.db-chan{border-left:2px solid var(--line);padding:.1rem 0 .1rem 1rem;margin:1.2rem 0}
.db-chan h3{margin:.2rem 0 .5rem}
.db-how{background:var(--paper-2);padding:.7rem .9rem;border-radius:6px;overflow-wrap:anywhere;font-size:.92rem}
.db-tbl{min-width:1080px;table-layout:auto}
.db-tbl td,.db-tbl tbody th{white-space:nowrap}
.db-tbl thead th{white-space:normal;min-width:5.2em;vertical-align:bottom}
.db-tbl tbody th small{display:block}
.db-tbl td:nth-child(2){min-width:8em}
@media (max-width:720px){.db-tbl{min-width:980px}}
.db-hint{display:none;margin:.4rem 0 0;color:var(--muted);font-size:.8rem}
@media (max-width:720px){
.db-hint{display:block}
.db-tbl{min-width:820px}
.db-tbl th:nth-child(2),.db-tbl td:nth-child(2){display:none}
.db-tbl tbody th{min-width:8.5em;white-space:normal}
}

/* ===== ハードとソフトの混ざり方 (/hardsoft/) ===== */
.hs-how{margin:0 0 .8rem;max-width:46em;line-height:1.95;color:var(--text)}
.hs-legend{margin:0 0 1.2rem;color:var(--muted);font-size:.88rem;line-height:2.1}
.hs-tag{display:inline-block;font-weight:400;font-size:.74rem;letter-spacing:.08em;padding:.05em .7em;border-radius:999px;margin-right:.5em;border:1px solid var(--line);vertical-align:.05em}
.hs-tag.hs-h{color:#e0a37a;border-color:rgba(224,163,122,.5)}
.hs-tag.hs-s{color:#8cc3d9;border-color:rgba(140,195,217,.5)}
.hs-ctl{margin:.4rem 0 0;display:flex;gap:.5rem}
.hs-ctl button{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:.25em .9em;font:inherit;font-size:.82rem;cursor:pointer}
.hs-ctl button:hover{border-color:var(--accent);color:var(--ink)}
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;margin:1.2rem 0 2.4rem;align-items:start}
.hs-card{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px;background:var(--paper-2);padding:18px 18px 12px;scroll-margin-top:90px}
.hs-card h2{margin:0;font-size:1.25rem;color:var(--ink);font-family:var(--serif);display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap}
.hs-card h2 small{font-size:.74rem;color:var(--muted);font-weight:400;font-family:var(--ui)}
.hs-tagline{margin:.35rem 0 .25rem;color:var(--accent);font-size:.95rem;line-height:1.7}
.hs-intro{margin:0 0 .8rem;color:var(--muted);font-size:.86rem;line-height:1.85}
.hs-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hs-list>li{border-bottom:1px solid var(--line)}
.hs-list>li:last-child{border-bottom:0}
.hs-item summary{list-style:none;cursor:pointer;display:flex;gap:.8em;align-items:baseline;padding:.7rem .2rem;line-height:1.6}
.hs-item summary::-webkit-details-marker{display:none}
.hs-item summary::after{content:"＋";margin-left:auto;color:var(--muted);flex:none}
.hs-item[open] summary::after{content:"−"}
.hs-item summary:hover .hs-t{color:var(--ink)}
.hs-yr{flex:none;min-width:5.6em;color:var(--accent);font-family:var(--en);font-size:1.02rem;letter-spacing:.02em}
.hs-t{color:var(--text);font-size:.94rem}
.hs-pane{padding:.1rem .3rem 1rem 5.4em}
.hs-pane p{margin:.3rem 0;font-size:.9rem;line-height:1.9}
.hs-hs{display:grid;gap:.25rem;margin:.2rem 0 .6rem!important;font-size:.88rem!important;color:var(--text)}
.hs-go{display:inline-block;margin-top:.35rem;color:var(--accent);font-size:.88rem;border-bottom:1px solid transparent}
.hs-go:hover{border-bottom-color:var(--accent)}
.hs-decs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:20px;margin:1rem 0 0}
.hs-dec h3{margin:0 0 .4rem;font-family:var(--en);font-size:1.4rem;color:var(--ink);font-weight:500}
.hs-dec h3 small{margin-left:.6em;font-size:.74rem;color:var(--muted);font-family:var(--ui)}
.hs-dec ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hs-dec li a{display:flex;gap:.7em;align-items:baseline;flex-wrap:wrap;padding:.5rem .1rem;border-bottom:1px solid var(--line);color:var(--text);font-size:.9rem;line-height:1.6}
.hs-dec li a:hover .hs-t{color:var(--ink)}
.hs-dec li b{flex:none;font-weight:500;color:var(--muted);font-size:.8rem}
.article-body .yoten .hs-hs{margin:0!important}
.hs-back{margin-top:2rem;font-size:.9rem}
.hs-back a{margin-right:1.4em;color:var(--accent)}
@media (max-width:560px){.hs-pane{padding-left:.3rem}.hs-yr{min-width:5em}}

/* ---- 実際に使っているもの (/gear/) ---- */
.gr-ad { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent, #d8b36a); border-radius: 8px; background: rgba(127,127,127,.05); font-size: 14px; line-height: 1.85; }
.gr-ad b { font-family: var(--ui); letter-spacing: .06em; font-size: 13px; }
.gr-ad p { margin: .4em 0 0; }
.gr-item { margin: 0 0 56px; padding-top: 8px; }
.gr-item h2 { margin: 4px 0 8px; }
.gr-no { font-family: var(--ui); font-size: 12px; letter-spacing: .1em; color: var(--muted); margin: 0; }
.gr-lede { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 14px; }
.gr-text p { margin: 0 0 1.15em; line-height: 2; }
.gr-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 6px; }
.gr-btn { display: inline-block; padding: 12px 22px; border-radius: 99px; background: var(--accent, #d8b36a); color: #15110d; font-family: var(--ui); font-size: 15px; text-decoration: none; letter-spacing: .04em; }
.gr-btn:hover { filter: brightness(1.08); }
.gr-ad-tag { font-family: var(--ui); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
.gr-h3 { font-size: 15px; margin: 26px 0 0; font-family: var(--ui); letter-spacing: .04em; }
.gr-matome { border-top: 1px solid var(--line); padding-top: 40px; }
.gr-sub { font-size: 1.12rem; margin: 2.2em 0 .7em; padding-left: .7em; border-left: 3px solid var(--accent, #d8b36a); line-height: 1.6; }

/* ---- ラボ追加セクション（表・履歴・週次） ---- */
.lab-tw { overflow-x: auto; margin: 14px 0 6px; }
.lab-table { border-collapse: collapse; width: 100%; min-width: 560px; font-family: var(--ui); font-size: 14px; line-height: 1.75; }
.lab-table th, .lab-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.lab-table th { font-size: 12px; letter-spacing: .06em; color: var(--muted); font-weight: 500; white-space: nowrap; }
.lab-table small { color: var(--muted); }
.lab-table a { color: var(--accent); word-break: break-all; display: block; margin-bottom: 4px; }
.lab-ul-s { margin: 6px 0 0; padding-left: 1.2em; font-size: 13.5px; }
.lab-h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 24px 0 6px; color: var(--ink); }
.lab-hl, .lab-hist, .wk-list { margin: 8px 0 0; padding-left: 1.3em; line-height: 1.9; font-size: 14.5px; }
.lab-hist { list-style: none; padding-left: 0; }
.lab-hi { padding: 10px 0; border-bottom: 1px solid var(--line); }
.lab-hi b { font-family: var(--en); color: var(--accent); font-weight: 500; }
.lab-effect { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.lab-kinds { margin: 8px 0 0; }
.lab-kinds .lab-kind { margin: 0 6px 6px 0; }
.wk-list li { margin-bottom: 8px; }
.wk-list ul { margin: 4px 0 0; padding-left: 1.2em; font-size: 13.5px; color: var(--muted); }

/* ---- 横に長い表：横スクロールバーを画面内に出す（表が縦に長くても、いちばん下までスクロールしなくてよい） ---- */
.lab-tblwrap, .lab-tw, .cmp-wrap { max-height: 78vh; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: rgba(216,179,106,.55) var(--paper-2); }
.lab-tblwrap::-webkit-scrollbar, .lab-tw::-webkit-scrollbar, .cmp-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
.lab-tblwrap::-webkit-scrollbar-thumb, .lab-tw::-webkit-scrollbar-thumb, .cmp-wrap::-webkit-scrollbar-thumb { background: rgba(216,179,106,.5); border-radius: 6px; }
.lab-tblwrap::-webkit-scrollbar-track, .lab-tw::-webkit-scrollbar-track, .cmp-wrap::-webkit-scrollbar-track { background: var(--paper-2); }
.lab-tbl thead th, .lab-table thead th, table.cmp thead th { position: sticky; top: 0; z-index: 3; background: var(--paper); }
.lab-table th { background: var(--paper); }
.lab-tbl th:first-child, .lab-tbl td:first-child { position: sticky; left: 0; z-index: 2; background: var(--paper); }
.lab-tbl thead th:first-child { z-index: 4; }
table.cmp thead th:first-child { z-index: 4; }
@media (max-width: 700px) { .lab-tblwrap, .lab-tw, .cmp-wrap { max-height: 70vh; } .lab-tbl th:first-child, .lab-tbl td:first-child { max-width: 11em; } }
.lab-tbl th:first-child, .lab-tbl td:first-child { width: 14em; min-width: 11em; max-width: 14em; white-space: normal; }