/* ===================== 基本変数 ===================== */
:root{
  /* リール統一高さ */
  --ig-reel-height-desktop: 580px;
  --ig-reel-height-tablet:  500px;
  --ig-reel-height-phone:   420px;

  /* 見た目幅（縦長でも横長でも枠で統一） */
  --ig-item-width-desktop: 320px;
  --ig-item-width-tablet:  260px;
  --ig-item-width-phone:   200px;

  /* 立体配置（%） */
  --slot-left2:  -120%;
  --slot-left1:   -60%;
  --slot-center:     0%;
  --slot-right1:   60%;
  --slot-right2:  120%;

  /* 見た目 */
  --shadow: 0 6px 20px rgba(0,0,0,.10);

  /* アニメ時間 */
  --dur-move: 420ms;
  --dur-fade: 320ms;

  /* インタラクション */
  --focus: 2px solid #666;
}

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

/* 埋め込みセクション（CLS軽減に寄与） → ☆[top-page.cssで記述]☆ */
/* #ig-section{
  position: relative;
  contain: content;
} */

/* ===================== カルーセル ===================== */
.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;
  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 var(--dur-move) ease, opacity var(--dur-fade) ease, filter var(--dur-fade) ease;
  opacity: 0;
  pointer-events: none;
  filter: grayscale(40%) brightness(.9);
  will-change: transform, opacity;
}

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

/* ===================== Instagram 埋め込み強制サイズ ===================== */
/* 読み込み前でも枠が潰れないように仮の比率を指定（9:16想定、必要に応じて変更） */
.carousel-item .instagram-media{
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;

  aspect-ratio: 9 / 16; /* 横動画が多いなら 4/3 などに */
  background: #f6f7f8; /* ローディング時の薄い背景 */
  border-radius: 12px;
}
.carousel-item iframe{
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 0;
  box-shadow: var(--shadow);
  border-radius: 12px;
}

/* ===================== ナビ矢印 ===================== */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 2rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease;
  line-height: 1;
}
.nav:hover { transform: translateY(-50%) scale(1.05); }
.nav.left  { left: 10px; }
.nav.right { right: 10px; }
/* ヒットエリア拡大（アクセシビリティ向上） */
.nav::before{
  content: "";
  position: absolute;
  inset: -8px;
}

/* ===================== インジケーター ===================== */
.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;
  transition: transform .15s ease, background .2s ease;
}
.indicators button:hover{ transform: scale(1.2); }
.indicators button.is-active{ background: #333; }
.indicators button:focus-visible{ outline: var(--focus); }

/* ===================== ストーリー風プログレス ===================== */
.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; }
}

/* ===================== モーション配慮 ===================== */
@media (prefers-reduced-motion: reduce){
  .carousel-item,
  .nav,
  .indicators button{
    transition: none;
  }
}