/* ─── フッタ直上の画像スライド表示（参考サイト top_under.twig の表現を再現） ─── */
.top-slideshow-section {
  padding: 20px 0;
  background: var(--color-black);
}

.top-slideshow-tilted {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.top-slideshow-tilted-img {
  width: 30%;
  max-width: 260px;
  border-radius: var(--radius-1);
  transform: rotate(5deg);
  transition: transform 0.3s ease;
}

.top-slideshow-tilted-img:hover {
  transform: rotate(0deg);
}

.top-slideshow-swiper-wrap {
  padding: 20px 0;
}

/* スライド表示部分とナビゲーションボタンを横並びにし、ボタンを画像領域の外側に配置する */
.top-font-swiper-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

.top-font-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--color-black);
  padding: 40px 0 20px;
}

/* Swiper標準の絶対配置を解除し、画像領域の外側にある通常のflex要素として並べる。
   <button>要素化に伴うOS標準の背景・枠線もあわせて解除する */
.top-font-swiper-row .swiper-button-prev,
.top-font-swiper-row .swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 0;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  appearance: none;
  color: var(--color-white);
  cursor: pointer;
  transition: color 0.2s ease;
}

.top-font-swiper-row .swiper-button-prev:hover,
.top-font-swiper-row .swiper-button-next:hover {
  color: var(--color-yellow);
}

.top-font-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-1);	/*8px;*/
  background: var(--color-white);
}

.top-font-swiper-caption {
  margin-top: 10px;
  text-align: center;
}

.top-font-swiper-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-white);
}

.top-font-swiper-designer {
  font-size: 11px;
  color: var(--color-gray);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .top-slideshow-tilted {
    gap: 20px;
    margin-bottom: -20px;
  }

  .top-font-swiper-row {
    padding: 0 12px;
    gap: 6px;
  }

  .top-font-swiper-row .swiper-button-prev,
  .top-font-swiper-row .swiper-button-next {
    --swiper-navigation-size: 20px;
  }
}