@charset "utf-8";
/* 追加：下部に配置する大きめの画像用コンテナ */
.banner-container-large {
  display: block;
  max-width: 1200px;       /* 3つの画像全体の横幅と揃える */
  margin: 0 auto 30px auto;/* 上部（3つの画像）との間隔と、下部の余白 */
  padding: 0 15px;
  box-sizing: border-box;
}

/* 追加：大きめのリンクボタンの基本設定とホバーアニメーション */
.banner-item-large {
  display: block;
  width: 100%;
  max-width: 1020px;       /* 画像が大きくなりすぎないように上限を指定（お好みで調整してください） */
  margin: 0 auto;          /* 中央寄せ */
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;      /* 角を少し丸める */
  overflow: hidden;
}

/* 追加：大きめの画像の設定 */
.banner-item-large img {
  display: block;
  width: 100%;
  height: auto;
}

/* ★カーソルを合わせたとき（ホバー時）の動き（3つ並びと同様のふわっと浮き上がる動き） */
.banner-item-large:hover {
  transform: translateY(-5px);
  opacity: 0.9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


/* 3つの画像を横並びにするコンテナ */
.banner-container {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 20px;               /* 画像同士の間隔（お好みで調整） */
  max-width: 1200px;       /* 全体の最大幅（サイトの仕様に合わせて調整） */
  margin: 30px auto;       /* 上下の余白 */
  padding: 0 15px;         /* スマホ等での左右の余白 */
  box-sizing: border-box;
}

/* リンクボタンの基本設定とホバーアニメーション */
.banner-item {
  display: block;
  flex: 1;                 /* 3等分で均等に配置 */
  max-width: 500px;        /* 元の画像サイズを上限にする */
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; /* 変化をなめらかに */
  border-radius: 8px;      /* 角を少し丸める（不要なら削除してください） */
  overflow: hidden;        /* 角丸を画像にも適用 */
}

/* 画像がコンテナ幅を超えないようにする設定 */
.banner-item img {
  display: block;
  width: 100%;
  height: auto;            /* 縦横比を維持 */
}

/* ★カーソルを合わせたとき（ホバー時）の動き */
.banner-item:hover {
  transform: translateY(-5px); /* 上に5px浮き上がる */
  opacity: 0.9;                /* ほんのり明るく（透明度を下げる） */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* 影をつけて立体感を出す */
}

/* スマートフォンなどの画面が狭い時の対応（縦並びにする） */
@media (max-width: 768px) {
  .banner-container {
    flex-direction: column;
    align-items: center;
  }
  .banner-item {
    width: 100%;
    max-width: 400px; /* スマホで見やすいサイズに制限 */
  }
}