@charset "UTF-8";

/* =========================================================
   料金ページ（page-price.php）- レンタル基本料金セクションの見た目
   Figma「pricing-season」(node 277:30) の配色・体裁に合わせたもの。
   車種案内（css/jp-vehicles-price.css）と同じトークンを使っている。

   文言とテーブルの中身は変更していない。既存クラス
   （.price-table / .model-name / .period / .*-season / .season-legend /
   .price-notes）にCSSを当て直すだけにとどめる。

   読み込みは page-price.php のインラインstyle（15〜464行）より後ろ。
   同順位のセレクタで競合したときにこちらを勝たせるため。
   ========================================================= */

.inner-1210 {
  /* シーズンごとの帯の色（凡例の文字色と対になる） */
  --pr-off: #e3ecde;
  --pr-regular: #e2ebf9;
  --pr-high: #fff0ca;
  --pr-top: #fdd9d9;
  /* 北海道ウィンターシーズンはFigmaに無い行。
     4シーズンのどれとも混ざらないよう、彩度のない淡いグレーにしている */
  --pr-winter: #ededed;

  --pr-accent: #e63312;
  --pr-line: #a2a2a2;
  --pr-thead-bg: #f9f9f9;
  --pr-card-border: #e0e0e0;
  --pr-text: #212121;
  --pr-text-cell: #333;
}

/* パンくず（#topicpath）は .inner-1210 の外に出力されていて、
   幅1240px・左右余白なしで中央寄せされる。中身は 1210px・左右15px なので、
   このままだと左端が30pxずれる。タイトルは左寄せなのでズレが目に見える。
   パンくず側を中身と同じ箱にして左端を揃える。

   このCSSはこのページでしか読み込まれないので、他のページのパンくずには影響しない。
   max-width に !important が要るのは、全ページ共通の css/add-outoptimize.css が
   同じプロパティを !important で指定しているため。 */
#topicpath {
  max-width: 1210px !important;
  padding-left: 15px;
  padding-right: 15px;
}

/* ---------------------------------------------------------
   セクション見出し（赤い縦バー＋タイトル＋下の細い罫）
   h1「レンタル基本料金（税込）」と、下部の h2 セクション見出しに当てる
   --------------------------------------------------------- */
.inner-1210 .heading02,
.inner-1210 .heading03 {
  display: flex;
  align-items: center;
  gap: 12px;
  position: static;
  padding: 0 0 16px;
  border-bottom: 2px solid rgba(230, 51, 18, 0.3);
  text-align: left;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pr-text);
}

.inner-1210 .heading02::before,
.inner-1210 .heading03::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--pr-accent);
}

/* h1（ページタイトル）は、グロナビ下層ページで見た目を揃える方針により
   ご利用案内ページのタイトル（.p-guide__h1）と同じ 32px / 700 / 1.4 にし、
   あしらい（赤い縦バーと下の罫線）は外す。
   下の h2（.heading03）のあしらいはそのまま残す。 */
.inner-1210 .heading02 {
  /* 上余白はパンくずとタイトルの間隔。他の下層ページと同じ23pxにする */
  margin: 23px 0 40px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

.inner-1210 .heading02::before {
  display: none;
}

.inner-1210 .heading03 {
  /* margin-top はマークアップ側のインラインstyle（50px）に任せる */
  margin-bottom: 24px;
  font-size: 24px;
}

.inner-1210 .heading03::before {
  height: 24px;
}

/* ---------------------------------------------------------
   料金表
   列幅（model-name 50% / period 25%×2）は既存のまま。
   Figmaのシーズン列＋曜日列＝50%、1日・1時間が各25%と同じ比率になっている
   --------------------------------------------------------- */
.inner-1210 .price-table {
  margin-bottom: 40px;
  /* Figmaは影なしのフラットな表 */
  box-shadow: none;
  font-size: 16px;
}

.inner-1210 .price-table th,
.inner-1210 .price-table td {
  height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--pr-line);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pr-text-cell);
}

/* 金額 */
.inner-1210 .price-table td {
  font-size: 18px;
  font-weight: 700;
  color: var(--pr-text);
}

/* 曜日区分（月～木 / 金・土・日・祝）は金額ではないので本文サイズに戻す */
.inner-1210 .price-table td.weekday,
.inner-1210 .price-table td.weekend {
  font-size: 16px;
  font-weight: 400;
  color: var(--pr-text-cell);
}

