/* =========================================================
   祝日ずかん — style.css
   コンセプト：世界のお祭りステッカー × パスポートのスタンプ帳
   WORLD モード＝コバルト×ピンク×レモン ／ JAPAN モード＝朱×藍×金
   ========================================================= */
:root {
  --paper: #fff8ec;
  --paper2: #fffcf5;
  --card: #ffffff;
  --ink: #1b1511;
  --ink2: #5a4f46;
  --ink3: #8b8076;
  --line: rgba(27, 21, 17, 0.14);
  --line2: rgba(27, 21, 17, 0.3);
  --accent: #2f62b5;
  --accent-ink: #ffffff;
  --accent2: #e8577e;
  --yellow: #ffd84d;
  --hl: #ffe9a3;
  --mint: #1fae8b;
  --orange: #ff8c3a;
  --purple: #7b5cd6;
  --soft: #e6eefb;
  --soft2: #ffe6ee;
  --t-pink: #ffd6e3;
  --t-blue: #d8e6ff;
  --t-green: #d4f2e3;
  --t-yellow: #fff1b8;
  --t-purple: #e6dcff;
  --sh: #1b1511;
  --shadow: 4px 4px 0 #1b1511;
  --bw: 2.5px;
  --r: 18px;
  --r-sm: 12px;
  --f-display: 'Dela Gothic One', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --f-en: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-label: 'Fraunces', Georgia, serif;
  --f-read: 'Fraunces', Georgia, serif;
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1.15);
  --wrap: 1180px;
  --prose: 740px;
  --bg-pattern: radial-gradient(rgba(120, 90, 60, 0.13) 1px, transparent 1px);
  color-scheme: light;
}
:root[data-mode='japan'] {
  --paper: #fff5ea;
  --paper2: #fffaf3;
  --accent: #d6402c;
  --accent2: #2c4b92;
  --yellow: #ffd04a;
  --soft: #ffe4dc;
  --soft2: #e2e8fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0f1326;
    --paper2: #151a33;
    --card: #1b2140;
    --ink: #eef1ff;
    --ink2: #c3c9e6;
    --ink3: #8e95b8;
    --line: rgba(238, 241, 255, 0.15);
    --soft: #262e5a;
    --soft2: #3a2440;
    --sh: #000;
    color-scheme: dark;
  }
  :root:not([data-theme='light'])[data-mode='japan'] {
    --paper: #1a1210;
    --paper2: #221815;
    --card: #2a1e1a;
    --soft: #43251f;
    --soft2: #1f2a4d;
  }
}
:root[data-theme='dark'] {
  --paper: #0f1326;
  --paper2: #151a33;
  --card: #1b2140;
  --ink: #eef1ff;
  --ink2: #c3c9e6;
  --ink3: #8e95b8;
  --line: rgba(238, 241, 255, 0.15);
  --soft: #262e5a;
  --soft2: #3a2440;
  --sh: #000;
  color-scheme: dark;
}
:root[data-theme='dark'][data-mode='japan'] {
  --paper: #1a1210;
  --paper2: #221815;
  --card: #2a1e1a;
  --soft: #43251f;
  --soft2: #1f2a4d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}
body {
  margin: 0;
  background: var(--paper);
  background-image: var(--bg-pattern);
  background-size: 22px 22px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.45s ease;
}
main {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.prose-w {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 0 20px;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--yellow));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 120;
}

/* ---------- ボタン・チップ ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sh);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
  line-height: 1.3;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--sh);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--sh);
}
.btn-ghost {
  background: var(--card);
  color: var(--ink);
}
.btn-y {
  background: var(--yellow);
  color: #141a33;
}
.btn-p {
  background: var(--accent2);
  color: #fff;
}
.btn-sm {
  padding: 7px 14px;
  font-size: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
}
.chip-c {
  color: #fff;
  border-color: transparent;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sticker {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 36px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--sh);
}

/* ---------- ヘッダー ---------- */
.hd {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid var(--ink);
}
.hd-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: none;
}
.logo-mark {
  width: 42px;
  height: 42px;
  transition: transform 0.4s var(--ease);
}
.logo:hover .logo-mark {
  transform: rotate(-20deg) scale(1.08);
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink2);
}
.logo-name {
  font-family: var(--f-display);
  font-size: 21px;
  letter-spacing: 0.02em;
}
.mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  padding: 3px;
  box-shadow: 4px 4px 0 var(--sh);
  flex: none;
}
.mode-switch button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  transition: color 0.3s;
}
.mode-switch button i {
  font-style: normal;
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.mode-switch button[aria-pressed='true'] {
  color: #fff;
}
.mode-knob {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.45s var(--ease), background 0.4s;
}
[data-mode='japan'] .mode-knob {
  transform: translateX(100%);
}
.hd-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.hd-nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.hd-nav a:hover {
  background: var(--soft);
}
.hd-nav .ic {
  width: 17px;
  height: 17px;
}
.hd-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
}
.hd-stamp {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 0 12px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #141a33;
  font-family: var(--f-en);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sh);
}
.hd-menu-btn {
  display: none;
}
@media (max-width: 1180px) {
  .hd-nav {
    display: none;
  }
  .hd-menu-btn {
    display: grid;
  }
  .hd-btns {
    margin-left: auto;
  }
}
@media (max-width: 640px) {
  .hd-in {
    gap: 8px;
    padding: 7px 10px;
  }
  .logo-sub {
    display: none;
  }
  .logo-name {
    font-size: 16px;
  }
  .logo-mark {
    width: 34px;
    height: 34px;
  }
  .mode-switch button {
    padding: 5px 8px;
    font-size: 13px;
  }
  .mode-switch button i,
  .hd-btns [data-theme-toggle],
  .hd-btns [data-menu-open] {
    display: none;
  }
  .icon-btn,
  .hd-stamp {
    height: 36px;
  }
  .icon-btn {
    width: 36px;
  }
}

/* ---------- ドロワー・検索 ---------- */
.drawer,
.search {
  position: fixed;
  inset: 0;
  z-index: 300;
}
.drawer-bg,
.search-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 30, 0.45);
}
.drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--paper2);
  border-left: var(--bw) solid var(--ink);
  padding: 60px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
}
.drawer-panel a {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
}
.drawer-panel a:hover {
  background: var(--soft);
}
.drawer-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font-size: 22px;
  line-height: 1;
}
.search-panel {
  position: relative;
  max-width: 680px;
  margin: 70px auto 0;
  background: var(--paper2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--sh);
  overflow: hidden;
  width: calc(100% - 24px);
}
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
}
.search-row input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.search-row button {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
}
.search-res {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 60vh;
  overflow: auto;
}
.search-res a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}
.search-res a:hover,
.search-res a:focus {
  background: var(--soft);
}
.search-res .e {
  font-size: 26px;
}
.search-res small {
  display: block;
  color: var(--ink3);
  font-size: 12.5px;
}

/* ---------- タブバー（スマホ） ---------- */
.tabbar {
  display: none;
}
@media (max-width: 760px) {
  .tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 110;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--card);
    border: var(--bw) solid var(--ink);
    border-radius: 22px;
    box-shadow: 4px 4px 0 var(--sh);
    padding: 4px;
  }
  .tb-i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 0 3px;
    border: 0;
    background: none;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 900;
    border-radius: 14px;
  }
  .tb-ball {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -20px;
    border: var(--bw) solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    font-size: 22px;
    box-shadow: 4px 4px 0 var(--sh);
  }
  body {
    padding-bottom: 84px;
  }
  .totop {
    bottom: 96px !important;
  }
}
.totop {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--sh);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease);
  transform: translateY(10px);
}
.totop.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.totop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #141a33;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translate(-50%, 20px);
  z-index: 400;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  max-width: 90vw;
  text-align: center;
}
.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
}

/* ---------- 見出し共通 ---------- */
.sec {
  margin: 64px auto;
}
.sec-h {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.sec-h h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.35;
  margin: 0;
}
.sec-h .en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.sec-h .more {
  margin-left: auto;
}
.sec-lead {
  color: var(--ink2);
  margin: -10px 0 22px;
}
/* 見出しの直後ではなく、表やカードのあとに置いた注記は、上にすきまを空ける */
:not(.sec-h, .blk-h, h2, h3) + .sec-lead {
  margin-top: 14px;
}
.kicker {
  font-family: var(--f-en);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
}

/* ---------- トップ：ヒーロー ---------- */
.hero {
  position: relative;
  padding: 40px 0 26px;
  overflow: hidden;
}
.hero-in {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: center;
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.25;
  margin: 12px 0 14px;
}
.hero h1 .hl {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.hero h1 .hl::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 4px;
  height: 0.32em;
  background: var(--yellow);
  z-index: -1;
  border-radius: 4px;
}
.hero h1 .h1-l1 {
  white-space: nowrap;
  font-size: 0.86em;
}
.hero h1 .h1-n {
  display: inline-block;
  color: var(--accent2);
  font-size: 1.22em;
  margin-left: 0.12em;
  line-height: 1;
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(24px, 7.8vw, 32px); }
}
.hero-lead {
  font-size: 17px;
  color: var(--ink2);
  max-width: 560px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hero-stats div {
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  padding: 6px 14px;
  box-shadow: 4px 4px 0 var(--sh);
  line-height: 1.25;
}
.hero-stats b {
  font-family: var(--f-en);
  font-size: 24px;
  display: block;
}
.hero-stats small {
  font-size: 12px;
  color: var(--ink2);
  font-weight: 700;
}
.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
}
.globe {
  position: absolute;
  inset: 8%;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, #fff), var(--accent));
  box-shadow: 4px 4px 0 var(--sh);
  overflow: hidden;
}
.globe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orbit {
  position: absolute;
  font-size: clamp(30px, 4.2vw, 48px);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.25));
  will-change: transform;
}
.hero-badge {
  position: absolute;
  right: 0;
  bottom: 8%;
  background: var(--accent2);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  padding: 8px 14px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--sh);
}
@media (max-width: 860px) {
  .hero-in {
    grid-template-columns: 1fr;
  }
  .hero-art {
    max-width: 380px;
    margin: 0 auto;
    width: 80%;
  }
}

