@charset "UTF-8";

/* 見た目は jp-econ-dashboard(経済まるみえ)のデザインを参考にしている:
   グラデーションのヘッダー / 左サイドバー / パンくず+タブ / 白いカードを並べるコンテンツ / 濃紺のフッター。
   グラフの系列色(--series-N)は dataviz のパレットを validate_palette で検証済みのもの。 */

:root {
  /* ── 配色(やわらかいローズ + アイボリー + くすんだプラム色の文字)。配色を変えるときは、ここだけを直す ── */
  --brand: #B84E74;         /* 主役の色: アクティブなタブ・ボタン・数字(白文字を載せても4.5:1以上) */
  --brand-dark: #8F3358;    /* リンク・強調の文字 */
  --accent: #E58FAA;        /* 装飾の線・ドット(文字には使わない) */
  --ink: #4A3540;           /* 見出し */
  --text: #3F3338;          /* 本文 */
  --text-2: #5E4F56;        /* 補助の文字 */
  --muted: #7D6A72;         /* 軸ラベル・プレースホルダー */
  --price: #7B2D52;         /* 価格の数字 */
  --page: #FFF9F7;          /* ページの背景(アイボリー) */
  --soft: #FFF3F5;          /* サイドバー・帯の背景(ブラッシュ) */
  --tint: #FDEEF2;          /* ホバー・選択の背景 */
  --line: #F1E1E6;          /* 区切り線 */
  --line-strong: #E6CBD3;   /* 枠線 */
  --footer-bg: #5A4350;
  --header-from: #FBD9E3; --header-to: #E9CDEF; --header-text: #5A2A44;  /* ヘッダー: ピンク→ラベンダー + 濃いプラム色の文字 */
  --tag-bg: #FCE4EC; --tag-fg: #A0305A;
  --badge-bg: #F7F0F2; --badge-border: #E6D5DA; --badge-fg: #6B5860;
  --howto-from: #FFF6F8; --howto-to: #FDEBF1; --howto-border: #D9829F;
  /* ── チャート(price_chart.js がこれらを読む) ── */
  --surface-1: #ffffff;
  --text-secondary: #5E4F56;
  --grid: #F1E4E8;
  --axis: #DCC9CF;
  --link: #8F3358;
  /* グラフの系列色: dataviz のパレットを validate_palette で検証済み。やわらかさより「見分けやすさ」を優先して変えない */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 1em; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  vertical-align: -0.15em;
}

html { font-size: 100%; color-scheme: light; }
@media screen and (max-width: 768px) { html { scroll-padding-top: 70px; } }

body {
  max-width: 100%;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  background: #ffffff;
  color: var(--text);
  margin: 0;
  overflow-wrap: break-word;  /* 出典URLなど長い文字列が画面幅をはみ出さないよう折り返す */
}
a { color: var(--ink); font-size: 1rem; text-decoration: none; transition: all 0.3s ease; }
a:hover { text-decoration: underline; }
img { max-width: 100%; vertical-align: bottom; }
li { list-style: none; }
h1, h2, h3 { color: var(--ink); }
.muted { color: var(--text-2); }
.small { font-size: 0.85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/*-------------------------------
header
-------------------------------*/
.header { height: 96px; }
.header .header-title {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 100px;
  background: linear-gradient(95deg, var(--header-from) 0%, var(--header-to) 100%);
}
.header .site-title { color: var(--header-text); font-size: 2.2rem; font-weight: bold; line-height: 1.2; }
.header .site-tagline { color: var(--header-text); opacity: 0.85; font-size: 0.9rem; margin: 2px 0 0; }
.header a:hover { text-decoration: none; }

.hamburger-icon {
  display: none; font-size: 28px; cursor: pointer; color: var(--header-text); background: none; border: none;
  padding: 0; min-width: 44px; min-height: 44px; line-height: 1;
}

.container { display: flex; flex: 1; }

/*-------------------------------
サイドバー
-------------------------------*/
.sidebar { width: 200px; background-color: var(--soft); padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sidebar-menu { background-color: var(--soft); max-width: 240px; font-family: sans-serif; }
.sidebar-close-button {
  display: none; font-size: 24px; cursor: pointer; background: none; border: none; color: inherit;
  padding: 0; min-width: 44px; min-height: 44px; margin: -10px -10px 0.5em auto;
}

.sidebar-search { position: relative; margin-bottom: 12px; }
.sidebar-search-input {
  width: 100%; padding: 7px 28px 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 13px; color: var(--text); background: #fff; box-sizing: border-box; outline: none; transition: border-color 0.2s;
}
.sidebar-search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(184, 78, 116, 0.12); }
.sidebar-search-input::placeholder { color: var(--muted); }
.sidebar-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--text-2); font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.sidebar-no-results { font-size: 13px; color: var(--text-2); text-align: center; padding: 4px 0 8px; margin: 0; }

