/* ==========================================================================
   琉々花（るるか）ファンサイト
   デザインシステム: デザイン/琉々花/ruruka-design-system.md 準拠
   モバイルファースト（375px基準 → 768px → 1024px）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. カスタムプロパティ
   -------------------------------------------------------------------------- */
:root {
  /* カラー */
  --color-main-pink: #FF7BAC;
  --color-heart-red: #FF4D6D;
  --color-blush-bg: #FFF0F5;
  --color-cream-bg: #FFF8EE;
  --color-white: #FFFFFF;
  --color-text-brown: #6B4A3A;
  --color-text-soft: #8A6F63;
  --color-text-muted: #B79E92;
  --color-gold: #FFC94D;           /* schedule.css（日程調整ページの△表示）で使用 */
  --color-gold-text: #6B4A00;      /* schedule.cssで使用（#946A00は4.5:1未達のため濃色化） */
  --color-pink-strong: #D6336C;    /* セカンダリ系ボタン文字・リンク（白地で4.5:1以上） */
  --color-lilac: #C9A6FF;
  --color-live-green: #4ADE80;
  --color-live-green-deep: #15803D; /* LIVEバッジ背景（白文字とのコントラスト確保用） */
  --color-heart-deep: #C9304F;      /* デビューバッジ文字・RURUKA表記（淡色背景とのコントラスト確保用） */
  --color-hairline-pink: #FFD6E5;

  /* グラデーション */
  --gradient-hero: linear-gradient(160deg, #FFD6E5 0%, #FFF0F5 45%, #FFF8EE 100%);
  --gradient-cta: linear-gradient(135deg, #E93578 0%, #C81E5B 100%); /* 白文字で全域4:1以上（旧 #FF7BAC→#FF4D6D は2.6:1で不足） */
  --gradient-placeholder: linear-gradient(135deg, #FFD1DC 0%, #FF8FAB 100%);

  /* フォント */
  --font-rounded: 'M PLUS Rounded 1c', sans-serif;
  --font-display: 'Zen Maru Gothic', sans-serif;
  --font-english: 'Fredoka', sans-serif;

  /* フォントサイズ（モバイル基準） */
  --fs-display: 32px;
  --fs-h1: 26px;
  --fs-h2: 22px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-badge: 12px;

  /* スペーシング */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-2xl: 80px;

  /* 角丸 */
  --radius-card: 24px;
  --radius-image: 20px;
  --radius-pill: 999px;

  /* 影 */
  --shadow-card: 0 10px 28px rgba(255, 123, 172, 0.12);
  --shadow-cta: 0 8px 20px rgba(255, 77, 109, 0.35);
  --shadow-gallery: 0 8px 20px rgba(255, 107, 157, 0.25);

  /* マーキー速度 */
  --marquee-speed-row1: 42s;
  --marquee-speed-row2: 58s;

  /* トランジション */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms ease;
  --transition-fade: 600ms var(--ease-soft);
}

/* --------------------------------------------------------------------------
   2. リセット・ベース
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden; /* はみ出し保険（マーキー全幅表示のため必須） */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* 固定ヘッダー60px + 余白16px（見出しが隠れない） */
}

body {
  padding-top: 60px; /* 固定ヘッダーの高さぶん */
  font-family: var(--font-rounded);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text-soft);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

ul,
ol {
  list-style: none;
}

a {
  color: var(--color-pink-strong);
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--color-heart-red);
  outline-offset: 2px;
}

.en {
  font-family: var(--font-english);
  font-weight: 500;
}

.u-nowrap {
  white-space: nowrap; /* 記号・絵文字の1文字孤立防止用 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2b. 固定ヘッダー・ナビゲーション
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; /* viewport基準（祖先にtransform/filterを置かないこと） */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* ライトボックス(200)より下 */
  height: 60px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-hairline-pink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(960px + 96px);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-text-brown);
}

.site-header__logo::before {
  content: "\2665";
  font-size: 12px;
  color: var(--color-main-pink);
  margin-right: 6px;
  vertical-align: 2px;
}

.site-header__nav-link {
  font-weight: 700;
  color: var(--color-text-brown);
  transition: color var(--transition-fast);
}

