@charset "UTF-8";
/*
 * ページの演出（構成は めておら学園祭 LP meteorites-fanmeeting2026.stpr.com を参考。動きはシンプルにした）
 *   最初の表示: 左右の縦帯・パネル → KV → ヘッダー・メニュー → 日程 の順に、ふわっと現れる
 *   常に動く  : ✦・星の小さなきらめきだけ
 *   スクロール: 各ブロックが画面に入ったら少し上がりながら現れる（main.js が .js-reveal / .is-inview を付ける）
 * 回転・弾む・行き過ぎて戻る動き、ずっと拡縮し続ける動きは使わない（2026-10-26 ユーザー指示「シンプルなアニメーションで」）。
 * style.css の位置・大きさには触れず、transform と opacity だけを動かす。終わった後に transform を残さないよう fill-mode は backwards
 */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- 最初の表示 ---- */
.pc-bar { animation: fadeIn .8s ease-out .1s backwards; }
.kv img { animation: fadeIn .8s ease-out .2s backwards; }
.hd__logo, .hd__menu { animation: fadeIn .6s ease-out .7s backwards; }
.schedule { animation: fadeUp .8s ease-out .9s backwards; }
.page--sub main > .sec:first-child { animation: fadeUp .8s ease-out .3s backwards; }   /* 下層ページは最初の章（見出し） */

/* 左右のパネル（.pc-side__in は位置合わせに transform を使うので、中身を動かす） */
.pc-side__logo { animation: fadeIn .8s ease-out .4s backwards; }
.pc-share { animation: fadeUp .8s ease-out .6s backwards; }
.pc-side .menu li { animation: fadeIn .6s ease-out backwards; }
.pc-side .menu li:nth-child(1) { animation-delay: .5s; }
.pc-side .menu li:nth-child(2) { animation-delay: .56s; }
.pc-side .menu li:nth-child(3) { animation-delay: .62s; }
.pc-side .menu li:nth-child(4) { animation-delay: .68s; }
.pc-side .menu li:nth-child(5) { animation-delay: .74s; }
.pc-side .menu li:nth-child(6) { animation-delay: .8s; }
.pc-side .menu li:nth-child(7) { animation-delay: .86s; }
.pc-side .menu li:nth-child(8) { animation-delay: .92s; }
.pc-side .menu-btns { animation: fadeUp .8s ease-out 1s backwards; }

/* ---- 常に動く（✦・星の小さなきらめき） ---- */
.venue__area img { animation: twinkle 3s ease-in-out infinite; }
.venue:nth-child(2n) .venue__area img { animation-delay: .8s; }
.ticket__point { animation: twinkle 3.4s ease-in-out infinite; }
.soon__l { animation: twinkle 3s ease-in-out infinite; }
.soon__r { animation: twinkle 3s ease-in-out 1.2s infinite; }
.ft__sns-ttl .spark { animation: twinkle 3s ease-in-out infinite; }
.ft__sns-ttl .spark:last-child { animation-delay: 1.2s; }
.pc-bar__in img { animation: twinkle 3.4s ease-in-out 1s infinite; }
.pc-bar__in .x3 img:nth-child(2) { animation-delay: 1.5s; }
.pc-bar__in .x3 img:nth-child(3) { animation-delay: 2s; }

/* ---- スクロールで現れる ---- */
.js-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js-reveal.is-inview { opacity: 1; transform: none; }

/* ---- ボタン（2026-10-28 ユーザー指示「シンプルなアニメーション」）----
 * 横長のボタン（.btn・小さい .btn--s も）: 乗せると矢印が右へ少し動き、白い膜で少し明るく。押すと少し暗く。
 *   ボタン自体は「スクロールで現れる」で transform・transition を使うことがあるので、動かすのは中の矢印と ::after だけ
 * 文字の丸いボタン（フッターの X・LINE など）: 乗せると少し浮いて光が強く。押すと少し縮む
 * 乗せる動きはマウスのある端末だけ（スマホで押した後に残らないように） */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .3s ease-out; pointer-events: none; z-index: 0; }
.btn__txt, .btn__arw { position: relative; z-index: 1; }   /* 白い膜（::after）を文字・矢印の下にする */
.btn__arw { transition: transform .3s ease-out; }
.ft__tags a { transition: transform .25s ease-out, box-shadow .25s ease-out, filter .25s ease-out; }
@media (hover: hover) {
  .btn:hover::after { opacity: .2; }
  .btn:hover .btn__arw { transform: translateX(.4rem); }
  .ft__tags a:hover { transform: translateY(-.2rem); box-shadow: 0 0 1.4rem var(--glow); }
}
.btn:active::after { opacity: 0; }
.btn:active { filter: brightness(.95); }
.ft__tags a:active { transform: scale(.95); filter: brightness(.95); }

/* ---- ハンバーガーメニュー（2026-10-28 ユーザー指示「軽く」）----
 * 開くたびに項目が上から順に少し上がりながら現れる（閉じたら元に戻すので、毎回同じ動き）。
 * メニューの文字は乗せると少し薄く（PC 右のメニューも同じ。乗せる動きはマウスのある端末だけ） */
.gnav .menu li, .gnav .menu-btns { opacity: 0; transform: translateY(1rem); }
.gnav.is-open .menu li, .gnav.is-open .menu-btns { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; }
.gnav.is-open .menu li:nth-child(1) { transition-delay: .05s; }
.gnav.is-open .menu li:nth-child(2) { transition-delay: .1s; }
.gnav.is-open .menu li:nth-child(3) { transition-delay: .15s; }
.gnav.is-open .menu li:nth-child(4) { transition-delay: .2s; }
.gnav.is-open .menu li:nth-child(5) { transition-delay: .25s; }
.gnav.is-open .menu li:nth-child(6) { transition-delay: .3s; }
.gnav.is-open .menu li:nth-child(7) { transition-delay: .35s; }
.gnav.is-open .menu li:nth-child(8) { transition-delay: .4s; }
.gnav.is-open .menu-btns { transition-delay: .45s; }
.menu a { transition: opacity .2s ease-out; }
@media (hover: hover) {
  .menu a:hover { opacity: .6; }
}

/* ---- 動きを減らす設定の人には動かさない ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal { opacity: 1 !important; transform: none !important; }
}