/* =========================
  Reset / Base
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior: smooth;
}
html, body{
  width:100%;
  overflow-x:hidden;
  font-family:'Noto Sans JP','游ゴシック','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
  font-size:14px;
  line-height:1.7;
  background:#000;
  color:#fff;
}
body{ overflow-x: clip; }

/* =========================
  Header
========================= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 2000;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:3rem;
}

.header-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:20px;
}

.header-nav a{
  position: relative;
  color:#fff;
  text-decoration:none;
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  font-size:2.4rem;
  line-height:3rem;
  letter-spacing:.2em;
  padding:4px 0;
  display:inline-block;
}

.header-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:3px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after{
  transform:scaleX(1);
}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
  z-index: 2300; /* menuより上 */
}
.hamburger span{
  position:absolute;
  left:2px;
  right:2px;
  height:4px;
  background:#fff;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top:10px; }
.hamburger span:nth-child(2){ top:26px; }

body.menu-open .hamburger span:nth-child(1){ top:21px; transform:rotate(225deg); }
body.menu-open .hamburger span:nth-child(2){ top:21px; transform:rotate(-225deg); }

/* SP menu (full cover, bottom -> top) */
.sp-menu{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(30px);

  display:grid;
  place-content:center;
  gap:60px;

  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);

  z-index: 2200;
  pointer-events:none;
}
body.menu-open .sp-menu{
  transform: translateY(0);
  pointer-events:auto;
}
.sp-menu a{
  color:#fff;
  text-decoration:none;
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing:.12em;
  text-align:center;
}
.sp-menu a:active{ opacity:.7; }

@media (max-width: 900px){
  .header-nav{ display:none; }
  .hamburger{ display:block; }
}

/* =========================
  MV Stage (sticky pin + darken)
========================= */
/* ステージの高さが「暗転させながら留める距離」 */
.mv-stage{
  --lock-distance: 1400px;  /* JSが最終値を入れる */
  height: calc(100dvh + var(--lock-distance));
}

/* MVはstickyでステージ終端まで貼り付く */
.mv-video{
  position: sticky;
  top:0;
  height: 100dvh;
  overflow: clip;
  background:#000;
}

/* Movie layer */
.mv-media{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.mv-media iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  border:0;
  pointer-events:none;
  width: max(100vw, calc(100vh * (16 / 9)));
  height: max(100vh, calc(100vw * (9 / 16)));
}
@media (max-width: 768px){
  .mv-media iframe{
    width: max(100vw, calc(100vh * (9 / 16)));
    height: max(100vh, calc(100vw * (16 / 9)));
  }
}

/* Darken overlay (JS drives --mv-dark 0..DARK_MAX) */
.mv-video::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background: rgba(0,0,0,var(--mv-dark,0));
}

/* Logo */
.mv-logo{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: none;
}
.mv-logo img{
  width: min(60vw, 320px);
  height:auto;
  filter: brightness(0) invert(1);
}

/* Scroll hint（常に表示。消す制御はしない） */
.scroll-hint{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 12;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  opacity: 1;
  pointer-events:none;
  color:#fff;
}
.scroll-hint__text{
  font-family:"Share Tech", sans-serif;
  letter-spacing:.2em;
}
.scroll-hint__arrow{
  width:18px;
  height:28px;
  position:relative;
  animation: hintFloat 1.4s ease-in-out infinite;
}
.scroll-hint__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:22px;
  background: rgba(255,255,255,.9);
  transform: translateX(-50%);
}
.scroll-hint__arrow::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:8px;
  height:8px;
  border-right:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.9);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes hintFloat{
  0%{ transform: translateY(0); opacity:.85; }
  60%{ transform: translateY(8px); opacity:1; }
  100%{ transform: translateY(0); opacity:.85; }
}

/* =========================
  Content (MVにかぶせて競り上げる)
========================= */
.content{
  position: relative;
  z-index: 30;
  margin-top: -104dvh;
  /*padding: calc(100dvh + 20px) 0 200px;*/
  background: #000;
}

/* セクション共通（ITEMS / STOCKIST 等） */
.panel{
  width: min(1280px, calc(100% - 40px));
  margin: 10rem auto;
  padding: 2rem;
  display: block;
}
.panel h2{
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing:.16em;
  text-align:center;
  margin-bottom: 18px;
}
.panel p{
  font-size: 1rem;
  line-height: 1.9;
  opacity: .92;
}