.site-header__nav-link:hover {
  color: var(--color-pink-strong);
}

/* バーガーボタン（背景透過・1pxの極細3本線）
   タップ領域は44×44pxを確保（線の見た目は28px幅のまま、paddingで拡大） */
.site-header__burger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-right: -8px; /* 線の右端をコンテナ端に揃える（見た目の位置は従来どおり） */
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-brown); /* 白ヘッダー背景に対して明示指定（コントラスト7.88:1） */
  z-index: 101; /* ドロワーより前面（開いた状態で×を表示） */
}

.site-header__burger span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開いた状態で×字に変形 */
.site-header__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__burger.is-open span:nth-child(2) {
  opacity: 0;
}

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

/* SP・タブレット: 右からスライドインするドロワー */
@media (max-width: 1023px) {
  .site-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;        /* viewport右端に固定（はみ出し事故防止） */
    width: 280px;
    max-width: 100vw;  /* 画面幅を超えない保険 */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background-color: var(--color-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(255, 123, 172, 0.18);
    z-index: 100;
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  .site-header__nav-link {
    font-size: 17px;
  }
}

/* オーバーレイ（SP・タブレットのみ可視） */
.site-header__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(107, 30, 55, 0.35); /* ピンク寄りの深色半透明でトーン統一 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

.site-header__overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* メニュー展開中は背景スクロールロック（ライトボックスとは別クラスで独立管理）
   html に overflow-x 指定があるため、ロックは html 側にも効かせる */
html.nav-open,
body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. レイアウト共通
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding: var(--space-xl) 0;
  text-align: center; /* 縦並び要素は横方向中央寄せ */
}

.section--white { background-color: var(--color-white); }
.section--blush { background-color: var(--color-blush-bg); }
.section--cream { background-color: var(--color-cream-bg); }

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text-brown);
  margin-bottom: var(--space-md);
}

.section__title::before {
  content: "\2665";
  display: block;
  font-size: 14px;
  color: var(--color-main-pink);
  margin-bottom: var(--space-xs);
}

.section__lead {
  margin-bottom: var(--space-lg);
}

.section--blush .section__lead,
.section--cream .section__lead {
  color: var(--color-text-brown); /* 淡色背景でもAAコントラスト確保 */
}

/* セクション区切り（ハート＋ドット罫線） */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.divider__dots {
  width: 48px;
  border-top: 2px dotted var(--color-hairline-pink);
}

.divider__heart {
  font-size: 16px;
  line-height: 1;
  color: var(--color-main-pink);
}

/* --------------------------------------------------------------------------
   4. ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-rounded);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.btn--primary {
  background: var(--gradient-cta);
  color: var(--color-white);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 77, 109, 0.45);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.3);
}

.btn--secondary {
  background-color: var(--color-white);
  border: 2px solid var(--color-main-pink);
  color: var(--color-pink-strong); /* #FF4D6Dは3.21:1で不足のため濃色化 */
}

.btn--secondary:hover {
  background-color: var(--color-blush-bg);
}

/* 小型ボタン（ガイドステップ内などの控えめな導線用・タップ領域44px確保） */
.btn--small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: var(--fs-small);
  padding: 8px 20px;
}

/* --------------------------------------------------------------------------
   6. ヒーロー
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(100svh, 640px);
  padding: var(--space-xl) 0;
  text-align: center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 40 C17 32.6 11.5 26 11.5 19.5 C11.5 14.3 15.6 10 20.8 10 C24.1 10 26.9 11.9 28 14.7 C29.1 11.9 32 10 35.2 10 C40.4 10 44.5 14.3 44.5 19.5 C44.5 26 39 32.6 28 40 Z' fill='%23FF7BAC' fill-opacity='0.12'/%3E%3C/svg%3E"),
    var(--gradient-hero);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.hero__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 0 0 4px var(--color-hairline-pink), 0 12px 30px rgba(255, 77, 109, 0.25);
  margin-bottom: var(--space-md);
}

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

.hero__en {
  font-family: var(--font-english);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--color-heart-deep); /* ヒーロー最暗部 #FFD6E5 上でも3:1以上 */
  margin-bottom: 4px;
}

.hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-text-brown);
}

.hero__kana {
  display: block;
  font-family: var(--font-rounded);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-text-soft);
  margin-top: 2px;
}

.hero__id {
  font-family: var(--font-english);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-soft);
  margin-top: var(--space-xs);
}

.hero__copy {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-text-brown);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* フロートハート装飾 */
.hero__heart {
  position: absolute;
  color: var(--color-main-pink);
  animation: float-heart 5s ease-in-out infinite;
}

.hero__heart--1 { top: 12%; left: 10%; font-size: 18px; opacity: 0.55; animation-duration: 4.5s; }
.hero__heart--2 { top: 22%; right: 12%; font-size: 14px; opacity: 0.7; animation-duration: 5.5s; animation-delay: 0.8s; }
.hero__heart--3 { bottom: 18%; left: 16%; font-size: 14px; opacity: 0.45; animation-duration: 6s; animation-delay: 1.4s; }
.hero__heart--4 { bottom: 10%; right: 14%; font-size: 20px; opacity: 0.5; animation-duration: 5s; animation-delay: 0.4s; }
.hero__heart--5 { display: none; top: 42%; left: 6%; font-size: 16px; opacity: 0.5; animation-duration: 5.2s; animation-delay: 1.8s; } /* PC専用（1024px〜で表示） */

@keyframes float-heart {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --------------------------------------------------------------------------
   7. カード
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  text-align: center;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-blush-bg);
  color: var(--color-main-pink);
  font-size: 18px;
  line-height: 1;
  margin: 0 auto var(--space-sm);
}

.card__title {
  font-family: var(--font-rounded);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-brown);
  margin-bottom: var(--space-md);
}

.card__text {
  margin-bottom: var(--space-md);
}

.card__note {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-soft); /* #B79E92は2.52:1で不足のため変更 */
  margin-top: var(--space-sm);
}

/* カード内のボタン・注記グループ（縦並び中央寄せ） */
.card__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.card__actions .card__note {
  margin-top: 0;
}

/* プロフィールカード（1枚構成・広い画面で間延びしない幅に） */
#profile .card {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* プロフィールリスト */
.profile-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 4px;
  border-bottom: 1px solid var(--color-hairline-pink);
  text-align: left;
}

.profile-list__row:last-child {
  border-bottom: none;
}

.profile-list__row dt {
  flex-shrink: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-soft); /* AAコントラスト確保（メインピンクは2.42:1で不足） */
}

.profile-list__row dt::before {
  content: "\2665";
  font-size: 10px;
  color: var(--color-main-pink); /* ピンクのアクセントは装飾記号側で担保 */
  margin-right: 6px;
}

.profile-list__row dd {
  font-weight: 500;
  color: var(--color-text-brown);
  text-align: right;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7b. 案内フォト（.guide-photo：本人写真＋手書き風ふきだし）
   ライブの見方カード / コインチャージCTA で本人が「案内・お礼」をする演出。
   既存のCSS変数・トーンを流用し、追加は最小限。
   -------------------------------------------------------------------------- */

/* 案内フォト付きカードの見出し（アイコン＋タイトルを横並び維持でレイアウト崩れ防止） */
.card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.card__head .card__icon {
  margin: 0;
}

.card__head .card__title {
  margin-bottom: 0;
}

.guide-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guide-photo--live,
.guide-photo--support {
  margin: 0 auto var(--space-md);
}

.guide-photo__frame {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-hairline-pink), 0 8px 20px rgba(255, 77, 109, 0.25);
}

.guide-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 顔が中心にくるようトリミング位置を写真ごとに調整 */
.guide-photo--live .guide-photo__frame img { object-position: 50% 26%; }
.guide-photo--support .guide-photo__frame img { object-position: 56% 30%; }

/* ハート型マスク（コインチャージCTA用）
   clipPathUnits="objectBoundingBox" のSVGを参照するため要素サイズに追従してスケール。
   border/box-shadowはハート輪郭に沿わないので、白フチは padding+白背景、
   グローは filter: drop-shadow でシルエットに沿わせて再現する。 */
