*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:    #ffffff;
  --bg2:   #f4f4f6;
  --fg:    #1a1a2e;
  --fg2:   #7a7a8e;
  --fg3:   #b0b0be;
  --accent1: #e53c51;
  --accent1x: rgba(229,60,81,.35);
  --accent2: #41adb9;
  --accent2x: rgba(65,173,185,.35);
  --line:  rgba(0,0,0,.07);
  --mincho: 'Shippori Mincho', serif;
  --sans:   'Noto Sans JP', sans-serif;
  --mono:   'Space Mono', monospace;
}

html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:300; overflow-x:hidden; cursor:none; }

/* ── Cursor ──────────────────────────────────── */
#cursor {
  position:fixed; z-index:9999; width:6px; height:6px;
  background:var(--accent1); border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  transition:width .3s,height .3s,background .3s,border-color .3s;
}
#cursor.big { width:36px; height:36px; background:transparent; border:1.5px solid var(--accent2); }

/* ── Three.js canvas — fixed, full viewport ──── */
#three-canvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}

/* ── Halftone mask overlay (fixed, above canvas) */
#halftone {
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background-image: radial-gradient(circle, var(--bg) 40%, transparent 40%);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 100%, black 100%);
  mask-image:         linear-gradient(to bottom, transparent 100%, black 100%);
}

/* ── Page content sits above canvas + halftone ─ */
#page {
  position:relative; z-index:10;
}

/* ── Nav ─────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:2rem 3.5rem; z-index:500;
  opacity:0; transition:opacity .6s;
}
nav.vis {
  opacity:1;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
}
.nav-logo { font-family:var(--mincho); font-size:.85rem; letter-spacing:.15em; color:var(--fg); font-weight:400; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; color:var(--fg2); text-decoration:none; text-transform:uppercase; transition:color .2s; }
.nav-links a:hover { color:var(--accent1); }

/* ── Hero ────────────────────────────────────── */
#hero {
  height:100vh; position:relative;
  display:flex; align-items:flex-end; padding:5rem 3.5rem;
  background:transparent;
}
.hero-inner { position:relative; }
.hero-kana { font-family:var(--mono); font-size:.6rem; letter-spacing:.5em; color:var(--accent2); text-transform:uppercase; margin-bottom:1.2rem; opacity:0; animation:aUp 1s .3s forwards; }
h1.hero-name { font-family:var(--mincho); font-size:clamp(4rem,10vw,10rem); font-weight:400; line-height:.95; letter-spacing:-.02em; color:var(--fg); opacity:0; animation:aUp 1.1s .55s forwards; }
h1.hero-name em { font-style:normal; color:var(--accent1); cursor:pointer; transition:color .6s ease; }
h1.hero-name em.toggled { color:var(--accent2); }
.hero-role { margin-top:1.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.25em; color:var(--fg2); text-transform:uppercase; opacity:0; animation:aUp 1s .85s forwards; }
.hero-social { display:flex; gap:1rem; margin-top:1.8rem; opacity:0; animation:aUp 1s 1.1s forwards; }
.hero-social-link {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  text-decoration:none; transition:opacity .25s;
}
.hero-social-link:hover { opacity:.5; }
.hero-social-link svg { width:18px; height:18px; fill:var(--fg3); transition:fill .2s; }
.hero-social-link:hover svg { fill:var(--accent1); }
.scroll-cue { position:absolute; bottom:3rem; right:0; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.5rem; letter-spacing:.35em; color:var(--fg3); text-transform:uppercase; opacity:0; animation:aFade 1s 2s forwards; }
.scroll-bar { width:1px; height:50px; background:linear-gradient(to bottom,var(--accent2),transparent); animation:scBar 2s ease-in-out infinite; }
@keyframes scBar { 0%,100%{opacity:.2} 50%{opacity:.9} }

