/* =========================================================
   動き・形・背景デザイン（style.css の上に重ねる）
   ========================================================= */
section { overflow-x: clip; }
.hero, .page-hero, .cta-band { overflow: hidden; }

/* グラデーション文字をゆっくり流す */
.grad-text, .sec-h .en { background-size: 200% auto; animation: shine-text 6s linear infinite; }
@keyframes shine-text { to { background-position: 200% center; } }

/* ボタンに光が走る */
.btn-main, .btn-line { position: relative; overflow: hidden; isolation: isolate; }
.btn-main::after, .btn-line::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: btn-shine 3.6s ease-in-out infinite; }
@keyframes btn-shine { 60%, 100% { transform: translateX(120%); } }

/* 見出しの後ろに大きな英字（透かし） */
.sec-h { position: relative; z-index: 0; }
.sec-h[data-wm]::before { content: attr(data-wm); position: absolute; left: 50%; top: -.55em; transform: translateX(-50%); z-index: -1; font-family: var(--en); font-weight: 700; font-size: clamp(64px, 13vw, 150px); line-height: 1; letter-spacing: .06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07); pointer-events: none; }
.sec-h h2::after { content: ''; display: block; width: 56px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: var(--grad); }

/* ふわふわ浮かぶ光の玉 */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; animation: orb-float 14s ease-in-out infinite alternate; }
.orb.o1 { width: 380px; height: 380px; background: #ff2fa6; top: -80px; left: -120px; opacity: .28; }
.orb.o2 { width: 420px; height: 420px; background: #2d7bff; bottom: -160px; right: -140px; opacity: .3; animation-delay: -6s; }
.orb.o3 { width: 300px; height: 300px; background: #8b3dff; top: 30%; right: 10%; opacity: .22; animation-delay: -3s; }
@keyframes orb-float { to { transform: translate(60px, 40px) scale(1.15); } }

/* 背景つきセクションは斜めに切って、ドット模様と光を入れる */
.alt { background: linear-gradient(160deg, #110e2e 0%, #0b0a24 55%, #0e1030 100%); clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%); padding: 136px 0; margin: -24px 0; }
.alt::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask: radial-gradient(ellipse 70% 60% at 85% 20%, #000 10%, transparent 70%); mask: radial-gradient(ellipse 70% 60% at 85% 20%, #000 10%, transparent 70%); }
.alt::after { content: ''; position: absolute; width: 520px; height: 520px; left: -200px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 47, 166, .18), transparent 65%); pointer-events: none; }
.alt > .wrap { position: relative; z-index: 1; }
section:not(.alt):not(.hero):not(.page-hero) { background-image: radial-gradient(600px 300px at 100% 0%, rgba(45, 123, 255, .08), transparent 70%), radial-gradient(500px 260px at 0% 100%, rgba(255, 47, 166, .06), transparent 70%); }

/* キラッと光る星 */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sparkles i { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: twinkle 4s ease-in-out infinite; }
.sparkles i:nth-child(1) { top: 12%; left: 8%; }
.sparkles i:nth-child(2) { top: 22%; left: 46%; animation-delay: 1.2s; width: 10px; height: 10px; }
.sparkles i:nth-child(3) { top: 70%; left: 4%; animation-delay: 2.1s; width: 9px; height: 9px; }
.sparkles i:nth-child(4) { top: 8%; right: 6%; animation-delay: .6s; }
.sparkles i:nth-child(5) { bottom: 14%; right: 42%; animation-delay: 2.8s; width: 11px; height: 11px; }
.sparkles i:nth-child(6) { top: 48%; right: 3%; animation-delay: 1.7s; width: 8px; height: 8px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .9; transform: scale(1) rotate(45deg); } }

/* ---------- トップのヒーロー ---------- */
.hero-in { z-index: 1; }
.hero-art { position: relative; width: min(430px, 100%); margin-inline: auto; aspect-ratio: 4/5; }
.hero-art .arch { position: absolute; inset: 0; border-radius: 999px 999px 32px 32px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 80px -20px rgba(139, 61, 255, .6); animation: bob 7s ease-in-out infinite; }
.hero-art .arch img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .arch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(7, 6, 26, .55)); }
.hero-art .ring { position: absolute; inset: -16px; border-radius: 999px 999px 44px 44px; padding: 2px; background: conic-gradient(from var(--a), #ff2fa6, #8b3dff, #2d7bff, transparent 60%, #ff2fa6); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-a { to { --a: 360deg; } }
.hero-art .circle-deco { position: absolute; width: 130px; height: 130px; right: -46px; top: 16%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .3); animation: spin 18s linear infinite; }
.hero-art .circle-deco::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); top: -6px; left: 50%; box-shadow: 0 0 12px var(--cyan); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-12px); } }
.float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; background: rgba(20, 17, 51, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); animation: bob 5s ease-in-out infinite; }
.float.f1 { top: 9%; left: -8%; background: #ff2d55; border-color: transparent; letter-spacing: .12em; }
.float.f1::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.float.f2 { top: 42%; right: -5%; animation-delay: -1.5s; }
.float.f3 { bottom: 20%; left: -12%; animation-delay: -3s; }
.float.f3 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 16px; }
.float.f4 { bottom: 4%; right: -4%; animation-delay: -2s; }
.float .heart { color: #ff5fb7; animation: beat 1.4s infinite; display: inline-block; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } }
@media (max-width: 860px) {
  .hero-art { width: min(320px, 78%); margin-top: 18px; }
  .float { font-size: 11.5px; padding: 7px 12px; }
  .float.f1 { left: -8%; } .float.f2 { right: -8%; } .float.f3 { left: -10%; } .float.f4 { right: -6%; }
}

/* 流れる帯 */
.marquee-wrap { position: relative; padding: 10px 0 40px; overflow: hidden; }
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 15px 0; background: var(--grad); transform: rotate(-2deg); margin: 0 -20px; box-shadow: 0 20px 50px -20px rgba(255, 47, 166, .5); }
.marquee .track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-weight: 900; font-size: 17px; letter-spacing: .08em; padding: 0 22px; white-space: nowrap; color: #fff; }
.marquee span::after { content: '✦'; margin-left: 44px; opacity: .85; }
.marquee.rev { transform: rotate(1.5deg); background: #120f30; border-block: 1px solid var(--line); box-shadow: none; margin-top: -26px; z-index: 1; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 44s; }
.marquee.rev span { font-family: var(--en); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .5); font-size: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- カード・形 ---------- */
.card { border-radius: 26px 8px 26px 8px; transition: transform .35s, border-color .35s, box-shadow .35s; }
.card::before { content: ''; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 61, 255, .22), transparent 70%); transition: transform .5s; pointer-events: none; }
.card:hover::before { transform: scale(1.6); }
.card:hover { box-shadow: 0 24px 50px -24px rgba(255, 47, 166, .45); }
.card .ico { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: morph 8s ease-in-out infinite; font-size: 26px; width: 58px; height: 58px; }
@keyframes morph { 50% { border-radius: 63% 37% 39% 61% / 55% 61% 39% 45%; } }
.grid > :nth-child(3n+2) .ico { animation-delay: -2.5s; }
.grid > :nth-child(3n) .ico { animation-delay: -5s; }
a.card .more { transition: letter-spacing .3s; }
a.card:hover .more { letter-spacing: .08em; }

