/* =========================================================
   LPデザインの型「スワイプ」
   元: リベンジイングリッシュ nostudy（swypely製・画像4枚のスワイプLP）を、画像から読み取ってHTML/CSSにしたもの。
   スマホ1画面（縦9:16）を1枚ずつ上下にめくる。暗い背景に白い太字、左寄せ、字間広め。
   色・書体はここ（:root）が正本。
   ========================================================= */
:root {
  --text: #fff;
  --line: #06c755;          /* ボタン（LINEの緑） */
  --line-deep: #04a345;
  --slide-w: min(100vw, 480px); /* 本文の幅。パソコンでは480pxの縦長の列 */
  --pad: clamp(18px, calc(var(--slide-w) * .055), 32px);
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 文字の大きさは1枚の幅に合わせて決まる（画像のときと同じ比率） */
  --xl: calc(var(--slide-w) * .077);
  --l: calc(var(--slide-w) * .068);
  --m: calc(var(--slide-w) * .046);
  --s: calc(var(--slide-w) * .0425);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #0b1220; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
p, ol, ul { margin: 0; padding: 0; list-style: none; }

/* パソコンで見たとき、枠の外は今の背景をぼかして敷く */
body::before {
  content: ""; position: fixed; inset: -40px; z-index: -1; filter: blur(30px) brightness(.6);
  background: var(--page-bg, linear-gradient(#0d2236, #2c6a8f));
}

/* ---------- 縦に並べる（スワイプではなく、ふつうにスクロール） ---------- */
.deck { width: var(--slide-w); margin: 0 auto; }
.slide {
  position: relative; min-height: calc(var(--slide-w) * 16 / 9); overflow: hidden;
  display: flex; flex-direction: column; padding: calc(var(--pad) * 1.6) var(--pad) calc(var(--pad) * 1.4);
  background: var(--bg); isolation: isolate;
}
.slide::after { /* 写真を使うときだけ、暗く敷く */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--photo-on, 0);
  background: linear-gradient(rgba(5, 12, 24, .55), rgba(5, 12, 24, .7)), var(--photo, none) center / cover;
}
.slide[style*="--photo"] { --photo-on: 1; }
.slide__in { flex: 1; display: flex; flex-direction: column; gap: calc(var(--slide-w) * .05); }

/* ---------- 文字（3つの大きさだけ） ---------- */
.t-xl, .t-l, .t-m, .t-s, .flow li, .dots li, .t-down {
  letter-spacing: .1em; line-height: 1.45; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); font-feature-settings: "palt" 0;
}
.t-xl { font-size: var(--xl); font-weight: 900; line-height: 1.4; }
.t-l { font-size: var(--l); font-weight: 900; }
.t-m { font-size: var(--m); font-weight: 700; line-height: 1.65; }
.t-s { font-size: var(--s); font-weight: 700; line-height: 1.65; }
.t-m b { font-weight: 900; padding: 0 .1em; }

/* よくある順番：↓でつなぐ */
.flow { display: flex; flex-direction: column; gap: calc(var(--slide-w) * .01); }
.flow li { font-size: var(--l); font-weight: 900; }
.flow li:not(:last-child)::after { content: "↓"; display: block; margin: calc(var(--slide-w) * .008) 0 0; font-weight: 700; }

/* 箇条書き：・ */
.dots li { position: relative; padding-left: 1.1em; font-size: var(--m); font-weight: 700; line-height: 1.6; }
.dots li + li { margin-top: .3em; }
.dots li::before { content: "・"; position: absolute; left: 0; }

/* ▼ 次の行動へ ▼ */
.t-down { text-align: center; font-size: var(--l); font-weight: 900; letter-spacing: .04em; }
.t-down::before { content: "▼ "; } .t-down::after { content: " ▼"; }

/* ---------- ボタン ---------- */
.cta { padding-top: calc(var(--pad) * .6); }
.btn {
  position: relative; display: block; overflow: hidden; padding: 1.05em 1em; border-radius: 999px; text-align: center; text-decoration: none;
  background: var(--line); color: #fff; font-weight: 900; font-size: calc(var(--slide-w) * .042); letter-spacing: .04em;
  box-shadow: 0 6px 0 var(--line-deep), 0 10px 24px rgba(0, 0, 0, .3);
}
.btn--shine::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn--shake { animation: shake 3s ease-in-out infinite; }
@keyframes shake { 0%, 84%, 100% { transform: none; } 87% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 93% { transform: rotate(-2deg); } 96% { transform: rotate(1deg); } }

.hint, .progress { display: none !important; }
.hint-old { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; opacity: .6; letter-spacing: .2em; animation: hint 1.6s ease-in-out infinite; }
.hint::before { content: "︿"; display: block; font-size: 14px; line-height: .6; }
@keyframes hint { 50% { transform: translateY(-4px); } }

/* ---------- 右側の進み具合 ---------- */
.progress { position: fixed; top: 50%; right: max(6px, calc(50vw - var(--slide-w) / 2 + 6px)); width: 3px; height: 30vh; transform: translateY(-50%); border-radius: 3px; background: rgba(255, 255, 255, .25); }
.progress i { display: block; width: 100%; height: 0; border-radius: 3px; background: #fff; transition: height .3s; }

/* ---------- 背景（写真なしで作る4種類） ---------- */
/* 夕暮れ＋山：上は濃い紺、下へ青緑。下に岩山のシルエット */
.bg-dusk {
  --bg:
    linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .15)),
    linear-gradient(180deg, #0c1d2c 0%, #12425a 45%, #3d7d95 78%, #7fa9b6 100%);
  --page-bg: linear-gradient(#0c1d2c, #3d7d95);
}
.bg-dusk::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: -1;
  background: linear-gradient(180deg, #8a6c55, #4a3628);
  clip-path: polygon(0 70%, 8% 55%, 14% 62%, 22% 40%, 28% 52%, 34% 30%, 40% 22%, 45% 34%, 50% 18%, 56% 38%, 62% 46%, 70% 62%, 78% 55%, 86% 72%, 94% 66%, 100% 78%, 100% 100%, 0 100%);
}
/* 青空＋月：濃い青から明るい青へ。右に小さな月 */
.bg-sky {
  --bg:
    radial-gradient(circle at 78% 44%, #e8eef2 0 .6%, transparent .7%),
    linear-gradient(180deg, #2d6a9a 0%, #1f5b8c 40%, #154a78 75%, #0f3a62 100%);
  --page-bg: linear-gradient(#2d6a9a, #0f3a62);
}
/* 夜・本：ほぼ黒。左下から温かい光 */
.bg-night {
  --bg:
    radial-gradient(ellipse 70% 45% at 30% 80%, rgba(120, 100, 80, .35), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(40, 70, 110, .35), transparent 70%),
    linear-gradient(180deg, #121722, #0a0d14);
  --page-bg: linear-gradient(#121722, #2a2620);
}
/* 夜・つながり：紺に青い点と線（ネットワーク） */
.bg-net {
  --bg:
    radial-gradient(circle at 20% 18%, #4fb3ff 0 .5%, transparent .6%),
    radial-gradient(circle at 70% 10%, #4fb3ff 0 .4%, transparent .5%),
    radial-gradient(circle at 88% 34%, #4fb3ff 0 .5%, transparent .6%),
    radial-gradient(circle at 60% 62%, #4fb3ff 0 .35%, transparent .45%),
    radial-gradient(circle at 15% 78%, #4fb3ff 0 .4%, transparent .5%),
    radial-gradient(circle at 82% 88%, #4fb3ff 0 .5%, transparent .6%),
    linear-gradient(32deg, transparent 49.7%, rgba(79, 179, 255, .25) 50%, transparent 50.3%),
    linear-gradient(-58deg, transparent 49.7%, rgba(79, 179, 255, .18) 50%, transparent 50.3%),
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(30, 110, 190, .45), transparent 70%),
    linear-gradient(180deg, #0a1a2e, #06101e);
  --page-bg: linear-gradient(#0a1a2e, #1e4f80);
}

@media (prefers-reduced-motion: reduce) { .btn--shine::after, .btn--shake, .hint { animation: none; } }