:root{
  /* light base */
  --bg:#ffffff;
  --fg:#0b0b0f;
  --dim:rgba(11,11,15,.62);
  --line:rgba(11,11,15,.18);
  --glass:rgba(11,11,15,.04);
  --shadow: 0 26px 80px rgba(0,0,0,.18);
  --radius:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;}
html,body{height:100%; width:100%;}
html{
  /* iOS Safari では body に overflow:hidden を置くと position:sticky が壊れる。
     overflow-clip-margin を使った clip で代替する。 */
  overflow-x: clip;
}
body{
  margin:0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--fg);
  background: var(--bg);
  /* overflow-x:hidden はここに置かない（iOS sticky破壊バグ回避） */
}

/* Fixed background layer to avoid "seams" while sticky sections swap */
body::before{
  content:"";
  position:fixed;
  top:0; bottom:0; left:0; right:0;
  z-index:-3;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(900px 520px at 20% 80%, rgba(0,0,0,.035), transparent 60%),
    var(--bg);
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.noise{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.25;
}
.vignette{
  position:fixed; inset:-10vh -10vw;
  pointer-events:none; z-index:1;
  background: radial-gradient(closest-side at 50% 35%, transparent 60%, rgba(0,0,0,.10) 100%);
}

.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
@supports (height: 1svh){
  .hero{min-height:100svh;}
}
.hero__bg{position:absolute; inset:0; z-index:0;}

/* hero background video (PC/SP switch) */
.hero__bgVideo{
  position:absolute; inset:-3vh -3vw;
  width:106%; height:106%;
  object-fit:cover;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
  transform: scale(1.04);
  opacity:.30;
}
.hero__bgVideo--sp{display:none;}

@media (max-width: 768px){
  .hero__bgVideo--pc{display:none;}
  .hero__bgVideo--sp{display:block;}
}

.hero__inner{position:relative; z-index:3; width:min(980px, calc(100% - 48px));}
.hero__tag{
  display:inline-flex; gap:10px; align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  padding:10px 14px;
  border-radius:999px;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}
.hero__title{margin:18px 0 10px;}
.hero__title img{
  width:min(720px, 76vw);
  height:auto;
  filter: drop-shadow(0 16px 46px rgba(0,0,0,.16));
  margin:auto;
}
.hero__lead{margin:0; color:var(--dim); font-size:16px; letter-spacing:.02em;}
.hero__cta{margin-top:20px; display:flex; gap:12px; align-items:center;}

.btn{
  border:1px solid var(--line);
  background:rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  padding:12px 16px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{transform: translateY(-1px); background:rgba(0,0,0,.12);}
.btn--ghost{background:transparent;}

.scrollHint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:grid; gap:8px; place-items:center; opacity:.9;}
.scrollHint span{font-size:11px; letter-spacing:.22em; color:rgba(11,11,15,.75);}
.scrollHint i{width:1px; height:36px; background:linear-gradient(to bottom, rgba(11,11,15,.55), transparent); animation:hint 1.4s var(--ease) infinite;}
@keyframes hint{0%{transform:translateY(-6px); opacity:.4}60%{opacity:1}100%{transform:translateY(8px); opacity:0}}

.intro{padding:72px 0 40px;}
.intro__inner{width:min(980px, calc(100% - 48px)); margin:0 auto;}
.intro__copy{font-size:clamp(18px, 2.2vw, 28px); line-height:1.65; letter-spacing:.01em;}
.intro__copy .dim{color:var(--dim);}

.modelMarker{padding:18px 0 8px;}
.modelMarker__inner{width:min(980px, calc(100% - 48px)); margin:0 auto; display:flex; gap:16px; align-items:center;}
.modelMarker__label{font-size:12px; letter-spacing:.22em; opacity:.85;}
.modelMarker__line{flex:1; height:1px; background:linear-gradient(to right, rgba(11,11,15,.22), transparent);} 
.modelMarker__sub{font-size:12px; color:var(--dim);}

.chapter{
  position:relative;
  height:220vh; /* scroll length */
  /* remove hard divider (can look like a "step") */
  border-top:none;
}
.chapter__sticky{
  isolation: isolate;
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 16px 0 18px;
}
.chapter__hud{width:min(1180px, calc(100% - 48px)); margin:0 auto; display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.18em; color:rgba(11,11,15,.70);} 
.hud__center span{font-weight:600; color:rgba(11,11,15,.92);} 

.stage{
  width:min(1180px, calc(100% - 48px));
  margin:14px auto 0;
  position:relative;
  height: min(84vh, 760px);
  /* remove the "framed collage" feel */
  border:none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 50% 15%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(700px 480px at 40% 85%, rgba(0,0,0,.035), transparent 62%);
  pointer-events:none;
}

/* removed blurred glow with negative inset: it can cause rendering seams and mobile width jitter */
.stage__bgWord{
  position:absolute; left:18px; bottom:10px;
  font-size: clamp(28px, 6vw, 78px);
  font-weight:600;
  letter-spacing:-.04em;
  color: rgba(0,0,0,.12);
  pointer-events:none;
}

.card{
  position:absolute;
  top:50%;
  left:50%;
  /* one-by-one scene: keep each photo readable */
  width:min(62vw, 530px);
  aspect-ratio: 3/4;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(11,11,15,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  transform:
    translate3d(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px)), 0)
    rotate(var(--r,0deg))
    scale(var(--s,1));
  opacity: var(--o, 0);
  filter: grayscale(.05) contrast(1.05);
  will-change: transform, opacity, clip-path;
  clip-path: inset(var(--clipT, 40%) var(--clipR, 40%) var(--clipB, 40%) var(--clipL, 40%) round 18px);
}
.card img{width:100%; height:100%; object-fit:cover; transform: scale(var(--imgScale, 1.12)); filter: brightness(.98) contrast(1.05);} 
.card--main{z-index:4;}

