/* 2026-10-17 TANKA ガイド (/guide, docs/seo-content-2026-10-17): article pages (gd-), hub cards, template download form,
 * and the static SEO blocks on /usecases (gd-seo-). Tokens only from the launch-20260928 product stylesheet.
 * Linked from the guide-nav partial (articles, hub) or as the first line inside the section that uses it. */

/* ---------- page column: breadcrumb + article share one 720px reading column ---------- */
.gd-main{background:var(--white)}
.gd-col,.gd-crumbs,.gd-article{width:min(720px,calc(100% - 40px));margin-inline:auto}

/* ---------- breadcrumb ---------- */
.gd-crumbs{padding-top:28px}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13px;line-height:1.7;color:var(--muted)}
.gd-crumbs li{display:inline-flex;align-items:center;min-width:0}
.gd-crumbs li+li::before{content:"›";margin:0 10px;color:var(--muted)}
.gd-crumbs a{color:var(--muted)}
.gd-crumbs a:hover{color:var(--blue)}
.gd-crumbs [aria-current]{color:var(--body);overflow-wrap:anywhere}

/* ---------- article ---------- */
.gd-article{padding:40px 0 96px;color:var(--body);font-size:16px;line-height:1.9}
.gd-article h1{font-size:clamp(28px,3.2vw,40px);line-height:1.45;letter-spacing:-.035em;color:var(--ink);word-break:auto-phrase;text-wrap:pretty}
.gd-nw{white-space:nowrap}   /* keeps a compound word together in a heading (2026-10-17 assembly) */
.gd-article .gd-lead{margin:22px 0 0;font-size:18px;line-height:1.9;color:var(--ink)}
.gd-article .gd-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:18px;font-size:13px;line-height:1.7;color:var(--muted)}
.gd-article h2{margin:64px 0 18px;font-size:clamp(23px,2.2vw,28px);line-height:1.5;letter-spacing:-.03em;color:var(--ink);scroll-margin-top:90px;word-break:auto-phrase}
.gd-article h3{margin:40px 0 12px;font-size:19px;line-height:1.6;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:90px}
.gd-article h4{margin:28px 0 8px;font-size:16px;line-height:1.7;color:var(--ink)}
.gd-article p{margin:0 0 18px}
.gd-article ul,.gd-article ol{margin:0 0 20px;padding-left:1.5em}
.gd-article li{margin:0 0 8px;padding-left:2px}
.gd-article li>ul,.gd-article li>ol{margin:8px 0 0}
.gd-article strong{color:var(--ink);font-weight:600}
.gd-article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gd-article a:hover{text-decoration-thickness:2px}
.gd-article hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.gd-article figure{margin:28px 0}
.gd-article figure img{border:1px solid var(--line);border-radius:14px}
.gd-article figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.gd-article code{font-size:.9em;background:var(--pale);border-radius:6px;padding:1px 6px}

/* quote: the source sits in <cite> or a following .gd-cite line */
.gd-article blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--sky);color:var(--ink)}
.gd-article blockquote p{margin:0 0 8px}
.gd-article blockquote p:last-child{margin:0}
.gd-article blockquote cite,.gd-cite{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--muted)}

/* ---------- table of contents (filled by the app from the article's h2) ---------- */
.gd-toc{margin:36px 0 8px;padding:22px 26px 18px;background:var(--pale);border-radius:16px}
.gd-article .gd-toc-title,.gd-toc-title{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.gd-article .gd-toc ol{margin:0;padding-left:1.4em;font-size:15px;line-height:1.7}
.gd-article .gd-toc li{margin:0;padding:5px 0 5px 2px}
.gd-article .gd-toc a{color:var(--ink);text-decoration:none}
.gd-article .gd-toc a:hover{color:var(--blue);text-decoration:underline}

/* ---------- tables: wrapper scrolls sideways (390px never widens the page) ---------- */
.gd-table{margin:24px 0 28px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.gd-table:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.gd-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.75}
.gd-table th,.gd-table td{min-width:7em;padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.gd-table th+th,.gd-table td+td{border-left:1px solid var(--line)}
.gd-table thead th{background:var(--pale);color:var(--ink);font-weight:600}
/* 2026-10-17 assembly: headers wrap and columns may be narrower, so the 5-column comparison table fits the 720px column
   on desktop instead of hiding its last column; the 7-column blank form inside a template box fits too (desktop only) */
@media(min-width:581px){.gd-template .gd-table th,.gd-template .gd-table td{min-width:0;padding:10px 12px}}
.gd-table tbody tr:last-child td{border-bottom:0}
.gd-table tbody td:first-child{color:var(--ink);font-weight:500}
.gd-article .gd-table-note{margin:-14px 0 18px;font-size:12px;color:var(--muted)}

/* ---------- boxes inside the article ---------- */
.gd-tanka{margin:56px 0 0;padding:30px 32px 14px;border:1px solid var(--line);border-radius:20px;background:var(--pale)}
.gd-article .gd-tanka h2{margin-top:0}
.gd-note{margin:24px 0;padding:14px 18px;border-radius:12px;background:var(--pale);font-size:14px;line-height:1.85}
.gd-note p:last-child{margin:0}
.gd-template{margin:24px 0 28px;padding:28px 32px 12px;border:1px solid var(--line);border-radius:16px;background:var(--white);color:var(--ink);font-size:15px}
.gd-template-label{display:inline-block;margin-bottom:14px;padding:2px 12px;border-radius:999px;background:var(--pale);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--blue)}
.gd-article .gd-template h3{margin-top:24px;font-size:17px}
.gd-article .gd-template h3:first-child{margin-top:0}

/* ---------- FAQ (filled by the app from front matter `faq`) ---------- */
.gd-faq{margin-top:64px}
.gd-article .gd-faq-title{margin-top:0}
.gd-faq-list{border-top:1px solid var(--line)}
.gd-faq-item{padding:22px 0 8px;border-bottom:1px solid var(--line)}
.gd-article .gd-faq-q,.gd-faq-q{position:relative;margin:0 0 10px;padding-left:34px;font-size:17px;line-height:1.7;letter-spacing:-.01em;color:var(--ink)}
.gd-faq-q::before{content:"Q";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:var(--white);font-size:13px;font-weight:600;line-height:24px;text-align:center}
.gd-faq-a{padding-left:34px;color:var(--body)}
.gd-faq-a p{margin:0 0 14px}

/* ---------- related pages / sources ---------- */
.gd-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd-related li{margin:0;padding:0}
.gd-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;color:var(--ink);font-weight:600;line-height:1.6;text-decoration:none;transition:border-color .2s,background .2s}
.gd-related a::after{content:"›";flex:0 0 auto;font-size:22px;line-height:1;color:var(--blue)}
.gd-related a:hover{border-color:var(--sky);background:var(--pale);text-decoration:none}
.gd-sources{font-size:13px;line-height:1.8;color:var(--muted)}
.gd-sources ol,.gd-sources ul{padding-left:1.5em}
.gd-sources li{margin-bottom:8px;overflow-wrap:anywhere}
.gd-sources a{color:var(--muted)}
.gd-sources p{margin-bottom:10px}

/* ---------- CTA band (guide-cta partial) ---------- */
.gd-cta{padding:80px 0;background:var(--pale);text-align:center}
.gd-cta-title{font-size:clamp(24px,2.6vw,34px);line-height:1.5;letter-spacing:-.04em;color:var(--ink)}
.gd-cta-copy{margin:14px auto 0;max-width:34em;font-size:15px;line-height:1.85;color:var(--body)}
.gd-cta .actions{margin-top:28px}
.gd-cta .btn{min-width:220px}

