/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 05 2026 | 05:58:43 */
/* =========================================
   Attraction Grid (観光地のカード一覧)
   ========================================= */
.attraction-container {
  max-width: 1200px;
  margin: 70px auto;
  padding: 0 20px; padding-bottom: 70px;
}

.attraction-grid {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.attraction-card {
  flex: 1;
  min-width: 350px;
  cursor: pointer;
  /* 文字を動かさないため、カード全体のアニメーションは削除 */
}

/* 画像を囲む枠（ここでoverflow: hiddenをかけ、枠外への拡大を防ぐ） */
.attraction-image-wrapper {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden; 
}

/* 画像本体のトランジション指定（元のCSSの動きを反映） */
.attraction-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease; 
}

/* カードホバー時に画像のみズームイン */
.attraction-card:hover .attraction-image {
  transform: scale(1.1);
}

.attraction-content {
  margin-top: 20px;
  text-align: left;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

/* タイトルを少し大きめに変更 (1.4rem) */
.attraction-title {
  color: #C0392B;
  margin-bottom: 5px;
  font-size: 1.4rem;
}

.attraction-description {
  color: #7F8C8D;
  font-size: 15px;
  margin: 0;
}

/* =========================================
   Responsive (スマホ・タブレット対応)
   ========================================= */
@media screen and (max-width: 768px) {
  .attraction-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .attraction-card {
    width: 100%;
    max-width: 400px;
  }

  .attraction-image-wrapper {
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .attraction-content {
    max-width: 100%;
  }
}

/* =========================================
   Section Title (各セクションの見出し)
   ========================================= */
.attraction-container h2.section-title,
.section-title {
  color: #C0392B !important; /* !importantで元のスタイルに強制的に打ち勝つ */
  font-size: 2rem !important; /* サイズも負けている場合はこれを入れてください */
  margin-top: 60;
  margin-bottom: 40px;
  text-align: left;
}

/* スマホ用のタイトルサイズ調整 */
@media screen and (max-width: 768px) {
  .attraction-container h2.section-title,
  .section-title {
    font-size: 2rem !important;
    margin-bottom: 30px;
  }
}

/* =========================================
   Date Info (開催時期とカレンダーアイコン)
   ========================================= */
.attraction-date-info {
  color: #555555;
  font-weight: 500;
  font-size: 0.95rem;
  margin-top: 5px;
  margin-bottom: 8px; /* 下の説明文との余白。広すぎる場合は数値を小さくしてください */
  display: flex; /* アイコンと文字を横並びにする */
  align-items: center;
  gap: 6px; /* アイコンと文字の間の隙間 */
}

/* モダンなカレンダーアイコン（画像を使わずCSSだけで描画します） */
.attraction-date-info::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  /* 色はテキストと同じダークグレー(#555555)に設定しています */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* =========================================
   Hotel Star Rating (ホテルの星アイコン)
   ========================================= */
.hotel-star-rating {
  display: flex;
  align-items: center;
  gap: 3px; /* 星同士の隙間 */
  margin-top: 5px;
  margin-bottom: 8px; /* 下の説明文との余白 */
}

.hotel-star-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* モダンなゴールド（#F39C12）の星型SVGアイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F39C12'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}