.stage__deco{position:absolute; inset:0; pointer-events:none; z-index:6;}
.deco{
  position:absolute;
  width: clamp(18px, 2.4vw, 34px);
  height: clamp(18px, 2.4vw, 34px);
  opacity:.0;
  transform: translate3d(var(--dx,0px), var(--dy,0px), 0) rotate(var(--dr,0deg)) scale(var(--ds,1));
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}


.chapter__caption{
position:absolute;
bottom:24px;
left:50%;
transform:translateX(-50%) translateY(var(--capY,0));
width:min(1180px, calc(100% - 48px));
display:flex;
gap:12px;
align-items:flex-start;
color:rgba(11,11,15,.78);
opacity:var(--capO,0);
transition:opacity .5s ease, transform .5s ease;
}
 
.chapter__caption p{margin:0; max-width:56ch; line-height:1.6; font-size:13px;}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  font-size:11px;
  letter-spacing:.12em;
  white-space:nowrap;
}

.midVideo{padding:70px 0 70px;}
.midVideo__inner{width:min(1180px, calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:center;}
.midVideo__frame{position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); box-shadow: var(--shadow);} 
.midVideo__overlay{position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 50% 40%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 40%, rgba(0,0,0,.08));}
.midVideo__video{width:100%; height:100%; display:block; aspect-ratio: 16/9; object-fit:cover; filter: grayscale(.25) contrast(1.06) brightness(.9);} 

.midVideo__text p{margin:10px 0 0; font-size:18px; color:rgba(11,11,15,.80);} 

/* =============================================
   PAIR SHOT SECTION
   演出: スクロール連動フィルムリール横流れ
         + 各カードが下からフェードアップ
============================================= */
.pairShot {
  padding-top: 90px;
  padding-bottom: 0;
}

/* ヘッダー */
.pairShot__header {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.pairShot__title {
  margin: 0;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 400;
  letter-spacing: .18em;
  color: rgba(11,11,15,.72);
}

/* sticky ラッパー: ヘッダーごとビューポートに固定 */
.pairShot__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 8px;
}

/* スクロール余白ブロック: JSが必ずsetするので初期値0 */
.pairShot__spacer {
  height: 0;
}

/* 横に並ぶカードリール */
.pairShot__reel {
  display: flex;
  align-items: stretch; /* 全カードを同じ高さに揃える */
  gap: 20px;
  padding: 12px 40px 20px;
  will-change: transform;
  transform: translate3d(var(--tx, 0px), 0, 0);
  width: max-content;
}

/* 縦長カード */
.pairCard {
  margin: 0;
  flex-shrink: 0;
  width: clamp(200px, 28vw, 360px);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(11,11,15,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);

  /* 登場アニメーション用 */
  opacity: 0;
  transform: translateY(36px) scale(.97);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
}

/* 横長カード: 幅だけ広く、高さは縦長に合わせてstretchで自動決定 */
.pairCard--wide {
  width: clamp(280px, 42vw, 540px);
  /* aspect-ratio は持たせない → 縦長カードと同じ高さに伸びる */
}

.pairCard.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* staggered delay */
.pairCard[data-pair-card="0"] { transition-delay: .00s; }
.pairCard[data-pair-card="1"] { transition-delay: .08s; }
.pairCard[data-pair-card="2"] { transition-delay: .16s; }
.pairCard[data-pair-card="3"] { transition-delay: .24s; }
.pairCard[data-pair-card="4"] { transition-delay: .32s; }
.pairCard[data-pair-card="5"] { transition-delay: .40s; }

.pairCard__inner {
  width: 100%;
  height: 100%;        /* 親カードの高さいっぱいに伸びる */
  aspect-ratio: 3/4;   /* 縦長カードの基準比率（横長はheight:100%が勝つ） */
  overflow: hidden;
}

