/* =====================================================================
   動き（.js-motion が付いているときだけ有効。
   「視差効果を減らす」設定の人、JSが動かない環境では静止版になります）
   動きの強さを変えたいときは、このファイルだけ編集してください。
   ===================================================================== */
.dome .dyn, .naru-visual .dyn { display: none; }
.js-motion .dome .dyn, .js-motion .naru-visual .dyn { display: inline; }
.js-motion .dome .stat, .js-motion .naru-visual .stat { display: none; }

/* --- ヒーロー：読み込み時に一度だけ。見出しがせり上がる／輪がレーダーのように広がる／写真がゆっくり寄る --- */
.js-motion .hero h1 .ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js-motion .hero h1 .ln > span { display: inline-block; transform: translateY(110%); animation: rise 1s cubic-bezier(.2,.8,.15,1) .15s forwards; }
.js-motion .hero h1 .ln:last-child > span { animation-delay: .32s; }
.js-motion .hero-pill, .js-motion .hero-lead, .js-motion .hero-sub, .js-motion .stats, .js-motion .places { opacity: 0; transform: translateY(14px); animation: fade-up .8s ease-out forwards; }
.js-motion .hero-pill { animation-delay: .05s; }
.js-motion .hero-lead { animation-delay: .65s; }
.js-motion .hero-sub { animation-delay: .75s; }
.js-motion .stats { animation-delay: .9s; }
.js-motion .places { animation-delay: 1.1s; }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* レーダー：中心から波が広がり、点が脈打つ（検知エリアのイメージ） */
.js-motion .field i { animation: radar 4.8s cubic-bezier(.2,.5,.3,1) infinite; opacity: 0; }
.js-motion .field i:nth-of-type(1) { animation-delay: .6s; }
.js-motion .field i:nth-of-type(2) { animation-delay: 2.2s; }
.js-motion .field i:nth-of-type(3) { animation-delay: 3.8s; }
.js-motion .field .f-dot { animation: dot 2.4s ease-in-out infinite; }
.js-motion .field .f-bound { animation: bound 40s linear infinite; }
@keyframes radar { 0% { transform: scale(.15); opacity: 0; } 14% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes dot { 0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 0 32px 8px rgba(120,190,240,.5); } 50% { box-shadow: 0 0 0 14px rgba(255,255,255,.06), 0 0 48px 14px rgba(120,190,240,.75); } }
@keyframes bound { to { transform: rotate(360deg); } }

