/* =========================================================
   STOP-FX.com 共通スタイル
   各ページの <style> の後に読み込むので、同じセレクタはこちらが勝つ。
   ヘッダー・メニュー・フッター（.sx-*）は _layout/build.py が差し込む。
   ========================================================= */

:root {
  --red: #E5383B; --red-dark: #9E1B1F; --red-glow: rgba(229, 56, 59, 0.32);
  --red-dim: rgba(229, 56, 59, 0.14);
  --black: #0B0A0A; --dark: #131111; --dark2: #191616; --dark3: #2A2424;
  --gray: #8E8585; --gray-light: #B7AFAF; --white: #F4F1F0;
  --up: #8a7f7f;           /* 陽線はあえてくすんだ色。赤（陰線）だけが目立つ */
  --mono: 'Space Mono', ui-monospace, monospace;
  --hdr: 96px;             /* 固定ヘッダーの高さ（バー＋サブバー） */
}

/* 文字サイズの基準。全ページ rem 指定なのでここで一括して大きさが変わる（16px → 17px） */
html { font-size: 106.25%; }

/* ---------- 地: チャートのグリッドと粒子 ---------- */
body.sx {
  background-color: var(--black);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(229,56,59,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
  background-attachment: fixed, scroll, scroll;
}
body.sx::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.sx-lock, html.sx-lock body { overflow: hidden; }
::selection { background: var(--red); color: #fff; }
.sx-i { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- 部品の基本形 ----------
   古いテンプレートからコピーされたページには、定義が抜けている部品がある。
   :where() で優先度0にしてあるので、ページ側に定義があればそちらが勝つ。 */
:where(.link-card-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 2rem 0; }
:where(.link-card) { display: block; background: var(--dark); border: 1px solid var(--dark3); padding: 1.5rem; text-decoration: none; transition: border-color .3s; }
:where(.link-card:hover) { border-color: var(--red); }
:where(.link-card-tag) { font-family: var(--mono); font-size: .6rem; letter-spacing: .15em; color: var(--red); text-transform: uppercase; margin-bottom: .5rem; }
:where(.link-card h4) { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: .4rem; }
:where(.link-card p) { font-size: .8rem; color: var(--gray-light); line-height: 1.5; margin-bottom: 0; }
:where(.link-card-arrow) { display: block; font-family: var(--mono); font-size: .7rem; color: var(--red); margin-top: .8rem; }
:where(.section-title) { font-size: 1.4rem; font-weight: 900; line-height: 1.5; margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--dark3); }
@media (max-width: 600px) { :where(.link-card-grid) { grid-template-columns: 1fr; } }

/* ---------- ヘッダー ---------- */
.sx-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  background: rgba(11,10,10,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark3);
}
.sx-bar { display: flex; align-items: center; gap: 1.5rem; height: 60px; padding: 0 2rem; max-width: 1280px; margin: 0 auto; }
.sx-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-family: 'Anton', sans-serif; font-size: 1.25rem; letter-spacing: .02em; color: var(--white); }
.sx-logo-mark { width: 22px; height: 22px; color: var(--red); }
.sx-logo span { color: var(--red); }
.sx-nav { display: flex; gap: .15rem; margin-left: auto; }
.sx-nav a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; text-decoration: none;
  font-size: .82rem; font-weight: 700; color: var(--gray-light); border-radius: 4px; transition: color .2s, background .2s;
}
.sx-nav a .sx-i { color: var(--gray); transition: color .2s; }
.sx-nav a:hover { color: var(--white); background: rgba(255,255,255,.04); }
.sx-nav a:hover .sx-i, .sx-nav a[aria-current] .sx-i { color: var(--red); }
.sx-nav a[aria-current] { color: var(--white); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }
.sx-menu-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; cursor: pointer;
  background: transparent; border: 1px solid var(--dark3); border-radius: 4px; color: var(--white);
  font: 700 .68rem/1 var(--mono); letter-spacing: .15em; transition: border-color .2s;
}
.sx-menu-btn:hover { border-color: var(--red); }
.sx-menu-btn .sx-i-close, .sx-menu-btn[aria-expanded="true"] .sx-i-open { display: none; }
.sx-menu-btn[aria-expanded="true"] .sx-i-close { display: block; color: var(--red); }