.guide-photo__frame--heart {
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 5px;
  background-color: var(--color-white);
  box-shadow: none;
  -webkit-clip-path: url(#guideHeartClip);
  clip-path: url(#guideHeartClip);
  filter: drop-shadow(0 6px 16px rgba(255, 77, 109, 0.3));
}

.guide-photo__frame--heart img {
  -webkit-clip-path: url(#guideHeartClip);
  clip-path: url(#guideHeartClip);
}

/* 手書き風ふきだし（純装飾・HTML側で aria-hidden） */
.guide-photo__bubble {
  position: relative;
  margin-top: 10px;
  max-width: 100%;
  padding: 8px 14px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-hairline-pink);
  border-radius: 16px 16px 4px 16px;
  font-family: var(--font-rounded);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-pink-strong); /* 白地で4.5:1以上（heart-redは3.2:1で不足） */
  text-align: center;
  transform: rotate(-2deg);
  box-shadow: 0 4px 10px rgba(255, 123, 172, 0.15);
}

/* タブレット以上: コインCTAのハート写真を少し大きく */
@media (min-width: 768px) {
  .guide-photo--support .guide-photo__frame {
    width: 120px;
    height: 120px;
  }
}

/* デスクトップ(1024px〜): ライブの見方カードのみ写真を右上に浮かせる。
   768〜1023pxは3ステップが横並びで幅が足りず吹き出しがステップに重なるため、
   float は 1024px以上に限定し、それ未満は通常フロー（カード上部中央）に積む。 */
@media (min-width: 1024px) {
  .card--guide {
    position: relative;
    padding-top: 28px;
  }

  .guide-photo--live {
    position: absolute;
    top: -18px;
    right: 8px;
    margin: 0;
    z-index: 2;
  }

  .guide-photo--live .guide-photo__frame {
    width: 104px;
    height: 104px;
  }

  .guide-photo--live .guide-photo__bubble {
    margin-top: 8px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   8. マーキーギャラリー（最重要コンポーネント）
   -------------------------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.marquee__row {
  display: flex;
  width: max-content;
}

/* 各セットに末尾ギャップ分の padding を持たせ、-50% ループのつなぎ目を消す */
.marquee__set {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}

.marquee__row--top {
  animation: marquee-left var(--marquee-speed-row1) linear infinite;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  width: 165px;
  height: 220px; /* 縦長3:4（実写真 720×960 / 540×960 前提） */
  flex-shrink: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-gallery);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

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

/* タップ拡大用ボタン（見た目は画像そのまま） */
.marquee__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* マーキー直下のInstagram誘導CTA（セクションのtext-align centerで中央寄せ） */
.gallery__cta {
  margin-top: var(--space-lg); /* マーキーとの余白バランス */
}

/* hover可能デバイスのみ: 段の一時停止＋個別拡大 */
@media (hover: hover) {
  .marquee__row:hover {
    animation-play-state: paused;
  }

  .marquee__item:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px var(--color-main-pink), 0 10px 24px rgba(255, 77, 109, 0.3);
  }
}

/* --------------------------------------------------------------------------
   8a. ライトボックス（ギャラリー画像の拡大表示）
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(107, 30, 55, 0.78); /* 黒ではなくピンク寄りの深色で世界観を維持 */
}

.lightbox__body {
  position: relative;
  z-index: 1;
  margin: 0;
}

.lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-image);
  border: 4px solid var(--color-white);
  background-color: var(--color-white);
  box-shadow: 0 20px 60px rgba(60, 10, 25, 0.45);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-pink-strong);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

/* 表示中: 背景スクロールロック＋マーキー一時停止
   html に overflow-x 指定があるため、ロックは html 側にも効かせる */
html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
}