/* ---------- hub /guide ---------- */
.gd-hub-hero{padding-bottom:56px}
.gd-hub-hero h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.045em;line-height:1.3}
.gd-hub-hero h1 span{text-wrap:balance;word-break:auto-phrase}
.gd-hub-hero .hero-copy{max-width:40em;margin-bottom:0}
.gd-hub-hero h1 span{word-break:keep-all;overflow-wrap:anywhere}   /* breaks only at <wbr> / punctuation (2026-10-17 assembly) */
.gd-hub-hero .hero-copy span+span{margin-top:6px}
.gd-hub{padding:56px 0 96px;background:var(--white)}
.gd-hub-group+.gd-hub-group{margin-top:56px}
.gd-hub-h{margin:0 0 18px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.gd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gd-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 24px 20px;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.gd-card:hover{text-decoration:none;border-color:var(--sky);box-shadow:0 14px 34px -22px rgba(31,64,97,.35);transform:translateY(-2px)}
.gd-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gd-card-kind{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--blue)}
.gd-card-title{font-size:17px;font-weight:600;line-height:1.6;color:var(--ink);word-break:auto-phrase;overflow-wrap:anywhere}
.gd-card-more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:500;color:var(--blue)}

/* ---------- template download form (template-download partial; behaviour = launch-conditions product script) ---------- */
.gd-dl{margin:40px 0;padding:30px 32px;border:1px solid var(--line);border-radius:20px;background:var(--white);color:var(--body);font-size:15px;line-height:1.85}
/* article rules (.gd-article p/ul/li/a) are reset here so the shared form classes keep their product stylesheet spacing */
.gd-dl p,.gd-dl ul{margin:0;padding:0}
.gd-dl .gd-dl-kicker{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--blue)}
.gd-article .gd-dl-title,.gd-dl-title{margin:0 0 8px;font-size:22px;line-height:1.5;letter-spacing:-.03em;color:var(--ink)}
.gd-dl .gd-dl-copy{margin:0 0 22px;color:var(--body)}
.gd-dl .falert{margin:0 0 20px}
.gd-dl .ferr{margin:7px 0 0}
.gd-dl .launch-form{margin:0}
.gd-dl .field{margin-bottom:18px}
.gd-dl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.gd-dl-purpose{margin:0 0 18px;padding:0;border:0;min-width:0}
.gd-dl-purpose legend{display:block;width:100%;margin-bottom:8px;padding:0;font-size:13px;font-weight:500;color:var(--ink)}
.gd-dl-purpose legend span{float:right;padding-top:2px;font-size:10px;font-weight:400;color:var(--muted)}
.gd-dl .submit-btn{width:auto;min-width:260px;padding-inline:32px}
.gd-dl .help{margin:6px 0 0}
.gd-dl .form-alternative{text-align:left}
.gd-dl .form-done{padding:4px 0 0}
.gd-dl .form-done h3{margin:0 0 10px;font-size:21px;line-height:1.6;letter-spacing:-.03em;color:var(--ink)}
.gd-dl .form-done p{margin:0 0 14px;font-size:14px;color:var(--body)}
.gd-dl .form-done .help{margin:0}
.gd-dl-links,.gd-dl .gd-dl-links{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.gd-dl-done .gd-dl-links{margin:0 0 27px}
.gd-article .gd-dl-links li,.gd-dl-links li{margin:0;padding:0}
.gd-article .gd-dl-links a,.gd-dl-links a{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;color:var(--ink);font-weight:600;line-height:1.5;text-decoration:none}
.gd-dl-links a:hover{border-color:var(--sky);background:var(--pale)}
.gd-dl-file{flex:0 0 auto;padding:2px 8px;border-radius:6px;background:var(--blue);color:var(--white);font-size:11px;font-weight:600;letter-spacing:.04em}
.gd-dl-name{min-width:0;overflow-wrap:anywhere}

/* ---------- /usecases static SEO blocks (usecase page generator: seo_intro + faq) ---------- */
.gd-seo-intro{background:var(--white);padding:72px 0 24px}
.gd-seo-faq{background:var(--white);padding:72px 0}
.gd-seo-body{max-width:720px;margin-inline:auto;color:var(--body);font-size:16px;line-height:1.9}
.gd-seo-body h2{margin:0 0 18px;font-size:clamp(23px,2.4vw,30px);line-height:1.5;letter-spacing:-.035em;color:var(--ink);word-break:auto-phrase}
.gd-seo-body h3{margin:36px 0 12px;font-size:19px;line-height:1.6;color:var(--ink)}
.gd-seo-body p{margin:0 0 16px}
.gd-seo-body ul,.gd-seo-body ol{margin:0 0 18px;padding-left:1.5em}
.gd-seo-body li{margin-bottom:6px}
.gd-seo-body strong{color:var(--ink);font-weight:600}
.gd-seo-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gd-seo-faq .gd-faq{margin-top:0}
.gd-seo-faq .gd-faq-title{margin:0 0 18px;font-size:clamp(23px,2.4vw,30px);line-height:1.5;letter-spacing:-.035em;color:var(--ink)}
.gd-seo-faq .gd-faq-a p{margin:0 0 14px}

/* example e-mail (G6: メール例文) — usable in articles and on /usecases */
.gd-mail{margin:22px 0 28px;border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden}
.gd-mail .gd-mail-head{margin:0;padding:12px 20px;background:var(--pale);border-bottom:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--muted)}
.gd-mail-head b{color:var(--ink);font-weight:600}
.gd-mail-body{padding:18px 20px 6px;font-size:15px;line-height:2;color:var(--ink)}
.gd-mail-body p{margin:0 0 14px}

