/* ---- Reset-ish ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

:root{
  /* Layout */
  --header-h: 64px;
  --max-w: 760px;
  --radius: 18px;

  /* Typography */
  --ink: #0b1020;
  --muted: rgba(17,24,39,.72);

  /* Card */
  --card: rgba(255,255,255,.26);
  --card-strong: rgba(255,255,255,.70);
  --stroke: rgba(255,255,255,.30);
  --stroke-strong: rgba(255,255,255,.55);

  /* Shadow */
  --shadow: 0 18px 40px rgba(15,23,42,.18);
  --shadow2: 0 10px 24px rgba(15,23,42,.14);

  /* Space palette (default: purple) */
  --space-a: rgba(160,120,255,.40);
  --space-b: rgba(200,120,255,.28);
  --space-c: rgba(120,80,255,.20);
  --space-base-top: #050618;
  --space-base-mid: #0b0630;
  --space-base-bot: #040316;

  /* Nebula tint */
  --nebula-1: rgba(120,140,255,.18);
  --nebula-2: rgba(255,120,200,.14);
  --nebula-3: rgba(60,220,255,.10);
}

/* 青寄りに切り替えたい時：bodyに .theme-blue を付ける */
body.theme-blue{
  --space-a: rgba(120,160,255,.40);
  --space-b: rgba(80,140,255,.25);
  --space-c: rgba(60,200,255,.18);
  --space-base-top: #04071a;
  --space-base-mid: #070b2e;
  --space-base-bot: #030516;

  --nebula-1: rgba(120,160,255,.16);
  --nebula-2: rgba(140,120,255,.12);
  --nebula-3: rgba(60,220,255,.10);
}

body{
  margin: 0;
  padding-top: calc(var(--header-h) + 8px);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.75;

  /* Space background */
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--space-a), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, var(--space-b), transparent 55%),
    radial-gradient(700px 500px at 50% 90%, var(--space-c), transparent 55%),
    linear-gradient(180deg, var(--space-base-top) 0%, var(--space-base-mid) 45%, var(--space-base-bot) 100%);
  background-attachment: fixed;
}

/* ---- Star layers (fixed) ---- */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Small stars */
body::before{
  opacity: .55; /* 星の存在感 */
  background:
    /* 小さい星：密度高め */
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.6px) 0 0 / 120px 120px repeat,
    radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.8px) 40px 20px / 160px 160px repeat,

    /* さらに細かい粒：密度を底上げ */
    radial-gradient(circle, rgba(255,255,255,.55) .8px, transparent 1.6px) 10px 30px / 90px 90px repeat,

    /* たまに混ざる少し大きい星 */
    radial-gradient(circle, rgba(255,255,255,.45) 2px, transparent 4px) 60px 80px / 380px 380px repeat;

  filter: drop-shadow(0 0 10px rgba(200,220,255,.35));
}

/* Nebula glow */
body::after{
  opacity: .55;
  background:
    radial-gradient(650px 420px at 15% 30%, var(--nebula-1), transparent 65%),
    radial-gradient(520px 360px at 85% 45%, var(--nebula-2), transparent 70%),
    radial-gradient(620px 420px at 55% 85%, var(--nebula-3), transparent 70%);
  mix-blend-mode: screen;
}

/* ---- Star drift animation ---- */
@keyframes star-drift {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-120px) translateX(40px); }
}
@keyframes nebula-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-80px); }
}

body::before{ animation: star-drift 120s linear infinite; }
body::after { animation: nebula-drift 180s linear infinite; }



/* ---- Fixed header ---- */
.fixed-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;

  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
}

.fixed-header .b-back-button,
.fixed-header .logo-center,
.fixed-header .header-spacer{
  display: flex;
  align-items: center;
}

.fixed-header .b-back-button img{
  height: 30px;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.14));
}

.fixed-header .logo-center img{
  height: 40px;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(15,23,42,.16));
}

