/* 研修動画：YouTube のような夜の色 */
*{box-sizing:border-box}html,body{margin:0;background:#0f0f0f;color:#f1f1f1;font-family:"Noto Sans JP",Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
.tb-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:#0f0f0f}
.tb-ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}.tb-ico:hover{background:#272727}
.tb-logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:1.05rem;white-space:nowrap}.tb-logo small{font-weight:400;color:#aaa;font-size:.7rem;margin-left:2px}
.tb-play{background:#ff0033;width:30px;height:21px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;background:linear-gradient(135deg,#7BBF24,#1A9ED8)}
.tb-search{flex:1;max-width:640px;margin:0 auto;display:flex;height:40px}
.tb-search input{flex:1;min-width:0;background:#121212;border:1px solid #303030;border-right:0;border-radius:40px 0 0 40px;color:#fff;padding:0 16px;font-size:1rem;outline:none}.tb-search input:focus{border-color:#1c62b9}
.tb-search button{width:64px;background:#222;border:1px solid #303030;border-radius:0 40px 40px 0;cursor:pointer}
.tb-user{width:32px;height:32px;border-radius:50%;background:#1A9ED8;display:flex;align-items:center;justify-content:center;font-weight:700}
.tb-login{display:flex;align-items:center;gap:6px;border:1px solid #303030;color:#3ea6ff;border-radius:20px;padding:6px 12px;font-size:.9rem;white-space:nowrap}
.tb-main{padding:0 24px 40px}
.tb-chips{display:flex;gap:12px;overflow-x:auto;padding:12px 0;scrollbar-width:none}.tb-chips::-webkit-scrollbar{display:none}
.tb-chip{background:#272727;border-radius:8px;padding:6px 12px;font-size:.88rem;white-space:nowrap}.tb-chip:hover{background:#3f3f3f}.tb-chip.on{background:#f1f1f1;color:#0f0f0f}
.tb-note{background:#1f1f1f;border-radius:12px;padding:12px 16px;margin:4px 0 12px;font-size:.9rem;color:#ccc}.tb-note a{color:#3ea6ff}
.tb-meta-line{color:#aaa;font-size:.85rem;margin:4px 0 12px}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 16px;margin-top:8px}
.tb-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#272727}
.tb-thumb img,.tb-noimg{width:100%;height:100%;object-fit:cover;display:block}
.tb-noimg{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#717171;font-size:1.6rem;background:#1f1f1f}.tb-noimg.big{aspect-ratio:16/9;font-size:2.4rem}.tb-noimg span{font-size:.9rem}
.tb-card:hover .tb-thumb img{transform:scale(1.02)}.tb-thumb img{transition:transform .2s}
.tb-dur,.tb-done,.tb-lock{position:absolute;font-size:.75rem;font-weight:500;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.8)}
.tb-dur{right:8px;bottom:8px}.tb-done{left:8px;bottom:8px;background:#2e7d32}.tb-lock{left:8px;top:8px}
.tb-info{padding:12px 4px 0}.tb-title{font-weight:500;font-size:1rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tb-sub{color:#aaa;font-size:.85rem;margin-top:4px}
.tb-empty{color:#aaa;grid-column:1/-1;text-align:center;padding:60px 0}
/* 視聴 */
.tb-watch{display:flex;gap:24px;max-width:1754px;margin:0 auto;padding-top:16px}
.tb-primary{flex:1;min-width:0}.tb-side{width:402px;flex-shrink:0}
.tb-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.tb-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tb-player:fullscreen{border-radius:0}
.tb-h1{font-size:1.25rem;font-weight:700;line-height:1.4;margin:12px 0 8px}
.tb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tb-ch{display:flex;align-items:center;gap:12px}.tb-ch small{display:block;color:#aaa;font-size:.75rem}
.tb-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#7BBF24,#1A9ED8);display:flex;align-items:center;justify-content:center;font-weight:700}
.tb-acts{display:flex;gap:8px;flex-wrap:wrap}.tb-acts form{margin:0}
.tb-pill{display:inline-flex;align-items:center;gap:6px;background:#272727;border:0;border-radius:18px;height:36px;padding:0 16px;font-size:.88rem;cursor:pointer;white-space:nowrap}.tb-pill:hover{background:#3f3f3f}
.tb-pill.primary{background:#f1f1f1;color:#0f0f0f}.tb-pill.primary:hover{background:#d9d9d9}.tb-pill.ok{background:#2e7d32;cursor:default}
.tb-desc{background:#272727;border-radius:12px;padding:12px;margin-top:12px;font-size:.9rem;line-height:1.7}
.tb-desc summary{cursor:pointer;list-style:none;font-weight:500}.tb-desc summary::-webkit-details-marker{display:none}.tb-more{font-weight:700;margin-left:8px}.tb-desc[open] .tb-more{display:none}.tb-desc>div{margin-top:8px}
.tb-tags{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}.tb-tags span{color:#3ea6ff;font-size:.85rem}
.tb-side h2{font-size:1rem;margin:0 0 12px}
.tb-row{display:flex;gap:8px;margin-bottom:8px}.tb-thumb.sm{width:168px;flex-shrink:0;border-radius:8px}.tb-row .tb-info{padding:0}.tb-row .tb-title{font-size:.88rem}.tb-row .tb-sub{font-size:.75rem}
@media (max-width:1000px){.tb-watch{flex-direction:column}.tb-side{width:100%}}
/* スマホ：動画は左右いっぱい・上に固定 */
@media (max-width:640px){
  .tb-top{gap:6px;padding:0 8px}.tb-logo small,.tb-logo>span:not(.tb-play),.tb-login span{display:none}.tb-search button{width:44px}.tb-search input{padding:0 12px}
  .tb-main{padding:0 0 32px}.tb-chips{padding:12px}.tb-note,.tb-meta-line{margin-left:12px;margin-right:12px}
  .tb-grid{grid-template-columns:1fr;gap:24px}.tb-thumb{border-radius:0}.tb-card .tb-info{padding:12px}
  .tb-watch{padding-top:0;gap:12px}.tb-player{border-radius:0;position:sticky;top:56px;z-index:5}
  .tb-primary>*:not(.tb-player){margin-left:12px;margin-right:12px}.tb-h1{font-size:1.05rem}.tb-side{padding:0 12px}
  .tb-row .tb-thumb.sm{width:150px}
}
/* わたしの研修 */
.tb-tabs{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid #272727;position:sticky;top:56px;z-index:9;background:#0f0f0f}
.tb-tabs a{padding:10px 14px;font-size:.92rem;color:#aaa;border-bottom:3px solid transparent;display:flex;gap:6px;align-items:center}.tb-tabs a.on{color:#fff;border-color:#f1f1f1;font-weight:700}
.tb-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#1f2a3a,#252040);border:1px solid #333;border-radius:14px;padding:14px 18px;margin:14px 0 4px}
.tb-cta b{display:block;font-size:1rem;margin-bottom:2px}.tb-cta span{color:#c9c9c9;font-size:.86rem}
.tb-pill.on{background:#3ea6ff;color:#0f0f0f}
.tb-me-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0 6px}.tb-me-head h1{font-size:1.5rem;margin:0 0 4px}.tb-me-head p{color:#aaa;margin:0;font-size:.9rem}
.tb-me-stats{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 6px}.tb-me-stats span{background:#1f1f1f;border-radius:10px;padding:8px 14px;font-size:.82rem;color:#aaa}.tb-me-stats b{color:#fff;font-size:1.15rem;margin-right:6px}
.tb-shelf{margin-top:26px}.tb-shelf h2{font-size:1.15rem;margin:0 0 12px;display:flex;align-items:center;gap:8px}.tb-shelf h2 i{color:#3ea6ff}
.tb-rowscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,300px);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.tb-rowscroll .tb-card{scroll-snap-align:start}
.tb-empty-s{color:#888;font-size:.88rem;background:#181818;border-radius:10px;padding:14px}
.tb-form{max-width:760px;margin:0 auto;padding:18px 0 40px}.tb-form h1{font-size:1.5rem}.tb-lead{color:#aaa}.tb-form h2{font-size:1rem;margin:24px 0 10px}
.tb-pick{display:flex;flex-wrap:wrap;gap:8px}.tb-pick label{cursor:pointer}.tb-pick input{position:absolute;opacity:0;pointer-events:none}
.tb-pick span{display:inline-block;background:#272727;border:1px solid #3a3a3a;border-radius:999px;padding:8px 14px;font-size:.9rem}.tb-pick input:checked+span{background:#f1f1f1;color:#0f0f0f;border-color:#f1f1f1;font-weight:700}.tb-pick input:focus-visible+span{outline:2px solid #3ea6ff}
.tb-form-act{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
/* おすすめのポップアップ */
.tr-pop{position:fixed;right:18px;bottom:18px;width:340px;max-width:calc(100vw - 24px);background:#1f1f1f;color:#f1f1f1;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:9990;overflow:hidden;animation:trPop .35s ease-out}
@keyframes trPop{from{transform:translateY(30px);opacity:0}}
.tr-pop-x{position:absolute;right:8px;top:8px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer}
.tr-pop-a{display:block;color:inherit;text-decoration:none}.tr-pop-img{position:relative;aspect-ratio:16/9;background:#2a2a2a;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#777}.tr-pop-img img{width:100%;height:100%;object-fit:cover}
.tr-pop-img span{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);font-size:.75rem;padding:2px 6px;border-radius:4px;color:#fff}
.tr-pop-t{padding:12px 14px}.tr-pop-t small{color:#3ea6ff;font-size:.78rem;display:block}.tr-pop-t b{display:block;margin:4px 0 6px;line-height:1.4}.tr-pop-go{font-size:.85rem;color:#ccc}
.tr-pop-set{display:block;border-top:1px solid #333;padding:10px 14px;font-size:.82rem;color:#3ea6ff;text-decoration:none}
@media (max-width:640px){.tb-tabs{padding:0 8px;top:56px}.tb-cta,.tb-me-head,.tb-me-stats,.tb-shelf h2,.tb-empty-s,.tb-form{margin-left:12px;margin-right:12px}.tb-rowscroll{grid-auto-columns:78%;padding:0 12px 8px}.tb-rowscroll .tb-thumb{border-radius:10px}}