@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/*
  ============================================================
  SPIRAL TURN LP stylesheet
  - このCSSは、色・余白・レイアウトを変数とセクション単位で管理します。
  - 各コメントは「そのコードが画面上で何を担当するか」を示します。
  - デザインを変えずに修正する場合は、まず :root の色変数や各セクションのCSSを編集してください。
  ============================================================
*/

/* サイト全体で使う色を変数化。色変更時はここだけ直すと全体に反映されます。 */
:root {
  --navy:         #0a0e1a;
  --deep:         #060912;
  --mid:          #1b2641;
  --accent:       #c9a96e;
  --accent-light: #e8d5a3;
  --accent-dim:   rgba(201,169,110,.12);
  --white:        #f5f2eb;
  --text:         #d2ccc1;
  --muted:        #9f978c;
}

*, *::before, *::after { box-sizing: border-box; }
#st-lp * { margin: 0; padding: 0; }

/* ページ内リンクを押したとき、該当位置まで滑らかに移動させます。 */
html{ scroll-behavior:smooth; }

/* Shopifyテーマの汎用要素ルールに勝つためのベースリセット（!importantなし・IDの詳細度で対応） */
#st-lp p, #st-lp h1, #st-lp h2, #st-lp h3,
#st-lp h4, #st-lp h5, #st-lp h6, #st-lp li {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif !important;
  text-align: left;
  margin: 0;
}
#st-lp a, #st-lp span {
  color: var(--white);
}

/* LPラッパー全体の背景色・文字色・標準フォントを設定します。 */
#st-lp {
  background: var(--deep);
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400;
  overflow-x: hidden;
}

/* ══════════════════════════════
   HERO — full-bleed photo
══════════════════════════════ */
#st-lp .hero {
  position: relative;
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  overflow-x: hidden;
  margin-top: 80px; /* ← 追加：Debutヘッダーの高さ分 */
}

@media (max-width: 768px) {
  #st-lp .hero {
    margin-top: 60px; /* ← モバイル用 */
  }
}

#st-lp .hero-photo {
  position: absolute; inset: 0;
  background: url("../images/supporter/hero-bg.jpeg") center center / cover no-repeat;
}

#st-lp .hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(4,7,18,.90) 0%, rgba(4,7,18,.55) 45%, rgba(4,7,18,.05) 100%),
    linear-gradient(to top,   rgba(4,7,18,.80) 0%, rgba(4,7,18,.0)  50%);
}

#st-lp .hero-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5%  8%,  rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 12% 3%,  rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 14%, rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 30% 6%,  rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 40% 11%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 4%,  rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 9%,  rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 82% 3%,  rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 13%, rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 97% 5%,  rgba(255,255,255,.6) 0%,transparent 100%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from{opacity:.5} to{opacity:1} }

#st-lp .hero-content {
  position: relative; z-index: 10;
  padding: 0px 80px 100px;
  max-width: 820px;
}
#st-lp .hero-eyebrow {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px; letter-spacing: .55em;
  color: var(--accent); text-transform: uppercase;
  margin-top: 20px; margin-bottom: 28px;
  opacity: 0; animation: slideUp .9s ease .2s forwards;
}
#st-lp .hero-headline {
  opacity: 0; animation: slideUp .9s ease .4s forwards;
}
#st-lp .hero-headline .catch {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(15px,2vw,18px); font-weight: 300;
  letter-spacing: .25em; color: var(--accent-light);
  display: block; margin-bottom: 18px;
}
#st-lp .hero-headline .main {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(42px,7vw,80px); font-weight: 300;
  line-height: 1.15; letter-spacing: .04em;
  display: block;
  background: linear-gradient(135deg,#fff 0%,var(--accent-light) 55%,#fff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
#st-lp .hero-headline .sub {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(16px,2.2vw,22px); font-weight: 300;
  color: var(--text); letter-spacing: .12em;
  display: block; margin-top: 18px;
}
#st-lp .hero-divider {
  width: 48px; height: 1px;
  background: linear-gradient(to right,var(--accent),transparent);
  margin: 40px 0;
  opacity: 0; animation: slideUp .9s ease .6s forwards;
}
#st-lp .hero-copy {
  font-size: clamp(15px,1.6vw,17px); line-height: 2.4;
  color: rgba(255,255,255,.86);
  opacity: 0; animation: slideUp .9s ease .7s forwards;
  margin-bottom: 48px;
}
#st-lp .hero-copy em {
  color: var(--accent-light); font-style: normal; font-weight: 400;
}
#st-lp .hero-btns {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: slideUp .9s ease .9s forwards;
}

