/*
 * 価格比較.JP v6 — 白ベースの明るい配色。
 * ベースは白と青みの薄いグレー、アクセントは深いティール1色。広い面に彩度を使わず、
 * 色を持つのはアクセント・データ（気温の色・グラフの2系列）だけ。グレーは青み系で統一。
 * 角丸は 12px / 8px の2段、間隔は 8px の倍数。文字は全組み合わせで WCAG AA（4.5:1）以上を計算で確認済み。
 */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f4f7f9;
  --line: #e3e8ee;
  --line-2: #cfd8e3;
  --text: #0f1b2d;
  --dim: #4b5b70;
  --faint: #5f6b7d;
  --accent: #b8141f;
  --accent-ink: #96101a;
  --accent-soft: #fdeced;
  --accent-rgb: 184, 20, 31;   /* 薄い枠・影の色（rgba で使う） */
  --accent-2: #d63a3a;         /* 印・見出しのグラデーションの明るい側 */
  /* 文字でない面（ボタン・1位の印・Q の印・見出しの横の線・点・チェック）。楽天は --accent と同じ。Yahoo は #E66500（v6.91。v6.90 は #FF8400） */
  --accent-fill: #b8141f;
  --accent-fill-hover: #96101a;
  --on-fill: #fff;              /* 面の上の文字 */
  --good-ink: #0b6572;
  --good-soft: #e6f4f5;
  --warm: #f59e6b;
  --warn-ink: #9a4a07;
  --warn-bg: #fdf1e1;
  /* グラフの2系列（dataviz の検証済み・白い面で全項目合格） */
  --s1: #0e8fa3;
  --s2: #d0782c;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 4px 16px rgba(15, 27, 45, .06);
  --shadow-2: 0 2px 4px rgba(15, 27, 45, .05), 0 12px 32px rgba(15, 27, 45, .10);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;   /* 本文は端末の字（日本語のWebフォントは文字ごとに分かれていて、トップでは100個以上読み込んでいた。2026-10-09） */
  --head: 'IBM Plex Sans JP', var(--sans);   /* 見出しだけ IBM Plex Sans JP（字の種類が少ないので読み込みが少ない） */
  color-scheme: light;
}

/* Yahoo!ショッピングのページ（/yahoo/ の下。2026-11-05 v6.86 ユーザー指示「色はヤフーショッピングのオレンジで」）。
 * v6.90（2026-11-06 ユーザー指示「ヤフーショッピングのトップのおすすめについている色のオレンジがヤフーのいろなので、このオレンジを基調とした色に」）:
 * Yahoo!ショッピングのトップの「おすすめ」・ログインのボタンの色 #FF8400（色相31°。2026-11-06 にページの計算後の色で確認）を、
 * ボタン・1位の印・Q の印・ヘッダーの線・見出しの横の線・点・チェックの面にそのまま使う（--accent-fill）。
 * #FF8400 に白い文字は 2.46:1 で AA に届かないので、面の上の文字は濃い色（--text・7.0:1）。
 * 白地の文字（リンク・小見出し・値段）は同じ色合いで AA に届く濃さ（--accent #AD5A00 は白地 4.95:1・背景 4.66:1・薄い面 #FFF3E5 の上 4.53:1）。
 * 選んだタブ・チェックの文字・1位の値段（--accent-ink）も焦げ茶に見えないよう #A35400（白地 5.49:1・薄い面 5.02:1）。
 * 大きな見出しの「単価」は大きい文字の 3:1 を守る濃さ（#E07400 は 3.15:1・#C26400 は 4.10:1）
 * v6.91（2026-11-06 ユーザー指示「オレンジはもう少し濃いオレンジで」）: 面を #FF8400 から濃いオレンジ #E66500（色相26°）に。
 * 文字の色もすべて同じ色相26〜27°にそろえた（--accent #B35000 は白地 5.17:1・背景 4.86:1・薄い面 #FFF0E5 の上 4.64:1、--accent-ink #A84A00 は白地 5.76:1・薄い面 5.17:1）。
 * 面の上の文字は濃い色のまま（#E66500 に濃い色 5.12:1・白は 3.37:1 で AA 未満）。押す前の色 #D86000 も濃い色 4.60:1 */