/* ---------- 速報バナー・カウントダウン ---------- */
.flash {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--yellow);
  color: #141a33;
  box-shadow: 4px 4px 0 var(--sh);
  text-decoration: none;
  overflow: hidden;
}
.flash[hidden] {
  display: none;
}
.flash-tag {
  flex: none;
  background: #e5352b;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.08em;
  animation: blink 1.2s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.55;
  }
}
.flash-e {
  font-size: 40px;
  flex: none;
}
.flash-t {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.flash-t b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 26px);
  display: block;
}
.flash-t small {
  font-weight: 700;
}
.flash-go {
  flex: none;
  font-weight: 900;
}
.flash-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/* スマホ：1行に4つ並べると本文が1文字幅になるので、上段に「速報」と「読む →」、下段に絵文字と本文。説明は2行まで */
@media (max-width: 640px) {
  .flash {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'tag tag go' 'e t t';
    gap: 8px 10px;
    padding: 12px 14px;
  }
  .flash-tag {
    grid-area: tag;
    justify-self: start;
    font-size: 12px;
  }
  .flash-go {
    grid-area: go;
    font-size: 14px;
  }
  .flash-e {
    grid-area: e;
    font-size: 34px;
    align-self: center;
  }
  .flash-t {
    grid-area: t;
  }
  .flash-t b {
    font-size: 19px;
  }
  .flash-t small:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
  }
}
.cd-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.cd {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.cd:hover {
  transform: translateY(-4px) rotate(-1deg);
}
.cd-e {
  font-size: 38px;
  flex: none;
}
.cd b {
  display: block;
  font-weight: 900;
  line-height: 1.35;
}
.cd small {
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 700;
}
.cd-n {
  position: absolute;
  top: -12px;
  right: -8px;
  background: var(--accent);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 1px 10px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 13px;
}
.cd-n.today {
  background: #e5352b;
}

/* ---------- カード（行事） ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}
.grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.hc {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  transform-style: preserve-3d;
}
.hc:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--sh);
}
.hc-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--soft), var(--soft2));
  border-bottom: var(--bw) solid var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.hc:hover .hc-img img {
  transform: scale(1.06);
}
.hc-img .ph {
  font-size: 64px;
}
.hc-e {
  position: absolute;
  left: 12px;
  bottom: -22px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
}
.hc-date {
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 900;
  font-size: 13px;
}
.hc-body {
  padding: 28px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.hc-en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.hc-t {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
}
.hc-c {
  font-size: 13.5px;
  color: var(--ink2);
  line-height: 1.6;
}
.hc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
.hc-tags span {
  font-size: 11.5px;
  font-weight: 900;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--soft);
}
.hc.mini .hc-body {
  padding: 26px 12px 12px;
}
.hc.mini .hc-t {
  font-size: 15.5px;
}
[data-region] {
  transition: opacity 0.3s;
}
[data-mode='world'] .only-japan,
[data-mode='japan'] .only-world {
  display: none !important;
}

/* 月のリスト */
.mstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.mstrip a {
  flex: none;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 4px 4px 0 var(--sh);
}
.mstrip a span {
  font-size: 26px;
}
.mstrip a.on {
  background: var(--accent);
  color: #fff;
}

/* ---------- 詳細ページ ---------- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink2);
  font-weight: 700;
}
.crumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--ink3);
}
.crumbs a {
  text-decoration: none;
}
.art-hero {
  position: relative;
  margin: 14px 0 0;
}
.art-cover {
  position: relative;
  border: var(--bw) solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--sh);
  aspect-ratio: 16 / 7.2;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.art-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-cover .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 140px;
}
.art-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 10, 25, 0.72));
}
.art-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px 30px;
  color: #fff;
}
.art-title .en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 0.04em;
  color: var(--yellow);
}
.art-title h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 52px);
  line-height: 1.25;
  margin: 2px 0 6px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.art-title .catch {
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 18px);
  margin: 0;
}
@media (max-width: 700px) {
  .art-cover {
    aspect-ratio: 4 / 4.2;
    border-radius: 22px;
  }
  .art-title {
    padding: 16px 18px;
  }
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 26px 0 0;
}
.fact {
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  padding: 12px 14px;
  box-shadow: 4px 4px 0 var(--sh);
  line-height: 1.5;
}
.fact .k {
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
  display: block;
  letter-spacing: 0.05em;
}
.fact .v {
  font-weight: 900;
  font-size: 15.5px;
}
.fact .s {
  font-size: 12.5px;
  color: var(--ink2);
  display: block;
  margin-top: 2px;
}
.fact .cd-big {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 28px;
  color: var(--accent2);
  line-height: 1.1;
}
@media (max-width: 860px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}
.dates-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  font-size: 15px;
}
.dates-tbl th,
.dates-tbl td {
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--line);
  text-align: left;
}
.dates-tbl tr:last-child td,
.dates-tbl tr:last-child th {
  border-bottom: 0;
}
.dates-tbl th {
  background: var(--soft);
  width: 90px;
  font-family: var(--f-en);
}
.dates-tbl .now td,
.dates-tbl .now th {
  background: color-mix(in srgb, var(--yellow) 45%, var(--card));
  font-weight: 900;
}
.lead-box {
  margin: 26px 0 0;
  padding: 20px 24px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  font-size: 17.5px;
  line-height: 1.95;
  position: relative;
}
.lead-box::before {
  content: 'ひとことで言うと';
  position: absolute;
  top: -14px;
  left: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  padding: 2px 12px;
  border-radius: 999px;
  border: var(--bw) solid var(--ink);
}
.art-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  margin-top: 30px;
  align-items: start;
}
.toc {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  font-size: 13.5px;
  scrollbar-width: thin;
}
.toc p {
  margin: 0 0 6px;
  font-weight: 900;
  font-family: var(--f-en);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.toc a {
  display: flex;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.45;
}
.toc a:hover,
.toc a.on {
  background: var(--soft);
}
.toc a.on {
  color: var(--accent);
}
@media (max-width: 1000px) {
  .art-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .toc {
    position: static;
    max-height: none;
    display: none;
  }
}
.toc-chips {
  display: none;
}
@media (max-width: 1000px) {
  .toc-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 18px 2px 6px;
    position: sticky;
    top: 58px;
    z-index: 50;
    background: linear-gradient(var(--paper) 75%, transparent);
    scrollbar-width: none;
  }
  .toc-chips a {
    flex: none;
  }
}
.blk {
  margin: 0 0 64px;
}
.blk-h {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.4;
  margin: 0 0 18px;
  padding-left: 54px;
}
.blk-h .n {
  position: absolute;
  left: 0;
  top: -2px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border: var(--bw) solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--sh);
}
.blk-h small {
  display: block;
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}
.prose {
  font-size: 17px;
  line-height: 2;
}
.prose h3 {
  font-size: 21px;
  font-weight: 900;
  margin: 36px 0 10px;
  line-height: 1.5;
  padding: 2px 0 2px 14px;
  border-left: 6px solid var(--accent);
}
.prose p {
  margin: 0 0 1.1em;
}
.prose strong {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--yellow) 70%, transparent) 62%);
  font-weight: 900;
}
.fig {
  margin: 22px 0 28px;
  border: var(--bw) solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--sh);
  background: var(--card);
}
.fig img {
  width: 100%;
}
.fig figcaption {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink2);
  font-weight: 700;
  border-top: var(--bw) solid var(--ink);
}
/* 年表 */
.tl {
  position: relative;
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 30px;
}
.tl::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--accent), var(--accent2));
  transform-origin: top;
  transform: scaleY(var(--line, 1));
}
.tl li {
  position: relative;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
}
.tl li::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
}
.tl b {
  font-family: var(--f-en);
  color: var(--accent);
  display: block;
  font-size: 14px;
}
/* シンボル・食べ物 */
.sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.sym {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 14px;
  box-shadow: 4px 4px 0 var(--sh);
  line-height: 1.6;
}
.sym .e {
  font-size: 40px;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.sym b {
  display: block;
  font-size: 16px;
}
.sym .en {
  font-family: var(--f-en);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.sym p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink2);
}
.say {
  border: 0;
  background: var(--soft);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  font-size: 14px;
  flex: none;
}
.say.playing {
  background: var(--accent);
  color: #fff;
}
/* 国別くらべ */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cmp {
  perspective: 900px;
  min-height: 190px;
}
.cmp-in {
  position: relative;
  height: 100%;
  min-height: 190px;
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
}
.cmp.flip .cmp-in {
  transform: rotateY(180deg);
}
.cmp-f,
.cmp-b {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 14px 16px 40px;
  box-shadow: 4px 4px 0 var(--sh);
  overflow: auto;
  font-size: 14.5px;
  line-height: 1.7;
}
.cmp-b {
  transform: rotateY(180deg);
  background: var(--soft);
  font-family: var(--f-read);
  font-size: 16px;
}
.cmp-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cmp-h .flag {
  font-size: 34px;
  line-height: 1;
}
.cmp-h b {
  font-size: 17px;
}
.cmp-h small {
  display: block;
  font-family: var(--f-en);
  color: var(--accent);
  font-weight: 600;
}
.cmp-btn {
  position: absolute;
  right: 10px;
  bottom: 8px;
  border: var(--bw) solid var(--ink);
  background: var(--yellow);
  color: #141a33;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 2px 10px;
}
.cmp-world {
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
  margin-bottom: 18px;
}
.cmp-world svg {
  width: 100%;
  height: auto;
}
/* 豆知識 */
.triv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.tv {
  position: relative;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 18px 18px 14px;
  box-shadow: 4px 4px 0 var(--sh);
}
.tv .no {
  position: absolute;
  top: -14px;
  left: 14px;
  background: var(--accent2);
  color: #fff;
  font-family: var(--f-en);
  font-weight: 700;
  padding: 0 10px;
  border-radius: 999px;
  border: var(--bw) solid var(--ink);
  font-size: 13px;
}
.tv p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
}
.tv .tv-en {
  margin-top: 8px;
  font-family: var(--f-read);
  font-size: 14.5px;
  color: var(--ink2);
  border-top: 1.5px dashed var(--line);
  padding-top: 8px;
}
.hee {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #141a33;
  padding: 2px 12px;
  font-weight: 900;
  font-size: 14px;
}
.hee b {
  font-family: var(--f-en);
}
/* 英語で読む */
.reader {
  border: var(--bw) solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
  overflow: hidden;
}
.reader-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--accent);
  color: #fff;
  border-bottom: var(--bw) solid var(--ink);
}
.reader-top h3 {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 0;
  flex: 1;
  min-width: 200px;
  line-height: 1.25;
}
.reader-top .lvl {
  background: var(--yellow);
  color: #141a33;
  border: var(--bw) solid var(--ink);
  border-radius: 8px;
  font-family: var(--f-en);
  font-weight: 700;
  padding: 0 8px;
  font-size: 13px;
}
.reader-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 2px solid var(--line);
  align-items: center;
}
.tgl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--card);
  font-weight: 900;
  font-size: 13.5px;
}
.tgl[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.rate {
  display: inline-flex;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.rate button {
  border: 0;
  background: var(--card);
  padding: 4px 10px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 13px;
}
.rate button[aria-pressed='true'] {
  background: var(--yellow);
  color: #141a33;
}
.reader-body {
  padding: 18px 22px 22px;
}
.para {
  position: relative;
  margin: 0 0 18px;
  padding: 10px 12px 10px 52px;
  border-radius: 14px;
  transition: background 0.3s;
}
.para.playing {
  background: color-mix(in srgb, var(--yellow) 30%, transparent);
}
.para .say {
  position: absolute;
  left: 8px;
  top: 12px;
  width: 34px;
  height: 34px;
}
.en-t {
  font-family: var(--f-read);
  font-size: 19px;
  line-height: 1.85;
  margin: 0;
}
.en-t .s {
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.en-t .s:hover {
  background: var(--soft);
}
.ja-t {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.8;
  border-left: 3px solid var(--accent2);
  padding-left: 10px;
}
.hide-ja .ja-t {
  display: none;
}
.en-t mark {
  background: none;
  color: inherit;
  border-bottom: 2.5px solid var(--accent2);
  font-weight: 800;
}
.wc {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink3);
}
/* 単語カード */
.vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.vc {
  perspective: 800px;
  height: 170px;
  cursor: pointer;
}
.vc-in {
  position: relative;
  height: 100%;
  transition: transform 0.55s var(--ease);
  transform-style: preserve-3d;
}
.vc.flip .vc-in {
  transform: rotateY(180deg);
}
.vc-f,
.vc-b {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--sh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vc-f {
  background: var(--card);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.vc-f b {
  font-family: var(--f-en);
  font-size: 26px;
  font-weight: 700;
}
.vc-f small {
  color: var(--ink3);
  font-weight: 700;
}
.vc-b {
  transform: rotateY(180deg);
  background: var(--soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.vc-b .ja {
  font-weight: 900;
  font-size: 17px;
}
.vc-b .ex {
  font-family: var(--f-read);
  font-size: 14px;
  margin-top: 4px;
}
.vc .say {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* 会話 */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: var(--bw) solid var(--ink);
  border-radius: 24px;
  background: var(--card);
}
.chat-set {
  font-size: 14px;
  color: var(--ink2);
  margin: 0 0 6px;
  font-weight: 700;
}
.bub {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 88%;
}
.bub.r {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.bub .av {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  font-size: 22px;
}
.bub.r .av {
  background: var(--soft2);
}
.bub .tx {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  padding: 8px 14px;
  background: var(--soft);
  position: relative;
}
.bub.r .tx {
  background: color-mix(in srgb, var(--accent2) 14%, var(--card));
}
.bub .nm {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}
.bub .en-t {
  font-size: 17px;
  line-height: 1.6;
}
.bub .ja-t {
  font-size: 13.5px;
  border: 0;
  padding: 0;
}
.bub.playing .tx {
  outline: 3px solid var(--yellow);
}
/* クイズ */
.quiz {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qz {
  border: var(--bw) solid var(--ink);
  border-radius: 20px;
  background: var(--card);
  padding: 16px 18px;
  box-shadow: 4px 4px 0 var(--sh);
}
.qz-q {
  font-family: var(--f-read);
  font-weight: 800;
  font-size: 17.5px;
  margin: 0 0 4px;
  line-height: 1.55;
}
.qz-qj {
  font-size: 13.5px;
  color: var(--ink2);
  margin: 0 0 10px;
}
.qz-ch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 640px) {
  .qz-ch {
    grid-template-columns: 1fr;
  }
}
.qz-ch button {
  text-align: left;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--paper2);
  padding: 9px 12px;
  font-family: var(--f-read);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  transition: transform 0.15s;
}
.qz-ch button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--soft);
}
.qz-ch button .k {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.qz-ch button.ok {
  background: #c9f5df;
  border-color: #0e8a5f;
  color: #0b3d2a;
}
.qz-ch button.ng {
  background: #ffd9d9;
  border-color: #c62828;
  color: #4a0e0e;
}
.qz-ex {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--soft);
  font-size: 14.5px;
  display: none;
}
.qz.done .qz-ex {
  display: block;
}
.qz-score {
  text-align: center;
  font-family: var(--f-display);
  font-size: 24px;
  padding: 16px;
  border: var(--bw) dashed var(--ink);
  border-radius: 20px;
}
/* ゲーム */
.games {
  border: var(--bw) solid var(--ink);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
  overflow: hidden;
}
.g-tabs {
  display: flex;
  gap: 6px;
  padding: 12px;
  overflow-x: auto;
  background: var(--accent2);
  border-bottom: var(--bw) solid var(--ink);
  scrollbar-width: none;
}
.g-tabs button {
  flex: none;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  padding: 6px 14px;
  font-weight: 900;
  font-size: 14px;
}
.g-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.g-tabs .gt-i.ico-img { width: 24px; height: 24px; margin: -3px 0 -3px -6px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--ink); }
.g-tabs button[aria-selected='true'] {
  background: var(--yellow);
  color: #141a33;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--sh);
}
.g-pane {
  padding: 20px;
}
.g-pane[hidden] {
  display: none;
}
.g-help {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink2);
  font-weight: 700;
}
.g-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-family: var(--f-en);
  font-weight: 700;
}
.g-bar .pill {
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 1px 12px;
  background: var(--paper2);
}
/* メモリー */
.mem {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 560px;
}
.mem button {
  aspect-ratio: 1 / 1;
  perspective: 600px;
  border: 0;
  background: none;
  padding: 0;
}
.mem .mi {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.45s var(--ease);
  transform-style: preserve-3d;
}
.mem button.open .mi,
.mem button.done .mi {
  transform: rotateY(180deg);
}
.mem .mf,
.mem .mb {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  backface-visibility: hidden;
  font-weight: 900;
}
.mem .mf {
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 8px, color-mix(in srgb, var(--accent) 80%, #fff) 8px, color-mix(in srgb, var(--accent) 80%, #fff) 16px);
  font-size: 26px;
  color: #fff;
}
.mem .mb {
  background: var(--card);
  transform: rotateY(180deg);
  font-family: var(--f-en);
  font-size: clamp(13px, 2.4vw, 18px);
  padding: 4px;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
.mem .mb.emo {
  font-size: clamp(28px, 6vw, 44px);
}
.mem button.done .mb {
  background: #c9f5df;
}
/* 単語さがし（遊ぶ） */
.ws-play {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) {
  .ws-play {
    grid-template-columns: 1fr;
  }
}
.ws-grid {
  display: grid;
  gap: 2px;
  user-select: none;
  touch-action: none;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  padding: 6px;
  background: var(--paper2);
  width: fit-content;
  max-width: 100%;
}
.ws-grid span {
  width: clamp(22px, 6.4vw, 32px);
  height: clamp(22px, 6.4vw, 32px);
  display: grid;
  place-items: center;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 18px);
  border-radius: 7px;
}
.ws-grid span.sel {
  background: var(--yellow);
  color: #141a33;
}
.ws-grid span.found {
  background: color-mix(in srgb, var(--mint) 55%, transparent);
}
.ws-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ws-list li {
  font-family: var(--f-en);
  font-weight: 700;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 0 10px;
}
.ws-list li.found {
  text-decoration: line-through;
  opacity: 0.5;
}
/* クロスワード（遊ぶ） */
.cw-play {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .cw-play {
    grid-template-columns: 1fr;
  }
}
.cw-grid {
  display: grid;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.cw-grid .c {
  position: relative;
  width: clamp(24px, 6vw, 34px);
  height: clamp(24px, 6vw, 34px);
}
.cw-grid .c.on {
  border: var(--bw) solid var(--ink);
  background: var(--card);
  margin: -0.75px;
}
.cw-grid .c sup {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
}
.cw-grid input {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 19px);
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
  caret-color: var(--accent);
}
.cw-grid input:focus {
  outline: none;
  background: color-mix(in srgb, var(--yellow) 50%, transparent);
}
.cw-grid .c.hl {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.cw-grid .c.ok input {
  color: #0e8a5f;
}
.cw-grid .c.ng input {
  color: #c62828;
}
.cw-clues {
  font-size: 14.5px;
  line-height: 1.6;
}
.cw-clues h4 {
  margin: 0 0 4px;
  font-family: var(--f-en);
  color: var(--accent);
}
.cw-clues ol {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.cw-clues li {
  padding: 3px 6px;
  border-radius: 8px;
  font-family: var(--f-read);
  cursor: pointer;
}
.cw-clues li.hl {
  background: var(--soft);
}
.cw-clues li b {
  margin-right: 6px;
}
/* 並べかえ */
.so {
  margin-bottom: 16px;
}
.so-ans {
  min-height: 52px;
  border: 2px dashed var(--ink3);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.so-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tile {
  border: var(--bw) solid var(--ink);
  border-radius: 10px;
  background: var(--yellow);
  color: #141a33;
  font-family: var(--f-read);
  font-weight: 800;
  font-size: 16px;
  padding: 4px 12px;
  box-shadow: 4px 4px 0 var(--sh);
}
.so-ans .tile {
  background: var(--card);
  color: var(--ink);
}
.so.ok .so-ans {
  border-color: #0e8a5f;
  background: #e2f8ec;
}
.so.ng .so-ans {
  border-color: #c62828;
  animation: shake 0.4s;
}
@keyframes shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
/* 穴埋め */
.cz-text {
  font-family: var(--f-read);
  font-size: 18px;
  line-height: 2.3;
}
.cz-text select {
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  border: var(--bw) solid var(--ink);
  border-radius: 8px;
  padding: 1px 4px;
  background: var(--soft);
  color: var(--ink);
  max-width: 160px;
}
.cz-text select.ok {
  background: #c9f5df;
}
.cz-text select.ng {
  background: #ffd9d9;
}
/* ○× スピード */
.tf-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  padding: 24px 18px;
  background: var(--paper2);
}
.tf-card p {
  font-family: var(--f-read);
  font-weight: 800;
  font-size: 20px;
  min-height: 3.2em;
}
.tf-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.tf-btns button {
  width: 120px;
  height: 64px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 22px;
  box-shadow: 4px 4px 0 var(--sh);
}
.tf-btns .t {
  background: #c9f5df;
  color: #0b3d2a;
}
.tf-btns .f {
  background: #ffd9d9;
  color: #4a0e0e;
}
/* ワークシート */
.ws-dl {
  border: var(--bw) solid var(--ink);
  border-radius: 26px;
  background: var(--card);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--sh);
}
.ws-how {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink2);
}
.ws-how b {
  color: var(--ink);
}
/* 各セットのページ見本（A4縦の小さな紙）。画像がまだ無いページはアイコンの見本を出す */
.ws-pages {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 6px 10px 2px;
  margin-top: 10px;
  scrollbar-width: thin;
}
.ws-pages a {
  flex: 0 0 86px;
  display: block;
  aspect-ratio: 210 / 297;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 3px 3px 0 var(--sh);
  transition: transform 0.2s var(--ease);
  color: #141a33;
  text-decoration: none;
}
.ws-pages a:hover {
  transform: translateY(-3px) rotate(-2deg);
}
.ws-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 9px 24px;
  background: repeating-linear-gradient(#fff 0 9px, #e9ecf3 9px 11px) 9px 34px / calc(100% - 18px) calc(100% - 64px) no-repeat, #fff;
}
.ws-ph em {
  font-style: normal;
  font-size: 26px;
  line-height: 1;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
}
.ws-pages img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ws-lb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 26, 51, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  padding: 3px 2px;
  line-height: 1.3;
}
.ws-list-items {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 14px;
  font-weight: 700;
}
.ws-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* 授業アイデア */
.act {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.ac {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 16px 18px;
  box-shadow: 4px 4px 0 var(--sh);
}
.ac h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.5;
}
.ac .meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ac ol {
  margin: 6px 0 0;
  padding-left: 1.3em;
  font-size: 14.5px;
  line-height: 1.75;
}
.ac .goal {
  font-size: 14px;
  color: var(--ink2);
  margin: 0;
}
/* 動画 */
.vids {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.yt {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
}
.yt-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  background: #000;
}
.yt-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.yt-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: #ff0033 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") center / 30px no-repeat;
  transition: transform 0.2s;
}
.yt-btn:hover::after {
  transform: scale(1.12);
}
.yt iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.yt p {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.yt p small {
  display: block;
  color: var(--ink3);
}
.links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.links a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
}
.links a:hover {
  background: var(--soft);
}
.links .lg {
  flex: none;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 12px;
  border-radius: 6px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  margin-top: 3px;
}
.links small {
  display: block;
  color: var(--ink2);
  font-size: 13px;
}
/* FAQ */
.faq details {
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  margin: 0 0 10px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 48px 14px 50px;
  font-weight: 900;
  position: relative;
  line-height: 1.55;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before {
  content: 'Q';
  position: absolute;
  left: 14px;
  top: 12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-en);
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 10px;
  font-size: 24px;
  transition: transform 0.3s;
}
.faq details[open] summary::after {
}
.faq .a,
.faq .faq-a {
  padding: 0 18px 14px 50px;
  font-size: 15.5px;
}
.faq .faq-a > p {
  margin: 0 0 8px;
}
.faq .faq-a > p:last-child {
  margin-bottom: 0;
}
.greet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.gr {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.gr b {
  font-family: var(--f-read);
  font-size: 18px;
  display: block;
  line-height: 1.4;
}
.gr span {
  font-size: 14px;
  font-weight: 700;
}
.gr small {
  display: block;
  color: var(--ink2);
  font-size: 12.5px;
}
.disc {
  counter-reset: d;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.disc li {
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  padding: 10px 14px 10px 50px;
  position: relative;
}
.disc li::before {
  counter-increment: d;
  content: counter(d);
  position: absolute;
  left: 12px;
  top: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent2);
  color: #fff;
  font-family: var(--f-en);
  font-weight: 700;
}
.disc .en-t {
  font-size: 16.5px;
}
.disc small {
  display: block;
  color: var(--ink2);
}
.stamp-box {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: var(--bw) dashed var(--ink);
  border-radius: 22px;
  background: var(--paper2);
}
.stamp {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px double var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.1;
  opacity: 0.25;
  transition: opacity 0.4s;
}
.stamp .e {
  font-size: 30px;
}
.stamp.got {
  opacity: 1;
}
.stamp.gold {
  border-color: var(--yellow);
  color: #b07d00;
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
}

/* ---------- カレンダー ---------- */
.cal-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 18px 0 14px;
}
.cal-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 40px);
  margin: 0;
  min-width: 220px;
  line-height: 1.2;
}
.cal-title small {
  display: block;
  font-family: var(--f-en);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.cal-nav {
  display: flex;
  gap: 6px;
}
.cal-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.seg {
  display: inline-flex;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
}
.seg button {
  border: 0;
  background: none;
  padding: 6px 12px;
  font-weight: 900;
  font-size: 13.5px;
}
.seg button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--sh);
}
.cal-grid .wd {
  padding: 8px 4px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  background: var(--soft);
  border-bottom: var(--bw) solid var(--ink);
}
.cal-grid .wd.sun,
.day.sun .dn,
.day.off .dn {
  color: #e5352b;
}
.cal-grid .wd.sat,
.day.sat .dn {
  color: #2f6bff;
}
.day.off .dn {
  color: #e5352b !important;
}
.day {
  position: relative;
  min-height: 118px;
  padding: 6px;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  text-align: left;
  background: none;
  border-top: 0;
  border-left: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.2s;
  min-width: 0;
}
.day:nth-child(7n) {
  border-right: 0;
}
.day:hover {
  background: var(--paper2);
}
.day.out {
  opacity: 0.35;
}
.day .dn {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
.day.today {
  background: color-mix(in srgb, var(--yellow) 35%, var(--card));
}
.day.today .dn::after {
  content: 'TODAY';
  margin-left: 4px;
  font-size: 9px;
  background: #e5352b;
  color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  vertical-align: middle;
}
.day.off {
  background: color-mix(in srgb, #e5352b 7%, var(--card));
}
.ev {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;
  padding: 1px 4px;
  background: var(--paper2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid var(--c, var(--accent));
}
.ev.big {
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--card));
  font-weight: 900;
}
.ev .ee {
  flex: none;
}
.ev .et {
  overflow: hidden;
  text-overflow: ellipsis;
}
.day .more {
  font-size: 11px;
  font-weight: 900;
  color: var(--ink3);
}
@media (max-width: 760px) {
  .day {
    min-height: 64px;
    padding: 3px;
  }
  .ev .et {
    display: none;
  }
  .ev {
    padding: 0;
    background: none !important;
    border: 0;
    font-size: 15px;
  }
  .day .evs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1px;
  }
  .day .dn {
    font-size: 14px;
  }
  .day.today .dn::after {
    display: none;
  }
}
/* 日付をクリックしたときの小窓（画面の真ん中に浮かぶカード。中だけスクロール） */
.cal-side {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(480px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--paper2);
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--sh);
  z-index: 310;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.96);
  transition: transform 0.3s var(--ease), opacity 0.2s, visibility 0s 0.3s;
}
.cal-side.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.2s, visibility 0s;
}
.cal-side [data-side-body] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 14px;
}
.cal-dim {
  position: fixed;
  inset: 0;
  z-index: 309;
  background: rgba(20, 20, 30, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.cal-dim.on {
  opacity: 1;
  pointer-events: auto;
}
.cal-side h2 {
  font-family: var(--f-display);
  font-weight: 400;
  margin: 0 0 12px;
  padding-right: 48px;
  font-size: 24px;
  line-height: 1.35;
}
.cal-side h2 small {
  display: block;
  font-family: var(--f-en);
  font-size: 14px;
  color: var(--accent);
}
.ev-card {
  display: block;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sh);
}
.ev-card .h {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ev-card .h .e {
  font-size: 30px;
}
.ev-card b {
  display: block;
  line-height: 1.4;
}
.ev-card .en {
  font-family: var(--f-en);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}
.ev-card p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
}
.ev-card .dEn {
  font-family: var(--f-read);
  color: var(--ink2);
  font-size: 13.5px;
}
.ev-card .go {
  display: inline-block;
  margin-top: 6px;
  font-weight: 900;
  color: var(--accent);
  font-size: 13.5px;
}
.side-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font-size: 22px;
  line-height: 1;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
}
.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.mlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.mlist > li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: start;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  padding: 10px 14px;
}
.mlist .d {
  font-family: var(--f-en);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.mlist .d b {
  display: block;
  font-size: 26px;
}
.mlist .d small {
  font-size: 11px;
  color: var(--ink3);
}
.mlist h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
}
.mlist h3 a {
  text-decoration: none;
}
.mlist h3 a:hover {
  color: var(--accent);
}
.mlist p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.7;
}
.mlist .pg {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 0 6px;
  vertical-align: middle;
}

