/* 架空の街のイベント。伸びる長音「ー」をページ全体の決まりごとにする */
:root {
  --paper: #FBFAF4;
  --ink: #1D1B18;
  --sub: #66615A;
  --red: #CF3614;
  --yolk: #F6C445;
  --sky: #A9DBF0;
  --leaf: #BFE0A6;
  --pink: #F4A5B5;
  --cream: #F9EFE0;
  --night: #1F2A5A;
  --gutter: clamp(1.25rem, 3.4vw, 3rem);
  --maru: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --num: Futura, "Avenir Next", "Century Gothic", "Yu Gothic", sans-serif;
  --spring: cubic-bezier(.3, 1.6, .5, 1);
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background: var(--paper);
  font: 400 1rem/1.9 var(--sans);
  font-feature-settings: "palt";
  letter-spacing: .03em;
  overflow-x: clip;
}
main { overflow-x: clip; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* 読み込みの演出。JS が動かない時と動きを減らす時は出さない */
.loader { display: none; }
.is-live .loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--paper);
  pointer-events: none;
  animation: loader-out .55s cubic-bezier(.75, 0, .2, 1) 1.45s forwards;
}
.loader__words { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15em .7em; font: 400 clamp(2rem, 4.6vw, 4.25rem)/1.3 var(--maru); }
.loader__word { display: inline-flex; align-items: center; opacity: 0; transform: translateY(.5em) scale(.8); animation: pop-word .45s var(--spring) forwards; }
.loader__word img { width: auto; height: 1.45em; margin-right: .25em; }
.loader__word--1 { animation-delay: .05s; }
.loader__word--2 { animation-delay: .35s; }
.loader__word--3 { animation-delay: .65s; }
.loader__bar { display: block; width: 0; height: .08em; margin-inline: .06em; background: currentColor; border-radius: 1em; animation: bar-out .6s cubic-bezier(.2, .8, .2, 1) .8s forwards; }
@keyframes pop-word { to { opacity: 1; transform: none; } }
@keyframes bar-out { to { width: 3.2em; } }
@keyframes loader-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* 最初の画面 */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - 3rem);
  padding: 1rem var(--gutter) clamp(1.25rem, 3vh, 2.5rem);
  overflow: clip;
}
.hero__nav { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; }
.hero__logo { display: inline-flex; align-items: center; min-height: 44px; font: 400 1.125rem/1.3 var(--maru); text-decoration: none; }
.hero__menu { display: flex; gap: clamp(.75rem, 2vw, 2rem); padding: 0; margin: 0; list-style: none; font-size: .875rem; font-weight: 600; }
.hero__menu a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; background: linear-gradient(var(--red), var(--red)) left 72% / 0 2px no-repeat; transition: background-size .3s ease-out; }
.hero__menu a:hover, .hero__menu a:focus-visible { background-size: 100% 2px; }

