@charset "utf-8";

.list1 .text h4 {
  white-space: nowrap;     /* テキストを改行させず1行にする */
  overflow: hidden;        /* はみ出た部分を非表示にする */
  text-overflow: ellipsis; /* はみ出た部分を ... にする */
}

/* 基本設定（PC・大きめの画面用） */
.list1 .image {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: 280px; /* PCでの最大高さ制限 */
  background-color: #f5f5f5; /* 画像余白の背景色 */
}

.list1 .image a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.list1 .image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像を切り抜かず全体を表示 */
  object-position: center;
}

/* スマホ用設定 (画面幅768px以下の場合) */
@media (max-width: 768px) {
  .list1 .image {
    max-height: 240px; /* スマホでの最大高さ制限 */
  }
}


/* 詳しく見るボタンの強化（目立たせる設定） */
.btn.inverse a {
  display: inline-block;
  padding: 8px 24px;                          /* 上下左右の余白を広げて押しやすく */
  background: var(--primary-inverse-color);   /* 背景色（白） */
  color: var(--primary-color);               /* 文字色（#bc7b60） */
  border: 2px solid var(--primary-color);     /* メインカラーのくっきりした枠線を追加 */
  border-radius: 30px;                       /* 角を丸くしてボタンらしく */
  font-weight: bold;                         /* 文字を太字に */
  text-decoration: none;                     /* 下線を消す */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);   /* やわらかい影を付けて立体感を与える */
  transition: all 0.3s ease;                 /* ホバー時の変化を滑らかに */
}

/* マウスホバー時の変化（色を反転させて目立たせる） */
.btn.inverse a:hover {
  background: var(--primary-color);          /* 背景色をメインカラーに変更 */
  color: var(--primary-inverse-color);       /* 文字色を白に変更 */
  box-shadow: 0 4px 12px rgba(188, 123, 96, 0.3); /* メインカラーのほんのり光る影 */
  transform: translateY(-2px);               /* 浮き上がるような動きを追加 */
}