/* 1年n組の模擬店のページ（文化祭は上の帯と下の「この文化祭について」で示す）：教室の札 → 黒板に貼った手書きポスター → 配布プリント。
   看板の絵の紅白・えんじ・金は飾りの色に残す */
:root {
  --wall: #f6efe1;
  --wall-line: #ece2cd;
  --ink: #2a211c;
  --muted: #7a6a5c;
  --red: #c4232b;
  --red-deep: #8e141a;
  --gold: #d9a636;
  --board: #24473a;
  --board-dark: #1b382d;
  --chalk: #f4f1e6;
  --chalk-yellow: #f6e27a;
  --chalk-pink: #f5b3c0;
  --wood: #9a6b3f;
  --wood-dark: #6f4a29;
  --paper: #fffdf6;
  --hand: "Yusei Magic", "Zen Kaku Gothic New", sans-serif;
  --display: "Dela Gothic One", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--wall);
  background-image:
    linear-gradient(var(--wall-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--wall-line) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--red-deep); }
/* 日本語を文節の切れ目で折り返す（対応ブラウザだけ） */
p, h1, h2, h3 { word-break: auto-phrase; text-wrap: pretty; }
img { max-width: 100%; display: block; }
main { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
section, aside { margin-bottom: 64px; }

/* ---------- いちばん上：文化祭の参加ブースだと分かる帯 ---------- */
.fes-ribbon {
  margin: 0 -16px 28px;
  padding: 8px 16px;
  text-align: center;
  background: var(--red-deep);
  color: #fff3c9;
  font-family: var(--hand);
  font-size: 15px;
  letter-spacing: .08em;
}
.top { margin-bottom: 36px; padding: 0 16px; }

/* ---------- このページの目次 ---------- */
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 0 auto 48px; padding: 0 16px; }
.toc a {
  padding: 6px 16px;
  background: var(--paper);
  border: 2px solid var(--wood-dark);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--hand);
  font-size: 15px;
}
.toc a:hover { background: #fff3c9; }

/* ---------- 1年n組 ---------- */
.classroom { max-width: 1080px; margin: 0 auto; text-align: center; position: relative; padding-top: 30px; }
.class-plate {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 26px;
  background: var(--paper);
  border: 3px solid var(--wood-dark);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 20px;
  box-shadow: 0 4px 0 var(--wood-dark);
}
.banner {
  margin: 0 auto;
  max-width: 900px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transform: rotate(-.6deg);
}
.banner img { width: 100%; height: auto; }
h1 { margin: 28px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 9vw, 60px); line-height: 1.2; color: var(--red); }
.h1-sub { display: block; font-size: .45em; color: var(--ink); }
.h1-after { display: block; font-family: var(--hand); font-size: .42em; color: var(--red-deep); margin-top: 6px; }
.date { margin: 10px 0 0; font-family: var(--hand); font-size: 18px; color: var(--red-deep); }
/* 開店までの日数：押せる物に見えないよう、荷札（値札）の形の札にする */
.status {
  position: relative;
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 16px 4px 26px;
  background: #fff3c9;
  color: var(--red-deep);
  font-family: var(--hand);
  font-size: 15px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
/* 札の穴 */
.status::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--wall); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.status.is-open { background: var(--red); color: #fff; }
.intro { margin: 18px auto 0; max-width: 620px; font-size: 16px; }
.intro p { margin: 0 0 8px; }

/* ---------- 張り紙 ---------- */
.notice {
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 22px 22px;
  text-align: center;
  background: #fff6c4;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  transform: rotate(.8deg);
}
.notice::before, .notice::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 90px;
  height: 22px;
  background: rgba(196, 35, 43, .55);
}
.notice::before { left: 18px; transform: rotate(-6deg); }
.notice::after { right: 18px; transform: rotate(5deg); }
.notice h2 { margin: 0 0 8px; font-family: var(--hand); font-weight: 400; font-size: clamp(20px, 5vw, 26px); color: var(--red-deep); }
.notice p { margin: 0; font-size: 15px; }
.notice .notice-pig { display: block; width: 64px; height: auto; margin: 0 auto 4px; }

