:root{--bg:#07090d;--paper:#f0eee8;--ink:#17191d;--muted:#a8abb2;--line:#30343c;--blue:#77c7ff;--violet:#b58cff;--pink:#ff8fca;--lime:#c9ff28}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f2f0e9;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;line-height:1.75}a{color:inherit;text-decoration:none}
header{position:fixed;z-index:20;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(7,9,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
.logo{display:flex;gap:12px;align-items:center;font-weight:700;letter-spacing:.08em}.logo-mark{width:34px;height:34px;border:1px solid #aaa;display:grid;place-items:center;font:700 11px Arial}.nav{display:flex;gap:24px;font-size:11px;letter-spacing:.16em;color:#bbb}.nav a:hover{color:#fff}.menu{display:none;background:none;color:#fff;border:0;letter-spacing:.15em}
.hero{position:relative;overflow:hidden;padding-top:70px;background:#05070a}
.hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center;background:#05070a}
.hero:after{display:none}
.hero-caption{padding:34px 7vw 42px;background:#07090d}
.hero-caption p{margin:0;color:#8f959e;font-size:10px;letter-spacing:.25em}
.hero-caption h1{font-size:clamp(34px,5vw,70px);line-height:.98;margin:10px 0 0;letter-spacing:-.05em}
.hero-caption h1 span{color:var(--lime)}
.section{padding:110px 7vw;max-width:1450px;margin:auto}.label{font:10px Arial;letter-spacing:.25em;color:#777d87;text-transform:uppercase}.section h2{font-size:clamp(36px,5vw,68px);line-height:1.05;margin:14px 0 28px;letter-spacing:-.04em}.intro{max-width:800px}.intro p{color:#b7bac0}
.loop{margin-top:70px;border:1px solid #292d35;display:grid;grid-template-columns:repeat(4,1fr);background:#0b0e13}.loop div{padding:30px;border-right:1px solid #292d35}.loop div:last-child{border:0}.loop b{display:block;font-size:24px;margin-bottom:5px}.loop small{color:#888;font-size:10px;letter-spacing:.1em}
.characters{background:#0a0c10}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:50px}.card{background:#11151c;border:1px solid #292e38;transition:.25s;overflow:hidden}.card:hover{transform:translateY(-5px);border-color:#777}.card img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}.card .ct{padding:18px}.card .num{font:10px Arial;color:#7e858f;letter-spacing:.15em}.card h3{margin:5px 0;font-size:21px}.card p{margin:0;color:#999;font-size:12px}
.ai{background:#0b0c11}.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start}.ai img{width:100%;display:block;border:1px solid #30323a}.ai-copy{padding:20px 0}.tag{display:inline-block;border:1px solid #6e425d;color:#ff9bd1;padding:5px 9px;font-size:10px;letter-spacing:.12em}.quote{margin-top:35px;border-left:2px solid var(--pink);padding-left:20px;font-size:22px;color:#e9c4d9}
.summary{background:#06070a}.summary img{width:100%;display:block}.summary p{color:#999;max-width:900px}
footer{padding:60px 7vw;background:#030405;border-top:1px solid #20232a;color:#777;font-size:10px;display:flex;justify-content:space-between}
.page-hero{padding:150px 7vw 80px;max-width:1200px;margin:auto}.page-hero h1{font-size:clamp(48px,7vw,95px);line-height:1;margin:15px 0}.page-hero p{color:#999}.detail{max-width:1200px;margin:auto;padding:0 7vw 120px}.detail img{width:100%;display:block}.back{display:inline-block;margin-top:30px;color:#aaa;border-bottom:1px solid #555;padding-bottom:4px;font-size:12px}@media(max-width:800px){
  header{height:62px}
  .nav{
    display:none;
    position:absolute;
    top:62px;left:0;right:0;
    background:#090b0f;
    padding:22px 7vw;
    flex-direction:column;
    gap:14px;
    border-bottom:1px solid #222
  }
  .nav.open{display:flex}
  .menu{display:block}
  .hero{padding-top:62px}
  .hero img{
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    object-fit:contain;
    object-position:center;
  }
  .hero-caption{
    position:static;
    padding:25px 7vw 32px;
    background:#07090d;
  }
  .hero-caption h1{font-size:42px}
  .loop,.ai-grid{grid-template-columns:1fr}
  .loop div{border-right:0;border-bottom:1px solid #292d35}
  .cards{grid-template-columns:1fr 1fr}
  .section{padding:90px 7vw}
  .card .ct{padding:12px}
  .card h3{font-size:17px}
  footer{display:block}
  .footer-right{margin-top:15px}
}