/* ============================================================
   Weft-News コラム デザイン（モバイル優先 / LINE内ブラウザ最適化）
   紙#F4F6F7 × 墨#16222E × 藍#29517A × 藍鼠#67819B × 琥珀#C9862B
   見出し=Noto Serif JP / 本文=Noto Sans JP / 数字=tabular
   毎日ニュース"藍"テーマ(reports/_style3.css)をスマホ縦読み向けに再設計
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600;700;900&display=swap');

:root{
  --paper:#F4F6F7; --card:#FFFFFF; --ink:#16222E; --sub:#40515F;
  --ai:#29517A; --ainezu:#67819B; --kohaku:#C9862B;
  --rule:#E3E8EB; --rule-dark:#C3CDD4; --wash:rgba(41,81,122,.06);
  --kohaku-wash:rgba(201,134,43,.10);
  --econ:#7A5A29; --econ-wash:rgba(122,90,41,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-weight:400; line-height:1.85; font-size:16px;
  -webkit-text-size-adjust:100%;
}
.serif{font-family:"Noto Serif JP","Hiragino Mincho ProN",serif}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
a{color:var(--ai);text-decoration:none}
.wrap{max-width:600px;margin:0 auto;padding:0 20px 56px}

/* ── 共通ヘッダー（ブランド帯） ── */
.brandbar{
  max-width:600px;margin:0 auto;padding:14px 20px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rule);
}
.brandbar .logo{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:17px;letter-spacing:.02em;
}
.brandbar .logo b{color:var(--ai)}
.brandbar .date{color:var(--ainezu);font-size:12px}

/* ── バッジ ── */
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;line-height:1;
  padding:5px 9px;border-radius:4px;letter-spacing:.02em;
}
.badge.cat{background:var(--wash);color:var(--ai)}
.badge.cat.econ{background:var(--econ-wash);color:var(--econ)}
.badge.fire{background:var(--kohaku-wash);color:var(--kohaku);margin-left:6px}

/* ============ 一覧（index） ============ */
.masthead{padding:26px 0 18px;border-bottom:3px double var(--rule-dark)}
.masthead .kicker{color:var(--ainezu);font-size:12px;letter-spacing:.18em}
.masthead h1{
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:29px;line-height:1.35;margin:8px 0 6px;letter-spacing:.01em;
}
.masthead .lead{color:var(--sub);font-size:14px}
.cardlist{display:flex;flex-direction:column;gap:14px;padding-top:20px}
.newscard{
  display:block;background:var(--card);border:1px solid var(--rule);
  border-radius:14px;padding:16px 16px 14px;
  box-shadow:0 1px 2px rgba(22,34,46,.04);transition:transform .12s;
}
.newscard:active{transform:scale(.99)}
.newscard .top{display:flex;align-items:center;margin-bottom:9px}
.newscard h2{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:17.5px;line-height:1.5;margin:0 0 8px;color:var(--ink);
}
.newscard .sum{color:var(--sub);font-size:13.5px;line-height:1.7;margin-bottom:11px}
.newscard .foot{display:flex;align-items:center;justify-content:space-between}
.newscard .src{color:var(--ainezu);font-size:11.5px}
.newscard .go{color:var(--ai);font-size:13px;font-weight:700}

/* ============ コラム詳細 ============ */
.col-head{padding:24px 0 18px;border-bottom:1px solid var(--rule)}
.col-head .tags{margin-bottom:14px}
.col-head h1{
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:25px;line-height:1.5;margin:0 0 14px;letter-spacing:.005em;
  word-break:auto-phrase;
}
.col-head .meta{color:var(--ainezu);font-size:12.5px}
.col-head .meta .dot{margin:0 7px;opacity:.5}

.hook{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:18px;line-height:1.85;color:var(--ai);
  padding:22px 0 6px;
}

.sec{padding:22px 0 4px}
.sec > h3{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--ainezu);
  margin:0 0 14px;display:flex;align-items:center;gap:9px;
}
.sec > h3::before{content:"";width:20px;height:2px;background:var(--ai);display:inline-block}

/* 要点 */
ul.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
ul.points li{position:relative;padding-left:20px;font-size:15px;line-height:1.8}
ul.points li::before{
  content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--ai);
}

