/* 勝手に擬人化プロジェクト — アーカイブ版の見た目
   「ポップな秋祭り」。レモン・キャンディピンク・かぼちゃ・ソーダの明るい色を、濃いぶどう色の
   太い縁取りで締める（シールのような見た目）。見出しは太い角ゴシック、本文は丸ゴシック。
   一番の見せ場はトップの最初の場面（入ったあとも動き続ける）。スクロールの動きは顔・4コマ・年の帯の三か所だけ（motion.js）。 */

:root {
  --grape: #2b1d5c;       /* 文字・縁取り */
  --grape-light: #8b6cff;
  --candy: #ff4f7b;
  --beni: #ee3a3a;        /* 布団の紅 */
  --candy-light: #ffb3c8;
  --pumpkin: #ff9a1f;
  --lemon: #ffd23f;
  --soda: #2fc4bd;
  --paper: #fffaf5;       /* 地 */
  --line: #f1e3d7;        /* 罫線 */
  --sumi: #2d2440;        /* 本文 */
  --sub: #6b5f86;         /* 補助の文字 */
  --link: #4b36c9;
  --round: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Zen Maru Gothic", "M PLUS Rounded 1c", "Kosugi Maru",
           "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  --heavy: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --measure: 40rem;
  --wide: 60rem;          /* スプラッシュの幅 */
  --col: 44rem;           /* 本文の列の幅（ページの種類で変える） */
  --head: 64rem;          /* ヘッダー・フッターの幅 */
  --gutter: 1rem;
  --pill: 999px;
  --bd: 2.5px solid var(--grape);
  --pop-shadow: 4px 4px 0 var(--grape);
  --stripe: linear-gradient(90deg, var(--candy) 0 25%, var(--pumpkin) 25% 50%, var(--lemon) 50% 75%, var(--soda) 75%);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}
@media (min-width: 48em) { :root { --gutter: 2rem; } }
body.read { --col: 44rem; }   /* 記事・固定ページ：読む列 */
body.list { --col: 52rem; }   /* 一覧・検索：サムネイルが入るぶん広く */
body.home { --col: 56rem; }

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--sumi); font-family: var(--round); line-height: 1.9; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; background: var(--paper); }
main { flex: 1; width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
img, iframe { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a:hover { color: var(--candy); }
:focus-visible { outline: 3px solid var(--candy); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--heavy); font-weight: 800; color: var(--grape); line-height: 1.4; letter-spacing: 0.01em; font-feature-settings: "palt"; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); margin: 1rem 0 1.5rem; }
h1 small { display: block; font-family: var(--round); font-weight: 400; font-size: 0.85rem; color: var(--sub); letter-spacing: 0; margin-top: 0.4rem; }
h2 { font-size: 1.35rem; margin: 3rem 0 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--grape); color: #fff; padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- ヘッダー・フッター */
.site-head { position: relative; display: flex; align-items: center; gap: 0.8rem 1rem; flex-wrap: wrap;
             padding: 0.8rem max(var(--gutter), calc(50% - var(--head) / 2 + var(--gutter))) 1rem; background: #fff; }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--stripe); }
.home .site-head::after { display: none; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--grape); text-decoration: none;
         font-family: var(--heavy); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.brand-tag { font-family: var(--round); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--grape);
             background: var(--lemon); border: 2px solid var(--grape); border-radius: var(--pill); padding: 0 0.6rem; line-height: 1.6;
             transform: rotate(-4deg); }
.brand:hover { color: var(--candy); }
.site-nav { display: flex; gap: 0.15rem; flex-wrap: wrap; margin-left: auto; font-size: 0.86rem; font-weight: 700; }
.site-nav a { color: var(--grape); text-decoration: none; padding: 0.15rem 0.65rem; border-radius: var(--pill); border: 2px solid transparent; }
.site-nav a:hover { background: var(--candy-light); color: var(--grape); }
.site-nav a[aria-current] { background: var(--lemon); border-color: var(--grape); }
@media (max-width: 40em) {
  .site-nav { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.2rem; width: calc(100% + var(--gutter) * 2);
              overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
}
.site-foot { position: relative; background: var(--grape); color: #d9d2f2; margin-top: 3rem;
             padding: 3.2rem max(var(--gutter), calc(50% - var(--head) / 2 + var(--gutter))) 3rem; font-size: 0.88rem; }
/* 上の縁を波形に（地の色の丸を並べて垂らす） */
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 14px;
                     background: radial-gradient(circle at 14px 0, var(--paper) 13px, transparent 13.5px) 0 0 / 28px 14px repeat-x; }