/* ---- Main glass card ---- */
main.main{
  position: relative;
  z-index: 1; /* over stars */

  max-width: var(--max-w);
  margin: 10px auto 44px;
  padding: 14px 14px 24px;

  border-radius: calc(var(--radius) + 10px);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* ---- Hero image (no crop) ---- */
.image.hero{
  margin: 10px auto 14px;
}
.image.hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  border: 1px solid var(--stroke-strong);
}

/* ---- Title card ---- */
.headerTitle{
  margin: 10px auto 14px;
  padding: 18px 16px 14px;
  text-align: center;

  border-radius: var(--radius);
  background: var(--card-strong);
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow2);

  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
  font-size: clamp(22px, 4.6vw, 34px);
  color: #121826;

  position: relative;
  overflow: hidden;
}
.headerTitle::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(520px 120px at 50% 0%, rgba(255,255,255,.85), transparent 65%);
  pointer-events:none;
}
.headerTitle::after{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,215,128,.50), rgba(255,255,255,0) 55%);
  pointer-events:none;
  mix-blend-mode: soft-light;
}

/* ---- Paragraphs ---- */

/* ===== Lead block: make 3 lines feel connected (STRONG) ===== */
.lead-block{
  margin: 18px auto 20px;
  padding: 20px 18px 18px;
  max-width: 680px;
  border-radius: calc(var(--radius) + 6px);

  /* stronger glass */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.72);

  /* bigger lift */
  box-shadow:
    0 26px 70px rgba(15,23,42,.22),
    0 10px 24px rgba(15,23,42,.14);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  transform: translateZ(0);
}

/* bold gradient ring */
.lead-block::after{
  content:"";
  position:absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,214,128,1),
    rgba(255,120,190,.95),
    rgba(130,160,255,.95),
    rgba(44,216,213,.95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  pointer-events:none;
  z-index: 0;
  filter: drop-shadow(0 0 18px rgba(255,214,128,.28));
}

/* intense glow & sparkle wash */
.lead-block::before{
  content:"";
  position:absolute; inset:-6px;
  background:
    radial-gradient(720px 220px at 50% 0%, rgba(255,255,255,.92), transparent 65%),
    radial-gradient(520px 280px at 8% 25%, rgba(255,214,128,.32), transparent 62%),
    radial-gradient(560px 320px at 92% 40%, rgba(130,160,255,.26), transparent 64%),
    radial-gradient(760px 360px at 50% 120%, rgba(255,120,190,.20), transparent 62%);
  pointer-events:none;
  opacity: 1;
  z-index: 0;
}

/* BIG badge */
.lead-block .lead-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background: linear-gradient(90deg, rgba(255,214,128,.92), rgba(255,160,170,.88));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 30px rgba(15,23,42,.18);

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(17,24,39,.90);
}
.lead-block .lead-badge::before{
  content:"🔥";
  display:inline-block;
  transform: translateY(-.5px);
}

/* inner paragraphs */
.lead-block p{
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none;
  position: relative;
  z-index: 1;
}
.lead-block p + p{ margin-top: 12px; }

/* top/bottom text gets a tiny “cardy” feel */
.lead-block p.kuroi{
  color: #0b1020;
  font-weight: 800;
}
.lead-block p.kuroi b{
  font-weight: 900;
}

/* center emphasis */
.lead-block p.akai{ text-align: center; }

.lead-block p.akai big big{
  display:inline-block;
  padding: 14px 24px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(255,214,128,1),
    rgba(255,120,190,.96)
  );
  border: 1px solid rgba(255,255,255,.78);

  box-shadow:
    0 20px 44px rgba(15,23,42,.22),
    0 0 0 6px rgba(255,255,255,.22);

  font-size: clamp(22px, 5.4vw, 34px);
  letter-spacing: .02em;
}

/* stronger pulse + glow */
@keyframes lead-pulse-strong{
  0%   { transform: translateY(0) scale(1); filter: saturate(1) drop-shadow(0 0 0 rgba(255,214,128,0)); }
  45%  { transform: translateY(-2px) scale(1.05); filter: saturate(1.12) drop-shadow(0 0 18px rgba(255,214,128,.35)); }
  100% { transform: translateY(0) scale(1); filter: saturate(1) drop-shadow(0 0 0 rgba(255,214,128,0)); }
}
.lead-block p.akai big big{
  /* animation removed for static */
}

