@charset "UTF-8";

/* =========================
  Base
========================= */
:root{
  --pink:#ff5aa8;
  --pink-2:#ff8cc8;
  --blue:#1e9bff;
  --sky:#6bd7ff;
  --yellow:#ffd34d;
  --orange:#ff9d1f;
  --green:#38c97b;
  --purple:#a77cff;

  --navy:#172a57;
  --navy-2:#243b72;
  --text:#22304a;
  --muted:#68758d;
  --white:#fff;
  --cream:#fff8e9;
  --soft:#fff2fb;
  --line:rgba(23,42,87,.14);

  --shadow:0 22px 60px rgba(23,42,87,.16);
  --shadow-soft:0 14px 36px rgba(23,42,87,.12);

  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;

  --container:1120px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}

body{
  margin:0;
  color:var(--text);
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  line-height:1.8;
  background:
    radial-gradient(circle at top left, rgba(255,90,168,.15), transparent 32%),
    radial-gradient(circle at top right, rgba(107,215,255,.18), transparent 34%),
    linear-gradient(180deg,#fff 0%,#fff8e9 32%,#fff 100%);
  overflow-x:hidden;
}

body.is-nav-open{
  overflow:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

::selection{
  background:rgba(255,211,77,.55);
}

/* =========================
  Common
========================= */
.site{
  min-height:100vh;
  overflow:hidden;
}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.section{
  position:relative;
  padding:104px 0;
}

.section::before{
  content:"";
  position:absolute;
  inset:auto -10% 0;
  height:220px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,211,77,.18), transparent 66%);
  opacity:.7;
}

.section-head{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1080px;
  margin:0 0 38px;
}

.section-head--center{
  max-width:1080px;
  margin-inline:auto;
  text-align:center;
}

.section-head .section-lead{
  max-width:960px;
}

.section-head--center .section-lead{
  margin-inline:auto;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin:0 0 10px;
  color:var(--pink);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
}

.section-kicker::before,
.section-kicker::after{
  content:"";
  width:26px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--yellow),var(--sky));
  box-shadow:0 0 16px rgba(255,90,168,.35);
}

.section-title{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem, 4vw, 3.5rem);
  line-height:1.22;
  font-weight:900;
  letter-spacing:.03em;
}

.section-lead{
  margin:18px 0 0;
  color:var(--muted);
  font-size:1.02rem;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.03em;
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.btn::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -70%;
  width:42%;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.65),
    transparent
  );
  transition:left .55s ease;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn:hover::after{
  left:130%;
}

.btn--primary{
  color:#fff;
  background:
    linear-gradient(135deg,var(--pink),var(--orange) 45%,var(--yellow));
  box-shadow:
    0 16px 34px rgba(255,90,168,.34),
    0 0 0 4px rgba(255,255,255,.72) inset;
}

.btn--ghost{
  color:var(--navy);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(23,42,87,.14);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(12px);
}

/* =========================
  Header
========================= */
.site-header{
  position:fixed;
  top:16px;
  left:0;
  z-index:100;
  width:100%;
  padding:0 18px;
  transition:
    transform .25s ease,
    top .25s ease;
}

.site-header.is-scrolled{
  top:10px;
}

.site-header__inner{
  width:min(1180px,100%);
  min-height:76px;
  margin:0 auto;
  padding:10px 14px 10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  box-shadow:0 16px 42px rgba(23,42,87,.14);
  backdrop-filter:blur(18px);
}

.site-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.site-logo img{
  width:auto;
  height:54px;
  filter:drop-shadow(0 5px 12px rgba(23,42,87,.12));
}

.global-nav{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:10px;
}

.global-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 12px;
  color:var(--navy);
  font-size:.9rem;
  font-weight:900;
  border-radius:999px;
  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.global-nav a:hover{
  color:var(--pink);
  background:rgba(255,90,168,.09);
  transform:translateY(-1px);
}

.global-nav__cta{
  color:#fff !important;
  padding-inline:18px !important;
  background:linear-gradient(135deg,var(--pink),var(--orange)) !important;
  box-shadow:0 10px 24px rgba(255,90,168,.28);
}

.sp-menu-btn{
  display:none;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--orange));
  box-shadow:0 12px 24px rgba(255,90,168,.3);
}

.sp-menu-btn span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  border-radius:999px;
  background:#fff;
  transition:.25s ease;
}

.sp-menu-btn.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.sp-menu-btn.is-open span:nth-child(2){
  opacity:0;
}

.sp-menu-btn.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* =========================
  SP Nav
========================= */
.sp-nav{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  background:rgba(23,42,87,.48);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.sp-nav.is-open{
  opacity:1;
  pointer-events:auto;
}

.sp-nav__panel{
  position:absolute;
  top:12px;
  right:12px;
  bottom:12px;
  width:min(380px, calc(100% - 24px));
  display:flex;
  flex-direction:column;
  padding:18px;
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(255,211,77,.26), transparent 34%),
    radial-gradient(circle at top right, rgba(107,215,255,.28), transparent 34%),
    rgba(255,255,255,.96);
  box-shadow:0 28px 70px rgba(23,42,87,.28);
  transform:translateX(24px);
  transition:transform .25s ease;
}

.sp-nav.is-open .sp-nav__panel{
  transform:translateX(0);
}

.sp-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
}

.sp-nav__head img{
  height:44px;
  width:auto;
}

.sp-nav__close{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  background:linear-gradient(135deg,var(--pink),var(--orange));
}

.sp-nav__links{
  display:grid;
  gap:10px;
  padding:12px 2px 4px;
  overflow:auto;
}

.sp-nav__links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:0 18px;
  border-radius:18px;
  color:var(--navy);
  font-weight:900;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:0 10px 20px rgba(23,42,87,.08);
}

.sp-nav__links a::after{
  content:"♪";
  color:var(--pink);
}

/* =========================
  Hero
========================= */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  padding:132px 0 72px;
  overflow:hidden;

  padding-bottom: 48px;
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,248,233,.96) 0%, rgba(255,248,233,.78) 42%, rgba(255,248,233,.22) 100%),
    radial-gradient(circle at 78% 38%, rgba(255,211,77,.22), transparent 36%);
}

.hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.12) contrast(1.02);
  transform:scale(1.04);
  animation:heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{
  from{ transform:scale(1.04); }
  to{ transform:scale(1.12); }
}

.hero__inner{
  position:relative;
  z-index:2;
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items:center;
  gap:24px;
}

.hero__content{
  position:relative;
  z-index:5;
}

.hero__label{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 14px;
  color:var(--pink);
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.16em;
}

.hero__label::before{
  content:"";
  width:34px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--yellow),var(--sky));
}

