:root {
  --bg: #fee991;
  --ink: #22201f;
  --orange: #f9ad28;
  --pink: #f25c5c;
  --teal: #63c4c8;
  --cream: #fff0b8;
}

* { box-sizing: border-box; }

/* 横スクロール: ページの高さは画面に固定し、幅だけ伸ばす */
html {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
}

/* 以前はここで html.nova-menu-open に overflow:hidden を付けて、メニューを
   開いている間 <html>（このページの実際のスクロール領域）をロックして
   いたが、overflow:hidden に切り替えた時点でスクロール位置そのものが
   失われるブラウザがあり、メニューを開くたびに横スクロール位置が先頭に
   戻ってしまう不具合の原因になっていた。横スクロールの阻止自体は
   script.js 側のホイール/タッチ判定（isMenuOpen()）だけで行っているので、
   ここでのロックは行わない */

/* スマホで縦のスワイプを script.js に渡すため、ブラウザが処理するのは横のパンだけにする。
   ピンチズームを許可していると、誤って縮小してしまい独自のスクロール処理と
   かみ合わず操作しづらくなるため、ズーム自体を許可しない */
html,
body,
.track,
.track * { touch-action: pan-x; }

body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.track {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
}

/* ---- ヒーロー（ロゴ + 流線）----
   1画面目はロゴだけを中央に置く（カードは右にスクロールすると現れる）。
   ラインの輪の中心をロゴの中心に合わせる: ラインの幅は 高さ120% × 縦横比(1202/1074) ≒ 134.3dvh
   なので、画面中央からその半分の 67.15dvh を引く（アニメーションが transform を使うため、位置は left で決める） */
.hero {
  --logo-w: min(45dvh, 88vw);
  position: relative;
  flex: none;
  width: 100vw;
  height: 100%;
}

