/* opt LP だけの「派手版」演出（2026-11-13 user「もっと派手に・アニメーションガンガン・キラキラ」）
   ・キラキラは星形でなく丸いフレア＋細かい粒（全LP共通の好み）
   ・CTAボタン本体の動きはクオルレボ流用のまま（ここでは周りだけ足す）
   ・JSが動いた時だけ（html.fx）隠してから出す。JSなし・動きを減らす設定では普通に全部表示 */

/* ---------- 上端の虹色スクロール進捗バー ---------- */
.fx-progress { position: fixed; top: 0; left: 0; z-index: 80; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #f3a6bd, #f5d39a, #bfe3b4, #a9cdf2, #d4b3f0, #f3a6bd); background-size: 200% 100%; animation: fx-flow 4s linear infinite; box-shadow: 0 0 8px rgba(243, 166, 189, .7); }
@keyframes fx-flow { to { background-position: -200% 0; } }

/* ---------- キラキラ用キャンバス ---------- */
.fx-canvas { position: absolute; top:0;right:0;bottom:0;left:0;inset:0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.fv, .band, .final, .rec, .pf__top { position: relative; }
.fv { overflow: hidden; }

/* ---------- FV：ゆっくり寄る＋光がよぎる ---------- */
.fx .fv__img { animation: fx-fvzoom 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fx-fvzoom { from { transform: scale(1.1); filter: brightness(1.25) saturate(.8); } to { transform: scale(1); filter: none; } }
.fv::after, .side__fv-wrap::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(255, 240, 200, .35) 55%, transparent);
  transform: skewX(-18deg); mix-blend-mode: soft-light; animation: fx-sweep 5.5s ease-in-out 1.6s infinite; }
@keyframes fx-sweep { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.side__fv-wrap { position: relative; display: block; overflow: hidden; margin: 0 auto 26px; width: min(100%, 340px); }
.side__fv-wrap .side__fv { margin: 0 !important; width: 100%; max-width: none; max-height: none; box-shadow: none; }
@media (min-width: 900px) { .side__fv-wrap { width: min(100%, 340px, calc((100vh - 150px) * 780 / 1120)); box-shadow: 0 10px 30px rgba(107, 31, 58, .14); } }

/* ---------- 見出し：英字は金の光が流れる・飾り線は伸びる ---------- */
.en { background: linear-gradient(90deg, #b8925a 0%, #b8925a 35%, #fff4cf 50%, #b8925a 65%, #b8925a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fx-goldtext 3.6s linear infinite; }
.final .final__en { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; animation: fx-goldtext 3.6s linear infinite; }
.band .en, .final .final__en { background-image: linear-gradient(90deg, #e8c98d 0%, #e8c98d 35%, #fffbe8 50%, #e8c98d 65%, #e8c98d 100%); }
@keyframes fx-goldtext { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.fx .sec__h::after { width: 0; transition: width .9s cubic-bezier(.2, .7, .2, 1) .25s; }
.fx .sec__h.is-in::after { width: 120px; }
.fx .sec__h::before { transform: rotate(45deg) scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .7s; }
.fx .sec__h.is-in::before { transform: rotate(45deg) scale(1); animation: fx-gem 2.4s ease-in-out 1.4s infinite; }
@keyframes fx-gem { 0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 140, 0); } 50% { box-shadow: 0 0 10px 3px rgba(255, 215, 140, .9); } }

/* ---------- スクロールで出てくる ---------- */
.fx [data-fx] { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .8s ease; transition-delay: var(--d, 0s); }
.fx [data-fx="up"] { transform: translateY(34px); }
.fx [data-fx="left"] { transform: translateX(-40px); }
.fx [data-fx="right"] { transform: translateX(40px); }
.fx [data-fx="zoom"] { transform: scale(.86); filter: blur(4px); }
.fx [data-fx="pop"] { transform: scale(.6) rotate(-4deg); }
.fx [data-fx].is-in { opacity: 1; transform: none; filter: none; }

/* 写真：寄りから引き＋光の帯が通る */
.ph, .split__ph, .band__ph { overflow: hidden; position: relative; }
.fx .ph img, .fx .split__ph img, .fx .band__ph img { transform: scale(1.18); transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.fx .is-in img, .fx .is-in .split__ph img { transform: scale(1); }
.ph::after, .split__ph::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); }
.is-in > .ph::after, .ph.is-in::after, .is-in .split__ph::after { animation: fx-sweep 1.6s ease-out .5s 1 both; }

/* ---------- 白い箱：金の縁が光りながら一周 ---------- */
.box { overflow: hidden; }
.box::after { content: ""; position: absolute; top:0;right:0;bottom:0;left:0;inset:0; pointer-events: none; border: 1px solid transparent;
  background: linear-gradient(90deg, transparent 0 40%, #f5d39a 50%, transparent 60% 100%) border-box; background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-edge 4s linear infinite; }
@keyframes fx-edge { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* ---------- 悩みの帯：文字がふわっと発光 ---------- */
.band__h { text-shadow: 0 0 18px rgba(255, 200, 220, .55); animation: fx-glow 3.2s ease-in-out infinite; }
@keyframes fx-glow { 0%, 100% { text-shadow: 0 0 10px rgba(255, 200, 220, .35); } 50% { text-shadow: 0 0 22px rgba(255, 210, 230, .9), 0 0 2px #fff; } }
.band > *:not(.fx-canvas) { position: relative; z-index: 4; }

/* ---------- 無料ラベル：ぴょこぴょこ＋光 ---------- */
.lbl b { position: relative; overflow: hidden; animation: fx-bounce 2.2s ease-in-out infinite; }
@keyframes fx-bounce { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-5px); } 80% { transform: translateY(0); } 88% { transform: translateY(-2px); } }
.lbl b::after, .fcard__free::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: fx-sweep 2.6s ease-in-out infinite; }
.fcard__free { position: relative; overflow: hidden; }

/* ---------- お客様の声：マーカーが引かれる ---------- */
.fx .voice__q b { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.4s ease .6s; background-image: linear-gradient(transparent 58%, #ffc9da 58%); }
.fx .voice.is-in .voice__q b { background-size: 100% 100%; }
.voice::before { animation: fx-float 3.5s ease-in-out infinite; }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- プロフィール：虹の輪が回る＋光が脈打つ ---------- */
.pf__ring { opacity: 1; animation: fx-spin 9s linear infinite; filter: saturate(1.4); }
.pf__ph::before { content: ""; position: absolute; top:-26px;right:-26px;bottom:-26px;left:-26px;inset:-26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 225, .0) 55%, rgba(255, 190, 215, .55) 64%, transparent 72%); animation: fx-pulse 2.8s ease-in-out infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pulse { 0%, 100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1.04); opacity: 1; } }

/* ---------- 実績：数字が増える・金の光が走る・月桂樹が開く ---------- */
.rec { overflow: hidden; }
.rec__num b { background-image: linear-gradient(100deg, #e6c27a 0%, #b8893f 30%, #fff6d6 48%, #ffe9a8 52%, #b8893f 70%, #e6c27a 100%); background-size: 250% 100%; animation: fx-goldtext 3s linear infinite; filter: drop-shadow(0 0 10px rgba(255, 215, 140, .45)); }
.fx .rec__lr { transition: transform 1s cubic-bezier(.3, 1.4, .5, 1) .3s, opacity .8s ease .3s; opacity: 0; }
.fx .rec__lr:first-child { transform: translateX(26px) rotate(-30deg); }
.fx .rec__lr:last-child { transform: translateX(-26px) rotate(30deg); }
.fx .rec.is-in .rec__lr { opacity: 1; transform: none; }
.rec > *:not(.fx-canvas) { position: relative; z-index: 4; }

/* ---------- Q&A：開くとふわっと ---------- */
.faq__i { transition: box-shadow .3s, transform .3s; }
.faq__i[open] { box-shadow: 0 10px 24px rgba(196, 61, 106, .14); }
.faq__i[open] .faq__a { animation: fx-open .45s ease both; }
.faq__q::after { transition: transform .3s; }
.faq__i[open] .faq__q::after { transform: rotate(180deg); }
@keyframes fx-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 流れ：スマホ画面が動く ---------- */
.ph-btn { animation: fx-tap 2.4s ease-in-out infinite; }
@keyframes fx-tap { 0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, .6); } 78% { transform: scale(.92); } 86% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(6, 199, 85, 0); } }
.ph-opt { transition: background .3s, border-color .3s; }
.ph-prog span { animation: fx-prog 4s ease-in-out infinite; }
@keyframes fx-prog { 0% { width: 0; } 25% { width: 25%; } 50% { width: 50%; } 75% { width: 75%; } 95%, 100% { width: 100%; } }
.ph-card i { transform-origin: 0 50%; animation: fx-type 3.6s ease-in-out infinite; }
.ph-card i:nth-of-type(2) { animation-delay: .25s; } .ph-card i:nth-of-type(3) { animation-delay: .5s; }
.ph-card i:nth-of-type(4) { animation-delay: .9s; } .ph-card i:nth-of-type(5) { animation-delay: 1.15s; }
@keyframes fx-type { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .4; } }
.pst + .pst::before { animation: fx-arrow 1.4s ease-in-out infinite; }
@keyframes fx-arrow { 0%, 100% { transform: translateY(-3px); opacity: .6; } 50% { transform: translateY(3px); opacity: 1; } }
.pst__n b { display: inline-block; animation: fx-glowpink 2.6s ease-in-out infinite; }
@keyframes fx-glowpink { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(196, 61, 106, .55); } }

/* ---------- 締めの言葉：ピンクの地に光が揺れる ---------- */
.closing { position: relative; overflow: hidden; background: linear-gradient(120deg, #f6e4ea, #fff2e1, #f3e3f5, #f6e4ea); background-size: 300% 300%; animation: fx-bgmove 8s ease-in-out infinite; }
@keyframes fx-bgmove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- 最後のCTA：背景が動く＋虹の光る枠 ---------- */
.final--v { isolation: isolate; overflow: hidden; background: linear-gradient(165deg, #d0487a 0%, #a32b57 30%, #6b1f3a 55%, #a32b57 78%, #d0487a 100%); background-size: 100% 300%; animation: fx-bgv 9s ease-in-out infinite; }
@keyframes fx-bgv { 0%, 100% { background-position: 0 0%; } 50% { background-position: 0 100%; } }
.final--v::before { content: ""; position: absolute; left: 50%; top: 60px; width: 640px; height: 640px; margin-left: -320px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 190, .32), rgba(255, 190, 220, .12) 45%, transparent 70%); animation: fx-breath 6s ease-in-out infinite; }
@keyframes fx-breath { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.05); } }
.final--v > *:not(.fx-canvas) { position: relative; z-index: 4; }
.final__en { animation-duration: 2.8s; }
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fcard::before { display: block !important; content: ""; position: absolute; top:-6px;right:-6px;bottom:-6px;left:-6px;inset:-6px; padding: 4px; pointer-events: none;
  background: conic-gradient(from var(--fx-a), #f3a6bd, #f5d39a, #bfe3b4, #a9cdf2, #d4b3f0, #f3a6bd); animation: fx-angle 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fcard { animation: fx-cardglow 3s ease-in-out infinite; }
@keyframes fx-cardglow { 0%, 100% { box-shadow: 0 16px 34px rgba(60, 10, 30, .3), 0 0 18px 2px rgba(255, 190, 220, .45); } 50% { box-shadow: 0 16px 34px rgba(60, 10, 30, .3), 0 0 34px 8px rgba(255, 225, 160, .75); } }
@keyframes fx-angle { to { --fx-a: 360deg; } }
.fcard__flow li { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .5s; }
.fcard__flow li::before { animation: fx-ring 2.4s ease-out infinite; }
.fcard__flow li:nth-child(2)::before { animation-delay: .4s; } .fcard__flow li:nth-child(3)::before { animation-delay: .8s; }
@keyframes fx-ring { 0% { box-shadow: 0 0 0 0 rgba(196, 61, 106, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(196, 61, 106, 0); } }

/* ---------- クリック・タップしたところに光の粒 ---------- */
.fx-dot { position: fixed; z-index: 90; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 70%); animation: fx-dot var(--t) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fx-dot { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }

/* ---------- 動きを減らす設定の人には全部止める ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-progress, .fx-canvas, .fx-dot { display: none !important; }
  .fv::after, .side__fv-wrap::after, .ph::after, .split__ph::after, .box::after, .lbl b::after, .fcard__free::after, .final--v::before { display: none; }
  .en, .band__h, .lbl b, .voice::before, .pf__ring, .pf__ph::before, .rec__num b, .ph-btn, .ph-prog span, .ph-card i, .pst + .pst::before, .pst__n b, .closing, .final--v, .fcard, .fcard::before, .fcard__flow li::before { animation: none !important; }
}

/* =====================================================================
   質素な区画のデザイン強化（2026-11-13 user「テキストだけのところにデザインを・3つのボックス等」）
   借りた要素：岡田静香様opt（虹色の枠を流す・オーロラ・斜めのリボン帯）、佐藤あきな様（別々のピンクの箱＋独立した「＋」）
   ===================================================================== */

/* セクションの通し番号を大きく薄く（右上） */
.lp-opt .page { counter-reset: sn; }
.lp-opt .sec, .lp-opt .band { counter-increment: sn; }
.lp-opt .sec::after { content: counter(sn, decimal-leading-zero); position: absolute; top: 18px; right: 14px; font-family: "Great Vibes", var(--serif); font-size: 76px; line-height: 1; color: rgba(196, 61, 106, .09); pointer-events: none; }

/* 交互にオーロラ地（ピンク×金×ラベンダーがゆっくり漂う）＋上下を波形で切る */
.lp-opt #todoku, .lp-opt #voice, .lp-opt #faq { padding-bottom: 46px; margin-top: 18px;
  background:
    radial-gradient(40% 30% at 15% 20%, rgba(255, 190, 215, .55), transparent 70%),
    radial-gradient(45% 30% at 85% 60%, rgba(255, 226, 170, .45), transparent 70%),
    radial-gradient(40% 30% at 30% 95%, rgba(214, 190, 245, .45), transparent 70%),
    #fdf1f4;
  background-size: 160% 160%, 160% 160%, 160% 160%, auto; animation: fx-aurora 14s ease-in-out infinite alternate;
  -webkit-mask: radial-gradient(18px 12px at 18px 0, transparent 98%, #000) -18px 0 / 36px 51% repeat-x, radial-gradient(18px 12px at 18px 100%, transparent 98%, #000) -18px 100% / 36px 51% repeat-x;
  mask: radial-gradient(18px 12px at 18px 0, transparent 98%, #000) -18px 0 / 36px 51% repeat-x, radial-gradient(18px 12px at 18px 100%, transparent 98%, #000) -18px 100% / 36px 51% repeat-x; }
@keyframes fx-aurora { 0% { background-position: 0% 0%, 100% 0%, 0% 100%, 0 0; } 100% { background-position: 100% 60%, 0% 100%, 80% 0%, 0 0; } }
.lp-opt #todoku::before, .lp-opt #voice::before, .lp-opt #faq::before, .lp-opt #todoku + .sec::before, .lp-opt #voice + .sec::before, .lp-opt #faq + .sec::before { display: none; }
.lp-opt #todoku + .sec, .lp-opt #voice + .sec, .lp-opt #faq + .sec { margin-top: 0; }

/* 見出し：斜めのリボン帯の上に英字（岡田様 案B の型） */
.lp-opt .sec > .en { display: table; margin: 0 auto; padding: 5px 22px 6px; position: relative; -webkit-text-fill-color: #fff; color: #fff; background: none; animation: none; font-size: 12px; letter-spacing: .2em; z-index: 0; }
.lp-opt .sec > .en::before { content: ""; position: absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index: -1; transform: skewX(-14deg);
  background: linear-gradient(90deg, #c43d6a, #e07aa0, #d6a861, #c43d6a); background-size: 300% 100%; animation: fx-flow 6s linear infinite; box-shadow: 0 4px 10px rgba(196, 61, 106, .25); }

/* --- 悩みの帯：吹き出し2つ＋金の枠のメッセージ --- */
.worry { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.worry__b { position: relative; max-width: 86%; padding: 14px 18px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.8; border-radius: 18px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); margin: 0 !important; }
.worry__b--l { align-self: flex-start; border-bottom-left-radius: 4px; }
.worry__b--r { align-self: flex-end; border-bottom-right-radius: 4px; background: #ffe6ee; }
.worry__b::after { content: "…"; position: absolute; top: -12px; right: 14px; font-size: 14px; color: #fff; background: var(--rose); border-radius: 10px; padding: 0 8px; line-height: 20px; animation: fx-typing 1.4s steps(3) infinite; }
.worry__b--r::after { right: auto; left: 14px; }
@keyframes fx-typing { 0% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: .4; } }
.gate { margin-top: 30px; padding: 22px 12px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.9; color: #fff3d6;
  border: 1px solid rgba(236, 210, 154, .85); outline: 1px solid rgba(236, 210, 154, .35); outline-offset: 5px; background: rgba(0, 0, 0, .14); }

/* --- 診断：3つのボックス --- */
.tri { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; padding: 0; }
.tri li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 4px 12px; text-align: center; background: #fff; border: 1px solid var(--gold-l); box-shadow: 0 8px 18px rgba(107, 31, 58, .08); overflow: hidden; }
.tri li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #f3a6bd, #f5d39a, #bfe3b4, #a9cdf2, #d4b3f0); background-size: 200% 100%; animation: fx-flow 4s linear infinite; }
.tri__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--rose-soft); display: grid; place-items: center; }
.tri__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tri__big { margin-top: 6px; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--rose); }
.tri__big--s { font-family: var(--sans); font-size: 22px; line-height: 34px; color: #06c755; }
.tri__t { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--wine); }
.ribbon-card { position: relative; margin-top: 22px; padding: 20px 18px 18px; background: #fff; text-align: center; font-size: 15px; border: 1px solid var(--gold-l); }
.ribbon-card::before { content: "POINT"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 1px 14px; font-family: var(--serif); font-size: 11px; letter-spacing: .2em; color: #fff; background: var(--gold); }
.kikkake { margin-top: 20px !important; text-align: center; font-family: var(--serif); font-size: 16px; line-height: 2; color: var(--wine); }
.kikkake b { font-size: 18px; background: linear-gradient(transparent 62%, #fbe0e8 62%); }

/* --- 届くもの：別々のギフトカード＋独立した「＋」 --- */
.gifts { margin-top: 6px; }
.gift { position: relative; padding: 46px 18px 20px; background: #fff; text-align: center; border: 1px solid var(--gold-l); box-shadow: 0 12px 26px rgba(196, 61, 106, .12); }
.gift::before { content: ""; position: absolute; top:5px;right:5px;bottom:5px;left:5px;inset:5px; border: 1px solid #f3e4cf; pointer-events: none; }
.gift__no { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); margin: 0 !important; padding: 4px 18px 6px; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #c43d6a, #e27ea3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); padding-bottom: 12px; }
.gift__no span { display: block; font-size: 9px; letter-spacing: .25em; margin-bottom: 2px; }
.gift__ic { display: grid; place-items: center; width: 48px; height: 48px; margin: 6px auto 0; border-radius: 50%; background: linear-gradient(135deg, #fff3cf, #e6c27a); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--gold-l); animation: fx-pulse 3s ease-in-out infinite; }
.gift__ic svg { width: 26px; height: 26px; fill: none; stroke: #8a5a1c; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.gift__t { margin-top: 12px !important; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--wine); }
.gift__t + p { margin-top: 12px; font-size: 14.5px; }
.gifts__plus { margin: 4px 0 !important; text-align: center; font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--rose); animation: fx-spinpop 3s ease-in-out infinite; }
@keyframes fx-spinpop { 0%, 80%, 100% { transform: rotate(0) scale(1); } 90% { transform: rotate(90deg) scale(1.2); } }

/* --- 結果のイメージ：結果カード＋図解 --- */
.rcard { position: relative; margin-top: 22px; background: #fff; border: 1px solid var(--gold-l); box-shadow: 0 12px 26px rgba(107, 31, 58, .1); padding: 0 18px 20px; overflow: hidden; }
.rcard__head { margin: 0 -18px !important; padding: 9px 16px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(90deg, #6b1f3a, #a32b57); }
.rcard__head span { font-family: var(--serif); font-size: 11px; letter-spacing: .2em; padding: 1px 8px; border: 1px solid rgba(255, 255, 255, .6); }
.rcard__t { margin-top: 16px !important; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--wine); }
.rcard__dia { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 18px; }
.rcard__c { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; font-size: 12px; line-height: 1.5; color: var(--wine); text-align: center; background: radial-gradient(circle at 35% 30%, #fff, #fbe3eb); border: 1.5px solid var(--rose); }
.rcard__c--r { background: radial-gradient(circle at 35% 30%, #fff, #fbf0d8); border-color: var(--gold); }
.rcard__c b { font-family: var(--serif); font-size: 17px; }
.rcard__x { flex: none; font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--gold); }
.rcard__x::before { content: "と"; }
.rcard__dia .rcard__c:first-child { animation: fx-float 3.2s ease-in-out infinite; }
.rcard__dia .rcard__c--r { animation: fx-float 3.2s ease-in-out 1.6s infinite; }
.rcard > p:not(.rcard__head):not(.rcard__t) { font-size: 14.5px; text-align: center; }

/* 締めの言葉：上下に金のリボン */
.lp-opt .closing { border-top: 2px solid var(--gold-l); border-bottom: 2px solid var(--gold-l); font-weight: 700; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .lp-opt #todoku, .lp-opt #voice, .lp-opt #faq, .lp-opt .sec > .en::before, .tri li::before, .worry__b::after, .gift__ic, .gifts__plus, .rcard__c { animation: none !important; }
}


/* =====================================================================
   PCの外側の背景（中央の列の外）：神秘的な夜空のアニメーション（2026-11-13 user「洗練された感じで・神秘的に」）
   描画は opt_fx.js の mysticBg()。スマホでは列が全幅なので出さない
   ===================================================================== */
.fx-bg { display: none; }
@media (min-width: 900px) {
  .fx body { background: #f7dbe5; }
  .fx-bg { display: block; position: fixed; top:0;right:0;bottom:0;left:0;inset:0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .fx .layout { position: relative; z-index: 1; }
  .fx .page { box-shadow: 0 0 0 1px rgba(220, 195, 154, .5), 0 0 50px rgba(196, 61, 106, .15); }
  .fx .toc__ttl { color: var(--wine); border-bottom-color: var(--wine); }
  .fx .toc ol { box-shadow: 0 10px 30px rgba(196, 61, 106, .15), 0 0 0 1px rgba(220, 195, 154, .5); }
  .fx .side__fv-wrap { box-shadow: 0 0 0 1px rgba(220, 195, 154, .6), 0 14px 34px rgba(160, 60, 100, .2); }
}


/* ボタンはクオルレボ（中様×SCALIX/LP01）と同じ拡大縮小＋左→右の光だけ（2026-11-13 user「普通にクオルレボと同じで大丈夫」）。lp.css の設定をそのまま使う */

/* 最後のCTAカード：回る虹の枠はやめて金の静かな枠（2026-11-13「くるくる回る細い線はダサい」） */
.fcard::before { background: linear-gradient(135deg, #b8862f, #f3d68a 30%, #fff3cf 50%, #d9ad55 70%, #a8792a) !important; animation: none !important; }

/* FV画像の斜めの光・常時キラキラは不要（2026-11-13 user指示）。PC左のFV画像も同じ */
.fv::after, .side__fv-wrap::after { display: none !important; }