/* 日本の祝日の表 */
.jp-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
}
.jp-tbl th,
.jp-tbl td {
  padding: 9px 12px;
  border-bottom: 1.5px solid var(--line);
  text-align: left;
  font-size: 15px;
}
.jp-tbl thead th {
  background: var(--accent);
  color: #fff;
}
.jp-tbl tr.sub td {
  color: var(--ink2);
  font-size: 14px;
  background: var(--paper2);
}
.jp-tbl tr.past td {
  opacity: 0.55;
}
.jp-tbl tr.next td {
  background: color-mix(in srgb, var(--yellow) 35%, var(--card));
  font-weight: 900;
}
.jp-tbl a {
  font-weight: 900;
}
.tblwrap {
  overflow-x: auto;
}

/* ---------- フッター ---------- */
.ft {
  position: relative;
  margin-top: 80px;
  background: var(--ink);
  color: var(--paper);
  padding: 50px 0 30px;
}
.ft-wave {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 24px;
  background: radial-gradient(circle at 12px -2px, transparent 13px, var(--ink) 14px) repeat-x;
  background-size: 24px 24px;
}
.ft a {
  color: inherit;
}
.ft-in,
.ft-owner,
.ft-copy {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.ft-in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
}
@media (max-width: 760px) {
  .ft-in {
    grid-template-columns: 1fr 1fr;
  }
  .ft-brand {
    grid-column: 1 / -1;
  }
}
.ft .logo-sub {
  color: var(--ink3);
  display: block;
}
.ft .logo-mark circle {
  stroke: var(--paper);
}
.ft-small {
  font-size: 13px;
  color: var(--ink3);
}
.ft-h {
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--yellow);
}
.ft-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14.5px;
  line-height: 2.1;
}
.ft-col a {
  text-decoration: none;
}
.ft-col a:hover {
  text-decoration: underline;
}
.ft-owner {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
}
.ft-sites {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.ft-sites a {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  text-decoration: none;
}
.ft-sites small {
  display: block;
  color: var(--ink3);
  font-size: 12px;
}
.ft-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* 原田英語の公式X */
.btn-x {
  background: #000;
  color: #fff;
  border-color: var(--paper);
  gap: 6px;
}
.btn-x small {
  font-weight: 700;
  opacity: 0.8;
}
.ft .btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.ft-copy {
  margin-top: 26px;
  font-size: 12px;
  color: var(--ink3);
}
:root[data-theme='dark'] .ft,
:root:not([data-theme='light']) .ft {
  --ft-bg: #050713;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ft {
    background: #070a1a;
    color: #eef1ff;
  }
}
:root[data-theme='dark'] .ft {
  background: #070a1a;
  color: #eef1ff;
}

