/* e-life サイト
   土台＝無印ミニマル（C）＋エディトリアル（D）／正典＝elife/DESIGN.md・design/DESIGN.md
   配色：クリーム地・メイン=オレンジ #EA5E2A・締め=ネイビー #1B3A5B・見出し=明朝
   禁じ手チェック済み：原色ベタ塗りなし／純黒純白なし／余白広め／2書体まで／
                       本文は左寄せ（中央寄せは見出しとカードのみ）／影なし・角丸統一 */

:root{
  --bg:#F5F3EF;          /* 生成り。純白にしない */
  --surface:#FBFAF7;
  --ink:#333333;         /* 純黒にしない */
  --muted:#7A756B;
  --accent:#EA5E2A;      /* e-life オレンジ */
  --navy:#1B3A5B;        /* 締め色 */
  --line:#E3DED4;
  --radius:4px;
  --leading:1.9;
  --wrap:720px;          /* 本文の読みやすい幅 */
  --font-head:"Noto Serif JP","游明朝",YuMincho,serif;
  --font-body:"Noto Sans JP","Hiragino Sans",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:var(--leading);
  font-size:16px; letter-spacing:.02em;
}
img{max-width:100%; height:auto}
a{color:var(--navy)}
a:hover{color:var(--accent)}

/* 中央寄せの器。本文そのものは左寄せのまま（禁じ手5） */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ── ヘッダー ───────────────────────── */
.site-head{border-bottom:1px solid var(--line); background:var(--surface)}
.head-inner{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap}
.brand{text-decoration:none; display:flex; align-items:baseline; gap:10px}
.brand-name{font-family:var(--font-head); font-size:22px; font-weight:700;
  color:var(--navy); letter-spacing:.04em}
.brand-tag{font-size:12px; color:var(--muted)}
.nav{display:flex; gap:20px; font-size:14px}
.nav a{text-decoration:none}

/* ── トップのヒーロー ─────────────────── */
.hero{background:var(--surface); border-bottom:1px solid var(--line);
  padding:72px 0 64px; text-align:center}
.hero-lead{margin:0 0 14px; font-size:13px; color:var(--accent); letter-spacing:.12em}
.hero-title{margin:0 0 22px; font-family:var(--font-head); font-weight:700;
  font-size:30px; line-height:1.6; color:var(--navy)}
.hero-body{margin:0; color:var(--muted); font-size:15px}

/* ── 記事 ──────────────────────────── */
.article{padding:56px 20px 24px}
.article-head{margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.date{display:block; margin-bottom:10px; font-size:13px; color:var(--muted);
  letter-spacing:.08em}
.article-head h1{margin:0; font-family:var(--font-head); font-weight:700;
  font-size:27px; line-height:1.6; color:var(--navy)}

.article-body{text-align:left}          /* 本文は必ず左寄せ */
.article-body h2{margin:56px 0 20px; padding-bottom:10px;
  border-bottom:1px solid var(--line); font-family:var(--font-head);
  font-size:21px; font-weight:700; color:var(--navy); line-height:1.6}
.article-body h3{margin:40px 0 14px; font-family:var(--font-head);
  font-size:18px; font-weight:500; color:var(--navy)}
.article-body p{margin:0 0 1.6em}
.article-body ul,.article-body ol{margin:0 0 1.6em; padding-left:1.4em}
.article-body li{margin-bottom:.5em}
.article-body img{display:block; margin:2em auto; border-radius:var(--radius)}
.article-body blockquote{margin:2em 0; padding:4px 0 4px 20px;
  border-left:2px solid var(--accent); color:var(--muted)}
.article-body table{width:100%; border-collapse:collapse; margin:2em 0; font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line); padding:10px 12px;
  text-align:left}
.article-body th{background:var(--surface); font-weight:500}
.article-body code{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:2px 6px; font-size:.92em}
.article-body pre{overflow-x:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.article-body pre code{border:0; padding:0; background:none}
/* 横に広いものはページ全体を横スクロールさせない */
.article-body table,.article-body pre{max-width:100%}

/* ── カード一覧 ────────────────────── */
.section-title{margin:56px 0 24px; font-family:var(--font-head); font-size:20px;
  font-weight:700; color:var(--navy); text-align:center}
.card-list{list-style:none; margin:0 0 40px; padding:0; display:grid; gap:14px}
.card a{display:block; padding:20px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink)}
.card a:hover{border-color:var(--accent)}
.card-date{display:block; font-size:12px; color:var(--muted); letter-spacing:.08em}
.card-title{display:block; margin:6px 0; font-family:var(--font-head);
  font-size:17px; font-weight:500; color:var(--navy); line-height:1.6}
.card-desc{display:block; font-size:14px; color:var(--muted); line-height:1.8}

.more{text-align:center; margin:0 0 64px}
.more a{font-size:14px}

