/* =============================================================
  FILE: css/style.css
  胡子先生 Web連載「授業準備と評価のアップデート」
  〜バックワードデザインで創る生徒主体の授業〜
  学びラボ（中学校英語 SUNSHINE）シリーズ共通テーマ
============================================================= */

/* =============================
  VARIABLES & BASE
============================= */
:root{
  --bg:#fffafb;
  --text:#4a3f3b;             /* やわらかいブラウングレー（イラストの線画色） */
  --muted:#6f5f56;            /* くすみベージュグレー（コントラスト比 AA 対応で濃色化） */
  --line:#f2e4e2;             /* 枠線（淡いピンクベージュ） */
  --accent:#d98a90;           /* ダスティローズ（イラストの口紅・頬の色） */
  --accent-deep:#a8565e;      /* 濃いローズ（リンク/強調。コントラスト比 AA 対応で濃色化） */
  --accent-sky:#a89a8d;       /* さし色のグレージュ（スーツの色） */
  --accent-yl:#f3d3cf;        /* やわらかいブラッシュ（マーカー） */
  --pink:#fce8e8;             /* イラスト背景の淡いピンク */
  --cream:#faf2ec;            /* ベージュクリーム */
  --shadow:0 10px 30px rgba(176,124,124,.12);
  --radius:20px;
  --radius-sm:14px;
}

html{ box-sizing:border-box; scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
              "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height:1.95; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }

/* 見出し・ロゴ系の表示フォント */
.brand-font,
.prose h2, .prose h3,
.hero-title, .series-badge, .summary-title{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
}

/* =============================
  LAYOUT
============================= */
.container{
  width:min(960px, calc(100% - 36px));
  margin-inline:auto;
}
.container--fit{
  width:min(1000px, calc(100% - 36px));
  margin:0 auto; text-align:center;
}

/* やわらかな背景の光（装飾） */
.bg-glow{
  position:fixed; z-index:-1; pointer-events:none; inset:0; overflow:hidden;
}
.bg-glow::before,
.bg-glow::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px);
}
.bg-glow::before{
  width:520px; height:520px; top:-160px; right:-120px;
  background:radial-gradient(circle, rgba(252,232,232,.85), transparent 70%);
}
.bg-glow::after{
  width:440px; height:440px; bottom:-160px; left:-140px;
  background:radial-gradient(circle, rgba(250,242,236,.85), transparent 70%);
}

/* Header */
.site-header{
  background:#fff; border-bottom:1px solid var(--line);
}
.site-header .container--fit{ padding:14px 18px; }
.brand{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
}
.brand img{ height:38px; width:auto; display:block; }

/* =============================
  BREADCRUMB
============================= */
.breadcrumb{
  position:sticky; top:0; z-index:9;
  background:rgba(255,250,244,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); font-size:.86em;
}
.breadcrumb .container{ padding:9px 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.breadcrumb li{ color:var(--muted); }
.breadcrumb li+li::before{ content:"›"; margin:0 7px; color:var(--accent); }
.breadcrumb a{ color:var(--accent-deep); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* =============================
  HERO
============================= */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 85% 0%, var(--pink) 0%, transparent 55%),
    linear-gradient(180deg, #fdeef0 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero .container{
  display:grid; grid-template-columns:1.35fr .9fr; gap:28px; align-items:center;
  padding:46px 0 40px;
}
.series-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--accent);
  color:var(--accent-deep); font-weight:700; font-size:.82em;
  padding:6px 14px; border-radius:999px; box-shadow:var(--shadow);
}
.series-badge .vol{
  background:var(--accent-deep); color:#fff; border-radius:999px;
  padding:1px 9px; font-size:.92em; letter-spacing:.03em;
}
.hero-eyebrow{
  margin:18px 0 6px; color:var(--accent-deep); font-weight:700; font-size:.95em;
  letter-spacing:.02em;
}
.vol-badge{
  display:inline-block; margin:0 0 10px;
  background:var(--accent-deep); color:#fff; font-weight:700;
  font-size:.92em; letter-spacing:.03em; border-radius:999px;
  padding:3px 16px;
}
.hero-title{
  margin:0; font-size:clamp(28px,4.6vw,44px); line-height:1.32; font-weight:700;
  letter-spacing:.01em;
}
.hero-title .accent{
  background:linear-gradient(transparent 62%, var(--accent-yl) 0);
  padding:0 .08em;
}
.hero-sub{
  margin:16px 0 0; color:#5d544d; font-size:1.02em;
}
.hero-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  font-size:.92em; color:var(--muted);
}
.hero-meta .author{
  display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:700;
}
.hero-meta .author::before{ content:"✎"; color:var(--accent); }

