/* =========================================================
   放課後霊診断 × ファントムバスターズ  LP Stylesheet
========================================================= */
:root{
  --c-black:#0a0a12;
  --c-navy:#0f1130;
  --c-navy-2:#161a45;
  --c-purple:#8b5cf6;
  --c-purple-deep:#5b2ee0;
  --c-lightblue:#4fd6ff;
  --c-mint:#4dffc0;
  --c-neongreen:#a6ff3d;
  --c-white:#f5f6ff;
  --c-gray:#a6a8c9;
  --font-head: 'Rocknroll One', 'M PLUS Rounded 1c', sans-serif;
  --font-body: 'M PLUS Rounded 1c', sans-serif;
  --radius-lg: 28px;
  --radius-md: 18px;
  --max-w: 480px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
.hidden{ display:none !important; }
.only-sp{ display:inline; }

/* noise overlay for texture */
.bg-noise{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(circle at 20% 10%, rgba(139,92,246,0.08), transparent 40%),
                    radial-gradient(circle at 85% 30%, rgba(79,214,255,0.08), transparent 45%),
                    radial-gradient(circle at 50% 90%, rgba(77,255,192,0.06), transparent 45%);
  mix-blend-mode:screen;
}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,10,18,0.9), rgba(10,10,18,0));
  padding:14px 20px 26px;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-w); margin:0 auto;
}
.site-header__logo{
  font-family:var(--font-head);
  font-size:14px; letter-spacing:0.08em;
  color:var(--c-white);
  text-shadow:0 0 8px var(--c-purple);
}
.site-header__tag{
  font-size:10px; padding:4px 10px; border-radius:20px;
  border:1px solid var(--c-mint); color:var(--c-mint);
  letter-spacing:0.05em;
}

main{ position:relative; z-index:3; }
.screen{ position:relative; padding:90px 0 60px; }
.section-inner{ max-width:var(--max-w); margin:0 auto; padding:0 22px; }

/* ---------- 共通見出し ---------- */
.section-kicker{
  font-family:var(--font-head);
  font-size:12px; letter-spacing:0.2em; text-align:center;
  margin:0 0 8px;
}
.section-title{
  font-family:var(--font-head);
  font-size:26px; text-align:center; margin:0 0 28px;
  color:var(--c-white);
  letter-spacing:0.03em;
}
.sub-title{
  font-family:var(--font-head);
  font-size:18px; margin:36px 0 16px; text-align:center;
  color:var(--c-lightblue);
}
.neon-text{ text-shadow:0 0 10px currentColor; }
.neon-text--purple{ color:var(--c-purple); }
.neon-text--mint{ color:var(--c-mint); }
.neon-text--lightblue{ color:var(--c-lightblue); }
.neon-text--neongreen{ color:var(--c-neongreen); }

/* =========================================================
   1. HERO
========================================================= */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0; overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, var(--c-navy-2) 0%, var(--c-black) 70%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg-img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0.55; filter:saturate(1.15) contrast(1.05);
  transform:scale(1.05);
  transition:transform 0.6s ease-out;
}
.hero__gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,18,0.15) 0%, rgba(10,10,18,0.55) 55%, var(--c-black) 96%),
             linear-gradient(90deg, rgba(91,46,224,0.35), rgba(79,214,255,0.08));
}
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(139,92,246,0.12) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(139,92,246,0.12) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  opacity:0.5;
}
.hero__char{
  position:absolute; z-index:1; width:46%; max-width:230px;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6));
  animation:floatChar 5s ease-in-out infinite;
}
.hero__char--left{ left:-6%; bottom:6%; animation-delay:0s; }
.hero__char--right{ right:-8%; bottom:2%; animation-delay:1.2s; }
@keyframes floatChar{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%{ transform:translateY(-14px) rotate(1deg); }
}

.ghost-float{
  position:absolute; z-index:1; font-size:26px; opacity:0.7;
  filter:drop-shadow(0 0 10px var(--c-purple));
  animation:ghostDrift 7s ease-in-out infinite;
}
.ghost-float--1{ top:14%; left:8%; animation-delay:0s; }
.ghost-float--2{ top:22%; right:10%; font-size:20px; animation-delay:2s; }
.ghost-float--3{ top:8%; left:50%; color:var(--c-mint); font-size:18px; animation-delay:1s; }
@keyframes ghostDrift{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-18px) translateX(6px); }
}