.foot-note { max-width: var(--measure); margin: 0 0 1.2rem; }
.foot-nav { display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.foot-nav a { color: #fff; }
.foot-nav a:hover { color: var(--lemon); }
.copyright { margin: 0; font-size: 0.8rem; color: #a99fcc; }

/* ---------------------------------------------------------------- スプラッシュ
   レモンの地に水玉。色とりどりの帯が上から一本ずつ落ちて弾みながら積み上がり、十人が跳ねて並び、
   題字が一文字ずつ跳ねて入り、最後に紙吹雪がぱっと散る。そのあとも水玉が流れ、十人と題字の文字が
   それぞればらばらの間隔でときどき跳ね、紙吹雪が揺れ続ける（動きを減らす設定の人には止める）。 */
.splash { position: relative; color: var(--grape); margin: 0 calc(50% - 50vw); overflow: hidden; background: var(--lemon); }
/* 水玉。斜めにゆっくり流れ続ける（一つ分ずらして繰り返すので継ぎ目は出ない） */
.splash::before { content: ""; position: absolute; inset: -26px 0 0 -26px;
                  background: radial-gradient(circle, rgba(255, 154, 31, 0.3) 3px, transparent 3.5px) 0 0 / 26px 26px;
                  animation: dots-drift 2.4s linear infinite; }
@keyframes dots-drift { to { transform: translate(26px, 26px); } }
.splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; z-index: 2;
                 background: radial-gradient(circle at 14px 14px, var(--paper) 13px, transparent 13.5px) 0 0 / 28px 14px repeat-x; }
.splash-inner { position: relative; container-type: inline-size; max-width: var(--wide); margin: 0 auto;
                padding: 2.2rem var(--gutter) 3.2rem; display: grid; grid-template-areas: "kicker" "title" "stage" "sub"; justify-items: center; }
.splash-kicker { grid-area: kicker; position: relative; z-index: 1; margin: 0 0 0.9rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
                 color: #fff; background: var(--grape); border-radius: var(--pill); padding: 0.1rem 1.1rem; transform: rotate(-3deg);
                 animation: hop 0.5s var(--bounce) both, wiggle 7.3s ease-in-out infinite; animation-delay: 1.05s, 4.5s; }
@keyframes wiggle { 0%, 82%, 100% { transform: rotate(-3deg); } 87% { transform: rotate(4deg) scale(1.06); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(1deg); } }
.futon { grid-area: stage; align-self: end; width: min(94%, 42rem); display: flex; flex-direction: column-reverse;
         gap: 4px; margin-bottom: 3.5%; }
.futon span { display: block; height: clamp(1.4rem, 3.8vw, 2.6rem); border-radius: var(--pill); border: var(--bd);
              background: var(--beni); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35);
              animation: drop 0.75s var(--bounce) both; animation-delay: calc(var(--k) * 0.12s); }
/* ちょうさの布団と同じ紅白。下から 紅・白・紅・白・紅。上ほどわずかに細く */
.futon span:nth-child(even) { background: #fff; }
.futon span:nth-child(2) { margin: 0 1.5%; }
.futon span:nth-child(3) { margin: 0 3%; }
.futon span:nth-child(4) { margin: 0 4.5%; }
.futon span:nth-child(5) { margin: 0 6%; }
@keyframes drop {
  from { transform: translateY(-3rem); opacity: 0; }
  60% { transform: translateY(0.2rem) scaleY(0.82); opacity: 1; }
  to { transform: none; opacity: 1; }
}
/* 十人。一人ずつ上から飛び込んで並び、そのあとは一人ずつ違う間隔でときどき跳ね、それぞれの速さで揺れる
   （間隔・跳ね方・揺れは build_v2.py が一人ずつ変えて style に書く）。
   跳ねるのは translate/scale、揺れは rotate と、別々の性質で動かして重ねている */
.lineup { grid-area: stage; align-self: end; position: relative; width: min(100%, 52rem); aspect-ratio: 1000 / 272; }
.lineup a { position: absolute; display: block; transition: transform 0.25s var(--bounce); }
.lineup a:hover, .lineup a:focus-visible { transform: translateY(-6%) rotate(-3deg) scale(1.06); z-index: 1; }
.lineup img { display: block; width: 100%; height: auto; transform-origin: 50% 100%;
              filter: drop-shadow(3px 4px 0 rgba(43, 29, 92, 0.35));
              animation: enter 0.7s var(--bounce) both, var(--j, jump) var(--jd, 5s) ease-in-out infinite,
                         sway var(--sw, 3s) ease-in-out infinite alternate;
              animation-delay: calc(0.45s + var(--i) * 70ms), var(--jl, 2s), var(--sl, 0s); }
@keyframes enter { from { opacity: 0; translate: 0 -45%; scale: 0.6; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* 一回だけ大きく跳ねる。周期（7〜12 秒）の最初の 1 割弱で跳ね、あとはじっとしている */
@keyframes jump {
  0%, 10%, 100% { translate: 0 0; scale: 1 1; }
  2% { translate: 0 0; scale: 1.06 0.9; }
  4.5% { translate: 0 -11%; scale: 0.96 1.05; }
  7% { translate: 0 0; scale: 1.04 0.95; }
}
/* 小さく二回跳ねる */
@keyframes jump2 {
  0%, 12%, 100% { translate: 0 0; scale: 1 1; }
  2.5% { translate: 0 -5%; scale: 0.98 1.03; }
  5% { translate: 0 0; scale: 1.03 0.96; }
  7.5% { translate: 0 -6%; scale: 0.98 1.03; }
  10% { translate: 0 0; scale: 1.02 0.98; }
}
@keyframes sway { from { rotate: calc(var(--sa, 2deg) * -1); } to { rotate: var(--sa, 2deg); } }
.splash-title { grid-area: title; position: relative; z-index: 1; margin: 0 0 1.2rem; color: #fff; text-align: center;
                font-size: clamp(1.75rem, 0.9rem + 4vw, 3.6rem); letter-spacing: 0.06em; line-height: 1.25;
                text-shadow: 3px 0 0 var(--grape), -3px 0 0 var(--grape), 0 3px 0 var(--grape), 0 -3px 0 var(--grape),
                             2px 2px 0 var(--grape), -2px 2px 0 var(--grape), 2px -2px 0 var(--grape), -2px -2px 0 var(--grape),
                             6px 6px 0 var(--candy); }
.splash-title i { font-style: normal; display: inline-block; animation: hop 0.55s var(--bounce) both, pop-char var(--wd, 6s) ease-in-out infinite;
                  animation-delay: calc(0.9s + var(--i) * 45ms), var(--wl, 3s); }
/* 文字ごとに違う間隔で、ときどきぴょこっと跳ねる */
@keyframes pop-char {
  0%, 9%, 100% { transform: rotate(var(--tilt, 0deg)); }
  3% { transform: translateY(-0.25em) rotate(calc(var(--tilt, 0deg) * -2)); }
  6% { transform: translateY(0.03em) rotate(var(--tilt, 0deg)); }
}
.splash-title i:nth-child(odd) { --tilt: -3deg; }
.splash-title i:nth-child(even) { --tilt: 2deg; }
@keyframes hop {
  from { opacity: 0; transform: translateY(-0.7em) scale(0.5); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
.splash-sub { grid-area: sub; position: relative; z-index: 1; margin: 1.3rem 0 0; font-weight: 700; color: var(--grape); text-align: center;
              background: #fff; border: var(--bd); border-radius: 1.4rem; padding: 0.25rem 1.2rem; max-width: 94%; box-shadow: 3px 3px 0 var(--grape);
              font-size: clamp(0.82rem, 0.72rem + 0.4vw, 1.02rem); animation: hop 0.6s var(--bounce) both; animation-delay: 1.6s; }
/* 紙吹雪。題字のあたりから外へ飛び、端でふわふわ揺れ続ける */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span { position: absolute; width: 11px; height: 11px; background: var(--c); border: 2px solid var(--grape);
                 transform: rotate(var(--r)); animation: burst 1.1s cubic-bezier(.12, .8, .3, 1) both, flutter var(--fd, 2.6s) ease-in-out infinite alternate;
                 animation-delay: calc(1.35s + var(--d)), calc(2.45s + var(--d) * 6); }
@keyframes flutter {
  from { transform: rotate(var(--r)); }
  to { transform: translate(4px, 10px) rotate(calc(var(--r) + 50deg)); }
}
.confetti .dot { border-radius: 50%; }
.confetti .bar { width: 18px; height: 8px; border-radius: 4px; }
.confetti .tri { border: 0; width: 14px; height: 13px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes burst {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(0deg); }
  15% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--r)); }
}
@media (max-width: 30em) {
  .splash-title { font-size: 1.6rem; letter-spacing: 0.02em; white-space: nowrap; }
  .splash-inner { padding-top: 1.8rem; }
  .confetti span:nth-child(3n) { display: none; }   /* 狭い画面では上の帯のぶんを減らす */
}

/* ---------------------------------------------------------------- トップの各段 */
.home main > section > h2:not(.year-band), .home-find h2 { width: fit-content; padding: 0 0.2em;
  background: linear-gradient(transparent 58%, var(--lemon) 58% 92%, transparent 92%); }
.intro { max-width: var(--measure); margin-top: 2.4rem; }
.intro p { margin: 0; }
.ph { display: inline-block; }
/* 短い文の折り返しを、言葉の途中ではなく文節の切れ目で（対応ブラウザだけ）。最後の行が一、二文字だけ余るのも避ける */
.intro p, .lead, h1, h2, h3, .splash-sub, .guide-links span, .foot-note, .town-chara p { word-break: auto-phrase; text-wrap: pretty; }
.lead { margin: -0.4rem 0 1.2rem; color: var(--sub); font-size: 0.92rem; }
.more { margin-top: 1.4rem; }
.home-koma .more { text-align: center; }
.home-find { display: grid; gap: 0 3rem; }
@media (min-width: 48em) { .home-find { grid-template-columns: 1.15fr 1fr; } }
.find-links { display: flex; gap: 0.4rem 1.2rem; flex-wrap: wrap; font-size: 0.92rem; margin-top: 1.4rem; }
.cats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cats a { display: inline-block; background: #fff; border: var(--bd); color: var(--grape); text-decoration: none;
          padding: 0.3rem 1rem; border-radius: var(--pill); font-size: 0.92rem; font-weight: 700; box-shadow: 3px 3px 0 var(--grape);
          transition: transform 0.15s var(--bounce), box-shadow 0.15s; }
.cats a:hover { background: var(--candy-light); transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--grape); }
.cats small { margin-left: 0.4em; font-weight: 400; color: var(--sub); font-size: 0.82em; }
.home-shrine p { max-width: var(--measure); }
.shrine-feed { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 2px dashed var(--line); }
.shrine-feed li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 2px dashed var(--line); align-items: baseline; }
.shrine-feed time { color: var(--candy); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.shrine-feed a { color: var(--grape); text-decoration: none; }
.shrine-feed a:hover { color: var(--candy); text-decoration: underline; }
.shrine-note { color: var(--sub); font-size: 0.85rem; }
.button { display: inline-block; background: var(--grape); color: #fff; text-decoration: none; font-weight: 700;
          padding: 0.6rem 1.5rem; border-radius: var(--pill); box-shadow: 4px 4px 0 var(--candy);
          transition: transform 0.15s var(--bounce), box-shadow 0.15s; }
.button:hover { color: #fff; transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--candy); }

/* ---------------------------------------------------------------- 年から探す（色とりどりの帯を積む） */
.stack ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; max-width: 34rem; }
.stack li { width: calc(36% + 64% * var(--w)); --bg: var(--candy); }
.stack li.c1 { --bg: var(--pumpkin); }
.stack li.c2 { --bg: var(--soda); }
.stack li.c3 { --bg: var(--grape-light); }
.stack li.c4 { --bg: var(--lemon); }
.stack a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.7rem;
           padding: 0.3rem 1.1rem; border-radius: var(--pill); text-decoration: none; color: var(--grape);
           background: var(--bg); border: var(--bd); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), 3px 3px 0 var(--grape);
           transition: transform 0.15s var(--bounce); }
