/* 会社沿革: the history yard (Hakoniwa), 25 Oct 2026 */
.hk{position:relative;display:block;margin:0;width:min(100%,var(--hk-size,340px));aspect-ratio:1;pointer-events:none}
.hk canvas{display:block;width:100%;height:100%;opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease,ease),transform 1.1s var(--ease,ease)}
.hk.is-on canvas{opacity:1;transform:none}
.kmt-on .hk{display:none}
/* history: a little yard that grows with the company, beside a rail of years */
.hist-stage{margin-top:34px}
.hist-world{--hk-size:420px;margin:0 0 0 -26px}
.hist-stage .hist-now{display:flex;align-items:baseline;gap:14px;margin:-6px 0 0;font-family:var(--f-display);color:var(--accent);line-height:1.2}
.hist-stage .hist-now b{display:inline;font-size:32px;font-weight:600;letter-spacing:.02em;transition:opacity .25s var(--ease)}
.hist-stage .hist-now span{display:inline;margin:0;font-family:var(--f-text);font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--ink);transition:opacity .25s var(--ease)}
.hist-stage .hist-now.swap b,.hist-stage .hist-now.swap span{opacity:0}
.js-hist .timeline{position:relative;border-top:0;padding-left:40px}
.js-hist .timeline::before,.js-hist .timeline::after{content:"";position:absolute;left:9px;top:46px;width:2px;background:var(--line)}
.js-hist .timeline::before{bottom:46px}
.js-hist .timeline::after{height:var(--hist-fill,0px);background:var(--accent);transition:height .7s var(--ease)}
.js-hist .timeline li{position:relative;border-bottom:1px solid var(--line);opacity:1}
.js-hist .timeline li::before{content:"";position:absolute;left:-37px;top:calc(clamp(26px,3vw,38px) + 9px);width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--line);box-sizing:border-box;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);z-index:1}
.js-hist .timeline li.past::before{background:var(--accent);border-color:var(--accent)}
.js-hist .timeline li.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(1,105,54,.14)}
.js-hist .timeline li.now .yr b{color:var(--accent)}
@media (max-width:900px){
  .hist-stage{position:sticky;top:64px;z-index:3;display:flex;align-items:center;gap:14px;margin:0 calc(var(--gutter,20px) * -1);padding:4px var(--gutter,20px);background:var(--paper);box-shadow:0 10px 12px -12px rgba(34,30,25,.25)}
  .hist-world{--hk-size:150px;flex:0 0 150px;margin:0}
  .hist-stage .hist-now{flex-direction:column;align-items:flex-start;gap:4px;margin:0}
  .hist-stage .hist-now b{font-size:30px}
  .hist-stage .hist-now span{font-size:16px}
  .js-hist .timeline{padding-left:32px}
  .js-hist .timeline::before,.js-hist .timeline::after{left:6px}
  .js-hist .timeline li::before{left:-32px;top:27px}
}
@media (prefers-reduced-motion:reduce){.hk canvas,.js-hist .timeline::after,.js-hist .timeline li::before{transition:none}}
@media (max-width:900px){.hist-stage .hist-now{position:static;padding:0;background:none;box-shadow:none}}

.hk[data-look="pixel"] canvas{image-rendering:pixelated}