/* ---------- 一覧ページ ---------- */
.pg-hero {
  padding: 30px 0 10px;
}
.pg-hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.3;
  margin: 8px 0 10px;
}
.pg-hero p {
  color: var(--ink2);
  max-width: 760px;
  font-size: 16.5px;
}
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
}
.filter-bar button {
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  padding: 5px 14px;
  font-weight: 900;
  font-size: 14px;
}
.filter-bar button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.month-blk {
  margin: 0 0 40px;
}
.month-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 14px;
  border-bottom: var(--bw) solid var(--ink);
  padding-bottom: 6px;
}
.month-h small {
  font-family: var(--f-en);
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.panel {
  border: var(--bw) solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--sh);
}
.panel h2 {
  margin-top: 0;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 760px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.big-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.bl {
  display: flex;
  gap: 14px;
  align-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 20px;
  padding: 16px;
  background: var(--card);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sh);
  transition: transform 0.2s var(--ease);
}
.bl:hover {
  transform: translate(-2px, -3px) rotate(-0.6deg);
}
.bl .e {
  font-size: 40px;
  flex: none;
}
.bl b {
  display: block;
  font-size: 17px;
  line-height: 1.4;
}
.bl small {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
  display: block;
}
.marquee {
  overflow: hidden;
  border-top: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 0;
  margin: 26px 0;
  white-space: nowrap;
  font-weight: 900;
}
.marquee-in {
  display: inline-flex;
  gap: 36px;
  animation: mq 60s linear infinite;
  padding-left: 36px;
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
.marquee span {
  font-size: 15px;
}
.marquee .en {
  font-family: var(--f-en);
  opacity: 0.85;
}

/* レッスン（英語学習コーナー） */
.lesson table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  font-size: 14.5px;
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
}
.lesson th,
.lesson td {
  border-bottom: 1.5px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.lesson th {
  background: var(--soft);
}
.lesson td:first-child {
  font-family: var(--f-read);
  font-weight: 800;
}
.ex-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 22px;
  display: grid;
  gap: 8px;
}
.ex-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  padding: 8px 12px;
  background: var(--card);
}
.ex-list .en-t {
  font-size: 17px;
}
.ex-list .ja-t {
  border: 0;
  padding: 0;
  margin: 2px 0 0;
}
.practice li {
  margin-bottom: 10px;
}
.practice details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--accent);
  font-size: 14px;
}

/* 演出 */
.rv {
  opacity: 0;
  transform: translateY(26px);
}
.no-motion .rv,
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
  }
  .marquee-in,
  .flash-tag {
    animation: none;
  }
}
@media print {
  .hd,
  .tabbar,
  .totop,
  .ft,
  .toc,
  .toc-chips,
  .games,
  .reader-tools {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== 何の日 × うなる雑学 の部品 ===== */
.sec-h .en {
  display: inline-block;
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 12px;
  margin-bottom: 8px;
}
.sec-h h2 {
  font-size: clamp(26px, 4vw, 38px);
}
.count {
  margin-left: auto;
  width: 74px;
  height: 74px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  text-align: center;
  box-shadow: 3px 3px 0 var(--sh);
}
.count small {
  display: block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 900;
}
.tile {
  display: inline-grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--t-pink);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.6;
  background: var(--card);
  white-space: nowrap;
}
.tag.star {
  background: var(--yellow);
  color: #1b1511;
}
.tag.c-pink { background: var(--t-pink); }
.tag.c-blue { background: var(--t-blue); }
.tag.c-green { background: var(--t-green); }
.tag.c-yellow { background: var(--t-yellow); }
.tag.c-purple { background: var(--t-purple); }
.hc-e {
  border-radius: 14px;
  background: var(--t-yellow);
}
.hc:nth-child(5n + 1) .hc-e { background: var(--t-pink); }
.hc:nth-child(5n + 2) .hc-e { background: var(--t-blue); }
.hc:nth-child(5n + 3) .hc-e { background: var(--t-green); }
.hc:nth-child(5n + 4) .hc-e { background: var(--t-purple); }
.hc-tags span {
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.marquee {
  background: var(--ink);
  color: var(--paper);
}
.blk-h .n {
  border-radius: 12px;
}
.ja-t,
.tv .tv-en {
  border-left: 3px solid var(--accent2);
}
.cd-e {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--t-yellow);
  font-size: 28px;
}
.cd:nth-child(4n + 2) .cd-e { background: var(--t-pink); }
.cd:nth-child(4n + 3) .cd-e { background: var(--t-blue); }
.cd:nth-child(4n + 4) .cd-e { background: var(--t-green); }
.clocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.clock {
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  padding: 8px 12px;
  box-shadow: 3px 3px 0 var(--sh);
  line-height: 1.5;
}
.clock b {
  display: block;
  font-size: 14px;
}
.clock span {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 17px;
}
.player {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: 4px 12px 4px 4px;
}
.pl-btn {
  width: 38px;
  height: 38px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font-size: 15px;
  flex: none;
}
.pl-seek {
  flex: 1;
  accent-color: var(--ink);
  min-width: 60px;
}
.pl-time {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  color: #1b1511;
}

/* ===== 余白・折り返し（横スクロールなし） ===== */
.toc-chips {
  flex-wrap: wrap !important;
  overflow: visible !important;
  position: static !important;
  background: none !important;
  gap: 8px !important;
  padding: 18px 0 4px !important;
}
.toc-chips a {
  flex: 0 1 auto !important;
  white-space: normal;
}
.mstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(66px, 74px));
  justify-content: center;
  overflow: visible;
  gap: 10px;
}
.mstrip a {
  width: auto;
}
.g-tabs {
  flex-wrap: wrap;
  overflow: visible;
}
.g-tabs button {
  flex: 0 1 auto;
}
.triv {
  gap: 34px 20px;
  padding-top: 8px;
}
.cd-row {
  gap: 26px 16px;
  padding-top: 8px;
}
.grid {
  gap: 30px 22px;
}
.sym-grid,
.cmp-grid,
.vocab,
.act,
.greet,
.vids {
  gap: 20px;
}
.chips {
  row-gap: 10px;
}
.qz + .qz {
  margin-top: 6px;
}
.cd-n {
  top: -14px;
}
/* スマホは画面の右はしで切れて右に寄って見えるので、カードの内側におさめる */
@media (max-width: 640px) {
  .cd-n {
    right: 10px;
  }
}
.tv {
  padding-top: 22px;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 国旗画像 */
.flag-i {
  display: inline-block;
  width: 1.35em;
  height: auto;
  aspect-ratio: 4 / 3;
  vertical-align: -0.18em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}
/* 国別くらべ（高さは中身に合わせる・スクロールなし） */
.cmp-grid {
  align-items: start;
}
.cmp2 {
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 16px 18px;
  box-shadow: 4px 4px 0 var(--sh);
  font-size: 15px;
  line-height: 1.8;
}
.cmp2 .cmp-h .flag .flag-i {
  width: 44px;
  vertical-align: middle;
}
.cmp2 > p {
  margin: 8px 0 0;
}
.cmp-en {
  margin-top: 10px;
}
.cmp-en summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #1b1511;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 13px;
  padding: 1px 12px;
}
.cmp-en summary::-webkit-details-marker {
  display: none;
}
.cmp-en summary::after {
  content: '＋';
}
.cmp-en[open] summary::after {
  content: '－';
}
.cmp-en p {
  margin: 10px 0 0;
  font-family: var(--f-read);
  font-size: 16px;
  line-height: 1.75;
  background: var(--soft);
  border-radius: 12px;
  padding: 10px 14px;
}
/* 線と文字の間 */
.ja-t {
  padding-left: 14px !important;
  margin-top: 10px !important;
}
.tv .tv-en {
  margin-top: 14px;
  padding: 2px 0 2px 16px;
  border-top: 0;
  border-left: 3px solid var(--accent2);
  line-height: 1.75;
}
.tv p + p {
  margin-top: 14px;
}
.tv {
  padding: 24px 20px 20px;
}
.disc li,
.links a,
.gr {
  line-height: 1.7;
}
.ws-sets { display: grid; gap: 12px; }
.ws-set { min-width: 0; border: 2px solid var(--ink); border-radius: 16px; padding: 14px 16px 6px; background: var(--paper2); }
@media (max-width: 560px) {
  .ws-dl { padding: 14px; }
  .ws-set { padding: 12px 12px 4px; }
  .ws-pages a { flex-basis: 74px; }
}
.ws-set-ans { padding-bottom: 14px; }
.ws-set-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ws-set-h > div:first-child { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.ws-set b { font-size: 16.5px; }
.ws-set b i { font-style: normal; font-size: 12px; font-weight: 900; margin-left: 8px; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); vertical-align: 2px; }
.ws-set small { color: var(--ink2); font-size: 12.5px; line-height: 1.6; }
/* おまけの超絶カラフル版：虹色のふち */
.ws-set-bonus { border: 3px solid transparent; background: linear-gradient(var(--paper2), var(--paper2)) padding-box, conic-gradient(from 30deg, #ff7a1a, #ffc92e, #19c9a0, #2f7bff, #8b3dff, #ff3d8b, #ff7a1a) border-box; }
.ws-set-bonus > .ws-set-h b { background: linear-gradient(90deg, #ff3d8b, #8b3dff 45%, #19a37b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-set-bonus > .ws-set-h b i { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ws-bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.ws-bonus-grid a { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.ws-bonus-grid img { width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 8px; background: conic-gradient(from 30deg, #ff7a1a, #ffc92e, #19c9a0, #2f7bff, #8b3dff, #ff3d8b, #ff7a1a); }
.ws-bonus-grid b { font-size: 14px; line-height: 1.35; }
@media (max-width: 420px) { .ws-bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ws-bonus-grid a { padding: 5px; } .ws-bonus-grid b { font-size: 12px; } }
.ws-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ws-pdf { font-size: 13px; font-weight: 700; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ws-pdf:hover { color: var(--ink); }

/* ===== 行事のページ分け ===== */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 6px;
  padding: 8px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--sh);
}
.subnav a {
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover {
  background: var(--soft);
}
.subnav a[aria-current='page'] {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 640px) {
  .subnav a {
    flex: 1 1 40%;
    font-size: 13.5px;
    padding: 7px 6px;
  }
}
.art-hero.small {
  margin-top: 14px;
}
.mini-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  padding: 14px;
  box-shadow: 4px 4px 0 var(--sh);
}
.mini-hero img,
.mini-hero .ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: var(--bw) solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 64px;
  background: var(--soft);
}
.mini-hero .en {
  margin: 0;
  font-family: var(--f-en);
  font-weight: 700;
  color: var(--accent);
}
.mini-hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.35;
  margin: 4px 0 6px;
}
.mini-hero .catch {
  margin: 0;
  color: var(--ink2);
  font-size: 14.5px;
}
@media (max-width: 640px) {
  .mini-hero {
    grid-template-columns: 1fr;
  }
}
.pts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px 18px;
  padding-top: 8px;
}
.pt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  padding: 22px 18px 14px;
  box-shadow: 4px 4px 0 var(--sh);
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.pt:hover {
  transform: translate(-2px, -3px);
}
.pt-n {
  position: absolute;
  top: -15px;
  left: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 10px;
  background: var(--yellow);
  font-family: var(--f-en);
  font-weight: 700;
}
.pt b {
  font-size: 16.5px;
  line-height: 1.5;
}
.pt p {
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.8;
}
.more-link {
  margin-top: auto;
  font-weight: 900;
  font-size: 13.5px;
  color: var(--accent);
}
.cmp-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.cm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  padding: 10px 12px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--sh);
  line-height: 1.45;
}
.cm .flag .flag-i {
  width: 34px;
}
.cm b {
  font-size: 15px;
}
.cm small {
  color: var(--ink2);
  font-size: 12.5px;
}
.next-pg {
  margin: 22px 0 0;
}
.en-teaser {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--sh);
}
.en-teaser h3 {
  font-family: var(--f-en);
  font-size: 24px;
  margin: 6px 0 8px;
  line-height: 1.25;
}
.en-teaser p {
  font-family: var(--f-read);
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
}
.en-teaser .lvl {
  display: inline-block;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 12px;
  padding: 0 8px;
}
.en-teaser-btns {
  display: grid;
  gap: 10px;
  align-content: center;
}
.en-teaser-btns .btn {
  justify-content: center;
}
@media (max-width: 760px) {
  .en-teaser {
    grid-template-columns: 1fr;
  }
}
.prose {
  font-size: 16.5px;
  line-height: 1.95;
}
.fact .cd-big { display: block; white-space: nowrap; font-size: 24px; }
.fact .v { word-break: keep-all; overflow-wrap: anywhere; }
.dates-tbl td, .dates-tbl th { vertical-align: middle; }