.hero-figure{ position:relative; margin:0; text-align:center; }
.hero-figure .disc{
  position:absolute; inset:auto 0 8% 0; margin:auto; width:84%; aspect-ratio:1;
  background:radial-gradient(circle, var(--pink) 0%, transparent 70%); z-index:0;
}
.hero-figure img{
  position:relative; z-index:1; width:min(320px,80%);
  filter:drop-shadow(0 16px 26px rgba(176,103,52,.18));
}

/* 入場アニメ（読み込み時に上品に立ち上がる） */
.reveal{ opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s } .d2{ animation-delay:.18s } .d3{ animation-delay:.31s }
.d4{ animation-delay:.44s } .d5{ animation-delay:.57s }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
}

/* =============================
  ARTICLE BODY
============================= */
.article{ padding:40px 0 64px; }
.prose{ font-size:18px; }
.prose p{ text-indent:1em; margin:1em 0; }
.prose .no-indent{ text-indent:0; }

/* リード文 */
.lead{
  text-indent:0; font-size:1.06em; color:#5a4d47; font-weight:500;
  border-left:5px solid var(--accent); background:#fdeef0;
  padding:16px 20px; border-radius:0 12px 12px 0; margin:0 0 8px;
}

/* 見出し */
.prose h2{
  margin:2.4em 0 .9em; font-size:clamp(22px,3vw,30px); line-height:1.45; font-weight:700;
  position:relative; padding:0 0 .35em 0; clear:both;
}
.prose h2::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:4px;
  background:linear-gradient(90deg, var(--accent) 0 64px, var(--line) 64px);
  border-radius:4px;
}
.sec-no{
  display:inline-grid; place-items:center; width:1.7em; height:1.7em;
  margin-right:.5em; border-radius:50%;
  background:var(--accent-deep); color:#fff; font-size:.62em; vertical-align:.22em;
}
.prose h3{
  margin:2em 0 .7em; font-size:clamp(18px,2.3vw,22px); line-height:1.5;
  font-weight:700; color:#3a322c;
}
.prose h3 .wave{
  color:var(--accent-sky);
}
.prose h2+.split, .prose h3+.split{ text-indent:0; }

/* 強調マーカー */
.mark{ background:linear-gradient(transparent 58%, rgba(243,180,184,.55) 0); font-weight:700; }
.strong{ color:var(--accent-deep); font-weight:700; }

/* リンク */
.prose a, .site-footer a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }
a:focus-visible{ outline:3px solid rgba(217,138,144,.5); outline-offset:2px; border-radius:6px; }