@media(max-width:820px){
  .gd-grid{grid-template-columns:1fr;gap:12px}
  .gd-tanka{padding:26px 24px 10px}
}
@media(max-width:580px){
  .gd-crumbs{padding-top:20px}
  .gd-crumbs ol{font-size:12px}
  .gd-crumbs li+li::before{margin:0 7px}
  .gd-article{padding:28px 0 72px;font-size:15px;line-height:1.9}
  .gd-article h1{font-size:clamp(23px,6.6vw,28px);line-height:1.5}
  .gd-article .gd-lead{margin-top:16px;font-size:16px}
  .gd-article .gd-meta{font-size:12px;gap:2px 14px}
  .gd-article h2{margin:52px 0 14px;font-size:21px}
  .gd-article h3{margin:32px 0 10px;font-size:17px}
  .gd-toc{margin-top:28px;padding:18px 20px 14px;border-radius:14px}
  .gd-article .gd-toc ol{font-size:14px}
  .gd-table{margin-inline:0;border-radius:12px}
  .gd-table table{font-size:13px}
  .gd-table th,.gd-table td{min-width:8em;padding:10px 12px}
  .gd-tanka{padding:22px 18px 8px;border-radius:16px}
  .gd-template{padding:22px 18px 8px;font-size:14px}
  .gd-faq{margin-top:52px}
  .gd-faq-q,.gd-article .gd-faq-q{font-size:16px;padding-left:30px}
  .gd-faq-q::before{width:22px;height:22px;line-height:22px;font-size:12px}
  .gd-faq-a{padding-left:0}
  .gd-related a{padding:14px 16px;font-size:15px}
  .gd-cta{padding:60px 0}
  .gd-cta .actions{flex-direction:column;align-items:stretch;gap:12px}
  .gd-cta .btn{width:100%;min-width:0}
  .gd-hub-hero{padding-bottom:44px}
  .gd-hub-hero h1{font-size:clamp(24px,6.6vw,32px);line-height:1.45;letter-spacing:-.04em}
  .gd-hub{padding:40px 0 72px}
  .gd-hub-h{font-size:18px}
  .gd-card{padding:18px 18px 16px;border-radius:14px}
  .gd-card-title{font-size:16px}
  .gd-dl{margin:32px 0;padding:22px 18px;border-radius:16px;font-size:14px}
  .gd-dl-title,.gd-article .gd-dl-title{font-size:19px}
  .gd-dl-row{grid-template-columns:1fr}
  .gd-dl .submit-btn{width:100%;min-width:0}
  .gd-seo-intro{padding:52px 0 12px}
  .gd-seo-faq{padding:52px 0}
  .gd-seo-body{font-size:15px}
  .gd-seo-body h2,.gd-seo-faq .gd-faq-title{font-size:21px}
  .gd-mail .gd-mail-head{padding:10px 14px}
  .gd-mail-body{padding:14px 14px 4px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .gd-card,.gd-related a{transition:none}
  .gd-card:hover{transform:none}
}

/* ---------- 2026-10-18 GEO (E1): /usecases -> guides. 実務ガイド cards (hub, .wrap width) and 関連ガイド links (scene pages,
 * 720px column like the FAQ above). Sits right after the white FAQ block, before the pale calculator / Founding 100 band;
 * -top adds the gap when a page has no FAQ block. ---------- */
.gd-seo-related{background:var(--white);padding:0 0 72px}
.gd-seo-related-top{padding-top:72px}
.gd-seo-related-col{max-width:720px;margin-inline:auto}
@media(max-width:580px){
  .gd-seo-related{padding-bottom:52px}
  .gd-seo-related-top{padding-top:52px}
}

/* ============================================================================================
 * 2026-10-18 visual redesign of /guide (docs/seo-content-2026-10-17/guide-visual-20261018/design.md, changed by
 * review-design.md). Additive only. Scoped to .gd-guide (the five articles), .gd-hub-* / .gd-hub #more (hub) and the
 * guide partials (.gd-progress in guide-nav, .gd-cta-fig in guide-cta-visual); /usecases and /about keep the rules
 * above untouched (/about still includes the unchanged guide-cta partial).
 * ========================================================================================== */
:root{
  --gd-tint:#eef5fd;--gd-blue-text:#0b63c6;--gd-warn-bg:#fff7e8;--gd-warn-ink:#7a4b00;--gd-warn-line:#f1dfc0;
  --gd-r-s:12px;--gd-r:16px;--gd-r-l:20px;
  --gd-i-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M8.6 14.3a6 6 0 1 1 6.8 0c-.7.7-1.1 1.6-1.1 2.7H9.7c0-1.1-.4-2-1.1-2.7z'/%3E%3C/svg%3E");
  --gd-i-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
  --gd-i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --gd-i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 3.5 19.5h17z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E");
  --gd-i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b63c6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --gd-i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368768a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --gd-i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b8c8' stroke-width='1.7'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4.5'/%3E%3C/svg%3E");
  --gd-i-question:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V16H6.5A2.5 2.5 0 0 1 4 13.5z'/%3E%3Cpath d='M10 9.3a2 2 0 1 1 2.9 1.8c-.6.3-.9.7-.9 1.4M12 14.6h.01'/%3E%3C/svg%3E");
  --gd-i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V16H6.5A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E");
  --gd-i-checkc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.4 2.3 2.3 4.8-4.8'/%3E%3C/svg%3E");
  --gd-i-people:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M15.3 14.6A4.6 4.6 0 0 1 21 19'/%3E%3C/svg%3E");
  --gd-i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --gd-i-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142338' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E");
}

/* ---------- article shell ---------- */
.gd-guide{position:relative}
.gd-guide h1.gd-h1-long{font-size:clamp(25px,2.5vw,33px);line-height:1.5}
@media(min-width:581px){.gd-guide h1.gd-h1-long{text-wrap:balance}}   /* at 33px `pretty` put 「｜」 at a line start (G3) */
.gd-guide .gd-lead{color:var(--ink)}
.gd-guide .gd-hero{margin:28px 0 0}
.gd-guide .gd-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:var(--gd-r-l);background:var(--pale)}
.gd-guide .gd-hero figcaption{margin-top:8px;font-size:12px;color:var(--muted);text-align:right}

/* Japanese line breaking (implementation, 2026-10-18): phrase-aware breaks for headings, labels, the TOC and short-cell tables;
 * `pretty` for short blocks so no one-character last line. Long quoted table cells keep normal breaking (filled lines). */
