@charset "UTF-8";
/* style.css */
.top_column_swiper-container {
  margin-bottom: 50px;
}

/* 全体コンテナ */
.swiper-container,
.btn-more {
  max-width: 800px;
  overflow: hidden;
  margin: 0 auto;
}

.swiper-container {
  margin-left: 20px;
}

/* 各スライド */
.swiper-slide {
  box-sizing: border-box;
  width: 270px; /* カード幅 */
  padding-bottom: 1rem;
}

/* 画像のトリミング＋アスペクトを保ったクロップ */
.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover; /* 中心を基準にトリミング */
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* キャプション */
.slide-caption {
  font-size: 0.9rem;
  color: #333;
  text-align: left;
}

/* ドットナビ */
.swiper-pagination {
  margin-top: 0.5rem;
  bottom: auto !important;
}

/* “もっと見る” ボタン */
.btn-more {
  display: block;
  width: 100%;
  margin: 1.5rem auto 0;
  padding: 0.75rem 0;
  text-align: center;
  border: 1px solid #003f71;
  border-radius: 4px;
  color: #003f71;
  text-decoration: none;
}

/* style.css */
/* カルーセルの下に余白をつくる */
.swiper-container {
  margin-bottom: 0; /* 下余白は pagination-wrapper で調整 */
}

/* pagination のラッパー */
.pagination-wrapper {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 0px;
}

/* ドットのスタイルはそのまま */
.swiper-pagination {
  display: inline-block;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.25rem;
  background: #ccc;
  opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: #003f71;
}

/* “もっと見る” ボタン */
.btn-more {
  display: block;
  width: calc(100% - 40px);
  margin: 0 auto 2rem; /* pagination-wrapper とボタンのあいだ */
  padding: 0.75rem 0;
  text-align: center;
  border: 1px solid #003f71;
  border-radius: 4px;
  color: #003f71;
  text-decoration: none;
  font-weight: 600;
}

.swiper-pagination {
  position: relative;
}

/* ふわっとしたホバー効果 */
/* 画像にかけるフィルターに対しては img 自身に transition を */
.swiper-slide a img {
  transition: filter 0.4s ease;
}

/* キャプションの色変化に対してはキャプション要素自身に transition を */
.slide-caption {
  transition: color 0.4s ease;
}

/* ホバー時のフィルター */
.swiper-slide a:hover img {
  filter: brightness(1.03) saturate(1.05) contrast(0.98);
}

a {
  text-decoration: none;
}

.top_column_title {
  text-align: center;
  margin: 30px 0 15px 0;
}
.top_column_title h2 {
  font-size: 18px;
  margin: 0;
}

.top_column_title_subtitle {
  font-size: 14px;
  margin: 0;
}

.swiper-wrapper {
  font-weight: 600;
}/*# sourceMappingURL=top_column.css.map */