/* =====================================================================
   E案 第2弾：アニメーション2つ／比較表／費用の主役化／商品構成／実証データ
   （e.css の後に読み込む）
   ===================================================================== */

/* ---- ① いたずらされた瞬間鳴る（ワイヤーを切ろうとした瞬間に鳴る） ---- */
.naru-tamper, .back-visual { background: #f1f6f9; }
.t-box { fill: #fff; stroke: #9fb3c6; stroke-width: 2.5; }
.t-wire { fill: none; stroke: #20324a; stroke-width: 3; stroke-linecap: round; }
.t-rings { stroke: #e8380d; stroke-width: 3; }
.t-scissors circle { fill: none; stroke: #20324a; stroke-width: 5; }
.t-scissors .blade rect { fill: #20324a; }
.t-bubble rect, .t-bubble path { fill: #d9421f; }
.t-bubble text { fill: #fff; font-size: 22px; font-weight: 900; font-family: var(--font-head); }
/* 静止（動きを減らす設定など）：切られて、鳴った後の状態 */
.t-tag rect { fill: #e8380d; }
.t-wire { stroke-dasharray: 6 8; opacity: .45; }
.t-scissors { transform: translate(352px, 96px); }
.t-scissors .b1 { transform-origin: 0 0; transform: rotate(176deg); }
.t-scissors .b2 { transform-origin: 0 0; transform: rotate(184deg); }
/* 動く */
.naru-tamper.play .t-scissors { animation: t-move 5.4s ease-in-out infinite; }
.naru-tamper.play .t-scissors .b1 { animation: t-b1 5.4s ease-in-out infinite; }
.naru-tamper.play .t-scissors .b2 { animation: t-b2 5.4s ease-in-out infinite; }
.naru-tamper.play .t-wire { animation: t-wire 5.4s steps(1, end) infinite; }
.naru-tamper.play .t-tag rect { animation: t-tag 5.4s steps(1, end) infinite; }
.naru-tamper.play .t-rings { animation: t-rings 5.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.naru-tamper.play .t-bubble { animation: t-bubble 5.4s ease-in-out infinite; }
@keyframes t-move { 0% { transform: translate(540px, 96px); } 22%, 88% { transform: translate(352px, 96px); } 100% { transform: translate(540px, 96px); } }
@keyframes t-b1 { 0%, 24% { transform: rotate(166deg); } 30% { transform: rotate(178deg); } 36% { transform: rotate(164deg); } 42%, 100% { transform: rotate(178deg); } }
@keyframes t-b2 { 0%, 24% { transform: rotate(194deg); } 30% { transform: rotate(182deg); } 36% { transform: rotate(196deg); } 42%, 100% { transform: rotate(182deg); } }
@keyframes t-wire { 0% { stroke-dasharray: none; opacity: 1; } 40% { stroke-dasharray: 6 8; opacity: .45; } 100% { stroke-dasharray: 6 8; opacity: .45; } }
@keyframes t-tag { 0% { fill: #5d7184; } 40% { fill: #e8380d; } 100% { fill: #e8380d; } }
@keyframes t-rings { 0%, 39% { opacity: 0; transform: scale(.8); } 46% { opacity: 1; transform: scale(1); } 60% { transform: scale(1.08); } 78% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; } }
@keyframes t-bubble { 0%, 39% { opacity: 0; } 46%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---- ② エリアに戻した瞬間、止まる ---- */
.b-area { fill: rgba(59,139,196,.1); stroke: #2a74a6; stroke-width: 3; stroke-dasharray: 10 8; }
.b-box { fill: #fff; stroke: #8fa8b9; stroke-width: 2.5; }
.b-tag { fill: #2a74a6; }
.b-rings circle { fill: none; stroke: #e8380d; stroke-width: 3; opacity: 0; transform-box: view-box; }
.b-lbl { fill: #2a74a6; font-size: 18px; font-family: var(--font-head); }
.b-on rect, .b-on path { fill: #d9421f; }
.b-off rect, .b-off path { fill: #33485c; }
.b-on text, .b-off text { fill: #fff; font-size: 19px; font-weight: 900; font-family: var(--font-head); }
/* 静止：エリアに戻って止まった状態 */
.b-item { transform: translate(150px, 150px); }
.b-on { opacity: 0; }
.b-off { opacity: 1; }
.back-visual.play .b-item { animation: b-move 6s cubic-bezier(.6,0,.2,1) infinite; }
.back-visual.play .b-tag { animation: b-tag 6s steps(1, end) infinite; }
.back-visual.play .b-rings circle { transform: translate(24px, -18px); animation: b-ping 1.3s ease-out infinite; }
.back-visual.play .b-rings circle:nth-child(2) { animation-delay: .43s; }
.back-visual.play .b-rings circle:nth-child(3) { animation-delay: .86s; }
.back-visual.play .b-rings { animation: b-ringsw 6s steps(1, end) infinite; }
.back-visual.play .b-on { animation: b-on 6s ease-in-out infinite; }
.back-visual.play .b-off { animation: b-offl 6s ease-in-out infinite; }
@keyframes b-move { 0%, 24% { transform: translate(380px, 190px); } 52%, 92% { transform: translate(150px, 150px); } 100% { transform: translate(380px, 190px); } }
@keyframes b-tag { 0% { fill: #e8380d; } 50% { fill: #2a74a6; } 100% { fill: #e8380d; } }
@keyframes b-ringsw { 0% { visibility: visible; } 50% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes b-ping { 0% { transform: translate(24px, -18px) scale(.5); opacity: .9; } 100% { transform: translate(24px, -18px) scale(4.2); opacity: 0; } }
@keyframes b-on { 0%, 46% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes b-offl { 0%, 48% { opacity: 0; } 56%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ---- ③ 比較表：S-Guardを主役に ---- */
.matrix-wrap { overflow-x: auto; border-radius: 12px; margin-top: 8px; }
.matrix { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.matrix th, .matrix td { padding: 18px 16px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.7; background: #fff; }
.matrix thead th { background: #eef3f7; font-family: var(--font-head); font-size: 15.5px; }
.matrix tbody th { text-align: left; font-weight: 700; background: #f7fafc; width: 17%; font-size: 14px; }
.matrix .m-sg { background: #eaf3fa; color: var(--ink); border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.matrix thead .m-sg { background: var(--blue); color: #fff; font-size: 18px; border-radius: 12px 12px 0 0; border: 2px solid var(--blue); }
.matrix tbody tr:last-child .m-sg { border-bottom: 2px solid var(--blue); }
.matrix td b { font-family: var(--font-head); font-size: 15.5px; color: var(--blue-text); }
.matrix td small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.matrix .m-na { color: #9aa9b6; }
.matrix td:not(.m-sg) { color: #4a5d70; }
.matrix .cell { word-break: auto-phrase; line-break: strict; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.matrix td b { display: block; }
.mk { font-style: normal; font-weight: 700; font-size: 26px; line-height: 1; }
.mk-o { color: var(--blue); }
.mk-m { color: #5b9bd0; font-weight: 400; }
.mk-t { color: #d98a1f; }
.mk-x { color: #9aa9b6; }
.matrix-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 4px; font-size: 13.5px; color: #3b4d60; }
.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.matrix-legend .mk { font-size: 18px; }
.matrix-note { max-width: 860px; margin: 18px auto 0; text-align: center; font-size: 13.5px; color: #3b4d60; }

/* ---- ④ 費用シミュレーション：主役のセクション ---- */
.savings { background: linear-gradient(180deg, #0d2238 0%, #12385a 100%); color: #fff; padding: clamp(64px, 9vw, 110px) 24px; text-align: center; }
.sv-lead { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 10px; }
.sv-title { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.5; color: #fff; margin-bottom: 44px; }
.sv-num { display: inline-flex; align-items: baseline; margin: 0 .15em; color: #7fd3ff; }
.sv-num b { font-family: var(--num); font-weight: 700; font-size: 2.3em; line-height: 1; }
.sv-num i { font-style: normal; font-size: 1.1em; font-weight: 700; margin-left: 2px; }
.savings .sim { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); padding: clamp(22px, 4vw, 44px); max-width: 960px; margin: 0 auto; text-align: left; border-radius: 14px; }
.savings .sim-row { grid-template-columns: 190px 1fr; margin-bottom: 18px; }
.savings .sim-name { color: #fff; font-size: 16px; }
.savings .sim-bar { height: 76px; border-radius: 8px; padding-left: 24px; align-items: center; white-space: nowrap; }
.js-motion .savings .sim.in .sim-bar { min-width: 190px; }
.savings .sim-bar b { font-size: 56px; }
.savings .sim-bar em { font-style: normal; font-size: 20px; font-weight: 700; margin-left: 4px; align-self: flex-end; padding-bottom: 14px; white-space: nowrap; }
.savings .sim-bar.gate { background: #4d6a9c; }
.savings .sim-bar.sg { background: #19a58f; box-shadow: 0 0 36px rgba(25,165,143,.5); }
.savings .sim-result { margin-top: 26px; justify-content: center; font-size: 22px; color: #fff; }
.savings .sim-result b { font-size: 76px; color: #7fd3ff; margin: 0 4px; }
.savings .sim-result i { font-style: normal; }
.savings .sim-note { text-align: center; color: rgba(255,255,255,.65); }
@media (max-width: 700px) {
  .savings .sim-row { grid-template-columns: 1fr; gap: 6px; }
  .savings .sim-bar { height: 62px; }
  .savings .sim-bar b { font-size: 40px; white-space: nowrap; }
  .js-motion .savings .sim.in .sim-bar { min-width: 150px; }
  .savings .sim-result b { font-size: 60px; }
}

/* ---- ⑥ 商品構成：説明文なし。画像と名前だけ ---- */
.lineup li { padding: 22px 22px 20px; text-align: center; }
.lineup figure { margin-bottom: 14px; }
.lineup h3 { margin: 0; font-size: 18px; color: var(--ink); }

/* ---- ⑦ 実証データ ---- */
.proof2 { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 4vw, 44px); margin: 36px 0; text-align: center; }
.proof2-tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--blue-text); background: #eaf3fa; padding: 4px 16px; border-radius: 999px; }
.proof2-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 36px; margin: 18px 0 30px; }
.proof2-big { display: flex; align-items: baseline; color: var(--blue); line-height: 1; }
.proof2-big b { font-family: var(--num); font-weight: 700; font-size: clamp(84px, 12vw, 148px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proof2-big span { font-size: clamp(32px, 4vw, 52px); font-weight: 700; margin-left: 4px; }
.proof2-cap { text-align: left; max-width: 17em; font-size: 15px; line-height: 1.8; color: #34475a; }
.proof2-cap strong { display: block; font-family: var(--font-head); font-size: 22px; color: var(--ink); }
.stores { display: grid; gap: 12px; max-width: 760px; margin: 0 auto 22px; text-align: left; }
.stores li { display: grid; grid-template-columns: 150px 1fr 150px; gap: 16px; align-items: center; }
.st-name { font-weight: 700; font-family: var(--font-head); font-size: 16px; }
.st-name small, .st-n small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); font-family: var(--font); }
.st-bar { height: 12px; border-radius: 6px; background: #e6edf2; overflow: hidden; }
.st-bar i { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 6px; }
.js-motion .st-bar i { width: 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.js-motion .proof2.in .st-bar i { width: var(--w); }
.js-motion .proof2.in .stores li:nth-child(2) .st-bar i { transition-delay: .12s; }
.js-motion .proof2.in .stores li:nth-child(3) .st-bar i { transition-delay: .24s; }
.js-motion .proof2.in .stores li:nth-child(4) .st-bar i { transition-delay: .36s; }
.st-n { text-align: right; font-size: 13.5px; color: #4a5d70; }
.st-n b { font-family: var(--num); font-size: 24px; color: var(--ink); }
.proof2-sub { max-width: 40em; margin: 6px auto 0; font-size: 14px; color: #34475a; }
.proof2 .proof-foot { text-align: center; }
@media (max-width: 700px) {
  .stores li { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .stores .st-bar { grid-column: 1 / -1; order: 3; }
  .proof2-cap { text-align: center; }
}

/* ---- エリアを立体的に（半球のドーム） ---- */
.m-dome-fill { fill: url(#none); fill: rgba(108,196,255,.12); }
.m-dome-line { fill: none; stroke: #6cc4ff; stroke-width: 3; transition: stroke .3s; }
.m-dome-line.m-fine { stroke-width: 1.5; opacity: .45; }
.mech-fig[data-state="1"] .m-dome-line, .mech-fig[data-state="1"] .m-area { stroke: #ff5a36; }
.mech-fig[data-state="1"] .m-dome-fill { fill: rgba(255,90,54,.12); }
.m-dome-fill { transition: fill .3s; }
.b-dome-fill { fill: rgba(59,139,196,.12); }
.b-dome-line { fill: none; stroke: #2a74a6; stroke-width: 2.5; }
.b-dome-line.b-fine { stroke-width: 1.4; opacity: .45; }

/* スマホ：横にスクロールせず、項目ごとのカードに積む（見切れ防止） */
@media (max-width: 600px) {
  .matrix-wrap { overflow: visible; }
  .matrix { min-width: 0; display: block; }
  .matrix thead { display: none; }
  .matrix tbody, .matrix tr { display: block; }
  .matrix tbody tr { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
  .matrix tbody th { display: block; width: auto; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
  .matrix td { display: grid; grid-template-columns: 7.2em 1fr; gap: 10px; align-items: baseline; padding: 10px 14px; text-align: left; font-size: 14px; }
  .matrix td::before { font-weight: 700; color: #4a5d70; font-size: 12.5px; }
  .matrix td:nth-child(2)::before { content: "S-Guard"; color: var(--blue-text); }
  .matrix td:nth-child(3)::before { content: "防犯ゲート"; }
  .matrix td:nth-child(4)::before { content: "従来の防犯タグ"; }
  .matrix td:nth-child(5)::before { content: "防犯カメラ"; }
  .matrix .m-sg { border-left: 0; border-right: 0; }
  .matrix tbody tr:last-child .m-sg { border-bottom: 1px solid var(--line); }
  .matrix td small { margin-top: 0; }
  .matrix .cell { flex-direction: row; align-items: baseline; gap: 10px; }
  .matrix .cell > span { flex: 1; text-align: left; }
  .matrix .mk { font-size: 20px; flex: none; width: 1.2em; text-align: center; }
}
.survey { margin: 40px 0 8px; }
.survey-title { margin: 0 0 14px; text-align: center; }
.survey-wrap { position: relative; }
.survey-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 0; list-style: none; -webkit-overflow-scrolling: touch; }
.survey-card { flex: 0 0 min(340px, 88%); scroll-snap-align: start; }
.survey-card a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #cfd8de; border-radius: 10px; padding: 18px 18px 14px; color: inherit; text-decoration: none; text-align: left; }
.survey-store { font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; min-height: 3em; }
.survey-main { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.survey-main span { color: #e0a21a; font-size: 20px; letter-spacing: 1px; }
.survey-main b { font-size: 13.5px; color: var(--blue-text); }
.survey-key { margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.survey-key .sk-l { font-weight: 700; font-size: 14px; }
.survey-key .sk-s { color: #e0a21a; letter-spacing: 1px; font-size: 16px; }
.survey-key .sk-n { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.survey-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.survey-more { margin-top: auto; font-size: 13px; color: var(--blue-text); font-weight: 700; }
.survey-card a:hover .survey-more { text-decoration: underline; }
.survey-all { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.survey-all a { display: block; margin-top: 4px; font-size: 14px; color: var(--blue-text); text-decoration: underline; }
.survey-btn { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .survey-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; border: 1px solid #cfd8de; border-radius: 50%; background: #fff; color: var(--blue-text); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(16,40,70,.15); z-index: 2; }
  .survey-btn.prev { left: -18px; }
  .survey-btn.next { right: -18px; }
  .survey-btn:hover { background: #eaf3fa; }
}
.survey-card a.has-thumb { flex-direction: row; gap: 14px; align-items: stretch; }
.survey-thumb { flex: 0 0 96px; align-self: flex-start; border: 1px solid #dfe5ea; border-radius: 4px; overflow: hidden; background: #f3f6f8; aspect-ratio: 480 / 679; }
.survey-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.survey-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.survey-store { min-height: 0; }
@media (max-width: 380px) { .survey-thumb { flex-basis: 78px; } }
.survey-ctl { text-align: center; margin: 4px 0 6px; }
.survey-toggle { appearance: none; border: 1px solid #cfd8de; background: #fff; color: #4a5d70; font-size: 12.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.survey-toggle:hover { background: #eaf3fa; }

.survey-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.survey-scroll::-webkit-scrollbar { display: none; }
.survey-scroll.is-flow { scroll-snap-type: none; }
/* 悩みの図: S-Guardの図(濃紺+青)と区別するため、明るいグレー+赤系にする */
figure.problem-fig { background: #f4f1ec; border: 1px solid #e0dbd2; }
.problem-fig .pf-floor { fill: #fff; stroke: #cfc8bc; }
.problem-fig .pf-shelf rect { fill: #e6e1d8; stroke: #c9c2b5; }
.problem-fig .pf-cone { fill: rgba(110,106,98,.12); stroke: #9a948a; }
.problem-fig .pf-cam rect, .problem-fig .pf-cam circle, .problem-fig .pf-gate rect { fill: #86817a; }
.problem-fig .pf-lbl { fill: #3a352e; }
.problem-fig .pf-lbl-dead { fill: #c4472b; }
.problem-fig .pf-dead { stroke: #d9654a; }
.problem-fig #pfHatch line { stroke: rgba(217,101,74,.28); }
.problem-fig .pf-path { stroke: #d9654a; }
.problem-fig .pf-shopper circle { fill: #4a463f; }
.problem-fig .pf-shopper rect { fill: #e8b36a; }
.problem-fig .pf-q text { fill: #c4472b; }
.problem-fig .pf-tag { fill: #fff; font-size: 11.5px; font-weight: 700; font-family: var(--font-head); }
.problem-fig .pf-tag { paint-order: stroke; stroke: #86817a; stroke-width: 8px; stroke-linejoin: round; }
.m-item { transition-duration: .6s; }