.hero__logo{
  width:min(440px, 100%);
  margin:0 0 12px;
  filter:drop-shadow(0 18px 26px rgba(23,42,87,.18));
}

.hero__title{
  margin:0;
  color:var(--navy);
  font-size:clamp(2.3rem, 4.45vw, 4.25rem);
  line-height:1.08;
  font-weight:950;
  letter-spacing:.02em;
  text-shadow:
    0 4px 0 rgba(255,255,255,.8),
    0 18px 34px rgba(23,42,87,.14);
}

.hero__lead{
  max-width:620px;
  margin:22px 0 0;
  color:#33415f;
  font-size:1.08rem;
  font-weight:700;
  line-height:2;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.hero__stage{
  position:relative;
  min-height:620px;
}

.hero-cast{
  position:absolute;
  bottom:0;
  width:34%;
  max-width:260px;
  filter:
    drop-shadow(0 26px 20px rgba(23,42,87,.18))
    drop-shadow(0 0 16px rgba(255,255,255,.85));
  transform-origin:50% 100%;
  animation:
    floatY var(--dur, 5.5s) ease-in-out infinite,
    swing var(--swing, 6.5s) ease-in-out infinite;
}

.hero-cast--01{
  left:2%;
  z-index:4;
  width:37%;
  --dur:5.4s;
  --swing:6.2s;
}

.hero-cast--02{
  left:24%;
  bottom:2%;
  z-index:3;
  width:31%;
  --dur:4.9s;
  --swing:7s;
  animation-delay:-1.2s;
}

.hero-cast--05{
  right:24%;
  bottom:0;
  z-index:2;
  width:34%;
  --dur:5.9s;
  --swing:6.6s;
  animation-delay:-.7s;
}

.hero-cast--10{
  right:0;
  z-index:4;
  width:36%;
  --dur:5.2s;
  --swing:7.4s;
  animation-delay:-1.7s;
}

@keyframes floatY{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -18px; }
}

@keyframes swing{
  0%,100%{ rotate:-1.8deg; }
  50%{ rotate:2.2deg; }
}

.hero__deco{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.36;
  filter:drop-shadow(0 18px 24px rgba(255,90,168,.18));
}

.hero__deco--note{
  width:420px;
  right:4%;
  top:13%;
  animation:decoFloat 9s ease-in-out infinite;
}

.hero__deco--star{
  width:360px;
  left:47%;
  bottom:7%;
  opacity:.26;
  animation:decoFloat 10s ease-in-out infinite reverse;
}

@keyframes decoFloat{
  0%,100%{ transform:translate3d(0,0,0) rotate(-4deg); }
  50%{ transform:translate3d(18px,-24px,0) rotate(5deg); }
}

/* =========================
  About
========================= */
.about{
  background:linear-gradient(180deg,#fff 0%,#fff7fb 100%);
}

.about__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(420px, 1.05fr);
  gap:42px;
  align-items:center;
}

.about__text{
  padding:34px;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.76);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow-soft);
}

.about__text p{
  margin:0;
}

.about__text p + p{
  margin-top:1em;
}

.about__points{
  display:grid;
  gap:14px;
  margin-top:26px;
}

.about-point{
  position:relative;
  padding:18px 18px 18px 74px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,248,233,.9));
  border:1px solid rgba(23,42,87,.1);
}

.about-point span{
  position:absolute;
  left:18px;
  top:20px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:14px;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg,var(--pink),var(--orange));
}

.about-point strong{
  display:block;
  color:var(--navy);
  font-size:1.03rem;
}

.about-point p{
  margin:.2em 0 0;
  color:var(--muted);
  font-size:.94rem;
}

.about__visual{
  position:relative;
  min-height:520px;
}

.about__visual::before{
  content:"";
  position:absolute;
  inset:14% 7% 8%;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,211,77,.36), transparent 58%),
    radial-gradient(circle at 20% 20%, rgba(255,90,168,.22), transparent 44%),
    radial-gradient(circle at 80% 20%, rgba(107,215,255,.24), transparent 44%);
  filter:blur(2px);
}

.about-cast{
  position:absolute;
  bottom:0;
  filter:drop-shadow(0 24px 20px rgba(23,42,87,.18));
  animation:floatY 5.8s ease-in-out infinite;
}

.about-cast--01{
  left:0;
  width:34%;
  z-index:3;
}

.about-cast--03{
  left:28%;
  width:37%;
  z-index:4;
  animation-delay:-1s;
}

.about-cast--04{
  right:3%;
  width:31%;
  z-index:2;
  animation-delay:-1.8s;
}

/* =========================
  Performance
========================= */
.performance{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,90,168,.16), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(107,215,255,.2), transparent 30%),
    linear-gradient(180deg,#fff7fb 0%,#fff 100%);
}

.performance-card{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(330px, .85fr);
  gap:30px;
  padding:22px;
  border-radius:36px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(23,42,87,.12);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.performance-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,211,77,.34), transparent 68%);
  pointer-events:none;
}

.performance-card__image{
  position:relative;
  min-height:420px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(23,42,87,.16);
}

.performance-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.performance-card__body{
  position:relative;
  z-index:3;
  padding:18px 12px 18px 0;
  align-self:center;
}

.performance-card__label{
  margin:0 0 10px;
  color:var(--pink);
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.16em;
}

.performance-card__title{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  line-height:1.18;
  font-weight:950;
}

.performance-card__text{
  margin:18px 0 0;
  color:var(--muted);
}

.performance-info{
  display:grid;
  gap:10px;
  margin:22px 0 26px;
}

.performance-info div{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff8e9;
  border:1px solid rgba(23,42,87,.08);
}

.performance-info dt{
  color:var(--navy);
  font-weight:950;
}

.performance-info dd{
  margin:0;
  color:var(--text);
}

.performance-card__cast{
  position:absolute;
  inset:auto 14px 4px auto;
  width:46%;
  height:260px;
  pointer-events:none;
}

.performance-cast{
  position:absolute;
  bottom:0;
  width:30%;
  max-width:150px;
  filter:drop-shadow(0 18px 16px rgba(23,42,87,.18));
  animation:floatY 5.8s ease-in-out infinite;
}

.performance-cast--05{
  right:48%;
  width:28%;
}

.performance-cast--08{
  right:23%;
  width:31%;
  animation-delay:-1.1s;
}

.performance-cast--09{
  right:0;
  width:30%;
  animation-delay:-1.8s;
}

/* =========================
  Activity
========================= */
.activity{
  background:#fff;
}

.activity-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.activity-card{
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}

.activity-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
}

.activity-card img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.activity-card__body{
  padding:22px;
}

