/* =============================================================
   カルーセル設定パネル（ここだけ触れば見た目を調整できます）
   -------------------------------------------------------------
   ● 高さについて：高さは固定ではなく「スライド幅 × 比率」で決まります。
       スライド高さ ＝ (--bc-center-width の幅) ÷ (--bc-ratio)
     つまり高さを変える方法は2つ：
       (A) --bc-center-width を小さく → 幅も高さも小さくなる（画像は切れない）
       (B) --bc-ratio を横長に (例 16/9 → 16/8) → 高さだけ低くなる
           （※画像がその比率でないと左右が少し切れます）
   ● 数値を変えるだけでOK。単位もそのまま（% や px, s）。
   ============================================================= */
.banner-carousel {
  /* --- 動き --- */
  --bc-interval: 12s;      /* バナーが切り替わるまでの待機時間 */
  --bc-transition: 0.6s;   /* スライドの移動アニメーションの速さ */

  /* --- 中央バナーの大きさ（PC） --- */
  --bc-center-width: 67%;  /* 中央バナーの幅。小さくすると高さも一緒に下がる（左右の“チラ見せ”は増える）。目安 60〜80% */
  --bc-ratio: 16 / 8.7;      /* バナーの縦横比。バナー画像もこの比率で作れば左右が切れません。例: 16/9, 2/1, 3/1 */

  /* --- 余白・装飾 --- */
  --bc-gap: 16px;          /* スライド同士の間隔 */
  --bc-radius: 16px;       /* バナーの角丸 */
  --bc-btn-size: 48px;     /* 左右ボタンの大きさ */
}

/* ▼ タブレット（幅 992px 以下）用の上書き。数値だけ調整可 */
@media (max-width: 992px) {
  .banner-carousel {
    --bc-center-width: 78%;  /* タブレットでの中央バナー幅（＝高さもこれで決まる） */
    --bc-btn-size: 42px;
  }
}

/* ▼ スマホ（幅 640px 以下）用の上書き。数値だけ調整可 */
@media (max-width: 640px) {
  .banner-carousel {
    --bc-center-width: 86%;  /* スマホでの中央バナー幅（＝高さもこれで決まる） */
    --bc-gap: 10px;
    --bc-radius: 12px;
    --bc-btn-size: 36px;
  }
}

.banner-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.banner-carousel .bc-track {
  display: flex;
  align-items: stretch;
  gap: var(--bc-gap);
  will-change: transform;
  transition: transform var(--bc-transition) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.banner-carousel .bc-track.is-no-anim {
  transition: none;
}

.banner-carousel .bc-slide {
  flex: 0 0 var(--bc-center-width);
  /* 高さは固定せず、バナー画像と同じ縦横比（--bc-ratio）でスロットを作る。
     こうすると cover でも画像の左右が切れず、かつ全スライド同じ形になる。
     バナーは --bc-ratio（既定 16:9）で作成してください。 */
  aspect-ratio: var(--bc-ratio, 16 / 9);
  border-radius: var(--bc-radius);
  overflow: hidden;
  position: relative;
  opacity: 0.5;
  transition: opacity var(--bc-transition) ease;
}
.banner-carousel .bc-slide.is-active {
  opacity: 1;
}

.banner-carousel .bc-slide .bc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.banner-carousel .bc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.banner-carousel .bc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: var(--bc-btn-size);
  height: var(--bc-btn-size);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.banner-carousel .bc-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.banner-carousel .bc-btn:active {
  transform: translateY(-50%) scale(0.96);
}
.banner-carousel .bc-btn-prev {
  left: calc(((100% - var(--bc-center-width)) / 2 - var(--bc-btn-size)) / 2);
}
.banner-carousel .bc-btn-next {
  right: calc(((100% - var(--bc-center-width)) / 2 - var(--bc-btn-size)) / 2);
}

.banner-carousel .bc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.banner-carousel .bc-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    background 0.2s ease,
    width 0.2s ease;
}
.banner-carousel .bc-dots button.is-active {
  background: #ffc300;
  width: 24px;
  border-radius: 5px;
}

/* ※ タブレット/スマホの数値設定は上の「設定パネル」に集約しました。
   ここには見た目の微調整（設定変数ではないもの）だけ残しています。 */
@media (max-width: 640px) {
  .banner-carousel .bc-slide .bc-placeholder {
    font-size: 18px;
  }
  .banner-carousel .bc-btn-prev {
    left: 6px;
  }
  .banner-carousel .bc-btn-next {
    right: 6px;
  }
}

