@charset "UTF-8";
/* CSS Document */

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 1.5rem;
  z-index: 10;
  right: 3%;
  left: 3%;
}


/* デフォルト（md以下）での小さいサイズ */
.carousel-caption img {
  max-width: 60%; /* 好みのサイズに調整 */
}

/* md以上では元のサイズに戻す */
@media (min-width: 768px) {
  .carousel-caption img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* 画像の伸縮を防止 */
    width: auto !important;
    max-height: 120px; /* 必要に応じて調整 */
  }
  .carousel-caption {
    bottom: 5rem;
    z-index: 10;
  }
}

.carousel-item {
  height: auto;
  max-height: 500px; /* 最大高さを設定 */
  overflow: hidden;
}

.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 画像が比率を維持しながらコンテナをカバー */
}