/* 月夜の編集室 — LINE 友だち獲得 LP（モバイル第一・640px 中央 1 カラム）。
   デザインは 5 枚の焼き込み済みモバイル縦画像が担う（hero / value / nightly / deeper / footer）。
   ★CTA は画像に重ねない。画像と画像の「間」に単色フルワイドの CTA 帯を挟む。
     - 主役は全て LINE 緑の「無料でLINE診断をはじめる」。deeper 直後だけ控えめなゴールド枠線。
     - 帯色が縦スクロールのメリハリ（句読点）になる。装飾的な背景・グラデ・カードは作らない。
     - 価格・Pay.jp・¥表記は LP に置かない（課金は診断後に LINE 内で行う想定）。 */

:root {
  --gold: #c9a24a;          /* ゴールド枠線（控えめサブ CTA） */
  --line-green: #06c755;    /* LINE 緑帯（主役 CTA） */
  --soft-band: #161327;     /* 控えめ帯 = 夜色（deeper 直後） */
  --ink: #0b0a18;
  --ivory: #efe9da;
  --ivory-soft: #cfc7b8;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory-soft);
  font-family: var(--mincho);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== 薄シェル：640px 中央 1 カラムに画像と帯を縦積み ===== */
.shell {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

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

/* ===== 画像：width:100% / display:block で縦積み（重ねない） ===== */
.band-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CTA 帯：単色フルワイド。画像と画像の間に挟む句読点 ===== */
.cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7em;
  padding: 1.6em 1.4em;
}

/* 帯の色＝縦スクロールのメリハリ（主役は LINE 緑、控えめ帯だけ夜色） */
.cta--line { background: var(--line-green); }   /* LINE 緑（主役） */
.cta--soft { background: var(--soft-band); }    /* 夜色（控えめサブ CTA） */

/* ===== ボタン（tap ターゲット 44px 以上・文字は Mincho） ===== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(0.98rem, 4.2vw, 1.15rem);
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 999px;
  padding: 0.85em 1.3em;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* 主役 CTA：LINE 緑帯の中の白ボタン（緑地に白で十分なコントラスト・整合自明） */
.btn--line {
  background: #fff;
  color: #06893b;
}

/* 控えめサブ CTA：ゴールド枠線ボタン（地は透明・deeper 直後の夜色帯に乗る） */
.btn--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 500;
}

/* 帯の微小注記（友だち追加0円・30秒 など） */
.cta__note {
  margin: 0;
  text-align: center;
  font-size: clamp(0.74rem, 3vw, 0.84rem);
  color: rgba(255, 255, 255, 0.92);
}

