/* Washa ガイド（/washa/guide/）。ヘッダー・フッター・色・字は Washa のページ（../style.css）と同じ。ここは読み物の組みだけ。
   PC：左に目次（画面に貼り付け、いま読んでいる節に印）、右に本文。スマホ：目次は本文の上に、開け閉めできる箱で */

body.guide { background: var(--black); }
.gd {
  display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 760px); justify-content: center; gap: 64px;
  padding: 112px var(--gutter) 96px;
}

/* 目次 */
.gd-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.6; scrollbar-width: thin; }
.gd-toc summary { list-style: none; margin-bottom: 14px; font-family: var(--latin); font-size: 12px; letter-spacing: .2em; color: var(--ink-3); cursor: default; }
.gd-toc summary::-webkit-details-marker { display: none; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; }
.gd-toc > details > ol > li { margin-bottom: 4px; }
.gd-toc ol ol { display: none; margin: 4px 0 8px; padding-left: 12px; border-left: 1px solid rgba(244,241,234,.14); }
.gd-toc li.open > ol { display: block; } /* いま読んでいる章の節だけ開く */
.gd-toc a { display: block; padding: 3px 8px; border-radius: 6px; color: var(--ink-2); }
.gd-toc ol ol a { font-size: 12.5px; color: var(--ink-3); }
.gd-toc a:hover { color: var(--ink); }
.gd-toc a.on { color: var(--ink); background: rgba(244,241,234,.08); }

