/* ======================================= 
   ファイル名: accommodation-plans-custom.css
   ======================================= */

/* おすすめ宿泊プラン セクション全体 */
.recommend-plans-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  box-sizing: border-box;
  color: #12458f;
  position: relative;
  text-align: center; 
}

/* タイトル中央配置：左右に無限に伸びる線 */
.recommend-plans-section .section-title {
  display: block;
  width: 100%;
  margin: 0 auto 50px;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  color: #12458f;
  position: relative;
  text-align: center;
  overflow: hidden; /* 線の飛び出しをカット */
}

.recommend-plans-section .section-title span {
  display: inline-block;
  position: relative;
  padding: 0 30px;
}

.recommend-plans-section .section-title span::before,
.recommend-plans-section .section-title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100vw;
  height: 1px;
  background-color: #12458f;
}

.recommend-plans-section .section-title span::before {
  right: 100%;
}

.recommend-plans-section .section-title span::after {
  left: 100%;
}

/* プランカードのラッパー */
.recommend-plans-section .plans-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  width: 100%;
}

/* 各プランカード */
.recommend-plans-section .plan-card {
  width: calc((100% / 4) - 22.5px);
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.recommend-plans-section .plan-card:hover {
  transform: translateY(-5px);
}

.recommend-plans-section .plan-card img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(18, 69, 143, 0.2);
  margin-bottom: 15px;
  display: block;
}

/* 修正箇所：テキストの行間調整 */
.recommend-plans-section .plan-card p {
  font-size: 14px;
  line-height: 1.4; /* 1.6から1.4に詰める */
  color: #12458f;
  margin: 0;
  /* white-space: pre-line; を削除（HTMLの改行コードによる余分な隙間を防ぐ） */
}

/* 下部リンクラッパー */
.recommend-plans-section .plans-link-wrapper {
  text-align: center;
  margin-top: 40px;
}

.recommend-plans-section .plans-link-button {
  display: inline-block;
  padding: 10px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #12458f;
  border: 2px solid #12458f;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.recommend-plans-section .plans-link-button:hover {
  background-color: #12458f;
  color: #fff;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .recommend-plans-section .plans-wrapper {
    flex-direction: column;
    gap: 30px;
  }
  .recommend-plans-section .plan-card {
    width: 100%;
  }
}

/* --- カード全体のリンク化対応 --- */

/* aタグ自体のリセット */
.recommend-plans-section .plan-card-link {
  display: block;          /* カード全体をリンク領域にする */
  text-decoration: none;   /* 下線を消す */
  color: inherit;          /* 文字色を親要素から引き継ぐ */
  transition: opacity 0.3s ease;
}

/* ホバー時の挙動をaタグ側に持たせる */
.recommend-plans-section .plan-card-link:hover {
  opacity: 0.8;
}

/* 既存の .plan-card p を .plan-card-link にあわせる */
.recommend-plans-section .plan-card p {
  font-size: 14px;
  line-height: 1.4;
  color: #12458f; /* リンク化しても色は維持 */
  margin: 0;
  text-align: center;
}

/* 画像の微調整（リンク枠内でブロック要素にする） */
.recommend-plans-section .plan-card-link img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(18, 69, 143, 0.2);
  margin-bottom: 15px;
  display: block;
}