/* ── Works sections ──────────────────────────── */
.works-wrap {
  padding-bottom:10rem;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sec-row { border-top:1px solid var(--line); padding:5rem 0 4rem; }
.sec-head { display:flex; align-items:baseline; padding:0 3.5rem 3.5rem; gap:1.5rem; }
.sec-index { font-family:var(--mono); font-size:.52rem; letter-spacing:.35em; color:var(--accent2); text-transform:uppercase; flex-shrink:0; width:2.2rem; }
.sec-name { font-family:var(--mincho); font-size:clamp(2rem,4vw,3.5rem); font-weight:400; letter-spacing:-.01em; line-height:1; }
.sec-count { margin-left:auto; font-family:var(--mono); font-size:.55rem; color:var(--fg3); letter-spacing:.18em; }

.h-scroll { display:flex; overflow-x:auto; padding:0 3.5rem 1rem; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; }
.h-scroll::-webkit-scrollbar { display:none; }
.h-scroll:active { cursor:grabbing; }

/* Music */
.music-item { flex:0 0 auto; width:190px; margin-right:2rem; text-decoration:none; color:inherit; cursor:pointer; transition:opacity .25s; }
.music-item:hover { opacity:.65; }
.music-jacket { width:190px; height:190px; background:var(--bg2); overflow:hidden; position:relative; margin-bottom:1rem; }
.music-jacket img { width:100%; height:100%; object-fit:cover; }
.music-jacket-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--accent1); opacity:.2; }
.music-title { font-family:var(--mincho); font-size:.88rem; line-height:1.55; font-weight:400; margin-bottom:.25rem; }
.music-date { font-family:var(--mono); font-size:.56rem; color:var(--fg2); letter-spacing:.1em; }

/* Movie */
.movie-item { flex:0 0 auto; width:320px; margin-right:2rem; cursor:pointer; }
.movie-thumb-wrap { width:320px; height:180px; background:var(--bg2); overflow:hidden; position:relative; margin-bottom:.9rem; }
.movie-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s,opacity .4s; }
.movie-item:hover .movie-thumb-wrap img { transform:scale(1.04); opacity:.75; }
.movie-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.movie-item:hover .movie-play { opacity:1; }
.movie-play-ring { width:48px; height:48px; border-radius:50%; border:1.5px solid var(--accent1); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.8); }
.movie-play-tri { width:0; height:0; margin-left:3px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:13px solid var(--accent1); }
.movie-title { font-family:var(--mincho); font-size:.86rem; line-height:1.5; color:var(--fg); }

/* Live */
.live-item { flex:0 0 auto; width:185px; margin-right:2.5rem; text-decoration:none; color:inherit; cursor:pointer; transition:opacity .25s; }
.live-item:hover { opacity:.65; }
.live-flyer { width:185px; padding-top:141.4%; position:relative; overflow:hidden; background:transparent; margin-bottom:1rem; }
.live-flyer img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.live-flyer-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--accent2); opacity:.18; }
.live-title { font-family:var(--mincho); font-size:.86rem; line-height:1.55; margin-bottom:.25rem; }
.live-date { font-family:var(--mono); font-size:.56rem; color:var(--fg2); letter-spacing:.1em; }

/* News */
.news-item { flex:0 0 auto; width:250px; margin-right:2rem; cursor:pointer; transition:opacity .25s; }
.news-item:hover { opacity:.65; }
.news-thumb { width:250px; height:250px; background:var(--bg2); overflow:hidden; margin-bottom:1rem; }
.news-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.news-item:hover .news-thumb img { transform:scale(1.04); }
.news-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--accent1); opacity:.15; }
.news-date { font-family:var(--mono); font-size:.56rem; color:var(--accent1); letter-spacing:.14em; margin-bottom:.35rem; }
.news-title { font-family:var(--mincho); font-size:.88rem; line-height:1.6; }

/* Goods */
.goods-item { flex:0 0 auto; width:200px; margin-right:2rem; text-decoration:none; cursor:pointer; transition:opacity .25s; }
.goods-item:hover { opacity:.65; }
.goods-thumb { width:200px; height:200px; background:var(--bg2); overflow:hidden; }
.goods-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.goods-item:hover .goods-thumb img { transform:scale(1.04); }
.goods-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--accent2); opacity:.15; }