/* 本文 */
.gd-body { min-width: 0; font-size: 15.5px; line-height: 1.95; letter-spacing: .03em; color: rgba(244,241,234,.9); }
.gd-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.35; letter-spacing: .03em; margin-bottom: 28px; word-break: auto-phrase; }
.gd-body h2 { margin: 72px 0 20px; padding-top: 28px; border-top: 1px solid rgba(244,241,234,.16); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; letter-spacing: .03em; color: var(--ink); word-break: auto-phrase; }
.gd-body h3 { margin: 44px 0 12px; font-size: 19px; line-height: 1.5; color: var(--ink); word-break: auto-phrase; }
.gd-body h4 { margin: 28px 0 8px; font-size: 16px; color: var(--ink); }
.gd-body h2, .gd-body h3, .gd-body h4 { scroll-margin-top: 92px; } /* 目次から飛んだとき、見出しが固定のヘッダーに隠れないように */
.gd-body p { margin: 0 0 1.1em; }
.gd-body ul, .gd-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.gd-body li { margin: .25em 0; }
.gd-body li > p { margin: 0; }
.gd-body strong { color: var(--ink); font-weight: 700; }
.gd-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.gd-body code { padding: 1px 6px; border-radius: 5px; background: rgba(244,241,234,.08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.gd-body blockquote { margin: 0 0 1.2em; padding: 12px 18px; border-left: 2px solid var(--ink-3); background: rgba(244,241,234,.04); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.gd-body blockquote p:last-child { margin-bottom: 0; }
.gd-body hr { border: 0; border-top: 1px solid rgba(244,241,234,.12); margin: 40px 0; }

/* 表：狭い画面では表だけ横にずらして読む */
.table-wrap { margin: 0 0 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.gd-body th, .gd-body td { padding: 9px 12px; border-bottom: 1px solid rgba(244,241,234,.12); text-align: left; vertical-align: top; }
.gd-body th { color: var(--ink); font-weight: 700; white-space: nowrap; border-bottom-color: rgba(244,241,234,.3); }

/* 画面の例（スクリーンショット）。縦長（スマホ）は高さを抑える */
.shot-fig { margin: 8px 0 28px; display: flex; justify-content: center; }
.shot { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.shot-tall { max-height: 620px; width: auto; }

@media (max-width: 1023px) {
  .gd { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 96px; }
  .gd-toc { position: static; max-height: none; overflow: visible; margin-bottom: 8px; padding: 14px 16px; border: 1px solid rgba(244,241,234,.16); border-radius: 14px; }
  .gd-toc summary { margin-bottom: 0; cursor: pointer; font-size: 13px; color: var(--ink-2); }
  .gd-toc details[open] summary { margin-bottom: 12px; }
  .gd-toc summary::after { content: "＋"; float: right; }
  .gd-toc details[open] summary::after { content: "−"; }
  .gd-toc ol ol { display: block; } /* スマホの目次は、節まで並べる */
  .gd-body { font-size: 15px; }
  .gd-body h2 { margin-top: 56px; }
  .shot-tall { max-height: 540px; }
}
@media (max-width: 767px) {
  .gd-body table { font-size: 13px; }
  .gd-body th, .gd-body td { padding: 8px 10px; }
}

/* 表紙：画面いっぱい。左下に題、右に円卓の写真（暗く沈めて、字の側へ溶かす） */
.gd-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--black); }
.gd-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: .55; }
.gd-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(7,7,10,.96) 0%, rgba(7,7,10,.78) 38%, rgba(7,7,10,.2) 75%), linear-gradient(to top, rgba(7,7,10,.9), rgba(7,7,10,0) 45%); }
.gd-cover-in { position: relative; z-index: 1; width: 100%; max-width: 1104px; margin: 0 auto; padding: 140px var(--gutter) 120px; }
.gd-eyebrow { font-family: var(--latin); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }
.gd-cover-title { margin-top: 18px; font-family: var(--logo); font-feature-settings: "ss01"; font-weight: 600; font-size: clamp(48px, 8vw, 112px); line-height: 1.02; letter-spacing: .01em; color: var(--ink); }
.gd-cover-sub { margin-top: 18px; font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: .12em; color: var(--ink); }
.gd-cover-meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 48px; margin: 44px 0 0; font-size: 13.5px; line-height: 1.6; }
.gd-cover-meta div { padding-left: 14px; border-left: 1px solid rgba(244,241,234,.3); }
.gd-cover-meta dt { font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); }
.gd-cover-meta dd { margin: 2px 0 0; color: var(--ink); }
.gd-cover-meta strong { font-weight: 700; }
.gd-cover-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 52px; padding: 10px 20px 10px 22px; border: 1px solid rgba(244,241,234,.38); border-radius: 999px; font-size: 14px; letter-spacing: .08em; color: var(--ink); }
.gd-cover-next:hover { background: var(--ink); color: var(--black); }
.gd-cover-next svg { width: 18px; height: 18px; }
.gd-cover-pub { position: absolute; z-index: 1; right: var(--gutter); bottom: 32px; font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.gd-cover + .gd { padding-top: 96px; }
@media (max-width: 767px) {
  .gd-cover-img { object-position: 70% 50%; opacity: .45; }
  .gd-cover::after { background: linear-gradient(to top, rgba(7,7,10,.97) 0%, rgba(7,7,10,.8) 55%, rgba(7,7,10,.35) 100%); }
  .gd-cover-in { padding: 120px var(--gutter) 96px; }
  .gd-cover-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
  .gd-cover-next { margin-top: 36px; }
  .gd-cover-pub { left: var(--gutter); right: auto; bottom: 28px; }
  .gd-cover + .gd { padding-top: 48px; }
}

/* 表紙の端末：実際の画面を、端末の枠（CSS で描く）に入れて重ねる。PC は題の右、スマホは題の上 */
.gd-cover-img { opacity: .32; }
.gd-cover-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "eyebrow dev" "title dev" "sub dev" "meta dev" "next dev"; column-gap: 40px; align-content: end; max-width: 1360px; }
.gd-eyebrow { grid-area: eyebrow; } .gd-cover-title { grid-area: title; } .gd-cover-sub { grid-area: sub; } .gd-cover-meta { grid-area: meta; } .gd-cover-next { grid-area: next; justify-self: start; }
.gd-cover-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gd-devices { grid-area: dev; align-self: center; position: relative; width: 100%; aspect-ratio: 1.22; }
.dev { position: absolute; margin: 0; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.dev img { display: block; width: 100%; height: auto; }
/* ノートパソコン */
.dev-laptop .lid { padding: 2.4% 2.4% 3.2%; border-radius: 14px 14px 4px 4px; background: #121215; border: 1px solid rgba(255,255,255,.12); }
.dev-laptop .lid img { border-radius: 3px; }
.dev-laptop .base { position: relative; height: 0; padding-bottom: 3.4%; margin: 0 -7%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#d9dadf, #9b9ca3 70%, #6d6e75); }
.dev-laptop .base::before { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 32%; border-radius: 0 0 8px 8px; background: rgba(0,0,0,.18); }
.dev-win .lid { border-radius: 8px 8px 2px 2px; background: #0d0d10; }
.dev-win .base { background: linear-gradient(#5a5b62, #34353b 70%, #222327); border-radius: 2px 2px 10px 10px; }
/* スマホ */
.dev-phone { padding: 2.6%; border-radius: 15% / 7%; background: #0d0d10; border: 1px solid rgba(255,255,255,.16); }
.dev-phone img { border-radius: 12.6% / 5.8%; }
.dev-android { border-radius: 10% / 4.6%; } .dev-android img { border-radius: 8% / 3.6%; }
/* 並べ方（4 台：Mac が奥、Windows が手前左、スマホ 2 台が前） */
.n4 .dev-mac { left: 24%; top: 0; width: 76%; z-index: 1; }
.n4 .dev-win { left: 0; top: 36%; width: 58%; z-index: 2; }
.n4 .dev-android { left: 55%; top: 30%; width: 19%; z-index: 3; }
.n4 .dev-ios { left: 77%; top: 25%; width: 20.5%; z-index: 4; }
/* 3 台（Windows の画面が届くまで）：Mac が奥、スマホ 2 台が前 */
.n3 .dev-mac { left: 0; top: 6%; width: 86%; z-index: 1; }
.n3 .dev-android { left: 50%; top: 30%; width: 21%; z-index: 2; }
.n3 .dev-ios { left: 74%; top: 22%; width: 23%; z-index: 3; }
@media (max-width: 1023px) {
  .gd-cover-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dev" "eyebrow" "title" "sub" "meta" "next"; padding-top: 96px; }
  .gd-devices { width: min(100%, 560px); justify-self: center; margin-bottom: 28px; }
}
@media (max-width: 767px) {
  .gd-cover-in { padding-top: 84px; }
  .gd-devices { margin-bottom: 20px; }
  .gd-cover-title { font-size: clamp(40px, 12vw, 56px); }
  .gd-cover-sub { margin-top: 10px; }
}
/* 題は一行に（PC は端末と並ぶので、列の幅に合わせて小さめに） */
.gd-cover-title { white-space: nowrap; font-size: clamp(44px, 5.6vw, 92px); }
@media (max-width: 1023px) { .gd-cover-title { font-size: clamp(40px, 10vw, 80px); } }
/* スマホは実機の枠つきの画像をそのまま使う（CSS の枠は描かない）。2 台を同じ高さで少し重ね、ノートパソコンの手前右に */
.dev-phone, .dev-android { padding: 0; border: 0; border-radius: 0; background: none; filter: drop-shadow(0 22px 34px rgba(0,0,0,.7)); }
.dev-phone img, .dev-android img { border-radius: 0; }
.n3 .dev-mac { left: 0; top: 4%; width: 84%; }
.n3 .dev-android { left: 56%; top: 24%; width: 21.5%; z-index: 2; }
.n3 .dev-ios { left: 74%; top: 30%; width: 21.5%; z-index: 3; }
.n4 .dev-android { left: 56%; top: 24%; width: 21%; }
.n4 .dev-ios { left: 74%; top: 30%; width: 21%; }
/* Apple Watch（リモコン）：iPhone の手前左下に。画像に枠と影の下地が入っているので、影だけ足す */
.dev-watch { filter: drop-shadow(0 18px 28px rgba(0,0,0,.65)); }
.n3 .dev-mac { left: 0; top: 4%; width: 84%; z-index: 1; }
.n3 .dev-ios { left: 70%; top: 22%; width: 24%; z-index: 2; }
.n3 .dev-watch { left: 53%; top: 47%; width: 19%; z-index: 3; }
.n4 .dev-ios { left: 74%; top: 22%; width: 22%; z-index: 4; }
.n4 .dev-watch { left: 58%; top: 50%; width: 17%; z-index: 5; }