/* --- 仕組み図：電波の波紋／スクロールに合わせて商品がエリアの外へ出る（js/motion.js が位置を決める） --- */
.js-motion .dome-wave ellipse { transform-box: fill-box; transform-origin: 50% 100%; animation: wave 4.8s cubic-bezier(.3,.4,.3,1) infinite; opacity: 0; }
.js-motion .dome-wave ellipse:nth-child(2) { animation-delay: 2.4s; }
@keyframes wave { 0% { transform: scale(.05); opacity: .55; } 100% { transform: scale(1); opacity: 0; } }
.dome .mv-tag { fill: #20324a; transition: fill .15s; }
.dome .lbl, .dome .cap { transition: opacity .2s; }
.dome .lbl-on, .dome .cap { opacity: 0; }
.dome.is-out .lbl-off { opacity: 0; }
.dome.is-out .lbl-on, .dome.is-out .cap { opacity: 1; }
.dome.is-out .mv-tag { fill: #e8380d; }
.dome.is-out .lbl-on { animation: shake .5s ease-in-out .05s 2; }
.dome .rings circle { fill: none; stroke: #e8380d; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dome.is-out .rings circle { animation: ping 1.5s ease-out infinite; }
.dome.is-out .rings circle:nth-child(2) { animation-delay: .5s; }
.dome.is-out .rings circle:nth-child(3) { animation-delay: 1s; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* --- 3つの「鳴る」：見えている間だけループ --- */
.naru-visual .na-tag { fill: #8fa8b9; opacity: 0; }
.naru-visual .na-rings { opacity: 0; transform-box: fill-box; transform-origin: center; }
.naru-visual.play .na-tag { animation: na-move 4.6s ease-in-out infinite, na-col 4.6s steps(1, end) infinite; }
.naru-visual.play .na-rings { animation: na-rings 4.6s ease-in-out infinite; }
@keyframes na-move { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 14% { transform: translateX(0); } 54% { transform: translateX(232px); } 90% { transform: translateX(232px); opacity: 1; } 98%, 100% { transform: translateX(232px); opacity: 0; } }
@keyframes na-col { 0% { fill: #8fa8b9; } 46% { fill: #e8380d; } 100% { fill: #e8380d; } }
@keyframes na-rings { 0%, 50% { opacity: 0; transform: scale(.85); } 58% { opacity: 1; transform: scale(1); } 74% { transform: scale(1.06); } 90% { opacity: 1; } 98%, 100% { opacity: 0; } }

.naru-time .nt-r { transform-box: fill-box; transform-origin: center; opacity: 0; }
.naru-time.play .nt-r { animation: ripple 2.8s cubic-bezier(.3,.4,.3,1) infinite; }
.naru-time.play .nt-r:nth-child(2) { animation-delay: .5s; }
.naru-time.play .nt-r:nth-child(3) { animation-delay: 1s; }
@keyframes ripple { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.06); opacity: 0; } }
.naru-time .nt-prog { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .35; }
.naru-time.play .nt-prog { animation: prog 5s linear infinite; }
@keyframes prog { 0% { stroke-dashoffset: 1; } 92%, 100% { stroke-dashoffset: 0; } }
.naru-time.play b { animation: beat 1.4s ease-in-out infinite; transform-origin: 50% 70%; display: inline-block; }
@keyframes beat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.1); } 16% { transform: scale(1); } 24% { transform: scale(1.06); } 32% { transform: scale(1); } }

/* --- 入場（意味のあるものだけ）：ページ全体に一律には付けていません --- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js-motion [data-reveal="left"] { transform: translateX(-40px); }
.js-motion [data-reveal="right"] { transform: translateX(40px); transition-delay: .25s; }
.js-motion [data-reveal="pop"] { transform: scale(.4); transition-delay: .15s; transition-timing-function: cubic-bezier(.3,1.6,.4,1); }
.js-motion [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }
.js-motion [data-reveal="wipe"].in { clip-path: inset(0 0 0 0); }

/* --- データ：見えた瞬間に描く --- */
.js-motion .sim-bar { width: 0; min-width: 0; overflow: hidden; transition: width 1.3s cubic-bezier(.2,.7,.2,1), min-width 1.3s; }
.js-motion .sim.in .sim-bar { width: var(--w); min-width: 96px; }
.js-motion .sim.in .sim-bar.sg { transition-delay: .35s; }
.js-motion .sim-result { opacity: 0; transform: translateY(10px); transition: opacity .6s 1.4s, transform .6s 1.4s; }
.js-motion .sim.in .sim-result { opacity: 1; transform: none; }

.js-motion .donut .d-arc { stroke-dasharray: 0 527.8; transition: stroke-dasharray 1.8s cubic-bezier(.3,.1,.2,1); }
.js-motion .donut.in .d-arc { stroke-dasharray: 487.1 527.8; }

.js-motion .chart-svg .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .chart.in .chart-svg .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.35,.1,.25,1) .2s; }
.js-motion .chart-svg .pt, .js-motion .chart-svg .vl { opacity: 0; }
.js-motion .chart-svg .pt { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js-motion .chart.in .chart-svg .pt { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i) * .17s + .25s); }
.js-motion .chart.in .chart-svg .vl { opacity: 1; transition: opacity .5s; transition-delay: calc(var(--i) * .17s + .35s); }