/* スクロールインジケーター */
#st-lp .scroll-hint {
  position: absolute; bottom: 36px; right: 56px;
  z-index: 10; display: flex; align-items: center; gap: 10px;
  opacity: 0; animation: fadeIn 1s ease 1.4s forwards;
}
#st-lp .scroll-hint span {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 12px; letter-spacing: .4em;
  color: var(--accent); text-transform: uppercase;
  writing-mode: vertical-rl;
}
#st-lp .scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom,var(--accent),transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%  { transform:scaleY(0);transform-origin:top }
  50% { transform:scaleY(1);transform-origin:top }
  50.1%{ transform:scaleY(1);transform-origin:bottom }
  100%{ transform:scaleY(0);transform-origin:bottom }
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(22px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── BUTTONS ── */
#st-lp .btn-primary {
  display: inline-block; padding: 18px 52px;
  background: linear-gradient(135deg,var(--accent),#a8813e);
  color: var(--deep); font-weight: 700; font-size: 15px;
  letter-spacing: .18em; text-decoration: none;
  position: relative; overflow: hidden;
  transition: all .3s; cursor: pointer; border: none;
  flex-shrink: 0;
}
#st-lp .btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform .4s;
}
#st-lp .btn-primary:hover::before { transform: translateX(150%) skewX(-15deg); }
#st-lp .btn-primary:hover { box-shadow: 0 8px 40px rgba(201,169,110,.4); transform: translateY(-2px); }
#st-lp .btn-ghost {
  display: inline-block; padding: 16px 44px;
  border: 1px solid rgba(201,169,110,.5);
  color: var(--accent); font-size: 15px; letter-spacing: .18em;
  text-decoration: none; transition: all .3s; flex-shrink: 0;
}
#st-lp .btn-ghost:hover { background: var(--accent-dim); transform: translateY(-2px); }

/* ── SHARED ── */
#st-lp .section { padding: 100px 20px; }
#st-lp .inner   { max-width: 1100px; margin: 0 auto; }
#st-lp .label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 13px; letter-spacing: .5em;
  color: var(--accent); text-transform: uppercase;
  text-align: center; margin-bottom: 14px;
}
#st-lp .sec-title {
  font-family: 'Noto Serif JP', serif !important; font-weight: 300;
  font-size: clamp(24px,4vw,40px); color: var(--white);
  text-align: center; line-height: 1.6; margin-bottom: 18px;
}
#st-lp .sec-sub {
  text-align: center; color: var(--text);
  font-size: clamp(15px,1.8vw,17px);
  line-height: 2.1; max-width: 580px; margin: 0 auto 64px;
}
#st-lp .rule    { width: 36px; height: 1px; background: var(--accent); margin: 20px auto; }
#st-lp .divider {
  width: 100%; height: 1px;
  background: linear-gradient(to right,transparent,rgba(201,169,110,.18),transparent);
}

/* ── PAIN ── */
#st-lp .pain-bg { background: var(--navy); }
#st-lp .pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
  gap: 2px;
  background: rgba(201,169,110,.07);
  border: 1px solid rgba(201,169,110,.1);
}
#st-lp .pain-item {
  background: var(--mid); padding: 30px 26px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: background .3s;
}
#st-lp .pain-item:hover { background: rgba(12,18,36,1); }
#st-lp .pain-dot {
  width: 18px; height: 18px; border: 1px solid var(--accent);
  border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
}
#st-lp .pain-dot::after { content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
#st-lp .pain-text { font-size: 15px; line-height: 1.75; color: var(--text); }
#st-lp .pain-text strong { color: var(--white); font-weight: 500; display: block; margin-bottom: 4px; }

