/* コストラボ（cost-lab.jp）— ポータル版（2026-08-16 転換 PR2）。
 * デザイン方針は商品まとめ時代の「研究所のノート」を踏襲する:
 * 白・薄いグレー基調、落ち着いたブルー/グリーンのアクセント、カード型、スマホファースト。
 * 影は使わない（1px罫線＋角丸8px）。アクセント色の面積は全体の5%以下。派手・ポップは避ける。
 * ダークモードはスコープ外（実装しない）。 */

:root{
  --bg:#FFFFFF;        /* ベース */
  --section:#F7F8FA;   /* セクション背景・カード地 */
  --line:#E5E7EB;      /* 罫線 */
  --line-strong:#D3D8DF; /* ホバー時にわずかに濃くなる罫線 */
  --fg:#1F2328;        /* 本文（純黒は使わない） */
  --muted:#6B7280;     /* 補助テキスト */
  --accent:#2563EB;    /* アクセント主：リンク・CTA（沈んだブルー） */
  --accent-weak:#EFF4FE;
  --green:#10715C;     /* アクセント副：判定・バッジ用（深いグリーン） */
  --green-weak:#E7F1EE;
  --maxw:880px;
  --radius:8px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ============ ヘッダー（罫線1本のみ・影なし） ============ */
.site-header{background:var(--bg); border-bottom:1px solid var(--line)}
.site-header .wrap{min-height:56px; display:flex; align-items:center; gap:18px; padding-top:8px; padding-bottom:8px}
.brand a{display:flex; align-items:center; gap:8px; color:var(--fg)}
.brand a:hover{text-decoration:none}
.brand .logo{font-size:22px; line-height:1}
.brand .name{font-size:18px; font-weight:700; letter-spacing:.01em}

/* ============ ヒーロー ============ */
.hero{padding:44px 0 30px; border-bottom:1px solid var(--line)}
.hero h1{font-size:28px; line-height:1.45; font-weight:700; margin:0 0 14px; letter-spacing:-.02em}
.hero p.lead{color:var(--muted); font-size:16px; margin:0; max-width:60ch}
br.sp{display:none}
@media (max-width:600px){
  .hero h1{font-size:23px}
  br.sp{display:inline}
}

/* ============ セクション・カード ============ */
.section{padding:36px 0}
.section-head{margin:0 0 18px}
.section-head h2{font-size:19px; font-weight:700; margin:0; letter-spacing:-.01em}

.grid{display:grid; gap:20px; grid-template-columns:repeat(2, 1fr)}
@media (max-width:640px){ .grid{grid-template-columns:1fr} }

.card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--section); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; color:var(--fg);
}
a.card:hover{text-decoration:none; border-color:var(--line-strong)}
a.card:hover h3{color:var(--accent)}
.card-emoji{font-size:26px; line-height:1}
.card h3{font-size:17px; font-weight:700; margin:0; letter-spacing:-.01em}
.card p{margin:0; font-size:14.5px; color:var(--muted)}
.card-cta{margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--accent)}
.card-cta.muted{color:var(--muted); font-weight:500}
.card-soon{opacity:.75}

/* ============ 本文ページ（/keiba-project/ など） ============ */
.page{padding:36px 0 8px}
.page h1{font-size:24px; line-height:1.5; font-weight:700; margin:0 0 10px; letter-spacing:-.02em}
.page .pagelead{color:var(--muted); margin:0 0 8px; max-width:62ch}
.page h2{font-size:19px; font-weight:700; margin:36px 0 12px; padding-top:28px; border-top:1px solid var(--line); letter-spacing:-.01em}
.page h3{font-size:16px; font-weight:700; margin:20px 0 8px}
.page p{margin:0 0 12px; max-width:66ch}
.page ul{margin:0 0 12px; padding-left:22px}
.page li{margin:0 0 6px}
.note{font-size:13.5px; color:var(--muted)}
code{font-size:.9em; background:var(--section); padding:.1em .35em; border-radius:4px}
.crumb{font-size:13.5px; margin:20px 0 0}
.crumb a{color:var(--muted)}

/* 判定バッジ（結論の言い切りに使う。色面は最小限） */
.badge{display:inline-block; font-size:13px; font-weight:600; padding:2px 10px; border-radius:999px}
.badge.no{background:var(--section); border:1px solid var(--line-strong); color:var(--fg)}
.badge.plus{background:var(--green-weak); color:var(--green)}

/* ============ 表（スマホは横スクロール） ============ */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px}
table{border-collapse:collapse; width:100%; font-size:14px; line-height:1.6; white-space:nowrap}
th,td{border:1px solid var(--line); padding:7px 10px; text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--section); font-weight:600}
td b{font-feature-settings:"tnum" 1}

/* ============ 記事（/articles/） ============ */
.article-list{list-style:none; margin:0 0 12px; padding:0}
.article-item{border:1px solid var(--line); border-radius:var(--radius); background:var(--section);
  padding:16px 18px; margin:0 0 14px}
.article-meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin:0 0 6px}
.article-date{font-feature-settings:"tnum" 1}
.article-title{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.article-desc{margin:6px 0 0; font-size:14px; color:var(--muted); max-width:66ch}
.article-note{margin:32px 0 0; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--section)}
.article-note .note{margin:0 0 6px}
.article-note .note:last-child{margin:0}
.article-nav{display:flex; justify-content:space-between; gap:12px; margin:28px 0 0;
  padding-top:16px; border-top:1px solid var(--line); font-size:14px}
.article-nav-next{margin-left:auto}

/* ============ フッター ============ */
.site-footer{margin-top:28px; border-top:1px solid var(--line); padding:22px 0 34px}
.site-footer .disclaimer{font-size:13px; color:var(--muted); margin:0 0 10px; max-width:66ch}
.site-footer .meta{font-size:13px; color:var(--muted)}