/* フッター帯の法令リンク */
.cta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 0.9em;
  margin-top: 0.4em;
}
.cta__links a {
  color: #fff;
  font-size: clamp(0.68rem, 3vw, 0.8rem);
  line-height: 1.3;
  white-space: nowrap;          /* 各リンクは折り返さず、リンク間でのみ wrap させる */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta__links a:hover { color: #eafff1; }

/* 控えめ帯（夜色）に乗る無料サブコピー */
.cta__note--soft { color: var(--ivory-soft); }

/* ===== 無料の価値サンプル（H6）：診断で毎晩届くお告げを 1 つ実テキストで露出 =====
   課金導線ではない。装飾は最小限・夜色地に金の細罫で「読み物」感だけを出す。 */
.sample {
  margin: 0;
  padding: 1.8em 1.5em 2em;
  background: var(--soft-band);
  color: var(--ivory-soft);
}
.sample__label {
  margin: 0 0 0.9em;
  font-family: var(--mincho);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: clamp(0.82rem, 3.4vw, 0.95rem);
  color: var(--gold);
}
.sample__quote {
  margin: 0;
  padding: 0 0 0 1em;
  border-left: 2px solid rgba(201, 162, 74, 0.5);
}
.sample__quote p {
  margin: 0 0 0.7em;
  font-family: var(--mincho);
  font-size: clamp(0.95rem, 4vw, 1.08rem);
  line-height: 1.85;
  color: var(--ivory);
}
.sample__quote p:last-child { margin-bottom: 0; }
.sample__note {
  margin: 1em 0 0;
  font-family: var(--mincho);
  font-size: clamp(0.8rem, 3.2vw, 0.9rem);
  line-height: 1.7;
  color: var(--ivory-soft);
}

/* =====================================================================
   繊細な動く魔法（CSS のみ・transform / opacity / filter で完結）
   ---------------------------------------------------------------------
   - レイアウト・テキスト・CTA 位置・タップ領域は一切変えない（演出は重ねるだけ）。
   - prefers-reduced-motion: reduce が既定の安全側。アニメは
     @media (prefers-reduced-motion: no-preference) の中だけに置く。
   - reveal の初期非表示は html.js（= motion 許可時のみ JS が付与）下だけで効く。
     JS 無し・reduced-motion 時は画像はそのまま表示され、CLS は発生しない。
   ===================================================================== */

/* ----- HERO ラッパ：動画の上にグロー・微粒子・shimmer・タイトルを重ねる舞台 ----- */
.hero {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;          /* cover した動画が外にはみ出さない */
  isolation: isolate;        /* z-index をこのスタッキング文脈に閉じる */
  background: var(--ink);    /* 動画読込前の地色（チラつき防止） */
  /* モバイル第一：焼き込みヒーロー(m-01・3:4・テキスト焼き込み)を全表示。
     aspect-ratio で枠を画像比に合わせ、cover でトリミングなく文字も全部見せる。 */
  aspect-ratio: 3 / 4;
}

/* 動画背景：枠を埋めて cover、月＝上寄りを基準に見せる */
.hero__video,
.hero__fallback,
.hero__fallback img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;  /* 焼き込みヒーローを上下中央＝全表示（文字は上部にあるので切らない） */
}

/* fallback 静止画（<picture> ラッパ）：既定は隠す（video が表示される）。
   video 非対応ブラウザでは <video> 内の <source> が無視され、隣の <picture> が出る。
   reduced-motion 時は明示的に表示する（後述）。 */
.hero__fallback {
  display: none;
}

/* hero 軽量テキスト overlay：画像/動画が出ない時の白紙回避 + SEO。
   演出層と同じく pointer-events:none で直下 CTA の操作を奪わない。 */
.hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0 1.4em clamp(1.4em, 6vh, 2.4em);
  text-align: center;
  pointer-events: none;
}
.hero__caption-brand {
  font-family: var(--mincho);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  font-size: clamp(0.72rem, 3vw, 0.88rem);
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.hero__caption-line {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  line-height: 1.4;
  color: var(--ivory);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
}

/* 蝋燭グロー：暖色の放射状を画面中央やや下に重ねる。
   ★動画自体が蝋燭の炎で既に明滅するため、二重に明るくしないよう控えめにする
   （脈動アニメは外し、薄い静的グローのみ。詳細は no-preference ブロック参照）。 */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 110%;
  height: 76%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(255, 196, 112, 0.26) 0%,
    rgba(255, 170, 80, 0.14) 38%,
    rgba(255, 150, 60, 0) 72%
  );
  mix-blend-mode: screen;    /* 夜色の上で発光らしく加算される */
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}

/* ----- HTML タイトル overlay：動画の上で鮮明に読ませる ----- */
.hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;                /* dust(2)・shimmer(1)・glow(1) より前面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55em;
  padding: clamp(2.2em, 12vh, 4.4em) 1.4em clamp(1.6em, 7vh, 2.6em);
  pointer-events: none;      /* 演出層と同じく操作を奪わない（直下に CTA） */
}

/* 上下の暗い scrim：動画が動いても文字が常に読める保険（タイトル背後のみ濃く） */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(11, 10, 24, 0.82) 0%,
    rgba(11, 10, 24, 0.62) 30%,
    rgba(11, 10, 24, 0.28) 62%,
    rgba(11, 10, 24, 0) 100%
  );
  pointer-events: none;
}

.hero__kicker {
  font-family: var(--mincho);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;       /* letter-spacing の右余白ぶんを視覚的に中央へ戻す */
  font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.hero__headline {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.85rem, 8.4vw, 3.1rem);
  line-height: 1.32;
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78), 0 0 30px rgba(201, 162, 74, 0.22);
}

.hero__subline {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(0.92rem, 4vw, 1.12rem);
  line-height: 1.6;
  color: var(--ivory);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
  max-width: 22em;
}