.pairCard--wide .pairCard__inner {
  aspect-ratio: unset; /* 高さは親(stretch)に任せる */
}

.pairCard__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.06) contrast(1.04) brightness(.97);
  /* ホバー時だけ微ズーム（タッチ不要） */
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) {
  .pairCard:hover .pairCard__inner img {
    transform: scale(1.04);
  }
  .pairCard:hover {
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
  }
}

/* フィルム番号 */
.pairCard__num {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums;
}

/* スクロール進捗バー */
.pairShot__progress {
  height: 1px;
  background: rgba(11,11,15,.10);
  margin: 18px 40px 0;
  border-radius: 999px;
  overflow: hidden;
}

.pairShot__progressBar {
  height: 100%;
  width: 0%;
  background: rgba(11,11,15,.40);
  border-radius: 999px;
  transition: width .12s linear;
}

/* モバイル */
@media (max-width: 680px) {
  .pairShot__reel {
    gap: 14px;
    padding: 8px 20px 16px;
  }
  .pairCard {
    width: clamp(170px, 58vw, 280px);
  }
  .pairCard--wide {
    width: clamp(240px, 80vw, 420px);
  }
  .pairShot__progress {
    margin: 14px 20px 0;
  }
}

/* ハートパーティクル */
.pairHeart__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.pairHeart {
  position: absolute;
  width:  var(--sz, 1rem);
  height: var(--sz, 1rem);
  opacity: 0;
  animation: pairHeartFloat 1.4s cubic-bezier(.2,.8,.2,1) forwards;
  transform-origin: center bottom;
}
@keyframes pairHeartFloat {
  0%   { opacity: 0;   transform: translateY(0)     rotate(var(--rot,0deg)) scale(.6); }
  15%  { opacity: .9; }
  80%  { opacity: .55; }
  100% { opacity: 0;   transform: translateY(-90px) rotate(calc(var(--rot,0deg) * 1.6)) scale(1.1); }
}

.footer{padding:60px 0 70px; text-align:center; color:rgba(11,11,15,.70);} 
.footer__top{display:inline-flex; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);} 
.footer__note{margin-top:16px; font-size:12px; color:rgba(11,11,15,.55);} 

/* Event section (match current light + mono vibe) */
.event{padding:84px 0 40px;}
.event__inner{width:min(1180px, calc(100% - 48px)); margin:0 auto;}
.event__head{text-align:center; margin-bottom:22px;}
.event__kicker{font-size:12px; letter-spacing:.28em; opacity:.7;}
.event__title{margin:10px 0 10px; font-size: clamp(22px, 3.2vw, 34px); letter-spacing:.08em;}
.event__lead{margin:0; color:var(--dim); font-size:14px; line-height:1.7;}
.event__grid{margin-top:26px; display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;}

.eventCard{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 46px rgba(0,0,0,.10);
  padding:18px 18px 16px;
}
.eventCard__label{font-size:11px; letter-spacing:.18em; color:rgba(11,11,15,.62);}
.eventCard__main{margin-top:10px;}
.eventCard__big{font-size:16px; letter-spacing:.02em;}
.eventCard__sub{margin-top:6px; font-size:12px; color:rgba(11,11,15,.55); line-height:1.6;}

.event__note{margin-top:14px; display:flex; gap:10px; align-items:center; justify-content:center; color:rgba(11,11,15,.55); font-size:12px;}
.event__dot{width:6px; height:6px; border-radius:999px; background:rgba(11,11,15,.28); display:inline-block;}

@media (max-width: 860px){
  .event__grid{grid-template-columns:1fr;}
}

/* Mobile stability + full-bleed layout */
@media (max-width: 680px){

  .hero, .chapter, .intro{width:100%;}
  .hero__inner,
  .intro__inner,
  .modelMarker__inner,
  .chapter__hud,
  .stage,
  .chapter__caption,
  .midVideo__inner{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }

  .chapter__sticky{padding-left:0; padding-right:0;}

  .stage{
    height: min(78vh, 620px);
  }

  .midVideo__inner{grid-template-columns: 1fr;}
  .midVideo__text p{font-size:16px;}

  /* prevent iOS rubber-band from causing horizontal jitter */
  html, body{overscroll-behavior-x:none;}

  /* iOSでposition:stickyを確実に動作させる */
  .chapter__sticky{
    -webkit-overflow-scrolling: auto;
  }
}

.cursorFX{position:fixed; inset:0; pointer-events:none; z-index:50;}
.spark{
  position:absolute;
  width:18px; height:18px;
  transform: translate(-50%, -50%) scale(.8) rotate(0deg);
  opacity:0;
}

@media (max-width: 860px){
  .midVideo__inner{grid-template-columns:1fr;}
  .stage{height:min(78vh, 720px);} 
  .card{width:min(88vw, 520px);} 
}

@media (prefers-reduced-motion: reduce){
  .scrollHint i{animation:none;}
}