/* a subtle shine sweep across the block */
@keyframes lead-shine{
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: .25; }
  40%  { opacity: .12; }
  55%  { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}
.lead-block{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,0) 70%);
  background-size: 260px 100%;
  background-repeat: no-repeat;
  /* animation removed for static */
  background-position: -260px 0;
}

/* gradient ring */
.lead-block::after{
  content:"";
  position:absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,214,128,.85),
    rgba(255,160,170,.65),
    rgba(197,193,255,.70),
    rgba(44,216,213,.65)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .85;
  pointer-events:none;
  z-index: 0;
}

/* soft top glow */
.lead-block::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(620px 180px at 50% 0%, rgba(255,255,255,.80), transparent 65%),
    radial-gradient(520px 220px at 12% 20%, rgba(255,214,128,.22), transparent 60%),
    radial-gradient(520px 220px at 88% 35%, rgba(197,193,255,.18), transparent 60%);
  pointer-events:none;
  opacity: .95;
  z-index: 0;
}

/* tiny sparkle badge (top-right) */
.lead-block .lead-badge{
  position:absolute;
  top: 10px;
  right: 12px;
  z-index: 2;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(17,24,39,.78);
}
.lead-block .lead-badge::before{
  content:"✨";
  display:inline-block;
  transform: translateY(-.5px);
}

/* inner paragraphs as content */
.lead-block p{
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none;
  position: relative;
  z-index: 1;
}
.lead-block p + p{ margin-top: 10px; }

/* make the middle emphasis align with the block */
.lead-block p.akai{ text-align: center; }

.lead-block p.akai big big{
  display:inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,128,.97), rgba(255,160,170,.94));
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}

/* subtle pulse for the emphasis (very gentle) */
@keyframes lead-pulse{
  0%   { transform: translateY(0) scale(1); filter: saturate(1); }
  50%  { transform: translateY(-1px) scale(1.02); filter: saturate(1.05); }
  100% { transform: translateY(0) scale(1); filter: saturate(1); }
}
.lead-block p.akai big big{
  animation: lead-pulse 3.8s ease-in-out infinite;
}

/* make the middle emphasis align with the block */
.lead-block p.akai{ text-align: center; }
.lead-block p.akai big big{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,128,.95), rgba(255,160,170,.92));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 24px rgba(15,23,42,.14);
}

.kuroi, .akai{ margin: 10px auto; padding: 0 10px; }
.kuroi{ color: #0b1020; }
.akai{ text-align: center; }

/* Emphasis badge for “2倍!!” */
.akai big big{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,128,.95), rgba(255,160,170,.92));
  color: #1b1f2a;
  box-shadow: 0 12px 24px rgba(15,23,42,.16);
  border: 1px solid rgba(255,255,255,.55);
}

/* ---- Payment section ---- */
.payment-container{
  padding: 18px 16px 8px;
  margin: 10px auto 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow2);
}

.payment-list{
  list-style: none;
  padding: 0;
  margin: 10px auto 8px;
  max-width: 560px;
}

.payment-item{
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 14px 14px;
  transition: transform .18s ease, border-color .18s ease;
}
.payment-item:hover{
  transform: translateY(-2px);
  border-color: rgba(44,216,213,.8);
}

.badge{
  background: linear-gradient(180deg, rgba(44,216,213,.95), rgba(197,193,255,.95));
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(44,216,213,.25);
  font-weight: 800;
}
.label{ font-weight: 800; color: #111827; }

/* ---- Section tabs ---- */
.infoTab2{
  margin: 18px auto 10px;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
  text-align: center;
}

/* Make the “期間/注意事項” paragraphs look like cards */
p.kuroi.si16.ma2{
  padding: 14px 16px;
  margin: 10px auto 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

/* ---- Dividers ---- */
hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,.55);
  margin: 18px auto;
  max-width: calc(var(--max-w) - 40px);
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.10));
}

/* ---- Back icon ---- */
a.back {
  display: block;
  background: transparent;
  border: none;
}