.hero__content{
  position:relative; z-index:2; text-align:center;
  padding:0 26px; max-width:var(--max-w); margin:auto 0 0;
}
.eyebrow{
  font-family:var(--font-head);
  font-size:13px; letter-spacing:0.18em; margin:0 0 10px;
}
.hero__title{
  font-family:var(--font-head);
  font-size:clamp(28px, 8vw, 36px);
  line-height:1.35; margin:0 0 14px; color:var(--c-white);
  text-shadow:0 2px 20px rgba(0,0,0,0.7);
}
.hero__title-accent{
  background:linear-gradient(90deg, var(--c-lightblue), var(--c-mint), var(--c-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(139,92,246,0.5));
}
.hero__sub{
  font-size:14px; line-height:1.8; color:var(--c-gray); margin:0 0 30px;
}
.hero__hashtags{
  margin-top:18px; font-size:11px; color:var(--c-gray); letter-spacing:0.03em;
}

/* CTA buttons */
.btn{
  font-family:var(--font-head);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; font-size:16px; border-radius:50px;
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:active{ transform:scale(0.96); }
.btn--cta{
  background:linear-gradient(90deg, var(--c-purple-deep), var(--c-purple) 45%, var(--c-lightblue));
  color:#fff;
  box-shadow:0 8px 24px rgba(139,92,246,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
  width:min(100%, 300px);
  animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 8px 24px rgba(139,92,246,0.45); }
  50%{ box-shadow:0 8px 34px rgba(79,214,255,0.6); }
}
.btn--outline{
  border:1.5px solid var(--c-lightblue); color:var(--c-lightblue); background:rgba(79,214,255,0.06);
  width:min(100%, 300px);
}
.btn--ghost{
  color:var(--c-gray); border:1px solid rgba(166,168,201,0.35); background:rgba(255,255,255,0.02);
  width:min(100%, 300px);
}
.btn--x{ background:#000; color:#fff; border:1px solid #333; width:min(100%,300px); }
.btn--ig{
  background:linear-gradient(45deg,#4f5bd5,#962fbf,#d62976,#fa7e1e,#feda75);
  color:#fff; width:min(100%,300px);
}
.btn--full{ width:100%; margin-bottom:12px; }
.btn__arrow{ font-size:12px; }

.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:0.2em; color:var(--c-gray); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-cue span{
  width:1px; height:26px; background:linear-gradient(var(--c-mint), transparent);
  animation:scrollLine 1.6s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0.3); opacity:0.3; }
  50%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(0.3); opacity:0.3; }
}

/* =========================================================
   2. QUIZ
========================================================= */
.quiz{ background:linear-gradient(180deg, var(--c-black), var(--c-navy) 40%, var(--c-black)); }
.quiz__intro{ text-align:center; margin-bottom:26px; }
.quiz__intro-desc{ color:var(--c-gray); font-size:13px; }

.quiz__progress{ margin-bottom:22px; }
.quiz__progress-bar{
  height:8px; border-radius:10px; background:rgba(255,255,255,0.08);
  overflow:hidden; position:relative;
}
.quiz__progress-bar span{
  position:absolute; inset:0; width:20%;
  background:linear-gradient(90deg, var(--c-purple), var(--c-lightblue), var(--c-mint));
  border-radius:10px; transition:width 0.5s ease;
  box-shadow:0 0 10px var(--c-purple);
}
.quiz__progress-text{
  text-align:right; font-size:11px; color:var(--c-gray); margin:6px 2px 0;
  font-family:var(--font-head);
}

.quiz__card-area{ position:relative; min-height:380px; perspective:1200px; }
.q-card{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(22,26,69,0.9), rgba(10,10,18,0.95));
  border:1px solid rgba(139,92,246,0.35);
  border-radius:var(--radius-lg);
  padding:30px 22px;
  box-shadow:0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(139,92,246,0.15) inset;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.q-card.flip-out{ animation:cardFlipOut 0.5s ease forwards; }
.q-card.flip-in{ animation:cardFlipIn 0.5s ease forwards; }
@keyframes cardFlipOut{
  0%{ transform:rotateY(0) translateZ(0); opacity:1; }
  100%{ transform:rotateY(-95deg) translateZ(-40px); opacity:0; }
}
@keyframes cardFlipIn{
  0%{ transform:rotateY(95deg) translateZ(-40px); opacity:0; }
  100%{ transform:rotateY(0) translateZ(0); opacity:1; }
}
.q-card__num{
  font-family:var(--font-head); font-size:12px; color:var(--c-mint); letter-spacing:0.1em;
}
.q-card__question{
  font-family:var(--font-head); font-size:19px; margin:10px 0 24px; line-height:1.5;
  color:var(--c-white);
}
.q-card__options{ display:flex; flex-direction:column; gap:12px; }
.q-option{
  text-align:left; padding:16px 18px; font-size:15px; border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.12);
  color:var(--c-white); font-family:var(--font-body);
  display:flex; align-items:center; gap:10px;
  transition:all 0.2s ease;
}
.q-option::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--c-gray); flex-shrink:0;
  transition:all 0.2s ease;
}
.q-option:active, .q-option.selected{
  border-color:var(--c-lightblue);
  background:rgba(79,214,255,0.12);
  box-shadow:0 0 16px rgba(79,214,255,0.35);
  transform:scale(0.98);
}
.q-option.selected::before{ background:var(--c-mint); box-shadow:0 0 8px var(--c-mint); }

