:root {
  /* 1940年代カートゥーンノワール寄りの暖色ダーク。 */
  --bg:#12100E; --surface:#1B1713; --surface-2:#241E19;
  --ink:#F6EEE0; --muted:#C4B49C; --line:#3A2F26;

  /* ビビッドなアクセント。5色とも上の3つの面に対して本文コントラスト 4.5:1 以上を満たすことを確認済み。
     値を変えないこと。変えるならコントラストを測り直すこと。 */
  --yellow:#FFD23F; --red:#FF4D4D; --pink:#FF4FA3; --cyan:#31E1F7; --lime:#B6FF3C;
  --w-pooh:#FFC22E; --w-toy-story:#5BC8FF; --w-twst:#C061F0; --w-baymax:#FF5A3C;
  --w-frozen:#C9F0FF; --w-aladdin:#16C2A3; --w-lion-king:#F0851F; --w-mermaid:#46D97A;
  --w-hunchback:#7C8BF5; --w-poppins:#F58BA6; --w-princess:#FF7ABF; --w-stitch:#3E86E8;
  --w-minnie:#FF4D6D; --w-various:#8992B8;
  /* 漫画の主線。カートゥーンの黒インク */
  --outline:#0B0906;
  --parchment:#EDE0C8;
  --parchment-accent:#5B210F;

  --accent: var(--yellow);
  --up: var(--red);
  --new: var(--lime);

  /* グラフの系列色。色覚多様性での分離 ΔE 21.8、コントラストとも検証済み。値を変えないこと。 */
  --series-a: var(--cyan);
  --series-b: var(--yellow);

  --hero-scrim-a: rgba(18,16,14,.92); --hero-scrim-b: rgba(18,16,14,.60);
  --hero-panel: rgba(18,16,14,.70); --hero-panel-line: rgba(246,238,224,.24);
}
:root {
  --font-ui: "Fredoka", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-display: "Chewy", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-label: "Mouse Memoirs", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "M PLUS Rounded 1c", ui-monospace, monospace;
}
[data-lang="zh-Hans"], [data-lang="zh-CN"], [data-lang="zh"], :lang(zh-Hans), :lang(zh-CN) {
  --font-ui: "Fredoka", "Noto Sans SC", system-ui, sans-serif;
  --font-display: "Chewy", "Noto Sans SC", system-ui, sans-serif;
  --font-label: "Mouse Memoirs", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, monospace;
}
[data-lang="zh-Hant"], [data-lang="zh-TW"], [data-lang="zh-HK"], :lang(zh-Hant), :lang(zh-TW) {
  --font-ui: "Fredoka", "Noto Sans TC", system-ui, sans-serif;
  --font-display: "Chewy", "Noto Sans TC", system-ui, sans-serif;
  --font-label: "Mouse Memoirs", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans TC", ui-monospace, monospace;
}
[data-lang="ko"], :lang(ko) {
  --font-ui: "Fredoka", "Noto Sans KR", system-ui, sans-serif;
  --font-display: "Chewy", "Noto Sans KR", system-ui, sans-serif;
  --font-label: "Mouse Memoirs", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans KR", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { color: var(--ink); background: var(--bg); color-scheme: dark; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.75;
  overflow-x: clip;
}
/* 言語コンテナで font-family を宣言し直す。body で解決済みの値が継承されるだけだと、
   子孫で --font-ui を上書きしても本文に効かないため。 */
[data-lang] {
  font-family: var(--font-ui);
}
body:has(.page-shell) { min-width: 0; }
a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(100%, 1400px);
  margin-inline: auto;
  padding: 24px clamp(18px, 3.5vw, 80px) 80px;
}
.topbar, .wide, .hero {
  width: 100%;
  margin-inline: 0;
}
/* 狭い画面での溢れ対策。flex / grid の子は既定で min-width: auto となり、
   中身の最小幅より小さくなれない。明示的に 0 にして縮められるようにする。 */
.page-shell, .page-lang, .site-header, .global-header, .global-footer,
.header-text, .page-flow, .section-block, .subsection, .article-list, .affiliate-section, .ad-placement,
.hero-copy, .hero-metrics,
.chart-bars, .chart-track, .two-column, .card-grid > *, .status-grid > *,
.change-card-grid > *, .affiliate-grid > *, .affiliate-link > *, .ad-frame {
  min-width: 0;
}
/* クラスの無い中間要素も縮められるようにする。flex / grid の子は
   既定で min-width: auto となり、中身より小さくなれないため。 */
.global-header > *, .global-footer > *, .page-flow > *, .section-block > *,
.subsection > *, .prose > *, .two-column > *, .header-text > *,
.article-list > *, .affiliate-section > *, .affiliate-grid > *, .hero > * {
  min-width: 0;
}
/* セクションの外枠はページ幅に揃える。ばらつきは枠内の見出しやチップに留める。 */
.section-block:not(.prose) {
  width: 100%;
  margin-inline: 0;
}

@media (min-width: 1100px) {
  .section-block:nth-of-type(3n+2) { margin-top: -28px; }
  .section-block:nth-of-type(4n+3) { margin-top: 46px; }
}
.topbar {
  display: flex;
  justify-content: flex-end;
}
.global-header, .global-footer {
  display: grid;
  gap: 14px;
}
/* ページが長いので、上部のナビゲーションはスクロールしても付いてくる。
   背景を敷かないと下の内容が透けるため、地の色で塗る。 */
.global-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 帯は本文と同じ幅しかないので、そのままだと左右が透ける。
   疑似要素を画面の外まで伸ばして、端まで塗る。 */
.global-header::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(11,9,6,.55);
}
@media (prefers-reduced-motion: reduce) {
  .global-header { transition: none; }
}
/* 狭い画面ではヘッダーが2段に折り返して高くなる。付いてくると本文が読めない。
   縦長のスマホは高さでは判定できないので、幅で見る。 */