/* サブバー: パンくず（左）と損益ティッカー（右） */
.sx-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 36px;
  padding: 0 2rem; max-width: 1280px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.04);
  font: .66rem/1 var(--mono); letter-spacing: .06em; color: var(--gray);
}
.sx-crumb { display: flex; min-width: 0; list-style: none; white-space: nowrap; }
.sx-crumb li { flex: none; }
.sx-crumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sx-crumb li + li::before { content: '/'; margin: 0 .6em; color: var(--dark3); }
.sx-crumb li:last-child { color: var(--gray-light); }
.sx-crumb a { color: var(--gray); text-decoration: none; }
.sx-crumb a:hover { color: var(--red); }
.sx-ticker { display: flex; gap: 1.6rem; white-space: nowrap; flex: none; }
.sx-ticker span { display: inline-flex; align-items: baseline; gap: .45em; }
.sx-ticker b { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-ticker small { font-size: .9em; color: var(--gray); }
.sx-tick-dn { width: .8em; height: .8em; color: var(--red); align-self: center; }

/* ---------- メニュー（ドロワー） ---------- */
.sx-drawer {
  position: fixed; inset: var(--hdr) 0 0 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(11,10,10,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: sxDrop .25s ease;
}
.sx-drawer[hidden] { display: none; }
@keyframes sxDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sx-drawer-in {
  max-width: 1280px; margin: 0 auto; padding: 2.5rem 2rem 4rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2.2rem 2rem;
}
.sx-dcat > summary {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--dark3);
  list-style: none; cursor: pointer; color: var(--white); font-size: 1rem; font-weight: 900; scroll-margin-top: 1rem;
}
.sx-dcat > summary::-webkit-details-marker { display: none; }
.sx-dcat > summary .sx-i { color: var(--red); width: 1.3em; height: 1.3em; }
.sx-dcat > summary small { margin-left: auto; font: 400 .6rem var(--mono); letter-spacing: .15em; color: var(--gray); }
.sx-dall a { color: var(--red) !important; font: .68rem/2 var(--mono) !important; }
.sx-chips { display: none; }
.sx-dcat ul { list-style: none; }
.sx-dcat li a { display: block; padding: .32rem 0 .32rem .9rem; position: relative; font-size: .82rem; line-height: 1.55; color: var(--gray-light); text-decoration: none; }
.sx-dcat li a::before { content: ''; position: absolute; left: 0; top: .85em; width: 5px; height: 1px; background: var(--dark3); transition: all .2s; }
.sx-dcat li a:hover { color: var(--white); }
.sx-dcat li a:hover::before { background: var(--red); width: 8px; }
.sx-dcat li a[aria-current] { color: var(--red); }
.sx-drawer-help {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--dark3); border-left: 3px solid #FFD600; text-decoration: none; color: var(--gray-light); font-size: .88rem;
}
.sx-drawer-help b { color: var(--white); margin-right: .5em; }
.sx-drawer-help .sx-i:first-child { color: #FFD600; width: 1.4em; height: 1.4em; }
.sx-drawer-help .sx-i:last-child { margin-left: auto; color: var(--gray); }

/* ---------- ヒーロー: 背景にローソク足 ---------- */
.article-hero, .lp-hero { position: relative; isolation: isolate; }
.article-hero { padding-top: calc(var(--hdr) + 4rem); }
.article-hero::after, .lp-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 100vw; transform: translateX(-50%); bottom: 0; height: 85%;
  background: url(/assets/chart.svg) right bottom / cover no-repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 75%, transparent);
}
.lp-hero::after { height: 70%; opacity: .26; }
.article-label, .lp-hero-label { display: inline-flex; align-items: flex-start; gap: .6em; }
.article-label::before, .lp-hero-label::before {
  content: ''; flex: none; width: 7px; height: 12px; margin-top: .3em; background: currentColor;
  box-shadow: 0 -5px 0 -2.5px currentColor, 0 5px 0 -2.5px currentColor;
}
/* 文節の間でだけ折る。文節の span.ph は build.py が BudouX で入れる */
.article-hero h1 { letter-spacing: .01em; }
.article-hero h1 .ph { display: inline-block; }
@media (max-width: 480px) { .article-hero h1 { font-size: 1.6rem; } }
.article-hero h1 .highlight, .lp-hero h1 { text-shadow: 0 0 48px var(--red-glow); }
.article-meta { border-top: 1px solid var(--dark3); padding-top: 1rem; }

