/* トップ専用。既存2ページの動画の見た目には適用しない。 */
.hero-video-link { display:inline-flex; align-items:center; gap:14px; margin-top:16px; max-width:100%; color:#245e4c; text-decoration:none; }
.hero-video-link { font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.hero-video-note { font-size:12px; font-weight:400; color:#54655e; }
.flow-visual > .hero-video-link { order:3; margin-bottom:8px; }
.hero-video-link:focus-visible { outline:3px solid #245e4c; outline-offset:4px; }
.top-video-open { overflow:hidden; scrollbar-gutter:stable; }
.top-video-dialog { box-sizing:border-box; width:min(880px,calc(100% - 40px)); max-width:none; max-height:94dvh; padding:24px; border:0; border-radius:14px; color:#13223c; background:#fff; overscroll-behavior:contain; }
.top-video-dialog::backdrop { background:#13223cc9; }
.top-video-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-video-bar p { margin:0; font-size:14px; }
.top-video-bar button { flex-shrink:0; padding:10px 14px; border:1px solid #cad9c5; border-radius:6px; background:#fff; color:#17382f; cursor:pointer; }
.top-video-dialog .qz-video { margin:16px 0; max-width:none; }
.top-video-dialog .qz-video h2 { margin:0 0 8px; font-size:20px; }
.top-video-dialog .qz-video p { font-size:14px; }
.top-video-next { margin:0; }
.top-video-dialog a { color:#245e4c; }
@media(max-width:600px) {
  .hero-video-link { order:2; gap:8px; margin-top:0; margin-bottom:10px; }
  .hero-video-note { font-size:10px; }
  .top-video-dialog { width:100%; max-height:100dvh; padding:16px; border-radius:0; }
  .top-video-dialog .qz-video h2 { font-size:18px; }
}
@media(max-width:600px) {
  .redesign .top-videos h2 { font-size:26px; }
  /* 次のカードの一部とスクロールバーを残し、横へ続くことを示す。 */
  .redesign .top-video-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(270px,72vw); gap:14px; overflow-x:auto; padding:3px 3px 12px; }
}
@media(prefers-reduced-motion:reduce) { .top-video-card-play { transition:none; } }

/* 動画・画面・操作を同じ業務タブで見せる。サムネイルと説明を1つの入口にする。 */
.redesign .top-tab-video { margin:22px 0 0; }
.top-tab-video-link { display:flex; align-items:center; gap:20px; max-width:640px; padding:12px; border:1px solid #d2dfd5; border-radius:8px; background:#f4f7f3; color:#245e4c; text-decoration:none; }
.top-tab-thumbnail { position:relative; display:grid; place-items:center; flex:0 0 224px; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:#17382f; }
.top-tab-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.top-tab-play { position:relative; display:grid; place-items:center; width:36px; height:36px; border:2px solid white; border-radius:50%; background:#17382fe6; color:white; font-size:14px; }
.top-tab-video-copy { display:grid; gap:8px; min-width:0; font-size:14px; line-height:1.7; }
.top-tab-video-copy strong { font-size:17px; }
.top-tab-video-link:hover strong { text-decoration:underline; text-underline-offset:4px; }
.top-tab-video-link:focus-visible { outline:3px solid #245e4c; outline-offset:4px; }
.top-tab-video-link:not(.is-dialog-ready) .hero-video-note { display:none; }
@media(max-width:600px) {
  .top-tab-video-link { flex-direction:column; align-items:stretch; gap:12px; padding:12px; }
  .top-tab-thumbnail { flex-basis:auto; width:100%; }
  .top-tab-video-copy { gap:4px; font-size:13px; }
  .top-tab-video-copy strong { font-size:16px; }
  .top-tab-video-copy .hero-video-note { font-size:12px; }
}