@media (max-width: 820px), (max-height: 520px) {
  .global-header { position: static; }
  /* 固定しないなら帯は不要。左右に伸ばしたままだと scrollWidth が広がる。 */
  .global-header::before { display: none; }
}
.global-nav, .site-nav-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.site-nav-lang {
  flex: 1;
}
.site-name {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.global-nav nav {
  display: flex;
  gap: 12px;
}
.global-nav nav a {
  color: var(--muted);
  text-decoration: none;
}
/* 訪問者数といいね。数字が入るまで hidden なので、空の枠は出ない。 */
.visit-counter {
  margin: 0 auto 26px;
  max-width: 520px;
  text-align: center;
  background: var(--surface);
  border: 3px solid var(--outline);
  border-radius: 18px 12px 20px 14px;
  padding: 18px 20px 14px;
  box-shadow: 5px 5px 0 var(--outline);
}
.visit-heading {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .04em;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px var(--outline);
  text-shadow: 2px 2px 0 var(--outline);
}
.visit-you {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--yellow);
  paint-order: stroke fill;
  -webkit-text-stroke: .6px var(--outline);
}
.visit-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.visit-cell dt {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.visit-cell dd {
  margin: 2px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.visit-unit {
  font-size: .8rem;
  color: var(--muted);
  margin-left: 2px;
}
.visit-note {
  margin: 12px 0 0;
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.5;
}
.like-box {
  margin: 32px auto 0;
  max-width: 520px;
  display: flex;
  justify-content: center;
}
.like-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.like-call {
  font-size: .9rem;
  color: var(--muted);
}
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 3px solid var(--outline);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 4px 4px 0 var(--outline);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.like-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--outline);
}
.like-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--outline);
}
.like-button:disabled {
  opacity: .6;
  cursor: progress;
}
.like-heart {
  color: var(--line);
  font-size: 1.1rem;
  transition: color .12s ease;
}
.like-button.is-liked {
  background: var(--pink);
  color: var(--outline);
}
.like-button.is-liked .like-heart {
  color: var(--red);
}
.like-count {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .like-button {
    transition: none;
  }
}
.global-nav nav [aria-current] {
  color: var(--accent);
  font-weight: 500;
}
.global-footer {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.global-footer-sources {
  margin: 10px 0 14px;
  font-size: .84rem;
}
.global-footer-sources summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}
.global-footer-sources ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.global-footer-sources a { overflow-wrap: anywhere; }
.global-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.language-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px 9px 13px 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(196,180,156,.18), 0 0 22px rgba(196,180,156,.10);
}
.language-toggle button {
  border: 0;
  border-radius: 8px 6px 9px 7px;
  padding: 8px 14px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.language-toggle button[aria-pressed="true"] {
  color: var(--surface);
  background: var(--accent);
}
.page-lang {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.site-header {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px 15px 23px 17px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(196,180,156,.20), 0 0 28px rgba(196,180,156,.10);
}
.header-text, .page-flow, .section-block, .prose, .subsection, .article-list, .affiliate-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-wrap: balance;
  word-break: auto-phrase;
  paint-order: stroke fill;
  -webkit-text-stroke: .6px var(--outline);
  -webkit-text-fill-color: currentColor;
  text-shadow: 2px 2px 0 var(--outline);
  text-transform: uppercase;
}
h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  color: var(--yellow);
  -webkit-text-stroke-width: 1px;
  text-shadow: 4px 4px 0 var(--outline);
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--cyan);
  -webkit-text-stroke-width: .8px;
  text-shadow: 3px 3px 0 var(--outline);
}
h3 {
  color: var(--pink);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
small {
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.eyebrow, .meta, .hero-copy p, .section-block p, .card p { color: var(--muted); }
.card p, .status-card, .change-card, .article-item p {
  word-break: auto-phrase;
}
.article-item p { max-width: 78ch; }
.prose {
  width: min(100%, 68ch);
  margin-right: auto;
}
.hero {
  width: min(100%, 1500px);
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-width: 3px;
  border-color: var(--red);
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 16px rgba(255,77,77,.42), 0 0 36px rgba(255,77,77,.20);
  background-color: var(--surface);
  background-image: url("assets/bg/crimson.webp");
  background-size: cover;
  background-position: center;
}
/* 完成品のバナーを置くヒーロー。背景画像・覆い・集中線・揺らぎは使わない。
   画像の中に既にサイト名とタグラインが入っているため、上に何も重ねない。 */
.hero-banner {
  background-image: none;
  padding: 0;
  min-height: 0;
  display: block;
  border-radius: 24px 18px 22px 20px;
}
.hero-banner::before,
.hero-banner::after { content: none; }
.hero-banner-heading {
  margin: 0;
  font-size: inherit;
  line-height: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.hero-banner picture {
  display: block;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px 15px 0 0;
}
.hero-banner .hero-copy {
  padding: 26px 28px 30px;
}
/* 幅が 100% になる狭い画面では、左マージンを足すと必ず画面からはみ出す。
   ずらしは横に余裕がある画面でだけ効かせる。 */
@media (min-width: 1100px) {
  .hero { margin-left: 3%; width: min(94%, 1500px); }
  .prose { margin-left: min(16%, 260px); }
}
.hero-copy { max-width: 62ch; }
.hero-copy h1 {
  -webkit-text-stroke: 5px var(--outline);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--outline);
}
/* 背景画像の上に敷く覆い。見出しと本文のコントラストを確保する。
   文字が乗る左側を濃く、右へ向かって薄くして画像を覗かせる。 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 横方向: 文字が乗る左側を濃く、右へ薄くして絵を覗かせる。
     縦方向: 下端に目盛りなどの小さい文字が乗るため、下half を追加で覆う。 */
  background:
    linear-gradient(180deg, transparent 0%, transparent 40%, var(--hero-scrim-a) 100%),
    linear-gradient(105deg, var(--hero-scrim-a) 0%, var(--hero-scrim-a) 38%, var(--hero-scrim-b) 100%);
  pointer-events: none;
}
/* カートゥーンの放射線。スクリムの上、本文の下に敷く */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg at 68% 38%,
    rgba(255,210,63,.11) 0deg 5deg,
    transparent 5deg 11deg
  );
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 24%, #000 60%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 24%, #000 60%);
  pointer-events: none;
}
.hero > *:not(.hero-canvas) {
  position: relative;
  z-index: 1;
}
/* ヒーローのステッカーはグリッドの流れから外して右上に貼る。
   grid の子は既定で引き伸ばされるため、absolute にして幅を内容に合わせる。 */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .22;
}
.hero-showcase {
  min-height: 420px;
  align-content: end;
  background-color: var(--surface);
}
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
/* ヒーローのカードは背景画像を覆い隠さないよう、中身の幅までに留める。 */
.hero-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
}
.countdown-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-width: 3px;
  border-color: var(--cyan);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(49,225,247,.35), 0 0 28px rgba(49,225,247,.18);
}
/* ヒーローの上に乗るカードだけは背景画像を透かす。 */
.hero .countdown-card {
  background: var(--hero-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--hero-panel-line);
}
.hero-number, .price-emphasis {
  font-family: var(--font-display);
  /* Chewy はウェイト 400 しか無い。700 を要求しつつ font-synthesis-weight: none を付けると、
     Chewy は合成ボールドされず素の 400 のまま、和文フォールバック側だけが実在の 700 を拾う。
     「15,000円」のような混植で数字と「円」の線の太さが揃う。 */
  font-weight: 700;
  font-synthesis-weight: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.1;
  text-shadow: 5px 5px 0 var(--outline);
}
.hero-number {
  color: var(--accent);
  font-size: clamp(2.7rem, 8vw, 5.8rem);
}
.price-emphasis {
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.date-panel {
  display: grid;
  gap: 4px;
}
.date-panel span { color: var(--muted); }
.date-panel strong { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.timeline-range { width: 100%; accent-color: var(--accent); }
.ticks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  color: var(--muted);
  font-size: .9rem;
}
.ticks span { flex: 0 0 auto; }
.metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.metrics > * { flex: 0 1 auto; min-width: 170px; }
.metrics > *:nth-child(3n+1) { width: calc(40% - 8px); }
.metrics > *:nth-child(3n+2) { width: calc(26% - 8px); }
.metrics > *:nth-child(3n)   { width: calc(31% - 8px); }
.metrics div, .card, .status-card, .article-item, .change-card, .affiliate-slot {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-width: 3px;
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(196,180,156,.20), 0 0 28px rgba(196,180,156,.10);
  background: var(--surface);
}
.article-list {
  padding: 18px;
  border: 2px solid var(--yellow);
  border-radius: 22px 17px 20px 15px;
  background: var(--parchment);
  color: var(--outline);
  box-shadow: 0 0 0 1px rgba(0,0,0,.60), 0 0 14px rgba(255,210,63,.36), 0 0 30px rgba(255,210,63,.18);
}
.article-list .article-item {
  border-color: rgba(11,9,6,.72);
  background: rgba(237,224,200,.72);
  color: var(--outline);
  box-shadow: 0 0 0 1px rgba(11,9,6,.18), 0 0 10px rgba(255,210,63,.22);
}
.article-list h3 {
  color: var(--parchment-accent);
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.article-list .article-item p,
.article-list .meta {
  color: #4F3C28;
}
.article-list a {
  color: var(--parchment-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.ad-placement {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 980px;
  margin: 18px 0;
  padding: 0;
}
.ad-label {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: none;
}
.ad-frame {
  width: 100%;
  min-height: clamp(112px, 18vw, 220px);
  aspect-ratio: 6 / 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: none;
}
/* 記事カードは中身と円形バッジの2列にする */
.article-item {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
}
.article-item .badge-circle { grid-row: span 4; align-self: start; }
.affiliate-section {
  gap: 16px;
}
.affiliate-section h3 {
  margin-bottom: 2px;
}
.affiliate-disclosure {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.affiliate-intro {
  display: grid;
  gap: 12px;
  max-width: 78ch;
}
.affiliate-intro p {
  color: var(--ink);
}
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.affiliate-secondary {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.affiliate-slot {
  align-content: start;
  gap: 12px;
  border-color: var(--cyan);
  border-radius: 14px 11px 15px 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(49,225,247,.24), 0 0 22px rgba(49,225,247,.12);
}
.affiliate-slot-secondary {
  gap: 8px;
  padding: 14px;
  border-width: 1px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}
.affiliate-slot h4 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35em .55em;
  margin: 0;
  color: var(--cyan);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 2px 2px 0 var(--outline);
}
.affiliate-slot-secondary h4 {
  color: var(--ink);
  font-size: 1rem;
  text-shadow: none;
}
.affiliate-pr {
  color: var(--cyan);
  font: inherit;
}
.affiliate-slot p {
  color: var(--ink);
  font-weight: 500;
}
.affiliate-slot-secondary p {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 500;
}
.affiliate-slot ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-slot-secondary ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.affiliate-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px 7px 10px 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.affiliate-slot-secondary .affiliate-link {
  min-height: 58px;
  padding: 10px;
  border-radius: 8px;
}
.affiliate-link strong {
  color: var(--accent);
  font-weight: 800;
}
.affiliate-link span:not(.sr-only):not(.external-link-mark) {
  color: var(--muted);
}
.affiliate-link .external-link-mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent);
  font-weight: 800;
}
.metrics div {
  background: var(--bg);
}
.metrics span, .status-label { color: var(--muted); }
.metrics strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis-weight: none;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 5px 5px 0 var(--outline);
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-width: 3px;
  border-color: var(--lime);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(182,255,60,.35), 0 0 28px rgba(182,255,60,.18);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px 11px 13px 12px;
  overflow: hidden;
}
/* 720px の下限が要るのは、列の多い施設一覧だけ。これを table.data 全部にかけると、
   2〜3列しかない記事の表まで 720px になり、339px の画面で横スクロールしないと
   2列目が読めなくなる。記事7ページで確認した。器のある一覧だけに限る。 */
.table-wrap table.data { min-width: 720px; }
/* 列が多い表を .table-scroll に入れるときは、これを足すと横スクロールになる。 */
.table-scroll table.data.table-wide { min-width: 720px; }
.chart-table table { min-width: 0; }
th, td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid var(--line);
}
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.change-up { color: var(--up); }
.change-new { color: var(--new); }
.eyebrow, .meta, .status-label, .metrics span, .ticks, .section-kicker,
.site-name, .global-nav nav a, th {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: .06em;
}
.eyebrow, th {
  text-transform: uppercase;
}
.pill {
  display: inline-block;
  padding: 3px 11px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  margin-right: 8px;
}
.pill-up { color: var(--up); }
.pill-new { color: var(--new); }
.pill-muted { color: var(--muted); }
/* 単独で置かれるピルは塗ってステッカーにする。表の中のピルは塗らない（行が騒がしくなるため） */
.change-card .pill-up { background: var(--up); color: var(--outline); }
.change-card .pill-new { background: var(--new); color: var(--outline); }
.change-card .pill-muted { background: var(--muted); color: var(--outline); }
.change-card .pill {
  justify-self: start;
  border: 3px solid var(--outline);
  transform: rotate(-6deg);
  margin-right: 0;
}
/* 等幅の列をやめ、カードごとに幅を変えて折り返す。列が揃わないので縦のラインが出ない。 */
.status-grid, .card-grid, .change-card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.status-grid > *, .card-grid > *, .change-card-grid > * {
  flex: 0 1 auto;
  width: calc(var(--col, 30%) - 14px);
  min-width: 190px;
  position: relative;
}
.status-grid > *:nth-child(5n+1), .card-grid > *:nth-child(5n+1), .change-card-grid > *:nth-child(5n+1) { --col: 38%; }
.status-grid > *:nth-child(5n+2), .card-grid > *:nth-child(5n+2), .change-card-grid > *:nth-child(5n+2) { --col: 26%; }
.status-grid > *:nth-child(5n+3), .card-grid > *:nth-child(5n+3), .change-card-grid > *:nth-child(5n+3) { --col: 31%; }
.status-grid > *:nth-child(5n+4), .card-grid > *:nth-child(5n+4), .change-card-grid > *:nth-child(5n+4) { --col: 44%; }
.status-grid > *:nth-child(5n),   .card-grid > *:nth-child(5n),   .change-card-grid > *:nth-child(5n)   { --col: 23%; }
.card-grid > *, .card-grid > * p, .card-grid > * span {
  color: var(--ink);
}
.card-grid > * h3 {
  color: var(--card-accent);
  paint-order: normal;
  -webkit-text-stroke: 0;
  text-shadow: 2px 2px 0 var(--outline);
}
.card-grid > * .pill {
  background: rgba(255,255,255,.42);
  color: var(--outline);
  border-color: var(--outline);
}
.card-grid > *::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  border-radius: 15px 0 0 15px;
  background: var(--card-accent);
  pointer-events: none;
}
.card-grid > * p { font-weight: 500; }
.card-grid > * > * { position: relative; z-index: 1; }
@media (min-width: 1100px) {
  /* 重なりの規則: 左のカードほど上に来るようにする。
     引き込んだカードどうしが隣り合っても同点にならないよう、階段状にする。
     引き込まないカード 4 > 4n+2 は 3 > 7n+3 は 2 > 4n は 1。
     この階段はカードが十数枚を超えると成り立たない組み合わせが理論上ある
     (17枚目と18枚目のように 7n+3 の次が 4n+2 になる並び)。
     いまのサイトの最大枚数は10枚なので問題にならない。 */
  .status-grid > *, .card-grid > *, .change-card-grid > * { z-index: 4; }

  .status-grid > *:nth-child(7n+3), .card-grid > *:nth-child(7n+3), .change-card-grid > *:nth-child(7n+3) {
    margin-left: -44px;
    padding-left: 74px;
    z-index: 2;
  }
  .status-grid > *:nth-child(4n), .card-grid > *:nth-child(4n), .change-card-grid > *:nth-child(4n) {
    margin-left: -46px;
    padding-left: 76px;
    z-index: 1;
  }
  .status-grid > *:nth-child(4n+2), .card-grid > *:nth-child(4n+2), .change-card-grid > *:nth-child(4n+2) {
    margin-left: -58px;
    padding-left: 88px;
    z-index: 3;
  }

  .status-grid > *:nth-child(5n+2), .card-grid > *:nth-child(5n+2), .change-card-grid > *:nth-child(5n+2) { margin-top: 34px; }
  .status-grid > *:nth-child(7n+6), .card-grid > *:nth-child(7n+6), .change-card-grid > *:nth-child(7n+6) { margin-top: -22px; }
}
.status-grid > *:nth-child(3n+1)::after,
.card-grid > *:nth-child(3n+1)::after,
.change-card-grid > *:nth-child(3n+1)::after {
  content: "";
  position: absolute;
  top: -13px;
  right: -15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid var(--outline);
  pointer-events: none;
}
.status-grid > *:nth-child(3n)::after,
.card-grid > *:nth-child(3n)::after,
.change-card-grid > *:nth-child(3n)::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: -14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid var(--outline);
  pointer-events: none;
}
.section-kicker {
  color: var(--cyan);
  font-weight: 500;
}
.two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.date-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.date-list li {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px 9px 13px 10px;
  background: var(--surface);
}
.status-ok { color: var(--new); }
.status-alert { color: var(--up); }
.chart-figure {
  display: grid;
  gap: 14px;
  margin: 0;
}
.chart-caption {
  margin: 0;
  color: var(--muted);
  max-width: 54ch;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .86rem;
}
.chart-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.chart-legend .swatch-a { background: var(--series-a); }
.chart-legend .swatch-b { background: var(--series-b); }
.chart-bars {
  display: grid;
  gap: 14px;
}
.chart-row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  align-items: center;
  /* 行間の 2px が、対になる2本の棒を分ける面の隙間になる */
  gap: 2px 14px;
}
.chart-tier {
  grid-row: span 2;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chart-track {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chart-bar {
  height: 14px;
  /* データ端だけ丸め、基線側は直角にする */
  border-radius: 0 4px 4px 0;
  flex: 0 0 auto;
}
.chart-bar-a { background: var(--series-a); }
.chart-bar-b { background: var(--series-b); }
.chart-num {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart-table summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .9rem;
}
.chart-table table { margin-top: 12px; }
.events-panel {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.events-today {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 19px 14px 22px 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(196,180,156,.20), 0 0 28px rgba(196,180,156,.10);
  padding: 16px;
  overflow: clip;
}
.events-today h3 {
  margin: 0;
}
.events-today h3,
.events-ending-soon h3,
.events-month h3,
.affiliate-section h3 {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3em .5em;
  width: fit-content;
  max-width: 100%;
  /* 上が0だと窮屈に見える。上下に余裕を持たせる */
  padding: 14px 0 16px 18px;
  color: var(--pink);
  font-size: clamp(1.72rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  -webkit-text-stroke-width: .8px;
  text-shadow: 3px 3px 0 var(--outline);
}
.events-today h3::before,
.events-ending-soon h3::before,
.events-month h3::before,
.affiliate-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  /* 見出しの padding を増やしたぶん、色帯も文字に合わせる */
  top: 16px;
  bottom: 18px;
  width: 8px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--outline);
}
.events-today h3::after,
.events-ending-soon h3::after,
.events-month h3::after,
.affiliate-section h3::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 0;
  bottom: 0;
  height: 9px;
  background: radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) left center / 22px 9px repeat-x;
}
.events-block-count {
  display: inline-grid;
  place-items: center;
  width: 1.72em;
  height: 1.72em;
  flex: 0 0 auto;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--outline);
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: .62em;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 12px rgba(255,99,213,.38), 0 0 26px rgba(255,99,213,.18);
  transform: rotate(-8deg);
}
.events-today-group {
  display: grid;
  /* 見出しは内容ぶんの高さで固定し、余りは項目リスト側が吸収する。
     auto auto にすると、パネルの高さを揃えたとき見出しが引き伸ばされる */
  grid-template-rows: auto 1fr;
  gap: 7px;
}
/* 項目リストが余白を吸うと、項目が少ないパネルほど1枚が引き伸ばされる。
   （ランド3件で131px、シー5件で73px と2倍近い差が出ていた）
   項目は内容ぶんの高さに留め、余りはリストの下に空白として残す。 */
