/* =========================================================
   エンタメ×フードフェス 2026 LP - style.css
   トーン：お祭り感 × ポップ × カラフル × 元気
========================================================= */

:root{
  --color-blue:#1e6fd9;
  --color-blue-dark:#12408a;
  --color-pink:#ec3d78;
  --color-pink-dark:#c81f5c;
  --color-green:#7ac142;
  --color-yellow:#ffcb2b;
  --color-orange:#ff8a3d;
  --color-cream:#fff8ec;
  --color-navy:#1b1f4b;
  --font-round:'M PLUS Rounded 1c', 'Yusei Magic', sans-serif;
  --shadow-pop: 0 10px 0 rgba(0,0,0,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-round);
  color:var(--color-navy);
  background:var(--color-cream);
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.sp-break{display:none;}
@media (max-width:640px){ .sp-break{display:inline;} }

/* ---------- 共通パーツ ---------- */
.section-inner{
  max-width:1140px;
  margin:0 auto;
  padding:80px 24px;
}
.section-tag{
  display:inline-block;
  font-weight:800;
  color:var(--color-pink);
  letter-spacing:.08em;
  font-size:14px;
  background:#fff;
  border:2px solid var(--color-pink);
  border-radius:999px;
  padding:6px 20px;
  margin-bottom:16px;
}
.section-tag.light{
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,0.12);
}
.section-title{
  font-size:clamp(28px,4vw,44px);
  font-weight:900;
  line-height:1.3;
  margin:0 0 20px;
  color:var(--color-blue-dark);
}
.section-title.light{ color:#fff; }
.section-lead{
  font-size:16px;
  line-height:1.9;
  color:#3a3f5c;
  max-width:760px;
}
.tag-pickup{
  display:inline-block;
  font-size:13px;
  background:var(--color-yellow);
  color:var(--color-navy);
  border-radius:999px;
  padding:4px 14px;
  margin-left:12px;
  vertical-align:middle;
  font-weight:700;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,var(--color-pink),var(--color-orange));
  color:#fff;
  font-weight:800;
  font-size:17px;
  padding:16px 32px;
  border-radius:999px;
  box-shadow:0 8px 0 var(--color-pink-dark), 0 14px 24px rgba(236,61,120,0.35);
  transition:transform .18s ease, box-shadow .18s ease;
  border:3px solid #fff;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 11px 0 var(--color-pink-dark), 0 18px 28px rgba(236,61,120,0.4);
}
.btn-primary:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 var(--color-pink-dark);
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2.5px solid var(--color-blue);
  color:var(--color-blue-dark);
  font-weight:800;
  padding:12px 26px;
  border-radius:999px;
  background:#fff;
  transition:all .18s ease;
}
.btn-outline:hover{
  background:var(--color-blue);
  color:#fff;
  transform:translateY(-2px);
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(255,248,236,0.92);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
}
.brand-text{
  font-weight:900;
  font-size:18px;
  color:var(--color-blue-dark);
  letter-spacing:.01em;
}
.brand-year{
  color:var(--color-pink);
  margin-left:4px;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:26px;
  font-weight:700;
  font-size:15px;
  color:var(--color-navy);
}
.main-nav a{ position:relative; padding:4px 0; }
.main-nav a:hover{ color:var(--color-pink); }
.nav-cta{
  background:linear-gradient(135deg,var(--color-pink),var(--color-orange));
  color:#fff !important;
  padding:8px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  box-shadow:0 3px 0 var(--color-pink-dark);
  transition:transform .15s ease;
  white-space:nowrap;
}
.nav-cta i{ font-size:14px; }
.nav-cta:hover{ color:#fff !important; transform:translateY(-2px); }

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.menu-toggle span{
  width:26px; height:3px;
  background:var(--color-navy);
  border-radius:3px;
  transition:.2s;
}
.mobile-nav{
  display:none;
  flex-direction:column;
  background:#fff;
  padding:10px 24px 20px;
  gap:14px;
  font-weight:700;
  box-shadow:0 8px 12px rgba(0,0,0,0.06);
}
.mobile-nav a{ padding:8px 0; border-bottom:1px solid #f1e9d8; }
.mobile-nav .nav-cta{
  text-align:center;
  justify-content:center;
  border-bottom:none;
  margin-top:6px;
}
.mobile-nav.open{ display:flex; }

@media (max-width:900px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ---------- HERO ---------- */
.hero-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:140px 24px 80px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,203,43,0.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(122,193,66,0.3), transparent 45%),
    linear-gradient(160deg,#fff8ec 0%, #ffe9d2 45%, #ffd7e6 100%);
  overflow:hidden;
  gap:40px;
  flex-wrap:wrap;
}
.hero-bg-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.deco-star{
  position:absolute;
  color:var(--color-yellow);
  font-size:28px;
  animation:twinkle 2.4s ease-in-out infinite;
}
.deco-star.star-1{ top:14%; left:8%; font-size:22px; }
.deco-star.star-2{ top:24%; right:12%; font-size:32px; animation-delay:.6s; }
.deco-star.star-3{ bottom:20%; left:14%; font-size:18px; animation-delay:1.1s; }
@keyframes twinkle{
  0%,100%{ opacity:.4; transform:scale(.8) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(15deg); }
}
.deco-circle{
  position:absolute;
  border-radius:50%;
  opacity:.5;
  animation:float-y 6s ease-in-out infinite;
}
.circle-1{ width:120px; height:120px; background:var(--color-pink); opacity:.18; top:8%; right:6%; }
.circle-2{ width:70px; height:70px; background:var(--color-blue); opacity:.18; bottom:16%; right:20%; animation-delay:1s; }
.circle-3{ width:50px; height:50px; background:var(--color-green); opacity:.2; top:60%; left:6%; animation-delay:2s; }
@keyframes float-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
}
.deco-confetti{
  position:absolute;
  width:14px; height:14px;
  border-radius:3px;
  animation:fall 5s linear infinite;
}
.confetti-1{ background:var(--color-orange); top:-5%; left:20%; animation-delay:0s; }
.confetti-2{ background:var(--color-blue); top:-5%; left:45%; animation-delay:1.3s; }
.confetti-3{ background:var(--color-pink); top:-5%; left:70%; animation-delay:2.6s; }
.confetti-4{ background:var(--color-green); top:-5%; left:88%; animation-delay:3.6s; }
@keyframes fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:560px;
  text-align:left;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:var(--color-pink-dark);
  background:#fff;
  border-radius:999px;
  padding:8px 18px;
  font-size:14px;
  margin-bottom:20px;
  box-shadow:0 4px 0 rgba(0,0,0,0.05);
}
.hero-title{
  margin:0 0 20px;
  line-height:1.05;
  font-weight:900;
}
.title-line1,.title-line2{
  display:block;
  font-size:clamp(38px,7vw,64px);
  background:linear-gradient(135deg,var(--color-blue) 0%, var(--color-blue) 40%, var(--color-pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,0.06));
}
.title-line2{
  background:linear-gradient(135deg,var(--color-pink) 0%, var(--color-orange) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.title-x{ color:var(--color-yellow); -webkit-text-fill-color:var(--color-yellow); }
.title-year{
  display:inline-block;
  margin-top:8px;
  font-size:clamp(22px,3vw,30px);
  background:var(--color-green);
  color:#fff;
  padding:4px 20px;
  border-radius:999px;
  -webkit-text-fill-color:#fff;
}
.hero-copy{
  font-size:16px;
  line-height:1.9;
  color:#3a3f5c;
  margin-bottom:24px;
}
.hero-info-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}
.hero-info-badges span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  color:var(--color-blue-dark);
  font-size:13px;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 3px 0 rgba(0,0,0,0.05);
}
.hero-info-badges i{ color:var(--color-pink); }
.hero-cta-wrap{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.btn-hero{ font-size:18px; padding:18px 36px; animation:pulse-btn 2.4s ease-in-out infinite; }
@keyframes pulse-btn{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}
.hero-cta-note{ font-size:13px; color:#6b7089; margin:0; }

.hero-visual{
  position:relative;
  z-index:2;
  flex:1;
  min-width:280px;
  max-width:460px;
  display:flex;
  justify-content:center;
}
.hero-poster{
  border-radius:24px;
  box-shadow:0 24px 40px rgba(30,50,90,0.25);
  border:6px solid #fff;
  transform:rotate(2deg);
}

.scroll-cue{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:var(--color-blue-dark);
  letter-spacing:.1em;
  z-index:2;
}
.scroll-cue span{
  width:2px; height:26px;
  background:var(--color-blue-dark);
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.scroll-cue span::after{
  content:'';
  position:absolute;
  top:0; left:0; width:100%; height:8px;
  background:var(--color-yellow);
  animation:scroll-move 1.6s ease-in-out infinite;
}
@keyframes scroll-move{
  0%{ top:0; }
  100%{ top:26px; }
}

/* ---------- MARQUEE ---------- */
.marquee-strip{
  background:var(--color-navy);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:12px 0;
  font-weight:700;
  font-size:15px;
}
.marquee-track{
  display:inline-flex;
  animation:marquee 22s linear infinite;
}
.marquee-track span{ padding-right:8px; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ---------- ABOUT ---------- */
.about-section{ background:var(--color-cream); text-align:center; }
.about-section .section-inner{ display:flex; flex-direction:column; align-items:center; }
.about-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
  margin:40px 0 30px;
}
.stat-card{
  background:#fff;
  border-radius:20px;
  padding:28px 32px;
  min-width:220px;
  box-shadow:0 8px 0 rgba(0,0,0,0.05);
  border:3px solid var(--color-yellow);
  text-align:center;
}
.stat-icon{
  display:block;
  font-size:28px;
  color:var(--color-pink);
  margin-bottom:10px;
}
.stat-text{
  display:block;
  font-size:19px;
  font-weight:900;
  color:var(--color-blue-dark);
  line-height:1.4;
}
.stat-label{
  display:block;
  font-size:12.5px;
  color:#565b78;
  margin-top:8px;
  font-weight:700;
}
/* ---------- HIGHLIGHTS ---------- */
.highlights-section{
  background:linear-gradient(135deg,var(--color-blue) 0%, var(--color-blue-dark) 100%);
  position:relative;
}
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:40px;
}
.highlight-card{
  background:#fff;
  border-radius:20px;
  padding:32px 22px;
  text-align:center;
  box-shadow:0 10px 0 rgba(0,0,0,0.08);
  transition:transform .2s ease;
}
.highlight-card:hover{ transform:translateY(-6px); }
.highlight-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-yellow),var(--color-orange));
  color:#fff;
  font-size:26px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.highlight-card h3{
  font-size:17px;
  color:var(--color-blue-dark);
  margin:0 0 10px;
  font-weight:800;
  line-height:1.4;
}
.highlight-card p{
  font-size:13.5px;
  color:#5c6280;
  line-height:1.7;
  margin:0;
}
@media (max-width:900px){
  .highlight-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .highlight-grid{ grid-template-columns:1fr; }
}