/* ── WHY IT WORKS / REASON INFOGRAPHIC ── */
#st-lp .reason-bg {
  background:
    radial-gradient(ellipse at 50% 0%,rgba(201,169,110,.12),transparent 62%),
    linear-gradient(180deg,var(--deep) 0%,var(--navy) 100%);
  position: relative; overflow: hidden;
}
#st-lp .reason-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 15%,rgba(232,213,163,.09),transparent 24%),
              radial-gradient(circle at 85% 30%,rgba(22,95,91,.16),transparent 28%);
  pointer-events: none;
}
#st-lp .reason-bg .inner { position: relative; z-index: 2; }
#st-lp .reason-lead {
  max-width: 820px; margin: 0 auto 38px;
  color: var(--text); font-size: 15px; line-height: 2.15; text-align: center;
}
#st-lp .reason-panel {
  max-width: 980px; margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow: 0 26px 90px rgba(0,0,0,.38);
}
#st-lp .reason-panel img { width: 100%; height: auto; display: block; border-radius: 12px; }
#st-lp .reason-caption {
  max-width: 860px; margin: 28px auto 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  border: 1px solid rgba(201,169,110,.12);
  background: rgba(201,169,110,.08);
}
#st-lp .reason-cap-item {
  background: rgba(6,9,18,.72);
  padding: 22px 20px; text-align: center;
}
#st-lp .reason-cap-item strong {
  display: block;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 16px; font-weight: 400; color: var(--accent-light);
  margin-bottom: 8px; line-height: 1.6;
}
#st-lp .reason-cap-item span { font-size: 14px; line-height: 1.8; color: var(--text); }

/* ── PRODUCT INTRO ── */
#st-lp .intro-bg { background: var(--deep); }
#st-lp .intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
#st-lp .intro-img-wrap {
  position: relative;
  background: linear-gradient(135deg,rgba(10,20,50,.6),rgba(5,10,30,.8));
  border: 1px solid rgba(201,169,110,.15);
  padding: 48px;
  display: flex; align-items: center; justify-content: center;
}
#st-lp .intro-img-wrap img { width: 100%; display: block; filter: drop-shadow(0 8px 32px rgba(0,0,0,.5)); }
#st-lp .intro-img-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%,rgba(40,60,120,.25),transparent 70%);
  pointer-events: none;
}
#st-lp .intro-badge {
  position: absolute; top: -1px; left: -1px;
  background: var(--accent); color: var(--deep);
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  padding: 6px 16px; text-transform: uppercase;
}
#st-lp .intro-text .lead {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--white);
  font-size: clamp(17px,2.5vw,24px); font-weight: 300;
  line-height: 1.85; margin-bottom: 28px;
}
#st-lp .intro-text .body { font-size: 15px; line-height: 2.2; color: var(--text); margin-bottom: 16px; }