/* ---------- 本文 ---------- */
.article-body p { color: var(--gray-light); }
:where(.article-body p, .article-body ul:not([class]) > li, .article-body ol:not([class]) > li) > a:not([class]) { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }

/* 見出し: 左に小さなローソク足（陰線） */
.section-title::before, .article-body > h2::before {
  content: ''; display: inline-block; width: 5px; height: .8em; margin: 0 .7em 0 .1em; vertical-align: -.02em; background: var(--red);
  box-shadow: 0 -.22em 0 -1.5px var(--red), 0 .22em 0 -1.5px var(--red);
}
.cost-number { font-variant-numeric: tabular-nums; -webkit-text-stroke: 1px rgba(229,56,59,.5); }
.cost-subtitle::before { content: '▼ '; }

.data-card, .opp-cost-card, .step-card, .story-card, .exit-card, .link-card, .callout, .author-inner, .real-voice {
  background-color: rgba(19,17,17,.88);
}

/* ===== データカード: 気配値パネル ===== */
.data-grid { counter-reset: sxd; }
@media (min-width: 601px) {
  .data-grid:has(> .data-card:nth-child(2):last-child),
  .data-grid:has(> .data-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .data-grid:has(> .data-card:nth-child(3):last-child),
  .data-grid:has(> .data-card:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.data-grid { gap: 1rem; }
.data-card {
  counter-increment: sxd; display: flex; flex-direction: column;
  padding: 1.1rem 1.4rem 4.2rem; border: 1px solid var(--dark3); border-radius: 2px;
  background-color: rgba(19,17,17,.92);
  background-image: url(/assets/mini-1.svg), linear-gradient(160deg, rgba(229,56,59,.07), transparent 45%);
  background-repeat: no-repeat, no-repeat;
  background-position: left 1.4rem bottom 1rem, 0 0;
  background-size: calc(100% - 2.8rem) 40px, 100% 100%;
  transition: border-color .25s, box-shadow .25s;
}
.data-card:nth-child(3n+2) { background-image: url(/assets/mini-2.svg), linear-gradient(160deg, rgba(229,56,59,.07), transparent 45%); }
.data-card:nth-child(3n)   { background-image: url(/assets/mini-3.svg), linear-gradient(160deg, rgba(229,56,59,.07), transparent 45%); }
.data-card:hover { border-color: rgba(229,56,59,.55); box-shadow: 0 0 0 1px rgba(229,56,59,.15), 0 18px 40px -24px var(--red-glow); }
/* 上段: DATA 01 ……… ▼ */
.data-card::before {
  content: 'DATA ' counter(sxd, decimal-leading-zero); position: static; width: auto; height: auto; background: none;
  display: flex; justify-content: space-between; order: -1;
  font: 400 .6rem/1 var(--mono); letter-spacing: .18em; color: var(--gray);
  padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--dark3);
}
.data-card::after {
  content: '▼'; position: absolute; top: 1.05rem; right: 1.4rem; font: .6rem/1 var(--mono); color: var(--red);
}
.data-number {
  font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; margin-bottom: .7rem;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 34px var(--red-glow);
}
.data-desc { font-size: .84rem; line-height: 1.7; }
.data-source { margin-top: .6rem; font-family: var(--mono); font-size: .62rem; color: var(--gray); }

/* ===== ステップカード: 手順パネル ===== */
.step-cards { counter-reset: sxs; gap: 1rem; }
.step-card {
  position: relative; border-radius: 2px; padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--dark3); background: rgba(23,20,20,.92);
  transition: border-color .25s, transform .25s;
}
.step-card::after {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  background: #FFD600; transform: scaleY(.25); transform-origin: top; opacity: .5; transition: transform .3s, opacity .3s;
}
.step-card:hover { border-color: #3a3220; transform: translateY(-2px); }
.step-card:hover::after { transform: scaleY(1); opacity: 1; }
.step-num {
  display: flex; align-items: baseline; gap: .5rem; font-size: 2.2rem; color: #FFD600; opacity: .85;
  padding-bottom: .7rem; margin-bottom: .9rem; border-bottom: 1px dashed var(--dark3);
}
.step-num::before { content: 'STEP'; font: 700 .58rem/1 var(--mono); letter-spacing: .2em; color: var(--gray); }
.step-card h4 { font-size: 1.02rem; font-weight: 900; line-height: 1.5; color: var(--white); }
.step-card p { color: var(--gray-light); }

/* ===== 体験談カード: 決済済みの取引記録 ===== */
.story-card {
  border: 1px solid var(--dark3); border-left: 3px solid var(--red); border-radius: 2px;
  padding: 1.6rem 1.7rem 1.2rem; background: linear-gradient(100deg, rgba(229,56,59,.05), transparent 40%), rgba(19,17,17,.92);
}
.story-card::before { content: 'CLOSED'; font: 700 .58rem/1 var(--mono); letter-spacing: .2em; color: var(--gray); opacity: 1;
  top: 1rem; right: 1.2rem; padding: .35em .6em; border: 1px solid var(--dark3); }
.story-text { color: var(--white); font-style: normal; line-height: 1.95; padding-right: 3.5rem; }
.story-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px dashed var(--dark3); font-size: .68rem; line-height: 1.6; color: var(--gray);
}
.story-loss {
  display: inline-flex; align-items: center; gap: .3em; padding: .2em .55em; border-radius: 2px;
  background: rgba(229,56,59,.12); color: var(--red); font-variant-numeric: tabular-nums;
}
.story-loss::before { content: '▼'; font-size: .8em; }

/* カード内の段落には本文用の下余白を付けない */
.article-body :is(.data-card, .step-card, .story-card, .link-card, .opp-cost-card) p:last-child { margin-bottom: 0; }

/* ===== リンクカード ===== */
.link-card { position: relative; border-radius: 2px; transition: border-color .25s, transform .25s, background-color .25s; }
.link-card:hover { transform: translateY(-2px); background-color: rgba(229,56,59,.05); }
.link-card-tag { display: flex; align-items: center; gap: .5em; }
.link-card-tag::before { content: ''; width: 4px; height: 9px; background: var(--red); box-shadow: 0 -3px 0 -1.5px var(--red), 0 3px 0 -1.5px var(--red); flex: none; }
.link-card-arrow { transition: transform .25s, color .25s; }
.link-card:hover .link-card-arrow { transform: translateX(4px); color: var(--white); }
.exit-card, .summary-box { border-radius: 2px; }
.summary-box { background: radial-gradient(ellipse at 50% 0%, rgba(229,56,59,.14), transparent 70%), var(--dark); }
.compare-table td, .compare-table th { font-variant-numeric: tabular-nums; }

.lp-hero-cta, .summary-cta, .exit-cta { border-radius: 2px; }
.lp-hero-cta { box-shadow: 0 0 0 1px rgba(229,56,59,.4), 0 10px 40px -10px var(--red-glow); }

/* ---------- トップ: カテゴリのタイル ---------- */
.sx-ix-total { white-space: nowrap; margin-left: .8em; font: 400 .65rem var(--mono); letter-spacing: .2em; color: var(--gray); vertical-align: middle; }
.sx-ix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 3rem; }
.sx-ix-cat {
  display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.1rem; border: 1px solid var(--dark3); border-radius: 2px;
  background: linear-gradient(160deg, rgba(229,56,59,.06), transparent 40%), rgba(19,17,17,.92);
  scroll-margin-top: calc(var(--hdr) + 1rem); transition: border-color .25s;
}
.sx-ix-cat:hover, .sx-ix-cat:target { border-color: rgba(229,56,59,.5); }
.article-body .sx-ix-head { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--white); }
.sx-ix-icon { width: 42px; height: 42px; padding: 9px; flex: none; color: var(--red); border: 1px solid var(--dark3); background: var(--black); transition: border-color .25s; }
.sx-ix-head:hover .sx-ix-icon { border-color: var(--red); }
.sx-ix-head > span { flex: 1; display: grid; gap: .25rem; }
.sx-ix-en { font: 400 .6rem/1 var(--mono); letter-spacing: .2em; color: var(--red); }
.sx-ix-label { font-size: 1.2rem; font-weight: 900; line-height: 1.3; }
.sx-ix-label small { margin-left: .6em; font: 400 .65rem var(--mono); color: var(--gray); }
.sx-ix-head > .sx-i { color: var(--gray); transition: transform .2s, color .2s; }
.sx-ix-head:hover > .sx-i { color: var(--red); transform: translateX(3px); }
.article-body .sx-ix-desc { font-size: .8rem; line-height: 1.7; color: var(--gray); margin: .9rem 0 .6rem; }
.sx-ix-cat ol { list-style: none; border-top: 1px dashed var(--dark3); flex: 1; }
.article-body .sx-ix-cat li a { display: flex; gap: .7rem; padding: .5rem 0; text-decoration: none; color: var(--gray-light); font-size: .84rem; line-height: 1.55; transition: color .2s; }
.article-body .sx-ix-cat li a:hover { color: var(--white); }
.sx-ix-n { font: .62rem/2.2 var(--mono); color: var(--gray); flex: none; }
.sx-ix-cat li a:hover .sx-ix-n { color: var(--red); }
.article-body .sx-ix-all { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--dark3);
  font: .68rem var(--mono); letter-spacing: .04em; color: var(--red); text-decoration: none; }