body.src-y {
  --accent: #b35000;
  --accent-ink: #a84a00;
  --accent-soft: #fff0e5;
  --accent-rgb: 230, 101, 0;
  --accent-2: #e66500;
  --accent-fill: #e66500;
  --accent-fill-hover: #d86000;
  --on-fill: #0f1b2d;
}
body.src-y .top { border-bottom: 3px solid #e66500; }
/* 冒頭はスマホ幅で右上の光の玉（.hero::after）が文字の後ろに重なり、白地より暗くなる（点検役が画素で測った: 小見出し #AD5A00 は 4.33:1・「単価」の #E07400 は 2.91:1）。
 * 冒頭の小見出しは光の上でも 4.5:1 を割らない濃さ（v6.91 は #9A4500・白地 6.51:1）、「単価」は #D45F00→#C45700（白地 3.86:1〜4.46:1。v6.90 の #D06C00 は光の上で約 3.3:1・白地 3.6:1） */
body.src-y .hl { background-image: linear-gradient(135deg, #d45f00, #c45700); }
body.src-y .hero .eyebrow { color: #9a4500; }
body.src-y .mark { background: linear-gradient(135deg, #ff8a3d, #e66500); }
body.src-y .btn:not(.ghost):hover { border-color: var(--accent-fill-hover); }   /* 枠だけのボタンは楽天と同じ淡い枠のまま */
/* v7.30（2026-11-11 ユーザー指示「ヤフーのページでyahooで見るのボタンの色が濃い」→ 3案から案1「明るいオレンジ」）。
 * 「Yahoo!で見る」（.item-go）だけ #FF9A4D の地に濃い文字（8.22:1）。押す前は #FF8A33（7.35:1）。ほかのボタンは #E66500 のまま */
body.src-y .item-go:not(.ghost) { background: #ff9a4d; border-color: #ff9a4d; box-shadow: none; }
body.src-y .item-go:not(.ghost):hover { background: #ff8a33; border-color: #ff8a33; box-shadow: 0 4px 12px rgba(230, 101, 0, .2); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.8 var(--sans);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.3; letter-spacing: .02em; margin: 0; font-weight: 700; color: var(--text); }
h1 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h3 { font-size: 1rem; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--dim); }
.small { font-size: .8125rem; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 16px; border-radius: var(--r-sm); z-index: 99; }
.skip:focus { left: 8px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- ヘッダー ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--mono); font-weight: 600; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand-t b { color: var(--accent); font-weight: 600; }
.mark { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--accent-2), var(--accent-ink)); }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--dim); font-size: .875rem; padding: 8px 12px; border-radius: var(--r-sm); }
.nav a:hover, .nav a[aria-current] { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
@media (max-width: 640px) { .nav a { padding: 8px; font-size: .8125rem; } .nav .nav-live { display: none; } }

.ticker { border-top: 1px solid var(--line); background: var(--surface-2); }
.ticker-in { display: flex; gap: 24px; height: 32px; align-items: center; font: 500 .75rem/1 var(--mono); color: var(--dim); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); letter-spacing: .12em; }
.live i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-fill); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.sample-bar { background: var(--warn-bg); border-bottom: 1px solid #f3d9b5; color: var(--warn-ink); font-size: .8125rem; padding: 8px 0; }

/* ---------- 見出し・節 ---------- */
.eyebrow { font: 600 .75rem/1 var(--mono); letter-spacing: .18em; color: var(--accent); margin-bottom: 8px; }
.lead { color: var(--dim); font-size: 1rem; max-width: 64ch; margin-top: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.meta span { font: 500 .75rem/1 var(--mono); color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }

.hero { position: relative; overflow: hidden; padding: 48px 0 36px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); opacity: .7; pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 640px; height: 640px; right: -160px; top: -260px; background: radial-gradient(circle at 40% 40%, rgba(var(--accent-rgb), .14), transparent 60%), radial-gradient(circle at 70% 70%, rgba(245, 158, 107, .16), transparent 60%); filter: blur(30px); pointer-events: none; }
.hero-in { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2rem, 5.4vw, 3.5rem); letter-spacing: .01em; }
.hl { background: linear-gradient(135deg, var(--accent-2), var(--accent-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-alt { margin-top: 12px; font-size: .875rem; }   /* 楽天のトップ ⇄ Yahoo のトップ（2026-11-05） */
/* 矢印は文字のすぐ後ろ（すき間・押す前の右へのずれがあると、下線が矢印の前で切れた。2026-11-06 ユーザー指示「矢印前の半角スペース削除」） */
.hero-alt a { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 640px) { .hero { padding: 24px 0 20px; } }

.section { padding: 40px 0; }
.section.tight { padding: 24px 0; }
.section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 + p, .section h2 + .muted { margin-top: 8px; }
@media (max-width: 640px) { .section { padding: 24px 0; } .section.tight { padding: 16px 0; } }
.sec-head { margin-bottom: 16px; }
.sec-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sm-h { font-size: 1rem; margin-bottom: 16px; }

.page-head { padding: 24px 0 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -240px; background: radial-gradient(circle, rgba(var(--accent-rgb), .10), transparent 62%); filter: blur(24px); pointer-events: none; }
.page-head .wrap { position: relative; z-index: 1; }
.crumb { display: flex; gap: 8px; flex-wrap: wrap; font: .8125rem/1.4 var(--mono); color: var(--faint); margin-bottom: 12px; }
.crumb a { color: var(--dim); }

/* ---------- 品目カード ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-cat { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-top .tag { flex: none; white-space: nowrap; align-self: flex-start; }
.card-cat.ck { word-break: keep-all; overflow-wrap: anywhere; }   /* 中古ゲーム機の機種名は語の切れ目（<wbr>）でだけ折る */
.card-price.ckp { flex-wrap: wrap; }
.card-price.ckp .ckbr { display: none; }
.card-price.ckp .tag.ph { visibility: hidden; }
/* 中古の印は1つの段にまとめる（容量「128GB」と「送料別」の2つでも段を増やさない。隣のカードと高さをそろえる。2026-11-05 v6.88） */
.board.gd .card-price.ckp .ckm { grid-column: 1 / -1; display: flex; gap: 4px; min-width: 0; }
.board.gd .card-price.ckp .ckm .tag { grid-column: auto; }
/* 中古の機種名はパソコンでも2行まで（「iPhone 18 Pro Max」が「iPhone 18 Pro …」と切れて Pro と見分けられなかった。v6.88）。どのカードも2行ぶんの高さ */
.board.gd .card-cat.ck { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; min-height: 2.6em; }
/* 中古の容量ごとの最安の箱: 相場の行（v6.88） */
.stats.vars .var-md { margin: 4px 0 0; font-size: .75rem; line-height: 1.5; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 中古の種類の切り替え（ゲーム機・Apple製品・スマホ・タブレット。v6.88）。機種のページの下では、いまの種類を薄く強調 */
.family.gsw { margin: 16px 0 0; }
/* 中古の一覧の上の種類のボタン（ゲーム機・Apple製品・スマホ・タブレット。v6.89 で1ページに）。文字数で幅を変えず4つ同じ幅。スマホでも1行に収める */
.genre-nav.gtab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; overflow: visible; }
.genre-nav.gtab a { justify-content: center; padding: 8px 6px; white-space: nowrap; }
@media (max-width: 360px) { .genre-nav.gtab a { padding: 8px 2px; font-size: .8125rem; } }   /* 幅320pxで「Apple製品」が枠に寄った */
.anc { display: block; height: 0; scroll-margin-top: 108px; }   /* 載せる機種の無い分類の行き先（中古の一覧） */
.family.gsw a.on { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); color: var(--accent-ink); }
.item-sub .tag.var { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .card-price.ckp .ckbr { display: block; flex-basis: 100%; height: 0; } .card-price.ckp { row-gap: 4px; } }   /* スマホでは印をいつも値段の下の段に（カードごとに折り返しが変わって高さがずれた） */   /* 中古ゲーム機の発売年・終売の印は1行のまま（スマホで「1990年」が2行に割れた。2026-11-05 v6.87） */
.card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.card-price b { font: 600 2rem/1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.card-price span { font: 500 .75rem/1 var(--mono); color: var(--dim); white-space: nowrap; }
.card-name { font-size: .8125rem; color: var(--dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.spark { width: 100%; height: 40px; margin-top: 8px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; font: .75rem/1 var(--mono); color: var(--faint); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.card-foot .delta { white-space: nowrap; }
.card-foot { min-height: 33px; }   /* 前日比の印（.delta）が無いカード（推移が1日分の新しい品目など）も、印のあるカードと同じ高さに（2026-11-05） */
/* ふるさと納税の還元率ランキングのカード（2026-10-31 v6.74）: 順位の角丸四角＋品目名。3位までは塗り */
.fcard .card-top { justify-content: flex-start; }
.card-rk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; border-radius: 6px; font: 600 .75rem/1 var(--mono); color: var(--accent-ink); background: var(--accent-soft); }   /* 幅は3桁（100位〜）に合わせて固定。桁数で品目名の始まりがずれない */
.card-rk.top { color: var(--on-fill); background: var(--accent-fill); }
.card-rk.none { visibility: hidden; }   /* 還元率の無い品目も同じ位置から品目名を始める */
@media (max-width: 359px) { .fcard .card-price span { flex-basis: 100%; } }   /* 320px では「還元率の目安」が折り返し、折り返さない「/1万円」のカードと高さがずれた → いつも次の行に */
/* 「全部見る」: 1行ぶんの帯（列の数が画面幅で変わっても、カードの並びに空きを作らない） */
.card-more { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.card-more b { font-size: .9375rem; color: var(--accent-ink); }
.card-more span { flex: none; font: 600 .8125rem/1 var(--mono); color: var(--dim); }
.genre-note { display: block; margin-top: 4px; font-size: .75rem; font-weight: 400; color: var(--dim); }
.delta { font: 600 .75rem/1 var(--mono); padding: 4px 8px; border-radius: 6px; }
.delta.down { color: var(--good-ink); background: var(--good-soft); }
.delta.up { color: var(--warn-ink); background: var(--warn-bg); }
.delta.flat { color: var(--faint); background: var(--surface-2); }

/* ---------- 気温 ---------- */
/* 気温の色は白地の文字としては薄い段（黄など）があるので、色は淡い面と左の目印で見せ、数字は本文色にする */
.temp { display: inline-flex; align-items: baseline; gap: 2px; font: 600 1rem/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 5px 8px 5px 10px; border-radius: 6px; background: color-mix(in srgb, var(--t) 20%, #fff); box-shadow: inset 3px 0 0 var(--t); }
.temp small { font-size: .7em; color: var(--dim); font-weight: 500; }
.temps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.temps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.temps .rk { font: 600 .875rem/1 var(--mono); color: var(--faint); width: 16px; }
.temps .tn { flex: 1; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.temps .tn a { color: var(--text); font-weight: 700; }
.temps .tn small { color: var(--dim); font-size: .75rem; }
.temps .temp { font-size: 1.25rem; }
.cold-line { margin-top: 16px; font-size: .875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.two h2 { margin-bottom: 16px; font-size: 1.125rem; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.region { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.region h3 { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; color: var(--dim); margin-bottom: 12px; }
.region ul { list-style: none; margin: 0; padding: 0; }
.region a { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; color: var(--text); font-size: .9375rem; }
.region a:hover { background: var(--surface); text-decoration: none; }
.region .temp { font-size: .875rem; padding: 3px 6px 3px 8px; }

/* ---------- 表 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tbl th { font: 600 .75rem/1.2 var(--mono); letter-spacing: .06em; color: var(--dim); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: var(--surface-2); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #f9fbfc; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .temp { font-size: .9375rem; }

/* ---------- 統計 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow); }
.stats dt { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
.stats dd { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.stats dd b { font: 600 1.75rem/1 var(--mono); letter-spacing: -.02em; }
.stats dd b.sm { font-size: 1.125rem; }
.stats dd span { font: .75rem/1 var(--mono); color: var(--dim); }
.stats dd .cap { flex-basis: 100%; }   /* ガジェットの「何あたり・容量」は値段と円の下の段（gadget.php の $capLine） */
/* ガジェットの最安・相場: 値段と「円」が枠に入らない長さ（320px の画面の 121,081 など）のときだけ字を縮める（--n＝値段の字数。等幅の数字は1字 0.6em） */
.stats .fit { container-type: inline-size; }
.stats .fit dd b { font-size: min(1.75rem, calc((100cqi - 6px - .75rem) / (var(--n, 7) * .6))); }
@media (max-width: 640px) { .stats .fit dd b { font-size: min(1.375rem, calc((100cqi - 6px - .75rem) / (var(--n, 7) * .6))); } }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats.st-top { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 稼働状況の上の6枠（楽天・Yahoo・Amazon・更新係・最後の実行・気温。v7.41） */
@media (max-width: 1000px) { .stats.st-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats.st-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ディズニーの数字のカードは、どれも「値」の段と「説明」の段の2段（スマホで説明が横に並ぶカードと下に回るカードがあった。v6.97）。値の段は同じ高さで下ぞろえ */
.dn-stats { grid-auto-rows: 1fr; }   /* どの段のカードも同じ高さ（スマホで2段目が1段目より低かった。2026-11-10 v7.21 ユーザー指示） */
.dn-stats dd { flex-direction: column; align-items: flex-start; gap: 6px; }
.dn-stats dd b, .dn-stats dd b.sm { display: flex; align-items: flex-end; height: 1.75rem; line-height: 1; white-space: nowrap; }
.dn-stats dd b small { font: 500 .75rem/1 var(--mono); color: var(--dim); margin-left: 3px; }
/* 4つの数字（開園時間・ランド・シー・更新）は同じ大きさ。カードの幅に合わせていちばん大きく（「9:00〜21:00」が1行に入る大きさ。2026-11-11 v7.35 ユーザー指示「もう少しフォントサイズ大きく全てフォントサイズは統一」） */
.dn-stats > div { container-type: inline-size; }
.stats.dn-stats dd b, .stats.dn-stats dd b.sm { font-size: min(2rem, 100cqi / 6.3, (100cqi - 46px) / 3); height: auto; min-height: 1.75rem; }   /* 後ろは「140分 19分」が幅 320px の端末でも入る大きさ（v7.37） */
.dn-stats dd b .til { font-style: normal; font-size: .7em; margin: 0 .05em; }
.dn-stats dd.two { display: grid; grid-template-columns: minmax(max-content, 1fr) 1fr; column-gap: 12px; row-gap: 6px; align-items: end; width: 100%; }   /* 最高と平均の2列（v7.38）。説明は各数字の真下。平均は枠の真ん中から＝数字の桁で動かない。狭い枠では「その日の最高」が割れない幅のすぐ右（2026-11-13 v7.43 ユーザー指示「平均時間の位置左にずらして」。比較画像の候補C） */
@container (max-width: 130px) { .dn-stats dd.two { grid-template-columns: 1fr 1fr; } }   /* 幅 320px の端末: 説明を折り返して枠に収める（v7.43） */
.dn-stats dd span { line-height: 1.4; word-break: auto-phrase; overflow-wrap: anywhere; max-width: 100%; }

/* ---------- 推移グラフ ---------- */
.chart { position: relative; margin: 0; padding: 16px 16px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.chart-scroll { overflow-x: auto; }
.chart svg { width: 100%; min-width: 760px; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { font: 13px var(--mono); fill: var(--faint); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .line.s1 { stroke: var(--s1); }
.chart .line.s2 { stroke: var(--s2); }
.chart .dl { font: 500 14px var(--mono); fill: var(--dim); }
.chart .xhair { stroke: var(--line-2); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font: .75rem/1 var(--mono); color: var(--dim); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.k { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.k.s1 { background: var(--s1); }
.k.s2 { background: var(--s2); }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 12px; font: .75rem/1.6 var(--mono); color: var(--text); box-shadow: var(--shadow-2); white-space: nowrap; transform: translate(-50%, -110%); }
.tip i { display: inline-block; width: 10px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---------- 商品リスト ---------- */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item { display: grid; grid-template-columns: 28px 60px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .2s ease, border-color .2s ease; }
.item:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.item.best { border-color: rgba(var(--accent-rgb), .40); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 45%); box-shadow: var(--shadow); }
.item-rk { font: 600 1.125rem/1 var(--mono); color: var(--faint); text-align: center; }
.item.best .item-rk { color: var(--accent-ink); }
.item-img { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.item-img img { width: 64px; height: 64px; object-fit: contain; background: #fff; }
.item-name { color: var(--text); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-name:hover { color: var(--accent-ink); }
.item-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--dim); margin-top: 4px; }
.item-basis { font: .8125rem/1.5 var(--mono); color: var(--dim); margin-top: 4px; }
.tag { font: 500 .6875rem/1 var(--mono); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; color: var(--dim); background: var(--surface); }
.tag.warn { color: var(--warn-ink); border-color: #f0cf9f; background: var(--warn-bg); }
.item-unit { text-align: right; white-space: nowrap; }
.item-unit b { display: block; font: 600 1.5rem/1 var(--mono); letter-spacing: -.02em; }
.item.best .item-unit b { color: var(--accent-ink); }
.item-unit span { font: .6875rem/1 var(--mono); color: var(--dim); }
@media (max-width: 760px) {
  .item { grid-template-columns: 24px 56px minmax(0, 1fr) auto; gap: 12px; }
  .item-img, .item-img img { width: 56px; height: 56px; }
  .item-go { grid-column: 3 / -1; justify-self: start; }
}
.more { margin-top: 24px; }
.more summary { cursor: pointer; color: var(--dim); padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); list-style: none; background: var(--surface); }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "＋ "; color: var(--accent); }
.more[open] summary::before { content: "－ "; }
.more .items { margin-top: 12px; }
.disclosure { font-size: .75rem; color: var(--faint); margin-top: 24px; }
.drops { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 4px; max-width: 360px; }
.drops li { display: flex; justify-content: space-between; font-size: .875rem; border-bottom: 1px solid var(--line); padding: 6px 0; }
.drops b { font-family: var(--mono); font-weight: 500; }
.section.alt .narrow > p + p, .section.alt .narrow > h2 + p { margin-top: 16px; }
.section.alt .narrow > h2 { margin-bottom: 8px; }

/* ---------- ボタン・チップ ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-sm); background: var(--accent-fill); color: var(--on-fill); font-weight: 700; font-size: .9375rem; border: 1px solid var(--accent-fill); cursor: pointer; box-shadow: 0 1px 2px rgba(var(--accent-rgb), .25); transition: background .2s ease, box-shadow .2s ease; }
.btn:hover { text-decoration: none; background: var(--accent-fill-hover); box-shadow: 0 4px 12px rgba(var(--accent-rgb), .25); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); color: var(--accent-ink); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .8125rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-size: .875rem; background: var(--surface); }
.chip:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); text-decoration: none; }

/* ---------- 計算機・フォーム ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc fieldset { margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 16px; display: grid; gap: 12px; min-width: 0; box-shadow: var(--shadow); }
.calc legend { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; color: var(--accent); padding: 0 8px; }
.calc label, .form label { display: grid; gap: 6px; font-size: .8125rem; color: var(--dim); }
input, textarea { font: 400 1rem/1.5 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; width: 100%; }
input::placeholder, textarea::placeholder { color: #9aa6b5; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calc input { font-family: var(--mono); }
.calc output { font: 600 1.25rem/1.2 var(--mono); padding-top: 8px; border-top: 1px solid var(--line); }
.calc output.win { color: var(--accent-ink); }
.calc-result { grid-column: 1 / -1; padding: 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--dim); }
.calc-result b { color: var(--accent-ink); }
@media (max-width: 640px) { .calc { grid-template-columns: 1fr; } }
.form { display: grid; gap: 16px; margin-top: 24px; }
.form .btn { justify-self: start; }
.form-msg { font-size: .875rem; color: var(--warn-ink); min-height: 1.5em; }
.thanks { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.kv { display: grid; grid-template-columns: 8em 1fr; gap: 8px 16px; margin: 16px 0 24px; }
.kv dt { color: var(--dim); font-size: .875rem; }
.kv dd { margin: 0; }
.pre { white-space: pre-wrap; word-break: break-word; }

/* ---------- 手順・本文 ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 600 1.125rem/1.4 var(--mono); color: var(--accent); }
.steps b { font-weight: 700; }
.steps span { color: var(--dim); font-size: .9375rem; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.1875rem; margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose p + p { margin-top: 16px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 4px; }
.log { list-style: none; padding: 0; margin: 0; }
.log li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.log-head { display: flex; gap: 16px; color: var(--dim); font-size: .875rem; margin-bottom: 8px; }

/* ---------- 稼働状況 ---------- */
.state { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; }
.state i { width: 10px; height: 10px; border-radius: 3px; }
.state.ok { color: var(--good-ink); }
.state.ok i { background: var(--good-ink); }
.state.ng { color: var(--warn-ink); }
.state.ng i { background: var(--warm); }
.ticklog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticklog li { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: start; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .8125rem; }
.ticklog pre { margin: 0; font: .75rem/1.6 var(--mono); color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }   /* 長い URL でスマホの横にはみ出していた（v7.41） */

/* ---------- フッター ---------- */
.foot { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 20px; }
.foot-in { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot-in p { margin-top: 12px; font-size: .875rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: flex-start; }
.foot-nav a { color: var(--dim); font-size: .875rem; }
.foot-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--faint); display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 検索 ---------- */
.search { display: flex; gap: 8px; max-width: 560px; }
.search input { flex: 1; min-width: 0; }
.search .btn { flex-shrink: 0; }
.hero-search { margin-top: 16px; }
.hero-search input { min-height: 52px; font-size: 1.0625rem; box-shadow: var(--shadow); }
.hero-search .btn { min-height: 52px; padding: 0 24px; }
.search.big { margin-top: 20px; max-width: 720px; }
.search.big input { min-height: 52px; font-size: 1.0625rem; }
.search.big .btn { min-height: 52px; }
.result-group + .result-group { margin-top: 24px; }
.result-group h2 { font-size: 1.125rem; }
.result-group h2 a { color: var(--text); }
.more-link { margin-top: 12px; font-size: .875rem; }
.nav-search { display: inline-flex; align-items: center; gap: 6px; }
/* ディズニーのタブ（2026-11-07 v6.97 ユーザー指示「PC版はホテルと気温の間にディズニー」「トップからタブの気温をクリックしている数を調べて。少ないならディズニーと入れ替える」
 * → 10/24〜11/6 にトップから気温へ移ったのは3回（ガジェット44・家電22・ホテル8）だったので、スマホは気温の代わりにディズニー） */
@media (max-width: 640px) { .nav .nav-kion { display: none; } }
/* ライブの帯の下のディズニーへの帯（スマホだけ。ヘッダーの外に置き、画面の上に貼り付けない。ディズニーのページでは出さない。v6.97 ユーザー指示「待ち時間と混雑予想カレンダーのリンクをLIVEの下に」） */
/* v7.17 ユーザー指示「新サービス ディズニーランド・シーの…」「PC版では横サイズが広くなると表示されないので表示されるように」→ PCでも出す・札を付ける */
.dn-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.dn-strip a { display: flex; align-items: center; gap: 8px; min-height: 40px; font: 600 .8125rem/1.3 var(--sans); color: var(--accent-ink); }
.dn-strip a:hover { text-decoration: none; }
.dn-strip a:hover .t { text-decoration: underline; }
.dn-strip .new { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font: 700 .75rem/1.4 var(--sans); }
.dn-strip .t { min-width: 0; word-break: auto-phrase; }
.dn-strip svg { flex: none; }
@media (max-width: 640px) { .dn-strip .t { flex: 1; } }
/* v7.29 ディズニーの帯の下の Yahoo!ショッピングへの帯（.y-strip）。色はディズニーの帯と同じ（2026-11-11 ユーザー指示「楽天のところにいるので色はディズニーと揃えて」。最初はオレンジだった） */
.nav-search svg { flex-shrink: 0; }

/* ---------- ジャンル ---------- */
.genre-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -8px 0 8px; padding-bottom: 4px; }
.genre-nav::-webkit-scrollbar { display: none; }
.genre-nav a { flex-shrink: 0; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .875rem; }
.genre-nav a:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); text-decoration: none; }
.genre-h { font-size: 1rem; margin: 20px 0 10px; padding-left: 12px; border-left: 3px solid var(--accent-fill); scroll-margin-top: 108px; }

/* ---------- スマホ（主な閲覧環境） ---------- */
@media (max-width: 640px) {
  .top-in { height: 52px; }
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; }
  .nav-search span { display: none; }
  .nav-search { padding: 8px 10px !important; }
  .hero h1 { font-size: 1.875rem; }
  .hero .lead { font-size: .9375rem; }
  .hero-search { margin-top: 20px; }
  .hero-search .btn, .search.big .btn { padding: 0 16px; }
  .sec-head { margin-bottom: 20px; }

  /* 品目カードは2列でコンパクトに */
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* 1fr だと中身の長いカードが列を押し広げ、左右の幅がずれる */
  .card { padding: 14px; gap: 6px; min-width: 0; }
  .card-cat { font-size: .875rem; }
  .card-price { margin-top: 4px; flex-wrap: wrap; gap: 2px 6px; }
  .card-price b { font-size: 1.5rem; }
  .card-price span { font-size: .6875rem; }
  .card-name { font-size: .75rem; }
  .spark { height: 28px; margin-top: 4px; }
  .card-foot { font-size: .6875rem; padding-top: 8px; min-height: 27px; }
  .card-foot .delta { padding: 3px 6px; }

  /* 商品の行: 上に「順位・画像・商品名」、下に「単価・ボタン」 */
  .item { grid-template-columns: 22px 56px minmax(0, 1fr); grid-template-areas: "rk img body" "unit unit go"; gap: 10px 12px; padding: 14px; }
  .item-rk { grid-area: rk; align-self: start; padding-top: 4px; font-size: 1rem; }
  .item-img { grid-area: img; align-self: start; }
  .item-body { grid-area: body; }
  .item-name { font-size: .9375rem; -webkit-line-clamp: 3; }
  .item-unit { grid-area: unit; text-align: left; display: flex; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
  .item-unit b { display: inline; font-size: 1.375rem; }
  .item-go { grid-area: go; grid-column: auto; justify-self: end; align-self: end; min-height: 40px; }
  .item-basis { font-size: .75rem; }

  .stats { gap: 8px; margin-top: 24px; }
  .stats div { padding: 12px; }
  .stats dd b { font-size: 1.375rem; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .tbl th, .tbl td { padding: 8px 10px; }
  .tbl td small { display: none; }
  .temps { grid-template-columns: 1fr; gap: 8px; }
  .temps li { padding: 12px 14px; }
  .page-head { padding: 32px 0 28px; }
  .page-head h1 { font-size: 1.5rem; }
  .crumb { margin-bottom: 16px; }
  .actions .btn { flex: 1; }
}

/* ナビの短い名前（スマホ用） */
.nav .sm { display: none; }
.brand { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .nav .lg { display: none; }
  .nav .sm { display: inline; }
  .nav a { font-size: .875rem; padding: 8px 10px; }
}

/* ---------- 絞り込み（品目ページ）: スクロールしても上に残す ---------- */
.filters { position: sticky; top: 92px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 0; margin-bottom: 8px; background: var(--bg); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .875rem; user-select: none; }
.check input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent-fill); border-radius: 4px; }
.check small { color: var(--dim); font-family: var(--mono); }
.check:has(input:checked) { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .45); color: var(--accent-ink); font-weight: 600; }
.filters-count { font-size: .8125rem; color: var(--dim); margin-left: auto; }
.tag.ok { color: var(--good-ink); background: var(--good-soft); border-color: #b9dfe2; }
.note { font-size: .75rem; color: var(--faint); margin-top: 12px; line-height: 1.7; }
.unparsed { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.unparsed li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .8125rem; overflow-wrap: anywhere; }   /* 「1200MB/s/1300MB/s/…」のような切れ目の無い名前で横にはみ出さない */
.unparsed a { color: var(--text); }
.unparsed small { color: var(--faint); }
.more { margin-top: 16px; }
.credit { font-size: .75rem; color: var(--faint); }
.credit a { color: var(--dim); text-decoration: underline; }
@media (max-width: 640px) {
  .filters { top: 84px; }
  .filters-count { width: 100%; margin-left: 0; }
  .item { padding: 12px; gap: 8px 10px; }
  .card { padding: 12px; }
}
@media (max-width: 640px) {
  .check { padding: 0 10px; gap: 6px; font-size: .8125rem; min-height: 38px; }
  .check input { width: 16px; height: 16px; }
}
/* 検索欄は品目一覧の見出しの下（2026-09-26 ユーザー指示でヒーローから移動） */
.board-search { max-width: 640px; }
.board-search input { min-height: 48px; font-size: 1rem; box-shadow: var(--shadow); }
.board-search .btn { min-height: 48px; padding: 0 22px; }
.board-meta { margin: 10px 0 16px; }
@media (max-width: 640px) { .board-search .btn { padding: 0 16px; } .board-meta { margin: 8px 0 12px; } }
.nw { white-space: nowrap; }

/* ---------- LIVE の帯: 品目数・商品数・更新時刻を横に流す（2026-09-26 ユーザー指示） ---------- */
.ticker-in { overflow: hidden; gap: 16px; }
.live { flex-shrink: 0; }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-move { display: inline-flex; white-space: nowrap; animation: ticker 32s linear infinite; }
.ticker-set { display: inline-flex; gap: 32px; padding-right: 32px; }
.ticker-set span::before { content: "・"; margin-right: 8px; color: var(--accent); opacity: .7; }
.ticker:hover .ticker-move { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .ticker-set[aria-hidden] { display: none; }
}
.board-search { margin-bottom: 14px; }

/* ---------- 楽天で探す: 市場・ブックス・トラベルのタブと、その場検索の結果 ---------- */
.svc-tabs { display: flex; gap: 4px; margin-top: 16px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); width: fit-content; max-width: 100%; overflow-x: auto; }
.svc-tabs a { flex-shrink: 0; padding: 8px 16px; border-radius: var(--r-sm); color: var(--dim); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.svc-tabs a:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.svc-tabs a[aria-current] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); }
.search-head .search.big { margin-top: 12px; }
.live-head { gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sort-chips { gap: 6px; }
.sort-chips .chip { padding: 6px 12px; font-size: .8125rem; }
.chip.on { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .45); color: var(--accent-ink); font-weight: 500; }
.item.live { grid-template-columns: 60px minmax(0, 1fr) auto auto; }
.item.live .item-unit b { font-size: 1.25rem; }
@media (min-width: 641px) and (max-width: 760px) { .item.live .item-go { grid-column: 2 / -1; } }
.item-note { font-size: .75rem; line-height: 1.6; color: var(--dim); margin-top: 4px; }
.rev { color: var(--warn-ink); font: 500 .75rem/1 var(--mono); align-self: center; }
.rev small { color: var(--faint); font-size: .6875rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.notice { padding: 12px 16px; border: 1px solid #f0cf9f; background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-sm); }
@media (max-width: 640px) {
  .svc-tabs { width: 100%; }
  .svc-tabs a { flex: 1; text-align: center; padding: 8px 10px; }
  .item.live { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img body body" "unit unit go"; }
  .sort-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .sort-chips .chip { flex-shrink: 0; min-height: 36px; }
}

/* ---------- 特集（買いまわり・値下がり・最低気温） ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }   /* どの段のカードも同じ高さ（v6.97 でディズニーを足して7枚になり、3段目だけ低かった） */
.feature { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent-fill); border-radius: var(--r); color: var(--text); box-shadow: var(--shadow); transition: border-color .2s ease, box-shadow .2s ease; }
.feature:hover { text-decoration: none; border-color: var(--line-2); border-left-color: var(--accent-fill); box-shadow: var(--shadow-2); }
.feature b { font-size: .9375rem; }
.feature span { font-size: .8125rem; color: var(--dim); line-height: 1.6; word-break: auto-phrase; }
.drop { color: var(--good-ink); font-weight: 600; }
.item-basis s { color: var(--faint); }
.item-basis a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

/* ---------- トップ: 品目カードを送料込みだけで比べる ---------- */
.board-filters { position: static; margin: 12px 0 4px; }
.card-v { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-v[hidden] { display: none; }
.card-price .tag { font-style: normal; margin-left: 6px; align-self: center; }

/* ---------- 製品ページ ---------- */
.prod-head { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.prod-img { flex-shrink: 0; width: 128px; height: 128px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; }
.prod-img img { width: 128px; height: 128px; object-fit: contain; }
.prod-name { font-size: 1.5rem; line-height: 1.4; }
@media (max-width: 640px) {
  .prod-head { gap: 12px; align-items: flex-start; }
  .prod-img, .prod-img img { width: 88px; height: 88px; }
  .prod-name { font-size: 1.125rem; }
}

/* ---------- ジャンルが11に増えたので、狭い画面では横スクロールをやめて折り返す（続きがあることが見えるように） ---------- */
@media (max-width: 760px) {
  .genre-nav { flex-wrap: wrap; overflow: visible; gap: 6px; margin: 0 0 8px; }
  .genre-nav a { padding: 6px 12px; min-height: 36px; font-size: .8125rem; }
}

/* ---------- 検索結果の送料込みチェック ---------- */
.search-filters { position: static; margin: 0 0 12px; }

/* ---------- 送料の印: 行の先頭に同じ幅で（2026-09-28 ユーザー指示「場所固定して見た目がバラバラにならないように」） ---------- */
.tag.ship { display: inline-flex; justify-content: center; min-width: 7.4em; flex-shrink: 0; order: -1; }

/* ---------- 39ショップの判定（運営者用・スマホで押しやすく） ---------- */
.s39-tabs { flex-wrap: wrap; }
.s39-tabs small { color: var(--faint); margin-left: 4px; }
.s39-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s39-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.s39-row.saving { opacity: .5; }
.s39-row.done { border-color: #b9dfe2; background: var(--good-soft); }
.s39-name { font-weight: 600; font-size: 1rem; }
.s39-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: var(--dim); margin-top: 4px; }
.s39-item { color: var(--dim); margin-top: 4px; line-height: 1.5; }
.s39-btns { display: flex; flex-direction: column; gap: 8px; min-width: 128px; }
.s39-btns .btn { min-height: 44px; justify-content: center; }
.s39-done { grid-column: 1 / -1; color: var(--good-ink); font-weight: 500; }
@media (max-width: 640px) {
  .s39-row { grid-template-columns: 1fr; }
  .s39-btns { flex-direction: row; }
  .s39-btns .btn { flex: 1; }
}
.s39-open { font-size: .75rem; font-weight: 500; color: var(--accent-ink); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 6px; padding: 2px 6px; margin-left: 6px; white-space: nowrap; }

/* ---------- PCでもジャンルのボタンは折り返す（11ジャンルになり右端が切れていた。2026-09-28） ---------- */
.genre-nav { flex-wrap: wrap; overflow: visible; }


/* ---------- 掲示板 ---------- */
.board-wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.board-form-card { position: sticky; top: 104px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.board-form { display: grid; gap: 12px; }
.board-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.board-kinds legend { font-size: .8125rem; color: var(--dim); margin-bottom: 6px; }
.board-field { display: grid; gap: 6px; font-size: .8125rem; color: var(--dim); }
.board-field input, .board-field textarea, .board-admin textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.board-field textarea, .board-admin textarea { resize: vertical; line-height: 1.6; }
.board-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.board-ok { padding: 10px 14px; border-radius: var(--r-sm); background: var(--good-soft); color: var(--good-ink); border: 1px solid #b9dfe2; font-weight: 500; }
.board-filter { margin: 0 0 12px; gap: 6px; }
.board-filter .chip { padding: 6px 12px; font-size: .8125rem; }
.board-filter small { color: var(--faint); }
.board-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.board-post { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .75rem; color: var(--dim); }
.board-name { font-weight: 600; color: var(--text); }
.board-kind { min-width: 4.5em; justify-content: center; display: inline-flex; }
.board-kind.k-request { color: var(--accent-ink); background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .3); }
.board-kind.k-feedback { color: var(--good-ink); background: var(--good-soft); border-color: #b9dfe2; }
.board-kind.k-bug { color: var(--warn-ink); background: var(--warn-bg); border-color: #f0cf9f; }
.board-body { margin-top: 8px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
.board-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent-fill); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .9375rem; line-height: 1.7; }
.board-reply-h { font-size: .75rem; font-weight: 600; color: var(--accent-ink); margin-bottom: 4px; }
.board-admin { margin-top: 10px; display: grid; gap: 8px; }
.board-admin-btns { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .board-wrap { grid-template-columns: 1fr; }
  .board-form-card { position: static; }
}

/* ナビに「掲示板」が増えたので、狭い画面でも文字が折れないように */
.nav a { white-space: nowrap; }
@media (max-width: 420px) { .nav { gap: 0; } .nav a { padding: 8px 6px; font-size: .8125rem; } .brand-t { font-size: .9375rem; } }

/* トップのカード: 「送料別」の印が縦に潰れないように */
.card-price { flex-wrap: wrap; row-gap: 4px; }
.card-price .tag { white-space: nowrap; flex-shrink: 0; }

/* 掲示板: 利用者の返信 */
.board-answers { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-2); display: grid; gap: 8px; }
.board-answer { padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); }
.board-answer .board-body { margin-top: 4px; font-size: .9375rem; line-height: 1.7; }
.board-answer-del { margin-top: 6px; }
.board-answer-form { margin-top: 10px; }
.board-answer-form summary { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: .8125rem; color: var(--dim); cursor: pointer; list-style: none; }
.board-answer-form summary::-webkit-details-marker { display: none; }
.board-answer-form summary:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.board-answer-form[open] summary { color: var(--accent-ink); }
.board-answer-form form { display: grid; gap: 10px; margin-top: 10px; }

/* ---------- 今日の要約（ランキングの冒頭。2026-10-01） ---------- */
.today-sum { margin: 16px 0 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent-fill); border-radius: var(--r-sm); font-size: .9375rem; line-height: 1.8; }
.furu-deadline { margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--text); }   /* ふるさと納税の年内の締め切り（10〜12月。2026-11-03） */
.today-sum .amz { display: block; margin-top: 6px; font-size: .875rem; }   /* Amazon へのリンク（Yahoo のページだけ・要約の下の行。v7.31） */
.today-sum .amz:first-child { margin-top: 0; }
.today-sum a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* いちばん安い商品へ（押せると分かるように下線） */

/* ---------- サイズ違いの品目へのリンク（水 2L／500mL／保存水 など。2026-10-01） ---------- */
.family { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.family-label { font-size: .75rem; color: var(--dim); margin-right: 2px; }
.family a, .family-on { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: .875rem; text-decoration: none; }
.family a:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); color: var(--accent-ink); text-decoration: none; }
.family-on { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); color: var(--accent-ink); font-weight: 600; }

/* ---------- 推移グラフは最安・中央値のすぐ下（2026-10-02） ---------- */
.head-trend { margin-top: 16px; padding: 14px 16px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.head-trend .sec-head { margin-bottom: 8px; }

/* ---------- 気温: 都道府県別に今日の最高・最低を並べる（2026-10-02） ---------- */
.pref-hl { display: inline-flex; align-items: center; gap: 10px; }
.pref-hl .hl-hi, .pref-hl .hl-lo { display: inline-flex; align-items: center; gap: 4px; }
.pref-hl small { font-size: .6875rem; color: var(--dim); }
.regions:has(.pref-hl) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.region a:has(.pref-hl) { display: grid; grid-template-columns: minmax(4.5em, 1fr) auto; gap: 8px; white-space: nowrap; }
.pref-hl { justify-self: end; }
.pref-hl .temp { min-width: 4.4em; justify-content: center; text-align: center; box-sizing: border-box; }   /* 1桁と2桁で枠の幅を変えない（列がずれないように） */
@media (max-width: 400px) { .pref-hl { gap: 6px; } .pref-hl small { display: none; } .regions:has(.pref-hl) { grid-template-columns: 1fr; } }

/* ---------- 冒頭の最安の推移は細く（2026-10-02） ---------- */
.head-trend .chart { padding: 8px 8px 4px; box-shadow: none; border: 0; background: transparent; }
.head-trend .chart svg { min-width: 560px; }

/* ---------- 最安の推移（直近3か月・横スクロールなし。2026-10-02） ---------- */
.chart.mini { padding: 4px 0 0; background: transparent; border: 0; box-shadow: none; }
.mini-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px; gap: 8px; height: 112px; }
.mini-y, .mini-end { position: relative; }
.mini-y span, .mini-end span { position: absolute; transform: translateY(-50%); font: 12px var(--mono); color: var(--faint); white-space: nowrap; }
.mini-y span { right: 0; }
.mini-end span { left: 0; font-weight: 500; color: var(--dim); }
.mini-area { position: relative; touch-action: pan-y; cursor: crosshair; }
.head-trend .chart.mini .mini-area svg, .chart.mini .mini-area svg { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; overflow: visible; display: block; }   /* 前の作りの min-width（横スクロール用）を打ち消す */
.mini-area .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-area .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mini-dot { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--s1); box-shadow: 0 0 0 2px var(--surface); }
.mini-hair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); pointer-events: none; }
.mini-x { display: flex; justify-content: space-between; margin: 6px 60px 0 52px; font: 12px var(--mono); color: var(--faint); }
@media (max-width: 640px) {
  .mini-plot { grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 6px; height: 96px; }
  .mini-x { margin: 6px 50px 0 44px; }
}

/* ---------- 気温のページの下: 季節の品目への1行（控えめに。2026-10-02） ---------- */


/* ---------- 楽天ランキングのカード: 価格の場所に商品名（2行まで）、その下の小さい字に価格（2026-10-03） ---------- */
.card-title { margin-top: 8px; font-weight: 600; font-size: .9375rem; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }

/* ---------- 単価計算 /keisan/（2026-10-04） ---------- */
.kc-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kc-item { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: border-color .2s ease, box-shadow .2s ease; }
.kc-item legend { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; color: var(--accent); padding: 0 8px; }
.kc-item label { display: grid; gap: 6px; font-size: .8125rem; color: var(--dim); min-width: 0; }
.kc-item input[name="price"], .kc-item input[name="qty"], .kc-item input[name="count"] { font-family: var(--mono); }
.kc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .7fr); gap: 8px; }
.kc-qty { display: flex; min-width: 0; }
.kc-qty input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.kc-qty select { flex-shrink: 0; min-height: 44px; padding: 0 8px; font: 500 .9375rem/1 var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; cursor: pointer; }
.kc-qty select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kc-out { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.kc-per { display: flex; align-items: baseline; gap: 6px; margin-left: auto; color: var(--dim); }
.kc-per b { font: 600 1.5rem/1 var(--mono); color: var(--text); letter-spacing: -.02em; }
.kc-per small { font-size: .8125rem; }
.kc-rank { font: 600 .75rem/1 var(--mono); color: var(--dim); }
.kc-rank:empty { display: none; }
.kc-item.is-best { border-color: var(--good-ink); box-shadow: 0 0 0 1px var(--good-ink), var(--shadow); }
.kc-item.is-best .kc-rank { color: var(--good-ink); background: var(--good-soft); border: 1px solid #b9dfe2; border-radius: 4px; padding: 4px 8px; }
.kc-item.is-best .kc-rank::after { content: "・いちばん安い"; }
.kc-del { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; font-size: .75rem; color: var(--dim); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.kc-del:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.kc-tools { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.kc-clear { background: none; border: 0; padding: 8px 0; font: inherit; font-size: .8125rem; color: var(--dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kc-clear:hover { color: var(--accent-ink); }
.kc-sum { margin-top: 16px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.kc-sum-wait, .kc-sum-warn { color: var(--dim); font-size: .9375rem; }
.kc-sum-warn { color: var(--warn-ink); }
.kc-sum-head { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.kc-sum-name { font-size: .875rem; font-weight: 400; color: var(--dim); }
.kc-sum-sub { margin-top: 8px; color: var(--dim); }
.kc-sum-sub b { color: var(--text); font-size: 1.0625rem; }
.kc-sum-list { margin: 12px 0 0; padding: 12px 0 0 1.5em; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: .875rem; }
.kc-sum-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kc-sum-list li .mono { margin-left: auto; }
.section.alt .narrow > h2 + p { margin-top: 8px; }
@media (max-width: 760px) {
  .kc-items { grid-template-columns: 1fr; }
  .kc-row { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
  .kc-row label:first-child { grid-column: 1 / -1; }   /* 価格 → 内容量・入数（読む順と入力の順をそろえる） */
  .kc-sum { padding: 16px; }
}
@media (max-width: 380px) { .nav a { padding: 8px 4px; } }   /* 「計算」を足しても 360px 幅に収める */
/* 単価計算: 商品を探す・バーコード・選んだ商品（2026-10-05） */
.kc-find { display: grid; gap: 6px; }
.kc-find[hidden] { display: none; }
.kc-find-l { font-size: .8125rem; color: var(--dim); }
.kc-find-in { display: flex; gap: 8px; min-width: 0; }
.kc-find-in input { flex: 1; min-width: 0; }
.kc-scan { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font: 700 .875rem/1 var(--sans); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.kc-scan:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.kc-find-msg { font-size: .8125rem; line-height: 1.6; }
.kc-find-msg:empty { display: none; }
.kc-err { color: var(--warn-ink); }
.kc-results { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 360px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-2); }
.kc-res { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.kc-res:hover, .kc-res:focus-visible { background: var(--surface-2); }
.kc-res img, .kc-noimg { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; border-radius: 6px; background: var(--surface-2); }
.kc-res-t { display: grid; gap: 2px; min-width: 0; }
.kc-res-n { font-size: .875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-res-m { font-size: .75rem; color: var(--dim); }
.kc-res-m b { color: var(--text); font-size: .8125rem; }
.kc-picked { display: grid; gap: 12px; }
.kc-pk { display: flex; gap: 12px; align-items: flex-start; }
.kc-pk img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; border-radius: var(--r-sm); background: var(--surface-2); }
.kc-pk-t { flex: 1; min-width: 0; }
.kc-pk-n { font-size: .875rem; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-pk-m { font-size: .75rem; color: var(--dim); margin-top: 2px; }
.kc-unpick { flex-shrink: 0; min-height: 32px; padding: 0 10px; font-size: .75rem; color: var(--dim); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.kc-unpick:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.kc-rk { padding: 12px; background: var(--surface-2); border-radius: var(--r-sm); }
.kc-rk-h { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
.kc-rk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kc-rk li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kc-rk li + li { padding-top: 8px; border-top: 1px solid var(--line); }
.kc-rk-t { font-size: .8125rem; line-height: 1.6; min-width: 0; }
.kc-rk-t b { font-size: .9375rem; }
.kc-rk-t small { display: block; font-size: .75rem; color: var(--dim); }
.kc-rk-n { display: block; font-size: .75rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-rk li .btn { flex-shrink: 0; }
.kc-rk-f { margin-top: 8px; font-size: .75rem; }
.kc-rk-tag { font-size: .75rem; color: var(--dim); }
.kc-h2 { margin-top: 32px; }
.kc-cam { width: min(640px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px); padding: 12px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.kc-cam::backdrop { background: rgba(15, 27, 45, .6); }
.kc-cam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-weight: 700; font-size: .9375rem; }
.kc-cam-view { position: relative; aspect-ratio: 4 / 3; max-height: calc(100dvh - 140px); width: 100%; background: #0f1b2d; border-radius: var(--r-sm); overflow: hidden; }
.kc-cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .kc-cam-view { aspect-ratio: 3 / 4; } }   /* スマホは縦長に大きく */
.kc-cam-msg { margin-top: 12px; font-size: .8125rem; color: var(--dim); line-height: 1.6; }
@media (max-width: 380px) { .kc-scan span { display: none; } .kc-scan { padding: 0 12px; } }
.kc-picked, .kc-find { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.kc-rk-t { flex: 1 1 auto; }
.kc-item:has(.kc-del) .kc-pk { padding-right: 56px; }   /* 「外す」と「選び直す」が重ならないように */
.kc-rk ul { grid-template-columns: minmax(0, 1fr); }
.kc-rk li > span { min-width: 0; }
.kc-full { font-size: .8125rem; }
.kc-store-tag { color: var(--good-ink); font-weight: 700; }
.kc-top { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kc-top:has(.kc-scan-top[hidden]) { display: none; }
.kc-scan-top { min-height: 52px; padding: 0 24px; font-size: 1rem; }
@media (max-width: 640px) { .kc-scan-top { width: 100%; } }

/* ---------- ホテル（楽天トラベル。2026-10-06） ---------- */
.hpref { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.hpref .card-name { -webkit-line-clamp: unset; color: var(--text); }
.hpref .card-name b { font: 600 1.375rem/1 var(--mono); }
.hpref .card-name span { font-size: .75rem; color: var(--dim); margin-left: 2px; }
.hotel-top-go { margin-top: 16px; }
.hchips { margin: 0 0 24px; }
.hchips summary { cursor: pointer; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-row .chip { border-radius: var(--r-sm); }
.chip-row .chip small { color: var(--dim); font-size: .75rem; }
.hv { margin: 0 0 32px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.hv-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.hv-form label, .hv-sort { display: grid; gap: 6px; font-size: .8125rem; color: var(--dim); }
.hv-form input, .hv-form select, .hv-sort select { min-height: 44px; padding: 0 12px; font: 400 1rem/1 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.hv-form input[type="date"] { width: auto; }
.hv-tools { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; margin-top: 16px; }
.hv-msg { margin-top: 12px; font-size: .875rem; }
.hv-msg:empty { display: none; }
.hv-list { margin-top: 12px; }
.hv-list .item-unit small { display: block; font-size: .75rem; color: var(--dim); }
.hp { display: flex; gap: 16px; align-items: flex-start; }
.hp-img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.hp-h { font-size: clamp(1.375rem, 3.4vw, 2rem); }
.hp-idle { margin: 0 0 12px; font-size: .875rem; line-height: 1.6; }   /* いま予約できるプランが無い宿（v7.46） */
.hp-go { margin-top: 16px; }
.hmap { height: min(70vh, 640px); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; margin-bottom: 8px; }
.hmap-tools { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; min-height: 36px; }
.hpin span { display: inline-block; transform: translate(-50%, -100%); padding: 2px 6px; font: 600 .75rem/1.4 var(--mono); color: #fff; background: var(--accent); border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 3px rgba(15, 27, 45, .3); }
.hpin { background: none; border: 0; }
@media (max-width: 640px) { .hp-img { width: 88px; height: 66px; } .hv { padding: 16px; } .hv-form button { width: 100%; } }
.hv-dest { flex: 1 1 260px; }
.hv-dest input { width: 100%; }
.hdot { background: none; border: 0; }
.hdot span { display: block; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--accent); border-radius: 3px; box-shadow: 0 1px 2px rgba(15, 27, 45, .3); }
/* ホテル v2（2026-10-06）: 絞り込みは並べ方の欄と同じ高さの四角い枠・上限金額・今週末/3連休・結果の地図 */
.hv-tools { align-items: flex-end; }
.hv-box { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: .875rem; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; user-select: none; }
.hv-box input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.hv-box:has(input:checked) { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); color: var(--accent-ink); }
.hv-max input { width: 11em; }
.hv-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hmap-sm { height: min(56vh, 460px); margin-top: 16px; }
.href { margin-top: 8px; }
.hv-stats b { min-width: 2ch; }
@media (max-width: 640px) { .hv-max input { width: 100%; } .hv-max { flex: 1 1 140px; } .hv-box { flex: 1 1 calc(50% - 6px); } }
@media (max-width: 640px) { .hv-tools { gap: 8px; } .hv-sort { flex: 1 1 100%; } .hv-sort select { width: 100%; } .hv-box { flex: 1 1 calc(50% - 4px); padding: 0 10px; font-size: .8125rem; } }
/* 料金のシークバー（2026-10-07）。チェックインの欄は元の大きさのまま */
.hv-range { flex: 1 1 220px; min-width: 200px; }
.hv-range-v { font: 600 1rem/1 var(--mono); color: var(--text); margin-left: 8px; }
.hv-range input[type="range"] { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 640px) { .hv-form .btn { width: 100%; } }
/* チェックインと料金のバーを横に並べる（2026-10-07） */
.hv-row { display: flex; gap: 12px; align-items: flex-end; flex: 1 1 100%; min-width: 0; }
.hv-row .hv-in { flex: 0 0 auto; }
.hv-row .hv-range { flex: 1 1 auto; min-width: 0; }
.hv-range-v { font-size: .875rem; margin-left: 4px; }
@media (max-width: 640px) { .hv-row { gap: 10px; } .hv-row .hv-in input { width: 9.6em; padding: 0 8px; font-size: .9375rem; } .hv-range { font-size: .75rem; } }

.hv-row .hv-range { max-width: 420px; }
/* 料金は選択式（チェックインと同じ高さ。2026-10-07） */
.hv-row .hv-price { flex: 0 0 auto; }
.hv-row .hv-price select { min-height: 44px; }
/* ホテル v7（2026-10-07）: スマホのチェックイン・料金は「朝食付きだけ」と同じ大きさの2つ並び／調べている間の動き／県カードのグラフ */
@media (max-width: 640px) {
  .hv-row { gap: 8px; }
  .hv-row > label { flex: 1 1 0; min-width: 0; }
  .hv-row .hv-in input, .hv-row .hv-price select { width: 100%; min-height: 44px; font-size: 16px; padding: 0 10px; display: block; }
}
.hv-loading b { background: linear-gradient(90deg, var(--accent) 0%, #e86a72 40%, var(--accent) 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hv-shine 1.4s linear infinite; }
.hv-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.hv-dots i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); opacity: .25; animation: hv-dot 1s ease-in-out infinite; }
.hv-dots i:nth-child(2) { animation-delay: .15s; } .hv-dots i:nth-child(3) { animation-delay: .3s; }
.hv-bar { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent) var(--line); background-size: 40% 100%; background-repeat: no-repeat; animation: hv-bar 1.1s ease-in-out infinite; }
.hv-skel .item-img, .hv-skel .item-body i, .hv-skel .item-unit i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: hv-shine 1.2s linear infinite; }
.hv-skel .item-body i { height: 12px; margin: 6px 0; } .hv-skel .item-body i:nth-child(1) { width: 85%; height: 14px; } .hv-skel .item-body i:nth-child(2) { width: 55%; } .hv-skel .item-body i:nth-child(3) { width: 35%; }
.hv-skel .item-unit i { width: 72px; height: 22px; }
.hv-wait { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: hv-shine 1.2s linear infinite; display: inline-block; min-width: 3.5em; }
@keyframes hv-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes hv-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes hv-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .hv-loading b, .hv-dots i, .hv-bar, .hv-skel *, .hv-wait { animation: none; } .hv-loading b { color: var(--accent); } }
.hpref .spark { display: block; width: 100%; height: 28px; margin: 6px 0 2px; }
/* iPhone（WebKit）は日付・選択欄を端末の見た目で描き、高さや枠が効かない → 標準の見た目を外して自前で描く（2026-10-07） */
.hv select, .hv input[type="date"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; font: 400 16px/42px var(--sans); color: var(--text); background-color: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.hv select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234b5b70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.hv input[type="date"] { display: block; text-align: left; }
.hv input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.hv input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; }
.hv select:focus, .hv input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hv-row > label { display: grid; gap: 6px; }
@media (max-width: 640px) { .hv-sort { flex: 1 1 100%; } .hv-sort select { width: 100%; } }
.hpref .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hpref .card-n { font: 500 .75rem/1 var(--mono); color: var(--dim); white-space: nowrap; }
.cold-head { margin-top: 32px; }   /* トップ: いちばん寒い場所（2026-10-07） */
/* 単価計算のカメラ: 読み取り中（光のライン・四隅・スキャン中）と読み取ったとき（2026-10-08） */
.kc-cam-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(15, 27, 45, .45) 100%); }
.kc-laser { position: absolute; left: 4%; right: 4%; top: 10%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff4d5a 20%, #ff8a92 50%, #ff4d5a 80%, transparent); box-shadow: 0 0 12px 3px rgba(255, 77, 90, .55), 0 0 32px 8px rgba(255, 77, 90, .25); z-index: 2; animation: kc-laser 1.8s ease-in-out infinite alternate; }
.kc-corner { position: absolute; width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, .92); z-index: 2; animation: kc-corner 1.6s ease-in-out infinite; }
.kc-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.kc-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.kc-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.kc-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.kc-scan-tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: 600 .75rem/1 var(--mono); letter-spacing: .1em; color: #fff; background: rgba(15, 27, 45, .6); border-radius: 6px; backdrop-filter: blur(4px); }
.kc-scan-tag i { width: 8px; height: 8px; border-radius: 2px; background: #ff4d5a; animation: kc-blink 1s steps(2, end) infinite; }
.kc-hit { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; opacity: 0; pointer-events: none; }
.kc-hit-mark { overflow: visible; filter: drop-shadow(0 0 14px rgba(94, 234, 212, .55)); }
.kc-hit-box { fill: rgba(255, 255, 255, .08); stroke: #fff; stroke-width: 2.5; stroke-dasharray: 250; stroke-dashoffset: 250; }
.kc-hit-chk { fill: none; stroke: #5eead4; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.kc-hit-code { font: 600 1.375rem/1 var(--mono); letter-spacing: .14em; text-shadow: 0 0 18px rgba(94, 234, 212, .45); font-variant-numeric: tabular-nums; }
.kc-hit small { font: 600 .6875rem/1 var(--mono); letter-spacing: .4em; color: #5eead4; padding-left: .4em; }
.kc-cam-view video { transition: filter .35s ease, transform .5s ease; }
.kc-cam-view.is-hit video { filter: blur(7px) brightness(.45) saturate(.6); transform: scale(1.05); }
.kc-cam-view.is-hit .kc-hit { animation: kc-hit-in .25s ease-out forwards; }
.kc-cam-view.is-hit .kc-hit-box { animation: kc-draw .45s cubic-bezier(.6, 0, .2, 1) forwards; }
.kc-cam-view.is-hit .kc-hit-chk { animation: kc-draw .32s cubic-bezier(.6, 0, .2, 1) .32s forwards; }
.kc-cam-view.is-hit .kc-laser, .kc-cam-view.is-hit .kc-scan-tag { opacity: 0; transition: opacity .2s; }
.kc-cam-view.is-hit .kc-corner { border-color: #5eead4; animation: none; transition: border-color .2s; }
.kc-cam-view.is-hit::before { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; z-index: 5; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); animation: kc-sweep .6s ease-out forwards; }
@keyframes kc-hit-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kc-draw { to { stroke-dashoffset: 0; } }
@keyframes kc-sweep { from { left: -50%; } to { left: 110%; } }
@keyframes kc-laser { from { top: 10%; } to { top: 88%; } }
@keyframes kc-corner { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes kc-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .kc-laser { animation: none; top: 50%; } .kc-corner, .kc-scan-tag i { animation: none; } .kc-cam-view.is-hit::before { animation: none; opacity: 0; } .kc-cam-view.is-hit .kc-hit-box, .kc-cam-view.is-hit .kc-hit-chk { animation: none; stroke-dashoffset: 0; } .kc-cam-view.is-hit video { transform: none; } }
.card-lux-n { font-size: .8125rem; font-weight: 700; line-height: 1.45; margin-top: 4px; color: var(--text); }
/* 温泉旅館・高級ホテル: 見出しをそれぞれのカードの上に（2026-10-09） */
.hpref-pair { margin-top: 0; }
.hpref-col { display: flex; flex-direction: column; min-width: 0; }
.hpref-col .card { flex: 1; }
/* トップの軽量化（2026-10-09）: 見出しは IBM Plex Sans JP、画面の外のジャンルは描画を後回しに */
h1, .logo { font-family: var(--head); }   /* 各ページの大見出しとロゴだけ（小見出しまで広げると50個以上読み込んだ） */
#board-all .board { content-visibility: auto; contain-intrinsic-size: auto 640px; }
#board-all.cv-off .board { content-visibility: visible; }
/* 1回の量と値段（/tani/。2026-10-10） */
.tani-ans { margin-top: 12px; font-size: 1.0625rem; font-weight: 700; line-height: 1.7; color: var(--text); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent, #b8121b); border-radius: var(--r-sm); max-width: 760px; }
.tani-tbl td b { font: 600 1rem/1 var(--mono); }
.tani-foot { font-size: .8125rem; margin-top: 8px; }
.tani-notes { margin: 20px 0; padding-left: 1.2em; line-height: 1.8; }
.tani-notes li + li { margin-top: 6px; }
.tani-go { display: inline-flex; margin: 4px 0 8px; }
.tani-src { padding-left: 1.2em; font-size: .875rem; line-height: 1.8; }
.tani-src a { color: var(--dim); }
.tani-more { display: flex; flex-wrap: wrap; gap: 8px; }
.tani-more a { font-size: .8125rem; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.tani-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.tani-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.tani-item b { font-size: .9375rem; }
.tani-item span { font-size: .8125rem; color: var(--dim); line-height: 1.6; }
.tani-item em { font: 600 .8125rem/1.4 var(--mono); font-style: normal; color: var(--text); margin-top: auto; padding-top: 6px; }
.tani-link { margin-top: 8px; font-size: .8125rem; }
.tani-link a { color: var(--dim); }
.tani-amt { display: block; font: 500 .75rem/1.4 var(--mono); color: var(--dim); margin-top: 2px; }
/* 気温: ライブ盤面（/amedas/）への入口（2026-10-10） */
.kion-live { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 12px 16px; background: #0f1b2d; color: #fff; border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); max-width: 520px; }
.kion-live b { font-size: .9375rem; }
.kion-live b::after { content: " →"; }
.kion-live span { font-size: .75rem; color: rgba(255,255,255,.75); line-height: 1.6; }

.tani-foot + .sm-h, .tani-more + .sm-h, .tani-notes + .sm-h, .tani-go + .sm-h { margin-top: 32px; }
.hp-en { display: block; margin-top: 4px; font: 500 .8125rem/1.4 var(--mono); color: var(--dim); letter-spacing: .02em; }
/* よくある質問（2026-10-17） */
.faq { margin: 12px 0 0; display: grid; gap: 10px; }
.faq-row { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.faq dt { font-weight: 700; font-size: .9375rem; line-height: 1.6; }
.faq dt::before { content: "Q"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; font: 700 .75rem/1 var(--mono); color: var(--on-fill); background: var(--accent-fill); border-radius: 6px; vertical-align: 1px; }
.faq dd { margin: 6px 0 0 30px; font-size: .875rem; line-height: 1.8; color: var(--text); }
/* 宿のページ: この宿について（2026-10-17） */
.hp-about { margin-top: 12px; line-height: 1.9; }
.hp-about p + p { margin-top: 8px; }
.hp-price { margin: 14px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.hp-price-n b { font: 600 1.5rem/1 var(--mono); }
.hp-price-n span { margin-left: 6px; font-size: .8125rem; color: var(--dim); }
.hp-price .spark { height: 36px; margin: 8px 0; }
.hp-price p:last-child { font-size: .875rem; }


/* ---------- ディズニーホテル（2026-10-26） ---------- */
.dz-hotel { margin-top: 24px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.dz-head { display: flex; gap: 12px; align-items: flex-start; }
.dz-head .item-img { flex: none; }
.dz-ttl { min-width: 0; }
.dz-ttl .sm-h { margin: 0 0 4px; }
.dz-ttl .item-basis b { font-family: var(--mono); }
.dz-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 960px) { .dz-days { grid-template-columns: repeat(7, 1fr); } }   /* 2週間を1週7日ずつ2段に */
.dz-day { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: .75rem; }
.dz-day b { font: 600 1rem/1.2 var(--mono); min-height: 1.2rem; }   /* 「空室なし」の枠も同じ高さ（同種のタイルは同じサイズ） */
.dz-day b small { font-size: .6875rem; font-weight: 500; margin-left: 2px; color: var(--dim); }
a.dz-day:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .35); text-decoration: none; }
.dz-day.off { background: var(--surface-2); color: var(--faint); border-color: var(--line); }
.dz-day.off b { font: 500 .8125rem/1.2 var(--sans); }
.hv-row .hv-ad { flex: 0 0 auto; }
.hv-row .hv-ad select { min-height: 44px; min-width: 88px; }

/* ---------- ガジェット（2026-10-27） ---------- */
/* 容量の絞り込み: ほかの絞り込み（.check）と同じ高さ・角丸の枠に select を入れる */
.check.sel { gap: 4px; padding: 0 4px 0 14px; cursor: default; }
.check.sel select { -webkit-appearance: none; appearance: none; height: 32px; min-height: 0; margin: 0; padding: 0 30px 0 8px; font: 600 .875rem/1 var(--mono); color: var(--text); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234b5b70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.check.sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (max-width: 640px) { .check.sel { padding-left: 10px; } .check.sel select { font-size: 16px; } }   /* 高さは枠（.check）の高さにそろう。iPhone は 16px 未満の入力欄に触ると画面が拡大される */
/* 容量ごとの最安: 上の4つの枠と同じ部品・同じ列（縦の線をそろえる）。容量が5つ以上なら次の段へ */
.vars-h { margin: 16px 0 0; }
.stats.vars { margin-top: 8px; }
.stats.vars dd b { font-size: 1.25rem; }
.stats.vars .spark { display: block; width: 100%; height: 28px; margin: 8px 0 0; }
/* 押すと下の一覧をその容量だけにする箱（2026-10-31）。選んでいる箱はアクセント色の枠 */
.stats.vars .var-pick { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.stats.vars .var-pick:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.stats.vars .var-pick.on { border-color: var(--accent-fill); box-shadow: 0 0 0 1px var(--accent-fill) inset; }
.stats.vars .var-pick.on dt { color: var(--accent-ink); }   /* 大きさごとの最安の推移（2026-10-31） */
/* スマホのナビは「単価・ガジェット・ホテル・気温・計算」（2026-10-27 ユーザー指示）。検索（虫眼鏡）はスマホでは出さない（トップの検索欄と足もとから行ける）。パソコンは全部 */
@media (max-width: 640px) { .nav .nav-search { display: none; } }
@media (min-width: 421px) and (max-width: 440px) { .nav a { padding: 8px 8px; } }   /* 420px 以下の詰めた幅との境目で数px はみ出す */
@media (max-width: 380px) { .top-in { gap: 8px; } }
@media (max-width: 359px) { .nav a { padding: 8px 3px; font-size: .75rem; } .brand-t { font-size: .875rem; } }   /* 320〜359px の古い小さな画面 */
/* 641〜860px（タブレット・狭いパソコンの窓）は長い名前だとナビがはみ出すので、短い名前にする */
@media (min-width: 641px) and (max-width: 860px) { .nav .lg { display: none; } .nav .sm { display: inline; } .nav a { padding: 8px 9px; } }
/* 同じ分類の機種（iPhone は10機種ある）: スマホでは折り返さず横に流す（一覧が下に押し出されないように） */
@media (max-width: 640px) {
  .family.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
  .family.scroll::-webkit-scrollbar { display: none; }
  .family.scroll > * { flex-shrink: 0; white-space: nowrap; }
}
/* ガジェットのカード: 値段の横に単位（2026-10-28 ユーザー指示「値段の横に円」。前は値段の下だった）。値段の字はふだん同じ大きさで、
   値段と単位がカードの幅に入らない長さ（RTX 5090 の 1,488,000 など）のときだけ幅に合わせて縮める
   （--n＝値段の字数・--u＝単位の字幅は gadget.php の gadget_price_fit。等幅の数字は1字 0.6em で数える）。
   「送料別」は値段の下の段（横に置くと長さで折り返したりしなかったりして、カードごとに位置がずれる） */
.board.gd .card { container-type: inline-size; }
.board.gd .card-price { --us: .75rem; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; row-gap: 4px; }
.board.gd .card-price span { font-size: var(--us); }
.board.gd .card-price b { font-size: min(2rem, calc((100cqi - 8px - var(--u, 1) * var(--us)) / (var(--n, 7) * .6))); line-height: 2rem; }   /* 行の高さは字を縮めても同じ（隣のカードと品名の位置をそろえる） */
.board.gd .card-price .tag { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) {
  .board.gd .card-price { --us: .6875rem; column-gap: 6px; }
  .board.gd .card-price b { font-size: min(1.5rem, calc((100cqi - 6px - var(--u, 1) * var(--us)) / (var(--n, 7) * .6))); line-height: 1.5rem; }
}
/* ガジェットの出品の行: パソコンでも「円」は値段の横（単価ランキングの行は今までどおり値段の下に単位）。幅をそろえて品名の列の幅を行ごとに変えない */
@media (min-width: 641px) {
  .item-unit.gd { min-width: 9.25rem; }   /* 1,488,000円・12,000円/1万mAh まで同じ幅 */
  .item-unit.gd b { display: inline; }
  .item-unit.gd span { margin-left: 5px; }
}
/* ガジェットのカードの下の段: 前日比が付いても折り返さない（長いときは「…」。カードの高さをそろえる） */
.card-foot { gap: 6px; }
.card-foot .foot-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board.gd .card-price .tag { margin-left: 0; }
/* ガジェットのカード（スマホ）: 品目名は2行まで（「MacBook Air 13（M5）」が「…」で切れていた）。どのカードも2行ぶんの高さにして、高さをそろえる */
@media (max-width: 640px) { .board.gd .card-cat { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; min-height: 2.6em; } }
/* ガジェットの一覧: 大きな見出し（ゲーム・Apple製品…）の下に分類の見出し。分類へ飛ぶボタンは品目ページの仲間のボタンと同じ形（2026-10-29 v6.66。15→42分類） */
.gsec-h { font-size: 1.25rem; margin: 48px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 108px; }
.gsec-h:first-of-type { margin-top: 16px; }
.family.gsub { margin: 0 0 8px; }
/* 家電の大きさごとのカード（2026-10-31 v6.73）: 品目の小見出し（押すと品目のページ）の下に、洗濯容量・型・畳数ごとのカード */
.vgroup { margin-top: 24px; }
.genre-h + .vgroup { margin-top: 0; }
.vgroup .board { grid-auto-rows: 1fr; }   /* 「送料別」の札のあるカードの行だけ背が高くならないよう、品目の中のカードは全部同じ高さ */
.vgroup-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 10px; }
.vgroup-h h4 { margin: 0; font-size: .9375rem; line-height: 1.4; }
.vgroup-h h4 a { color: var(--text); }
.vgroup-h h4 a span { margin-left: 6px; color: var(--dim); }
.vgroup-h p { margin: 0; font-size: .75rem; color: var(--dim); }
.family.gsub a { font-size: .8125rem; }
@media (max-width: 640px) {
  .gsec-h { font-size: 1.125rem; margin-top: 40px; }
  .family.gsub { gap: 6px; }
  .family.gsub a { min-height: 36px; padding: 6px 12px; }
}

/* 単価計算の入口（2026-10-30 v6.71）。上のタブから外し、トップの単価ランキングと各品目のページに置く */
.board-keisan { margin: -4px 0 24px; }   /* 下のジャンルの並び（margin-top: -8px）との間を 16px に */
.board-keisan a { color: var(--accent); white-space: nowrap; }   /* トップではリンクと分かる色に・「（どっちが安い？）」の途中で折り返さない */

/* 家電のメーカーの選択（運営者用 /admin/makers/。2026-10-31 v6.72）。行・ボタンは 39ショップの判定と同じ部品 */
.mk-state { margin-top: 12px; color: var(--good-ink); }
.mk-state.wait { color: var(--warn-ink); }
.mk-help { margin: 0 0 12px; }
.mk-cat { margin: 20px 0 8px; }
.mk-none { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }

/* 終売品（2026-11-05 v6.86）。一覧のいちばん下のカード（押すと終売品のカードが開く）と、品目のページのお知らせ */
button.card { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.eol-hint { display: flex; align-items: center; height: 40px; margin-top: 8px; overflow: hidden; font-size: .8125rem; line-height: 1.5; color: var(--accent-ink); }
.eol-arrow { font-size: .625rem; color: var(--accent-ink); transition: transform .2s ease; }
.eol-open[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), .35); }
.eol-open[aria-expanded="true"] .eol-arrow { transform: rotate(180deg); }
.eol-l-close, .eol-open[aria-expanded="true"] .eol-l-open { display: none; }
.eol-open[aria-expanded="true"] .eol-l-close { display: inline; }
.eol-list { margin-top: 12px; }
.eol-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 16px; border: 1px solid #f0cf9f; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-ink); font-size: .875rem; line-height: 1.7; }
.eol-note b { flex: none; font-weight: 700; }
/* Yahoo!デベロッパーネットワークのクレジット（Yahoo のページの最下部）。決まりどおり、色・大きさはサイトの指定をかけずにブラウザの標準のまま（2026-11-05） */
.y-credit { display: block; padding: 8px 16px 24px; text-align: center; }
.y-credit span, .y-credit a { all: revert; }

/* ===== ディズニーの待ち時間と混雑予想（/disney/。2026-11-06 v6.93 ユーザー指示「他の人はごちゃごちゃして見づらいので素晴らしく見やすいサイト」）
 * 混雑の4段階は色だけで伝えない（数字・文字・凡例を必ず添える）。面の色は薄く、文字は同じ色相の濃い色（どれも AA 4.5:1 以上）:
 * 空いてる #0b6572 / #e6f4f5（6.0:1）・ふつう #3b4a5e / #eef2f6（7.9:1）・やや混雑 #9a4a07 / #fdf1e1（5.6:1）・混雑 #96101a / #fdeced（7.6:1）。
 * 印は円を使わず角丸の四角と短い線（ユーザーの決まり）。ランドとシーは .dn の data-park で片方だけ見せる（JavaScript が無いときは両方） */
/* 混雑の6段階の色（2026-11-08 v7.09 ユーザー指示「カレンダーの混雑の色もう少しメリハリがある色に」）: 空いてる＝青緑 → ふつう＝ほぼ白 → やや混雑＝黄 → 混雑＝だいだい → かなり混雑＝赤 → 大混雑＝濃い赤。
   どの段階も、数字の色は地に対して 5.8:1 以上。混雑から上のマスの中の小さい字は下でほぼ黒にする */
/* 地の色は v7.09 の色に白を20%混ぜた（2026-11-08 v7.11 ユーザー指示「カレンダーの色少しだけ薄くして」。ふつうはそのまま。字との差はどれも v7.09 より大きくなる） */
.dn { --lv0-bg: #f1f4f8; --lv0: #334155; --lv1-bg: #d1eff3; --lv1: #0a5560; --tl-bg: #d1eff3; --tl: #0a5560;   /* 空いてる＝灰・ふつう＝青緑（2026-11-13 v7.49 ユーザー指示「空いているとふつうの色入れ替えて」）。--tl は混雑と関係ない青緑 */ --lv2-bg: #fdecb3; --lv2: #6e4300; --lv3-bg: #fdd1a3; --lv3: #7c3200;
  --lv4-bg: #f9b5af; --lv4: #6f0d12; --lv5-bg: #f29999; --lv5: #4d070b; }
/* 大混雑のマスの中の小さい字（開園時間・天気・ホテル）は濃い字（灰色は地に対して 4.1:1 で AA に届かない） */
/* 混雑・かなり混雑・大混雑のマス（濃い地）の中の小さい字はほぼ黒の濃い色（地に対して 4.7:1 以上）、天気の絵とイベントの線は明るさ 55%（3:1 以上）。v7.09 */
.dn:not([data-park="sea"]) .dn-day.l3 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn), .dn[data-park="sea"] .dn-day.s3 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn), .dn:not([data-park="sea"]) .dn-day.l4 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn), .dn[data-park="sea"] .dn-day.s4 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn), .dn:not([data-park="sea"]) .dn-day.l5 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn), .dn[data-park="sea"] .dn-day.s5 :is(.dn-o, .dn-h, .dn-h.none, .dn-w, .dn-w .lo, .p1.nm, .dn-dn) { color: #1f2937; }
.dn:not([data-park="sea"]) .dn-day.l3.sun .dn-dn, .dn[data-park="sea"] .dn-day.s3.sun .dn-dn, .dn:not([data-park="sea"]) .dn-day.l4.sun .dn-dn, .dn[data-park="sea"] .dn-day.s4.sun .dn-dn, .dn:not([data-park="sea"]) .dn-day.l5.sun .dn-dn, .dn[data-park="sea"] .dn-day.s5.sun .dn-dn { color: #6b0a10; }
.dn:not([data-park="sea"]) .dn-day.l3.sat .dn-dn, .dn[data-park="sea"] .dn-day.s3.sat .dn-dn, .dn:not([data-park="sea"]) .dn-day.l4.sat .dn-dn, .dn[data-park="sea"] .dn-day.s4.sat .dn-dn, .dn:not([data-park="sea"]) .dn-day.l5.sat .dn-dn, .dn[data-park="sea"] .dn-day.s5.sat .dn-dn { color: #172554; }
.dn:not([data-park="sea"]) .dn-day.l3 .ev-hol, .dn[data-park="sea"] .dn-day.s3 .ev-hol, .dn:not([data-park="sea"]) .dn-day.l4 .ev-hol, .dn[data-park="sea"] .dn-day.s4 .ev-hol, .dn:not([data-park="sea"]) .dn-day.l5 .ev-hol, .dn[data-park="sea"] .dn-day.s5 .ev-hol { color: #5c0a0e; }
.dn:not([data-park="sea"]) .dn-day.l3 .ev-pref, .dn[data-park="sea"] .dn-day.s3 .ev-pref, .dn:not([data-park="sea"]) .dn-day.l4 .ev-pref, .dn[data-park="sea"] .dn-day.s4 .ev-pref, .dn:not([data-park="sea"]) .dn-day.l5 .ev-pref, .dn[data-park="sea"] .dn-day.s5 .ev-pref { color: #4a2800; }
.dn:not([data-park="sea"]) .dn-day.l3 .ev-bday, .dn[data-park="sea"] .dn-day.s3 .ev-bday, .dn:not([data-park="sea"]) .dn-day.l4 .ev-bday, .dn[data-park="sea"] .dn-day.s4 .ev-bday, .dn:not([data-park="sea"]) .dn-day.l5 .ev-bday, .dn[data-park="sea"] .dn-day.s5 .ev-bday { color: #053a42; }
.dn:not([data-park="sea"]) .dn-day.l3 .ev-anniv, .dn[data-park="sea"] .dn-day.s3 .ev-anniv, .dn:not([data-park="sea"]) .dn-day.l4 .ev-anniv, .dn[data-park="sea"] .dn-day.s4 .ev-anniv, .dn:not([data-park="sea"]) .dn-day.l5 .ev-anniv, .dn[data-park="sea"] .dn-day.s5 .ev-anniv { color: #0f2c55; }
.dn:not([data-park="sea"]) .dn-day.l3 .p1.hi, .dn[data-park="sea"] .dn-day.s3 .p1.hi, .dn:not([data-park="sea"]) .dn-day.l4 .p1.hi, .dn[data-park="sea"] .dn-day.s4 .p1.hi, .dn:not([data-park="sea"]) .dn-day.l5 .p1.hi, .dn[data-park="sea"] .dn-day.s5 .p1.hi { color: #4a1504; }
.dn:not([data-park="sea"]) .dn-day.l3 .p1.lo, .dn[data-park="sea"] .dn-day.s3 .p1.lo, .dn:not([data-park="sea"]) .dn-day.l4 .p1.lo, .dn[data-park="sea"] .dn-day.s4 .p1.lo, .dn:not([data-park="sea"]) .dn-day.l5 .p1.lo, .dn[data-park="sea"] .dn-day.s5 .p1.lo { color: #172554; }
.dn[data-park="land"] .p-sea, .dn[data-park="sea"] .p-land { display: none !important; }
.dn-unofficial { margin-top: 12px; font-size: .75rem; color: var(--faint); }
.dn-sub { color: var(--dim); font-size: .875rem; line-height: 1.7; margin-top: 4px; }
.dn-tabbar { position: sticky; top: var(--dn-top, 0px); z-index: 15; background: rgba(247, 248, 250, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 8px 0; }
.dn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); max-width: 560px; }
.dn-tab { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--r-sm); font-weight: 700; font-size: .9375rem; color: var(--dim); text-decoration: none; }
.dn-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 2px 8px rgba(15, 27, 45, .06); }
.dn-tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* パークのタブはパークのイメージカラー（ランド＝ピンク・シー＝青。2026-11-07 v6.99 ユーザー指示「ディズニーランド、シーともにタブの色を変えて。イメージカラー色で」）。
 * 選んだタブは色の地に白い文字（6.0:1・6.7:1）、選んでいないタブは色の文字（灰色の地で 7 以上） */
.dn-tab[data-p="land"] { color: #9D174D; }
.dn-tab[data-p="sea"] { color: #1E40AF; }
.dn-tab[data-p="land"]:hover { background: #FCE7F3; text-decoration: none; }
.dn-tab[data-p="sea"]:hover { background: #DBEAFE; text-decoration: none; }
.dn-tab[data-p="land"][aria-selected="true"], .dn[data-park="land"] .dn-tab[data-p="land"] { background: #BE185D; color: #fff; }
.dn-tab[data-p="sea"][aria-selected="true"], .dn[data-park="sea"] .dn-tab[data-p="sea"] { background: #1D4ED8; color: #fff; }
/* #sea で開いたとき、スクリプトが aria-selected を直すまでの間もランドが選ばれて見えないよう、ページの頭で決めた data-park を優先（点検役の指摘） */
.dn[data-park="sea"] .dn-tab[data-p="land"] { background: transparent; color: #9D174D; box-shadow: none; }
.dn[data-park="land"] .dn-tab[data-p="sea"] { background: transparent; color: #1E40AF; box-shadow: none; }
.dn[data-park="sea"] .dn-tab[data-p="land"]:hover { background: #FCE7F3; }
.dn[data-park="land"] .dn-tab[data-p="sea"]:hover { background: #DBEAFE; }
@media (max-width: 640px) { .dn-tab { font-size: .875rem; } }

/* カレンダー（パソコンの幅では左にカレンダー・右に日付の詳しい欄） */
.dn-cal-sec .wrap { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .dn-cal-sec .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: start; }
  .dn-cal-sec h2, .dn-cal-sec .dn-sub, .dn-cal-sec .dn-legend { grid-column: 1 / -1; }
  .dn-detail { position: sticky; top: calc(var(--dn-top, 0px) + 72px); }
}
.dn-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .8125rem; color: var(--dim); }
.dn-legend ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.dn-legend li { display: flex; align-items: center; gap: 6px; }
.dn-legend small { color: var(--faint); font: .75rem var(--mono); }
.dn-legend .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-right: 2px; }   /* 印の場所はどれも16px（説明の左端をそろえる。v6.97） */
.dn-legend .sw.lv0 { background: var(--lv0-bg); box-shadow: inset 0 0 0 1.5px var(--lv0); }
.dn-legend .sw.lv1 { background: var(--lv1-bg); box-shadow: inset 0 0 0 1.5px var(--lv1); }
.dn-legend .sw.lv2 { background: var(--lv2-bg); box-shadow: inset 0 0 0 1.5px var(--lv2); }
.dn-legend .sw.lv3 { background: var(--lv3-bg); box-shadow: inset 0 0 0 1.5px var(--lv3); }
.dn-legend .sw.lv4 { background: var(--lv4-bg); box-shadow: inset 0 0 0 1.5px var(--lv4); }
.dn-legend .sw.lv5 { background: var(--lv5-bg); box-shadow: inset 0 0 0 1.5px var(--lv5); }
.dn-legend-mk .mk { position: static; }
/* 凡例の位置をそろえる（2026-11-07 v6.97 ユーザー指示「縦横アイコン等がズレているところがあるので合わせる」）:
 * スマホでは混雑の4つを2列の格子に（折り返しで2つめの位置が行ごとに違った）。印は文字の1行めの高さの真ん中に置く（2行になる説明で印が行の間に浮いた） */
.dn-legend-mk li { align-items: flex-start; }
.dn-legend-mk .mk-bar { margin-top: calc((1.6em - 4px) / 2); }
.dn-legend-mk li { line-height: 1.6; }
@media (max-width: 640px) { .dn-legend ul.p-land, .dn-legend ul.p-sea { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dn-js .dn-month:not(.on) { display: none; }
.dn-month + .dn-month { margin-top: 24px; }
.dn-js .dn-month + .dn-month { margin-top: 0; }
.dn-mhead { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 8px; }
.dn-mhead h3 { text-align: center; font-size: 1.125rem; font-family: var(--head); }
.dn-mnav { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.dn-mnav:disabled { opacity: .35; cursor: default; }
.dn-mnav:not(:disabled):hover { border-color: var(--text); }
html:not(.dn-js) .dn-mnav { visibility: hidden; }
.dn-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; gap: 4px; }   /* 曜日の段のあとの週は、どの週も同じ高さ（イベントの線が多い週だけ高かった。v6.97） */
.dn-wd { text-align: center; font: 600 .75rem/1 var(--mono); color: var(--dim); padding: 4px 0 6px; }
.dn-wd.sun { color: #b8141f; }
.dn-wd.sat { color: #1d4ed8; }
.dn-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 124px; padding: 8px 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.dn-day:hover { border-color: var(--line-2); }
.dn-day:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* 日付は、待ち時間の数字（等幅）と見分けやすいように、本文の書体の太字・濃い色・少し大きく（2026-11-08 v7.15 ユーザー指示「カレンダーの日付が見づらいから改善して」。前は 12px の灰色の等幅） */
.dn-dn { font: 700 .875rem/1 var(--sans); color: var(--text); letter-spacing: 0; }
@media (max-width: 640px) { .dn-dn { font-size: .8125rem; } }
.dn-day.sun .dn-dn { color: #b8141f; }
.dn-day.sat .dn-dn { color: #1d4ed8; }
.dn-v { font: 700 1rem/1 var(--mono); min-height: 1rem; letter-spacing: -.02em; }
/* 予想の日は点線の枠（実績と見分ける）。下の小さい数字はディズニーホテルの最安（万円） */
.dn-day.pred { border-style: dashed; border-color: var(--line-2); }
.dn-h { font: 500 .625rem/1 var(--mono); color: var(--dim); letter-spacing: -.02em; white-space: nowrap; }
.dn-h.none { color: var(--dim); }   /* 新しい混雑の色の地の上でも AA（--faint は空いてる・やや混雑の地で 4.3:1。v7.09 点検役の指摘） */
.dn-day.today { border: 2px solid var(--text); padding-top: 7px; padding-bottom: 5px; }   /* 枠が1px太いぶん中を1px詰めて、同じ週のマスと文字の高さをそろえる（v6.97） */
.dn-day.today.pred { border-style: dashed; }   /* 今日も予想のあいだは点線（実績が出たら実線。v7.09 点検役の指摘） */
.dn-lleg .lp-prev[hidden] { display: none; }
.dn-day.today .dn-dn::after { content: "今日"; margin-left: 2px; font-size: .625rem; }
.dn-day.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--s1); }
.dn:not([data-park="sea"]) .dn-day.l0, .dn[data-park="sea"] .dn-day.s0 { background: var(--lv0-bg); }
.dn:not([data-park="sea"]) .dn-day.l1, .dn[data-park="sea"] .dn-day.s1 { background: var(--lv1-bg); }
.dn:not([data-park="sea"]) .dn-day.l2, .dn[data-park="sea"] .dn-day.s2 { background: var(--lv2-bg); }
.dn:not([data-park="sea"]) .dn-day.l3, .dn[data-park="sea"] .dn-day.s3 { background: var(--lv3-bg); }
.dn:not([data-park="sea"]) .dn-day.l4, .dn[data-park="sea"] .dn-day.s4 { background: var(--lv4-bg); }
.dn:not([data-park="sea"]) .dn-day.l5, .dn[data-park="sea"] .dn-day.s5 { background: var(--lv5-bg); }
.dn-day.l0 .dn-v.p-land, .dn-day.s0 .dn-v.p-sea { color: var(--lv0); }
.dn-day.l1 .dn-v.p-land, .dn-day.s1 .dn-v.p-sea { color: var(--lv1); }
.dn-day.l2 .dn-v.p-land, .dn-day.s2 .dn-v.p-sea { color: var(--lv2); }
.dn-day.l3 .dn-v.p-land, .dn-day.s3 .dn-v.p-sea { color: var(--lv3); }
.dn-day.l4 .dn-v.p-land, .dn-day.s4 .dn-v.p-sea { color: var(--lv4); }
.dn-day.l5 .dn-v.p-land, .dn-day.s5 .dn-v.p-sea { color: var(--lv5); }
.mk { position: absolute; display: block; }
.mk-good { top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 2px; background: var(--tl); }
.dn-legend-mk .mk-good { margin: calc((1.6em - 8px) / 2) 8px 0 0; flex: none; }   /* 1行めの真ん中・縮ませない（スマホで 5.4×8px に潰れていた。v6.97 点検役の指摘） */
.dn-legend-mk .mk-bar { width: 16px; height: 4px; border-radius: 2px; background: #2e7d4f; flex: none; }
@media (max-width: 640px) { .dn-day { min-height: 108px; padding: 7px 0 5px; } .dn-day.today { padding-top: 6px; padding-bottom: 4px; } .dn-v { font-size: .9375rem; } .dn-day.today .dn-dn::after { content: none; } }
/* マスの開園時間・行事・イベントの線（2026-11-07 v6.95 ユーザー指示「混雑カレンダーを縦に少し長くしてパークの時間、誕生日、ディズニーに関する情報を入れて」）。
 * 行事の文字は種類ごとの色（祝日＝赤・県民の日＝橙・誕生日＝青緑。どのマスの色の上でも AA 5.7:1 以上）。
 * イベントは期間中のマスのいちばん下に色の線。名前は初日・月の1日・日曜日だけ（ほかの日は線だけ）。色は月の下の一覧と同じ */
.dn-o { font: 500 .625rem/1 var(--mono); color: var(--dim); letter-spacing: -.02em; white-space: nowrap; }
.dn-o, .dn-h { min-height: .625rem; }
/* 天気の段（2026-11-07 v6.99）: 天気のカラーアイコン（disney.php の先頭の SVG の symbol）と 最高/最低。スマホは幅が狭いので最高だけ。無い日も空の段 */
.dn-w { display: inline-flex; align-items: center; gap: 2px; min-height: 16px; font: 500 .625rem/1 var(--mono); color: var(--dim); letter-spacing: -.03em; white-space: nowrap; }
.dn-w .wxi { width: 16px; height: 16px; flex: none; }
.dn-w i { font-style: normal; }
/* 1か月予報の気温の傾向（v7.05）: 高め＝暖色・低め＝寒色・平年並＝灰色（どの混雑の地の色の上でも AA） */
.dn-w .p1, .dn-p1 .p1 { font: 700 .625rem/1 var(--sans); letter-spacing: 0; }
.dn-p1 .p1 { font-size: .8125rem; margin-right: 4px; }
.p1.hi { color: #9a3412; } .p1.lo { color: #1e40af; } .p1.nm { color: var(--dim); }
.dn-p1 small { color: var(--dim); font-size: .75rem; }
@media (max-width: 640px) { .dn-w .lo { display: none; } }
.dn-dl .wxk { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: -5px; }
/* 凡例の天気のアイコン（1行。スマホでも5つが1行に収まる） */
.dn-legend ul.dn-legend-wx { gap: 8px 12px; }
.dn-legend-wx li { gap: 6px; }
.dn-legend-wx svg { flex: none; }   /* 無い日も空の段を取る（同じ週のマスで行事の文字の高さをそろえる。v6.97） */
@media (max-width: 360px) { .dn-o { letter-spacing: -.08em; } }
.dn-e { display: grid; gap: 2px; font: 600 .625rem/1.25 var(--sans); text-align: center; }
.dn-e .ev-hol, .dn-es .ev-hol { color: #96101a; } .dn-e .ev-pref, .dn-es .ev-pref { color: var(--lv2); } .dn-e .ev-bday, .dn-es .ev-bday { color: var(--tl); } .dn-e .ev-anniv, .dn-es .ev-anniv { color: #1f5590; }
/* スマホの狭いマスでは名前の代わりに短い札（祝日・県民の日・誕生日・記念日。1行）。名前は日付の欄と月の下の一覧に出る（点検役の指摘: 名前が単語の途中で折れ、週ごとにマスの高さがばらついた） */
.dn-es { display: none; font: 600 .625rem/1.25 var(--sans); text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .dn-e { display: none; } .dn-es { display: grid; gap: 2px; } }
/* イベントの線: どの日も同じ高さ（名前の行＋4pxの線）にして、隣の日と横一線にそろえる。名前は線の上に、その週・期間の続く日数ぶん右へ伸ばす
 * （カレンダーのアプリと同じ見せ方。押すのは名前の下のマスなので、名前は押せないようにする） */
.dn-bd { position: relative; align-self: stretch; margin: auto -2px 0; height: 18px; border-bottom: 4px solid var(--bc, var(--line-2)); }
.dn-bd + .dn-bd { margin-top: 2px; }
/* 名前と線は同じ色。名前は白い札に載せて、混雑の背景の濃さで色が変わって見えないようにする（2026-11-13 v7.47 ユーザー指示「イベントの名前と線の色…背景の色のこさで色が変わってしまうので同じ色に」） */
.dn-bd .bl { position: absolute; left: 2px; bottom: 3px; z-index: 2; max-width: calc(var(--span, 1) * 100% + (var(--span, 1) - 1) * 6px - 4px); box-sizing: border-box; padding: 1px 4px; border-radius: 4px; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font: 700 .625rem/1.2 var(--sans); color: var(--bc, var(--dim)); pointer-events: none; }
@media (max-width: 640px) { .dn-bd { margin: auto 0 0; } }
/* 色はイベントごと（赤は「混雑」とまぎらわしいので使わない。点検役の指摘）。線と名前は同じ1色で、線はどのマスの色の上でも 3:1 以上、名前（白い札）は 6.5:1 以上（v7.47） */
/* クリスマス＝ひいらぎの緑・お正月＝金屏風の金・ハロウィーン＝かぼちゃの橙・ラソス＝メキシコのターコイズ・ミニー＝ミニーのピンク・25周年＝シーの紺・ホリデーナイトメアー＝紫・カントリーベア＝木の茶（v7.47） */
.b-xm { --bc: #1b6b3f; --bi: #1b6b3f; } .b-ny { --bc: #735600; --bi: #735600; } .b-hw { --bc: #9a4208; --bi: #9a4208; } .b-lz { --bc: #0e6574; --bi: #0e6574; }
.b-mf { --bc: #a8216b; --bi: #a8216b; } .b-an { --bc: #2f4f80; --bi: #2f4f80; } .b-hn { --bc: #5b3f99; --bi: #5b3f99; } .b-cb { --bc: #7a4a1f; --bi: #7a4a1f; }
.ev-t.ev-tdr { color: var(--bi); border-color: var(--bc); background: var(--surface); }
.dn-perlist small { color: var(--faint); margin-left: 4px; white-space: nowrap; }
/* 期間・札・名前の列をそろえる（期間の長さで札の位置がずれていた。v6.97）。スマホは札を左に、期間と名前を2段に */
.dn-evlist.dn-perlist li { display: grid; grid-template-columns: 8.5rem 4.5rem minmax(0, 1fr); grid-template-areas: "d t n"; align-items: start; gap: 8px; }
.dn-perlist .ev-d { grid-area: d; white-space: nowrap; line-height: 1.6; }
.dn-perlist .ev-t { grid-area: t; text-align: center; margin-top: 1px; }
.dn-perlist .ev-n { grid-area: n; line-height: 1.6; word-break: auto-phrase; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .dn-evlist.dn-perlist li { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "t d" "t n"; row-gap: 0; }
}
.dn-evline { display: block; word-break: auto-phrase; overflow-wrap: anywhere; }
.dn-evline + .dn-evline { margin-top: 4px; }
.dn-dl .dn-evline small, .dn-evline small { display: block; margin-left: 0; white-space: nowrap; }   /* 期間は名前の下の段（名前のあとに続けると名前が単語の途中で折れた。v6.97） */
/* 日付の欄のショー: 種類は同じ幅の札を名前の前に（札の幅をそろえ、名前は2列目で折り返す。2026-11-07 v6.96） */
.dn-shl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dn-shl li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: start; }
.dn-shl .sk { display: block; font: 600 .6875rem/1 var(--sans); padding: 4px 0; margin-top: 2px; text-align: center; white-space: nowrap; border-radius: 4px; border: 1px solid var(--line-2); color: var(--dim); background: var(--surface); }
.dn-shl .sn { word-break: auto-phrase; overflow-wrap: anywhere; }
.dn-shn { margin: 6px 0 0; font-size: .8125rem; color: var(--dim); }
/* 公演の時刻は同じ幅の札を横に並べる（2026-11-07 v6.97 ユーザー指示「ショー関係は時間が重要なのでいつやるか時間のせる」）。今日の始まった回は薄く */
.dn-shl .tm { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dn-shl .tm b { width: 44px; padding: 4px 0; text-align: center; font: 600 .75rem/1 var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px; }
.dn-shl .tm b.past { color: var(--faint); background: var(--surface); border-color: var(--line); }
.dn-shl .sn small { margin-left: 6px; }
/* 「この日」（祝日・県民の日・誕生日・記念日）の札は種類ごとの色（カレンダーの文字と同じ色） */
.dn-shl .sk.ev-hol { color: #96101a; border-color: #f2c4c7; background: #fdeced; }
.dn-shl .sk.ev-pref { color: var(--lv2); border-color: #f0cf9f; background: var(--lv2-bg); }
.dn-shl .sk.ev-bday { color: var(--tl); border-color: #b9dfe3; background: var(--tl-bg); }
.dn-shl .sk.ev-anniv { color: #1f5590; border-color: #b9cde6; background: #eef4fb; }
.dn-mnote { margin-top: 12px; font-size: .8125rem; line-height: 1.7; color: var(--dim); }
.dn-mnote b { color: var(--text); margin-right: 8px; }
.dn-evlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dn-evlist li { display: flex; align-items: center; gap: 8px; }
.dn-evlist .ev-d { font: .8125rem var(--mono); color: var(--text); min-width: 4.5em; }
.ev-t { display: inline-block; flex: none; white-space: nowrap; font: 600 .6875rem/1 var(--sans); padding: 4px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--dim); background: var(--surface); }
.ev-t.ev-hol { color: #96101a; border-color: #f2c4c7; background: #fdeced; }
.ev-t.ev-pref { color: var(--lv2); border-color: #f0cf9f; background: var(--lv2-bg); }
.ev-t.ev-bday { color: var(--tl); border-color: #b9dfe3; background: var(--tl-bg); }
.ev-t.ev-anniv { color: #1f5590; border-color: #b9cde6; background: #eef4fb; }

/* 日付の詳しい欄 */
.dn-js .dn-dd:not(.on) { display: none; }
.dn-dd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); word-break: auto-phrase; }   /* 語の途中・1文字だけの折り返しを避ける（v7.03 点検役の指摘） */
.dn-dd + .dn-dd { margin-top: 8px; }
.dn-dd h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.125rem; font-family: var(--head); }
.dn-dd h3 .dn-pk { font: 600 .75rem/1 var(--sans); padding: 5px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--dim); }
.dn-dd h3 .dn-pk.p-land { color: #9D174D; background: #FCE7F3; border-color: #F9A8D4; }
.dn-dd h3 .dn-pk.p-sea { color: #1E40AF; background: #DBEAFE; border-color: #93C5FD; }
.dn-dl { margin: 12px 0 0; display: grid; gap: 10px; }
/* 見出しは短い（この日・開園時間・混雑・イベント・期間限定・ショー）ので 64px の列。パークの名前（「ランドの」）は JavaScript でタブが効くときは見えなくする（v6.97） */
.dn-dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .875rem; }
.dn-dl dt { color: var(--dim); font-size: .8125rem; }
.dn-js .dn-dl dt .pk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dn-dl dd { margin: 0; line-height: 1.6; }
.dn-dl small { color: var(--faint); font-size: .75rem; margin-left: 4px; }
.dn-dl .bl { display: block; margin-left: 0; }
/* スマホはどの行も見出しを上・中身を下に（行によって中身の始まる位置が違わないように） */
@media (max-width: 640px) { .dn-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.lvchip { display: inline-block; font: 700 .75rem/1 var(--sans); padding: 4px 8px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; }
.lvchip.lv0 { color: var(--lv0); background: var(--lv0-bg); }
.lvchip.lv1 { color: var(--lv1); background: var(--lv1-bg); }
.lvchip.lv2 { color: var(--lv2); background: var(--lv2-bg); }
.lvchip.lv3 { color: var(--lv3); background: var(--lv3-bg); }
.lvchip.lv4 { color: var(--lv4); background: var(--lv4-bg); }
.lvchip.lv5 { color: var(--lv5); background: var(--lv5-bg); }
.dn-dd h4 { margin-top: 16px; font-size: .875rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.dn-dd h4 small { font-weight: 400; color: var(--faint); font-size: .75rem; }
.dn-hotels { list-style: none; margin: 8px 0 0; padding: 0; }
.dn-hotels li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.5; }
.dn-hotels .hn .tag { margin-left: 4px; white-space: nowrap; }
.dn-hotels a.hp { display: inline-flex; align-items: baseline; gap: 2px; justify-content: flex-end; min-height: 44px; align-items: center; color: var(--text); text-decoration: none; white-space: nowrap; }
.dn-hotels a.hp b { font: 700 1rem var(--mono); }
.dn-hotels a.hp .go { margin-left: 8px; font-size: .75rem; color: var(--accent-ink); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 6px; padding: 4px 8px; }
.dn-hotels a.hp:hover .go { background: var(--accent-soft); }
.dn-hotels li.off { color: var(--faint); }
.dn-hotels li.off .hp { font-size: .75rem; }

/* アトラクション */
.dn-hrs { margin: 16px 0 8px; padding: 12px 16px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dn-hrs figcaption { font-size: .8125rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dn-hrs figcaption small { font-weight: 400; color: var(--dim); }
/* 待ち時間のグラフ（2026-11-06 ユーザー指示「アトラクションをクリックするとアトラクションの待ち時間のグラフが出るように」）。
 * 棒＝最近7日の平均（--s1）、横線＝今日（--s2・棒と重なるので白い縁）。2系列は dataviz の検証済みの組（白い面で合格）。一番長い時間だけ数字を添える */
.dn-charts { display: grid; gap: 16px; margin: 4px 0 8px; }
@media (min-width: 760px) { .dn-charts { grid-template-columns: 3fr 2fr; } }
.dn-chart { min-width: 0; }
.dn-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .75rem; color: var(--dim); margin: 0 0 4px; }
.dn-leg span { display: inline-flex; align-items: center; gap: 6px; }
.dn-leg .sw-a { width: 12px; height: 10px; border-radius: 2px; background: var(--s1); }
.dn-leg .sw-b { width: 14px; height: 3px; border-radius: 2px; background: var(--s2); }
.dn-bars { display: flex; align-items: flex-end; gap: 2px; height: 112px; padding: 18px 0 20px; }
.dn-bars .bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.dn-bars .bar i { display: block; width: 100%; background: var(--s1); border-radius: 4px 4px 0 0; }
.dn-bars .bar .tk { position: absolute; left: -1px; right: -1px; height: 3px; background: var(--s2); border-radius: 2px; box-shadow: 0 0 0 1px var(--surface); }
/* いちばん長い時間の数字は平均（棒）の値なので棒と同じ色合いの濃い色（#0b6572 は白地 6.6:1）。3桁でも隣の列にはみ出しすぎないよう幅は列＋左右4px */
.dn-bars .bar u { position: absolute; left: -4px; right: -4px; margin-bottom: 2px; text-align: center; text-decoration: none; font: 600 .625rem/1 var(--mono); letter-spacing: -.04em; color: var(--tl); white-space: nowrap; }
.dn-bars .bar em { position: absolute; bottom: -16px; left: -8px; right: -8px; text-align: center; font: normal .6875rem/1 var(--mono); color: var(--dim); white-space: nowrap; }
.dn-bars .bar.none i { background: transparent; }
.dn-bars.days { gap: 8px; }
.dn-bars.days .bar em { font-size: .625rem; }
.dn-list { list-style: none; margin: 8px 0 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dn-list > li + li { border-top: 1px solid var(--line); }
/* 行: 名前・いまの数字・1日の折れ線（2026-11-07 v6.95）。ボタンだけが開け閉めする（グラフに指を置いても開かない） */
.dn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "an aw" "ch ch"; column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 16px 0; }
.dn-row .dn-line, .dn-row .dn-lnone { grid-area: ch; }
.dn-list details { padding: 8px 16px 12px; }
.dn-list summary { list-style: none; cursor: pointer; scroll-margin-top: calc(var(--dn-top, 0px) + var(--dn-bar, 70px) + 64px); }
.dn-list summary::-webkit-details-marker { display: none; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 折れ線の下のボタン（押すと30分ごとの待ち時間とグラフ）。どの行も同じ幅・高さ 44px（文字数で幅を変えない） */
.dn-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 184px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--dim); font-size: .75rem; font-weight: 600; }
.dn-more::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; }
.dn-list details[open] .dn-more::after { transform: rotate(-135deg); margin-top: 3px; }
.dn-list summary.dn-more:hover { border-color: var(--text); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .dn-more::after { transition: none; } }
.dn-list summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dn-list .an { grid-area: an; min-width: 0; }
.dn-list .an b { display: block; font-size: .9375rem; line-height: 1.5; }
.dn-list .aa { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; font-size: .75rem; color: var(--faint); }
.dn-list .st { font: 600 .6875rem/1 var(--sans); padding: 3px 6px; border-radius: 4px; color: var(--lv2); background: var(--lv2-bg); }
.dn-list .dpa { font: 600 .6875rem/1 var(--sans); padding: 3px 6px; border-radius: 4px; color: var(--tl); border: 1px solid #b9dfe3; }
.dn-list .dpa.end { color: var(--dim); border-color: var(--line-2); }
.dn-list .aw { grid-area: aw; text-align: right; white-space: nowrap; }
.dn-list .aw b { font: 700 1.5rem/1 var(--mono); letter-spacing: -.02em; }
.dn-list .aw small { font-size: .75rem; color: var(--dim); margin-left: 2px; }
.dn-list .awl { display: block; margin-top: 4px; font-size: .6875rem; color: var(--dim); }
.dn-list .awm { display: block; margin-top: 2px; font-size: .6875rem; color: var(--dim); }   /* 平均（v7.06 から。大きい数字は最高） */
.dn-list .awm b { font: 600 .75rem/1 var(--mono); color: var(--text); letter-spacing: 0; }
/* 選んだ日の記録（v7.05）: 今日の行は隠し（hidden。行の display を上書き）、読み込んだ行を足す。右端の「今日」は更新ボタンと同じ位置・大きさ */
.dn-list > li[hidden] { display: none !important; }
.dn-list.loading { opacity: .55; transition: opacity .15s; }
.dn-rec-back { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 700 .75rem/1 var(--sans); cursor: pointer; }
.dn-rec-back:hover { border-color: var(--text); }
.dn-rec-back:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* 1日の混み具合の記録の帯（2026-11-07 v6.94 ユーザー指示「今のゲージを1日の混み具合の記録にして下のボタンを押すと詳細の時間が表示されるようにする」）。
 * 30分ごとのマスを待ち時間の7段階で塗る。短い＝カレンダーの「空いてる」と同じ青緑、長くなるほど黄→橙→赤→えんじで暗くなる（明るさが段階どおりに下がる）。
 * 隣どうしの色の差は ΔE 8.5 以上（色覚の型が違う人の見え方でも。scratchpad の scale2.py で計算）。マスの数字は濃い文字か白で AA 4.5:1 以上。
 * 一時運営中止＝濃い灰、休止・案内終了＝斜線、待ち時間の表示なし・記録なし＝薄い灰（文字は --dim で 5.5:1）、これから＝点線の枠。
 * 待ち時間が付かない施設（遊び場など）は帯を出さない（点検役の指摘: 1日中「−」で帯が途中で終わっているように見えた） */
.dn { --w0: #8ccfd3; --w1: #ece0a6; --w2: #efb35f; --w3: #e5874a; --w4: #d4613f; --w5: #a8262d; --w6: #5c1018; --wx: #6b7686; --wn: #dfe5ec; }
.dn .w0 { background: var(--w0); } .dn .w1 { background: var(--w1); } .dn .w2 { background: var(--w2); } .dn .w3 { background: var(--w3); }
.dn .w4 { background: var(--w4); } .dn .w5 { background: var(--w5); color: #fff; } .dn .w6 { background: var(--w6); color: #fff; }
.dn .wx { background: var(--wx); color: #fff; } .dn .wn { background: var(--wn); color: var(--dim); }
.dn .wc { background: repeating-linear-gradient(135deg, var(--line-2) 0 2px, var(--surface) 2px 5px); color: var(--dim); }
/* ボタンで開くマスの色の凡例（マスのすぐ下） */
.dn-wleg { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: -8px 0 16px; padding: 0; font-size: .6875rem; color: var(--dim); }
.dn-wleg li { display: flex; align-items: center; gap: 4px; }
.dn-wleg .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* 1日の折れ線（品目ページの推移グラフと同じ作り: 左に目盛り・右端に最後の値・指を置くと十字線と値）。
 * 線は --s1、一時運営中止の時間は薄い灰の帯（凡例あり）。縦の点線は上の時刻の目盛りと同じ位置 */
.dn-lleg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: .75rem; color: var(--dim); }
.dn-lleg span { display: inline-flex; align-items: center; gap: 6px; }
.dn-lleg .sw-l { width: 16px; height: 2px; border-radius: 2px; background: var(--s1); }
.dn-lleg .sw-p { width: 16px; height: 2px; border-radius: 2px; background: var(--s1); opacity: .25; }
.dn-lleg .sw-d { width: 12px; height: 12px; border-radius: 3px; background: rgba(107, 118, 134, .22); }
.dn-line { position: relative; margin: 0; }
.dn-lp { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: 6px; height: 64px; }
.dn-ly, .dn-le { position: relative; }
.dn-ly span, .dn-le span { position: absolute; transform: translateY(-50%); font: .6875rem/1 var(--mono); color: var(--faint); white-space: nowrap; }
.dn-ly span { right: 0; }
.dn-le span { left: 4px; font-weight: 600; color: var(--dim); }
.dn-la { position: relative; touch-action: pan-y; cursor: crosshair; }
.dn-la svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.dn-la .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dn-la .grid.v { stroke-dasharray: 2 3; }
.dn-la .dn-down { fill: rgba(107, 118, 134, .22); }
.dn-la .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dn-la .prev { fill: none; stroke: var(--s1); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .18; }   /* 前日（参考。かすかに見える程度＝v7.10 ユーザー指示） */
.dn-lv { position: absolute; transform: translate(8px, -50%); font: 600 .6875rem/1 var(--mono); color: var(--dim); white-space: nowrap; background: rgba(255, 255, 255, .85); padding: 1px 2px; border-radius: 3px; pointer-events: none; }
.dn-ldot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--s1); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.dn-line .tip { z-index: 3; }
.dn-lnone { grid-area: ch; font-size: .75rem; color: var(--faint); }
/* 帯の時刻の目盛り（一覧のいちばん上。下へ読み進めても見えるよう、パークの切り替えの帯のすぐ下で止める） */
.dn-list li.dn-axis { position: sticky; top: calc(var(--dn-top, 0px) + var(--dn-bar, 70px)); z-index: 5; display: grid; gap: 4px; padding: 10px 16px 8px; background: var(--surface); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 1px 0 var(--line), 0 6px 8px -6px rgba(15, 27, 45, .18); }
.dn-axis .lb { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-right: 50px; font-size: .75rem; font-weight: 700; color: var(--dim); }   /* 右の 50px は更新ボタン（44px）の分 */
.dn-axis .lb .upd { display: inline-flex; align-items: baseline; gap: 4px; font: 400 .6875rem/1 var(--sans); color: var(--dim); white-space: nowrap; }
.dn-axis .lb .upd b { font: 600 .75rem/1 var(--mono); color: var(--text); }   /* 更新時刻（v7.05） */
/* 更新ボタン（v6.98）: 目盛りの欄の右端（グラフの右の数字の列の上）。角丸の四角・押すと矢印が回る（動きを減らす設定では回さない） */
.dn-reload { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.dn-reload:hover { border-color: var(--text); }
.dn-reload:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dn-reload[aria-disabled="true"] { cursor: progress; }
.dn-reload.spin svg { animation: dn-spin .8s linear infinite; }
@keyframes dn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dn-reload.spin svg { animation: none; } .dn-reload.spin { opacity: .6; } }
.dn-reload-msg { position: absolute; right: 16px; top: calc(100% + 4px); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow); font-size: .75rem; line-height: 1.4; color: var(--text); white-space: nowrap; }
.dn-reload-msg[hidden] { display: none; }
.dn-axis .dn-lp { height: 12px; }
.dn-axis .ax { position: relative; height: 12px; }
.dn-axis em { position: absolute; top: 0; font: normal .6875rem/1 var(--mono); color: var(--dim); white-space: nowrap; }
.dn-axis em { padding-left: 4px; }
.dn-axis em::before { content: ""; position: absolute; left: 0; top: -2px; width: 1px; height: 14px; background: var(--line-2); }
/* 右端の目盛りは文字を線の左に（枠からはみ出さないように） */
.dn-axis em.r { padding: 0 4px 0 0; transform: translateX(-100%); }
.dn-axis em.r::before { left: auto; right: 0; }
/* ボタンで開く時刻ごとの待ち時間 */
.dn-tlh { font-size: .8125rem; font-weight: 700; margin: 4px 0 8px; }
.dn-tl { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; }
.dn-tl li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 6px; color: var(--text); }
.dn-tl li.wc { box-shadow: inset 0 0 0 1px var(--line); }
.dn-tl span { font: .6875rem/1 var(--mono); }
.dn-tl b { font: 700 .9375rem/1 var(--mono); }
.dn-list li.off .an b { color: var(--dim); }
.dn-list .ad { padding: 12px 0 0; }
.dn-list .ad p { font-size: .8125rem; color: var(--dim); line-height: 1.7; }

/* ショー */

/* ディズニーホテルのページからの入口 */
.dn-link { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .875rem; }
.dn-link a { font-weight: 700; color: var(--accent-ink); }
.dn-link span { color: var(--dim); font-size: .8125rem; }
.dn-notes { margin: 8px 0 0; padding-left: 1.2em; font-size: .8125rem; line-height: 1.8; color: var(--dim); }
.dn-credit { margin-top: 12px; font-size: .8125rem; }
.dn-credit a { color: var(--dim); }

/* ヘッダーのタブ: ディズニーを足したぶん、幅に合わせて詰める（2026-11-07 v6.97。320〜1280px で右の余白にはみ出さず1行に収まることを測った。
 * スマホのタブは 単価・ガジェット・家電・ホテル・ディズニー の5つ。文字は画面の幅に合わせて 11〜13px、間は 2〜6px） */
@media (min-width: 441px) and (max-width: 640px) { .nav a { padding: 8px 8px; } }
@media (max-width: 440px) { .nav a { font-size: clamp(11px, 3.3vw, 13px); padding: 8px clamp(2px, 1vw, 6px); } }
@media (max-width: 359px) { .nav a { font-size: 11px; padding: 8px 2px; } .brand-t { font-size: .8125rem; } }
@media (min-width: 641px) and (max-width: 760px) { .nav { gap: 0; } .nav a { padding: 8px 7px; } .nav-search span { display: none; } }

/* アトラクションの種類のタイル・エリアの色・点の地図（2026-11-07 v7.00 ユーザー指示「画像は試しにおすすめでやってみて。微妙なら採用見送ります」。engine/disney_look.php）。
 * 公式の写真は使えないので、種類のアイコン（Lucide）を、エリアの色の薄い地の角丸タイルに。エリアの名前も同じ色（白地で 4.5:1 以上）。
 * 地図の四角は「30分ごとの待ち時間」と同じ7段階の色（文字は濃い色か白で AA）。押すと一覧のその施設へ（貼り付く帯の下に止まる） */
.dn-list .an { display: flex; gap: 10px; align-items: flex-start; }
.dn-list .an .tx { min-width: 0; }
.dn-list .at { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, #fff); }
.dn-list .aa .ar { color: var(--ac); font-weight: 600; }
.dn-list > li[id] { scroll-margin-top: calc(var(--dn-top, 0px) + var(--dn-bar, 70px) + 72px); }
.dn-map { margin: 12px 0 0; padding: 12px 16px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dn-map figcaption { font-size: .8125rem; font-weight: 700; }
.dn-map figcaption small { display: block; margin-top: 2px; font-weight: 400; font-size: .75rem; color: var(--dim); }
.dn-map > svg { display: block; width: 100%; max-width: 560px; height: auto; max-height: 560px; margin: 8px auto 0; border-radius: var(--r-sm); overflow: hidden; }   /* 背景の地図の角も丸める（v7.02） */
.dn-map .ar { font: 700 13px var(--sans); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.dn-map .mp rect { stroke: var(--ac, #fff); stroke-width: 2.5px; fill: var(--wn); }   /* 枠はエリアの色（v7.01 点検役の指摘: 名前の近くの四角が別のエリアに見えた） */
.dn-map .mp text { font: 700 15px var(--mono); text-anchor: middle; dominant-baseline: central; fill: #0f1b2d; }
.dn-map .mp.w0 rect { fill: var(--w0); } .dn-map .mp.w1 rect { fill: var(--w1); } .dn-map .mp.w2 rect { fill: var(--w2); } .dn-map .mp.w3 rect { fill: var(--w3); }
.dn-map .mp.w4 rect { fill: var(--w4); } .dn-map .mp.w5 rect { fill: var(--w5); } .dn-map .mp.w6 rect { fill: var(--w6); } .dn-map .mp.wx rect { fill: var(--wx); }
.dn-map .mp.w5 text, .dn-map .mp.w6 text, .dn-map .mp.wx text { fill: #fff; }
.dn-map .mp.wn text, .dn-map .mp.wc text { fill: var(--dim); }
.dn-map .mp:hover rect, .dn-map .mp:focus-visible rect { stroke: var(--text); stroke-width: 3px; }
.dn-map .mp:focus { outline: none; }
.dn-tleg { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 10px 0 0; padding: 0; font-size: .75rem; color: var(--dim); }
.dn-tleg li { display: flex; align-items: center; gap: 4px; }
.dn-tleg svg { flex: none; color: var(--text); }
@media (max-width: 640px) { .dn-map { padding: 10px 8px 12px; } .dn-map figcaption { padding: 0 4px; } .dn-tleg { padding: 0 4px; } }
/* 「AIによる分析結果」の札（2026-11-07 v7.01 ユーザー指示）。見出しの横に、角丸の小さな札 */
.dn-h2ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dn-ai { font: 700 .75rem/1 var(--sans); padding: 6px 10px; border-radius: var(--r-sm); color: #4338ca; background: #eef0ff; border: 1px solid #c7cbf5; }
/* 点の地図の背景（OpenStreetMap から描いた薄いパークの形）の出典 */
.dn-osm { margin: 4px 0 0; font-size: .6875rem; color: var(--dim); text-align: right; }
.dn-osm a { color: var(--dim); }
/* ショーの種類の札の色（2026-11-07 v7.01 ユーザー指示「アイコンに色が欲しい」）。種類ごとの色の字と薄い地（字は AA 4.5:1 以上） */
.dn-shl .sk.k-pd { color: #9a4a06; background: #fff3e2; border-color: #f2c99a; }
.dn-shl .sk.k-pn { color: #3730a3; background: #eef0ff; border-color: #c7cbf5; }
.dn-shl .sk.k-hb { color: #0e6577; background: #e5f5f8; border-color: #a9dbe5; }
.dn-shl .sk.k-hn { color: #1e3a8a; background: #e8eefc; border-color: #b6c6ef; }
.dn-shl .sk.k-fw { color: #b0174f; background: #fdecf3; border-color: #f3b8cf; }
.dn-shl .sk.k-pj { color: #6b21a8; background: #f4ecfc; border-color: #d8bff1; }
.dn-shl .sk.k-st { color: #276b43; background: #e8f4ed; border-color: #b4dbc3; }
.dn-shl .sk.k-rs { color: #7a4f24; background: #f6efe6; border-color: #dcc6ab; }
@media (max-width: 640px) { .dn-legend ul.dn-legend-wx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 天気の凡例は6つ。スマホは3列の格子で位置をそろえる（v7.01） */
/* 地図の目印（シンデレラ城・プロメテウス火山。v7.03）: 四角の下に、灰色のアイコンと名前を控えめに */
.dn-map .lm use { color: #5b6676; }   /* 背景との差 3:1 以上（点検役の指摘: 透けさせると 2.5:1） */
.dn-map .lm text { font: 700 11px var(--sans); fill: #3f4b5c; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* ポップコーン（v7.03）: 日付の欄の一覧・地図の番号つきのポップコーンの絵（#ati-pcmk）と、その下の一覧。語の途中で折らない（点検役の指摘） */
.dn-pcl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; word-break: auto-phrase; }
.dn-pcl b { font-weight: 700; margin-right: 6px; }
.dn-pcl small, .dn-pcleg small { margin-left: 0; color: var(--dim); font-size: .75rem; }
.dn-map .pc text, .dn-pcleg .n text { font: 700 11.5px var(--mono); text-anchor: middle; dominant-baseline: central; fill: #7f1d1d; }
.dn-pcmap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dn-pch { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .8125rem; font-weight: 700; }
.dn-pch svg { color: #b45309; flex: none; }
/* ポップコーンバケット（v7.05）: 日付の欄は名前・値段・売り場、地図の下は名前・値段・地図の番号（番号は角丸の四角。丸は使わない） */
.dn-bkl .bp { font: 600 .8125rem var(--mono); margin-right: 6px; }
.dn-bkh { margin-top: 14px; flex-wrap: wrap; row-gap: 2px; }   /* 説明の小さい文字は入らなければ次の行へ（見出しが「バケ/ット」と割れないように） */
.dn-bkm { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: .8125rem; word-break: auto-phrase; }
.dn-bkm li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bn bp" "bw bw"; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.dn-bkm .bn { grid-area: bn; } .dn-bkm .bn small { display: block; color: var(--dim); font-size: .75rem; }
.dn-bkm .bp { grid-area: bp; font: 600 .8125rem var(--mono); white-space: nowrap; text-align: right; }
.dn-bkm .bw { grid-area: bw; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dn-bkm .bw small { color: var(--dim); font-size: .75rem; }
.dn-bkm .pcn { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 4px; background: #fffbeb; border: 1px solid #e0a43a; color: #7f1d1d; font: 700 .6875rem/1 var(--mono); font-style: normal; }
@media (min-width: 821px) { .dn-bkm li { grid-template-columns: minmax(0, 1fr) 160px 96px; grid-template-areas: "bn bw bp"; align-items: center; } }
/* まとめた行（同じ店の常設のバケット）: 「名前 値段」を折り返して並べる */
.dn-bkm li.grp { grid-template-areas: "bn bw" "bk bk"; grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 821px) { .dn-bkm li.grp { grid-template-columns: minmax(0, 1fr) 160px 96px; grid-template-areas: "bn bw bw" "bk bk bk"; } }
.dn-bkm .bkg, .dn-bkl .bkg { grid-area: bk; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dn-bkl .bkg { margin-top: 4px; }
.dn-bkm .bkg > span, .dn-bkl .bkg > span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: .75rem; white-space: nowrap; }
.dn-bkm .bkg b, .dn-bkl .bkg b { font: 600 .75rem var(--mono); }
.dn-bkl li > small { margin-left: 0; }
/* ショーの DPA（v7.05）: 料金の札と目安の一言。注記は細字 */
.dn-shw .sdpa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; }
.dn-shw .sdpa .dpa { font: 600 .6875rem/1 var(--sans); padding: 3px 6px; border-radius: 4px; color: var(--tl); border: 1px solid #b9dfe3; white-space: nowrap; }
.dn-shw .sdpa small, .dn-shw .snote { font-size: .75rem; color: var(--dim); }
.dn-shw .snote { display: block; margin-top: 2px; }
.dn-pch small { font-weight: 400; color: var(--dim); font-size: .75rem; margin-left: 4px; }
.dn-pcleg { list-style: none; margin: 0; padding: 0; word-break: auto-phrase; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; font-size: .8125rem; }
.dn-pcleg li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 32px; line-height: 1.6; }
.dn-pcleg .n { display: block; }
.dn-pcleg b { font-weight: 700; margin-right: 6px; }
/* 期間限定フード（v7.03）: アトラクションの一覧の下。エリアごとに開け閉め。品名と値段は右ぞろえの2列 */
.dn-food { margin-top: 20px; }
.dn-food h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.0625rem; font-family: var(--head); }
.dn-food h3 svg { color: #b45309; flex: none; }
.dn-food h3 small { font: 400 .8125rem var(--sans); color: var(--dim); }
.dn-food .dn-sub { margin: 4px 0 10px; font-size: .75rem; }
/* 期間限定フード: 折りたたまずに全部（v7.04 ユーザー指示「フードは折りたたまっているので全フード記載」）。エリアの枠を広い画面は2列に流す */
.dn-fcols { display: grid; gap: 12px; }
.dn-fa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dn-fa h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin: 0; padding: 0 14px; font-size: .875rem; border-bottom: 1px solid var(--line); }
.dn-fa h4 .ar { color: var(--ac); font-weight: 700; }
.dn-fa h4 .cnt { color: var(--dim); font: 500 .75rem var(--mono); }
/* 品は広い画面で2列（行の高さがそろう）。区切り線は各品の上に引き、1段目の線は ul の外へ1px出して隠す（見出しの下線と二重にしない。日付で隠れた品があっても） */
/* お店ごと（v7.05）: エリアの枠の中に、お店のカードを広い画面は2列（同じ段のカードは高さをそろえる）。期間限定は開いたまま、通常メニューは <details> */
.dn-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; padding: 10px; }
/* 通常メニューはカードの中で開く（横幅いっぱいにすると別の場所へ飛んだ＝点検役の指摘）。開いている間は、同じ枠の閉じたカードを中身の高さにする（縦に伸びて空白の枠にならないように） */
.dn-shops:has(> .dn-shop > details.reg[open]) > .dn-shop:not(:has(> details.reg[open])) { align-self: start; }
.dn-shop { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg, #f7f9fb); min-width: 0; }
.dn-shop h5 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: .875rem; font-weight: 700; word-break: auto-phrase; }
.dn-shop h5 small { font: 400 .6875rem var(--sans); color: var(--dim); }
.dn-shop .lh { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .6875rem; font-weight: 700; color: #9a4a07; }
.dn-shop .lh .lc { font: 500 .6875rem var(--mono); color: var(--dim); }
.dn-fl { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.dn-fl li { word-break: auto-phrase; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: .8125rem; margin-top: -1px; padding: 7px 0 6px; border-top: 1px solid var(--line); }
.dn-shop .reg { margin-top: auto; }
.dn-shop .reg summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: .8125rem; font-weight: 700; cursor: pointer; list-style: none; }
.dn-shop .reg summary::-webkit-details-marker { display: none; }
.dn-shop .reg summary svg { flex: none; color: var(--dim); transition: transform .15s; }
.dn-shop .reg[open] summary svg { transform: rotate(90deg); }
.dn-shop .reg summary .rc { margin-left: auto; font: 500 .75rem var(--mono); color: var(--dim); }
.dn-shop .reg summary:hover { border-color: var(--line-2); }
.dn-shop .reg summary:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.dn-shop .reg .dn-fl { margin-top: 6px; }
.dn-shop .reg .src { margin: 6px 0 0; font-size: .6875rem; color: var(--dim); }
.dn-shop .reg .src a { color: var(--dim); }
.dn-fa .fn small { display: block; color: var(--dim); font-size: .75rem; }
.dn-fa .fp { font: 600 .8125rem var(--mono); white-space: nowrap; text-align: right; }
.dn-food-none, .dn-food-past, .dn-food-late { font-size: .8125rem; color: var(--dim); margin: 8px 0 0; }

/* ===== v7.04 ===== */
/* パークの名前: 横幅があるときは「ディズニーランド」「ディズニーシー」、狭い画面は「ランド」「シー」（ユーザー指示「横幅がある場合はシーと略さずディズニーシーと表記。もちろんランドも」） */
/* .pkl（パークの名前の「ディズニー」）は v7.05 からスマホでも出す（ユーザー指示「スマホの表記も…ディズニーはいるように」） */
/* DPA の売り切れの時刻（一覧の行の追加販売・日付の欄の一覧） */
.dn-list .dpre { font-size: .6875rem; color: var(--dim); }
.dn-dpal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dn-dpal li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: start; }
.dn-dpal .tm { padding: 4px 0; margin-top: 2px; text-align: center; font: 600 .75rem/1 var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px; }
.dn-dpal .sn { word-break: auto-phrase; overflow-wrap: anywhere; line-height: 1.6; }
.dn-dl .dn-dpal .sn small { display: block; margin-left: 0; }
/* ショー・パレード（アトラクションの一覧の下。ユーザー指示「アトラクションの下にショーの情報追加」）。札・名前と会場・時刻の3列（スマホは時刻を名前の下） */
.dn-showsec { margin-top: 20px; }
.dn-showsec h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.0625rem; font-family: var(--head); }
.dn-showsec h3 svg { color: #6b21a8; flex: none; }
.dn-showsec h3 small { font: 400 .8125rem var(--sans); color: var(--dim); }
.dn-showsec .dn-sub { margin: 4px 0 10px; font-size: .75rem; }
.dn-shw { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dn-shl.dn-shw li { grid-template-columns: 88px minmax(0, 1fr) 256px; gap: 12px; align-items: center; padding: 10px 14px; }
.dn-shw li + li { border-top: 1px solid var(--line); }
.dn-shw .sk { margin-top: 0; }
.dn-shw .sn b { display: block; font-size: .875rem; line-height: 1.5; }
.dn-shl.dn-shw .sn small { display: block; margin-left: 0; font-size: .75rem; color: var(--dim); line-height: 1.5; }
.dn-shw .next { display: block; font-size: .75rem; font-weight: 700; color: var(--tl); line-height: 1.5; }
.dn-shl.dn-shw .tm { margin-top: 0; }
.dn-shl.dn-shw .tm b { width: 48px; }
.dn-shw .tm em { font-style: normal; font-size: .75rem; color: var(--faint); }
.dn-showsec .dn-shn { font-size: .75rem; }
.dn-shw .next.end { font-weight: 400; color: var(--dim); }
@media (max-width: 820px) {
  .dn-shl.dn-shw li { grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 6px 10px; }
  .dn-shw .sk { margin-top: 2px; }
  .dn-shl.dn-shw .tm { grid-column: 2; }
  .dn-shl.dn-shw .tm b { width: 44px; }   /* 5回の公演が1段に入る幅（390px の画面で 5×44＋4×4＝236px） */
}

/* ===== 日付ごとのページ /disney/YYYY-MM-DD/（v7.08）と「はじめての人へ：おすすめの回り方」 ===== */
.dn-daynav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 14px; }
.dn-daynav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dn-daynav a:hover { border-color: var(--text); }
.dn-daynav a[rel="prev"] { justify-self: start; min-width: 96px; } .dn-daynav a[rel="next"] { justify-self: end; min-width: 96px; }
.dn-dayall { margin-bottom: 12px; }
.dn-dpark { display: grid; gap: 16px; }
@media (min-width: 821px) { .dn-dpark { grid-template-columns: 1fr 1fr; align-items: start; } }
.dn-dpc { padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.dn-dpc h2 { margin: 0 0 8px; font-size: 1.125rem; }
.dn-dpc h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 16px 0 6px; font-size: .9375rem; }
.dn-dpc h3 small { font: 400 .75rem var(--sans); color: var(--dim); }
.dn-dpc .dn-dl b.big { font: 700 1.25rem/1 var(--mono); margin-right: 2px; }
.dn-dayatt { list-style: none; margin: 0; padding: 0; counter-reset: da; }
.dn-dayatt li { counter-increment: da; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0 6px; border-top: 1px solid var(--line); font-size: .8125rem; word-break: auto-phrase; }
.dn-dayatt li::before { content: counter(da); font: 600 .75rem var(--mono); color: var(--dim); }
.dn-dayatt .aw { white-space: nowrap; text-align: right; } .dn-dayatt .aw b { font: 700 .9375rem var(--mono); } .dn-dayatt .aw small { color: var(--dim); font-size: .75rem; }
.dn-dayh2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 24px 0 8px; font-size: 1.0625rem; }
.dn-dayh2 small { font: 400 .75rem var(--sans); color: var(--dim); }
.dn-daymore { margin-top: 16px; }
.dn-guide { font-size: .8125rem; }
.dn-gsub { margin: 0 0 8px; color: var(--dim); font-size: .75rem; }
.dn-gsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dn-gsteps > li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg, #f7f9fb); }
.dn-guide .gh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.dn-guide .gh b { display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 4px; background: #e6f4f5; color: #0b6572; font-size: .75rem; text-align: center; }
.dn-guide .gh small { color: var(--dim); font-size: .75rem; }
.dn-gl { list-style: none; margin: 0; padding: 0; }
.dn-gl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0 4px; border-top: 1px solid var(--line); word-break: auto-phrase; }
.dn-gl li:first-child { border-top: 0; }
.dn-gl li span { white-space: nowrap; font: 600 .8125rem var(--mono); text-align: right; } .dn-gl li span small { font: 400 .75rem var(--sans); color: var(--dim); }
.dn-gnote { margin: 0 0 6px; color: var(--dim); font-size: .75rem; }
.dn-gnote.dpa { margin-top: 6px; color: var(--text); }
.dn-gshow { margin: 6px 0 0; font-size: .75rem; color: var(--dim); }
.dn-gshow .tm { font: 600 .75rem var(--mono); color: var(--text); }
.dn-gtip { margin: 8px 0 0; font-size: .75rem; color: var(--dim); }
.dn-gdpa { margin-top: 10px; padding: 10px 12px; border: 1px solid #b9dfe3; border-radius: var(--r-sm); background: #f2fafb; }
.dn-gdpa .gh b { background: transparent; color: var(--text); padding: 0; min-width: 0; font-size: .8125rem; text-align: left; }
.dn-gdpa ul { margin: 0; padding-left: 1.2em; font-size: .75rem; line-height: 1.7; }

/* 前の月を読み込んでいるあいだ（v7.06 点検役の指摘: 3秒ほど何も変わらなかった）・失敗したときのひとこと */
.dn-mnav[aria-busy="true"] { opacity: .5; cursor: progress; }
.dn-calmsg { margin: 6px 0 0; font-size: .75rem; color: var(--dim); text-align: center; }
.dn-calmsg.err { color: #96101a; }

/* 本ページの「はじめての人へ」・予想の当たり具合・ホーム画面に追加・日付の欄の「この日のページ」（v7.08） */
/* 回り方のタブ（v7.18 ユーザー指示「アトラクション・ショー・映えスポット の3種類」。JS が無いときはタブを出さず3つとも出す） */
.dn-gtabbar { display: none; }
.dn-gtabs.on .dn-gtabbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 10px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dn-gtab { min-height: 40px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); font: 700 .8125rem/1.2 var(--sans); cursor: pointer; }
.dn-gtab:hover { background: var(--surface); color: var(--text); }
.dn-gtab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 2px 8px rgba(15, 27, 45, .06); }
.dn-gtab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dn-gtabs.on .dn-gpanel:not(.cur) { display: none; }
.dn-gpanh { margin: 12px 0 6px; font-weight: 700; font-size: .875rem; }
.dn-gtabs.on .dn-gpanh { display: none; }
.dn-gsl { list-style: none; margin: 0; padding: 0; }
.dn-gsl li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; padding: 6px 0 5px; border-top: 1px solid var(--line); }
.dn-gsl li:first-child { border-top: 0; }
.dn-gsl .tm { font: 600 .8125rem/1.4 var(--mono); color: var(--text); word-break: break-word; }
.dn-gsl .sb { grid-column: 2; min-width: 0; }
.dn-gsl .sn, .dn-gph .sn { margin: 0; line-height: 1.45; word-break: auto-phrase; }
.dn-gsl .kd { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #f3efff; color: #5b21b6; font: 700 .6875rem/1.5 var(--sans); vertical-align: 1px; }
.dn-gsl .ss, .dn-gph .ss { margin: 2px 0 0; color: var(--dim); font-size: .75rem; }
.dn-gsl .ss.nt { color: #92400e; }
.dn-gph { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.dn-gph li { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg, #f7f9fb); }
.dn-gph .tx { margin: 4px 0 6px; font-size: .75rem; line-height: 1.6; flex: 1; }
.dn-gph .tg { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.dn-gph .tg span { display: inline-block; min-width: 3em; padding: 1px 6px; border-radius: 4px; font: 700 .6875rem/1.5 var(--sans); text-align: center; }
.dn-gph .w-day { background: #fef3c7; color: #78350f; }
.dn-gph .w-eve { background: #ffedd5; color: #7c2d12; }
.dn-gph .w-night { background: #e0e7ff; color: #312e81; }
.dn-gph .roof { background: #e6f6f8; color: #0a5560; }
.dn-gsub .tm { font: 600 .75rem var(--mono); color: var(--text); margin: 0 1px; }
.dn-guidebox { margin: 0 0 20px; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dn-guidebox h2 { margin: 0 0 6px; font-size: 1.0625rem; }
.dn-gmore { margin: 10px 0 0; }
.dn-acc { margin-top: 2px; }
.dn-acc b { margin-right: 6px; color: var(--text); }
.dn-a2hs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-size: .8125rem; color: var(--dim); }
.dn-a2hs[hidden] { display: none; }
.dn-a2hs-b { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 700 .875rem var(--sans); cursor: pointer; }
.dn-a2hs-b:hover { border-color: var(--text); }
.dn-a2hs-b:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* 「○/○のデータ」はパークの札（.dn-pk）のすぐ横に、札と同じ高さ（24px）で（2026-11-08 v7.11 ユーザー指示「隣のディズニーシーのアイコンに高さ合わせすぐ横に配置」） */
.dn-dd h3 .dn-ddtags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* 札と「○/○のデータ」は折り返しても並んだまま（かたまりごと次の行へ。JavaScript が無く札が2つのときだけ中で折り返す） */
.dn-dd h3 .dn-pk, .dn-dd h3 .dn-ddlink { white-space: nowrap; }
@media (max-width: 420px) { .dn-dd h3 { gap: 6px; font-size: 1.0625rem; } .dn-dd h3 .dn-ddtags { gap: 6px; } .dn-dd h3 .dn-pk, .dn-dd h3 .dn-ddlink { padding-left: 6px; padding-right: 6px; } }
.dn-dd h3 .dn-ddlink { display: inline-flex; align-items: center; font: 600 .75rem/1 var(--sans); padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--text); text-decoration: none; }
.dn-dd h3 .dn-ddlink:hover { border-color: var(--text); }

/* グッズの発売日（v7.07）: マスの小さな札・日付の欄の一覧。紫の字と薄い地（どの混雑の地の上でも札の地で AA） */
.dn-g { display: inline-block; padding: 2px 4px; border: 1px solid #d8bff1; border-radius: 4px; background: #f4ecfc; color: #6b21a8; font: 700 .625rem/1.1 var(--sans); white-space: nowrap; }
.dn-legend-mk .dn-g { margin-right: 6px; font-size: .6875rem; }
.dn-gds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; word-break: auto-phrase; }
.dn-gds b { font-weight: 700; margin-right: 6px; }
.dn-gbig { display: inline-block; padding: 2px 6px; border: 1px solid #d8bff1; border-radius: 4px; background: #f4ecfc; color: #6b21a8; font: 700 .6875rem/1.2 var(--sans); vertical-align: 1px; }
.dn-gds small { color: var(--dim); font-size: .75rem; }

/* 閉園前の狙い目（v7.13） */
.dn-glate { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg, #f7f9fb); }
.dn-glate .gh b { background: #ece9f8; color: #4b3c9a; }
.dn-glate .dn-gnote { margin: 6px 0 0; }

/* アトラクションの札（身長・こわさ・ぬれる・休止予定）と、日付の欄の「休止」「雨の日」（v7.13） */
.dn-list .tg, .dn-tgnote .tg { font: 600 .6875rem/1 var(--sans); padding: 3px 6px; border-radius: 4px; color: #4a5565; background: #eef1f5; white-space: nowrap; }
.dn-list .tg-h, .dn-tgnote .tg-h { color: #7a3d00; background: #fdf0e1; }
.dn-list .tg-f, .dn-tgnote .tg-f { color: #5b3a9e; background: #f1ecfb; }
.dn-list .tg-w, .dn-tgnote .tg-w { color: #0b5a8a; background: #e6f2fb; }
.dn-list .tg-c { color: #96101a; background: #fdecee; }
.dn-cll { margin: 0; padding-left: 1.1em; }
.dn-cll li { margin: 2px 0; }
.dn-rain { margin: 0 0 4px; }
.dn-tgnote .tg { margin: 0 2px; }

/* フードのお店のモバイルオーダー・予約の札（v7.15）。角丸の四角・字は地に対して AA */
.dn-otags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 6px; }
.dn-otags .ot { display: inline-flex; align-items: center; font: 600 .6875rem/1 var(--sans); padding: 4px 6px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.dn-otags .ot.mo1 { color: #7c2d12; background: #ffedd5; border-color: #fdba74; }
.dn-otags .ot.mo { color: #0a5560; background: #e6f6f8; border-color: #9fd6dd; }
.dn-otags .ot.ps { color: #5b21b6; background: #f3efff; border-color: #c4b5fd; }
.dn-otags small { flex-basis: 100%; font-size: .6875rem; color: var(--dim); line-height: 1.5; }

/* 困ったとき・ケア（v7.19）: 題ごとのカード。PCは2列、スマホは1列。パークの札は日付の欄と同じ色 */
.dn-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.dn-care section { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dn-care h3 { margin: 0 0 6px; font-size: .9375rem; }
.dn-care p { margin: 0; font-size: .8125rem; line-height: 1.75; }
.dn-care ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dn-care li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .8125rem; line-height: 1.6; }
.dn-care .dn-pk { display: inline-block; padding: 2px 0; border-radius: 4px; border: 1px solid var(--line); text-align: center; font: 600 .75rem/1.4 var(--sans); }
.dn-care .dn-pk.p-land { color: #9D174D; background: #FCE7F3; border-color: #F9A8D4; }
.dn-care .dn-pk.p-sea { color: #1E40AF; background: #DBEAFE; border-color: #93C5FD; }
@media (max-width: 640px) { .dn-care { grid-template-columns: 1fr; } }

/* 稼働状況のページのアクセスのグラフ（v7.26）。HTML の積み上げ棒。段の間は2px あけ、棒の上は角丸4px。棒に指を置くと内訳 */
.st-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
@media (max-width: 860px) { .st-charts { grid-template-columns: minmax(0, 1fr); } }
.st-chart { margin: 0; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.st-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.st-chart figcaption b { font-size: .9375rem; }
.st-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--dim); }
.st-leg span, .st-tip span { display: inline-flex; align-items: center; gap: 6px; }
.st-leg i, .st-tip i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.st-plot { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); height: 160px; padding-bottom: 20px; }
.st-ax { position: relative; }
.st-ax span { position: absolute; right: 6px; transform: translateY(50%); font: .6875rem/1 var(--mono); color: var(--faint); }
.st-bars { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; border-bottom: 1px solid var(--line-2, #cbd3dc); }
.st-grid { position: absolute; left: 2.6em; right: 0; top: 0; bottom: 20px; pointer-events: none; }
.st-grid span { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.st-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.st-stack { width: min(100%, 28px); display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 0; }
.st-stack i { display: block; min-height: 1px; }
.st-col:hover .st-stack, .st-col:focus-visible .st-stack { filter: brightness(1.12); }
.st-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
.st-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; font: .6875rem/1 var(--mono); color: var(--faint); white-space: nowrap; }
.st-col.we .st-x { color: var(--dim); font-weight: 600; }
.st-col:nth-last-child(even) .st-x { visibility: hidden; }   /* 日付は1日おき（新しい日から数えて。14日分を全部書くと重なる） */
.st-td { white-space: nowrap; }
.st-v { position: absolute; left: 50%; transform: translate(-50%, -4px); margin-bottom: 0; font: 600 .75rem/1 var(--mono); color: var(--text); white-space: nowrap; }
.st-tip { display: none; position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 9em; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-2, 0 4px 14px rgba(15,27,45,.12));
  font-size: .75rem; line-height: 1.5; color: var(--text); white-space: nowrap; flex-direction: column; gap: 2px; }
.st-col:hover .st-tip, .st-col:focus .st-tip { display: flex; }
.st-col:first-child .st-tip, .st-col:nth-child(2) .st-tip { left: 0; transform: none; }
.st-col:last-child .st-tip, .st-col:nth-last-child(2) .st-tip { left: auto; right: 0; transform: none; }
.tbl tr.on td { background: var(--good-soft); }
/* 稼働状況のページの楽天・Yahoo・ディズニー別（v7.27）。PC は3列、狭いと1列 */
.st-h3 { font-size: 1.0625rem; margin: 20px 0 10px; }
.st-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1000px) { .st-svc { grid-template-columns: minmax(0, 1fr); } }
.st-sv { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--bg-2, #f6f8fa); border: 1px solid var(--line); border-radius: var(--r-sm); }
.st-sv h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; }
.st-sv h4 i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.st-sv > p { margin: -4px 0 0; }
.st-svn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }   /* 3つ×2段（上: 見た・外から・クリック、下: 外からの内訳） */
.st-svn div { padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.st-svn dt { font-size: .6875rem; color: var(--dim); margin-bottom: 4px; }
.st-svn dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.st-svn .st-amz { flex-basis: 100%; min-height: 1.1em; font-size: .6875rem; line-height: 1.1; color: var(--dim); }   /* Yahoo のカードの「うち Amazon」（v7.33） */
.st-svn dd b { font: 600 1.125rem/1 var(--mono); }
.st-svn small { font: 500 .6875rem/1 var(--mono); }
.st-svn small.up { color: var(--good-ink); }
.st-svn small.dn { color: var(--warn-ink, #9a3412); }
.st-sv .st-chart { padding: 10px 12px 8px; }
.st-sv .st-plot { height: 120px; }
.st-col:last-child .st-x { left: auto; right: 0; transform: none; }   /* いちばん右の日付は枠からはみ出さないよう右寄せ（v7.27） */
/* 品目ページの「一緒に使うもの」「使える本体」（v7.28）。同じ分類の機種の行と同じ形で、いまの最安を小さく添える */
.family.with { margin-top: 10px; }
.family.with a small { margin-left: 6px; font: 500 .75rem/1 var(--mono); color: var(--dim); }
.family.with a:hover small { color: inherit; }