/* 見出し行 — 右端に事業継続力強化計画の認定マーク。右端は断面図の枠（viewBox 856 のうち右 10）に揃える */
.hero-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 calc(100% * 10 / 856) 30px 0}
.hero-head h1{margin:0}
.bcp-mark{flex:none;display:block;line-height:0}
.bcp-mark img{display:block}
.bcp-mark .bcp-m{display:none}
@media (max-width:640px){
  .hero-head{align-items:flex-start;gap:16px}
  .bcp-mark .bcp-d{display:none}
  .bcp-mark .bcp-m{display:block}
}

/* 断面図 — 海底から月まで。塗りの点＝いま在る計測点、白抜き＝向かう先 */
.hero-body{display:block}
.sec-fig{margin:0 0 38px}
@media (min-width:900px){.sec-fig{margin-bottom:48px}}
.sec{display:block;width:100%;height:auto;--m:rgba(var(--ink-rgb),.44)}  /* --m = 遠い層の線。地上だけ濃い墨に差し替える */
.sec .stp{stop-color:var(--hx-ink)}
.sec .strata{fill:url(#strata)}
.sec .l5{fill:url(#deep)}
.sec .axis{fill:none;stroke:rgba(var(--ink-rgb),.35);stroke-width:1;pointer-events:none}
.sec .ground{fill:none;stroke:var(--hx-ink);stroke-width:2}
.sec .lyr-ground{--m:var(--hx-ink)}
.sec .lyr-ground .st{stroke-width:1.8}
.sec .lyr-ground .st.thin{stroke-width:1.2}
.sec .st{fill:none;stroke:var(--m);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sec .thin{stroke-width:1}
.sec .pick{cursor:pointer}
.sec .pick rect{fill:transparent}
.sec .pick:hover .num{fill:var(--hx-ink);text-decoration:underline;text-decoration-thickness:1px}
.sec .pick:focus{outline:none}
.sec .pick:focus-visible{outline:2px solid var(--hx-ink);outline-offset:2px}
.sec .tether{fill:none;stroke:rgba(var(--ink-rgb),.20);stroke-width:1.1;stroke-linecap:round}
.sec .cable{fill:none;stroke:rgba(var(--ink-rgb),.065);stroke-width:6}
.sec .moonshade{fill:rgba(var(--ink-rgb),.10);stroke:none}
.sec .vlining{fill:none;stroke:rgba(var(--ink-rgb),.055);stroke-width:5}
.sec .lining{fill:none;stroke:rgba(var(--ink-rgb),.055);stroke-width:9}
.sec .seam{fill:none;stroke:rgba(var(--ink-rgb),.10);stroke-width:.9}
.sec .duct{fill:none;stroke:rgba(var(--ink-rgb),.11);stroke-width:1}
.sec .orbit{fill:none;stroke:rgba(var(--ink-rgb),.24);stroke-width:1;stroke-dasharray:2 5}
.sec .num{font:600 11px var(--font-latin);letter-spacing:.06em;fill:rgba(var(--ink-rgb),.5)}
.sec .num.on{fill:var(--hx-ink);font-weight:600}
.sec .hollow{fill:var(--paper);stroke:var(--m);stroke-width:1.3}

/* 高度軸のリングが滞在している層だけ、機体が締まり細部が現れる（60s 周期・13 停留）。
   色を与えるのは、いま実際に手がけている 地上 だけ。ほかの層は灰にとどめる。 */
.sec .boom{transform-box:fill-box;transform-origin:0% 100%}
.sec .crawler .boom{animation:boomU 60s ease-in-out infinite}
.sec .rov .boom{animation:boomS 60s ease-in-out infinite}
.sec .drone .boom{transform-origin:50% 0%;animation:boomA 60s ease-in-out infinite}
@keyframes boomU{0%,69.75%{transform:rotate(0)}72.25%,77.75%{transform:rotate(-17deg)}80.25%,85.58%{transform:rotate(0)}88.08%,93.58%{transform:rotate(-17deg)}96.08%,100%{transform:rotate(0)}}
@keyframes boomS{0%,77.67%{transform:rotate(0)}80.17%,85.67%{transform:rotate(-14deg)}88.17%,100%{transform:rotate(0)}}
@keyframes boomA{0%,6.42%{transform:rotate(0)}8.92%,14.42%{transform:rotate(22deg)}16.92%,53.92%{transform:rotate(0)}56.42%,61.92%{transform:rotate(22deg)}64.42%,100%{transform:rotate(0)}}
.sec .det{opacity:0;animation-duration:60s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.sec .det .fine{fill:none;stroke:var(--m);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.sec .det .dashline{stroke-dasharray:3.5 3}
.sec .det .face{fill:rgba(var(--ink-rgb),.10);stroke:var(--m);stroke-width:.9;stroke-linejoin:round}
.sec .det-ground{animation-name:detGround}
.sec .det-air{animation-name:detAir}
.sec .det-orbit{animation-name:detOrbit}
.sec .det-moon{animation-name:detMoon}
.sec .det-mars{animation-name:detMars}
.sec .det-under{animation-name:detUnder}
.sec .det-sea{animation-name:detSea}
@keyframes detGround{0%,5%{opacity:1}7%,61.33%{opacity:0}63.33%,68.33%{opacity:1}70.33%,93%{opacity:0}95%,100%{opacity:1}}
@keyframes detAir{0%,5.92%{opacity:0}7.92%,12.92%{opacity:1}14.92%,53.42%{opacity:0}55.42%,60.42%{opacity:1}62.42%,100%{opacity:0}}
@keyframes detOrbit{0%,13.83%{opacity:0}15.83%,20.83%{opacity:1}22.83%,45.5%{opacity:0}47.5%,52.5%{opacity:1}54.5%,100%{opacity:0}}
@keyframes detMoon{0%,21.75%{opacity:0}23.75%,28.75%{opacity:1}30.75%,37.58%{opacity:0}39.58%,44.58%{opacity:1}46.58%,100%{opacity:0}}
@keyframes detMars{0%,29.67%{opacity:0}31.67%,36.67%{opacity:1}38.67%,100%{opacity:0}}
@keyframes detUnder{0%,69.25%{opacity:0}71.25%,76.25%{opacity:1}78.25%,85.08%{opacity:0}87.08%,92.08%{opacity:1}94.08%,100%{opacity:0}}
@keyframes detSea{0%,77.17%{opacity:0}79.17%,84.17%{opacity:1}86.17%,100%{opacity:0}}
.sec .hit{animation-duration:60s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.sec .hit-ground{animation-name:hitGround}
.sec .hit-air{animation-name:hitAir}
.sec .hit-orbit{animation-name:hitOrbit}
.sec .hit-moon{animation-name:hitMoon}
.sec .hit-mars{animation-name:hitMars}
.sec .hit-under{animation-name:hitUnder}
.sec .hit-sea{animation-name:hitSea}
@keyframes hitGround{0%,6.5%{fill:#A8894C;stroke:#8F7440;stroke-width:2.4}9%,61.83%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}64.33%,69.83%{fill:#A8894C;stroke:#8F7440;stroke-width:2.4}72.33%,93.5%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}96%,100%{fill:#A8894C;stroke:#8F7440;stroke-width:2.4}}
@keyframes hitAir{0%,6.42%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}8.92%,14.42%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}16.92%,53.92%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}56.42%,61.92%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}64.42%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
@keyframes hitOrbit{0%,14.33%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}16.83%,22.33%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}24.83%,46%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}48.5%,54%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}56.5%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
@keyframes hitMoon{0%,22.25%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}24.75%,30.25%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}32.75%,38.08%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}40.58%,46.08%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}48.58%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
@keyframes hitMars{0%,30.17%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}32.67%,38.17%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}40.67%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
@keyframes hitUnder{0%,69.75%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}72.25%,77.75%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}80.25%,85.58%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}88.08%,93.58%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}96.08%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
@keyframes hitSea{0%,77.67%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}80.17%,85.67%{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}88.17%,100%{fill:var(--paper);stroke:var(--m);stroke-width:1.3}}
.sec .rv{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec .rv.thin{stroke-width:1.1}
.sec .moonring{fill:none;stroke:var(--m);stroke-width:1}
.sec .mbase{color:var(--m);animation:hitMBase 60s ease-in-out infinite}
@keyframes hitMBase{0%,30.17%{color:var(--m)}32.67%,38.17%{color:#8A8578}40.67%,100%{color:var(--m)}}
.sec .gauge{fill:var(--paper);stroke:#8A8578;stroke-width:1.5;pointer-events:none;animation:gauge 60s ease-in-out infinite,gaugeTone 60s ease-in-out infinite}
@keyframes gaugeTone{0%,5%{stroke:#A8894C}7.5%,60.83%{stroke:#8A8578}63.33%,68.33%{stroke:#A8894C}70.83%,92.5%{stroke:#8A8578}95%,100%{stroke:#A8894C}}
@keyframes gauge{0%,5%{transform:translateY(0px)}7.92%,12.92%{transform:translateY(-44px)}15.83%,20.83%{transform:translateY(-128px)}23.75%,28.75%{transform:translateY(-192px)}31.67%,36.67%{transform:translateY(-252px)}39.58%,44.58%{transform:translateY(-192px)}47.5%,52.5%{transform:translateY(-128px)}55.42%,60.42%{transform:translateY(-44px)}63.33%,68.33%{transform:translateY(0px)}71.25%,76.25%{transform:translateY(60px)}79.17%,84.17%{transform:translateY(144px)}87.08%,92.08%{transform:translateY(60px)}95%,100%{transform:translateY(0px)}}
.sec .drone{animation:hover 9.4s ease-in-out infinite}
.sec .water{animation:water 7s linear infinite}
@keyframes hover{0%{transform:translate(84px,0)}12%{transform:translate(86.4px,-2px)}27%{transform:translate(82.1px,-0.8px)}41%{transform:translate(85.2px,2px)}56%{transform:translate(81.6px,0.9px)}68%{transform:translate(86px,-1.6px)}83%{transform:translate(83.2px,1.8px)}100%{transform:translate(84px,0)}}
@keyframes water{to{transform:translateX(-24px)}}


@media (prefers-reduced-motion: reduce){
  .sec .gauge,.sec .drone,.sec .water,.sec .hit{animation:none}
  .sec .det{animation:none;opacity:0}
  .sec .boom,.sec .mbase{animation:none}
  /* hover の 0% が translate(84px,0) なので、止めるだけだと機体が 84 単位左へ飛ぶ */
  .sec .drone{transform:translate(84px,0)}
  /* 動きを止めても「いまどの層か」は示す。data-on = 既定 地上、クリック／キーで差し替わる。
     色はキーフレームの点灯状態と同じ値：唯一の色は地上のキュービクル、ほかは灰。 */
  .sec[data-on="mars"] .det-mars,.sec[data-on="moon"] .det-moon,.sec[data-on="orbit"] .det-orbit,.sec[data-on="air"] .det-air,.sec[data-on="ground"] .det-ground,.sec[data-on="under"] .det-under,.sec[data-on="sea"] .det-sea{opacity:1}
  .sec[data-on="mars"] .hit-mars,.sec[data-on="moon"] .hit-moon,.sec[data-on="orbit"] .hit-orbit,.sec[data-on="air"] .hit-air,.sec[data-on="under"] .hit-under,.sec[data-on="sea"] .hit-sea{fill:#8A8578;stroke:#8A8578;stroke-width:2.4}
  .sec[data-on="ground"] .hit-ground{fill:#A8894C;stroke:#8F7440;stroke-width:2.4}
  .sec[data-on="mars"] .mbase{color:#8A8578}
  .sec[data-on="mars"] .gauge{transform:translateY(-252px)}
  .sec[data-on="moon"] .gauge{transform:translateY(-192px)}
  .sec[data-on="orbit"] .gauge{transform:translateY(-128px)}
  .sec[data-on="air"] .gauge{transform:translateY(-44px)}
  .sec[data-on="under"] .gauge{transform:translateY(60px)}
  .sec[data-on="sea"] .gauge{transform:translateY(144px)}
}