/* =========================================================
   3. RESULT
========================================================= */
.result{ background:radial-gradient(ellipse at 50% 0%, var(--c-navy-2), var(--c-black) 75%); }
.ghost-vanish{
  text-align:center; font-size:60px; margin-bottom:-10px;
  animation:vanish 1.4s ease forwards;
}
@keyframes vanish{
  0%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
  70%{ opacity:0.4; transform:scale(1.6) translateY(-30px); filter:blur(4px); }
  100%{ opacity:0; transform:scale(2) translateY(-60px); filter:blur(8px); }
}

.result-card{
  background:linear-gradient(160deg, rgba(22,26,69,0.95), rgba(10,10,18,0.98));
  border:1.5px solid var(--c-purple);
  border-radius:var(--radius-lg);
  padding:34px 24px;
  text-align:center;
  box-shadow:0 0 50px rgba(139,92,246,0.3), 0 20px 40px rgba(0,0,0,0.6);
  animation:resultPop 0.6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes resultPop{
  0%{ opacity:0; transform:scale(0.85) translateY(20px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.result-card__kicker{ color:var(--c-gray); font-size:13px; margin:0 0 6px; }
.result-card__name{
  font-family:var(--font-head); font-size:30px; margin:0 0 22px;
  background:linear-gradient(90deg, var(--c-mint), var(--c-lightblue), var(--c-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(139,92,246,0.5));
}
.result-card__block{ margin-bottom:22px; text-align:left; }
.result-card__label{
  font-family:var(--font-head); font-size:12px; color:var(--c-lightblue);
  letter-spacing:0.1em; margin:0 0 8px;
}
.result-card__text{ font-size:14px; line-height:1.9; color:var(--c-white); margin:0; }

.result-card__buster{ margin:26px 0; }
.buster-frame{
  width:130px; height:130px; margin:12px auto 10px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.25), transparent 70%);
  border:2px solid var(--c-mint);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px rgba(77,255,192,0.4);
  overflow:hidden;
}
.buster-frame img{ width:80%; height:auto; }
.buster-name{ font-family:var(--font-head); font-size:16px; margin:0; }
.buster-role{ font-size:12px; color:var(--c-gray); margin:4px 0 0; }

.result-card__comment{
  font-size:15px; line-height:1.8; margin:0; padding-top:18px;
  border-top:1px dashed rgba(255,255,255,0.15);
  color:var(--c-mint); font-weight:700;
}

.result-actions{
  display:flex; flex-direction:column; gap:12px; align-items:center;
  margin-top:26px;
}

/* share card (offscreen render target) */
.share-card-wrap{
  position:fixed; left:-9999px; top:0; z-index:-1;
}
.share-card{
  width:600px; height:800px; padding:60px 50px;
  background:linear-gradient(160deg, #161a45, #0a0a12 70%);
  color:#fff; font-family:var(--font-body);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  position:relative;
}
.share-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 10%, rgba(139,92,246,0.35), transparent 45%),
             radial-gradient(circle at 85% 85%, rgba(79,214,255,0.3), transparent 45%);
}
.share-card__brand{ font-size:16px; color:#4dffc0; letter-spacing:0.08em; margin-bottom:20px; position:relative; }
.share-card__kicker{ font-size:16px; color:#a6a8c9; margin:0 0 10px; position:relative; }
.share-card__name{
  font-family:var(--font-head); font-size:46px; margin:0 0 24px; position:relative;
  color:#fff; text-shadow:0 0 20px #8b5cf6;
}
.share-card__feature{ font-size:16px; line-height:1.8; margin:0 0 30px; position:relative; max-width:440px; }
.share-card__buster{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:30px; position:relative; }
.share-card__buster img{ width:140px; }
.share-card__buster span{ font-family:var(--font-head); font-size:18px; }
.share-card__hashtag{ font-size:14px; color:#4fd6ff; position:relative; }

/* =========================================================
   4. ABOUT
========================================================= */
.about{ background:var(--c-black); }
.about-card{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(139,92,246,0.3);
  background:rgba(255,255,255,0.02);
  margin-bottom:10px;
}
.about-card__img{ width:100%; }
.about-card__text{ padding:20px; font-size:13.5px; line-height:1.9; color:var(--c-gray); margin:0; }

.char-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:6px;
}
.char-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md);
  padding:10px 6px 12px; text-align:center;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.char-card:active{ transform:scale(0.94); border-color:var(--c-mint); }
.char-card img{ width:72%; margin:0 auto 8px; }
.char-card__name{ font-size:11px; color:var(--c-white); font-family:var(--font-head); }
.char-hint{ text-align:center; font-size:11px; color:var(--c-gray); margin-top:14px; }

.char-modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,12,0.85); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.char-modal.open{ opacity:1; pointer-events:auto; }
.char-modal__box{
  width:min(86vw, 340px); background:linear-gradient(160deg, #161a45, #0a0a12);
  border:1.5px solid var(--c-purple); border-radius:var(--radius-lg);
  padding:34px 24px 28px; text-align:center; position:relative;
  box-shadow:0 0 40px rgba(139,92,246,0.4);
  transform:scale(0.9); transition:transform 0.25s ease;
}
.char-modal.open .char-modal__box{ transform:scale(1); }
.char-modal__box img{ width:150px; margin:0 auto 16px; }
.char-modal__box h4{ font-family:var(--font-head); font-size:18px; margin:0 0 10px; color:var(--c-mint); }
.char-modal__box p{ font-size:13px; color:var(--c-gray); line-height:1.8; margin:0; }
.char-modal__close{
  position:absolute; top:14px; right:16px; color:var(--c-gray); font-size:16px;
}

/* =========================================================
   5. COMICS / CTA
========================================================= */
.comics{ background:linear-gradient(180deg, var(--c-black), var(--c-navy) 60%); padding-bottom:40px; }
.comics-card{
  display:flex; gap:16px; align-items:center;
  background:rgba(255,255,255,0.03); border:1px solid rgba(166,255,61,0.25);
  border-radius:var(--radius-lg); padding:16px; margin-bottom:26px;
  box-shadow:0 0 30px rgba(166,255,61,0.08);
}
.comics-card__img{ width:96px; border-radius:8px; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.comics-card__title{ font-family:var(--font-head); font-size:15px; margin:0 0 8px; line-height:1.5; }
.comics-card__author{ font-size:11px; color:var(--c-gray); margin:0 0 6px; }
.comics-card__release{ font-size:12px; color:var(--c-neongreen); margin:0; font-weight:700; }

.cta-buttons{ display:flex; flex-direction:column; align-items:center; }

.sns-block{ text-align:center; margin-top:36px; }
.sns-block__hashtag{ font-size:13px; color:var(--c-lightblue); margin-bottom:14px; letter-spacing:0.02em; }
.sns-block__list{ display:flex; justify-content:center; gap:14px; list-style:none; padding:0; margin:0; }
.sns-block__list a{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); font-size:13px;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ text-align:center; padding:40px 24px 60px; color:var(--c-gray); }
.site-footer__note{ font-size:11px; margin-bottom:14px; }
.site-footer__credit{ font-size:11px; line-height:1.8; margin-bottom:14px; }
.site-footer__credit a{ color:var(--c-lightblue); text-decoration:underline; }
.site-footer__copy{ font-size:10px; opacity:0.6; }
.to-top{
  margin-top:20px; font-size:11px; color:var(--c-gray);
  border:1px solid rgba(255,255,255,0.15); border-radius:20px; padding:8px 18px;
}

/* =========================================================
   Scroll-driven fade-in
========================================================= */
.fade-in{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   Responsive tweaks
========================================================= */
@media (min-width:600px){
  :root{ --max-w:560px; }
  .hero__title{ font-size:40px; }
}

@media (max-width:340px){
  .hero__title{ font-size:24px; }
  .result-card__name{ font-size:24px; }
}