.activity-card__label{
  margin:0 0 4px;
  color:var(--pink);
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.14em;
}

.activity-card h3{
  margin:0;
  color:var(--navy);
  font-size:1.35rem;
}

.activity-card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.place-block{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:28px;
  align-items:center;
  margin-top:46px;
  padding:28px;
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(255,242,251,.95),rgba(255,248,233,.94));
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow-soft);
}

.place-block__text h3{
  margin:0;
  color:var(--navy);
  font-size:1.9rem;
  line-height:1.35;
}

.place-block__text p:last-child{
  margin-bottom:0;
  color:var(--muted);
}

.place-block__images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.place-block figure{
  margin:0;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 24px rgba(23,42,87,.12);
}

.place-block img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.place-block figcaption{
  padding:10px 14px 14px;
  color:var(--navy);
  font-size:.9rem;
  font-weight:900;
}

/* =========================
  Schedule
========================= */
.schedule{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,211,77,.2), transparent 30%),
    linear-gradient(180deg,#fff 0%,#f6fbff 100%);
}

.schedule-timeline{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

.schedule-item{
  position:relative;
  padding:24px 18px;
  border-radius:26px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.schedule-item__month{
  display:inline-grid;
  place-items:center;
  min-width:58px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg,var(--blue),var(--sky));
}

.schedule-item h3{
  margin:18px 0 8px;
  color:var(--navy);
  font-size:1.08rem;
  line-height:1.45;
}

.schedule-item p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

/* =========================
  Members / Staff
========================= */
.members{
  background:#fff;
}

.member-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.member-card,
.staff-card{
  overflow:hidden;
  border-radius:30px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}

.member-card:hover,
.staff-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
}

.member-card__image{
  position:relative;
  overflow:hidden;
}

.member-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(23,42,87,.24));
}

.member-card__image img{
  width:100%;
  aspect-ratio:5 / 5.7;
  object-fit:cover;
}

.member-card__body,
.staff-card__body{
  padding:24px;
}

.member-card__role,
.staff-card__role{
  display:inline-flex;
  margin:0 0 10px;
  padding:4px 12px;
  border-radius:999px;
  color:#fff;
  font-size:.8rem;
  font-weight:950;
  background:linear-gradient(135deg,var(--pink),var(--orange));
}

.member-card h3,
.staff-card h3{
  margin:0;
  color:var(--navy);
  font-size:1.45rem;
}

.member-card p:last-child,
.staff-card p:last-child{
  margin:12px 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.staff{
  background:
    radial-gradient(circle at 80% 20%, rgba(167,124,255,.16), transparent 28%),
    linear-gradient(180deg,#fff 0%,#fff8e9 100%);
}

.staff-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.staff-card img{
  width:100%;
  aspect-ratio:1 / 1.08;
  object-fit:cover;
}

/* =========================
  Join
========================= */
.join{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,90,168,.16), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(107,215,255,.18), transparent 32%),
    #fff;
}

.join__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:34px;
  align-items:center;
}

.join__content{
  padding:34px;
  border-radius:34px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow);
}

.join-list{
  display:grid;
  gap:12px;
  margin:28px 0;
}

.join-list div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff8e9;
  border:1px solid rgba(23,42,87,.08);
}

.join-list dt{
  color:var(--navy);
  font-weight:950;
}

.join-list dd{
  margin:0;
  color:var(--muted);
}

.join__visual{
  position:relative;
  min-height:520px;
}

.join__visual::before{
  content:"";
  position:absolute;
  inset:12% 0 6%;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,211,77,.28), transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(255,90,168,.18), transparent 48%);
}

.join-cast{
  position:absolute;
  bottom:0;
  filter:drop-shadow(0 22px 18px rgba(23,42,87,.18));
  animation:floatY 5.7s ease-in-out infinite;
}

.join-cast--01{
  left:0;
  width:34%;
}

.join-cast--03{
  left:29%;
  width:38%;
  z-index:3;
  animation-delay:-1.2s;
}

.join-cast--10{
  right:0;
  width:35%;
  animation-delay:-2s;
}

/* =========================
  Contact
========================= */
.contact{
  background:
    linear-gradient(135deg,rgba(255,90,168,.12),rgba(107,215,255,.14)),
    #fff;
}

.contact__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);
  gap:28px;
  align-items:start;
}

.contact__message{
  padding:32px;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,211,77,.24), transparent 38%),
    linear-gradient(135deg,var(--navy),#243b72);
  box-shadow:var(--shadow);
}

.contact__message .section-kicker,
.contact__message .section-title{
  color:#fff;
}

.contact__message p{
  margin:16px 0 0;
}

.contact-notes{
  display:grid;
  gap:10px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.contact-notes li{
  position:relative;
  padding-left:1.4em;
}

.contact-notes li::before{
  content:"★";
  position:absolute;
  left:0;
  color:var(--yellow);
}

.contact-form{
  padding:32px;
  border-radius:32px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(23,42,87,.1);
  box-shadow:var(--shadow);
}

.form-row{
  display:grid;
  gap:8px;
}

.form-row + .form-row{
  margin-top:18px;
}

.form-row label{
  color:var(--navy);
  font-weight:950;
}

.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  border:1px solid rgba(23,42,87,.16);
  border-radius:16px;
  padding:13px 15px;
  color:var(--text);
  background:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.form-row textarea{
  resize:vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(255,90,168,.15);
}

.contact-form__submit{
  width:100%;
  margin-top:24px;
  border:0;
}

/* =========================
  Footer
========================= */
.site-footer{
  padding:54px 20px 28px;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,90,168,.24), transparent 36%),
    linear-gradient(135deg,var(--navy),#101b3c);
}

.site-footer__inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.site-footer__brand img{
  height:66px;
  width:auto;
  margin-bottom:12px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.site-footer__brand p{
  margin:0;
  color:rgba(255,255,255,.78);
}

.site-footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.site-footer__nav a{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-weight:900;
}

.site-footer__copy{
  width:min(1120px,100%);
  margin:34px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.62);
  text-align:center;
}

/* =========================
  Reveal Animation
========================= */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }

/* =========================
  Responsive
========================= */
@media (max-width: 1100px){
  .global-nav{
    display:none;
  }

  .sp-menu-btn{
    display:block;
  }

  .sp-nav{
    display:block;
  }

  .hero__inner,
  .about__grid,
  .join__inner{
    grid-template-columns:1fr;
  }

  .hero__stage{
    min-height:520px;
  }

.hero__title{
  font-size:clamp(2.45rem, 7vw, 4.1rem);
}
    
  .performance-card{
    grid-template-columns:1fr;
  }

  .performance-card__body{
    padding:0 6px 18px;
  }

  .performance-card__cast{
    position:relative;
    inset:auto;
    width:100%;
    height:230px;
    margin-top:-20px;
  }

  .activity-grid,
  .member-grid{
    grid-template-columns:1fr 1fr;
  }

  .schedule-timeline{
    grid-template-columns:1fr 1fr;
  }

  .staff-grid{
    grid-template-columns:1fr 1fr;
  }

  .contact__inner,
  .place-block{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  html{
    scroll-padding-top:84px;
  }

  .container{
    width:min(100% - 28px, var(--container));
  }

  .section{
    padding:76px 0;
  }

  .site-header{
    top:10px;
    padding:0 10px;
  }

  .site-header__inner{
    min-height:66px;
    padding:8px 10px 8px 14px;
  }

  .site-logo img{
    height:42px;
  }

  .hero{
    padding:112px 0 54px;
    min-height:auto;
  }

  .hero__bg::after{
    background:
      linear-gradient(180deg, rgba(255,248,233,.96) 0%, rgba(255,248,233,.82) 58%, rgba(255,248,233,.42) 100%);
  }

  .hero__inner{
    width:min(100% - 28px, 1200px);
  }

  .hero__logo{
    width:min(320px, 92%);
  }

  .hero__lead{
    font-size:1rem;
  }

  .hero__actions{
    display:grid;
  }

  .hero__stage{
    min-height:380px;
    margin-top:10px;
  }

  .hero-cast--01{
    left:-4%;
    width:42%;
  }

  .hero-cast--02{
    left:22%;
    width:34%;
  }

  .hero-cast--05{
    right:20%;
    width:38%;
  }

  .hero-cast--10{
    right:-6%;
    width:42%;
  }

  .hero__deco--note{
    width:260px;
    top:11%;
    right:-60px;
  }

  .hero__deco--star{
    width:220px;
    left:-80px;
    bottom:18%;
  }

  .about__text,
  .join__content,
  .contact-form,
  .contact__message{
    padding:24px;
  }

  .about__visual,
  .join__visual{
    min-height:390px;
  }

  .activity-grid,
  .member-grid,
  .schedule-timeline,
  .staff-grid,
  .place-block__images{
    grid-template-columns:1fr;
  }

  .performance-card{
    padding:14px;
    border-radius:28px;
  }

  .performance-card__image{
    min-height:auto;
    aspect-ratio:4 / 3;
    border-radius:22px;
  }

  .performance-info div,
  .join-list div{
    grid-template-columns:1fr;
    gap:4px;
  }

  .site-footer__inner{
    display:grid;
  }

  .site-footer__nav{
    justify-content:flex-start;
  }
}

@media (max-width: 480px){
  .section-title{
    font-size:clamp(1.85rem, 10vw, 2.4rem);
  }

.hero__title{
  font-size:clamp(2.1rem, 11vw, 2.9rem);
}

  .hero__stage{
    min-height:330px;
  }

  .btn{
    width:100%;
    padding-inline:18px;
  }

  .sp-nav__panel{
    border-radius:24px;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}





/* =========================
  追加修正：hero intro / cast motion
========================= */
body.is-hero-intro{
  overflow:hidden;
}

/* heroは幕の奥に準備しておく */
.hero__content,
.hero__stage,
.hero__deco,
.hero__bg{
  transition:
    opacity .9s ease,
    transform .9s ease,
    filter .9s ease;
}

.hero.is-intro-active .hero__content,
.hero.is-intro-active .hero__stage,
.hero.is-intro-active .hero__deco,
.hero.is-intro-active .hero__bg{
  opacity:1;
  transform:none;
  filter:none;
}

.hero.is-intro-done .hero__content,
.hero.is-intro-done .hero__stage,
.hero.is-intro-done .hero__deco,
.hero.is-intro-done .hero__bg{
  opacity:1;
  transform:none;
  filter:none;
}

/* hero intro */
.hero-intro{
  position:fixed;
  inset:0;
  z-index:200;
  background:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:
    opacity .65s ease,
    visibility .65s ease;
}

.hero.is-intro-active .hero-intro{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.hero-intro.is-finished{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* 幕レイヤー */
.hero-intro__curtains{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
}

/* 左右の幕 */
.hero-intro__curtain{
  position:absolute;
  top:-7vh;
  height:116vh;
  width:68vw;
  max-width:none;
  object-fit:cover;
  filter:
    drop-shadow(0 0 26px rgba(40,0,0,.34))
    saturate(1.08)
    contrast(1.06);
  transition:
    transform 1.35s cubic-bezier(.76,0,.18,1),
    filter 1.35s ease;
  will-change:transform;
}

.hero-intro__curtain--left{
  left:-7vw;
  object-position:right center;
  transform:translateX(0);
}

.hero-intro__curtain--right{
  right:-7vw;
  object-position:left center;
  transform:translateX(0);
}

/* 10人の演出は幕より前に出す */
.hero-intro__stage{
  position:relative;
  z-index:2;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.hero-intro__cast{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(130px, 18vw, 300px);
  max-height:78vh;
  transform:translate(-50%, -50%) scale(0);
  opacity:0;
  filter:
    drop-shadow(0 18px 20px rgba(23,42,87,.18))
    drop-shadow(0 0 12px rgba(255,255,255,.88));
  will-change:transform, opacity;
}

.hero-intro__cast.is-playing{
  animation:heroIntroBurst .9s cubic-bezier(.2,.88,.28,1) forwards;
}

@keyframes heroIntroBurst{
  0%{
    transform:
      translate(-50%, -50%)
      translate3d(0,0,0)
      rotate(0deg)
      scale(0);
    opacity:0;
  }
  16%{
    opacity:1;
  }
  68%{
    opacity:1;
  }
  100%{
    transform:
      translate(-50%, -50%)
      translate3d(var(--move-x, 0), var(--move-y, 0), 0)
      rotate(var(--rotate, 0deg))
      scale(var(--scale-end, 2.3));
    opacity:0;
  }
}

/* 幕が開く */
.hero-intro.is-curtain-open .hero-intro__curtain--left{
  transform:translateX(-118%);
}

.hero-intro.is-curtain-open .hero-intro__curtain--right{
  transform:translateX(118%);
}

/* 開幕時に幕の影も少し抜く */
.hero-intro.is-curtain-open .hero-intro__curtain{
  filter:
    drop-shadow(0 0 8px rgba(40,0,0,.18))
    saturate(1.04)
    contrast(1.02);
}

/* 開幕時のhero表示を少しだけ明るく見せる */
.hero.is-curtain-opening .hero__content,
.hero.is-curtain-opening .hero__stage,
.hero.is-curtain-opening .hero__deco,
.hero.is-curtain-opening .hero__bg{
  animation:heroCurtainReveal 1.15s ease both;
}

@keyframes heroCurtainReveal{
  from{
    opacity:.72;
    filter:blur(3px) brightness(1.08);
    transform:scale(1.015);
  }
  to{
    opacity:1;
    filter:none;
    transform:none;
  }
}

/* hero以外の cast 登場アニメーション */
.about-cast,
.performance-cast,
.join-cast{
  opacity:0;
  transform:translate3d(var(--enter-x, 0), var(--enter-y, 32px), 0) scale(.88);
  transform-origin:50% 100%;
  will-change:transform, opacity;
  animation:none;
  transition:
    opacity .7s ease,
    transform .95s cubic-bezier(.22,1,.36,1);
}

.about-cast.is-arrived,
.performance-cast.is-arrived,
.join-cast.is-arrived{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.about-cast.is-floating,
.performance-cast.is-floating,
.join-cast.is-floating{
  transition:none;
  animation-duration:var(--float-dur, 5.6s);
  animation-delay:var(--float-delay, 0s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}

.motion-float.is-floating{
  animation-name:castFloat;
}

.motion-bob.is-floating{
  animation-name:castBob;
}

.motion-sway.is-floating{
  animation-name:castSway;
}

@keyframes castFloat{
  0%,100%{
    transform:translate3d(0,0,0);
  }
  50%{
    transform:translate3d(0,-18px,0);
  }
}

@keyframes castBob{
  0%,100%{
    transform:translate3d(0,0,0) scale(1);
  }
  35%{
    transform:translate3d(0,-9px,0) scale(1.02);
  }
  55%{
    transform:translate3d(0,4px,0) scale(.985);
  }
  75%{
    transform:translate3d(0,-4px,0) scale(1.01);
  }
}

@keyframes castSway{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-1.6deg);
  }
  50%{
    transform:translate3d(0,-12px,0) rotate(1.8deg);
  }
}

/* 左右から入ってくる向き */
.about-cast--01,
.join-cast--01,
.performance-cast--05{
  --enter-x:-140px;
}

.about-cast--08,
.join-cast--07,
.performance-cast--08{
  --enter-y:56px;
}

.about-cast--04,
.join-cast--09,
.performance-cast--09{
  --enter-x:140px;
}

/* =========================
  performance cast 表示位置の最終調整
========================= */
.performance-card{
  padding-bottom:150px;
}

.performance-card__image,
.performance-card__body{
  position:relative;
  z-index:3;
}

.performance-card__cast{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  width:auto;
  height:145px;
  z-index:4;
  pointer-events:none;
  opacity:1;
}

.performance-cast{
  bottom:0;
  max-width:none;
  opacity:1;
  filter:
    drop-shadow(0 18px 16px rgba(23,42,87,.18))
    drop-shadow(0 0 10px rgba(255,255,255,.9));
}

/* 左下に2人 */
.performance-cast--05{
  left:4%;
  right:auto;
  width:105px;
}

/* 中央寄り */
.performance-cast--08{
  left:17%;
  right:auto;
  width:118px;
}

/* 右下に1人 */
.performance-cast--09{
  right:6%;
  left:auto;
  width:112px;
}

/* =========================
  Activity / Members cast decoration
========================= */
.activity .container,
.members .container{
  position:relative;
}

.activity-cast-stage,
.member-cast-stage{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* 見出しとカードは必ず前面 */
.activity .section-head,
.members .section-head,
.activity-grid,
.place-block,
.member-grid{
  position:relative;
  z-index:3;
}

/* 新規cast共通：登場前 */
.activity-float-cast,
.member-float-cast{
  position:absolute;
  width:140px;
  max-width:none;
  opacity:0;
  transform:
    translate3d(var(--enter-x, 0), var(--enter-y, 32px), 0)
    scale(.88);
  transform-origin:50% 100%;
  filter:
    drop-shadow(0 18px 18px rgba(23,42,87,.14))
    drop-shadow(0 0 10px rgba(255,255,255,.92));
  will-change:transform, opacity;
  transition:
    opacity .7s ease,
    transform .95s cubic-bezier(.22,1,.36,1);
}

/* JSで到着後に付く */
.activity-float-cast.is-arrived,
.member-float-cast.is-arrived{
  opacity:.92;
  transform:translate3d(0,0,0) scale(1);
}

/* JSで到着後、ランダムモーションに切り替える */
.activity-float-cast.is-floating,
.member-float-cast.is-floating{
  transition:none;
  animation-duration:var(--float-dur, 5.6s);
  animation-delay:var(--float-delay, 0s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}

/* Activity：左右に小さく浮かせる */
.activity-float-cast--03{
  left:-112px;
  top:170px;
  width:112px;
  z-index:0;
  --enter-x:-120px;
}

.activity-float-cast--04{
  right:-116px;
  top:285px;
  width:108px;
  z-index:0;
  --enter-x:120px;
}

/* Members：代表感のある3人を外側に配置 */
.member-float-cast--06{
  left:-112px;
  top:235px;
  width:108px;
  z-index:0;
  --enter-x:-120px;
}

.member-float-cast--08{
  right:34px;
  top:132px;
  width:94px;
  z-index:0;
  --enter-y:48px;
}

.member-float-cast--09{
  right:-118px;
  top:310px;
  width:112px;
  z-index:0;
  --enter-x:120px;
}

/* =========================
  SP / tablet：装飾castを完全に隠す
========================= */
@media (max-width:1100px){
  .performance-card{
    padding-bottom:14px !important;
  }

  .performance-card__cast{
    display:none !important;
    height:0 !important;
    margin:0 !important;
  }

  .activity-cast-stage,
  .member-cast-stage{
    display:none !important;
  }

  .activity-float-cast,
  .member-float-cast,
  .performance-cast{
    display:none !important;
  }
}

/* =========================
  section-head 左寄せ統一
========================= */
.section-head,
.section-head--center{
  margin-inline:0;
  text-align:left;
}

.section-head--center .section-lead{
  margin-inline:0;
}

@media (max-width:768px){
  .hero-intro__cast{
    width:clamp(120px, 30vw, 210px);
  }

  .hero-intro__curtain{
    top:-8vh;
    height:118vh;
    width:78vw;
  }

  .hero-intro__curtain--left{
    left:-12vw;
  }

  .hero-intro__curtain--right{
    right:-12vw;
  }

  .about-cast--01,
  .join-cast--01,
  .performance-cast--05{
    --enter-x:-80px;
  }

  .about-cast--04,
  .join-cast--09,
  .performance-cast--09{
    --enter-x:80px;
  }

  .about-cast--08,
  .join-cast--07,
  .performance-cast--08{
    --enter-y:40px;
  }

  .section-head,
  .section-head--center{
    max-width:100%;
  }

  .section-head .section-lead{
    max-width:100%;
  }
}

/* =========================
  cast 差し替え後の位置調整
  About: cast-08 / Join: cast-07
========================= */

/* About：舞台感のある cast-08 を中央寄りに配置 */
.about-cast--08{
  left:31%;
  bottom:0;
  width:32%;
  z-index:4;
}

/* Join：歓迎感のある cast-07 を中央に大きめ配置 */
.join-cast--07{
  left:29%;
  bottom:0;
  width:39%;
  z-index:3;
}

/* cast-07 は横幅があるので、少しだけ下に沈めて安定させる */
.join-cast--07.is-arrived{
  transform:translate3d(0, 10px, 0) scale(1);
}

/* 浮遊開始後も、足元が浮きすぎないように控えめにする */
.join-cast--07.motion-float.is-floating{
  animation-name:joinCast07Float;
}

.join-cast--07.motion-bob.is-floating{
  animation-name:joinCast07Bob;
}

.join-cast--07.motion-sway.is-floating{
  animation-name:joinCast07Sway;
}

@keyframes joinCast07Float{
  0%,100%{
    transform:translate3d(0, 10px, 0);
  }
  50%{
    transform:translate3d(0, -4px, 0);
  }
}

@keyframes joinCast07Bob{
  0%,100%{
    transform:translate3d(0, 10px, 0) scale(1);
  }
  35%{
    transform:translate3d(0, 1px, 0) scale(1.015);
  }
  60%{
    transform:translate3d(0, 14px, 0) scale(.99);
  }
}

@keyframes joinCast07Sway{
  0%,100%{
    transform:translate3d(0, 10px, 0) rotate(-1.2deg);
  }
  50%{
    transform:translate3d(0, -2px, 0) rotate(1.4deg);
  }
}

/* cast-09 は案内役として右側に配置 */
.join-cast--09{
  right:-2%;
  bottom:0;
  width:35%;
  z-index:2;
  --enter-x:140px;
  animation-delay:-2s;
}

@media (max-width:1100px){
  .about-cast--08{
    left:33%;
    width:30%;
  }

  .join-cast--07{
    left:30%;
    width:38%;
  }

  .join-cast--09{
    right:-1%;
    width:34%;
  }
}

@media (max-width:768px){
  .about-cast--08{
    left:34%;
    width:29%;
    --enter-y:40px;
  }

  .join-cast--07{
    left:31%;
    width:37%;
    --enter-y:40px;
  }

  .join-cast--09{
    right:0;
    width:33%;
    --enter-x:80px;
  }
}


/* =========================
  Secret cast crossing animation
  30秒滞在した人だけに見えるごほうび演出
========================= */

.secret-cast-layer{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  overflow:hidden;
}

.secret-cast{
  position:absolute;
  top:50%;
  width:clamp(130px, 15vw, 230px);
  max-width:none;
  opacity:0;
  filter:
    drop-shadow(0 24px 22px rgba(23,42,87,.18))
    drop-shadow(0 0 14px rgba(255,255,255,.92));
  transform-origin:50% 100%;
  will-change:transform, opacity;
}

/* 横すれ違い */
.secret-cast--left.secret-cast--cross{
  left:-22vw;
  animation:secretCastLeftCross 4.8s cubic-bezier(.22,.9,.24,1) forwards;
}

.secret-cast--right.secret-cast--cross{
  right:-22vw;
  animation:secretCastRightCross 4.8s cubic-bezier(.22,.9,.24,1) forwards;
}

/* 斜めすれ違い */
.secret-cast--left.secret-cast--diagonal{
  left:-22vw;
  top:64%;
  animation:secretCastLeftDiagonal 5.1s cubic-bezier(.22,.9,.24,1) forwards;
}

.secret-cast--right.secret-cast--diagonal{
  right:-22vw;
  top:36%;
  animation:secretCastRightDiagonal 5.1s cubic-bezier(.22,.9,.24,1) forwards;
}

/* 少し大きめ・祝福っぽい横移動 */
.secret-cast--left.secret-cast--celebrate{
  left:-24vw;
  top:56%;
  width:clamp(150px, 17vw, 260px);
  animation:secretCastLeftCelebrate 5.4s cubic-bezier(.22,.9,.24,1) forwards;
}

.secret-cast--right.secret-cast--celebrate{
  right:-24vw;
  top:43%;
  width:clamp(150px, 17vw, 260px);
  animation:secretCastRightCelebrate 5.4s cubic-bezier(.22,.9,.24,1) forwards;
}

@keyframes secretCastLeftCross{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.86) rotate(-4deg);
  }
  16%{
    opacity:1;
  }
  52%{
    opacity:1;
    transform:translate3d(58vw,-52%,0) scale(1) rotate(2deg);
  }
  100%{
    opacity:0;
    transform:translate3d(122vw,-50%,0) scale(.92) rotate(7deg);
  }
}

@keyframes secretCastRightCross{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.86) rotate(4deg);
  }
  16%{
    opacity:1;
  }
  52%{
    opacity:1;
    transform:translate3d(-58vw,-48%,0) scale(1) rotate(-2deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-122vw,-50%,0) scale(.92) rotate(-7deg);
  }
}

@keyframes secretCastLeftDiagonal{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.84) rotate(-8deg);
  }
  16%{
    opacity:1;
  }
  54%{
    opacity:1;
    transform:translate3d(58vw,-28vh,0) scale(1) rotate(3deg);
  }
  100%{
    opacity:0;
    transform:translate3d(122vw,-44vh,0) scale(.9) rotate(8deg);
  }
}

@keyframes secretCastRightDiagonal{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.84) rotate(8deg);
  }
  16%{
    opacity:1;
  }
  54%{
    opacity:1;
    transform:translate3d(-58vw,26vh,0) scale(1) rotate(-3deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-122vw,42vh,0) scale(.9) rotate(-8deg);
  }
}