/* ── ページ送り ────────────────────── */
.pager{display:flex; align-items:center; justify-content:center; gap:22px;
  margin:0 0 64px; font-size:14px}
.pager-now{color:var(--muted)}

/* ── 関連記事 ─────────────────────── */
.related{padding:8px 20px 24px}
.related h2{margin:48px 0 20px; padding-top:32px; border-top:1px solid var(--line);
  font-family:var(--font-head); font-size:17px; font-weight:500; color:var(--navy)}

/* ── フッター ─────────────────────── */
.site-foot{margin-top:64px; padding:40px 0 48px; border-top:1px solid var(--line);
  background:var(--surface); text-align:center}
.foot-brand{margin:0 0 16px; font-family:var(--font-head); color:var(--navy); font-size:15px}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  font-size:13px; margin-bottom:20px}
.foot-nav a{text-decoration:none}
.copy{margin:0; font-size:12px; color:var(--muted)}

/* ── スマホ ───────────────────────── */
@media(max-width:600px){
  .hero{padding:52px 0 44px}
  .hero-title{font-size:23px}
  .article{padding-top:36px}
  .article-head h1{font-size:22px}
  .article-body h2{font-size:19px; margin-top:44px}
  .nav{gap:14px; font-size:13px}
}

/* ══ トップページ（設計図 elife/strategy/hp-redesign-blueprint-2026-07.md 5.★確定レイアウト）══ */

/* ボタン。差し色はオレンジ1色に絞る（禁じ手1） */
.btn{display:inline-block; padding:13px 26px; border-radius:var(--radius);
  text-decoration:none; font-size:15px; line-height:1}
.btn-primary{background:var(--accent); color:#FBFAF7}
.btn-primary:hover{background:#d1501f; color:#FBFAF7}
.btn-ghost{border:1px solid var(--line); color:var(--navy); background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}

/* ① 共感ヒーロー */
.hero-inner{display:flex; align-items:center; gap:40px; text-align:left}
.hero-text{flex:1 1 auto; min-width:0}
.hero-photo{flex:0 0 200px; margin:0}
.hero-photo img{width:200px; height:200px; object-fit:cover; border-radius:50%;
  border:1px solid var(--line)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0}

/* ② 橋渡し */
.bridge{padding:56px 0; text-align:center}
.bridge-copy{margin:0 0 12px; font-family:var(--font-head); font-size:22px;
  line-height:1.8; color:var(--navy)}
.bridge-note{margin:0; font-size:14px; color:var(--muted)}

/* ③ ジャーニーマンガ＝横スワイプのコマ送り
   縦にそのまま流し込むとページが破綻するので、横スクロール＋スナップで見せる。
   JSは使わない（CSSだけで動くほうが軽く、壊れにくい） */
.journey{padding:8px 0 56px}
.journey-hint{margin:-12px 0 20px; text-align:center; font-size:13px; color:var(--muted)}
.manga-strip{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 20px 16px; -webkit-overflow-scrolling:touch}
.manga-koma{flex:0 0 auto; width:260px; margin:0; scroll-snap-align:center}
.manga-koma img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:var(--radius)}
.manga-koma figcaption{margin-top:8px; text-align:center; font-size:12px; color:var(--muted)}

/* ④ 世界観 */
.values{padding:8px 0 56px}
.value-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.value-list li{padding:20px 22px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); font-size:15px; color:var(--muted); line-height:1.9}
.value-head{display:block; margin-bottom:6px; font-family:var(--font-head);
  font-size:17px; color:var(--navy)}

/* ⑤ ジャンル俯瞰チップ。色は各ジャンルの識別のみに使い、面で塗らない */
.chip-list{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap;
  gap:10px; justify-content:center}
.chip{position:relative; padding:10px 16px 10px 30px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); font-size:14px}
.chip::before{content:""; position:absolute; left:14px; top:50%; width:8px; height:8px;
  margin-top:-4px; border-radius:50%; background:var(--chip)}
.chip span{margin-left:8px; font-size:11px; color:var(--muted)}

/* ⑥ 教科書 */
.textbook{padding:56px 0; background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center}
.textbook-body{margin:0 0 24px; color:var(--muted); font-size:15px}
.textbook .section-title{margin-top:0}

/* ⑧ メルマガ帯 */
.newsletter{margin-top:56px; padding:52px 0; background:var(--navy); text-align:center}
.newsletter h2{margin:0 0 10px; font-family:var(--font-head); font-size:20px;
  font-weight:500; color:#FBFAF7}
.newsletter p{margin:0 0 20px; color:#C7D2DD; font-size:14px}
.newsletter p:last-child{margin:0}

@media(max-width:600px){
  .hero-inner{flex-direction:column-reverse; gap:24px; text-align:center}
  .hero-cta{justify-content:center}
  .hero-photo{flex:none}
  .hero-photo img{width:132px; height:132px}
  .bridge-copy{font-size:18px}
  .manga-koma{width:74vw}
}