/* =========================================
   えんデビ！ 公式サイト スタイル
   和テイスト × かわいいポップ（レトロポップ）
   ========================================= */
:root {
  color-scheme: light;
  --paper: #fff8ec;       /* きなり */
  --paper-2: #fdecd3;
  --ink: #3a2a24;         /* すみ（線・文字） */
  --ink-2: #6e5a50;
  --shu: #e8553d;         /* しゅ */
  --sakura: #f7a8b8;      /* さくら */
  --yamabuki: #f5bd3a;    /* やまぶき */
  --matcha: #8fb85a;      /* まっちゃ */
  --ai: #3c5a92;          /* あい */
  --white: #ffffff;
  --border: 3px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --radius: 22px;
  --font-pop: "Mochiy Pop One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;

  /* 市松模様（うっすら） */
  --ichimatsu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect width='16' height='16' fill='%233a2a24' fill-opacity='0.035'/><rect x='16' y='16' width='16' height='16' fill='%233a2a24' fill-opacity='0.035'/></svg>");
  /* 七宝（うっすら） */
  --shippo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%23e8553d' stroke-opacity='0.13' stroke-width='2'><circle cx='24' cy='24' r='17'/><circle cx='0' cy='0' r='17'/><circle cx='48' cy='0' r='17'/><circle cx='0' cy='48' r='17'/><circle cx='48' cy='48' r='17'/></g></svg>");
  /* 青海波（帯用） */
  --seigaiha: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'><g fill='%23fff8ec' stroke='%233a2a24' stroke-width='1.6'><circle cx='0' cy='20' r='18'/><circle cx='0' cy='20' r='12'/><circle cx='0' cy='20' r='6'/><circle cx='40' cy='20' r='18'/><circle cx='40' cy='20' r='12'/><circle cx='40' cy='20' r='6'/><circle cx='20' cy='20' r='18'/><circle cx='20' cy='20' r='12'/><circle cx='20' cy='20' r='6'/></g></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--paper) var(--ichimatsu);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; color: inherit; }
body.kids { letter-spacing: 0.03em; word-break: keep-all; overflow-wrap: anywhere; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--border);
}
.header .container { display: flex; align-items: center; gap: 16px; height: 68px; }
.logo {
  font-family: var(--font-pop); font-size: 1.55rem; text-decoration: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.logo .logo-mark {
  width: 38px; height: 38px; border: var(--border); border-radius: 50%;
  background: var(--shu); display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink);
}
.logo .logo-mark svg { width: 24px; height: 24px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  text-decoration: none; font-weight: 700; font-size: 0.92rem;
  padding: 6px 12px; border-radius: 99px; border: 2px solid transparent;
}
.nav a:hover { border-color: var(--ink); background: var(--white); }
.langs { display: flex; gap: 4px; }
.langs a {
  text-decoration: none; font-size: 0.78rem; font-weight: 700;
  padding: 3px 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white);
}
.langs a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.menu-btn {
  display: none; margin-left: auto; border: var(--border); background: var(--yamabuki);
  border-radius: 12px; padding: 4px 12px; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
}
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0; margin: 0;
    flex-direction: column; background: var(--paper); border-bottom: var(--border); padding: 8px 16px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px; border-bottom: 2px dashed rgba(58,42,36,.2); border-radius: 0; }
  .langs { order: 3; }
}
@media (max-width: 560px) {
  .header .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px 12px; }
  .langs { width: 100%; justify-content: center; }
  .nav { top: 100%; }
}

/* ---------- 共通：セクション ---------- */
.section { padding: 88px 0; position: relative; }
.section.shippo { background: var(--paper-2) var(--shippo); }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .eyebrow {
  display: inline-block; font-family: var(--font-pop); font-size: 0.8rem; letter-spacing: 0.15em;
  background: var(--shu); color: var(--white); border: var(--border); border-radius: 99px; padding: 2px 14px;
  box-shadow: 2px 2px 0 var(--ink);
}
.section-head h2 { font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 14px 0 6px; line-height: 1.4; }
.section-head p { margin: 0; color: var(--ink-2); }
.wave-band { height: 22px; background: var(--seigaiha); background-size: 40px 20px; border-top: var(--border); border-bottom: var(--border); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--font-pop); font-size: 1rem; padding: 12px 26px;
  border: var(--border); border-radius: 99px; background: var(--yamabuki); box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.shu { background: var(--shu); color: var(--white); }

/* ---------- ヒーロー ---------- */
.hero { padding: 56px 0 72px; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.hero-copy h1 {
  font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.55; margin: 0 0 22px; white-space: pre-line;
}
.hero-copy h1 .mark { background: linear-gradient(transparent 62%, var(--sakura) 62%); }
.hero-logo { font-family: var(--font-pop); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; margin: 0 0 18px; color: var(--shu); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.hero-visual {
  position: relative; aspect-ratio: 1 / 1; border: var(--border); border-radius: 40px;
  background: var(--white) var(--shippo); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-visual .sun {
  position: absolute; inset: 22%; border-radius: 50%; background: var(--shu); border: var(--border);
  display: grid; place-items: center; color: var(--white); font-family: var(--font-pop); font-size: clamp(.8rem, 1.6vw, 1rem); text-align: center; padding: 10px;
}
.hero-visual .orbit { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.hero-visual .orbit .mini { position: absolute; width: 17%; transform: translate(-50%, -50%); }
.hero-visual .orbit .mini > * { animation: spin 60s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-visual .orbit, .hero-visual .orbit .mini > * { animation: none; } }
@media (max-width: 820px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; width: 100%; margin: 0 auto; }
}

/* ---------- せかいかん ---------- */
.world-box {
  max-width: 760px; margin: 0 auto 48px; background: var(--white); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 40px 28px; text-align: center; position: relative;
}
.world-box p { margin: 0; font-size: 1.08rem; line-height: 2.2; }
.world-box::before, .world-box::after {
  content: ""; position: absolute; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--shu); border: 2px solid var(--ink);
}
.world-box::before { left: 14px; } .world-box::after { right: 14px; }
.groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.group-card {
  background: var(--white); border: var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: flex; gap: 14px; align-items: center;
}
.group-card .icon { width: 64px; flex: none; }
.group-card h3 { font-family: var(--font-pop); font-weight: 400; margin: 0 0 4px; font-size: 1.1rem; }
.group-card p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
@media (max-width: 820px) { .groups { grid-template-columns: 1fr; } }

/* ---------- ショップ・SNS ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.shop-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: var(--white); border: var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s; position: relative;
}
.shop-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.shop-card .icon {
  width: 64px; height: 64px; flex: none; border: var(--border); border-radius: 18px; display: grid; place-items: center;
}
.shop-card .icon svg { width: 34px; height: 34px; }
.shop-card .sub { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-2); }
.shop-card h3 { font-family: var(--font-pop); font-weight: 400; margin: 0; font-size: 1.15rem; line-height: 1.4; }
.shop-card p { margin: 2px 0 0; font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; }
.shop-card .soon {
  position: absolute; top: -12px; right: 14px; background: var(--ink); color: var(--paper);
  font-size: 0.72rem; font-weight: 700; padding: 1px 10px; border-radius: 99px;
}
@media (max-width: 820px) { .shop-grid { grid-template-columns: 1fr; } }

/* ---------- キャラクター ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.filter {
  border: var(--border); background: var(--white); border-radius: 99px; padding: 8px 20px; font-weight: 700; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s;
}
.filter:hover { transform: translateY(-2px); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter[data-group="angel"][aria-pressed="true"] { background: var(--yamabuki); color: var(--ink); }
.filter[data-group="devil"][aria-pressed="true"] { background: var(--shu); color: var(--white); }
.filter[data-group="human"][aria-pressed="true"] { background: var(--matcha); color: var(--ink); }

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px; }
.char-card {
  --c1: #ccc;
  border: var(--border); border-radius: var(--radius); cursor: pointer; text-align: center;
  background: color-mix(in srgb, var(--c1) 20%, var(--white));
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--c1) 55%, var(--ink));
  padding: 14px 10px 16px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: box-shadow .15s;
}
.char-card .thumb { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.char-card .thumb img, .char-card .thumb svg { width: 88%; height: 88%; object-fit: contain; }
.char-card .name { font-family: var(--font-pop); font-size: 1.12rem; line-height: 1.3; }
.char-card .roman { font-size: 0.75rem; color: var(--ink-2); font-weight: 700; letter-spacing: 0.06em; }
.char-card .eto {
  position: absolute; top: 10px; left: 10px; min-width: 32px; height: 32px; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 99px; background: var(--white);
  font-family: var(--font-pop); font-size: 0.8rem; display: grid; place-items: center;
}
.char-card .kind {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
}
.char-card:hover, .char-card:focus-visible { outline: none; }
.char-card:hover .thumb, .char-card:focus-visible .thumb { animation: purun .7s ease; }
.char-card:focus-visible { box-shadow: 0 0 0 4px var(--yamabuki), 4px 4px 0 var(--ink); }
@keyframes purun {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.14, 0.86); }
  40%  { transform: scale(0.9, 1.1); }
  60%  { transform: scale(1.06, 0.95); }
  80%  { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .char-card:hover .thumb { animation: none; } }
.char-card.hide { display: none; }
@media (max-width: 420px) { .char-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---------- モーダル ---------- */
.modal {
  border: none; padding: 0; background: transparent; max-width: 960px; width: calc(100% - 24px);
  max-height: calc(100dvh - 24px); overflow: visible;
}
.modal::backdrop { background: rgba(58, 42, 36, 0.55); }
.modal-inner {
  --c1: #ccc; --c2: #999; --c3: #eee;
  background: var(--paper) var(--ichimatsu); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink);
  max-height: calc(100dvh - 32px); overflow-y: auto; position: relative;
}
.modal-band {
  height: 18px; border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--c1) 0 40px, var(--c2) 40px 80px, var(--c3) 80px 120px);
  border-radius: 24px 24px 0 0;
}
.modal-close {
  position: absolute; top: -10px; right: -10px; z-index: 2;
  width: 44px; height: 44px; border: var(--border); border-radius: 50%; background: var(--white); cursor: pointer;
  font-size: 1.3rem; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); line-height: 1;
}
.modal-body { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 24px 28px 28px; }
.modal-body.swap { animation: swapIn .35s ease; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-visual {
  background: color-mix(in srgb, var(--c1) 22%, var(--white)); border: var(--border); border-radius: var(--radius); padding: 14px;
}
.m-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.m-tab {
  flex: 1; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); padding: 4px 0; font-weight: 700; cursor: pointer;
}
.m-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.m-image { height: clamp(200px, 34vw, 330px); display: grid; place-items: center; position: relative; }
.m-image img { width: 100%; height: 100%; object-fit: contain; }
.m-image svg { height: 92%; width: auto; }
.m-image .note {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px;
}
.m-visual-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; margin-top: 10px; }
.m-colors { display: flex; gap: 8px; }
.m-sheet { font-weight: 700; font-size: 0.85rem; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 14px; text-decoration: none; }
.m-sheet:hover { background: var(--yamabuki); }
.m-tabs { max-width: 260px; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.m-col { display: grid; gap: 12px; }
.m-col .m-profile { margin: 0; }
.m-colors span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); }

