/* サービスごとの体験。入場、舞台、完了の瞬間、画面全体の質感。 */

/* ===== 入場 ===== */
.enter {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  background: var(--svc); color: var(--svc-on); cursor: pointer;
  animation: enter-out 420ms cubic-bezier(.76, 0, .24, 1) 1080ms forwards;
}
.e-in { display: grid; justify-items: center; gap: var(--space-5); padding: var(--space-6); }
.e-in svg { width: min(62vw, 340px); height: auto; overflow: visible; }
.e-in b { font-size: clamp(24px, 4.4vw, 40px); font-weight: var(--weight-bold); letter-spacing: .06em; animation: e-title 460ms cubic-bezier(.2, .8, .2, 1) 260ms both; }
@keyframes e-title { from { opacity: 0; transform: translateY(14px); } }
@keyframes enter-out { to { clip-path: inset(0 0 100% 0); } }

.enter-invoice .e-sheet { fill: #FFFFFF; animation: e-sheet 420ms ease-out 120ms both; }
.enter-invoice .e-ln { fill: none; stroke: var(--svc); stroke-width: 6; stroke-linecap: round; animation: e-sheet 420ms ease-out 120ms both; }
.enter-invoice .e-body { fill: var(--svc-on); }
.enter-invoice .e-flap { fill: var(--svc-on); stroke: var(--svc); stroke-width: 3; transform-origin: 110px 62px; transform: scaleY(-1); animation: e-flap 300ms ease-in 520ms forwards; }
.enter-invoice .e-fly { animation: e-fly 360ms cubic-bezier(.6, 0, .9, .4) 830ms forwards; }
@keyframes e-sheet { from { transform: translateY(-34px); opacity: 0; } to { transform: translateY(30px); opacity: 1; } }
@keyframes e-flap { to { transform: scaleY(1); } }
@keyframes e-fly { to { transform: translate(120vw, -30vh) rotate(-16deg); } }

.enter-office .e-rise rect:first-child { fill: var(--svc-on); }
.enter-office .e-rise { transform-box: fill-box; transform-origin: bottom; animation: e-rise 460ms cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 90ms) both; }
.enter-office .e-win { fill: var(--yellow-300, #F7C948); opacity: 0; animation: e-on 80ms linear calc(480ms + var(--i) * 60ms) forwards; }
.enter-office .e-ground { stroke: var(--svc-on); stroke-width: 4; }
@keyframes e-rise { from { transform: scaleY(0); } }
@keyframes e-on { to { opacity: 1; } }

.enter-partner .e-track { fill: none; stroke: var(--svc-on); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: e-draw 820ms ease-in-out 80ms forwards; }
.enter-partner .e-run { fill: var(--svc-on); offset-path: path('M10 78C70 78 80 32 140 32S210 78 262 78'); offset-distance: 0; animation: e-run 820ms ease-in-out 80ms forwards; }
.enter-partner .e-flag { fill: var(--svc-on); stroke: var(--svc-on); stroke-width: 4; stroke-linejoin: round; transform-box: fill-box; transform-origin: bottom left; animation: e-pop 300ms cubic-bezier(.2, 1.6, .4, 1) 780ms both; }
@keyframes e-draw { to { stroke-dashoffset: 0; } }
@keyframes e-run { to { offset-distance: 100%; } }
@keyframes e-pop { from { transform: scale(0); opacity: 0; } }

.enter-hr .e-link { fill: none; stroke: var(--svc-on); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: e-draw 240ms ease-out calc(260ms + var(--i) * 70ms) forwards; }
.enter-hr .e-pop { fill: #FFFFFF; stroke: var(--svc-on); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: e-pop 340ms cubic-bezier(.2, 1.7, .4, 1) calc(260ms + var(--i, 0) * 70ms) both; }
.enter-hr .e-hub { fill: var(--svc-on); animation-delay: 100ms; }

.enter-labor .e-face { fill: #FFFFFF; stroke: var(--svc-on); stroke-width: 4; }
.enter-labor .e-tick { stroke: var(--svc); stroke-width: 3; }
.enter-labor .e-hand { stroke: var(--svc-text); stroke-width: 6; stroke-linecap: round; transform-origin: 85px 85px; animation: e-spin 900ms cubic-bezier(.2, .7, .1, 1) both; }
.enter-labor .e-min { stroke-width: 4; }
.enter-labor .e-pin { fill: var(--svc-text); }
@keyframes e-spin { from { transform: rotate(0); } to { transform: rotate(var(--to)); } }

.enter-accounting .e-bar { fill: #FFFFFF; opacity: .28; transform-box: fill-box; transform-origin: bottom; animation: e-rise 420ms cubic-bezier(.2, 1, .3, 1) calc(var(--i) * 70ms) both; }
.enter-accounting .e-curve { fill: none; stroke: var(--yellow-300, #F7C948); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: e-draw 700ms ease-out 260ms forwards; }

/* ===== 舞台の共通 ===== */
.st { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.st-title p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); opacity: .78; }
.st-title h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: .02em; }
.st-next {
  display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); background: #FFFFFF; color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
a.st-next:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .16); }
.st-next > span { flex: none; padding: 2px 10px; border-radius: var(--radius-full); background: var(--svc); color: var(--svc-on); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.st-next b { flex: 1; min-width: 0; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-next small { flex: none; color: var(--color-text-tertiary); }
.st-next > i { flex: none; font-style: normal; color: var(--svc-text); font-weight: var(--weight-bold); }
.st-clear { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); background: #FFFFFF; color: var(--svc-text); font-weight: var(--weight-bold); }
.st-clear i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--svc); color: var(--svc-on); }
.st-ring { position: relative; width: 132px; aspect-ratio: 1; flex: none; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 9; stroke: rgb(0 0 0 / .1); }
.st-ring .v { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms cubic-bezier(.2, .7, .2, 1) 200ms; }
.go .st-ring .v { stroke-dashoffset: calc(1 - var(--p)); }
.st-ring div { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; column-gap: 3px; }
.st-ring b { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.st-ring small { align-self: flex-end; font-size: var(--text-xs); opacity: .7; padding-bottom: 3px; }
.st-ring span { flex-basis: 100%; text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); }

/* ===== 請求書 ===== */
.st-inv { display: grid; gap: var(--space-5); padding: var(--space-6); background: linear-gradient(135deg, var(--svc) 0%, #8FDCF6 100%); color: var(--svc-on); }
.inv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.inv-sum { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: 0; }
.inv-sum dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); opacity: .8; }
.inv-sum dd { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1.25; }
.inv-sum dd small { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.belt { position: relative; padding-top: 46px; }
.belt-rail { position: absolute; left: 10%; right: 10%; top: 12px; height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, rgb(7 54 77 / .28) 0 14px, rgb(7 54 77 / .1) 14px 28px); animation: belt 1.1s linear infinite; }
.belt-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: var(--svc-on); transition: width 1000ms cubic-bezier(.2, .7, .2, 1) 300ms; }
.go .belt-fill { width: calc(var(--reach) * 25%); }
@keyframes belt { to { background-position: 28px 0; } }
.env { position: absolute; top: -9px; left: 0; width: 34px; height: 24px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 3px 8px rgb(7 54 77 / .28); opacity: 0; animation: env 8s linear calc(var(--i) * 1.6s) infinite; }
.env::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, var(--svc) 49% 53%, transparent 53%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49%, var(--svc) 49% 53%, transparent 53%) right / 50% 100% no-repeat; }
@keyframes env { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: calc(100% - 34px); opacity: 0; } }
.stations { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.stations li { opacity: 0; transform: translateY(12px); transition: opacity 360ms ease calc(var(--i) * 90ms), transform 360ms cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 90ms); }
.go .stations li { opacity: 1; transform: none; }
.stn { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; justify-items: start; padding: var(--space-3); border-radius: var(--radius-lg); color: var(--svc-on); text-decoration: none; background: rgb(255 255 255 / .42); transition: transform 160ms ease, background 160ms ease; }
.stn.on { background: #FFFFFF; }
.stn:hover { transform: translateY(-3px); background: #FFFFFF; }
.stn::before { content: ''; position: absolute; top: -18px; left: calc(50% - 1px); width: 2px; height: 18px; background: rgb(7 54 77 / .3); }
.stn.on::before { background: var(--svc-on); }
.stn-dot { position: absolute; top: -41px; left: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 5px solid rgb(7 54 77 / .3); box-sizing: border-box; }
.stn.on .stn-dot { border-color: var(--svc-on); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(7 54 77 / .4); } 100% { box-shadow: 0 0 0 14px rgb(7 54 77 / 0); } }
.stn em { grid-column: 1 / -1; font-style: normal; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.stn b { grid-column: 1; font-size: 34px; font-weight: var(--weight-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stn small { grid-column: 2; font-size: var(--text-xs); }
.stn i { grid-column: 1 / -1; font-style: normal; font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: .8; }

/* ===== オフィス ===== */
.st-off { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto 1fr auto auto; gap: 0 var(--space-4); padding: var(--space-5) var(--space-5) 0; color: #FFFFFF; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(#2F6FDE, #9CC3F6 78%); }
[data-time="morning"] .sky { background: linear-gradient(#5A8FE8, #F7D9A8 82%); }
[data-time="dusk"] .sky { background: linear-gradient(#2B3F85, #E98F5F 62%, #F7C948 92%); }
[data-time="night"] .sky { background: linear-gradient(#0E1B47, #27407F 88%); }
.sun { position: absolute; left: var(--x); top: 48px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: #FFE9A3; box-shadow: 0 0 46px 14px rgb(255 233 163 / .55); }
[data-time="night"] .sun { background: #E9EEF9; box-shadow: 0 0 34px 8px rgb(233 238 249 / .35); }
.cloud { position: absolute; width: 130px; height: 30px; border-radius: 30px; background: rgb(255 255 255 / .34); animation: cloud 46s linear infinite; }
.cloud::before { content: ''; position: absolute; left: 30px; top: -18px; width: 58px; height: 42px; border-radius: 50%; background: inherit; }
.c1 { top: 196px; left: -140px; }
.c2 { top: 242px; left: -140px; transform: scale(.7); animation-delay: -23s; }
[data-time="night"] .cloud { opacity: .18; }
@keyframes cloud { to { translate: calc(100vw + 160px) 0; } }
.off-card b { display: block; font-size: 38px; font-weight: var(--weight-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.off-card { text-shadow: 0 1px 8px rgb(0 0 0 / .32); }
.off-card h1 { font-size: var(--text-lg); }
.off-card > span { font-size: var(--text-sm); }
.off-next { grid-row: 1 / 3; grid-column: 2; align-self: start; display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: rgb(255 255 255 / .94); color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); transition: transform 160ms ease; }
.off-next:hover { transform: translateY(-2px); }
.off-next ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.off-next li { display: flex; justify-content: space-between; gap: var(--space-3); }
.off-next li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-next em { flex: none; font-style: normal; font-weight: var(--weight-bold); color: var(--svc-text); }
.off-next em.over { color: var(--yellow-text); }
.town { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: flex-end; justify-content: space-evenly; gap: var(--space-2); height: 230px; margin-top: var(--space-3); }
.town-empty { align-self: center; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: #FFFFFF; color: var(--svc-text); font-weight: var(--weight-bold); text-decoration: none; }
.bld { position: relative; flex: 1 1 0; max-width: 170px; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: inherit; text-decoration: none; }
.bld-body { position: relative; display: block; width: 100%; height: var(--h); border-radius: 5px 5px 0 0; background-color: #23395F; background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgb(255 255 255 / .16) 8px 18px, transparent 18px 26px), repeating-linear-gradient(0deg, transparent 0 10px, #23395F 10px 20px); transform: scaleY(0); transform-origin: bottom; transition: transform 620ms cubic-bezier(.2, 1.25, .4, 1) calc(var(--i) * 110ms), filter 160ms ease; }
.go .bld-body { transform: none; }
.bld:hover .bld-body { filter: brightness(1.22); }
.bld.tower .bld-body::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 26px; background: #23395F; }
.bld.house .bld-body { border-radius: 0; max-width: 100px; }
.bld.house .bld-body::before { content: ''; position: absolute; left: -8px; right: -8px; bottom: 100%; height: 26px; background: #2F4C78; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bld.shed .bld-body { border-radius: 26px 26px 0 0; background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgb(255 255 255 / .12) 12px 14px); }
.bld-body i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; background: #FFE08A; opacity: .25; animation: lamp 5s ease-in-out calc(var(--i) * .9s) infinite; }
[data-time="night"] .bld-body i, [data-time="dusk"] .bld-body i { opacity: .9; }
@keyframes lamp { 50% { opacity: 1; } }
.bld-name { max-width: 100%; margin-top: 6px; padding: 2px 8px; border-radius: 4px; background: rgb(0 0 0 / .42); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beacon { position: relative; margin-bottom: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: #F7C948; color: #3D2C00; font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; opacity: 0; transition: opacity 300ms ease calc(600ms + var(--i) * 110ms); animation: bob 2.4s ease-in-out infinite; }
.go .beacon { opacity: 1; }
.bld.tower .beacon { margin-bottom: 34px; }
.bld.house .beacon { margin-bottom: 34px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.road { grid-column: 1 / -1; grid-row: 4; position: relative; height: 36px; margin: 0 calc(var(--space-5) * -1); background: #333A48 repeating-linear-gradient(90deg, #F7C948 0 26px, transparent 26px 60px) 0 50% / 100% 3px no-repeat; }
.car { position: absolute; top: 5px; left: -70px; width: 46px; height: 17px; border-radius: 9px 12px 4px 4px; background: var(--svc); animation: car 11s linear calc(var(--i) * -2.4s) infinite; }
.car::before { content: ''; position: absolute; left: 11px; top: -8px; width: 22px; height: 10px; border-radius: 7px 7px 0 0; background: inherit; }
.car::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: -4px; height: 8px; background: radial-gradient(circle at 4px 4px, #111 3.5px, transparent 4px) 0 0 / 24px 8px repeat-x; }
.car:nth-child(even) { background: #F7C948; animation-duration: 15s; }
@keyframes car { to { left: calc(100% + 70px); } }
.off-foot { grid-column: 1 / -1; grid-row: 5; margin: 0 calc(var(--space-5) * -1); padding: var(--space-3) var(--space-5); background: #2B3241; }

/* ===== 業務委託 ===== */
.st-pt { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--svc); color: var(--svc-on); }
.pt-head { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: var(--space-8); }
.pt-total > span, .pt-pay > span { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); opacity: .8; }
.pt-total b { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.pt-pay { text-align: right; }
.pt-pay b { font-size: 46px; line-height: 1; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.pt-pay small { font-size: var(--text-sm); margin-left: 2px; }
.pt-pay em { display: block; font-style: normal; font-size: var(--text-xs); }
.race { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: #FFFFFF; color: var(--color-text-primary); }
.race-rule, .lane { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 64px; align-items: center; gap: var(--space-4); }
.race-steps { display: flex; justify-content: space-between; }
.race-steps i { font-style: normal; width: 0; display: flex; justify-content: center; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--svc-text); }
.lanes { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.lanes li { border-top: 1px dashed var(--svc-line, #D8D0F8); opacity: 0; transition: opacity 300ms ease calc(var(--i) * 70ms); }
.go .lanes li { opacity: 1; }
.lane { min-height: 44px; color: inherit; text-decoration: none; transition: background 160ms ease; }
.lane:hover { background: var(--svc-soft); }
.lane-who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lane-who i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--svc-soft); color: var(--svc-text); font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.lane-who b { min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-track { position: relative; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--svc-soft) 0 10px, #FFFFFF 10px 16px); }
.lane-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--svc); transition: width 1100ms cubic-bezier(.2, .8, .2, 1) calc(240ms + var(--i) * 80ms); }
.runner { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--svc-text); box-shadow: 0 0 0 4px #FFFFFF, 0 2px 8px rgb(45 31 102 / .4); transition: left 1100ms cubic-bezier(.2, .8, .2, 1) calc(240ms + var(--i) * 80ms); }
.go .lane-fill { width: calc(var(--pos) * 100%); }
.go .runner { left: calc(var(--pos) * 100%); animation: hop 1.6s ease-in-out 1.6s infinite; }
.runner.diff { background: #F5C02E; }
.runner.goal { background: var(--color-text-primary); }
@keyframes hop { 50% { transform: translateY(-5px); } }
.lane-track::after { content: ''; position: absolute; right: -2px; top: -9px; width: 16px; height: 26px; background: linear-gradient(var(--color-text-primary), var(--color-text-primary)) left / 2px 100% no-repeat, conic-gradient(var(--color-text-primary) 25%, #FFFFFF 0 50%, var(--color-text-primary) 0 75%, #FFFFFF 0) 2px 0 / 8px 8px; background-size: 2px 100%, 8px 8px; clip-path: polygon(0 0, 100% 0, 100% 50%, 12% 50%, 12% 100%, 0 100%); }
.lane-state { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--svc-text); text-align: right; }
.lane-state.diff { color: var(--yellow-text); }
.race-foot { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.race-empty { display: block; padding: var(--space-8); border-radius: var(--radius-lg); background: #FFFFFF; color: var(--svc-text); font-weight: var(--weight-bold); text-align: center; text-decoration: none; }

/* ===== 人事 ===== */
.st-hr { display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: radial-gradient(circle at 34% 50%, #FFEFB8 0%, var(--svc) 70%); color: var(--svc-on); }
.hr-stage { min-width: 0; padding: var(--space-3); }
.hr-map { display: block; width: 100%; height: auto; overflow: visible; }
.hr-map text { text-anchor: middle; font-size: 13px; font-weight: 700; fill: var(--svc-on); }
.hr-l1, .hr-l2 { fill: none; stroke: var(--svc-on); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .4; transition: stroke-dashoffset 520ms ease calc(var(--i) * 50ms); }
.hr-l1 { stroke-width: 2; }
.hr-l2 { stroke-width: 1.2; }
.go .hr-l1, .go .hr-l2 { stroke-dashoffset: 0; }
.hr-hub circle { fill: var(--svc-on); }
.hr-hub .hr-orbit { fill: none; stroke: var(--svc-on); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .55; transform-box: fill-box; transform-origin: center; animation: orbit 26s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hr-hub text { fill: #FFFFFF; font-size: 15px; }
.hr-dept rect { fill: #FFFFFF; }
.hr-dept text { font-size: 12px; }
.hr-dept { opacity: 0; transition: opacity 320ms ease calc(240ms + var(--i) * 70ms); }
.go .hr-dept { opacity: 1; }
.hr-node { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 460ms cubic-bezier(.2, 1.7, .4, 1) calc(300ms + var(--i) * 45ms); }
.go .hr-node { transform: none; }
.hr-node circle { fill: #FFFFFF; stroke: var(--svc-on); stroke-width: 2; }
.hr-node:hover circle { fill: var(--svc-soft); }
.hr-node.fresh circle { fill: var(--svc-on); }
.hr-node.fresh text { fill: #FFFFFF; }
.go .hr-node.fresh { animation: glow 2.2s ease-in-out 1.4s infinite; }
@keyframes glow { 50% { transform: scale(1.18); } }
.hr-side { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: rgb(255 255 255 / .55); backdrop-filter: blur(6px); }
.hr-eval { display: flex; justify-content: center; color: inherit; text-decoration: none; }
.hr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.hr-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #FFFFFF; }
.hr-list em { flex: none; font-style: normal; font-weight: var(--weight-bold); }
.hr-list li.new em { color: var(--svc-text); }
.hr-side .st-next { margin-top: auto; }
.st-hr.self { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); }
.st-hr.self .hr-side { padding: 0; background: none; backdrop-filter: none; }
.hr-days b { font-size: 76px; font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.hr-days small { margin-left: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* ===== 労務 ===== */
.st-lb { display: grid; grid-template-columns: 260px minmax(0, 1fr) 190px; grid-template-rows: auto auto; gap: var(--space-5); padding: var(--space-6); background: var(--svc); color: #FFFFFF; }
.lb-clock { display: grid; justify-items: center; align-content: center; gap: var(--space-3); }
.lb-clock svg { width: 100%; max-width: 220px; height: auto; }
.lb-clock .face { fill: #FFFFFF; }
.lb-clock .marks path { stroke: rgb(20 107 62 / .4); stroke-width: 1.5; }
.lb-clock .marks .big { stroke: var(--svc-text); stroke-width: 3; }
.hand { stroke-linecap: round; transition: none; }
.hand.h { stroke: #143524; stroke-width: 7; }
.hand.m { stroke: #143524; stroke-width: 5; }
.hand.s { stroke: #F5C02E; stroke-width: 2.5; }
.lb-clock .pin { fill: #F5C02E; }
.lb-now { font-size: 30px; font-weight: var(--weight-bold); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lb-main { min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.lb-stamp { flex: none; padding: var(--space-1) var(--space-3); border: 3px solid #FFFFFF; border-radius: var(--radius-sm); font-weight: var(--weight-bold); transform: rotate(-6deg); }
.lb-cal { padding: var(--space-3); border-radius: var(--radius-lg); background: rgb(255 255 255 / .12); }
.lb-week, .lb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lb-week i { font-style: normal; text-align: center; font-size: var(--text-xs); opacity: .8; }
.lb-grid { margin-top: 4px; }
.cell { position: relative; display: grid; place-items: center; height: 32px; border-radius: 6px; background: rgb(255 255 255 / .1); color: #FFFFFF; font-size: var(--text-xs); text-decoration: none; opacity: 0; transition: opacity 240ms ease calc(var(--i) * 22ms), background 500ms ease calc(var(--i) * 22ms); }
.go .cell { opacity: 1; }
.go .cell.on { background: rgb(255 255 255 / calc(var(--v) * .78)); color: #0E3F26; font-weight: var(--weight-bold); }
.cell.blank { opacity: 0 !important; }
.cell.miss::after { content: ''; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: #F5C02E; box-shadow: 0 0 0 2px #0E3F26; }
.go .cell.miss::after { animation: glow 1.6s ease-in-out infinite; }
a.cell:hover { outline: 2px solid #FFFFFF; }
.lb-side { display: grid; gap: var(--space-3); align-content: center; justify-items: center; color: #FFFFFF; }
.lb-side .st-ring circle { stroke: rgb(255 255 255 / .2); }
.lb-side .st-ring .v { stroke: #F5C02E; }
.lb-fig { text-align: center; }
.lb-fig span { display: block; font-size: var(--text-xs); opacity: .85; }
.lb-fig b { font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.lb-fig small { font-size: var(--text-xs); margin-left: 4px; }
.st-lb > .st-next, .st-lb > .st-clear { grid-column: 1 / -1; justify-self: stretch; }
.st-lb > .st-clear { justify-self: start; }

/* ===== 会計 ===== */
.st-ac { min-height: 430px; display: flex; flex-direction: column; background: radial-gradient(circle at 80% 0%, #2C4C98 0%, #14264F 58%, #0D1A38 100%); color: #FFFFFF; isolation: isolate; }
.ac-chart { position: absolute; inset: 104px 0 96px; z-index: -1; }
.ac-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(-10px 100% -10px 0); transition: clip-path 1500ms cubic-bezier(.4, 0, .2, 1) 200ms; }
.go .ac-chart svg { clip-path: inset(-10px 0 -10px 0); }
.ac-chart .area { fill: rgb(96 140 230 / .2); }
.ac-chart .curve { fill: none; stroke: #F7C948; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ac-chart .limit { stroke: rgb(255 255 255 / .4); stroke-width: 1; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.ac-ticks span { position: absolute; display: grid; justify-items: center; transform: translate(-50%, -6px); opacity: 0; transition: opacity 260ms ease calc(320ms + var(--i) * 190ms); }
.go .ac-ticks span { opacity: 1; }
.ac-ticks i { width: 12px; height: 12px; border-radius: 50%; background: #0D1A38; border: 3px solid #F7C948; }
.ac-ticks b { margin-top: 4px; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: rgb(255 255 255 / .75); }
.ac-ticks .short i { border-color: #FFFFFF; background: #FFFFFF; }
.ac-head { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4) var(--space-8); padding: var(--space-6); }
.ac-bal { display: block; font-size: 46px; font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.st-ac .st-title h1 { margin-top: 2px; font-size: var(--text-md); color: rgb(255 255 255 / .75); }
.odo { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.odo-col { display: block; transform: translateY(0); transition: transform 1400ms cubic-bezier(.16, .9, .2, 1) calc(var(--i) * 60ms); }
.odo-col i { display: block; height: 1.1em; font-style: normal; }
.go .odo-col { transform: translateY(calc(var(--d) * -1.1em)); }
.ac-gauges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.ac-gauges div { padding: var(--space-2) var(--space-4); border: 1px solid rgb(255 255 255 / .22); border-radius: var(--radius-sm); background: rgb(13 26 56 / .6); }
.ac-gauges dt { font-size: var(--text-xs); color: rgb(255 255 255 / .72); }
.ac-gauges dd { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ac-gauges a { color: #F7C948; text-decoration: none; }
.tape { overflow: hidden; border-block: 1px solid rgb(255 255 255 / .16); background: rgb(0 0 0 / .28); }
.tape-run { display: inline-flex; gap: var(--space-8); padding-block: var(--space-2); white-space: nowrap; font-size: var(--text-sm); animation: tape 52s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
.tape span { display: inline-flex; gap: var(--space-2); color: rgb(255 255 255 / .85); }
.tape time { color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; }
.tape b { font-variant-numeric: tabular-nums; }
.tape b.in { color: #F7C948; }
.tape span.done { opacity: .62; }
@keyframes tape { to { transform: translateX(-50%); } }
.ac-foot { padding: var(--space-3) var(--space-6); }

/* ===== 完了の瞬間 ===== */
.moment { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; pointer-events: none; }
.m-burst { position: absolute; left: 50%; top: 50%; }
.m-burst i { position: absolute; font-style: normal; font-size: 20px; color: var(--svc-text); opacity: 0; animation: m-bit 1000ms cubic-bezier(.1, .7, .2, 1) calc(var(--i) * 30ms) forwards; }
@keyframes m-bit { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.1); } }
.m-card { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-full); background: var(--svc); color: var(--svc-on); box-shadow: 0 14px 44px rgb(0 0 0 / .28); font-size: var(--text-xl); font-weight: var(--weight-bold); animation: m-card 1600ms cubic-bezier(.2, 1.4, .3, 1) forwards; }
.m-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; color: var(--svc-text); }
@keyframes m-card { 0% { transform: scale(.5); opacity: 0; } 16% { transform: scale(1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96) translateY(-10px); opacity: 0; } }

/* ===== 画面全体の質感 ===== */
:root[data-svc="invoice"] .top { background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .26) 0 10px, transparent 10px 20px, rgb(7 54 77 / .1) 20px 30px, transparent 30px 40px); background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; }
:root[data-svc="invoice"] .page { --radius-lg: 4px; }
:root[data-svc="office"] .svc-body { background-image: linear-gradient(rgb(47 111 222 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(47 111 222 / .07) 1px, transparent 1px); background-size: 24px 24px; }
:root[data-svc="partner"] .top { background-image: repeating-linear-gradient(90deg, rgb(45 31 102 / .5) 0 16px, transparent 16px 28px); background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom; }
:root[data-svc="hr"] .page { --radius-lg: 22px; --radius-md: 14px; }
:root[data-svc="hr"] .svc-body { background-image: radial-gradient(rgb(245 192 46 / .32) 2px, transparent 2.4px); background-size: 26px 26px; }
:root[data-svc="labor"] .top { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 2px, transparent 2px 12px); background-size: 100% 7px; background-repeat: no-repeat; background-position: bottom; }
:root[data-svc="accounting"] .page { --radius-lg: 2px; --radius-md: 2px; }
:root[data-svc="accounting"] .svc-body { background-image: repeating-linear-gradient(0deg, rgb(30 58 120 / .07) 0 1px, transparent 1px 28px); }
:root[data-svc="accounting"] .panel, :root[data-svc="accounting"] table { font-variant-numeric: tabular-nums; }
:root[data-svc="accounting"] .st { --radius-lg: 6px; border-radius: 6px; }

/* ===== 幅と動き ===== */
@media (max-width: 1180px) {
  .st-lb { grid-template-columns: 200px minmax(0, 1fr); }
  .lb-side { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); align-items: center; }
  .st-hr { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 760px) {
  .st-inv, .st-pt, .st-lb { padding: var(--space-4); }
  .belt-rail { display: none; }
  .stations { grid-template-columns: 1fr; gap: var(--space-2); }
  .stn { grid-template-columns: 76px 1fr auto auto; align-items: center; column-gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .stn em { grid-column: 1; }
  .stn b { grid-column: 3; font-size: var(--text-xl); }
  .stn small { grid-column: 4; }
  .stn i { grid-column: 2; grid-row: 1; }
  .stn-dot, .stn::before { display: none; }
  .belt { padding-top: 0; }
  .sun { left: 88%; top: 16px; width: 40px; height: 40px; }
  .st-off { grid-template-columns: 1fr; grid-template-rows: none; padding: var(--space-4) var(--space-4) 0; }
  .off-next { grid-column: 1; grid-row: auto; margin-top: var(--space-3); }
  .town { grid-row: auto; height: 190px; }
  .road, .off-foot { grid-row: auto; margin-inline: calc(var(--space-4) * -1); }
  .off-foot { padding-inline: var(--space-4); }
  .bld-name { font-size: 10px; padding: 1px 4px; }
  .beacon { font-size: 10px; padding: 1px 5px; }
  .pt-head { grid-template-columns: 1fr auto; gap: var(--space-3); }
  .pt-head .st-title { grid-column: 1 / -1; }
  .race { padding: var(--space-3); }
  .race-rule { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr) 54px; gap: 2px var(--space-2); padding-block: var(--space-2); }
  .lane-track { grid-column: 1 / -1; grid-row: 2; margin: 8px 10px 6px; }
  .st-hr { grid-template-columns: 1fr; }
  .hr-side { padding: var(--space-4); }
  .st-lb { grid-template-columns: 1fr; }
  .lb-clock { grid-template-columns: 110px 1fr; align-items: center; justify-items: start; }
  .lb-side { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
  .lb-side .st-ring { width: 96px; }
  .lb-side .st-ring b { font-size: var(--text-lg); }
  .ac-bal { font-size: 34px; }
  .ac-head { padding: var(--space-4); flex: none; }
  .st-ac { min-height: 0; }
  .ac-chart { position: relative; inset: auto; height: 170px; order: 2; }
  .tape { order: 3; }
  .ac-foot { order: 4; padding: var(--space-3) var(--space-4); }
  .ac-gauges div { padding: var(--space-1) var(--space-3); }
  .ac-gauges dd { font-size: var(--text-md); }
  .st-next { padding-inline: var(--space-3); }
}

/* 動かない時も最後の姿を見せる。 */
.st.still *, :root[data-calm] .st * { transition: none !important; }
:root[data-calm] .st *, :root[data-calm] .st *::before, :root[data-calm] .st *::after { animation: none !important; }
:root[data-calm] .env { display: none; }

/* ===== 朝報告 ===== */
.morning { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: calc(var(--space-3) * -1); padding: var(--space-1) var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); box-shadow: inset 4px 0 0 #F7C948; }
.mr-head { display: grid; line-height: 1.3; }
.mr-head b { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.mr-head time { font-size: var(--text-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.mr-total { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.mr-total b { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--bp-accent); font-variant-numeric: tabular-nums; }
.mr-total small { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.mr-items { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mr-items a, .mr-items button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 5px; border-radius: var(--radius-full); background: var(--svc-soft); color: var(--svc-text); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.mr-items button { border: 0; background: #FFF3C4; color: #5C4300; cursor: pointer; font-family: inherit; }
.mr-items a:hover, .mr-items button:hover { filter: brightness(.96); }
.mr-items i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--svc); color: var(--svc-on); font-style: normal; font-size: 11px; }
.mr-items .found i { background: #F7C948; color: #3D2C00; }
.mr-items .failed a { background: #FFF3D6; color: #7A5600; }
.mr-items .failed i { background: #7A5600; color: #FFFFFF; }
.mr-items b { font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.mr-items small { margin-left: -4px; }
.morning.wait .mr-total, .morning.wait li { opacity: 0; }
.morning.play li { animation: mr-pop 340ms cubic-bezier(.2, 1.5, .3, 1) calc(240ms + var(--i) * 120ms) both; }
.morning.play .mr-items i { animation: mr-check 300ms ease-out calc(440ms + var(--i) * 120ms) both; }
@keyframes mr-pop { from { opacity: 0; transform: translateX(-10px) scale(.86); } }
@keyframes mr-check { from { transform: scale(.2) rotate(-90deg); } }

/* ===== 月次山場 ===== */
.peaks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0 0 0 var(--space-8); border-left: 1px solid var(--color-border-subtle); list-style: none; }
.peak a { display: flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.peak svg { flex: none; width: 34px; height: 36px; overflow: visible; }
.peak span { display: grid; line-height: 1.3; white-space: nowrap; }
.peak b { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.peak small { font-size: var(--text-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.peak a:hover b { color: var(--svc-text); }
.pk-base { fill: var(--svc-soft); stroke: var(--svc); stroke-width: 1.5; stroke-linejoin: round; }
.pk-fill { fill: var(--svc); clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); }
.pk-flag { fill: #F7C948; stroke: var(--svc-text); stroke-width: 1.5; stroke-linejoin: round; opacity: 0; }
.peak.done .pk-flag { opacity: 1; }
.peak.done small { color: var(--svc-text); font-weight: var(--weight-medium); }
@media (max-width: 1180px) { .peaks { flex-basis: 100%; order: 3; padding-left: 0; border-left: 0; } }
@media (max-width: 720px) {
  .peaks { display: grid; grid-template-columns: 1fr 1fr; }
  .morning { padding: var(--space-3) var(--space-4); }
  .mr-items { flex-basis: 100%; }
}

/* ===== 月次山場の達成 ===== */
.finale { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; overflow: hidden; padding: var(--space-5); background: var(--svc); color: var(--svc-on); cursor: pointer; animation: f-in 420ms cubic-bezier(.76, 0, .24, 1) both; }
@keyframes f-in { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }
.f-art { position: absolute; inset: 0; pointer-events: none; }
.f-box { position: relative; display: grid; justify-items: center; gap: var(--space-4); width: min(540px, 100%); padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: #FFFFFF; color: var(--color-text-primary, #1B2430); text-align: center; box-shadow: 0 24px 70px rgb(0 0 0 / .3); animation: f-box 520ms cubic-bezier(.2, 1.3, .3, 1) 420ms both; }
@keyframes f-box { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.f-kicker { margin: 0; color: var(--svc-text); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .14em; }
.f-title { margin: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: var(--weight-bold); line-height: 1.35; }
.f-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-8); margin: 0; }
.f-stats dt { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.f-stats dd { margin: 0; white-space: nowrap; }
.f-stats b { font-size: clamp(26px, 4.4vw, 38px); font-weight: var(--weight-bold); color: var(--svc-text); font-variant-numeric: tabular-nums; }
.f-stats small { margin-left: 2px; font-size: var(--text-sm); color: var(--color-text-tertiary); }
.f-fast { margin: 0; padding: 3px 14px; border-radius: var(--radius-full); background: #FFF3C4; color: #5C4300; font-size: var(--text-sm); font-weight: var(--weight-bold); animation: f-pop 320ms cubic-bezier(.3, 1.6, .4, 1) 1500ms both; }
.f-climb { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.f-climb li { padding: 3px 12px; border-radius: var(--radius-full); background: #EEF1F5; color: #5C6776; font-size: var(--text-xs); font-weight: var(--weight-medium); }
.f-climb li.done { background: var(--svc); color: var(--svc-on); }
.f-seal { position: absolute; top: -26px; right: -14px; display: grid; place-items: center; width: 92px; height: 92px; border: 4px solid var(--svc-text); border-radius: 50%; background: #FFFFFF; color: var(--svc-text); font-size: 22px; font-weight: var(--weight-bold); letter-spacing: .08em; transform: rotate(-12deg); animation: f-seal 380ms cubic-bezier(.3, 1.6, .4, 1) 1250ms both; }
@keyframes f-seal { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } }
@keyframes f-pop { from { opacity: 0; transform: scale(.7); } }

/* 請求書: 請求の件数ぶん封筒が飛ぶ */
.f-sky i { position: absolute; left: -90px; top: var(--y); width: 66px; height: 44px; border-radius: 4px; background: #FFFFFF; box-shadow: 0 6px 16px rgb(7 54 77 / .24); animation: f-env 1500ms cubic-bezier(.35, .1, .5, 1) calc(120ms + var(--i) * 130ms) both; }
.f-sky i::before { content: ""; position: absolute; inset: 0 0 34% 0; background: var(--svc-soft); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes f-env { to { transform: translate(calc(100vw + 200px), -16vh) rotate(-10deg); } }

/* 業務委託: 委託先の人数ぶん走ってテープを切る */
.f-race { position: absolute; inset: 0; display: grid; align-content: space-evenly; }
.f-race i { position: relative; display: block; width: 40px; height: 40px; margin-left: -60px; border-radius: 50%; background: var(--svc-on); box-shadow: -30px 0 0 -10px rgb(45 31 102 / .3), -56px 0 0 -14px rgb(45 31 102 / .16); animation: f-run 1100ms cubic-bezier(.5, 0, .3, 1) calc(100ms + var(--i) * 90ms) both; }
@keyframes f-run { to { transform: translateX(calc(93vw + 60px)); } }
.f-tape { position: absolute; left: 84%; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(0deg, #FFFFFF 0 18px, #F7C948 18px 36px); transform-origin: center; animation: f-tape 340ms ease-out 760ms forwards; }
@keyframes f-tape { to { transform: scaleY(0); opacity: 0; } }

/* 労務: 月の日付が順に点く */
.f-cal { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 6px; }
.f-cal i { display: grid; place-items: center; border-radius: 6px; background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .34); font-style: normal; font-size: clamp(14px, 3vw, 28px); font-weight: var(--weight-bold); animation: f-day 240ms ease-out calc(100ms + var(--i) * 34ms) both; }
@keyframes f-day { from { background: rgb(255 255 255 / .5); color: transparent; transform: scale(.82); } }

/* 会計: 罫線が引かれ、最後に二重線で締める */
.f-rule { position: absolute; inset: 7vh 0; display: grid; align-content: space-between; }
.f-rule i, .f-rule b { display: block; height: 2px; background: rgb(255 255 255 / .22); transform-origin: left; animation: f-line 520ms cubic-bezier(.3, 0, .2, 1) calc(100ms + var(--i, 13) * 70ms) both; }
.f-rule b { height: 5px; background: #FFFFFF; }
@keyframes f-line { from { transform: scaleX(0); } }

/* 4工程すべて完了 */
.f-all .f-box { outline: 4px solid #F7C948; outline-offset: 6px; }
.f-all .f-kicker { font-size: var(--text-md); }

@media (max-width: 640px) {
  .f-box { padding: var(--space-6) var(--space-4) var(--space-5); }
  .f-seal { top: -22px; right: 2px; width: 72px; height: 72px; font-size: 17px; }
}
:root[data-calm] .finale, :root[data-calm] .finale * { animation: none !important; }
:root[data-calm] .f-art { display: none; }