.sidebar-link {
  display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 15px;
  padding: 3px 0 3px 8px; margin-bottom: 8px;
}
.sidebar-link .material-symbols-outlined { font-size: 1.1em; color: var(--brand); flex-shrink: 0; }
.sidebar-link:hover { color: var(--brand); text-decoration: underline; }
.sidebar-link.active {
  font-weight: bold; color: var(--brand-dark); background-color: rgba(184, 78, 116, 0.12);
  border-left: 3px solid var(--brand); padding-left: calc(8px - 3px); border-radius: 0 4px 4px 0;
}
.sidebar-section-title {
  font-size: 12px; color: var(--text-2); font-weight: bold; letter-spacing: 0.08em;
  margin: 20px 0 8px 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.menu-details { margin-bottom: 12px; }
.menu-details summary {
  font-weight: bold; font-size: 15px; color: var(--brand-dark); cursor: pointer; list-style: none; position: relative; padding-left: 1.2em;
}
.menu-details summary::-webkit-details-marker { display: none; }
.menu-details summary::before { content: "▶"; position: absolute; left: 0; color: var(--brand-dark); }
.menu-details[open] summary::before { content: "▼"; }
.menu-details ul { margin: 5px 0 0 1.5em; padding: 0; list-style: none; }
.menu-details ul li a {
  color: var(--text-2); margin: 4px 0; display: block; padding: 3px 4px; font-size: 0.9rem;
  border-left: 3px solid transparent; border-radius: 0 4px 4px 0;
}
.menu-details ul li a:hover { color: var(--brand); }
.menu-details ul li a.active { font-weight: bold; color: var(--brand-dark); background-color: rgba(184, 78, 116, 0.12); border-left-color: var(--brand); }
.sidebar-group-label { font-size: 11px; color: var(--text-2); font-weight: bold; letter-spacing: 0.05em; margin: 8px 0 2px 0; }

.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999; }
.sidebar-overlay.open { display: block; }
html.sidebar-open, html.sidebar-open body { overflow: hidden; }

/*-------------------------------
main / パンくず / 同系タブ
-------------------------------*/
.main { flex: 1; min-width: 0; background: var(--page); }

.breadcrumb { padding: 8px 30px; background: var(--soft); border-bottom: 1px solid var(--line); }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumb-item { display: flex; align-items: center; font-size: 0.82rem; color: var(--text-2); }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; margin: 0 6px; color: var(--muted); }
.breadcrumb-item a { color: var(--brand-dark); font-size: 0.82rem; }
.breadcrumb-item a:hover { color: var(--brand-dark); text-decoration: underline; }
.breadcrumb-current span { color: var(--text); font-weight: 500; }