body.lightbox-open .marquee__row {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   8b. 最新の投稿（TikTok公式クリエイター埋め込み）
   -------------------------------------------------------------------------- */
.tiktok-embed-wrap {
  display: flex;
  justify-content: center;
}

/* embed.js 実行前の blockquote（フォールバック表示）と実行後の iframe 両方に適用 */
.tiktok-embed-wrap .tiktok-embed,
.tiktok-embed-wrap iframe {
  margin: 0 auto !important;
  width: 100%;
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* embed.js がブロック・失敗してもリンクが見える状態を維持 */
.tiktok-embed-wrap blockquote.tiktok-embed {
  padding: var(--space-md);
}

.tiktok-embed-wrap blockquote.tiktok-embed a {
  font-family: var(--font-english);
  font-weight: 600;
  text-decoration: underline;
}

.tiktok-embed-fallback {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-brown);
  margin-top: var(--space-sm);
}

.tiktok-embed-fallback a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. ライブ情報
   -------------------------------------------------------------------------- */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-english);
  font-size: var(--fs-badge);
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--color-live-green-deep); /* #4ADE80は白文字と1.74:1で不足のため濃緑に */
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-white);
  animation: live-blink 1.4s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.schedule__main {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-brown);
  margin-bottom: var(--space-sm);
}

.schedule__sub {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* LIVEのみかたガイド */
.guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.guide__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.guide__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   10. 応援する / SNS
   -------------------------------------------------------------------------- */
.support-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-cards .card {
  margin-bottom: 0;
}

/* コインチャージ導線（主役級CTA・ライブ中の口頭案内用） */
.coin-cta {
  max-width: 560px;
  margin: var(--space-lg) auto 0;
  padding: 28px 20px;
  border-radius: var(--radius-card);
  background: var(--gradient-hero);
  border: 2px solid var(--color-main-pink);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.coin-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: var(--shadow-cta);
  font-size: 28px;
  line-height: 1;
}

.coin-cta__title {
  font-family: var(--font-rounded);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-brown);
  margin-bottom: var(--space-xs);
}

.coin-cta__lead {
  font-weight: 500;
  color: var(--color-pink-strong);
  margin-bottom: var(--space-md);
}

/* 2ステップの図解（① チャージ → ② ギフト） */
.coin-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.coin-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  max-width: 160px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-brown);
}

.coin-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.coin-steps__arrow {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--color-main-pink);
  line-height: 1;
}

.coin-cta__btn {
  width: 100%;
  max-width: 340px;
}

/* 「なんでWebからだとお得なの？」折りたたみ（details/summary・ネイティブでキーボード対応）
   coin-cta の地はグラデーションで #D6336C が4.5:1に届かないため、
   summary・回答とも白地に載せてAAを確保する */
.coin-cta__details {
  margin-top: var(--space-sm);
}

.coin-cta__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* タップ領域44px以上 */
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-hairline-pink);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-pink-strong); /* 白地で4.5:1以上 */
  cursor: pointer;
  list-style: none; /* デフォルト三角マーカーを消す（下のシェブロンで代替） */
  transition: background-color var(--transition-fast);
}

.coin-cta__summary::-webkit-details-marker {
  display: none; /* Safari旧系のデフォルトマーカー */
}

.coin-cta__summary:hover {
  background-color: var(--color-blush-bg);
}

/* 開閉シェブロン（閉: 下向き / 開: 上向き） */
.coin-cta__summary::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.coin-cta__details[open] .coin-cta__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.coin-cta__answer {
  max-width: 420px;
  margin: var(--space-sm) auto 0;
  padding: 14px 18px;
  border-radius: 16px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-hairline-pink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-soft); /* 白地で4.5:1以上（本文と同色） */
  text-align: left; /* 長文説明のみ可読性優先（ボックス自体は中央寄せ） */
  overflow-wrap: anywhere;
}

.sns-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  max-width: 360px;
  min-height: 56px;
  padding: 8px 20px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

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

.sns-btn--tiktok {
  background-color: #111111;
  color: var(--color-white);
  border: 2px solid var(--color-main-pink);
}

.sns-btn--instagram {
  background-color: var(--color-white);
  color: var(--color-pink-strong); /* 白地で4.5:1以上 */
  border: 2px solid var(--color-main-pink);
}

.sns-btn--instagram:hover {
  background-color: var(--color-blush-bg);
}

.sns-btn__icon {
  flex-shrink: 0;
}