@keyframes secretCastLeftCelebrate{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.82) rotate(-6deg);
  }
  14%{
    opacity:1;
  }
  48%{
    opacity:1;
    transform:translate3d(54vw,-58%,0) scale(1.04) rotate(2deg);
  }
  100%{
    opacity:0;
    transform:translate3d(124vw,-50%,0) scale(.9) rotate(8deg);
  }
}

@keyframes secretCastRightCelebrate{
  0%{
    opacity:0;
    transform:translate3d(0,-50%,0) scale(.82) rotate(6deg);
  }
  14%{
    opacity:1;
  }
  48%{
    opacity:1;
    transform:translate3d(-54vw,-42%,0) scale(1.04) rotate(-2deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-124vw,-50%,0) scale(.9) rotate(-8deg);
  }
}

/* tablet / SPでは邪魔になりやすいので無効 */
@media (max-width: 1100px){
  .secret-cast-layer{
    display:none;
  }
}


/* =========================
  Anchor jump position
  #IDジャンプ時に見出しがヘッダー下へ来るよう調整
========================= */

.section[id]{
  scroll-margin-top: -72px;
}

@media (max-width: 768px){
  .section[id]{
    scroll-margin-top: -54px;
  }
}


/* =========================
  Join confetti decoration
  横長の紙吹雪を上部アクセントとして表示
========================= */