/* 金の微粒子（floating dust）：小さな半透明の円を上昇＋フェード */
.hero__dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.mote {
  position: absolute;
  bottom: -6%;               /* 画面下から湧き上がる */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 160, 0.95), rgba(255, 200, 110, 0));
  opacity: 0;                /* 既定は不可視（動かない時に点が散らない） */
  will-change: transform, opacity;
}
/* 個体差：位置・サイズ・速度・遅延をばらして自然な揺らぎに */
.mote--1 { left: 12%; width: 5px;  height: 5px; }
.mote--2 { left: 26%; width: 8px;  height: 8px; }
.mote--3 { left: 41%; width: 4px;  height: 4px; }
.mote--4 { left: 55%; width: 9px;  height: 9px; }
.mote--5 { left: 68%; width: 6px;  height: 6px; }
.mote--6 { left: 80%; width: 5px;  height: 5px; }
.mote--7 { left: 91%; width: 7px;  height: 7px; }

/* タイトル帯の金 shimmer：一筋の光が上部をサッと横切る（10s 間隔・控えめ） */
.hero__shimmer {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;                   /* タイトル/タグライン焼き込み帯の高さ目安 */
  height: 26%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;                /* 既定は不可視 */
  background: linear-gradient(
    100deg,
    rgba(255, 240, 200, 0) 38%,
    rgba(255, 240, 205, 0.5) 50%,
    rgba(255, 240, 200, 0) 62%
  );
  background-size: 220% 100%;
  background-position: 180% 0;
  mix-blend-mode: screen;
}

/* ----- スクロール fade-up（reveal）：初期非表示は motion 許可 JS 下だけ ----- */
.reveal { will-change: auto; }

/* =====================================================================
   アニメ本体：prefers-reduced-motion: no-preference の時だけ有効化。
   reduce 指定（または未指定で OS が reduce）では下記は一切適用されない。
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ★Ken-Burns は廃止：動きは動画（ゆっくり寄り）が担うため二重演出にしない。 */

  /* parallax は親 .hero に当てる（motion.js が transform を書き込む先） */
  .hero { will-change: transform; }

  /* ★蝋燭の脈動は廃止：動画の炎が既に明滅するため、グローは静的・控えめに据え置く
     （二重明滅でチカチカするのを避ける）。 */

  /* 微粒子：上昇＋フェード。個体ごとに duration / delay を変えて散らす */
  .mote { animation: moteRise 13s linear infinite; }
  .mote--1 { animation-duration: 14s; animation-delay: 0s;    }
  .mote--2 { animation-duration: 18s; animation-delay: -3s;   }
  .mote--3 { animation-duration: 11s; animation-delay: -6s;   }
  .mote--4 { animation-duration: 20s; animation-delay: -1.5s; }
  .mote--5 { animation-duration: 15s; animation-delay: -8s;   }
  .mote--6 { animation-duration: 17s; animation-delay: -4.5s; }
  .mote--7 { animation-duration: 12s; animation-delay: -10s;  }

  /* 金 shimmer：一筋が横切り、その後ほぼ静止（10s 周期で一瞬だけ） */
  .hero__shimmer {
    animation: titleShimmer 10s ease-in-out infinite;
  }

  /* reveal：JS が html.js を付けた時のみ初期を隠し、可視で立ち上がる */
  html.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* CTA ボタンの微発光（ホバー/タップ） */
  .btn--line:hover,
  .btn--line:active {
    box-shadow: 0 6px 22px rgba(6, 199, 85, 0.45);
  }
  .btn--ghost:hover,
  .btn--ghost:active {
    box-shadow: 0 0 18px rgba(201, 162, 74, 0.35);
    filter: brightness(1.08);
  }

  /* LINE 緑ボタンの穏やかな脈動グロー（2.5s・視線誘導・控えめ）。
     ★M11: 脈動は hero 直後の主役 CTA 1 つ（[data-pulse]）だけに限定。
       他の緑/ゴールド CTA は静かに据え置く（点滅の安っぽさ=AI 臭を回避）。 */
  .btn--line[data-pulse] {
    animation: linePulse 2.5s ease-in-out infinite;
  }
  /* 操作中は脈動を止めてホバー発光を優先 */
  .btn--line[data-pulse]:hover,
  .btn--line[data-pulse]:active { animation: none; }
}

/* =====================================================================
   reduced-motion：動きを嫌うユーザーには動画を止め、静止画 + タイトルを出す。
   - .hero__video を display:none（再生も DL も止める意図）。
   - .hero__fallback（同じ祭壇の静止画）を表示 → これが LCP 要素になる。
   - HTML タイトル overlay（.hero__copy）は両モードで表示され続ける。
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__fallback { display: block; }
}

/* 下から上へ。中盤でフェードインし、上端でフェードアウト。
   横にもわずかに漂わせて機械的な直線上昇を避ける。 */