.events-today-parks > .events-today-group .events-today-list {
  align-content: start;
}
.events-today-parks > .events-today-group .events-today-list > li {
  align-self: start;
}
.events-today-group h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: .95rem;
  font-weight: 700;
}
.events-today-group[data-today-group="tdl"] h4,
.events-today-group[data-today-group="tds"] h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -3px -3px 5px;
  /* 上下に余裕を持たせる。項目より大きくして階層を正す（項目は26px） */
  padding: 16px 18px;
  border: 3px solid var(--outline);
  border-width: 0 0 3px;
  color: var(--outline);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 800;
  /* 見出しの高さを項目数に依存させない */
  align-self: start;
}
.events-today-group[data-today-group="tdl"] h4 {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(5,6,15,.18) 0 10px,
      rgba(255,255,255,.18) 10px 20px
    ) top left / 100% 6px no-repeat,
    repeating-linear-gradient(
      45deg,
      rgba(5,6,15,.18) 0 10px,
      rgba(255,255,255,.18) 10px 20px
    ) bottom left / 100% 6px no-repeat,
    /* 帯の中もパネルと同じ流儀の模様にする。ランド＝陸の斜めストライプ。
       文字の下を走るので、薄めにして可読性を保つ */
    repeating-linear-gradient(
      45deg,
      rgba(5,6,15,.10) 0 7px,
      rgba(5,6,15,0) 7px 18px
    ),
    var(--yellow);
  border-radius: 15px 10px 0 0;
}
.events-today-group[data-today-group="tds"] h4 {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(5,6,15,.18) 0 10px,
      rgba(255,255,255,.18) 10px 20px
    ) top left / 100% 6px no-repeat,
    repeating-linear-gradient(
      45deg,
      rgba(5,6,15,.18) 0 10px,
      rgba(255,255,255,.18) 10px 20px
    ) bottom left / 100% 6px no-repeat,
    /* シー＝海の波形。パネル本体と同じ流儀に揃える */
    repeating-radial-gradient(circle at 50% 150%,
      rgba(5,6,15,.13) 0 3px,
      rgba(5,6,15,0) 3px 20px
    ),
    var(--cyan);
  border-radius: 10px 15px 0 0;
}
.events-today-count {
  display: inline-grid;
  place-items: center;
  width: 2.05em;
  height: 2.05em;
  flex: 0 0 auto;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--outline);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .82em;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 12px rgba(255,210,63,.42), 0 0 26px rgba(255,210,63,.22);
  transform: rotate(-8deg);
}
.events-today-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.events-today-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.events-today-parks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.events-today-parks:empty {
  display: none;
}
.events-today-list li {
  --today-tilt: 0deg;
  max-width: 100%;
  min-width: 0;
  background: transparent !important;
  border: 0;
  color: var(--outline);
  transform: rotate(var(--today-tilt));
  transform-origin: 50% 60%;
}
.events-today-list li:nth-child(4n+1) { --today-tilt: -2.6deg; }
.events-today-list li:nth-child(4n+2) { --today-tilt: 1.9deg; }
.events-today-list li:nth-child(4n+3) { --today-tilt: -.8deg; }
.events-today-list li:nth-child(4n) { --today-tilt: 2.7deg; }
.events-today-list li:nth-child(5n+1) .events-today-card { border-radius: 8px 11px 7px 10px; }
.events-today-list li:nth-child(5n+2) .events-today-card { border-radius: 11px 7px 10px 8px; }
.events-today-list li:nth-child(5n+3) .events-today-card { border-radius: 7px 10px 8px 12px; }
.events-today-list li:nth-child(5n+4) .events-today-card { border-radius: 10px 8px 12px 7px; }
.events-today-list li:nth-child(5n) .events-today-card { border-radius: 9px 12px 7px 9px; }
.events-today-list li:nth-child(7n+1) { margin-top: 2px; }
.events-today-list li:nth-child(7n+3) { margin-top: -1px; }
.events-today-list li:nth-child(7n+5) { margin-top: 3px; }
.events-today-list li:nth-child(7n) { margin-top: 1px; }
.events-today-list li:nth-child(4n+1):nth-child(5n+1) { --today-tilt: -2.2deg; }
.events-today-list li:nth-child(4n+2):nth-child(7n+2) { --today-tilt: 2.1deg; }
.events-today-list li:nth-child(4n+3):nth-child(5n+3) { --today-tilt: -1.4deg; }
.events-today-list li:nth-child(4n):nth-child(7n) { --today-tilt: 2.8deg; }
.events-today-list > .events-today-group {
  --today-tilt: 0deg;
  flex: 1 1 100%;
  transform: none;
  margin-top: 0;
}
.events-today-list > .events-today-layout {
  --today-tilt: 0deg;
  flex: 1 1 100%;
  width: 100%;
  transform: none;
  margin-top: 0;
}
.events-today-layout > .events-today-group {
  min-width: 0;
}
.events-today-layout > .events-today-group,
.events-today-parks > .events-today-group {
  --today-tilt: 0deg;
  transform: none;
  margin-top: 0;
}
.events-today-parks > .events-today-group {
  border: 4px solid var(--yellow);
  border-radius: 20px 14px 17px 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 20px rgba(255,210,63,.60), 0 0 46px rgba(255,210,63,.34);
  padding: 14px 14px 15px;
  background:
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) top / 22px 12px repeat-x,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) bottom / 22px 12px repeat-x,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) left / 12px 22px repeat-y,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) right / 12px 22px repeat-y,
    linear-gradient(rgba(255,210,63,.08), rgba(255,210,63,.08)),
    var(--surface-2) !important;
}
/* パークごとに地の模様を変える。
   シーは枠線・帯・項目がすべて同じシアンで、枠の境目が消えていた。
   模様で地と項目を切り分ける。模様は薄く、文字の可読性に影響させない。 */