.article-body .sx-ix-all:hover { color: var(--white); }
@media (max-width: 700px) {
  .sx-ix { grid-template-columns: 1fr; }
  .sx-ix-total { display: block; margin: .4rem 0 0; }
}

/* ---------- カテゴリページ ---------- */
.sx-cat-hero h1 { display: flex; align-items: center; gap: .9rem; }
.sx-cat-icon { width: 1.15em; height: 1.15em; padding: .18em; flex: none; color: var(--red); border: 1px solid var(--dark3); background: var(--black); }
.sx-cat-lead { font-size: 1.02rem; color: var(--gray-light); line-height: 1.9; max-width: 40em; margin-bottom: 1.6rem; }
.sx-cat-feature {
  display: grid; gap: .5rem; padding: 2rem 2.2rem; margin-bottom: 1.4rem; text-decoration: none; position: relative;
  border: 1px solid rgba(229,56,59,.45); border-radius: 2px;
  background: url(/assets/mini-2.svg) right 2.2rem bottom 1.6rem / 220px 46px no-repeat,
              radial-gradient(ellipse at 0% 0%, rgba(229,56,59,.16), transparent 60%), rgba(19,17,17,.92);
  transition: box-shadow .25s, transform .25s;
}
.sx-cat-feature:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--red), 0 20px 50px -25px var(--red-glow); }
.sx-cat-start { font: 700 .62rem/1 var(--mono); letter-spacing: .2em; color: var(--red); }
.sx-cat-ftitle { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 900; color: var(--white); line-height: 1.45; }
.sx-cat-fdesc { font-size: .88rem; color: var(--gray-light); line-height: 1.8; max-width: 36em; }
.sx-cat-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font: 700 .72rem var(--mono); color: var(--red); letter-spacing: .1em; }
.sx-cat-feature:hover .sx-cat-go .sx-i { transform: translateX(4px); }
.sx-cat-go .sx-i { transition: transform .25s; }
.sx-cat-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--dark3); border: 1px solid var(--dark3); }
.sx-cat-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sx-cat-list a { display: flex; align-items: flex-start; gap: 1rem; height: 100%; padding: 1.3rem 1.3rem 1.4rem; background: var(--black); text-decoration: none; transition: background .2s; }
.sx-cat-list a:hover { background: var(--dark2); }
.sx-cat-n { font: .7rem/1.9 var(--mono); color: var(--red); flex: none; }
.sx-cat-t { flex: 1; display: grid; gap: .35rem; }
.sx-cat-t b { font-size: .98rem; font-weight: 900; color: var(--white); line-height: 1.55; }
.sx-cat-t small { font-size: .78rem; color: var(--gray); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-cat-list .sx-i { color: var(--gray); margin-top: .3rem; transition: transform .2s, color .2s; }
.sx-cat-list a:hover .sx-i { color: var(--red); transform: translateX(3px); }
.sx-cat-others { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--dark3); }
.sx-cat-others > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: 1rem; }
.sx-cat-others a { display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; border: 1px solid var(--dark3); border-radius: 2px; text-decoration: none; color: var(--gray-light); font-size: .85rem; font-weight: 700; transition: border-color .2s, color .2s; }
.sx-cat-others a .sx-i { color: var(--red); }
.sx-cat-others a small { margin-left: auto; font: 400 .65rem var(--mono); color: var(--gray); }
.sx-cat-others a:hover { border-color: var(--red); color: var(--white); }
.sx-fcol h3 a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.sx-fcol h3 a:hover { color: var(--red); }
@media (max-width: 700px) {
  .sx-cat-list { grid-template-columns: 1fr; }
  .sx-cat-feature { padding: 1.5rem 1.3rem 4.5rem; background-position: left 1.3rem bottom 1.2rem, 0 0, 0 0; }
}

