/* 共通 */
@font-face { font-family:'editfont'; src:url(SourceHanSans-VF.woff); }
body { background-color:#181818; margin:0px; font-family:editfont; width:100%; }

/* PC画面 (min-width: 421px) */
@media screen and (min-width: 481px) {
    .body2{width:98%;margin:0 auto;margin:auto;}
    header{display:flex;align-items:center;position:sticky;top:0;z-index:1000;background-color:#181818;padding:0px 8px 0px 8px;}
    main{width:68%;vertical-align:top;min-width: 0 !important;overflow: hidden; /* 念のため */}
    aside{padding-left:1%;width:22%;}
    footer{width:100%;margin:4px 0 0;padding:6px 4px;bottom:0;text-align:center;border-radius:10px;}
    .word-break,.overflow-wrap{width:100%;margin-bottom:1rem;display:flex;}
    .word-break .normal{width:100%;margin:0 3rem;padding:8px;border-radius:6px;background-color:#212121;}
    .nopc{display:none;}
    .headerimg{width:20%;}
    .metaline {  display: flex; gap: 8px;}
    .maincontents {display: flex;justify-content: center;width:100%;}
    .parent-item { width: calc(50% - 4px); background-color: #1e1e1e; border-radius: 4px; box-sizing: border-box;}
    #search-box {width:100%;}
    .touch-overlay{pointer-events:none;}
    .history-body {width:98%;margin:0 auto;}
    .video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,320px));}
    #tag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,320px));}
    .indexnaviamain {width:80%;margin:0 auto;}
    #videoinfo {width:25%;}
    .title{margin-top:6px;font-size:130%;color:#e7e7e7;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%;}
    .date{display:flex;align-items:center;font-size:80%;color:#dedede;}
}

/* スマホ画面 (max-width: 420px) */
@media screen and (max-width: 480px) {
    body{margin:0;font-size:100%;}
    .body2{width:100%;margin:0 auto;}
    header{display:flex;align-items:center;position:sticky;top:0;z-index:1000;background-color:#181818}
    main{width:100%;display:block;vertical-align:top;border-radius:10px;}
    aside{width:100%;display:block;border-radius:10px;}
    footer{width:100%;height:100%;margin-bottom:0;bottom:0;text-align:center;border-radius:10px;}
    .word-break,.overflow-wrap{width:100%;}
    .word-break .normal{max-width:100%;padding:4px;border:1px solid #181818;border-radius:6px;background-color:#212121;font-size:80%;}
    .sumahogai{padding:4px;}
    .nopc{font-size:100%;color:#e7e7e7;text-align: center;}
    .headerimg{width:100%;}
    #video-grid, .history-list, #tag-grid, .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 12px; box-sizing: border-box;}
    .chh-icon { width: 32px; height: 32px; }
    .meta-text .title { font-size: 13px; } 
    .addvisuals {display:none;}
    .metaline { display:none;}
    .parent-item { width: calc(100% - 4px); background-color: #1e1e1e; border-radius: 4px; box-sizing: border-box;}
    .video-js .vjs-volume-panel {display:none;}
    .video-js .vjs-picture-in-picture-control {display:none;}
    .vjs-subs-caps-button {display:none;}
    .vjs-playback-rate{display:none;}
    .share-window { top: auto; bottom: 0; left: 0; right: 0; transform: none; border-radius: 12px 12px 0 0;}
    #search-box {width:50%;}
    .touch-overlay{pointer-events:auto;}
    .indexnaviamain {width:100%;}
    #videoinfo {width:100%;}
    .title{margin-top:6px;font-size:100%;color:#e7e7e7;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%;}
    .date{display:flex;align-items:center;font-size:70%;color:#dedede;}
    .category-box{font-size:80%;}
    .archive-info{font-size:80%;}
}