.sibling-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 30px; background: var(--soft); border-bottom: 1px solid var(--line); }
.sibling-tab {
  display: inline-block; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--line-strong); background: #fff;
  color: var(--brand-dark); font-size: 0.82rem; font-weight: 500; white-space: nowrap;
}
.sibling-tab:hover { background: var(--tint); border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.sibling-tab--active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.sibling-tab--active:hover { background: var(--brand-dark); color: #fff; }
.sibling-tabs-label { align-self: center; font-size: 0.8rem; color: var(--text-2); margin-right: 4px; }

/*-------------------------------
コンテンツ(白いカードを並べる)
-------------------------------*/
.content { padding: 30px; max-width: 1140px; margin: 0 auto; }
.page-header { border-left: 4px solid var(--accent); padding: 16px 20px; margin-bottom: 24px; background: #fff; border-radius: 0 8px 8px 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.page-title { font-size: 1.6em; font-weight: 700; color: var(--ink); margin: 0 0 8px; line-height: 1.35; }
.page-description { font-size: 0.95em; color: var(--text-2); margin: 0 0 6px; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 0.85em; color: var(--text-2); }
.page-meta .material-symbols-outlined { font-size: 1.1em; color: var(--accent); }
.meta-item { display: inline-flex; align-items: center; gap: 3px; }

.indicator-explanation, .chart-section, .table-section, .section-card {
  background: #fff; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); min-width: 0;
}
.indicator-title {
  color: var(--ink); font-size: 1.8em; font-weight: 600; margin: 0 0 20px; border-bottom: 3px solid var(--accent); padding-bottom: 10px; line-height: 1.35;
}
.explanation-summary { background: var(--page); padding: 20px; border-radius: 8px; border-left: 4px solid var(--accent); margin-bottom: 0; }
.explanation-summary p { color: var(--text-2); font-size: 1.05em; line-height: 1.7; margin: 0; }
.explanation-summary p + p { margin-top: 8px; }
.explanation-summary a { color: var(--brand-dark); text-decoration: underline; font-size: inherit; }

.section-heading, .chart-section h2, .table-section h2, .section-card h2 {
  color: var(--ink); font-size: 1.3em; font-weight: 600; margin: 0 0 15px; border-bottom: 2px solid var(--accent); padding-bottom: 8px;
}
.section-lead { color: var(--text-2); font-size: 0.92rem; margin: -4px 0 14px; line-height: 1.7; }

/* この価格の見方 */
.how-to-read {
  background: linear-gradient(135deg, var(--howto-from) 0%, var(--howto-to) 100%); border-left: 4px solid var(--howto-border);
  border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 16px 0 24px;
}
.how-to-read h2 { font-size: 1.05rem; font-weight: 700; color: var(--brand-dark); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.how-to-read p { font-size: 0.95rem; line-height: 1.75; color: var(--text); margin: 0; }
.how-to-read p + p { margin-top: 6px; }
.how-to-read a { color: var(--brand-dark); text-decoration: underline; font-weight: 600; font-size: inherit; }

/* 確認日のピル */
.indicator-timestamps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.data-timestamp { display: inline-flex; align-items: center; gap: 8px; background: var(--page); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 12px; }
.timestamp-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.data-timestamp.is-stale .timestamp-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.timestamp-label { font-size: 0.8rem; color: var(--text-2); }
.timestamp-value { font-size: 0.8rem; font-weight: 700; color: var(--ink); }

/* 最新値カード */
.latest-value-card-group-label { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-top: 12px; }
.latest-value-card-group-label .material-symbols-outlined { font-size: 1.1em; color: var(--brand); }
.latest-value-card-grid { display: flex; gap: 12px; margin: 6px 0 24px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.latest-value-card:first-child { flex-basis: 340px; }
.latest-value-card { flex: 0 0 250px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.latest-value-card-title { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.latest-value-card-main { display: flex; align-items: baseline; gap: 6px; }
.latest-value-card-number { font-size: 1.6rem; font-weight: 800; color: var(--price); line-height: 1.1; }
.latest-value-card-unit { font-size: 0.75rem; color: var(--text-2); }
.latest-value-card-footer { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.latest-value-card-stat { display: flex; flex-direction: column; gap: 2px; }
.latest-value-card-stat-label { font-size: 0.7rem; color: var(--text-2); }
.latest-value-card-stat-value { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.latest-value-card-note { font-size: 0.72rem; color: var(--text-2); line-height: 1.4; }

/*-------------------------------
一覧(カード)
-------------------------------*/
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.filter-bar-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.filter-bar[hidden] { display: none; }
.indicator-card[hidden], .indicator-group[hidden] { display: none; }  /* audience_filter.js が hidden で絞り込む。display の指定に負けないようにする */
button.sibling-tab { font: inherit; font-size: 0.85rem; line-height: 1.6; cursor: pointer; }
.indicator-group { margin-bottom: 28px; scroll-margin-top: 16px; }
.indicator-group-title { font-size: 1.05em; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 0 0 14px; }
.indicator-group-title a { color: inherit; font-size: inherit; }
.indicator-group-title a:hover { color: var(--brand-dark); }
.indicator-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.indicator-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 12px 16px; color: var(--text); font-size: 0.9em; transition: border-color 0.15s ease, box-shadow 0.15s ease; min-width: 0;
}
.indicator-card:hover { border-color: var(--brand); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); text-decoration: none; }
.indicator-card:hover .indicator-card-label { color: var(--brand-dark); }
.indicator-card-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.indicator-card-label { font-weight: 700; font-size: 1.02em; color: var(--ink); }
.indicator-card-desc { font-size: 0.85em; color: var(--text-2); margin-top: 4px; }
.indicator-card-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.indicator-card-value-number { font-size: 1.15em; font-weight: 800; color: var(--price); line-height: 1.2; }
.indicator-card-value-unit { font-size: 0.75em; color: var(--text-2); }
.indicator-card-date { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 6px; font-size: 0.76em; color: var(--text-2); }
.indicator-card-date .material-symbols-outlined { font-size: 1.1em; }
.indicator-card-flags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* タグ・バッジ(色だけに頼らず、必ず文字で状態を示す) */
.tag { display: inline-block; font-size: 0.75em; font-weight: 600; padding: 1px 8px; border-radius: 10px; line-height: 1.6; background: var(--tag-bg); color: var(--tag-fg); white-space: nowrap; }
.tag-gray { background: var(--badge-bg); color: var(--badge-fg); }
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 1px solid var(--badge-border); background: var(--badge-bg); color: var(--badge-fg); white-space: nowrap; }
.badge .material-symbols-outlined { font-size: 1.15em; }
.badge-ended { background: #efe6e9; border-color: #cdb8bf; color: #5e4a52; font-weight: 600; }
.badge-stale { background: #fff4e0; border-color: #f0c987; color: #8a4b08; }
.label { font-size: 0.72rem; color: var(--badge-fg); border: 1px solid var(--badge-border); border-radius: 4px; padding: 0 5px; white-space: nowrap; background: #fff; }
.price { font-size: 1.15rem; font-weight: 800; color: var(--price); }

/*-------------------------------
表
-------------------------------*/
.table-container { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.compact-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.5; font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; }
.compact-table caption { text-align: left; }
.compact-table thead { background: var(--page); color: var(--text); }
.compact-table th { padding: 8px 12px; text-align: left; font-weight: 600; font-size: 13px; border-bottom: 2px solid var(--line-strong); border-right: 1px solid var(--line-strong); vertical-align: bottom; }
.compact-table th:last-child { border-right: none; }
.compact-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color 0.15s ease; }
.compact-table tbody tr:hover { background-color: var(--page); }
.compact-table tbody tr:nth-child(even) { background-color: var(--page); }
.compact-table td, .compact-table tbody th { padding: 8px 12px; color: var(--text); border-right: 1px solid var(--line); vertical-align: top; font-weight: normal; font-size: 14px; border-bottom: 0; text-align: left; }
.compact-table td:last-child { border-right: none; }
.compact-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.compact-table td.num strong { font-weight: 700; color: var(--ink); }
.compact-table .sub { display: block; font-size: 12px; color: var(--text-2); }
.change-value { display: inline-block; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: var(--tint); color: var(--ink); }
.swatch { display: inline-block; width: 14px; height: 0; border-top: 3px solid var(--text-2); vertical-align: middle; margin-right: 6px; border-radius: 2px; }
.s0 { border-color: var(--series-1); } .s1 { border-color: var(--series-2); } .s2 { border-color: var(--series-3); } .s3 { border-color: var(--series-4); }
.s4 { border-color: var(--series-5); } .s5 { border-color: var(--series-6); } .s6 { border-color: var(--series-7); } .s7 { border-color: var(--series-8); }
details summary { cursor: pointer; font-weight: 600; color: var(--brand-dark); }
details[open] summary { margin-bottom: 12px; }

/*-------------------------------
グラフ
-------------------------------*/
.chart-wrap { position: relative; height: 420px; margin-top: 8px; }
.chart-wrap canvas { width: 100%; height: 100%; }
.chart-wrap canvas:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0; margin: 6px 0 0; }
.legend button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.85rem; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; padding: 3px 12px 3px 8px; cursor: pointer; }
.legend button:hover { border-color: var(--brand); }
.legend button[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.chart-tooltip { position: absolute; z-index: 2; pointer-events: none; min-width: 230px; max-width: 330px; background: #fff; color: var(--text); border: 1px solid var(--axis); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.chart-tooltip .tt-date { font-weight: bold; margin-bottom: 4px; }
.chart-tooltip .tt-row { display: grid; grid-template-columns: 16px 1fr; gap: 0 6px; margin-top: 4px; }
.chart-tooltip .tt-key { display: inline-block; width: 14px; height: 0; border-top: 3px solid; margin-top: 9px; border-radius: 2px; }
.chart-tooltip .tt-value { font-weight: bold; }
.chart-tooltip .tt-name, .chart-tooltip .tt-meta { color: var(--text-2); }

/*-------------------------------
値上げ履歴
-------------------------------*/
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { padding: 12px 0 12px 18px; border-left: 3px solid var(--line-strong); position: relative; margin-left: 6px; }
.timeline > li::before { content: ""; position: absolute; left: -8px; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.timeline .date { font-weight: 700; color: var(--ink); }
.timeline .rate { display: inline-block; margin-left: 6px; font-weight: 700; color: var(--price); }

/*-------------------------------
トップ
-------------------------------*/
.intro-section { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 30px; text-align: center; }
.welcome-title { color: var(--ink); font-size: 2em; font-weight: 700; margin: 0 0 16px; line-height: 1.4; }
.intro-description { font-size: 1.05em; line-height: 1.8; color: var(--text-2); max-width: 760px; margin: 0 auto; }
.stats-bar { display: flex; align-items: center; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; align-items: center; padding: 0 32px; }
.stat-number { font-size: 2.2em; font-weight: 700; color: var(--brand); line-height: 1.1; }
.stat-label { font-size: 0.9em; color: var(--text-2); margin-top: 6px; }
.stat-divider { width: 1px; height: 48px; background: var(--line-strong); flex-shrink: 0; }
.intro-cta { margin-top: 26px; }
.intro-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 26px; border: 2px solid var(--brand); border-radius: 24px; color: var(--brand-dark); font-size: 0.95em; font-weight: 700; }
.intro-cta-btn:hover { background: var(--brand); color: #fff; text-decoration: none; }

.section-title { color: var(--ink); font-size: 1.5em; font-weight: 600; text-align: center; margin: 0 0 24px; border-bottom: 3px solid var(--accent); padding-bottom: 10px; }
.category-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.category-item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; height: 100%; }
.category-link { display: block; color: inherit; transition: transform 0.3s ease; }
.category-link:hover { transform: translateY(-3px); text-decoration: none; }
.category-link:hover .category-item { border-color: var(--accent); box-shadow: 0 6px 16px rgba(184, 78, 116, 0.15); }
.category-item h3 { color: var(--ink); font-size: 1.1em; font-weight: 600; margin: 0 0 6px; }
.category-item p { color: var(--text-2); font-size: 0.88em; line-height: 1.5; margin: 0; }
.category-item .update-badge { align-self: flex-start; margin-top: 10px; display: inline-block; font-size: 0.75em; color: var(--text-2); background: var(--soft); border-radius: 4px; padding: 2px 6px; }
.news-list { display: flex; flex-direction: column; }
.news-link { display: block; color: inherit; border-top: 1px solid var(--line); padding: 10px 6px; }
.news-link:first-child { border-top: 0; }
.news-link:hover { background: var(--page); text-decoration: none; }
.news-item { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.news-item .date { font-size: 0.82rem; color: var(--text-2); min-width: 6.5em; margin: 0; font-variant-numeric: tabular-nums; }
.news-item .name { font-weight: 600; color: var(--ink); flex: 1 1 200px; }
.news-item .value { font-weight: 800; color: var(--price); }
.news-item .src { font-size: 0.78rem; color: var(--text-2); }
.view-all-link { display: inline-block; margin-top: 12px; color: var(--brand-dark); font-size: 0.9rem; font-weight: 600; }

.disclaimer { font-size: 0.85rem; color: var(--text-2); text-align: center; padding: 16px; background: #fff; border-radius: 8px; margin: 0 0 8px; }

/*-------------------------------
footer
-------------------------------*/
.footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.8); margin-top: auto; }
.footer-inner { max-width: 960px; margin: 0 auto; padding: 52px 32px 36px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand-name { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.3px; }
.footer-brand-desc { font-size: 0.83rem; color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin: 0 0 6px; }
.footer-nav-col { display: flex; flex-direction: column; }
.footer-nav-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); margin: 0 0 14px; }
.footer-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list a { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; }
.footer-nav-list a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 32px; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-copyright { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }

/* PC では使わない部品(スマホ用の下部タブ・補助ラベル・日付ボタン) */
.bottom-nav, .m-only, .chart-nav { display: none; }
.pc-only { display: inline; }
.news-item .variant { font-weight: 400; font-size: 0.85em; color: var(--text-2); }
.explanation-note { color: var(--text-2); }

/*-------------------------------
スマホ(〜768px): 「縮小したPC画面」ではなく、スマホで使う前提の作り
  - 下部タブバー / 親指で押せる大きさ(44px以上) / 入力欄は16px(iOSの自動拡大を防ぐ)
  - 表はカードに組み替え / タブ・パンくず・凡例は横スクロール
-------------------------------*/
@media screen and (max-width: 768px) {
  :root { --header-h: 56px; --bottom-nav-h: 60px; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
  body { font-size: 15px; padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: rgba(184, 78, 116, 0.18); }
  .m-only { display: inline; }
  .pc-only { display: none; }

  /* ヘッダー(固定・コンパクト) */
  .header { height: calc(var(--header-h) + env(safe-area-inset-top)); position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: transform 0.3s ease; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
  .header.hidden { transform: translateY(-100%); }
  .header .header-title { padding: env(safe-area-inset-top) 6px 0 16px; }
  .header .site-title { font-size: 1.4rem; white-space: nowrap; }
  .header .site-tagline { display: none; }
  .hamburger-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
  .hamburger-icon .material-symbols-outlined { font-size: 30px; }
  .container { flex-direction: column; padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
  .main { width: 100%; }

  /* ドロワー(メニュー) */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 340px; height: 100%; transform: translateX(-100%); z-index: 1000; transition: transform 0.25s ease; padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
  .sidebar.open { transform: none; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2); }
  .sidebar-close-button { display: block; margin: 0 -8px 4px auto; }
  .sidebar-search-input { font-size: 16px; padding: 12px 36px 12px 12px; border-radius: 10px; }
  .sidebar-search-clear { font-size: 22px; right: 8px; min-width: 32px; min-height: 32px; }
  .sidebar-link { min-height: 48px; font-size: 1rem; margin-bottom: 2px; }
  .sidebar-section-title { font-size: 13px; }
  .menu-details summary { display: flex; align-items: center; min-height: 48px; font-size: 1rem; padding-left: 0; }
  .menu-details summary::before { position: static; margin-right: 0.4em; }
  .menu-details ul li a { display: flex; align-items: center; min-height: 44px; font-size: 0.98rem; margin: 0; }
  .sidebar-group-label { font-size: 12px; margin-top: 10px; }

  /* 下部タブバー(片手で操作できる) */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); }
  .bottom-nav a, .bottom-nav button { flex: 1; min-height: var(--bottom-nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 11px; color: var(--text-2); background: none; border: 0; padding: 0; cursor: pointer; }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav .material-symbols-outlined { font-size: 26px; }
  .bottom-nav .active { color: var(--brand-dark); font-weight: 700; }
  .bottom-nav .active .material-symbols-outlined { color: var(--brand); }

  /* パンくず・タブ・絞り込み: 折り返さず横スクロール */
  .breadcrumb { padding: 0; }
  .breadcrumb-list { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 6px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); }
  .breadcrumb-list::-webkit-scrollbar, .sibling-tabs::-webkit-scrollbar, .legend::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
  .breadcrumb-item { flex: 0 0 auto; font-size: 0.82rem; }
  .breadcrumb-item a { display: inline-block; padding: 8px 0; font-size: 0.82rem; }
  .sibling-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 16px; gap: 8px; scroll-snap-type: x proximity; }
  .sibling-tab { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 0.88rem; white-space: nowrap; scroll-snap-align: center; }
  .sibling-tabs-label { flex: 0 0 auto; font-size: 0.8rem; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 16px; padding: 0 14px; gap: 8px; }
  .filter-bar-label { flex: 0 0 auto; }

  /* コンテンツとカード */
  .content { padding: 14px; }
  .page-header { padding: 14px 16px; margin-bottom: 16px; }
  .page-title { font-size: 1.3em; }
  .page-meta { font-size: 0.8em; }
  .indicator-explanation, .chart-section, .table-section, .section-card { padding: 18px 14px; margin-bottom: 16px; border-radius: 14px; }
  .indicator-title { font-size: 1.3em; padding-bottom: 8px; margin-bottom: 12px; border-bottom-width: 2px; }
  .explanation-summary { padding: 12px 14px; }
  .explanation-summary p { font-size: 0.92em; line-height: 1.7; }
  .explanation-summary .explanation-note { font-size: 0.8em; }
  .chart-section h2, .table-section h2, .section-card h2, .section-heading { font-size: 1.1em; }
  .how-to-read { padding: 14px 16px; margin: 0 0 16px; }
  .how-to-read h2 { font-size: 1rem; }
  .how-to-read p { font-size: 0.88rem; }
  .section-lead { font-size: 0.85rem; }
  .indicator-timestamps { margin-bottom: 14px; }
  .view-all-link { display: inline-flex; align-items: center; min-height: 44px; }
  .disclaimer { font-size: 0.8rem; text-align: left; }

  /* 現在価格のカード: 価格帯は1行目に大きく、最安・最高は横に並べる */
  .latest-value-card-group-label { margin-top: 4px; }
  .latest-value-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; margin-bottom: 16px; }
  .latest-value-card { flex: none; min-width: 0; padding: 12px 14px; }
  .compare-cta-btn { width: 100%; min-height: 44px; }  /* スマホでは、見出しの下に、横いっぱいで折り返す */
  .latest-value-card:first-child { grid-column: 1 / -1; }
  .latest-value-card-number { font-size: 1.3rem; }
  .latest-value-card:first-child .latest-value-card-number { font-size: 1.6rem; }

  /* 一覧のカード: 1列・大きなタップ領域・価格を大きく */
  .indicator-cards { grid-template-columns: 1fr; gap: 10px; }
  .indicator-card { padding: 14px 16px; font-size: 0.95em; }
  .indicator-card-label { font-size: 1.05em; }
  .indicator-card-value-number { font-size: 1.3em; }
  .indicator-card-date { font-size: 0.8em; }
  .category-section { grid-template-columns: 1fr; gap: 10px; }
  .category-section--2col { grid-template-columns: 1fr 1fr; }
  .category-item { padding: 14px; }
  .category-item h3 { font-size: 1em; }
  .category-item p { font-size: 0.82em; }

  /* 表 → カード(横スクロールや、1文字ずつの折り返しをなくす) */
  .table-container { border: 0; overflow: visible; border-radius: 0; }
  .variant-table, .variant-table tbody, .history-table, .history-table tbody { display: block; background: none; }
  .variant-table thead, .history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* 見出しは読み上げ用に残す */
  .variant-table th, .variant-table td, .variant-table tbody th, .history-table th, .history-table td, .history-table tbody th { display: block; padding: 0; border: 0; text-align: left; }
  .variant-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; padding: 14px; margin: 0 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
  .variant-table tbody tr:nth-child(even), .variant-table tbody tr:hover { background: #fff; }
  .variant-table .c-label { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 0.98rem; line-height: 1.45; color: var(--ink); }
  .variant-table .c-label .sub { margin-top: 2px; font-weight: 400; }
  .variant-table .c-price { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .variant-table .c-price strong { display: block; font-size: 1.3rem; line-height: 1.2; }
  .variant-table .c-price .label { display: inline-block; margin-top: 4px; }
  .variant-table .c-meta { grid-column: 1 / -1; font-size: 0.82rem; color: var(--text-2); }
  .variant-table .c-meta .sub { display: inline; margin-left: 10px; font-size: inherit; }
  .variant-table .c-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .variant-table .c-status:not(:has(.badge)) { display: none; }
  .variant-table .c-change { grid-column: 1 / -1; text-align: left; padding-top: 8px; border-top: 1px dashed var(--line); }
  .variant-table tr:has(.badge-ended) { background: var(--page); }
  .variant-table .c-none { grid-column: 1 / -1; color: var(--text-2); }
  .variant-table .c-change:has(.no-change) { display: none; }  /* 変化が出せない(記録1件)ときは、枠ごと隠す */
  .history-table tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--line); background: none; }
  .history-table tbody tr:nth-child(even), .history-table tbody tr:hover { background: none; }
  .history-table .c-label { grid-column: 1 / 3; grid-row: 1; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
  .history-table .c-price { grid-column: 3; grid-row: 1 / 3; align-self: center; text-align: right; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
  .history-table .c-date { grid-column: 1; grid-row: 2; font-size: 0.82rem; color: var(--text-2); }
  .history-table .c-src { grid-column: 2; grid-row: 2; font-size: 0.82rem; color: var(--text-2); }
  .history-table .c-status { grid-column: 1 / -1; grid-row: 3; }
  .history-table .c-status:not(:has(.badge)) { display: none; }

  /* グラフ: 凡例は横スクロールのチップ / ツールチップはグラフ下の固定パネル / 日付ボタン */
  .chart-wrap { height: 300px; touch-action: pan-y; }  /* 縦スクロールは通し、横になぞると日付を選べる */
  .chart-wrap canvas { touch-action: pan-y; }
  .legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 6px -14px 0; padding: 2px 14px 6px; -webkit-overflow-scrolling: touch; }
  .legend li { flex: 0 0 auto; }
  .legend button { min-height: 40px; font-size: 0.85rem; padding: 4px 12px 4px 8px; }
  .chart-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
  .chart-nav button { flex: 1; min-height: 44px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--brand-dark); background: #fff; border: 1px solid var(--line-strong); border-radius: 22px; cursor: pointer; }
  .chart-nav button:disabled { opacity: 0.4; cursor: default; }
  .chart-nav-date { flex: 0 0 auto; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
  .chart-tooltip { position: static; z-index: auto; pointer-events: auto; min-width: 0; max-width: none; margin-top: 10px; box-shadow: none; background: var(--page); border: 1px solid var(--line); font-size: 0.85rem; padding: 4px 14px 12px; }
  .chart-tooltip .tt-date { display: none; }  /* 日付は日付ボタンの間に表示している */
  .chart-tooltip .tt-row { margin-top: 10px; }

  /* トップ */
  .intro-section { padding: 22px 16px; margin-bottom: 16px; }
  .welcome-title { font-size: 1.3em; margin-bottom: 12px; }
  .intro-description { font-size: 0.92em; text-align: left; line-height: 1.75; }
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; margin-top: 20px; }
  .stat-divider { display: none; }
  .stat-item { padding: 0; }
  .stat-number { font-size: 1.9em; }
  .stat-label { font-size: 0.8rem; text-align: center; }
  .intro-cta-btn { display: flex; justify-content: center; width: 100%; min-height: 48px; align-items: center; }
  .section-title { font-size: 1.2em; margin-bottom: 16px; }
  .news-link { padding: 12px 2px; }
  .news-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
  .news-item .name { grid-column: 1 / -1; grid-row: 1; flex: none; }
  .news-item .value { grid-column: 1; grid-row: 2; font-size: 1.15rem; }
  .news-item .date { grid-column: 2; grid-row: 2; text-align: right; min-width: 0; }
  .news-item .src { grid-column: 1 / -1; grid-row: 3; }

  /* フッター */
  .footer-inner { grid-template-columns: 1fr 1fr; padding: 32px 20px 20px; gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-nav-list a { display: inline-block; padding: 4px 0; }
  .footer-bottom { padding: 14px 20px; justify-content: center; }
}
/* ── 比較ページ(商品の選択欄・2つのグラフ・比較表) ── */
.compare-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.picker { margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--page); min-width: 0; }
.picker legend { padding: 0 6px; font-weight: 700; color: var(--ink); }
.picker-field { display: block; margin: 8px 0 0; }
.picker-field[hidden] { display: none; }
.picker-label { display: block; margin-bottom: 2px; font-size: 0.78rem; color: var(--text-2); }
.picker select { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; }
.btn-primary { min-height: 44px; padding: 0 28px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--brand); border: 0; border-radius: 999px; cursor: pointer; }
.btn-primary:hover { background: var(--brand-dark); }
.form-error { margin: 0 0 10px; color: #8a2a2a; font-weight: 600; }
.form-hint { margin: 0 0 10px; color: var(--text-2); font-weight: 600; }
.compare-side h2 { display: flex; align-items: center; gap: 8px; }
.variant-picker { display: block; min-width: 0; margin: 0; }
.chart-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 15px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.chart-section .chart-section-head h2 { margin: 0; padding: 0; border: 0; }  /* 下線は、見出しとボタンの行全体に引く */
.compare-cta-btn { padding: 6px 16px; font-size: 0.88rem; white-space: nowrap; }
.guide-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px; }
.guide-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-dark); font-weight: 600; font-size: 0.92rem; }
.static-page h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--ink); }
.static-page h3 .sub { display: block; font-weight: 400; font-size: 0.82rem; color: var(--text-2); }
.v-primary { font-weight: 600; }
.v-title-variant { display: block; margin-top: 4px; font-size: 0.8em; font-weight: 600; color: var(--brand-dark); }
.variant-spec { margin: 0 0 8px; }
.variant-card .indicator-card-desc { display: flex; flex-direction: column; gap: 2px; }
.variant-card .v-code { font-size: 0.78rem; color: var(--muted); }
.variant-card-change { color: var(--text-2); }
.indicator-card.is-static { cursor: default; background: var(--page); }
.indicator-card.is-static:hover { transform: none; box-shadow: none; border-color: var(--line); }
.v-material { font-weight: 400; overflow-wrap: anywhere; }  /* 素材の名前は長いことがある(最長45字)ので、折り返す */
.variant-picker select { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; }
.compare-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.compare-selects:empty { display: none; }
.compare-table th[scope="row"] { white-space: nowrap; background: var(--page); }
.compare-table td { min-width: 140px; }
.featured-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.featured-list .sub { display: block; font-size: 0.85rem; color: var(--text-2); }
@media screen and (max-width: 768px) {
  .compare-pickers, .compare-selects { grid-template-columns: 1fr; gap: 12px; }
  .btn-primary { width: 100%; }
  .compare-table th[scope="row"] { white-space: normal; min-width: 5.5em; }
  .compare-table td { min-width: 0; }
}

/* ── 静的ページ(about・データについて・プライバシー・お問い合わせ・404) ── */
.static-page h2 { margin: 28px 0 8px; font-size: 1.1rem; color: var(--ink); padding-left: 10px; border-left: 4px solid var(--accent); }
.static-page p, .static-page li { line-height: 1.9; }
.static-list { margin: 0 0 8px; padding-left: 0; }
.static-list li { position: relative; padding-left: 1.2em; margin: 4px 0; list-style: none; }
.static-list li::before { content: ""; position: absolute; left: 0.3em; top: 0.95em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.static-page .table-container { margin: 8px 0 16px; }
.contact-box { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; margin: 8px 0; background: var(--page); border: 1px solid var(--line-strong); border-radius: 10px; font-size: 1.05rem; }
.footer-brand-desc a { color: inherit; text-decoration: underline; }

@media screen and (max-width: 360px) {
  .category-section--2col { grid-template-columns: 1fr; }
  .variant-table .c-price strong { font-size: 1.15rem; }
}