/* ============================================================
   魅せる動き（2026-11-03・あきと「『軌跡』特設サイトのモーションや雰囲気や魅せる感じを、日本精機の本体のホームページに。
   デザインはそのままに動きをつけて」）。site.css・各ページの CSS の後に読む。色・書体・組みは変えない。動きだけ。
   型は『軌跡』魅せる版（nihonseiki-portal/kiseki/show.css）と同じ：
     写真＝左から開く（バーン）／見出し＝下から上がる／数字＝桁が転がる／表と一覧＝1行ずつ上がる／
     工程の帯＝画面に止めて1枚ずつ（スクロールで進む）／沿革＝年表の軸が伸び、年が転がる
   ?qa=1（.qa）・動きを止める設定（.still）・JS無効では何もしない＝今までの最終状態のまま（中身は全部見える）。
============================================================ */
:root { --m6-out: cubic-bezier(.16, 1, .3, 1); --m6-draw: cubic-bezier(.65, 0, .35, 1); }

/* ---- 写真（.rv-shut）：中央から上下に開くシャッター → 左から右へ開く（バーン・.55秒）。写真そのものは動かさない ---- */
.js.m6:not(.qa):not(.still) .band.rv-shut img, .js.m6:not(.qa):not(.still) figure.rv-shut img, .js.m6:not(.qa):not(.still) .field.rv-shut .big img,
.js.m6:not(.qa):not(.still) .rv-shut .sx-frame > canvas, .js.m6:not(.qa):not(.still) .rv-shut.sx-frame > canvas,
.js.m6:not(.qa):not(.still) .rv-shut .sx-frame > video, .js.m6:not(.qa):not(.still) .rv-shut.sx-frame > video { transition: clip-path .55s var(--m6-out); }
.js.m6:not(.qa):not(.still) .band.rv-shut:not(.is-in) img, .js.m6:not(.qa):not(.still) figure.rv-shut:not(.is-in) img, .js.m6:not(.qa):not(.still) .field.rv-shut:not(.is-in) .big img,
.js.m6:not(.qa):not(.still) .rv-shut:not(.is-in) .sx-frame > canvas, .js.m6:not(.qa):not(.still) .rv-shut:not(.is-in).sx-frame > canvas,
.js.m6:not(.qa):not(.still) .rv-shut:not(.is-in) .sx-frame > video, .js.m6:not(.qa):not(.still) .rv-shut:not(.is-in).sx-frame > video { clip-path: inset(0 100% 0 0); transition: none; }