/* ---- 見出し行 ---- */
/* 車種名。Figmaでは表の外の白カードに置かれているが、
   このページでは表のヘッダーがその役割なので太さは残す */
.inner-1210 .price-table .model-name {
  background-color: var(--pr-thead-bg);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pr-text);
}

.inner-1210 .price-table .period {
  background-color: var(--pr-thead-bg);
  font-size: 16px;
  font-weight: 400;
  color: var(--pr-text-cell);
}

/* ---- シーズン名 ---- */
.inner-1210 .price-table .regular-season,
.inner-1210 .price-table .off-season,
.inner-1210 .price-table .high-season,
.inner-1210 .price-table .top-season,
.inner-1210 .price-table .winter-season {
  font-weight: 400;
}

.inner-1210 .price-table th .season-name {
  font-size: 20px;
  line-height: 1.4;
}

/* Figmaのシーズン名は1行。マークアップの <br> は消さずに効かなくする */
.inner-1210 .price-table th .season-name br {
  display: none;
}

.inner-1210 .winter-season-dates {
  font-size: 13px;
  margin-top: 2px;
}

/* ---- シーズンごとの帯 ----
   金額セルにはシーズンのクラスが付いていない行があるので、
   行の data-season-type を手がかりに行ごとまとめて塗る */
.inner-1210 .price-table tr[data-season-type="low"] th,
.inner-1210 .price-table tr[data-season-type="low"] td,
.inner-1210 .price-table th.off-season,
.inner-1210 .price-table td.off-season {
  background-color: var(--pr-off);
}

.inner-1210 .price-table tr[data-season-type="regular"] th,
.inner-1210 .price-table tr[data-season-type="regular"] td,
.inner-1210 .price-table th.regular-season,
.inner-1210 .price-table td.regular-season {
  background-color: var(--pr-regular);
}

.inner-1210 .price-table tr[data-season-type="high"] th,
.inner-1210 .price-table tr[data-season-type="high"] td,
.inner-1210 .price-table th.high-season {
  background-color: var(--pr-high);
}

.inner-1210 .price-table tr[data-season-type="top"] th,
.inner-1210 .price-table tr[data-season-type="top"] td,
.inner-1210 .price-table th.top-season {
  background-color: var(--pr-top);
}

.inner-1210 .price-table tr[data-season-type="winter"] th,
.inner-1210 .price-table tr[data-season-type="winter"] td,
.inner-1210 .price-table th.winter-season {
  background-color: var(--pr-winter);
}

/* ---------------------------------------------------------
   シーズン区分の凡例
   色見本のブロックはFigmaに無いので隠し、
   シーズン名自体を表の帯と対になる色にする
   --------------------------------------------------------- */
.inner-1210 .season-legend {
  margin: 40px 0;
}

.inner-1210 .season-type {
  margin-bottom: 32px;
}

.inner-1210 .season-type:last-child {
  margin-bottom: 0;
}

.inner-1210 .season-type .season-color {
  display: none;
}

.inner-1210 .season-type__label {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.inner-1210 .season-type--regular .season-type__label {
  color: #2878b5;
}

.inner-1210 .season-type--off .season-type__label {
  color: #2f7d5b;
}

.inner-1210 .season-type--high .season-type__label {
  color: #c58a00;
}

.inner-1210 .season-type--top .season-type__label {
  color: #d65a74;
}

.inner-1210 .season-type__dates {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #000;
}

/* ---------------------------------------------------------
   注意事項（白カード）
   --------------------------------------------------------- */
.inner-1210 .price-notes {
  padding: 24px;
  border: 1px solid var(--pr-card-border);
  border-radius: 8px;
  background: #fff;
}

/* カードの見出し。既存のHTMLに無い文言なのでCSS側で出している
   （実テキストにしたい場合はマークアップに1行足す） */
.inner-1210 .price-notes::before {
  content: "料金に関する注意事項";
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pr-text);
}

.inner-1210 .price-notes p {
  font-size: 13px;
  line-height: 1.6;
  color: #757575;
}

.inner-1210 .price-notes p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   各種割引（カード3枚）
   Figma「discounts-section」(node 288:505)
   アクセントは #e53935 ではなくサイト既存の #e63312 に寄せている
   --------------------------------------------------------- */