.stack a:hover { transform: translateX(6px); color: var(--grape); }
.stack a[aria-current] { background: var(--grape); color: #fff; }
.stack b { font-family: var(--heavy); font-weight: 800; font-size: 1.1rem; }
.stack span { font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 40em) { .stack li { width: calc(64% + 36% * var(--w)); } }
.stack small { font-size: 0.8rem; font-weight: 700; }
/* 一覧・月別ページでは横に並べて小さく */
.stack.is-compact { margin: 0 0 0.5rem; }
.stack.is-compact ol { flex-direction: row; flex-wrap: wrap; max-width: none; gap: 0.5rem; }
.stack.is-compact li { width: auto; }
.stack.is-compact a { display: inline-flex; gap: 0.45rem; padding: 0.1rem 0.85rem; box-shadow: 2px 2px 0 var(--grape); }
.stack.is-compact a:hover { transform: translateY(-2px); }
.stack.is-compact b { font-size: 0.95rem; }
.stack.is-compact span { display: none; }
.months { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.92rem; }
.months small { color: var(--sub); margin-left: 0.2em; font-size: 0.8em; }

/* ---------------------------------------------------------------- 記事一覧 */
.year-band { display: flex; align-items: baseline; gap: 0.75rem; width: fit-content; margin: 2.4rem 0 0.4rem; padding: 0.3rem 1.3rem 0.35rem;
             line-height: 1.3;
             border-radius: var(--pill); color: var(--grape); font-size: 1.1rem; background: var(--lemon); border: var(--bd);
             box-shadow: 3px 3px 0 var(--grape); }
.year-band .w { font-family: var(--round); font-weight: 400; font-size: 0.8rem; }
.entries { list-style: none; padding: 0; margin: 0; }
.entries > li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 0.9rem; padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.entries time { color: var(--candy); font-family: var(--heavy); font-weight: 800; font-size: 1.02rem; line-height: 1.3; padding-top: 0.25rem;
                font-variant-numeric: tabular-nums; }
.entries h3 { font-size: 1.08rem; margin: 0 0 0.3rem; }
.entries h3 a { color: var(--grape); text-decoration: none; }
.entries h3 a:hover { color: var(--candy); }
.excerpt { margin: 0; color: var(--sub); font-size: 0.88rem; line-height: 1.7;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entries .meta { margin: 0.4rem 0 0; font-size: 0.82rem; }
.cat { color: var(--candy); text-decoration: none; font-weight: 700; }
.cat::before { content: "#"; opacity: 0.6; }
.cat:hover { text-decoration: underline; }
.thumb { display: none; }
@media (min-width: 40em) {
  .entries > li { grid-template-columns: 3.6rem 1fr auto; }
  .thumb { display: block; width: 6.5rem; height: 4.6rem; overflow: hidden; border-radius: 0.8rem; border: 2px solid var(--grape); background: var(--line); }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
}
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 2rem 0; font-size: 0.92rem; font-weight: 700; }
.pager .next { text-align: right; }
.pager .pos { color: var(--sub); font-variant-numeric: tabular-nums; }
.pager a.prev::before { content: "← "; }
.pager a.next::after { content: " →"; }

/* ---------------------------------------------------------------- パンくず */
.crumbs { font-size: 0.82rem; color: var(--sub); margin: 1.2rem 0 0; overflow-x: auto; white-space: nowrap; }
.crumbs a { color: var(--sub); }
.crumbs .sep { margin: 0 0.5em; opacity: 0.6; }
.crumbs span:last-child { color: var(--sumi); }

/* ---------------------------------------------------------------- 記事 */
.post-head { margin: 1.2rem 0 2rem; padding-bottom: 1.3rem; position: relative; }
.post-head::after, .prose > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 6rem; height: 8px;
                                        border-radius: var(--pill); background: var(--stripe); }
