/* MIKIWAMERU デザインシステム v2（2026-08-23承認、outputs/design/v2_design_system_APPROVED_2026-08-23.md準拠）。
   正本参照: proposal_mock_for_saxo_v2_refined/assets/css/style.css（フェーズ34プロ監査済み、最も仕上がりが良いとされた版）。
   このファイルは参照実装をそのまま.mk-article名前空間へ移植したもの。数値・色・影・角丸など、参照実装から
   絶対に自己判断で変更しない（変更が要る場合は先にユーザーへ確認する。[[feedback_copy_approved_reference_exactly]]）。
   記事本文(.mk-article)スコープ内にのみ適用し、トップページ・ヘッダー・フッターの既存レイアウトには影響しない。 */

.mk-article{
  --ink:#202050; --ink2:#383853; --ink-soft:#626a86;
  --accent:#005fff; --accent-deep:#0052db;
  --pale:#e1ebf5; --pale2:#cddce6; --pale3:#b0d1f7;
  --paper:#f9fafb; --paper-raise:#ffffff;
  --risk-bg:#fdf1e4; --risk-line:#f0d9b8; --risk-ink:#8a5c12;
  --link:#005fff;
  display:block;background:var(--paper);color:var(--ink);
  font-family:'Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;font-weight:400;
  line-height:1.9;font-size:16px;
}
:root:not([data-theme="light"]) .mk-article{
  @media (prefers-color-scheme: dark){
    --ink:#e8eaf6; --ink2:#c7cce8; --ink-soft:#9aa3c4;
    --accent:#5b9bff; --accent-deep:#8fb6ff;
    --pale:#1c2140; --pale2:#242a4d; --pale3:#2a3260;
    --paper:#0d0f1e; --paper-raise:#151831;
    --risk-bg:#2c2410; --risk-line:#5a4318; --risk-ink:#f0c778;
    --link:#5b9bff;
  }
}
[data-theme="dark"] .mk-article{
  --ink:#e8eaf6; --ink2:#c7cce8; --ink-soft:#9aa3c4;
  --accent:#5b9bff; --accent-deep:#8fb6ff;
  --pale:#1c2140; --pale2:#242a4d; --pale3:#2a3260;
  --paper:#0d0f1e; --paper-raise:#151831;
  --risk-bg:#2c2410; --risk-line:#5a4318; --risk-ink:#f0c778;
  --link:#5b9bff;
}
.mk-article *{box-sizing:border-box}
.mk-article h1,.mk-article h2,.mk-article h3{font-family:'Plus Jakarta Sans','Noto Sans JP',sans-serif;font-weight:700;text-wrap:balance;margin:0;color:var(--ink)}
.mk-article a{color:inherit;text-decoration:none}
.mk-article img{max-width:100%;display:block}