/* ── About ───────────────────────────────────── */
#about { border-top:1px solid var(--line); padding:5rem 3.5rem 8rem; display:grid; grid-template-columns:1fr 300px; gap:6rem; align-items:start; background:rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
@media(max-width:880px){ #about{ grid-template-columns:1fr; gap:3rem; } }
.about-label { font-family:var(--mono); font-size:.55rem; letter-spacing:.4em; color:var(--accent2); text-transform:uppercase; margin-bottom:2.5rem; }
.about-profile { display:flex; align-items:flex-start; gap:2.5rem; }
.about-icon {
  width:120px; height:120px; flex-shrink:0;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--line);
}
@media(max-width:880px){ .about-profile{ flex-direction:column; align-items:center; text-align:center; } }
.about-bio { font-family:var(--mincho); font-size:clamp(1.1rem,1.9vw,1.6rem); font-weight:400; line-height:2.1; white-space:pre-line; }
.about-bio .acc { color:var(--accent1); }
.skill-group { margin-bottom:2rem; }
.skill-label { font-family:var(--mono); font-size:.53rem; letter-spacing:.3em; color:var(--accent2); text-transform:uppercase; margin-bottom:.6rem; }
.skill-list { font-size:.78rem; line-height:2.1; color:var(--fg2); }

