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

  --header-h: 70px; /* JSが更新 */
  --gap: clamp(18px, 2.5vw, 48px);

  /* JSが frame にセット（矢印位置用） */
  --img-left: 0px;
  --img-right-gap: 0px;
}

/* -----------------------
   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; }
button{ font-family:inherit; }

/* -----------------------
   Header
----------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.header-inner{
  width: 100%;
  max-width: none;
  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;
}


/* --------------------------------
   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-text{ display:none !important; }
.look-counter{ display:none !important; }

/* -----------------------
   Layout base
----------------------- */
.viewer{
  width: 100%;
  margin: 0;
  padding: 24px clamp(16px, 3vw, 56px);
}

/* stage は「PC=2パネル / SP=1カラム」で切替 */
.stage{
  display: grid;
  gap: var(--gap);
  align-items: stretch;
}

/* -----------------------
   Left panel: counter + frame
----------------------- */
.gutter.left{
  position: relative;
  min-width: 0;
}
.look-counter{
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .75;
}

/* frame */
.frame{
  position: relative;
  overflow: visible;     /* 矢印を外に出すため */
}

/* 画像スタック（クロスフェード用） */
.img-stack{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;      /* 右パネルへの侵入を防ぐ */
}

/* 画像（PCは absolute / SPは後で relative に上書き） */
.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; }

/* 矢印 */
.side-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index: 5;
  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; }

/* 画像左右余白に合わせる（JSが更新） */
.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;
}

/* -----------------------
   Right panel: credits
----------------------- */
.gutter.right{
  min-width: 0;
  display:flex;
  justify-content: center;   /* 縦中央 */
  align-items: flex-start;   /* 左揃え */
}
.credit{
  width: min(420px, 100%);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .02em;
  white-space: normal;
  word-break: break-word;
  text-align: left;
}

/* credit rows */
.credit-row{
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 8px;
}
.credit-label{
  opacity: .55;
  letter-spacing: .04em;
  white-space: nowrap;
}
.credit-text{ color:#000; }
.credit-link{
  display:inline-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:14px;
  line-height:1.7;
}
.credit-link:hover{ opacity:.6; }

/* =====================================================
   PC: 2-panel (image 50% / credit 50%)
===================================================== */
@media (min-width: 881px){
  html, body{
    height: 100vh;
    overflow: hidden;
  }

  .viewer{
    height: calc(100vh - var(--header-h, 70px));
padding-left: clamp(72px, 13vw, 260px);
  }

  .stage{
    grid-template-columns: 1fr 1fr;  /* 左=画像 / 右=クレジット */
    height: 100%;
    position: relative;
  }

   .stage{ height: 100%; }

  /* 左パネル：上にカウンター、下に画像（縦並び） */
  .gutter.left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    grid-column: 1;
        position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: auto;
    pointer-events: none;
  }

  .frame{
    flex: 1;
    min-height: 0;
    grid-column: 1;
    height: 100%;
  }

  .img-stack{
    height: 100%;
  }

  /* 画像パネル内では「左寄せ」にする */
  .look-img{
    inset: 0;                      /* 余計な top/bottom/left/right を消す */
    margin: auto;                  /* フレーム内で中央基準に */
    width: 100%;
    height: 100%;
    object-fit: contain;
   object-position: center center;
  }

  .gutter.right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 縦中央 */
    align-items: center;       /* ← 横中央（ここを変更） */
    padding-left: 12px; 
  }

    .credit{
    text-align: left;
  }


}

