@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');
:root{--black:#050505;--white:#f5f5f5;--gray:#888;--line:#252525}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Inter,"Noto Sans JP",sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}button{font:inherit}
#loader{position:fixed;inset:0;background:#000;z-index:9999;display:grid;place-items:center;transition:.7s}
#loader span{width:90px;height:1px;background:#fff;animation:load 1s ease-in-out infinite alternate}
#loader.done{opacity:0;visibility:hidden}
@keyframes load{from{transform:scaleX(.15);opacity:.25}to{transform:scaleX(1);opacity:1}}

.hero{height:100svh;min-height:650px;position:relative;display:grid;place-items:center;overflow:hidden;background:#000}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 5%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.82) 100%)}
.hero-logo{position:relative;width:min(72vw,1050px);z-index:2;animation:logoIn 1.8s cubic-bezier(.16,1,.3,1) both}
.hero-logo img{width:100%;filter:drop-shadow(0 10px 35px rgba(0,0,0,.6))}
@keyframes logoIn{from{opacity:0;transform:scale(.97);filter:blur(18px)}to{opacity:1;transform:none;filter:none}}
.scroll-mark{position:absolute;bottom:28px;z-index:3;font-size:9px;letter-spacing:.28em;color:#aaa}
.scroll-mark span{display:block;width:1px;height:35px;background:#aaa;margin:10px auto 0;animation:scrollLine 1.3s infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(.25);transform-origin:top;opacity:.3}50%{transform:scaleY(1);transform-origin:top;opacity:1}}

.sam-section{height:620vh;position:relative;background:#050505}
.sam-sticky{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;display:flex;align-items:center}
.sam-track{display:flex;gap:3vw;width:max-content;will-change:transform;padding-left:8vw}
.sam-track figure{margin:0;width:min(72vw,1100px);height:min(55vh,650px);flex:none;overflow:hidden;background:#111;box-shadow:0 25px 70px rgba(0,0,0,.55)}
.sam-track img{width:100%;height:100%;object-fit:cover}
.sam-progress{position:absolute;left:8vw;right:8vw;bottom:45px;height:1px;background:#242424}
.sam-progress span{display:block;height:100%;width:0;background:#eee;transform-origin:left}
.sam-count{position:absolute;right:8vw;bottom:62px;font-size:10px;letter-spacing:.2em;color:#777}
.sam-count b{color:#fff;font-weight:400}.sam-count i{font-style:normal;margin:0 7px;color:#444}

.looks{width:min(1180px,90vw);margin:auto;padding:130px 0 150px}
.kicker{font-size:10px;letter-spacing:.25em;color:#777}
.intro{padding-bottom:100px}
.intro h1{font-size:clamp(60px,12vw,160px);font-weight:300;letter-spacing:-.07em;margin:0}

.look{border-top:1px solid var(--line);padding:55px 0 120px}
.look-brand{display:flex;align-items:center;gap:18px;min-height:42px;margin-bottom:38px}
.look-brand img{width:auto;max-width:600px;max-height:140px}
.look-brand-name{font-size:11px;letter-spacing:.22em;color:#bbb}
.look-grid{display:grid;grid-template-columns:minmax(300px,650px) 1fr;gap:clamp(35px,7vw,110px);align-items:center}
.look-photo{position:relative;cursor:pointer}
.look-photo img{width:100%;background:#111}
.tap{position:absolute;right:15px;bottom:15px;padding:9px 11px;background:rgba(0,0,0,.7);font-size:9px;letter-spacing:.16em}
.look-copy h2{font-weight:300;font-size:clamp(25px,3.4vw,52px);margin:8px 0 22px}
.look-copy p{font-size:12px;line-height:2;color:#777}
.products{margin-top:35px}
.product{border-top:1px solid #222;padding:15px 0;display:flex;justify-content:space-between;gap:20px;font-size:11px}
.product span{color:#aaa;white-space:nowrap}

.novelty{margin-top:30px}
.novelty a{display:grid;grid-template-columns:1.2fr .8fr;background:#111;min-height:330px}
.novelty-image{overflow:hidden}.novelty-image img{width:100%;height:100%;object-fit:cover}
.novelty-text{
  padding:55px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.novelty-text h2{font-size:clamp(14px,1.5vw,22px);font-weight:300;margin:10px 0 30px}
.novelty-text span{font-size:10px;letter-spacing:.2em;color:#aaa}

.reveal{opacity:0;transform:translateY(35px);transition:opacity 1s,transform 1s}
.reveal.show{opacity:1;transform:none}

.modal{position:fixed;inset:0;z-index:500;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(14px)}
.modal-panel{position:relative;width:min(1080px,92vw);height:min(88vh,900px);margin:6vh auto 0;background:#0b0b0b;display:grid;grid-template-columns:1.05fr .95fr;overflow:auto}
.modal-photo{background:#111}.modal-photo img{width:100%;height:100%;object-fit:cover}
.modal-info{padding:55px;display:flex;flex-direction:column;justify-content:center}
.modal-brand{font-size:10px;letter-spacing:.25em;color:#777}
.modal-info h2{font-size:clamp(25px,3vw,44px);font-weight:300;margin:10px 0 35px}
.modal-product{border-top:1px solid #252525;padding:16px 0;display:flex;justify-content:space-between;font-size:11px}
.modal-product span{color:#aaa}
.modal-close{position:absolute;z-index:3;right:24px;top:12px;border:0;background:none;color:#fff;font-size:32px;font-weight:200;cursor:pointer}

@media(max-width:700px){
 .hero-logo{width:88vw}
 .sam-section{height:560vh}
 .sam-track{gap:7vw;padding-left:5vw}
 .sam-track figure{width:88vw;height:52vh}
 .sam-progress{left:5vw;right:5vw;bottom:35px}
 .sam-count{right:5vw;bottom:52px}
 .looks{padding-top:90px}
 .intro{padding-bottom:70px}
 .look{padding:40px 0 85px}
 .look-grid{grid-template-columns:1fr;gap:35px}
 .novelty a{grid-template-columns:1fr}
.novelty-image{
  width:100%;
  height:auto;
  aspect-ratio:auto;
}

.novelty-image img{
  width:100%;
  height:auto;
  object-fit:contain;
}
 .novelty-text{padding:35px}
 .modal-panel{width:94vw;height:94vh;margin:3vh auto 0;grid-template-columns:1fr}
 .modal-photo{min-height:52vh}
 .modal-info{padding:28px}
 .modal-close{right:10px;top:5px}
 
 
 
  .product,
.product:link,
.product:visited,
.product:hover,
.product:active,
.product strong,
.product span{
  color:#b88cff !important;
  text-decoration:none !important;
}

 /* brand1だけSPで大きくする */
 .look:nth-child(1) .look-brand img{
   max-width:240px;
   max-height:65px;
 }
 
 .hero-video-sp{
  display:none;
}

  .hero-video-pc{
    display:none;
  }

  .hero-video-sp{
    display:block;
  }
  
  
  
}

.product,
.product:link,
.product:visited,
.product:hover,
.product:active,
.product strong,
.product span{
  color:#b88cff !important;
  text-decoration:none !important;
}

/* =========================
   INUI NATSUNE / LOOK INTRO
========================= */

.look-intro{
  height:100svh;
  min-height:650px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#050505;
}

.look-intro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(155,108,255,.09),transparent 30%),
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%);
  pointer-events:none;
}

.look-intro-inner{
  position:relative;
  width:min(90vw,1180px);
  text-align:center;
}

.look-intro-small{
  margin:0 0 28px;
  font-size:10px;
  letter-spacing:.38em;
  color:#777;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s ease .1s,transform 1s cubic-bezier(.16,1,.3,1) .1s;
}

.look-intro h2{
  margin:0;
  font-size:clamp(58px,11vw,160px);
  line-height:.85;
  font-weight:300;
  letter-spacing:-.075em;
  color:#f5f5f5;
  opacity:0;
  transform:scale(.92);
  filter:blur(14px);
  transition:opacity 1.25s ease,transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.25s ease;
}

.look-intro-line{
  width:0;
  height:1px;
  margin:35px auto 20px;
  background:linear-gradient(90deg,transparent,#9b6cff,transparent);
  transition:width 1.2s cubic-bezier(.16,1,.3,1) .35s;
}

.look-intro-acro{
  margin:0;
  font-size:clamp(12px,1.5vw,17px);
  letter-spacing:.3em;
  color:#9b6cff;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1s ease .45s,transform 1s cubic-bezier(.16,1,.3,1) .45s;
}

.look-intro.is-visible .look-intro-small,
.look-intro.is-visible .look-intro-acro{
  opacity:1;
  transform:none;
}

.look-intro.is-visible h2{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.look-intro.is-visible .look-intro-line{
  width:min(280px,45vw);
}

/* =========================
   LOOK MASK / FADE-IN
========================= */

.look{
  opacity:1;
  transform:none;
}

.look .look-brand{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
}

.look .look-photo{
  overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transform:translateY(25px);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1);
}

.look .look-photo img{
  transform:scale(1.06);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1);
}

.look .look-copy{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease .25s,transform .9s cubic-bezier(.16,1,.3,1) .25s;
}

.look.show .look-brand{
  opacity:1;
  transform:none;
}

.look.show .look-photo{
  clip-path:inset(0 0 0 0);
  transform:none;
}

.look.show .look-photo img{
  transform:scale(1);
}

.look.show .look-copy{
  opacity:1;
  transform:none;
}

/* =========================
   BRAND BETWEEN MARQUEE
========================= */

.look-divider{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:#050505;
}

.look-divider-track{
  width:max-content;
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation:brandMarquee 24s linear infinite;
}

.look-divider span{
  display:inline-flex;
  align-items:center;
  gap:28px;
  margin-right:28px;
  font-size:10px;
  letter-spacing:.28em;
  color:#666;
}

.look-divider strong{
  color:#b88cff;
  font-weight:400;
}

.look-divider .dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#b88cff;
  opacity:.7;
}

@keyframes brandMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* =========================
   ENDING
========================= */

.ending{
  min-height:90vh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin-top:40px;
  border-top:1px solid var(--line);
  background:#050505;
}

.ending::before{
  content:"INUI NATSUNE × ACRO TOKYO";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  white-space:nowrap;
  font-size:clamp(70px,15vw,220px);
  letter-spacing:-.08em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
}

.ending-inner{
  position:relative;
  text-align:center;
  z-index:1;
}

.ending-small{
  margin:0 0 28px;
  font-size:10px;
  letter-spacing:.4em;
  color:#666;
}

.ending h2{
  margin:0;
  font-size:clamp(50px,10vw,140px);
  line-height:.9;
  font-weight:300;
  letter-spacing:-.075em;
}

.ending-x{
  margin:24px 0;
  color:#b88cff;
  font-size:22px;
  font-weight:300;
}

.ending-acro{
  margin:0;
  color:#b88cff;
  font-size:clamp(16px,2vw,25px);
  letter-spacing:.28em;
}

/* Mobile */
@media(max-width:700px){
  .look-intro{
    min-height:560px;
    height:75svh;
  }

  .look-intro h2{
    font-size:clamp(50px,16vw,95px);
  }

  .look-intro-acro{
    font-size:10px;
    letter-spacing:.2em;
  }

  .look-divider{
    padding:26px 0;
  }

  .look-divider span{
    font-size:8px;
    gap:18px;
    margin-right:18px;
  }

  .ending{
    min-height:75vh;
  }

  .ending h2{
    font-size:clamp(48px,15vw,90px);
  }

  .ending-acro{
    font-size:12px;
  }
}


/* =========================
   BRAND / PRODUCT UI ENHANCEMENTS
========================= */
.brand-logo-link{
  display:flex;
  align-items:center;
  width:max-content;
  text-decoration:none;
  transition:opacity .3s ease;
}
.brand-logo-link:hover{opacity:.72}

.brand-logo-wrap{
  display:flex;
  align-items:center;
  gap:18px;
}
.brand-view-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.18em;
  color:#777;
  white-space:nowrap;
  text-decoration:none;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .35s ease,transform .35s ease,color .35s ease;
}
.brand-logo-wrap:hover .brand-view-link{
  opacity:1;
  transform:none;
  color:#b88cff;
}

.product{
  position:relative;
  overflow:hidden;
}
.product::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:#b88cff;
  transition:width .45s cubic-bezier(.16,1,.3,1);
}
.product:hover::after{width:100%}

.look-photo::before{
  content:attr(data-look-label);
  position:absolute;
  z-index:2;
  top:16px;
  left:16px;
  padding:7px 9px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:9px;
  letter-spacing:.18em;
  pointer-events:none;
  backdrop-filter:blur(6px);
}
.look-photo .tap{z-index:3}

@media(max-width:700px){
  .brand-view-link{
    opacity:1;
    transform:none;
    font-size:8px;
  }
  .brand-logo-wrap{
    gap:12px;
    flex-wrap:wrap;
  }
  .look-photo::before{top:10px;left:10px}
  .look-photo::after{right:10px;bottom:10px}
}

/* LOOK modal: image only + pinch zoom / pan */
.modal-panel{width:min(900px,92vw);height:min(92vh,900px);margin:4vh auto 0;display:block;overflow:hidden;background:#000}
.modal-photo{width:100%;height:100%;min-height:0;overflow:hidden;background:#000;touch-action:none;display:flex;align-items:center;justify-content:center}
.modal-photo img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;will-change:transform;cursor:grab}
.modal-photo img:active{cursor:grabbing}
.modal-info{display:none}
.modal-close{background:rgba(0,0,0,.55);border-radius:50%;width:40px;height:40px;line-height:34px}
@media(max-width:700px){.modal-panel{width:100vw;height:100svh;margin:0}.modal-photo img{max-width:100%;max-height:100%}}


/* SP image viewer: pinch zoom / pan */
@media(max-width:700px){
  .modal-photo{
    width:100%;
    height:100%;
    touch-action:none;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-user-select:none;
    user-select:none;
  }

  .modal-photo img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
  }
}

/* 10-image LOOK slider */
.look-slider{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.look-slider img{display:block;width:100%;height:100%;object-fit:contain;will-change:transform;user-select:none;-webkit-user-drag:none}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:64px;border:0;background:rgba(0,0,0,.42);color:#fff;font-size:42px;font-weight:200;line-height:1;cursor:pointer;backdrop-filter:blur(5px)}
.slider-arrow:hover{background:rgba(155,108,255,.72)}
.slider-prev{left:14px}.slider-next{right:14px}
.slider-counter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;display:flex;gap:7px;align-items:center;padding:7px 11px;background:rgba(0,0,0,.55);font-size:10px;letter-spacing:.16em;color:#888;pointer-events:none}
.slider-counter b{color:#fff;font-weight:400}.slider-counter i{font-style:normal;color:#444}.slider-counter span{color:#777}
.slider-dots{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);z-index:10;display:flex;gap:5px;max-width:90%;overflow:hidden}
.slider-dot{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:#555;opacity:.7;cursor:pointer}
.slider-dot.active{background:#b88cff;opacity:1;transform:scale(1.35)}
@media(max-width:700px){
  .slider-arrow{width:38px;height:54px;font-size:34px;background:rgba(0,0,0,.35)}
  .slider-prev{left:7px}.slider-next{right:7px}
  .slider-counter{bottom:14px;font-size:9px}
  .slider-dots{bottom:43px;gap:4px}
  .slider-dot{width:4px;height:4px}
}