.m-head { margin: 0; padding-right: 40px; }
.m-head .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tag { font-size: 0.75rem; font-weight: 700; border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px; background: var(--white); }
.tag.angel { background: var(--yamabuki); } .tag.devil { background: var(--shu); color: var(--white); } .tag.human { background: var(--matcha); }
.m-head h3 { font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0; line-height: 1.3; }
.m-head .roman { color: var(--ink-2); font-weight: 700; letter-spacing: 0.08em; }

.m-profile { display: grid; grid-template-columns: auto 1fr; border: var(--border); border-radius: 18px; overflow: hidden; background: var(--white); margin: 0 0 20px; }
.m-profile dt, .m-profile dd { margin: 0; padding: 8px 14px; border-bottom: 2px dashed rgba(58,42,36,.18); }
.m-profile dt { font-weight: 700; font-size: 0.85rem; background: color-mix(in srgb, var(--c1) 18%, var(--white)); white-space: nowrap; }
.m-profile dt:nth-last-child(2), .m-profile dd:last-child { border-bottom: none; }

.m-section { margin-bottom: 18px; }
.m-section h4 {
  display: inline-block; font-family: var(--font-pop); font-weight: 400; font-size: 0.95rem; margin: 0 0 8px;
  background: var(--ink); color: var(--paper); border-radius: 99px; padding: 1px 14px;
}
.m-section p { margin: 0; }
.m-rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.m-box { background: var(--white); border: var(--border); border-radius: 18px; padding: 12px 14px; }
.m-box.full { grid-column: 1 / -1; }
.m-box .label { font-weight: 700; font-size: 0.82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.m-box p { margin: 0; font-size: 0.95rem; line-height: 1.7; }
.chara-link {
  display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--ink); border-radius: 99px;
  background: color-mix(in srgb, var(--lc, #ccc) 25%, var(--white)); padding: 0 10px 0 4px; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: transform .12s;
}
.chara-link:hover { transform: translateY(-2px); }
.chara-link svg { width: 22px; height: 22px; }
.m-story { background: var(--white); border: var(--border); border-radius: 18px; padding: 16px 18px; position: relative; }
.m-story p { margin: 0; line-height: 1.95; }
@media (max-width: 760px) {
  .modal-body { padding: 18px; gap: 16px; }
  .m-cols { grid-template-columns: 1fr; }
}

/* ---------- まんが ---------- */
.manga-box {
  max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
  background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px;
}
.manga-frames { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 1 / 1; }
.manga-frames div { border: var(--border); border-radius: 6px; background: var(--paper) var(--ichimatsu); display: grid; place-items: center; }
.manga-frames div:first-child { grid-column: 1 / -1; }
.manga-frames svg { width: 60%; height: 60%; }
.manga-box .soon { font-family: var(--font-pop); color: var(--shu); margin: 12px 0 18px; }
@media (max-width: 720px) { .manga-box { grid-template-columns: 1fr; } }

/* ---------- コラボ ---------- */
.collab-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.collab-points { display: grid; gap: 16px; }
.point { background: var(--white); border: var(--border); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.point h3 { font-family: var(--font-pop); font-weight: 400; font-size: 1.05rem; margin: 0 0 2px; }
.point p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.form {
  background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px;
}
.field { margin-bottom: 18px; }
.field label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.field .req { font-size: 0.7rem; background: var(--shu); color: var(--white); border-radius: 6px; padding: 0 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: var(--border); border-radius: 14px; padding: 10px 14px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--yamabuki); }
.field [aria-invalid="true"] { border-color: var(--shu); background: #fff0ec; }
.field .error { color: var(--shu); font-size: 0.85rem; font-weight: 700; margin-top: 4px; min-height: 1em; }
.form .btn { width: 100%; justify-content: center; }
.kids-note { max-width: 680px; margin: 0 auto; text-align: center; background: var(--white); border: var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
@media (max-width: 820px) { .collab-wrap { grid-template-columns: 1fr; } }

/* 送信完了モーダル */
.done-modal { border: none; padding: 0; background: transparent; width: min(440px, calc(100% - 32px)); }
.done-modal::backdrop { background: rgba(58, 42, 36, 0.55); }
.done-inner { background: var(--white); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); padding: 32px 24px; text-align: center; }
.done-inner svg { width: 110px; margin: 0 auto 8px; }
.done-inner h3 { font-family: var(--font-pop); font-weight: 400; font-size: 1.5rem; margin: 0 0 8px; }
.done-inner p { white-space: pre-line; margin: 0 0 8px; }
.done-inner small { display: block; color: var(--ink-2); margin-bottom: 18px; }

/* ---------- フッター ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 48px 0 28px; text-align: center; }
.footer .logo { justify-content: center; color: var(--paper); margin-bottom: 18px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.footer-links a {
  text-decoration: none; border: 2px solid var(--paper); border-radius: 99px; padding: 4px 16px; font-weight: 700; font-size: 0.88rem;
}
.footer-links a:hover { background: var(--paper); color: var(--ink); }
.copyright { font-size: 0.85rem; letter-spacing: 0.08em; opacity: 0.85; }

/* ---------- 本物のイラスト ---------- */
img.front { object-fit: contain; }
.hero-visual .orbit .mini { width: 15%; }
.hero-visual .orbit .mini img.front { width: 100%; height: auto; filter: drop-shadow(2px 3px 0 rgba(58,42,36,.25)); }
.hero-visual .sun { overflow: hidden; padding: 8% 0 0; align-items: end; background: var(--shu) var(--shippo); }
.hero-visual .sun { position: absolute; }
.hero-visual .sun img.front { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 88%; width: auto; max-width: none; }
.group-card .icon img.front { width: 64px; height: 80px; }
.shop-card img.banner { width: 96px; height: 96px; flex: none; border: var(--border); border-radius: 18px; object-fit: cover; }
.char-card .thumb img.front, .char-card .thumb img { width: 92%; height: 92%; object-fit: contain; }
.chara-link img.front { width: 26px; height: 26px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--white); }
.manga-frames div { min-height: 0; overflow: hidden; position: relative; }
.manga-frames img.front { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 88%; width: auto; max-width: none; }
.done-inner img.front { height: 150px; width: auto; margin: 0 auto 8px; }
.footer-banner { max-width: 600px; width: 100%; margin: 0 auto 16px; border: 3px solid var(--paper); border-radius: 18px; }

/* =========================================
   追加：新しいロゴ（文字タイル）
   ========================================= */
.tlogo { display: inline-flex; align-items: center; gap: 0.12em; padding-top: 0.35em; }
.tl {
  position: relative; display: grid; place-items: center;
  width: 1.45em; height: 1.45em; border: 0.12em solid var(--ink); border-radius: 0.42em;
  background: var(--bg); color: var(--ink); font-family: var(--font-pop); line-height: 1;
  box-shadow: 0.1em 0.1em 0 var(--ink);
  transform: rotate(-6deg);
  animation: tlIn .7s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--i) * 90ms);
}
.tl:nth-child(even) { transform: rotate(5deg); }
.tl.bang { color: var(--white); }
.tl.halo::before {
  content: ""; position: absolute; top: -0.42em; left: 50%; width: 0.9em; height: 0.26em; transform: translateX(-50%);
  border: 0.1em solid #f5bd3a; border-radius: 50%; box-shadow: 0 0 0 0.03em var(--ink), inset 0 0 0 0.03em var(--ink);
  animation: haloFloat 2.4s ease-in-out infinite;
}
.tl.horns::before, .tl.horns::after {
  content: ""; position: absolute; top: -0.36em; width: 0; height: 0;
  border-left: 0.15em solid transparent; border-right: 0.15em solid transparent; border-bottom: 0.38em solid var(--shu);
  filter: drop-shadow(0 -0.04em 0 var(--ink));
}
.tl.horns::before { left: 0.12em; transform: rotate(-14deg); }
.tl.horns::after { right: 0.12em; transform: rotate(14deg); }
.tlogo-sm { font-size: 1.02rem; }
.tlogo-lg { font-size: clamp(2.1rem, 6.4vw, 3.8rem); }
.logo:hover .tl, .hero-logo:hover .tl { animation: tlHop .5s ease both; animation-delay: calc(var(--i) * 60ms); }
.footer .tl { border-color: var(--paper); box-shadow: 0.1em 0.1em 0 rgba(255,248,236,.5); }
@keyframes tlIn { from { opacity: 0; transform: translateY(-0.8em) scale(.4) rotate(-20deg); } }
@keyframes tlHop { 0%,100% { translate: 0 0; } 40% { translate: 0 -0.35em; } 70% { translate: 0 0.05em; } }
@keyframes haloFloat { 0%,100% { translate: -50% 0; } 50% { translate: -50% -0.12em; } }
.hero-logo { margin-bottom: 26px; }

/* =========================================
   追加：お正月の雰囲気
   ========================================= */
/* 紅白のライン（ヘッダーの下） */
.header { border-bottom: none; }

@keyframes kohaku { to { background-position: 28.28px 0; } }
@media (min-width: 561px) { .header .container { height: 64px; } }
.section-head .eyebrow { background: var(--shu); position: relative; }
.section-head .eyebrow::before, .section-head .eyebrow::after {
  content: ""; position: absolute; top: 50%; width: 22px; height: 3px; background: var(--ink); border-radius: 3px;
}
.section-head .eyebrow::before { right: calc(100% + 8px); }
.section-head .eyebrow::after { left: calc(100% + 8px); }