.join::after{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  z-index:1;
  width:min(1180px, 100%);
  height:430px;
  transform:translateX(-50%);
  pointer-events:none;

  background-image:url("../img/mirai-star/deco/deco-confetti-yoko.png");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;

  opacity:.42;
  filter:drop-shadow(0 14px 24px rgba(255,90,168,.08));
}

/* Joinの中身は紙吹雪より前に出す */
.join .container{
  position:relative;
  z-index:2;
}

/* tablet以下は少し控えめに */
@media (max-width: 1100px){
  .join::after{
    top:10px;
    width:120%;
    height:260px;
    opacity:.34;
  }
}

/* SPでは背景がうるさくなりやすいので、さらに薄くする */
@media (max-width: 768px){
  .join::after{
    top:8px;
    width:150%;
    height:220px;
    opacity:.26;
  }
}


/* =========================
  Schedule seasonal icons
  季節アイコンで一年の流れを分かりやすくする
========================= */

.schedule-item{
  position:relative;
  overflow:hidden;
  padding-right:18px;
}

.schedule-item__icon{
  position:absolute;
  top:10px;
  right:8px;
  z-index:0;
  width:92px;
  opacity:.9;
  pointer-events:none;
  filter:
    drop-shadow(0 10px 14px rgba(23,42,87,.1))
    drop-shadow(0 0 8px rgba(255,255,255,.9));
}