/* ---- ヒーロー（マーキー付き） ---- */
.mk-article .hero{background:var(--ink);color:#fff;overflow:hidden;margin:0 -32px}
.mk-article .marquee-row{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.mk-article .marquee-row .track{display:flex;gap:24px;white-space:nowrap;width:max-content;padding:12px 0;animation:mkMarquee 46s linear infinite}
.mk-article .marquee-row.rev .track{animation-direction:reverse;animation-duration:54s}
.mk-article .marquee-row:hover .track,.mk-article .marquee-row:focus-within .track{animation-play-state:paused}
.mk-article .marquee-row .chip{flex:none;color:#9aa3c4;font-size:.76rem;font-weight:500;letter-spacing:.02em}
.mk-article .marquee-row .chip::after{content:"·";margin-left:24px;color:#4a5470}
@keyframes mkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mk-article .marquee-row .track{animation:none}}

.mk-article .hero-main{max-width:1240px;margin:0 auto;padding:64px 32px 80px;text-align:center}
.mk-article .hero-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans';font-size:.76rem;font-weight:700;letter-spacing:.24em;color:#8fb6ff;text-transform:uppercase}
.mk-article .hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.45;margin:22px auto 0;max-width:26ch;letter-spacing:.02em}
.mk-article .hero .lead{font-size:1.05rem;color:#c7cce8;max-width:56ch;margin:24px auto 0;line-height:1.9}
.mk-article .hero .meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px;font-size:.8rem;color:#9aa3c4;font-weight:600}
.mk-article .hero .badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:5px 14px;border-radius:99px}
.mk-article .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.mk-article .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:.92rem;padding:15px 32px;border-radius:99px;transition:transform .15s}
.mk-article .btn:hover{transform:translateY(-2px)}
.mk-article .btn-primary{background:var(--accent);color:#fff}
.mk-article .btn-outline{border:1px solid rgba(255,255,255,.5);color:#fff}
.mk-article .btn-outline.-onlight{border-color:var(--accent);color:var(--accent)}

/* ---- セクション骨格 ---- */
.mk-article .mk-band{padding:88px 0}
.mk-article .mk-band:nth-of-type(even){background:var(--pale)}
.mk-article .mk-band.-dark{background:var(--ink);color:#fff}
.mk-article .mk-band.-risk{background:var(--risk-bg)}
.mk-article .mk-band.-paper{background:var(--paper)}
@media (max-width:820px){.mk-article .mk-band{padding:56px 0}.mk-article .mk-in{padding:0 18px}.mk-article .hero-main{padding-left:18px;padding-right:18px}}
.mk-article .mk-in{max-width:1240px;margin:0 auto;padding:0 32px}

.mk-article .mk-h2{margin:0 0 40px}
.mk-article .mk-h2 .jp{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;display:block;letter-spacing:.02em}
.mk-article .mk-h2 .line{display:block;width:32px;height:2px;background:var(--ink-soft);margin:16px 0 8px}
.mk-article .mk-h2 .en{font-family:'Plus Jakarta Sans';font-size:.7rem;font-weight:600;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase}
.mk-article .mk-band.-dark .mk-h2 .jp{color:#fff}
.mk-article .mk-band.-dark .mk-h2 .en{color:#9aa3c4}
.mk-article .mk-band.-dark .mk-split .txt .hl{color:#8fb6ff}
.mk-article .mk-h2.-center{text-align:center}
.mk-article .mk-h2.-center .line{margin:16px auto 8px}
.mk-article .mk-h2 p.sub{font-size:.9rem;color:var(--ink-soft);margin-top:14px;font-weight:400}

/* ---- 左右分割 ---- */
.mk-article .mk-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mk-article .mk-split.-rev{direction:rtl}
.mk-article .mk-split.-rev>*{direction:ltr}
.mk-article .mk-split .txt .stmt{font-size:1.3rem;font-weight:700;line-height:1.75;margin:0 0 20px;letter-spacing:.02em}
.mk-article .mk-split .txt p{font-size:.96rem;color:var(--ink-soft);line-height:2;max-width:46ch;margin:0 0 14px}
.mk-article .mk-split .txt .hl{color:var(--accent);font-weight:700}
.mk-article .mk-split .txt .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mk-article .mk-split .txt .tags span{font-size:.76rem;font-weight:700;background:var(--pale);color:var(--ink2);padding:5px 14px;border-radius:99px}
.mk-article .mk-band.-dark .mk-split .txt p{color:#b6bfe0}
.mk-article .mk-panel{aspect-ratio:4/3;border-radius:var(--r-md);background:linear-gradient(150deg,var(--pale3),var(--pale));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mk-article .mk-panel svg{width:38%;height:38%}
.mk-article .mk-panel img{width:60%;height:60%;object-fit:contain}
.mk-article .mk-panel.-photo img{width:100%;height:100%;object-fit:cover}
.mk-article .mk-band.-dark .mk-panel{background:linear-gradient(150deg,#2a3260,#1c2140)}
@media (max-width:900px){.mk-article .mk-split{grid-template-columns:1fr;gap:32px}.mk-article .mk-split.-rev{direction:ltr}}

/* ---- ロゴバッジ ---- */
.mk-article .logo-badge{width:96px;height:96px;border-radius:var(--r-md);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--accent-deep);text-align:center;line-height:1.3;padding:6px;flex-shrink:0}
.mk-article .logo-badge img{max-width:100%;max-height:100%}

/* ---- 番号付き角切り欠きカード ---- */
.mk-article .mk-numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}
.mk-article .mk-numitem{background:var(--paper-raise);padding:28px 26px;clip-path:polygon(32px 0,100% 0,100% 100%,0 100%,0 32px);filter:drop-shadow(0 2px 3px rgba(32,32,80,.08)) drop-shadow(0 10px 20px rgba(32,32,80,.12))}
.mk-article .mk-numitem .no{font-family:'Plus Jakarta Sans';font-weight:800;font-size:1.5rem;color:var(--accent);line-height:1}
.mk-article .mk-numitem h3,.mk-article .mk-numitem h4{font-size:1rem;font-weight:700;margin:14px 0 8px}
.mk-article .mk-numitem p{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.85}
/* 実データの数値そのものを主役にする版(ラベルより数字を大きく)。番号カードと同じ枠・影を流用し、中身だけ数字主体に差し替える */
.mk-article .mk-numitem.-stat{display:flex;flex-direction:column}
.mk-article .mk-numitem.-stat .stat-value{display:flex;align-items:baseline;gap:6px;order:-1;margin-bottom:12px}
.mk-article .mk-numitem.-stat .stat-value .num{font-family:'Plus Jakarta Sans';font-weight:800;font-size:2.4rem;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mk-article .mk-numitem.-stat .stat-value .unit{font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.mk-article .mk-numitem.-stat h4{font-size:.86rem;font-weight:700;margin:0 0 4px;color:var(--ink2)}
.mk-article .mk-numitem.-stat p{font-size:.8rem}

/* ---- データ表 ---- */
.mk-article .mk-tablecard{background:var(--paper-raise);border-radius:var(--r-md);padding:8px;margin-top:48px;overflow-x:auto;position:relative;border:1px solid var(--pale2);box-shadow:0 2px 3px rgba(32,32,80,.07),0 10px 20px rgba(32,32,80,.1)}
.mk-article .mk-scroll-hint{display:none;font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:10px}
@media (max-width:900px){.mk-article .mk-scroll-hint{display:block}}
.mk-article .mk-tablecard table{width:100%;border-collapse:collapse;min-width:520px;font-size:1rem}
.mk-article .mk-tablecard.-wide table{min-width:860px}
.mk-article .mk-tablecard th,.mk-article .mk-tablecard td{padding:18px 28px;text-align:left;border-bottom:1px solid var(--pale);vertical-align:top}
.mk-article .mk-tablecard th:first-child,.mk-article .mk-tablecard td:first-child{padding-left:22px}
.mk-article .mk-tablecard th:last-child,.mk-article .mk-tablecard td:last-child{padding-right:22px}
.mk-article .mk-tablecard thead th{color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.04em;border-bottom:2px solid var(--ink)}
.mk-article .mk-tablecard tbody tr:last-child td{border-bottom:none}
.mk-article .mk-tablecard tbody tr:hover{background:var(--pale)}
.mk-article .mk-tablecard tr.-highlight{background:var(--pale)}
.mk-article .mk-tablecard tr.-highlight td.company{color:var(--accent-deep);font-weight:700}
.mk-article .mk-tablecard td.company{font-weight:700;white-space:nowrap}
.mk-article .mk-tablecard td.num,.mk-article .mk-tablecard th.num{text-align:right;font-family:'Plus Jakarta Sans';font-variant-numeric:tabular-nums;font-weight:700}
.mk-article .mk-band.-dark .mk-tablecard{background:var(--paper-raise);color:var(--ink)}
.mk-article .mk-badge-checking{display:inline-block;font-size:.76rem;font-weight:700;color:var(--ink2);background:var(--pale2);padding:3px 10px;border-radius:99px}
.mk-article .mk-badge-verified{display:inline-block;font-size:.76rem;font-weight:700;color:#1a7a4c;background:#e1f3e8;padding:3px 10px;border-radius:99px}

/* ---- 向く人/向かない人 ---- */
.mk-article .mk-fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.mk-article .mk-fitcard{padding:36px 32px;border-radius:var(--r-md);border:1px solid var(--pale2);box-shadow:0 2px 3px rgba(32,32,80,.07),0 10px 20px rgba(32,32,80,.1)}
.mk-article .mk-fitcard.-yes{background:var(--paper-raise)}
.mk-article .mk-fitcard.-no{background:var(--pale)}
.mk-article .mk-fitcard.-b{background:var(--pale)}
.mk-article .mk-fitcard .badge2{min-width:48px;height:48px;padding:0 12px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;margin-bottom:18px}
.mk-article .mk-fitcard.-yes .badge2{background:var(--accent)}
.mk-article .mk-fitcard.-no .badge2{background:var(--ink-soft)}
.mk-article .mk-fitcard.-b .badge2{background:var(--ink2)}
.mk-article .mk-fitcard h4{font-size:1.15rem;margin:0 0 14px}
.mk-article .mk-fitcard ul{margin:0;padding-left:1.2em;font-size:.92rem;color:var(--ink-soft);line-height:2}
@media (max-width:760px){.mk-article .mk-fitgrid{grid-template-columns:1fr}}

/* ---- リスク帯 ---- */
.mk-article .mk-band.-risk p{color:var(--risk-ink);font-size:1rem;max-width:70ch;margin:0 auto;line-height:2}
.mk-article .mk-band.-risk .mk-h2 .line{background:var(--risk-ink)}
.mk-article .mk-band.-risk .mk-h2 .en{color:var(--risk-ink)}

/* ---- ロゴ/企業ピル ---- */
.mk-article .pill-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.mk-article .pill-row .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.82rem;font-weight:700;padding:10px 20px;border-radius:99px}
.mk-article .pill-row .pill img{height:18px;max-width:90px;filter:brightness(0) invert(1)}
.mk-article .pill-row .pill.-saxo{background:var(--accent);border-color:var(--accent)}
.mk-article .mk-band:not(.-dark) .pill-row .pill{background:var(--pale);border-color:var(--pale2);color:var(--ink2)}
.mk-article .mk-band:not(.-dark) .pill-row .pill img{filter:none}
.mk-article .mk-band:not(.-dark) .pill-row .pill.-saxo{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- FAQ ---- */
.mk-article .mk-faq{max-width:70ch;margin:48px auto 0}
.mk-article .mk-faqitem{padding:22px 0;border-top:1px solid var(--pale2)}
.mk-article .mk-faq .mk-faqitem:last-child{border-bottom:1px solid var(--pale2)}
.mk-article .mk-faqitem .q{font-weight:700;font-size:1rem;margin:0 0 10px;display:flex;gap:12px}
.mk-article .mk-faqitem .q::before{content:"Q";flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink-soft);color:var(--ink-soft);font-family:'Plus Jakarta Sans';font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.mk-article .mk-faqitem .a{margin:0;padding-left:36px;font-size:.92rem;color:var(--ink-soft);line-height:1.9}

/* ---- CTA帯 ---- */
.mk-article .mk-band.-cta-geo{position:relative;background-size:cover;background-position:center}
.mk-article .mk-band.-cta-geo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,30,.55),rgba(13,15,30,.88));pointer-events:none}
.mk-article .mk-band.-cta-geo .mk-in{position:relative;z-index:1}
.mk-article .mk-cta{text-align:center}
.mk-article .mk-cta p{color:#c7cce8;max-width:56ch;margin:0 auto 28px;font-size:1rem;line-height:1.9}
.mk-article .mk-cta .btn,.mk-article .mk-cta a.btn,.mk-article .mk-cta-button{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff!important;font-weight:700;font-size:.92rem;padding:15px 32px;border-radius:99px;text-decoration:none;transition:transform .15s;font-family:'Plus Jakarta Sans'}
.mk-article .mk-cta .btn:hover,.mk-article .mk-cta a.btn:hover,.mk-article .mk-cta-button:hover{transform:translateY(-2px)}

/* ---- 注記 ---- */
.mk-article .mk-note{max-width:70ch;margin:0 auto;font-size:.84rem;color:var(--ink-soft);text-align:center;line-height:1.9}
.mk-article .pr-note{font-size:.84rem;color:var(--ink-soft);background:var(--paper-raise);border:1px dashed var(--pale2);border-radius:var(--r-md);padding:16px 22px;margin:0 auto;max-width:65ch;text-align:left}
.mk-article .pr-note strong{color:var(--ink)}

/* ---- 関連リンク ---- */
.mk-article .mk-related{margin-top:20px;max-width:70ch}
.mk-article .mk-related a{display:block;padding:18px 0;border-top:1px solid var(--pale2);font-weight:700;font-size:.94rem;color:var(--ink);transition:color .15s}
.mk-article .mk-related a:last-child{border-bottom:1px solid var(--pale2)}
.mk-article .mk-related a:hover{color:var(--accent)}
.mk-article .mk-related a p{font-weight:400;font-size:.82rem;color:var(--ink-soft);margin:6px 0 0;line-height:1.7}
.mk-article .mk-related a span{display:inline-block;font-size:.7rem;font-weight:700;color:var(--ink-soft);letter-spacing:.05em;margin-top:8px}

/* ---- reveal演出 ---- */
.mk-article .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.165,.84,.44,1),transform .6s cubic-bezier(.165,.84,.44,1)}
.mk-article .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mk-article .reveal{transition:none;opacity:1;transform:none}}