/* =====================================================
   SP: 1 column (image -> arrows -> credit)
===================================================== */
@media (max-width: 880px){
  html, body{ height:auto; overflow:auto; }

  .viewer{ padding: 18px 16px 40px; }

  .stage{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* SPは上にカウンター、次に画像 */
  .gutter.left{
    display:block;
  }


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

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

  .side-btn:active{
    opacity: .55;
  }

  /* 少し内側に寄せる */
  .prev{
    left: calc(10px + env(safe-area-inset-left));
  }

  .next{
    right: calc(10px + env(safe-area-inset-right));
  }


  .img-stack{
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
  }

  /* SPは absolute を解除して通常フローで表示 */
  .look-img{
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-height: 88vh;
    opacity: 1;
  }
  .look-img:not(.is-active){ display:none; }



  /* クレジットは画像の下 */
  .gutter.right{
    justify-content: flex-start;
  }

  /* ラベルを少し細く */
  .credit-row{
    grid-template-columns: 56px 1fr;
    column-gap: 10px;
  }
}

/* PC：画像ごとに中央/左寄せを切り替える（チラつき防止） */
@media (min-width: 881px){
  /* 通常（横長）は左寄せ */
  .look-img{
    object-position: left center;
  }

  /* 縦長だけ中央 */
  .look-img.is-portrait{
    object-position: center center;
  }
}

/* =========================================
   FIX: PCで縦長だけ中央（チラつき防止版）
   ※必ず style.css の一番最後に置く
========================================= */
@media (min-width: 881px){
  /* 基本は左寄せ */
  .look-img{
    object-position: left center;
  }

  /* 縦長だけ中央 */
  .look-img.is-portrait{
    object-position: center center;
  }
}



/* =========================================
   SP: 画面を固定（bodyをスクロールさせない）
   ※クレジットが長い場合は右パネルだけスクロール
========================================= */
@media (max-width: 880px){

  /* ページ全体を固定 */
  html, body{
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none; /* iOS/Androidの引っ張りバウンス抑制 */
  }

  /* 表示領域をビューポートに固定 */
  .viewer{
    height: calc(100vh - var(--header-h, 70px));
    overflow: hidden;
    padding: 18px 16px 18px;
  }

  .stage{
    height: 100%;
  }

  /* 画像＋クレジットを縦に積む場合：クレジットだけスクロールできるように */
  .gutter.right{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 24px; /* 最下部が詰まらないように */
  }
}

/* =========================================
   SP: pager indicator (bar / no text)
========================================= */
.pager{ display:none; }

@media (max-width: 880px){
  .pager{
    display:block;
    position: relative;
    height: 10px;
    margin-top: 12px;
    opacity: .55;
    pointer-events: none;
    user-select: none;
  }

  .pager-track{
    position:absolute;
    left: 50%;
    top: 50%;
    width: 96px;          /* ← 長さ（好みで 84〜120px） */
    height: 1px;
    background:#000;
    opacity: .25;
    transform: translate(-50%, -50%);
    border-radius: 999px;
  }

  .pager-fill{
    position:absolute;
    left: 50%;
    top: 50%;
    width: 96px;          /* trackと同じ */
    height: 1px;
    background:#000;
    opacity: .65;
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: left center;
    border-radius: 999px;
    transition: transform .25s ease;
  }

  @media (prefers-reduced-motion: reduce){
    .pager-fill{ transition: none; }
  }
}



/* SP：最終ページでも swipe の“面”を確保する */
@media (max-width: 880px){
  .frame.is-final #imgStack{
    min-height: 60vh;   /* タッチできる高さを残す */
  }
}


/* =========================================
   SP credit layout refinement
   - 重なり防止
   - 色分け（opacity）を活かす
========================================= */
@media (max-width: 880px){

  .credit-row{
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    column-gap: 12px;
    align-items: start;
  }

  .credit-label{
    white-space: normal;      /* ← 折り返しを許可 */
    line-height: 1.25;
    opacity: .55;             /* 既存トーンを維持 */
  }

  .credit-text,
  .credit-link{
    min-width: 0;             /* 折り返し安定 */
    line-height: 1.6;
    color: #000;
  }
}

