@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap";:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #1a1a28;--bg-card-hover: #222235;--bg-surface: #16162266;--bg-overlay: rgba(0, 0, 0, .8);--text-primary: #f0f0f5;--text-secondary: #a0a0b8;--text-muted: #6a6a80;--text-link: #a78bfa;--accent-primary: #7c3aed;--accent-primary-hover: #6d28d9;--accent-secondary: #ef4444;--accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);--accent-gradient-hot: linear-gradient(135deg, #ef4444 0%, #f97316 100%);--border-color: #2a2a3d;--border-color-light: #3a3a50;--tag-bg: #7c3aed22;--tag-text: #a78bfa;--tag-bg-hover: #7c3aed44;--badge-hot: #ef4444;--badge-new: #22c55e;--badge-pick: #f59e0b;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(124, 58, 237, .3);--font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--max-width: 1200px;--header-height: 60px;--mobile-nav-height: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--text-link);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary)}img{max-width:100%;height:auto;display:block}button{font-family:var(--font-family);cursor:pointer;border:none;background:none;color:inherit}ul,ol{list-style:none}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color-light);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.site-header{position:sticky;top:0;z-index:100;background:#0a0a0feb;backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);height:var(--header-height)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}.site-logo{font-size:var(--font-size-xl);font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em}.site-logo:hover{-webkit-text-fill-color:transparent}.header-nav{display:flex;align-items:center;gap:var(--space-lg)}.header-nav a{color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500;transition:color var(--transition-fast);position:relative}.header-nav a:hover,.header-nav a.active{color:var(--text-primary)}.header-nav a.active:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent-gradient);border-radius:var(--radius-full)}.header-search-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-secondary);transition:all var(--transition-fast)}.header-search-btn:hover{background:var(--accent-primary);color:#fff}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px}.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all var(--transition-fast)}@media(max-width:768px){.header-nav{display:none}.mobile-menu-btn{display:flex}}.search-bar{position:relative;width:100%;max-width:600px;margin:0 auto}.search-bar input{width:100%;padding:14px 20px 14px 48px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--font-size-base);font-family:var(--font-family);transition:all var(--transition-fast);outline:none}.search-bar input:focus{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.search-bar input::placeholder{color:var(--text-muted)}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:18px;pointer-events:none}.popular-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;padding:var(--space-md) 0}.popular-tags-title{width:100%;text-align:center;font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-xs)}.tag-chip{display:inline-flex;align-items:center;padding:6px 14px;background:var(--tag-bg);color:var(--tag-text);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast);border:1px solid transparent;white-space:nowrap}.tag-chip:hover{background:var(--tag-bg-hover);border-color:var(--accent-primary);color:var(--text-primary);transform:translateY(-1px)}.tabs{display:flex;gap:var(--space-xs);border-bottom:1px solid var(--border-color);padding-bottom:0}.tab-btn{padding:10px 20px;font-size:var(--font-size-sm);font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.tab-btn:hover{color:var(--text-secondary)}.tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg);padding:var(--space-lg) 0}.article-card{background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color);transition:all var(--transition-base);position:relative}.article-card:hover{transform:translateY(-4px);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.article-card:hover .card-thumb img{transform:scale(1.05)}.card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-secondary)}.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.card-rank{position:absolute;top:8px;left:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:900;color:#fff;border-radius:var(--radius-sm);z-index:2}.card-rank.rank-1{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.card-rank.rank-2{background:linear-gradient(135deg,#94a3b8,#64748b)}.card-rank.rank-3{background:linear-gradient(135deg,#d97706,#b45309)}.card-rank:not(.rank-1):not(.rank-2):not(.rank-3){background:var(--bg-overlay);border:1px solid var(--border-color-light)}.card-badge{position:absolute;top:8px;right:8px;padding:3px 10px;font-size:var(--font-size-xs);font-weight:700;color:#fff;border-radius:var(--radius-full);z-index:2}.card-badge.hot{background:var(--accent-gradient-hot)}.card-badge.new{background:var(--badge-new)}.card-badge.pick{background:var(--badge-pick)}.card-body{padding:var(--space-md)}.card-title{font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-sm)}.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-xs);color:var(--text-muted)}.card-tags{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-sm)}.card-tags .tag-chip{font-size:var(--font-size-xs);padding:3px 8px}.ranking-section{padding:var(--space-xl) 0}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.section-title{font-size:var(--font-size-lg);font-weight:700;display:flex;align-items:center;gap:var(--space-sm)}.section-title .icon{font-size:var(--font-size-xl)}.section-more{font-size:var(--font-size-sm);color:var(--text-link);font-weight:500}.ranking-scroll{display:flex;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm);scrollbar-width:thin}.ranking-scroll::-webkit-scrollbar{height:4px}.ranking-scroll .article-card{min-width:220px;max-width:220px;scroll-snap-align:start;flex-shrink:0}@media(max-width:768px){.ranking-scroll .article-card{min-width:180px;max-width:180px}}.summary-box{background:var(--bg-card);border:1px solid var(--border-color);border-left:4px solid var(--accent-primary);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-lg) 0}.summary-box h3{font-size:var(--font-size-base);font-weight:700;color:var(--accent-primary);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}.summary-item{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6}.summary-item .label{font-weight:600;color:var(--text-primary);white-space:nowrap;min-width:80px}.summary-cta{display:flex;gap:var(--space-md);margin-top:var(--space-md);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow);color:#fff}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.related-sections{padding:var(--space-2xl) 0}.related-section{margin-bottom:var(--space-2xl)}.related-section .section-title{font-size:var(--font-size-base);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-md)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}@media(max-width:768px){.related-grid{grid-template-columns:1fr;gap:var(--space-sm)}.related-grid .article-card{display:flex;flex-direction:row}.related-grid .card-thumb{min-width:120px;max-width:120px;aspect-ratio:auto;height:auto}.related-grid .card-body{padding:var(--space-sm)}}.category-header{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-xl)}.category-header h1{font-size:var(--font-size-2xl);font-weight:900;margin-bottom:var(--space-sm)}.category-header .count{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-md)}.category-header .description{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-md)}.sort-controls{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) 0}.sort-controls label{font-size:var(--font-size-sm);color:var(--text-muted);font-weight:500}.sort-controls select{padding:8px 16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);outline:none;cursor:pointer}.sort-controls select:focus{border-color:var(--accent-primary)}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-xl) 0}.page-btn{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);transition:all var(--transition-fast)}.page-btn:hover,.page-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--space-2xl) 0 calc(var(--space-2xl) + var(--mobile-nav-height));margin-top:var(--space-2xl)}.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-xl);margin-bottom:var(--space-xl)}.footer-section h4{font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md)}.footer-section a{display:block;font-size:var(--font-size-xs);color:var(--text-muted);padding:4px 0;transition:color var(--transition-fast)}.footer-section a:hover{color:var(--text-link)}.footer-bottom{text-align:center;padding-top:var(--space-lg);border-top:1px solid var(--border-color)}.footer-bottom p{font-size:var(--font-size-xs);color:var(--text-muted)}.footer-bottom .age-warning{color:var(--accent-secondary);font-weight:700;font-size:var(--font-size-sm);margin-bottom:var(--space-sm)}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:#0a0a0ff2;backdrop-filter:blur(16px);border-top:1px solid var(--border-color);padding:6px 0 env(safe-area-inset-bottom,6px)}.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;min-width:56px;color:var(--text-muted);font-size:10px;font-weight:500;transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent}.mobile-nav-item .nav-icon{font-size:22px;line-height:1}.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--accent-primary)}@media(max-width:768px){.mobile-nav{display:block}body{padding-bottom:var(--mobile-nav-height)}}.home-hub{text-align:center;padding:var(--space-2xl) 0 var(--space-lg)}.home-hub .site-logo-hero{font-size:var(--font-size-3xl);font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-lg);letter-spacing:.05em}.home-hub .search-bar{margin-bottom:var(--space-lg)}.search-results-header{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border:1px solid var(--border-color)}.search-query{font-size:var(--font-size-xl);font-weight:700}.search-query em{color:var(--accent-primary);font-style:normal}.search-count{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:var(--space-xs)}.no-results{text-align:center;padding:var(--space-2xl)}.no-results h2{font-size:var(--font-size-xl);color:var(--text-secondary);margin-bottom:var(--space-lg)}.no-results p{color:var(--text-muted);margin-bottom:var(--space-xl)}.ranking-header{text-align:center;padding:var(--space-2xl) 0}.ranking-header h1{font-size:var(--font-size-2xl);font-weight:900;margin-bottom:var(--space-sm)}.ranking-header p{color:var(--text-muted);font-size:var(--font-size-sm)}.static-page{max-width:800px;margin:0 auto;padding:var(--space-2xl) var(--space-md)}.static-page h1{font-size:var(--font-size-2xl);font-weight:900;margin-bottom:var(--space-xl);padding-bottom:var(--space-md);border-bottom:2px solid var(--accent-primary)}.static-page h2{font-size:var(--font-size-lg);font-weight:700;margin:var(--space-xl) 0 var(--space-md)}.static-page p{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-md)}.dashboard{padding:var(--space-xl) 0}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.dashboard-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-lg)}.dashboard-card .label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm)}.dashboard-card .value{font-size:var(--font-size-2xl);font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .5s ease forwards}.card-grid .article-card{animation:fadeInUp .4s ease forwards;opacity:0}.card-grid .article-card:nth-child(1){animation-delay:.05s}.card-grid .article-card:nth-child(2){animation-delay:.1s}.card-grid .article-card:nth-child(3){animation-delay:.15s}.card-grid .article-card:nth-child(4){animation-delay:.2s}.card-grid .article-card:nth-child(5){animation-delay:.25s}.card-grid .article-card:nth-child(6){animation-delay:.3s}.card-grid .article-card:nth-child(7){animation-delay:.35s}.card-grid .article-card:nth-child(8){animation-delay:.4s}.card-grid .article-card:nth-child(9){animation-delay:.45s}.card-grid .article-card:nth-child(10){animation-delay:.5s}.card-grid .article-card:nth-child(11){animation-delay:.55s}.card-grid .article-card:nth-child(12){animation-delay:.6s}.age-gate-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-xl)}.age-gate-box{max-width:420px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-2xl)}.age-gate-box h2{font-size:var(--font-size-xl);font-weight:900;color:var(--accent-secondary);margin-bottom:var(--space-md)}.age-gate-box p{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-lg)}.age-gate-btn{width:100%;padding:14px;margin-bottom:var(--space-sm)}