.gd-guide h3,.gd-guide .gd-table th,.gd-guide .gd-table td:first-child,.gd-guide .gd-toc a,.gd-rel-title,
.gd-mini .gd-table td,.gd-versus .gd-table td,.gd-checklist .gd-table td,.gd-fields .gd-table td,.gd-tanka-table .gd-table td:nth-child(3){word-break:auto-phrase}
.gd-guide h3,.gd-guide .gd-table th,.gd-guide .gd-table td:first-child,.gd-guide .gd-toc a,.gd-rel-title,
.gd-guide .gd-keypoints li,.gd-guide .gd-callout,.gd-guide .gd-callout-warn,.gd-guide .gd-note p{text-wrap:pretty}
/* H2 rhythm: rule + "01" counter (content sections only) */
.gd-guide{counter-reset:gd-sec}
.gd-guide>h2[id]:not(#related):not(#sources){counter-increment:gd-sec;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.gd-guide>h2[id]:not(#related):not(#sources)::before{content:counter(gd-sec,decimal-leading-zero);display:block;margin-bottom:8px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--blue)}
.gd-guide>h2#related{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:20px}
.gd-guide>h2#sources{margin-top:48px;font-size:18px;color:var(--muted);letter-spacing:0}

/* ---------- keypoints / quick ---------- */
.gd-keypoints{margin:28px 0 0}
.gd-guide .gd-keypoints blockquote{margin:0;padding:22px 26px 12px;border:0;border-radius:var(--gd-r);background:var(--gd-tint);color:var(--ink)}
.gd-guide .gd-keypoints blockquote>p:first-child{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gd-blue-text)}
.gd-guide .gd-keypoints blockquote>p:first-child::before{content:"";flex:0 0 auto;width:22px;height:22px;background:var(--gd-i-bulb) center/contain no-repeat}
.gd-guide .gd-keypoints blockquote>p:first-child strong{color:inherit;font-weight:inherit}
.gd-guide .gd-keypoints ol{list-style:none;counter-reset:gd-kp;margin:0;padding:0}
.gd-guide .gd-keypoints li{counter-increment:gd-kp;position:relative;margin:0 0 10px;padding-left:36px;font-size:15.5px;line-height:1.8}
.gd-guide .gd-keypoints li::before{content:counter(gd-kp);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;line-height:24px;text-align:center}
.gd-quick{margin:24px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--gd-r);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gd-guide .gd-quick-title{margin:0 6px 0 0;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.gd-guide .gd-quick a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--gd-tint);color:var(--gd-blue-text);font-size:13.5px;font-weight:500;line-height:1.5;text-decoration:none}
.gd-guide .gd-quick a::after{content:"";width:14px;height:14px;background:var(--gd-i-arrow) center/contain no-repeat}
.gd-guide .gd-quick a:hover{background:#e2eefc;text-decoration:none}

/* ---------- table of contents ---------- */
.gd-guide .gd-toc{margin:28px 0 8px;padding:18px 22px 14px;border:1px solid var(--line);border-radius:var(--gd-r);background:#fff}
.gd-guide .gd-toc-title{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.gd-guide .gd-toc-title::before{content:"";width:18px;height:18px;background:var(--gd-i-list) center/contain no-repeat}
.gd-guide .gd-toc-title.has-toggle::before{display:none}
.gd-guide .gd-toc ol{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.6}
.gd-guide .gd-toc li{margin:0;padding:0;break-inside:avoid}
.gd-guide .gd-toc a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--line);color:var(--body);text-decoration:none}
.gd-guide .gd-toc a:hover{color:var(--ink);border-left-color:var(--sky);text-decoration:none}
.gd-guide .gd-toc a.is-current{color:var(--ink);font-weight:600;border-left-color:var(--blue)}
.gd-toc-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-align:left;cursor:pointer}
.gd-toc-toggle::before{content:"";width:18px;height:18px;background:var(--gd-i-list) center/contain no-repeat}
.gd-toc-toggle .gd-toc-count{margin-left:auto;font-weight:500}
.gd-toc-toggle::after{content:"";width:18px;height:18px;background:var(--gd-i-chevron) center/contain no-repeat;transition:transform .2s}
.gd-toc-toggle[aria-expanded=true]::after{transform:rotate(180deg)}
@media(min-width:821px){.gd-toc-toggle{pointer-events:none;cursor:default}.gd-toc-toggle::after,.gd-toc-toggle .gd-toc-count{display:none}}
@media(min-width:821px) and (max-width:1359px){.gd-guide>.gd-toc ol{columns:2;column-gap:28px}}
@media(max-width:820px){
  .gd-js .gd-guide .gd-toc:not(.is-open) ol{display:none}
  .gd-js .gd-guide .gd-toc:not(.is-open){padding-bottom:18px}
  .gd-js .gd-guide .gd-toc:not(.is-open) .gd-toc-title{margin-bottom:0}
}
@media(min-width:1360px){
  .gd-js .gd-guide>.gd-toc{display:none}
  .gd-side{position:absolute;top:40px;bottom:0;left:100%;margin-left:40px;width:232px}
  .gd-side .gd-toc{display:block;position:sticky;top:90px;margin:0;padding:0;border:0;border-radius:0;background:none;max-height:calc(100vh - 110px);overflow:auto}
  .gd-side .gd-toc ol{font-size:13.5px}
}

/* ---------- callouts ---------- */
.gd-guide .gd-callout{position:relative;margin:24px 0;padding:16px 20px 16px 54px;border-radius:var(--gd-r);background:var(--gd-tint);color:var(--ink);font-size:15px;line-height:1.85}
.gd-guide .gd-callout::before{content:"";position:absolute;left:20px;top:17px;width:22px;height:22px;background:var(--gd-i-info) center/contain no-repeat}
.gd-guide .gd-callout-warn,.gd-guide .gd-note{position:relative;margin:24px 0;padding:16px 20px 16px 54px;border:1px solid var(--gd-warn-line);border-radius:var(--gd-r);background:var(--gd-warn-bg);color:var(--gd-warn-ink);font-size:14.5px;line-height:1.85}
.gd-guide .gd-callout-warn::before,.gd-guide .gd-note::before{content:"";position:absolute;left:20px;top:17px;width:22px;height:22px;background:var(--gd-i-alert) center/contain no-repeat}
.gd-guide .gd-note p{margin:0}

/* ---------- numbered cards (ol) ---------- */
.gd-numcards ol{list-style:none;counter-reset:gd-nc;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gd-numcards li{counter-increment:gd-nc;position:relative;margin:0;padding:18px 18px 16px 58px;border:1px solid var(--line);border-radius:var(--gd-r);background:#fff;font-size:14.5px;line-height:1.8}
.gd-numcards li::before{content:counter(gd-nc);position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;line-height:26px;text-align:center}
.gd-numcards li>strong{color:var(--ink)}

/* ---------- checklist rows (G4 table) ---------- */
.gd-checklist .gd-table{margin:20px 0 28px;border:0;border-radius:0;overflow:visible;background:none}
.gd-checklist .gd-table table,.gd-checklist .gd-table tbody{display:block;width:100%}
.gd-checklist .gd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gd-checklist .gd-table tbody tr{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;margin:0 0 8px;padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.gd-checklist .gd-table td{display:block;min-width:0;padding:0;border:0}
.gd-checklist .gd-table td:first-child{grid-row:1/span 2;width:36px;height:36px;margin-top:2px;border-radius:50%;background:var(--blue);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;line-height:36px;text-align:center}
.gd-checklist .gd-table td:nth-child(2){font-size:16px;font-weight:600;color:var(--ink);line-height:1.6}
.gd-checklist .gd-table td:nth-child(3){grid-column:2;font-size:13.5px;line-height:1.7;color:var(--body)}

/* ---------- item cards (G4 seven items) ---------- */
.gd-item{margin:0 0 20px;padding:24px 26px 10px;border:1px solid var(--line);border-radius:var(--gd-r-l);background:#fff}
.gd-guide .gd-item h3{margin:0 0 14px;font-size:19px}
.gd-guide .gd-item h3::first-letter{font-family:Inter,system-ui,sans-serif;font-size:1.4em;color:var(--blue);margin-right:.15em}
.gd-guide .gd-item p:has(>strong:only-child){margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gd-blue-text)}
.gd-guide .gd-item p:has(>strong:only-child) strong{color:inherit;font-weight:inherit}
.gd-guide .gd-item p:has(>strong:only-child)+ul{list-style:none;margin:0 0 20px;padding:0}
.gd-guide .gd-item p:has(>strong:only-child)+ul li{position:relative;margin:0 0 8px;padding:10px 14px 10px 44px;border-radius:10px;background:var(--gd-tint);font-size:14.5px;line-height:1.75}
.gd-guide .gd-item p:has(>strong:only-child)+ul li::before{content:"";position:absolute;left:14px;top:12px;width:19px;height:19px;background:var(--gd-i-question) center/contain no-repeat}

/* ---------- numbered h3 runs / two-column cards / scenes ---------- */
.gd-guide .gd-numh3 h3{margin:36px 0 12px;padding:10px 16px;border-radius:12px;background:var(--gd-tint)}
.gd-guide .gd-numh3 h3:first-child{margin-top:12px}
.gd-guide .gd-numh3 h3::first-letter{font-family:Inter,system-ui,sans-serif;font-size:1.45em;font-weight:700;color:var(--blue);margin-right:.18em}
.gd-cards2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 28px}
.gd-cell{min-width:0;padding:20px 22px 12px;border:1px solid var(--line);border-radius:var(--gd-r);background:#fff}
.gd-guide .gd-cell h3{margin:0 0 8px;font-size:17px;line-height:1.5}
.gd-guide .gd-cell p{margin:0 0 10px;font-size:14.5px;line-height:1.8}
.gd-guide .gd-numbered .gd-cell h3::first-letter{font-family:Inter,system-ui,sans-serif;font-size:1.4em;color:var(--blue);margin-right:.15em}
.gd-scenes{display:grid;gap:14px;margin:4px 0 24px}
.gd-scene{padding:18px 22px 10px;border-left:3px solid var(--sky);border-radius:0 var(--gd-r) var(--gd-r) 0;background:var(--pale)}
.gd-guide .gd-scene h3{margin:0 0 8px;font-size:17px}
.gd-guide .gd-scene p{margin:0 0 10px;font-size:14.5px;line-height:1.8}

/* ---------- chain steps / icon list / checks ---------- */
.gd-chain ol{list-style:none;counter-reset:gd-ch;margin:0 0 24px;padding:0}
.gd-chain li{counter-increment:gd-ch;position:relative;margin:0;padding:2px 0 22px 48px;font-size:15.5px;line-height:1.8}
.gd-chain li::before{content:counter(gd-ch);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;line-height:32px;text-align:center}
.gd-chain li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:-2px;width:2px;background:var(--line)}
.gd-chain li>strong{color:var(--ink)}
.gd-iconlist ul{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gd-iconlist li{position:relative;margin:0;padding:12px 14px 12px 48px;border-radius:12px;background:var(--gd-tint);font-size:14.5px;line-height:1.7;color:var(--ink)}
.gd-iconlist li::before{content:"";position:absolute;left:14px;top:12px;width:22px;height:22px;background:var(--gd-i-chat) center/contain no-repeat}
.gd-iconlist li:nth-child(2)::before{background-image:var(--gd-i-checkc)}
.gd-iconlist li:nth-child(3)::before{background-image:var(--gd-i-people)}
.gd-iconlist li:nth-child(4)::before{background-image:var(--gd-i-clock)}
.gd-checks ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.gd-checks li{position:relative;margin:0;padding:12px 16px 12px 46px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;line-height:1.7}
.gd-checks li::before{content:"";position:absolute;left:14px;top:13px;width:20px;height:20px;background:var(--gd-i-box) center/contain no-repeat}

/* ---------- figures: three steps / concept pair ---------- */
.gd-steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 28px}
.gd-step{min-width:0}
.gd-guide .gd-step-fig{margin:0 0 12px}
.gd-step-fig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);border-radius:12px;background:var(--pale)}
.gd-step-fig figcaption{margin-top:6px;font-size:11px;color:var(--muted)}
.gd-guide .gd-step h3{margin:0 0 8px;font-size:16px;line-height:1.55}
.gd-guide .gd-step p{margin:0 0 10px;font-size:14px;line-height:1.8}
.gd-concept{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 28px}
.gd-concept-one{grid-template-columns:minmax(0,560px);justify-content:center}
.gd-concept figure{margin:0}
.gd-concept img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--gd-r);background:var(--pale)}
.gd-concept figcaption{margin-top:8px;font-size:13px;font-weight:600;color:var(--ink);text-align:center}