/* 梅の花（SVG） */
.ume, .petal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='%23f7a8b8' stroke='%233a2a24' stroke-width='1.6'><circle cx='20' cy='9' r='7.5'/><circle cx='30.5' cy='16.6' r='7.5'/><circle cx='26.5' cy='29' r='7.5'/><circle cx='13.5' cy='29' r='7.5'/><circle cx='9.5' cy='16.6' r='7.5'/></g><circle cx='20' cy='20' r='5' fill='%23f5bd3a' stroke='%233a2a24' stroke-width='1.4'/></svg>") center / contain no-repeat;
}
.ume { position: absolute; z-index: 2; width: 44px; height: 44px; animation: umeSpin 9s linear infinite; }
.ume.u1 { top: 14px; left: 14px; }
.ume.u2 { top: 10px; right: 60px; width: 30px; height: 30px; animation-duration: 12s; }
.ume.u3 { bottom: 16px; left: 50px; width: 32px; height: 32px; animation-direction: reverse; }
.ume.u4 { bottom: 12px; right: 14px; animation-duration: 7s; }
@keyframes umeSpin { to { rotate: 360deg; } }

/* 舞い落ちる花びら（トップ） */
.hero { position: relative; }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero .container { position: relative; z-index: 1; }
.petal {
  position: absolute; top: -40px; left: var(--x); width: calc(22px * var(--s)); height: calc(22px * var(--s)); opacity: .85;
  animation: fall var(--d) linear infinite; animation-delay: var(--delay);
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(40px, 50vh) rotate(180deg); }
  100% { transform: translate(-20px, 105vh) rotate(360deg); }
}

/* 日の丸の中のにんげんさん・まわりのキャラがふわふわ */
.hero-visual .orbit .mini img.front { animation: bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.22s); }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hero-visual .sun { animation: sunPulse 4s ease-in-out infinite; }
@keyframes sunPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,85,61,.35); } 50% { box-shadow: 0 0 0 18px rgba(232,85,61,0); } }
.btn.shu { animation: nudge 3.2s ease-in-out infinite; }
@keyframes nudge { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -3deg; } 94% { rotate: 3deg; } 97% { rotate: -1deg; } }
.btn:hover { animation: none; }

/* =========================================
   追加：アニメーション
   ========================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .3, 1.2); }
.reveal.in { opacity: 1; transform: none; }
.char-card.reveal { transition-delay: calc(min(var(--n, 0), 8) * 50ms); }
.char-card.pop { animation: cardPop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--n) * 35ms); }
@keyframes cardPop { from { opacity: 0; transform: scale(.6) rotate(-4deg); } }
.shop-card:hover img.banner { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
.group-card:hover .icon img { animation: purun .7s ease; }
.section-head .eyebrow { animation: swing 3s ease-in-out infinite; transform-origin: top center; }
@keyframes swing { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .petals { display: none; }
}

/* =========================================
   追加：一覧カードの大きさをそろえる
   ========================================= */
.char-card .thumb { aspect-ratio: 1 / 1; width: 100%; }
.char-card .thumb img, .char-card .thumb svg { width: 100%; height: 100%; object-fit: contain; }
.char-card { justify-content: flex-start; }
.char-card .name { min-height: 1.3em; }

/* =========================================
   追加：トップの「きょうの干支占い」
   ========================================= */
