.pricing-section {
  text-align: center;
  padding: 60px 20px;
  background: #f9f9f9;
}

.section-title {
  font-size: 2em;
  margin-bottom: 40px;
  color: #333;
}

.pricing-cards {
  display: grid;
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.pricing-card {
position: relative; /* 絶対配置用の基準 */
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 30px 20px;
  width: 480px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.pricing-card .plan-title {
  font-size: 1.4em;
  color: #444;
  margin-bottom: 10px;
  align-items: center;
}

.pricing-card .price {
  font-size: 2.2vw;
  color: #ff5e5e;
  margin-bottom: 5px;
}

/*
.room-card .price {
  font-size: 4.2vw;
  color: #ff5e5e;
  margin-bottom: 5px;
}
*/
.pricing-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.pricing-card .features li {
  margin: 10px 0;
  font-size: 0.95em;
}


.pricing-card .corner-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #0078d4; /* ブランドカラー */
  color: white;
  border: none;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,120,212,0.4);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;
}

.pricing-card .corner-btn:hover {
  background: #005a9e;
  box-shadow: 0 6px 12px rgba(0,90,158,0.6);
}

.reserve-btn {
  display: none;
  background: #ff5e5e;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s;
}

.reserve-btn1 {
  display: none;
  background: #1983da;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s;
}

.reserve-btn:hover {
  background: #e94d4d;
}

/* おすすめプランを目立たせる */
.pricing-card.recommended {
  border: 2px solid #ff5e5e;
  background: #fff5f5;
}

.bg-image-box-hanakoganei {
  background-image: url('../images/hanakoganei_room1.jpg'); /* パスは実際の画像の場所に変更 */
  background-size: cover;                /* 画面いっぱいに拡大 */
  background-position: center;           /* 中央寄せ */
  background-repeat: no-repeat;          /* 繰り返さない */
  height: 200px;                         /* 高さ（任意） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;                          /* 文字を白くする（背景と区別） */
  text-align: center;
  padding: 20px;
}

.bg-image-box-hitotubashigakuen {
  background-image: url('../images/hitotubashi_room1.jpg'); /* パスは実際の画像の場所に変更 */
  background-size: cover;                /* 画面いっぱいに拡大 */
  background-position: center;           /* 中央寄せ */
  background-repeat: no-repeat;          /* 繰り返さない */
  height: 200px;                         /* 高さ（任意） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;                          /* 文字を白くする（背景と区別） */
  text-align: center;
  padding: 20px;
}

.bg-image-box-yazaka {
  background-image: url('../images/yazaka_room1.jpg'); /* パスは実際の画像の場所に変更 */
  background-size: cover;                /* 画面いっぱいに拡大 */
  background-position: center;           /* 中央寄せ */
  background-repeat: no-repeat;          /* 繰り返さない */
  height: 200px;                         /* 高さ（任意） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;                          /* 文字を白くする（背景と区別） */
  text-align: center;
  padding: 20px;
}


.bg-image-box {
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}

/* スライダー枠を整える */
.img-swiper {
  height: 200px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

/*S imageサイズ調整（ファイルサイズがバラバラでも枠に合わせる） S*/
.swiper-container,
.swiper-slide {
   height: 100vh;
}
.swiper-slide > img {
   object-fit: cover; /* IE: not support */
   width: 100%;
   height: 100%;
}

/*E imageサイズ調整（ファイルサイズがバラバラでも枠に合わせる） E*/

.custom-nav i {
  font-size: 20px;
  color: #333;
}
.custom-nav:hover i {
  color: white;
}

.pricing-card .info {
  /* white-space:nowrap; */
  width:100%;
  font-size: clamp(5px, 5vw, 12px);
  /*font-size: 1.2vw;*/
  color: #0a0a0a;
  margin-bottom: 5px;
}

.room-card .info {
  /* white-space:nowrap; */
  width:100%;
  font-size: clamp(10px, 5vw, 13px);
  /*font-size: 1.2vw;*/
  color: #0a0a0a;
  margin-bottom: 5px;
}




@media (max-width: 768px) {
  .pricing-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px 20px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .pricing-card .info {
    white-space:nowrap;
    width:100%;
    font-size: 12px;
    /*font-size: 1.2vw;*/
    color: #0a0a0a;
    margin-bottom: 5px;
  }

  .pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.reserve-btn {
  display: inline-block;
  /* background: #ff5e5e; */
  background: linear-gradient(90deg, #cb3707, #fb9474, #cb3707);
  border: 2px solid #FFF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s;
}

.reserve-btn1 {
  display: inline-block;
  background: #1983da;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s;
}
}