/* ===== エネルギー動向 入試ネタ帳 共通スタイル ===== */
:root{
  --bg:#f4ecdc;          /* ベージュ地 */
  --bg2:#faf5ea;         /* カード地 */
  --ink:#23201a;         /* 濃い本文色 */
  --ink-soft:#4a443a;
  --accent:#1f6f5c;      /* 深緑 */
  --accent2:#b9521b;     /* アクセント橙 */
  --line:#d8ccb0;
  --quiz:#fff4e0;
  --quiz-line:#e0a955;
  --base: clamp(18px, .65vw + 14.5px, 22px);
  --bar-h: 52px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:var(--base);line-height:1.8;letter-spacing:.01em;
}
img{max-width:100%;height:auto;}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px);}

/* 上部バー（sticky） */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,4vw,28px);background:rgba(31,111,92,.97);color:#fff;
  font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.topbar b{font-weight:700;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar .barlinks{display:flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap;}
.topbar a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700;white-space:nowrap;}
.topbar a:hover{color:#d8f3e9;}

/* ヒーロー */
.hero{background:linear-gradient(135deg,#efe4c8,#e6d8b6);border-bottom:1px solid var(--line);
  padding:clamp(34px,6vw,64px) 0 clamp(30px,5vw,52px);}
.hero .kicker{font-size:clamp(14px,1.5vw,20px);letter-spacing:.14em;color:var(--accent2);font-weight:700;margin:0 0 12px;}
.hero .chap{font-size:clamp(19px,2.6vw,34px);color:var(--accent);font-weight:800;margin:0 0 6px;}
.hero h1{font-size:clamp(34px,6.4vw,86px);line-height:1.05;margin:0;font-weight:900;color:var(--ink);letter-spacing:-.01em;}
.hero .rule{width:min(420px,72%);height:8px;background:var(--accent);border-radius:5px;margin:20px 0 22px;}
.hero p.desc{font-size:clamp(15px,1.5vw,21px);max-width:46ch;color:var(--ink-soft);margin:.3em 0;}
.hero .src{font-size:clamp(12px,1.1vw,15px);color:var(--ink-soft);margin-top:22px;}
.hero .src a{color:var(--accent);font-weight:700;word-break:break-all;}

section.block{padding:clamp(30px,5vw,52px) 0;border-bottom:1px solid var(--line);}
h2.sec{font-size:clamp(23px,3vw,38px);color:var(--accent);margin:0 0 6px;font-weight:800;}
.sec-sub{color:var(--ink-soft);font-size:.84em;margin:0 0 24px;}

/* 3行サマリー */
.summary-list{list-style:none;padding:0;margin:0;display:grid;gap:16px;}
.summary-list li{background:var(--bg2);border-left:8px solid var(--accent);
  padding:16px 22px;border-radius:10px;box-shadow:0 2px 10px rgba(60,45,20,.07);}

/* 目次 */
.toc{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px 24px;}
.toc h2{font-size:clamp(18px,2vw,24px);color:var(--accent);margin:0 0 14px;font-weight:800;}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:36px;}
.toc li{margin:.3em 0;font-size:.86em;break-inside:avoid;}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.toc a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.toc .tno{color:var(--accent);font-weight:700;margin-right:.4em;font-variant-numeric:tabular-nums;}

/* 図セクション */
section.fig{padding:clamp(30px,4.5vw,50px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--bar-h) + 12px);}
.fig-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px;}
.fig-no{background:var(--accent);color:#fff;font-weight:700;font-size:.66em;
  padding:5px 12px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;}
.fig-title{font-size:clamp(21px,2.6vw,34px);font-weight:800;margin:0;line-height:1.3;}
.fig-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:start;}
.fig-img-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:0 4px 16px rgba(60,45,20,.1);text-align:center;position:sticky;top:calc(var(--bar-h) + 14px);}
.fig-img-wrap img{display:block;margin:0 auto;cursor:zoom-in;}
.fig-cap{font-size:.66em;color:var(--ink-soft);margin-top:8px;}
.zoom-hint{font-size:.62em;color:var(--accent);margin-top:2px;}
.img-ph{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:240px;background:#efe6d2;border:2px dashed var(--line);border-radius:10px;
  color:var(--ink-soft);font-size:.82em;text-align:center;padding:20px;gap:10px;line-height:1.5;}