.events-today-parks > .events-today-group[data-today-group="tdl"] {
  transform: rotate(-.7deg);
  /* ランド＝陸。斜めの細いストライプ。
     模様を足す理由は下の tds のコメントを参照 */
  background:
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) top / 22px 12px repeat-x,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) bottom / 22px 12px repeat-x,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) left / 12px 22px repeat-y,
    radial-gradient(circle, rgba(255,245,178,.95) 0 3px, rgba(255,210,63,.65) 3.5px, transparent 4.5px) right / 12px 22px repeat-y,
    repeating-linear-gradient(45deg,
      rgba(255,210,63,.12) 0 6px,
      rgba(255,210,63,0) 6px 16px),
    var(--surface-2) !important;
}
.events-today-parks > .events-today-group[data-today-group="tds"] {
  /* 枠線は暗い色にする。項目もシアンなので、枠をシアンにすると境目が消える。
     パークの色（シアン）は、外側の光と上端の帯で示す */
  border-color: var(--outline);
  border-radius: 14px 20px 12px 17px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 20px rgba(49,225,247,.60), 0 0 46px rgba(49,225,247,.34);
  background:
    radial-gradient(circle, rgba(230,252,255,.96) 0 3px, rgba(49,225,247,.68) 3.5px, transparent 4.5px) top / 22px 12px repeat-x,
    radial-gradient(circle, rgba(230,252,255,.96) 0 3px, rgba(49,225,247,.68) 3.5px, transparent 4.5px) bottom / 22px 12px repeat-x,
    radial-gradient(circle, rgba(230,252,255,.96) 0 3px, rgba(49,225,247,.68) 3.5px, transparent 4.5px) left / 12px 22px repeat-y,
    radial-gradient(circle, rgba(230,252,255,.96) 0 3px, rgba(49,225,247,.68) 3.5px, transparent 4.5px) right / 12px 22px repeat-y,
    repeating-radial-gradient(circle at 50% 135%,
      rgba(49,225,247,.30) 0 3px,
      rgba(49,225,247,0) 3px 22px),
    linear-gradient(rgba(49,225,247,.08), rgba(49,225,247,.08)),
    var(--surface-2) !important;
  transform: rotate(.7deg);
}
.events-today-group[data-today-group="tds"] .events-today-count {
  color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 12px rgba(49,225,247,.42), 0 0 26px rgba(49,225,247,.22);
}
.events-today-list .events-today-card {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  max-width: 100%;
  border: 2px solid var(--outline);
  background: var(--event-color, var(--series-a));
  color: var(--outline);
  border-radius: 9px 6px 10px 7px;
  padding: 5px 10px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
  text-decoration: none;
  overflow-wrap: anywhere;
  filter: drop-shadow(var(--outline) 3px 4px 0);
}
.events-today-group[data-today-group="tdl"] .events-today-card,
.events-today-group[data-today-group="tds"] .events-today-card {
  padding: 10px 15px;
  font-size: clamp(1.2rem, 4.8vw, 1.625rem);
  font-weight: 800;
  /* 項目とパネルの枠が同じ色になる場合があるため、
     項目の外周に暗い縁を置いて境目を残す（シーはどちらもシアン） */
  border: 2px solid var(--outline);
}
/* 英語は1文字あたりが細く、日本語と同じ26pxだと枠に余白が残る。
   同じ枠を使い切るため、英語だけ上限を上げる。 */
[data-lang="en"] .events-today-group[data-today-group="tdl"] .events-today-card,
[data-lang="en"] .events-today-group[data-today-group="tds"] .events-today-card {
  font-size: clamp(1.35rem, 5.4vw, 2rem);
  line-height: 1.2;
}
/* 見出しの帯も同じ理由で余る。
   実測: 帯の幅564pxに対し "Tokyo Disneyland" は150px（27%）しか使っていなかった。
   件数バッジは右端に固定したまま、パーク名だけを中央に置く。 */
