@charset "UTF-8";
:root{color-scheme:light;--text:#444;--border:#eee;--green:#00a65a}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:white;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #3c8dbc;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}.topbar{height:51px;border-bottom:1px solid #eee;position:relative;display:flex;align-items:center;justify-content:center;background:#fff}.site-title{font-size:16px;color:#555;padding:10px 25px}.account{position:absolute;right:0;top:0;height:50px;border-left:1px solid #eee}.account button{display:flex;align-items:center;gap:12px;padding:0 20px;height:100%;font-size:12px;border:0;background:white;color:#555}.account button:hover{background:#fafafa}.account svg{fill:#ccc}.catalog{width:82%;max-width:1350px;margin:0 auto;padding:19px 0 30px}.pager{display:flex;justify-content:center;gap:10px;margin:0 0 16px}.page-button{min-width:49px;height:42px;padding:0 14px;border:1px solid #d2d2d2;border-radius:2px;background:#ccc;color:#444;font-size:12px;box-shadow:0 0 2px #ddd}.page-button[aria-current="page"]{background:white;border-color:#ddd}.page-button:not([aria-current="page"]):hover{background:#bbb}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:22px;row-gap:38px;align-items:start}.video-tile{display:block;width:100%;border:1px solid #f1f1f1;border-top:3px solid #ccc;border-radius:3px;overflow:hidden;box-shadow:0 1px 1px #0000000d;background:#fff}.video-tile:hover{box-shadow:0 2px 7px #0002}.video-tile[aria-current="true"]{border-top-color:#999}.tile-title{font-size:14px;text-align:center;padding:11px 6px 10px;line-height:1.5;border-bottom:1px solid #f7f7f7;overflow-wrap:anywhere;min-height:43px}.tile-image{margin:10px 9px 0;position:relative;aspect-ratio:5/3;overflow:hidden;background:#000}.tile-image img{display:block;width:100%;height:100%;object-fit:fill}.tile-footer{height:20px;position:relative;margin:0 9px}.tile-footer.watched{border-top:3px solid var(--green)}.watched-label{position:absolute;right:0;top:0;color:white;background:var(--green);font-size:10px;line-height:16px;padding:0 2px}.bottom-pager{margin:30px 0 12px}.range-label{text-align:center;font-size:12px;color:#666}.viewer{max-width:800px;margin:0 auto 24px}.viewer-nav{height:25px;text-align:left;margin-top:-10px;margin-bottom:5px}.viewer-nav button{font-size:12px;color:#666;border:0;background:none;padding:0 3px}.viewer-nav button:hover{text-decoration:underline}.video-card{border:1px solid #f1f1f1;border-top:3px solid #ccc;border-radius:3px;box-shadow:0 1px 1px #0000000d;overflow:hidden}.video-title{font-size:14px;padding:11px 10px;text-align:center;border-bottom:1px solid #f6f6f6;line-height:1.5}.player-shell{aspect-ratio:16/9;position:relative;background:#000;overflow:hidden;color:white;isolation:isolate}.player-shell video{width:100%;height:100%;display:block;object-fit:contain;background:#000}.player-shell:fullscreen{width:100%;height:100%;aspect-ratio:auto}.player-shell:fullscreen video{object-fit:contain}#watermark{position:absolute;bottom:20px;right:14%;color:#fff;font-size:14pt;font-weight:400;line-height:1.2;opacity:.85;z-index:8;pointer-events:none;user-select:none}.player-cover{position:absolute;inset:0;background:#0002;display:flex;align-items:center;justify-content:center}.play-large{border:0;border-radius:4px;color:white;background:#000b;width:80px;height:56px;font-size:24px;padding-left:10px}.play-large:hover{background:#222}.player-controls{position:absolute;bottom:0;left:0;right:0;z-index:7;padding:10px 13px 9px;background:linear-gradient(transparent,#000d)}.seek{display:block;width:100%;height:4px;accent-color:#fff;margin:0 0 10px;cursor:pointer}.controls-row{display:flex;align-items:center;gap:13px;font-size:10px;height:25px}.controls-row button{border:0;background:transparent;color:white;padding:2px 4px;font-size:12px}.controls-row select{font-size:11px;background:#252525;color:white;border:0;border-radius:2px}.control-spacer{flex:1}#timeLabel{font-variant-numeric:tabular-nums;white-space:nowrap}.blocked-cover{position:absolute;inset:0;background:#111f;z-index:9;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.blocked-cover h2{font-size:19px;margin-bottom:12px}.blocked-cover p{font-size:12px;color:#ddd;margin-bottom:20px}.primary{border:1px solid #999;border-radius:3px;background:#555;color:white;padding:10px 18px;font-size:13px}.primary:hover{background:#444}.primary:disabled{opacity:.6}.login-view{min-height:100vh;display:grid;place-items:center;padding:30px}.login-box{width:100%;max-width:340px}.login-box h1{font-size:24px;margin-bottom:28px}.login-box label{display:block;margin:18px 0 7px;font-size:13px}.login-box input{width:100%;padding:11px 13px;border:1px solid #d2d2d2;border-radius:3px;background:#fff}.password-wrap{position:relative}.password-wrap input{padding-right:55px}.password-wrap button{position:absolute;right:10px;top:12px;padding:0;border:0;background:none;color:#777;font-size:12px}.login-box .primary{width:100%;margin-top:20px}.error{color:#b34236;font-size:12px;margin-top:10px}.initial-loading{min-height:100vh;display:grid;place-items:center;color:#777}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;background:#333;padding:12px 20px;border-radius:3px;max-width:90vw;z-index:20;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1199px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog{width:92%}}
@media(max-width:850px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:25px}.catalog{width:94%}.tile-title{font-size:12px;min-height:40px}.tile-image{margin:8px 8px 0}.tile-footer{margin:0 8px}.viewer{margin-bottom:22px}}
@media(max-width:480px){.catalog{width:94%;padding-top:16px}.video-grid{column-gap:10px;row-gap:20px}.tile-title{font-size:11px;padding:8px 4px;min-height:50px;display:grid;place-items:center}.tile-image{margin:6px 5px 0}.tile-footer{height:17px;margin:0 5px}.tile-footer.watched{border-top-width:2px}.watched-label{font-size:9px;line-height:14px}.page-button{height:36px;min-width:41px;padding:0 10px}.pager{gap:9px}.site-title{font-size:14px}.account button{padding:0 12px;gap:7px;font-size:11px}.video-title{font-size:12px;padding:9px}.viewer-nav{margin-top:0}.blocked-cover{padding:15px}.blocked-cover h2{font-size:16px;margin-bottom:6px}.blocked-cover p{font-size:10px;margin-bottom:12px}.blocked-cover .primary{padding:8px 12px;font-size:11px}.player-controls{padding:9px}.controls-row{gap:7px;font-size:9px}.controls-row button{font-size:11px}}
/* 再生ページ */
.viewer{margin-top:-5px;margin-bottom:24px}.video-title{font-size:15px;line-height:1.5;padding:10px}.video-body{padding:10px 9px 44px}.player-cover{background:transparent}.poster-title{position:absolute;left:14px;top:12px;font-size:18px;line-height:1.4;color:white;text-shadow:0 1px 3px #000;right:75px}.play-large{width:87px;height:87px;display:grid;place-items:center;padding:0;background:#333d;border:1px solid #111;border-radius:4px;box-shadow:0 0 2px #0004}.play-large svg{width:48px;height:48px;fill:#bbb}.play-large:hover{background:#444e}.player-controls{display:flex;align-items:center;gap:3px;bottom:44px;left:16px;right:16px;height:30px;padding:0 5px;border-radius:3px;background:#454545e6;overflow:visible}.control-button{height:30px;width:29px;min-width:29px;display:grid;place-items:center;padding:5px;border:0;background:none;color:#bbb;cursor:pointer;border-radius:2px}.control-button:hover{color:white;background:#ffffff12}.control-button svg{width:18px;height:18px;fill:currentColor;display:block}.control-button:focus-visible{outline-color:#a2cae4;outline-offset:0}.pause-icon,.mute-cross{display:none}.is-playing .play-icon{display:none}.is-playing .pause-icon{display:block}.is-muted .sound-waves{display:none}.is-muted .mute-cross{display:block}.rewind-button{position:relative}.rewind-button span{position:absolute;left:0;right:0;top:9px;font-size:7px;font-weight:600;line-height:12px;text-align:center}.rewind-button svg{width:19px;height:19px}.time-label{font-size:11px;color:#ccc;white-space:nowrap;font-variant-numeric:tabular-nums;margin:0 5px}.seek{flex:1;min-width:15px;width:0;display:block;accent-color:#ddd;height:10px;margin:0 6px 0 0;border:0;background:transparent;cursor:pointer}.volume-control{position:relative}.volume-popup{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#454545f2;padding:10px 8px;width:110px;display:none;border-radius:2px}.volume-control:hover .volume-popup,.volume-control:focus-within .volume-popup{display:block}.volume-popup input{width:94px;height:4px;display:block;accent-color:#ddd}.settings-menu{position:absolute;bottom:37px;right:50px;min-width:145px;background:#333f;color:#ccc;box-shadow:0 0 2px #000;border:1px solid #222;border-radius:2px;padding:4px 0;font-size:12px;line-height:1.5}.setting-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;color:inherit;font-size:12px;line-height:20px;padding:3px 7px;text-align:left}.setting-row:hover:not(.quality-row){background:#555}.quality-row{color:#999}.settings-menu:has(#settingsRoot[hidden]){min-width:88px}.speed-back{border-bottom:1px solid #555;padding-bottom:5px;margin-bottom:2px;color:#bbb}.speed-option{position:relative;width:100%;padding:3px 14px 3px 32px;display:block;border:0;background:none;color:#bbb;font-size:12px;line-height:18px;text-align:center}.speed-option:hover,.speed-option:focus{background:#555;color:white}.speed-option[aria-checked="true"]{background:#555}.speed-option[aria-checked="true"]:before{content:"✓";position:absolute;left:8px}.player-shell:fullscreen .player-controls{bottom:44px;left:20px;right:20px}.player-shell:fullscreen .poster-title{font-size:22px}.player-shell:fullscreen #watermark{bottom:20px;right:14%;font-size:14pt}
@media(max-width:850px){.viewer{margin-top:-5px}.video-body{padding:10px 9px 30px}}
@media(max-width:480px){.video-body{padding:8px 6px 22px}.video-title{font-size:12px;padding:9px}.poster-title{font-size:12px;left:10px;top:9px}.play-large{width:60px;height:60px}.play-large svg{width:35px;height:35px}.player-controls{left:7px;right:7px;bottom:44px;padding:0 3px;gap:0}.control-button{width:24px;min-width:24px;padding:4px}.control-button svg{width:16px;height:16px}.rewind-button span{font-size:6px}.time-label{font-size:9px;margin:0 3px}.seek{margin-right:3px}.settings-menu{right:42px;font-size:11px;min-width:135px;bottom:35px}.setting-row{font-size:11px}.speed-option{font-size:11px;line-height:16px;padding-top:2px;padding-bottom:2px}.volume-popup{left:auto;right:0;transform:none}.blocked-cover h2{font-size:15px}}
@media(max-width:480px){.settings-menu{max-height:calc(52vw - 50px);overflow-y:auto}}

/* 映像と操作バーを別の行に置き、字幕に重ねない。 */
.player-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 40px;aspect-ratio:auto}
.player-shell video{grid-column:1;grid-row:1;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:16/9}
.player-shell .player-controls{position:relative;grid-column:1;grid-row:2;inset:auto;width:100%;height:40px;margin:0;padding:5px 8px;border-radius:0;background:#353535}
.player-shell .player-cover,.player-shell .blocked-cover{bottom:40px}
#watermark{bottom:60px}
.player-shell:fullscreen{grid-template-rows:minmax(0,1fr) 40px}
.player-shell:fullscreen video{height:100%;aspect-ratio:auto}
.player-shell:fullscreen .player-controls{inset:auto;height:40px}
.player-shell:fullscreen #watermark{bottom:60px}
.video-body{padding-bottom:10px}
@media(max-width:480px){.video-body{padding-bottom:8px}}

/* ID表示：全画面時は文字を拡大し、両表示で透過させる。 */
#watermark{opacity:.10}
.player-shell:fullscreen #watermark{font-size:14pt}