/* =========================
  Parallax (left/right + float-up)
========================= */
.parallax-item{
  opacity: 0;
  transform: translate3d(var(--px, 0px), calc(var(--py, 24px)), 0);
  transition: opacity 600ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.parallax-item.is-inview{
  opacity: 1;
}

/* =========================
  ABOUT pinned split story (100% width)
========================= */
.about-story{ position: relative; }

/* スクロール尺（高さはJSで上書き） */
.story-stage{
  position: relative;
  height: 240vh; /* 保険 */
}

/* ピン留め領域 */
.story-sticky{
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

/* 左右パネル（合計100%） */
.story-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
}

.story-panel{
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* Media */
.story-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(14%);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 350ms ease;
  will-change: transform, opacity;
}
.story-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Copy */
.story-copy{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(22px, 4vw, 64px);
  color: #fff;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.story-copy > *{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
}
.story-copy h2{
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  letter-spacing:.16em;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  margin: 0;
}
.story-copy p{
  margin: 0;
  max-width: 62ch;
  line-height: 1.9;
  opacity: .92;
}

.story-copy p.eng{
  font-family:"Share Tech", sans-serif;
  font-size:1.2rem;
  margin: 0;
  max-width: 62ch;
  line-height: 1.9;
  opacity: .92;
}

/* Stepで「画像だけ」「テキストだけ」を制御 */
.story-panel.show-image .story-media{
  opacity: 1;
  transform: translateY(0);
}
.story-panel.show-text .story-copy{
  opacity: 1;
  transform: translateY(0);
}
.story-panel.show-text .story-copy > *{
  opacity: 1;
  transform: translateY(0);
}

/* SP：縦積み */
@media (max-width: 860px){
  .story-split{ grid-template-columns: 1fr; }
  .story-panel{ height: 50%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-hint__arrow{ animation:none; }
  .parallax-item{ transition:none; transform:none; opacity:1; }
  .story-media, .story-copy, .story-copy > *{
    transition:none;
    transform:none;
    opacity:1;
  }
}

/* =========================
  ABOUT story: SPは縦積み（画像→テキスト）
========================= */
@media (max-width: 768px){
  .story-split{
    display: flex;
    flex-direction: column;
    gap: 0px;
  }

  .story-panel{
    width: 100%;
    min-height: auto;
  }

  /* 画像はSPでは高さを確保（見栄え） */
  .story-media{
    height: min(52vh, 520px);
  }
  .story-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* テキストは読みやすい余白に */
  .story-copy{
    padding: 18px 16px 20px;
  }
}

/* =========================
  Slider (About under)
========================= */
.slider-wrap{
  width: 100%;
  margin: 0;
  padding: 10rem 0;
  background: #000;
}

.slider{
  position: relative;
  width: 100%;
}

.slider-viewport{
  width: 100%;
  overflow: hidden;
}

.slider-track{
  display: flex;
  gap: var(--gap, 14px);
  will-change: transform;
  transform: translate3d(var(--tx, 0px), 0, 0);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}

/* PC: 6枚 / SP: 3枚 */
.slide{
  flex: 0 0 calc((100% - (var(--visible, 3) - 1) * var(--gap, 14px)) / var(--visible, 3));
  overflow: hidden;
  display: block;
}
.slider-track.is-marquee{
  display: flex;
  gap: var(--gap, 14px);
  will-change: transform;
  transform: translate3d(var(--tx, 0px), 0, 0);
}
.slide img{
  width: 100%;
  object-fit: cover;
  display: block;
}

/* SP: 3枚 */
@media (max-width: 768px){
  .slider-track{ --visible: 1; }
  .slide img{ height: auto; }
}

/* =========================
  ITEMS (PC:4 / SP:2) + link card
========================= */
.items-section{
  width: 100%;
  padding: 90px 20px 110px;
  background: #000;
}

.items-head{
  width: min(1280px, 100%);
  margin: 0 auto 28px;
  text-align: center;
}
.items-head h2{
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing:.16em;
  margin-bottom: 10px;
}
.items-head p{ opacity:.85; }

/* Grid */
.items-grid{
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width:768px){
  .items-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
}

/* Link Card */
.item-card{
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  padding: 4px 4px 6px;
  opacity: 0;
  transform: translate3d(0,24px,0);
  transition:
    opacity 520ms ease,
    transform 820ms cubic-bezier(.2,.8,.2,1),
    box-shadow 260ms ease,
    border-color 260ms ease;
  will-change: transform;
}

/* 表示 */
.item-card.is-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
}


.item-card:hover{
  opacity: .6;
  text-decoration: underline;
}
.item-card:focus-visible{ outline: none; }

.item-media{
  overflow: hidden;
  border-radius: 8px;
}
.item-media img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* Text */
.item-title{
  margin: 12px 0;
  text-align: center;
  font-family:"Share Tech", sans-serif;
  letter-spacing:.1em;
  font-size:1.1rem;
  line-height: 1.1rem;
}
.item-desc{
  opacity:.82;
  line-height:1.8;
  font-size:.95rem;
}

/* =========================
  STOCKIST (PC:4 / SP:1) + scroll reveal
========================= */
.stockist-section{
  width: 100%;
  padding: 90px 20px 120px;
  background: #000;
}

.stockist-head{
  width: min(1100px, 100%);
  margin: 0 auto 28px;
  text-align: center;
}
.stockist-head h2{
  font-family:"Share Tech", sans-serif;
  font-weight:800;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing:.16em;
  margin-bottom: 10px;
}
.stockist-head p{ opacity:.85; letter-spacing:.04em; }

/* Grid: PC 4列 / SP 1列 */
.stockist-grid{
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

@media (max-width: 768px){
  .stockist-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Card */
.shop-card{
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px 16px 18px;

  /* reveal initial */
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 520ms ease,
    transform 820ms cubic-bezier(.2,.8,.2,1);
}

.shop-card.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.shop-name{
  font-family:"Share Tech", sans-serif;
  letter-spacing:.14em;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.shop-meta{
  opacity: .88;
  line-height: 1.85;
  letter-spacing: .02em;
  font-size: .95rem;
}

.shop-address{
  margin-bottom: 0px;
}

.shop-tel{
  letter-spacing: .08em;
  color: #fff;
}
.shop-tel a,
.shop-tel a:link,
.shop-tel a:visited,
.shop-tel a:hover,
.shop-tel a:active{
  color: #fff !important;
  text-decoration: none;
}

/* =========================
  Footer / Copyright
========================= */
.site-footer{
  position: absolute;
  width: 100%;
  padding: 40px 20px 60px;
  background: #000;
  text-align: center;
}

.copyright{
  font-family: "Share Tech", sans-serif;
  font-size: 0.85rem;
  letter-spacing: .12em;
  opacity: .45;
}