[data-lang="en"] .events-today-group[data-today-group="tdl"] h4,
[data-lang="en"] .events-today-group[data-today-group="tds"] h4 {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  letter-spacing: .01em;
}
.events-today-group[data-today-group="tdl"] h4,
.events-today-group[data-today-group="tds"] h4 {
  /* バッジは右端に置き、名前は「バッジを除いた残りの領域」の中央に置く。
     帯全体で中央にするとバッジの下に文字が寄って見えるため。
     帯が9、バッジが2なら、名前の中心は 3.5 の位置になる。 */
  justify-content: flex-start;
}
.events-today-group[data-today-group="tdl"] h4 > span:not(.events-today-count),
.events-today-group[data-today-group="tds"] h4 > span:not(.events-today-count) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.events-today-group[data-today-group="tdl"] h4 .events-today-count,
.events-today-group[data-today-group="tds"] h4 .events-today-count {
  flex: 0 0 auto;
}
.events-today-list a.events-today-card { cursor: pointer; }
.events-today-list li.event-series-b {
  background: var(--pink);
}
.events-today-list a.events-today-card:focus-visible {
  outline: 3px solid var(--outline);
  outline-offset: -6px;
}
.events-today-list .external-link-mark {
  display: inline-block;
  margin-left: .36em;
  font-family: var(--font-mono);
  font-size: .82em;
  line-height: 1;
  transform: translateY(-.08em);
}
.events-today-list small {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  opacity: .76;
}
.events-today-list .is-empty {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  font-weight: 500;
}
.events-empty {
  border: 1px solid var(--line);
  border-radius: 14px 18px 13px 16px;
  background: var(--surface);
  padding: 16px;
  color: var(--muted);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(196,180,156,.18), 0 0 22px rgba(196,180,156,.10);
}
.events-month {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px 21px 15px 19px;
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(196,180,156,.20), 0 0 28px rgba(196,180,156,.10);
}
.events-month h3, .events-month h4 {
  margin: 0;
}
.events-month h4 {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.events-work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  min-width: 0;
  padding: 5px 4px 8px;
  overflow-x: clip;
}
.events-work-filter button {
  --chip-tilt: 0deg;
  --chip-active-color: var(--work-color, var(--yellow));
  --chip-active-border: color-mix(in srgb, var(--chip-active-color) 54%, var(--outline));
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px 6px 10px 7px;
  padding: 7px 10px 7px 9px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  overflow-wrap: anywhere;
  transform: rotate(var(--chip-tilt));
  transform-origin: 50% 60%;
  filter: drop-shadow(var(--outline) 3px 4px 0);
}
.events-work-filter button.work-filter-chip {
  display: inline-grid;
  grid-template-columns: .72em minmax(0, auto) auto;
  align-items: center;
  gap: 6px;
}
.events-work-filter button.work-filter-chip i {
  width: .72em;
  height: .72em;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--work-color);
}
.events-work-filter button:nth-child(4n+1) { --chip-tilt: -2.7deg; }
.events-work-filter button:nth-child(4n+2) { --chip-tilt: 1.8deg; }
.events-work-filter button:nth-child(4n+3) { --chip-tilt: -.9deg; }
.events-work-filter button:nth-child(4n) { --chip-tilt: 2.5deg; }
.events-work-filter button:nth-child(5n+1) { border-radius: 8px 11px 7px 10px; }
.events-work-filter button:nth-child(5n+2) { border-radius: 11px 7px 10px 8px; }
.events-work-filter button:nth-child(5n+3) { border-radius: 7px 10px 8px 12px; }
.events-work-filter button:nth-child(5n+4) { border-radius: 10px 8px 12px 7px; }
.events-work-filter button:nth-child(5n) { border-radius: 9px 12px 7px 9px; }
.events-work-filter button:nth-child(7n+1) { margin-top: 2px; }
.events-work-filter button:nth-child(7n+3) { margin-top: -1px; }
.events-work-filter button:nth-child(7n+5) { margin-top: 3px; }
.events-work-filter button:nth-child(7n) { margin-top: 1px; }
.events-work-filter button:nth-child(4n+1):nth-child(5n+1) { --chip-tilt: -2.2deg; }
.events-work-filter button:nth-child(4n+2):nth-child(7n+2) { --chip-tilt: 2.1deg; }
.events-work-filter button:nth-child(4n+3):nth-child(5n+3) { --chip-tilt: -1.4deg; }
.events-work-filter button:nth-child(4n):nth-child(7n) { --chip-tilt: 2.8deg; }
.events-work-filter button[data-work-filter="all"],
.events-work-filter button[data-work-filter="various"] {
  --chip-active-color: var(--yellow);
}
.events-work-filter button[aria-pressed="true"] {
  border: 2px solid var(--chip-active-border);
  padding: 6px 9px;
  background: var(--chip-active-color);
  color: var(--outline);
  font-weight: 800;
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
  transform: translateY(-2px) rotate(0deg);
}
.events-work-filter button[aria-pressed="true"] i {
  background: var(--outline);
}
.events-work-filter button span {
  font-family: var(--font-mono);
  font-size: .92em;
  font-weight: 700;
}
.events-axis-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}
.events-select-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.events-select-field label {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.events-select-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px 7px 12px 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 8px rgba(196,180,156,.14), 0 0 18px rgba(196,180,156,.08);
}
.events-axis-filters button {
  max-width: 100%;
  border: 2px solid var(--outline);
  border-radius: 8px 10px 7px 11px;
  padding: 8px 11px;
  background: var(--accent);
  color: var(--outline);
  font-weight: 700;
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
  cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 10px rgba(255,210,63,.34), 0 0 22px rgba(255,210,63,.16);
}
.events-axis-filters button:disabled {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
  text-shadow: none;
  cursor: not-allowed;
}
.events-match-count {
  grid-column: 1 / -1;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.1;
  paint-order: stroke fill;
  -webkit-text-stroke: .8px var(--outline);
  -webkit-text-fill-color: currentColor;
  text-shadow: 3px 3px 0 var(--outline);
}
.events-no-results {
  grid-column: 1 / -1;
}
.events-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}
.events-month-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border-radius: 15px 19px 13px 17px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(196,180,156,.16), 0 0 22px rgba(196,180,156,.08);
}
.events-month-title {
  margin: 0;
  font-size: 1rem;
  border: 1px solid var(--active-work-color, var(--line));
  border-left-width: 8px;
  border-radius: 8px 10px 9px 7px;
  padding: 5px 8px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--active-work-color, var(--line)) 28%, transparent);
}
.events-month-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.events-month-controls button {
  max-width: 100%;
  border: 2px solid var(--outline);
  border-radius: 8px 6px 10px 7px;
  padding: 7px 11px;
  background: var(--accent);
  color: var(--outline);
  font-weight: 700;
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
  cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 10px rgba(255,210,63,.34), 0 0 22px rgba(255,210,63,.16);
}
.events-month-controls button:disabled {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
  text-shadow: none;
  cursor: not-allowed;
}
.events-ticket-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 12px;
  min-width: 0;
}
.events-ticket-legend span {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 5px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.events-ticket-legend i,
.events-ticket-bar {
  display: block;
  width: 28px;
  height: var(--ticket-level-height, 3px);
  border-radius: 999px;
  background: var(--ticket-level-color, rgba(49,225,247,.35));
}
.events-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.events-month-weekday,
.events-month-day {
  min-width: 0;
  text-align: center;
}
.events-month-weekday {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .78rem;
  letter-spacing: .04em;
}
.events-month-day {
  display: grid;
  grid-template-rows: auto auto 1fr;
  position: relative;
  gap: 3px;
  min-height: 54px;
  padding: 5px 3px 13px;
  border: 1px solid var(--line);
  border-radius: 9px 7px 11px 8px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 8px rgba(196,180,156,.10);
}
.events-month-day.is-empty {
  opacity: .38;
}
/* 日本の祝日と連休。読者は日本の暦を知らないので、混む日を日付から読み取れるようにする。 */
.events-month-day.is-weekend > span:first-child { color: var(--muted); }
.events-month-day.is-holiday > span:first-child { color: var(--red); font-weight: 800; }
.events-month-day.is-long-weekend {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}
.events-month-holiday {
  display: block;
  margin-top: 1px;
  color: var(--red);
  font-size: .6rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.events-month-day.is-today {
  border: 3px solid var(--yellow);
  border-radius: 10px 8px 12px 7px;
  padding: 3px 1px 11px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 12px rgba(255,210,63,.42), 0 0 26px rgba(255,210,63,.22);
  background: var(--accent);
  color: var(--outline);
  font-weight: 800;
}
.events-month-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 1.2em;
  color: var(--ink);
  font-family: var(--font-label);
  line-height: 1;
}
.events-month-mark-start { color: var(--new); }
.events-month-mark-end { color: var(--red); }
.events-month-day.is-today .events-month-mark-start,
.events-month-day.is-today .events-month-mark-end {
  color: var(--outline);
}
.events-ticket-price {
  color: var(--ink);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.events-ticket-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: auto;
}
.events-ticket-notes {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: .88rem;
}
.events-ticket-table {
  display: none;
}
.events-ticket-table table {
  width: 100%;
}
.events-tour-schedule {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.events-tour-schedule h3 {
  font-size: 1.05rem;
}
.events-tour-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.events-tour-stop {
  display: grid;
  grid-template-columns: minmax(8.8rem, .75fr) minmax(5.5rem, .45fr) minmax(0, 1.15fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px 13px 11px 7px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(196,180,156,.14), 0 0 22px rgba(196,180,156,.08);
}
.events-tour-stop.is-current {
  border-left-color: var(--accent);
  font-weight: 800;
}
.events-tour-stop.is-pref-match {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.events-tour-stop span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.events-tour-period,
.events-tour-pref {
  font-family: var(--font-mono);
  font-size: .88rem;
}
.events-tour-venue {
  color: var(--ink);
}
.events-tour-status {
  justify-self: start;
  border: 2px solid var(--outline);
  border-radius: 7px 5px 8px 6px;
  padding: 2px 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 0 8px rgba(196,180,156,.12);
}
.events-tour-stop.is-current .events-tour-status {
  background: var(--accent);
  color: var(--outline);
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
}
.events-tour-pref-badge {
  display: inline-block;
  margin-left: 6px;
  border: 1px solid currentColor;
  border-radius: 6px 4px 7px 5px;
  padding: 0 5px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}
.events-month-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.events-month-list {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}
.events-month-list h4 {
  border: 1px solid var(--active-work-color, var(--line));
  border-left-width: 7px;
  border-radius: 7px 9px 8px 6px;
  padding: 4px 8px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--active-work-color, var(--line)) 24%, transparent);
}
.events-month-change-day {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr);
  gap: 8px;
  padding-block: 4px;
  border-top: 1px solid var(--line);
}
.events-month-change-date {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.events-month-change-items {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.events-month-change {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.events-month-change .pill {
  flex: 0 0 auto;
  margin-right: 4px;
}
.events-month-change .pill-new,
.events-month-change .pill-muted {
  border-color: var(--outline);
  color: var(--outline);
}
.events-month-change .pill-new { background: var(--new); }
.events-month-change .pill-muted { background: var(--muted); }
.events-month-change-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.events-category-mark {
  display: inline-block;
  margin-right: 6px;
  border: 1px solid var(--active-work-color, currentColor);
  border-radius: 6px 4px 7px 5px;
  padding: 0 5px;
  font-size: .76em;
  font-weight: 700;
  line-height: 1.35;
  -webkit-text-stroke: 0;
  text-shadow: none;
  vertical-align: .08em;
}
.events-month-running {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.events-month-running li,
.events-month-empty {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.events-month-running li {
  /* 開催中の一覧。地を塗ると文字が読めなくなるため、面の色のままにして
     カテゴリは左の色帯で示す。実測でコントラスト 1.45:1 まで落ちていた。 */
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  border-left-width: 5px;
  border-radius: 8px 12px 11px 7px;
  padding: 10px 14px;
  display: grid;
  gap: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(49,225,247,.20), 0 0 22px rgba(49,225,247,.10);
}
.events-month-running li.event-series-a {
  border-left-color: var(--cyan);
  border-color: var(--cyan);
}
.events-month-running li.event-series-b {
  border-left-color: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(255,210,63,.22), 0 0 22px rgba(255,210,63,.10);
}
.events-month-running li.event-series-c {
  border-left-color: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(255,77,77,.22), 0 0 22px rgba(255,77,77,.10);
}
.events-month-running li.event-series-d {
  border-left-color: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(255,79,163,.22), 0 0 22px rgba(255,79,163,.10);
}
.events-month-running li.event-series-e {
  border-left-color: var(--cyan);
  border-color: var(--cyan);
}
.events-month-running li.event-series-f {
  border-left-color: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(182,255,60,.22), 0 0 22px rgba(182,255,60,.10);
}
.events-panel.is-work-selected .event-bar {
  background: var(--active-work-color);
}
.events-panel.is-work-selected .events-month-running li {
  border-left-color: var(--active-work-color);
  border-color: var(--active-work-color);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px color-mix(in srgb, var(--active-work-color) 24%, transparent), 0 0 22px color-mix(in srgb, var(--active-work-color) 12%, transparent);
}
.events-month-running small {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
.event-note {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
.events-today-card .event-note {
  color: rgba(11,9,6,.82);
}
.events-month-running .running-title,
.events-month-running .running-venue {
  display: block;
}
.events-month-running .running-title {
  color: var(--ink);
  font-weight: 600;
}
.events-month-running .running-venue {
  color: var(--muted);
  font-size: .9rem;
}
.events-today-list .running-title,
.events-today-list .running-venue {
  display: inline;
}
.events-today-list .running-venue::before {
  content: " / ";
}
.events-ending-soon {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 5px solid var(--yellow);
  border-radius: 18px 13px 20px 15px;
  padding: 28px 18px 18px;
  background:
    radial-gradient(circle, rgba(255,248,200,.98) 0 3px, rgba(255,210,63,.72) 3.5px, transparent 4.8px) top 7px left 14px / 24px 12px repeat-x,
    radial-gradient(circle, rgba(255,248,200,.98) 0 3px, rgba(255,210,63,.72) 3.5px, transparent 4.8px) bottom 7px left 14px / 24px 12px repeat-x,
    radial-gradient(circle, rgba(255,248,200,.98) 0 3px, rgba(255,210,63,.72) 3.5px, transparent 4.8px) top 18px left 7px / 12px 24px repeat-y,
    radial-gradient(circle, rgba(255,248,200,.98) 0 3px, rgba(255,210,63,.72) 3.5px, transparent 4.8px) top 18px right 7px / 12px 24px repeat-y,
    linear-gradient(rgba(255,210,63,.07), rgba(255,210,63,.07)),
    var(--surface-2);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.72),
    0 0 20px rgba(255,210,63,.72),
    0 0 48px rgba(255,210,63,.42),
    inset 0 0 0 2px rgba(255,248,200,.20),
    inset 0 0 26px rgba(255,210,63,.16);
  overflow: hidden;
  transform: rotate(-.35deg);
}
.events-ending-soon[hidden] {
  display: none;
}
.events-ending-soon h3 {
  justify-self: start;
  z-index: 1;
  margin: -35px 0 0 10px;
  border: 4px solid var(--yellow);
  border-radius: 9px 6px 10px 7px;
  /* 看板の帯。上下に余裕を持たせる */
  padding: 15px 20px 17px;
  background: var(--outline);
  color: var(--yellow);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.68),
    0 0 16px rgba(255,210,63,.82),
    0 0 34px rgba(255,210,63,.48);
  transform: rotate(.5deg);
}
.events-ending-soon h3::before {
  content: none;
}
.events-ending-soon h3::after {
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 7px;
  background: radial-gradient(circle, rgba(255,248,200,.98) 0 2.5px, rgba(255,210,63,.70) 3px, transparent 4px) left center / 18px 7px repeat-x;
}
.events-ending-soon h3 .events-block-count {
  color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 14px rgba(255,210,63,.58), 0 0 28px rgba(255,210,63,.28);
}
.events-ending-soon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr));
  gap: 12px;
}
.events-ending-soon-list li {
  transform: rotate(var(--today-tilt));
}
.events-ending-soon-list li[data-tier="1"],
.events-ending-soon-list li[data-tier="2"] {
  grid-column: span 2;
}
.events-ending-soon-list li[data-tier="1"] {
  --today-tilt: 0deg;
}
.events-ending-soon-list .events-today-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 7px;
  min-width: 0;
  min-height: 7.2rem;
  padding: 13px 16px;
  filter: drop-shadow(var(--outline) 4px 5px 0);
}
.events-ending-soon-left {
  display: inline-grid;
  justify-self: start;
  place-items: start;
  min-width: 0;
  color: var(--outline);
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 800;
  line-height: .95;
}
.events-ending-soon-meter {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  color: var(--outline);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(0,0,0,.34);
}
.events-ending-soon-days {
  font-family: var(--font-mono);
  font-size: 2.125rem;
  line-height: .86;
}
.events-ending-soon-unit,
.events-ending-soon-prefix {
  font-size: .54em;
}
.events-ending-soon-list .events-today-card[data-tier="1"] {
  position: relative;
  grid-template-columns: minmax(12rem, max-content) minmax(18rem, 1fr);
  align-items: center;
  column-gap: 18px;
  min-height: 9.6rem;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle, rgba(255,248,200,.98) 0 2.5px, rgba(255,210,63,.70) 3px, transparent 4px) top 7px left 12px / 20px 10px repeat-x,
    radial-gradient(circle, rgba(255,248,200,.98) 0 2.5px, rgba(255,210,63,.70) 3px, transparent 4px) bottom 7px left 12px / 20px 10px repeat-x,
    radial-gradient(circle, rgba(255,248,200,.98) 0 2.5px, rgba(255,210,63,.70) 3px, transparent 4px) top 16px left 7px / 10px 20px repeat-y,
    radial-gradient(circle, rgba(255,248,200,.98) 0 2.5px, rgba(255,210,63,.70) 3px, transparent 4px) top 16px right 7px / 10px 20px repeat-y,
    var(--event-color, var(--series-a));
}
.events-ending-soon-list .events-today-card[data-tier="1"]::after {
  content: attr(data-last-day-badge);
  position: absolute;
  top: 11px;
  right: 12px;
  border: 2px solid var(--outline);
  border-radius: 6px 4px 7px 5px;
  padding: 3px 7px;
  background: var(--yellow);
  color: var(--outline);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  transform: rotate(5deg);
}
.events-ending-soon-list .events-today-card[data-tier="1"] .events-ending-soon-left {
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  place-items: center;
  font-size: 1.9rem;
}
.events-ending-soon-list .events-today-card[data-tier="1"] .events-ending-soon-days {
  font-size: 5.5rem;
}
.events-ending-soon-list .events-today-card[data-tier="2"] {
  border-width: 3px;
  min-height: 8.25rem;
  padding: 18px 20px;
}
.events-ending-soon-list .events-today-card[data-tier="2"] .events-ending-soon-days {
  font-size: 4rem;
}
.events-ending-soon-list .events-today-card[data-tier="3"] .events-ending-soon-days {
  font-size: 3rem;
}
.events-ending-soon-list .events-today-card[data-tier="4"] .events-ending-soon-days {
  font-size: 2.125rem;
}
.events-ending-soon-last-label {
  display: block;
  flex-basis: 100%;
  margin-top: .12em;
  color: var(--outline);
  font-size: .48em;
  line-height: 1.05;
  -webkit-text-stroke: .7px var(--outline);
  text-shadow: none;
}
.events-ending-soon-until {
  display: block;
  color: rgba(11,9,6,.86);
  font-size: .82rem;
  font-weight: 700;
}
.events-ending-soon-list .running-title,
.events-ending-soon-list .running-venue {
  display: block;
  min-width: 0;
}
.events-ending-soon-list .running-title {
  overflow-wrap: break-word;
}
.events-ending-soon-list .running-venue {
  overflow-wrap: break-word;
}
.events-ending-soon-list .running-venue::before {
  content: none;
}
/* ページ間のタブ。トップの縦長を解消し、各ページへの入口をここに集める。
   ヘッダーと同じくスクロールに追従させる。位置はヘッダーの実測の高さぶん下げる
   （--header-h は起動時とリサイズ時に JS が入れる）。 */
.section-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
  position: sticky;
  top: var(--header-h, 74px);
  z-index: 30;
  padding: 8px 0;
}
.section-tabs::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background: var(--bg);
}
/* 上下に固定するものが増えると本文が読みにくい。
   狭い画面ではタブが4段に積まれて300px以上になるため、固定しない。 */