/* ---------- 次に読む ---------- */
.sx-related { border-top: 1px solid var(--dark3); background: linear-gradient(to bottom, rgba(229,56,59,.05), transparent 60%); }
.sx-related-in { max-width: 1040px; margin: 0 auto; padding: 3.5rem 2rem; }
.sx-kicker { display: flex; align-items: center; gap: .5rem; font: .66rem var(--mono); letter-spacing: .14em; color: var(--gray); margin-bottom: .4rem; }
.sx-kicker .sx-i { color: var(--red); }
.sx-kicker span { color: var(--red); }
.sx-related h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 1.5rem; }
.sx-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--dark3); border: 1px solid var(--dark3); }
.sx-rcard { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--black); text-decoration: none; color: var(--gray-light); font-size: .9rem; font-weight: 700; line-height: 1.5; transition: background .2s, color .2s; }
.sx-rcard:hover { background: var(--dark2); color: var(--white); }
.sx-rnum { font: 400 .7rem var(--mono); color: var(--red); flex: none; }
.sx-rtitle { flex: 1; }
.sx-rcard .sx-i { color: var(--gray); transition: transform .2s, color .2s; }
.sx-rcard:hover .sx-i { color: var(--red); transform: translateX(3px); }
.sx-rall { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; font: .72rem var(--mono); color: var(--red); text-decoration: none; letter-spacing: .05em; }
.sx-rall:hover { color: var(--white); }

