:root{
  /* =====================================================================
     調整ツマミ（ここだけ触ればOK）※PC/スマホ共通で固定

     ① 帯どうしの近さ（まずここ）
        - 値を「大きく」→ より重なって近づく（詰まる）
        - 値を「小さく」→ 離れる（ゆったり）

     ② Miniだけ上下
        - マイナスで上 / プラスで下

     ③ 台紙サイズ（高さ/幅）

     ④ 斜めの強さ（数値が大きいほど斜めがキツい）

     ⑤ 出現アニメの移動量（どれだけ画面外からスライドするか）
     ===================================================================== */

  /* ===== 画面幅ぴったり（iPhone対策で dvw 優先） ===== */
  --vw: 100vw;

  /* ===== ④ 斜めの強さ ===== */
  --slant: 28px;      /* Main/Sub 用 */
  --miniSlant: 10px;  /* Mini 用（Miniだけ別で調整） */

  /* Main+Miniだけ（Subなし）の時：Miniの斜めを別調整したい場合 */
  --miniSlantSolo: 10px; /* 斜め量（大きいほど傾きが強い） */
  --miniSlantSoloDir: -1; /* 1=今の向き / -1=反転（逆向き） */

  /* ===== 台紙の色（ここを変えるだけで台紙色が変わる） ===== */
  --miniBg: linear-gradient(135deg, #202020, #2e2e2e);

  /* ===== ③ 台紙サイズ（高さ/幅） ===== */
  --mainH: 310px;                    /* Main の高さ */
  --subH:  calc(var(--mainH) * 0.7); /* Sub の高さ（Mainに連動） */
  --miniH: 120px;                    /* Mini の高さ */
  --miniWidth: 150px;                /* Mini の横幅 */

  /* ===== ① 帯どうしの近さ（重なり） ===== */
  --overlapMain: 15px; /* Main → 次の帯 の重なり */
  --overlapSub:  40px; /* Sub → 次の帯 の重なり（Subが複数でもこれ） */
  --overlapMini: 20px; /* Mini → 次の帯 の重なり */

  /* ===== ② Miniだけ上下の微調整 ===== */
  --miniOffsetY: 20px;

  /* ===== ⑤ 出現アニメの移動量 ===== */
  --slideMainX: 200px; /* Main は右→左 */
  --slideSubX:  180px; /* Sub は左→右 */
  --slideMiniX: 70px;  /* Mini も左→右 */

  /* ===== アニメ速度 ===== */
  --dur: 620ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

@supports(width: 100dvw){
  :root{ --vw: 100dvw; }
}

.contents{
margin-bottom: 100px;
}

/* ===== Stack（帯を好きな数だけ積む） ===== */
.stack{
  position: relative;
  width: var(--vw);
  margin-left: calc(50% - (var(--vw) / 2));
  margin-right: calc(50% - (var(--vw) / 2));
  /* height はJSが自動で入れます */
}

/* ===== Band（共通） ===== */
.band{
  position:absolute;
  left:0;
  right:0;
  display:block;
  text-decoration:none;
  color:inherit;
  opacity: 0;
  transform: translateX(0);
  transition:
    transform var(--dur) var(--ease),
    opacity  var(--dur) var(--ease);
  will-change: transform, opacity;
  overflow:hidden;
  border-radius: 0;
}
.band.is-visible{
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* ===== band内の画像を“箱ぴったり”に収める ===== */
.band > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* bandごとに中心位置を変えたい場合：aタグに style="--imgPos: 50% 30%" など */
.band{ --imgPos: 50% 50%; }
.band > img{ object-position: var(--imgPos); }

/* ===== Main ===== */
.band--main{
  height: var(--mainH);
  background: linear-gradient(135deg, #3a6cff, #7c3aed);
  clip-path: polygon(
    0 var(--slant),
    100% 0,
    100% calc(100% - var(--slant)),
    0 100%
  );
  transform: translateX(var(--slideMainX));
  z-index: 3;
}
.band--main.is-visible{
  transform: translateX(0);
}

/* ===== Sub ===== */
.band--sub{
  height: var(--subH);
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  clip-path: polygon(
    0 0,
    100% var(--slant),
    100% 100%,
    0 calc(100% - var(--slant))
  );
  transform: translateX(calc(var(--slideSubX) * -1)) translateY(14px) scale(.985);
  z-index: 2;
}
.band--sub.is-visible{
  transform: translateX(0) translateY(0) scale(1);
}

/* ===== Mini ===== */
.band--mini{
  height: var(--miniH);
  right: auto;
  width: var(--miniWidth);
  background: var(--miniBg);
  clip-path: polygon(
    0 0,
    100% var(--miniSlant),
    100% 100%,
    0 calc(100% - var(--miniSlant))
  );
  transform: translateX(calc(var(--slideMiniX) * -1));
  z-index: 4;
}
.band--mini.is-visible{
  transform: translateX(0);
}


/* ===== Main + Mini だけ（Subなし）のときのMini見た目変更 =====
   使い方：JSが stack に .stack--main-mini を付けます
   斜めの向き・傾きだけ変える（背景色はminiBgのまま）
*/
.stack--main-mini .band--mini{
  /* 背景色は変えない（miniBgのまま） */

  /* 斜めの向き＆傾きだけ変える */
  clip-path: polygon(
    0 calc(var(--miniSlantSolo) * max(0, var(--miniSlantSoloDir))),
    100% 0,
    100% calc(100% - (var(--miniSlantSolo) * max(0, var(--miniSlantSoloDir)))),
    0 100%
  );
}

/* 反転したい場合は、HTML側で stack に .mini-slant-flip を付ける */
.stack--main-mini.mini-slant-flip .band--mini{
  clip-path: polygon(
    0 0,
    100% var(--miniSlantSolo),
    100% 100%,
    0 calc(100% - var(--miniSlantSolo))
  );
}

/* 通常向き（デフォ） */
.stack--main-mini .band--mini{
  clip-path: polygon(
    0 var(--miniSlantSolo),
    100% 0,
    100% calc(100% - var(--miniSlantSolo)),
    0 100%
  );
}

.label{
  position:absolute;
  left: 18px;
  bottom: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  font-size: 18px;
  color: #000;
}

.mini-emoji{
  height:100%;
  display:grid;
  place-items:center;
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.band > *{ position: relative; z-index: 3; }

/* ===== 間隔用（デモ） ===== */
.spacer{ height: 80px; }

/* ===== motion減らす設定 ===== */
@media (prefers-reduced-motion: reduce){
  .band{ transition:none; transform:none !important; }
}

/* =====================================================================
   タップリング（Micro Tap Ring）の長さ調整（test.html側の上書き）
   （※このページでは黒フェード版を使うため、Microリング調整は基本使われません）
   - transition.css は触らずにここで上書きします。
   ===================================================================== */

:root{
  --mrGrowMs: 260ms;
  --mrFadeMs: 260ms;
  --mrFadeDelayMs: 120ms;
  --mrScale: 0.9;
}
.bwu-mr-ring{
  transition:
    transform var(--mrGrowMs) cubic-bezier(.22,.61,.36,1),
    opacity   var(--mrFadeMs) ease var(--mrFadeDelayMs);
}
.bwu-mr-ring.-grow{
  transform: translate(-50%, -50%) scale(var(--mrScale));
}
@media (hover: none) and (pointer: coarse) {
  .bwu-mr-ring{
    transition:
      transform var(--mrGrowMs) cubic-bezier(.22,.61,.36,1),
      opacity   var(--mrFadeMs) ease var(--mrFadeDelayMs);
  }
}