:root{--mobile-header-height:48px} *{box-sizing:border-box;margin:0;padding:0} body{background-color:white;margin:0;font-size:100%;font-family:Arial,"MS PGothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} button,input,select,textarea{font:inherit} ul{list-style:none} .title-logo{max-height:150px} .master{display:flex;min-width:fit-content;min-height:100vh} .main-pattern{position:relative;flex:1;min-width:500px;overflow-x:clip;padding:24px;background-color:#cccccc;background-image:linear-gradient(#ffffffb1 1px,transparent 0),linear-gradient(90deg,#ffffffb1 1px,transparent 0);background-size:40px 40px;background-position:top} .works-images{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%;max-width:500px;margin:20px auto;padding:20px 0 0} .works-images::before{content:"";position:absolute;z-index:-1;top:0;right:-100vmax;bottom:0;left:-100vmax;background:white;background-image:linear-gradient(#cbcbcbba 1px,transparent 0),linear-gradient(90deg,#cbcbcbba 1px,transparent 0);background-size:40px 40px;background-position:top} .works-images a{display:block;min-width:0} .works-images img{display:block;width:100%;height:auto;border:0;image-rendering:pixelated} .works-images .works-others{grid-column:1 / -1;justify-self:center;width:75%} .works-images a:hover img{opacity:0.8} @media (min-width:960px){.works-images{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);max-width:800px} .works-images .works-others{grid-column:auto;justify-self:stretch;width:100%}} .window-header{position:fixed;top:0;left:0;width:100%;height:20px;background-color:#31a9ee;color:white;font-size:12px} .window_container{max-width:1200px;margin:0 auto;position:relative} .window_center{text-align:center} .window_box{padding:10px 0px;margin-bottom:10px} .window_box_bg{background-color:#d7d7d7} .window_top-news{background-image:url(/assets/images/xp_bg.jpeg);background-size:cover;padding:20px;border-top:4px solid #858585;border-left:4px solid #858585;border-right:4px solid #fff;border-bottom:4px solid #fff} .window_table_box{margin-inline:auto} .window_table-wrap{width:100%;overflow-x:auto;border-top:2px solid #a8a8a8;border-left:2px solid #a8a8a8;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;background:#ffffff;box-sizing:border-box} .window_table{width:100%;border-collapse:collapse;color:#000000;background:#ffffff} .window_table th{padding:5px 8px;text-align:left;white-space:nowrap;font-weight:normal;color:#000000;background:linear-gradient(to bottom,#ffffff 0%,#f3f3f3 45%,#dcdcdc 100%);border-top:1px solid #ffffff;border-left:1px solid #ffffff;border-right:1px solid #a8a8a8;border-bottom:1px solid #a8a8a8} .window_table td{padding:6px 8px;vertical-align:top;background:#ffffff;border-bottom:1px solid #e5e5e5} .window_table tbody tr:hover td{color:#ffffff;background:#316ac5} .window_table tbody tr:hover a{color:#ffffff} .window_table a{color:#0000ee;text-decoration:underline} footer{margin-top:100px;margin-bottom:160px} .heisei-box{padding:20px;background-color:#ededed;border:double 3px #000000} .footer-box{text-align:center;max-width:640px;margin:auto} .sidebar{position:sticky;top:0;width:300px;min-width:300px;overflow-y:auto;padding:16px 12px 12px;font-size:16px} .sidebar-pattern{background:url(/assets/images/bg_sky_3.png);background-size:480px 480px;background-repeat:repeat;image-rendering:pixelated} .sidebar-title{color:#333;font-size:18px;font-weight:bold;line-height:1.25} .sidebar-subtitle{margin-bottom:12px;color:#555;font-size:14px} .sidebar-nav ul{display:flex;flex-direction:column;gap:10px;font-size:18px} .sidebar-nav span{margin-right:3px;color:black;font-size:18px} .sidebar-nav a{font-weight:bold} .sidebar-nav small,.sidebar-nav em{font-size:12px} .sidebar-nav em{color:#cc0000;font-style:normal;font-weight:bold} .language-switcher{margin:12px 0;padding:6px;border:1px solid #808080;background:#ffffff;font-size:12px;line-height:1.6} .language-switcher label{display:block;margin-bottom:4px;color:#444444} .language-switcher select{display:block;width:100%;min-height:26px;padding:2px 24px 2px 5px;border:1px solid #7f9db9;background:#ffffff;color:#111111;font:inherit} .link-free{margin-top:20px;color:#333;font-size:14px;line-height:1.6} .red{color:#cc0000;font-weight:bold} .news-content-media{margin:24px auto;text-align:center} .news-content-media img,.news-content-video{max-width:100%;height:auto} .news-content-media figcaption{color:#666666;font-size:12px} .news-content-video{display:block;margin:24px auto} .news-content-youtube{position:relative;margin:24px 0;padding-top:56.25%} .news-content-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .news-content-quote{margin:20px 0;padding:12px 18px;border-left:4px solid #3e7465;background:#edf5f2} #menu-toggle,.mobile-menu{display:none} .character-hikineet{position:fixed;z-index:999;bottom:0;left:-10px;image-rendering:pixelated;width:400px} .xp-window{background:#ededed;border:3px solid #5b5b5b;border-radius:7px 7px 3px 3px;font-family:Tahoma,"MS UI Gothic","MS PGothic",sans-serif;color:#111;overflow:hidden;margin:auto;max-width:780px} .xp-window-titlebar{font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:3px 4px 3px 8px;color:#ffffff;font-weight:bold;line-height:1.4;background:linear-gradient(to bottom,#959595 0%,#b8b8b8 8%,#696969 14%,#868686 40%,#595959 100%);text-shadow:1px 1px 0 #003399;border-bottom:1px solid #003c9d;height:32px} .xp-window-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .xp-window-body{margin:6px;padding:12px} .xp-window-image{display:block;max-width:100%;box-sizing:border-box;background:#ffffff;border-top:4px solid #777;border-left:4px solid #777;border-right:4px solid #fff;border-bottom:4px solid #fff;box-shadow:inset 1px 1px 0 #404040,inset -1px -1px 0 #ffffff;width:100%;object-fit:cover} .xp-window-image--compact{max-height:200px} .win98-window{border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #404040;border-bottom:2px solid #404040;background:#c0c0c0;color:#000;margin:auto;max-width:780px} .win98-title{margin:2px;padding:3px 6px;color:#ffffff;background:#000080;font-weight:bold;font-size:12px} .win98-body{margin:2px;padding:12px;background:#c0c0c0} .win98-body img{width:100%;object-fit:cover} .top-news{max-height:280px;overflow-y:scroll;overflow-x:hidden} .news-body{padding:10px 0} .split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .split-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .music-player{position:fixed;z-index:1000;left:50%;bottom:10px;display:grid;grid-template-columns:74px 180px 1fr 120px;gap:12px;align-items:center;width:min(1000px,calc(100% - 28px));min-height:92px;padding:8px;transform:translateX(-50%);color:#000;background-color:#ededed;border:double 3px #000000;font-family:Arial,Tahoma,"MS UI Gothic","MS PGothic",sans-serif;font-size:12px} .music-player>img{display:block;width:74px;height:74px;object-fit:cover;background:#888888;border:1px solid #000} .track-info{min-width:0;padding:4px} .track-info span,.track-info strong,.track-info small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .track-info span{margin-bottom:3px;color:#555555;font-size:10px} .track-info strong{font-size:16px;font-weight:normal} .track-info small{margin-top:4px;font-size:16px} .player-main{min-width:0} .player-controls{display:flex;align-items:center;gap:12px;height:30px} .player-control,.player-control:link,.player-control:visited{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0;padding:0;background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer} .player-control img,.volume-button img{display:block;width:24px;height:24px;object-fit:contain;user-select:none;-webkit-user-drag:none} .player-control:hover img,.volume-button:hover img{opacity:0.7} .player-control:active img,.volume-button:active img{transform:translate(1px,1px)} .seek-row{display:grid;grid-template-columns:40px 1fr 40px;gap:8px;align-items:center;margin-top:8px;color:#000;font-family:Arial,sans-serif;font-size:12px} .seek-row span{text-align:center} .seekbar{width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer} .seekbar::-webkit-slider-runnable-track{height:8px;background:#c8c8c8;border-top:1px solid #ffffff;border-left:1px solid #ffffff;border-right:1px solid #888888;border-bottom:1px solid #888888} .seekbar::-webkit-slider-thumb{width:15px;height:20px;margin-top:-7px;appearance:none;-webkit-appearance:none;background:#d5d5d5;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #666666;border-bottom:2px solid #666666;border-radius:0} .seekbar::-moz-range-track{height:6px;background:#c8c8c8;border:1px solid #ffffff;border-radius:0} .seekbar::-moz-range-thumb{width:13px;height:18px;background:#d5d5d5;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #666666;border-bottom:2px solid #666666;border-radius:0} .volume-control{position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;height:34px;padding:0 4px 0 30px;background:transparent;border:0} .volume-button,.volume-button:link,.volume-button:visited{position:absolute;z-index:2;top:5px;left:2px;width:23px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer} .volume-control::after{content:"";position:absolute;z-index:0;top:5px;left:30px;right:4px;height:24px;background-repeat:no-repeat;background-position:center;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24' viewBox='0 0 90 24' preserveAspectRatio='none'%3E%3Cpath d='M2 20 L87 3 L87 20 Z' fill='%23c7c7c7' stroke='%23888888' stroke-width='1'/%3E%3Cpath d='M3 19 L86 4' fill='none' stroke='%23eeeeee' stroke-width='1'/%3E%3C/svg%3E")} .volumebar{position:relative;z-index:1;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer} .volumebar::-webkit-slider-runnable-track{height:24px;background:transparent;border:0} .volumebar::-webkit-slider-thumb{width:13px;height:28px;margin-top:-2px;appearance:none;-webkit-appearance:none;background:#d4d4d4;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #666666;border-bottom:2px solid #666666;border-radius:0} .volumebar::-moz-range-track{height:24px;background:transparent;border:0} .volumebar::-moz-range-progress{background:transparent} .volumebar::-moz-range-thumb{width:11px;height:26px;background:#d4d4d4;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #666666;border-bottom:2px solid #666666;border-radius:0} .player-control:focus-visible,.volume-button:focus-visible,.seekbar:focus-visible,.volumebar:focus-visible{outline:1px dotted #000000;outline-offset:2px} .content-page{width:calc(100% - 24px);margin:14px auto 0;font-family:Arial,"MS PGothic",sans-serif} .retro-frame-table{width:100%;border:1px solid #000000;border-spacing:2px;background:#c0c0c0} .retro-data-table{--retro-cell-padding:5px 7px;--retro-title-padding:7px} .retro-data-table th,.retro-data-table td{padding:var(--retro-cell-padding);border:1px solid #808080;background:#f5f5f5;font-size:14px;line-height:1.4;text-align:left;vertical-align:top} .retro-data-table .retro-panel-title{padding:var(--retro-title-padding);background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);color:#fff;font-size:22px;font-weight:normal;text-align:center} .page-top-link{margin:28px 0 20px;text-align:center} @media (max-width:540px){.content-page{width:calc(100% - 8px)} .retro-data-table th,.retro-data-table td{padding:4px;font-size:12px} .retro-data-table .retro-panel-title{font-size:18px}} .news-page{max-width:760px} .news-list-table{width:100%;border:1px solid #000000;border-collapse:collapse;border-spacing:0} .news-list-table thead tr:nth-child(2) th{background:#e5e5e5} .news-list-date-heading,.news-list-date{width:150px;white-space:nowrap} .news-list-link{overflow-wrap:anywhere} .news-list-empty{padding:18px;text-align:center} .news-article-page{max-width:760px;color:#111111;font-family:"MS PGothic",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif} .news-article-table{width:100%;border:1px solid #777777;border-spacing:2px;background:#c0c0c0} .news-article-header{padding:7px;border:1px solid #808080;background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);color:#ffffff;text-align:center} .news-article-header h1{margin:0;font-size:clamp(20px,3vw,22px);font-weight:normal;line-height:1.35;overflow-wrap:anywhere} .news-article-date{margin-top:3px;color:#eeeeee;font-size:12px;text-align:right} .news-article-content{padding:0;border:1px solid #808080;background:#f5f5f5;text-align:left;vertical-align:top} .news-article-table .news-body{padding:22px 24px 28px;background:#f5f5f5;font-size:16px;line-height:1.9} .news-article-table .news-body p{margin:0 0 1.3em} .news-article-table .news-body h2,.news-article-table .news-body h3{margin:1.5em 0 0.75em;padding:3px 6px;border-left:4px solid #777777;border-bottom:1px dotted #999999;background:#eeeeee;line-height:1.5} .news-article-table .news-content-media img,.news-article-table .news-content-video,.news-article-table .news-content-youtube{border:1px solid #777777} .news-article-table .news-content-media figcaption{margin-top:7px;color:#555555;font-family:"MS PGothic",Arial,sans-serif} .news-article-table .news-content-quote{border:1px dashed #666666;background:#eeeeee} .news-article-table .news-content-link{color:#0000ee;text-decoration:underline} .news-article-table .news-content-divider{margin:24px 0;border:0;border-top:1px dashed #666666} .news-article-not-found{background:#c0c0c0} .news-article-not-found td{padding:32px 20px;border:1px solid #808080;background:#f5f5f5;text-align:center} @media (max-width:540px){.news-list-date-heading,.news-list-date{width:100px} .news-article-page{width:100%;margin-top:0} .news-article-header h1{font-size:19px} .news-article-date{font-size:11px} .news-article-table .news-body{padding:16px 12px 22px;line-height:1.8}} .retro-list-table{--retro-cell-padding:4px 5px} .retro-list-info{overflow-wrap:anywhere} .retro-list-title{margin:0 0 5px;font-size:19px;font-weight:normal} .retro-list-empty{padding:18px;border:1px solid #808080;background:#f5f5f5;text-align:center} @media (max-width:540px){.retro-list-title{font-size:15px}} .secret-page{max-width:620px} .secret-title-table{--retro-cell-padding:4px 5px;--retro-title-padding:4px 5px} .secret-track-list{margin-top:10px;border:1px solid #808080;background:#ffffff} .secret-section-title{margin:14px 0 6px;padding:4px 5px;border:1px solid #000000;background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);color:#ffffff;font-size:18px;font-weight:normal;text-align:center} .secret-game-list{display:grid;gap:8px} .secret-game-info p{margin:5px 0} .secret-game-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0} .secret-game-images img,.secret-game-image-empty{display:block;box-sizing:border-box;width:100%;aspect-ratio:16 / 9;border:1px solid #808080;background:#ffffff} .secret-game-images img{height:auto;object-fit:cover} .secret-game-image-empty{display:grid;place-items:center;color:#666666;font-size:12px} .secret-game-link{text-align:right} .secret-music-note{margin:0 0 8px;font-size:13px} .secret-track-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:7px 9px;border-bottom:1px dotted #a0a0a0} .secret-track-item:last-child{border-bottom:0} .secret-track-title{min-width:0;font-size:16px;overflow-wrap:anywhere} .secret-track-artist{color:#555555;font-size:13px;white-space:nowrap} @media (max-width:540px){.secret-title-table .retro-panel-title{padding:4px} .secret-track-item{gap:8px;padding:6px 7px} .secret-track-title{font-size:14px} .secret-track-artist{font-size:11px} .secret-section-title{font-size:15px} .secret-game-images{gap:3px} .secret-game-image-empty{font-size:10px}} .webstar-game-page{box-sizing:border-box;width:100%} .webstar-game-frame{position:relative;box-sizing:border-box;width:100%;max-width:1280px;margin:0 auto;aspect-ratio:16 / 9;overflow:hidden;border:2px solid #000000;background:#000000} .webstar-game-frame iframe{display:block;width:100%;height:100%;border:0;background:#000000} .webstar-game-links{margin:0.75rem 0 0;text-align:center} @media (max-width:767px){.webstar-game-page{padding-right:0;padding-left:0} .webstar-game-page h1,.webstar-game-links{padding-right:0.75rem;padding-left:0.75rem}} .works-page{max-width:720px} .works-control-table th[scope="row"]{width:90px;background:#e5e5e5;white-space:nowrap} .works-control-table strong{color:#000000} .works-result-count{margin:12px 2px 6px;font-size:13px} .works-list{display:grid;gap:10px} .works-entry-table{--retro-cell-padding:5px 7px;table-layout:fixed} .works-entry-table .works-thumbnail-cell{width:198px;padding:7px;text-align:center;vertical-align:middle} .works-thumbnail{display:block;width:180px;aspect-ratio:16 / 9;margin:auto;object-fit:cover;border:1px solid #000000;background:#ffffff} .works-entry-info .retro-list-title{line-height:1.3} .works-entry-info p{margin:2px 0} .works-entry-info .works-description{margin:8px 0} @media (max-width:540px){.works-control-table th[scope="row"]{width:68px} .works-entry-table .works-thumbnail-cell{width:128px;padding:4px} .works-thumbnail{width:118px} .works-entry-info .works-description{margin:5px 0}} .contact-table-wrap{width:calc(100% - 24px);max-width:600px;margin:14px auto 0;padding:2px;background:#c4c4c4;border:1px solid #888888} .contact-link-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;background:#c4c4c4;border:1px solid #000000} .contact-link-table td,.contact-link-table th{padding:3px 4px;color:#000000;background:#ededed;border:1px solid #000000;font-family:Arial,"MS PGothic",sans-serif;font-size:16px;font-weight:normal;line-height:1.25;text-align:left;vertical-align:middle;overflow-wrap:anywhere} .contact-link-table .contact-table-title{padding:5px;background:#ededed;text-align:center} .contact-top-link{margin:32px 0 20px;font-size:16px;text-align:center} @media (max-width:540px){.contact-table-wrap{width:calc(100% - 8px);padding:1px} .contact-link-table{border-spacing:1px} .contact-link-table td,.contact-link-table th{padding:3px} .contact-top-link{margin-top:28px}} .xp-statusbar{margin:0 3px 3px;padding:3px 6px;border-top:1px solid #a9a9a9;box-shadow:inset 1px 1px 0 #fff;color:#444;font-size:11px} html{overflow-y:scroll;scrollbar-gutter:stable}::-webkit-scrollbar{width:18px;height:18px;background:#f4f4f4}::-webkit-scrollbar-track{background:#f3f3eb;border-left:2px solid #a8a8a8;border-right:2px solid #ffffff}::-webkit-scrollbar-thumb{min-height:50px;background:linear-gradient(to right,#eeeeee 0%,#dddddd 55%,#c8c8c8 100%);border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #595959;border-bottom:2px solid #595959;border-radius:0}::-webkit-scrollbar-button:single-button{display:block;width:18px;height:18px;background-color:#dddddd;background-repeat:no-repeat;background-position:center;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #595959;border-bottom:2px solid #595959}::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 6.5 L4.5 2.5 L8 6.5 Z' fill='%23333333'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 2.5 L4.5 6.5 L8 2.5 Z' fill='%23333333'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:single-button:active{background-color:#cacaca;border-top-color:#595959;border-left-color:#595959;border-right-color:#ffffff;border-bottom-color:#ffffff}::-webkit-scrollbar-corner{background:#dddddd} @media (max-width:1500px){.sidebar-right{display:none;border:none;position:fixed;top:40px;right:10px;z-index:9999;width:260px;max-height:calc(100vh - 70px);overflow-y:auto}} @media (max-width:960px){.master{display:block;min-width:0;min-height:calc(100vh - var(--mobile-header-height))} .main-pattern{min-width:0;padding:28px 16px;min-height:calc(100vh - var(--mobile-header-height))} .window-header{display:none} .window_top-news{margin-inline:-20px} .window_table_box{max-width:780px} .xp-window-title-top{display:none} .mobile-menu{position:sticky;top:0;z-index:10;display:block;box-sizing:border-box;padding:0;color:transparent;background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);border-bottom:2px solid #000000;height:var(--mobile-header-height);font-size:0;line-height:0;cursor:pointer} .mobile-menu::before{content:"";position:absolute;top:50%;right:16px;width:26px;height:16px;transform:translateY(-50%);background:linear-gradient( to bottom,#ffffff 0,#ffffff 2px,transparent 2px,transparent 7px,#ffffff 7px,#ffffff 9px,transparent 9px,transparent 14px,#ffffff 14px,#ffffff 16px )} .sidebar{display:none;border:none;position:fixed;top:40px;right:10px;z-index:9999;width:260px;max-height:calc(100vh - 70px);overflow-y:auto} #menu-toggle:checked ~ .master .sidebar{display:block} .sidebar-pattern{background:none} .character-hikineet{display:none} .split-2,.split-3{grid-template-columns:1fr} .music-player{width:100%;min-height:106px;grid-template-columns:56px minmax(100px,1fr) 2fr;gap:8px;padding:7px;bottom:-2px} .music-player>img{width:56px;height:56px} .volume-control{display:none} .player-buttons button{min-width:36px;padding:3px 5px} .player-main,.player-buttons,.seek-row,#seek-bar{min-width:0;max-width:100%}} @media (max-width:540px){.title-logo{width:100%} .window_table td:first-child{width:100px} .music-entry{align-items:flex-start} .music-entry img{width:100px} .music-player{min-height:0;grid-template-columns:46px minmax(0,1fr);gap:6px 8px;padding:6px} .music-player>img{width:46px;height:46px} .player-main{grid-column:1 / -1;width:100%} .player-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%} .player-buttons button{width:100%;min-width:0;height:30px;padding:2px 3px;overflow:hidden;font-size:9px;text-overflow:clip;white-space:nowrap} .seek-row{width:100%;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;margin-top:4px;font-size:10px} .seek-row>span:last-child{text-align:right} #seek-bar{width:100%;margin:0} .track-info strong{font-size:13px} .track-info small{font-size:10px} .page-shell{margin-bottom:150px}} @media (max-width:340px){.player-buttons{gap:3px} .player-buttons button{padding-inline:1px;font-size:8px} .seek-row{grid-template-columns:31px minmax(0,1fr) 31px;gap:3px}} .odochina-page{box-sizing:border-box;width:calc(100% - 24px);max-width:760px;margin:14px auto 0;padding:10px;background:transparent;font-family:Arial,"MS PGothic",sans-serif} .odochina-title-table,.odochina-info-table,.odochina-lyrics-table{width:100%;border-collapse:collapse} .odochina-title-table{border:1px solid #000000;background:#c0c0c0;text-align:center} .odochina-title-table th{padding:7px;background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);color:#ffffff;font-size:22px;font-weight:normal} .odochina-title-table td{padding:5px;border-top:1px solid #808080;background:#f5f5f5;font-size:14px} .odochina-content{margin-top:8px;padding:10px;border:1px solid #000000;background-color:#dedede;background-image:linear-gradient(45deg,#d2d2d2 25%,transparent 25%,transparent 75%,#d2d2d2 75%),linear-gradient(45deg,#d2d2d2 25%,transparent 25%,transparent 75%,#d2d2d2 75%);background-position:0 0,8px 8px;background-size:16px 16px} .odochina-welcome{margin:0 0 8px;color:#000000;font-size:13px;text-align:center} .odochina-main-image{display:block;box-sizing:border-box;width:100%;max-width:640px;height:auto;margin:0 auto 10px;border:1px solid #000000} .odochina-info-table th,.odochina-info-table td{padding:5px 7px;border:1px solid #808080;background:#f5f5f5;font-size:14px;line-height:1.4;text-align:left} .odochina-info-table th{width:90px;background:#e5e5e5;white-space:nowrap} .mv-demo-list{margin-top:0} .odochina-links{margin:10px 0;text-align:center} .odochina-lyrics-table th{padding:5px;border:1px solid #000000;background:linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);color:#ffffff;font-size:18px;font-weight:normal;text-align:center} .odochina-lyrics-table td{padding:12px 20px;border:1px solid #808080;background:#f5f5f5;font-size:14px;line-height:1.75;text-align:left} .odochina-bottom-link{margin:16px 0 4px;text-align:center} @media (max-width:540px){.odochina-page{width:calc(100% + 32px);max-width:none;margin-right:-16px;margin-left:-16px;padding:6px} .odochina-content{padding:5px} .odochina-title-table th{font-size:20px} .odochina-info-table th,.odochina-info-table td,.odochina-lyrics-table td{padding:5px;font-size:12px} .odochina-info-table th{width:68px}} .site-banners{display:grid;box-sizing:border-box;width:100%;grid-template-columns:repeat(auto-fit,176px);justify-content:center;gap:6px} .site-banners a{display:block} .site-banner{display:block;width:176px;max-width:100%;height:auto;image-rendering:pixelated} @media (max-width:540px){.site-banners{grid-template-columns:repeat(2,minmax(0,176px));padding:0 4px} .site-banners a,.site-banner{width:100%}}