/* ---------- フッター ---------- */
footer.sx-footer { text-align: left; padding: 0; border-top: 0; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0; color: var(--gray); background: #080707; position: relative; }
footer.sx-footer::before {
  content: ''; display: block; height: 56px; border-top: 1px solid var(--dark3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23E5383B' stroke-opacity='.5' stroke-width='1.2' vector-effect='non-scaling-stroke' points='0,10 60,14 110,8 170,16 220,12 290,20 340,15 400,22 450,18 520,26 580,22 640,30 690,27 760,34 820,31 880,38 930,36 990,44 1040,41 1100,50 1150,47 1200,55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sx-footer-in { max-width: 1280px; margin: 0 auto; padding: 2rem 2rem 3rem; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; }
.sx-fcopy { margin: 1rem 0 .6rem; font-size: 1.05rem; font-weight: 900; line-height: 1.6; color: var(--white); }
.sx-fwho { font-size: .78rem; line-height: 1.7; }
.sx-fhelp { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding: .7rem 1rem; border: 1px solid var(--dark3); border-left: 3px solid #FFD600; color: var(--gray-light) !important; text-decoration: none; font-size: .8rem; }
.sx-fhelp .sx-i:first-child { color: #FFD600; }
.sx-fhelp:hover { color: var(--white) !important; border-color: #FFD600; }
.sx-fmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem 1.5rem; }
.sx-fcol h3 { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 900; color: var(--white); margin-bottom: .6rem; }
.sx-fcol h3 .sx-i { color: var(--red); }
.sx-fcol ul { list-style: none; }
.sx-fcol li a { display: block; padding: .2rem 0; font-size: .74rem; line-height: 1.55; color: var(--gray); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-fcol li a:hover { color: var(--white); }
.sx-fmore a { color: var(--red) !important; font-family: var(--mono); font-size: .66rem !important; }
.sx-flegal { border-top: 1px solid var(--dark3); max-width: 1280px; margin: 0 auto; padding: 1.4rem 6rem 2rem 2rem; font-size: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; }
.sx-flinks { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.sx-flegal a { color: var(--gray-light); text-decoration: none; }
.sx-flegal a:hover { color: var(--white); }
.sx-fc { margin-left: auto; font-family: var(--mono); }

/* 404: 固定ヘッダーの分だけ下げ、背景にチャート */
.error-container { position: relative; isolation: isolate; min-height: 100vh; padding-top: calc(var(--hdr) + 3rem) !important; }
.error-container::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; pointer-events: none; opacity: .18;
  background: url(/assets/chart.svg) right bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%);
}

/* 既存の ↑ ボタンを馴染ませる */
#back-to-top { border-radius: 2px !important; z-index: 130 !important; }

/* ---------- スマホ下部のアイコンメニュー ---------- */
.sx-tabbar { display: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
  .sx-nav a span { display: none; }
  .sx-nav a { padding: .5rem; }
  .sx-nav a .sx-i { width: 1.25em; height: 1.25em; }
}
@media (max-width: 860px) {
  .sx-ticker { display: none; }
  .sx-footer-in { grid-template-columns: 1fr; gap: 2rem; }
  .sx-fmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --hdr: 88px; }
  .sx-bar { height: 54px; padding: 0 1rem; gap: .8rem; }
  .sx-nav { display: none; }
  .sx-menu-btn { margin-left: auto; }
  .sx-sub { height: 34px; padding: 0 1rem; }
  .sx-drawer-in { padding: 1.2rem 1rem 3rem; gap: 0; }
  .sx-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dark3); border: 1px solid var(--dark3); margin-bottom: 1.4rem; }
  .sx-chips a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .2rem; background: var(--black); color: var(--gray-light); text-decoration: none; font-size: .7rem; font-weight: 700; }
  .sx-chips .sx-i { width: 22px; height: 22px; color: var(--red); }
  .sx-dcat > summary { margin: 0; padding: .9rem 0; }
  .sx-dcat > summary::after { content: '+'; font: 400 1.1rem/1 var(--mono); color: var(--gray); margin-left: .8rem; }
  .sx-dcat[open] > summary::after { content: '−'; color: var(--red); }
  .sx-dcat[open] > ul { padding: .6rem 0 1rem; }
  .sx-drawer-help { margin-top: 1.4rem; }
  .article-hero { padding-top: calc(var(--hdr) + 3rem); }
  .article-hero::after { height: 70%; opacity: .2; }
  .sx-related-in { padding: 2.5rem 1rem; }
  .story-card { padding: 2.9rem 1.2rem 1.1rem 1.3rem; }
  .story-card::before { top: .9rem; left: 1.3rem; right: auto; }
  .story-text { padding-right: 0; }
  .sx-rgrid { grid-template-columns: 1fr; }
  .sx-footer-in { padding: 1.5rem 1rem 2rem; }
  .sx-fmap { gap: 1.5rem 1rem; }
  .sx-flegal { padding: 1.2rem 1rem 2rem; }
  .sx-fc { margin-left: 0; }

  :root { --tab: calc(58px + env(safe-area-inset-bottom)); }
  body.sx { padding-bottom: var(--tab); }
  .sx-drawer { bottom: var(--tab); }
  #back-to-top { bottom: calc(var(--tab) + 1rem) !important; right: 1rem !important; }
  .sx-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    height: var(--tab); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(11,10,10,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--dark3);
  }
  .sx-tabbar a, .sx-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--gray-light);
    font: 700 .62rem/1 'Noto Sans JP', sans-serif; -webkit-tap-highlight-color: transparent;
  }
  .sx-tabbar .sx-i { width: 22px; height: 22px; color: var(--gray); }
  .sx-tabbar [aria-current] { color: var(--white); box-shadow: inset 0 2px 0 var(--red); }
  .sx-tabbar [aria-current] .sx-i, .sx-tabbar a:active .sx-i { color: var(--red); }
  .sx-tab-menu .sx-i-close, .sx-tab-menu[aria-expanded="true"] .sx-i-open { display: none; }
  .sx-tab-menu[aria-expanded="true"] .sx-i-close { display: block; color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-drawer { animation: none; }
  .link-card:hover, .sx-rcard:hover .sx-i { transform: none; }
}