/* カードの中身は バッジ / 見出し / 割引率 / 注意書き の4段。
   3枚で割引率の行数が違っても注意書きの開始位置が横に揃うよう、
   段の高さを親のグリッドで決めてカード側は subgrid で受ける。
   （subgrid 非対応のブラウザでは通常のグリッドとして積まれるだけで崩れない） */
.p-discount {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
  margin-bottom: 40px;
}

.p-discount * {
  box-sizing: border-box;
}

.p-discount__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  gap: 20px;
  padding: 32px;
  border: 1px solid #e2e8eb;
  border-radius: 12px;
  background: #fff;
}

.p-discount__badge {
  justify-self: start;
  align-self: start;
  padding: 6px 12px;
  border-radius: 16px;
  background: #fceae6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pr-accent);
  white-space: nowrap;
}

.inner-1210 .p-discount__title {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #222629;
}

/* ---- 割引率 ---- */
/* 1枚目（リピート割引）だけ数字が1つなので大きく中央に置く。
   3段目は他のカードの行数に合わせて伸びるので、その中でも上下中央にする */
.p-discount__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
}

.inner-1210 .p-discount__figure-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7e888c;
}

.p-discount__list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-discount__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.p-discount__row::before {
  content: none;
}

.p-discount__cond {
  font-size: 14px;
  line-height: 1.5;
  color: #4b5357;
}

/* 割引率の文字サイズは行ごとに変えず一律にそろえる */
.p-discount__rate {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pr-accent);
  white-space: nowrap;
}

.p-discount__rate--lg {
  font-size: 48px;
}

/* ---- 注意書き ---- */
.inner-1210 .p-discount__note {
  /* 位置は親グリッドの4段目が決める。3枚とも同じ高さから書き始める */
  margin: 0;
  align-self: start;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5357;
}

/* ---------------------------------------------------------
   タブレット以下
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .inner-1210 .price-table th .season-name {
    font-size: 17px;
  }

  .inner-1210 .price-table td {
    font-size: 16px;
  }

  /* 3枚並べると窮屈なので2列に折り返す。
     カードが2段になると subgrid の段が合わなくなるので、ここからは使わない */
  .p-discount {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 16px;
  }

  .p-discount__card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    padding: 24px;
  }

  /* 段が揃えられないぶん、注意書きはカード下端に寄せる */
  .inner-1210 .p-discount__note {
    margin-top: auto;
  }

  .p-discount__rate--lg {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .inner-1210 .heading02 {
    margin-bottom: 24px;
    padding-bottom: 0;
    /* SPもご利用案内ページのタイトルと同じ24px */
    font-size: 24px;
  }

  .inner-1210 .heading03 {
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 18px;
  }

  .inner-1210 .heading03::before {
    height: 20px;
  }

  .inner-1210 .price-table {
    /* 既存のSP用スタイルが左右にはみ出させていたぶんを打ち消す */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-bottom: 28px;
  }

  .inner-1210 .price-table th,
  .inner-1210 .price-table td {
    height: 44px;
    padding: 6px 4px;
    font-size: 13px;
  }

  .inner-1210 .price-table td {
    font-size: 14px;
  }

  .inner-1210 .price-table td.weekday,
  .inner-1210 .price-table td.weekend {
    font-size: 12px;
  }

  .inner-1210 .price-table .model-name {
    font-size: 14px;
  }

  .inner-1210 .price-table .period {
    font-size: 13px;
  }

  .inner-1210 .price-table th .season-name {
    font-size: 13px;
  }

  /* 狭い画面ではシーズン名を2行に戻したほうが収まりが良い */
  .inner-1210 .price-table th .season-name br {
    display: inline;
  }

  .inner-1210 .winter-season-dates {
    font-size: 11px;
  }

  .inner-1210 .season-type {
    margin-bottom: 24px;
  }

  .inner-1210 .season-type__label {
    font-size: 17px;
  }

  .inner-1210 .season-type__dates {
    font-size: 14px;
  }

  .inner-1210 .price-notes {
    padding: 16px;
  }

  /* 割引カードは縦積み */
  .p-discount {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .p-discount__card {
    gap: 16px;
    padding: 20px;
  }

  .inner-1210 .p-discount__title {
    font-size: 18px;
  }

  .p-discount__cond {
    font-size: 13px;
  }

  .p-discount__rate {
    font-size: 22px;
  }

  .p-discount__rate--lg {
    font-size: 40px;
  }

  .inner-1210 .p-discount__note {
    font-size: 12px;
  }
}