html, body{
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: rgb(125, 125, 125);
}

/* =========================
   セクション3：帯の被り回避（右側安全余白）
========================= */
:root{
  --band-safe-right: calc(50px + clamp(120px, 14vw, 260px));
}

/* =========================
   右上の帯
========================= */
.shima-band {
  position: fixed;
  top: 0;
  right: 50px;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;

  opacity: 0;
  transform: translateY(-110%);
  filter: drop-shadow(-6px 0 12px rgba(0, 0, 0, 0.25));
}

.shima-band.is-in {
  animation: shimaSlideIn 0.9s ease-out both;
}

/* ★ 追加：帯の出現アニメーションを省略して即表示 */
.shima-band.no-band-anim{
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.shima-band img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ===== 帯 上部クリック領域 ===== */
.shima-band-click-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25vh;           /* ← 上部どこまでをクリック対象にするか */
  pointer-events: auto;  /* ★ ここだけ有効 */
  cursor: pointer;
}

/* =========================
   スマホ：帯上部クリック時の暗転防止
========================= */
.shima-band-click-top{
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* iOS Safari */
  tap-highlight-color: rgba(0,0,0,0);         /* Android */
}

.shima-band-click-top:active{
  background-color: transparent !important;
}

/* =========================
   セクション2：コンセプト見出し
========================= */
.shima-concept-title{
  position: absolute;
  top: 27vh;
  left: 50%;
  transform: translateX(-50%);

  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  font-size: clamp(0.2rem, 2.5vw + 0.3rem, 2rem);
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: rgb(125, 125, 125);

  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.shima-band.show-concept-title .shima-concept-title{
  opacity: 1;
}

/* =========================
   商品名（帯基準で配置）
========================= */
.shima-product-title{
  position: absolute;
  top: 27vh;
  left: 50%;
  transform: translateX(-50%);

  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  font-size: clamp(0.2rem, 2.5vw + 0.3rem, 2rem);
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: rgb(125, 125, 125);

  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.shima-band.show-product-title .shima-product-title{
  opacity: 1;
}

@keyframes shimaSlideIn {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}

/* =========================
   帯の中のセクションリンク
========================= */
.shima-links {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);

  --link-gap: 24px;

  display: flex;
  flex-direction: column;
  gap: var(--link-gap);

  pointer-events: auto;

  opacity: 1;
  transition: opacity 0.25s ease;
}

.shima-band.links-hidden .shima-links{
  opacity: 0;
  pointer-events: none;
}

.shima-links button {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: normal;

  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;

  color: rgb(125, 125, 125);
  transition: color 0.25s ease;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  line-height: 1.4;

  font-size: clamp(0.1rem, 1.3vw + 0.2rem, 1.17rem);
  letter-spacing: 0.15em;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  position: relative;
}

.shima-links button:hover {
  color: rgb(170, 170, 170);
}

.shima-links button + button::before {
  content: "";
  position: absolute;
  top: calc(var(--link-gap) / -2);
  left: 50%;
  transform: translateX(-50%);
  width: 1.4em;
  height: 1px;
  background: rgb(125, 125, 125);
}

/* =========================
   横スクロール（PC）
========================= */
.container {
  display: flex;
  flex-direction: row-reverse;
  height: 100vh;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.container::-webkit-scrollbar { display: none; }

.section {
  min-width: 100vw;
  height: 100vh;
  display: flex;
}

/* =========================
   セクション1（動画を右端固定）
========================= */
.section.one {
  background: #fff;
  justify-content: flex-end;
  align-items: center;
}

.section-bg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  object-position: right center;
}

/* =========================
   セクション2（concept_movie を左右中央に固定）
========================= */
.section.two {
  background: #fff;
  justify-content: center;
  align-items: center;
}

#conceptMovie.section-bg { object-position: center center; }

/* =========================
   セクション3（商品：右寄せ）
========================= */
.section.three {
  background: #fff;
  justify-content: flex-end;
  align-items: center;

  padding-right: var(--band-safe-right);
  padding-left: 40px;
  box-sizing: border-box;
}

/* =========================
   スライダー全体
========================= */
.product-slider{
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;

  position: relative;
}

/* 表示領域 */
.product-stage{
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 420px;

  touch-action: pan-y;

  padding-bottom: 70px;
  box-sizing: border-box;

  z-index: 1;
}

/* =========================
   次の商品プレビュー（半調）
========================= */
.product-preview{
  position: absolute;
  top: 50%;
  left: var(--preview-left, 120px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;

  opacity: 0;
  transition: opacity 0.28s ease;
}

.product-preview.is-on{
  opacity: 1;
}

.preview-image{
  height: 42vh;
  width: auto;
  display: block;
  object-fit: contain;

  opacity: 0.3;
  filter: grayscale(30%) blur(0.6px);

  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* =========================
   スライド（切替は瞬時。動くのは画像だけ）
========================= */
.product-slide{
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: flex-end;
  align-items: flex-start;

  opacity: 0;
  pointer-events: none;

  transition: none;
  transform: none;

  z-index: 2;
}

.product-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* 1商品レイアウト */
.product-wrap{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* =========================
   商品画像ボックス（ここは動かさない）
========================= */
.product-image-box{
  position: relative;
  display: inline-block;

  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* =========================
   商品画像（ここだけ動かす）
========================= */
.product-image{
  position: relative;
  z-index: 1;

  height: 50vh;
  width: auto;
  max-width: 100vw;
  display: block;
  object-fit: contain;

  opacity: 1;
  transform: translateX(0);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* =========================
   cloud（画像の上、view more の下）
========================= */
.cloud-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;

  pointer-events: none;
  user-select: none;

  z-index: 4;
  transform: scale(1.03);
  transform-origin: center;
}

/* =========================
   ★ NEWバッジ：右上
========================= */
.product-new-badge{
  position: absolute;
  top: 0;
  right: 0;
  left: auto;

  width: 20%;
  height: auto;

  transform: translate(-15%, 15%);

  pointer-events: none;
  user-select: none;

  z-index: 6;
}

/* =========================
   view more（最前面）
========================= */
.product-detail-link{
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  background: transparent;
  border: none;
  padding: 0;

  cursor: pointer;
  user-select: none;

  color: rgb(125, 125, 125);

  transform: translate(0px, -10px);

  z-index: 7;
}

.product-detail-link .label{
  writing-mode: horizontal-tb;
  margin-bottom: 0.02em;
  margin-left: 8px;

  letter-spacing: 0.05em;
  text-transform: none;

  color: rgb(125, 125, 125);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  font-size: 1.1rem;
}

.product-detail-link .yazirusi{
  position: relative;
  margin-top: -4px;
  width: 200px;
  height: 1px;

  --scale: 0.6;
  transform: scaleX(var(--scale));
  transform-origin: left center;

  transition: transform 0.3s ease;
}

.product-detail-link .line01{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(125, 125, 125);
}

.product-detail-link .line02{
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 1px;
  background-color: rgb(125, 125, 125);

  transform-origin: right bottom;
  transform: scaleX(calc(1 / var(--scale))) rotate(45deg);
}

.product-detail-link:hover .yazirusi{ --scale: 0.7; }

/* =========================
   画像だけの切替アニメ（JSのclassで制御）
========================= */
.product-slide:not(.is-active) .product-image{
  opacity: 0;
  transform: translateX(0);
}

.product-slide.is-leaving.dir-next .product-image{
  opacity: 0;
  transform: translateX(10px);
}

.product-slide.is-leaving.dir-prev .product-image{
  opacity: 0;
  transform: translateX(-10px);
}

.product-slide.is-entering.dir-next .product-image{
  opacity: 0;
  transform: translateX(-15px);
}

.product-slide.is-entering.dir-prev .product-image{
  opacity: 0;
  transform: translateX(15px);
}

.product-slide.is-active .product-image{
  opacity: 1;
  transform: translateX(0);
}

.product-stage.no-anim .product-slide .product-image{
  transition: none !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* 商品説明（縦書き） */
.product-vert{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: normal;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  height: 50vh;
  max-height: 50vh;
  overflow: hidden;

  display: flex;
  gap: 14px;

  line-height: 1.55;
  letter-spacing: 0.08em;

  color: rgb(125, 125, 125);
}

.product-desc{
  font-size: clamp(10px, 1.1vw + 0.6rem, 20px);
  line-height: 2;
  letter-spacing: 0.03em;
}

/* =========================
   ドット＋矢印（＜○○●○＞）
========================= */
.product-dots-wrap{
  display: flex;
  align-items: center;
  gap: 14px;

  position: absolute;
  left: var(--dots-left, 50%);

  top: calc(var(--dots-top, 10px) + 24px);
  bottom: auto;

  transform: translateX(-50%);
  transition: left 0.2s ease, top 0.2s ease;

  z-index: 10;
  pointer-events: auto;
}

.dot-arrow{
  background: transparent;
  border: none;
  cursor: pointer;

  font-size: 16px;
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  color: rgb(125,125,125);
  padding: 0 4px;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dot-arrow:hover{
  opacity: 0.6;
  transform: scale(1.1);
}

.product-dots{
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.dot-btn{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(125,125,125,0.9);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.dot-btn:hover{ transform: scale(1.2); }

.dot-btn.is-active{
  background: rgba(125,125,125,0.9);
}

/* =========================
   戻るボタン（back to top・横書き）
========================= */
#backButton {
  position: fixed;
  left: 0;
  bottom: 20px;
  z-index: 3000;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;

  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

#backButton.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#backButton .label {
  writing-mode: horizontal-tb;
  margin-bottom: 0.4em;
  margin-left: 8px;

  letter-spacing: 0.05em;
  text-transform: lowercase;

  color: rgb(125, 125, 125);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;
}

.yazirusi {
  position: relative;
  width: 240px;
  height: 1px;

  --scale: 0.6;
  transform: scaleX(var(--scale));
  transform-origin: left center;

  transition: transform 0.3s ease;
}

.line01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(125, 125, 125);
}

.line02 {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 1px;
  background-color: rgb(125, 125, 125);

  transform-origin: right bottom;
  transform: scaleX(calc(1 / var(--scale))) rotate(45deg);
}

#backButton:hover .yazirusi { --scale: 0.7; }

/* 縦書き中で「19」だけ横並びにする */
.product-desc .num-inline{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  display: inline-block;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

@media (max-width: 768px) {

  /* =========================
     ★ スマホは「bodyをスクロールさせない」
     → スクロール主体を .container に固定して scroll-snap を確実に効かせる
  ========================= */
  body{
    overflow: hidden; /* ★ ここが重要（auto にしない） */
  }

  .container{
    flex-direction: column;     /* ★ row-reverse を解除 */

    height: 100vh;              /* container内で縦スクロール */
    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch; /* ★ iOS慣性 + snap安定化 */

    /* ★★★ セクション/商品をスナップさせる ★★★ */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }

  .section{
    min-width: 100%;
    width: 100%;
    height: auto;
    min-height: 100vh;

    /* ★★★ セクション単位でピタッと止める ★★★ */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .shima-band {
    right: 20px;
    width: 20vw;
    top: 0;
    bottom: auto;
    height: 100vh;
  }

  .shima-band img {
    content: url("img/header_sp.png");
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }

  /* セクション2・3の縦書きタイトル */
  .shima-concept-title,
  .shima-product-title {
    top: 22vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
  }

  /* =========================
     スマホ用：コンセプト / 商品紹介
     ・文字を小さく
     ・セクション2,3では非表示（JS側がshow-xxxを付ける）
  ========================= */
  .shima-links {
    display: flex;
    position: absolute;
    top: 22vh;
    left: 50%;
    transform: translateX(-50%);

    flex-direction: column;
    gap: 24px;

    pointer-events: auto;
  }

  .shima-links button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;

    background: transparent;
    border: none;
    padding: 0;

    font-size: 18px;
    letter-spacing: 0.15em;
    line-height: 1.4;

    color: rgb(125,125,125);
    font-family:
      "Hiragino Mincho ProN",
      "Yu Mincho",
      "YuMincho",
      "MS PMincho",
      serif;
  }

  .shima-links button::before {
    display: none;
  }

  .shima-band.show-concept-title .shima-links,
  .shima-band.show-product-title .shima-links {
    display: none;
  }

  .product-preview {
    display: none !important;
  }

  .product-detail-link .label{
    margin-bottom: 0.05em;
  }

  .dot-btn{
    width: 12px;
    height: 12px;
  }

  .dot-arrow{
    font-size: 18px;
  }

  .section.three {
    justify-content: center;
    align-items: stretch;
    padding: 0;
  }

  .product-slider{
    width: 100%;
    align-items: center;
    gap: 0;
  }

  /* =========================
     ★ スマホ：商品は「縦積み」表示（スライダー無効）
     - ＜○○○○＞（ドット＋矢印）非表示
     - 各商品を縦スクロールで切り替え
  ========================= */
  .product-dots-wrap{
    display: none !important; /* ← ＜○○○○＞非表示 */
  }

  .product-stage{
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    touch-action: pan-y;
  }

  .product-slide{
    position: relative;
    inset: auto;

    opacity: 1 !important;
    pointer-events: auto !important;

    width: 100%;
    min-height: 100vh;           /* 1商品=1画面感（縦切替） */
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;

    margin-bottom: 100px;

    /* ★★★ 商品単位でもスナップ（ピタ止め） ★★★ */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .product-wrap{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0;
  }

  .product-vert{
    grid-row: 1;
    height: 100%;
    max-height: none;
    width: 100%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-top: 200px;
    margin-right: 120px;
    margin-left: 40px;
    margin-bottom: 50px;

    line-height: 1.8;
  }

  .product-desc{
    text-align: left;
    font-size: 20px;
  }

  .product-image-box{
    grid-row: 2;
    align-self: center;
    justify-self: center;
  }

  .product-image{
    height: auto;
    max-height: 44vh;
    max-width: 88vw;
  }

  /* ★ SP：縦積みでは全スライドの画像を必ず表示（PC用のopacity制御を上書き） */
  .product-slide .product-image{
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }

  :root {
    --band-safe-right: calc(20px + 20vw);
  }

  .section-bg {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
  }

  #backButton {
    display: none !important;
  }

  /* スマホのview more矢印：ホバー変化を固定 */
  .product-detail-link .yazirusi{
    --scale: 0.6 !important;
    transition: none !important;
  }

  .product-detail-link:hover .yazirusi,
  .product-detail-link:active .yazirusi,
  .product-detail-link:focus .yazirusi,
  .product-detail-link:focus-visible .yazirusi{
    --scale: 0.6 !important;
    transform: scaleX(0.6) !important;
  }
}