/* ---------- quote / small / mini table ---------- */
.gd-guide .gd-quote blockquote{position:relative;margin:20px 0 24px;padding:22px 26px 22px 34px;border:0;border-radius:var(--gd-r);background:var(--gd-tint);color:var(--ink);font-size:17px;line-height:1.85}
.gd-guide .gd-quote blockquote::before{content:"\201C";position:absolute;left:12px;top:2px;font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1;color:var(--sky);opacity:.55}
.gd-guide .gd-small{font-size:13.5px;color:var(--muted)}
.gd-guide .gd-small ul{margin-bottom:12px}
.gd-mini .gd-table th,.gd-mini .gd-table td{min-width:0;padding:10px 12px}

/* ---------- table family ---------- */
@media(min-width:821px){
  .gd-versus .gd-table th,.gd-versus .gd-table td{min-width:0}
  .gd-versus .gd-table th:first-child,.gd-versus .gd-table td:first-child{width:21%}
  .gd-versus .gd-table th:nth-child(n+2),.gd-versus .gd-table td:nth-child(n+2){width:39.5%}
  .gd-versus .gd-table td:first-child{font-size:13px;color:var(--muted);font-weight:600}
  .gd-versus .gd-table thead th{text-align:center}
  .gd-versus .gd-table thead th:first-child{text-align:left}
  .gd-versus-hl .gd-table thead th:nth-child(3){color:var(--gd-blue-text)}
  .gd-versus-hl .gd-table td:nth-child(3){background:var(--gd-tint);color:var(--ink)}
  .gd-fields .gd-table th,.gd-fields .gd-table td{min-width:0}
  .gd-fields .gd-table td:first-child{width:24%}
  .gd-fields .gd-table td:nth-child(3),.gd-fields .gd-table th:nth-child(3){background:var(--gd-tint)}
  .gd-doc .gd-table th,.gd-doc .gd-table td{min-width:0}
  .gd-doc .gd-table td:first-child{width:160px;font-size:13px;color:var(--muted);font-weight:600}
  .gd-tanka-table .gd-table th,.gd-tanka-table .gd-table td{min-width:0}
  .gd-tanka-table .gd-table td:first-child{width:22%}
  .gd-tanka-table .gd-table td:nth-child(3){width:22%;font-size:13px}
}
/* stacked cards: always (G1 comparison) */
.gd-stack-always.is-ready .gd-table{margin:20px 0 8px;border:0;border-radius:0;overflow:visible;background:none}
.gd-stack-always.is-ready .gd-table table,.gd-stack-always.is-ready .gd-table tbody{display:block;width:100%}
.gd-stack-always.is-ready .gd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gd-stack-always.is-ready .gd-table tr{display:block;margin:0 0 14px;padding:0 20px 6px;border:1px solid var(--line);border-radius:var(--gd-r);background:#fff}
.gd-stack-always.is-ready .gd-table td{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;min-width:0;padding:12px 0;border:0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.75}
.gd-stack-always.is-ready .gd-table td::before{content:attr(data-label);padding-top:2px;font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.6;color:var(--gd-blue-text)}
.gd-stack-always.is-ready .gd-table td:first-child{display:block;padding:16px 0 10px;border-top:0;font-size:17px;font-weight:600;color:var(--ink)}
.gd-stack-always.is-ready .gd-table td:first-child::before{display:none}
.gd-guide .gd-stack-always.is-ready+.gd-table-note{margin-top:-2px;margin-bottom:22px}
/* stacked cards: narrow only */
@media(max-width:820px){
  .gd-stack.is-ready .gd-table{margin:20px 0 8px;border:0;border-radius:0;overflow:visible;background:none}
  .gd-stack.is-ready .gd-table table,.gd-stack.is-ready .gd-table tbody{display:block;width:100%}
  .gd-stack.is-ready .gd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gd-stack.is-ready .gd-table tr{display:block;margin:0 0 12px;padding:0 16px 4px;border:1px solid var(--line);border-radius:14px;background:#fff}
  .gd-stack.is-ready .gd-table td{display:block;min-width:0;padding:10px 0;border:0;border-top:1px solid var(--line);font-size:14px;line-height:1.75}
  .gd-stack.is-ready .gd-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--gd-blue-text)}
  .gd-stack.is-ready .gd-table td:first-child{padding:14px 0 8px;border-top:0;font-size:15.5px;font-weight:600;color:var(--ink)}
  .gd-stack.is-ready .gd-table td:first-child::before{display:none}
  .gd-doc.is-ready .gd-table td::before{display:none}
}
@media(max-width:580px){
  .gd-stack-always.is-ready .gd-table td{grid-template-columns:1fr;gap:2px}
  .gd-stack-always.is-ready .gd-table tr{padding:0 16px 4px}
}