/* ===== 世界地図 ===== */
.wmap { margin: 0 0 22px; }
.wm-box { position: relative; border: var(--bw) solid var(--ink); border-radius: 20px; overflow: hidden; background: #d9ecff; box-shadow: 4px 4px 0 var(--sh); }
.wm-base { width: 100%; height: auto; display: block; }
.wm-over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wm-c { fill: var(--accent); fill-opacity: 0.55; stroke: var(--ink); stroke-width: 0.8; }
.wm-pin { cursor: pointer; }
.wm-pin-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.2s var(--ease); }
.wm-pin:hover .wm-pin-in, .wm-pin:focus .wm-pin-in { transform: scale(1.25); }
.wmap figcaption { font-size: 13px; color: var(--ink2); font-weight: 700; margin-top: 8px; }
.wmap.compact .wm-box { max-width: 760px; margin-left: auto; margin-right: auto; }
/* 国比べ（地図・国カード・ボタン）を画面の真ん中に */
.cmp-mini { grid-template-columns: repeat(auto-fit, minmax(170px, 200px)); justify-content: center; }
#compare .next-pg { text-align: center; }
@media (max-width: 640px) { .cmp-mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
:root[data-theme='dark'] .wm-box { background: #1d3150; }
.stamp-box { margin: 40px 0 64px; }
.blk + .blk, .blk + .stamp-box, .stamp-box + .blk { margin-top: 56px; }
/* 基本情報カード（見やすく） */
.facts { align-items: stretch; }
.fact { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.fact .k { align-self: flex-start; background: var(--soft); border-radius: 999px; padding: 1px 10px; color: var(--ink); font-size: 12px; }
.fact .v { font-size: 16px; line-height: 1.45; }
.fact .v.big { font-family: var(--f-display); font-weight: 400; font-size: 21px; }
.fact .s { font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.fact .s.en { font-family: var(--f-en); font-weight: 600; font-size: 14px; color: var(--accent); }
.fact .cd-big { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--accent2); line-height: 1.1; }
.where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px; }
.where > span { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.where .flag-i { width: 30px; }
.where small { font-size: 11px; font-weight: 700; line-height: 1.2; }
@media (max-width: 860px) { .fact .v.big { font-size: 18px; } }
/* 見出しフォントを疑似太字にしない（文字つぶれ防止） */
html { font-synthesis: none; }
.cal-title, .count, .month-h, .hero h1, .sec-h h2, .blk-h, .pg-hero h1, .art-title h1, .mini-hero h1, .flash-t b, .fact .v.big, .fact .cd-big { font-weight: 400; letter-spacing: 0.02em; }
.cal-title { line-height: 1.25; }
/* 世界の時計 */
.clocks { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.clock { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.cface { width: 78px; height: 78px; flex: none; }
.cbg { fill: #fffdf6; stroke: var(--ink); stroke-width: 3; }
.clock.night .cbg { fill: #1f2a4a; }
.ctk line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.clock.night .ctk line { stroke: #cfd6f5; }
.ch { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.cm { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.clock.night .ch, .clock.night .cm { stroke: #fff; }
.cs { stroke: #e5352b; stroke-width: 1.4; stroke-linecap: round; }
.cc { fill: #e5352b; }
.cinfo { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cinfo b { font-size: 14px; }
.cinfo .flag-i { width: 22px; }
.clock .ct { font-family: var(--f-en); font-weight: 700; font-size: 19px; }
.cday { align-self: flex-start; font-size: 11.5px; font-weight: 900; border-radius: 999px; padding: 0 8px; border: 1.5px solid var(--ink); }
.cday.y { background: var(--t-blue); }
.cday.n { background: var(--t-yellow); }
.cday.t { background: var(--t-pink); }
.lp-dl { display: grid; gap: 4px; border: var(--bw) solid var(--ink); border-radius: 16px; padding: 12px 16px; background: var(--t-yellow); margin-bottom: 18px; box-shadow: 3px 3px 0 var(--sh); color: #1b1511; }
.lp-dl small { color: #5a4f46; }
.lp-dl span { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lp-more { margin-top: 10px; border-top: 1.5px dashed var(--line2); padding-top: 8px; }
.lp-more summary { cursor: pointer; font-weight: 900; color: var(--accent); font-size: 14px; }
.lp-step { margin: 10px 0 0; font-size: 14px; line-height: 1.7; }
.lp-step p { margin: 2px 0 0; }
.lp-step .te { font-family: var(--f-read); color: var(--ink2); }
.lp-board-web { white-space: pre-wrap; background: #234c3a; color: #f2f6ee; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.6; margin-top: 10px; font-family: var(--f-body); }
.cg-wrap { position: relative; max-width: 640px; }
.cg { width: 100%; height: auto; border: var(--bw) solid var(--ink); border-radius: 18px; display: block; touch-action: none; background: #1f2a4a; }
.cg-pad { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cg-pad button { flex: 1; height: 54px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--yellow); font-size: 22px; box-shadow: 3px 3px 0 var(--sh); touch-action: none; }
.cg-log { min-height: 1.6em; font-weight: 700; font-size: 14px; margin: 10px 0 0; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.pick { display: flex; flex-direction: column; gap: 6px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 14px 16px; box-shadow: 4px 4px 0 var(--sh); text-decoration: none; transition: transform 0.2s var(--ease); }
.pick:hover { transform: translate(-2px, -3px); }
.pk-k { align-self: flex-start; font-size: 12px; font-weight: 900; background: var(--t-blue); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 10px; }
.pick b { font-size: 16.5px; line-height: 1.45; }
.pick p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.8; }
.quiz.hide-ja .qz-qj, .quiz.hide-ja .qz-ch small, .quiz.hide-ja .qz-ch br { display: none; }
.quiz-tools { margin: -6px 0 14px; }
/* カレンダー：長い行事名で横に広がらない */
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; max-width: 100%; }
.day, .ev, .day .evs { min-width: 0; max-width: 100%; }
.ev { width: 100%; }
.cal-top { flex-wrap: wrap; }
.cal-filter { margin-left: 0; }
@media (min-width: 900px) { .cal-filter { margin-left: auto; } }
/* カレンダーの行事：左の線をやめて、薄い色の背景に */
.ev { border-left: 0 !important; background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--card)) !important; padding: 1px 5px; border-radius: 6px; }
.ev.big { background: color-mix(in srgb, var(--c, var(--accent)) 24%, var(--card)) !important; }
.ev .span { font-size: 10px; opacity: 0.7; margin-left: 2px; }
@media (max-width: 760px) { .ev { background: none !important; padding: 0; } }
/* 時計の文字：中央・小さめ・折り返さない */
.clock { gap: 10px; }
.cface { width: 66px; height: 66px; }
.cinfo { flex: 1; min-width: 0; align-items: center; text-align: center; }
.cinfo b { font-size: 13px; white-space: nowrap; }
.clock .ct { font-size: 16px; white-space: nowrap; }
.clock .cday { align-self: center; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--f-body); font-size: 10.5px; line-height: 1.5; padding: 1px 9px; }
/* スマホ：時計は2列（1列だと縦に長くなる） */
@media (max-width: 560px) { .clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .clock { flex-direction: column; gap: 6px; padding: 10px 6px; } .cface { width: 58px; height: 58px; } }
/* 速報バナー：やさしい黄色・下の札と間をあける */
.flash { background: #fff3c4; }
.flash-more { margin-top: 18px; gap: 10px; }
.flash-more:empty { display: none; }
/* トップ：写真カードの山 */
.hero-art { position: relative; aspect-ratio: 1 / 0.92; }
.stk { position: absolute; width: 74%; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 5px 5px 0 var(--sh); overflow: hidden; text-decoration: none; transition: transform 0.35s var(--ease), z-index 0s; }
.stk img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-bottom: var(--bw) solid var(--ink); }
.stk-cap { display: flex; flex-direction: column; padding: 8px 12px 10px; line-height: 1.35; }
.stk-cap b { font-size: 16px; }
.stk-cap small { font-family: var(--f-en); color: var(--accent); font-weight: 600; }
.stk-n { position: absolute; top: 10px; right: 10px; background: var(--accent2); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 12px; font-weight: 900; font-size: 13px; }
.stk0 { left: 0; top: 4%; transform: rotate(-5deg); z-index: 3; }
.stk1 { right: 0; top: 0; transform: rotate(6deg); z-index: 2; }
.stk2 { left: 13%; bottom: 0; transform: rotate(-1deg); z-index: 1; width: 66%; }
.stk:hover { transform: rotate(0) translateY(-8px) scale(1.03); z-index: 5; }
/* 「もうすぐ！」は山全体の見出し：左上に置き、どのカードの「あと◯日」にも重ねない */
.hero-badge { z-index: 6; top: -18px; left: -10px; right: auto; bottom: auto; transform: rotate(-4deg); }
@media (max-width: 860px) { .hero-art { max-width: 460px; width: 92%; } }
.hero h1 .ch { display: inline-block; }
.spark { position: fixed; z-index: 600; pointer-events: none; font-size: 18px; }
.hc-body { padding: 14px 16px 16px; }
.hc.mini .hc-body { padding: 12px 12px 12px; }
.jc { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.jcc { display: flex; flex-direction: column; gap: 6px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 14px 16px; box-shadow: 4px 4px 0 var(--sh); }
.jcc b { font-size: 16px; line-height: 1.45; }
.jcc small { color: var(--ink2); font-size: 13px; line-height: 1.7; }
.jcc span { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.stk img { height: auto; }
.hero-art { aspect-ratio: 1 / 0.92; }

/* メッセージカード */
.msgs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-start; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); padding: 10px 12px; box-shadow: 3px 3px 0 var(--sh); }
.msg > div { flex: 1; min-width: 0; }
.msg .en-t { font-size: 17px; line-height: 1.5; font-weight: 600; }
.msg .ja-t { font-size: 13.5px; margin-top: 6px !important; }
.msg-wrap.hide-ja .ja-t { display: none; }
.use { flex: none; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-weight: 900; font-size: 12.5px; padding: 2px 10px; }
.howto { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px 18px; padding-top: 8px; }
.hw { position: relative; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 22px 18px 16px; box-shadow: 4px 4px 0 var(--sh); }
.hw b { font-size: 17px; }
.hw p { font-size: 14.5px; line-height: 1.8; margin: 8px 0 0; }
.hw .ex { font-family: var(--f-read); font-size: 17px; background: var(--soft); border-radius: 10px; padding: 8px 12px; }
.hw-n { position: absolute; top: -15px; left: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: var(--bw) solid var(--ink); border-radius: 10px; background: var(--yellow); font-family: var(--f-en); font-weight: 700; }
.maker { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; border: var(--bw) solid var(--ink); border-radius: 22px; background: var(--card); padding: 18px; box-shadow: 4px 4px 0 var(--sh); }
.mk-prev canvas { width: 100%; height: auto; border: var(--bw) solid var(--ink); border-radius: 14px; display: block; }
.mk-form { display: flex; flex-direction: column; gap: 6px; }
.mk-form label { font-weight: 900; font-size: 13.5px; margin-top: 6px; }
.mk-form input, .mk-form textarea { font: inherit; font-family: var(--f-read); font-size: 16px; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; background: var(--paper2); color: var(--ink); width: 100%; }
.mk-bgs { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-bgs button { width: 64px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; padding: 0; background: var(--card); font-size: 20px; }
.mk-bgs button[aria-pressed='true'] { outline: 3px solid var(--accent); outline-offset: 2px; }
.mk-bgs img { width: 100%; height: 100%; object-fit: cover; }
.mk-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@media (max-width: 760px) { .maker { grid-template-columns: 1fr; } .msgs { grid-template-columns: 1fr; } }

/* ゲーム：制限時間バー・音ボタン・正誤の色 */
.tbar { position: relative; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper2); overflow: hidden; margin: 6px 0 12px; --p: 100%; }
.tbar::before { content: ''; position: absolute; inset: 0; width: var(--p); background: linear-gradient(90deg, #12c29a, #ffd84d); transition: width 0.1s linear; }
.tbar.warn::before { background: #e5352b; }
.tbar::after { content: attr(data-left); position: absolute; right: 8px; top: -2px; font-size: 11px; font-weight: 900; }
.sbtn { cursor: pointer; background: var(--card); font-family: var(--f-body); font-size: 13px; }
.tf-card.ok { background: #e2f8ec; }
.tf-card.ng { background: #ffe3e3; }
.tf-j { font-size: 14px; font-weight: 600; min-height: 2.4em; color: var(--ink2); }

.gq-ja { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; }
.gq-ja[hidden] { display: none; }
.gq-ans { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 700; background: var(--t-yellow); border-radius: 10px; padding: 2px 10px; }

.card-cta { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 14px 18px; border: var(--bw) solid var(--ink); border-radius: 18px; background: #ffe6ee; box-shadow: 4px 4px 0 var(--sh); text-decoration: none; color: #1b1511; }
.card-cta .e { font-size: 36px; }
.card-cta b { display: block; font-size: 17px; }
.card-cta small { color: #5a4f46; font-size: 13px; }
.card-cta .go { margin-left: auto; font-weight: 900; white-space: nowrap; }

.fd-blk { margin: 0 0 34px; }
.fd-blk h3 { font-size: 19px; margin: 0 0 12px; }
.fd-blk h3 a { text-decoration: none; }
.fd-blk h3 small { font-family: var(--f-en); color: var(--accent); font-size: 13px; font-weight: 600; }

.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lg-c { display: flex; flex-direction: column; gap: 2px; border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--card); padding: 10px 14px; box-shadow: 3px 3px 0 var(--sh); }
.lg-c small { color: var(--accent); font-weight: 900; font-size: 12px; }
.lg-c b { font-family: var(--f-read); font-size: 18px; }
.lg-c span { font-size: 13px; color: var(--ink2); }

.zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.zd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 12px; box-shadow: 3px 3px 0 var(--sh); }
.zd-e { font-size: 44px; line-height: 1.1; }
.zd b { font-size: 17px; }
.zd .en { font-family: var(--f-en); font-weight: 700; color: var(--accent); }
.zd small { color: var(--ink3); font-size: 12px; }
.zd p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.zd-y { font-size: 11px; color: var(--ink3); margin-top: 4px; }
.zcalc { display: grid; gap: 10px; max-width: 560px; margin-left: auto; margin-right: auto; }
.zcalc > label { justify-self: center; }
.zcalc input[type=number] { font: inherit; font-size: 20px; width: 140px; margin-left: 10px; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 10px; }
.zchk { font-size: 14px; }
.zres { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px; border-radius: 14px; background: var(--t-yellow); color: #1b1511; }
.zbig { font-size: 64px; line-height: 1.1; }
.zres b { font-size: 20px; }
.zres .en { font-family: var(--f-en); font-weight: 700; font-size: 18px; }
.zres small { font-size: 12.5px; margin-top: 4px; }

/* ===== 写真サムネイルと「詳しく見る」導線（月ページ・もうすぐ） ===== */
.cd-e.cd-th { position: relative; width: 64px; height: 64px; padding: 0; overflow: visible; background: var(--card); flex: none; }
.cd-e.cd-th img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.cd-e.cd-th i { position: absolute; right: -8px; bottom: -8px; font-style: normal; font-size: 18px; line-height: 1; width: 28px; height: 28px; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--ink); border-radius: 50%; }
.mlist > li.has-pg { position: relative; border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); transition: transform .15s, box-shadow .15s; }
.mlist > li.has-pg:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent); }
.mlist > li.has-th { grid-template-columns: 84px 1fr 132px; }
.mlist .mn-a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.mlist .mn-en { font-family: var(--f-en); font-size: 13px; color: var(--accent); font-weight: 600; }
.mlist .mn-de { font-family: var(--f-read); font-size: 13.5px; }
.mlist .mn-th { align-self: center; }
.mlist .mn-th img { width: 132px; height: 88px; object-fit: cover; border-radius: 12px; border: 1.5px solid var(--ink); display: block; }
.mlist .mn-go { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 900; font-size: 14px; line-height: 1.3; }
.mlist .mn-go small { font-weight: 500; font-size: 11.5px; opacity: .9; }
.mlist .mn-go i { font-style: normal; transition: transform .15s; }
.mlist > li.has-pg:hover .mn-go i { transform: translateX(4px); }
@media (max-width: 640px) {
  .mlist > li, .mlist > li.has-th { grid-template-columns: 52px 1fr; padding: 10px 12px; }
  .mlist > li.has-th .mn-th { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; }
  .mlist .mn-th img { width: 100%; height: 120px; }
  .mlist .mn-go { display: flex; justify-content: center; }
  .cd-e.cd-th { width: 56px; height: 56px; }
}

/* ===== Codex で描いたアイコン ===== */
.ico-img { display: block; flex: none; }
.ico-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bl .e.ico-img { width: 76px; height: 76px; border-radius: 18px; overflow: hidden; border: 1.5px solid var(--ink); }
.mstrip a { height: auto; min-height: 74px; padding: 6px 4px 8px; gap: 4px; }
.mstrip a .ico-img { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; }
.mstrip a.on .ico-img { box-shadow: 0 0 0 2px #fff; }
.month-h .ico-img { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; border-radius: 8px; overflow: hidden; margin-right: 4px; }
@media (max-width: 640px) {
  .bl .e.ico-img { width: 60px; height: 60px; border-radius: 14px; }
}
.drawer-panel a { display: flex; align-items: center; gap: 12px; }
.drawer-panel .dr-i { width: 1.4em; text-align: center; flex: none; }
.drawer-panel .dr-i.ico-img { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.drawer-panel a { padding: 6px 10px; }

/* ===== 見出しが上の要素にくっつかないように（全ページ共通） ===== */
* + .blk { margin-top: 56px; }
.subnav { margin-bottom: 28px; }
.next-pg { margin-top: 30px; }
.card-cta + .blk, .card-cta + .card-cta { margin-top: 40px; }
* + .sec { margin-top: 48px; }

/* ===== 行事食 図鑑（/food/） ===== */
.fd-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fd-stats span { border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 12px; background: var(--card); font-size: 13.5px; }
.fd-stats b { font-family: var(--f-en); font-size: 17px; }
.fd-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 6px 0 22px; }
.fd-strip-i { position: relative; display: block; border: var(--bw) solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--card); text-decoration: none; box-shadow: 3px 3px 0 var(--sh); transition: transform .2s var(--ease); }
.fd-strip-i:hover { transform: translateY(-3px) rotate(-1deg); }
.fd-strip-i img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fd-strip-i span { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(255,255,255,.92); border-radius: 8px; font-size: 11.5px; font-weight: 900; text-align: center; padding: 2px 4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-ctl { position: sticky; top: 64px; z-index: 5; background: var(--bg); border: var(--bw) solid var(--ink); border-radius: 18px; padding: 12px 14px 8px; box-shadow: 4px 4px 0 var(--sh); margin-bottom: 26px; }
.fd-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fd-search { flex: 1 1 260px; display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; background: var(--card); }
.fd-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; width: 100%; color: var(--ink); }
.fd-months { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.fd-months button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; color: var(--ink); }
.fd-months button .fc-i.ico-img { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; }
.fd-months button .fc-i:not(.ico-img) { font-size: 20px; }
.fd-months button[data-m="0"] { justify-content: center; }
.fd-months button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.fd-count { margin: 8px 2px 0; font-size: 14px; color: var(--ink2); }
.fd-count b { color: var(--ink); }
.fd-mon + .fd-mon { margin-top: 44px; }
.fd-h { margin: 18px 0 30px; }
.fd-hh { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border-bottom: 2px dashed var(--line, #d8cdb8); padding-bottom: 10px; margin-bottom: 14px; }
.fd-hh img { width: 72px; height: 48px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--ink); flex: none; }
.fd-hh-e { font-size: 32px; width: 72px; text-align: center; }
.fd-hh b { display: block; font-size: 18px; line-height: 1.4; }
.fd-hh small { color: var(--ink3); font-size: 12.5px; }
.fd-go { margin-left: auto; flex: none; font-size: 13px; font-weight: 900; color: #fff; background: var(--accent); border-radius: 999px; padding: 5px 12px; }
.fd-hh:hover .fd-go { background: var(--accent2); }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.fd-c { border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: 4px 4px 0 var(--sh); display: flex; flex-direction: column; }
.fd-img { aspect-ratio: 1; background: var(--soft); display: grid; place-items: center; border-bottom: 1.5px solid var(--ink); }
.fd-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.fd-c:hover .fd-img img { transform: scale(1.05); }
.fd-emo { font-size: 64px; }
.fd-tx { padding: 10px 14px 14px; }
.fd-tx h3 { margin: 0; font-size: 16.5px; line-height: 1.4; }
.fd-en { display: block; font-family: var(--f-en); color: var(--accent); font-weight: 600; font-size: 14px; margin: 2px 0 6px; }
.fd-tx p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink2); }
.fd-empty { text-align: center; padding: 30px; color: var(--ink2); }
.fd-next { text-align: center; margin: 10px 0 30px; }
.fdq-card { text-align: center; }
.fdq-img img { width: 200px; height: 200px; object-fit: cover; border-radius: 20px; border: var(--bw) solid var(--ink); margin: 8px auto 4px; display: block; }
@media (max-width: 760px) {
  .fd-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fd-months { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .fd-ctl { position: static; }
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fd-tx { padding: 8px 10px 12px; }
  .fd-tx h3 { font-size: 15px; }
  .fd-tx p { font-size: 12.5px; }
  .fd-hh { flex-wrap: wrap; }
  .fd-go { margin-left: 0; }
  .fdq-img img { width: 160px; height: 160px; }
}

/* ===== 和訳は基本隠す（ボタンで表示） ===== */
.gr .ja-t { border-left: 0; padding-left: 0; }
.ja-zone.hide-ja .ja-t, .ja-zone.hide-ja .qz-qj { display: none; }
.ja-sw { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 14px 0 8px; }
.ja-sw small { color: var(--ink3); font-size: 13px; }
.ja-sw:has(.tgl[aria-pressed='true']) small { visibility: hidden; }
.ja-sw + .ex-list { margin-top: 0; }

/* ===== 十二支（/zodiac/） ===== */
.zd-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 4px 0 18px; }
.zd-strip a { text-decoration: none; text-align: center; font-weight: 900; font-size: 13px; color: var(--ink); }
.zd-strip .zs-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--card); transition: transform .2s var(--ease); }
.zd-strip a:hover .zs-img { transform: translateY(-3px) rotate(-4deg); }
.zgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.zd2 { border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); overflow: hidden; box-shadow: 4px 4px 0 var(--sh); display: flex; flex-direction: column; scroll-margin-top: 90px; }
.zd2-pic { position: relative; background: #fbf3e4; }
.zd2-pic .zd-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.zd2-no { position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent2); color: #fff; font-family: var(--f-en); font-weight: 700; border: 1.5px solid var(--ink); }
.zd2-tx { padding: 12px 16px 16px; }
.zd2-tx h3 { margin: 0; font-size: 21px; }
.zd2-tx h3 small { font-size: 13px; color: var(--ink3); margin-left: 6px; font-weight: 500; }
.zd2-en { margin: 2px 0 6px; font-family: var(--f-en); font-size: 20px; font-weight: 700; color: var(--accent); }
.zd2-en small { font-family: var(--f-body); font-size: 12px; color: var(--ink3); font-weight: 500; }
.zd2-tr { margin: 0 0 6px; font-size: 14px; color: var(--ink2); line-height: 1.7; }
.zd2-y { margin: 0 0 10px; font-family: var(--f-en); font-size: 13px; color: var(--ink3); }
.zd2-id { border-top: 2px dashed var(--line, #d8cdb8); padding-top: 10px; }
.zd2-id b { display: block; font-family: var(--f-en); font-size: 16px; }
.zd2-id .ja-t { display: block; font-size: 13.5px; margin-top: 4px; }
.zd2-note span { font-size: 13.5px; color: var(--ink2); line-height: 1.7; }
.race-fig { margin: 0 0 20px; border: var(--bw) solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 4px 4px 0 var(--sh); }
.race-fig img { display: block; width: 100%; height: auto; }
.race-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.race-steps li { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--card); padding: 10px 12px; }
.race-steps img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid var(--ink); }
.race-steps b { font-size: 15px; }
.race-steps p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.cat-box, .fire-box { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; margin-top: 24px; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); padding: 18px; box-shadow: 4px 4px 0 var(--sh); }
.cat-box img, .fire-box img { width: 100%; border-radius: 16px; display: block; }
.cat-box h3 { margin: 0 0 6px; }
.cat-box p, .fire-box p { margin: 0 0 10px; line-height: 1.85; font-size: 15px; }
.fire-box { margin-top: 0; }
.nz-box { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 18px; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--t-yellow); color: #1b1511; padding: 16px 18px; box-shadow: 4px 4px 0 var(--sh); }
.nz-box h3 { margin: 0 0 6px; }
.nz-box p { margin: 0 0 10px; line-height: 1.8; font-size: 15px; }
.nz-box .nz-btns { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nz-pics { display: grid; grid-template-columns: repeat(4, 76px); gap: 8px; text-decoration: none; }
.nz-pics img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1.5px solid var(--ink); background: #fff; transition: transform .2s var(--ease); }
.nz-pics:hover img { transform: translateY(-3px); }
.zres { display: flex; align-items: center; gap: 16px; }
.zbig-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: var(--bw) solid var(--ink); flex: none; }
.zres > div { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) {
  .zd-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat-box, .fire-box { grid-template-columns: 1fr; }
  .cat-box img, .fire-box img { max-width: 260px; margin: 0 auto; }
  .sheep-box { display: block; }
  .sheep-box img { float: right; width: 104px; max-width: 104px; margin: 0 0 6px 10px; border-radius: 50%; }
  .sheep-box > div::after { content: ""; display: block; clear: both; }
  .nz-box { grid-template-columns: 1fr; padding: 14px; }
  .nz-pics { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 260px; width: 100%; margin: 0 auto; }
  .zgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zd2-tx { padding: 10px 12px 12px; }
  .zd2-tx h3 { font-size: 17px; }
  .zd2-en { font-size: 16px; }
  .zbig-img { width: 90px; height: 90px; }
}
/* 画像の width/height 属性が aspect-ratio を上書きしないように */
.fd-strip-i img, .zd-strip .zs-img, .zd2-pic .zd-img, .race-fig img { height: auto; }

/* ===== メッセージカード一覧（/cards/） ===== */
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.cdc { display: flex; flex-direction: column; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 4px 4px 0 var(--sh); transition: transform .2s var(--ease); }
.cdc:hover { transform: translate(-2px, -3px) rotate(-.5deg); }
.cdc-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--soft); border-bottom: 1.5px solid var(--ink); }
.cdc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cdc-e { display: grid; place-items: center; height: 100%; font-size: 64px; }
.cdc-n { position: absolute; right: 10px; top: 10px; background: var(--accent2); color: #fff; font-weight: 900; font-size: 12.5px; border-radius: 999px; padding: 2px 10px; border: 1.5px solid var(--ink); }
.cdc-tx { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; }
.cdc-tx b { font-size: 17px; }
.cdc-tx small { font-family: var(--f-en); color: var(--accent); font-weight: 600; }
.chip-cd { display: inline-flex; align-items: center; gap: 8px; padding-left: 5px; }
.chip-cd img { width: 42px; height: 28px; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--ink); }
.cdc-ex { font-family: 'Great Vibes', var(--f-en); font-size: 22px; color: var(--ink2); margin-top: 4px; line-height: 1.2; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pr-c { display: block; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--card); text-decoration: none; color: var(--ink); font-weight: 900; font-size: 13.5px; }
.pr-c img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.pr-c span { display: block; padding: 6px 10px; }
.pr-c:hover { background: var(--soft); }
.mk-bgs img { object-fit: cover; }
@media (max-width: 640px) {
  .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cdc-tx { padding: 8px 10px 10px; }
  .cdc-tx b { font-size: 14.5px; }
  .cdc-ex { font-size: 17px; }
}
.fd-mon .month-h { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.fd-mon .month-h .ico-img { width: 1.3em; height: 1.3em; }
@media (max-width: 640px) { .fd-mon .month-h { font-size: 22px; } .fd-mon .month-h small { flex-basis: 100%; font-size: 13px; } }

/* ===== スマホを短く（全ページ）：ヘッダーを画面に収める・フッターを短く ===== */
@media (max-width: 640px) {
  .hd-in { gap: 6px; }
  .logo { flex: 0 1 auto; min-width: 0; gap: 6px; }
  .logo-text { min-width: 0; }
  .logo-name { font-size: 15px; white-space: nowrap; }
  .hd-btns { flex: none; gap: 4px; }
  .hd-btns .hd-stamp { display: none; }
  .mode-switch { box-shadow: 3px 3px 0 var(--sh); }
}
@media (max-width: 420px) {
  .logo-mark { width: 30px; height: 30px; }
  .logo-name { font-size: 14px; }
  .mode-switch button { padding: 5px 7px; font-size: 12.5px; gap: 2px; }
  .mode-switch button span { display: none; }
}
@media (max-width: 760px) {
  .ft { margin-top: 56px; padding: 34px 0 96px; }
  .ft-in { gap: 18px 14px; }
  .ft-brand p { display: none; }
  .ft-col ul { font-size: 13.5px; line-height: 1.9; }
  .ft-owner { margin-top: 18px; padding-top: 16px; font-size: 13px; }
  .ft-owner > p:not(.ft-h) { display: none; }
  .ft-sites { grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 12px; }
  .ft-sites a { padding: 7px 9px; gap: 6px; font-size: 12.5px; border-radius: 10px; }
  .ft-sites small { display: none; }
  .ft-btns .btn { font-size: 13px; padding: 7px 12px; }
  .ft-copy { margin-top: 14px; font-size: 11px; }
}

/* ===== 海外の常識（tips） ===== */
.tps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tp { position: relative; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 16px 16px 14px 16px; box-shadow: 4px 4px 0 var(--sh); }
.tp-n { position: absolute; top: -12px; left: 14px; background: #e5352b; color: #fff; font-family: var(--f-en); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 1px 10px; border: 1.5px solid var(--ink); }
.tp b { display: block; font-size: 16.5px; line-height: 1.5; margin-top: 4px; }
.tp p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.tp-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-ex span { font-family: var(--f-en); font-weight: 700; font-size: 14px; border-radius: 8px; padding: 2px 10px; }
.tp-ng { background: #fde4e1; color: #b3261e; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tp-ok { background: #dff5e9; color: #146c43; }
.tp-more { display: inline-block; margin-top: 8px; font-weight: 900; font-size: 13.5px; }
.tp-blk { margin: 0 0 40px; }
.tpfs { display: grid; gap: 12px; }
.tpf { display: flex; align-items: center; gap: 14px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 14px 16px; text-decoration: none; color: var(--ink); box-shadow: 4px 4px 0 var(--sh); }
.tpf-e { font-size: 34px; flex: none; }
.tpf b { display: block; font-size: 17px; }
.tpf small { color: var(--ink2); font-size: 13.5px; }
.tpf .go { margin-left: auto; font-weight: 900; font-size: 20px; }
.tp-answer { display: flex; gap: 14px; align-items: flex-start; border: var(--bw) solid var(--ink); border-radius: 18px; background: #fff8d6; padding: 16px 18px; margin: 10px 0 40px; box-shadow: 4px 4px 0 var(--sh); font-size: 16px; line-height: 1.85; }
.tp-a-l { flex: none; background: var(--ink); color: #fff; font-weight: 900; border-radius: 8px; padding: 2px 10px; font-size: 14px; }
.ex-list li.ex-ng .en-t { text-decoration: line-through; color: #b3261e; }
.ex-list li.ex-ng > span { color: #b3261e; font-weight: 900; }
.ex-list li.ex-ok > span { color: #146c43; font-weight: 900; }
.h1-i.ico-img { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; border-radius: 10px; overflow: hidden; }
@media (max-width: 640px) { .tps { grid-template-columns: 1fr; } }

/* ===== スマホを短く（全ページ）：カード2列・リストをつめる・横スクロールをなくす・切れをなくす ===== */
@media (max-width: 640px) {
  .sec { margin: 40px auto; }
  .blk { margin-bottom: 44px; }
  .grid, .grid-sm { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hc { border-radius: 14px; box-shadow: 3px 3px 0 var(--sh); }
  .hc-img { aspect-ratio: 3 / 2; }
  .hc-body, .hc.mini .hc-body { padding: 7px 9px 9px; gap: 1px; }
  .hc-en { font-size: 10.5px; line-height: 1.3; overflow-wrap: anywhere; }
  .hc-t, .hc.mini .hc-t { font-size: 14px; line-height: 1.35; }
  .hc-c, .hc-tags { display: none; }
  .hc-date { font-size: 11px; padding: 0 6px; top: 6px; right: 6px; border-width: 2px; }
  .mlist { gap: 8px; }
  .mlist > li { grid-template-columns: 50px 1fr; gap: 8px; padding: 8px 10px; border-radius: 12px; }
  .mlist .d b { font-size: 20px; }
  .mlist h3 { font-size: 15px; }
  .mlist p { font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .chip { white-space: normal; max-width: 100%; }
  .hero-in > * { min-width: 0; }
  .hero .chip { font-size: 11px; }
  /* 横スクロールをやめて折り返す */
  .mstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; overflow: visible; padding-bottom: 6px; }
  .mstrip a { width: auto; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--sh); }
  .mstrip a span, .mstrip a img { font-size: 18px; max-width: 60%; height: auto; }
  .mstrip a { min-height: 0; aspect-ratio: auto; padding: 4px 2px 5px; gap: 2px; }
  .mstrip a .ico-img { width: 36px; height: 36px; border-radius: 9px; max-width: none; }
  .toc-chips { flex-wrap: wrap; overflow: visible; position: static; background: none; gap: 6px; }
  .g-tabs { flex-wrap: wrap; overflow: visible; }
  .ws-pages { flex-wrap: wrap; overflow: visible; }
  .ws-pages a { flex: 0 0 calc(25% - 8px); }
  .jp-tbl th, .jp-tbl td { padding: 7px 8px; font-size: 13px; }
  .jp-tbl td:first-child { white-space: normal !important; }
  .pp-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 10px !important; }
  .pp .stamp { width: 72px !important; height: 72px !important; }
}
/* 長いブロックをたたむ（app.js の「スマホ：長いブロックをたたむ」） */
.mfold { position: relative; max-height: var(--mf, 900px); overflow: hidden; }
.mfold::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(rgba(255, 248, 236, 0), var(--paper) 72%); pointer-events: none; }
.mfold-btn { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; white-space: nowrap; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--yellow); color: #1b1511; font: inherit; font-weight: 900; font-size: 14.5px; padding: 9px 20px; box-shadow: 3px 3px 0 var(--sh); cursor: pointer; }
@media print { .mfold { max-height: none; overflow: visible; } .mfold::after, .mfold-btn { display: none; } }

/* ===== 画像の縦伸びを防ぐ（width だけ 100% にすると height 属性のまま伸びる） ===== */
img { height: auto; }
/* スマホ：月ごとのブロックをアコーディオンに（app.js） */
.macc > .month-h { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.macc > .month-h::after { content: '▾'; margin-left: auto; font-size: 20px; transition: transform 0.2s; }
.macc.shut > .month-h::after { transform: rotate(-90deg); }
.macc.shut > :not(.month-h) { display: none; }
.macc.shut { margin-bottom: 8px; }
.macc-n { font-family: var(--f-en); font-size: 13px; font-weight: 800; background: var(--soft); border-radius: 999px; padding: 1px 10px; }
@media (max-width: 640px) {
  .card-cta { flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
  .card-cta .e { font-size: 28px; }
  .card-cta > span:not(.e):not(.go) { flex: 1 1 200px; min-width: 0; }
  .card-cta .go { margin-left: auto; }
}

/* ===== 音声ページ（/<slug>/listen/） ===== */
.ls { border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); padding: 18px 18px 14px; margin: 0 0 26px; box-shadow: 4px 4px 0 var(--sh); scroll-margin-top: 80px; }
.ls-k { display: inline-block; font-family: var(--f-en); font-weight: 700; font-size: 13px; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 12px; }
.ls h2 { font-family: var(--f-en); font-size: 22px; margin: 8px 0 10px; line-height: 1.35; }
.ls-set { font-size: 14px; color: var(--ink2); margin: 0 0 10px; font-family: var(--f-read); }
.ls-pl { transform: scale(1.06); transform-origin: left center; margin: 8px 0 12px; }
.ls-pl .pl-btn { width: 60px; height: 60px; font-size: 24px; }
.ls-tx p { font-family: var(--f-read); font-size: 16px; line-height: 1.85; margin: 0 0 10px; }
.ls-tx.hide-ja .ja-t { display: none; }
.ls-pl { transform: none; max-width: 100%; box-sizing: border-box; }

/* ===== 誕生日コーナー（/birthday/） ===== */
.bd-fig { margin: 16px 0 10px; border: var(--bw) solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 4px 4px 0 var(--sh); }
.bd-fig img { display: block; width: 100%; height: auto; }
.bdw { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.bdw-c { border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); overflow: hidden; box-shadow: 4px 4px 0 var(--sh); scroll-margin-top: 90px; }
.bdw-c > img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-bottom: 1.5px solid var(--ink); }
.bdw-tx { padding: 12px 16px 16px; }
.bdw-k { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; font-weight: 900; color: var(--accent); }
.bdw-k .flag-i { width: 36px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.bdw-tx h3 { margin: 4px 0 6px; font-size: 18px; line-height: 1.45; }
.bdw-tx p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.bdw-tx .bdw-en { margin-top: 8px; font-family: var(--f-read); font-size: 14px; color: var(--ink); border-left: 3px solid var(--accent2); padding-left: 8px; }
.bdw-vd { margin-top: 10px; }
.bdw-vd summary { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; font-weight: 900; font-size: 13.5px; color: var(--accent); list-style: none; }
.bdw-vd summary::-webkit-details-marker { display: none; }
.bdw-vd summary small { font-weight: 700; font-size: 11.5px; color: var(--ink3); }
.bdw-vd .bdw-yt { margin-top: 8px; }
.bdw-tx .bdw-yt p { font-size: 13px; }
.bdw-tx .more-link { display: inline-block; margin-top: 10px; }
.bdm { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bdm li { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--card); padding: 12px 14px; }
.bdm-age { flex: none; width: 74px; text-align: center; font-family: var(--f-display); font-size: 26px; line-height: 1.1; color: var(--accent2); }
.bdm-age small { font-size: 13px; }
.bdm b { font-size: 16px; }
.bdm li > div > small { display: block; color: var(--ink3); font-size: 12.5px; }
.bdm p { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.bd-h3 { font-size: 18px; margin: 18px 0 10px; }
.bd-note { display: block; color: var(--ink3); font-size: 12.5px; margin-top: 2px; }
.bd-src { margin: 30px 0; font-size: 13px; }
.bd-src summary { cursor: pointer; font-weight: 900; }
.bd-src ul { columns: 2; font-size: 12px; }
@media (max-width: 640px) { .bdw { grid-template-columns: 1fr; } .bdm-age { width: 54px; font-size: 21px; } .bd-src ul { columns: 1; } }

/* ===== スマホ：行事のページを見出しカードのアコーディオンに（app.js「行事のページ」） ===== */
@media (max-width: 760px) {
  .sacc > .blk-h { cursor: pointer; padding-right: 30px; }
  .sacc > .blk-h::after { content: '▾'; position: absolute; right: 2px; top: 50%; translate: 0 -50%; font-family: var(--f-body); font-size: 20px; transition: rotate 0.2s; }
  .sacc.shut > .blk-h::after { rotate: -90deg; }
  .sacc-t { display: none; }
  .sacc.shut { margin: 0 0 12px; padding: 12px 14px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 3px 3px 0 var(--sh); }
  .sacc.shut > :not(.blk-h):not(.sacc-t) { display: none !important; }
  .sacc.shut > .blk-h { font-size: 16.5px; line-height: 1.4; margin: 0; padding-left: 44px; min-height: 34px; }
  .sacc.shut > .blk-h .n { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; box-shadow: 2px 2px 0 var(--sh); top: 0; }
  .sacc.shut > .blk-h small { font-size: 10.5px; letter-spacing: 0.08em; }
  .sacc.shut > .sacc-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink2); font-family: var(--f-body); font-weight: 500; }
  .sacc-on > .sacc:not(.shut) { margin-bottom: 30px; }
  /* 見出しカードの列にはさまる Kahoot! の入口も、カードと同じ 12px のすき間で */
  .sacc-on > .kh-promo { margin: 0 0 12px; }
}
@media (max-width: 640px) {
  .subnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; margin: 14px 0 4px; border-radius: 14px; }
  .subnav a { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; border-radius: 10px; min-width: 0; }
  .subnav a i { font-style: normal; font-size: 17px; }
  .subnav { margin-bottom: 18px; }
  .facts { gap: 8px; margin-top: 16px; }
  .fact { padding: 8px 10px; border-radius: 12px; box-shadow: 3px 3px 0 var(--sh); }
  .fact .v { font-size: 14px; }
  .fact .s { font-size: 11.5px; }
  .fact .cd-big { font-size: 22px; }
  .lead-box { margin-top: 22px; padding: 16px 14px 14px; font-size: 15px; line-height: 1.8; }
}
@media (max-width: 640px) {
  .where { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 4px; }
  .where small { font-size: 10.5px; overflow-wrap: anywhere; }
  .where .flag-i { width: 26px; }
}

/* ゲーム：画面（盤面・説明・ボタン）を枠の真ん中に */
.g-pane .g-help { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.g-tabs, .g-pane .g-bar { justify-content: center; }
.cg-wrap { margin-left: auto; margin-right: auto; }
.cg-log { text-align: center; }
.mem { margin-left: auto; margin-right: auto; }
.ws-play { grid-template-columns: auto minmax(0, 360px); justify-content: center; }
.cw-play { grid-template-columns: auto minmax(0, 400px); justify-content: center; }
.ws-grid, .cw-grid { margin-left: auto; margin-right: auto; }
.so { max-width: 720px; margin-left: auto; margin-right: auto; }
[data-gpane='cz'] { text-align: center; }
.cz-text { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
@media (max-width: 760px) { .ws-play { grid-template-columns: 1fr; } .ws-list { justify-content: center; } }
@media (max-width: 860px) { .cw-play { grid-template-columns: 1fr; } }

/* ===== コーナーページのタブ（data-ctabs） ===== */
.ctab-nav { position: sticky; top: 62px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; margin: 10px 0 26px; background: var(--bg); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--sh); }
.ctab-nav button { font: inherit; font-weight: 900; font-size: 14px; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .15s, transform .15s; }
.ctab-nav button:hover { transform: translateY(-1px); background: var(--soft); }
.ctab-nav button[aria-selected="true"] { background: var(--accent); color: #fff; }
[data-ctabs] > section[data-tab], [data-ctabs] section[data-tab] { margin-top: 0; scroll-margin-top: 140px; }
.ct-next { text-align: center; margin: 34px 0 10px; }
.ct-more { text-align: center; margin: 18px 0 6px; }
@media (max-width: 760px) {
  /* スマホ：長さバラバラの丸ボタンがガタガタに並ぶので、2列の同じ幅にそろえる（奇数のときは最後を横いっぱい） */
  .ctab-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
  .ctab-nav button { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 38px; font-size: 12.5px; line-height: 1.3; padding: 5px 8px; border-radius: 12px; }
  .ctab-nav button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.lg.ico-img { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex: none; padding: 0; background: none; border: 1.5px solid var(--ink); }
.bd-fig img { max-height: 360px; object-fit: cover; }

/* ===== 日付の表（dates-tbl）：スマホでは1行を「年｜日本語の日付／英語の日付／US・UK式」に折り返す（期間のある行事で横にはみ出さない） ===== */
@media (max-width: 640px) {
  .dates-tbl, .dates-tbl tbody { display: block; }
  .dates-tbl tr { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-bottom: 1.5px solid var(--line); }
  .dates-tbl tr:last-child { border-bottom: 0; }
  .dates-tbl th { width: auto; grid-row: 1 / span 3; display: flex; align-items: center; padding: 8px 10px; }
  .dates-tbl td { grid-column: 2; border-bottom: 0; padding: 2px 10px; overflow-wrap: anywhere; }
  .dates-tbl td:nth-of-type(1) { padding-top: 8px; }
  .dates-tbl td:last-child { padding-bottom: 8px; }
  .dates-tbl td.usuk { white-space: normal !important; }
  .dates-tbl td.usuk br { display: none; }
  .dates-tbl td.usuk img:last-of-type { margin-left: 10px; }
}

/* ===== 特集への入口カード（トップ・行事ページ。特集ページ本体は feature.css） ===== */
.fe-promos { display: grid; gap: 12px; }
.fe-promo { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 14px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 10px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.fe-promo img, .fe-promo .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 40px; background: var(--soft); }
.fe-promo small { display: inline-block; font-weight: 900; font-size: 12px; background: var(--accent2); color: #fff; border-radius: 999px; padding: 1px 10px; }
.fe-promo b { display: block; font-size: 17px; margin: 4px 0 2px; }
.fe-promo em { font-style: normal; color: var(--ink2); font-size: 13.5px; }
.fe-promo .go { font-weight: 900; font-size: 20px; padding-right: 6px; }

@media (max-width: 640px) {
  .fe-promo { grid-template-columns: 96px 1fr; }
  .fe-promo .go { display: none; }
}

/* ===== はじめての方へ（トップの入口・/guide/） ===== */
.wakaba { display: block; flex: none; width: 24px; height: 29px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.25)); }
.newbie { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 18px; padding: 8px 14px 8px 12px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--sh); transition: transform 0.2s var(--ease); }
.newbie:hover { transform: translate(-1px, -2px); }
.newbie .wakaba { width: 26px; height: 31px; }
.newbie b { display: block; font-size: 15.5px; line-height: 1.35; }
.newbie small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink2); font-weight: 700; }
.newbie i { font-style: normal; font-weight: 900; font-size: 18px; margin-left: auto; padding-left: 4px; }
.gd-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 5px 16px 5px 10px; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 900; font-size: 15px; box-shadow: 3px 3px 0 var(--sh); color: var(--ink); }
.gd-hero h1 br.sp { display: none; }
.gd .gd-sec { margin: 44px auto; }
.gd-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gd-steps li { display: flex; gap: 12px; align-items: flex-start; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 14px; box-shadow: 4px 4px 0 var(--sh); }
.gd-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--yellow); color: #1b1511; font-family: var(--f-en); font-weight: 700; font-size: 22px; }
.gd-steps b { display: block; font-size: 18px; line-height: 1.35; }
.gd-steps small { display: block; color: var(--ink2); font-size: 13.5px; line-height: 1.6; }
.gd-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gd-go a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 900; color: var(--ink); background: var(--soft); text-decoration: none; }
.gd-five { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gd-five a { display: flex; flex-direction: column; gap: 8px; height: 100%; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); padding: 12px; color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--sh); transition: transform 0.2s var(--ease); }
.gd-five a:hover { transform: translate(-2px, -3px); }
.gd-five .e { font-size: 34px; }
.gd-five .e.ico-img { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--ink); }
.gd-five b { display: block; font-size: 16px; line-height: 1.35; }
.gd-five small { display: block; color: var(--ink2); font-size: 12.5px; line-height: 1.55; }
.gd-th { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.4; margin: 0 0 14px; }
.gd-th small { display: block; font-family: var(--f-en); color: var(--accent); font-size: 13px; letter-spacing: 0.08em; }
button.bl { font: inherit; color: var(--ink); text-align: left; width: 100%; cursor: pointer; }
.gd-faq details { border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--card); padding: 10px 14px; margin: 0 0 10px; }
.gd-faq summary { font-weight: 900; cursor: pointer; }
.gd-faq p { margin: 8px 0 2px; color: var(--ink2); font-size: 14.5px; }
.gd-start { text-align: center; }
.gd-start h2 { font-family: var(--f-display); font-weight: 400; margin: 0; }
.gd-start .hero-cta { justify-content: center; }
@media (max-width: 1000px) {
  .gd-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gd-steps { grid-template-columns: 1fr; gap: 10px; }
  .gd-steps li { padding: 10px 12px; }
  .gd-n { width: 34px; height: 34px; font-size: 18px; }
  .gd-steps b { font-size: 16px; }
  .gd-five { grid-template-columns: 1fr; gap: 8px; }
  .gd-five a { flex-direction: row; align-items: center; padding: 8px 10px; gap: 10px; box-shadow: 3px 3px 0 var(--sh); border-radius: 14px; }
  .gd-five .e.ico-img { width: 48px; height: 48px; border-radius: 10px; }
  .gd-five b { font-size: 15px; }
  .gd .gd-sec { margin: 30px auto; }
  .gd-hero h1 br.sp { display: inline; }
}
@media (max-width: 640px) {
  .newbie { margin-top: 14px; padding: 7px 12px 7px 10px; gap: 10px; }
  .newbie small { font-size: 11.5px; }
}
@media (max-width: 760px) {
  .gd-bl { gap: 8px; }
  .gd-bl .bl { padding: 8px 10px; gap: 10px; border-radius: 14px; box-shadow: 3px 3px 0 var(--sh); }
  .gd-bl .bl .e.ico-img { width: 48px; height: 48px; border-radius: 10px; }
  .gd-bl .bl b { font-size: 15px; }
  .gd-bl .bl small { font-size: 12px; line-height: 1.5; }
  .gd-th { font-size: 18px; margin-bottom: 10px; }
}
/* 先生のページ：Kahoot! のある行事 */
.chip-kh {
  background: #46178f;
  color: #fff;
  border-color: #46178f;
  font-size: 12px;
  margin-left: -4px;
}
/* 行事ページ：Kahoot! 問題集への入口 */
.kh-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 860px;
  margin: 22px auto 0;
  padding: 14px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: #46178f;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s var(--ease);
}
.kh-promo:hover {
  transform: translate(-2px, -2px);
}
.kh-promo-i {
  font-size: 32px;
  flex: none;
}
.kh-promo b {
  display: block;
  font-size: 17px;
}
.kh-promo small {
  display: block;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.55;
}
.kh-promo-go {
  margin-left: auto;
  flex: none;
  font-weight: 900;
  background: #fff;
  color: #46178f;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
}
@media (max-width: 560px) {
  .kh-promo {
    padding: 12px 14px;
    gap: 10px;
  }
  .kh-promo-go {
    display: none;
  }
}

/* ===== 疑問BEST100（/gimon/） ===== */
.gm-how { margin-top: 8px; color: var(--ink2); }
.gm-cdesc { margin: 0 0 14px; color: var(--ink2); font-size: 14.5px; }
.gm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gm-row { display: flex; align-items: center; gap: 12px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); padding: 10px 14px; text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--sh); transition: transform .15s; }
.gm-row:hover { transform: translate(-1px, -1px); }
.gm-rk { flex: none; min-width: 64px; text-align: center; font-family: var(--f-en); font-weight: 700; font-size: 22px; line-height: 1; }
.gm-rk small { font-family: var(--f-jp, inherit); font-size: 11px; font-weight: 700; }
.gm-q { min-width: 0; flex: 1; }
.gm-q b { display: block; font-size: 16px; line-height: 1.5; }
.gm-q small { display: block; color: var(--ink2); font-size: 13px; line-height: 1.6; margin-top: 2px; }
.gm-cat { flex: none; font-size: 20px; }
.gm-top1 { background: #fff3b8; }
.gm-top2 { background: #eef1f6; }
.gm-top3 { background: #fbe6d4; }
.gm-top .gm-rk { font-size: 28px; }
.gm-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 10px 0 40px; }
.gm-pn a { border: var(--bw) solid var(--ink); border-radius: 14px; padding: 10px 12px; text-decoration: none; color: var(--ink); background: var(--card); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.gm-pn a small { display: block; color: var(--ink2); font-weight: 700; }
.gm-pn a:last-child { text-align: right; }
.gm-pn .gm-pn-hub { align-self: center; background: var(--ink); color: #fff; white-space: nowrap; }
.gm-src ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .gm-row { gap: 8px; padding: 9px 10px; border-radius: 14px; }
  .gm-rk { min-width: 46px; font-size: 18px; }
  .gm-top .gm-rk { font-size: 22px; }
  .gm-q b { font-size: 14.5px; }
  .gm-q small { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gm-cat { display: none; }
  .gm-pn { grid-template-columns: 1fr 1fr; }
  .gm-pn .gm-pn-hub { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}
.gm-sec > summary, .gm-src > summary { list-style: none; cursor: pointer; }
.gm-sec > summary::-webkit-details-marker, .gm-src > summary::-webkit-details-marker { display: none; }
.gm-sec > summary .blk-h, .gm-src > summary .blk-h { position: relative; padding-right: 34px; }
.gm-sec > summary .blk-h::after, .gm-src > summary .blk-h::after { content: '＋'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 900; color: var(--ink2); }
.gm-sec[open] > summary .blk-h::after, .gm-src[open] > summary .blk-h::after { content: '－'; }
@media (max-width: 640px) {
  .gm-sec { margin-bottom: 14px; border-bottom: 1.5px dashed var(--line, #d9d2c3); padding-bottom: 6px; }
  .gm-sec > summary .blk-h { margin-bottom: 6px; }
  .tp-answer { flex-direction: column; gap: 8px; padding: 14px 15px; font-size: 15.5px; }
}
@media (max-width: 640px) {
  .gm-hub .pg-hero p { font-size: 14.5px; line-height: 1.8; }
  .gm-hub .gm-how { font-size: 12px; line-height: 1.6; }
  .gm-hub .ctab-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; margin-bottom: 16px; }
  .gm-hub .ctab-nav button { min-height: 34px; font-size: 11.5px; padding: 4px 4px; }
  .gm-hub .ctab-nav button:last-child:nth-child(odd) { grid-column: auto; }
}

/* ===== トップ：有名な行事を目立たせる・マイナーな「今日は」は控えめ（2026-10-13） ===== */
/* 今日が有名な行事でない日は、速報を小さな白い札に（点滅なし・説明なし） */
.flash.is-minor { background: var(--card); padding: 9px 14px; gap: 10px; border-width: 2px; box-shadow: 3px 3px 0 var(--sh); }
.flash.is-minor .flash-tag { background: var(--soft); color: var(--ink); animation: none; font-size: 12px; letter-spacing: 0.04em; }
.flash.is-minor .flash-e { font-size: 24px; }
.flash.is-minor .flash-t b { font-family: var(--f-body); font-weight: 800; font-size: 15.5px; letter-spacing: 0; }
.flash.is-minor .flash-t small:last-child { display: none; }
.flash.is-minor .flash-go { font-size: 13px; color: var(--ink2); }
.flash.is-minor + .flash-more { margin-top: 10px; gap: 6px; }
.flash.is-minor + .flash-more .chip { font-size: 12.5px; padding: 3px 10px; }

/* スマホ：見出し → 有名行事の写真カード → 説明 → ボタンの順。カードは重ねず「大1枚＋小2枚」 */
@media (max-width: 640px) {
  .page-top .hero { padding: 14px 0 6px; }
  .page-top .hero-in { display: flex; flex-direction: column; gap: 0; }
  .page-top .hero-in > div:first-child { display: contents; }
  .page-top .hero .chip { display: none; }
  .page-top .hero h1 { order: 1; margin: 2px 0 12px; }
  .page-top .hero-art { order: 2; aspect-ratio: auto; width: 100%; max-width: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-top .hero-lead { order: 3; font-size: 14px; line-height: 1.8; margin: 14px 0 0; }
  .page-top .hero-cta { order: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
  .page-top .hero-cta .btn { justify-content: center; text-align: center; gap: 4px; padding: 9px 2px; font-size: clamp(12px, 3.5vw, 13.5px); line-height: 1.3; white-space: nowrap; box-shadow: 3px 3px 0 var(--sh); }
  .page-top .pc-w { display: none; }
  .page-top .newbie { order: 5; }
  .page-top .stk { position: relative; inset: auto; width: auto; transform: none; z-index: auto; border-radius: 14px; box-shadow: 3px 3px 0 var(--sh); }
  .page-top .stk:hover { transform: none; }
  .page-top .stk0 { grid-column: 1 / -1; }
  .page-top .stk0 img { aspect-ratio: 16 / 9; }
  .page-top .stk-cap { padding: 6px 10px 8px; min-width: 0; }
  .page-top .stk-cap b, .page-top .stk-cap small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-top .stk0 .stk-cap b { font-size: 17px; }
  .page-top .stk1 .stk-cap b, .page-top .stk2 .stk-cap b { font-size: 13.5px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .page-top .stk1 .stk-cap small, .page-top .stk2 .stk-cap small { font-size: 11px; }
  .page-top .stk-n { top: 8px; right: 8px; font-size: 13px; }
  .page-top .stk1 .stk-n, .page-top .stk2 .stk-n { top: 6px; right: 6px; font-size: 11px; padding: 0 8px; }
  /* 控えめな「今日は」は1行に（ラベルは消して、絵文字・本文・読む→） */
  .flash.is-minor { grid-template-areas: 'e t go'; padding: 8px 12px; }
  .flash.is-minor .flash-tag { display: none; }
  .flash.is-minor .flash-t b { font-size: 14.5px; line-height: 1.4; }
  .flash.is-minor .flash-t small { font-size: 11.5px; }
  .flash.is-minor .flash-go { align-self: center; font-size: 12px; }
  .page-top .hero-badge { order: -1; grid-column: 1 / -1; justify-self: start; position: static; transform: none; padding: 2px 14px; font-size: 14px; border-radius: 999px; box-shadow: 3px 3px 0 var(--sh); }
}