/* ============================================================================
   ページ要約Remotion動画の共有CSS（全ページ共通・1つ）。
   本番では /css/vision-video.css に1回アップし、各ページから絶対URLで参照する：
     <link rel="stylesheet" href="https://dprofessions.co.jp/css/vision-video.css">
   ※ ページのCSS変数に依存しないよう、色は直接指定（どのページでも同じ見た目）。
   ============================================================================ */

.video-frame { position: relative; max-width: 880px; margin: 1.8rem auto 0; border: 1px solid #c8cdd8; border-top: 3px solid #2056a8; background: #0f1a33; box-shadow: 0 6px 24px rgba(15, 26, 51, .14); line-height: 0; }
.remotion-player { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.rp-loading { color: rgba(255, 255, 255, .55); font-size: .82rem; letter-spacing: .05em; line-height: 1.7; }

/* 冒頭サムネイル（タイトルカード）: JS読込前から表示、クリックで再生に切替 */
.video-poster { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 6%; background: radial-gradient(120% 120% at 80% 0%, #1b2a4a 0%, #0f1a33 72%); cursor: pointer; line-height: 1.45; transition: opacity .35s ease; font-family: 'Noto Sans JP', sans-serif; }
.video-poster.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.vp-kicker { color: #3a7bd5; font-weight: 700; letter-spacing: .18em; font-size: clamp(.6rem, 1.4vw, .92rem); margin-bottom: 1.1em; }
.vp-title { font-family: 'Noto Serif JP', serif; color: #fff; font-weight: 700; line-height: 1.3; font-size: clamp(1.4rem, 4.6vw, 2.7rem); }
.vp-line { width: clamp(110px, 16vw, 240px); height: 3px; background: linear-gradient(90deg, #2056a8, #3a7bd5); margin: 1.05em 0 .85em; }
.vp-sub { color: rgba(255, 255, 255, .82); font-weight: 500; font-size: clamp(.82rem, 1.9vw, 1.18rem); }
.vp-play { position: absolute; left: 1.4rem; bottom: 1.1rem; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent rgba(255, 255, 255, .92); }

/* 文字起こし（全文テキスト）アコーディオン */
.video-transcript { max-width: 880px; margin: .9rem auto 0; border: 1px solid #e0e4ec; background: #fff; font-family: 'Noto Sans JP', sans-serif; }
.video-transcript > summary { cursor: pointer; list-style: none; padding: .7rem 1rem; font-size: .8rem; font-weight: 700; color: #1b2a4a; background: #f7f8fa; display: flex; align-items: center; gap: .4rem; }
.video-transcript > summary::-webkit-details-marker { display: none; }
.video-transcript > summary::before { content: '＋'; color: #2056a8; font-weight: 700; }
.video-transcript[open] > summary::before { content: '－'; }
.vt-body { padding: .6rem 1.2rem 1.1rem; }
.vt-loading { color: #5a6275; font-size: .78rem; }
.vt-sec { margin: .9rem 0; }
.vt-h { font-size: .78rem; font-weight: 700; color: #2056a8; margin-bottom: .25rem; }
.vt-list { margin: 0; padding-left: 1.2rem; }
.vt-list li { font-size: .82rem; color: #4a5068; line-height: 1.85; }