.perk { border-radius: 999px 999px 24px 24px; padding-top: 44px; }
.perk::before { background: conic-gradient(from var(--a), #ff2fa6, #8b3dff, #2d7bff, #ff2fa6); animation: spin-a 8s linear infinite; opacity: .75; }
.perk .v { font-size: clamp(32px, 4.4vw, 48px); }

.worries li { border-radius: 999px; text-align: center; padding: 14px 22px; border-style: solid; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); }
.worries li:nth-child(even) { margin-top: 14px; }
@media (max-width: 800px) { .worries li:nth-child(even) { margin-top: 0; margin-left: 24px; } .worries li:nth-child(odd) { margin-right: 24px; } }

.special { border-radius: 40px 12px 40px 12px; position: relative; overflow: hidden; }
.special::before { content: ''; position: absolute; width: 360px; height: 360px; right: -120px; top: -140px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02); pointer-events: none; }
.special .ribbon { animation: bob 3s ease-in-out infinite; }

.creator { border-radius: 40px 12px 40px 12px; }
.creator .ph { border-radius: 46% 54% 42% 58% / 38% 40% 60% 62%; animation: morph 10s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255, 47, 166, .35), 0 20px 60px -20px rgba(139, 61, 255, .7); }

.flow li { border-radius: 999px 24px 24px 999px; padding-left: 14px; transition: transform .3s; }
.flow li::before { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); }
.flow li:hover { transform: translateX(6px); }