/* =============================
  英文の引用（生徒・先生のことば）
============================= */
.quote{
  text-indent:0; margin:18px 0; padding:14px 18px 14px 46px;
  background:var(--cream); border:1px solid #ece0d4; border-radius:12px;
  position:relative; font-size:1.0em; color:#6b5c52; line-height:1.7;
}
.quote::before{
  content:"\201C"; position:absolute; left:12px; top:2px;
  font-family:Georgia, serif; font-size:2.4em; color:var(--accent-sky); opacity:.6;
}
.quote .who{ display:block; margin-top:6px; font-size:.82em; color:var(--muted); font-style:normal; }
.quote--teacher{ background:#fdeef0; border-color:#f3d9da; color:#8a565c; }
.quote--teacher::before{ color:var(--accent); }

/* 和訳（引用の下に添える） */
.quote .ja{ display:block; margin-top:4px; font-size:.86em; color:#7a6560; }

/* 生徒のつぶやきを並べるグループ */
.voices{ display:grid; gap:10px; margin:18px 0; clear:both; }

/* 本文中の小さな箇条書き（〜から逆算する 等） */
.inline-list{ margin:6px 0 14px; padding-left:0; list-style:none; }
.inline-list li{
  text-indent:0; position:relative; padding-left:1.5em; margin:.3em 0; font-weight:700; color:#5a4d47;
}
.inline-list li::before{
  content:"›"; position:absolute; left:.2em; color:var(--accent); font-weight:700;
}

/* 4つの意図（理由リスト） */
.reasons{ list-style:none; counter-reset:r; padding:0; margin:22px 0; display:grid; gap:14px; }
.reasons li{
  counter-increment:r; position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 18px 16px 18px; box-shadow:var(--shadow);
  text-indent:0;
}
.reasons li b{
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
  font-family:"Zen Maru Gothic",sans-serif; color:#5a4d47; font-size:1.04em;
}
.reasons li b::before{
  content:counter(r); flex-shrink:0;
  display:inline-grid; place-items:center; width:28px; height:28px;
  color:#fff; background:var(--accent-deep); border-radius:50%;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:.95em;
}
.reasons li span{ display:block; font-size:.95em; color:#6b5c52; }

/* 先生の表情アクセント（イラスト：思案・応援・納得） */
.pose-accent{
  float:right; width:118px; margin:0 0 14px 22px; text-align:center;
}
.pose-accent .frame{
  width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle, var(--pink) 0%, #fff 78%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  overflow:hidden; display:grid; place-items:end center;
}
.pose-accent .frame img{ width:104%; height:auto; }
.pose-accent figcaption{ margin-top:6px; font-size:.74em; color:var(--muted); }

/* =============================
  図版
============================= */
.figure{
  margin:30px 0; border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; background:#fff; box-shadow:var(--shadow);
}
.figure img{ display:block; width:100%; }
.figure figcaption{
  padding:10px 12px; font-size:.84em; color:var(--muted); text-align:center;
  background:#fffaf3; border-top:1px solid var(--line);
}
.figure--plain{ border:0; box-shadow:none; background:none; }
.figure--center{ margin-left:auto; margin-right:auto; max-width:fit-content; }

/* ステップ図のような横長の重要図版 */
.figure--hero-fig{ border:0; box-shadow:0 14px 40px rgba(176,103,52,.14); border-radius:var(--radius); }

/* Split：テキスト＋図 横並び */
.split{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; margin:24px 0; }
.split-figure{ margin:0; }

/* =============================
  ステップ・カード（5ステップの要約）
============================= */
.steps{
  list-style:none; counter-reset:step; padding:0; margin:24px 0;
  display:grid; gap:14px;
}
.steps li{
  counter-increment:step; position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px 16px 70px; box-shadow:var(--shadow);
  transition:box-shadow .2s ease;
}
.steps li:hover{ box-shadow:0 6px 16px rgba(176,103,52,.10); }
.steps li::before{
  content:counter(step); position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--accent-deep); color:#fff; border-radius:50%;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1.15em;
  box-shadow:0 4px 10px rgba(217,138,144,.45);
}
.steps li b{ display:block; font-size:1.04em; color:#3a322c; }
.steps li span{ font-size:.92em; color:#6b625b; }

/* =============================
  先生のひとこと（teacher voice）
============================= */
.teacher-voice{
  display:flex; align-items:center; gap:22px;
  background:linear-gradient(135deg,#fdeef0,#faf2ec);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:34px 0; box-shadow:var(--shadow);
}
.teacher-voice .pic{
  flex-shrink:0; width:96px; height:96px; border-radius:50%;
  background:#fff; border:3px solid #fff; box-shadow:0 6px 16px rgba(176,103,52,.18);
  overflow:hidden; display:grid; place-items:center;
}
.teacher-voice .pic img{ width:118%; height:auto; }
.teacher-voice .tv-text{ margin:0; }
.teacher-voice .tv-text .label{
  display:inline-block; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  color:var(--accent-deep); font-size:.9em; margin-bottom:2px;
}
.teacher-voice .tv-text p{ margin:0; text-indent:0; font-size:.98em; line-height:1.8; }

/* =============================
  まとめ・参考
============================= */
.summary{
  margin:44px 0; padding:24px 26px; border-radius:var(--radius);
  background:linear-gradient(135deg,#fdeef0,#faf2ec); border:1.5px solid #f1d8d6;
}
.summary .summary-title{
  margin:0 0 .6em; font-size:1.25em; font-weight:700; color:var(--accent-deep);
  display:flex; align-items:center; gap:10px;
}
.summary-title::before{ content:"⚓"; color:var(--accent); }
.summary p{ text-indent:0; }
.summary .next-hint{
  margin-top:14px; padding-top:14px; border-top:1px dashed #eccfce;
  font-size:.96em; color:#8a6f6c;
}

.references{ font-size:.9em; color:#5d544d; margin-top:40px; }
.ref-title{ font-weight:700; margin:0 0 .4em; }
.references ul{ padding-left:1.2em; margin:0; }

/* ナビ */
.divider{ border:0; height:1px; background:linear-gradient(90deg,var(--line),transparent); margin:40px 0 0; }
.article-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:26px; }
.article-nav a, .article-nav .disabled{
  display:inline-block; text-decoration:none; color:#3a322c; font-weight:700;
  padding:11px 18px; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  transition:.2s ease;
}
.article-nav a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.article-nav .disabled{ color:var(--muted); pointer-events:none; opacity:.55; }

/* =============================
  FOOTER
============================= */
.site-footer{ border-top:1px solid var(--line); background:#fdeef0; text-align:center; }
.site-footer .container{ padding:24px 0; color:var(--muted); font-size:.9em; }
.site-footer a{ color:var(--accent-deep); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.wb{ word-break:break-word; overflow-wrap:anywhere; }

/* =============================
  UTIL
============================= */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* =============================
  RESPONSIVE
============================= */
@media (max-width:860px){
  .hero .container{ grid-template-columns:1fr; text-align:center; padding:34px 0 30px; }
  .hero-meta{ justify-content:center; }
  .hero-figure{ order:-1; }
  .hero-figure img{ width:min(220px,56%); }
  .split{ grid-template-columns:1fr; }
  /* 中間幅で本文が floatの脇に狭く回り込むのを防ぐため、この幅から中央寄せに切り替える */
  .pose-accent{ float:none; width:96px; margin:4px auto 10px; }
  .pose-accent .frame{ width:96px; height:96px; }
}
@media (max-width:600px){
  .prose{ font-size:16.5px; }
  .teacher-voice{ flex-direction:column; text-align:center; }
  .teacher-voice .tv-text{ text-align:left; }
}

/* =============================
  図版ズームリンク（タップ拡大）
============================= */
.fig-zoom{ display:block; }
.fig-zoom img{ display:block; width:100%; }
.fig-zoom-hint{
  display:inline-block; margin-left:8px; font-size:.8em;
  color:var(--accent-deep); background:rgba(217,138,144,.12);
  border:1px solid var(--line); border-radius:999px;
  padding:1px 10px; vertical-align:middle;
}

@media print{
  .site-header,.breadcrumb,.article-nav,.bg-glow{ display:none; }
  body{ color:#000; background:#fff; }
  .figure,.steps li,.summary{ box-shadow:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.85em; }
}