@media (max-width: 820px), (max-height: 700px) {
  .section-tabs { position: static; padding: 0; }
  .section-tabs::before { display: none; }
}
/* 狭い画面ではタブを2列にして、縦の高さを半分に抑える。 */
@media (max-width: 820px) {
  .section-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .section-tab { padding: 10px 12px; }
  .section-tab-label { font-size: 1.05rem; }
  .section-tab-note { font-size: .76rem; }
}
.section-tab {
  --tab-tone: var(--w-various);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 13px 15px 14px;
  border: 2px solid var(--outline);
  border-radius: 14px 10px 15px 11px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.62), 0 3px 0 rgba(0,0,0,.45);
  transition: translate .12s ease, box-shadow .12s ease;
}
.section-tab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: 11px 8px 0 0;
  background: var(--tab-tone);
}
.section-tab[data-tone="today"] { --tab-tone: var(--w-pooh); }
.section-tab[data-tone="parks"] { --tab-tone: var(--w-toy-story); }
.section-tab[data-tone="japan"] { --tab-tone: var(--w-twst); }
.section-tab[data-tone="plan"]  { --tab-tone: var(--w-baymax); }
.section-tab-label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--tab-tone);
  text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}
.section-tab-note {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.section-tab:hover,
.section-tab:focus-visible {
  translate: 0 -3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.62), 0 6px 0 rgba(0,0,0,.45);
}
/* 現在地は塗りを反転させて、押せる先と区別する。 */
.section-tab[data-current="true"] {
  background: var(--tab-tone);
  border-color: var(--outline);
  translate: none;
}
.section-tab[data-current="true"]:hover,
.section-tab[data-current="true"]:focus-visible { translate: none; }
.section-tab[data-current="true"] .section-tab-label {
  color: var(--outline);
  text-shadow: -1px -1px 0 rgba(255,255,255,.45), 1px 1px 0 rgba(0,0,0,.22);
}
.section-tab[data-current="true"] .section-tab-note { color: rgba(11,9,6,.78); }
.section-tab[data-current="true"]::before { background: rgba(11,9,6,.34); }
@media (prefers-reduced-motion: reduce) {
  .section-tab { transition: none; }
  .section-tab:hover, .section-tab:focus-visible { translate: none; }
}
/* 区切りのギザギザは次のセクション上端に描かれ、前のセクションへ少し食い込む。
   この記事は段落で終わるセクションが続くので、文字にかからないよう下に余白を取る。 */
.beyond-page .section-block { padding-bottom: 18px; }
.beyond-page .section-block > p:last-child { margin-bottom: 0; }
/* 対象・対象外が一目で分かるようにする。色だけに頼らず文字でも示している。 */
.early-entry th { text-align: left; }
.early-entry td { text-align: center; white-space: nowrap; }
.early-entry td[data-state="yes"] { color: var(--lime); font-weight: 700; }
.early-entry td[data-state="limited"] { color: var(--yellow); font-weight: 700; }
.early-entry td[data-state="no"] { color: var(--muted); }
.table-scroll { overflow-x: auto; }
/* 仮装の記事。段落で終わるセクションが続くので、区切りのギザギザが文字にかからないよう空ける。 */
.costume-page .section-block { padding-bottom: 18px; }
.costume-page .section-block > p:last-child,
.costume-page .section-block > ul:last-child { margin-bottom: 0; }
.costume-page ul { padding-left: 1.2em; }
.costume-page li { margin: 4px 0; }
/* 仮装できる日とできない日を、色で見分けられるようにする。 */
.costume-dates th { text-align: left; white-space: nowrap; }
.costume-dates tr[data-kind="ok"] th { color: var(--lime); }
.costume-dates tr[data-kind="ng"] th { color: var(--red); }
.costume-dates tr[data-kind="ng"] td { color: var(--red); }
/* 「滞在中に行けるイベント」の一覧。計画ページと記事ページの両方で使う。 */
.while-here-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.while-here-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
  /* 件数が枠ごとに違う。揃えると少ない枠に大きな空白が出るため、内容に合わせる。 */
  align-items: start;
}
.while-here-walk { color: var(--ink); font-size: .86rem; line-height: 1.45; }
.while-here-zone {
  display: grid; gap: 12px; align-content: start; padding: 18px;
  border: 3px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: 6px 7px 0 var(--outline); min-width: 0;
}
/* 近い順に色を変える。リゾート内がいちばん目に入るようにする。 */
.while-here-zone[data-zone="zone_resort"] { border-color: var(--yellow); }
.while-here-zone[data-zone="zone_resort"] h3 { color: var(--yellow); }
.while-here-zone[data-zone="zone_tokyo"] h3 { color: var(--cyan); }
.while-here-zone ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.while-here-item {
  display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); min-width: 0;
}
.while-here-item:last-child { padding-bottom: 0; border-bottom: 0; }
.while-here-item a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.while-here-item a strong { color: var(--accent); font-weight: 800; }
.while-here-item .external-link-mark { margin-left: 5px; color: var(--accent); font-weight: 800; }
.while-here-venue, .while-here-period { color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.while-here-note, .while-here-more { color: var(--muted); font-size: .88rem; }
.while-here-more a { color: var(--accent); font-weight: 700; }
/* キーボードで来た人が本文まで飛べるようにする。焦点が当たるまで見えない。 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  background: var(--accent);
  color: var(--outline);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* 巡回ショップ。ブランドごとに区切らないと、どれの話か分からなくなる。 */
.popup-brand, .popup-schedule, .popup-rule {
  margin: 0 0 18px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--line);
}
.popup-brand:last-child, .popup-schedule:last-child, .popup-rule:last-child { margin-bottom: 0; }
.popup-brand h3, .popup-schedule h3, .popup-rule h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--accent);
}
.popup-venue-type { margin: 0 0 8px; color: var(--muted); font-size: .84rem; }
.popup-catch { color: var(--ink); font-weight: 600; }
/* 旅行者が使えない仕組みは、読み飛ばされると意味がない。行として立てる。 */
.shopping-warn {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .02em;
}
.correction-notice {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-left: 6px solid var(--accent);
  border-radius: 9px 7px 11px 8px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 10px rgba(255,210,63,.20);
}
.correction-notice h2 {
  color: var(--accent);
  font-size: 1.1rem;
  text-shadow: 2px 2px 0 var(--outline);
  -webkit-text-stroke-width: .4px;
}
.correction-notice ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.correction-notice li {
  display: grid;
  gap: 6px;
}
.correction-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}
.correction-meta span {
  color: var(--accent);
}
.correction-what {
  color: var(--ink);
  font-weight: 700;
}
.correction-apology, .correction-source, .correction-why {
  color: var(--muted);
}
.event-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.event-page-links a {
  display: inline-block;
  max-width: 100%;
  border: 2px solid var(--outline);
  border-radius: 9px 7px 11px 8px;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--outline);
  font-weight: 700;
  text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.25);
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 10px rgba(255,210,63,.34), 0 0 22px rgba(255,210,63,.16);
}
.events-figure { min-width: 0; }
.events-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  /* 上は月ラベルの分だけ空ける */
  padding: 30px 0 8px;
}
/* 月の目盛りと今日の線を、行と同じ列割りに載せる。
   これをやらないと、ラベル列の幅だけ横にずれる。 */
/* ランドとシーは「今日やっていること」の枠と同じ色にする。
   1日1パークで回るので、どちらの図を見ているかが一目で分かるようにする。 */