.today-box {
  max-width: 820px; margin: 0 auto; text-align: center; background: var(--white) var(--shippo);
  border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px 20px 32px;
}
.today-date { font-family: var(--font-pop); margin: 0 0 14px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 26px; }
.pod {
  display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 12px 8px 14px;
  border: var(--border); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); transition: transform .15s;
}
.pod:hover { transform: translateY(-4px); }
.pod-1 { background: #fff3c4; padding-top: 22px; position: relative; }
.pod-1::before { content: "👑"; position: absolute; top: -22px; font-size: 1.8rem; animation: bob 2s ease-in-out infinite; }
.pod-2 { background: #eef0f4; } .pod-3 { background: #fbe3d2; }
.pod-chars { display: flex; justify-content: center; height: 92px; }
.pod-1 .pod-chars { height: 120px; }
.pod-chars img { height: 100%; width: auto; margin: 0 -8px; }
.pod-rank { font-family: var(--font-pop); font-size: 1.3rem; color: var(--shu); }
.pod-eto { font-weight: 700; }
.pod-luck { font-size: .8rem; font-weight: 700; background: var(--shu); color: var(--white); border-radius: 99px; padding: 0 10px; margin-top: 4px; }
@media (max-width: 560px) { .pod-chars { height: 64px; } .pod-1 .pod-chars { height: 80px; } .pod-eto { font-size: .82rem; } }

/* =========================================
   追加：干支占いページ
   ========================================= */
.f-hero { padding: 48px 0 56px; text-align: center; position: relative; overflow: hidden; }
.f-hero h1 { font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.8rem, 5vw, 3rem); margin: 14px 0 6px; line-height: 1.3; }
.f-date { font-family: var(--font-pop); font-size: 1.25rem; margin: 0; color: var(--shu); }
.f-updated { margin: 0 0 12px; font-size: .85rem; color: var(--ink-2); }
.f-lead { margin: 0 auto; max-width: 560px; }
.omikuji-box {
  width: 86px; height: 120px; margin: 0 auto; position: relative; border: var(--border); border-radius: 10px 10px 14px 14px;
  background: linear-gradient(var(--shu) 0 26%, #c98a4b 26%); box-shadow: var(--shadow); display: grid; place-items: center;
  animation: swing 2.6s ease-in-out infinite; transform-origin: top center;
}
.omikuji-box span { writing-mode: vertical-rl; font-family: var(--font-pop); color: var(--white); font-size: .95rem; letter-spacing: .1em; margin-top: 16px; text-shadow: 1px 1px 0 var(--ink); }
.omikuji-box::before { content: ""; position: absolute; top: -14px; left: 50%; width: 10px; height: 14px; transform: translateX(-50%); background: var(--yamabuki); border: 2px solid var(--ink); border-radius: 3px; }
.omikuji-box.big { width: 120px; height: 168px; }
.omikuji-box.big span { font-size: 1.3rem; }

.eto-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 900px; margin: 0 auto 28px; }
.eto-btn {
  border: var(--border); border-radius: 18px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; font-size: .85rem;
  transition: transform .15s;
}
.eto-btn img { height: 70px; width: auto; }
.eto-btn:hover { transform: translateY(-4px) rotate(-2deg); }
.eto-btn:hover img { animation: purun .7s ease; }
.eto-btn.picked { background: var(--yamabuki); }
@media (max-width: 720px) { .eto-picker { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px) { .eto-picker { grid-template-columns: repeat(3, 1fr); } }
.year-form { max-width: 520px; margin: 0 auto; text-align: center; background: var(--white); border: var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.year-form label { font-weight: 700; display: block; margin-bottom: 8px; }
.year-row { display: flex; gap: 10px; justify-content: center; }
.year-row input { width: 9em; font: inherit; border: var(--border); border-radius: 14px; padding: 8px 12px; background: var(--paper); text-align: center; }
.year-row .btn { padding: 8px 20px; }
.year-result { font-weight: 700; color: var(--shu); min-height: 1.5em; margin: 10px 0 0; }
.year-note { font-size: .78rem; color: var(--ink-2); margin: 4px 0 0; }

.f-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; align-items: start; }
.f-rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .f-top3, .f-rest { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .f-top3, .f-rest { grid-template-columns: 1fr; } }
.f-card {
  background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.f-card.reveal { transition-delay: calc(min(var(--n), 6) * 60ms); }
.f-card.big { box-shadow: var(--shadow-lg); }
.f-card.rank-1 { background: #fff8d6; } .f-card.rank-2 { background: #f4f5f8; } .f-card.rank-3 { background: #fdeee2; }
.f-card.rank-1::before { content: "👑"; position: absolute; top: -26px; left: 50%; translate: -50% 0; font-size: 2rem; animation: bob 2s ease-in-out infinite; }
.f-top { display: flex; align-items: center; gap: 10px; }
.f-rank {
  font-family: var(--font-pop); font-size: 1.15rem; min-width: 3.2em; text-align: center; border: var(--border); border-radius: 99px;
  background: var(--ink); color: var(--paper); padding: 0 8px;
}
.rank-1 .f-rank { background: #d4a72c; color: var(--ink); } .rank-2 .f-rank { background: #b9bec9; color: var(--ink); } .rank-3 .f-rank { background: #d9935f; color: var(--ink); }
.f-eto { font-family: var(--font-pop); font-weight: 400; font-size: 1.1rem; margin: 0; flex: 1; line-height: 1.3; }
.f-luck {
  font-family: var(--font-pop); color: var(--shu); border: 3px solid var(--shu); border-radius: 8px; padding: 0 8px; font-size: 1rem;
  rotate: 8deg; background: var(--white); white-space: nowrap;
}
.luck-0 .f-luck { background: var(--shu); color: var(--white); animation: stamp .8s cubic-bezier(.3, 1.8, .5, 1) both .3s; }
@keyframes stamp { from { scale: 2.4; opacity: 0; } }
.f-pair { display: flex; justify-content: center; height: 110px; }
.big .f-pair { height: 150px; }
.f-pair img { height: 100%; width: auto; margin: 0 -6px; }
.f-card:hover .f-pair img { animation: purun .7s ease; }
.stars { color: #f0a400; font-size: 1.15rem; letter-spacing: .1em; text-align: center; -webkit-text-stroke: .6px var(--ink); }
.stars .off { color: #e6ddd0; }
.f-msg { margin: 0; line-height: 1.75; }
.f-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.f-lucky div { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; }
.f-lucky dt { font-size: .72rem; font-weight: 700; color: var(--ink-2); }
.f-lucky dd { margin: 0; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.chip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.f-talk { display: grid; gap: 8px; }
.bubble { margin: 0; font-size: .88rem; line-height: 1.6; border: 2px solid var(--ink); border-radius: 14px; padding: 6px 12px; position: relative; }
.bubble b { display: block; font-size: .74rem; }
.bubble.angel { background: #fff6d8; border-top-left-radius: 4px; }
.bubble.devil { background: #fde4e0; border-top-right-radius: 4px; }
.f-disclaimer { text-align: center; color: var(--ink-2); font-size: .85rem; margin-top: 32px; }

/* おみくじを引く演出 */
.omikuji-modal { border: none; padding: 0; background: transparent; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.omikuji-modal::backdrop { background: rgba(58, 42, 36, 0.6); }
.omi-inner { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 6px 6px; }
.omi-shake { display: grid; place-items: center; min-height: 260px; }
.omi-shake .omikuji-box { animation: shake .25s ease-in-out infinite; }
@keyframes shake { 0%,100% { rotate: -12deg; } 50% { rotate: 12deg; } }
.omi-result { display: none; }
.omikuji-modal.done .omi-shake { display: none; }
.omikuji-modal.done .omi-result { display: block; animation: cardPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.omi-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.omi-actions .btn { padding: 8px 18px; font-size: .9rem; }
.nav a[aria-current="page"] { background: var(--shu); color: var(--white); }

/* =========================================
   追加：トップの輪　エンジェル⇔デビルがくるっと入れ替わる
   ========================================= */
.hero-visual .orbit .mini { width: 16%; }
.flipper { position: relative; aspect-ratio: 600 / 640; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4, 1.6, .5, 1); }
.flipper.flipped { transform: rotateY(180deg); }
.flipper .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipper .face-b { transform: rotateY(180deg); }
.flipper img.front { width: 100%; height: 100%; object-fit: contain; }
.hero-visual .orbit .mini .flipper img.front { animation: bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.22s); }
.hero-visual .sun img.front { height: 96%; bottom: -2%; }
.omikuji-modal:focus, .omikuji-modal:focus-visible, .modal:focus, .done-modal:focus { outline: none; }
.hero-visual .orbit .mini { width: 19%; }

/* =========================================
   追加：くるっと回る（表と裏の入れかえ）
   ========================================= */
.turn { position: relative; width: 100%; aspect-ratio: 600 / 640; }
.turn .face { position: absolute; inset: 0; display: block; }
.turn .face-b, .turn.show-b .face-a { display: none; }
.turn.show-b .face-b { display: block; }
.turn .face img, .turn .face svg { width: 100%; height: 100%; object-fit: contain; }
.turn.turning { animation: turnY .48s ease-in-out; }
@keyframes turnY {
  0% { transform: perspective(600px) rotateY(0); }
  48% { transform: perspective(600px) rotateY(88deg) scale(.96); }
  52% { transform: perspective(600px) rotateY(-88deg) scale(.96); }
  100% { transform: perspective(600px) rotateY(0); }
}
.char-card:hover .thumb, .char-card:focus-visible .thumb { animation: none; }
.char-card .thumb { display: grid; place-items: end center; }
.char-card .thumb .turn { width: 100%; height: auto; }
.char-card:hover .turn.show-b img { animation: bob 1.2s ease-in-out infinite; }
.hero-visual .orbit .mini .turn img.front { width: 100%; height: 100%; }

/* =========================================
   追加：ヘッダーの下を、ちいさなキャラが歩く
   ========================================= */
.walkers {
  height: 18px; overflow: hidden; position: relative;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background: linear-gradient(transparent 82%, rgba(58,42,36,.12) 82%), var(--white);
}
.walk-track { display: flex; align-items: flex-end; gap: 26px; width: max-content; height: 100%; padding-left: 26px; animation: walkLeft 60s linear infinite; }
.walk-track img { height: 15px; width: auto; animation: step .36s steps(2) infinite; animation-delay: calc(var(--i) * -0.07s); }
@keyframes walkLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes step { 0% { translate: 0 0; } 100% { translate: 0 -1.5px; } }
.walkers:hover .walk-track { animation-play-state: paused; }

/* 「デ」のツノが、つんつん動く */
.tl.horns::before, .tl.horns::after { animation: tsun 2.4s ease-in-out infinite; }
.tl.horns::after { animation-delay: .15s; }
@keyframes tsun {
  0%, 55%, 100% { translate: 0 0; }
  62% { translate: 0 -0.12em; }
  70% { translate: 0 0; }
  78% { translate: 0 -0.08em; }
  86% { translate: 0 0; }
}

/* 背景に、うっすら出てくるキャラ */
.ghosts { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ghost {
  position: absolute; width: var(--sz); height: auto; opacity: 0; rotate: var(--r);
  animation: ghost 7s ease-in-out forwards;
}
@keyframes ghost {
  0% { opacity: 0; transform: translateY(16px) scale(.9); }
  25%, 70% { opacity: .2; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(.96); }
}

/* 日の丸のにんげんさん：ポーズがゆっくり変わる */
.hero-visual .sun img.pose { opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; transform: translateX(-50%) scale(.96); }
.hero-visual .sun img.pose.on { opacity: 1; transform: translateX(-50%) scale(1); }

/* 日の丸のにんげんさん：2Dのみ・真ん中に配置 */
.hero-visual .sun img.pose { top: 50%; bottom: auto; height: 76%; transform: translate(-50%, -50%) scale(.96); }
.hero-visual .sun img.pose.on { transform: translate(-50%, -50%) scale(1); }

/* 歩くキャラの帯：うすい緑の背景＋門松の色の線 */
.walkers {
  border-top: 2px solid #4f8a3b;      /* 青竹の緑 */
  border-bottom: 2px solid #b8925a;   /* わら縄の色 */
  background: linear-gradient(transparent 82%, rgba(79,138,59,.12) 82%), #f2f9ec;
  box-shadow: inset 0 1px 0 #8cbf6a, inset 0 -1px 0 #d9bd8a;
}

/* 1位の王冠：絵文字をやめて、サイトの絵柄（太い線・和の色）に合わせたイラストに */
.pod-1::before, .f-card.rank-1::before {
  content: ""; width: 54px; height: 40px; font-size: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 40'><path d='M6 31 L4 9 L16 19 L27 4 L38 19 L50 9 L48 31 Z' fill='%23f5bd3a' stroke='%233a2a24' stroke-width='3' stroke-linejoin='round'/><rect x='6' y='29' width='42' height='8' rx='3' fill='%23e8553d' stroke='%233a2a24' stroke-width='3'/><circle cx='4' cy='8' r='3.4' fill='%23fff8ec' stroke='%233a2a24' stroke-width='2.4'/><circle cx='27' cy='4' r='3.4' fill='%23fff8ec' stroke='%233a2a24' stroke-width='2.4'/><circle cx='50' cy='8' r='3.4' fill='%23fff8ec' stroke='%233a2a24' stroke-width='2.4'/><circle cx='27' cy='21' r='4' fill='%23e8553d' stroke='%233a2a24' stroke-width='2.2'/><circle cx='15' cy='24' r='2.6' fill='%238fd3e8' stroke='%233a2a24' stroke-width='2'/><circle cx='39' cy='24' r='2.6' fill='%238fd3e8' stroke='%233a2a24' stroke-width='2'/><path d='M12 16 L14 21' stroke='%23fff8ec' stroke-width='2' stroke-linecap='round' opacity='.8'/></svg>") center / contain no-repeat;
  filter: drop-shadow(2px 2px 0 rgba(58,42,36,.35));
}
.pod-1::before { top: -30px; left: 50%; translate: -50% 0; }
.f-card.rank-1::before { top: -30px; }
.today-box .podium { margin-top: 34px; }

/* 一覧カードの絵の枠を、画像と同じ縦横比に（上下が切れないように） */
.char-card .thumb { aspect-ratio: 600 / 640; overflow: visible; }

/* =========================================
   ミニゲーム「干支グランプリ」
   ========================================= */
/* トップの紹介コーナー */
.game-teaser {
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-decoration: none; max-width: 820px; margin: 0 auto;
  background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 20px 28px;
}
.gt-track { position: relative; width: 100%; height: 110px; border-radius: 16px; background: repeating-linear-gradient(90deg, #e9f4df 0 60px, #f2f9ec 60px 120px); border: 2px solid #4f8a3b; overflow: hidden; }
.gt-track img { position: absolute; bottom: 6px; height: 92px; width: auto; left: 0; animation: gtRun 6s linear infinite; animation-delay: calc(var(--i) * -1.2s); }
.gt-goal { position: absolute; right: 18px; top: 0; bottom: 0; width: 12px; background: repeating-linear-gradient(#3a2a24 0 8px, #fff 8px 16px); }
@keyframes gtRun { from { transform: translateX(-120px); } to { transform: translateX(860px); } }
.game-teaser:hover .gt-track img { animation-duration: 3s; }

/* はじめの画面 */
.g-hero { padding: 48px 0 72px; text-align: center; }
.g-flag { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.g-flag img { height: 90px; width: auto; animation: bob 1.8s ease-in-out infinite; }
.g-flag img:nth-child(2n) { animation-delay: -.6s; }
.g-hero h1 { font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.8rem, 5vw, 3rem); margin: 6px 0 10px; line-height: 1.3; }
.g-lead { max-width: 640px; margin: 0 auto 20px; }
.g-rules { text-align: left; max-width: 560px; margin: 0 auto 26px; background: var(--white); border: var(--border); border-radius: 18px; padding: 16px 20px 16px 40px; box-shadow: var(--shadow); }
.g-rules li { margin: 4px 0; }
.g-start { font-size: 1.15rem; padding: 14px 34px; }
.g-note { font-size: .8rem; color: var(--ink-2); margin-top: 18px; }

/* 共通 */
.g-wrap { padding: 32px 0 72px; }
.g-status {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--ink); color: var(--paper); border-radius: 99px; padding: 8px 20px; margin-bottom: 18px; font-weight: 700;
}
.g-pts b { font-family: var(--font-pop); font-size: 1.4rem; color: var(--yamabuki); }
.g-event {
  text-align: center; background: color-mix(in srgb, var(--ev) 30%, var(--white)) var(--shippo); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 16px; margin-bottom: 18px;
}
.g-event-label { font-size: .78rem; font-weight: 700; background: var(--ink); color: var(--paper); border-radius: 99px; padding: 1px 12px; }
.g-event h2 { font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 6px 0 2px; animation: cardPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.g-event p { margin: 0; }
.g-event.small { padding: 6px; } .g-event.small h2 { font-size: 1.3rem; margin: 0; }

/* かけ方のタブ */
.g-types { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 6px; }
.g-type { border: var(--border); background: var(--white); border-radius: 99px; padding: 6px 16px; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.g-type[aria-selected="true"] { background: var(--shu); color: var(--white); }
.g-hint { text-align: center; font-weight: 700; color: var(--shu); margin: 6px 0 14px; }

/* 出場キャラ */
.g-runners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 860px) { .g-runners { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .g-runners { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.g-runner {
  position: relative; border: var(--border); border-radius: 16px; cursor: pointer; padding: 8px 4px 8px;
  background: color-mix(in srgb, var(--c1) 18%, var(--white)); box-shadow: 3px 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .12s, box-shadow .12s;
}
.g-runner:hover { transform: translateY(-3px); }
.g-runner img { width: 100%; height: auto; aspect-ratio: 600 / 640; object-fit: contain; }
.g-runner.picked { background: #fff3c4; box-shadow: 0 0 0 4px var(--shu), 3px 3px 0 var(--ink); transform: translateY(-3px); }
.g-runner.tap img { animation: purun .6s ease; }
.g-name { font-family: var(--font-pop); font-size: .9rem; line-height: 1.2; }
.g-odds { display: flex; flex-direction: column; font-size: .72rem; font-weight: 700; line-height: 1.35; text-align: center; }
.g-odds b { font-size: .95rem; color: var(--shu); }
.g-pickmark:not(:empty) {
  position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 2; background: var(--shu); color: var(--white);
  border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px; font-weight: 700; font-size: .8rem; white-space: nowrap;
}
.g-fav { position: absolute; top: 4px; right: 6px; color: #f0a400; -webkit-text-stroke: .6px var(--ink); font-size: 1rem; }

/* かけるポイント */
.g-betbox { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: stretch; background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; }
@media (max-width: 860px) { .g-betbox { grid-template-columns: 1fr; } }
.g-pv-label, .g-amount-label { display: block; font-weight: 700; font-size: .82rem; color: var(--ink-2); margin-bottom: 6px; }
.g-pv-list { display: flex; flex-wrap: wrap; gap: 6px; }
.g-pv { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px 0 4px; font-weight: 700; font-size: .85rem; background: #fff3c4; }
.g-pv b { color: var(--shu); font-size: .75rem; }
.g-pv img { width: 26px; height: 28px; object-fit: contain; }
.g-pv-none { color: var(--ink-2); }
.g-amount-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-chip { border: 2px solid var(--ink); background: var(--paper); border-radius: 10px; padding: 3px 9px; font-weight: 700; cursor: pointer; }
.g-chip:hover { background: var(--yamabuki); }
.g-chip.all { background: var(--shu); color: var(--white); }
.g-amount-val { font-family: var(--font-pop); font-size: 1.3rem; min-width: 5.5em; text-align: center; }
.g-gobox { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.g-payout { margin: 0; font-weight: 700; }
.g-payout b { color: var(--shu); font-size: 1.15rem; }
.g-go { font-size: 1.2rem; padding: 12px 38px; }
.g-go:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; animation: none; }

/* レース */
.g-comment { text-align: center; font-family: var(--font-pop); font-size: 1.25rem; min-height: 1.6em; margin: 6px 0 12px; color: var(--shu); }
.g-track { border: var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); background: #f2f9ec; }
.g-lane { display: flex; align-items: stretch; height: 52px; border-bottom: 2px dashed rgba(79,138,59,.35); position: relative; }
.g-lane:nth-child(even) { background: #e9f4df; }
.g-lane:last-child { border-bottom: none; }
.g-lane-no { width: 30px; flex: none; display: grid; place-items: center; font-weight: 700; background: var(--ink); color: var(--paper); font-size: .85rem; }
.g-lane-run { position: relative; flex: 1; }
.g-goal { width: 12px; flex: none; background: repeating-linear-gradient(#3a2a24 0 8px, #fff 8px 16px); }
.g-mover { position: absolute; bottom: 2px; height: 48px; left: calc(var(--x, 0) * (100% - 46px)); width: 46px; }
.g-mover img { height: 100%; width: auto; animation: step .3s steps(2) infinite; }
.g-mover.done img { animation: bob 1s ease-in-out infinite; }

/* 結果 */
.g-result, .g-final { text-align: center; background: var(--white) var(--shippo); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px 16px 30px; }
.g-result h2, .g-final h2 { font-family: var(--font-pop); font-weight: 400; font-size: 1.8rem; margin: 0 0 16px; }
.g-podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; align-items: end; max-width: 560px; margin: 0 auto 18px; }
.g-pod { display: flex; flex-direction: column; align-items: center; border: var(--border); border-radius: 16px; padding: 8px 6px 12px; background: var(--paper); animation: cardPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.g-pod img { width: 100%; height: auto; }
.g-pod b { font-family: var(--font-pop); color: var(--shu); font-size: 1.2rem; }
.g-pod span { font-weight: 700; font-size: .9rem; }
.g-pod-1 { background: #fff3c4; padding-top: 16px; animation-delay: .5s; }
.g-pod-2 { background: #eef0f4; animation-delay: .25s; }
.g-pod-3 { background: #fbe3d2; }
.g-verdict { margin: 0 auto 18px; max-width: 420px; border: var(--border); border-radius: 18px; padding: 10px; }
.g-verdict p { margin: 0; font-weight: 700; }
.g-verdict .big { font-family: var(--font-pop); font-size: 2rem; }
.g-verdict.hit { background: #fff3c4; } .g-verdict.hit .big { color: var(--shu); animation: stamp .7s cubic-bezier(.3, 1.8, .5, 1) both; }
.g-verdict.miss { background: #eef0f4; }
.g-bankrupt { color: var(--shu); font-weight: 700; }
.g-final-label { margin: 0; font-weight: 700; color: var(--ink-2); }
.g-final-pts { margin: 0; } .g-final-pts b { font-family: var(--font-pop); font-size: clamp(2.6rem, 9vw, 4rem); color: var(--shu); }
.g-final-title { font-family: var(--font-pop); font-size: 1.5rem; margin: 6px 0; display: inline-block; background: var(--yamabuki); border: var(--border); border-radius: 12px; padding: 2px 16px; rotate: -2deg; }
.g-final-chars { display: flex; justify-content: center; gap: 4px; margin: 14px 0 20px; }
.g-final-chars img { height: 90px; width: auto; animation: bob 1.4s ease-in-out infinite; }
.g-final-chars img:nth-child(2n) { animation-delay: -.5s; }

/* 紙ふぶき */
.g-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.g-confetti span { position: absolute; top: -20px; width: 9px; height: 14px; border: 1px solid rgba(58,42,36,.4); border-radius: 2px; animation: confetti var(--d) ease-in var(--delay) forwards; }
@keyframes confetti { to { transform: translateY(110vh) rotate(var(--r)); } }

/* メニューの項目が増えたので、折り返さないように */
.nav a { white-space: nowrap; }
@media (min-width: 961px) { .nav { gap: 0; } .nav a { padding: 6px 9px; font-size: .86rem; } .header .container { gap: 10px; } }
@media (min-width: 961px) and (max-width: 1180px) { .menu-btn { display: block; } .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; margin: 0; flex-direction: column; background: var(--paper); border-bottom: var(--border); padding: 8px 16px 16px; } .nav.open { display: flex; } .langs { margin-left: 0; } }

/* =========================================
   ミニゲーム：見やすさ調整
   ========================================= */
.g-wrap { padding: 20px 0 48px; }
.g-status { padding: 4px 18px; margin-bottom: 12px; }
.g-pts b { font-size: 1.25rem; }
/* 種目：横長でコンパクト */
.g-event.wide { display: flex; align-items: center; justify-content: center; gap: 6px 16px; flex-wrap: wrap; padding: 8px 18px; margin-bottom: 10px; text-align: left; }
.g-event.wide h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; }
.g-event.wide p { font-size: .92rem; }
.g-types { margin-bottom: 2px; }
.g-type { padding: 4px 14px; font-size: .9rem; }
.g-hint { margin: 4px 0 10px; font-size: .92rem; }
/* キャラカード：顔だけ・小さく */
.g-runners { gap: 8px; margin-bottom: 12px; }
.g-runner { padding: 6px 4px 6px; border-radius: 14px; gap: 0; }
.g-runner .g-face { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); object-fit: cover; aspect-ratio: auto; }
.g-runner.tap .g-face { animation: purun .6s ease; }
.g-name { font-size: .85rem; margin-top: 2px; }
.g-odds { flex-direction: row; gap: 4px; width: 100%; padding: 0 2px; margin-top: 4px; }
.g-o { flex: 1; display: flex; flex-direction: column; align-items: center; background: var(--white); border: 2px solid rgba(58,42,36,.25); border-radius: 8px; padding: 1px 0 2px; line-height: 1.15; }
.g-o small { font-size: .66rem; font-weight: 700; color: var(--ink-2); }
.g-o b { font-family: var(--font-pop); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.g-o.pop { border-color: var(--ink); position: relative; }
.g-o.pop1 { background: #ffe066; } .g-o.pop2 { background: #e3e7ef; } .g-o.pop3 { background: #f6cfae; }
.g-o.pop b { color: var(--shu); }
.g-o.pop::after { position: absolute; top: -8px; right: -4px; font-size: .58rem; font-weight: 700; background: var(--shu); color: #fff; border-radius: 99px; padding: 0 5px; line-height: 1.5; }
.g-o.pop1::after { content: "1"; } .g-o.pop2::after { content: "2"; } .g-o.pop3::after { content: "3"; }
.g-fav { top: 2px; right: 4px; }
/* かけるポイント */
.g-betbox { padding: 12px 14px; gap: 10px; }
.g-chip.all { background: var(--paper); color: var(--ink); }
.g-chip.all.on { background: var(--shu); color: var(--white); }
.g-pv .g-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.g-go { padding: 10px 34px; }
/* レース中 */
.g-comment { margin: 2px 0 8px; font-size: 1.15rem; }
.g-lane { height: 44px; }
.g-lane-name { width: 118px; flex: none; display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 0 6px; border-right: 2px dashed rgba(79,138,59,.35); white-space: nowrap; overflow: hidden; }
.g-lane-name .g-face { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; object-fit: cover; flex: none; }
.g-lane-name em { font-style: normal; background: var(--shu); color: #fff; border-radius: 99px; padding: 0 6px; font-size: .68rem; margin-left: auto; }
.g-mover { height: 40px; width: 40px; left: calc(var(--x, 0) * (100% - 40px)); }
.g-lane.mine { background: #fff3c4 !important; box-shadow: inset 0 0 0 3px var(--shu); }
.g-lane.mine .g-lane-no { background: var(--shu); }
.g-lane.mine .g-mover::before { content: "▼"; position: absolute; top: -12px; left: 50%; translate: -50% 0; color: var(--shu); font-size: .7rem; animation: bob .8s ease-in-out infinite; }
.g-lane.mine .g-mover img { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px var(--shu)); }
@media (max-width: 600px) { .g-lane-name { width: 34px; padding: 0 4px; } .g-lane-name { font-size: 0; } .g-lane-name em { display: none; } }
.g-runner, .g-o { min-width: 0; }
@media (max-width: 480px) {
  .g-runners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .g-runner .g-face { width: 46px; height: 46px; }
  .g-odds { gap: 2px; }
  .g-o b { font-size: 1rem; }
  .g-o small { font-size: .58rem; }
  .g-type { font-size: .8rem; padding: 4px 10px; }
  .g-event.wide p { font-size: .82rem; }
}
.g-runners { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 860px) { .g-runners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .g-runners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .g-runner .g-face { width: 46px; height: 46px; }
  .g-o b { font-size: 1.05rem; }
  .g-o small { font-size: .58rem; }
  .g-type { font-size: .8rem; padding: 4px 10px; }
  .g-betbox, .g-amount-row { min-width: 0; }
}

/* レース結果の明細 */
.g-verdict { padding: 4px 10px; margin-bottom: 12px; }
.g-receipt { max-width: 520px; margin: 0 auto 18px; background: var(--white); border: var(--border); border-radius: 18px; padding: 14px 18px 16px; text-align: left; box-shadow: var(--shadow); }
.g-receipt h3 { margin: 0 0 8px; font-family: var(--font-pop); font-weight: 400; font-size: 1.1rem; text-align: center; }
.g-receipt dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.g-receipt dt, .g-receipt dd { margin: 0; padding: 5px 4px; border-bottom: 2px dashed rgba(58,42,36,.15); }
.g-receipt dt { font-size: .85rem; font-weight: 700; color: var(--ink-2); padding-right: 14px; white-space: nowrap; }
.g-receipt dd { font-weight: 700; text-align: right; }
.g-rc-picks { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.g-pv.ok { background: #fff3c4; border-color: var(--shu); } .g-pv.ng { background: #eef0f4; opacity: .8; }
.g-rc-diff { font-family: var(--font-pop); font-size: 1.2rem; }
.plus { color: #2f8a3a; } .minus { color: var(--shu); }
.g-rc-change { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; background: var(--paper); border-radius: 12px; padding: 8px; }
.g-rc-label { width: 100%; text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.g-rc-before { font-family: var(--font-pop); font-size: 1.4rem; color: var(--ink-2); }
.g-rc-arrow { font-size: 1.3rem; font-weight: 700; }
.g-rc-after { font-family: var(--font-pop); font-size: 2rem; animation: stamp .7s cubic-bezier(.3, 1.8, .5, 1) both .3s; }
.g-rc-unit { font-weight: 700; }

/* 結果画面：横並び＆表彰台 */
.g-result { padding: 14px 16px 18px; }
.g-result h2 { font-size: 1.4rem; margin: 0 0 8px; }
.g-res-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
@media (max-width: 820px) { .g-res-grid { grid-template-columns: 1fr; } }
.g-stage { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; max-width: 460px; width: 100%; margin: 0 auto; }
.g-step { display: flex; flex-direction: column; align-items: center; }
.g-step-char { width: 88%; animation: jumpIn .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.g-step-char img { width: 100%; height: auto; display: block; }
.g-step-1 .g-step-char { width: 100%; animation-delay: .9s; }
.g-step-2 .g-step-char { animation-delay: .5s; }
.g-step-3 .g-step-char { animation-delay: .1s; }
.g-step-1 .g-step-char img { animation: bob 1.2s ease-in-out 1.6s infinite; }
.g-step-name { font-weight: 700; font-size: .85rem; margin: 2px 0 4px; white-space: nowrap; }
.g-step-block { width: 100%; display: grid; place-items: center; border: var(--border); border-bottom: none; border-radius: 10px 10px 0 0; box-shadow: inset 0 6px 0 rgba(255,255,255,.35); }
.g-step-block b { font-family: var(--font-pop); font-weight: 400; font-size: 1.8rem; color: var(--white); text-shadow: 2px 2px 0 var(--ink); }
.g-step-1 .g-step-block { height: 92px; background: #f5bd3a; }
.g-step-2 .g-step-block { height: 64px; background: #b9bec9; margin-right: -3px; }
.g-step-3 .g-step-block { height: 44px; background: #d9935f; margin-left: -3px; }
.g-stage::after { content: ""; grid-column: 1 / -1; height: 8px; background: var(--ink); border-radius: 4px; }
@keyframes jumpIn { from { opacity: 0; transform: translateY(-60px) scale(.8); } }
.g-res-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g-res-side .g-verdict { margin: 0; width: 100%; max-width: 520px; }
.g-res-side .g-verdict .big { font-size: 1.6rem; }
.g-res-side .g-receipt { margin: 0; width: 100%; padding: 10px 14px 12px; }
.g-receipt h3 { font-size: 1rem; margin-bottom: 4px; }
.g-receipt dt, .g-receipt dd { padding: 3px 4px; }
.g-rc-change { margin-top: 8px; padding: 4px 8px; }
.g-rc-after { font-size: 1.7rem; }

/* 人気・大穴の印 */
.g-o.pop::after { content: none !important; }
.g-o em {
  position: absolute; top: -9px; left: 50%; translate: -50% 0; font-style: normal; white-space: nowrap;
  font-size: .56rem; font-weight: 700; color: #fff; border-radius: 99px; padding: 0 5px; line-height: 1.5; border: 1.5px solid var(--ink);
}
.g-o.pop em { background: var(--shu); }
.g-o.long { border-color: var(--ink); position: relative; }
.g-o.long b { color: #6b3fa0; }
.g-o.long1 { background: #e6d6f7; } .g-o.long2 { background: #efe4fa; } .g-o.long3 { background: #f6effc; }
.g-o.long em { background: #7b4bb3; }
.g-odds { margin-top: 8px; }
.g-legend { text-align: center; font-size: .78rem; color: var(--ink-2); margin: -4px 0 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.g-legend .lg { font-weight: 700; color: #fff; border-radius: 99px; padding: 0 8px; border: 1.5px solid var(--ink); }
.g-legend .lg.pop { background: var(--shu); } .g-legend .lg.long { background: #7b4bb3; }
.g-o.pop, .g-o.long { padding-top: 7px; } .g-o em { top: -8px; }

/* =========================================
   ミニゲームの入口・ミニゲーム2（タイピング）
   ========================================= */
.games-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .games-list { grid-template-columns: 1fr; } }
.games-list .game-teaser { max-width: none; margin: 0; gap: 12px; position: relative; text-align: center; }
.gt-no { position: absolute; top: -16px; left: 18px; width: 40px; height: 40px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: var(--yamabuki); font-family: var(--font-pop); font-size: 1.2rem; box-shadow: 2px 2px 0 var(--ink); }
.gt-title { font-family: var(--font-pop); font-size: 1.4rem; line-height: 1.3; }
.gt-lead { font-size: .9rem; color: var(--ink-2); }
.games-list .gt-track { height: 96px; }
.games-list .gt-track img { height: 80px; animation-name: gtRun2; }
@keyframes gtRun2 { from { left: -90px; } to { left: 100%; } }
.gt-keys { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; height: 96px; width: 100%; border-radius: 16px; background: #f4f0fa; border: 2px solid #7b4bb3; }
.gt-keys kbd { font-family: var(--font-pop); font-size: 1.2rem; width: 40px; height: 40px; display: grid; place-items: center; background: var(--white); border: var(--border); border-radius: 8px; box-shadow: 0 4px 0 var(--ink); animation: keyTap 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes keyTap { 0%, 70%, 100% { transform: translateY(0); box-shadow: 0 4px 0 var(--ink); } 80% { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); background: var(--yamabuki); } }
.gt-modes { position: absolute; right: 8px; bottom: 6px; display: flex; }
.gt-modes img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); margin-left: -6px; background: #fff; }

/* モード選び */
.t-mode-title { font-family: var(--font-pop); font-weight: 400; font-size: 1.4rem; margin: 18px 0 14px; }
.t-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto 14px; }
@media (max-width: 760px) { .t-modes { grid-template-columns: 1fr; } }
.t-mode { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; border: var(--border); border-radius: var(--radius); padding: 18px 14px 16px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; font-family: inherit; }
.t-mode:hover { transform: translateY(-4px) rotate(-1deg); }
.t-mode:hover .t-face { animation: purun .7s ease; }
.t-mode-angel { background: #fff8d9; } .t-mode-devil { background: #fde4e0; } .t-mode-oni { background: #e9e4f3; }
.t-mode .t-face { width: 110px; height: auto; }
.t-mode b { font-family: var(--font-pop); font-weight: 400; font-size: 1.15rem; }
.t-mode span { font-size: .88rem; }
.t-level { position: absolute; top: -14px; left: 50%; translate: -50% 0; font-family: var(--font-pop); font-size: .9rem !important; padding: 0 14px; border: var(--border); border-radius: 99px; background: var(--white); white-space: nowrap; }
.t-mode-angel .t-level { background: var(--yamabuki); } .t-mode-devil .t-level { background: var(--shu); color: #fff; } .t-mode-oni .t-level { background: #3a2a24; color: #fff; }
.t-time { font-weight: 700; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: 0 12px; }

/* プレイ画面 */
.t-status b { font-family: var(--font-pop); color: var(--yamabuki); font-size: 1.2rem; }
.g-status b { font-family: var(--font-pop); color: var(--yamabuki); }
.t-bar { height: 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); overflow: hidden; margin: -4px 0 16px; }
.t-bar-in { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8fb85a, #f5bd3a); transition: width .1s linear; }
.t-bar.low .t-bar-in { background: var(--shu); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .5; } }
.t-stage { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
@media (max-width: 700px) { .t-stage { grid-template-columns: 1fr; } .t-char { display: none; } }
.t-char { position: relative; }
.t-char .t-face { width: 100%; height: auto; }
.t-face.hop { animation: purun .6s ease; }
.t-bubble { position: absolute; top: -8px; left: 50%; translate: -50% -100%; white-space: nowrap; margin: 0; padding: 4px 12px; border: var(--border); border-radius: 14px; background: var(--white); font-weight: 700; font-size: .9rem; opacity: 0; transition: opacity .2s, transform .2s; transform: translateY(6px); pointer-events: none; }
.t-bubble.show { opacity: 1; transform: none; }
.t-bubble.miss { background: #fde4e0; }
.t-board { background: var(--white) var(--shippo); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 22px 20px; text-align: center; position: relative; min-height: 210px; display: flex; flex-direction: column; justify-content: center; cursor: text; }
.t-board.shake { animation: shake2 .3s ease; }
@keyframes shake2 { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.t-text { font-family: var(--font-pop); font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.5; margin: 0 0 6px; color: var(--ink); }
.t-play-oni .t-text { font-size: clamp(1rem, 2.2vw, 1.35rem); text-align: left; }
.t-kana { margin: 0 0 6px; font-size: 1rem; color: var(--ink-2); letter-spacing: .05em; }
.t-play-oni .t-kana { text-align: left; font-size: .9rem; }
.t-roma { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: clamp(1rem, 2.4vw, 1.35rem); letter-spacing: .04em; color: #9a8a80; word-break: break-all; }
.t-play-oni .t-roma { font-size: .95rem; text-align: left; }
.t-text .done, .t-kana .done { color: #c8bdb2; }
.t-roma .done { color: var(--ink); font-weight: 700; }
.t-roma .next { color: var(--white); background: var(--shu); border-radius: 4px; padding: 0 2px; }
.t-ready { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: rgba(255,248,236,.92); border-radius: var(--radius); font-family: var(--font-pop); font-size: clamp(1.2rem, 4vw, 2.2rem); color: var(--shu); }
.t-ready.pop { animation: stamp .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.t-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.t-actions { text-align: center; margin-top: 14px; }

/* 結果 */
.t-res-left { display: flex; flex-direction: column; align-items: center; }
.t-res-left .t-face { width: 150px; height: auto; }
.t-res-mode { font-weight: 700; margin: 4px 0; }
.t-result .g-receipt { max-width: 420px; }
.t-res-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.t-bubble { top: 6px; translate: -50% -60%; z-index: 2; }

/* 音のオン・オフ */
.sound-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  border: var(--border); border-radius: 99px; background: var(--white); padding: 6px 14px 6px 10px; font-weight: 700; font-size: .85rem;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
.sound-toggle svg { width: 22px; height: 22px; }
.sound-toggle[aria-pressed="true"] { background: var(--yamabuki); }
.sound-toggle:hover { transform: translateY(-2px); }

/* =========================================
   ミニゲーム3「えんデビ！札そろえ」
   ========================================= */
.games-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
@media (max-width: 980px) { .games-list { grid-template-columns: 1fr; max-width: 560px; } }
.gt-cards { display: flex; justify-content: center; align-items: flex-end; height: 96px; width: 100%; border-radius: 16px; background: #fdf0e6; border: 2px solid #e8553d; }
.gt-card { width: 52px; height: 74px; margin: 0 -6px; border: 2.5px solid var(--ink); border-radius: 7px; display: grid; place-items: center; background: #fff; box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(calc((var(--i) - 2) * 9deg)) translateY(calc(var(--i) * 0px)); transform-origin: bottom center; margin-bottom: 8px; transition: transform .2s; }
.gt-card img { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.gt-card.s0 { background: #fde4ea; } .gt-card.s1 { background: #e0eef9; } .gt-card.s2 { background: #fde3d2; } .gt-card.s3 { background: #e9ecf5; }
.game-teaser:hover .gt-card { transform: rotate(calc((var(--i) - 2) * 14deg)) translateY(-6px); }

/* 札 */
.h-card { --w: clamp(92px, 16vw, 150px); width: var(--w); aspect-ratio: 5 / 7.4; padding: 0; border: none; background: none; cursor: pointer; position: relative; font-family: inherit; }
.h-inner { position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 4px 0 var(--ink); overflow: hidden; display: block;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, filter .2s; }
.h-spring .h-inner { background: #fde4ea; } .h-summer .h-inner { background: #dfeefa; } .h-autumn .h-inner { background: #fde3d2; } .h-winter .h-inner { background: #e8ebf5; }
.h-inner::before { content: ""; position: absolute; inset: 5px; border: 2px solid rgba(58,42,36,.25); border-radius: 8px; }
.h-eto { position: absolute; top: 6px; left: 8px; font-family: var(--font-pop); font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 5px; }
.h-icon { position: absolute; top: 6px; right: 6px; width: 28%; }
.h-icon svg { width: 100%; height: auto; display: block; }
.h-inner img { position: absolute; left: 8%; right: 8%; bottom: 16%; width: 84%; height: auto; }
.h-season { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: .78rem; }
.h-mark { position: absolute; top: 40%; left: 50%; translate: -50% -50%; background: var(--shu); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px; font-weight: 700; font-size: .85rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.h-card:hover .h-inner { transform: translateY(-6px); }
.h-card.marked .h-inner { transform: translateY(-18px) rotate(-3deg); filter: grayscale(.6) brightness(.92); box-shadow: 3px 10px 0 var(--ink); }
.h-card.marked .h-mark { opacity: 1; }
.h-card.hot .h-inner { box-shadow: 0 0 0 4px var(--yamabuki), 3px 4px 0 var(--ink); animation: hotGlow 1.2s ease-in-out infinite; }
@keyframes hotGlow { 50% { box-shadow: 0 0 0 7px rgba(245,189,58,.5), 3px 4px 0 var(--ink); } }
.h-card.dim .h-inner { filter: grayscale(.7) opacity(.65); }
.h-hand { display: flex; justify-content: center; gap: clamp(6px, 1.6vw, 16px); margin: 22px 0 14px; flex-wrap: nowrap; }
.h-hand.deal .h-card { animation: dealIn .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@keyframes dealIn { from { opacity: 0; transform: translate(0, -80px) rotate(-20deg) scale(.6); } }
.h-card.out { animation: cardOut .3s ease-in forwards; }
@keyframes cardOut { to { opacity: 0; transform: translateY(-70px) rotate(14deg) scale(.7); } }
.h-card.in { animation: dealIn .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.h-fan { display: flex; justify-content: center; margin-bottom: 10px; }
.h-fan .h-card { --w: 96px; margin: 0 -10px; transform: rotate(calc((var(--d) * 12.5 - 2) * 8deg)); transform-origin: bottom center; pointer-events: none; }
.h-now { text-align: center; font-weight: 700; margin: 0 0 8px; }
.h-now b { font-family: var(--font-pop); font-weight: 400; font-size: 1.3rem; color: var(--shu); }
.h-now span { background: var(--yamabuki); border: 2px solid var(--ink); border-radius: 99px; padding: 0 8px; font-size: .85rem; }
.h-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.h-swap:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.h-left { text-align: center; font-size: .85rem; color: var(--ink-2); margin: 8px 0 0; }
.h-yaku { text-align: center; margin: 4px auto 16px; max-width: 420px; background: var(--white) var(--shippo); border: var(--border); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); animation: stamp .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.h-yaku-name { font-family: var(--font-pop); font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; color: var(--shu); }
.h-yaku.none .h-yaku-name { color: var(--ink-2); }
.h-yaku-pt { margin: 0; font-weight: 700; font-size: 1.1rem; }
.h-table { max-width: 640px; margin: 18px auto 0; background: var(--white); border: var(--border); border-radius: 16px; padding: 8px 14px; text-align: left; }
.h-table summary { cursor: pointer; font-weight: 700; }
.h-table ul { list-style: none; padding: 0; margin: 8px 0 0; }
.h-table li { display: grid; grid-template-columns: 9em 1fr auto; gap: 8px; padding: 4px 6px; border-bottom: 2px dashed rgba(58,42,36,.15); font-size: .85rem; align-items: center; }
.h-table li em { font-style: normal; font-weight: 700; color: var(--shu); }
.h-table li.on { background: #fff3c4; border-radius: 8px; }
@media (max-width: 560px) { .h-table li { grid-template-columns: 1fr auto; } .h-table li span { grid-column: 1 / -1; order: 3; } }
.h-fan .h-card { transform: rotate(calc((var(--k) - 2) * 9deg)) translateY(calc(var(--k) * 0px)); margin: 0 -14px; } .h-fan .h-card:nth-child(1), .h-fan .h-card:nth-child(5) { margin-top: 18px; }

/* =========================================
   ミニゲーム4「えんデビ！リバーシ」
   ========================================= */
.games-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 760px) { .games-list { grid-template-columns: 1fr; max-width: 560px; } }
.gt-board { display: grid; grid-template-columns: repeat(4, 22px); gap: 2px; padding: 6px; background: #3f7a3a; border: 3px solid #6b4423; border-radius: 8px; height: auto; margin: 4px 0; }
.gt-board span { width: 22px; height: 22px; background: #5a9a4c; border-radius: 2px; display: grid; place-items: center; }
.gt-board img { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #222; background: #fff; }
.gt-board .b img { background: #333; }
.game-teaser:hover .gt-board .w img { animation: discFlip .8s ease; }

/* 石 */
.o-disc { display: grid; place-items: center; border-radius: 50%; border: 2.5px solid #1e1a17; overflow: hidden; aspect-ratio: 1; box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.12); }
.o-disc.white { background: radial-gradient(circle at 35% 30%, #fff, #f1ece4); }
.o-disc.black { background: radial-gradient(circle at 35% 30%, #4a4340, #1c1816); }
.o-disc img { width: 88%; height: 88%; object-fit: cover; border-radius: 50%; }
.o-disc.black img { filter: drop-shadow(0 0 1px rgba(255,255,255,.4)); }
.o-disc.flip { animation: discFlip .5s ease; }
.o-disc.drop { animation: discDrop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes discFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.1); } 100% { transform: rotateY(0); } }
@keyframes discDrop { from { transform: scale(1.6); opacity: 0; } }

/* 設定 */
.o-preview { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 4px; }
.o-preview .o-disc { width: 96px; }
.o-vs { font-family: var(--font-pop); font-size: 1.6rem; color: var(--shu); }
.o-h { font-family: var(--font-pop); font-weight: 400; font-size: 1.15rem; margin: 18px 0 10px; }
.o-etos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 760px; margin: 0 auto; }
@media (max-width: 600px) { .o-etos { grid-template-columns: repeat(4, 1fr); } }
.o-eto { border: var(--border); border-radius: 14px; background: var(--white); padding: 6px 4px; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; box-shadow: 2px 2px 0 var(--ink); font-family: inherit; }
.o-eto b { width: 100%; font-size: .85rem; }
.o-eto.on { background: var(--yamabuki); transform: translateY(-2px); }
.o-mini { width: 34px; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid #1e1a17; aspect-ratio: 1; overflow: hidden; }
.o-mini.white { background: #fff; } .o-mini.black { background: #2a2421; }
.o-mini img { width: 90%; height: 90%; border-radius: 50%; object-fit: cover; }
.o-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.o-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; border: var(--border); border-radius: 16px; background: var(--white); padding: 8px 14px; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); font-family: inherit; }
.o-opt small { font-weight: 500; font-size: .75rem; color: var(--ink-2); }
.o-opt.on { background: var(--yamabuki); }
.o-opt .o-mini { width: 44px; }
.o-note { font-size: .8rem; color: var(--ink-2); margin: 6px 0 0; }
.o-start { margin-top: 22px; }

/* 対局 */
.o-game { max-width: 640px; }
.o-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.o-player { display: flex; align-items: center; gap: 8px; background: var(--white); border: var(--border); border-radius: 16px; padding: 6px 10px; box-shadow: 2px 2px 0 var(--ink); transition: transform .2s; }
.o-player:last-child { flex-direction: row-reverse; text-align: right; }
.o-player .o-disc { width: 44px; flex: none; }
.o-player small { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); line-height: 1.2; }
.o-player b { font-family: var(--font-pop); font-size: 1.6rem; line-height: 1; }
.o-player.active { background: #fff3c4; transform: translateY(-3px); box-shadow: 0 0 0 3px var(--shu), 2px 2px 0 var(--ink); }
.o-msg { margin: 0; font-weight: 700; font-size: .9rem; text-align: center; color: var(--shu); max-width: 12em; }
.o-board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 10px; background: #3f7a3a; border: 6px solid #6b4423; border-radius: 14px; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2c5a28; aspect-ratio: 1; }
.o-cell { position: relative; background: #5a9a4c; border: none; border-radius: 3px; padding: 6%; cursor: default; display: grid; place-items: center; }
.o-cell.can { cursor: pointer; }
.o-cell.can::after { content: ""; width: 26%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.45); animation: bob 1.4s ease-in-out infinite; }
.o-cell.can:hover { background: #79b86a; }
.o-cell.last { box-shadow: inset 0 0 0 3px var(--yamabuki); }
.o-cell .o-disc { width: 100%; }
.o-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.o-hint { font-size: .85rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.o-end { position: absolute; inset: 18% 8%; background: rgba(255,248,236,.96); border: var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12px; animation: stamp .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.o-end-title { font-family: var(--font-pop); font-size: clamp(1.6rem, 6vw, 2.4rem); margin: 0; color: var(--shu); }
.o-end.lose .o-end-title { color: var(--ink-2); }
.o-end-score { font-size: 1.3rem; margin: 4px 0 12px; } .o-end-score b { font-family: var(--font-pop); font-size: 2rem; }
.o-end-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 520px) { .o-msg { grid-column: 1 / -1; order: 3; max-width: none; } .o-top { grid-template-columns: 1fr 1fr; } .o-player b { font-size: 1.2rem; } .o-player .o-disc { width: 34px; } }
.o-board { grid-template-rows: repeat(8, 1fr); } .o-cell { aspect-ratio: 1; min-height: 0; }

/* ゲーム後の「もどる」ボタン */
.end-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.end-nav .btn { font-size: .88rem; padding: 8px 18px; background: var(--white); animation: none; }
.end-nav .btn:hover { background: var(--yamabuki); }
.o-end .end-nav { margin-top: 10px; }
.o-end { inset: 12% 6%; }
/* 札そろえ：季節の文字をなくしたので、絵を少し下に */
.h-inner img { bottom: 7%; }

/* タイピング：いま打っている文字 */
.t-text .cur, .t-kana .cur { color: var(--ink); text-decoration: underline 3px var(--shu); text-underline-offset: 6px; }
.t-kana .cur { text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* リバーシ：3つの干支＝3つの強さ */
.o-etos.three { grid-template-columns: repeat(3, 1fr); max-width: 620px; gap: 14px; }
.o-etos.three .o-eto { position: relative; padding: 18px 8px 10px; gap: 4px; }
.o-etos.three .o-mini { width: 52px; }
.o-etos.three .o-eto b { font-size: 1.1rem; font-family: var(--font-pop); font-weight: 400; }
.o-etos.three .o-eto small { width: 100%; font-size: .75rem; color: var(--ink-2); }
.o-lv { position: absolute; top: -12px; left: 50%; translate: -50% 0; border: 2px solid var(--ink); border-radius: 99px; padding: 0 12px; font-weight: 700; font-size: .82rem; background: #fff; white-space: nowrap; }
.lv-easy .o-lv { background: #b4dc7f; } .lv-normal .o-lv { background: var(--yamabuki); } .lv-hard .o-lv { background: var(--shu); color: #fff; }
@media (max-width: 600px) { .o-etos.three { grid-template-columns: repeat(3, 1fr); } .o-etos.three .o-mini { width: 38px; } }

/* =========================================
   ミニゲーム5「えんデビ！BINGO」
   ========================================= */
.gt-bingo { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; padding: 6px; background: var(--white); border: 3px solid var(--ink); border-radius: 10px; margin: 4px 0; }
.gt-bingo span { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 6px; display: grid; place-items: center; font-size: .5rem; font-weight: 700; background: #fff8ec; position: relative; }
.gt-bingo span img { width: 24px; height: 24px; border-radius: 50%; }
.gt-bingo span.on::after { content: ""; position: absolute; inset: 1px; border: 3px solid var(--shu); border-radius: 50%; animation: stamp .6s both; }
.b-head { padding-bottom: 20px; }
.b-tabs { display: inline-flex; gap: 6px; background: var(--white); border: var(--border); border-radius: 99px; padding: 5px; box-shadow: var(--shadow); flex-wrap: wrap; justify-content: center; }
.b-tab { border: none; background: none; border-radius: 99px; padding: 8px 18px; font-weight: 700; cursor: pointer; font-family: inherit; }
.b-tab[aria-selected="true"] { background: var(--shu); color: #fff; }
.b-tabdesc { margin: 12px 0 0; color: var(--ink-2); font-size: .9rem; }
.b-body { padding: 0 0 64px; }
.b-h { font-family: var(--font-pop); font-weight: 400; font-size: 1.05rem; text-align: center; margin: 22px 0 10px; }

/* 抽選機 */
.b-caller { max-width: 760px; margin: 0 auto; text-align: center; }
.b-machine { position: relative; width: min(360px, 80vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fdecd3); border: 6px solid var(--ink); box-shadow: var(--shadow-lg); display: grid; place-items: center; overflow: hidden; }
.b-drum { position: absolute; inset: 0; animation: spin 12s linear infinite; opacity: .25; }
.b-drum img { position: absolute; width: 18%; left: 41%; top: 41%; border-radius: 50%; transform: rotate(calc(var(--i) * 45deg)) translateY(-150%); }
.b-ball { position: relative; z-index: 1; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--white); border: 4px solid var(--ink); display: grid; place-items: center; animation: stamp .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.b-ball.empty { background: transparent; border-style: dashed; animation: none; }
.b-ball img { width: 70%; height: auto; }
.b-ball.spin img { width: 55%; border-radius: 50%; }
.b-ball b { position: absolute; bottom: 10%; font-family: var(--font-pop); font-weight: 400; font-size: clamp(1.1rem, 4vw, 1.6rem); background: var(--shu); color: #fff; border: 3px solid var(--ink); border-radius: 99px; padding: 0 14px; white-space: nowrap; }
.b-count { font-weight: 700; margin: 14px 0 8px; }
.b-caller-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; }
.b-draw { font-size: 1.15rem; padding: 12px 30px; }
.b-draw:disabled { filter: grayscale(.4); opacity: .7; }
.b-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.b-history span { position: relative; border: 2px solid rgba(58,42,36,.25); border-radius: 50%; aspect-ratio: 1; background: #fff; display: grid; place-items: center; filter: grayscale(1) opacity(.35); }
.b-history span.on { filter: none; border-color: var(--ink); background: #fff3c4; }
.b-history img { width: 88%; height: 88%; border-radius: 50%; }
.b-history i { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: .62rem; font-weight: 700; background: var(--shu); color: #fff; border-radius: 99px; padding: 0 5px; border: 1.5px solid var(--ink); }
.b-caller.compact .b-machine { width: min(220px, 60vw); }
.b-caller.compact .b-history { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }

/* カード */
.b-cardwrap { max-width: 560px; margin: 0 auto; text-align: center; }
.b-cardno { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.b-cardno b { font-family: var(--font-pop); font-size: 1.6rem; letter-spacing: .15em; background: var(--white); border: var(--border); border-radius: 12px; padding: 0 12px; }
.b-open { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; align-items: center; }
.b-open input { width: 7em; font: inherit; text-transform: uppercase; text-align: center; border: var(--border); border-radius: 12px; padding: 4px 8px; background: var(--paper); }
.b-err { width: 100%; color: var(--shu); font-size: .8rem; font-weight: 700; min-height: 1em; }
.b-status { min-height: 2.2em; font-family: var(--font-pop); font-size: 1.6rem; }
.b-status.reach { color: #d48a00; animation: blink .8s steps(2) infinite; }
.b-status.bingo { color: var(--shu); animation: stamp .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.b-card { background: #fff8ec; border: 4px solid var(--ink); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-lg); }
.b-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; padding: 0 4px; }
.b-card-title { font-family: var(--font-pop); color: var(--shu); font-size: 1.1rem; }
.b-card-no { font-weight: 700; font-size: .8rem; }
.b-letters, .b-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.b-letters span { font-family: var(--font-pop); font-size: 1.4rem; color: #fff; background: var(--shu); border-radius: 8px; border: 2px solid var(--ink); }
.b-letters span:nth-child(2) { background: var(--yamabuki); color: var(--ink); } .b-letters span:nth-child(3) { background: #8fb85a; } .b-letters span:nth-child(4) { background: #3c5a92; } .b-letters span:nth-child(5) { background: #a98bc7; }
.b-grid { margin-top: 4px; }
.b-cell { position: relative; aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--c1, #fff) 18%, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px; font-family: inherit; color: var(--ink); }
button.b-cell { cursor: pointer; }
.b-cell img { width: 72%; height: auto; border-radius: 50%; }
.b-cell span { font-size: clamp(.5rem, 1.9vw, .72rem); font-weight: 700; line-height: 1.1; margin-top: 1px; white-space: nowrap; }
.b-cell.free { background: var(--yamabuki); }
.b-free-logo { font-family: var(--font-pop); font-size: clamp(.9rem, 3.4vw, 1.3rem) !important; color: var(--shu); }
.b-cell.marked::after { content: ""; position: absolute; inset: 6%; border: 5px solid var(--shu); border-radius: 50%; opacity: .85; animation: stamp .35s cubic-bezier(.3, 1.8, .5, 1) both; }
.b-cell.called:not(.marked) { box-shadow: 0 0 0 3px var(--yamabuki); animation: hotGlow 1.2s ease-in-out infinite; }
.b-card-btns { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.b-solo-box { margin-top: 18px; }

/* 印刷 */
.b-print-ctrl { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.b-print-ctrl .g-chip.on { background: var(--yamabuki); }
.b-printnote { text-align: center; font-size: .8rem; color: var(--ink-2); }
.b-print-area { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 14px; }
.b-print-area .b-card { box-shadow: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-bingo > *:not(main), .b-head, .b-print-ctrl, .b-printnote, .sound-toggle, .header, .footer { display: none !important; }
  .b-body { padding: 0; }
  .b-print-area { display: block; margin: 0; }
  .b-print-area .b-card { width: 125mm; margin: 0 auto 8mm; break-inside: avoid; page-break-inside: avoid; }
  .b-print-area .b-card:nth-child(2n) { page-break-after: always; break-after: page; }
}
.b-letters span { display: grid; place-items: center; text-align: center; }
@media print {
  .b-print-area .b-card { width: 98mm; margin: 0 auto 6mm; padding: 3mm; }
  .b-print-area .b-card .b-cell span { font-size: 6.5pt; }
}