/* =========================================================================
   videog ランディング（www.videog.ai ホームページ）移植スタイル
   KINTOKI フロントへ統合。すべて .vdg-landing 配下にスコープ。
   プレーヤースキンは #player_div で自然スコープ。
   元: 03_Corp/website/www.videog.ai/index.html の <style> ブロック
   ========================================================================= */

.vdg-landing{
  --navy:#0B1F3A;--teal:#14B8C4;--teal-d:#0E96A1;--green:#16C79A;
  --coral:#FF4D5E;--indigo:#5B7CFA;--violet:#8B5CF6;--line:#e6ebf1;
  /* 製品=e-learning の配色（data-product="el"） */
  --prod:#eef7f8;--prod-d:#0E96A1;--prod-main:#16C79A;
  --prod-grad:linear-gradient(135deg,#34dcc4,#0E96A1);
  font-family:"Mada","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:#3c4a5e;background:#fff;
}
.vdg-landing *{box-sizing:border-box}
.vdg-landing a{text-decoration:none;color:inherit}
.vdg-landing img{max-width:100%}

/* レイアウト基本 */
.vdg-landing .l-container{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}
.vdg-landing .l-container-fluid{width:100%;padding-left:16px;padding-right:16px}
.vdg-landing .sec-pad{padding:60px 0}
.vdg-landing .bg-soft{background:#f5f9fb}
.vdg-landing .bg-navy{background:var(--navy);color:#cfe0ee}
.vdg-landing .text-center{text-align:center}
.vdg-landing .text-teal{color:var(--prod-d)}

/* タイポ */
.vdg-landing h2.sec{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--navy);line-height:1.35;margin:0}
.vdg-landing .lead{color:#3c4a5e;font-size:16px;line-height:1.7;font-weight:400}
.vdg-landing .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--prod-d);background:var(--prod);padding:6px 14px;border-radius:999px;margin-bottom:12px}

/* カード */
.vdg-landing .card{border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(11,31,58,.05);background:#fff}
.vdg-landing .card-body{padding:22px}

/* ボタン */
.vdg-landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;border-radius:10px;padding:10px 20px;cursor:pointer;border:1px solid transparent;transition:.15s;line-height:1.2}
.vdg-landing .btn-lg{padding:13px 26px;font-size:16px}
.vdg-landing .btn-block{display:flex;width:100%}
.vdg-landing .btn-primary{background:var(--prod-grad);color:#fff;border:0;box-shadow:0 8px 20px rgba(11,31,58,.18)}
.vdg-landing .btn-primary:hover{filter:brightness(1.04)}
.vdg-landing .btn-outline-primary{color:var(--prod-d);border-color:var(--prod-main);background:#fff}
.vdg-landing .btn-outline-primary:hover{background:var(--prod-main);border-color:var(--prod-main);color:#fff}
.vdg-landing .btn-light{background:#fff;color:var(--prod-d);font-weight:700}
.vdg-landing .btn-outline-light{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.vdg-landing .btn-outline-light:hover{background:rgba(255,255,255,.12)}

/* ============ ヘッダー ============ */
.vdg-landing .lp-header{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #e7eef3;height:56px;display:flex;align-items:center}
.vdg-landing .lp-header .l-container{display:flex;align-items:center;width:100%;max-width:none;gap:16px}
.vdg-landing .lp-brand img{height:30px;display:block}
.vdg-landing .hbar-tag{font-size:13px;color:#5b6b80;font-weight:600;margin-left:8px}
.vdg-landing .hcta{display:flex;align-items:center;gap:10px;margin-left:auto}
.vdg-landing .hcta .login{font-weight:700;color:var(--navy)}
.vdg-landing .hcta .login:hover{color:var(--prod-d)}
@media (max-width:767px){.vdg-landing .hbar-tag{display:none}.vdg-landing .lp-header .eyebrow{display:none}.vdg-landing .hcta .reg-note{display:none}}

/* ============ ヒーロー ============ */
.vdg-landing .hero{background:radial-gradient(80% 70% at 100% 130%,#e6f7f5 0,transparent 60%),radial-gradient(70% 60% at 0% 130%,#eafaf3 0,transparent 55%),#fff;padding:8px 0 38px;text-align:center}
.vdg-landing .hero h1{font-size:clamp(25px,4vw,40px);font-weight:900;line-height:1.3;letter-spacing:-.02em;color:var(--navy);white-space:nowrap;margin:0;padding:20px 0 30px}
.vdg-landing .hero h1 .hl{background:var(--prod-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vdg-landing .hero .sub{margin:0;font-size:clamp(16px,1.7vw,19px);color:#3c4a5e}
.vdg-landing .br-sp{display:none}
@media (max-width:767px){
  .vdg-landing .hero h1{white-space:normal;word-break:keep-all;overflow-wrap:break-word;padding:30px 0 20px}
  .vdg-landing .br-sp{display:inline}
}
.vdg-landing .chips{margin-top:16px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.vdg-landing .chip{font-size:12.5px;font-weight:700;color:#2b5566;background:#eafafa;border:1px solid #cdeef0;padding:6px 12px;border-radius:999px}
.vdg-landing .chip.free{color:#0a7d52;background:#e7faf0;border-color:#bff0d6}

/* デモステージ（メイン動画 + 右サムネ縦並び） */
.vdg-landing .demo-stage{display:flex;gap:12px;align-items:stretch;justify-content:center;max-width:1280px;margin:24px auto 0}
.vdg-landing .player-card{border-radius:18px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(11,31,58,.18);border:1px solid var(--line);flex:1 1 auto;min-width:0;max-width:1000px}
.vdg-landing .player-card #player_div{width:100%;aspect-ratio:16/9}
.vdg-landing .playlist-rail{flex:0 0 220px;width:220px;display:flex}
.vdg-landing #rail{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.vdg-landing .pl-card{position:relative;flex:1 1 0;min-height:0;border-radius:11px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:#0c1320;transition:.15s;box-shadow:0 4px 14px rgba(11,31,58,.10)}
.vdg-landing .pl-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,31,58,.16)}
.vdg-landing .pl-card.active{border-color:var(--prod-main,#5B7CFA)}
.vdg-landing .pl-thumb{width:100%;height:100%;object-fit:cover;display:block}
.vdg-landing .pl-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(7,12,22,.78),transparent);pointer-events:none}
.vdg-landing .pl-tag{position:absolute;left:8px;bottom:7px;z-index:1;font-size:10.5px;font-weight:800;color:#fff;border-radius:5px;padding:2px 7px;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.vdg-landing .player-cap{font-size:12px;color:#5b6b80;text-align:center;margin-top:10px}
.vdg-landing .dl-links{text-align:center;margin-top:6px;font-size:13px;color:#5b6b80}
.vdg-landing .dl-links a{color:var(--prod-d);text-decoration:underline}
@media(max-width:880px){
  .vdg-landing .demo-stage{flex-direction:column;align-items:stretch}
  .vdg-landing .playlist-rail{flex:none;width:auto}
  .vdg-landing #rail{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .vdg-landing .pl-card{flex:0 0 160px;aspect-ratio:16/9;min-height:auto}
}

/* ============ お困りごと3選 ============ */
.vdg-landing .trouble-person{display:inline-block;text-align:center;width:min(180px,70%)}
.vdg-landing .trouble-person .guru{display:block;width:60px;height:60px;margin:0 auto -2px;animation:guruspin 6s linear infinite;transform-origin:center}
.vdg-landing .trouble-person .person{width:100%;display:block;margin:0 auto}
@keyframes guruspin{to{transform:rotate(360deg)}}
.vdg-landing .pain-card{margin-bottom:16px}
.vdg-landing .pain-card .card-body{display:flex;align-items:center}
.vdg-landing .pain-ic{flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:var(--prod);color:var(--prod-d);display:grid;place-items:center;font-size:30px;margin-right:16px}
.vdg-landing .pain-q{font-weight:900;color:var(--navy);font-size:21px;line-height:1.3;margin-bottom:3px}
.vdg-landing .pain-a{font-size:16px;color:#3c4a5e;margin:0;line-height:1.7}
.vdg-landing .pain-a b{color:var(--prod-d);font-weight:800}
@media (max-width:767px){.vdg-landing .pain-q{font-size:19px}.vdg-landing .pain-ic{flex-basis:48px;width:48px;height:48px;font-size:26px;margin-right:12px}}

/* ============ 実績（ロゴマーキー） ============ */
.vdg-landing #jisseki{padding-top:50px;background:linear-gradient(180deg,#d3efe8 0%,#e6f6f2 100%)}
.vdg-landing #jisseki h2.sec{display:inline-block}
.vdg-landing #jisseki h2.sec::after{content:"";display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--green));width:100%;margin:12px auto 0}
.vdg-landing .logo-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.vdg-landing .logo-track{display:flex;align-items:center;gap:30px;width:max-content;animation:logoscroll 38s linear infinite}
.vdg-landing .logo-marquee:hover .logo-track{animation-play-state:paused}
.vdg-landing .logo-cell{flex:0 0 202px;height:92px;display:grid;place-items:center}
.vdg-landing .logo-cell img{max-width:184px;max-height:82px;width:auto;height:auto;object-fit:contain;display:block}
.vdg-landing .logo-cell img[src*="DNP"]{max-width:120px;max-height:44px}
.vdg-landing .logo-cell img[src*="toyota"],.vdg-landing .logo-cell img[src*="kawaijuku"]{transform:scale(.8)}
.vdg-landing .logo-cell img[src*="kubota"]{transform:scale(.9)}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){.vdg-landing .logo-cell{flex-basis:170px;height:80px}.vdg-landing .logo-cell img{max-width:156px;max-height:68px}.vdg-landing .logo-cell img[src*="DNP"]{max-width:108px;max-height:40px}}

/* ============ 3ステップ ============ */
.vdg-landing .step-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#fff;background:var(--prod-grad);padding:9px 20px;border-radius:999px;box-shadow:0 6px 14px -4px rgba(11,31,58,.25);margin-bottom:14px}
.vdg-landing .step-badge svg{width:20px;height:20px}
.vdg-landing .step-badge .step-no{font-size:14px;letter-spacing:.05em}
.vdg-landing .step-title{font-size:19px;font-weight:900;color:var(--navy);margin:0 0 6px}
.vdg-landing .step-body{font-size:16px;color:#3c4a5e;margin:0;line-height:1.7}
.vdg-landing .step-body b{color:var(--prod-d);font-weight:800}

/* ============ 6つの標準装備 ============ */
.vdg-landing .pillar-ic{flex:0 0 46px;height:46px;border-radius:12px;background:var(--prod-grad);color:#fff;display:grid;place-items:center;box-shadow:0 5px 12px -4px rgba(11,31,58,.16),inset 0 1px 1.5px rgba(255,255,255,.55);font-weight:900;margin-right:14px}
.vdg-landing .pillar-ic svg{width:22px;height:22px}
.vdg-landing .pillar h5{font-weight:800;color:var(--navy);margin:0 0 4px}

/* ============ AIツール ============ */
.vdg-landing .ai-pill{display:inline-block;font-weight:800;color:#fff;padding:6px 16px;border-radius:999px;box-shadow:0 6px 14px -4px rgba(11,31,58,.25)}
.vdg-landing .ai-card h5{font-weight:800;margin-top:14px;color:var(--navy)}
.vdg-landing .ai-logo-box{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:170px;background:#fff;border-radius:10px;padding:11px 12px;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.vdg-landing .ai-logo-box img{height:22px;width:auto}
.vdg-landing .ai-logo-box span{font-weight:700;color:#0B1F3A;font-size:15px}
@media (max-width:767px){.vdg-landing .ai-logo-box{width:160px}}
.vdg-landing .pchips{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.vdg-landing .pchips span{font-size:12px;font-weight:700;color:#3a4b60;background:#eef5f7;padding:6px 11px;border-radius:8px}

/* ============ 活用シーン（タブ） ============ */
.vdg-landing .uc-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:0;list-style:none}
.vdg-landing .uc-pill{font-weight:700;font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.15s}
.vdg-landing .uc-pill:hover{border-color:var(--prod-main)}
.vdg-landing .uc-pill.active{background:var(--prod-main);border-color:var(--prod-main);color:#fff}
.vdg-landing .uc-pane h5{font-weight:800;color:var(--navy);margin:0 0 8px}

/* ============ videog.ai（navy） ============ */
.vdg-landing .bg-navy h2.sec{color:#fff}
.vdg-landing .bg-navy .lead{color:#a9c0d6}
.vdg-landing .navy-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.vdg-landing .navy-card h5{color:#fff;margin-top:8px;font-weight:800}
.vdg-landing .navy-card .lead{color:#a9c0d6;margin:0}
.vdg-landing .navy-card .ic{font-size:32px;color:var(--prod-d)}
.vdg-landing .bg-navy .eyebrow{background:rgba(255,255,255,.1);color:#bfeef1}

/* ============ 料金 ============ */
.vdg-landing .plan .pp{font-size:28px;font-weight:900;color:var(--navy)}
.vdg-landing .plan .pp small{font-size:13px;color:#5b6b80;font-weight:700}
.vdg-landing .plan ul{list-style:none;padding:0;margin:12px 0 18px}
.vdg-landing .plan li{font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line);color:#3a4b60}
.vdg-landing .price-pop{border:2px solid var(--prod-main)!important;position:relative}
.vdg-landing .ribbon{position:absolute;top:-12px;right:18px;background:var(--prod-main);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px}
.vdg-landing .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.vdg-landing .cmp{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.vdg-landing .cmp th,.vdg-landing .cmp td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.vdg-landing .cmp tbody tr:last-child td{border-bottom:0}
.vdg-landing .cmp th:first-child,.vdg-landing .cmp td:first-child{text-align:left;font-weight:700;color:var(--navy);white-space:normal}
.vdg-landing .cmp thead th{font-weight:800;color:var(--navy);background:#f5f9fb;border-bottom:2px solid var(--line)}
.vdg-landing .cmp th:nth-child(4),.vdg-landing .cmp td:nth-child(4){background:#eaf7f4}
.vdg-landing .cmp th:not(:first-child),.vdg-landing .cmp td:not(:first-child){border-left:1px solid var(--line)}
.vdg-landing .cmp .ok{color:var(--prod-main);font-weight:900;font-size:16px}
.vdg-landing .cmp .no{color:#c2ccd6}
.vdg-landing .cmp-new{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--prod-main);border-radius:999px;padding:1px 7px;vertical-align:middle}
@media (max-width:767px){.vdg-landing .cmp{font-size:11.5px}.vdg-landing .cmp th,.vdg-landing .cmp td{padding:8px 5px;white-space:normal}.vdg-landing .cmp .ok{font-size:14px}}

/* ============ FAQ ============ */
.vdg-landing .faq-item{margin-bottom:12px}
.vdg-landing .faq-q{background:#fff;cursor:pointer;padding:16px 20px;font-weight:800;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:12px}
.vdg-landing .faq-q .chev{transition:.2s;flex:0 0 auto}
.vdg-landing .faq-item.open .faq-q .chev{transform:rotate(180deg)}
.vdg-landing .faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease}
.vdg-landing .faq-item.open .faq-a{padding:0 20px 18px;max-height:400px}

/* ============ 最終CTA ============ */
.vdg-landing .final{background:var(--prod-grad);color:#fff;text-align:center}
.vdg-landing .final h2{color:#fff;font-weight:900}

/* ============ フッター ============ */
.vdg-landing footer.lp-footer{background:#06152b;color:#9fb6cc;padding:46px 0 26px}
.vdg-landing footer.lp-footer img{height:22px;margin-bottom:12px}
.vdg-landing footer.lp-footer h6{color:#fff;font-size:13px;margin:0 0 6px}
.vdg-landing footer.lp-footer a{color:#9fb6cc;display:block;padding:5px 0;font-size:13.5px}
.vdg-landing footer.lp-footer a:hover{color:#fff}
.vdg-landing .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;font-size:12.5px;color:#7e95ab}

/* グリッドユーティリティ（Bootstrap代替の最小限） */
.vdg-landing .lp-grid{display:grid;gap:20px}
@media (min-width:768px){
  .vdg-landing .lp-grid-2{grid-template-columns:repeat(2,1fr)}
  .vdg-landing .lp-grid-3{grid-template-columns:repeat(3,1fr)}
  .vdg-landing .lp-grid-4{grid-template-columns:repeat(4,1fr)}
}

/* =========================================================================
   ビデオグプレーヤー スケルトンスキン（#player_div 配下で自然スコープ）
   元 index.html の #player_div ... 系をそのまま移植
   ========================================================================= */
#player_div .video-js:not(.vjs-has-started) .vjs-play-control,
#player_div .video-js:not(.vjs-has-started) .vjs-seek-button,
#player_div .video-js:not(.vjs-has-started) .vjs-icon-previous-item,
#player_div .video-js:not(.vjs-has-started) .vjs-icon-next-item{display:none!important}
#player_div .vjs-picture-in-picture-control{display:none!important}
#player_div .vjs-control-div .vjs-icon-next-item,
#player_div .vjs-control-div .vjs-icon-previous-item,
#player_div .vjs-control-container .vjs-icon-next-item,
#player_div .vjs-control-container .vjs-icon-previous-item{display:none!important}
.vp-mch{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;cursor:pointer;color:#fff;opacity:.92;-webkit-tap-highlight-color:transparent}
.vp-mch:hover{opacity:1}
.vp-mch svg{width:26px;height:26px;fill:#fff}
.vp-mch.vp-mch-prev{order:-1}
.vp-mch.vp-mch-next{order:1}
.vp-cbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:32px;cursor:pointer;color:#fff;opacity:.92;background:none;border:none;padding:0;transition:opacity .12s}
.vp-cbtn:hover{opacity:1}
.vp-cbtn .vp-cicon{display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.vp-cbtn .vp-cicon::before{font-family:videog;content:"R";font-size:18px;line-height:1;color:#fff;-webkit-font-smoothing:antialiased}
.vp-chapmenu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:210px;max-height:248px;overflow:auto;display:none;z-index:40;padding:6px;background:rgba(14,20,34,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.vp-chapmenu.open{display:block}
.vp-chaphd{font:800 10px/1 sans-serif;letter-spacing:.06em;color:#8a93a8;padding:6px 9px 8px}
.vp-chapitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font:600 12px/1.3 -apple-system,"Yu Gothic UI",sans-serif;color:#c7cfde;white-space:nowrap}
.vp-chapitem:hover{background:rgba(255,255,255,.09);color:#fff}
.vp-chapitem.active{color:#fff;background:rgba(91,124,250,.2)}
.vp-chapitem .tm{margin-left:auto;font:500 11px/1 monospace;color:#8aa6c8;padding-left:14px}
#player_div .vjs-progress-control .vjs-progress-holder{overflow:visible!important}
#player_div .vjs-progress-control.vp-chaptered .vjs-progress-holder{background:transparent!important}
#player_div .vjs-progress-control.vp-chaptered .vjs-play-progress,
#player_div .vjs-progress-control.vp-chaptered .vjs-load-progress{visibility:hidden!important}
#player_div .vp-chapter-bar{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:1}
#player_div .vp-chapseg{position:absolute;top:50%;transform:translateY(-50%);height:5px;background:rgba(255,255,255,.32);border-radius:99px;overflow:hidden;transition:height .1s ease}
#player_div .vp-chapseg .vp-chapfill{height:100%;width:0;background:#fff}
#player_div .vp-chapthumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:#fff;border:1px solid #cacaca;border-radius:9999px;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.45)}
#player_div .vjs-big-play-button{z-index:2!important}
#player_div .vjs-text-track-display{z-index:2!important}
#player_div .video-js:not(.vjs-has-started) .vjs-text-track-display{display:none!important}
#player_div .vjs-control-bar .vjs-progress-control .vjs-mouse-display{display:none!important}
#player_div .vjs-menu .vjs-menu-content{background:rgba(14,20,34,.95)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16)!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(0,0,0,.5)!important;padding:6px!important}
#player_div .vjs-menu li.vjs-menu-item{border-radius:8px!important;padding:8px 11px!important;margin:0!important;color:#c7cfde!important;font:600 12.5px/1.2 -apple-system,"Yu Gothic UI",sans-serif!important;text-transform:none!important;background:transparent!important}
#player_div .vjs-menu li.vjs-menu-item:hover,#player_div .vjs-menu li.vjs-menu-item:focus{background:rgba(255,255,255,.1)!important;color:#fff!important}
#player_div .vjs-menu li.vjs-menu-item.vjs-selected{background:rgba(91,124,250,.22)!important;color:#fff!important}
#player_div .vjs-menu li.vjs-menu-title{color:#8a93a8!important;font:800 10px/1 sans-serif!important;letter-spacing:.06em;padding:6px 9px!important;background:transparent!important}
#player_div .vjs-volume-panel .vjs-volume-control{background:rgba(14,20,34,.95)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important;box-shadow:0 10px 24px rgba(0,0,0,.5)!important}
#player_div .vjs-volume-bar{background:rgba(255,255,255,.25)!important}
#player_div .vjs-volume-level{background:#fff!important}
#player_div .vjs-control-bar .vp-timewrap{position:absolute;left:0;right:0;bottom:10px;z-index:1;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none}
#player_div .vp-timewrap .vjs-time-control{padding:0;width:auto;min-width:0}
#player_div .vp-timewrap .vjs-time-divider{display:block!important;min-width:0}
#player_div .video-js:not(.vjs-has-started) .vp-timewrap .vjs-current-time,
#player_div .video-js:not(.vjs-has-started) .vp-timewrap .vjs-time-divider{display:none!important}
.vp-tools{position:absolute;top:12px;right:12px;z-index:30;display:flex;gap:8px;transition:opacity .3s ease}
#player_div .video-js.vjs-has-started.vjs-user-inactive .vp-tools{opacity:0;pointer-events:none}
.vp-tbtn{position:relative;width:40px;height:40px;border-radius:10px;cursor:pointer;transition:.15s;background:rgba(14,22,38,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.vp-tbtn:hover{background:rgba(22,34,56,.85);border-color:rgba(255,255,255,.4)}
.vp-tbtn svg{width:19px;height:19px;fill:#fff}
.vp-share-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:168px;display:none;z-index:40;padding:6px;background:rgba(14,20,34,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.vp-share-menu.open{display:block}
.vp-sitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;font:600 12.5px/1 -apple-system,"Yu Gothic UI",sans-serif;color:#c7cfde;white-space:nowrap}
.vp-sitem:hover{background:rgba(255,255,255,.09);color:#fff}
.vp-sitem svg{width:18px;height:18px;flex:0 0 auto}
.vp-sitem.slack{color:#fff;background:linear-gradient(135deg,rgba(54,197,171,.22),rgba(224,30,90,.18));margin-bottom:4px}
.vp-sitem.slack:hover{background:linear-gradient(135deg,rgba(54,197,171,.4),rgba(224,30,90,.3))}
.vp-toast{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);z-index:50;opacity:0;transition:.25s;pointer-events:none;background:rgba(20,28,46,.94);color:#fff;font:600 12px sans-serif;padding:9px 16px;border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.vp-toast.show{opacity:1}
.vp-overlay{position:absolute;inset:0;z-index:29;display:none;align-items:center;justify-content:center;background:rgba(8,13,22,.80);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:5% 6%}
.vp-overlay.open{display:flex}
.vp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:660px}
.vp-item{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.vp-item .vp-ihead{display:flex;align-items:center;gap:7px;padding:0 2px;font:700 12.5px/1.3 -apple-system,"Yu Gothic UI",sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-item .vp-ihead .dot{flex:0 0 auto;width:9px;height:9px;border-radius:3px}
.vp-item .vp-ihead .t{overflow:hidden;text-overflow:ellipsis}
.vp-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:12px;border:2px solid rgba(255,255,255,.16);box-shadow:0 10px 26px rgba(0,0,0,.4);transition:.15s}
.vp-item:hover img{transform:translateY(-2px);border-color:#fff}
.vp-item.active img{border-color:var(--prod-main,#5B7CFA)}
@media(max-width:640px){.vp-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* =========================================================================
   左サイドバー（サービス共通シェル）
   www.videog.ai の Datta Able 左メニューを独自CSSで再現。
   将来、サービス分類(el/vod/live/player/more)ごとの管理画面の共通シェルとして再利用。
   サービスカラーは data-product でテーマ切替（--prod* 変数）。
   ========================================================================= */

/* --- サービス別カラー（el は .vdg-landing 既定値。他4つを上書き定義） --- */
.vdg-landing[data-product="vod"]{--prod:#eef1fe;--prod-d:#3b4fd6;--prod-main:#5B7CFA;--prod-grad:linear-gradient(135deg,#8fa8ff,#3f51d6)}
.vdg-landing[data-product="live"]{--prod:#fff0f1;--prod-d:#d6314a;--prod-main:#FF4D5E;--prod-grad:linear-gradient(135deg,#ff9f86,#e5364d)}
.vdg-landing[data-product="player"]{--prod:#f3effe;--prod-d:#6d3fd6;--prod-main:#8B5CF6;--prod-grad:linear-gradient(135deg,#b79dff,#6d3fd6)}
.vdg-landing[data-product="more"]{--prod:#e9edf2;--prod-d:#2b3440;--prod-main:#39424f;--prod-grad:linear-gradient(135deg,#4e5a6a,#1c232e)}
.vdg-landing[data-product="professional"]{--prod:#e9edf2;--prod-d:#2b3440;--prod-main:#39424f;--prod-grad:linear-gradient(135deg,#4e5a6a,#1c232e)}

/* --- レイアウト: サイドバー固定 + 本文を264px右シフト --- */
.vdg-landing .lp-sidebar{
  position:fixed;left:0;top:0;z-index:1040;
  width:264px;height:100vh;display:flex;flex-direction:column;
  background:#f8fafc;
  box-shadow:2px 0 22px rgba(11,31,58,.06);
  transition:width .2s ease,transform .25s ease;
}
.vdg-landing .lp-shell{margin-left:264px;transition:margin-left .2s ease;min-width:0}

/* AI 対話フッター（左メニューの右端〜画面右端に固定。左メニューは上下貫通させ、その右に配置） */
.vdg-landing .lp-ai-footer{position:fixed;bottom:0;left:264px;right:0;height:40px;z-index:1035;background:#0b1f3a;border-top:1px solid #14324f;display:flex;align-items:center;padding:0 16px;transition:left .2s ease}
.vdg-landing[data-collapsed="1"] .lp-ai-footer{left:70px}
.vdg-landing .lp-ai-inner{display:flex;align-items:center;gap:10px;width:100%}
.vdg-landing .lp-ai-prompt{color:#39d98a;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:15px;line-height:1}
.vdg-landing .lp-ai-input{flex:1 1 auto;min-width:0;background:transparent;border:none;outline:none;color:#e6f0f7;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.vdg-landing .lp-ai-input::placeholder{color:#5b7188}
.vdg-landing .lp-ai-send{flex:0 0 auto;background:#14B8C4;color:#fff;border:none;border-radius:6px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer}
.vdg-landing .lp-ai-send:disabled{opacity:.45;cursor:default}
@media (max-width:767px){.vdg-landing .lp-ai-footer{left:0}}

/* 上部ロゴ（全幅） */
.vdg-landing .lp-side-logo{flex:0 0 56px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #d7e6ea}
.vdg-landing .lp-side-logo img{height:28px;display:block}

/* レール+ジャンプナビの2カラム */
.vdg-landing .lp-side-body{flex:1 1 auto;display:flex;min-height:0}

/* --- レール（アイコン縦タブ・70px） --- */
.vdg-landing .lp-rail{flex:0 0 70px;width:70px;display:flex;flex-direction:column;background:rgba(233,244,247,.5);border-right:1px solid #d7e6ea}
.vdg-landing .lp-rail ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.vdg-landing .lp-rail a{position:relative;display:flex;align-items:center;justify-content:center;height:48px;margin:3px 8px;border-radius:10px;color:#5b6b80}
.vdg-landing .lp-rail a svg{width:24px;height:24px}
.vdg-landing .lp-rail li.active a{background:#fff;box-shadow:0 3px 10px rgba(11,31,58,.1)}
.vdg-landing .lp-rail li.active a::after{content:"";position:absolute;right:-8px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--prod-main)}
/* レールアイコン色（サービス別） */
.vdg-landing .lp-rail a[data-cont="el"]{color:#16C79A}
.vdg-landing .lp-rail a[data-cont="vod"]{color:#5B7CFA}
.vdg-landing .lp-rail a[data-cont="live"]{color:#FF4D5E}
.vdg-landing .lp-rail a[data-cont="player"]{color:#8B5CF6}
.vdg-landing .lp-rail a[data-cont="more"]{color:#2b3440}
.vdg-landing .lp-rail a[data-cont="el"]:hover{background:#eef7f8;box-shadow:0 3px 10px rgba(11,31,58,.1)}
.vdg-landing .lp-rail a[data-cont="vod"]:hover{background:#eef1fe;box-shadow:0 3px 10px rgba(11,31,58,.1)}
.vdg-landing .lp-rail a[data-cont="live"]:hover{background:#fff0f1;box-shadow:0 3px 10px rgba(11,31,58,.1)}
.vdg-landing .lp-rail a[data-cont="player"]:hover{background:#f3effe;box-shadow:0 3px 10px rgba(11,31,58,.1)}
.vdg-landing .lp-rail a[data-cont="more"]:hover{background:#e9edf2;box-shadow:0 3px 10px rgba(11,31,58,.1)}
/* 折りたたみボタン（レール最下部） */
.vdg-landing .lp-collapse{margin-top:auto;display:flex;align-items:center;justify-content:center;height:44px;border:0;background:var(--prod-main);color:#fff;cursor:pointer;border-radius:12px 12px 0 0;box-shadow:2px -2px 14px rgba(11,31,58,.2)}
.vdg-landing .lp-collapse:hover{background:var(--prod-d)}
.vdg-landing .lp-collapse svg{width:18px;height:18px;transition:transform .2s ease}

/* --- ジャンプナビ（side-content） --- */
.vdg-landing .lp-sidenav{flex:1 1 auto;min-width:0;padding:14px 10px;overflow-y:auto}
.vdg-landing .lp-sidenav .cap{font-size:11px;font-weight:800;letter-spacing:.08em;color:#8aa0b5;padding:6px 12px 6px;text-transform:uppercase}
.vdg-landing .lp-sidenav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#34465c;font-weight:600;font-size:14px}
.vdg-landing .lp-sidenav a svg{width:18px;height:18px;flex:0 0 auto;color:inherit}
.vdg-landing .lp-sidenav a:hover,.vdg-landing .lp-sidenav a.active{color:var(--prod-d);background:var(--prod)}

/* --- 折りたたみ状態: ジャンプナビを隠してレール(70px)のみ --- */
.vdg-landing[data-collapsed="1"] .lp-sidebar{width:70px}
.vdg-landing[data-collapsed="1"] .lp-side-logo{display:none}
.vdg-landing[data-collapsed="1"] .lp-sidenav{display:none}
.vdg-landing[data-collapsed="1"] .lp-shell{margin-left:70px}
.vdg-landing[data-collapsed="1"] .lp-collapse svg{transform:rotate(180deg)}

/* --- ハンバーガー（モバイルのみ表示） --- */
.vdg-landing .lp-hamburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:transparent;color:var(--navy);cursor:pointer}
.vdg-landing .lp-hamburger svg{width:24px;height:24px}
.vdg-landing .lp-mob-backdrop{display:none}
/* ヘッダ非表示ページ(ログイン等)用の浮遊ハンバーガー（モバイルのみ表示） */
.vdg-landing .lp-fab-menu{display:none}

/* アンカージャンプ時に sticky ヘッダーへ潜り込まないよう余白 */
.vdg-landing main [id]{scroll-margin-top:80px}

/* --- モバイル(<=991px): 本文全幅 + サイドバーをオフキャンバス --- */
@media(max-width:991px){
  .vdg-landing .lp-sidebar{transform:translateX(-100%);z-index:1060}
  .vdg-landing[data-mobopen="1"] .lp-sidebar{transform:translateX(0)}
  .vdg-landing .lp-shell{margin-left:0}
  .vdg-landing[data-collapsed="1"] .lp-shell{margin-left:0}
  .vdg-landing .lp-hamburger{display:inline-flex}
  .vdg-landing .lp-collapse{display:none}
  .vdg-landing[data-mobopen="1"] .lp-mob-backdrop{display:block;position:fixed;inset:0;z-index:1050;background:rgba(11,31,58,.42)}
  /* ログイン等(ヘッダ非表示)の浮遊ハンバーガー */
  .vdg-landing .lp-fab-menu{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:14px;left:14px;z-index:1045;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(11,31,58,.12);cursor:pointer}
  .vdg-landing .lp-fab-menu svg{width:22px;height:22px}
}

/* =========================================================================
   認証（ログイン）カード — シェル内に表示。サービス色(--prod*)でテーマされる。
   ========================================================================= */
.vdg-landing .lp-auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px 20px;
  background:radial-gradient(80% 70% at 100% 120%,var(--prod) 0,transparent 60%),radial-gradient(70% 60% at 0% 120%,var(--prod) 0,transparent 55%),#fff;
}
.vdg-landing .lp-auth{width:100%;max-width:404px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(11,31,58,.12);padding:34px 30px}
.vdg-landing .lp-auth .auth-brand{display:flex;justify-content:center;margin-bottom:14px}
.vdg-landing .lp-auth .auth-brand img{height:30px}
.vdg-landing .lp-auth .auth-sent-ic{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:var(--prod);color:var(--prod-d)}
.vdg-landing .lp-auth .auth-sent-ic svg{width:28px;height:28px}
.vdg-landing .lp-auth h1{font-size:22px;font-weight:800;color:var(--navy);text-align:center;margin:0 0 4px}
.vdg-landing .lp-auth .auth-sub{font-size:13px;color:#6b7a8c;text-align:center;margin:0 0 22px}
.vdg-landing .lp-auth .gbtn{display:flex;justify-content:center;margin-bottom:18px}
/* SSO（外部ログイン）ボタン群: 1行ずつ縦並び */
.vdg-landing .lp-auth .sso{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.vdg-landing .lp-auth .sso-google{display:flex;justify-content:center;align-items:center;min-height:44px}
.vdg-landing .lp-auth .sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border:1px solid #d7e1ea;border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;transition:.15s;white-space:nowrap}
.vdg-landing .lp-auth .sso-btn:hover{background:#f5f9fb;border-color:#c2d0dc}
.vdg-landing .lp-auth .sso-btn svg{width:18px;height:18px;flex:0 0 auto}
.vdg-landing .lp-auth .sso-btn.apple{background:#000;color:#fff;border-color:#000}
.vdg-landing .lp-auth .sso-btn.apple:hover{background:#1a1a1a;border-color:#1a1a1a}
.vdg-landing .lp-auth .auth-or{display:flex;align-items:center;gap:12px;color:#9aa7b4;font-size:12px;font-weight:700;margin:6px 0 18px}
.vdg-landing .lp-auth .auth-or::before,.vdg-landing .lp-auth .auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.vdg-landing .lp-auth label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin:0 0 6px}
.vdg-landing .lp-auth .field{margin-bottom:14px}
.vdg-landing .lp-auth input{width:100%;height:46px;border:1px solid #d7e1ea;border-radius:10px;padding:0 14px;font-size:15px;color:var(--navy);background:#fff;transition:.15s}
.vdg-landing .lp-auth input::placeholder{color:#aab5c1}
.vdg-landing .lp-auth input:focus{outline:none;border-color:var(--prod-main);box-shadow:0 0 0 3px var(--prod)}
.vdg-landing .lp-auth .code-input{text-align:center;letter-spacing:.5em;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;padding:0}
.vdg-landing .lp-auth .code-input::placeholder{letter-spacing:.4em;color:#cdd6df;font-weight:700}
.vdg-landing .lp-auth .auth-foot a{color:var(--prod-d);font-weight:700}
.vdg-landing .lp-auth .btn-primary{width:100%;height:48px;font-size:15px;margin-top:6px}
.vdg-landing .lp-auth .btn-primary:disabled{opacity:.7;cursor:not-allowed}
.vdg-landing .lp-auth .auth-foot{text-align:center;font-size:13px;color:#6b7a8c;margin:18px 0 0}
.vdg-landing .lp-auth .auth-foot a{color:var(--prod-d);font-weight:700}
.vdg-landing .lp-auth .spin{display:inline-flex;align-items:center;gap:8px}