/*
Theme Name: Tokyo Chikudenchi
Theme URI: https://tokyo-chikudenchi.com/
Description: 東京蓄電池補助金ガイド専用テーマ。制度データの提示と鮮度の明示に最適化。
Author: 東京蓄電池補助金ガイド
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tokyo-chikudenchi
*/

/* =========================================================
 * トークン
 * 深藍＝制度・信頼／琥珀＝受付中・アクセント
 * 朱＝終了／灰＝未発表。色に1つの意味だけを持たせる
 * =======================================================*/
:root{
  --navy:#1f3a5f;
  --navy-dk:#16293f;
  --amber:#e0a03a;
  --amber-dk:#b87c1c;
  --red:#a8322a;
  --gray:#5b6672;
  --ink:#1a2129;
  --ink-2:#465260;
  --line:#dfe4ea;
  --line-2:#eef1f5;
  --paper:#ffffff;
  --paper-2:#f6f8fb;

  --w:760px;
  --w-wide:1120px;

  --f-body:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --f-num:"SF Mono",ui-monospace,"Helvetica Neue",Arial,sans-serif;
}

/* 数値は等幅にして桁を揃える。補助額の比較がこのサイトの主目的 */
.num,.scheme-card dd,table td,table th{
  font-feature-settings:"tnum" 1;
  font-variant-numeric:tabular-nums;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.9;letter-spacing:.01em;
}
img{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:.18em}
a:hover{color:var(--amber-dk)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

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

/* =========================================================
 * ヘッダー
 * =======================================================*/
.site-header{
  background:var(--navy);color:#fff;
  border-bottom:4px solid var(--amber);
}
.site-header .wrap-wide{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap}
.site-title{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:.02em}
.site-title a{color:#fff;text-decoration:none}
.site-desc{margin:0;font-size:.78rem;color:#c3d0e0;line-height:1.5}
.nav-primary{margin-left:auto}
.nav-primary ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-primary a{color:#e6edf5;text-decoration:none;font-size:.86rem}
.nav-primary a:hover{color:#fff;text-decoration:underline}

/* パンくず */
.crumb{
  font-size:.78rem;color:var(--ink-2);
  padding:10px 0;border-bottom:1px solid var(--line-2);
  overflow-x:auto;white-space:nowrap;
}
.crumb a{color:var(--ink-2)}
.crumb span[aria-current]{color:var(--ink)}

/* =========================================================
 * 記事
 * =======================================================*/
.entry{padding:26px 0 56px}
.entry-title{
  font-size:1.62rem;line-height:1.5;font-weight:700;margin:.2em 0 .5em;
  letter-spacing:-.01em;
}
.entry-meta{font-size:.8rem;color:var(--ink-2);margin:0 0 18px}
.entry-meta time{font-variant-numeric:tabular-nums}

.entry-body h2{
  font-size:1.24rem;line-height:1.55;margin:2.6em 0 .9em;
  padding:.5em 0 .5em .8em;border-left:6px solid var(--navy);
  background:var(--paper-2);
}
.entry-body h3{
  font-size:1.06rem;margin:2em 0 .7em;padding-bottom:.35em;
  border-bottom:2px solid var(--line);
}
.entry-body p{margin:0 0 1.5em}
.entry-body ul,.entry-body ol{margin:0 0 1.6em;padding-left:1.4em}
.entry-body li{margin-bottom:.5em}

/* ハイライト。SKILLの規定どおり2種のみ */
.em-red{color:var(--red);font-weight:700}
.mk{background:linear-gradient(transparent 62%,#ffe9b3 62%);font-weight:600}

/* =========================================================
 * 署名要素：制度カード
 * 区名・補助額・受付状況・情報基準日を1枚に集約する
 * =======================================================*/
.scheme-card{
  border:2px solid var(--navy);border-radius:4px;
  margin:0 0 34px;overflow:hidden;background:#fff;
}
.sc-head{
  display:flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;padding:12px 16px;
}
.sc-area{margin:0;font-size:1.12rem;font-weight:700;letter-spacing:.02em}
.sc-status{
  margin:0 0 0 auto;font-size:.78rem;font-weight:700;
  padding:.25em .8em;border-radius:2px;letter-spacing:.04em;
}
.sc-status.is-open{background:var(--amber);color:#2a1d00}
.sc-status.is-closed{background:var(--red);color:#fff}
.sc-status.is-tba{background:var(--gray);color:#fff}

.sc-body{display:flex;margin:0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.sc-body>div{
  flex:1 1 33.333%;min-width:150px;padding:14px 16px;
  border-right:1px solid var(--line-2);
}
.sc-body>div:last-child{border-right:0}
.sc-body dt{font-size:.76rem;color:var(--ink-2);margin:0 0 .3em;letter-spacing:.04em}
.sc-body dd{margin:0;font-size:1.14rem;font-weight:700;line-height:1.4}

.sc-asof{
  margin:0;padding:10px 16px;font-size:.78rem;color:var(--ink-2);
  background:var(--paper-2);
}
.sc-asof time{font-weight:700;color:var(--ink)}
.sc-note{
  margin:0;padding:10px 16px;font-size:.76rem;line-height:1.7;
  color:var(--ink-2);border-top:1px dashed var(--line);
}
.inline-asof{
  font-size:.78rem;color:var(--ink-2);
  border-left:3px solid var(--line);padding-left:.8em;margin:0 0 1.4em!important;
}

/* =========================================================
 * 目次
 * =======================================================*/
.toc{
  background:var(--paper-2);border:1px solid var(--line);
  padding:18px 20px;margin:0 0 34px;border-radius:4px;
}
.toc-title{
  margin:0 0 .7em;font-weight:700;font-size:.94rem;
  padding-bottom:.5em;border-bottom:2px solid var(--navy);
}
.toc ol{margin:0;padding-left:1.4em}
.toc>ol{counter-reset:t}
.toc li{margin-bottom:.4em;font-size:.9rem}
.toc ol ol{margin:.4em 0 .6em;padding-left:1.2em}
.toc ol ol li{font-size:.85rem;color:var(--ink-2)}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{text-decoration:underline;color:var(--navy)}

/* =========================================================
 * 表（このサイトの主役）
 * =======================================================*/
.table-scroll{overflow-x:auto;margin:0 0 1.8em;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:480px}
th,td{border:1px solid var(--line);padding:.7em .8em;text-align:left;vertical-align:top}
thead th{background:var(--navy);color:#fff;font-weight:700;white-space:nowrap}
tbody th{background:var(--paper-2);font-weight:700;white-space:nowrap}
tbody tr:nth-child(even) td{background:#fbfcfe}

/* =========================================================
 * 出典・注意枠
 * =======================================================*/
.ref-box{
  background:var(--paper-2);border-left:4px solid var(--navy);
  padding:12px 16px;margin:0 0 1.8em;font-size:.84rem;
}
.ref-box ul{margin:0;padding-left:1.2em}
.ref-box li{margin-bottom:.3em}

.note-box{
  border:1px solid var(--amber);background:#fffaf0;
  padding:14px 18px;margin:0 0 1.8em;border-radius:4px;
}
.note-title{
  margin:0 0 .5em;font-weight:700;color:var(--amber-dk);font-size:.94rem;
}
.note-box p:last-child{margin-bottom:0}

/* =========================================================
 * CTA
 * =======================================================*/
.cta-box{
  border:2px solid var(--amber);border-radius:6px;
  background:linear-gradient(180deg,#fffdf7,#fff8e9);
  padding:22px;margin:2.4em 0;
}
.cta-title{
  margin:0 0 .6em;font-size:1.1rem;font-weight:700;color:var(--navy);line-height:1.5;
}
.cta-box p{margin:0 0 .9em;font-size:.94rem}
.cta-box ul{margin:0 0 1.2em;padding-left:1.3em;font-size:.9rem}
.cta-box li{margin-bottom:.35em}
.cta-btn{margin:0!important;text-align:center}
.cta-btn a{
  display:inline-block;width:100%;max-width:420px;
  background:var(--amber);color:#2a1d00;font-weight:700;font-size:1.02rem;
  text-decoration:none;padding:.95em 1.4em;border-radius:4px;
  box-shadow:0 3px 0 var(--amber-dk);transition:transform .12s,box-shadow .12s;
}
.cta-btn a:hover{
  transform:translateY(2px);box-shadow:0 1px 0 var(--amber-dk);color:#2a1d00;
}
.cta-note{
  margin:.9em 0 0!important;font-size:.76rem;color:var(--ink-2);text-align:center;
}

/* =========================================================
 * 一覧（区市のカード）
 * =======================================================*/
.area-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.area-list a{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:5px solid var(--navy);
  padding:12px 14px;text-decoration:none;color:var(--ink);
  background:#fff;transition:border-color .12s,background .12s;
}
.area-list a:hover{background:var(--paper-2);border-left-color:var(--amber)}
.al-name{font-weight:700;font-size:.98rem}
.al-status{
  font-size:.7rem;font-weight:700;padding:.2em .6em;border-radius:2px;margin-left:auto;
}
.al-status.is-open{background:var(--amber);color:#2a1d00}
.al-status.is-closed{background:var(--red);color:#fff}
.al-status.is-tba{background:var(--gray);color:#fff}
.al-sum{flex-basis:100%;font-size:.78rem;color:var(--ink-2)}

.related{margin:3em 0 0;padding-top:2em;border-top:2px solid var(--line)}
.related h2{font-size:1.14rem;margin:0 0 1em}

/* =========================================================
 * アーカイブ・トップ
 * =======================================================*/
.page-head{padding:28px 0 8px}
.page-head h1{font-size:1.5rem;margin:0 0 .4em;line-height:1.5}
.page-head p{margin:0;color:var(--ink-2);font-size:.92rem}

.post-list{list-style:none;margin:0;padding:26px 0 40px;display:grid;gap:16px}
.post-list li{border-bottom:1px solid var(--line-2);padding-bottom:16px}
.post-list h2{font-size:1.05rem;margin:0 0 .4em;line-height:1.55}
.post-list a{text-decoration:none;color:var(--ink)}
.post-list a:hover{color:var(--navy);text-decoration:underline}
.post-list p{margin:0;font-size:.86rem;color:var(--ink-2)}

.pager{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 40px;font-size:.9rem}
.pager .page-numbers{
  padding:.45em .9em;border:1px solid var(--line);text-decoration:none;color:var(--ink);
}
.pager .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* =========================================================
 * フッター
 * =======================================================*/
.site-footer{
  background:var(--navy-dk);color:#c9d5e2;margin-top:50px;
  padding:30px 0;font-size:.84rem;
}
.site-footer a{color:#e6edf5}
.nav-footer ul{display:flex;gap:18px;list-style:none;margin:0 0 14px;padding:0;flex-wrap:wrap}
.footer-note{margin:0 0 8px;line-height:1.8;font-size:.78rem;color:#9fb0c4}
.copyright{margin:0;font-size:.76rem;color:#8698ad}

/* 広告表記。景表法対応 */
.ad-disclosure{
  background:#eef1f5;color:var(--ink-2);font-size:.74rem;
  padding:6px 0;text-align:center;border-bottom:1px solid var(--line);
}

/* =========================================================
 * レスポンシブ
 * =======================================================*/
@media (max-width:640px){
  body{font-size:16px}
  .entry-title{font-size:1.36rem}
  .entry-body h2{font-size:1.14rem}
  .sc-body>div{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line-2);padding:11px 16px}
  .sc-body>div:last-child{border-bottom:0}
  .sc-body dd{font-size:1.06rem}
  .site-header .wrap-wide{min-height:0;padding-top:10px;padding-bottom:10px}
  .nav-primary{margin-left:0;flex-basis:100%}
  .cta-box{padding:18px 16px}
  .area-list{grid-template-columns:1fr}
}

@media print{
  .cta-box,.nav-primary,.related,.site-footer,.ad-disclosure{display:none}
}

/* =========================================================
 * 追補：SKILL準拠の要素順序に対応する部品
 * =======================================================*/
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.7em 1.2em;z-index:100;text-decoration:none;
}
.skip-link:focus{left:0}

.header-inner{
  max-width:var(--w-wide);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.site-tagline{margin:0;font-size:.78rem;color:#c3d0e0;line-height:1.5}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{color:#e6edf5;text-decoration:none;font-size:.86rem}
.site-nav a:hover{color:#fff;text-decoration:underline}

.nav-toggle{
  display:none;margin-left:auto;width:42px;height:38px;background:transparent;
  border:1px solid rgba(255,255,255,.4);border-radius:3px;cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:11px;width:20px;height:2px;background:#fff;transition:transform .18s,opacity .18s;
}
.nav-toggle span{top:18px}
.nav-toggle span::before{top:-6px;left:0}
.nav-toggle span::after{top:6px;left:0}
.nav-toggle.is-active span{background:transparent}
.nav-toggle.is-active span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-active span::after{transform:translateY(-6px) rotate(-45deg)}

/* 記事ヘッド */
.post-head{padding:24px 0 6px}
.cat-label{
  display:inline-block;background:var(--navy);color:#fff;font-size:.74rem;font-weight:700;
  padding:.28em .9em;border-radius:2px;text-decoration:none;letter-spacing:.04em;
}
.cat-label:hover{background:var(--amber-dk);color:#fff}
.post-meta{
  margin:.6em 0 0;font-size:.78rem;color:var(--ink-2);
  display:flex;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums;
}
.eyecatch{margin:18px 0 26px}
.eyecatch img{width:100%;height:auto;display:block;border-radius:4px}

/* 導入文は本文よりわずかに大きく */
.entry-lead{font-size:1.02em;margin-bottom:26px}
.entry-lead p:last-child{margin-bottom:0}

/* 編集部情報ボックス */
.author-box{
  display:flex;gap:14px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:4px;padding:14px 18px;margin:0 0 30px;font-size:.84rem;line-height:1.85;
  color:var(--ink-2);
}
.author-box b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:.3em}

/* 本文（entry-content は entry-body と同等に扱う） */
.entry-content h2{
  font-size:1.24rem;line-height:1.55;margin:2.6em 0 .9em;
  padding:.5em 0 .5em .8em;border-left:6px solid var(--navy);background:var(--paper-2);
}
.entry-content h3{
  font-size:1.06rem;margin:2em 0 .7em;padding-bottom:.35em;border-bottom:2px solid var(--line);
}
.entry-content p{margin:0 0 1.5em}
.entry-content ul,.entry-content ol{margin:0 0 1.6em;padding-left:1.4em}
.entry-content li{margin-bottom:.5em}

/* 一覧カード */
.page-title{font-size:1.5rem;margin:24px 0 .4em;line-height:1.5}
.page-desc{margin:0 0 20px;color:var(--ink-2);font-size:.92rem}
.card-list{list-style:none;margin:0;padding:0 0 30px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card a{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .14s}
.card a:hover{box-shadow:0 3px 14px rgba(31,58,95,.12)}
.card-thumb img{display:block;width:100%;height:auto}
.card-body{padding:14px 16px}
.card-cat{display:inline-block;background:var(--paper-2);color:var(--navy);font-size:.72rem;
  font-weight:700;padding:.2em .7em;border-radius:2px;margin-bottom:.5em}
.card-body h2{font-size:1rem;margin:0 0 .5em;line-height:1.55}
.card-excerpt{margin:0;font-size:.82rem;color:var(--ink-2);line-height:1.75}

.pagination{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 40px;font-size:.9rem}
.pagination .page-numbers{padding:.45em .9em;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* フッター */
.footer-grid{display:grid;gap:26px;grid-template-columns:1.6fr 1fr 1fr;margin-bottom:24px}
.footer-logo{margin:0 0 .5em;font-weight:700;color:#fff;font-size:1rem}
.footer-desc{margin:0;font-size:.8rem;line-height:1.85;color:#a9bacd}
.footer-ttl{margin:0 0 .6em;font-weight:700;color:#fff;font-size:.86rem}
.footer-list{list-style:none;margin:0;padding:0;font-size:.82rem}
.footer-list li{margin-bottom:.45em}
.footer-list a{text-decoration:none}
.footer-list a:hover{text-decoration:underline}
.footer-notice{
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px;margin-bottom:14px;
  font-size:.76rem;line-height:1.85;color:#a9bacd;
}
.footer-notice p{margin:0 0 .6em}
.footer-notice strong{color:#dfe8f2}

/* 上に戻る */
.to-top{
  position:fixed;right:16px;bottom:16px;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--navy);color:#fff;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .2s;display:grid;place-items:center;z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.to-top.is-show{opacity:.92;pointer-events:auto}
.to-top:hover{opacity:1}
.to-top svg{width:22px;height:22px}

@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .site-nav{display:none;flex-basis:100%;margin-left:0}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:8px 0}
  .site-nav li{border-top:1px solid rgba(255,255,255,.14)}
  .site-nav a{display:block;padding:.75em 0}
  .entry-content h2{font-size:1.14rem}
  .card-list{grid-template-columns:1fr}
}