/* --- 操作に応える動き（動きを減らす設定でも、色や位置の変化は残します） --- */
.btn-main span[aria-hidden] { display: inline-block; transition: transform .25s; }
.btn-main:hover span[aria-hidden] { transform: translateX(6px); }
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.btn-gold:hover::after { transform: translateX(120%); transition: transform .8s ease; }
.faq { transition: border-color .2s, box-shadow .2s; }
.faq[open] { border-color: #8cc0e3; box-shadow: 0 6px 18px rgba(27,95,140,.1); }
.faq summary::after { transition: transform .25s; }
.faq[open] summary::after { transform: translateY(-50%) rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { height: 0; overflow: hidden; transition: height .35s ease, content-visibility .35s allow-discrete; }
  .faq[open]::details-content { height: auto; }
}
.voices li { transition: transform .25s, box-shadow .25s; }
.voices li:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16,40,70,.12); }

/* --- 数字の見せ方（js/motion.js の data-fx とセット。動きを減らす設定では何も付かず、最初から最終の見た目） --- */
.odo { display: inline-flex; vertical-align: bottom; height: 1.15em; overflow: hidden; line-height: 1.15; font-variant-numeric: tabular-nums; }
.odo-col { display: block; height: 1.15em; overflow: hidden; }
.odo-st { display: flex; flex-direction: column; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.odo-st > span { display: block; height: 1.15em; line-height: 1.15em; text-align: center; }
.odo-sep { display: block; height: 1.15em; line-height: 1.15em; }
.odo.go .odo-st { transform: translateY(calc(var(--d) * -1.15em)); }
/* リング（トップの「防犯効果を実感した」） */
.stat-ring { position: relative; flex: none; width: 112px; height: 112px; }
.stat-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-ring circle { fill: none; stroke-width: 9; }
.stat-ring .bg { stroke: rgba(255,255,255,.2); }
.stat-ring .fg { stroke: #6fd6ff; stroke-linecap: round; stroke-dasharray: 326.7 999; stroke-dashoffset: calc(326.7 * (1 - var(--p))); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1); }
.js-motion .stat-ring:not(.go) .fg { stroke-dashoffset: 326.7; }
.stat-ring-ct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.stats .stat-ring b { font-size: 32px; font-weight: 600; }
.stats .stat-ring-ct span { font-size: 15px; font-weight: 500; margin-left: 1px; }
@media (max-width: 600px) {
  .stat-ring { width: 96px; height: 96px; }
  .stats .stat-ring b { font-size: 27px; }
}
/* ポンと弾む（月額） */
[data-fx="pop"] { display: inline-block; transform-origin: left bottom; }
.js-motion [data-fx="pop"]:not(.go) { opacity: 0; transform: scale(.4); }
.js-motion [data-fx="pop"].go { animation: num-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes num-pop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
/* マーカー（防犯率） */
[data-fx="mark"] { position: relative; isolation: isolate; }
[data-fx="mark"]::after { content: ""; position: absolute; left: 0; bottom: .06em; height: .2em; width: 100%; background: rgba(47,199,184,.38); z-index: -1; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.js-motion [data-fx="mark"]:not(.go)::after { width: 0; }
/* 星が順に点灯（満足度） */
.js-motion .sv-stars i { transition: width 1s cubic-bezier(.2,.7,.2,1); }
.js-motion .sv-scores:not(.in) .sv-stars i { width: 0 !important; }
.sv-score-list li:nth-child(1) .sv-stars i { transition-delay: .3s; }
.sv-score-list li:nth-child(2) .sv-stars i { transition-delay: .5s; }
.sv-score-list li:nth-child(3) .sv-stars i { transition-delay: .7s; }
.sv-score-list li:nth-child(4) .sv-stars i { transition-delay: .9s; }
.sv-score-list li:nth-child(5) .sv-stars i { transition-delay: 1.1s; }
/* 桁めくりの中の span に、周りのCSS（.stats dd span など）の文字サイズ・余白が効かないようにする */
b .odo.odo, b .odo.odo span { font-size: inherit; font-family: inherit; font-weight: inherit; margin: 0; letter-spacing: inherit; }