:root{
  --font: "Helvetica Neue", ui-sans-serif, system-ui, -apple-system,
          "Noto Sans JP", "Hiragino Kaku Gothic ProN", Arial;

  /* JS updates */
  --header-h: 70px;

  /* PC arrows use these (set by JS) */
  --img-left: 0px;
  --img-right-gap: 0px;

  --gap: clamp(18px, 2.5vw, 48px);
}

/* -----------------------
   Reset
----------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; border:0; outline:0; }
button{ font-family:inherit; }

/* -----------------------
   Header (fixed follow)
----------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 0;
  box-shadow: none;
}
.header-inner{
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 3vw, 56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.header-logo{ height: 18px; width:auto; }
.season-text{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .85;
}

/* -----------------------
   Layout base
----------------------- */
.viewer{
  width: 100%;
  margin: 0;
  padding: calc(var(--header-h, 70px) + 24px) clamp(16px, 3vw, 56px) 24px;
}
.stage{
  display: grid;
  gap: var(--gap);
  align-items: stretch;
}

/* -----------------------
   Counter (fixed)
----------------------- */
.look-counter{
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .75;

  position: fixed;
  z-index: 260;
  left: clamp(16px, 3vw, 56px);
  top: calc(var(--header-h, 70px) + 18px);
  pointer-events: none;
  margin: 0;
}

/* -----------------------
   Frame + images
----------------------- */
.frame{
  position: relative;
  overflow: visible; /* allow arrows outside on PC */
}
.img-stack{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* prevent Chrome placeholder on first paint */
.frame:not(.is-ready) .img-stack{ visibility: hidden; }

.look-img{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: opacity;
  pointer-events: none;
}
.look-img.is-active{ opacity: 1; }

/* PC: normally left, portrait centered */
@media (min-width: 881px){
  .look-img{ object-position: left center; }
  .look-img.is-portrait{ object-position: center center; }
}

/* -----------------------
   Arrows
----------------------- */
.side-btn{
  background:none;
  border:none;
  cursor:pointer;
  line-height: 1;
  padding: 10px 14px;
  font-size: 40px;
  color:#000;
  opacity:.45;
  transition: opacity .2s ease;
  user-select:none;
}
.side-btn:hover{ opacity: 1; }

/* PC: arrow position follows visible image edges (vars set by JS) */
@media (min-width: 881px){
  .side-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index: 5;
  }
  .prev{ left:  calc(var(--img-left) - 56px); }
  .next{ right: calc(var(--img-right-gap) - 56px); }
}