/* ---------- PERFORMERS ---------- */
.performers-section{ background:var(--color-cream); }
.performer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:40px;
}
.performer-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 0 rgba(0,0,0,0.06);
  transition:transform .2s ease;
}
.performer-card:hover{ transform:translateY(-6px); }
.performer-photo{
  height:260px;
  overflow:hidden;
  position:relative;
}
.performer-photo img{
  width:100%; height:100%; object-fit:cover;
}
.performer-info{ padding:20px 22px 26px; }
.performer-badge{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  background:var(--color-yellow);
  color:var(--color-navy);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.performer-info h3{
  font-size:19px;
  font-weight:800;
  color:var(--color-blue-dark);
  margin:0 0 8px;
}
.performer-info p{
  font-size:13.5px;
  color:#5c6280;
  line-height:1.7;
  margin:0;
}
@media (max-width:900px){
  .performer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .performer-grid{ grid-template-columns:1fr; }
}

/* ---------- COLLAB ---------- */
.collab-section{
  background:linear-gradient(135deg,#fff3e0,#ffe0ea);
}
.collab-inner{
  display:flex;
  align-items:center;
  gap:50px;
  flex-wrap:wrap;
}
.collab-text{ flex:1; min-width:280px; }
.collab-year{
  display:inline-block;
  background:var(--color-pink);
  color:#fff;
  font-size:.55em;
  padding:4px 14px;
  border-radius:999px;
  margin-left:10px;
  vertical-align:middle;
}
.collab-list{
  list-style:none;
  padding:0;
  margin:24px 0 30px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.collab-list li{
  font-weight:700;
  color:#3a3f5c;
  display:flex;
  align-items:center;
  gap:10px;
}
.collab-list i{ color:var(--color-green); }
.collab-visual{
  flex:1;
  min-width:280px;
  max-width:440px;
}
.collab-visual img{
  border-radius:20px;
  box-shadow:0 20px 30px rgba(0,0,0,0.15);
  border:5px solid #fff;
}
.collab-visual-logo{
  max-width:320px;
  margin:0 auto;
}
.collab-visual-logo img{
  border-radius:24px;
  box-shadow:0 16px 28px rgba(0,0,0,0.15);
  border:5px solid #fff;
  background:#fff;
}

/* ---------- CTA ---------- */
.cta-section{
  position:relative;
  background:linear-gradient(135deg,var(--color-pink),var(--color-orange));
  color:#fff;
  padding:90px 24px;
  overflow:hidden;
  text-align:center;
}
.cta-bg-deco{ position:absolute; inset:0; }
.circle-cta-1{ position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.12); top:-60px; left:-60px; }
.circle-cta-2{ position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.12); bottom:-50px; right:-30px; }
.cta-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.cta-icon{ font-size:48px; margin-bottom:16px; }
.cta-title{
  font-size:clamp(24px,4vw,36px);
  font-weight:900;
  line-height:1.4;
  margin-bottom:16px;
}
.cta-copy{
  font-size:15px;
  line-height:1.8;
  margin-bottom:32px;
  opacity:.95;
}
.btn-cta-main{
  background:#fff;
  color:var(--color-pink-dark);
  box-shadow:0 8px 0 rgba(0,0,0,0.15);
  border:3px solid #fff;
}
.btn-cta-main:hover{ color:var(--color-pink-dark); background:#fff8ec; }
.cta-qr{
  margin-top:36px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.qr-img{
  width:110px; height:110px;
  background:#fff;
  padding:8px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.cta-qr p{ font-size:12px; font-weight:700; opacity:.9; }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--color-navy); color:#dfe3f5; padding-top:60px; }
.footer-inner{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px 40px;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  justify-content:space-between;
}
.footer-brand{ max-width:260px; }
.footer-logo-wrap{
  display:inline-block;
  background:#fff;
  border-radius:16px;
  padding:10px 16px;
  margin-bottom:14px;
}
.footer-logo{ height:44px; }
.footer-brand p{ font-size:13px; line-height:1.7; color:#b8bede; }
.footer-info{ flex:1; min-width:280px; max-width:520px; }
.footer-info p{ font-size:13px; line-height:1.9; color:#b8bede; margin:0 0 8px; }
.footer-note{ font-size:12px; color:#8b91b3; margin-top:14px; }
.footer-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-cta-label{ font-size:13px; font-weight:700; color:#dfe3f5; margin:0; }
.footer-cta .btn-outline{ border-color:#fff; color:#fff; background:transparent; }
.footer-cta .btn-outline:hover{ background:#fff; color:var(--color-navy); }
.footer-instagram-btn{ font-size:14px; white-space:nowrap; }
.footer-bottom{
  text-align:center;
  font-size:12px;
  color:#7a80a3;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* ---------- FLOATING CTA ---------- */
.floating-cta{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,var(--color-pink),var(--color-orange));
  color:#fff;
  font-weight:800;
  font-size:14px;
  padding:14px 20px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(236,61,120,0.4);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.floating-cta.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.floating-cta i{ font-size:18px; }

/* ---------- ANIMATION ON SCROLL ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (max-width:900px){
  .collab-inner{ flex-direction:column-reverse; }
}
@media (max-width:640px){
  .section-inner{ padding:60px 20px; }
  .hero-section{ padding-top:120px; text-align:center; justify-content:center; }
  .hero-content{ text-align:center; margin:0 auto; }
  .hero-cta-wrap{ align-items:center; }
}