@charset "UTF-8";
/* ========================
料金ページ全体
======================== */
.page-title-area::before {
  background-image: var(--overlay-page-title),
    url(../images/page-title/page-title-price.jpg);
  background-position: center 40%;
}

#price .price-table {
  font-size: var(--size-large);
  /* margin: 0 auto; */
}

#price .price-table th {
  /*見出しは表示しないがアクセシビリティ配慮のため要素は残す*/
  display: none;
}

#price .price-table td {
  padding-bottom: var(--spacing-text-normal);
  /* text-align: center; */
}

#price .price-table tbody tr td:first-child {
  padding-right: 24px;
}

#price .price-table tr td:nth-child(even) {
  font-weight: var(--font-weight-noto-sans-bold);
}

#price .price-table tbody tr:last-child td {
  padding-bottom: 0;
}

/*スマートフォン*/
@media screen and (max-width: 767px) {
}

/* ========================
基本料金部分
======================== */
#price .price-table.basic {
  margin: 0 auto;
}

#price .price-table.basic table {
  /* overflow: hidden; */
  border-collapse: collapse;
}

/* ========================
パック料金部分
======================== */
#price .price-box-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--gutter-medium-pc);
}

#price .price-box {
  max-width: 350px;
  width: 100%;
  padding: 24px 0;
  border-radius: 8px;
  background-color: var(--color-base-second);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--margin-element-medium-pc);
}

#price .price-box .titles {
  text-align: center;
}

#price .price-box .titles .content-title {
  margin-bottom: var(--spacing-text-extra-small);
}

#price .price-box .titles .note {
  font: var(--font-text-small);
}

#price .price-box.always .titles .content-title {
  color: var(--color-sub);
}

#price .price-box.night .titles .content-title {
  color: var(--color-accent-second);
}

#price .price-box .price-table {
  width: fit-content;
}

/*スマートフォン*/
@media screen and (max-width: 767px) {
  #price .price-box-list {
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-medium-pc);
  }

  #price .price-box {
    gap: var(--margin-element-medium-sp);
  }
}