/* スマホ縦向きのみ：中央バナーを画面いっぱいにして、
   左右の「チラ見せ（隣のバナーの端）」を出さない。
   タブレット縦(≥768px)やPCには影響しないよう max-width:640px と
   orientation:portrait を併用する。 */
@media (max-width: 640px) and (orientation: portrait) {
  .banner-carousel {
    --bc-center-width: 100%; /* バナーを全幅に */
    --bc-gap: 0px; /* スライド間の隙間もなくして完全に1枚だけ見せる */
  }
  /* 全幅なので左右ボタンはバナーに重ねて配置 */
  .banner-carousel .bc-btn-prev {
    left: 6px;
  }
  .banner-carousel .bc-btn-next {
    right: 6px;
  }
}
.car-sharing.business {
  font-weight: bold;
  text-align: center;
  border: solid 2px #fff;
  border-radius: 30px;
  background-color: #fc7ba1;
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  color: #fff;
  display: block;
  position: relative;
  width: clamp(220px, 25vw, 400px);
  font-size: clamp(14px, 1.5vw, 20px);
  padding: 10px;
  cursor: pointer;
  /* hover の色・大きさをなめらかに変化させる */
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.car-sharing.business:hover {
  background-color: #ff3b75;
  transform: scale(1.05);
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.35);
}
.business-btn {
  /* アニメ開始前は非表示にしておき、fadeIn で現れるようにする */
  opacity: 0;
  animation: fadeIn 1s ease 1.5s forwards;
  height: 45px;
  margin: 20px;
}

/* バナー右下に重ねるビジネス誘導ボタン */
.biz-on-banner {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 6;
  /* アニメ開始前は非表示にして、fadeIn で現れるようにする（チラつき防止） */
  opacity: 0;
  animation: fadeIn 1s ease 1.5s forwards;
}
.biz-on-banner .car-sharing.business {
  margin: 0; /* バナー内では中央寄せ不要 */
}
/* スマホ（640px以下）ではバナー上のボタンは出さない。
   下の .business-btn（カルーセル下）を使う。 */
@media (max-width: 640px) {
  .biz-on-banner {
    display: none;
  }
  .banner-carousel {
    --bc-radius: 0px;
  }
}
/* 逆に、PC・タブレット（641px以上）ではカルーセル下のボタンは非表示にして
   バナー上のボタンだけにする（重複させない）。 */
@media (min-width: 641px) {
  .business-btn {
    display: none;
  }
}
.banner-contents {
  position: absolute;
  width: fit-content;
  bottom: 5%;
  left: 10px;
}
.banner-btn {
  z-index: 5;
  width: fit-content;
  border: none;
  border-radius: 5px;
  /* background: rgba(255, 255, 255, 0.85); */
  background: #ff7a00;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  font-size: clamp(10px, 1.5vw, 16px);
}
.banner-btn:hover {
  /* background: #fff; */
  background: #ff7a00;
  transform: scale(1.08);
}
.banner-btn a {
  display: block;
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: clamp(12px, 2vw, 20px);
  padding: 5px 10px;
}
.banner-text {
  width: fit-content;
  z-index: 5;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: clamp(16px, 2vw, 42px);
  padding: clamp(3px, 1vw, 10px);
  margin-top: 10px;
  font-weight: bold;
  text-shadow: 8px 8px 14px rgba(0, 0, 0, 0.8);
}

/* new_banner_style START*/
.joyca-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.joyca-banner__content {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  /* padding: clamp(10px, 4vw, 20px); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #092b5c;
}

.joyca-banner__brand {
  margin: 0 0 28px;
  font-size: clamp(16px, 3vw, 40px);
  font-weight: 800;
  color: #1687f8;
}

.joyca-banner__title {
  margin: 0;
  font-size: clamp(12px, 3vw, 30px);
  font-weight: 800;
}

.joyca-banner__title span {
  color: #1485f6;
}

.joyca-banner__lead {
  margin: 10px 0 15px;
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 500;
}

.joyca-banner__button {
  width: fit-content;
  padding: 10px 15px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(90deg, #0876df, #1698ff);
  text-decoration: none;
  font-size: clamp(10px, 1.25vw, 16px);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 119, 225, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.joyca-banner__button:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 119, 225, 0.3);
}

.joyca-banner__link {
  margin-top: 18px;
  color: #0876df;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* @media (max-width: 900px) {
  .joyca-banner__image {
    position: absolute;
    inset: 0;
  }

  .joyca-banner__features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
} */

@media (max-width: 600px) {
  .joyca-banner__image {
    object-position: 67% center;
    opacity: 0.28;
  }

  /* .joyca-banner__button {
    width: 100%;
    min-width: 0;
  } */
}
/* new_banner_style END */