
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:#0a0a0c;color:#f5f5f5;font-family:'Noto Sans JP',sans-serif;line-height:1.9}
.container{max-width:1150px;margin:0 auto;padding:40px 20px}
h1,h2,h3{font-family:'Cormorant Garamond',serif;letter-spacing:.04em}
h1{font-size:48px;color:#f5dc7d;text-align:center;margin-bottom:24px}
h2{font-size:32px;color:#e9d070;margin:60px 0 20px;border-left:4px solid #d8b948;padding-left:12px}
p{font-size:18px;color:#e4e4e4;margin-bottom:20px}
.hero{position:relative;height:100vh;text-align:center;overflow:hidden;background:#000}
canvas#particles{position:absolute;width:100%;height:100%;top:0;left:0;z-index:0}
.hero-content{position:relative;z-index:1;top:45%;transform:translateY(-45%)}
.hero img.logo{width:360px;margin-bottom:20px;animation:fadeIn 2.5s ease}
.hero p{color:#ccc;font-size:20px;animation:fadeIn 3.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.card{background:rgba(30,30,36,.8);border:1px solid rgba(255,215,100,.2);border-radius:14px;
overflow:hidden;margin-bottom:70px;box-shadow:0 0 35px rgba(0,0,0,.6);padding-bottom:20px}
.card img{width:100%;height:auto;object-fit:contain;background:#000;padding:8px;border-bottom:1px solid rgba(255,215,100,.2)}
.card .inner{padding:28px}
.card h3{color:#f5e08c;margin-top:0;margin-bottom:10px}
.card .meta{font-size:15px;color:#b7b7b7;margin-bottom:8px}
footer{background:#111116;text-align:center;color:#888;padding:30px 0;margin-top:80px;font-size:13px}
@media(max-width:850px){h1{font-size:34px}.card img{height:auto}}
