/* =========================================================
   Lab10周年 告知ページ
   KVの配色：オレンジ / ライム / 深緑
   ========================================================= */
:root {
  --orange: #ee7a2b;
  --orange-l: #f08a45;
  --orange-pale: #fdebdc;
  --lime: #aed04d;
  --lime-pale: #eef6d6;
  --green: #006934;
  --green-d: #004d26;
  --ink: #102a1b;
  --text: #24342a;
  --muted: #5d6b62;
  --paper: #fffaf2;
  --white: #fff;
  --line: 3px solid var(--green);
  --shadow: 5px 5px 0 var(--green);
  --radius: 18px;
  /* 本文・見出しとも M PLUS 1p（2026-10-15 ユーザー指定。丸ゴシックの M PLUS Rounded 1c は丸すぎるのでやめた）。見出しだけ変えたい時は --font-head を差し替える */
  --font: "M PLUS 1p", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-head: var(--font);
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  color: var(--text);
  background: var(--paper);
  line-height: 1.85;
  font-size: 16px;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; color: var(--ink); font-family: var(--font-head); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.sp { display: none; }
@media (max-width: 640px) { .sp { display: inline; } }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- 見出し ---------- */
.eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--lime);
  border: 2px solid var(--green);
  border-radius: 999px;
}
.eyebrow-ink { background: var(--white); }
.h2 {
  font-size: clamp(26px, 4.6vw, 42px);
  font-weight: 900;
  color: var(--green);
  letter-spacing: .02em;
  margin-bottom: 20px;
}
.h3 { font-size: 22px; font-weight: 800; margin: 56px 0 18px; }
.h3 small { display: block; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.lead { font-size: 17px; max-width: 46em; }
.note { font-size: 14px; color: var(--muted); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px;
  padding: 10px 26px;
  font: inherit; font-weight: 800; font-size: 16px; line-height: 1.4;
  text-align: center; text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--green);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--green); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green); }