.hero__line {
  position: absolute;
  top: -10%;
  left: calc(50% - 67.15dvh);
  height: 120%;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* 流線の向き（右上 → 左下）に沿って流れ込みながらフェードイン */
@keyframes line-flow {
  from {
    opacity: 0;
    transform: translate(26dvh, -17dvh);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__line { animation: line-flow 2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: var(--logo-w);
  transform: translate(-50%, -50%);
}

.hero__logo img {
  display: block;
  width: 100%;
  height: auto;
  /* 位置決めに使っている .hero__logo の transform とぶつからないよう、動きは中の画像に付ける */
  animation: logo-pop 0.9s ease-out 0.3s both;
}

/* ポップに登場: 小さく傾いた状態から、少し大きめに飛び出し、行き過ぎた分を戻して落ち着く */
@keyframes logo-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.14) rotate(2.5deg);
  }
  72% {
    transform: scale(0.95) rotate(-1deg);
  }
  88% {
    transform: scale(1.03) rotate(0.3deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---- ロゴと「開場時間」カードの間の飾り（惑星と星）----
   ロゴの右端から、次のカードの手前までの空いている場所に置く。
   PC：ヒーロー（1画面目）の右側の余白。スマホ：それに加えて、開場時間カードの
   手前の余白（下の @media で付けている 55vw）の分まで右に広げる */
.hero__deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + var(--logo-w) / 2);
  right: 0;
  pointer-events: none;
}

.hero__deco img {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

/* 惑星：ゆっくり上下にふわふわ */
.hero__deco-planet {
  width: min(32dvh, 44vw);
  left: 56%;
  top: 84%;
  animation: deco-in 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both, deco-float 6s ease-in-out infinite alternate;
}

@keyframes deco-float {
  from { transform: translate(-50%, -50%) rotate(-4deg); }
  to   { transform: translate(-50%, calc(-50% - 14px)) rotate(4deg); }
}

/* 星：大きさ・明るさが変わってきらきら（1つずつタイミングをずらす） */
/* 登場は赤い流線と同じく右上から流れ込む（--in で 1 つずつ時間をずらす）。
   transform はふわふわ・きらきらで使うので、登場は translate と filter で動かす */
.hero__deco-star {
  animation-name: deco-in, deco-twinkle;
  animation-duration: 1.6s, 2.8s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1), ease-in-out;
  animation-delay: var(--in), 0s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}

@keyframes deco-in {
  from { translate: 26dvh -17dvh; filter: opacity(0); }
  to   { translate: 0 0; filter: opacity(1); }
}

/* 星は惑星のすぐまわりに、ぎゅっと集めて置く */
.hero__deco-star--1 { width: min(7.5dvh, 11vw); left: 80%; top: 70%; --in: 0.5s; animation-duration: 1.6s, 2.8s; animation-delay: var(--in), 0s; }
.hero__deco-star--2 { width: min(5.5dvh, 8vw);  left: 4%;  top: 87%; --in: 0.65s; animation-duration: 1.6s, 2.2s; animation-delay: var(--in), -0.8s; }
.hero__deco-star--3 { width: min(5.5dvh, 8vw);  left: 86%; top: 90%; --in: 0.8s; animation-duration: 1.6s, 3.2s; animation-delay: var(--in), -1.6s; }
.hero__deco-star--4 { width: min(6dvh, 9vw);    left: 26%; top: 76%; --in: 0.55s; animation-duration: 1.6s, 2.6s; animation-delay: var(--in), -1.1s; }
.hero__deco-star--5 { width: min(4dvh, 6vw);    left: 30%; top: 93%; --in: 0.7s; animation-duration: 1.6s, 3s; animation-delay: var(--in), -0.4s; }

@keyframes deco-twinkle {
  0%, 100% { transform: scale(0.75) rotate(-10deg); opacity: 0.55; }
  50%      { transform: scale(1.1) rotate(10deg);   opacity: 1; }
}

/* ---- カード（開場時間 / アクセス） ---- */
.card {
  --card-h: min(82dvh, 150vw);   /* 画面が縦長のときは、幅に合わせてカードを少し大きめにする */
  position: relative;
  flex: none;
  height: var(--card-h);
  aspect-ratio: 512 / 725;
}

.card + .card { margin-left: 1vw; }

/* 画面に入ったら、少し下から上へフェードイン（.is-visible は script.js が付ける） */
.js .card {
  opacity: 0;
  transform: translateY(4dvh);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.js .card.is-visible {
  opacity: 1;
  transform: none;
}

/* 以前は開場時間に0.3秒、アクセスに0.15秒の待ち時間があり、動き出しが遅く
   感じたので、待ち時間なしにした */
.js .card--hours { transition-delay: 0s; }
.js .card--access { transition-delay: 0s; }

.card > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- 展示・バザー（背景が黄色 → 青緑 → 黄色と切り替わる）----
   寸法はイメージ図3から測った値で、すべて画面の高さ(dvh)基準。
   黄→青緑・青緑→黄、どちらの境目もギザギザ柄の画像（color-transition-*.png）。
   画像の縦横比は 1080:1920 ≒ 0.5625 で、高さを zone の高さに合わせて
   表示するので、画像の実際の表示幅は 56.25dvh になる。
   背景は ::before に描く（コンテンツ側まで画像で覆われないように分ける） */
.zone {
  position: relative;
  flex: none;
  align-self: stretch;
  display: flex;
  /* 画面が縦長のスマホだと dvh 基準だけでは余白が大きくなりすぎるので、
     カードの幅（--card-h: min(82dvh, 150vw)）と同じ考え方で、
     画面幅(vw)基準の値とどちらか小さい方を使う */
  margin-left: min(24dvh, 11vw);
  /* 56.25dvh はギザギザ画像自体の表示幅（これは画像が欠けるので縮めない）。
     そのあとの「少し奥にずらす余白」部分だけ、左の余白（margin-left）と
     同じ考え方・同じ値にして、タイムテーブルとの間が広がりすぎないようにする */
  padding-right: 56.25dvh;
}

.zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--teal);
  background-image: url("images/color-transition-left.webp"), url("images/color-transition-right.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: auto 100%, auto 100%;
}

.zone > * { position: relative; }

/* 縦書きのタイトル画像と「詳しくみる」ボタン */
.zone__lead { flex: none; }
/* ギザギザの切り替わり画像が最大で幅の82%ほどまで食い込むため、
   EXHIBITIONの文字・ボタンはそれより奥（+60dvh）に押し込んで、
   ギザギザ柄の上に文字が乗って読みにくくなるのを避けている */
.zone__lead--exhibition { width: 88.6dvh; }
.zone__lead--bazaar { width: 40.4dvh; }

.zone__title,
.zone__more img {
  display: block;
  width: auto;
  max-width: none;
}

/* 展示: タイトルは境目をまたいで置き、ボタンはその右下 */
.zone__lead--exhibition .zone__title {
  position: absolute;
  top: 7.6dvh;
  left: 61.5dvh;
  height: 84.6dvh;
}

.zone__lead--exhibition .zone__more {
  position: absolute;
  top: 71.3dvh;
  left: 73.8dvh;
}

/* バザー: タイトルの真下にボタン */
.zone__stack {
  position: absolute;
  top: 7.6dvh;
  left: 28.1dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.2dvh;
}

.zone__lead--bazaar .zone__title { height: 50.3dvh; }

.zone__more { display: block; transition: transform 0.15s; }
.zone__more img { height: 21.2dvh; }

.zone__more:hover,
.zone__more:focus-visible { transform: translateY(-3px); }

/* ---- タイル（下から上へゆっくり流れ続ける）----
   2列。各列は画像の一覧を2回並べ、半分(-50%)ぶん動かして継ぎ目なくループさせる。
   1枚あたり 5秒 の速さ（列ごとの枚数 --n に比例して周期が決まる）。 */
.tiles {
  --tile-line: #3a3a3a;
  flex: none;
  display: flex;
  width: 44.8dvh;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.tiles__col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.tiles__col + .tiles__col { border-left: 1px solid var(--tile-line); }

.tiles__track {
  display: flex;
  flex-direction: column;
  animation: tiles-up calc(var(--n) * 5s) linear infinite;
  will-change: transform;
}

.tiles.is-paused .tiles__track { animation-play-state: paused; }

@keyframes tiles-up {
  to { transform: translateY(-50%); }
}

.tile {
  flex: none;
  aspect-ratio: 5 / 7;
  border-bottom: 1px solid var(--tile-line);
  background: #fff;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 黄色に戻ったあとの3枚（タイムテーブル / FAQ / アンケート）----
   寸法はイメージ図4から測った値。画像の座標は各SVGの viewBox に対する割合 */
.card--timetable { margin-left: 19.9dvh; }
.card + .card--faq { margin-left: 3.5dvh; }

/* アンケートは余白のない SVG（384×366）。ほかのカードと同じ縮尺で、少し上に置く */
.card + .card--survey {
  height: calc(var(--card-h) * 366 / 725);
  aspect-ratio: 384 / 366;
  margin-left: 6.5dvh;
  /* 右の余白（協賛企業のバナーとの間）。縦長のスマホだと dvh だけでは広がりすぎる
     ので、画面幅(vw)基準の値とどちらか小さい方を使う */
  margin-right: min(20dvh, 27vw);
  margin-bottom: 8dvh;
}

/* ---- 協賛企業 ----
   企業ロゴは縦横比がバラバラなので、object-fit: contain で
   全体を表示する（切り取らない）。枠やタイトルはなし、2列×6行で12社ぶん */
.sponsors {
  flex: none;
  align-self: center;
  margin-left: 6.5dvh;
  margin-right: 6.5dvh;
}

/* 画面に入ったら、カードと同じく少し下から上へフェードイン（.is-visible は script.js が付ける） */
.js .sponsors {
  opacity: 0;
  transform: translateY(4dvh);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.js .sponsors.is-visible {
  opacity: 1;
  transform: none;
}

/* セルの大きさは高さ(dvh)基準だが、スマホの縦長画面だとそれだけでは
   画面幅を超えてしまうので、画面幅(vw)基準の値とどちらか小さい方を使う */
.sponsors__grid {
  display: grid;
  grid-template-columns: repeat(2, min(26dvh, 40vw));
  grid-template-rows: repeat(6, min(11dvh, 17vw));
  gap: min(1.8dvh, 2.2vw);
}

.sponsors__item {
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(0.8dvh, 1vw);
  overflow: hidden;
}

.sponsors__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* リンク付きのバナーは、セル全体を押せるようにする */
.sponsors__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ---- フッター（サイトの締めのポスター）----
   元データは 435×932px のスマホ1画面ぶんのポスター画像。
   PCでは他のカードと同じ高さ基準の縮尺。
   中の余白・文字サイズなどは、元のpx値 ×(100/932) で dvh に変換してある */
.footer {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 46.68dvh;
  aspect-ratio: 435 / 932;
  color: #fff;
}

/* スマホ（画面の横幅が狭いとき）は、高さ基準だと dvh がブラウザの
   アドレスバーなどで変動し、画面幅より狭くなったり広くなったりして
   安定しない。横幅そのものを基準に、画面いっぱいに広げる
   （高さは aspect-ratio で追従する）。中の文字・アイコンの並びは
   PCと同じ指定のまま、上書きはしない */
@media (max-width: 600px) {
  .footer { width: 100vw; }
  /* 「制作者/協力」の文字・アイコン・間の白い線をひとかたまり（.footer__group）
     として扱い、その中の位置関係（PCと同じ）は保ったまま、
     かたまりごと横幅いっぱいの中で中央に寄せる */
  .footer__content { align-items: center; }
  .footer__row--bottom { align-self: stretch; }
  /* かたまりの左には margin-left（行の余白）の分だけ余計な見えない幅があり、
     その分だけ見た目が右に寄って見えるので、右にも同じだけ余白を足して
     見た目の中心を合わせる */
  .footer__group { margin-right: 3dvh; }

  /* ロゴ（1画面目）とそのすぐ後ろの「開場時間」カードの間が、
     画面が狭いと詰まって見えるので、少し余白を足す */
  .card--hours { margin-left: 55vw; }

  /* 上の余白（55vw）の分まで、ロゴ横の飾り（惑星・星）を置く場所を広げる */
  .hero__deco { right: -55vw; }

  /* 背景の切り替わり(.zone)のすぐ後ろ、タイムテーブルのカードにも
     高さ基準(dvh)だけの余白があり、縦長のスマホだと広くなりすぎるので、
     画面幅(vw)基準の値とどちらか小さい方を使う */
  .card--timetable { margin-left: min(19.9dvh, 2vw); }
}

.footer__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 29.4%;
  background-color: #F68184;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.footer__group {
  display: flex;
  flex-direction: column;
}

.footer__row {
  margin-left: 6.12dvh;
  height: 5.47dvh;
  display: flex;
  align-items: center;
}

/* 1行目だけ、パネル上端からの余白を付ける（2行目は区切り線の余白で
   間隔が付くので不要。中身が詰まって見切れないよう、元データ通り
   2行目には余白を足さない） */
.footer__row:first-child { margin-top: 2.68dvh; }

.footer__divider {
  background-color: #fff;
  height: 1px;
  width: 40.13dvh;
  margin: 0.75dvh 0 0.75dvh 3.27dvh;
}

.footer__icon-box {
  flex: none;
  width: 4.29dvh;
  height: 4.29dvh;
  background-color: #F15557;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__icon-box--x { margin-left: 5.36dvh; }
.footer__icon-box--instagram { margin-left: 1.61dvh; }

.footer__icon {
  display: block;
  width: 2.90dvh;
  height: 2.90dvh;
}

/* .footer__row の margin-left・固定 height を打ち消す（ここだけ横幅いっぱいで中央寄せ） */
.footer__row--bottom {
  margin-top: 0;
  margin-left: 0;
  height: auto;
  display: block;
  text-align: center;
}

.footer__text {
  margin: 0;
  font-size: 1.72dvh;
  line-height: 1.4;
}

.footer__text--small {
  margin-top: 0.75dvh;
  font-size: 1.29dvh;
}

/* タイムテーブルの「フキダシをタップ！」: EVENT と MUSIC の雲をリンクにする（透明。触れると白く光る） */
.hotspot {
  position: absolute;
  display: block;
  border-radius: 46%;
  transition: background-color 0.2s;
}

.hotspot:hover { background: rgba(255, 255, 255, 0.22); }

.hotspot:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.hotspot--event { left: 8.2%; top: 36.5%; width: 63.8%; height: 27.5%; }
.hotspot--music { left: 16.5%; top: 64%; width: 65.4%; height: 29.6%; }

/* カードの上に重ねるボタン画像（FAQ の「もっと見る」、アンケートの2つのボタン） */
.over {
  position: absolute;
  display: block;
  transition: transform 0.15s;
}

.over img {
  display: block;
  width: 100%;
  height: auto;
}

.over:hover,
.over:focus-visible { transform: translateY(-2px); }

.over--faq { left: 48.6%; top: 86.5%; width: 26%; }
.over--student { left: 7.8%; top: 61.7%; width: 39.06%; }
.over--general { left: 53.4%; top: 61.7%; width: 39.06%; }

/* アクセスカードの「Google Maps」「校内マップ」ボタン（画像の空白部分に重ねる）
   ボタン画像は幅150（カード幅512の約29%）。下端を揃えて置く */
.card__buttons {
  position: absolute;
  bottom: 19.4%;
  left: 13.5%;
  width: 61.6%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card__btn {
  display: block;
  width: 47.6%;
  border-radius: 999px;
  transition: transform 0.15s;
}

.card__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.card__btn:hover,
.card__btn:focus-visible { transform: translateY(-2px); }

/* ---- メニュー ----
   見た目・動きは共通部品（menu/nova-menu.css・menu/nova-menu.js）に統一。
   ここではトップページ特有の事情によるものだけを上書きする。 */

/* ページ全体は横スクロール専用に touch-action: pan-x に絞っているが、
   メニューの中身が縦に長いときは、パネルの中だけ縦スワイプで
   スクロールできるようにする */
.nova-menu__panel { touch-action: pan-y; }

/* ---- スクロールの案内 ---- */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  transform: translateX(-50%);
  font-family: "Kiwi Maru", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--pink);
  pointer-events: none;
  transition: opacity 0.4s;
}

.scroll-hint.is-hidden { opacity: 0; }

.scroll-hint span { display: inline-block; animation: hint-move 1.4s ease-in-out infinite; }

@keyframes hint-move {
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint span,
  .hero__line,
  .hero__logo img,
  .hero__deco img,
  .tiles__track { animation: none; }

  .js .card,
  .js .sponsors {
    opacity: 1;
    transform: none;
    transition: none;
  }
}