.post-date { margin: 0 0 0.3rem; color: var(--candy); font-weight: 700; font-size: 1rem;
             display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.post-date .wareki { color: var(--sub); font-size: 0.85rem; font-weight: 400; }
.post-head h1 { margin: 0; }
.neighbors { display: grid; gap: 1rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 2px dashed var(--line); }
@media (min-width: 40em) { .neighbors { grid-template-columns: 1fr 1fr; } }
.neighbors a { text-decoration: none; color: var(--grape); line-height: 1.5; font-weight: 700; }
.neighbors a:hover { color: var(--candy); }
.neighbors small { display: block; color: var(--sub); font-size: 0.78rem; font-weight: 400; }
.neighbors .next { text-align: right; }

/* ---------------------------------------------------------------- 本文（当時の HTML をそのまま載せる） */
.prose { max-width: var(--measure); font-size: 1rem; }
body.read .prose, body.list .prose { max-width: none; }
.prose > h1 { margin-top: 1.2rem; padding-bottom: 1.3rem; position: relative; }
.prose h2, .prose h3, .prose h4 { font-size: 1.15rem; margin: 2.2rem 0 0.8rem; }
.prose h3 strong, .prose h4 strong { font-weight: inherit; }
.prose p { margin: 0 0 1rem; }
.prose p.blank { margin: 0; height: 0.5rem; }
.prose p.blank + p.blank { display: none; }
.prose img { height: auto !important; max-width: 100% !important; width: auto; border-radius: 0.5rem; }
.prose p[style*="center"] img { display: inline-block; }
.prose a[rel="colorbox"] { display: inline-block; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 0 0 1.5rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; vertical-align: top; text-align: left; }
.prose th { background: #fff1d6; font-weight: 700; white-space: nowrap; }
.prose td[style*="background-color"] { background-color: #fff6ea !important; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0.6rem; }
.prose div[style*="display:table"] { width: 100% !important; height: auto !important; min-height: 10rem;
                                     background: #fff3e4 !important; border-color: #f0d6b8 !important; border-radius: 0.8rem !important; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose ul[style] { margin-left: 0 !important; }
.prose blockquote { margin: 0 0 1rem; padding: 0.2rem 1rem; border-left: 4px solid var(--candy); color: var(--sub); }
.prose [style*="font-size"] { font-size: inherit !important; }
.prose [style*="color:red"], .prose [style*="color: red"], .prose [style*="rgb(255, 0, 0)"] { color: var(--candy) !important; }
.prose .file-link { display: inline-flex !important; align-items: center; gap: 0.5em; margin: 0.3rem 0;
                   background: var(--grape) !important; color: #fff !important; font-weight: 700; text-decoration: none !important;
                   border-radius: var(--pill) !important; padding: 0.6rem 1.5rem !important; line-height: 1.4;
                   box-shadow: 4px 4px 0 var(--candy); }
.prose .file-link::before { content: "↓"; font-weight: 700; }
.prose .file-link:hover { background: var(--candy) !important; box-shadow: 4px 4px 0 var(--grape); }
.prose .file-link:focus-visible { outline-color: var(--soda); }
.prose #map { width: 100% !important; }
.prose #map iframe { aspect-ratio: 3 / 2; }
.prose q { quotes: "「" "」"; }
.prose .row-table-01 th { width: 8rem; }
.notfound ul { padding-left: 1.2rem; }
/* 今はやっていないことのお知らせ（情報募集のページなど） */
.prose .notice { margin: 0 0 2rem; padding: 0.9rem 1.2rem; border: var(--bd); border-radius: 1rem; background: #fff;
                 box-shadow: 4px 4px 0 var(--lemon); font-weight: 700; color: var(--grape); }
.fiscal { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fiscal a { display: inline-block; background: #fff; border: var(--bd); border-radius: var(--pill); padding: 0.15rem 0.95rem;
            color: var(--grape); text-decoration: none; font-weight: 700; box-shadow: 3px 3px 0 var(--grape); }
.fiscal a:hover { background: var(--candy-light); }

/* ---------------------------------------------------------------- 顔の一覧（トップ・キャラクター） */
ul.roster { list-style: none; padding: 0.4rem 0 0.8rem; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem 0.8rem; }
.roster a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--grape); line-height: 1.35; }
.roster img { width: 100%; max-width: 8.5rem; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 3px solid var(--grape);
              box-shadow: 4px 4px 0 var(--grape); margin-bottom: 0.55rem; transition: transform 0.25s var(--bounce); }
.prose .roster img { border-radius: 50%; width: 100%; }
.roster b { font-size: 0.88rem; }
.roster small { white-space: nowrap; font-size: 0.72rem; margin-top: 0.2rem; padding: 0 0.6rem; border-radius: var(--pill); background: var(--c); border: 1.5px solid var(--grape); }
.roster a:hover img { transform: rotate(-6deg) scale(1.06); }
.roster a:hover { color: var(--candy); }
/* 狭い画面では横に流して、指でめくる */
@media (max-width: 40em) {
  ul.roster { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); gap: 0.9rem;
              margin: 0 calc(var(--gutter) * -1) 1rem; padding: 0.4rem var(--gutter) 1rem; scrollbar-width: none; }
  ul.roster::-webkit-scrollbar { display: none; }
  .roster li { flex: 0 0 6.4rem; scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- 4コマのカード */
ul.koma { list-style: none; padding: 0.3rem 0 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.4rem 1.1rem; }
.koma a { display: block; height: 100%; background: #fff; border: var(--bd); border-radius: 1rem; overflow: hidden; text-decoration: none;
          color: var(--grape); box-shadow: var(--pop-shadow); transform: rotate(-1.2deg); transition: transform 0.2s var(--bounce), box-shadow 0.2s; }
.koma li:nth-child(even) a { transform: rotate(1.2deg); }
.koma a:hover { transform: translateY(-4px) rotate(0); box-shadow: 6px 8px 0 var(--grape); color: var(--candy); }
.koma img, .prose .koma img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 296; object-fit: cover; border-radius: 0; border-bottom: var(--bd); }
.koma .no { display: inline-block; margin: 0.6rem 0.8rem 0; padding: 0 0.6rem; font-size: 0.72rem; font-weight: 700; color: #fff;
            background: var(--candy); border-radius: var(--pill); }
.koma b { display: block; padding: 0.15rem 0.8rem 0.7rem; font-size: 0.9rem; line-height: 1.45; }

/* ---------------------------------------------------------------- キャラクター設定 */
.chara { scroll-margin-top: 1rem; margin: 2.4rem 0; background: #fff; border: 3px solid var(--grape); border-radius: 1.4rem; overflow: hidden;
         box-shadow: 6px 6px 0 var(--grape); }
.chara-art { background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 3px, transparent 3.5px) 0 0 / 22px 22px, var(--c); border-bottom: 3px solid var(--grape); }
.prose .chara-art img { display: block; width: 100%; border-radius: 0; }
.chara-text { padding: 1.2rem 1.4rem 1.4rem; }
.prose .chara-text h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.8rem; font-size: 1.5rem; }
.chara-text h2 small { font-family: var(--round); font-size: 0.8rem; font-weight: 700; padding: 0 0.8rem; border-radius: var(--pill);
                       background: var(--c); border: 2px solid var(--grape); }
.chara-text p { margin: 0 0 0.4rem; }
.prose .charm { margin-top: 1rem; padding: 0.7rem 1rem; border-radius: 0.9rem; background: #fff6e6; border: 2px dashed var(--pumpkin); }
.charm b { display: inline-block; margin-right: 0.6rem; padding: 0 0.6rem; font-size: 0.78rem; border-radius: var(--pill); background: var(--pumpkin); color: var(--grape); }
.chara-link { margin-top: 0.8rem; font-size: 0.88rem; }
.chara-note { color: var(--sub); font-size: 0.9rem; }

/* ---------------------------------------------------------------- 検索 */
.search { display: flex; gap: 0.5rem; max-width: var(--measure); margin: 1rem 0; }
.search input { flex: 1; font: inherit; padding: 0.55rem 1.1rem; border: var(--bd); border-radius: var(--pill); background: #fff; min-width: 0; }
.search input:focus { border-color: var(--candy); outline: none; box-shadow: 3px 3px 0 var(--candy); }
.search button { font: inherit; font-weight: 700; background: var(--grape); color: #fff; border: 0; border-radius: var(--pill); padding: 0 1.4rem; cursor: pointer;
                 box-shadow: 3px 3px 0 var(--candy); }
.search button:hover { background: var(--candy); box-shadow: 3px 3px 0 var(--grape); }
.search-count { color: var(--sub); font-size: 0.9rem; min-height: 1.5em; }
.search-results mark { background: var(--lemon); color: inherit; padding: 0 0.1em; border-radius: 3px; }

/* ---------------------------------------------------------------- スクロールで出てくる（motion.js が is-wait / is-pop を付ける） */
[data-pop].is-wait li { opacity: 0; }
.roster.is-pop li, .koma.is-pop li { animation: pop-in 0.6s var(--bounce) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes pop-in { from { opacity: 0; transform: translateY(1.2rem) scale(0.6); } to { opacity: 1; transform: none; } }
.stack.is-pop li { animation: grow 0.7s var(--bounce) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes grow {
  from { opacity: 1; clip-path: inset(-6px 100% -8px -6px round 999px); }
  to { opacity: 1; clip-path: inset(-6px -8px -8px -6px round 999px); }
}

@media (prefers-reduced-motion: reduce) {
  .splash::before,
  .futon span, .lineup img, .splash-title i, .splash-sub, .splash-kicker, .confetti span,
  .roster li, .koma li, .stack li, .videos li { animation: none !important; }
  .stack a, .roster img, .koma a, .cats a, .button { transition: none; }
}

/* 今年の秋祭り（YouTube）。videos.js が一覧を入れて、取れたときだけ見せる */
.videos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem 1.2rem; }
.videos li { min-width: 0; animation: pop-in 0.55s var(--bounce) both; animation-delay: calc(var(--i, 0) * 60ms); }
.videos li[hidden] { display: none; }
.v-thumb, .videos iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: var(--bd); border-radius: 0.9rem;
                           overflow: hidden; background: var(--grape); box-shadow: var(--pop-shadow); }
.v-thumb { cursor: pointer; transition: transform 0.25s var(--bounce), box-shadow 0.25s; }
.v-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 再生の印。真ん中に丸と三角 */
.v-thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%;
                   background: var(--candy); border: 2.5px solid #fff; box-shadow: 2px 2px 0 var(--grape); transition: transform 0.25s var(--bounce); }
.v-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -0.6rem 0 0 -0.35rem;
                  border: 0.6rem solid transparent; border-right: 0; border-left: 0.95rem solid #fff; }
.v-thumb:hover, .v-thumb:focus-visible { transform: translateY(-3px) rotate(-1deg); box-shadow: 6px 7px 0 var(--grape); }
.v-thumb:hover::before, .v-thumb:focus-visible::before { transform: scale(1.15); }
.v-live { position: absolute; left: 0.5rem; top: 0.5rem; background: var(--beni); color: #fff; font-size: 0.72rem; font-weight: 800;
          border-radius: var(--pill); padding: 0 0.6rem; border: 2px solid #fff; }
.v-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.7rem;
           color: var(--grape); font-weight: 800; font-size: 0.92rem; line-height: 1.5; text-decoration: none; }
.v-title:hover { color: var(--candy); text-decoration: underline; }
.v-meta { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-meta time { color: var(--candy); font-weight: 800; margin-right: 0.6rem; }
.home-videos .more { text-align: center; }
.v-more[hidden], .home-videos[hidden] { display: none; }
.v-note { font-size: 0.78rem; color: var(--sub); margin-top: 1.2rem; }

/* 今年の秋祭り。トップの帯（お知らせ）と akimatsuri.html */
.matsuri-now { margin: 2rem 0 0; }
.matsuri-now a { display: block; padding: 0.8rem 1.2rem; background: var(--beni); color: #fff; border: var(--bd); border-radius: 1.2rem;
                 box-shadow: var(--pop-shadow); text-decoration: none; font-weight: 700; transition: transform 0.25s var(--bounce); }
.matsuri-now a::after { content: " →"; }
.matsuri-now b { font-family: var(--heavy); font-size: 1.1em; }
.matsuri-now a:hover { color: #fff; transform: translateY(-2px) rotate(-0.5deg); }
.v-all { text-align: center; font-weight: 700; }
.aki-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.aki-day { background: #fff; border: var(--bd); border-radius: 1.2rem; box-shadow: var(--pop-shadow); padding: 0.9rem 1.1rem 0.6rem; }
.prose .aki-day h3 { margin: 0 0 0.5rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.aki-day h3 span { background: var(--beni); color: #fff; border-radius: var(--pill); padding: 0 0.8rem; font-size: 0.9rem; }
.aki-day:nth-child(2) h3 span { background: var(--grape); }
.aki-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.aki-table th { text-align: left; white-space: nowrap; color: var(--candy); font-family: var(--heavy); padding: 0.3rem 0.9rem 0.3rem 0; vertical-align: top; width: 1%; }
.aki-table td { padding: 0.3rem 0; }
.aki-table tr + tr > * { border-top: 2px dashed var(--line); }
.aki-src { font-size: 0.82rem; color: var(--sub); }
.aki-more { margin-top: 1rem; }

/* ---------------------------------------------------------------- 町のページ・案内ページ */
.town-chara { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; padding: 0.9rem 1.1rem; background: #fff;
              border: var(--bd); border-radius: 1.2rem; box-shadow: var(--pop-shadow); }
.prose .town-chara img { width: 5.5rem; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--c);
                         border: 2.5px solid var(--grape); flex: none; }
.town-chara p { margin: 0; font-size: 0.92rem; }
.town-shrine { font-size: 0.92rem; }
.town-others { margin-top: 3rem; }
.town-others h2 { font-size: 1.1rem; }
.town-others .cats a { font-size: 0.85rem; }
.guide h2, .town > h2 { width: fit-content; padding: 0 0.2em; background: linear-gradient(transparent 58%, var(--lemon) 58% 92%, transparent 92%); }
.prose .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 1.5rem; padding: 1rem 1.2rem;
                background: #fff; border: var(--bd); border-radius: 1rem; box-shadow: 4px 4px 0 var(--lemon); }
.prose .facts dt { font-weight: 700; color: var(--grape); }
.prose .facts dd { margin: 0; }
.guide .towns { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.guide .towns a { display: block; height: 100%; padding: 0.7rem 1rem; background: #fff; border: var(--bd); border-radius: 1rem;
                  text-decoration: none; color: var(--sumi); box-shadow: 3px 3px 0 var(--grape); }
.guide .towns a:hover { background: #fff6e6; }
.guide .towns b { display: block; color: var(--grape); font-family: var(--heavy); font-weight: 800; }
.guide .towns span { font-size: 0.85rem; color: var(--sub); }
.guide .source, .town .source { font-size: 0.8rem; color: var(--sub); }
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.table-wrap table { margin: 0; min-width: 32rem; }
.guide .lead { font-size: 1.05rem; }
.guide-links { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.guide-links a { display: block; height: 100%; padding: 0.9rem 1.1rem; background: #fff; border: var(--bd); border-radius: 1rem;
                 text-decoration: none; color: var(--sumi); box-shadow: var(--pop-shadow); transition: transform 0.15s var(--bounce); }
.guide-links a:hover { transform: translate(-1px, -2px); }
.guide-links b { display: block; font-family: var(--heavy); font-weight: 800; font-size: 1.1rem; color: var(--grape); }
.guide-links span { font-size: 0.85rem; color: var(--sub); }
.town-chips a { font-size: 0.85rem; padding: 0.15rem 0.85rem; }
@media (max-width: 30em) { .prose .facts { grid-template-columns: 1fr; } .prose .facts dd { margin-bottom: 0.4rem; } }

/* オープニングをもう一度。キービジュアルの右下（?intro を付けてトップを開き直すと intro.js が必ず再生する） */
.replay { position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); bottom: 1.1rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.35rem;
          font-size: 0.7rem; font-weight: 700; color: var(--grape); opacity: 0.45; text-decoration: none; padding: 0.1rem 0.4rem;
          transition: opacity 0.2s, transform 0.25s var(--bounce); }
.replay span { width: 0; height: 0; border: 0.28rem solid transparent; border-right: 0; border-left: 0.42rem solid currentColor; }
.replay:hover, .replay:focus-visible { color: var(--grape); opacity: 1; transform: translateY(-1px); }
@media (max-width: 30em) { .replay { bottom: 0.9rem; font-size: 0.68rem; } }

/* ---------------------------------------------------------------- 上へ戻る
   全ページの右下。#top は要素が無くてもページの先頭を指す。少しスクロールしてから弾んで出てくる
   （スクロール連動のアニメーションに対応していないブラウザでは、最初から出ている） */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.to-top { position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
          width: 3.6rem; height: 3.6rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
          background: var(--lemon); color: var(--grape); border: var(--bd); box-shadow: var(--pop-shadow); text-decoration: none;
          font-weight: 800; font-size: 0.72rem; line-height: 1.1; transition: transform 0.25s var(--bounce), background 0.2s; }
.to-top span { width: 0; height: 0; margin-bottom: 0.2rem; border: 0.42rem solid transparent; border-top: 0; border-bottom: 0.55rem solid var(--candy);
               filter: drop-shadow(0 0 0 var(--grape)); }
.to-top:hover, .to-top:focus-visible { color: var(--grape); background: var(--candy-light); transform: translateY(-4px) rotate(-6deg); }
.to-top:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--grape); }
@media (max-width: 40em) { .to-top { width: 3.1rem; height: 3.1rem; font-size: 0.66rem; } }
@supports (animation-timeline: scroll()) {
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(root); animation-range: 0 480px; }
  @keyframes to-top-in {
    0%, 55% { opacity: 0; visibility: hidden; translate: 0 1.5rem; scale: 0.5; }
    85% { translate: 0 -0.3rem; scale: 1.08; }
    100% { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
  }
}
@media print { .to-top { display: none; } }

/* ---------------------------------------------------------------- 幕開け（トップ、一回の訪問で最初の一度だけ）
   intro.js が html に intro-on を付けたときだけ出る（JS が無ければ出ない）。時刻は intro.js の T と同じ。
   0.2s「日和佐八幡神社」 1.15s「ちょうさじゃ」 2.1s「いっさんじゃい」 3.05s「サーセー サーセー！」（掛け声の時刻は build_v2.py が書く。
   一語ずつ読めるよう、ほぼ一秒ずつ見せる） 4.35s〜 布団が五枚落ちて積む 5.25s 布団が左右へ飛び、色の帯が入る
   5.5s 題字 5.65s 十人 7.8s 帯がはけてトップへ */
.opening { display: none; }
html.intro-on .opening { display: block; }
html.intro-on .splash *, html.intro-on .splash::before { animation-play-state: paused !important; }
.opening { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; background: #1a1033; color: #fff;
         font-family: var(--heavy); -webkit-user-select: none; user-select: none; }
.opening.go { animation: i-bg 0.01s step-end 5.7s forwards; }
@keyframes i-bg { to { background: transparent; } }
.opening.is-skip { opacity: 0; transform: scale(1.06); transition: opacity 0.38s ease, transform 0.38s ease; pointer-events: none; }
.i-stage { position: absolute; inset: 0; }
.i-stage.shake { animation: i-shake 0.28s linear; }
.i-stage.shake-big { animation: i-shake-big 0.36s linear; }
@keyframes i-shake { 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }
@keyframes i-shake-big { 15% { translate: 9px -6px; } 35% { translate: -8px 5px; } 55% { translate: 5px 3px; } 75% { translate: -3px -2px; } }
.i-stage > * { position: absolute; }
.opening canvas { inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.i-flash { inset: 0; z-index: 6; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.i-flash.on { animation: i-flash 0.32s ease-out; }
@keyframes i-flash { from { opacity: 0.55; } to { opacity: 0; } }

/* 水玉と放射。暗い地でゆっくり回り、拍で大きくなる */
.i-dots { inset: -30px; background: radial-gradient(circle, rgba(139, 108, 255, 0.28) 2.5px, transparent 3px) 0 0 / 30px 30px;
          animation: dots-drift 3s linear infinite; }
.i-rays { left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0;
          background: repeating-conic-gradient(from 0deg, rgba(255, 79, 123, 0.2) 0 7.5deg, transparent 7.5deg 15deg);
          -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%); mask: radial-gradient(closest-side, #000 18%, transparent 70%); }
.go .i-rays { animation: i-rays-in 0.5s var(--bounce) 0.15s both, i-spin 9s linear infinite, i-rays-pulse 0.5s ease-out 3.05s, i-fade 0.3s ease 5.25s forwards; }
@keyframes i-rays-in { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes i-rays-pulse { from { scale: 1.25; filter: hue-rotate(160deg); } to { scale: 1; } }
@keyframes i-spin { to { rotate: 360deg; } }
@keyframes i-fade { to { opacity: 0; } }

/* 掛け声。一文字ずつ叩き込み、残像の輪郭が外へ広がる */
.i-word { left: 0; right: 0; top: 50%; margin: 0; translate: 0 -50%; text-align: center; white-space: nowrap; z-index: 4;
          font-size: clamp(2.6rem, 15vw, 11rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; opacity: 0; }
.i-word i { font-style: normal; display: inline-block; }
.i-word::before, .i-word::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; opacity: 0;
                                  -webkit-text-stroke: 2px var(--echo); pointer-events: none; }
.w0 { color: #fff; --echo: var(--grape-light); text-shadow: 0.06em 0.06em 0 var(--grape-light); font-size: clamp(2.3rem, 12.6vw, 9.5rem); }
.w1 { color: var(--lemon); --echo: var(--candy); text-shadow: 0.06em 0.06em 0 var(--candy); }
.w2 { color: #fff; --echo: var(--soda); text-shadow: 0.06em 0.06em 0 var(--soda); font-size: clamp(2.3rem, 12.8vw, 10rem); }
.w3 { color: var(--candy); --echo: var(--lemon); text-shadow: 0.06em 0.06em 0 var(--lemon); font-size: clamp(3rem, 17vw, 9rem); line-height: 1.05; }
.w3::before, .w3::after { white-space: pre; }
.go .i-word { animation: i-show 0.01s var(--in) forwards, var(--exit) 0.28s cubic-bezier(.7, 0, .9, .4) var(--out) forwards; }
.go .i-word i { animation: i-slam 0.5s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--in) + var(--i) * 0.045s); }
.go .i-word::before { animation: i-echo 0.55s ease-out calc(var(--in) + 0.1s); }
.go .i-word::after { animation: i-echo 0.7s ease-out calc(var(--in) + 0.18s); }
@keyframes i-show { to { opacity: 1; } }
@keyframes i-slam {
  from { opacity: 0; transform: translateY(-0.6em) scale(2.6) rotate(var(--r, -8deg)); filter: blur(8px); }
  55% { opacity: 1; transform: translateY(0.05em) scale(0.9, 1.08) rotate(0deg); filter: blur(0); }
  to { opacity: 1; transform: none; }
}
.i-word i:nth-child(even) { --r: 10deg; }
@keyframes i-echo { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 1.7; } }
@keyframes i-out-left { to { opacity: 0; transform: translateX(-70vw) skewX(35deg); } }
@keyframes i-out-right { to { opacity: 0; transform: translateX(70vw) skewX(-35deg); } }
@keyframes i-out-up { to { opacity: 0; transform: translateY(-55vh) scaleY(1.6); } }
@keyframes i-through { to { opacity: 0; transform: scale(7); filter: blur(6px); } }

/* 布団。トップと同じ紅白（下から 紅・白・紅・白・紅）。上から一枚ずつ落ちて弾んで積み、最後に左右へ飛んでいく */
.i-futon { left: 50%; top: 50%; width: min(66vw, 30rem); translate: -50% -38%; display: flex; flex-direction: column-reverse; gap: 5px; z-index: 4; }
.i-futon span { display: block; height: min(6.2vh, 3.1rem); border-radius: var(--pill); border: 3px solid var(--grape); background: var(--beni);
                box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.15); opacity: 0; }
.i-futon span:nth-child(2) { background: #fff; margin: 0 2%; }
.i-futon span:nth-child(3) { margin: 0 4%; }
.i-futon span:nth-child(4) { background: #fff; margin: 0 6%; }
.i-futon span:nth-child(5) { margin: 0 8%; }
.go .i-futon span { animation: i-drop 0.45s cubic-bezier(.5, 0, .5, 1) both, i-fly 0.42s cubic-bezier(.7, 0, .9, .3) forwards;
                    animation-delay: calc(4.35s + var(--k) * 0.11s), calc(5.25s + var(--k) * 0.03s); }
.i-futon span:nth-child(odd) { --dir: -1; }
.i-futon span:nth-child(even) { --dir: 1; }
@keyframes i-drop {
  from { opacity: 1; transform: translateY(-80vh) scaleY(1.4) scaleX(0.85); }
  66% { opacity: 1; transform: translateY(0) scaleY(0.62) scaleX(1.1); }
  84% { transform: translateY(-6px) scaleY(1.08) scaleX(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes i-fly { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateX(calc(var(--dir) * 130vw)) scaleX(2.2); } }

/* 色の帯。布団が飛ぶのと入れ替わりに左右から入り、最後は左右へはけてトップを見せる */
.i-bands { left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; rotate: -11deg; z-index: 2;
           display: flex; flex-direction: column; }
.i-bands span { flex: 1; transform: translateX(calc(var(--dir) * -101%)); position: relative; overflow: hidden; }
.i-bands span::after { content: ""; position: absolute; inset: -40px;
                       background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 3px, transparent 3.5px) 0 0 / 28px 28px;
                       animation: dots-drift-2 1.6s linear infinite; }
@keyframes dots-drift-2 { to { transform: translate(28px, 0); } }
.i-bands span:nth-child(odd) { --dir: 1; }
.i-bands span:nth-child(even) { --dir: -1; }
.i-bands span:nth-child(1) { background: var(--candy); }
.i-bands span:nth-child(2) { background: var(--pumpkin); }
.i-bands span:nth-child(3) { background: var(--lemon); }
.i-bands span:nth-child(4) { background: var(--soda); }
.i-bands span:nth-child(5) { background: var(--grape-light); }
.go .i-bands span { animation: i-band-in 0.42s cubic-bezier(.2, .85, .25, 1) forwards, i-band-out 0.5s cubic-bezier(.75, 0, .85, .35) forwards;
                    animation-delay: calc(5.25s + var(--k) * 0.045s), calc(7.8s + var(--k) * 0.05s); }
@keyframes i-band-in { to { transform: none; } }
@keyframes i-band-out { from { transform: none; } to { transform: translateX(calc(var(--dir) * 103%)); } }

/* 題字 */
.i-title { left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
           padding: 0 var(--gutter); text-align: center; }
.i-title p { margin: 0; }
.i-kicker, .i-sub { font-family: var(--round); font-weight: 700; border: 2.5px solid var(--grape); border-radius: var(--pill);
                    font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem); padding: 0.15rem 1.1rem; box-shadow: 3px 3px 0 var(--grape); opacity: 0; }
.i-kicker { background: var(--grape); color: #fff; rotate: -3deg; }
.i-sub { background: #fff; color: var(--grape); letter-spacing: 0.12em; rotate: 2deg; }
.i-name { font-size: clamp(1.45rem, 7.4vw, 5rem); font-weight: 900; line-height: 1.15; white-space: nowrap; letter-spacing: 0.02em; color: #fff;
          text-shadow: 4px 0 0 var(--grape), -4px 0 0 var(--grape), 0 4px 0 var(--grape), 0 -4px 0 var(--grape),
                       3px 3px 0 var(--grape), -3px 3px 0 var(--grape), 3px -3px 0 var(--grape), -3px -3px 0 var(--grape),
                       8px 8px 0 var(--candy), 8px 8px 0 var(--candy); }
.i-name i { font-style: normal; display: inline-block; opacity: 0; }
.i-name i:nth-child(odd) { --tilt: -4deg; }
.i-name i:nth-child(even) { --tilt: 3deg; }
.go .i-kicker { animation: hop 0.45s var(--bounce) 5.5s forwards; }
.go .i-name i { animation: i-stamp 0.42s var(--bounce) forwards; animation-delay: calc(5.52s + var(--i) * 0.04s); }
.go .i-sub { animation: hop 0.45s var(--bounce) 6.1s forwards; }
.go .i-title { animation: i-leave 0.34s cubic-bezier(.6, 0, .9, .4) 7.75s forwards; }
@keyframes i-stamp {
  from { opacity: 0; transform: scale(3) rotate(calc(var(--tilt) * -6)); }
  to { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes i-leave { to { opacity: 0; scale: 1.3; } }

/* 十人。真ん中から輪になって飛び出し、ふわふわ浮く */
.i-faces { inset: 0; margin: 0; padding: 0; list-style: none; z-index: 5; --rx: min(41vw, 34rem); --ry: min(35vh, 19rem); --fs: clamp(54px, 12vmin, 124px); }
.i-faces li { position: absolute; left: 50%; top: 50%; width: var(--fs); height: var(--fs); margin: calc(var(--fs) / -2) 0 0 calc(var(--fs) / -2);
              transform: scale(0); }
.go .i-faces li { animation: i-ring 0.6s var(--bounce) forwards; animation-delay: calc(5.65s + var(--i) * 0.045s); }
.go .i-faces { animation: i-leave 0.34s cubic-bezier(.6, 0, .9, .4) 7.7s forwards; }
@keyframes i-ring {
  from { transform: translate(0, 0) scale(0) rotate(-180deg); }
  to { transform: translate(calc(var(--x) * var(--rx)), calc(var(--y) * var(--ry))) scale(1) rotate(0deg); }
}
.i-faces img { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); border: 3px solid var(--grape);
               box-shadow: 3px 3px 0 var(--grape); animation: i-bob 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.23s); }
@keyframes i-bob { from { translate: 0 -5%; rotate: -5deg; } to { translate: 0 5%; rotate: 5deg; } }

.i-skip { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 7;
          font: 700 0.85rem var(--round); color: #fff; background: rgba(26, 16, 51, 0.55); border: 2px solid rgba(255, 255, 255, 0.7);
          border-radius: var(--pill); padding: 0.35rem 1.1rem; cursor: pointer; opacity: 0; }
.go .i-skip { animation: i-show 0.3s 0.6s forwards, i-fade 0.2s 7.7s forwards; }
.i-skip:hover { background: var(--candy); border-color: #fff; }
@media (max-width: 30em) { .i-faces { --ry: min(33vh, 19rem); } }

/* ---------------------------------------------------------------- ページの移り変わり
   同じサイトの中でページを移るとき（対応ブラウザだけ。ほかは今までどおり）。ヘッダーはその場に残し、
   前のページは少し傾いて縮みながら奥へ、新しいページは下から丸く膨らんで広がる。後ろはレモンの水玉 */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
::view-transition { background: var(--lemon) radial-gradient(circle, rgba(255, 154, 31, 0.35) 3px, transparent 3.5px) 0 0 / 26px 26px; }
::view-transition-old(root) { animation: vt-out 0.42s cubic-bezier(.6, 0, .8, .4) both; transform-origin: 50% 30%; }
::view-transition-new(root) { animation: vt-in 0.62s cubic-bezier(.2, .8, .2, 1) 0.12s both; }
::view-transition-group(site-head) { animation-duration: 0.4s; z-index: 2; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.9) rotate(-2deg) translateY(2%); border-radius: 28px; } }
@keyframes vt-in {
  from { clip-path: circle(0% at 50% 110%); transform: translateY(4%); }
  to { clip-path: circle(150% at 50% 110%); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .opening { display: none !important; }
}