.btn-green { background: var(--green); color: var(--white); box-shadow: 0 5px 0 var(--green-d); border-color: var(--green-d); }
.btn-green:hover { box-shadow: 0 7px 0 var(--green-d); }
.btn-orange { background: var(--orange); }
.btn-lime { background: var(--lime); }
.btn-white { background: var(--white); }
.btn-sm { min-height: 40px; padding: 6px 18px; font-size: 14px; box-shadow: 0 3px 0 var(--green-d); }
.btn-lg { min-height: 60px; font-size: 18px; padding: 12px 32px; }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"] {
  background: #e6e9e4; color: var(--muted); border-color: #b9c2bb; box-shadow: none; cursor: default; transform: none;
}
.ext { font-size: .85em; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 242, .94);
  backdrop-filter: blur(8px);
  border-bottom: var(--line);
}
.header-inner {
  width: min(1180px, 100% - 32px); margin-inline: auto;
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand img { width: auto; height: 36px; }
.brand-10th { font-weight: 900; font-size: 13px; line-height: 1; letter-spacing: .04em; color: var(--ink); background: var(--orange); border: 2px solid var(--green); border-radius: 999px; padding: 4px 8px; }
.gnav { display: flex; gap: 22px; margin-left: auto; }
.gnav a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.gnav a:hover { color: var(--orange); }
@media (max-width: 860px) {
  .gnav { display: none; }
  .header-inner .btn { margin-left: auto; }
}
@media (max-width: 400px) {
  .header-inner { gap: 10px; }
  .brand img { height: 28px; }
  .brand-10th { font-size: 11px; padding: 3px 6px; }
  .header-inner .btn-sm { padding: 6px 12px; font-size: 13px; }
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  padding: 0 16px 56px;
  /* 斜線は支給aiの実測値（45°・白12%重ね・周期はタイトル幅の約1/5）。部品側に斜線を持たせないのでズレが出ない */
  --stripe: clamp(56px, 7.6vw, 140px);
  background: repeating-linear-gradient(135deg, var(--orange) 0 calc(var(--stripe) / 2), var(--orange-l) 0 var(--stripe));
  border-bottom: var(--line);
}

/* ---- ヒーローの舞台：部品は hero-kv/_build/layout.py が配置を書き出す ---- */
.hero-stage {
  position: relative;
  margin-inline: -16px;
  /* 1画面目に3つの動線が入る高さ。横長すぎ・縦長すぎにならないよう幅の 1/2.6〜1/2 に収める */
  height: clamp(calc(100vw / 2.6), calc(100svh - var(--header-h) - 266px), calc(100vw / 2));
  container-type: size;
  overflow: hidden;
  isolation: isolate;           /* 部品の z-index（負の値も）を舞台の中だけで重ねる */
  --k: calc(100cqh / 640);      /* 高さ基準の1pt */
  --pk: calc(72cqw / 1200);     /* 建物写真の1pt（幅の72%に写真を敷く） */
}
.hero-band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  height: calc(72 * var(--k));
  background: var(--green);
}
.hp {
  --ax: var(--dax); --ay: var(--day); --x: var(--dx); --y: var(--dy); --w: var(--dw); --u: var(--du, var(--k)); --r: var(--dr, 0deg);
  position: absolute; margin: 0;
  /* --pcl は PC だけの基準位置の上書き（layout.py の axc。走る男性を下のパネルの右端に揃える時など） */
  left: var(--pcl, calc(var(--ax) * 100% + var(--x) * var(--u)));
  top: calc(var(--ay) * 100% + var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  z-index: var(--z);
  rotate: var(--r);
  animation: hero-in .9s cubic-bezier(.3, 1.5, .5, 1) var(--in, 0s) backwards;
}
.hp img {
  width: 100%;
  transform-origin: var(--o, 50% 50%);
  animation: var(--loop, none) var(--t, 3s) ease-in-out var(--dl, 0s) infinite;
  transition: scale .25s cubic-bezier(.3, 1.8, .5, 1);
}
.hp img:hover { scale: 1.08; }

/* ---- 先頭の走る男性（run3）のボードに残り日数を出す（2026-10-17）。揺れは画像と文字をまとめた .hp-loop に掛ける ---- */
.hp-loop {
  display: block; position: relative;
  transform-origin: var(--o, 50% 50%);
  animation: var(--loop, none) var(--t, 3s) ease-in-out var(--dl, 0s) infinite;
  transition: scale .25s cubic-bezier(.3, 1.8, .5, 1);
}
.hp-loop img { animation: none; transition: none; }
.hp-loop img:hover { scale: 1; }
.hp-loop:hover { scale: 1.08; }
/* 位置は run3.webp の白地の実測（横 58.7〜93.1%・縦 30.4〜82.2%）。文字の大きさはボードの幅（cqw）に比例させる */
.hp-board {
  position: absolute; left: 58.7%; top: 30.4%; width: 34.4%; height: 51.8%;
  container-type: inline-size;
  display: grid; place-items: center;
  rotate: -1.5deg;
}
.hp-board-face {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; font-weight: 900; color: var(--green); white-space: nowrap;
}
.hp-board-face small { font-size: max(17cqw, 10px); font-weight: 800; margin-bottom: 5cqw; letter-spacing: -.04em; }
.hp-board-face i { font-style: normal; font-size: 22cqw; }
.hp-board-face b {
  font-size: 66cqw; font-weight: 900; color: var(--orange);
  letter-spacing: -.06em; margin: 0 0 2cqw -.06em;
  font-variant-numeric: tabular-nums;
}
.hp-board-face b.is-3 { font-size: 46cqw; }      /* 3桁の時 */
.hp-board-face b.is-word { font-size: 30cqw; letter-spacing: 0; margin: 4cqw 0; }  /* 「開催！」など文字の時 */
.hp-board-face b.is-landed { animation: board-land .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes board-land { from { scale: 1.35; } }
/* ボードが小さい時（タブレット幅など）は「当日まで」を省く */
@container (max-width: 46px) { .hp-board-face small { display: none; } }
.hp-photo { animation: hero-rise 1s cubic-bezier(.2, .9, .3, 1) backwards; }
/* タイトルは写真と同時に、速めに大きく出す（小さく透明な時間を短く） */
.hp-title { animation: hero-in-title .75s cubic-bezier(.3, 1.4, .5, 1) backwards; }
/* タイトルと写真の画像が揃うまで登場を待つ（index.html のスクリプトが html に .hero-go を付ける。最大1.5秒で見切り発車） */
.js:not(.hero-go) .hp { animation-play-state: paused; }

/* 登場：舞台の中央から外へ飛び出して、少し行き過ぎて止まる */
@keyframes hero-in {
  from { opacity: 0; scale: .2; translate: calc(var(--fx, 0) * var(--k)) calc(var(--fy, 0) * var(--k)); }
  40% { opacity: 1; }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 12%; } }
@keyframes hero-in-title { from { opacity: 0; scale: .55; } 25% { opacity: 1; } }

/* ループの動き（部品ごとに周期と遅れをずらす） */
.fx-bob     { --loop: fx-bob; }
.fx-tilt    { --loop: fx-tilt; }
.fx-swing   { --loop: fx-swing; }
.fx-twinkle { --loop: fx-twinkle; }
.fx-pour    { --loop: fx-pour; }
.fx-drift   { --loop: fx-drift; }
.fx-pulse   { --loop: fx-pulse; }
.fx-jiggle  { --loop: fx-jiggle; }
.fx-sway    { --loop: fx-sway; }
.fx-nod     { --loop: fx-nod; }
.fx-boing   { --loop: fx-boing; }
.fx-slurp   { --loop: fx-slurp; }
.fx-wobble  { --loop: fx-wobble; }
.fx-rumble  { --loop: fx-rumble; }
.fx-hop     { --loop: fx-hop; }
@keyframes fx-bob     { 50% { transform: translateY(-4%); } }
@keyframes fx-tilt    { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fx-swing   { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4%); } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.45) rotate(45deg); opacity: .6; } }
@keyframes fx-pour    { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes fx-drift   { 0%, 100% { transform: translateY(0) rotate(0); } 33% { transform: translateY(5%) rotate(-3deg); } 66% { transform: translateY(2%) rotate(3deg); } }
@keyframes fx-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fx-jiggle  { 0%, 70%, 100% { transform: scale(1) rotate(0); } 78% { transform: scale(1.12) rotate(-5deg); } 86% { transform: scale(.96) rotate(4deg); } 93% { transform: scale(1.03) rotate(-1deg); } }
@keyframes fx-sway    { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fx-nod     { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.5deg); } }
@keyframes fx-boing   { 0%, 82%, 100% { transform: scale(1); } 86% { transform: scale(1.05, .93); } 90% { transform: scale(.97, 1.05) translateY(-2%); } 95% { transform: scale(1.01, .99); } }
@keyframes fx-slurp   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes fx-wobble  { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes fx-rumble  { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-1.5%, -2%); } 20% { transform: translate(1.5%, -4%); } 30% { transform: translate(-1%, -6%); } 50% { transform: translate(0, -8%); } }
@keyframes fx-hop     { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-9%) rotate(-3deg); } 60% { transform: translateY(-9%) rotate(-2deg); } }

@media (max-width: 760px) {
  .hero-stage {
    height: calc(100vw * 1.2);
    --k: calc(100cqw / 400);
    --pk: calc(150cqw / 1200);
  }
  .hero-band { height: calc(44 * var(--k)); }
  .hp { --ax: var(--max); --ay: var(--may); --x: var(--mx); --y: var(--my); --w: var(--mw); --u: var(--mu, var(--k)); --r: var(--mr, 0deg); transform: scaleX(var(--mfl, 1)); left: calc(var(--ax) * 100% + var(--x) * var(--u)); }
  .pc-only { display: none; }
  /* スマホはボードが小さいので「当日まで」を省き、あと・日・数字を大きく */
  .hp-board-face small { display: none; }
  .hp-board-face i { font-size: 26cqw; }
  .hp-board-face b { font-size: 72cqw; }
  .hp-board-face b.is-3 { font-size: 50cqw; }
}