/* ---- 見出し（.rv-scan の h2）：塊のまま下から上がる（.5秒）。マスクは JS が .m6-mk で包む ---- */
.m6-mk { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.m6-mk > .m6-in { display: inline-block; }
.js.m6:not(.qa):not(.still) .rv-scan .m6-in { transition: transform .5s var(--m6-out) .05s; }
.js.m6:not(.qa):not(.still) .rv-scan:not(.is-in) .m6-in { transform: translateY(105%); transition: none; }

/* ---- 数字：桁が転がる（0→その数。桁ごとに少し遅らせる）。読み上げは元の数字（.m6-sr）、見た目は回る桁（aria-hidden） ---- */
.m6-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m6-odo { display: inline-flex; vertical-align: baseline; }
.m6-dg { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; position: relative; }
.m6-dg > i { display: flex; flex-direction: column; font-style: normal; transform: translateY(0); }
.m6-dg > i > b { display: block; height: 1em; line-height: 1; font: inherit; }
.m6-odo .m6-ch { display: inline-block; }
.js.m6:not(.qa):not(.still) .m6-odo.go .m6-dg > i { transition: transform 1.1s var(--m6-out) var(--dd, 0s); transform: translateY(calc(var(--to) * -1em)); }
.js.m6:not(.qa):not(.still) .m6-odo .m6-ch { opacity: 0; transition: opacity .3s linear .5s; }
.js.m6:not(.qa):not(.still) .m6-odo.go .m6-ch { opacity: 1; }
/* 元の「色だけで点く」露光は、転がる数字には掛けない（回りながら色が変わると読みにくい） */
.js.m6:not(.qa):not(.still) .rv-expose:not(.is-in) .num .n.m6-has, .js.m6:not(.qa):not(.still) .cd.rv-expose:not(.is-in) .pct.m6-has,
.js.m6:not(.qa):not(.still) .sites.rv-expose:not(.is-in) .site .yr.m6-has { color: inherit; opacity: 1; }

/* ---- 表と一覧（.rv-rule の ol・ul・tbody）：1行ずつ下から上がる（.45秒・1行 .04秒ずつ・最大 .6秒） ---- */
.js.m6:not(.qa):not(.still) .m6-kid { transition: opacity .45s var(--m6-out) var(--kd, 0s), transform .45s var(--m6-out) var(--kd, 0s); }
.js.m6:not(.qa):not(.still) .m6-kids:not(.is-in) .m6-kid { opacity: 0; transform: translateY(14px); transition: none; }

/* ---- 工程の帯（トップ .ix-flow）：画面に止めて、スクロールで 01→04 を1枚ずつ開く。赤い線と目盛りも一緒に進む ---- */
.m6-pin { position: relative; }
.js.m6:not(.qa):not(.still) .m6-pin { height: calc(var(--len, 220) * 1vh); height: calc(var(--len, 220) * 1svh); }
.js.m6:not(.qa):not(.still) .m6-pin > .ix-flow { position: sticky; top: var(--m6-top, 96px); }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ph { clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--m6-out); }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ph.m6-on { clip-path: inset(0 0 0 0); }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap { opacity: .35; transition: opacity .3s linear; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap.m6-on { opacity: 1; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap.m6-cur { color: var(--ink); }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-line { transform: scaleX(var(--m6-f, 0)) !important; transition: transform .5s var(--m6-draw) !important; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ticks i { transition: height .3s, background-color .3s; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ticks i.m6-on { background: var(--red); height: 6px; }
/* 2026-11-06 段の事実：開いた段から上がる（PC）。スマホは写真を1枠に重ね（新しい段が左から拭って上に出る）、名前は4列、事実は今の段だけ */
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact { opacity: .3; transform: translateY(10px); transition: opacity .4s var(--m6-out), transform .4s var(--m6-out); }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact.m6-on { opacity: 1; transform: none; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap .en { transition: color .3s; }
.js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap:not(.m6-on) .en { color: var(--note); }
@media (max-width: 760px) {
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-grid,
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ticks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ticks i:nth-child(n+3) { display: block; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ph { --ar: 4 / 3; grid-column: 1 / -1 !important; grid-row: 1 !important; margin-top: 0 !important; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-ph.c1 { clip-path: inset(0 0 0 0); }   /* 1枚目は枠の地（止まる前から見えている） */
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-rule { grid-row: 2; margin-top: 10px; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap { grid-row: 3 !important; display: block; margin-top: 8px; padding-left: 0; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap .en { display: block; font-size: 13px; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-cap b { font-size: 16px; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-grid .c1 { grid-column: 1; } .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-grid .c2 { grid-column: 2; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-grid .c3 { grid-column: 3; } .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-grid .c4 { grid-column: 4; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 12px; padding: 0; opacity: 0; pointer-events: none; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact.m6-cur, .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact:focus-within { opacity: 1; transform: none; pointer-events: auto; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact p { font-size: 14px; }
  .js.m6:not(.qa):not(.still) .m6-pin .ix-flow-fact.m6-on:not(.m6-cur):not(:focus-within) { opacity: 0; transform: translateY(-6px); pointer-events: none; }   /* 通り過ぎた段は上へ消える */
}

/* ---- 沿革（会社概要 .co-rule）：年表の軸が読んだ所まで赤く伸びる（スクロールに連れて）。行は届いたら上がり、年が転がる ---- */
.co-rule .m6-fill { position: absolute; left: var(--yc); top: 0; width: 1px; height: 100%; background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--m6-f, 0)); pointer-events: none; z-index: 1; }
.js.m6:not(.qa):not(.still) .co-rule li.ev { transition: opacity .45s var(--m6-out), transform .45s var(--m6-out); }
.js.m6:not(.qa):not(.still) .co-rule li.ev:not(.m6-on) { opacity: .18; transform: translateY(12px); }
.js.m6:not(.qa):not(.still) .co-rule li.ev::before { transform-origin: 0 50%; transition: transform .4s var(--m6-out) .1s, background-color .3s; }
.js.m6:not(.qa):not(.still) .co-rule li.ev:not(.m6-on)::before { transform: scaleX(0); }
.js.m6:not(.qa):not(.still) .co-rule li.ev.m6-cur::before { background: var(--red); }
.co-rule:not(.m6-live) .m6-fill, .qa .co-rule .m6-fill, .still .co-rule .m6-fill { display: none; }

@media (prefers-reduced-motion: reduce) {
  .m6-pin { height: auto !important; }
  .m6-pin > .ix-flow { position: static !important; }
}