a.back img{
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
  border: 1px solid rgba(255,255,255,.55);
  display: block;
  border: none;
  outline: none;
}

/* ---- Footer ---- */
footer{
  margin: 22px auto 6px;
  padding: 14px 12px;
  text-align: center;
  color: var(--muted);
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
footer p{ margin: 0; }

/* ---- Helpers ---- */
.center{ text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 520px){
  body{ padding-top: calc(var(--header-h) + 6px); }
  main.main{ margin: 8px auto 34px; width: calc(100% - 20px); }
  .fixed-header .logo-center img{ height: 34px; }
}

/* ===== キラキラ用の瞬き星レイヤー ===== */
body .twinkle-layer{ display:none; } /* 保険：HTML不要 */

body::marker{} /* ダミー（Safari対策） */

@keyframes star-twinkle {
  0%   { opacity: .15; }
  20%  { opacity: .6; }
  40%  { opacity: .25; }
  60%  { opacity: .75; }
  80%  { opacity: .35; }
  100% { opacity: .15; }
}

/* 3枚目の疑似レイヤーとして重ねる */
body::selection{} /* ダミー */

body::before{
  /* 既存：流れる星（そのまま） */
}

/* ✨ 瞬く星 */
body::after{
  /* 既存：星雲（そのまま） */
}

/* 新しいキラキラ星 */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: .55;
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.9) 0 1px, transparent 3px),
    radial-gradient(circle at 28% 62%, rgba(255,255,255,.85) 0 1px, transparent 3px),
    radial-gradient(circle at 41% 35%, rgba(255,255,255,.8) 0 1px, transparent 3px),
    radial-gradient(circle at 57% 18%, rgba(255,255,255,.9) 0 1px, transparent 3px),
    radial-gradient(circle at 66% 48%, rgba(255,255,255,.85) 0 1px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.8) 0 1px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.75) 0 1px, transparent 3px);
    ,radial-gradient(circle at 8% 80%,  rgba(255,255,255,.85) 0 1px, transparent 3px)
    ,radial-gradient(circle at 22% 14%, rgba(255,255,255,.75) 0 1px, transparent 3px)
    ,radial-gradient(circle at 35% 82%, rgba(255,255,255,.80) 0 1px, transparent 3px)
    ,radial-gradient(circle at 49% 52%, rgba(255,255,255,.78) 0 1px, transparent 3px)
    ,radial-gradient(circle at 63% 10%, rgba(255,255,255,.82) 0 1px, transparent 3px)
    ,radial-gradient(circle at 72% 88%, rgba(255,255,255,.72) 0 1px, transparent 3px)
    ,radial-gradient(circle at 84% 46%, rgba(255,255,255,.78) 0 1px, transparent 3px)
    ,radial-gradient(circle at 96% 30%, rgba(255,255,255,.70) 0 1px, transparent 3px)


  filter: drop-shadow(0 0 12px rgba(220,230,255,.45));
  animation: star-twinkle 6s ease-in-out infinite;
}
@keyframes star-twinkle-random {
  0%   { opacity: .05; transform: scale(1); }
  30%  { opacity: .7;  transform: scale(1.3); }
  60%  { opacity: .2;  transform: scale(1); }
  100% { opacity: .05; transform: scale(1); }
}


/* ===== 流星（たまにシュッ） ===== */
@keyframes shooting-star {
  0% {
    transform: translate(110vw, -10vh) rotate(-35deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  15% {
    transform: translate(-20vw, 120vh) rotate(-35deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 流星レイヤー */
html::marker{} /* Safari対策ダミー */

html::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.9) 50%,
      rgba(255,255,255,0) 100%
    );

  width: 180px;
  height: 2px;
  border-radius: 2px;

  filter: drop-shadow(0 0 8px rgba(200,220,255,.8));
  opacity: 0;

  animation: shooting-star 18s linear infinite;
}

/* ===== Center text globally (campaign page) ===== */

/* default paragraphs */
main.main p{
  text-align: center;
}

/* lists & payment labels should stay readable */
.payment-list,
.payment-item,
.payment-item .label{
  text-align: left;
}

/* footer */
footer p{
  text-align: center;
}