.container{max-width:1200px;margin:0 auto;padding:2rem 1rem} .hero{text-align:center;padding:3rem 1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:8px;margin-bottom:3rem} .hero h1{font-size:2rem;margin-bottom:1rem;line-height:1.3} .hero .intro{font-size:1.1rem;line-height:1.8;max-width:800px;margin:0 auto} section{margin-bottom:3rem} section h2{font-size:1.8rem;margin-bottom:1.5rem;color:#333;border-left:4px solid #e74c3c;padding-left:1rem} .card-grid,.list-grid,.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem} .card,.list-card,.related-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1.5rem;transition:all 0.3s ease} .card:hover,.list-card:hover,.related-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);transform:translateY(-2px)} .card h3,.list-card h2,.related-card h3{font-size:1.3rem;margin-bottom:0.5rem;color:#2c3e50} .card h3 a,.list-card h2 a,.related-card h3 a{color:#2c3e50;transition:color 0.3s} .card h3 a:hover,.list-card h2 a:hover,.related-card h3 a:hover{color:#e74c3c} .meta{font-size:0.9rem;color:#666;margin-bottom:0.5rem} .genre{font-size:0.95rem;color:#555;margin-bottom:0.5rem;font-weight:500} .tags{margin:0.5rem 0} .tags span,.tag{display:inline-block;background:#f0f0f0;padding:0.25rem 0.75rem;border-radius:4px;font-size:0.85rem;margin-right:0.5rem;margin-bottom:0.5rem;color:#555} .tag.pos{background:#fff3cd;color:#856404} .oneline{color:#555;line-height:1.6;margin-top:0.5rem} .summary{color:#666;line-height:1.6;margin-top:0.5rem;font-size:0.95rem} .review{color:#777;line-height:1.6;margin-top:0.5rem;font-size:0.9rem;font-style:italic} .rank{display:inline-block;background:#e74c3c;color:#fff;width:2rem;height:2rem;line-height:2rem;text-align:center;border-radius:50%;font-weight:700;margin-right:0.5rem;font-size:1.1rem} .rank-badge{position:absolute;top:1rem;right:1rem;background:#e74c3c;color:#fff;width:2.5rem;height:2.5rem;line-height:2.5rem;text-align:center;border-radius:50%;font-weight:700;font-size:1.2rem} .date-badge{position:absolute;top:1rem;right:1rem;background:#3498db;color:#fff;padding:0.5rem 1rem;border-radius:4px;font-size:0.9rem} .list-card{position:relative;padding-top:2rem} .more{text-align:center;margin-top:2rem} .more a{color:#e74c3c;font-weight:600;text-decoration:underline} .page-intro{font-size:1.1rem;line-height:1.8;color:#555;margin-bottom:2rem;padding:1rem;background:#f9f9f9;border-radius:6px} .detail-page article{background:#fff;padding:2rem;border-radius:8px;margin-bottom:2rem} .detail-page h1{font-size:2.5rem;margin-bottom:1rem;color:#2c3e50} .meta-info{margin:1rem 0;font-size:1rem} .meta-info span{display:inline-block;margin-right:1.5rem;padding:0.5rem 1rem;background:#ecf0f1;border-radius:4px;color:#34495e} .detail-page .oneline h2,.detail-page .summary h2,.detail-page .review h2{font-size:1.5rem;margin:2rem 0 1rem;color:#34495e;border-left:4px solid #3498db;padding-left:1rem} .detail-page .oneline p,.detail-page .summary p,.detail-page .review p{font-size:1.05rem;line-height:1.8;color:#555} .related h2{font-size:1.8rem;margin-bottom:1.5rem;color:#333;border-left:4px solid #27ae60;padding-left:1rem} .notice{font-size:1.2rem;color:#e74c3c;padding:2rem;background:#fff3cd;border-radius:8px;margin:2rem 0;text-align:center} .back-links{text-align:center;margin:2rem 0} .back-links a{color:#3498db;font-weight:600;margin:0 1rem;text-decoration:underline} footer{background:#2c3e50;color:#ecf0f1;text-align:center;padding:2rem;margin-top:3rem} footer p{margin:0} @media(max-width:768px){ nav{padding:0.75rem 0.5rem} nav a{font-size:0.85rem;padding:0.4rem 0.25rem} .logo{font-size:1rem;margin-right:0.5rem} .hero h1{font-size:1.5rem} .hero .intro{font-size:1rem} section h2{font-size:1.5rem} .card-grid,.list-grid,.related-grid{grid-template-columns:1fr} .detail-page h1{font-size:1.8rem} .container{padding:1rem 0.5rem} }