.hero__body { position: relative; z-index: 2; align-self: center; padding-block: 1.5rem; pointer-events: none; }
.hero__kicker { margin-bottom: .75rem; margin-left: .35em; font-size: clamp(.8125rem, 1vw, .9375rem); font-weight: 600; }
.hero__title { font: 400 min(10.8vw, 23svh)/1.12 var(--maru); letter-spacing: -.02em; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--long { display: flex; align-items: center; width: 100%; }
.hero__bar, .str__bar {
  display: block;
  flex: var(--g, 1) 1 .3em;
  min-width: .3em;
  height: var(--bar, .075em);
  margin-inline: .05em .03em;
  background: currentColor;
  border-radius: 1em;
  transform: translateY(.02em);
}
.hero__rest, .str__rest { display: block; flex: calc(1 - var(--g, 1)) 1 0; min-width: 0; }

.hero__foot { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.hero__lead { font-size: clamp(.9375rem, 1.25vw, 1.125rem); font-weight: 500; line-height: 1.85; }

.seal { position: relative; display: grid; flex: none; place-items: center; width: clamp(7rem, 11vw, 10rem); aspect-ratio: 1; text-decoration: none; transition: scale .3s var(--spring); }
.seal:hover, .seal:focus-visible { scale: 1.08; }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__ring text { fill: var(--ink); font: 600 17px var(--sans); }
.seal__fish { width: 42%; }
@media (prefers-reduced-motion: no-preference) {
  .seal__ring { animation: spin 16s linear infinite; }
}
@keyframes spin { to { transform: rotate(1turn); } }

/* 最初の画面を漂う立体 */
.float { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.m { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; will-change: transform; filter: drop-shadow(0 .9rem 1rem rgb(70 50 20 / .13)); }
.m--lantern { --x: 66%; --y: 4%; --w: clamp(4.5rem, 8vw, 7.5rem); }
.m--cotton { --x: 84%; --y: 11%; --w: clamp(4.5rem, 9vw, 8.5rem); }
.m--bottle { --x: 45%; --y: 9%; --w: clamp(2.25rem, 3.6vw, 3.5rem); }
.m--pinwheel { --x: 27%; --y: 7%; --w: clamp(3.5rem, 6vw, 5.5rem); }
.m--goldfish { --x: 57%; --y: 70%; --w: clamp(5rem, 11vw, 10rem); }
.m--takoyaki { --x: 37%; --y: 79%; --w: clamp(5rem, 11vw, 10rem); }
.m--yoyo { --x: 71%; --y: 76%; --w: clamp(3.5rem, 6.4vw, 6rem); }
.m--apple { --x: 26%; --y: 73%; --w: clamp(2.5rem, 4.2vw, 3.75rem); }
.m--taiko { --x: 9%; --y: 66%; --w: clamp(3.5rem, 6vw, 5.5rem); }

/* ひとことの章 */
.say { padding: clamp(5rem, 16vh, 11rem) var(--gutter) clamp(4rem, 12vh, 8rem); }
.say__text { max-width: 76rem; font: 400 clamp(1.875rem, 5.4vw, 5.25rem)/1.55 var(--maru); letter-spacing: 0; }
.say__img { display: inline-block; width: auto; height: 1.25em; margin-inline: .08em; vertical-align: -.26em; }
.say__img--wide { height: .95em; vertical-align: -.1em; }
.is-live .say__text { --q: calc((var(--p, 1) - .22) / .36); }
.spell { opacity: max(.14, min(1, calc((var(--q, 1) - var(--i)) * 14))); }
.say__sub { margin-top: 2.5rem; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; }

/* 写真が広がる章 */
.grow { position: relative; }
.is-live .grow { height: 320svh; }
.grow__stick { position: relative; height: calc(100svh - 3rem); min-height: 34rem; overflow: clip; }
.is-live .grow__stick { position: sticky; top: 3rem; }
.grow__card {
  --e: min(1, calc(var(--p, 1) * 1.45));
  --ix: 33%;
  --iy: 20%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--night);
  clip-path: inset(calc((1 - var(--e)) * var(--iy)) calc((1 - var(--e)) * var(--ix)) round calc((1 - var(--e)) * 32px));
}
.grow__photo { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(calc(1.22 - .22 * var(--e))); }
.grow__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: var(--gutter);
  color: #FFFFFF;
  background: linear-gradient(to top, rgb(14 13 30 / .86) 0 42%, rgb(14 13 30 / .35) 72%, rgb(14 13 30 / 0));
  opacity: calc((var(--p, 1) - .66) * 4.5);
}
.grow__title { font: 400 clamp(1.5rem, 3.2vw, 3rem)/1.4 var(--maru); }
.grow__date { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 4vw, 4rem); font: 400 clamp(3rem, 10.6vw, 10rem)/1.1 var(--maru); letter-spacing: -.02em; }
.grow__day small { margin-left: .12em; font-size: .3em; letter-spacing: 0; }
.grow__note { font-weight: 500; }
.grow__action { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; min-height: 3rem; }
.grow__btn { min-height: 3rem; padding: .25rem 1.5rem; color: var(--ink); background: var(--yolk); border: 0; border-radius: 99px; font: 700 .9375rem/1.4 var(--sans); cursor: pointer; transition: scale .25s var(--spring); }
.grow__btn:hover { scale: 1.05; }
.grow__btn:focus-visible { outline-color: #FFFFFF; }
.grow__status { font-weight: 600; }

/* 流れる文字 */
.flow { overflow: hidden; font: 400 clamp(4.5rem, 13vw, 12rem)/1.25 var(--maru); letter-spacing: -.01em; white-space: nowrap; }
.flow__track { display: flex; width: max-content; will-change: transform; }
.flow__item { display: flex; flex: none; align-items: center; }
.flow__item img { flex: none; width: auto; height: .95em; margin-inline: .3em; }
.flow--red { position: absolute; top: 50%; left: 0; width: 100%; color: var(--red); transform: translateY(-50%); }
.flow--ink { padding-block: clamp(2rem, 6vw, 5rem) 0; }

/* 見出しの決まりごと。文字の途中が伸びる */
.kicker { margin-bottom: .5rem; font-size: clamp(.8125rem, 1vw, .9375rem); font-weight: 600; }
.kicker--light { color: #FFFFFF; }
.str { display: flex; align-items: center; font: 400 clamp(2.125rem, 8.2vw, 7.75rem)/1.2 var(--maru); letter-spacing: -.02em; white-space: nowrap; }
.is-live [data-progress] > .str__bar { --g: max(0, min(1, calc((var(--p, 1) - .1) * 3))); }
.is-live [data-progress] > .str__rest { --g: max(0, min(1, calc((var(--p, 1) - .1) * 3))); }
.str--light { color: #FFFFFF; }
.str--huge { font-size: clamp(3.5rem, 19vw, 18rem); }

/* なにがあるの */
.what { padding: clamp(5rem, 14vh, 10rem) var(--gutter) clamp(4rem, 12vh, 9rem); }
.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 7vh, 6rem) clamp(1rem, 2.6vw, 2.5rem); margin-top: clamp(2.5rem, 6vh, 5rem); }
.card--a { grid-column: 1 / span 4; }
.card--b { grid-column: 5 / span 5; margin-top: 7rem; }
.card--c { grid-column: 10 / span 3; }
.card--d { grid-column: 1 / span 3; margin-top: -9rem; }
.card--e { grid-column: 4 / span 5; }
.card--f { grid-column: 9 / span 4; margin-top: 5rem; }
.card__tile { position: relative; display: grid; place-items: center; overflow: hidden; margin-bottom: 1rem; border-radius: clamp(14px, 1.8vw, 24px); }
.card--a .card__tile { aspect-ratio: 4 / 3; }
.card--b .card__tile { aspect-ratio: 3 / 4; }
.card--c .card__tile { aspect-ratio: 1; }
.card--d .card__tile { aspect-ratio: 1; }
.card--e .card__tile { aspect-ratio: 5 / 4; }
.card--f .card__tile { aspect-ratio: 4 / 3; }
.card__tile--yolk { background: #FBBF35; }
.card__tile--night { background: var(--night); }
.card__tile--pink { background: var(--pink); }
.card__tile--leaf { background: var(--leaf); }
.card__tile--sky { background: var(--sky); }
.card__tile--cream { background: #F1E6CF; }
.card__scene { position: absolute; top: -7%; left: 0; width: 100%; height: 114%; max-width: none; object-fit: cover; }
.card__motif { width: auto; height: 68%; max-height: 68%; filter: drop-shadow(0 1rem 1rem rgb(50 40 20 / .18)); transition: transform .45s var(--spring); }
.card:hover .card__motif { transform: translateY(-6%) rotate(-7deg) scale(1.08); }
.card__no { color: var(--sub); font-size: .75rem; font-weight: 600; }
.card__title { font: 400 clamp(1.25rem, 1.9vw, 1.75rem)/1.45 var(--maru); }
.card__title--big { font-size: clamp(1.5rem, 3vw, 2.75rem); }
.card__text { margin-top: .4rem; font-size: .9375rem; line-height: 1.8; }
.card__tags { margin-top: .5rem; color: var(--sub); font-size: .8125rem; }

/* 2日間の流れ。時間と内容を長音でつなぐ */
.time {
  padding: clamp(5rem, 14vh, 9rem) var(--gutter) clamp(4rem, 12vh, 8rem);
  color: #FFFFFF;
  background: var(--red);
  clip-path: inset(0 calc((1 - min(1, calc(var(--p, 1) * 3.4))) * 6vw) round calc((1 - min(1, calc(var(--p, 1) * 3.4))) * 48px));
}
.day { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1rem, 2.6vw, 2.5rem); margin-top: clamp(3rem, 8vh, 6rem); }
.day__label { position: sticky; top: 5rem; align-self: start; }
.day__num { display: block; font: 500 clamp(3.5rem, 8vw, 7.5rem)/1 var(--num); letter-spacing: -.02em; }
.day__week { display: block; margin-top: .5rem; font-weight: 600; }
.rows { display: grid; gap: clamp(1.75rem, 4vh, 3rem); padding: 0; list-style: none; }
.row { --bar: .09em; display: flex; align-items: center; font: 400 clamp(1.25rem, 2.1vw, 2rem)/1.4 var(--maru); }
.row__time { flex: none; font: 500 clamp(1.625rem, 2.9vw, 2.75rem)/1.1 var(--num); }
.row .str__bar { flex-basis: 2rem; height: 3px; margin-inline: 1rem; transform: none; }
.row__body { display: grid; flex: none; }
.row__body b { font-weight: 400; }
.row__body small { font: 500 clamp(.8125rem, 1vw, .9375rem)/1.7 var(--sans); }

/* おやくそく */
.rules { padding: clamp(4rem, 12vh, 8rem) 0 clamp(4rem, 10vh, 7rem); }
.rules > .kicker, .rules > .str { margin-inline: var(--gutter); }
.lanterns {
  position: relative;
  display: flex;
  justify-content: safe center;
  gap: clamp(.5rem, 2.2vw, 2.25rem);
  padding: 2rem var(--gutter) 3rem;
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 2rem / max(100%, 70rem) 2px no-repeat;
}
.lanterns::-webkit-scrollbar { display: none; }
.lantern {
  --tint: #F5EEDC;
  position: relative;
  flex: none;
  width: clamp(8.5rem, 13vw, 11.5rem);
  aspect-ratio: 1 / 2;
  background: url("img/paper-lantern.webp") center top / contain no-repeat;
  transform-origin: 50% 0;
}
.lantern--red { background-image: url("img/red-lantern.webp"); color: #FFFFFF; }
.lantern p { position: absolute; top: 57%; left: 50%; height: 56%; translate: -50% -50%; font: 400 clamp(.9375rem, 1.3vw, 1.1875rem)/1.5 var(--maru); letter-spacing: .08em; writing-mode: vertical-rl; }

/* どこ */
.where { padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(4rem, 12vh, 8rem); background: var(--cream); }
.map { position: relative; max-width: 88rem; margin: clamp(1.5rem, 4vh, 3rem) auto 0; }
.map__img { width: 100%; }
.map__pins { position: absolute; inset: 0; padding: 0; margin: 0; list-style: none; }
.pin { position: absolute; left: var(--x); top: var(--y); }
.pin__in { display: inline-flex; align-items: center; gap: .5em; padding: .3em .85em .3em .35em; color: var(--ink); background: #FFFFFF; border-radius: 99px; box-shadow: 0 .4rem 1rem rgb(70 50 20 / .16); font: 700 clamp(.75rem, 1.1vw, .9375rem)/1.3 var(--sans); white-space: nowrap; translate: -50% -50%; transition: scale .25s var(--spring); }
.pin__in:hover { scale: 1.1; }
.pin b, .spots b { display: inline-grid; flex: none; place-items: center; width: 1.8em; height: 1.8em; color: #FFFFFF; background: var(--red); border-radius: 50%; font: 500 1em/1 var(--num); }
.where__info { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 5vh, 4rem); }
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; align-content: start; padding: 0; margin: 0; list-style: none; font-weight: 600; }
.spots li { display: flex; align-items: center; gap: .6em; }
.facts { display: grid; gap: .9rem; margin: 0; }
.facts div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ink); }
.facts dt { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* おしまい */
.bye { position: relative; padding: clamp(5rem, 16vh, 11rem) var(--gutter) 0; overflow: clip; }
.bye__text { margin-top: 1rem; font: 400 clamp(1.25rem, 2.2vw, 2rem)/1.5 var(--maru); }
.bye__pile { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(.25rem, 1.5vw, 1.5rem); margin-top: clamp(2.5rem, 7vh, 5rem); padding-bottom: 1.5rem; }
.bye__pile img { flex: 0 1 auto; width: auto; min-width: 0; height: auto; max-height: clamp(4.5rem, 15vw, 14rem); object-fit: contain; filter: drop-shadow(0 .6rem .8rem rgb(70 50 20 / .15)); }
.bye__pile img:nth-child(odd) { transition-delay: .1s; rotate: -5deg; }
.bye__pile img:nth-child(3n) { transition-delay: .25s; rotate: 6deg; }
.bye__pile img:nth-child(4) { transition-delay: .35s; }
.bye__pile img:nth-child(6) { transition-delay: .45s; rotate: 9deg; }

@media (prefers-reduced-motion: no-preference) {
  .pin:nth-child(2) { transition-delay: .08s; }
  .pin:nth-child(3) { transition-delay: .16s; }
  .pin:nth-child(4) { transition-delay: .24s; }
  .pin:nth-child(5) { transition-delay: .32s; }
  .pin:nth-child(6) { transition-delay: .4s; }
  [data-in="pop"] { transition-timing-function: var(--spring); }
  .say__img { animation: bob 3.2s ease-in-out infinite; }
  .say__img:nth-of-type(2n) { animation-delay: -1.1s; }
}
@keyframes bob { 50% { transform: translateY(-.1em) rotate(-5deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seal, .grow__btn, .card__motif, .pin__in, .hero__menu a { transition: none; }
}

/* タブレット以下 */
@media (max-width: 56rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
  .card--a, .card--b, .card--c, .card--d, .card--e, .card--f { grid-column: auto; margin-top: 0; }
  .card--b, .card--e { grid-column: 1 / -1; }
  .card--c { order: 1; }
  .card--b { order: 2; }
  .card--d { order: 3; }
  .card--f { order: 4; }
  .card--e { order: 5; }
  .day { grid-template-columns: minmax(0, 1fr); }
  .day__label { position: static; display: flex; align-items: baseline; gap: .75rem; }
  .where__info { grid-template-columns: minmax(0, 1fr); }
}

/* スマートフォン */
@media (max-width: 40rem) {
  .hero__title { font-size: 16.4vw; line-height: 1.14; }
  .hero__line { white-space: normal; }
  .hero__line .ph { display: block; }
  .hero__line--long { flex-wrap: wrap; }
  .hero__head { flex: 0 0 100%; }
  .hero__menu { gap: .9rem; font-size: .8125rem; }
  .hero__logo { font-size: 1rem; }
  .m--lantern { --x: 74%; --y: 13%; --w: 3.75rem; }
  .m--cotton { --x: 76%; --y: 34%; --w: 4rem; }
  .m--bottle { --x: 56%; --y: 13%; --w: 1.625rem; }
  .m--pinwheel { --x: 34%; --y: 11%; --w: 2.75rem; }
  .m--goldfish { --x: 66%; --y: 67%; --w: 4.5rem; }
  .m--takoyaki { --x: 40%; --y: 76%; --w: 5rem; }
  .m--yoyo { display: none; }
  .m--apple { display: none; }
  .m--taiko { display: none; }
  .grow__card { --ix: 14%; --iy: 22%; }
  .flow { font-size: 22vw; }
  .row { flex-wrap: wrap; }
  .row__time { flex: 0 0 auto; }
  .row .str__bar { flex: 1 1 2rem; margin-right: 0; }
  .row .str__rest { display: none; }
  .row__body { flex: 0 0 100%; margin-top: .25rem; }
  .lanterns { justify-content: flex-start; }
  .lantern { width: 10.5rem; }
  .pin__in { padding: 0; background: none; box-shadow: none; font-size: .8125rem; }
  .pin__in span { display: none; }
  .bye__pile img:nth-child(n+6) { display: none; }
  .hero__lead { font-size: .875rem; }
  .seal { width: 6rem; }
}
@media (max-width: 22rem) {
  .m--takoyaki, .m--cotton { display: none; }
  .m--goldfish { --x: 40%; --y: 75%; --w: 3.25rem; }
}