.img-ph a{color:var(--accent);font-weight:700;word-break:break-all;}

.points{display:grid;gap:14px;}
.pt{background:var(--bg2);border-radius:12px;padding:14px 18px;border:1px solid var(--line);}
.pt h3{margin:0 0 6px;font-size:.82em;letter-spacing:.03em;display:flex;align-items:center;gap:8px;}
.pt.feat h3{color:#1f6f5c;}
.pt.cause h3{color:#9a5a13;}
.pt.mean h3{color:#7a2d8f;}
.pt ul{margin:0;padding-left:1.15em;}
.pt li{margin:.2em 0;font-size:.9em;line-height:1.6;}
.pt li b{color:var(--ink);}

/* 出題アイデア＋解答例 */
.quiz{margin-top:18px;background:var(--quiz);border:2px dashed var(--quiz-line);border-radius:12px;padding:16px 22px;}
.quiz h3{margin:0 0 8px;font-size:.9em;color:var(--accent2);display:flex;align-items:center;gap:8px;}
.quiz ul{margin:0;padding-left:1.15em;}
.quiz li{margin:.28em 0;font-size:.88em;line-height:1.55;}
.tag{display:inline-block;background:var(--accent2);color:#fff;font-size:.72em;
  padding:1px 8px;border-radius:6px;margin-right:6px;vertical-align:.08em;font-weight:700;}
.answer{margin-top:14px;border-top:1px dashed var(--quiz-line);padding-top:12px;}
.answer summary{cursor:pointer;font-size:.86em;font-weight:700;color:var(--accent);
  list-style:none;user-select:none;display:inline-block;
  background:#eaf5f0;border:1px solid #bfe0d4;border-radius:8px;padding:6px 14px;}
.answer summary::-webkit-details-marker{display:none;}
.answer summary::before{content:"▶ 解答例を表示";}
.answer[open] summary::before{content:"▼ 解答例を隠す";}
.answer ul{margin:12px 0 0;padding-left:1.15em;}
.answer li{margin:.32em 0;font-size:.86em;color:var(--ink-soft);line-height:1.6;}
.answer li b{color:var(--ink);}

/* まとめ */
.closing{background:linear-gradient(135deg,#23201a,#3a342a);color:#f4ecdc;}
.closing h2.sec{color:#7fd9c0;}
.closing .sec-sub{color:#cfc6b4;}
.closing .summary-list li{background:#2e2a22;border-color:#7fd9c0;color:#f4ecdc;}
footer.src-foot{font-size:.74em;color:#cfc6b4;margin-top:22px;line-height:1.7;}
footer.src-foot a{color:#bfe9d9;word-break:break-all;}

/* トップへ戻る */
#totop{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--accent);color:#fff;
  border:none;border-radius:50%;width:52px;height:52px;font-size:22px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s;}
#totop.show{opacity:.9;pointer-events:auto;}
#totop:hover{opacity:1;}

/* ライトボックス */
#lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,10,.93);padding:5vh 4vw;cursor:zoom-out;}
#lightbox.open{display:flex;}
#lightbox img{max-width:96vw;max-height:90vh;width:auto;height:auto;background:#fff;border-radius:6px;
  box-shadow:0 0 50px rgba(0,0,0,.6);transform-origin:0 0;transition:transform .12s ease;will-change:transform;
  touch-action:none;-webkit-user-drag:none;user-select:none;cursor:zoom-in;}
#lightbox img.zoomed{cursor:grab;}
#lightbox img.zoomed:active{cursor:grabbing;}
#lightbox .lb-close{position:fixed;top:14px;right:24px;color:#fff;font-size:40px;cursor:pointer;line-height:1;font-weight:300;z-index:112;}
#lightbox .lb-cap{position:fixed;bottom:16px;left:0;right:0;text-align:center;color:#f0ece2;font-size:15px;padding:0 16px;z-index:111;}
#lightbox .lb-tools{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:112;}
#lightbox .lb-tools button{min-width:48px;height:42px;border:none;border-radius:9px;background:rgba(255,255,255,.93);
  color:#23201a;font-size:18px;font-weight:800;cursor:pointer;padding:0 12px;box-shadow:0 2px 10px rgba(0,0,0,.35);}
#lightbox .lb-tools button:hover{background:#fff;}
#lightbox .lb-hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);color:#f0ece2;font-size:13px;
  opacity:.85;z-index:111;text-align:center;padding:0 14px;pointer-events:none;max-width:92vw;}

/* ===== INDEX（総合目次）専用 ===== */
.idx-chap{font-size:clamp(20px,2.4vw,30px);color:var(--accent);font-weight:800;margin:0 0 4px;
  display:flex;align-items:center;gap:12px;}
.idx-chap .num{background:var(--accent);color:#fff;border-radius:8px;padding:2px 12px;font-size:.8em;}
.idx-chap-sub{color:var(--ink-soft);font-size:.8em;margin:0 0 18px;}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.idx-card{display:block;text-decoration:none;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:0 2px 10px rgba(60,45,20,.07);transition:transform .15s,box-shadow .15s,border-color .15s;}
.idx-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(60,45,20,.16);border-color:var(--accent);}
.idx-card .sec-no{display:inline-block;background:var(--accent);color:#fff;font-size:.7em;font-weight:700;
  padding:3px 10px;border-radius:999px;margin-bottom:10px;}
.idx-card h3{margin:0 0 8px;font-size:1.02em;font-weight:800;line-height:1.35;}
.idx-card .meta{font-size:.76em;color:var(--ink-soft);}
.idx-card.coming{opacity:.55;pointer-events:none;}
.idx-card.coming .sec-no{background:#9b9384;}
.idx-card .badge-done{color:var(--accent);font-weight:700;}
/* INDEX：節カード（サブページ入れ子対応） */
.idx-card2{background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;box-shadow:0 2px 10px rgba(60,45,20,.07);margin-bottom:16px;}
.idx-card2-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.idx-card2-head .sec-no{display:inline-block;background:var(--accent);color:#fff;font-size:.7em;
  font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.idx-card2-head h3{margin:0;font-size:1.05em;font-weight:800;line-height:1.3;}
.idx-card2-head .cnt{font-size:.74em;color:var(--ink-soft);margin-left:auto;}
.subitems{display:flex;flex-wrap:wrap;gap:9px 10px;}
.subitems a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:.82em;
  transition:border-color .15s,transform .12s,box-shadow .12s;}
.subitems a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(60,45,20,.12);}
.subitems a i{font-style:normal;font-size:.76em;color:#fff;background:var(--accent);border-radius:999px;padding:1px 9px;}

/* 節内サブページ・ナビ（分割節で使用） */
.subnav{background:#eadfc4;border-bottom:1px solid var(--line);}
.subnav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:12px;padding-bottom:12px;}
.subnav-label{font-size:.74em;font-weight:800;color:var(--accent);}
.subnav-links{display:flex;flex-wrap:wrap;gap:7px 8px;}
.subnav-links a{font-size:.74em;text-decoration:none;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:3px 12px;white-space:nowrap;}
.subnav-links a:hover{border-color:var(--accent);color:var(--accent);}
.subnav-links a.cur{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width:860px){
  .fig-grid{grid-template-columns:1fr;}
  .fig-img-wrap{position:static;}
}
@media (max-width:680px){
  .toc ol{columns:1;}
}
@media (max-width:560px){
  :root{--bar-h:46px;}
  .topbar{font-size:13px;padding:0 13px;gap:10px;}
  .topbar .barlinks{gap:10px;}
  .topbar a{font-size:13px;}
  .hero{padding:28px 0 24px;}
  .hero h1{font-size:clamp(28px,8.5vw,60px);}
  section.block,section.fig{padding:26px 0;}
  .quiz,.toc{padding:14px 16px;}
  .pt{padding:12px 14px;}
  .answer summary{display:block;text-align:center;}
  #totop{width:46px;height:46px;right:14px;bottom:14px;}
  .idx-grid{grid-template-columns:1fr;}
}