[data-timeline-park="tdl"] .event-bar,
[data-timeline-park="tdl"] .chart-legend .swatch { background: var(--yellow); }
[data-timeline-park="tds"] .event-bar,
[data-timeline-park="tds"] .chart-legend .swatch { background: var(--cyan); }
[data-timeline-park="tdl"] .chart-caption,
[data-timeline-park="tdl"] .chart-caption.bubble::after { background: var(--yellow); }
[data-timeline-park="tds"] .chart-caption,
[data-timeline-park="tds"] .chart-caption.bubble::after { background: var(--cyan); }
/* 終了日未定の注記が枠からはみ出していたので、トラック内に収める */
.events-timeline-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 14px;
  pointer-events: none;
  z-index: 1;
}
.events-timeline-spacer { min-width: 0; }
.events-timeline-axis {
  position: relative;
  min-width: 0;
}
.events-timeline-month {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--month-left, 0%);
  width: 0;
  border-left: 1px dashed rgba(196,180,156,.30);
}
.events-timeline-month b {
  position: absolute;
  top: -26px;
  left: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 年が変わる月は目立たせる */
.events-timeline-month[data-year-start="true"] {
  border-left-style: solid;
  border-left-color: rgba(196,180,156,.52);
}
.events-timeline-month[data-year-start="true"] b { color: var(--ink); }
.event-row {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.event-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.event-label strong, .event-label span {
  overflow-wrap: anywhere;
}
.event-label span {
  color: var(--muted);
  font-size: .9rem;
}
.event-track {
  position: relative;
  min-width: 0;
  height: 30px;
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
  border-radius: 8px 6px 9px 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  overflow: hidden;
  box-shadow: 0 0 8px rgba(196,180,156,.10);
}
.event-bar {
  position: absolute;
  top: 8px;
  left: var(--event-left, 0%);
  width: var(--event-width, 0%);
  min-width: 3px;
  height: 14px;
  border-radius: 5px 7px 7px 5px;
  border: 2px solid var(--outline);
}
.event-series-a { background: var(--series-a); }
.event-series-b { background: var(--yellow); }
.event-series-c { background: var(--red); }
.event-series-d { background: var(--pink); }
.event-series-e { background: var(--cyan); }
.event-series-f { background: var(--lime); }
.chart-legend .event-series-a { background: var(--series-a); }
.chart-legend .event-series-b { background: var(--yellow); }
.chart-legend .event-series-c { background: var(--red); }
.chart-legend .event-series-d { background: var(--pink); }
.chart-legend .event-series-e { background: var(--cyan); }
.chart-legend .event-series-f { background: var(--lime); }
.event-open-end {
  position: absolute;
  right: 6px;
  top: 5px;
  max-width: 42%;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(11,9,6,.72);
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: .78rem;
  line-height: 1.2;
}
.events-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--today-left, 0%);
  width: 0;
  border-left: 3px solid var(--yellow);
  z-index: 3;
}
.events-today-line span {
  position: absolute;
  top: -13px;
  left: 6px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .78rem;
  white-space: nowrap;
}
.event-report {
  display: inline-block;
  margin-left: 6px;
  color: var(--yellow);
  font-weight: 700;
}
.events-open-run {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.events-open-run p, .event-muted {
  color: var(--muted);
}
.events-open-run table {
  margin-top: 4px;
}
.events-open-run td small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.event-status {
  display: inline-block;
  border: 2px solid var(--outline);
  border-radius: 7px 5px 8px 6px;
  padding: 2px 7px;
  color: var(--outline);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 0 8px rgba(196,180,156,.12);
}

/* セクションの背後に置く大きな飾り文字。輪郭線だけにして前面の文字を邪魔しない濃さに抑える。
   読み上げでは無視させるため、使う側で aria-hidden="true" を付ける。 */
.section-block {
  position: relative;
  padding-top: 3.2rem;
}
.page-flow > .section-block + .section-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  right: -8px;
  height: 12px;
  background: repeating-linear-gradient(
    45deg,
    var(--yellow) 0 12px,
    var(--outline) 12px 24px
  );
  border-top: 2px solid var(--outline);
  border-bottom: 2px solid var(--outline);
  z-index: 0;
}
.page-flow > .section-block + .section-block::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 24px;
  right: -22px;
  height: 7px;
  background: repeating-linear-gradient(45deg, var(--cyan) 0 9px, var(--outline) 9px 18px);
  z-index: 0;
  pointer-events: none;
}
.section-block > *:not(.bg-word) { position: relative; z-index: 1; }
.section-block > h2 {
  -webkit-text-stroke: 5px var(--outline);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--outline);
  letter-spacing: .02em;
}
.bg-word {
  position: absolute;
  top: 0;
  right: -.01em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: .78;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 3px var(--line);
  transform: rotate(-7deg);
  transform-origin: right top;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.section-block:nth-of-type(even) .bg-word {
  right: auto;
  left: -.02em;
  transform: rotate(6deg);
  transform-origin: left top;
}
.section-block:nth-of-type(3n+1) .bg-word {
  -webkit-text-stroke: 0;
  color: rgba(49,225,247,.09);
}
.section-block:nth-of-type(3n) .bg-word { top: .18em; }

@media (max-width: 860px) {
  .bg-word {
    font-size: clamp(2.4rem, 11vw, 5rem);
    -webkit-text-stroke-width: 2px;
    opacity: .6;
  }
  .section-block { padding-top: 2.2rem; }
}

/* 見出しの左端は少しずらし、ばらつきはセクション枠の内側に留める。
   負の値は狭い画面で端が切れるので、広い画面でだけ効かせる。 */
@media (min-width: 900px) {
  .section-block:nth-of-type(5n+2) > h2 { margin-left: 30px; }
  .section-block:nth-of-type(5n+3) > h2 { margin-left: -14px; }
  .section-block:nth-of-type(5n+4) > h2 { margin-left: 46px; }
}

/* Decorative parts stretch when they are flex/grid children. Keep them to their content width.
   .badge-circle and .doodle-arrow have intrinsic dimensions, so do not set width on them. */
.sticker, .label-diagonal, .bubble {
  align-self: start;
  justify-self: start;
  width: fit-content;
}
.badge-circle, .doodle-arrow {
  align-self: start;
  justify-self: start;
}

.sticker {
  display: inline-block;
  padding: 7px 17px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--outline);
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  box-shadow: 4px 5px 0 var(--outline);
}
.sticker-pink { background: var(--pink); }
.sticker-cyan { background: var(--cyan); }
.sticker-lime { background: var(--lime); }

.events-clock {
  display: block;
  margin-top: 1px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.events-schedule {
  display: block;
  margin-top: 2px;
  opacity: .85;
}
/* 「いま、何をやっているか」の見出しの隣に、新しく載せたものを出す。
   巡回で見つけたものがここに現れるので、毎日来る人に差分が伝わる。 */
.events-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 20px;
  align-items: start;
}
.events-head-main { min-width: 0; }
.new-arrivals {
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 13px 9px 14px 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}
.new-arrivals h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--lime);
  font-size: 1rem;
}
.new-arrivals-since {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 400;
}
.new-arrivals ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.new-arrivals li {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 2px 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  line-height: 1.3;
}
.new-arrivals-more { margin: 9px 0 0; font-size: .8rem; }
.new-arrivals-more a { color: var(--accent); font-weight: 700; }
.new-arrivals li:last-child { padding-bottom: 0; border-bottom: 0; }
.new-arrivals a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.new-arrivals a strong { color: var(--accent); font-weight: 800; }
.new-arrivals-venue, .new-arrivals-date, .new-arrivals-empty {
  color: var(--muted);
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.new-arrivals-empty { margin: 0; }
/* 狭い画面では横に並べず、見出しの下に置く。 */
@media (max-width: 820px) {
  .events-head { grid-template-columns: minmax(0, 1fr); }
}
.events-as-of {
  margin: -6px 0 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .9rem;
}

/* 手書き風の矢印。少し歪んだ線で「ここを見て」を示す */
.doodle-arrow {
  display: block;
  width: 74px;
  height: 42px;
  color: var(--pink);
  transform: rotate(-8deg) scaleY(-1);
  pointer-events: none;
}

.badge-circle {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--pink);
  color: var(--outline);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  clip-path: polygon(
    50% 0%, 58% 12%, 71% 6%, 73% 20%, 87% 19%, 84% 33%, 97% 37%, 89% 48%,
    100% 57%, 88% 64%, 95% 76%, 81% 79%, 83% 93%, 70% 88%, 66% 100%, 55% 91%,
    45% 100%, 37% 89%, 25% 96%, 22% 82%, 8% 84%, 12% 70%, 0% 63%, 10% 53%,
    2% 43%, 15% 37%, 10% 24%, 24% 22%, 24% 8%, 37% 14%
  );
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(255,79,163,.36), 0 0 26px rgba(255,79,163,.18);
  transform: rotate(14deg);
}

.bubble {
  position: relative;
  display: inline-block;
  padding: 12px 18px;
  border: 3px solid var(--outline);
  border-radius: 16px;
  background: var(--cyan);
  color: var(--outline);
  transform: rotate(-1.5deg);
}
/* .chart-caption の色指定と詳細度が同じで負けるため、組み合わせで上書きする。
   シアンの塗りの上では --muted は 1.5:1 しかなく読めない。--outline なら 12.7:1。 */
.chart-caption.bubble { color: var(--outline); }
.bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -11px;
  width: 16px;
  height: 16px;
  background: var(--cyan);
  border-right: 3px solid var(--outline);
  border-bottom: 3px solid var(--outline);
  transform: rotate(45deg);
}

.label-diagonal {
  display: inline-block;
  padding: 6px 20px;
  border: 3px solid var(--outline);
  border-radius: 10px 7px 12px 8px;
  background: var(--cyan);
  color: var(--outline);
  font-family: var(--font-label);
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

/* 重要な数だけ display 書体で大きく出す。Chewy はウェイト400しか無いので
   font-synthesis-weight: none を添えて合成ボールドを避ける。 */
.status-card--figure strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis-weight: none;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 5px 5px 0 var(--outline);
}
.fig-yellow strong { color: var(--yellow); }
.fig-cyan strong { color: var(--cyan); }
.fig-pink strong { color: var(--pink); }
.fig-lime strong { color: var(--lime); }
.change-card .price-emphasis { position: relative; z-index: 0; }
/* 価格の背後に敷く集中線。星型は横長の要素だと潰れて形が読めないため、
   縦横比に依存しないこの表現にする。マスクで中心から外へ消す。 */
.change-card .price-emphasis::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: repeating-linear-gradient(
    -8deg,
    rgba(255,210,63,.22) 0 3px,
    transparent 3px 12px
  );
  -webkit-mask-image: radial-gradient(ellipse at center, #000 26%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 26%, transparent 74%);
  pointer-events: none;
}