/* =========================================
   SP: credit layout (2-line stack)
   - 1行目：カテゴリ
   - 2行目：商品名
========================================= */
@media (max-width: 880px){

  .credit-row{
    display: block;        /* grid をやめる */
    margin-bottom: 14px;  /* 行間（好みで 12〜16px） */
  }

  .credit-label{
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: .08em;
    opacity: .55;         /* カテゴリは薄く */
    white-space: nowrap;
  }

  .credit-text,
  .credit-link{
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* =========================================
   PC: credit layout (2-line stack)
   - SPと同じ縦積み構造に統一
========================================= */
@media (min-width: 881px){

  .credit-row{
    display: block;        /* gridを解除 */
    margin-bottom: 18px;  /* PCは少しゆとり */
  }

  .credit-label{
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: .08em;
    opacity: .55;
    white-space: nowrap;
  }

  .credit-text,
  .credit-link{
    display: block;
    font-size: 14px;
    line-height: 1.7;
    color: #000;
  }
}



/* =========================================
   Page counter: fixed at top-left (no layout shift)
========================================= */
.look-counter{
  position: fixed;
  z-index: 50;
  left: clamp(16px, 3vw, 56px);
  top: calc(var(--header-h, 70px) + 18px);
  pointer-events: none;
  margin: 0;              /* 念のため */
}


/* =========================================
   Prevent black placeholder on first paint
========================================= */



/* 念のため（枠が出る環境対策） */
.look-img{
  border: 0;
  outline: 0;
}

.frame:not(.is-ready) .look-img{
  transition: none !important;
}


/* =========================================
   SP: make image full-bleed (max impact)
========================================= */
@media (max-width: 880px){

  /* 画像エリアだけ横幅フルにする */
  .frame{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .img-stack{
    width: 100vw;
  }

  .look-img{
    width: 100vw;
    max-width: none;
  }
}

/* =========================================
   SP: avoid overlap with page counter
   - add safe top space for full-bleed image
========================================= */
@media (max-width: 880px){

  /* ページ番号の高さ分、画像を下げる */
  .img-stack{
    padding-top: 28px;   /* 目安：24〜32pxで微調整 */
    box-sizing: border-box;
  }
}

/* =========================================
   Disable pager indicator (PC / SP)
========================================= */
.pager{
  display: none !important;
}

/* =========================================
   SP: credit area scroll fix (prevent cut-off)
========================================= */
@media (max-width: 880px){

  /* 画面全体は固定のまま */
  .stage{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* ← 重要 */
  }

  /* 画像エリアは高さを固定せず、自然なサイズ */
  .frame{
    flex: 0 0 auto;
    min-height: 0;
  }

  /* クレジットだけをスクロール領域にする */
  .gutter.right{
    flex: 1 1 auto;
    min-height: 0;                 /* ← これが無いと切れる */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 32px;          /* 最下部が隠れない保険 */
  }
}

@media (max-width: 880px){
  html, body{
    height: auto;
    overflow: auto;          /* 固定解除 */
    overscroll-behavior: auto;
  }

  .viewer{
    height: auto;
    min-height: 100vh;
  }

  .stage{
    height: auto;
  }

  /* 2カラムをやめて縦積み */
  .gutter.left,
  .gutter.right{
    position: static !important;
    width: 100% !important;
  }

  /* 画像はフルブリード維持（すでに入れてるならそのまま） */
  .frame{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .img-stack,
  .look-img{
    width: 100vw;
  }

  /* クレジットは読みやすい余白で */
  .gutter.right{
    padding: 18px 16px 40px;
  }
}

/* =========================================
   Header follows scroll (sticky)
========================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
}

/* スクロール時に読みやすさを保つ（必要なら） */
@media (max-width: 880px){
  .site-header{
  background: rgba(255, 255, 255, 0.48); /* ← ここが肝 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  }
}

@media (max-width: 880px){
  .site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
  }
  .viewer{
    padding-top: calc(var(--header-h, 70px) + 24px);
  }
}


/* =========================================
   SP: image top aligns to fixed header
========================================= */
@media (max-width: 880px){

  /* ヘッダー直下からコンテンツ開始（+24px など余計な足し算はしない） */
  .viewer{
    padding-top: var(--header-h, 70px) !important;
  }

  /* 画像側の“逃げ”はゼロに戻す（ここで上端が揃う） */
  .img-stack{
    padding-top: 0 !important;
  }
}

/* =========================================
   SP: image sticks to header (no extra top gap)
========================================= */
@media (max-width: 880px){

  /* ヘッダー直下から開始（余計な 18px を消す） */
  .viewer{
    padding-top: var(--header-h, 70px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
  }

  /* 画像側に入っている“逃げ”をゼロに */
  .frame{ margin-top: 0 !important; }
  .img-stack{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 880px){

  /* 1) ヘッダーの“境界線”が隙間に見えるなら消す（おすすめ） */
  .site-header{
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* 2) コンテンツ開始位置をヘッダー高さぴったりに */
  .viewer{
    padding-top: var(--header-h, 70px) !important;
  }

  /* 3) 画像側に残っている上余白をゼロ */
  .stage{ margin-top: 0 !important; }
  .frame, .img-stack{ margin-top: 0 !important; padding-top: 0 !important; }

  /* 4) それでも“1px浮く”時の最終手段：画像を1pxだけ上に噛ませる */
  .frame{
    transform: translateY(-1px);
  }
}