.schedule-item__icon img{
  width:100%;
  height:auto;
  display:block;
}

.schedule-item__month,
.schedule-item h3,
.schedule-item p{
  position:relative;
  z-index:1;
}

/* テキストの読みやすさ確保 */
.schedule-item h3{
  padding-right:42px;
}

/* 月ごとのサイズ微調整 */
.schedule-item--04 .schedule-item__icon{
  width:88px;
  top:8px;
  right:4px;
}

.schedule-item--06 .schedule-item__icon{
  width:94px;
  top:8px;
  right:2px;
}

.schedule-item--08 .schedule-item__icon{
  width:96px;
  top:8px;
  right:2px;
}

.schedule-item--10 .schedule-item__icon{
  width:96px;
  top:8px;
  right:2px;
}

.schedule-item--02 .schedule-item__icon{
  width:76px;
  top:12px;
  right:10px;
}

/* tablet */
@media (max-width: 1100px){
  .schedule-item__icon{
    width:84px;
    opacity:.86;
  }

  .schedule-item--04 .schedule-item__icon{
    width:80px;
  }

  .schedule-item--06 .schedule-item__icon,
  .schedule-item--08 .schedule-item__icon,
  .schedule-item--10 .schedule-item__icon{
    width:86px;
  }

  .schedule-item--02 .schedule-item__icon{
    width:70px;
  }
}

/* SP */
@media (max-width: 768px){
  .schedule-item{
    min-height:170px;
  }

  .schedule-item__icon{
    width:78px;
    top:10px;
    right:10px;
    opacity:.82;
  }

  .schedule-item--04 .schedule-item__icon{
    width:74px;
  }

  .schedule-item--06 .schedule-item__icon,
  .schedule-item--08 .schedule-item__icon,
  .schedule-item--10 .schedule-item__icon{
    width:80px;
  }

  .schedule-item--02 .schedule-item__icon{
    width:64px;
  }

  .schedule-item h3{
    padding-right:58px;
  }
}


/* =========================
  Contact grade selects
  学校区分 + 学年の2段階選択
========================= */

.grade-selects{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.grade-selects__item{
  display:grid;
  gap:6px;
}

.form-sub-label{
  color:var(--muted);
  font-size:.86rem;
  font-weight:900;
}

.grade-selects select:disabled{
  color:rgba(104,117,141,.72);
  background:rgba(246,251,255,.86);
  cursor:not-allowed;
}

@media (max-width: 768px){
  .grade-selects{
    grid-template-columns:1fr;
  }
}


/* =========================
  Contact send curtain animation
  送信後：お辞儀 → 幕閉じ → TOPへ戻る → 幕開き
========================= */

body.is-contact-send{
  overflow:hidden;
}

.contact-send-stage{
  position:fixed;
  inset:0;
  z-index:260;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,242,251,.56), transparent 46%),
    rgba(255,255,255,.18);
  opacity:0;
  transition:opacity .35s ease;
}

.contact-send-stage.is-active{
  opacity:1;
}

/* お辞儀キャスト */
.contact-send-cast{
  position:absolute;
  bottom:4vh;
  z-index:2;
  width:clamp(210px, 24vw, 390px);
  max-width:none;
  opacity:0;
  filter:
    drop-shadow(0 28px 24px rgba(23,42,87,.2))
    drop-shadow(0 0 14px rgba(255,255,255,.9));
  will-change:transform, opacity;
}

.contact-send-cast--left{
  left:0;
  transform:translate3d(-120%, 10px, 0) rotate(-4deg);
}

.contact-send-cast--right{
  right:0;
  width:clamp(230px, 25vw, 410px);
  transform:translate3d(120%, 10px, 0) rotate(4deg);
}

.contact-send-stage.is-bowing .contact-send-cast--left{
  animation:contactBowLeft 1.35s cubic-bezier(.22,1,.36,1) forwards;
}

