/* ===== 3スライダー・フルワイド行／画像は必ず全部表示(CONTAIN)／カラム間にGAP ===== */

/* 画面端まで(フルブリード) */
.mq-fullbleed{
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}

/* --- 全体パラメータ --- */
.mq-hero-3swipers{
  --H-PC: 510px;   /* PC高さ（必要に応じて変更） */
  --H-TAB: 420px;  /* タブレット高さ */
  --H-SP:  320px;  /* スマホ高さ */
  --SIDE-W: 320px; /* 左右カラム幅 */
  --GAP: 16px;     /* ★カラム間の隙間 */
  display: flex;
  align-items: stretch;
  gap: var(--GAP);
  padding-inline: var(--GAP); /* 端も均等に */
  box-sizing: border-box;
}

/* カラム幅：左右は固定、中央は可変 */
.mq-hero-3swipers .col-l,
.mq-hero-3swipers .col-r{ flex: 0 0 var(--SIDE-W); min-width: 220px; }
.mq-hero-3swipers .col-c{ flex: 1 1 auto; min-width: 0; position: relative; }

/* 各スワイパーは同じ高さ（autoHeightは使わない） */
.mq-hero-3swipers .swiper{
  width: 100%;
  height: var(--H-PC);
  overflow: hidden;
  border-radius: 8px;          /* 任意の角丸 */
  background: #f5f5f5;         /* 画像より外側のレターボックス色 */
}

/* スライド中身：中央寄せ＆レターボックス */
.mq-hero-3swipers .swiper-slide{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ★画像は絶対に切らない（等倍縮小） */
.mq-hero-3swipers .swiper-slide img{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* 中央のみドットと矢印を表示 */
.swiper-pagination-center{
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
}
.swiper-pagination-center .swiper-pagination-bullet{
  width: 8px; height: 8px; background: #cfcfcf; opacity: .9;
}
.swiper-pagination-center .swiper-pagination-bullet-active{
  background: #888; opacity: 1;
}

.mq-hero-3swipers .my-prev,
.mq-hero-3swipers .my-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.35); color: #fff;
  border: 0; border-radius: 9999px; cursor: pointer;
}
.mq-hero-3swipers .my-prev{ left: 12px; }
.mq-hero-3swipers .my-next{ right: 12px; }

/* レスポンシブ */
@media (max-width: 1180px){
  .mq-hero-3swipers{ --SIDE-W: 280px; }
}
@media (max-width: 1024px){
  .mq-hero-3swipers .swiper{ height: var(--H-TAB); }
}
@media (max-width: 767.98px){
  .mq-hero-3swipers{
    flex-direction: column;
  }
  .mq-hero-3swipers .swiper{ height: var(--H-SP); }
}