@keyframes moteRise {
  0%   { transform: translate3d(0, 0, 0) scale(0.9);        opacity: 0; }
  12%  {                                                    opacity: 0.85; }
  50%  { transform: translate3d(10px, -52vh, 0) scale(1);   opacity: 0.7; }
  88%  {                                                    opacity: 0.3; }
  100% { transform: translate3d(-8px, -104vh, 0) scale(0.85); opacity: 0; }
}

/* 一筋の光：周期の最初の ~12% で横切り、残りは透明で待機 */
@keyframes titleShimmer {
  0%   { background-position: 180% 0;  opacity: 0; }
  3%   {                                opacity: 0.9; }
  12%  { background-position: -80% 0;   opacity: 0; }
  100% { background-position: -80% 0;   opacity: 0; }
}

@keyframes linePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 16px rgba(255, 255, 255, 0.55); }
}

/* =====================================================================
   法令ページ（特商法 / プライバシーポリシー / 週まとめ下書き）の文書スタイル。
   LP 本体（焼き込み画像）とは別に、読みやすい夜色の記事レイアウトを与える。
   ===================================================================== */
.shell--article {
  max-width: 720px;
  padding: 2.4em 1.4em 4em;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.6em;
  font-family: var(--mincho);
  font-size: 0.9rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 74, 0.4);
  padding-bottom: 2px;
}
.back-link:hover { color: #e3c573; border-bottom-color: rgba(201, 162, 74, 0.8); }

.article {
  font-family: var(--mincho);
  color: var(--ivory-soft);
  line-height: 1.9;
}
.article p { margin: 0 0 1.2em; }
.article h1,
.legal-title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.45;
  color: var(--ivory);
  margin: 0.2em 0 1em;
}
.article h2 {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.4vw, 1.3rem);
  color: var(--gold);
  margin: 2em 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(201, 162, 74, 0.28);
}
.article h3 {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.12rem);
  color: var(--ivory);
  margin: 1.6em 0 0.5em;
}
.brand {
  font-family: var(--mincho);
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 0.6em;
}
.brand--small { font-size: 0.85rem; }
.lead {
  font-size: clamp(1.02rem, 4.2vw, 1.18rem);
  color: var(--ivory);
}

/* 特商法・プライバシーの定義リスト */
.legal-list { margin: 1.6em 0 0; }
.legal-row {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 0.4em 1.2em;
  padding: 1em 0;
  border-bottom: 1px solid rgba(207, 199, 184, 0.14);
}
.legal-row dt {
  font-weight: 600;
  color: var(--ivory);
}
.legal-row dd { margin: 0; }
.legal-prices { margin: 0; padding-left: 1.2em; }
.legal-prices li { margin: 0 0 0.4em; }
.legal-note {
  display: block;
  margin-top: 0.6em;
  font-size: 0.85rem;
  color: rgba(207, 199, 184, 0.78);
}
.legal-pending { color: rgba(207, 199, 184, 0.7); }
.article a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: #e3c573; }

@media (max-width: 480px) {
  .legal-row { grid-template-columns: 1fr; gap: 0.2em; }
  .legal-row dt { color: var(--gold); }
}

/* プライバシーポリシー本文（番号付き条項） */
.privacy { margin-top: 2.6em; }
.privacy ol { margin: 0.4em 0 1.2em; padding-left: 1.4em; }
.privacy ol li { margin: 0 0 0.5em; }
.privacy ul { margin: 0.4em 0 1.2em; padding-left: 1.4em; }
.privacy ul li { margin: 0 0 0.4em; }

/* 週まとめ下書き（report-draft）の最小スタイル */
.article__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1.4em;
}
.offer-list { margin: 0.5em 0 1.4em; padding-left: 1.3em; }
.offer-list li { margin: 0 0 0.45em; }
.paywall-preview {
  margin-top: 1.8em;
  padding: 1.4em 1.3em;
  background: var(--soft-band);
  border-radius: 10px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 1em;
  padding: 0.7em 1.4em;
  font-family: var(--mincho);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}
.button--primary { background: var(--gold); color: var(--ink); }
.site-footer {
  max-width: 720px;
  margin: 2em auto 0;
  padding: 1.6em 1.4em 3em;
  text-align: center;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.2em;
}
.site-footer__links a {
  color: var(--gold);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__copy {
  margin-top: 0.9em;
  font-size: 0.8rem;
  color: rgba(207, 199, 184, 0.7);
}