@charset "UTF-8";

/* ============================================================
   ほっぺちゃん ～Dream Reading～ 特設ページ
   TOKENS
   ============================================================ */
:root{
  --pink:        #e4006e;
  --pink-deep:   #c30060;
  --yellow:      #f5dc00;
  --yellow-deep: #e0b800;
  --ink:         #2b1220;
  --white:       #ffffff;

  --logo-pink:   #ff8fc2;
  --logo-blue:   #7ed8f5;
  --logo-purple: #b58cf0;

  --font-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Fredoka", "M PLUS Rounded 1c", sans-serif;

  --wrap: 1040px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;min-height:100dvh;
  font-family:var(--font-jp);
  background:var(--pink);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px;}

.wrap{width:min(100% - 2rem, var(--wrap));margin-inline:auto;}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* --- 登場系 --- */
@keyframes drop-bounce{           /* 上から落ちて弾む */
  0%  {opacity:0;transform:translateY(-70px) scale(.9);}
  55% {opacity:1;transform:translateY(8px)  scale(1.06);}
  75% {transform:translateY(-4px) scale(.98);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes pop-in{                /* 弾みながら飛び出す */
  0%  {opacity:0;transform:translateY(34px) scale(.5) rotate(var(--rot,-12deg));}
  60% {opacity:1;transform:translateY(-8px) scale(1.1) rotate(calc(var(--rot,-12deg)*.3));}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg);}
}
@keyframes logo-land{           /* ロゴが飛び込んで着地 */
  0%  {opacity:0;transform:scale(.35) translateY(-40px) rotate(-8deg);}
  55% {opacity:1;transform:scale(1.14) translateY(10px) rotate(3deg);}
  75% {transform:scale(.97) translateY(-4px) rotate(-1deg);}
  100%{opacity:1;transform:scale(1) translateY(0) rotate(0);}
}
@keyframes spark-burst{         /* 着地の衝撃で星が弾ける */
  0%  {opacity:0;transform:scale(0) rotate(-40deg);}
  60% {opacity:1;transform:scale(1.5) rotate(20deg);}
  100%{opacity:.9;transform:scale(1) rotate(0);}
}
@keyframes wipe-in{               /* 左から現れる */
  0%  {opacity:1;clip-path:inset(0 100% 0 0);}
  100%{opacity:1;clip-path:inset(0 0 0 0);}
}
@keyframes slide-in-left{
  0%  {opacity:0;transform:translateX(-60px);}
  100%{opacity:1;transform:translateX(0);}
}
@keyframes slide-in-right{
  0%  {opacity:0;transform:translateX(60px);}
  100%{opacity:1;transform:translateX(0);}
}
@keyframes swing-in-right{        /* 袖からひょっこり */
  0%  {opacity:0;transform:translateX(90px) rotate(14deg);}
  65% {opacity:1;transform:translateX(-10px) rotate(-4deg);}
  100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes swing-in-left{
  0%  {opacity:0;transform:translateX(-90px) rotate(-14deg);}
  65% {opacity:1;transform:translateX(10px) rotate(4deg);}
  100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes elastic-in{            /* びよんと伸びて決まる */
  0%  {opacity:0;transform:scale(.4);}
  50% {opacity:1;transform:scale(1.18);}
  70% {transform:scale(.94);}
  85% {transform:scale(1.04);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes fade-up{
  0%  {opacity:0;transform:translateY(24px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes fade-in-x{
  to{opacity:1;transform:translateX(0);}
}
@keyframes spread-in{             /* 字間が広がりながら決まる */
  0%  {opacity:0;letter-spacing:-.12em;transform:translateX(40px);}
  100%{opacity:1;letter-spacing:.22em;transform:translateX(0);}
}

/* --- 常時ループ系（登場後の“癖”） --- */
@keyframes float-y{               /* ふわふわ上下 */
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-12px);}
}
@keyframes sway{                  /* 左右にゆらゆら */
  0%,100%{transform:translateX(0) rotate(-4deg);}
  50%    {transform:translateX(8px) rotate(4deg);}
}
@keyframes bob{                   /* 首をかしげる */
  0%,100%{transform:translateY(0) rotate(0deg);}
  30%    {transform:translateY(-5px) rotate(3deg);}
  70%    {transform:translateY(3px) rotate(-3deg);}
}
@keyframes breathe{               /* ゆっくり呼吸 */
  0%,100%{transform:scale(1);}
  50%    {transform:scale(1.02);}
}
@keyframes stripe-move{           /* 帯のストライプが流れる */
  0%  {background-position:0 0;}
  100%{background-position:56px 0;}
}
@keyframes twinkle{
  0%,100%{opacity:.25;transform:scale(.7) rotate(0deg);}
  50%    {opacity:1;transform:scale(1.15) rotate(25deg);}
}
@keyframes tel-pulse{
  0%,100%{transform:scale(1);}
  50%    {transform:scale(1.05);}
}
@keyframes wiggle{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(-4deg);}
  75%    {transform:rotate(4deg);}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(.5rem,1.8vw,1.3rem) 0 clamp(2.5rem,6vw,4.5rem);
  background:var(--pink);          /* 下のコンテンツと同じ単色 */
  overflow:hidden;
}

/* きらきら：スクロールで視差移動（JSが --p を更新） */
.sparkles{position:absolute;inset:0;pointer-events:none;transform:translateY(calc(var(--p,0) * 1px));}
.sparkle{
  position:absolute;font-size:clamp(14px,2vw,26px);line-height:1;
  animation:twinkle 3.4s ease-in-out infinite;
}
.sparkle:nth-child(1){left:6%; top:18%;color:#ffe45c;animation-delay:.2s;}
.sparkle:nth-child(2){left:16%;top:52%;color:#7ed8f5;animation-delay:1.1s;}
.sparkle:nth-child(3){left:88%;top:14%;color:#ffe45c;animation-delay:.7s;}
.sparkle:nth-child(4){left:78%;top:62%;color:#ffb3d9;animation-delay:1.8s;}
.sparkle:nth-child(5){left:44%;top:8%; color:#b58cf0;animation-delay:2.4s;}
.sparkle:nth-child(6){left:30%;top:74%;color:#ffe45c;animation-delay:1.4s;}
.sparkle:nth-child(7){left:62%;top:34%;color:#7ed8f5;animation-delay:.9s;}
.sparkle:nth-child(8){left:9%; top:82%;color:#ffb3d9;animation-delay:2.9s;}

.hero-inner{position:relative;z-index:2;}

/* ① リード文：落ちて弾む */
.hero-lead{
  text-align:center;
  font-size:clamp(1.35rem,4.6vw,2.4rem);
  font-weight:900;letter-spacing:.04em;
  margin:0 0 clamp(.3rem,1vw,.7rem);
  text-shadow:0 3px 0 var(--pink-deep), 0 0 22px rgba(255,255,255,.35);
  opacity:0;
  animation:drop-bounce .8s cubic-bezier(.34,1.4,.5,1) .05s forwards;
}

/* ② 上部キャラ：順に飛び出し → 3体それぞれ別の癖でループ */
.char-row{
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(.4rem,3vw,2.4rem);
  margin-bottom:0;
}
.char{
  width:clamp(84px,17vw,190px);
  aspect-ratio:1/.86;
  position:relative;
  opacity:0;
  animation:pop-in .78s cubic-bezier(.34,1.56,.64,1) forwards;
}
.char img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;}

.char-row .char{cursor:pointer;}

/* --- 上段3体の個別調整（ここだけ触ればOK）---------------------
   width : 大きさ    top/left : 位置の微調整（マイナスで上・左へ）
   z-index : 重なり順（大きいほど手前）
   ※ transform はアニメーションが使うので、位置は top/left で指定すること
   ------------------------------------------------------------ */
.char-row .char--a{            /* 左：基準の115% */
  width:clamp(97px,19.6vw,219px);
  top:0rem; left:0rem; z-index:1;
}
.char-row .char--b{            /* 中央 */
  width:clamp(84px,17vw,190px);
  top:0rem; left:0rem; z-index:2;
}
.char-row .char--c{            /* 右：基準の105% */
  width:clamp(88px,17.9vw,200px);
  top:0rem; left:0rem; z-index:1;
}
.char-row .char--a{--rot:-14deg;animation-delay:.3s;}
.char-row .char--b{--rot:6deg;  animation-delay:.5s;}
.char-row .char--c{--rot:14deg; animation-delay:.7s;}

/* 登場後にループを引き継ぐ（JSが .settled を付与） */
.char-row .char--a.settled{opacity:1;animation:sway    4.6s ease-in-out infinite;}
.char-row .char--b.settled{opacity:1;animation:float-y 3.4s ease-in-out infinite;}
.char-row .char--c.settled{opacity:1;animation:bob     5.2s ease-in-out infinite;}
/* ループを止めずに反応させるため、ホバーはfilterのみ */
.char-row .char.settled{transition:filter .25s ease;}
.char-row .char.settled:hover{filter:brightness(1.08) saturate(1.15);}

/* ③④⑤ ロゴ（1枚画像）
   ・弾んで着地
   ・着地と同時に星が弾ける
   ・以降はゆっくり呼吸し続ける */
.logo-stage{
  position:relative;z-index:3;
  width:min(88vw,760px);
  margin:clamp(-2.5rem,-2.5vw,-.6rem) auto 0;
  aspect-ratio:760/420;            /* ロゴ画像の縦横比に合わせて調整 */
}
.logo-img{
  width:100%;height:100%;object-fit:contain;
  opacity:0;transform-origin:center 70%;
  animation:logo-land 1s cubic-bezier(.34,1.45,.5,1) 1s forwards;
  filter:drop-shadow(0 8px 14px rgba(120,0,60,.35));
}
.logo-img.settled{
  opacity:1;
  animation:breathe 4.5s ease-in-out infinite;
}
/* 着地に合わせて弾ける星 */
.logo-spark{
  position:absolute;font-size:clamp(16px,3vw,34px);line-height:1;
  color:#ffe45c;opacity:0;pointer-events:none;
  animation:spark-burst .8s cubic-bezier(.34,1.4,.5,1) forwards,
            twinkle 2.8s ease-in-out infinite;
  animation-delay:calc(1.55s + var(--n) * .09s), calc(2.35s + var(--n) * .09s);
}
.logo-spark:nth-child(2){left:2%; top:14%;color:#ffe45c;}
.logo-spark:nth-child(3){right:4%;top:8%; color:#7ed8f5;}
.logo-spark:nth-child(4){left:8%; bottom:12%;color:#ffb3d9;}
.logo-spark:nth-child(5){right:2%;bottom:18%;color:#ffe45c;}

/* ⑥ 日程は左から／会場は字間を広げながら右から */
.hero-info{text-align:center;margin-top:clamp(-1.5rem,-1.2vw,-.2rem);}
.hero-date{
  font-size:clamp(1.15rem,4.4vw,2.3rem);font-weight:800;letter-spacing:.02em;
  margin:0 0 .3em;text-shadow:0 3px 0 rgba(150,0,80,.4);
  opacity:0;animation:slide-in-left .7s cubic-bezier(.22,1,.36,1) 2.2s forwards;
}
/* 年・月・日の漢字だけ小さく（数字は元のサイズのまま） */
.hero-date .u{
  font-size:.6em;          /* 数値を下げるほど漢字が小さくなる */
  font-weight:800;
  margin:0 .04em;
  vertical-align:.06em;
}

/* 曜日の (土) (日) は半角カッコ＋小さめに */
.hero-date .dow{
  font-size:.6em;          /* 数値を下げるほど小さくなる */
  font-weight:800;
  letter-spacing:0;
  margin:0 .05em;
  vertical-align:.08em;    /* 小さくして下がって見えるぶんを持ち上げる */
}

.hero-venue{
  font-size:clamp(1.4rem,5.6vw,2.8rem);font-weight:900;
  margin:0;text-shadow:0 3px 0 rgba(150,0,80,.4);
  opacity:0;letter-spacing:.22em;
  animation:spread-in .8s cubic-bezier(.22,1,.36,1) 2.4s forwards;
}

/* ⑦ サイドキャラ：袖からひょっこり → それぞれ別テンポで揺れる */
.char-side{position:absolute;z-index:1;opacity:0;}
.char-side .char{width:100%;animation:none;opacity:1;}

.char--girl{
  right:1%;top:24%;width:clamp(64px,17vw,230px);aspect-ratio:1/1.9;
  animation:swing-in-right .9s cubic-bezier(.34,1.3,.5,1) 2.65s forwards;
}
.char--girl .char{aspect-ratio:1/1.9;}
.char--girl.settled{opacity:1;animation:bob 6s ease-in-out infinite;}

.char--kuro{
  right:2%;bottom:2%;width:clamp(80px,20vw,265px);aspect-ratio:1/.9;
  animation:swing-in-right .9s cubic-bezier(.34,1.3,.5,1) 2.85s forwards;
}
.char--kuro .char{aspect-ratio:1/.9;}
.char--kuro.settled{opacity:1;animation:float-y 4.2s ease-in-out infinite;}

.char--mini1{
  left:1%;top:30%;width:clamp(34px,8vw,105px);aspect-ratio:1/1;
  animation:swing-in-left .8s cubic-bezier(.34,1.3,.5,1) 3.05s forwards;
}
.char--mini1.settled{opacity:1;animation:sway 3.8s ease-in-out infinite;}

.char--mini2{
  left:4%;top:45%;width:clamp(32px,7.4vw,95px);aspect-ratio:1/1;
  animation:swing-in-left .8s cubic-bezier(.34,1.3,.5,1) 3.2s forwards;
}
.char--mini2.settled{opacity:1;animation:float-y 3s ease-in-out infinite;}

.char--mini1 .char,.char--mini2 .char{aspect-ratio:1/1;}

/* ============================================================
   ⑧ 黄色帯：左からワイプ → ストライプが流れ続ける
   ============================================================ */
.band{
  position:relative;overflow:hidden;
  color:var(--ink);
  text-align:center;
  padding:clamp(1.2rem,3.5vw,2rem) 1rem;
}
/* 背景レイヤーが左から開く */
.band-bg{
  position:absolute;inset:0;
  background:var(--yellow);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.band.is-in .band-bg{transform:scaleX(1);}
/* 開ききってからストライプが流れ始める */
.band-stripe{
  position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(-45deg,
    rgba(255,255,255,.3) 0 14px, transparent 14px 28px);
  background-size:56px 56px;
  transition:opacity .5s ease;
}
.band.is-in .band-stripe{
  opacity:1;transition-delay:.8s;
  animation:stripe-move 2.4s linear .8s infinite;
}
.band-body{position:relative;z-index:1;}
.band-title{
  font-size:clamp(1.4rem,5.4vw,2.6rem);font-weight:900;letter-spacing:.02em;
  margin:0 0 .35em;opacity:0;transform:scale(.6);
}
.band.is-in .band-title{animation:elastic-in .7s cubic-bezier(.34,1.4,.5,1) .5s forwards;}
.band-note{
  font-size:clamp(.92rem,3.2vw,1.4rem);font-weight:700;margin:0;
  opacity:0;transform:translateX(-24px);
}
.band.is-in .band-note{animation:fade-in-x .6s ease-out .8s forwards;}

/* ============================================================
   ⑨ キャスト：左右交互に入る／役名と名前は別タイミング
   ============================================================ */
.cast{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem);background:var(--pink);}
.cast-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.8rem,5vw,3rem);}
.cast-item{text-align:center;}
.cast-role{
  display:block;font-size:clamp(.85rem,3.2vw,1.15rem);font-weight:700;
  letter-spacing:.05em;margin-bottom:.15em;opacity:0;
}
.cast-name{
  display:block;font-size:clamp(1.9rem,7.5vw,3.2rem);font-weight:900;
  color:var(--yellow);letter-spacing:.04em;line-height:1.15;
  text-shadow:0 3px 0 rgba(150,0,80,.35);
  opacity:0;transform:scale(.5);
  transition:filter .3s ease;
}
.cast-name small{font-size:.42em;font-weight:800;letter-spacing:0;}

.cast-item--l.is-in .cast-role{animation:slide-in-left .6s cubic-bezier(.22,1,.36,1) forwards;}
.cast-item--r.is-in .cast-role{animation:slide-in-right .6s cubic-bezier(.22,1,.36,1) forwards;}
.cast-item.is-in   .cast-name{animation:elastic-in .75s cubic-bezier(.34,1.4,.5,1) .18s forwards;}

/* 登場が終わったらアニメーションを外し、ホバーはtransitionで扱う
   （animationのまま重ねると、ホバー解除のたびに登場演出が再生される） */
.cast-role.done,.cast-name.done{
  animation:none !important;opacity:1;transform:none;
}
.cast-name.done{
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), filter .3s ease;
}
.cast-item:hover .cast-name.done{
  transform:scale(1.05) rotate(-1.5deg);filter:brightness(1.12);
}

/* ============================================================
   ⑩ チケット：びよんと登場（金額はJSでカウントアップ）
   ============================================================ */
.ticket{
  text-align:center;padding:clamp(1.5rem,5vw,2.5rem) 0;
  font-size:clamp(1rem,3.6vw,1.35rem);font-weight:800;letter-spacing:.04em;
  opacity:0;transform:scale(.5);
}
.ticket.is-in{animation:elastic-in .8s cubic-bezier(.34,1.4,.5,1) forwards;}
.ticket strong{font-size:1.35em;}

/* ⑪ クレジット：行ごとに順送りでフェード */
.credit{
  text-align:center;
  font-size:clamp(.68rem,2.3vw,.88rem);
  font-weight:500;line-height:2;
  padding:0 0 clamp(1.4rem,4vw,2.2rem);
  color:rgba(255,255,255,.95);
}
.credit-line{
  margin:0;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.credit.is-in .credit-line{opacity:1;transform:none;}
.credit.is-in .credit-line:nth-child(1){transition-delay:.05s;}
.credit.is-in .credit-line:nth-child(2){transition-delay:.2s;}
.credit.is-in .credit-line:nth-child(3){transition-delay:.35s;}
.credit span{white-space:nowrap;margin-inline:.5em;display:inline-block;max-width:100%;}

/* ⑫ 問い合わせ：番号がゆっくり脈打つ／ホバーで揺れる */
.contact{
  text-align:center;padding:0 0 clamp(2rem,5vw,3rem);
  font-size:clamp(1rem,4vw,1.7rem);font-weight:800;letter-spacing:.01em;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.contact.is-in{opacity:1;transform:none;}
.contact .tel{
  display:inline-block;
  color:var(--white);text-decoration:none;
  border-bottom:3px solid rgba(255,255,255,.5);
  transition:color .25s, border-color .25s;
}
.contact.is-in .tel{animation:tel-pulse 2.4s ease-in-out 1s infinite;}
.contact .tel:hover{color:var(--yellow);border-color:var(--yellow);animation:wiggle .45s ease-in-out;}
.contact small{font-size:.55em;font-weight:700;}

.copy{
  margin:0;                      /* pタグ既定の上下マージンを消す */
  background:#1a0a12;text-align:center;
  padding:1.1rem 1rem;font-size:clamp(.65rem,2.2vw,.8rem);
  color:rgba(255,255,255,.75);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* レイアウトはPC・スマホ共通。サイズだけを画面幅に追従させる */
.hero-sides{display:contents;}
.hero-inner{min-height:clamp(500px,104vw,760px);}

@media (max-width:820px){
  /* ロゴは小さくして、左右のキャラと重ならない幅に収める */
  .logo-stage{width:min(64vw,420px);margin-top:-3vw;}
  /* 上段3体（スマホでの個別調整） */
  .char-row{gap:2vw;}
  .char-row .char--a{width:17.3vw; top:0rem;   left:0rem;}
  .char-row .char--b{width:16vw; top:-.3rem; left:0rem;}
  .char-row .char--c{width:15.8vw; top:0rem;   left:0rem;}

  /* クレジットは1項目ずつ改行して折り返す（PCは横並びのまま） */
  .credit{line-height:1.7;}
  .credit span{
    white-space:normal;      /* nowrapを解除しないと横にはみ出す */
    display:block;
    margin-inline:0;
    overflow-wrap:anywhere;
  }
  .credit-line + .credit-line{margin-top:.6em;}

  /* 問い合わせも折り返せるように */
  .contact{font-size:clamp(.95rem,3.6vw,1.4rem);}
  .contact .tel{white-space:nowrap;}

  /* 女性キャラをさらに上へ */
  .char--girl{top:10%;right:0%;}

  /* 会場名の下の余白を詰める */
  .hero-inner{min-height:clamp(330px,70vw,540px);}
  .hero{padding-bottom:clamp(.3rem,1.2vw,.8rem);}

  /* 黒ほっぺをロゴに重なる高さまで引き上げる
     top を小さくするほど上へ、width を上げるほど大きく重なる */
  .char--kuro{
    top:36%; bottom:auto; right:0%;
    /* 大きさはPCと同じ clamp(80px,20vw,265px) のまま。位置だけ変更 */
    z-index:4;              /* ロゴ(z-index:3)より手前に出す */
  }
  /* 重なっても読めるよう、ロゴ側に軽い影を足す */
  .logo-img{filter:drop-shadow(0 8px 14px rgba(120,0,60,.45));}
  .hero-lead{margin-bottom:.5rem;}
  .hero-venue{letter-spacing:.12em;}
  @keyframes spread-in{
    0%  {opacity:0;letter-spacing:-.05em;transform:translateX(30px);}
    100%{opacity:1;letter-spacing:.12em;transform:translateX(0);}
  }
}
@media (max-width:480px){
  .logo-stage{width:min(60vw,320px);}
  .logo-spark{font-size:14px;}
}

/* ※prefers-reduced-motion 対応をあえて外した版（常にアニメーションを再生） */