/* Custom CSS */

/* KV Slider */
.index-kv {
  height: auto;
}

.index-kv .splide__slide {
  width: min(90vw, 1100px);
  aspect-ratio: 16/9;
}

.index-kv .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
.market-brand .splide__slide {
  width: min(90vw, 150px);
  aspect-ratio: 16/9;
}
.market-brand .splide__slide img {
  width: 100%;
  height: auto;
}
*/

.splide__pagination.slide-pagination.slide-pagination--kv {
  margin-top: min(5vw, 32px);
}

.hover__img img {
  transform: translate(0, 0);
  width: 100%;
}

.hover__wrapper:hover .hover__img img {
  transform: scale(1.05);
}
/* =========================================================
 * Kantar Marketplace セクション入れ替えに伴う余白調整（2026-07-29）
 *
 * 入れ替え前: KV →(140px) BrandSnapshot → 世界のトップブランド →(120px) 黒メッセージ
 * 入れ替え後: KV →(140px) 世界のトップブランド → BrandSnapshot →(120px) 黒メッセージ
 *
 * app.css は上余白を .market-about だけに持たせている（.market-slide は余白なし）。
 * 入れ替えると「KV直下に余白ゼロ」「BrandSnapshotのボタンが黒背景に直付け」に
 * なるため、上余白を .market-slide へ移し、下余白を .market-about に持たせる。
 * 【戻し方】このブロックを削除し、PHP のセクション順を元に戻す
 * ========================================================= */
.market-slide {
  margin-top: 90px; /* 元の .market-about{margin-top:90px} と同値 */
}

.market-about {
  margin-top: 0; /* 上余白は .market-slide へ移動 */
  padding-bottom: 80px; /* 黒背景（.market-message）との間隔 */
}

@media screen and (min-width: 768px) {
  .market-slide {
    margin-top: min(11.6666666667vw, 140px); /* 元の .market-about と同値 */
  }

  .market-about {
    padding-bottom: min(10vw, 120px);
  }
}