/* 整然としたグリッドを崩す。角度は最大1度台に留める。それ以上は「崩れている」に見える。 */
.status-grid, .card-grid, .change-card-grid { align-items: start; }
.status-grid > *, .card-grid > *, .change-card-grid > * { --tilt: 0deg; transform: rotate(var(--tilt)); }
.status-grid > *:nth-child(4n+1), .card-grid > *:nth-child(4n+1), .change-card-grid > *:nth-child(4n+1) { --tilt: -3deg; }
.status-grid > *:nth-child(4n+2), .card-grid > *:nth-child(4n+2), .change-card-grid > *:nth-child(4n+2) { --tilt: 2.2deg; margin-top: 18px; }
.status-grid > *:nth-child(4n+3), .card-grid > *:nth-child(4n+3), .change-card-grid > *:nth-child(4n+3) { --tilt: -1.8deg; margin-top: -6px; }
.status-grid > *:nth-child(4n),   .card-grid > *:nth-child(4n),   .change-card-grid > *:nth-child(4n)   { --tilt: 3.4deg; margin-top: 12px; }
.status-grid > *:nth-child(4n+1), .change-card-grid > *:nth-child(4n+1) { border-color: var(--yellow); }
.status-grid > *:nth-child(4n+2), .change-card-grid > *:nth-child(4n+2) { border-color: var(--cyan); }
.status-grid > *:nth-child(4n+3), .change-card-grid > *:nth-child(4n+3) { border-color: var(--pink); }
.status-grid > *:nth-child(4n),   .change-card-grid > *:nth-child(4n)   { border-color: var(--lime); }
.card-grid > *:nth-child(4n+1) { --card-accent: var(--yellow); }
.card-grid > *:nth-child(4n+2) { --card-accent: var(--cyan); }
.card-grid > *:nth-child(4n+3) { --card-accent: var(--pink); }
.card-grid > *:nth-child(4n)   { --card-accent: var(--lime); }
.card-grid > * {
  border: 2px solid var(--card-accent);
  border-radius: 16px 13px 18px 14px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px color-mix(in srgb, var(--card-accent) 35%, transparent), 0 0 28px color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
  padding-bottom: 34px;
  overflow: hidden;
}
.card-grid > *:nth-child(4n+1),
.card-grid > *:nth-child(4n+2),
.card-grid > *:nth-child(4n+3),
.card-grid > *:nth-child(4n) { clip-path: none; }
.card-grid > *::after { content: none; }
/* 動きを減らす設定をしている利用者には一切動かさない */
@media (prefers-reduced-motion: no-preference) {
  .status-grid > *, .card-grid > *, .change-card-grid > *, .article-item {
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), translate .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease;
  }
  .events-work-filter button {
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), border-width .16s ease;
  }
  .events-today-list li {
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), translate .16s cubic-bezier(.34,1.56,.64,1);
  }
  .events-work-filter button:hover {
    transform: translateY(-2px) rotate(calc(var(--chip-tilt) + 2deg));
  }
  .events-work-filter button[aria-pressed="true"]:hover {
    transform: translateY(-4px) rotate(0deg);
  }
  /* ランド／シーを包む親（.events-today-parks とその li）は動かさない。
     除外しないと、どちらのパネルに乗せても両方まとめて傾く */
  .events-today-list li:not(.events-today-parks):not(:has(.events-today-parks)):has(a:hover),
  .events-today-list li:not(.events-today-parks):not(:has(.events-today-parks)):has(a:focus-visible) {
    translate: 0 -3px;
    transform: rotate(calc(var(--today-tilt) * .35));
    z-index: 2;
  }
  .events-today-list > .events-today-group:has(a:hover),
  .events-today-list > .events-today-group:has(a:focus-visible),
  .events-today-parks:has(a:hover),
  .events-today-parks:has(a:focus-visible),
  .events-today-list li:has(.events-today-parks):has(a:hover),
  .events-today-list li:has(.events-today-parks):has(a:focus-visible) {
    translate: 0;
    transform: none;
  }
  /* ランド／シーは、乗せたパネルだけが反応する */
  .events-today-parks > .events-today-group:has(a:hover),
  .events-today-parks > .events-today-group:has(a:focus-visible) {
    translate: 0 -3px;
    z-index: 2;
  }
  .events-today-parks > .events-today-group {
    transition: translate .16s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes toon-pop {
    0%   { scale: 1 1; }
    40%  { scale: 1.14 .88; }
    72%  { scale: .95 1.07; }
    100% { scale: 1.06 1.06; }
  }
  .status-grid > *:hover, .card-grid > *:hover, .change-card-grid > *:hover {
    translate: 0 -10px;
    transform: rotate(calc(var(--tilt) - 6deg));
    animation: toon-pop .34s cubic-bezier(.34,1.56,.64,1) forwards;
    z-index: 9;
  }
  .article-item:hover {
    transform: translateY(-9px) rotate(-3.5deg) scale(1.03);
  }

  .sticker, .badge-circle, .label-diagonal {
    transition: transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  .sticker:hover { transform: rotate(5deg) scale(1.12); }
  .badge-circle:hover { transform: rotate(-8deg) scale(1.1); }
  .label-diagonal:hover { transform: rotate(3deg) scale(1.08); }

  @keyframes toon-dot {
    0%, 100% { scale: 1; }
    50%      { scale: 1.28; }
  }
  .status-grid > *::after, .card-grid > *::after, .change-card-grid > *::after {
    animation: toon-dot 2.6s ease-in-out infinite;
  }
  .status-grid > *:nth-child(2n)::after, .card-grid > *:nth-child(2n)::after, .change-card-grid > *:nth-child(2n)::after { animation-delay: .7s; }
  .status-grid > *:nth-child(3n)::after, .card-grid > *:nth-child(3n)::after, .change-card-grid > *:nth-child(3n)::after { animation-delay: 1.4s; }

  @keyframes toon-drift {
    0%, 100% { translate: 0 0; }
    50%      { translate: -14px 8px; }
  }
  .bg-word { animation: toon-drift 9s ease-in-out infinite; }

  /* 飾りが少しだけ揺れる。振れ幅は小さく、対象はステッカー2種だけに絞る。
     常時動くものを増やすと読む邪魔になり、酔う人も出る。 */
  @keyframes toon-wobble {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(-4.5deg); }
  }
  @keyframes toon-bob {
    0%, 100% { transform: rotate(14deg) translateY(0); }
    50%      { transform: rotate(11deg) translateY(-4px); }
  }
  .badge-circle { animation: toon-bob 4.2s ease-in-out infinite; }
  .badge-circle:hover { animation-play-state: paused; }
}
@media (max-width: 480px) {
  .chart-row { grid-template-columns: 4.6em minmax(0, 1fr); }
  .chart-tier { font-size: .88rem; }
  .events-today { padding: 14px; }
  .events-today-layout,
  .events-today-parks {
    gap: 16px;
  }
  .events-today-parks > .events-today-group {
    box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 16px rgba(255,210,63,.48), 0 0 32px rgba(255,210,63,.24);
  }
  .events-today-parks > .events-today-group[data-today-group="tds"] {
    box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 16px rgba(49,225,247,.48), 0 0 32px rgba(49,225,247,.24);
  }
  .events-today-parks > .events-today-group[data-today-group="tdl"],
  .events-today-parks > .events-today-group[data-today-group="tds"] {
    transform: none;
  }
  .events-today-line span { display: none; }
  .events-month-calendar { display: none; }
  .events-ticket-legend { display: none; }
  .events-ticket-table {
    display: block;
    overflow-x: auto;
  }
  .affiliate-grid {
    grid-template-columns: 1fr;
  }
  .affiliate-slot-secondary ul {
    grid-template-columns: 1fr;
  }
  .affiliate-link {
    min-height: 0;
  }
  .events-month-change-day { grid-template-columns: 3.6em minmax(0, 1fr); }
  .events-month-change { align-items: flex-start; }
  .events-ending-soon {
    border-width: 4px;
    border-radius: 14px 10px 16px 12px;
    padding: 24px 12px 14px;
    background:
      radial-gradient(circle, rgba(255,248,200,.98) 0 2.3px, rgba(255,210,63,.70) 2.8px, transparent 3.8px) top 6px left 10px / 20px 10px repeat-x,
      radial-gradient(circle, rgba(255,248,200,.98) 0 2.3px, rgba(255,210,63,.70) 2.8px, transparent 3.8px) bottom 6px left 10px / 20px 10px repeat-x,
      linear-gradient(rgba(255,210,63,.07), rgba(255,210,63,.07)),
      var(--surface-2);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.72),
      0 0 14px rgba(255,210,63,.58),
      0 0 28px rgba(255,210,63,.30),
      inset 0 0 0 1px rgba(255,248,200,.18),
      inset 0 0 18px rgba(255,210,63,.12);
    transform: none;
  }
  .events-ending-soon h3 {
    margin: -30px 0 0 6px;
    max-width: calc(100% - 12px);
    padding: 12px 14px 14px;
    font-size: 1.72rem;
    transform: rotate(.35deg);
  }
  .events-ending-soon-list {
    grid-template-columns: 1fr;
  }
  .events-ending-soon-list li[data-tier="1"],
  .events-ending-soon-list li[data-tier="2"] {
    grid-column: auto;
  }
  .events-ending-soon-list .events-today-card,
  .events-ending-soon-list .events-today-card[data-tier="1"] {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 15px 14px;
  }
  .events-ending-soon-list .events-today-card[data-tier="1"] {
    padding-top: 34px;
  }
  .events-ending-soon-left {
    grid-row: auto;
    justify-self: start;
    font-size: 1.1rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="1"] .events-ending-soon-days {
    font-size: 3.5rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="2"] .events-ending-soon-days {
    font-size: 2.75rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="3"] .events-ending-soon-days {
    font-size: 2.25rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="4"] .events-ending-soon-days {
    font-size: 1.75rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="1"] .events-ending-soon-left {
    grid-row: auto;
    align-self: auto;
    justify-self: start;
    place-items: start;
    font-size: 1.55rem;
  }
  .events-ending-soon-list .events-today-card[data-tier="1"]::after {
    top: 10px;
    right: 10px;
    font-size: .7rem;
  }
}
@media (max-width: 820px) {
  .metrics > * { width: 100%; }
  .global-nav, .site-nav-lang { align-items: flex-start; flex-direction: column; }
  .site-header, .hero { padding: 20px; }
  .events-axis-filters { grid-template-columns: 1fr; }
  .events-axis-filters button,
  .events-match-count { justify-self: stretch; }
  .event-row { grid-template-columns: 1fr; gap: 8px; }
  .events-tour-stop { grid-template-columns: 1fr; }
  .events-month-grid { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .events-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-month-grid { grid-template-columns: 1fr; }
}