/* ---------- template fold + copy ---------- */
.gd-guide .gd-template{scroll-margin-top:90px}
.gd-js .gd-guide .gd-template[data-fold-label]:not(.is-open){position:relative;max-height:560px;overflow:hidden}
.gd-js .gd-guide .gd-template[data-fold-label]:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%)}
.gd-template-bar{display:flex;flex-wrap:wrap;gap:10px;margin:-14px 0 28px}
.gd-fold-btn,.gd-copy-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:500;line-height:1.4;cursor:pointer}
.gd-fold-btn{border-color:var(--blue);background:var(--blue);color:#fff}
.gd-fold-btn:hover{background:#0566c7}
.gd-copy-btn::before{content:"";width:16px;height:16px;background:var(--gd-i-copy) center/contain no-repeat}
.gd-copy-btn:hover{background:var(--pale)}

/* ---------- TANKA card ---------- */
.gd-guide .gd-tanka{position:relative;margin-top:72px;padding:32px 32px 18px;border:0;border-radius:var(--gd-r-l);background:var(--gd-tint)}
.gd-guide .gd-tanka-figure{position:absolute;top:32px;right:28px;width:72px;height:72px;margin:0;border:1px solid var(--line);border-radius:50%;overflow:hidden;background:#fff}
.gd-guide .gd-tanka-figure img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.gd-guide .gd-tanka h2{display:flex;align-items:center;min-height:72px;margin:0 90px 14px 0;font-size:24px}
.gd-guide .gd-tanka>ul{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gd-guide .gd-tanka>ul>li{margin:0;padding:14px 16px;border-radius:12px;background:#fff;font-size:14.5px;line-height:1.75}
.gd-guide .gd-tanka>ul>li>strong{color:var(--gd-blue-text)}
.gd-guide .gd-tanka .gd-table{background:#fff}

/* ---------- FAQ accordion ---------- */
.gd-guide .gd-faq{margin-top:72px}
.gd-guide .gd-faq-title{margin:0 0 6px;padding-top:28px;border-top:1px solid var(--line)}
.gd-guide .gd-faq-list{border-top:0}
.gd-guide .gd-faq-item.is-ready{padding:0}
.gd-guide .gd-faq-item.is-ready .gd-faq-q{margin:0}
.gd-guide .gd-faq-item.is-ready .gd-faq-q::before{top:20px}
.gd-faq-btn{position:relative;display:block;width:100%;margin:0;padding:18px 40px 18px 0;border:0;background:none;text-align:left;font:inherit;font-size:17px;font-weight:600;line-height:1.7;letter-spacing:-.01em;color:var(--ink);cursor:pointer}
.gd-faq-btn::after{content:"";position:absolute;right:4px;top:22px;width:20px;height:20px;background:var(--gd-i-chevron) center/contain no-repeat;transition:transform .2s}
.gd-faq-btn[aria-expanded=true]::after{transform:rotate(180deg)}
.gd-js .gd-guide .gd-faq-a{display:none}
.gd-guide .gd-faq-item.is-open .gd-faq-a{display:block}
.gd-guide .gd-faq-item.is-ready .gd-faq-a{padding:0 0 18px 34px}

/* ---------- related cards / sources ---------- */
.gd-guide .gd-related ul{gap:12px}
.gd-guide .gd-related .gd-rel{padding:10px 18px 10px 10px;align-items:center;gap:16px}
.gd-guide .gd-related .gd-rel img{flex:0 0 auto;width:128px;height:84px;object-fit:cover;border-radius:10px;background:var(--pale)}
.gd-rel-body{display:flex;flex:1 1 auto;flex-direction:column;gap:3px;min-width:0}
.gd-rel-kind{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--gd-blue-text)}
.gd-rel-title{font-size:15px;line-height:1.55;color:var(--ink)}
.gd-guide .gd-sources{padding:18px 20px;border-radius:var(--gd-r-s);background:var(--pale);font-size:12.5px;line-height:1.75}
.gd-guide .gd-sources,.gd-guide .gd-sources a{color:#5f6c80}   /* --muted on --pale is 4.29:1; this gray is 4.95:1 (AA) */
.gd-guide .gd-sources li{margin-bottom:6px}

/* ---------- progress bar (guide-nav partial) ---------- */
.gd-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.gd-progress i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}

/* ---------- hub ---------- */
.gd-hub-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px 48px;align-items:center;text-align:left}
.gd-hub-hero .gd-hub-hero-text h1{font-size:clamp(30px,3.4vw,44px);text-align:left}
.gd-hub-hero .gd-hub-hero-text .hero-copy{margin-left:0;margin-right:0}
.gd-hub-hero-fig{margin:0}
.gd-hub-hero-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:24px;background:#fff}
.gd-card-thumb{display:block;margin:-22px -24px 8px;border-bottom:1px solid var(--line);border-radius:17px 17px 0 0;overflow:hidden;background:var(--pale)}
.gd-card-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ---------- CTA band ---------- */
.gd-cta-fig{overflow:hidden}
.gd-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px 48px;align-items:center;text-align:left}
.gd-cta-grid .gd-cta-copy{margin-left:0}
.gd-cta-grid .actions{justify-content:flex-start}
.gd-cta-figure{width:240px;height:auto;align-self:end;justify-self:end;margin:-20px 0 -110px}

/* ---------- breakpoints ---------- */
@media(max-width:820px){
  .gd-numcards ol,.gd-cards2,.gd-guide .gd-tanka>ul{grid-template-columns:1fr}
  .gd-steps3{grid-template-columns:1fr;gap:28px}
  .gd-guide .gd-step h3{font-size:17px}
  .gd-guide .gd-step p{font-size:15px}
  .gd-hub-hero-grid{grid-template-columns:1fr;gap:28px;text-align:center}
  .gd-hub-hero .gd-hub-hero-text h1{text-align:center}
  .gd-hub-hero .gd-hub-hero-text .hero-copy{margin-inline:auto}
  .gd-hub-hero-fig img{border-radius:18px}
  .gd-cta-grid{grid-template-columns:1fr;text-align:center}
  .gd-cta-grid .gd-cta-copy{margin-inline:auto}
  .gd-cta-grid .actions{justify-content:center}
  .gd-cta-figure{display:none}
}
@media(max-width:580px){
  .gd-guide h1.gd-h1-long{font-size:clamp(21px,5.8vw,24px)}
  .gd-guide .gd-hero{margin-top:22px}
  .gd-guide .gd-hero img{border-radius:14px}
  .gd-guide .gd-keypoints blockquote{padding:18px 18px 8px}
  .gd-guide .gd-keypoints li{font-size:14.5px}
  .gd-guide>h2[id]:not(#related):not(#sources){margin-top:56px;padding-top:22px}
  .gd-guide .gd-callout,.gd-guide .gd-callout-warn,.gd-guide .gd-note{padding:14px 16px 14px 48px;font-size:14px}
  .gd-guide .gd-callout::before,.gd-guide .gd-callout-warn::before,.gd-guide .gd-note::before{left:16px;top:15px}
  .gd-item{padding:20px 18px 6px;border-radius:16px}
  .gd-guide .gd-item h3{font-size:17px}
  .gd-concept,.gd-iconlist ul{grid-template-columns:1fr}
  .gd-guide .gd-tanka{margin-top:56px;padding:24px 18px 10px}
  .gd-guide .gd-tanka-figure{top:24px;right:18px;width:56px;height:56px}
  .gd-guide .gd-tanka h2{min-height:56px;margin-right:70px;font-size:21px}
  .gd-guide .gd-related .gd-rel img{width:96px;height:68px}
  .gd-rel-title{font-size:14px}
  .gd-faq-btn{font-size:16px;padding:16px 36px 16px 0}
  .gd-faq-btn::after{top:19px}
  .gd-guide .gd-faq-item.is-ready .gd-faq-q::before{top:18px}
  .gd-guide .gd-faq-item.is-ready .gd-faq-a{padding-left:0}
  .gd-card-thumb{margin:-18px -18px 6px;border-radius:13px 13px 0 0}
  .gd-hub-hero .gd-hub-hero-text h1{font-size:clamp(24px,6.6vw,32px)}
  .gd-template-bar{margin-top:-10px}
  .gd-fold-btn,.gd-copy-btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .gd-faq-btn::after,.gd-toc-toggle::after{transition:none}
}

/* ---------- hub: 活用シーン single card as a full-width horizontal card (review-design.md fix 4) ----------
 * The review's flex-wrap version put the title on a second flex line under the thumbnail (checked in the 1440 shot),
 * so the same layout is built with grid: thumbnail | kind over title | 「見る ›」. <=820 keeps the normal stacked card. */
@media(min-width:821px){
  .gd-hub #more .gd-grid,.gd-hub #report .gd-grid{grid-template-columns:1fr}
  .gd-hub #more .gd-card,.gd-hub #report .gd-card{display:grid;grid-template-columns:300px minmax(0,1fr) auto;grid-template-rows:1fr auto auto 1fr;gap:6px 28px;align-items:center;padding:0 32px 0 0}
  .gd-hub #more .gd-card-thumb,.gd-hub #report .gd-card-thumb{grid-area:1/1/5/2;align-self:stretch;margin:0;border-bottom:0;border-right:1px solid var(--line);border-radius:17px 0 0 17px}
  .gd-hub #more .gd-card-thumb img,.gd-hub #report .gd-card-thumb img{height:100%;min-height:169px;aspect-ratio:auto}
  .gd-hub #more .gd-card-kind,.gd-hub #report .gd-card-kind{grid-area:2/2/3/3}
  .gd-hub #more .gd-card-title,.gd-hub #report .gd-card-title{grid-area:3/2/4/3}
  .gd-hub #more .gd-card-more,.gd-hub #report .gd-card-more{grid-area:1/3/5/4;margin:0;padding:0}
}
/* hub hero copy in the narrower text column: phrase-aware breaks, no one-word last line */
.gd-hub-hero .gd-hub-hero-text .hero-copy span{word-break:auto-phrase;text-wrap:pretty}

/* 2026-10-24 business-ai-comparison master table (gd-master) */
/* ===== 2026-10-24 /guide/business-ai-comparison（W-cmp）: master table, footnotes, compact cards, folded sources =====
 * Append to static/japan-launch-20261017/guide.css (existing rules untouched). Uses the existing tokens
 * (--ink --body --muted --line --pale --blue --gd-tint --gd-blue-text --gd-r). Page markup: drafts/business-ai-comparison.md.
 *   div.gd-stack.gd-master > p.gd-master-hint + table   hint line (≥821px only) above the one table
 *     colgroup > col.gd-master-col-label + col x6      観点 168px + 6 products x 150px = 1068px
 *     thead = 観点 + 6 products (TANKA first (2nd column), th.gd-master-tk)
 *     tr.gd-master-sec > th[colspan] > span.gd-master-sec-label   section rows A / B / C
 *     tr > th[scope=row] + td x6              td > span.gd-mv > span.gd-mk (記号) + span.gd-mt (補足) + sup.gd-fn
 *   ≥821px: the table stays in the 720px column and scrolls sideways inside .gd-table (app.py wrapper), 観点 and TANKA
 *   sticky; the page script sets .is-scrolled on that wrapper while it is scrolled (shadow on the TANKA column).
 *   guide.js (unchanged) writes td[data-label] = product name and adds .is-ready -> ≤820px: one card per 観点.
 */

/* footnote markers: small, not underlined */
.gd-guide sup.gd-fn{font-size:.7em;line-height:0;margin-left:1px;white-space:nowrap}
.gd-guide sup.gd-fn a{color:var(--gd-blue-text);text-decoration:none}
.gd-guide sup.gd-fn a:hover{color:#084a95;text-decoration:none}
.gd-guide .gd-sources li[id]{scroll-margin-top:90px}

/* ---------- master table: fixed 1068px real table ---------- */
.gd-guide .gd-master{margin:22px 0 4px}
.gd-guide .gd-master .gd-table{margin:0 0 22px}
.gd-master .gd-table table{table-layout:fixed;width:1068px;min-width:1068px;font-size:13.5px;line-height:1.55}
.gd-master .gd-table col{width:150px}
.gd-master .gd-table col.gd-master-col-label{width:168px}
.gd-master .gd-table th,.gd-master .gd-table td{min-width:0;padding:10px;vertical-align:top}
.gd-master .gd-table thead th{padding:12px 10px;font-size:13px;line-height:1.45;text-align:center;vertical-align:bottom;word-break:auto-phrase}
.gd-master .gd-table thead th:first-child{text-align:left}
.gd-master .gd-table tbody th[scope="row"]{background:#fff;font-size:13.5px;font-weight:600;line-height:1.6;color:var(--ink);text-align:left;word-break:auto-phrase}
.gd-master .gd-table td{text-align:center}
.gd-master .gd-mk{display:block;margin-bottom:2px;font-size:19px;line-height:1.3;color:var(--ink)}   /* 記号: 1行目 */
.gd-master .gd-mt{font-size:12.5px;line-height:1.5;color:var(--body);word-break:auto-phrase}          /* 補足(≤10字)+脚注: 2行目 */
/* section rows A/B/C: whole row light gray, small left-aligned heading */
.gd-master .gd-table tr.gd-master-sec th{padding:7px 12px;border-left:0;background:#eef1f5;text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
/* TANKA column (2nd th / td, right after 観点): tint + bold */
.gd-master .gd-table .gd-master-tk{background:var(--gd-tint);font-weight:600}
.gd-master .gd-table thead th.gd-master-tk{font-size:14px;color:var(--gd-blue-text)}
.gd-master .gd-table td.gd-master-tk .gd-mk,.gd-master .gd-table td.gd-master-tk .gd-mt{color:var(--gd-blue-text)}
/* one-line hint above the table */
.gd-guide .gd-master .gd-master-hint{margin:0 0 8px;font-size:12px;line-height:1.6;color:var(--muted);text-align:right}

/* ≥821px: no breakout — the 1068px table scrolls sideways inside .gd-table (the 720px column, overflow-x:auto).
 * 観点 (left:0) and TANKA (left:168px = 観点 column) are sticky; the other 5 product columns slide under them.
 * border-collapse:separate because Chrome drops the collapsed borders of sticky cells while scrolling; every cell draws
 * its own lines: bottom border (none in the last row), left border from the 2nd column on, and the TANKA column a right
 * border instead of the next column's left border, so the line stays with the sticky column. */
@media(min-width:821px){
  .gd-master .gd-table table{border-collapse:separate;border-spacing:0}
  .gd-master .gd-table tbody th[scope="row"]+td{border-left:1px solid var(--line)}
  .gd-master .gd-table .gd-master-tk{border-right:1px solid var(--line)}
  .gd-master .gd-table .gd-master-tk+th,.gd-master .gd-table .gd-master-tk+td{border-left:0}
  .gd-master .gd-table tbody tr:last-child th,.gd-master .gd-table tbody tr:last-child td{border-bottom:0}
  .gd-master .gd-table thead th:first-child,.gd-master .gd-table tbody th[scope="row"]{position:sticky;left:0;z-index:2}
  .gd-master .gd-table .gd-master-tk{position:sticky;left:168px;z-index:2}
  .gd-master .gd-table thead th:first-child,.gd-master .gd-table thead th.gd-master-tk{z-index:3}
  .gd-master .gd-table .gd-master-sec-label{position:sticky;left:12px;display:inline-block}
  .gd-master .gd-table.is-scrolled .gd-master-tk{box-shadow:8px 0 10px -8px rgba(15,23,42,.18)}
}

/* ---------- master table: cards (≤820px) — one card per 観点, 6 rows「製品名｜記号 補足」, TANKA row on top ---------- */
@media(max-width:820px){
  .gd-guide .gd-master .gd-master-hint{display:none}
  .gd-stack.gd-master.is-ready .gd-table table{min-width:0}
  .gd-stack.gd-master.is-ready .gd-table colgroup{display:none}
  .gd-stack.gd-master.is-ready .gd-table th,.gd-stack.gd-master.is-ready .gd-table td{position:static}
  .gd-stack.gd-master.is-ready .gd-table tbody tr{padding:0 16px 2px}
  .gd-stack.gd-master.is-ready .gd-table tbody th[scope="row"]{display:block;padding:14px 0 8px;border:0;background:none;font-size:15.5px;line-height:1.6}
  .gd-stack.gd-master.is-ready .gd-table td{display:grid;grid-template-columns:128px minmax(0,1fr);gap:0 12px;align-items:baseline;padding:9px 0;text-align:left;font-size:14px;line-height:1.6}
  .gd-stack.gd-master.is-ready .gd-table td::before{margin:0;font-size:12px;line-height:1.6}
  .gd-stack.gd-master.is-ready .gd-mk{display:inline;margin:0 6px 0 0;font-size:16px}
  .gd-stack.gd-master.is-ready .gd-mt{font-size:14px;color:var(--ink)}
  .gd-stack.gd-master.is-ready .gd-table td.gd-master-tk{margin:0 -16px;padding:10px 16px;border-radius:0;border-top:1px solid var(--line);background:var(--gd-tint)}
  .gd-stack.gd-master.is-ready .gd-table tr.gd-master-sec{margin:26px 0 10px;padding:0;border:0;border-radius:0;background:none}
  .gd-stack.gd-master.is-ready .gd-table tr.gd-master-sec:first-child{margin-top:4px}
  .gd-stack.gd-master.is-ready .gd-table tr.gd-master-sec th{display:block;padding:8px 14px;border-radius:10px;font-size:13.5px}
}

/* fact tables 比較表1〜3・年間費用 (.gd-wide, desktop): first column = product, a little wider; they stay in the 720px column.
 * Cells break at phrases (word-break:auto-phrase from guide.css). Only rows of 6 cells (比較表1) may also break inside a
 * phrase: their phrase widths add up to 794px, so the table would overflow 720px and cut off its last column. That last
 * column keeps whole phrases, so a word like「Workspace」is not split. The 5-column tables fit as they are. */
@media(min-width:821px){
  .gd-wide .gd-table table{font-size:13.5px;line-height:1.65}
  .gd-wide .gd-table th:first-child,.gd-wide .gd-table td:first-child{width:19%}
  .gd-wide .gd-table td:first-child:nth-last-child(6),.gd-wide .gd-table td:first-child:nth-last-child(6)~td:not(:last-child){overflow-wrap:anywhere}
}

/* ---------- 製品ごとの要点: 4-line cards ---------- */
.gd-guide .gd-cards-compact .gd-cell{padding:16px 20px 10px}
.gd-guide .gd-cards-compact .gd-cell h3{margin:0 0 6px;font-size:16px}
.gd-guide .gd-cards-compact .gd-cell p{margin:0 0 4px;font-size:14px;line-height:1.7}

/* ---------- 出典: folded by default (<details>; the page script opens it when a footnote is followed) ---------- */
.gd-guide .gd-sources-fold{margin:4px 0 14px}
.gd-guide .gd-sources-fold>summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 18px;border:1px solid var(--blue);border-radius:999px;background:var(--blue);color:#fff;font-size:14px;font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.gd-guide .gd-sources-fold>summary::-webkit-details-marker{display:none}
.gd-guide .gd-sources-fold>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.gd-guide .gd-sources-fold>summary:hover{background:#0566c7}
.gd-guide .gd-sources-fold>summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.gd-guide .gd-sources-fold[open]>summary{margin-bottom:12px}
.gd-guide .gd-sources-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.gd-guide .gd-sources-fold:not([open]) .gd-sf-close,.gd-guide .gd-sources-fold[open] .gd-sf-open{display:none}
.gd-guide .gd-sources .gd-src-group{margin:14px 0 4px;font-weight:600;color:var(--ink)}

/* v5: TANKA row first. The classes identify only the five product-as-rows tables. */
.gd-guide .gd-tk-first .gd-table tbody tr:first-child td,
.gd-guide .gd-tk-first-2 .gd-table tbody tr:nth-child(-n+2) td{background:var(--gd-tint)}
.gd-guide .gd-tk-first .gd-table tbody tr:first-child td:first-child,
.gd-guide .gd-tk-first-2 .gd-table tbody tr:nth-child(-n+2) td:first-child{color:var(--gd-blue-text);font-weight:700;box-shadow:inset 3px 0 0 var(--blue)}
.gd-guide .gd-tk-first .gd-table tbody tr:first-child td:first-child strong,
.gd-guide .gd-tk-first-2 .gd-table tbody tr:nth-child(-n+2) td:first-child strong{color:inherit;font-weight:inherit}
.gd-guide .gd-cards-compact .gd-cell-tk{background:var(--gd-tint);border-color:#b9d2f3}
.gd-guide .gd-cards-compact .gd-cell-tk h3{color:var(--gd-blue-text)}
@media(max-width:820px){
  .gd-guide .gd-tk-first.is-ready .gd-table tbody tr:first-child,
  .gd-guide .gd-tk-first-2.is-ready .gd-table tbody tr:nth-child(-n+2){background:var(--gd-tint);border-color:#b9d2f3;box-shadow:inset 3px 0 0 var(--blue)}
  .gd-guide .gd-tk-first.is-ready .gd-table tbody tr:first-child td,
  .gd-guide .gd-tk-first-2.is-ready .gd-table tbody tr:nth-child(-n+2) td{background:transparent;border-top-color:rgba(37,99,235,.14)}
  .gd-guide .gd-tk-first.is-ready .gd-table tbody tr:first-child td:first-child,
  .gd-guide .gd-tk-first-2.is-ready .gd-table tbody tr:nth-child(-n+2) td:first-child{box-shadow:none}
  .gd-guide > #copilot ~ .gd-versus-hl.is-ready .gd-table tbody td:nth-child(3){margin:0 -16px -4px;padding:10px 16px 14px;background:var(--gd-tint);border-top-color:#b9d2f3;border-radius:0 0 13px 13px}
}