/* ============================================================
   養分 — デザインシステム
   真面目な攻略メディア：暗い基調・抑えたアクセント・データ主役
   ============================================================ */

:root{
  /* --- 面（奥から手前へ4段階） --- */
  --bg:      #0a0c11;
  --surface: #12151d;
  --raised:  #191d27;
  --hover:   #212736;

  /* --- 線 --- */
  --line:    #242a37;
  --line-str:#333b4d;

  /* --- 文字（4段階のコントラスト） --- */
  --ink:     #eef1f7;
  --ink-2:   #b8c0d0;
  --ink-3:   #7d8699;
  --ink-4:   #545c6d;

  /* --- アクセント：金は1色だけ、乱用しない --- */
  --gold:    #f0b429;
  --gold-dim:#8a6712;
  --gold-bg: rgba(240,180,41,.10);

  /* --- データ用の色（グラフ・数値） --- */
  --up:      #35c88a;   /* プラス収支 */
  --down:    #f2603c;   /* マイナス収支 */
  --info:    #4aa8e0;   /* 中立の指標 */
  --purple:  #9d7cf0;

  /* --- タイポ --- */
  --sans: "Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP","Meiryo",sans-serif;
  --mono: "SFMono-Regular","Consolas","Roboto Mono",monospace;

  /* 8pxグリッド */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-full:999px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;   /* 日本語の詰め */
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#000}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
@media(max-width:640px){ .wrap{padding:0 var(--s4)} }

/* ============ タイポグラフィ ============ */
.t-display{font-size:clamp(30px,5vw,52px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.t-h1{font-size:clamp(24px,3.4vw,36px);line-height:1.25;font-weight:800;letter-spacing:-.015em}
.t-h2{font-size:clamp(19px,2.2vw,25px);line-height:1.35;font-weight:700;letter-spacing:-.01em}
.t-h3{font-size:17px;line-height:1.45;font-weight:700}
.t-body{font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.t-sm{font-size:13px;line-height:1.7;color:var(--ink-3)}
.t-xs{font-size:11.5px;line-height:1.6;color:var(--ink-3);letter-spacing:.04em}
.t-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;margin-bottom:var(--s2);display:block;
}

/* ============ ヘッダー ============ */
.hdr{position:sticky;top:0;z-index:100;background:rgba(10,12,17,.85);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:var(--s5);height:64px}

.brand{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.brand-mark{width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(145deg,var(--gold),#c98a00);
  display:grid;place-items:center;font-weight:900;font-size:19px;color:#1a1200}
.brand-txt b{display:block;font-size:19px;font-weight:800;letter-spacing:.06em;line-height:1.1}
.brand-txt span{display:block;font-size:9.5px;color:var(--ink-4);letter-spacing:.2em}

.gnav{display:flex;gap:var(--s1);margin-left:var(--s4);overflow-x:auto;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{position:relative;padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:.16s var(--ease)}
.gnav a:hover{color:var(--ink);background:var(--raised)}
.gnav a.on{color:var(--gold)}
.gnav a.on::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:-1px;
  height:2px;background:var(--gold);border-radius:2px}

.hdr-act{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.icon-btn{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink-3);transition:.16s var(--ease)}
.icon-btn:hover{background:var(--raised);color:var(--ink)}

.menu-btn{display:none}
@media(max-width:900px){
  .gnav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--surface);
    border-bottom:1px solid var(--line);padding:var(--s3);margin:0;
    transform:translateY(-120%);transition:.24s var(--ease);max-height:calc(100vh - 64px);overflow-y:auto}
  .gnav.open{transform:translateY(0)}
  .gnav a{padding:var(--s3) var(--s4);font-size:15px}
  .gnav a.on::after{display:none}
  .menu-btn{display:grid}
}

/* ============ パンくず ============ */
.crumb{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) 0;
  font-size:12px;color:var(--ink-4);flex-wrap:wrap}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--gold)}
.crumb i{font-style:normal;color:var(--ink-4)}

/* ============ セクション見出し ============ */
.sec{margin-bottom:var(--s8)}
.sec-hd{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s5);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.sec-hd .more{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  display:flex;align-items:center;gap:4px;transition:.16s}
.sec-hd .more:hover{color:var(--gold);gap:8px}

/* ============ カード ============ */
.grid{display:grid;gap:var(--s4)}
.g-2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.g-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s var(--ease);position:relative}
.card:hover{border-color:var(--line-str);background:var(--raised);transform:translateY(-2px)}
.card-fig{aspect-ratio:16/9;background:var(--raised);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
.card-fig svg{width:100%;height:100%;display:block}
.card-bd{padding:var(--s4);flex:1;display:flex;flex-direction:column;gap:var(--s2)}
.card-bd h3{font-size:15.5px;font-weight:700;line-height:1.45}
.card-ft{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3);
  font-size:11.5px;color:var(--ink-4)}

.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* リンク全体をカバーする擬似要素（カード全体をクリック可能に） */
.stretch::after{content:"";position:absolute;inset:0}