/* ── DAY+NIGHT ── */
#st-lp .dn-bg { background: var(--mid); }
#st-lp .dn-hero {
  margin: 34px auto 56px;
  padding: 26px 28px 22px;
  background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 28px; text-align: center;
  box-shadow: 0 24px 70px rgba(4,18,38,.18);
}
#st-lp .dn-hero img { width: 100%; max-width: 980px; display: block; margin: 0 auto; border-radius: 20px; box-shadow: 0 16px 36px rgba(4,18,38,.14); }
#st-lp .dn-diagram-cap { font-size: 13px; color: var(--muted); letter-spacing: .15em; margin-top: 14px; text-transform: uppercase; }
#st-lp .dn-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(280px,.92fr); gap: 56px; align-items: start; }
#st-lp .dn-card-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 430px; width: 100%; margin-left: auto; }
#st-lp .dn-card {
  display: flex; align-items: stretch;
  border: 1px solid rgba(201,169,110,.12); overflow: hidden;
  background: rgba(255,255,255,.028);
  border-radius: 20px;
}
#st-lp .dn-time-tag {
  writing-mode: vertical-rl;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 12px; letter-spacing: .4em;
  color: var(--accent); text-transform: uppercase;
  padding: 16px 10px;
  background: rgba(201,169,110,.06);
  display: flex; align-items: center;
}
#st-lp .dn-body { padding: 24px 28px; flex: 1; }
#st-lp .dn-product { font-family: 'Noto Serif JP', serif !important; font-size: 16px; color: var(--white); margin-bottom: 6px; line-height: 1.8; }
#st-lp .dn-desc { font-size: 14px; color: var(--muted); line-height: 1.8; }
#st-lp .dn-text .lead {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--white);
  font-size: clamp(17px,2.5vw,24px); font-weight: 300;
  line-height: 1.95; margin-bottom: 20px;
}
#st-lp .dn-lead-sub { display: block; margin-top: 12px; font-size: 13px; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; }
#st-lp .dn-text .body { font-size: 15px; line-height: 2.2; color: var(--text); margin-bottom: 14px; }

/* ── FEATURES ── */
#st-lp .feat-bg { background: var(--navy); }
#st-lp .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
#st-lp .feat-card {
  background: var(--mid); padding: 48px 32px;
  position: relative; overflow: hidden; transition: transform .3s;
}
#st-lp .feat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right,transparent,var(--accent),transparent);
  transform: scaleX(0); transition: transform .4s;
}
#st-lp .feat-card:hover::after { transform: scaleX(1); }
#st-lp .feat-card:hover { transform: translateY(-4px); }
#st-lp .feat-num  { font-family: 'Cormorant Garamond', serif !important; font-size: 52px; color: rgba(201,169,110,.18); line-height: 1; margin-bottom: 16px; font-style: italic; }
#st-lp .feat-title{ font-family: 'Noto Serif JP', serif !important; font-size: 16px; font-weight: 400; margin-bottom: 14px; color: var(--accent-light); line-height: 1.6; }
#st-lp .feat-desc { font-size: 15px; line-height: 2; color: var(--text); }

/* ── HOW TO USE ── */
#st-lp .howto-bg { background: var(--deep); }
#st-lp .steps-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; max-width: 900px; margin: 0 auto;
}
#st-lp .step-card {
  background: var(--mid); overflow: hidden;
  transition: transform .3s; border: 1px solid rgba(201,169,110,.06);
}
#st-lp .step-card:hover { transform: translateY(-3px); }
#st-lp .step-img {
  background: rgba(255,255,255,.97);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  border-radius: 10px 10px 0 0;
}
#st-lp .step-img img { width: 100%; display: block; }
#st-lp .step-label { padding: 12px 16px 16px; font-size: 14px; color: var(--text); line-height: 1.7; }
#st-lp .step-label .step-num {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 13px; letter-spacing: .4em; color: var(--accent);
  text-transform: uppercase; display: block; margin-bottom: 4px;
}

/* ── COMBO ── */
#st-lp .combo-bg { background: var(--navy); }
#st-lp .combo-card {
  max-width: 780px; margin: 0 auto;
  background: linear-gradient(135deg,var(--mid),var(--deep));
  border: 1px solid rgba(201,169,110,.2);
  padding: 64px; text-align: center; position: relative;
}
#st-lp .combo-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201,169,110,.06); pointer-events: none; }
#st-lp .combo-eyebrow { font-family: 'Cormorant Garamond', serif !important; font-size: 13px; letter-spacing: .5em; color: var(--accent); text-transform: uppercase; margin-bottom: 20px; }
#st-lp .combo-title    { font-family: 'Noto Serif JP', serif !important; font-size: clamp(18px,3vw,30px); font-weight: 300; line-height: 1.7; margin-bottom: 28px; text-align: center; }
#st-lp .combo-body     { font-size: 15px; line-height: 2.2; color: var(--text); margin-bottom: 36px; text-align: center; }