/* Final page */
.final-credits{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.final-credits.is-active{ display:flex; }
.final-credits .inner{
  max-width: 520px;
  text-align: left;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .06em;
  opacity: .75;
}

/* -----------------------
   Credits (2-line stack)
----------------------- */
.gutter.right{
  min-width: 0;
  display:flex;
  justify-content: center;
  align-items: center;
}
.credit{
  width: min(420px, 100%);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .02em;
  word-break: break-word;
  text-align: left;
}
.credit-row{ margin-bottom: 18px; }
.credit-label{
  display:block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .55;
  white-space: nowrap;
}
.credit-text{ display:block; color:#000; font-size:14px; line-height:1.7; }
.credit-link{
  display:inline-block;   /* ← block をやめる */
  width: fit-content;     /* ← 念のため */
  max-width: 100%;        /* ← 折り返しは維持 */
  color:#000;
  text-decoration:none;
  border-bottom:none;
  transition: opacity .18s ease;
  overflow-wrap:anywhere;
  word-break: break-word;
  font-size:15.5px;
  line-height:1.7;
}
.credit-link:hover{ opacity:.6; }

/* Pager removed */
.pager{ display:none !important; }

/* =====================================================
   PC layout: 2-panel (image / credits)
   (kept identical to current backup; safe)
===================================================== */
@media (min-width: 881px){
  html, body{ height: 100vh; overflow: hidden; }

  .viewer{
    height: 100vh;
    padding-top: calc(var(--header-h, 70px) + 24px);
    padding-bottom: 24px;
  }

  .stage{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100vh - (var(--header-h, 70px) + 24px) - 24px);
  }

  .gutter.left{ grid-column: 1; grid-row: 1; }

  .frame{
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    min-height: 0;
  }
  .img-stack{ height: 100%; }

  .gutter.right{
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 100%;
    padding-left: 12px;
  }
}

/* =====================================================
   SP layout: fixed + swipe, full-bleed image, arrows fixed
   (merged from both SP blocks; no duplicates)
===================================================== */
@media (max-width: 880px){
  html, body{ height: 100%; overflow: hidden; }

  .viewer{
  height: 100vh;
padding-top: calc(var(--header-h, 70px) - 10px);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  overflow: hidden;
  }

  /* Image area fixed height + credits area fills remaining */
  .stage{
    display: grid;
grid-template-rows: clamp(46vh, 52vh, 58vh) 1fr;
    gap: 8px;
    height: calc(100vh - var(--header-h, 70px));
    min-height: 0;
  }

  /* counter visible but no layout box */
  .gutter.left{ display: contents; }

  /* -------- Image area -------- */
  .frame{
    height: 60vh; /* ← 画像サイズをここで固定 */
    max-height: 65vh;

    /* full-bleed without 100vw quirks */
    margin-left: -16px;
    margin-right: -16px;

    margin-top: -15px; /* seam killer */
  }

  .img-stack{
    width: 100%;
    height: 100%;
    padding-top: 0;
    overflow: hidden;
  }

  .look-img{
    width: 100%;
    height: 100%;
    max-width: none;
    object-position: center center;
  }

  /* -------- Arrows (fixed) -------- */
  .side-btn{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 240;
    font-size: 34px;
    padding: 10px 14px;
    opacity: .18;
  }
  .side-btn:active{ opacity: .55; }
  .prev{ left: 10px; }
  .next{ right: 10px; }

  /* -------- Credits panel -------- */
  .gutter.right{
    grid-row: 2;
    display: block; /* override base flex for reliable scrolling */
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;

    width: 100%;
    padding: 0;
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

.credit{
  width: 100%;
  padding: 6px 16px calc(60px + env(safe-area-inset-bottom));
}

  .credit-row{ margin-bottom: 14.5px; }
  .credit-label{ margin-bottom: 4px; font-size: 12px; }
  .credit-text,.credit-link{ font-size: 14px; line-height: 1.6; }

/* -----------------------------------------
   Chrome対策：アドレスバー出入りでvhがズレる問題を回避
   （対応ブラウザでは dvh を使う）
----------------------------------------- */
@supports (height: 100dvh){
  @media (max-width: 880px){

    .viewer{
      height: 100dvh; /* 100vh → 100dvh */
    }

    .stage{
      height: calc(100dvh - var(--header-h, 70px) - 16px);
      /* ↑あなたのSPブロックのstage高さ計算に合わせて調整。
         もし既に別の式なら、その 100vh 部分だけ 100dvh にする */
    }
  }
}

}

/* -----------------------------------------------------
   OPTIONAL (PC centering tweak) — enable if desired:
   - shifts visual balance slightly right without breaking height.
   Uncomment to use.
----------------------------------------------------- */
/*
@media (min-width: 881px){
  .viewer{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
  .stage{
    grid-template-columns: 0.95fr 1.05fr;
  }
  .look-img{ object-position: center center; }
}
*/


/* --------------------------------
   Lang switch (JP / EN)
-------------------------------- */
.lang-switch{
  display:flex;
  gap:10px;
  align-items:center;
}
.lang-btn{
  display:inline-block;
  text-decoration:none;
  border:0;
  background:transparent;
  padding:6px 6px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#000;
  opacity:.45;
  cursor:pointer;
}
.lang-btn.is-active{ opacity:.9; }
.lang-btn.is-active::after{
  content:"";
  display:block;
  height:1px;
  margin-top:4px;
  background:rgba(0,0,0,.55);
}

/* --------------------------------
   Season float (moved from header)
   - placed near navigation area
-------------------------------- */
.season-float{
  position: fixed;
  z-index: 245;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  pointer-events: none;
}

/* PC: above left arrow area */
@media (min-width: 881px){
  .season-float{
    left: clamp(16px, 3vw, 56px);
    top: calc(50% - 86px);
  }
}

/* SP: near top under header */
@media (max-width: 880px){
  .season-float{
    left: 16px;
    top: calc(var(--header-h, 70px) + 10px);
    opacity: .6;
  }
}

/* =========================================
   PC balance fix (keep image size)
   - center the image inside its frame
   - limit the overall stage width and center it
========================================= */
@media (min-width: 881px){

  /* ① 画像を左寄せ表示しない（これが一番効く） */
  .look-img{
    object-position: center center !important;
  }

  /* ② 全体を広げすぎない：塊（画像＋クレジット）を中央へ */
  .viewer{
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ③ 画像側を少し広く、クレジット側を少し狭くして“重心”を整える */
  .stage{
    grid-template-columns: 1.15fr 0.85fr;
  }

  /* ④ 右側クレジットを「カラム中央」ではなく、カラム左に寄せて距離を詰める */
  .gutter.right{
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* =========================================
   PC balance fix v2
   - keep image size (avoid shrinking)
   - add proper breathing room between image and credits
========================================= */
@media (min-width: 881px){

  /* ① 画像は中央基準（左寄りに見えない） */
  .look-img{
    object-position: center center !important;
  }

  /* ② 全体を縮めすぎない：上限だけ大きめに設定して“画像サイズ”を維持 */
  .viewer{
    max-width: 1760px;              /* ←ここで小さくなるのを防ぐ */
    margin-left: auto;
    margin-right: auto;
  }

  /* ③ カラムは「画像：クレジット = 可変：固定」にして安定させる */
  .stage{
    grid-template-columns: 1fr 420px; /* クレジットの幅を固定 */
    column-gap: clamp(84px, 8vw, 140px); /* 画像とクレジットの距離を上品に確保 */
  }

  /* ④ クレジットは右カラムの左側に揃えて読みやすく */
  .gutter.right{
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (min-width: 881px){
  .viewer{
    transform: translateX(20px);
  }
}

/* =========================================
   PC arrows: closer to content (viewer edge)
========================================= */
@media (min-width: 881px){

  /* viewerに「矢印用の余白」を持たせる */
  .viewer{
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
  }

  /* 矢印を画面端fixed → viewerの端に配置 */
  .side-btn{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 300 !important;
    opacity: .22;
  }
  .side-btn:hover{ opacity: .55; }

  .prev{ left: 8px !important; }
  .next{ right: 8px !important; }
}

.side-btn{
  opacity:.28;
}
.side-btn:hover{
  opacity:.65;
}

/* Hide counter */
.look-counter,
#lookCounter,
.counter{
  display:none !important;
}

/* Hide counter */
.look-counter,
#lookCounter,
.counter{
  display:none !important;
}

/* =========================================
   Final spacing (counter removed)
   - pull content up a bit
   - add bottom breathing room
========================================= */
@media (min-width: 881px){
  .viewer{
    padding-top: calc(var(--header-h, 70px) + 0px) !important;
    padding-bottom: 72px !important;
  }
}

@media (min-width: 881px){

  .viewer{
    position: relative;
  }

  .nav-prev,
  .nav-next{
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-prev{
    left: calc(50% - 1121px - 60px); 
  }

  .nav-next{
    right: calc(50% - 1121px - 60px);
  }

}

/* =========================================
   PC arrows: follow visible image edges (FINAL override)
   - fixes 14" MacBook overlap
========================================= */
@media (min-width: 881px){
  /* arrows must be positioned relative to the image frame */
  .frame{ position: relative; }

  /* kill the "fixed viewport" rule */
  .side-btn{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 300 !important;
  }

  /* place just outside the *visible* image edges (JS sets vars) */
  .prev{ left:  calc(var(--img-left, 0px) - 56px) !important; }
  .next{ right: calc(var(--img-right-gap, 0px) - 56px) !important; }
}

@media (min-width: 881px){
  .viewer{
    transform: translateX(32px);
  }
}


@media (min-width: 881px){
  .viewer{
    transform: translateX(80px);
  }
}

/* =========================================
   SP arrows: center on image area
========================================= */
@media (max-width: 880px){

  /* frame を基準にする */
  .frame{
    position: relative;
  }

  /* 画面固定ではなく、画像エリア中央に配置 */
  .side-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 240;
    font-size: 34px;
    padding: 10px 14px;
    opacity: .18;
  }

  .prev{
    left: 8px;
  }

  .next{
    right: 8px;
  }

}