/* ==============================================
   subsidy-pages.css
   補助金ページ共通スタイル（都道府県 + 市区町村）
   共通ベース → hpseo-style.css
   ============================================== */


/* ################################################################
   A. 都道府県ページ（.prefsub-*, .pst-*, .pml-*）
   ################################################################ */

/* --- Base --- */
.prefsub-wrap { font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,メイリオ,sans-serif; color: #333; line-height: 1.8; font-weight: 400; -webkit-font-smoothing: antialiased; }
.prefsub-wrap h1 { font-weight: 900; }
.prefsub-wrap h2, .prefsub-wrap h3, .prefsub-wrap h4 { font-weight: 700; }
.prefsub-wrap *, .prefsub-wrap *::before, .prefsub-wrap *::after { box-sizing: border-box; }
.prefsub-container { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.prefsub-hero { background: linear-gradient(135deg, #0c8698 0%, #47a79d 100%); padding: 40px 0; color: #fff; }
.prefsub-hero h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; line-height: 1.4; }
.prefsub-hero .update-date { font-size: 13px; opacity: 0.85; }
.prefsub-section { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 32px 28px; margin-bottom: 24px; }
.prefsub-section:first-child { margin-top: -20px; position: relative; z-index: 1; }
.prefsub-section h2 { font-size: 22px; font-weight: 700; color: #0c8698; border-bottom: 3px solid #0c8698; padding-bottom: 10px; margin: 32px 0 20px; }
.prefsub-section h2:first-child { margin-top: 0; }
.prefsub-section h3 { font-size: 18px; font-weight: 700; color: #333; border-left: 4px solid #0c8698; padding-left: 12px; margin: 28px 0 16px; }
.prefsub-section h4 { font-size: 16px; font-weight: 700; color: #555; margin: 20px 0 12px; display: flex; align-items: center; gap: 8px; }
.prefsub-section h4::before { content: "ー"; color: #0c8698; font-weight: 900; letter-spacing: -2px; flex-shrink: 0; }
.prefsub-section p { margin: 0 0 16px; font-size: 15px; }
.prefsub-section table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; border: 2px solid #b8d4d8; table-layout: fixed; }
.prefsub-section th { background: #f0f7f8; color: #333; padding: 12px 14px; text-align: left; font-weight: 700; border: 1px solid #b8d4d8; border-bottom: 2px solid #0c8698; vertical-align: top; word-break: break-word; overflow-wrap: break-word; }
.prefsub-section td { padding: 12px 14px; border: 1px solid #d0dfe1; vertical-align: top; line-height: 1.7; word-break: break-word; overflow-wrap: break-word; }
.prefsub-section tr:nth-child(even) td { background: #fafcfc; }
.prefsub-section tr:nth-child(even) th { background: #e8f2f4; }
.prefsub-section tr:hover td, .prefsub-section tr:hover th { background: #eef6f7; }
.prefsub-section tr:last-child td, .prefsub-section tr:last-child th { border-bottom: 2px solid #b8d4d8; }
.prefsub-section a { color: #0c8698; text-decoration: underline; }
.prefsub-section a:hover { color: #095a66; }
.prefsub-section ul { padding-left: 24px; margin: 12px 0; }
.prefsub-section ul li { margin-bottom: 6px; font-size: 15px; }

/* ol: ステップ風タイムラインデザイン */
.prefsub-section ol {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
  counter-reset: step-counter;
}
.prefsub-section ol > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 52px;
  padding-bottom: 20px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.8;
}
/* 縦線 */
.prefsub-section ol > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  background: #0c8698;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.prefsub-section ol > li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: #c8dfe2;
}
.prefsub-section ol > li:last-child::after {
  display: none;
}
.prefsub-section ol > li:last-child {
  padding-bottom: 0;
}
.prefsub-section img { max-width: 100%; height: auto; border-radius: 8px; }
.prefsub-section .p-toc { background: #f5f9f9; border: 1px solid #d4e5e5; border-radius: 8px; padding: 20px 24px; margin: 24px 0; }
.prefsub-section .check-more_article_v01 { background: #fffbe6; border-left: 4px solid #f0c040; padding: 16px 20px; border-radius: 6px; margin: 20px 0; }
.prefsub-content-bg { background: #f0f2f5; padding: 32px 0 48px; }
body.hpseo-page .prefsub-wrap { display: block !important; max-width: 100% !important; }
body.hpseo-page .prefsub-container { max-width: 100% !important; }

/* --- pSEOリンクボタン --- */
.pseo-link-btn { display: block; margin: 16px 0 4px; padding: 12px 20px; background: linear-gradient(135deg, #0c8698 0%, #47a79d 100%); color: #fff !important; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: opacity 0.2s, box-shadow 0.2s; box-shadow: 0 2px 6px rgba(12,134,152,0.25); }
.pseo-link-btn:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(12,134,152,0.35); color: #fff !important; }
.pseo-link-btn span { display: block; font-size: 12px; font-weight: 400; opacity: 0.85; margin-top: 2px; }

/* --- タブ --- */
.pst-wrap { margin: 32px 0; }
.pst-summary { background: var(--primary-light, #e4f4f7); border-left: 4px solid var(--primary, #0c8698); padding: 16px 20px; border-radius: 6px; margin-bottom: 24px; font-size: 15px; }
.pst-summary strong { color: var(--primary, #0c8698); font-size: 1.15em; }
.pst-tab-bar { display: flex; gap: 0; border-bottom: 3px solid var(--primary, #0c8698); margin-bottom: 0; }
.pst-tab {
  flex: 1; padding: 14px 8px; border: none; background: #f0f0f0;
  font-size: 14px; font-weight: 700; color: #666; cursor: pointer;
  text-align: center; line-height: 1.4;
  border-radius: 8px 8px 0 0; margin-right: 2px;
  transition: background .2s, color .2s;
  position: relative;
}
.pst-tab:last-child { margin-right: 0; }
.pst-tab:hover { background: #e0e0e0; color: #333; }
.pst-tab--active { background: var(--primary, #0c8698); color: #fff !important; }
.pst-tab-count { display: block; font-size: 11px; font-weight: 400; opacity: .8; margin-top: 2px; }
.pst-tab--active .pst-tab-count { opacity: 1; }
.pst-panel { display: none; padding: 24px 0 0; }
.pst-panel--active { display: block; }

/* --- 県カード --- */
.pst-pref-card { background: #fff; border: 1px solid var(--border, #e0dede); border-radius: 12px; padding: 24px; position: relative; }
.pst-card-title { font-size: 20px; font-weight: 700; color: var(--primary-dark, #0a6e7d); margin: 0 0 12px; }
.pst-pref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.pst-pref-item { background: var(--bg-gray, #f5f4f4); border-radius: 8px; padding: 14px 16px; }
.pst-pref-label { display: block; font-size: 13px; color: #555; margin-bottom: 4px; font-weight: 600; }
.pst-pref-value { font-size: 16px; font-weight: 700; color: var(--text, #1a1311); }
.pst-cap { display: block; font-size: 12px; color: #888; font-weight: 400; }
.pst-pref-meta { margin-top: 12px; font-size: 14px; color: var(--text, #1a1311); }
.pst-official-link { color: var(--primary, #0c8698); font-weight: 600; text-decoration: none; }
.pst-official-link:hover { text-decoration: underline; }
.pst-details { margin-top: 12px; }
.pst-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary, #0c8698); padding: 8px 0; }
.pst-details-body { font-size: 13px; line-height: 1.7; color: #555; padding: 8px 0 4px 12px; border-left: 3px solid var(--border, #e0dede); }

/* --- ステータスバッジ（都道府県） --- */
.pst-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; vertical-align: middle; margin-left: 8px; }
.pst-badge-open   { background: #e6f7ed; color: #1a8a4a; }
.pst-badge-few    { background: #fff6e0; color: #b8860b; }
.pst-badge-closed { background: #fce8e8; color: #c0392b; }
.pst-badge-before { background: #fff6e0; color: #b8860b; }
.pst-badge-none   { background: #f0f0f0; color: #999; }
.pst-badge-default { background: #f0f0f0; color: #666; }

/* --- 市区町村カードグリッド --- */
.pst-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pst-muni-card {
  background: #fff; border: 1px solid var(--border, #e0dede);
  border-radius: 10px; padding: 0; overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.pst-muni-card:hover { border-color: var(--primary, #0c8698); box-shadow: 0 2px 12px rgba(12,134,152,.12); }
.pst-muni-head { padding: 14px 16px 10px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
.pst-muni-name { font-size: 16px; font-weight: 700; color: var(--text, #1a1311); }
.pst-muni-body { padding: 12px 16px; flex: 1; }
.pst-muni-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 14px; }
.pst-muni-label { color: #555; font-weight: 600; font-size: 13px; }
.pst-muni-val { font-weight: 700; color: var(--text, #1a1311); text-align: right; }
.pst-muni-cond { font-size: 11px; color: #666; padding: 0 0 2px; line-height: 1.4; }
.pst-btn-row { display: flex; gap: 0; border-top: 1px solid #f0f0f0; margin-top: auto; }
.pst-detail-btn { flex: 1; text-align: center; padding: 12px 8px; font-weight: 700; font-size: 13px; text-decoration: none; transition: background .2s, color .2s; line-height: 1.3; }
.pst-btn-detail { background: var(--primary, #0c8698) !important; color: #fff !important; }
.pst-btn-detail:hover { background: var(--primary-dark, #0a6e7d) !important; color: #fff !important; }
.pst-btn-official { background: #fff !important; color: var(--primary, #0c8698) !important; border-left: 1px solid #f0f0f0; }
.pst-btn-official:hover { background: var(--primary-light, #e4f4f7) !important; color: var(--primary-dark, #0a6e7d) !important; }
.pst-btn-row .pst-detail-btn:only-child { border-radius: 0 0 10px 10px; }
.pst-btn-row .pst-btn-detail:first-child:not(:only-child) { border-radius: 0 0 0 10px; }
.pst-btn-row .pst-btn-official:last-child { border-radius: 0 0 10px 0; }

/* --- [pref_muni_list] テーブル --- */
.pml-wrap { margin: 32px 0; }
.pml-summary { background: #f0f7f8; border-left: 4px solid #0c8698; padding: 16px 20px; border-radius: 6px; margin-bottom: 28px; font-size: 15px; }
.pml-summary strong { color: #0c8698; font-size: 1.2em; }
.pml-group-title { font-size: 20px; font-weight: 700; color: #0c8698; border-bottom: 3px solid #0c8698; padding-bottom: 10px; margin: 36px 0 16px; }
.pml-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.pml-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pml-table thead th { background: #0c8698; color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; white-space: nowrap; }
.pml-table tbody td { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; vertical-align: middle; }
.pml-table tbody tr:nth-child(even) td { background: #f8fafa; }
.pml-table tbody tr:hover td { background: #eef6f7; }
.pml-th-name { min-width: 120px; text-align: left; }
.pml-cap { display: block; font-size: 12px; color: #888; }
.pml-none { color: #ccc; }
.pml-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.pml-status-open { background: #e6f7ed; color: #1a8a4a; }
.pml-status-few { background: #fff6e0; color: #b8860b; }
.pml-status-closed { background: #fce8e8; color: #c0392b; }
.pml-status-before { background: #fff6e0; color: #b8860b; }
.pml-status-none { background: #f0f0f0; color: #999; }
.pml-status-default { background: #f0f0f0; color: #666; }
.pml-td-name { font-weight: 600; white-space: nowrap; }
.pml-td-solar, .pml-td-battery { text-align: center; }
.pml-td-status { text-align: center; }
.pml-td-link { text-align: center; }
.pml-td-link a { color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.pml-td-link a:hover { text-decoration: underline; }
.pml-th-solar, .pml-th-battery { text-align: center; }
.pml-th-status { text-align: center; white-space: nowrap; }
.pml-th-link { text-align: center; width: 80px; }
.pml-links-section { margin-top: 40px; }
.pml-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pml-link-card { display: block; background: #fff; border: 1px solid #d4e5e5; border-radius: 8px; padding: 14px 16px; text-decoration: none; transition: box-shadow 0.2s, border-color 0.2s; }
.pml-link-card:hover { border-color: #0c8698; box-shadow: 0 2px 8px rgba(12,134,152,0.15); }
.pml-link-name { display: block; font-size: 15px; font-weight: 700; color: #333; margin-bottom: 4px; }
.pml-link-desc { display: block; font-size: 13px; color: #0c8698; }
.pml-link-card:hover .pml-link-desc { text-decoration: underline; }

/* --- 都道府県 レスポンシブ --- */
@media (max-width: 600px) {
  .prefsub-hero h1 { font-size: 20px; }
  .prefsub-section { padding: 20px 16px; border-radius: 8px; }
  .prefsub-section h2 { font-size: 18px; }
  .prefsub-section table { font-size: 12px; }
  .prefsub-section th, .prefsub-section td { padding: 8px 10px; }
  .pst-tab { font-size: 12px; padding: 10px 4px; }
  .pst-pref-grid { grid-template-columns: 1fr; }
  .pst-cards-grid { grid-template-columns: 1fr; }
  .pst-muni-name { font-size: 15px; }
  .pst-detail-btn { font-size: 12px; padding: 10px 6px; }
  .pml-table { font-size: 12px; }
  .pml-table thead th, .pml-table tbody td { padding: 8px 8px; }
  .pml-group-title { font-size: 17px; }
  .pml-links-grid { grid-template-columns: 1fr; }
}


/* ################################################################
   B. 市区町村ページ（シミュレーションUI・ユーティリティ）
   ################################################################ */

/* === 生活パターン選択ボタン === */
.usage-pills { display: flex; gap: 6px; }
.usage-pill {
  flex: 1; padding: 10px 6px 8px; border: 2px solid var(--border, #e0dede); border-radius: 10px;
  background: white; cursor: pointer; text-align: center; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.usage-pill:hover { border-color: var(--primary, #0C8698); background: var(--primary-light, #e4f4f7); }
.usage-pill.selected { border-color: var(--primary, #0C8698); background: var(--primary-light, #e4f4f7); box-shadow: 0 0 0 1px var(--primary, #0C8698); }
.usage-pill .pill-title { font-size: 13px; font-weight: 700; color: var(--text, #1A1311); }
.usage-pill.selected .pill-title { color: var(--primary-dark, #0a6e7d); }
.usage-pill .pill-meta { font-size: 10px; color: var(--text-light, #777); line-height: 1.3; }
.usage-pill .pill-pct { font-size: 11px; font-weight: 600; color: var(--primary, #0C8698); margin-top: 2px; }

/* === アコーディオン: 詳細設定パネル === */
.sim-conditions-accordion { background: var(--bg-gray); }
.sim-conditions-accordion #conditions-toggle:hover { background: #edecec; }
.sim-conditions-accordion #conditions-body { border-top: 1px solid var(--border); }

/* === ユーティリティクラス === */
.accent-badge { background:var(--accent-light); border:2px solid var(--accent); border-radius:8px; padding:10px 16px; text-align:center; font-size:15px; font-weight:700; color:var(--accent); margin-bottom:4px; }
.alert-flex { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--primary-light); border:2px solid var(--primary); border-radius:10px; margin-bottom:16px; }
.amount-primary { color:var(--primary-dark); font-size:18px; }
.btn-fixed-width { width:100px; padding:8px 12px; border:2px solid var(--primary); border-radius:6px; font-size:16px; font-weight:700; text-align:center; }
.caption-center { font-size:12px; color:var(--text-light); margin-top:6px; text-align:center; }
.card-gray { margin-top:24px; border:1px solid var(--border); border-radius:12px; padding:20px 22px; background:var(--bg-gray); }
.card-rounded { margin-bottom:16px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.collapse { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.flex-between { width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--bg-gray); border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--text); transition:background .2s; }
.flex-btn-lg-outline { flex:1; min-width:70px; padding:10px 4px; border:2px solid var(--border); border-radius:8px; background:white; cursor:pointer; font-size:14px; font-weight:600; color:var(--text-light); transition:.2s; }
.flex-btn-outline { flex:1; padding:7px 2px; border:2px solid var(--border); border-radius:6px; background:white; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); transition:.2s; text-align:center; }
.flex-btn-primary { flex:1; padding:7px 2px; border:2px solid var(--primary); border-radius:6px; background:var(--primary); cursor:pointer; font-size:13px; font-weight:600; color:white; transition:.2s; text-align:center; }
.flex-gap-4 { display:flex; gap:4px; }
.flex-gap-6 { margin-top:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--text-light); }
.flex-gap-8 { display:flex; align-items:center; gap:8px; }
.flex-gap-wrap { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.flex-wrap { display:flex; gap:8px; flex-wrap:wrap; }
.full-width-table { width:100%; font-size:12px; border-collapse:collapse; line-height:1.6; }
.gradient-hero { background:linear-gradient(135deg, var(--primary) 0%, #47A79D 100%); border-radius:var(--radius); padding:32px 28px; margin-bottom:24px; text-align:center; color:white; }
.gray-box { background:var(--bg-gray); border:1px solid var(--border); border-radius:8px; padding:12px 16px; font-size:15px; }
.grid-2col-gap { grid-template-columns: 1fr 1fr; gap:14px; }
.data-grid.grid-2col-repeat { grid-template-columns: repeat(2, 1fr); }
.grid-3col { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.grid-row-auto { display:grid; grid-template-columns:auto 1fr minmax(70px, auto); gap:2px 10px; align-items:center; }
.heading-17-dark { font-size:18px; font-weight:700; color:var(--primary-dark); margin-bottom:16px; text-align:center; }
.heading-bold { font-size:16px; font-weight:700; color:#333; }
.heading-center-dark { font-size:16px; font-weight:700; text-align:center; color:var(--primary-dark); margin-bottom:12px; }
.heading-dark { font-size:24px; font-weight:800; color:var(--primary-dark); }
.hidden { display:none; }
.hidden-input { opacity:0; width:0; height:0; }
.hidden-menu { display:none; min-width:140px; }
.hidden-note { display:none; margin-top:10px; padding:12px; background:#f8f9fa; border-radius:8px; border:1px solid var(--border); }
.note-box { margin-top:10px; padding:12px; background:#f8f9fa; border-radius:8px; border:1px solid var(--border); }
.highlight-left { margin-top:24px; padding:20px; background:var(--bg-gray); border-radius:8px; border-left:4px solid var(--primary); }
.highlight-marker { background:linear-gradient(transparent 60%, #fef08a 60%); }
.cta-compare-table .highlight-marker { font-size: 18px; }
.info-panel { max-width:900px; margin:24px auto 32px; padding:18px 20px; background:#f8f9fa; border:1px solid #e5e7eb; border-radius:10px; font-size:12px; color:#666; line-height:1.6; }
.inline-btn { display:inline-block; background:var(--primary); color:#fff; font-size:14px; font-weight:700; padding:8px 20px; border-radius:6px; text-decoration:none; transition:opacity 0.2s; }
.inline-btn-white { display:inline-block; padding:14px 40px; background:#ffffff; color:var(--primary-dark); border-radius:8px; font-size:16px; font-weight:800; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:transform 0.2s; }
.input-full { width:100%; padding:7px 10px; border:2px solid var(--border); border-radius:6px; font-size:14px; font-weight:600; }
.label-bold { font-size:14px; font-weight:600; margin-bottom:6px; }
.label-bold-lg { font-size:14px; font-weight:600; margin-bottom:8px; }
.label-bold-spaced { font-size:14px; font-weight:600; margin:14px 0 8px; }
.label-dark { font-size:12px; font-weight:600; color:#555; margin:0 0 6px; }
.label-dark-sm { font-size:12px; font-weight:600; color:#555; margin:0 0 4px; }
.label-light { font-size:13px; color:var(--text-light); margin-bottom:6px; }
.label-primary-bold { font-size:13px; font-weight:700; color:var(--primary-dark); margin-top:6px; }
.label-primary-dark { font-size:12px; font-weight:700; color:var(--primary-dark); margin-bottom:6px; }
.list-reset { list-style:none; padding:0; margin:0; }
.mb-0 { margin-bottom:0; }
.mb-2 { margin-bottom:8px; }
.mt-2 { margin-top:10px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.note-card { margin-top:10px; padding:12px 14px; background:white; border:1px solid var(--border); border-radius:8px; font-size:13px; line-height:1.7; }
.note-card-lg { margin-top:12px; padding:10px 14px; background:white; border:1px solid var(--border); border-radius:8px; font-size:14px; line-height:1.7; }
.note-divider { margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); color:var(--text-light); font-size:12px; }
.note-light-mt { font-size:13px; color:var(--text-light); margin-top:4px; }
.note-sm { margin-top:6px; font-size:12px; color:var(--text-light); }
.note-sm-gray { font-size:13px; color:#888; margin-bottom:8px; }
.note-top { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); font-size:14px; color:var(--text-light); }
.note-xs { margin-top:6px; font-size:11px; color:#aaa; }
.note-xs-bottom { margin-top:10px; padding-top:8px; border-top:1px solid #e5e7eb; font-size:11px; color:#999; line-height:1.7; }
.note-xs-gray { font-size:12px; color:#999; }
.note-xs-light { font-size:12px; color:var(--text-light); line-height:1.5; margin-top:4px; }
.note-xs-light-center { font-size:12px; color:var(--text-light); text-align:center; margin-top:2px; }
.note-xs-light-loose { font-size:12px; color:var(--text-light); line-height:1.6; margin:12px 0 0; }
.note-xs-light-mt { font-size:12px; color:var(--text-light); margin-top:8px; line-height:1.6; }
.note-xxs { font-size:11px; color:#999; margin-bottom:10px; line-height:1.5; }
.note-xxs-light { font-size:11px; color:var(--text-light); margin-top:6px; line-height:1.5; }
.note-xxs-mt { font-size:11px; color:#999; margin-top:2px; }
.note-xxs-simple { font-size:11px; color:#999; margin-bottom:10px; }
.overflow-x { overflow-x:auto; }
.pad-cell { padding:5px 8px; }
.pad-cell-b { padding:5px 8px; border-bottom:1px solid var(--border); }
.pad-cell-gray { padding:14px 16px; background:var(--bg-gray); }
.pad-left-tl { padding:6px 8px; text-align:left; border-radius:4px 0 0 0; }
.pad-lg { padding:16px; }
.pad-nowrap-center { padding:6px 6px; text-align:center; white-space:nowrap; }
.pad-nowrap-tr { padding:6px 6px; text-align:center; white-space:nowrap; border-radius:0 4px 0 0; }
.primary-badge { background:var(--primary); color:#fff; font-size:11px; }
.primary-box-mt { background: var(--primary-light); border: 2px solid var(--primary); border-radius: 8px; padding: 16px; margin-top: 24px; }
.primary-highlight { background:var(--primary-light); border:2px solid var(--primary); border-radius:8px; padding:16px; text-align:center; }
.primary-link { color:var(--primary); text-decoration:none; font-weight:500; }
.style-flex-min-width { flex:1; min-width:200px; }
.style-flex-min-width-padding { flex:1; min-width:70px; padding:10px 4px; border:2px solid var(--primary); border-radius:8px; background:white; cursor:pointer; font-size:14px; font-weight:600; color:var(--primary-dark); transition:.2s; }
.style-font-size-color { font-size:10px; color:#888; }
.style-font-size-color-margin-bottom { font-size:14px; color:#666; margin-bottom:8px; }
.style-font-size-font-weight { font-size:14px; font-weight:600; }
.style-font-size-transition { font-size:12px; transition:transform .3s; }
.style-margin-top-padding-background { margin-top:16px; padding:16px; background:#fffbeb; border:1px solid #e5c542; border-radius:8px; font-size:13px; line-height:1.8; color:#6b5c00; }
.subheading-dark { font-size:16px; font-weight:600; color:var(--primary-dark); }
.subtitle { font-size:20px; font-weight:700; margin-bottom:8px; line-height:1.5; }
.text-accent { font-size:13px; color:#c2410c; margin-bottom:4px; }
.text-base { font-size:14px; }
.text-block { display:block;font-weight:400; }
.text-bold { font-size:15px; font-weight:600; }
.text-bold-dark { font-weight:700; color:var(--primary-dark); font-size:14px; }
.text-bold-dark-lg { font-weight:700; color:var(--primary-dark); }
.text-bold-gray { font-weight:bold; font-size:14px; color:#555; margin-bottom:10px; }
.text-bold-lg { font-weight:600; margin-bottom:12px; font-size:16px; }
.text-bold-mb { font-weight:700; margin-bottom:6px; }
.text-bold-right { font-weight:600; color:var(--primary-dark); text-align:right; }
.text-center { text-align:center; }
.text-center-bold { text-align:center; font-weight:600; }
.text-center-bold-border { text-align:center; border-bottom:1px solid var(--border); font-weight:600; }
.text-center-bold-dark { text-align:center; font-weight:600; color:var(--primary-dark); }
.text-center-border-b { text-align:center; border-bottom:1px solid var(--border); }
.text-dim { margin-top:12px; font-size:13px; opacity:0.8; }
.text-gray { color:#888; }
.text-lg { font-size:16px; }
.text-lg-mt { font-size:16px; margin-top:8px; }
.text-light { color:var(--text-light); }
.breakdown-item.text-light { color:#666; }
.text-light-sm { font-weight:400; color:var(--text-light); font-size:13px; }
.text-line-loose { font-size:13px; line-height:2; padding:12px 0; }
.text-line-normal { font-size:15px; line-height:1.8; color:var(--text); }
.text-loose-mt { font-size:16px; line-height:1.9; margin-top:20px; }
.text-paragraph { font-size:15px; margin-top:8px; margin-bottom:12px; }
.text-primary { color:var(--primary-dark); }
.text-primary-dark { color:var(--primary-dark); }
.text-primary-dark-sm { font-size:13px; color:var(--primary-dark); margin-bottom:4px; }
.text-right { text-align:right; }
.text-semi-bold { font-size:15px; opacity:0.92; margin-bottom:20px; line-height:1.8; }
.text-sm { font-size:12px; }
.text-xs { font-size:11px; }
.text-xs-muted { display:block;font-size:11px;color:var(--text-light);font-weight:400; }
.text-xs-reg { font-size:11px; font-weight:400; }
.title-accent { font-size:22px; font-weight:800; color:#c2410c; }
.toggle-base { position:relative; display:inline-block; width:48px; height:26px; margin-left:auto; }
.warning-box { background:#fff7ed; border:1px solid #fb923c; border-radius:8px; padding:16px; text-align:center; }

/* === 補足定義 === */
.amp-selector-pseo { display:none; min-width:140px; }
.ref-tile-6 { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:4px; }

/* === 方角ボタン選択状態 === */
.direction-btn { border-color: var(--border); background: white; color: var(--text); transition: all .15s; }
.direction-btn.selected { border-color: var(--primary); background: var(--primary); color: white; }

/* === 蓄電池容量ボタン選択状態 === */
.bat-cap-btn { border-color: var(--border); color: var(--text-light); transition: all .15s; }
.bat-cap-btn.selected { border-color: var(--primary); color: white; }

/* === 蓄電池トグル ON/OFF 状態 === */
.bat-toggle-wrap { transition: all .15s; }
.bat-toggle-wrap.bat-on { background: var(--primary); border-color: var(--primary-dark); }
.bat-toggle-wrap.bat-on span { color: #fff; }
.bat-toggle-wrap.bat-off { background: var(--primary-light); border-color: var(--primary); }
.bat-toggle-wrap.bat-off span { color: var(--primary-dark); }

/* === 回収年ハイライト行 === */
.recovery-year-row { background: var(--primary-light); }

/* === パワコン交換注記 === */
.pcon-note { font-size: 10px; color: #e74c3c; }

/* === 市区町村 レスポンシブ === */
@media (max-width: 480px) {
  .usage-pills { gap: 4px; }
  .usage-pill { padding: 8px 4px 6px; }
  .usage-pill .pill-title { font-size: 12px; }
}
@media (max-width: 600px) {
  .ref-tile-6 { grid-template-columns: 1fr 1fr; }
  .grid-row-auto { grid-template-columns: auto 1fr auto; gap: 2px 6px; font-size: 11px; }
  .grid-row-auto span:nth-child(3n+2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-card { padding: 10px 12px; font-size: 12px; }
  .note-card-lg { padding: 10px 12px; font-size: 13px; }
  .note-xs { font-size: 10px; line-height: 1.6; }
  .note-divider { font-size: 11px; }
}


/* ################################################################
   共通CTAバナー
   ################################################################ */
.hpseo-cta-banner {
  text-align: center;
  margin: 32px auto;
  max-width: 520px;
}
.hpseo-cta-banner a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.hpseo-cta-banner a:hover {
  opacity: 0.9;
  box-shadow: 0 4px 20px rgba(12,134,152,0.25);
}
.hpseo-cta-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}
@media (max-width: 600px) {
  .hpseo-cta-banner {
    max-width: 100%;
    margin: 24px auto;
  }
}