/* ============ バッジ・チップ ============ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-full);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;background:var(--gold-bg);color:var(--gold)}
.badge.g{background:rgba(53,200,138,.12);color:var(--up)}
.badge.r{background:rgba(242,96,60,.12);color:var(--down)}
.badge.b{background:rgba(74,168,224,.12);color:var(--info)}
.badge.n{background:var(--hover);color:var(--ink-3)}

.chip{background:var(--raised);border:1px solid var(--line);color:var(--ink-3);
  border-radius:var(--r-full);padding:6px 14px;font-size:12.5px;transition:.16s var(--ease)}
.chip:hover{border-color:var(--line-str);color:var(--ink)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1200;font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ============ ボタン ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:11px 22px;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  transition:.16s var(--ease)}
.btn-p{background:var(--gold);color:#1a1200}
.btn-p:hover{background:#ffc93f;transform:translateY(-1px)}
.btn-s{background:var(--raised);color:var(--ink);border:1px solid var(--line-str)}
.btn-s:hover{background:var(--hover);border-color:var(--ink-4)}
.btn-sm{padding:7px 14px;font-size:12.5px}

/* ============ 統計タイル ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--surface);padding:var(--s4) var(--s4)}
.stat dt{font-size:11px;color:var(--ink-4);letter-spacing:.06em;margin-bottom:var(--s1)}
.stat dd{font-size:26px;font-weight:800;line-height:1.1;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat dd small{font-size:12px;font-weight:600;color:var(--ink-4);margin-left:3px;font-family:var(--sans)}

/* ============ テーブル ============ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th,td{padding:11px var(--s4);text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--raised);font-size:11.5px;color:var(--ink-3);font-weight:700;
   letter-spacing:.06em;white-space:nowrap}
td{color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--raised)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.pos{color:var(--up)} .neg{color:var(--down)}

/* ============ 記事本文 ============ */
.prose h2{font-size:21px;font-weight:800;margin:var(--s7) 0 var(--s3);
  padding-left:var(--s3);border-left:3px solid var(--gold);letter-spacing:-.01em}
.prose h3{font-size:16.5px;font-weight:700;margin:var(--s5) 0 var(--s2);color:var(--ink)}
.prose p{font-size:15.5px;line-height:1.9;color:var(--ink-2);margin-bottom:var(--s4)}
.prose figure{margin:var(--s5) 0}
.prose figcaption{font-size:12px;color:var(--ink-4);margin-top:var(--s2);text-align:center}
.wl{color:var(--gold);border-bottom:1px solid var(--gold-dim);transition:.15s}
.wl:hover{border-bottom-color:var(--gold);background:var(--gold-bg)}

.callout{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--info);
  border-radius:var(--r-sm);padding:var(--s4);margin:var(--s5) 0}
.callout.warn{border-left-color:var(--down)}
.callout.tip{border-left-color:var(--up)}
.callout b{display:block;font-size:13px;margin-bottom:var(--s1)}
.callout p{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0}

/* ============ 画像プレースホルダ（自分の写真を後で入れる枠） ============ */
.ph{aspect-ratio:16/9;border:1px dashed var(--line-str);border-radius:var(--r-sm);
  display:grid;place-items:center;gap:var(--s2);color:var(--ink-4);background:var(--surface);
  text-align:center;padding:var(--s4)}
.ph span{font-size:12px;line-height:1.6}
.ph em{font-style:normal;font-size:10.5px;color:var(--ink-4);opacity:.7}

/* ============ 空状態 ============ */
.empty{text-align:center;padding:var(--s9) var(--s4);color:var(--ink-3)}
.empty h3{font-size:16px;color:var(--ink-2);margin-bottom:var(--s2)}
.empty p{font-size:13.5px;line-height:1.8}

/* ============ フッター ============ */
.ftr{border-top:1px solid var(--line);margin-top:var(--s9);padding:var(--s7) 0 var(--s6);
  background:var(--surface)}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6);margin-bottom:var(--s6)}
@media(max-width:760px){ .ftr-grid{grid-template-columns:1fr 1fr;gap:var(--s5)} }
.ftr h4{font-size:11.5px;color:var(--ink-4);letter-spacing:.14em;margin-bottom:var(--s3)}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ftr ul a{font-size:13px;color:var(--ink-3);transition:.15s}
.ftr ul a:hover{color:var(--gold)}
.ftr-btm{border-top:1px solid var(--line);padding-top:var(--s4);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-4);line-height:1.8}

/* ============ ユーティリティ ============ */
.row{display:flex;align-items:center;gap:var(--s3)}
.col{display:flex;flex-direction:column}
.mt-2{margin-top:var(--s2)} .mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)} .mb-4{margin-bottom:var(--s4)} .mb-5{margin-bottom:var(--s5)}
.gap-2{gap:var(--s2)} .gap-4{gap:var(--s4)}
.ml-auto{margin-left:auto}
.center{text-align:center}
.hide{display:none!important}
@media(max-width:640px){ .hide-sm{display:none!important} }

/* モーションを減らす設定の人に配慮 */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}