/* price セクション（スマホ）のカルーセル矢印アイコンを黒に */
#priceCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0L1 4l4.25 4 1-1L3 4l3.25-3z'/%3E%3C/svg%3E");
}

#priceCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l4.25 4-4.25 4-1-1L5 4 1.75 1z'/%3E%3C/svg%3E");
}

/* スライド間に横の余白（両端に8px）を付与 */
#priceCarousel .carousel-item {
  padding-left: 8px;
  padding-right: 8px;
  /* peek時にleftをアニメーションさせるため */
  transition: transform 0.6s ease, left 0.6s ease;
}

/* モバイル時: 次のスライドを右側に少し見せる（peek） */
@media (max-width: 767.98px) {
  #priceCarousel .carousel-inner {
    /* 横方向のみ見切れ表示。縦方向のはみ出しは抑制 */
    overflow-x: visible;
    overflow-y: hidden;
  }
  /* 矢印とインジケーターは常に最前面＆操作可 */
  #priceCarousel .carousel-control-prev,
  #priceCarousel .carousel-control-next,
  #priceCarousel .carousel-control {
    z-index: 6;
    pointer-events: auto;
  }
  #priceCarousel .carousel-indicators {
    z-index: 7;
  }
  /* アクティブスライドを常に最前面にして重なりを防止 */
  #priceCarousel .carousel-item.active {
    position: relative;
    z-index: 3;
  }
  /* 隣接する次のスライドを表示させる */
  #priceCarousel .carousel-item.active + .carousel-item {
    display: block; /* Bootstrap既定の display:none を上書き */
    position: absolute;
    top: 0;
    left: 82%; /* 右側に約18%見えるように配置（見切れ量を増） */
    width: 100%;
    pointer-events: none; /* 見切れ部分の誤タップ防止 */
    z-index: 2; /* 覗き見部分を上に重ねる */
    /* 重なりによる読みにくさを避けるため、右端だけを可視化 */
    clip-path: inset(0 0 0 88%);
    -webkit-clip-path: inset(0 0 0 88%);
  }
  /* スライド開始時（次へ）に自然にフル幅へ移動させる */
  #priceCarousel .carousel-item.active + .carousel-item.carousel-item-next,
  #priceCarousel .carousel-item.active + .carousel-item.carousel-item-left {
    left: 0;
    z-index: 4; /* 遷移中のみ前面にしてアニメーションを自然に */
    clip-path: none;
    -webkit-clip-path: none;
  }
  /* 連続アニメーション時の不要なズレ軽減 */
  #priceCarousel .carousel-item-next,
  #priceCarousel .carousel-item-prev {
    transform: translateX(0);
  }
  /* 画像を少し小さくして左右に余白を作る */
  #priceCarousel .carousel-item img {
    width: 88% !important; /* .w-100 を上書き */
    margin-left: auto;
    margin-right: auto;
  }
}

.jumbotron-fluid {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

.btn-secondary {
  background: #00b900;
  color: #ffffff;
  border: none;
}

.btn-secondary:hover {
  opacity: 0.9;
  background: #00b900;
  color: #ffffff;
  border: none;
}

/* viju 公式サイトボタン（濃いめのピンク + 白文字） */
.btn-viju {
  background: #d81b60; /* 濃いピンク */
  color: #ffffff !important;
  border: none;
}
.btn-viju:hover,
.btn-viju:focus {
  background: #ad1457; /* ほんの少し暗く */
  color: #ffffff !important;
}