/* ---------- 黒板 ---------- */
.board {
  position: relative;
  padding: 26px 22px 18px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(160deg, var(--board), var(--board-dark));
  border: 14px solid var(--wood);
  border-bottom-width: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .2);
  color: var(--chalk);
}
/* 黒板の上の紙の花 */
.board::before {
  content: "";
  position: absolute;
  top: -26px;
  left: -10px;
  right: -10px;
  height: 30px;
  background:
    radial-gradient(circle at 15px 15px, #f2a7b9 13px, transparent 14px) 0 0 / 60px 30px repeat-x,
    radial-gradient(circle at 45px 15px, #fff 13px, transparent 14px) 0 0 / 60px 30px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.board-head h2 { margin: 0; font-family: var(--hand); font-weight: 400; font-size: clamp(26px, 6vw, 36px); color: var(--chalk); text-decoration: underline wavy var(--chalk-yellow) 2px; text-underline-offset: 8px; }
.count { margin: 0; font-family: var(--hand); font-size: 18px; color: var(--chalk-yellow); }
.shelf-note { margin: 0 0 18px; font-family: var(--hand); font-size: 14px; color: var(--chalk-pink); }
.updated { margin: 18px 0 0; text-align: right; font-family: var(--hand); font-size: 13px; color: rgba(244, 241, 230, .7); }

/* ---------- 店（手書きポスター） ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 20px; padding-top: 12px; }
.shop {
  --paper-c: #fff8d6;
  --tilt: -1deg;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
  background: var(--paper-c);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
  transform: rotate(var(--tilt));
  transition: transform .15s ease;
}
.shop:nth-child(5n+1) { --tilt: -1.2deg; }
.shop:nth-child(5n+2) { --tilt: .9deg; }
.shop:nth-child(5n+3) { --tilt: -.5deg; }
.shop:nth-child(5n+4) { --tilt: 1.3deg; }
.shop:nth-child(5n+5) { --tilt: -.8deg; }
a.shop:hover, a.shop:focus-visible { transform: rotate(0) scale(1.03); }
/* マスキングテープ：紙はクリーム1色、テープだけ 黄・ピンク・ミント・水色・ラベンダー を順番に */
.shop::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 70px;
  height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(245, 214, 120, .85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.shop:nth-child(5n+2)::before { background: rgba(240, 160, 175, .85); transform: translateX(-50%) rotate(4deg); }
.shop:nth-child(5n+3)::before { background: rgba(140, 205, 170, .85); transform: translateX(-50%) rotate(-2deg); }
.shop:nth-child(5n+4)::before { background: rgba(140, 190, 235, .85); transform: translateX(-50%) rotate(3deg); }
.shop:nth-child(5n+5)::before { background: rgba(190, 165, 230, .85); transform: translateX(-50%) rotate(-4deg); }
.eye { width: 100%; aspect-ratio: 1280 / 670; object-fit: cover; background: #eadfc8; border: 4px solid #fff; }
.eye-none {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.3;
  color: var(--red);
  background: repeating-linear-gradient(45deg, #fdf4dc 0 12px, #f7ebcb 12px 24px);
}
/* タイトルは必ず2行分の高さにして、隣のカードと作者の行をそろえる。長いものは「…」 */
.title {
  margin: 10px 2px 8px;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.owner { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.owner .icon { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: #ddd; border: 2px solid #fff; }
.oname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 売れた店の貯金箱（右下の角）。コインは背中の差し込み口から上へ積む */
.shop.sold { padding-bottom: 16px; }
.shop.sold .title { padding-right: 40px; }
.shop.sold .owner { padding-right: 66px; }
.piggy { position: absolute; right: -16px; bottom: -16px; z-index: 2; width: 84px; pointer-events: none; }
.piggy > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.piggy.gold { width: 100px; right: -22px; bottom: -18px; }
/* 箱の下の端＝差し込み口の線。そこで切るので、いちばん下のコインが口に少し入って見える */
.piggy .pile { position: absolute; z-index: 2; left: calc(60% - 22px); bottom: 90%; width: 44px; height: 100px; overflow: hidden; }
.piggy .pile img { position: absolute; left: calc(10px + var(--x)); bottom: calc(var(--k) * 11px - 6px); width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .5)); }

.shop.empty { opacity: .9; }
.shop.empty .title { color: var(--muted); }
.empty-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-family: var(--hand); color: var(--chalk); }
.empty-note a { color: var(--chalk-yellow); }

/* ---------- スタンプラリー ---------- */
/* 後日公開。body に data-rally="hidden" があるあいだは、スタンプラリーに関わる所を全部隠す */
[data-rally="hidden"] .rally-only { display: none !important; }
.rally { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.rally-lead { margin: 0 0 6px; font-size: 15px; }
.rally-hint { margin: 0 0 18px; }
.mycard-form { max-width: 460px; margin: 0 auto 14px; }
.mycard-form label { display: block; margin-bottom: 6px; font-family: var(--hand); font-size: 18px; color: var(--red-deep); }
.mycard-row { display: flex; align-items: center; background: #fff; border: 2px solid var(--wood-dark); border-radius: 999px; padding: 4px 4px 4px 14px; }
.mycard-row .at { color: var(--muted); font-size: 13px; }
.mycard-row input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 6px 4px; background: transparent; }
.mycard-row button { flex: none; padding: 7px 18px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; cursor: pointer; }
/* 自分のカード：配布されたスタンプカード（白い厚紙に赤い罫） */
.mycard { max-width: 460px; margin: 0 auto 26px; padding: 14px 16px 12px; background: #fff; border: 2px dashed var(--red); border-radius: 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.mycard-name { margin: 0 0 10px; font-family: var(--hand); font-size: 16px; }
.slots { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.slots li { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed rgba(196, 35, 43, .4); display: grid; place-items: center; color: rgba(196, 35, 43, .45); font-family: var(--hand); font-size: 18px; }
.slots li.on { border: 0; }
.slots li img { max-width: none; width: 64px; height: 64px; transform: rotate(-8deg); }
.slots li.on:nth-child(even) img { transform: rotate(10deg); }
.mycard-msg { margin: 10px 0 0; font-weight: 700; color: var(--red-deep); }

/* ゴールした人：コルクボードに名札を画鋲で貼る */
.cork {
  position: relative;
  padding: 22px 18px 24px;
  background: radial-gradient(rgba(120, 80, 40, .18) 1px, transparent 1.5px) 0 0 / 7px 7px, #c99a63;
  border: 12px solid var(--wood);
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25), 0 8px 18px rgba(0, 0, 0, .18);
}
.cork-head { display: inline-block; margin: 0 0 16px; padding: 4px 22px; background: var(--paper); font-family: var(--display); font-weight: 400; font-size: 20px; transform: rotate(-1.5deg); box-shadow: 0 3px 6px rgba(0, 0, 0, .2); }
.achievers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
.achievers li:nth-child(3n+1) .nametag-goal { transform: rotate(-2deg); }
.achievers li:nth-child(3n+2) .nametag-goal { transform: rotate(1.5deg); }
.nametag-goal {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px 10px;
  border: 0;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.nametag-goal:hover, .nametag-goal:focus-visible { transform: rotate(0) scale(1.04) !important; }
/* 画鋲 */
.nametag-goal::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8b8b, var(--red) 60%, var(--red-deep)); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.nametag-goal > img, .nametag-goal .noicon { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #ddd; }
.goal-name { max-width: 100%; font-family: var(--hand); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-stamps { display: flex; }
.goal-stamps img { width: 20px; height: 20px; margin: 0 -2px; }
.nametag-goal b { font-size: 12px; color: var(--red); }
.cork-empty { margin: 0; padding: 10px; font-family: var(--hand); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* 記念画像 */
.memorial { width: min(92vw, 560px); padding: 14px; border: 0; border-radius: 12px; background: var(--paper); }
.memorial::backdrop { background: rgba(20, 12, 8, .7); }
.memorial img { width: 100%; height: auto; border-radius: 6px; }
.memorial-wait { margin: 20px 8px; font-family: var(--hand); font-size: 16px; }
.memorial-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.memorial-actions a, .memorial-actions button { padding: 8px 18px; border-radius: 999px; border: 2px solid var(--red); background: #fff; color: var(--red-deep); font: inherit; font-weight: 900; font-size: 14px; text-decoration: none; cursor: pointer; }
.memorial-actions .btn-save { background: var(--red); color: #fff; }
.notice .notice-sub { margin-top: 8px; font-size: 14px; }

/* ---------- 配布プリント ---------- */
.print {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 26px 22px;
  background:
    linear-gradient(90deg, transparent 38px, rgba(196, 35, 43, .25) 38px, rgba(196, 35, 43, .25) 40px, transparent 40px),
    repeating-linear-gradient(transparent 0 31px, #dfe7f1 31px 32px),
    #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.print h2 { margin: 0 0 14px 24px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 5vw, 28px); }
.steps { margin: 0; padding: 0 0 0 24px; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 18px 44px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--red);
  border-radius: 50%;
  font-family: var(--hand);
  font-size: 18px;
  color: var(--red);
}
.steps h3 { margin: 0 0 4px; font-family: var(--hand); font-weight: 400; font-size: 19px; color: var(--red-deep); }
.steps p { margin: 0 0 4px; font-size: 15px; }
.hint { font-size: 12px !important; color: var(--muted); }
.tags { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-width: 360px; }
.tag {
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  padding: 6px 12px;
  border-radius: 4px;
  border: 2px dashed var(--red);
  background: #fff4f4;
  color: var(--red-deep);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tag:hover { background: #ffe6e6; }
.print-note { margin: 6px 0 0 24px; font-size: 14px; }
/* 募集記事へ。文字リンクだけだと見落とすので、はっきりボタンにする */
.recruit-btn { display: inline-block; margin: 8px 0 4px; padding: 10px 22px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 4px 0 var(--red-deep); }
.recruit-btn::after { content: " →"; }
.recruit-btn:hover { background: var(--red-deep); }

/* ---------- 係・見出し ---------- */
.sec-title { margin: 0 0 18px; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 5vw, 28px); }
.sec-title::before, .sec-title::after { content: "✿"; color: var(--red); margin: 0 10px; font-size: .8em; }
.staff-list { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.nametag {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  padding: 0 0 14px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.nametag .role { width: 100%; padding: 4px; background: var(--red); color: #fff; font-weight: 900; font-size: 13px; text-align: center; }
.nametag img { width: 72px; height: 72px; border-radius: 50%; margin: 12px 0 6px; border: 3px solid var(--wall); }
.nametag .pname { font-family: var(--hand); font-size: 18px; }

/* ---------- この文化祭について ---------- */
.about {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 26px 26px;
  background: #fff;
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
}
.about-lead { margin: 0 0 18px; font-size: 15px; }
.principal-row { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.principal { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--gold); flex: none; }
.office-role { margin: 0; font-weight: 900; color: var(--red); font-size: 13px; }
.principal-name { margin: 0 0 4px; font-family: var(--display); font-size: 22px; }
.principal-row p { margin: 0 0 4px; font-size: 15px; }
.link-chalk { font-weight: 700; }

/* ---------- 入学案内 ---------- */
.admission {
  padding: 22px 20px 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(142, 20, 26, .3);
}
.adm-label { display: inline-block; margin: 0 0 6px; padding: 2px 14px; border: 1px solid #fff; border-radius: 999px; font-size: 13px; font-weight: 700; }
.admission h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 5vw, 28px); }
.admission p { margin: 0 0 16px; }
.adm-btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--red-deep);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.adm-btn:hover { background: #fff3c9; }

/* ---------- ほかの教室（校門の絵を見出しに） ---------- */
.others-pic { max-width: 720px; margin: 0 auto 14px; padding: 8px; background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); transform: rotate(.6deg); }
.others-pic img { width: 100%; height: auto; }
/* 6ブースを 3×2（スマホは 2×3）に並べる */
.booths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.booth { position: relative; display: block; overflow: hidden; color: var(--ink); text-decoration: none; background: #fff; padding: 8px 8px 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
/* 絵はリーダーの顔が入るように 4:3 で切り抜いてある（*_face.webp） */
.booth img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.booth-text { padding: 8px 4px 0; }
.booth-text h3 { margin: 0; font-family: var(--hand); font-weight: 400; font-size: 18px; }
.booth-text p { margin: 0; font-size: 12px; color: var(--muted); }
.booth:hover { transform: translateY(-3px); }

footer {
  padding: 32px 16px 48px;
  text-align: center;
  font-size: 14px;
  border-top: 8px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--red) 0 24px, #fff 24px 48px) 8;
  background: var(--paper);
}
footer p { margin: 0 0 6px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .fes-ribbon { font-size: 13px; letter-spacing: .02em; }
  .toc a { padding: 5px 12px; font-size: 13px; }
  .about { padding: 22px 16px; }
  .board { padding: 22px 12px 14px; border-width: 10px; border-bottom-width: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .shop { padding: 7px 7px 10px; }
  .title { font-size: 13px; }
  .owner { font-size: 11px; gap: 6px; }
  .owner .icon { width: 24px; height: 24px; }
  .shop.sold .title { padding-right: 28px; }
  .shop.sold .owner { padding-right: 46px; }
  .piggy { width: 62px; right: -10px; }
  .piggy.gold { width: 76px; right: -14px; }
  .piggy .pile { left: calc(60% - 18px); width: 36px; height: 76px; }
  .piggy .pile img { left: calc(9px + var(--x) * .7); width: 18px; height: 18px; bottom: calc(var(--k) * 8px - 5px); }
  /* 赤い縦線は左端から15pxあたり、文字はその右から */
  .print { padding: 22px 14px 18px 28px; background-position: -24px 0, 0 0, 0 0; }
  .print h2, .steps, .print-note { margin-left: 0; padding-left: 0; }
  .booths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* スマホでは中央ぞろえの説明文を左ぞろえに（折り返しが中途半端にならないように） */
  .intro, .notice p, .rally-lead, .rally-hint, .admission p, .empty-note { text-align: left; }
  .intro br, .notice p br, .rally-lead br { display: none; }
  .slots { gap: 6px; }
  .slots li { width: 48px; height: 48px; }
  .slots li img { width: 54px; height: 54px; }
  .achievers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cork { padding: 18px 10px 20px; border-width: 8px; }
  .booth-text h3 { font-size: 14px; }
  .booth-text p { font-size: 10px; overflow-wrap: anywhere; }
}