@charset "UTF-8";

/* 価格セクションのcss設定 */
.price_table_section {
  width: 100%;
  background-color: var(--bg-beige);
}

.pts_inner {
  max-width: min(80.55vw, 1160px);
  margin-inline: auto;
  padding-block: min(6.94vw, 100px);
  padding-bottom: min(13.8vw, 200px);
}
@media screen and (max-width: 768px) {
  .pts_inner {
    max-width: 100%;
    padding-top: min(12.7vw, 100px);
    padding-bottom: min(26.04vw, 200px);
    padding-inline: min(5.2vw, 40px);
  }
  @media screen and (max-width: 430px) {
    .pts_inner {
      padding-top: min(23.2vw, 100px);
      padding-bottom: min(46.51vw, 200px);
      padding-inline: min(6.97vw, 30px);
    }
  }
}

/*　価格セクションのタイトル*/
.pts_title_wrapper {
  margin-bottom: min(4.16vw, 60px);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0;
}
.pts_subtitle {
  grid-column: 1;
  grid-row: 1;
}

.pts_title {
  grid-column: 1;
  grid-row: 2;
}

.all_btn {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.pts_subtitle {
  font-size: min(1.38vw, 20px);
  font-weight: 500;
  color: var(--gold--);
}
@media screen and (max-width: 768px) {
  .pts_subtitle {
    font-size: min(2.54vw, 20px);
  }
  @media screen and (max-width: 430px) {
    .pts_subtitle {
      font-size: min(3.48vw, 15px);
    }
  }
}

.pts_title {
  position: relative;
  font-size: min(3.47vw, 50px);
  font-weight: 700;
  color: var(--text-color);
}
.pts_title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 4px;
  margin-left: min(1.39vw, 20px);
  background-color: var(--text-color);
}
@media screen and (max-width: 768px) {
  .pts_title {
    font-size: min(3.9vw, 30px);
  }
  @media screen and (max-width: 430px) {
    .pts_title {
      font-size: min(4.65vw, 20px);
    }
  }
}

/*価格一覧ページへのリンク*/
.all_btn {
  display: inline-block;
  font-size: min(1.38vw, 20px);
  font-weight: 500;
  color: var(--text-color);
  margin-top: min(1.38vw, 20px);
  padding: min(0.83vw, 12px) min(1.66vw, 24px);
  border: 2px solid var(--text-color);
  border-radius: min(0.35vw, 5px);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .all_btn {
    font-size: min(1.95vw, 15px);
  }
  @media screen and (max-width: 430px) {
    .all_btn {
      font-size: min(2.32vw, 10px);
    }
  }
}

.all_btn::after {
  content: "→";
  margin-left: min(0.69vw, 10px);
  transition: transform 0.3s ease;
  display: inline-block;
}

.all_btn:hover::after {
  transform: translateX(5px);
  color: var(--text-color);
}

/* スクロール案内テキスト */
.scrool_text {
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
  color: #555;
  text-align: right;
}
.scrool_text::after {
  content: "→";
  display: inline-block;
  margin-left: 5px;
  animation: scrollArrow 0.8s infinite alternate;
}
@keyframes scrollArrow {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(5px);
  }
}

/* 価格表の設定のテーブル */

/* ヘッダータイトルセル（左側3列分） */
.header-title-left {
  background-color: #3c3c3c;
  padding: 20px 15px;
  border: 1px solid #ddd;
  vertical-align: middle;
}

.title-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* タイトル */
.price-table-title {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #fff;
}

/* 凡例 */
.price-table-legend {
  text-align: left;
  margin: 0;
  font-size: 12px;
  color: #fff;
  font-weight: normal;
}

/* 時間帯ヘッダー */
.time-header {
  font-size: 16px;
  font-weight: bold;
  padding: 20px 15px;
}

.time-header .price-table-title {
  color: #fff;
  font-size: 20px;
  text-align: center;
  margin: 0 0 10px 0;
}

.time-header .price-table-legend {
  display: flex;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

/* 空白セル */
.empty-cell {
  background-color: #3c3c3c;
}

.legend-item {
  display: inline-block;
  margin-right: 15px;
}

.color-box {
  display: inline-block;
  width: 20px;
  height: 14px;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid #999;
}

.color-2year {
  background-color: #b4c7dc;
}

.color-3month {
  background-color: #d9d2c5;
}

.color-1month {
  background-color: #e6d5bf;
}

/* テーブルラッパー（Flexコンテナ） */
.table-wrapper {
  display: flex;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 固定列テーブル */
.table-fixed {
  flex-shrink: 0;
}

/* スクロール可能テーブル */
.table-scroll {
  flex-grow: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーを非表示 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit系ブラウザ（Chrome, Safari）のスクロールバーを非表示 */
.table-scroll::-webkit-scrollbar {
  display: none;
}

/* 共通のテーブルスタイル */
.price-table-left,
.price-table-right {
  border-collapse: collapse;
  background-color: #fff;
  font-size: 14px;
}

.price-table-left {
  width: auto;
}

.price-table-right {
  min-width: 900px;
  width: 100%;
}

/* 左側テーブルのヘッダーの高さを調整 */
.price-table-left thead tr:first-child th {
  height: 155px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .price-table-left thead tr:first-child th {
    height: 128px;
  }
}
@media screen and (max-width: 430px) {
  .price-table-left thead tr:first-child th {
    height: 127px;
  }
}

/* ヘッダー */
.price-table-left thead th,
.price-table-right thead th {
  padding: 15px 10px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #ddd;
  white-space: nowrap;
}

.header-dark {
  background-color: #3c3c3c;
  color: #fff;
  vertical-align: middle; /*中央配置*/
}

.header-light {
  background-color: #666;
  color: #fff;
}

/* テーブルボディ */
.price-table-left tbody td,
.price-table-right tbody td {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid #ddd;
  white-space: nowrap;
}

/* 部屋名 */
.room-name {
  background-color: #3c3c3c;
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding-left: 15px !important;
}

/* 価格セルの背景色 */
.price-cell {
  font-weight: 500;
}

/*border-rightの消去*/
.no-r-border {
  border-right: none !important;
}

.bg-2year {
  background-color: #b4c7dc;
}

.bg-3month {
  background-color: #d9d2c5;
}

.bg-1month {
  background-color: #e6d5bf;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .price-table-wrapper {
    padding: 20px 10px;
  }

  .price-table-title {
    font-size: 22px;
  }

  .price-table-legend {
    font-size: 12px;
  }

  .legend-item {
    display: block;
    margin-bottom: 5px;
  }

  .price-table-left,
  .price-table-right {
    font-size: 12px;
  }

  .price-table-left thead th,
  .price-table-left tbody td,
  .price-table-right thead th,
  .price-table-right tbody td {
    padding: 8px 5px;
  }

  .room-name {
    padding-left: 8px !important;
  }
}

/* 印刷用スタイル */
@media print {
  .price-table-wrapper {
    max-width: 100%;
  }

  .table-scroll {
    overflow: visible;
  }

  .price-table-left,
  .price-table-right {
    font-size: 10px;
  }
}

/*価格表示説明*/
.pts_tax_p {
  font-size: 12px;
  color: #555;
  margin-top: 20px;
  text-align: right;
}