/* 実践記事ページ（移管元のCSSの上に重ねる）。LPと同じヘッダー・フッター・色・文字に合わせ、本文を読みやすくする */
:root{--a-bg:#FFFFFF;--a-paper:#EDF7F3;--a-ink:#183B37;--a-text:#2C4A45;--a-muted:#586D68;--a-line:#D4E4DD;--a-accent:#007B6A;--a-tint:#DBEFE6;
--a-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;--a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;--a-mono:"IBM Plex Mono",ui-monospace,monospace;
--accent:#007B6A;--f-mono:var(--a-mono)}
html body{background:var(--a-bg);color:var(--a-text);font-family:var(--a-body)}
html body #techst-stylish-v3{font-family:var(--a-body);color:var(--a-text);background:var(--a-bg)}

/* ヘッダー（LPと同じ） */
.l-wrap{max-width:1200px;margin-inline:auto;padding-inline:16px}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--a-line)}
.hdr .l-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.hdr .logo{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;font-size:17px;color:var(--a-ink)}
.hdr .logo b{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;background:var(--a-accent);color:#fff;font-family:var(--a-mono);font-size:13px}
.hdr .nav{display:flex;gap:24px;font-size:14px}
.hdr .nav a{text-decoration:none;color:var(--a-muted)}
.hdr .nav a:hover,.hdr .nav a[aria-current]{color:var(--a-accent)}
.hdr .btn{display:inline-flex;align-items:center;min-height:42px;padding:6px 20px;border-radius:999px;background:var(--a-accent);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
@media (max-width:900px){.hdr .nav{display:none}}

/* 移管元の外枠（最大1120px）を外し、ヘッダー・冒頭・フッターを画面幅いっぱいに */
html body #techst-stylish-v3.ts-story-page{max-width:none;margin:0;padding:0}

/* 記事の冒頭 */
html body .story-hero{background:var(--a-paper);max-width:none;margin:0;padding:48px max(16px,calc((100% - 1168px)/2)) 40px;border:0}
html body .story-breadcrumb{font-size:13px;color:var(--a-muted)}
html body .story-breadcrumb a{color:var(--a-accent)}
html body .story-hero .ts-kicker{display:inline-block;margin-top:16px;font-family:var(--a-mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--a-accent);padding:3px 10px;border-radius:999px;background:#fff}
html body .story-hero h1{font-family:var(--a-display);font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;line-height:1.5;color:var(--a-ink);margin-top:14px;max-width:30em;text-wrap:balance;letter-spacing:.01em}
html body .story-summary{font-size:16px;line-height:1.9;color:var(--a-muted);margin-top:14px;max-width:46em}
html body .story-byline,html body .story-editor-note{font-size:12px;color:var(--a-muted);margin-top:8px}
html body .story-byline a{color:var(--a-accent)}

/* 本文と目次 */
html body .story-layout{max-width:1200px;margin:0 auto;padding:40px 16px 24px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
html body .story-toc{position:sticky;top:88px;padding:18px;border-radius:14px;background:var(--a-paper);border:0}
html body .story-toc p{font-size:13px;font-weight:700;color:var(--a-ink);margin:0 0 10px}
html body .story-toc ol{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:13px;line-height:1.6}
html body .story-toc a{color:var(--a-text);text-decoration:none}
html body .story-toc a:hover{color:var(--a-accent);text-decoration:underline}
html body .story-toc-back{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--a-accent)!important}
html body .story-body{max-width:760px;font-size:16px;line-height:1.95;color:var(--a-text)}
html body .story-body > p,html body .story-body section > p,html body .story-body li{font-size:16px;line-height:1.95;color:var(--a-text)}
html body .story-body p + p{margin-top:1em}
html body .story-body h2{font-family:var(--a-body);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;line-height:1.5;color:var(--a-ink);margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--a-line);letter-spacing:.01em}
html body .story-body h3{font-family:var(--a-body);font-size:19px;font-weight:700;line-height:1.55;color:var(--a-ink);margin:36px 0 12px}
html body .story-body a{color:var(--a-accent);text-underline-offset:3px}
html body .story-body ul,html body .story-body ol{padding-left:1.4em;display:grid;gap:6px;margin:14px 0}
html body .story-body strong{color:var(--a-ink)}

/* 先に答え（要点ボックス） */
html body .guide-answer{margin:0 0 32px;padding:24px 26px;border-radius:16px;background:var(--a-paper);border:1px solid var(--a-tint)}
html body .guide-answer h2{margin:6px 0 10px;padding:0;border:0;font-size:20px}
html body .guide-answer-label{display:inline-block;font-size:12px;font-weight:700;color:#fff!important;background:var(--a-accent);padding:2px 10px;border-radius:999px}
html body .guide-answer dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:14px 0;font-size:15px}
html body .guide-answer dt{font-weight:700;color:var(--a-accent)}
html body .guide-answer dd{margin:0}

/* 表・図・コード */
html body .guide-table-wrap{overflow-x:auto;margin:20px 0;border-radius:12px;border:1px solid var(--a-line)}
html body .story-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}
html body .story-body th{background:var(--a-paper);color:var(--a-ink);font-weight:700;text-align:left}
html body .story-body th,html body .story-body td{padding:12px 14px;border-bottom:1px solid var(--a-line);vertical-align:top}
html body .story-body tr:last-child td{border-bottom:0}
html body .article-figure{margin:24px 0;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--a-line)}
html body .story-body pre{border-radius:12px;background:#F4F8F6;border:1px solid var(--a-line);padding:16px 18px;font-size:13px;line-height:1.8;overflow-x:auto}

/* 記事の最後の導線 */
.a-cta{max-width:1168px;margin:40px auto 72px;padding:40px 24px;border-radius:24px;background:var(--a-accent);color:#fff;text-align:center;display:grid;gap:12px;justify-items:center}
.a-cta h2{font-family:var(--a-display);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;line-height:1.5;color:#fff;margin:0}
.a-cta p{color:#D2ECE3;margin:0}
.a-cta .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.a-cta a{display:inline-flex;align-items:center;min-height:46px;padding:8px 22px;border-radius:999px;font-weight:700;text-decoration:none}
.a-cta .main{background:#fff;color:var(--a-accent)}
.a-cta .sub{border:1px solid rgba(255,255,255,.6);color:#fff}
@media (max-width:1180px){.a-cta{margin-inline:16px}}

@media (max-width:960px){
  html body .story-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  html body .story-toc{position:static}
}
@media (max-width:600px){
  html body .story-hero{padding:32px 16px 28px}
  html body .story-body,html body .story-body > p,html body .story-body section > p,html body .story-body li{font-size:15.5px}
  html body .guide-answer{padding:20px 18px}
  html body .guide-answer dl{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* 移管元CSSのリンク色指定より優先させる（ボタンの文字が背景と同色になるのを防ぐ） */
html body .hdr .btn{color:#FFFFFF!important}
html body .hdr .logo{color:var(--a-ink)!important}
html body .a-cta .main{color:var(--a-accent)!important;background:#FFFFFF!important}
html body .a-cta .sub{color:#FFFFFF!important}
html body .foot,html body .foot a,html body .foot dd{color:#FFFFFF}
html body .foot .foot-cta{color:var(--a-accent)!important;background:#FFFFFF!important}
html body .foot .foot-logo b{color:var(--a-accent)!important}

/* 題名の「｜」以降は副題として小さく */
html body .story-hero h1 .h1-sub{display:block;font-size:.62em;line-height:1.55;color:var(--a-muted);margin-top:8px;font-weight:800}
/* 目次は詰めて表示（移管元の li 余白を打ち消す） */
html body .story-toc ol{gap:0}
html body .story-toc li{margin:0!important;padding:0!important}
html body .story-toc li a{display:block;padding:5px 0}
/* 4列未満の表は画面幅に収める（横スクロールは列の多い表だけ） */
html body .guide-table-wrap table:not(:has(tr > :nth-child(4))){min-width:0!important;table-layout:auto}
html body .guide-table-wrap:not(:has(tr > :nth-child(4))) + p,html body .guide-table-wrap:not(:has(tr > :nth-child(4))) .scroll-hint{display:none}
@media (max-width:600px){
  html body .story-hero h1{font-size:1.5rem}
  html body .story-toc{padding:14px 16px}
  html body .story-body th,html body .story-body td{padding:10px 10px;font-size:13.5px}
}
html body .guide-table-wrap:not(:has(tr > :nth-child(4)))::after{content:none!important;display:none!important}
/* 移管元の #techst-stylish-v3 の p・a 指定がフッターに勝つので、フッター側を同じ強さで戻す */
html body #techst-stylish-v3 .foot .foot-brand p{margin:14px 0 0;color:#D2ECE3}
html body #techst-stylish-v3 .foot .foot-co a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
html body #techst-stylish-v3 .foot .foot-col p{margin:0 0 4px}

/* 次に読む：本文と同じ幅にそろえ、矢印は小さく右端に、「すべて見る」は大きな箱でなく文字リンクにする
   （移管元は #techst-stylish-v3 付きの指定なので、同じ強さで上書きする） */
html body #techst-stylish-v3 .story-related{max-width:1200px;margin:0 auto;padding:40px 16px 24px;border-top:1px solid var(--a-line)}
html body #techst-stylish-v3 .story-related h2{font-family:var(--a-body);font-size:22px;font-weight:700;color:var(--a-ink);margin:0 0 18px}
html body #techst-stylish-v3 .story-related > div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html body #techst-stylish-v3 .story-related > div a{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 44px 18px 20px;border-radius:14px;border:1px solid var(--a-line);background:#fff;text-decoration:none;transition:border-color .15s,transform .15s}
html body #techst-stylish-v3 .story-related > div a:hover{border-color:var(--a-accent);transform:translateY(-2px)}
html body #techst-stylish-v3 .story-related > div a > span{font-size:12px;font-weight:700;color:var(--a-accent)}
html body #techst-stylish-v3 .story-related > div a > span:last-child{position:absolute;right:18px;top:50%;transform:translateY(-50%);margin:0;font-size:16px}
html body #techst-stylish-v3 .story-related strong{font-size:15px;line-height:1.65;color:var(--a-ink)}
html body #techst-stylish-v3 .story-related .guide-all-link{display:inline-flex;flex-direction:row;gap:6px;align-items:center;margin-top:18px;padding:0;border:0;background:none;font-size:14px;font-weight:700;color:var(--a-accent)}
html body #techst-stylish-v3 .story-related .guide-all-link span{position:static;font-size:14px;margin:0;transform:none}
@media (max-width:900px){html body #techst-stylish-v3 .story-related > div{grid-template-columns:minmax(0,1fr);gap:10px}html body #techst-stylish-v3 .story-related{padding:32px 16px 16px}}