/* ── Model switcher ──────────────────────────── */
.model-switcher {
  margin-top:2.8rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.model-switcher-label {
  font-family:var(--mono); font-size:.52rem; letter-spacing:.3em;
  color:var(--fg3); text-transform:uppercase; margin-bottom:1rem;
}
.model-btns { display:flex; gap:.8rem; }
.model-btn {
  position:relative; width:80px; flex-shrink:0;
  cursor:pointer; border:1px solid var(--line);
  background:var(--bg2); transition:border-color .25s, opacity .25s;
  padding:0; overflow:hidden;
}
.model-btn:hover { border-color:var(--accent2); }
.model-btn.active { border-color:var(--accent1); }
.model-btn-thumb {
  width:100%; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.model-btn-thumb img {
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.model-btn-thumb-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; opacity:.2;
}
.model-btn-name {
  font-family:var(--mono); font-size:.48rem;
  letter-spacing:.12em; color:var(--fg2);
  text-align:center; padding:.4rem .3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Contact ─────────────────────────────────── */
#contact-section {
  border-top:1px solid var(--line);
  padding:6rem 3.5rem 7rem;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start;
  max-width:960px; margin:0 auto;
}
@media(max-width:700px){ #contact-section{ grid-template-columns:1fr; gap:2.5rem; } }
.contact-label { font-family:var(--mono); font-size:.55rem; letter-spacing:.4em; color:var(--accent2); text-transform:uppercase; margin-bottom:2.5rem; }
.contact-heading { font-family:var(--mincho); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:400; line-height:1.2; margin-bottom:1rem; }
.contact-sub { font-size:.82rem; color:var(--fg2); line-height:1.9; }

.contact-links { display:flex; flex-direction:column; gap:1.5rem; padding-top:.5rem; }
.contact-link-item {
  display:flex; align-items:center; gap:1.2rem;
  text-decoration:none; color:var(--fg);
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
  transition:color .25s;
}
.contact-link-item:hover { color:var(--accent1); }
.contact-link-item:last-child { border-bottom:none; }
.contact-link-icon {
  width:40px; height:40px; flex-shrink:0;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s;
}
.contact-link-item:hover .contact-link-icon { border-color:var(--accent1); }
.contact-link-icon svg { width:18px; height:18px; fill:none; stroke:var(--fg); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.contact-link-item:hover .contact-link-icon svg { stroke:var(--accent1); }
.contact-link-icon svg.fill-icon { fill:var(--fg); stroke:none; }
.contact-link-item:hover .contact-link-icon svg.fill-icon { fill:var(--accent1); }
.contact-link-label { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--fg3); text-transform:uppercase; margin-bottom:.2rem; }
.contact-link-value { font-family:var(--mincho); font-size:.92rem; }

/* ── Footer ──────────────────────────────────── */
footer {
  border-top:1px solid var(--line);
  padding:2.5rem 3.5rem;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.footer-copy { font-family:var(--mincho); font-size:.72rem; color:var(--fg3); }
.footer-icons { display:flex; gap:1.5rem; align-items:center; }
.footer-icon-link {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  color:var(--fg3); text-decoration:none;
  transition:color .2s;
}
.footer-icon-link:hover { color:var(--accent1); }
.footer-icon-link svg { width:18px; height:18px; fill:var(--fg3); transition:fill .2s; }
.footer-icon-link:hover svg { fill:var(--accent1); }

/* ── Overlay ─────────────────────────────────── */
#overlay { position:fixed; inset:0; z-index:800; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9); backdrop-filter:blur(18px); opacity:0; pointer-events:none; transition:opacity .3s; }
#overlay.open { opacity:1; pointer-events:all; }
.ov-box { position:relative; width:min(90vw,860px); background:var(--bg); border:1px solid var(--line); transform:translateY(14px); transition:transform .35s cubic-bezier(.34,1.4,.64,1); box-shadow:0 8px 40px rgba(0,0,0,.06); }
#overlay.open .ov-box { transform:none; }
.ov-close { position:absolute; top:.9rem; right:1.1rem; z-index:2; font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--fg2); background:none; border:none; cursor:pointer; transition:color .2s; }
.ov-close:hover { color:var(--accent1); }
.ov-video { width:100%; aspect-ratio:16/9; display:block; }
.ov-video iframe { width:100%; height:100%; border:none; display:block; }
.ov-news { padding:3.5rem; max-height:80vh; overflow-y:auto; }
.ov-news::-webkit-scrollbar { width:3px; }
.ov-news::-webkit-scrollbar-thumb { background:var(--accent2); }
.ov-news-date { font-family:var(--mono); font-size:.56rem; color:var(--accent1); letter-spacing:.2em; margin-bottom:.8rem; }
.ov-news-title { font-family:var(--mincho); font-size:clamp(1.2rem,3vw,2rem); font-weight:400; line-height:1.5; margin-bottom:2.5rem; }
.ov-news-img { width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:2rem; display:block; }
.ov-news-body { font-family:var(--mincho); font-size:.92rem; line-height:2.2; color:var(--fg2); white-space:pre-wrap; word-break:break-word; }
.ov-news-body a { color:var(--accent1); text-decoration:none; border-bottom:1px solid var(--accent1x); transition:border-color .2s; }
.ov-news-body a:hover { color:var(--fg); border-color:var(--fg); }

@keyframes aUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes aFade { from{opacity:0} to{opacity:.45} }
.rev { opacity:0; transform:translateY(24px); transition:opacity .8s,transform .8s; }
.rev.in { opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────── */

/* Touch devices: disable custom cursor */
@media(hover:none),(pointer:coarse){
  body { cursor:auto; }
  #cursor { display:none; }
}

/* Tablet */
@media(max-width:768px){
  nav { padding:1.2rem 1.5rem; }
  .nav-links { gap:1.5rem; }
  #hero { padding:3rem 1.5rem; }
  .sec-head { padding:0 1.5rem 2.5rem; }
  .sec-row { padding:3rem 0 2.5rem; }
  .h-scroll { padding:0 1.5rem 1rem; }
  #about { padding:3.5rem 1.5rem 5rem; }
  #contact-section { padding:4rem 1.5rem 5rem; }
  footer { padding:2rem 1.5rem; }
  .ov-news { padding:2rem; }
}

/* Smartphone */
@media(max-width:480px){
  nav { padding:1rem; }
  .nav-links { gap:1rem; }
  .nav-links a { font-size:.5rem; letter-spacing:.15em; }
  #hero { padding:2.5rem 1rem; }
  .hero-role { font-size:.5rem; letter-spacing:.15em; }
  .sec-head { padding:0 1rem 2rem; }
  .h-scroll { padding:0 1rem 1rem; }
  .music-item { width:150px; }
  .music-jacket { width:150px; height:150px; }
  .movie-item { width:260px; }
  .movie-thumb-wrap { width:260px; height:146px; }
  .news-item { width:200px; }
  .news-thumb { width:200px; height:200px; }
  .live-item { width:150px; }
  .live-flyer { width:150px; }
  .goods-item { width:160px; }
  .goods-thumb { width:160px; height:160px; }
  #about { padding:2.5rem 1rem 4rem; gap:2rem; }
  .about-icon { width:90px; height:90px; }
  .about-bio { font-size:1rem; }
  #contact-section { padding:3rem 1rem 4rem; max-width:100%; gap:2rem; }
  .contact-heading { font-size:1.5rem; }
  footer { flex-direction:column; gap:1rem; text-align:center; }
  .works-wrap { padding-bottom:5rem; }
  .ov-news { padding:1.5rem; }
}