/* =====================================================================
   E案 第3弾：問題提起の図／ハサミでループを切るアニメ／期間ごとの費用グラフ／上部ナビ
   （e2.css の後に読み込む）
   ===================================================================== */

/* ---- ① 問題提起：文＋見取り図 ---- */
.problem-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1100px; margin: 0 auto; }
.problem-copy .h-blue-md { text-align: left; }
.problem-grid .pains { margin: 24px 0 24px; max-width: none; }
.problem-grid .pains li { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.problem-grid .pains svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--alert); }
.problem-lead { text-align: left; font-size: 15px; }
.problem-close { text-align: left; font-size: clamp(19px, 1.9vw, 24px) !important; line-height: 1.6; }
.problem-fig { background: #0f2338; border-radius: 12px; margin: 0; justify-self: stretch; width: 100%; }
.pf-floor { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.22); stroke-width: 2; }
.pf-shelf rect { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.pf-cone { fill: rgba(108,196,255,.14); stroke: rgba(108,196,255,.5); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pf-cam rect, .pf-cam circle { fill: #6cc4ff; }
.pf-gate rect { fill: #fff; }
.pf-dead { fill: url(#pfHatch); stroke: rgba(255,255,255,.4); stroke-width: 2; stroke-dasharray: 7 6; }
.pf-lbl { fill: #fff; font-size: 12.5px; font-weight: 700; font-family: var(--font-head); }
.pf-lbl-dead { fill: #ffb3a1; }
.pf-path { fill: none; stroke: #ff8a6e; stroke-width: 2.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.pf-shopper circle { fill: #fff; }
.pf-shopper rect { fill: #f3d6a4; }
.pf-shopper { transform: translate(236px, 122px); }
.pf-q text { fill: #ff8a6e; font-size: 22px; font-weight: 900; font-family: var(--font-head); }
.pf-q { opacity: 1; }
.problem-fig.play .pf-shopper { animation: pf-walk 5.2s ease-in-out infinite; }
.problem-fig.play .pf-q { animation: pf-qq 5.2s ease-in-out infinite; }
@keyframes pf-walk { 0%, 14% { transform: translate(236px, 122px); opacity: 1; } 56% { transform: translate(106px, 196px); opacity: 1; } 80% { transform: translate(106px, 196px); opacity: .35; } 92%, 100% { transform: translate(236px, 122px); opacity: 0; } }
@keyframes pf-qq { 0%, 52% { opacity: 0; } 62%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---- ③ いたずらされた瞬間：ワイヤーのループを切る ---- */
.t-handle { fill: none; stroke: #8fa8b9; stroke-width: 7; stroke-linecap: round; }
.t2-wire { fill: none; stroke: #20324a; stroke-width: 4; stroke-linecap: round; }
.t2-tag rect { fill: #5d7184; }
.t2-rings { stroke: #e8380d; stroke-width: 3; opacity: 0; }
.t2-scissors circle { fill: none; stroke: #20324a; stroke-width: 5; }
.t2-scissors .blade rect { fill: #20324a; }
/* 静止（動きを減らす設定など）：切られて、鳴った後 */
.t2-loopL { transform: translate(-16px, -12px) rotate(-10deg); transform-origin: 206px 96px; }
.t2-loopR { transform: translate(16px, -12px) rotate(10deg); transform-origin: 206px 96px; }
.t2-tag rect { fill: #e8380d; }
.t2-rings { opacity: 1; }
.t2-scissors { transform: translate(322px, 52px); }
.t2-scissors .b1 { transform-origin: 0 0; transform: rotate(178deg); }
.t2-scissors .b2 { transform-origin: 0 0; transform: rotate(182deg); }
/* 動く（5.6秒でループ） */
.naru-tamper2.play .t2-scissors { animation: t2-move 5.6s ease-in-out infinite; }
.naru-tamper2.play .t2-scissors .b1 { animation: t2-b1 5.6s ease-in-out infinite; }
.naru-tamper2.play .t2-scissors .b2 { animation: t2-b2 5.6s ease-in-out infinite; }
.naru-tamper2.play .t2-loopL { animation: t2-loopL 5.6s ease-in-out infinite; }
.naru-tamper2.play .t2-loopR { animation: t2-loopR 5.6s ease-in-out infinite; }
.naru-tamper2.play .t2-tag rect { animation: t2-tag 5.6s steps(1, end) infinite; }
.naru-tamper2.play .t2-rings { animation: t2-rings 5.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.naru-tamper2.play .t-bubble { animation: t-bubble2 5.6s ease-in-out infinite; }
@keyframes t2-move { 0% { transform: translate(540px, 52px); } 20%, 88% { transform: translate(322px, 52px); } 100% { transform: translate(540px, 52px); } }
@keyframes t2-b1 { 0%, 22% { transform: rotate(164deg); } 28% { transform: rotate(178deg); } 34% { transform: rotate(163deg); } 40%, 100% { transform: rotate(178deg); } }
@keyframes t2-b2 { 0%, 22% { transform: rotate(196deg); } 28% { transform: rotate(182deg); } 34% { transform: rotate(197deg); } 40%, 100% { transform: rotate(182deg); } }
@keyframes t2-loopL { 0%, 38% { transform: none; } 46%, 90% { transform: translate(-16px, -12px) rotate(-10deg); } 100% { transform: none; } }
@keyframes t2-loopR { 0%, 38% { transform: none; } 46%, 90% { transform: translate(16px, -12px) rotate(10deg); } 100% { transform: none; } }
@keyframes t2-tag { 0% { fill: #5d7184; } 40% { fill: #e8380d; } 100% { fill: #e8380d; } }
@keyframes t2-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-bubble2 { 0%, 39% { opacity: 0; } 46%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---- ④ 期間ごとの累計費用グラフ ---- */
.sv-chart { max-width: 960px; margin: 34px auto 0; padding: clamp(20px, 3.4vw, 36px); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.05); text-align: left; }
.sv-chart h3 { font-size: clamp(18px, 2.2vw, 22px); color: #fff; margin-bottom: 10px; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: rgba(255,255,255,.85); margin-bottom: 10px; }
.sv-legend .lg::before { content: ''; display: inline-block; width: 26px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 8px; }
.sv-legend .gate::before { background: #8fa8d6; }
.sv-legend .sg::before { background: #26d0b0; }
.sv-scroll { overflow-x: auto; }
.sv-svg { display: block; width: 100%; min-width: 600px; height: auto; }
.sv-grid { stroke: rgba(255,255,255,.14); stroke-dasharray: 3 5; }
.sv-ax { fill: rgba(255,255,255,.7); font-size: 14px; font-family: var(--font); }
.sv-line { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sv-gate { stroke: #8fa8d6; }
.sv-sg { stroke: #26d0b0; }
.sv-gap { fill: rgba(38,208,176,.10); }
.sv-pt { stroke: #0d2238; stroke-width: 3; }
.sv-pt-sg { fill: #26d0b0; }
.sv-pt-gate { fill: #8fa8d6; }
.sv-val { fill: #fff; font-size: 15px; font-weight: 700; font-family: var(--font-head); }
.sv-val-gate { fill: #c7d4ee; font-size: 14.5px; }
.sv-val-gap { fill: #7fd3ff; font-size: 17px; }
.sv-chart-note { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 8px; }
.js-motion .sv-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .savings.in .sv-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.35,.1,.25,1) .5s; }
.js-motion .sv-gap, .js-motion .sv-pt, .js-motion .sv-val { opacity: 0; }
.js-motion .savings.in .sv-gap { opacity: 1; transition: opacity 1s 2s; }
.js-motion .savings.in .sv-pt, .js-motion .savings.in .sv-val { opacity: 1; transition: opacity .5s; transition-delay: calc(var(--i, 0) * .45s + .7s); }
.js-motion .savings.in .sv-val-gate, .js-motion .savings.in .sv-pt-gate { transition-delay: .3s; }
.js-motion .savings.in .sv-val-gap { transition-delay: 2.3s; }

/* ---- ② グローバルナビ：上部の固定ヘッダー（PC）。スマホは従来どおり下の2ボタン ---- */
.nav-brand { display: none; }
@media (min-width: 769px) {
  .site-header { display: none; }
  .v-c .sg-footer-nav { top: 0; bottom: auto; background: transparent; border-top: 0; box-shadow: none; transition: background .3s, box-shadow .3s; }
  .v-c .sg-footer-nav.is-solid { background: rgba(255,255,255,.96); box-shadow: 0 2px 14px rgba(14,31,51,.1); backdrop-filter: blur(6px); }
  .v-c .sg-footer-row-top { max-width: none; margin: 0; padding: 4px clamp(24px, 7vw, 120px) 4px clamp(24px, 7vw, 120px); gap: 12px; }
  .nav-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-right: 18px; text-decoration: none; color: #fff; font-family: var(--num); font-weight: 600; font-size: 28px; letter-spacing: -.01em; }
  .nav-brand img { width: 34px; height: 34px; object-fit: cover; object-position: left center; border-radius: 0; } /* 横長ロゴ画像の、左端のマークだけを見せる */
  .nav-brand span { font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .04em; white-space: nowrap; }
  .nav-brand b { color: #6cc4ff; font-weight: 600; }
  .is-solid .nav-brand { color: var(--ink); }
  .is-solid .nav-brand b { color: var(--blue); }
  .v-c .sg-footer-fade { display: none; }
  .v-c .sg-footer-items a { color: rgba(255,255,255,.78); font-size: 14px; padding: 20px 14px; }
  .v-c .sg-footer-items a.active { color: #fff; border-bottom-color: #6cc4ff; }
  .v-c .is-solid .sg-footer-items a { color: #5a7183; }
  .v-c .is-solid .sg-footer-items a.active { color: var(--ink); border-bottom-color: var(--blue); }
  .v-c .sg-footer-cta-desktop a { background: #fff; color: var(--ink); font-size: 13px; padding: 10px 18px; }
  .v-c .is-solid .sg-footer-cta-desktop a { background: var(--blue); color: #fff; }
  .v-c .sg-footer-scroll { flex: 1; }
  .hero-brand { display: none; } /* 上部ナビにロゴ文字があるので、ヒーロー側は外す */
  .v-c .hero-copy { padding-top: clamp(104px, 11vw, 144px); }
}

/* ---- グローバルナビ：4つのグループ（ドロップダウン）。パネルは画面に固定して、位置は js/gnav.js が出す（横に流れるナビの外側にはみ出して見せるため） ---- */
@media (min-width: 769px) {
  .gn-group { flex-shrink: 0; }
  .gn-btn { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 14px; letter-spacing: .02em; padding: 20px 14px; color: rgba(255,255,255,.78); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
  .gn-btn::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
  .gn-group.is-open .gn-btn::after { transform: rotate(-135deg); margin-top: 3px; }
  .gn-group.is-open .gn-btn, .gn-group.has-active .gn-btn { color: #fff; }
  .gn-group.has-active .gn-btn { border-bottom-color: #6cc4ff; }
  .is-solid .gn-btn { color: #5a7183; }
  .is-solid .gn-group.is-open .gn-btn, .is-solid .gn-group.has-active .gn-btn { color: var(--ink); }
  .is-solid .gn-group.has-active .gn-btn { border-bottom-color: var(--blue); }
  .gn-panel { display: none; position: fixed; left: 0; top: 0; z-index: 120; min-width: 224px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 10px; box-shadow: 0 14px 36px rgba(14,31,51,.22); }
  .gn-group.is-open .gn-panel { display: block; }
  .v-c .sg-footer-items .gn-panel a, .v-c .is-solid .sg-footer-items .gn-panel a { display: block; padding: 11px 14px; border-radius: 6px; border-bottom: 0; font-size: 14px; color: #1c2b3a; font-weight: 600; }
  .v-c .sg-footer-items .gn-panel a:hover { background: #f1f6fa; color: var(--blue); }
  .v-c .sg-footer-items .gn-panel a.active, .v-c .is-solid .sg-footer-items .gn-panel a.active { color: var(--blue); font-weight: 700; border-bottom-color: transparent; background: #eaf3fa; }
}

/* 1260px未満は、ナビが混むので、「トップ」と「↗ 総合サイトへ」を隠して、余白を詰める（ロゴがトップへのリンクを兼ねる。総合サイトへは、ページ下の「会社概要を見る」でも行ける） */
@media (min-width: 769px) and (max-width: 1259px) {
  .v-c .sg-footer-items a.gn-top, .v-c .sg-footer-items a.gn-ext { display: none; }
  .gn-btn { padding: 20px 10px; }
  .v-c .sg-footer-row-top { padding-left: 20px; padding-right: 20px; }
}

/* 941px未満は、さらに混むので、ロゴは、マークだけにする（文字は、スクリーンリーダー用の aria-label に残る） */
@media (min-width: 769px) and (max-width: 940px) {
  .nav-brand span { display: none; }
}