/* ===================== 基本変数（ここを変えるだけで全体調整） ===================== */
:root{
  /* カルーセルの表示高さ（= リールの統一高さ） */
  --ig-reel-height-desktop: 580px;
  --ig-reel-height-tablet:  500px;
  --ig-reel-height-phone:   420px;

  /* リールの表示幅（Instagram側で縦横は可変だが見た目幅を統一） */
  --ig-item-width-desktop: 320px;
  --ig-item-width-tablet:  260px;
  --ig-item-width-phone:   200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

/* ===================== カルーセル ===================== */
.carousel-wrapper {
  position: relative;
  width: 100%;
  padding: 20px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;         /* 下の見切れ防止 */
  touch-action: pan-y;       /* 縦スクロールはそのまま。横はJSでスワイプ検知 */
}

.carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: var(--ig-reel-height-desktop); /* 本体高さ＝リール高さに合わせる */
  perspective: 1000px;                   /* 奥行き感（必要なら rotateY も追加可） */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* 各アイテム（埋め込みコンテナ） */
.carousel-item {
  position: absolute;
  width: var(--ig-item-width-desktop);
  height: var(--ig-reel-height-desktop); /* ★ここでリールの高さを統一 ★ */
  overflow: hidden;                       /* はみ出す上下をカット */
  transform-origin: center center;
  transition: transform 480ms ease, opacity 360ms ease, filter 360ms ease;
  opacity: 0;
  pointer-events: none;
  filter: grayscale(40%) brightness(0.9);
}

/* 表示対象のみ操作可能に */
.carousel-item.is-visible {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

/* Instagram 埋め込みの幅・高さを強制（Instagramのデフォルトを上書き） */
.carousel-item .instagram-media{
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;         /* ★高さも100%に */
  margin: 0 auto !important;
}
.carousel-item iframe{
  width: 100% !important;
  height: 100% !important;         /* ★iframe側も100%に */
  max-height: 100% !important;
}

/* ===================== ナビ矢印 ===================== */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 2rem;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}
.nav.left  { left: 10px; }
.nav.right { right: 10px; }

/* ===================== インジケーター（丸ポチ） ===================== */
.indicators{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;             /* 丸ポチ間隔 */
  margin: 16px 0 26px;   /* ★ご要望：下の余白を広めに */
}
.indicators button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #bbb;
  cursor: pointer;
}
.indicators button.is-active{ background: #333; }
.indicators button:focus-visible{ outline: 2px solid #666; }

/* ===================== ストーリー風プログレス ===================== */
.story-progress{
  position: relative;
  width: min(560px, 50%);
  height: 3px;
  background: rgba(0,0,0,0.1);
  border-radius: 999px;
  margin: 0 auto 18px;   /* 丸ポチのさらに下 */
  overflow: hidden;
}
.story-progress__bar{
  width: 0%;
  height: 100%;
  background: #111;
  transform-origin: left center;
}

/* ===================== レスポンシブ ===================== */
@media (max-width: 1024px){
  .carousel { height: var(--ig-reel-height-tablet); }
  .carousel-item {
    width: var(--ig-item-width-tablet);
    height: var(--ig-reel-height-tablet);
  }
}

@media (max-width: 768px){
  .carousel { height: var(--ig-reel-height-phone); }
  .carousel-item {
    width: var(--ig-item-width-phone);
    height: var(--ig-reel-height-phone);
  }
  .nav { font-size: 1.6rem; }
}