/* トップで紹介する6つの用途 */
.home .kick-second::before { content: "・"; }
@media (max-width: 720px) {
  .home .kick::before { display: none; }
  .home .kick-second { display: block; }
  .home .kick-second::before { content: ""; }
}
/* トップの実績の写真は motion.css の「世界観の決まり」（.top-works）。押すとその現場のページへ（拡大の窓は 2026-10-16 にやめた） */

/* 紹介動画（ここまでの歩み）: 見出しと年表と同じ幅いっぱい。操作は動画の中の記号だけ。動画の最後に描いてある「相談する」はそのまま押せる */
.home .reel { margin-bottom: 48px; }
.home .reel-frame { position: relative; background: var(--dark); border-radius: var(--radius); overflow: hidden; }
.home .reel-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--dark); cursor: pointer; }
.home .reel-ctrl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; pointer-events: none; transition: opacity .25s ease; }
.home .reel-ico {
  pointer-events: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(14, 14, 15, .6); color: var(--on-dark); cursor: pointer; transition: background-color .2s ease;
}
.home .reel-ico svg { display: block; width: 20px; height: 20px; }
.home .reel-ico:hover { background: rgba(14, 14, 15, .85); }
.home .reel-ico:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.home .reel-ico[hidden] { display: none; }
.home .reel-full { margin-left: auto; }
.home .reel .i-pause, .home .reel .i-replay, .home .reel .i-sound { display: none; }
.home .reel.is-playing .i-play, .home .reel.is-ended .i-play, .home .reel.is-sound .i-muted { display: none; }
.home .reel.is-playing .i-pause, .home .reel.is-ended .i-replay, .home .reel.is-sound .i-sound { display: block; }
@media (hover: hover) { /* マウスのある画面は、再生中は操作を隠し、動画に乗せた時と止まっている時だけ出す */
  .home .reel.is-playing .reel-ctrl { opacity: 0; }
  .home .reel.is-playing .reel-frame:hover .reel-ctrl, .home .reel.is-playing .reel-frame:focus-within .reel-ctrl { opacity: 1; }
}
/* 動画の最後の「相談する →」の絵の上に重ねる本物のリンク（絵が出るまでは押せない・見えない） */
.home .reel-cta { position: absolute; border-radius: 999px; visibility: hidden; transition: box-shadow .2s ease; }
.home .reel-cta::after { content: ""; position: absolute; inset: -13px -10px; border-radius: 999px; }
.home .reel.is-cta .reel-cta { visibility: visible; }
.home .reel-cta:hover, .home .reel-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242, 239, 233, .9); }
.home .reel-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .home .reel-ctrl, .home .reel-ico, .home .reel-cta { transition: none; } }