/* ── CAUTION ── */
#st-lp .caut-bg   { background: var(--mid); padding: 72px 20px; }
#st-lp .caut-inner{ max-width: 780px; margin: 0 auto; border: 1px solid rgba(201,169,110,.1); padding: 48px; }
#st-lp .caut-title{ font-family: 'Cormorant Garamond', serif !important; font-size: 14px; letter-spacing: .45em; color: var(--accent); text-transform: uppercase; margin-bottom: 24px; text-align: center; }
#st-lp .caut-list { list-style: none; display: grid; gap: 10px; }
#st-lp .caut-list li { font-size: 15px; line-height: 1.85; color: var(--muted); padding-left: 18px; position: relative; }
#st-lp .caut-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); opacity: .5; }

/* ── CTA ── */
#st-lp .cta-bg {
  background: var(--deep); padding: 120px 20px; text-align: center;
  position: relative; overflow: hidden;
}
#st-lp .cta-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%,rgba(40,60,130,.4),transparent 60%);
}
#st-lp .cta-inner  { position: relative; z-index: 2; }
#st-lp .cta-italic { font-family: 'Cormorant Garamond', serif !important; font-style: italic; font-size: clamp(16px,2.5vw,20px); color: var(--text); margin-bottom: 36px; line-height: 1.8; text-align: center; }
#st-lp .cta-title  {
  font-family: 'Noto Serif JP', serif !important; font-size: clamp(26px,5vw,52px);
  font-weight: 300; line-height: 1.4; margin-bottom: 44px; text-align: center;
  background: linear-gradient(135deg,var(--white) 0%,var(--accent-light) 60%,var(--white) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#st-lp .cta-note    { color: var(--text); font-size: 16px; line-height: 2; margin-bottom: 48px; text-align: center; }
#st-lp .cta-contact { color: var(--muted); font-size: 14px; margin-top: 24px; letter-spacing: .1em; text-align: center; }

/* ── FOOTER ── */
#st-lp footer    { background: var(--deep); border-top: 1px solid rgba(201,169,110,.1); padding: 48px 20px; text-align: center; }
#st-lp .foot-logo{ font-family: 'Cormorant Garamond', serif !important; font-size: 20px; letter-spacing: .3em; color: var(--accent); margin-bottom: 16px; }
#st-lp .foot-info{ font-size: 14px; color: var(--muted); line-height: 2; }

/* ── SMALL UTILITY CLASSES ── */
#st-lp .dn-plus         { text-align: center; color: var(--accent); font-size: 20px; padding: 4px 0; }
#st-lp .sec-sub--features { margin-bottom: 52px; }
#st-lp .btn-ghost--flush  { margin: 0; }
#st-lp .btn-primary--large{ font-size: 16px; padding: 22px 64px; }

/* ── RESPONSIVE ── */
@media(max-width:860px){
  #st-lp .hero-photo   { background-image: url("../images/supporter/sp_hero-bg.jpeg"); }
  #st-lp .hero-content { padding: 0 32px 72px; }
  #st-lp .intro-grid, #st-lp .dn-grid { grid-template-columns: 1fr; gap: 40px; }
  #st-lp .dn-hero      { padding: 18px 14px 18px; margin: 28px auto 40px; border-radius: 22px; }
  #st-lp .dn-card-wrap { max-width: none; margin-left: 0; }
  #st-lp .feat-grid    { grid-template-columns: 1fr; }
  #st-lp .steps-grid   { grid-template-columns: repeat(2,1fr); }
  #st-lp .combo-card   { padding: 40px 24px; }
  #st-lp .caut-inner   { padding: 32px 20px; }
  #st-lp .scroll-hint  { display: none; }
  #st-lp .reason-caption { grid-template-columns: 1fr; }
  #st-lp .reason-panel   { padding: 8px; border-radius: 14px; }
}

@media(max-width:480px){
  #st-lp .steps-grid          { grid-template-columns: 1fr; }
  #st-lp .hero-headline .main { font-size: 36px; }
  #st-lp .section { padding: 60px 20px; }
  #st-lp .pain-item {
  padding: 30px 20px;
}
}