.plan { border-radius: 32px 10px 32px 10px; transition: transform .3s; }
.plan:hover { transform: translateY(-6px); }
.plan.rec { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 20px 70px -15px rgba(255, 47, 166, .6); } }
.form-box { border-radius: 36px 12px 36px 12px; position: relative; }
.form-box::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a), transparent 0 70%, #ff2fa6, #8b3dff, #2d7bff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 5s linear infinite; pointer-events: none; }
.col-card { border-radius: 24px 8px 24px 8px; }
.col-card .thumb { transition: transform .5s; }
.col-card:hover .thumb { transform: scale(1.06); }
.faq details { border-radius: 18px; transition: border-color .3s; }
.faq details[open] { border-color: rgba(255, 47, 166, .4); }
.article .eyecatch { border-radius: 40px 12px 40px 12px; }

/* ---------- 下層ページのヒーロー（画像つき） ---------- */
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero.split { text-align: left; padding: 40px 0 64px; }
.page-hero.split > .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.page-hero.split .lead { margin-inline: 0; }
.page-hero.split .btns { justify-content: flex-start; }
.ph-img { position: relative; aspect-ratio: 1; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 58% 42% 50% 50% / 48% 52% 48% 52%; animation: morph 12s ease-in-out infinite; box-shadow: 0 30px 80px -25px rgba(139, 61, 255, .7); }
.ph-img::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .25); animation: spin 30s linear infinite; }
.ph-img::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); right: 8%; top: 4%; box-shadow: 0 0 20px rgba(255, 47, 166, .8); animation: bob 4s ease-in-out infinite; }
.ph-img.wide { aspect-ratio: 4/3; }
.ph-img.wide img { border-radius: 140px 20px 140px 20px; animation: none; }
.ph-img.wide::before { border-radius: 150px 30px 150px 30px; animation: none; inset: -12px; }
@media (max-width: 860px) {
  .page-hero.split { text-align: center; }
  .page-hero.split > .wrap { grid-template-columns: 1fr; gap: 28px; }
  .page-hero.split .btns { justify-content: center; }
  .ph-img { width: min(320px, 82%); margin-inline: auto; order: -1; }
  .ph-img.wide { width: min(420px, 90%); }
}

/* 中身を順番にふわっと */
.reveal.grid, .reveal.perks, .reveal.worries, .reveal.flow { opacity: 1; transform: none; }
.reveal.grid > *, .reveal.perks > *, .reveal.worries > *, .reveal.flow > * { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s, box-shadow .35s, border-color .35s; }
.reveal.in.grid > *, .reveal.in.perks > *, .reveal.in.worries > *, .reveal.in.flow > * { opacity: 1; transform: none; }
.reveal.in > :nth-child(2) { transition-delay: .08s; } .reveal.in > :nth-child(3) { transition-delay: .16s; }
.reveal.in > :nth-child(4) { transition-delay: .24s; } .reveal.in > :nth-child(5) { transition-delay: .32s; } .reveal.in > :nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal > * { opacity: 1 !important; transform: none !important; }
}
.reveal.in.grid > a.card:hover { transform: translateY(-4px); }
.page-hero .orb, .cta-band .orb { opacity: .2; }
.page-hero .orb.o2, .cta-band .orb.o2 { bottom: auto; top: 0; right: -220px; }
.page-hero .orb.o1 { top: -160px; }
/* 光の玉は上下をぼかしてセクションの境目を目立たせない */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; -webkit-mask: linear-gradient(to bottom, transparent, #000 18%, #000 65%, transparent); mask: linear-gradient(to bottom, transparent, #000 18%, #000 65%, transparent); }