/* これまでの流れ（連鎖タイムライン） */
.flow{position:relative;margin:0;padding-left:22px}
.flow::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--rule-dark)}
.flow .step{position:relative;padding:0 0 16px}
.flow .step:last-child{padding-bottom:0}
.flow .step::before{
  content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:2.5px solid var(--ainezu);
}
.flow .step.now::before{border-color:var(--kohaku);background:var(--kohaku)}
.flow .step .lb{font-weight:700;font-size:13px;color:var(--ai);margin-bottom:2px}
.flow .step.now .lb{color:var(--kohaku)}
.flow .step .tx{font-size:14px;line-height:1.75;color:var(--sub)}

/* なぜ重要か */
.body-tx{font-size:15px;line-height:1.9;color:var(--ink)}

/* 見立て */
.outlook{
  background:var(--kohaku-wash);border-left:3px solid var(--kohaku);
  border-radius:0 10px 10px 0;padding:16px 18px;margin-top:6px;
}
.outlook .lb{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--kohaku);margin-bottom:7px}
.outlook .tx{font-size:15px;line-height:1.85}

.disclaimer{color:var(--ainezu);font-size:11.5px;line-height:1.7;margin-top:18px}

/* 出典ボタン */
.source-btn{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:24px;padding:15px 18px;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;
}
.source-btn .l{font-size:12px;color:var(--ainezu)}
.source-btn .s{font-size:14px;font-weight:700;color:var(--ink);margin-top:2px}
.source-btn .arrow{color:var(--ai);font-size:20px}

/* 戻る / フッター */
.backrow{padding-top:26px}
.backrow a{font-size:13.5px;font-weight:700}
.foot-brand{
  margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);
  color:var(--ainezu);font-size:11.5px;line-height:1.7;text-align:center;
}
.foot-brand .lg{font-family:"Noto Serif JP",serif;font-weight:900;color:var(--sub);font-size:13px}

/* ============ v2: 開閉セクション（アコーディオン）＋日付 ============ */
/* 開く前は見出し＋teaser、タップで本文。JS不要の <details> */
.acc{border-top:1px solid var(--rule)}
.acc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:17px 0 15px;
}
.acc > summary::-webkit-details-marker{display:none}
.acc .s-head{display:flex;flex-direction:column;gap:5px;min-width:0}
.acc .s-title{
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ainezu);
  display:flex;align-items:center;gap:9px;
}
.acc .s-title::before{content:"";width:18px;height:2px;background:var(--ai);display:inline-block}
.acc .s-teaser{font-size:14.5px;color:var(--ink);line-height:1.6}
.acc .chev{
  flex:0 0 auto;color:var(--ai);font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:opacity .2s;
}
.acc .chev::after{content:"⌄";font-size:15px;transition:transform .2s;display:inline-block;transform:translateY(-2px)}
.acc[open] .chev::after{transform:rotate(180deg) translateY(-1px)}
.acc[open] .chev .lbl{display:none}
.acc[open] .s-teaser{display:none}
.acc .s-body{padding:2px 0 20px}
.acc .s-body ul.points{margin:0}
.acc .s-body .body-tx{font-size:15px;line-height:1.9}

/* 日付チップ（これまでの流れ） */
.flow .step .when{
  display:inline-block;font-family:"Avenir Next Condensed","Avenir Next",sans-serif;
  font-weight:600;font-size:11px;letter-spacing:.04em;color:var(--ai);
  background:var(--wash);padding:2px 8px;border-radius:4px;margin-bottom:5px;
}
.flow .step.now .when{color:var(--kohaku);background:var(--kohaku-wash)}

/* これまでの流れ: 先頭は常時表示、残りは「続きを見る」で展開 */
.flowlead{font-size:14.5px;color:var(--ink);line-height:1.7;margin:2px 0 16px}
.flow-more{margin-top:0}
.flow-more > summary{
  list-style:none;cursor:pointer;color:var(--ai);font-size:13.5px;font-weight:700;
  padding:8px 0 2px;display:inline-flex;align-items:center;gap:6px;margin-left:22px;
}
.flow-more > summary::-webkit-details-marker{display:none}
.flow-more > summary::after{content:"⌄";font-size:15px}
.flow-more[open] > summary{display:none}