/* YOUNIQS 広告LP。参考：SnsClub「Instagram初心者勉強会」LPのデザインを踏襲（文字はHTML）。 */
:root {
  --pink: #ea4f7c; --pink-d: #d93a6c; --purple: #9455d3; --purple-d: #7a45c2;
  --grad: linear-gradient(100deg, #ee4f72 0%, #c653b4 55%, #9457d6 100%);
  --grad-bg: linear-gradient(160deg, #f0506f 0%, #d24fa3 45%, #9a55d1 100%);
  --navy: #0f2052; --navy-d: #091539; --navy-l: #1c3a86;
  --ink: #1a1a1f; --ink-2: #44444d; --gray: #eef0f4; --pale: #f7f5fb; --white: #fff;
  --green: #1ccc5b; --green-d: #0a9c3e; --green-dd: #077a30;
  --gold: #f3d277; --gold-d: #c9982a; --gold-ink: #4b3200;
  --yellow: #ffe24d; --flag: #fff3b0; --flag-ink: #7a5b00;
  --w: 750px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; background: #dcdde3; color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.8; font-feature-settings: "palt"; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: normal; }
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }
.lp { max-width: var(--w); margin-inline: auto; background: var(--white); overflow: hidden; box-shadow: 0 0 40px rgb(20 20 40 / .18); }

/* 文字の下に敷くマーカー */
.mk { background: linear-gradient(transparent 58%, #f6a6c4 58%, #c9a4ee 100%); padding-inline: .08em; }
.hl { background: linear-gradient(transparent 60%, var(--yellow) 60%); font-weight: 700; }
.todo { background: var(--flag); color: var(--flag-ink); font-size: .9em; padding-inline: .3em; border-radius: 3px; }
.fine { font-size: 12px; line-height: 1.7; color: #666; }
.fine--light { color: #ffe9f2; }

/* ── 1. ファーストビュー ─────────────────────────────── */
.fv { position: relative; background:
    linear-gradient(118deg, transparent 0 62%, rgb(0 0 0 / .035) 62% 78%, transparent 78%),
    linear-gradient(64deg, rgb(0 0 0 / .04) 0 18%, transparent 18% 100%),
    linear-gradient(200deg, rgb(0 0 0 / .03) 0 30%, transparent 30%),
    linear-gradient(180deg, #fff 0%, #f1f1f4 100%); }
.fv__band { background: var(--grad); color: #fff; font-weight: 900; text-align: center; font-size: clamp(13px, 3.7vw, 26px); letter-spacing: .04em; padding: .5em .6em; }
.fv__body { position: relative; padding: clamp(14px, 4vw, 30px) clamp(16px, 5vw, 40px) clamp(24px, 6vw, 44px); }
.fv__line1 { font-weight: 900; font-size: clamp(16px, 4.6vw, 32px); line-height: 1.45; letter-spacing: .01em; }
.fv__title { position: relative; z-index: 2; margin-top: clamp(12px, 3.4vw, 26px); display: grid; justify-items: start; line-height: 1.2; }
.fv__from { font-weight: 900; font-style: normal; font-size: clamp(21px, 6.3vw, 46px); transform: skewX(-8deg); transform-origin: left bottom; white-space: nowrap; }
.fv__num { position: relative; display: inline-block; margin-top: .06em; font-weight: 900; font-size: clamp(56px, 18.4vw, 136px); line-height: 1.12; letter-spacing: -.02em; white-space: nowrap; transform: skewX(-8deg); transform-origin: left bottom; }
.fv__num > span { position: relative; background: linear-gradient(95deg, #8c50d6 0%, #c552b6 45%, #f04f6e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv__num::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; color: #fff;
  -webkit-text-stroke: .09em #fff;
  text-shadow: .02em .02em 0 #cfc6dc, .04em .04em 0 #bdb3cd, .06em .06em 0 #aaa0bd, .08em .08em 0 #978dab, .1em .12em .08em rgb(40 20 70 / .35);
}
.fv__what { margin-top: .25em; font-weight: 900; font-size: clamp(22px, 6.6vw, 48px); line-height: 1.3;
  background: linear-gradient(95deg, #ef4f70, #b653c2 60%, #9257d6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #fff); }
.fv__pic { position: relative; z-index: 1; display: block; width: 74%; margin: -21% -7% 0 auto; mix-blend-mode: multiply; }
.fv__facts { list-style: none; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: -19%; margin-left: -4px; max-width: 58%; }
.fv__facts li { background: var(--grad); color: #fff; font-weight: 900; font-size: clamp(12.5px, 3.5vw, 24px); line-height: 1.2; padding: .45em .9em; transform: skewX(-12deg); white-space: nowrap; box-shadow: 0 3px 8px rgb(120 40 120 / .25); }
.fv__facts li:nth-child(n+4) { background: var(--navy); }
.fv__lead { margin-top: clamp(16px, 4.4vw, 30px); font-weight: 500; font-size: clamp(14.5px, 3.9vw, 22px); }
.fv__fine { margin-top: 10px; font-size: clamp(11px, 2.9vw, 15px); line-height: 1.6; color: #555; }

/* ── 申込ボタン ──────────────────────────────────────── */
.cta { margin-top: clamp(20px, 5vw, 36px); text-align: center; }
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; max-width: 640px; margin-inline: auto;
  min-height: clamp(60px, 16vw, 104px); padding: 0 clamp(50px, 13vw, 90px) 0 clamp(18px, 5vw, 36px);
  border-radius: 999px; border: 2px solid #fff;
  background: linear-gradient(180deg, #3ee37a 0%, var(--green) 45%, var(--green-d) 100%);
  box-shadow: 0 clamp(4px, 1.1vw, 7px) 0 var(--green-dd), 0 12px 24px rgb(8 120 50 / .35), inset 0 2px 0 rgb(255 255 255 / .45);
  color: #fff; font-weight: 900; font-size: clamp(16.5px, 4.9vw, 34px); line-height: 1.2; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 2px 2px rgb(0 90 30 / .35);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), filter 220ms var(--ease-out);
}
.btn::after { content: ""; position: absolute; right: clamp(18px, 5vw, 38px); top: 50%; width: .62em; height: .62em; margin-top: -.31em; border: solid #fff; border-width: .16em .16em 0 0; transform: rotate(45deg); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green-dd), 0 4px 10px rgb(8 120 50 / .35), inset 0 2px 0 rgb(255 255 255 / .45); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.07); } }
.cta__note { margin-top: clamp(14px, 3.6vw, 22px); font-size: clamp(11.5px, 3vw, 16px); line-height: 1.7; }
.sec--navy .cta__note, .sec--grad .cta__note { color: #fff; }

/* ── セクション共通 ──────────────────────────────────── */
.sec { position: relative; padding: clamp(44px, 11vw, 84px) clamp(16px, 4.6vw, 36px); }
.sec--white { background: #fff; }
.sec--grad { background: var(--grad-bg); color: #fff; }
.sec--navy { background: radial-gradient(120% 60% at 50% 0%, var(--navy-l) 0%, var(--navy) 55%, var(--navy-d) 100%); color: #fff; }
.sec--gray { background:
    linear-gradient(135deg, rgb(255 255 255 / .7) 0 12%, transparent 12% 40%, rgb(255 255 255 / .5) 40% 46%, transparent 46% 100%),
    linear-gradient(40deg, transparent 0 60%, rgb(255 255 255 / .6) 60% 72%, transparent 72%), var(--gray); }
.sec--pale { background: linear-gradient(180deg, #fbf9fe 0%, #f1edf8 100%); }
.h2 { text-align: center; font-weight: 900; font-size: clamp(22px, 6.4vw, 44px); line-height: 1.45; letter-spacing: .03em; margin-bottom: clamp(18px, 5vw, 36px); word-break: keep-all; overflow-wrap: anywhere; }
.h2--light { color: #fff; }
.h2 .box { display: inline-block; border: 2px solid #fff; padding: 0 .3em; margin-inline: .2em; line-height: 1.35; background: rgb(255 255 255 / .16); }
.h2--line { display: table; margin-inline: auto; padding-bottom: .15em; border-bottom: 3px solid #fff; }
.lead { text-align: center; font-weight: 500; font-size: clamp(14.5px, 3.9vw, 22px); margin-bottom: clamp(18px, 5vw, 32px); }
.lead--left { text-align: left; }
.lead--left p + p { margin-top: 1em; }
.lead--light { color: #fff; }
.lead--strong { font-weight: 900; margin-top: clamp(22px, 6vw, 40px); }

/* ── 3. 受講生の声 ───────────────────────────────────── */
.video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: clamp(10px, 2.6vw, 18px); overflow: hidden; background: var(--grad-bg); color: #fff; text-decoration: none; margin-bottom: clamp(22px, 6vw, 40px); box-shadow: 0 8px 22px rgb(150 60 150 / .25); }
.video__play { position: absolute; left: 50%; top: 46%; width: clamp(60px, 17vw, 110px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgb(60 10 80 / .3); }
.video__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: clamp(18px, 5vw, 32px) solid var(--pink); border-top: clamp(11px, 3.1vw, 20px) solid transparent; border-bottom: clamp(11px, 3.1vw, 20px) solid transparent; }
.video__label { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-weight: 900; font-size: clamp(14px, 3.9vw, 24px); white-space: nowrap; }
.video:active .video__play { transform: translate(-50%, -50%) scale(.96); }
.voice { background: #fff; border: clamp(3px, .8vw, 5px) solid var(--pink); padding: clamp(18px, 5vw, 36px) clamp(16px, 4.4vw, 34px); margin-bottom: clamp(18px, 5vw, 32px); }
.voice header { display: flex; align-items: center; gap: clamp(12px, 3.6vw, 26px); margin-bottom: clamp(12px, 3.4vw, 22px); }
.voice__avatar { flex: none; display: grid; place-items: center; width: clamp(64px, 18vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--grad-bg); color: #fff; font-weight: 900; font-size: clamp(26px, 7.4vw, 50px); line-height: 1; }
.voice header p { line-height: 1.5; }
.voice header p b { display: block; font-weight: 900; font-size: clamp(17px, 4.8vw, 30px); }
.voice header p span { display: block; font-size: clamp(13px, 3.5vw, 20px); color: var(--ink-2); }
.voice h3 { background: linear-gradient(100deg, #ee6a8c 0%, #c97bc6 55%, #a98ad9 100%); color: #fff; font-weight: 900; font-size: clamp(16.5px, 4.6vw, 30px); line-height: 1.5; padding: .5em .7em; margin-bottom: clamp(12px, 3.4vw, 22px); }
.voice > p { font-size: clamp(14px, 3.75vw, 21px); line-height: 1.85; }
.voice > p + p { margin-top: .8em; }

/* ── 4. 得られるもの ─────────────────────────────────── */
.gain { list-style: none; counter-reset: g; display: grid; gap: clamp(12px, 3.4vw, 22px); margin: clamp(22px, 6vw, 40px) clamp(4px, 2vw, 20px) clamp(30px, 8vw, 56px); }
.gain li { counter-increment: g; position: relative; display: flex; align-items: center; min-height: clamp(68px, 19vw, 120px); background: #fff; color: var(--ink); font-weight: 700; font-size: clamp(14px, 3.8vw, 23px); line-height: 1.55; padding: .7em .9em .7em clamp(78px, 21vw, 140px); box-shadow: 0 5px 14px rgb(90 20 110 / .22); }
.gain li::before { content: "POINT"; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(64px, 17.5vw, 116px); display: grid; place-items: start center; padding-top: clamp(10px, 3vw, 20px); background: linear-gradient(180deg, #f0527a, #de3e86); color: #fff; font-weight: 900; font-size: clamp(11px, 3vw, 18px); letter-spacing: .08em; line-height: 1; }
.gain li::after { content: counter(g); position: absolute; left: 0; bottom: clamp(8px, 2.4vw, 18px); width: clamp(64px, 17.5vw, 116px); text-align: center; color: #fff; font-weight: 900; font-size: clamp(30px, 8.6vw, 58px); line-height: 1; }
.spec { width: 100%; border-collapse: collapse; background: #fff; color: var(--ink); font-size: clamp(13.5px, 3.6vw, 20px); line-height: 1.7; box-shadow: 0 5px 14px rgb(90 20 110 / .22); }
.spec caption { background: var(--navy); color: #fff; font-weight: 900; font-size: 1.15em; letter-spacing: .1em; padding: .55em; }
.spec th, .spec td { padding: .75em .85em; border-top: 1px solid #ead3e2; text-align: left; vertical-align: top; }
.spec th { width: 6.6em; background: #fdeef4; color: var(--pink-d); font-weight: 900; white-space: nowrap; }

/* ── 5. 特典（紺地・金） ─────────────────────────────── */
.confetti { position: absolute; width: clamp(12px, 3.4vw, 26px); aspect-ratio: 1; background: linear-gradient(135deg, #ffe9a6, var(--gold-d)); box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.c1 { left: 6%; top: 3.2%; transform: rotate(24deg); } .c2 { right: 8%; top: 2.2%; transform: rotate(-18deg) scale(.8); }
.c3 { right: 14%; top: 12%; transform: rotate(40deg) scale(.6); } .c4 { left: 12%; top: 13.5%; transform: rotate(-32deg) scale(.7); } .c5 { right: 4%; top: 7.5%; transform: rotate(12deg) scale(1.1); }
.h2--gold { margin-inline: clamp(-16px, -4.6vw, -36px); }
.goldbar { display: block; background: linear-gradient(180deg, #fff3c4 0%, var(--gold) 45%, #d9aa3c 100%); color: var(--navy); padding: .35em .5em; box-shadow: 0 6px 16px rgb(0 0 0 / .35); }
.kit { width: 100%; margin: 0 auto clamp(26px, 7vw, 48px); -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%); }
.ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%); min-width: 6.6em; text-align: center; background: linear-gradient(180deg, #ffe9a6 0%, var(--gold) 40%, var(--gold-d) 100%); color: var(--gold-ink); font-weight: 900; font-size: clamp(14px, 3.9vw, 26px); line-height: 1.5; letter-spacing: .08em; padding: 0 1.2em; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .3)); }
.bonus { list-style: none; display: grid; gap: clamp(30px, 8vw, 54px); margin-top: clamp(30px, 8vw, 54px); }
.bonus li { position: relative; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: clamp(12px, 3.4vw, 26px); align-items: center; background: #fff; color: var(--ink); padding: clamp(26px, 7vw, 46px) clamp(12px, 3.4vw, 26px) clamp(14px, 4vw, 28px); box-shadow: 0 8px 20px rgb(0 0 0 / .35); }
.bonus h3 { font-weight: 900; font-size: clamp(14.5px, 4vw, 26px); line-height: 1.45; margin-bottom: .35em; }
.bonus p { font-size: clamp(12px, 3.2vw, 18px); line-height: 1.7; color: var(--ink-2); }

/* ── 7. お悩み ───────────────────────────────────────── */
.h2--bubble { color: var(--ink); font-size: clamp(17px, 5.3vw, 40px); white-space: nowrap; margin-bottom: clamp(26px, 7vw, 48px); }
.bubble { position: relative; display: inline-block; background: var(--navy); color: #fff; font-size: 1.25em; line-height: 1.3; padding: .12em .5em .18em; margin-inline: .25em; border-radius: .5em; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -.32em; margin-left: -.3em; border: .3em solid transparent; border-top-color: var(--navy); border-bottom: 0; }
.pain { background: #fff; border: clamp(3px, .7vw, 5px) solid var(--navy); margin-bottom: clamp(22px, 6vw, 44px); box-shadow: 0 6px 16px rgb(15 32 82 / .15); }
.pain h3 { background: var(--navy); color: #fff; text-align: center; font-weight: 900; font-size: clamp(18px, 5.2vw, 36px); line-height: 1.45; padding: .6em .5em .7em; word-break: keep-all; overflow-wrap: anywhere; }
.pain h3 small { display: table; margin: 0 auto .3em; background: #fff; color: var(--navy); font-size: .55em; line-height: 1.5; padding: 0 1em; border-radius: 999px; letter-spacing: .08em; }
.pain h3 em { display: block; color: var(--yellow); }
.pain__body { padding: clamp(16px, 4.4vw, 32px) clamp(16px, 4.4vw, 34px) clamp(20px, 5.4vw, 38px); }
.pain__body img { width: clamp(150px, 46%, 300px); margin: 0 auto clamp(10px, 3vw, 22px); border-radius: 12px; }
.pain__body p { font-weight: 500; font-size: clamp(14px, 3.75vw, 21px); line-height: 1.9; }

/* ── 8. 勉強会の内容 ─────────────────────────────────── */
.step { margin-top: clamp(34px, 9vw, 64px); }
.step__tag { position: relative; z-index: 1; display: inline-block; max-width: 92%; background: #fff; color: var(--pink-d); font-weight: 900; font-size: clamp(18px, 5.1vw, 36px); line-height: 1.4; padding: .3em .6em .35em; margin-left: clamp(-16px, -4.6vw, -36px); padding-left: clamp(16px, 4.6vw, 36px); box-shadow: 0 4px 10px rgb(90 20 110 / .2); }
.step__tag small { display: block; font-size: .78em; letter-spacing: .06em; color: var(--purple-d); }
.step__panel { margin-top: clamp(-10px, -2vw, -6px); background: rgb(255 255 255 / .82); color: var(--ink); padding: clamp(22px, 6vw, 40px) clamp(16px, 4.4vw, 34px) clamp(18px, 5vw, 34px); font-weight: 500; font-size: clamp(14px, 3.75vw, 21px); line-height: 1.85; }
.step__panel ul { list-style: none; }
.step__panel li { position: relative; padding-left: 1.2em; }
.step__panel li + li { margin-top: .3em; }
.step__panel li::before { content: ""; position: absolute; left: .15em; top: .68em; width: .55em; height: .55em; border-radius: 50%; background: var(--grad-bg); }
.step__panel p + ul, .step__panel dl + ul { margin-top: .9em; }
.step__goal { position: relative; background: #fff; color: var(--ink); text-align: center; font-weight: 700; font-size: clamp(14.5px, 3.9vw, 22px); line-height: 1.8; padding: clamp(16px, 4.4vw, 30px) clamp(14px, 4vw, 30px) clamp(34px, 9vw, 60px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(20px, 5.4vw, 38px)), 50% 100%, 0 calc(100% - clamp(20px, 5.4vw, 38px))); }
.step .fine { margin-top: 8px; }
.stats { display: grid; gap: clamp(8px, 2.2vw, 14px); margin-top: .9em; }
.stats > div { background: #fff; border-left: 0; padding: .6em .8em; box-shadow: 0 2px 8px rgb(90 20 110 / .14); }
.stats dt { font-weight: 900; font-size: clamp(26px, 7.4vw, 50px); line-height: 1.25; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.stats dd { font-size: clamp(12.5px, 3.3vw, 18px); line-height: 1.65; }
.stats small { display: block; font-size: .88em; color: #666; }
.step--after .step__goal--prose { clip-path: none; text-align: left; font-weight: 500; margin-top: clamp(-10px, -2vw, -6px); padding: clamp(24px, 6.4vw, 42px) clamp(16px, 4.4vw, 34px); }
.step__goal--prose p + p { margin-top: 1em; }

/* ── 10. 特典一覧（月桂冠の見出し＋2列） ──────────────── */
.sec--navy2 { background: linear-gradient(180deg, var(--navy-l) 0%, var(--navy) 22%, var(--navy-d) 100%); }
.h2--prize { display: grid; justify-items: center; gap: .15em; }
.pill { background: #fff; color: var(--navy); font-size: .78em; line-height: 1.5; padding: .15em 1.1em; border-radius: 999px; }
.prize { display: flex; align-items: center; justify-content: center; gap: .15em; color: var(--gold); }
.prize__text { font-size: 1.35em; line-height: 1.2; background: linear-gradient(180deg, #fff3c4 0%, var(--gold) 50%, #d19f2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.prize__text b { font-size: 1.75em; font-weight: 900; font-style: normal; padding-inline: .04em; }
.laurel { flex: none; height: clamp(74px, 21vw, 150px); width: auto; color: var(--gold-d); }
.laurel--r { transform: scaleX(-1); }
.prize__sub { color: #fff; font-size: .95em; }
.grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 9vw, 64px) clamp(12px, 3.4vw, 26px); margin-top: clamp(36px, 10vw, 70px); }
.grid li { position: relative; background: #fff; color: var(--ink); padding: clamp(22px, 6vw, 42px) clamp(8px, 2.4vw, 18px) clamp(12px, 3.4vw, 24px); text-align: center; box-shadow: 0 8px 20px rgb(0 0 0 / .35); }
.grid img { width: 100%; }
.grid p { text-wrap: balance; margin-top: .6em; font-weight: 900; font-size: clamp(13px, 3.6vw, 24px); line-height: 1.5; }

/* ── 12. 講師・運営 ──────────────────────────────────── */
.h2--box span { display: inline-block; background: var(--grad); color: #fff; padding: .1em .8em .16em; }
.about__name { text-align: center; font-weight: 900; font-size: clamp(34px, 10vw, 68px); line-height: 1.2; letter-spacing: .06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about__name small { display: block; font-size: .34em; letter-spacing: .3em; margin-top: .3em; }
.about__card { background: #fff; border: clamp(3px, .7vw, 5px) solid #e9a5c8; padding: clamp(18px, 5vw, 36px); margin: clamp(18px, 5vw, 34px) clamp(4px, 3vw, 30px) 0; font-size: clamp(14px, 3.75vw, 21px); line-height: 1.85; }
.about__card p + p { margin-top: .6em; }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.8vw, 14px); margin: clamp(18px, 5vw, 34px) clamp(4px, 3vw, 30px) 0; text-align: center; }
.nums > div { background: #fff; border-bottom: clamp(3px, .8vw, 6px) solid var(--pink); padding: clamp(10px, 3vw, 22px) 4px; box-shadow: 0 4px 12px rgb(120 60 150 / .14); }
.nums dt { font-weight: 900; font-size: clamp(12px, 3.3vw, 20px); line-height: 1.3; white-space: nowrap; }
.nums dt b { font-size: 2.1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nums dd { margin-top: .3em; font-size: clamp(10.5px, 2.8vw, 16px); line-height: 1.45; color: var(--ink-2); }

/* ── 14. 最後に ──────────────────────────────────────── */
.sec--last { background: linear-gradient(170deg, #f08aa6 0%, #dd86c4 50%, #b58be0 100%); color: #fff; }
.h2--skew span { display: inline-block; background: #fff; color: var(--pink-d); padding: .05em 1em .1em; transform: skewX(-12deg); box-shadow: 0 4px 12px rgb(120 30 110 / .2); }
.letter { font-weight: 700; font-size: clamp(14.5px, 3.9vw, 22px); line-height: 2.1; text-shadow: 0 1px 6px rgb(110 30 110 / .45); padding-inline: clamp(4px, 3vw, 30px); }
.letter p + p { margin-top: 1.3em; }
.letter__sign { text-align: right; font-weight: 900; font-size: 1.1em; }

/* ── 15. フッター ────────────────────────────────────── */
.foot { max-width: var(--w); margin-inline: auto; background: #2c2c30; color: #fff; text-align: center; padding: clamp(24px, 6.4vw, 44px) 16px clamp(28px, 7vw, 48px); }
.foot__logo { font-weight: 900; font-size: clamp(24px, 6.8vw, 44px); letter-spacing: .1em; line-height: 1.3; }
.foot__co { font-size: clamp(11.5px, 3vw, 16px); opacity: .85; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(10px, 3vw, 24px); margin-top: clamp(10px, 3vw, 20px); padding-top: clamp(6px, 2vw, 14px); border-top: 1px solid #555; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: #ddd; font-size: clamp(11.5px, 3vw, 16px); white-space: nowrap; }
.foot a:hover { color: #fff; } .foot a:active { color: #bbb; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; } }

/* ════ 改善（2026-10-05）：申込までの距離を縮める・読みやすさ・表示速度 ════ */
body { font-weight: 500; }

/* ファーストビュー：申込ボタンを最初の画面に入れる。実績は直下に置く */
.fv__line1 { font-size: clamp(15px, 4.3vw, 32px); }
.fv__title { margin-top: clamp(8px, 2.4vw, 22px); }
.fv__pic { width: 70%; margin-top: -19%; }
.cta--fv { margin-top: clamp(12px, 3.2vw, 28px); }
.fv__proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 2.2vw, 16px); margin-top: clamp(16px, 4.4vw, 30px); text-align: center; }
.fv__proof > div { background: #fff; border-bottom: clamp(3px, .8vw, 6px) solid var(--pink); padding: clamp(8px, 2.4vw, 18px) 4px; box-shadow: 0 4px 12px rgb(120 60 150 / .14); }
.fv__proof dt { font-size: clamp(11.5px, 3vw, 17px); line-height: 1.4; color: var(--ink-2); }
.fv__proof dd { font-weight: 900; font-size: clamp(13px, 3.6vw, 22px); line-height: 1.25; white-space: nowrap; }
.fv__proof dd b { font-size: 2em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv__lead { background: rgb(255 255 255 / .8); border-left: clamp(4px, 1vw, 7px) solid var(--pink); padding: .8em 1em; }
.fv__fine { font-size: clamp(12px, 3vw, 15px); }

/* 申込ボタン：上に一言、ゆっくり光が走る */
.cta__pre { display: flex; align-items: center; justify-content: center; gap: .5em; margin-bottom: clamp(6px, 1.8vw, 12px); font-weight: 900; font-size: clamp(14px, 3.9vw, 26px); line-height: 1.3; letter-spacing: .06em; color: var(--pink-d); }
.cta__pre::before, .cta__pre::after { content: ""; width: 1.1em; height: 2px; background: currentColor; }
.cta__pre::before { transform: rotate(55deg); } .cta__pre::after { transform: rotate(-55deg); }
.sec--navy .cta__pre { color: var(--gold); } .sec--grad .cta__pre { color: #fff; }
.btn { overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-140%) skewX(-18deg); animation: shine 4.2s var(--ease-out) 1.2s infinite; }
@keyframes shine { 0% { transform: translateX(-140%) skewX(-18deg); } 28%, 100% { transform: translateX(420%) skewX(-18deg); } }
.cta__note { font-size: clamp(12px, 3.1vw, 16px); }

/* 動画：LPの中で再生する */
.video { background: var(--navy-d); }
.video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 10 40 / .05) 40%, rgb(15 10 40 / .75) 100%); }
.video__play, .video__label { z-index: 1; }
.video__label { text-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.video.is-playing::after, .video.is-playing > img, .video.is-playing .video__play, .video.is-playing .video__label { display: none; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 受講生の声：横スワイプ（参考LPと同じ見せ方）。JSが無くてもスワイプできる */
.voices { display: flex; align-items: stretch; gap: clamp(10px, 2.8vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: calc(clamp(16px, 4.6vw, 36px) * -1); padding: 4px clamp(16px, 4.6vw, 36px) clamp(10px, 3vw, 18px); scroll-padding-inline: clamp(16px, 4.6vw, 36px); }
.voices::-webkit-scrollbar { display: none; }
.voices .voice { flex: 0 0 90%; scroll-snap-align: center; margin-bottom: 0; }
.voices__nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 28px); margin-top: clamp(6px, 2vw, 14px); }
.voices__nav[hidden] { display: none; }
.voices__dots { display: flex; gap: clamp(8px, 2.2vw, 14px); }
.voices__dots button { width: 44px; height: 44px; margin: 0 -15px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.voices__dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e3c3d6; transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out); }
.voices__dots button[aria-current="true"]::before { background: var(--pink); transform: scale(1.35); }
.voices__arrow { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pink); cursor: pointer; box-shadow: 0 3px 8px rgb(200 50 110 / .35); transition: transform 120ms var(--ease-out), opacity 220ms var(--ease-out); }
.voices__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid #fff; border-width: 3px 3px 0 0; transform: translate(-70%, -50%) rotate(45deg); }
.voices__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.voices__arrow:active { transform: scale(.92); }
.voices__arrow:disabled { opacity: .3; cursor: default; }
#voice .fine { margin-top: clamp(10px, 3vw, 18px); text-align: center; }

/* 得られるもの：白文字の長文を読みやすく */
.sec--grad .lead--left { background: rgb(60 10 80 / .18); padding: 1em 1.1em; border-radius: 6px; line-height: 1.9; }

/* 最後に：白文字が読めるよう地色を濃くする */
.sec--last { background: linear-gradient(170deg, #d6437a 0%, #a64bb3 52%, #7a4bc4 100%); }
.letter { text-shadow: 0 1px 4px rgb(70 10 80 / .45); }

/* 小さすぎる文字をなくす */
.fine { font-size: clamp(12px, 3vw, 15px); }
.nums dd { font-size: clamp(11.5px, 2.9vw, 16px); }

/* 画面下の予約バー */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / .96) 38%); transform: translateY(110%); transition: transform 180ms cubic-bezier(0.7, 0, 0.84, 0); pointer-events: none; }
.dock.is-on { transform: none; transition: transform 240ms var(--ease-out); pointer-events: auto; }
.btn--dock { width: 100%; max-width: 560px; min-height: 56px; font-size: clamp(15.5px, 4.5vw, 24px); }
.foot { padding-bottom: calc(clamp(28px, 7vw, 48px) + 84px); }

@media (prefers-reduced-motion: reduce) { .btn::before { animation: none; } .voices { scroll-behavior: auto; } }

/* 最後に：社長の写真。スマホで画面を占めすぎないよう小さな丸にする */
.letter__photo { width: clamp(96px, 27vw, 180px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: clamp(3px, .9vw, 6px) solid #fff; box-shadow: 0 6px 18px rgb(70 10 80 / .35); margin: 0 auto clamp(16px, 4.4vw, 30px); }

/* ヘッドコピー：「まず最初の」を数字の前に小さく置く */
.fv__mid { display: inline-block; margin-top: .55em; font-weight: 900; font-size: clamp(19px, 5.6vw, 42px); line-height: 1; letter-spacing: .04em; color: var(--purple-d); transform: skewX(-8deg); transform-origin: left bottom; white-space: nowrap; }
.fv__mid::after { content: ""; display: inline-block; width: .7em; height: .18em; margin-left: .35em; vertical-align: .22em; background: var(--grad); }
.fv__mid + .fv__num { margin-top: -.02em; }

/* ヒーローの人物写真：右側に大きく、見出しの下に少し重ねる */
.fv__pic { width: 72%; margin: -14% -8% 0 auto; }
.fv__facts { margin-top: -26%; max-width: 54%; }
.fv__mid::after { display: none; }
.fv__pic { width: 66%; margin: -3% -6% 0 auto; }
.fv__facts { margin-top: -24%; max-width: 56%; }