.hero-panel {
  position: relative;
  width: min(1080px, 100%);
  margin: 22px auto 0;
  padding: 26px 26px 28px;
  background: var(--white);
  border: var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.facts li { display: flex; align-items: baseline; gap: 10px; }
.facts span { font-size: 12px; font-weight: 800; color: var(--white); background: var(--green); border-radius: 6px; padding: 1px 8px; }
.facts b { font-size: 19px; font-weight: 900; color: var(--ink); }
.facts small { font-size: 13px; }
.cta3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.cta {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  text-decoration: none; color: var(--ink);
  border: var(--line); border-radius: 16px;
  box-shadow: 0 5px 0 var(--green);
  transition: transform .12s, box-shadow .12s;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--green); }
.cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green); }
.cta-event { background: var(--green); color: var(--white); border-color: var(--green-d); box-shadow: 0 5px 0 var(--green-d); }
.cta-cf { background: var(--orange); }
.cta-advent { background: var(--lime); }
.cta-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--green); }
.cta-ico svg { width: 26px; height: 26px; }
.cta-txt { font-weight: 900; font-size: 17px; line-height: 1.35; }
.cta-txt small { display: block; font-size: 12px; font-weight: 700; opacity: .9; }
@media (max-width: 760px) {
  .hero { padding: 0 12px 40px; }
  .hero-stage { margin-inline: -12px; }
  .hero-panel { margin-top: 16px; padding: 18px 16px 20px; }
  .facts { justify-content: flex-start; flex-direction: column; gap: 4px; }
  .facts b { font-size: 17px; }
  .cta3 { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- ごあいさつ ---------- */
.about { padding: 80px 0 72px; }
.about-inner { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.about-emblem img { width: 100%; filter: drop-shadow(6px 6px 0 var(--green)); animation: spin-in 1s ease-out both; }
@keyframes spin-in { from { transform: rotate(-12deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.three-ways { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.three-ways li { padding: 8px 16px; border: 2px solid var(--green); border-radius: 12px; background: var(--white); font-weight: 700; font-size: 15px; }
.three-ways b { color: var(--orange); font-weight: 900; margin-right: 8px; font-size: 18px; }
@media (max-width: 760px) {
  .about { padding: 56px 0; }
  .about-inner { grid-template-columns: 1fr; gap: 24px; }
  .about-emblem { width: 200px; margin: 0 auto; }
}

/* ---------- 共通セクション ---------- */
.sec { padding: 80px 0; border-top: var(--line); }
@media (max-width: 760px) { .sec { padding: 56px 0; } }
.card {
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.card h3 { font-size: 21px; font-weight: 900; margin-bottom: 14px; }
@media (max-width: 640px) { .card { padding: 20px 18px; } }

/* ---------- 当日のこと ---------- */
.sec-event { background: var(--lime-pale); }
.event-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 36px; }
.info { margin: 0; display: grid; gap: 14px; }
.info > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed #cfdcc0; }
.info dt { font-weight: 900; color: var(--green); }
.info dd { margin: 0; font-weight: 800; color: var(--ink); line-height: 1.6; }
.info dd small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.info .btn { margin-top: 6px; }
.bring { position: relative; background: var(--orange-pale); display: flex; flex-direction: column; }
.bring p { flex: 0; }
.bring .btn { margin-top: auto; }
.bring-tag { display: inline-block; align-self: flex-start; font-weight: 900; background: var(--orange); color: var(--ink); border: 2px solid var(--green); border-radius: 999px; padding: 0 12px; font-size: 14px; }
@media (max-width: 860px) { .event-grid { grid-template-columns: 1fr; } }

/* ---- 飾りの絵（アドベントの飾りと同じ画像 assets/img/advent/）。ヒーローのようにふわふわ揺れて縮む（2026-10-17） ---- */
.pop-deco {
  transform-origin: 50% 100%;
  --t: 1.5s;
  /* ヒーローの切り抜き（走る人など）に倣って、ライムのふちを付ける。暗い絵が緑・淡い地に溶けないように */
  filter: drop-shadow(2.5px 0 0 var(--lime)) drop-shadow(-2.5px 0 0 var(--lime)) drop-shadow(0 2.5px 0 var(--lime)) drop-shadow(0 -2.5px 0 var(--lime));
  animation: deco-pyoko var(--t) var(--dl, 0s) infinite;
  pointer-events: none; user-select: none;
}
/* ぴょこぴょこ: ためて（つぶれる）→ 跳ねて伸びる → 着地でつぶれる → 少し戻って止まる。下（足元）を軸にする */
@keyframes deco-pyoko {
  0%   { transform: translateY(0) rotate(0) scale(1, 1); animation-timing-function: ease-out; }
  12%  { transform: translateY(0) rotate(0) scale(1.07, .9); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  32%  { transform: translateY(-14%) rotate(-4deg) scale(.93, 1.08); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  46%  { transform: translateY(0) rotate(2deg) scale(1.09, .88); animation-timing-function: ease-out; }
  56%  { transform: translateY(0) rotate(0) scale(.96, 1.04); animation-timing-function: ease-in-out; }
  66%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
}
/* 「大募集」カードの右上のオカモチ。左へ20°傾けて腕をカードの中へ下ろす。
   同じ絵を2枚重ねる: 裏の1枚（z-index:-1）は腕の担当で、左端の切り口（絵の高さ63〜76%）はカードの裏に隠れる。
   手前の1枚（.is-front）は箱と手だけを切り抜いてカードの枠の上に重ねる。切り抜きの左の境目（横30%・縦0〜50%）はカードの上辺より上を通るので、腕の継ぎ目は見えない */
.event-grid { isolation: isolate; }   /* 飾りの z-index:-1 を、カードの裏・セクションの背景より手前に収める */
.bring-deco { position: absolute; z-index: -1; right: 14px; top: 0; width: 170px; height: auto; translate: 0 -68%; rotate: -20deg; --t: 1.6s; }
.bring-deco.is-front { z-index: 1; clip-path: polygon(30% 0, 100% 0, 100% 100%, 48% 100%, 31% 50%, 30% 50%); }
@media (max-width: 860px) { .event-grid { row-gap: 84px; } }   /* カードが縦に並ぶ時は、オカモチが上のカードの裏に隠れないよう間を空ける */
@media (max-width: 640px) { .bring-deco { width: 128px; right: 6px; } }

.tt { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.tt-part { background: var(--white); border: var(--line); border-radius: var(--radius); }
.tt-part:first-child { grid-row: span 2; }
/* 見出しは「第◯部 時間帯」／タイトルの2行。右側を空けて、そこに飾りの絵を置く（上へ少しはみ出す） */
.tt-part header {
  position: relative;
  padding: 12px calc(var(--deco-w, 80px) + 26px) 14px 18px;
  background: var(--green); color: var(--white);
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}
.tt-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.tt-part h4 { color: var(--white); font-size: 19px; font-weight: 900; line-height: 1.4; }
.tt-head time { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.tt-deco { position: absolute; right: 12px; bottom: 6px; display: flex; align-items: flex-end; height: 96px; }
.tt-deco .pop-deco { height: 100%; width: auto; }
.tt-part:nth-child(1) { --deco-w: 150px; }
.tt-part:nth-child(1) .pop-deco + .pop-deco { margin-left: -26px; height: 92%; --dl: .25s; }   /* こたつA・Bを寄せて並べる */
.tt-part:nth-child(2) { --deco-w: 52px; }
.tt-part:nth-child(2) .pop-deco { --t: 1.4s; --dl: .5s; animation-name: deco-sway; }
/* パイナップル男は腰が切り口なので、見出しの下端にそろえて下をはみ出させない。上下には揺らさない（浮くと切り口が見える） */
.tt-part:nth-child(2) .tt-deco { bottom: 0; clip-path: inset(-200px -200px 0 -200px); }
@keyframes deco-sway {   /* 跳ねずに、足元を軸にのび縮みして首を振る */
  0%   { transform: rotate(0) scale(1, 1); animation-timing-function: ease-out; }
  14%  { transform: rotate(0) scale(1.06, .9); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  32%  { transform: rotate(-6deg) scale(.94, 1.1); animation-timing-function: ease-in; }
  46%  { transform: rotate(3deg) scale(1.07, .9); animation-timing-function: ease-out; }
  58%  { transform: rotate(0) scale(.97, 1.03); animation-timing-function: ease-in-out; }
  68%, 100% { transform: rotate(0) scale(1, 1); }
}
.tt-part:nth-child(3) { --deco-w: 56px; }
.tt-part:nth-child(3) .pop-deco { height: 90%; --t: 1.7s; --dl: .8s; }
.tt-no { font-size: 13px; font-weight: 900; color: var(--ink); background: var(--lime); border-radius: 6px; padding: 0 8px; }
.tt-party header { background: var(--orange); }
.tt-party h4, .tt-party .tt-head time { color: var(--ink); }
.tt-party .tt-no { background: var(--white); }
.tt ul { list-style: none; margin: 0; padding: 6px 18px 10px; }
.tt li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e6ece2; font-size: 15px; line-height: 1.6; }
.tt li:last-child { border-bottom: 0; }
.tt li time { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; font-size: 14px; padding-top: 1px; }
.tt li span { font-weight: 700; color: var(--ink); }
.tt li em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13.5px; }
.tt li.tbd time { color: var(--muted); }
.tt-items { display: grid; gap: 6px; } /* 開始・終了が同じ企画を1行にまとめた時は縦に並べる */
.tt-items .tt-item + .tt-item { padding-top: 6px; border-top: 1px dashed #e6ece2; }
@media (max-width: 860px) {
  .tt { grid-template-columns: 1fr; }
  .tt-part:first-child { grid-row: auto; }
}
@media (max-width: 480px) {
  .tt li { grid-template-columns: 1fr; gap: 0; }
  .tt-deco { height: 70px; }
  .tt-part:nth-child(1) { --deco-w: 92px; }
  .tt-part:nth-child(1) .pop-deco + .pop-deco { margin-left: -20px; }
  .tt-part:nth-child(2) { --deco-w: 38px; }
  .tt-part:nth-child(3) { --deco-w: 40px; }
  .tt-part h4 { font-size: 17px; }
}

/* ---------- クラファン ---------- */
.sec-cf {
  background: repeating-linear-gradient(-32deg, var(--orange) 0 46px, var(--orange-l) 46px 92px);
}
.cf-box {
  background: var(--white);
  border: 4px solid var(--green);
  border-radius: 28px;
  box-shadow: 8px 8px 0 var(--green);
  padding: 48px;
}
.cf-body { max-width: 760px; margin-inline: auto; text-align: center; }
.cf-body .eyebrow { background: var(--orange); }
.cf-meta { display: inline-flex; margin: 8px 0 26px; }
.cf-meta > div { display: flex; gap: 12px; align-items: baseline; padding: 8px 20px; background: var(--orange-pale); border-radius: 12px; }
.cf-meta dt { font-weight: 900; color: var(--green); font-size: 14px; }
.cf-meta dd { margin: 0; font-weight: 900; font-size: 20px; color: var(--ink); }
.cf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 640px) {
  .cf-box { padding: 32px 18px; border-radius: 20px; box-shadow: 5px 5px 0 var(--green); }
  .cf-body { text-align: left; }
  .cf-actions .btn { width: 100%; }
}

/* ---------- アドベントカレンダー ---------- */
.sec-advent { background: var(--paper); }
.adv-status {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 28px;
  margin: 32px 0 26px;
  padding: 20px 24px;
  background: var(--green); color: var(--white);
  border-radius: var(--radius);
}
.adv-today { margin: 0; font-weight: 800; font-size: 17px; line-height: 1.6; }
.adv-today b { color: var(--lime); font-size: 1.25em; }
.adv-today a { color: var(--white); }
.adv-stats { display: flex; gap: 24px; }
.adv-stats div { text-align: center; line-height: 1.2; }
.adv-stats b { display: block; font-size: 30px; font-weight: 900; color: var(--lime); font-variant-numeric: tabular-nums; }
.adv-stats span { font-size: 12px; font-weight: 700; }
.meter { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 99px; transition: width .8s ease-out; }
@media (max-width: 640px) {
  .adv-status { grid-template-columns: 1fr; padding: 18px; }
  .adv-stats { justify-content: space-between; }
}

.adv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seg { display: inline-flex; border: var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.seg button { font: inherit; font-weight: 800; font-size: 15px; padding: 8px 20px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--white); }
.adv-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; }
.lg::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 2px solid var(--green); }
.lg-posted::before { background: var(--orange); }
.lg-late::before { background: #e9ece6; }
.lg-open::before { background: var(--lime-pale); border-style: dashed; }

/* カレンダー表示 */
.adv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.adv-wd { text-align: center; font-size: 13px; font-weight: 900; color: var(--green); padding: 4px 0; }
.adv-wd.sun { color: #c4471a; }
.adv-wd.sat, .wd-sat { color: #1f5fbf !important; }
.wd-sun { color: #c4471a !important; }
/* オレンジ・緑のマスでは沈むので濃くする */
.day.is-posted .wd-sun, .row.is-posted .wd-sun { color: #8f1a0c !important; }
.day.is-posted .wd-sat, .row.is-posted .wd-sat { color: #163f8a !important; }
.day {
  position: relative;
  min-height: 132px;
  padding: 8px 9px 10px;
  border: 2px solid var(--green);
  border-radius: 12px;
  background: var(--white);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; line-height: 1.45;
}
.day-date { display: flex; align-items: baseline; gap: 4px; font-weight: 900; color: var(--green); }
.day-date b { font-size: 22px; line-height: 1; }
.day-date small { display: none; } /* マス内の曜日は出さない（見出しの曜日で足りる。2026-10-15 決定） */
.day-mo { font-size: .6em; margin-right: 1px; }
.day.is-open { background: var(--lime-pale); border-style: dashed; }
.day-empty { margin-top: auto; font-weight: 800; color: var(--green); font-size: 12px; }
.day.is-late .day-empty { color: var(--muted); }
.day.is-posted { background: var(--orange); }
.day.is-late { background: #e9ece6; }
.day.is-posted .day-date, .day.is-posted .day-date small { color: var(--ink); }
.day.is-today { outline: 4px solid var(--orange); outline-offset: 2px; }
.day.is-posted.is-today { outline-color: var(--green); }
.day.is-final { background: var(--green); color: var(--white); border-color: var(--green-d); border-style: solid; }
.day.is-final .day-date, .day.is-final .day-date small { color: var(--lime); }
.day-flag { position: absolute; top: -9px; right: 8px; font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 0 6px; border-radius: 6px; background: var(--orange); color: var(--ink); border: 2px solid var(--green); }
.ent { display: block; text-decoration: none; color: inherit; }
.ent:focus-visible { border-radius: 0; }
.day.is-posted .ent:focus-visible { outline-color: var(--green); } /* オレンジ地に同色の枠が埋もれるため */
.ent-state { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; color: var(--green); }
.day.is-posted .ent-state { color: var(--ink); }
/* 同日2人目以降の区切り（角丸を付けないこと：点線の端が曲がる） */
.ent + .ent { border-top: 1px dashed currentColor; margin-top: 4px; padding-top: 8px; }
.ent-name { display: block; font-weight: 900; color: var(--ink); overflow-wrap: anywhere; }
.ent-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; overflow-wrap: anywhere; }
/* 掲載先アイコン（URLから自動判定） */
.media { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #111; vertical-align: middle; box-shadow: 0 0 0 1px var(--white); }
.media svg { width: 14px; height: 14px; display: block; }
.media-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.media-facebook { background: #fff; color: #0866ff; }
.media-facebook svg { width: 24px; height: 24px; }
.media-youtube { background: #ff0000; }
.media-youtube svg { width: 15px; height: 15px; }
.media-bluesky { background: #1185fe; }
.media-note svg, .media-web svg { width: 15px; height: 15px; }
.media-web { background: var(--green); }
.ent .media { display: grid; margin-top: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 未公開マスの飾り（お楽しみに＝ヒーローの部品をランダム、準備中＝即身仏） */
.day { overflow: visible; }
.day > :not(.day-deco):not(.day-flag) { position: relative; z-index: 1; }
/* 右上に決まった大きさの枠を取り、その中央に収める（細長い絵が右の線に寄らないように） */
.day-deco { position: absolute; z-index: 0; top: 10px; right: 10px; width: 42%; height: 46%; object-fit: contain; object-position: 50% 50%; opacity: .9; filter: contrast(.8); rotate: var(--rot, 0deg); pointer-events: none; user-select: none; }
.day-deco.is-monk { rotate: none; }
/* 飾りはゆっくり左右に揺れる（2026-10-17。縮まずに、下寄りを軸に振り子のように傾く）。周期と開始位置は main.js の decoImg が1枚ずつばらつかせる。
   傾き（--rot）は rotate プロパティ、揺れは transform なので重なって効く */
.day-deco, .row-deco { transform-origin: 50% 85%; animation: deco-rock var(--ft, 3.4s) ease-in-out var(--fd, 0s) infinite; }
@keyframes deco-rock {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
/* 右上の飾りに名前がかかっても読めるよう、地色のふちを付ける */
.day.is-open:not(.is-final) .ent-name, .day.is-open:not(.is-final) .day-empty { text-shadow: 0 0 2px var(--lime-pale), 0 0 2px var(--lime-pale), 0 0 3px var(--lime-pale); }
.day.is-late .ent-name, .day.is-late .day-empty { text-shadow: 0 0 2px #e9ece6, 0 0 2px #e9ece6, 0 0 3px #e9ece6; }
.day.is-open:not(.is-final) .day-date small { text-shadow: 0 0 2px var(--lime-pale), 0 0 2px var(--lime-pale); }
a.ent:hover .ent-title { text-decoration: underline; }
.day.is-posted .ent-name, .day.is-posted .ent-title { color: var(--ink); }
.day.is-final .ent-name { color: var(--white); }
.day.is-final .day-empty { color: var(--lime); }

@media (max-width: 760px) {
  .adv-grid { gap: 4px; }
  .day { min-height: 64px; padding: 5px 4px; border-radius: 8px; }
  .day-date b { font-size: 16px; white-space: nowrap; }
  .day-date small, .ent-title { display: none !important; }
  .media { width: 18px; height: 18px; box-shadow: 0 0 0 1px var(--white); }
  .media svg { width: 11px; height: 11px; }
  .media-facebook svg { width: 18px; height: 18px; }
  .ent .media { margin-top: 2px; }
  /* 2桁の日付の右に収まる幅に絞る */
  .day-deco { top: 5px; right: 4px; width: 40%; height: 30%; }
  .day.is-open:not(.is-final) .day-date b { text-shadow: 0 0 2px var(--lime-pale), 0 0 2px var(--lime-pale); }
  .day.is-late .day-date b { text-shadow: 0 0 2px #e9ece6, 0 0 2px #e9ece6; }
  .day-empty { font-size: 9px; line-height: 1.25; letter-spacing: -.04em; padding-top: 2px; }
  .ent-name { font-size: 10px; line-height: 1.3; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ent + .ent { display: none; }
  .day-flag { font-size: 8px; padding: 0 3px; top: -8px; right: 2px; }
}

/* 一覧表示 */
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 16px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 14px;
}
.row-date { font-weight: 900; color: var(--green); line-height: 1.2; }
.row-date b { font-size: 22px; }
.row-date small { display: block; font-size: 12px; color: var(--muted); }
.row-body { min-width: 0; }
.row-name { font-weight: 900; color: var(--ink); }
.row-title { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.row-title a { font-weight: 700; }
.row-title .media { margin-left: 6px; vertical-align: -5px; }
.row-name + .media { margin-left: 6px; }
.row-end { display: flex; align-items: center; gap: 12px; }
.row-deco { display: block; height: 46px; width: auto; max-width: 76px; object-fit: contain; opacity: .9; filter: contrast(.8); rotate: var(--rot, 0deg); pointer-events: none; user-select: none; }
.row-deco.is-monk { height: 50px; rotate: none; }
.row-status { font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--green); white-space: nowrap; }
.row.is-posted { background: var(--orange-pale); border-color: var(--orange); }
.row.is-posted .row-status { background: var(--orange); color: var(--ink); }
.row.is-late { background: #f1f3ef; }
.row.is-late .row-status { background: #e9ece6; color: var(--muted); border-color: #9aa59d; }
.row.is-open { background: var(--lime-pale); border-style: dashed; }
.row.is-open .row-status { background: var(--lime); color: var(--ink); }
.row.is-today { outline: 4px solid var(--orange); outline-offset: 2px; }
.row.is-final { background: var(--green); color: var(--white); border-style: solid; }
.row.is-final .row-date, .row.is-final .row-name { color: var(--lime); }
.row.is-final .row-date small { color: var(--white); }
.row-sub + .row-sub { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #c9d3c4; }
@media (max-width: 560px) {
  .row { grid-template-columns: 64px 1fr; gap: 10px; }
  .row { position: relative; }
  .row-end { grid-column: 2; justify-self: start; }
  .row-deco { position: absolute; right: 12px; bottom: 6px; height: 44px; max-width: 68px; }
  .row-deco.is-monk { height: 46px; }
}

.adv-error { margin-top: 12px; font-weight: 700; color: #b23b10; }

.join { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px 32px; margin-top: 48px; background: var(--orange-pale); }
.join p { margin: 0; }
.join-body p + p { margin-top: .8em; }
/* ボタンの上にシャトル（アドベントの飾り一覧の11番）。タイムテーブルの見出しの飾りと同じ、ライムのふち＋ぴょこぴょこ（2026-10-17） */
.join-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.join-deco { height: 190px; width: auto; --t: 1.6s; --dl: .4s; }
.join .join-eyebrow {
  display: inline-block; margin-bottom: 10px; padding: 2px 14px;
  font-size: 13px; font-weight: 900; letter-spacing: .06em; color: var(--white);
  background: var(--orange); border: 2px solid var(--green); border-radius: 999px;
}
.join-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.join-points li {
  padding: 4px 14px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 2px solid var(--green); border-radius: 16px;
}
@media (max-width: 860px) {
  .join { grid-template-columns: 1fr; }
  .join-action .btn { width: 100%; }
  /* カードが1列の時は、ボタンの上ではなく枠の右上・見出しの右に（少し上へはみ出す）。見出しは右を空けて重ならないように */
  .join { position: relative; }
  .join-deco { position: absolute; top: -34px; right: 14px; height: 124px; }
  .join .join-eyebrow, .join h3 { margin-right: 70px; }
}
.join + .share { margin-top: 28px; }

.share { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px 32px; margin-top: 48px; background: var(--lime-pale); }
.share p { margin: 0; }
.tag-big {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-weight: 900; font-size: 26px; line-height: 1.2; color: var(--green);
  background: var(--white); border: var(--line); border-radius: 16px; box-shadow: 0 5px 0 var(--green);
  padding: 14px 28px; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.tag-big small { font-size: 12px; font-weight: 700; color: var(--muted); }
.tag-big:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--green); }
.tag-big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green); }
.tag-big.copied small::before { content: "コピーしました！ "; color: var(--orange); }
.tag-big.copied small { font-size: 0; }
.tag-big.copied small::before { font-size: 12px; }
.tag-big.copy-failed small { font-size: 0; }
.tag-big.copy-failed small::before { content: "コピーできませんでした"; font-size: 12px; color: #b23b10; }
@media (max-width: 760px) { .share { grid-template-columns: 1fr; } }

.faq + .faq { margin-top: 12px; }
.faq { margin-top: 28px; border: 2px solid var(--green); border-radius: 14px; background: var(--white); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 900; color: var(--green); }
.faq p { margin: 0 0 18px; }

/* ---------- これまで ---------- */
.sec-history { background: var(--lime-pale); }
.eras { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: era; }
.eras li { position: relative; padding: 20px 18px 18px; border-top: 6px solid var(--green); }
.eras li::before { content: ""; position: absolute; top: -14px; left: 18px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 4px solid var(--green); }
.era-label { display: block; font-size: 13px; font-weight: 900; color: var(--green); margin-top: 6px; }
.eras p { margin: 4px 0 0; font-weight: 800; color: var(--ink); }
.eras .now { border-top-color: var(--orange); }
.eras .now::before { background: var(--orange); border-color: var(--green); width: 26px; height: 26px; top: -17px; }
.eras .now b { color: var(--orange); font-weight: 900; }
.eras .now .era-label { color: var(--orange); }   /* 今年の日付も「10周年だよ！全員集合！」と同じオレンジに（2026-10-17） */

/* 見出しの右・年表の上の空きに、「10」の札を持って走る男。アドベントの飾りと同じ、ゆっくり左右に揺れる動き。
   スマホは年表が縦になって右が空くので、年表の下端にそろえて「10周年だよ！全員集合！」の右へ（.wrap の下端＝年表の下端） */
.sec-history .wrap { position: relative; }
.hist-run {
  position: absolute; top: -6px; right: 12px; width: 168px; height: auto;
  transform-origin: 50% 85%;
  animation: deco-rock 3.4s ease-in-out infinite;
  pointer-events: none; user-select: none;
}

/* これまでの写真: 高さをそろえて横に並べ、左へ流し続ける（2周分の半分＝1周分動いたら最初に戻る）。マウスを載せると止まる */
.hist-photos { margin-top: 40px; overflow: hidden; padding: 4px 0 8px; }
.hist-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: hist-loop 70s linear infinite; }
.hist-photos:hover .hist-track { animation-play-state: paused; }
.hist-track li { flex: none; padding-right: 16px; }
.hist-track figure { position: relative; margin: 0; }
.hist-track img { display: block; height: 220px; width: auto; border: 3px solid var(--green); border-radius: 14px; box-shadow: 4px 4px 0 var(--green); background: #dfe6d8; }
.hist-track figcaption { position: absolute; left: 10px; top: 10px; font-size: 13px; font-weight: 900; color: var(--white); background: var(--green); border-radius: 999px; padding: 0 10px; line-height: 1.7; }
@keyframes hist-loop { to { transform: translateX(-50%); } }
/* 「視差効果を減らす」の閲覧者には流さず、横にスクロールして見てもらう */
@media (prefers-reduced-motion: reduce) { .hist-photos { overflow-x: auto; } }
@media (max-width: 760px) {
  .eras { grid-template-columns: 1fr; border-left: 6px solid var(--green); margin-left: 10px; }
  .eras li { border-top: 0; padding: 4px 0 18px 24px; }
  .eras li::before { top: 8px; left: -16px; }
  .eras .now::before { top: 6px; left: -19px; }
  .hist-run { width: 104px; top: auto; bottom: 0; right: 0; }
  .hist-track img { height: 150px; border-radius: 10px; }
  .hist-track li { padding-right: 12px; }
}

/* ---------- チラシ・ポスターの設置場所 ---------- */
/* 見出しと本文の右に写真（PC）。スマホは 見出し→写真→本文 の順（2026-10-19 ユーザー指示） */
.spots-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px;
  grid-template-rows: 1fr auto auto auto 1fr;   /* 上下の 1fr で、文字のまとまりを写真の高さの中で縦中央に */
  grid-template-areas: ". ph" "eb ph" "h2 ph" "ld ph" ". ph";
  margin-bottom: 24px;
}
.spots-head .eyebrow { grid-area: eb; justify-self: start; }
.spots-head .h2 { grid-area: h2; }
.spots-head .lead { grid-area: ld; margin-bottom: 0; }
.spots-photo { grid-area: ph; display: block; align-self: center; }
.spots-photo img { width: 100%; height: auto; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 860px) {
  .spots-head { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "eb" "h2" "ph" "ld"; }
  .spots-photo { margin: 0 0 20px; }
}
.spots-count { font-weight: 800; color: var(--ink); margin: 8px 0 14px; }
.spots-count b { font-size: 30px; color: var(--orange); margin: 0 2px; }
.spots-map {
  position: relative; z-index: 0; isolation: isolate;   /* Leaflet の重なり順をこの枠の中に閉じ込め、固定ヘッダーより前に出さない */
  height: 520px;
  border: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #e8ece5;
}
.spots-map.is-failed { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .spots-map { height: 400px; } }

.spots-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.spot {
  display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
  padding: 14px 16px;
  background: var(--white); border: 2px solid var(--green); border-radius: 14px;
}
.spot-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.55; min-width: 0; }
.spot-name { font-weight: 900; color: var(--ink); overflow-wrap: anywhere; }
.spot-name a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.spot-kinds { display: flex; gap: 4px; }
.spot-kind { font-size: 11px; font-weight: 900; line-height: 1.6; padding: 0 8px; border: 2px solid var(--green); border-radius: 999px; color: var(--ink); }
.spot-kind.is-flyer { background: var(--orange-pale); }
.spot-kind.is-poster { background: var(--lime-pale); }
.spot-note { font-size: 14px; }
.spot-addr { font-size: 12.5px; color: var(--muted); }
.spot-gmap { font-size: 13px; font-weight: 700; }
.spot-show {
  align-self: flex-start;
  font: inherit; font-size: 13px; font-weight: 900; color: var(--ink);
  padding: 3px 14px; background: var(--lime); border: 2px solid var(--green); border-radius: 999px; cursor: pointer;
}
.spot-show:hover { background: var(--orange-l); }
.spot-nomap { font-size: 12px; color: var(--muted); }

/* 地図の中（MapLibre。地図そのものの配色は main.js の labStyle） */
.spots-map.maplibregl-map { font-family: var(--font); font-size: 14px; }
.spots-map .maplibregl-popup { z-index: 3; }   /* 会場のピン（z-index: 2）より手前に出す */
.spots-map .maplibregl-popup-content {
  padding: 12px 30px 12px 16px;
  border: 2px solid var(--green); border-radius: 14px; box-shadow: 3px 3px 0 var(--green);
  font-family: var(--font); font-size: 14px;
}
.spots-map .maplibregl-popup-close-button { font-size: 20px; width: 28px; height: 28px; color: var(--ink); border-radius: 0 12px 0 8px; }
.spots-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.spots-map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.spots-map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--green); }
.spots-map .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.spots-map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.spots-map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--green); }
.spots-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--green); }
.spots-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--green); }
.spots-map .maplibregl-ctrl-attrib a { color: var(--muted); }
.spots-map .maplibregl-cooperative-gesture-screen { font-family: var(--font); font-weight: 800; background: rgba(16, 42, 27, .72); }
.spot-pop .spot-body + .spot-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #c9d3c4; }
/* ピン。丸の中心が地点
   設置場所：画像なしの丸を種類で塗り分ける（チラシ＝オレンジ、ポスター＝緑、両方＝左右半々）。白ふち＋緑の外輪で地図から浮かせる
   会場：白い丸にヘッダーの丸いロゴマーク（assets/img/pin-mark.png は ../logo.png の左端を切り出したもの）と「会場」の札 */
.spot-pin, .spot-dot {
  --flyer: var(--orange); --poster: var(--green);
  border-radius: 50%; background: var(--white);
}
.spot-pin.is-flyer, .spot-dot.is-flyer { background: var(--flyer); }
.spot-pin.is-poster, .spot-dot.is-poster { background: var(--poster); }
.spot-pin.is-both, .spot-dot.is-both { background: linear-gradient(90deg, var(--flyer) 50%, var(--poster) 50%); }
.spot-pin {
  width: 26px; height: 26px; cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--green), 0 3px 0 2px var(--green);
}
.spot-pin:hover { box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px var(--ink); }
.spot-pin.is-venue {
  width: 54px; height: 54px; display: grid; place-items: center; z-index: 2;   /* 会場はほかの場所より大きく、手前に */
  background: var(--white); border-color: var(--green); box-shadow: 0 3px 0 var(--green);
}
.spot-pin.is-venue:hover { border-color: var(--orange); }
.spot-pin.is-venue img { width: 80%; height: 80%; display: block; pointer-events: none; }
.spot-pin-tag {
  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  padding: 0 8px; font-size: 11px; font-weight: 900; line-height: 18px; white-space: nowrap;
  color: var(--white); background: var(--green); border-radius: 999px;
}
.spot-pin-n {
  position: absolute; top: -12px; right: -13px; min-width: 20px; height: 20px; padding: 0 5px;
  font-size: 12px; font-weight: 900; line-height: 16px; text-align: center; color: var(--ink);
  background: var(--white); border: 2px solid var(--green); border-radius: 999px;
}

/* 凡例 */
.spots-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.spots-legend li { display: inline-flex; align-items: center; gap: 6px; }
.spot-dot { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--green); }
.spots-legend img { width: 22px; height: 22px; padding: 2px; background: var(--white); border: 2px solid var(--green); border-radius: 50%; }

/* ---------- アクセス ---------- */
.access-inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.addr { font-weight: 800; font-size: 18px; color: var(--ink); }
.map { border: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: #e8ece5; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .access-inner { grid-template-columns: 1fr; } }

/* ---------- 最後のCTA ---------- */
.final {
  padding: 72px 0 80px;
  text-align: center;
  background: repeating-linear-gradient(-32deg, var(--lime) 0 46px, #b9d75f 46px 92px);
  border-top: var(--line);
}
.final-title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  color: var(--white);
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow:
    3px 0 0 var(--green), -3px 0 0 var(--green), 0 3px 0 var(--green), 0 -3px 0 var(--green),
    2px 2px 0 var(--green), -2px -2px 0 var(--green), 2px -2px 0 var(--green), -2px 2px 0 var(--green),
    5px 6px 0 var(--green);
  margin-bottom: 32px;
}
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 640px) { .final-actions .btn { width: 100%; } }

/* ---------- フッター ---------- */
.site-footer { background: var(--green); color: var(--white); padding: 28px 0; text-align: center; }
.site-footer p { margin: 0; font-weight: 700; }
.site-footer .copy { opacity: .8; margin-top: 4px; }

/* ---------- スマホ用 固定アクションバー ---------- */
.actionbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .actionbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    background: var(--white);
    border-top: var(--line);
  }
  .actionbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 50px;
    text-decoration: none; color: var(--ink);
    border: 2px solid var(--green); border-radius: 12px;
    line-height: 1.2;
  }
  .actionbar a:nth-child(1) { background: var(--green); color: var(--white); }
  .actionbar a:nth-child(2) { background: var(--orange); }
  .actionbar a:nth-child(3) { background: var(--lime); }
  .actionbar b { font-size: 15px; font-weight: 900; }
  .actionbar small { font-size: 10.5px; font-weight: 700; }
}