.sns-btn__id {
  font-size: var(--fs-small);
  font-weight: 500;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-blush-bg);
  padding: var(--space-lg) 0;
  text-align: center;
}

.footer__heart {
  font-size: 16px;
  line-height: 1;
  color: var(--color-main-pink);
  margin-bottom: var(--space-xs);
}

.footer__copy {
  font-weight: 700;
  color: var(--color-text-brown);
}

.footer__note {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-brown); /* blush背景でAAコントラスト確保 */
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   12. フェードイン演出（JS併用・JSなしでも表示される）
   -------------------------------------------------------------------------- */
html.js .js-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-fade), transform var(--transition-fade);
}

html.js .js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   13. レスポンシブ（768px〜 / 1024px〜）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .container {
    max-width: calc(680px + 80px);
    padding-left: 40px;
    padding-right: 40px;
  }

  .section__title {
    font-size: 24px;
  }

  .hero__photo {
    width: 160px;
    height: 160px;
  }

  .marquee__item {
    width: 240px;
    height: 320px; /* 1段構成のため存在感を少し上げる（3:4維持） */
  }

  .support-cards {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }

  .support-cards .card {
    flex: 1;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .support-cards .card .card__actions {
    margin-top: auto; /* カードの高さが揃うようアクショングループを下寄せ */
  }

  .guide {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-sm); /* 768pxで各ステップ幅を確保（20px→12px） */
  }

  .guide__step {
    flex: 1;
    max-width: 220px; /* 「プロフィールのベルマークから」が1行で収まる幅 */
  }

  .guide__step p {
    font-size: 14px; /* 768〜1023pxはカード内が狭いため折り返し破綻防止で縮小 */
  }

  .sns-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .sns-btn {
    max-width: 300px;
  }
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 80px; /* ヘッダー64px + 余白16px */
  }

  body {
    padding-top: 64px;
  }

  .site-header {
    height: 64px;
  }

  .site-header__inner {
    padding: 0 48px;
  }

  /* 横並びナビ */
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .site-header__nav-link {
    font-size: 14px;
  }

  .site-header__burger {
    display: none;
  }

  .site-header__overlay {
    display: none;
  }

  .container {
    max-width: calc(960px + 96px);
    padding-left: 48px;
    padding-right: 48px;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .section__title {
    font-size: 26px;
  }

  .hero__photo {
    width: 260px; /* PCの余白が間延びしないよう拡大 */
    height: 260px;
  }

  .hero__name {
    font-size: 32px;
  }

  /* PCではフロートハートを1つ追加し、サイズも少し大きく（計5個・デザインMDの3〜5個の範囲内） */
  .hero__heart--5 {
    display: block;
  }

  .hero__heart--1 { font-size: 24px; left: 16%; }
  .hero__heart--2 { font-size: 18px; right: 18%; }
  .hero__heart--3 { font-size: 18px; left: 22%; }
  .hero__heart--4 { font-size: 26px; right: 20%; }

  .hero__copy {
    font-size: 40px;
  }

  .guide {
    gap: var(--space-md); /* 1024px〜は幅に余裕があるため戻す */
  }

  .guide__step p {
    font-size: var(--fs-body);
  }
}

@media (min-width: 1280px) {
  .marquee__item {
    width: 300px;
    height: 400px; /* 1段構成の大画面で帯の存在感を出す（3:4維持） */
  }
}

/* --------------------------------------------------------------------------
   14. prefers-reduced-motion 対応
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header__nav,
  .site-header__overlay,
  .site-header__burger span,
  .site-header__nav-link {
    transition: none;
  }

  .marquee__row--top {
    animation: none;
  }

  /* 静止表示＋横スクロール可能なリストに切り替え */
  .marquee__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 複製セットは重複になるため非表示 */
  .marquee__set--dup {
    display: none;
  }

  .hero__heart {
    animation: none;
  }

  .live-badge__dot {
    animation: none;
  }

  html.js .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .sns-btn,
  .marquee__item,
  .coin-cta__summary,
  .coin-cta__summary::after {
    transition: none;
  }

  .btn--primary:hover,
  .sns-btn:hover {
    transform: none;
  }
}