.contact-send-stage.is-bowing .contact-send-cast--right{
  animation:contactBowRight 1.35s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes contactBowLeft{
  0%{
    opacity:0;
    transform:translate3d(-120%, 10px, 0) rotate(-4deg);
  }
  100%{
    opacity:1;
    transform:translate3d(12vw, 0, 0) rotate(0deg);
  }
}

@keyframes contactBowRight{
  0%{
    opacity:0;
    transform:translate3d(120%, 10px, 0) rotate(4deg);
  }
  100%{
    opacity:1;
    transform:translate3d(-10vw, 0, 0) rotate(0deg);
  }
}

/* 幕 */
.contact-send-curtain{
  position:absolute;
  top:-7vh;
  z-index:4;
  width:68vw;
  height:116vh;
  max-width:none;
  object-fit:cover;
  filter:
    drop-shadow(0 0 26px rgba(40,0,0,.34))
    saturate(1.08)
    contrast(1.06);
  will-change:transform;
  transition:
    transform 1.15s cubic-bezier(.76,0,.18,1),
    filter 1.15s ease;
}

.contact-send-curtain--left{
  left:-7vw;
  object-position:right center;
  transform:translateX(-118%);
}

.contact-send-curtain--right{
  right:-7vw;
  object-position:left center;
  transform:translateX(118%);
}

/* 幕が閉じる */
.contact-send-stage.is-curtain-closing .contact-send-curtain--left{
  transform:translateX(0);
}

.contact-send-stage.is-curtain-closing .contact-send-curtain--right{
  transform:translateX(0);
}

/* 幕が開く */
.contact-send-stage.is-curtain-opening .contact-send-curtain--left{
  transform:translateX(-118%);
}

.contact-send-stage.is-curtain-opening .contact-send-curtain--right{
  transform:translateX(118%);
}

.contact-send-stage.is-curtain-opening .contact-send-curtain{
  filter:
    drop-shadow(0 0 8px rgba(40,0,0,.18))
    saturate(1.04)
    contrast(1.02);
}

/* 幕が閉じきった裏側で、お辞儀キャストだけ消す */
.contact-send-stage.is-cast-leaving .contact-send-cast{
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden;
  transition:
    opacity .22s ease,
    visibility 0s linear .22s;
}

.contact-send-stage.is-cast-leaving .contact-send-cast--left{
  transform: translate3d(12vw, 12px, 0) scale(.96) !important;
}

.contact-send-stage.is-cast-leaving .contact-send-cast--right{
  transform: translate3d(-12vw, 12px, 0) scale(.96) !important;
}



/* 終了時 */
.contact-send-stage.is-finished{
  opacity:0;
}

/* tablet */
@media (max-width: 1100px){
  .contact-send-cast{
    width:clamp(180px, 30vw, 320px);
  }

  .contact-send-cast--right{
    width:clamp(200px, 32vw, 340px);
  }

  @keyframes contactBowLeft{
    0%{
      opacity:0;
      transform:translate3d(-120%, 10px, 0) rotate(-4deg);
    }
    100%{
      opacity:1;
      transform:translate3d(7vw, 0, 0) rotate(0deg);
    }
  }

  @keyframes contactBowRight{
    0%{
      opacity:0;
      transform:translate3d(120%, 10px, 0) rotate(4deg);
    }
    100%{
      opacity:1;
      transform:translate3d(-6vw, 0, 0) rotate(0deg);
    }
  }
}

/* SP */
@media (max-width: 768px){
  .contact-send-cast{
    bottom:8vh;
    width:58vw;
  }

  .contact-send-cast--right{
    width:60vw;
  }

  .contact-send-curtain{
    top:-8vh;
    height:118vh;
    width:78vw;
  }

  .contact-send-curtain--left{
    left:-12vw;
  }

  .contact-send-curtain--right{
    right:-12vw;
  }

  @keyframes contactBowLeft{
    0%{
      opacity:0;
      transform:translate3d(-120%, 10px, 0) rotate(-4deg);
    }
    100%{
      opacity:1;
      transform:translate3d(-2vw, 0, 0) rotate(0deg);
    }
  }

  @keyframes contactBowRight{
    0%{
      opacity:0;
      transform:translate3d(120%, 10px, 0) rotate(4deg);
    }
    100%{
      opacity:1;
      transform:translate3d(4vw, 0, 0) rotate(0deg);
    }
  }
}


/* =========================
  Contact pre-submit check
  送信前の安心感を足す
========================= */

.contact-form__check{
  position:relative;
  margin-top:22px;
  padding:18px 18px 18px 20px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(255,211,77,.28), transparent 42%),
    linear-gradient(135deg, rgba(255,248,233,.96), rgba(255,242,251,.88));
  border:1px solid rgba(255,90,168,.16);
  box-shadow:0 12px 26px rgba(23,42,87,.08);
  overflow:hidden;
}

.contact-form__check::before{
  content:"✓";
  position:absolute;
  right:16px;
  top:8px;
  color:rgba(255,90,168,.14);
  font-size:4.2rem;
  line-height:1;
  font-weight:950;
}

.contact-form__check-title{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin:0 0 10px;
  color:var(--navy);
  font-weight:950;
}

.contact-form__check-title::before{
  content:"★";
  color:var(--yellow);
  filter:drop-shadow(0 0 6px rgba(255,211,77,.55));
}

.contact-form__check ul{
  position:relative;
  z-index:1;
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.contact-form__check li{
  position:relative;
  padding-left:1.45em;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.75;
}

.contact-form__check li::before{
  content:"";
  position:absolute;
  left:.15em;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--orange));
  box-shadow:0 0 0 4px rgba(255,90,168,.1);
}

/* =========================
  Footer stage-like message
  劇団らしい余韻を足す
========================= */

.site-footer{
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:-90px;
  width:min(760px, 92vw);
  height:180px;
  border-radius:0 0 50% 50%;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 100%, rgba(255,211,77,.22), transparent 60%);
  pointer-events:none;
}

.site-footer__message{
  position:relative;
  z-index:1;
  width:min(1120px, calc(100% - 40px));
  margin:0 auto 28px;
  text-align:center;
}

.site-footer__message span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.72em;
  padding:10px 20px;
  border-radius:999px;
  color:#fff;
  font-weight:950;
  letter-spacing:.08em;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 14px 30px rgba(0,0,0,.14),
    0 0 26px rgba(255,211,77,.16);
  backdrop-filter:blur(10px);
}

.site-footer__message span::before,
.site-footer__message span::after{
  content:"♪";
  color:var(--yellow);
  text-shadow:0 0 12px rgba(255,211,77,.75);
}

/* footer内の要素を装飾より前に出す */
.site-footer__inner,
.site-footer__copy{
  position:relative;
  z-index:1;
}

@media (max-width: 768px){
  .contact-form__check{
    padding:16px;
    border-radius:20px;
  }

  .contact-form__check::before{
    right:10px;
    top:8px;
    font-size:3.4rem;
  }

  .site-footer__message{
    width:min(100% - 28px, 1120px);
    margin-bottom:22px;
  }

  .site-footer__message span{
    width:100%;
    padding:10px 14px;
    font-size:.92rem;
  }
}