@charset "UTF-8";

/* =========================================================
   JP 保険・補償制度  -  /insurance

   このページは専用テンプレートを持たず、本文（post_content）がそのまま出る。
   見出しの大きさ・行間・色が本文に style 属性で直書きされているため、
   ここで上書きして他の下層ページと体裁を揃える。

   揃える基準は料金ページ（css/jp-price.css）:
     インナー幅 1210px・左右15px / 見出しの色 #212121 /
     h2 は「左の赤い縦棒＋下の薄い赤の罫線」

   直書きの指定に勝つ必要がある箇所だけ !important を付けている。
   本文を書き換えれば !important は外せるが、本文はDBにあり
   管理画面での作業になるため、ここではコードだけで完結させている。
   ========================================================= */

/* ---------------------------------------------------------
   ラッパー幅
   親の .inner は全ページ共通なので触らず、このページの本文の入れ物側で絞る。
   --------------------------------------------------------- */
.pg-body {
  /* インナー幅は料金ページ（.inner-1210）と同じ 1210px・左右15px にする */
  max-width: 1210px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* 上余白はパンくずとタイトルの間隔。ご利用案内ページと同じ23pxにする */
  padding-top: 23px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* パンくず（#topicpath）は .inner の外に出力されていて、
   幅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 は 32px / 700 / 1.4（SP 24px）、h2 は 24px / 800 / 1.3（SP 18px）。
   --------------------------------------------------------- */
.pg-body h1 {
  /* 共通CSSがこの h1 に padding: 40px 0 20px を当てている。
     上の40pxでパンくずとの間隔がこのページだけ広くなり、
     下の20pxで説明文との間隔も広くなっていたので、どちらも打ち消す */
  padding: 0 !important;
  /* 色も料金ページのタイトルと同じ #212121 にする */
  color: #212121 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  /* 料金ページのタイトルに合わせて左寄せ（本文に直書きの center を上書き） */
  text-align: left !important;
  margin-bottom: 16px !important;
}

/* h2 のあしらいは料金ページの h2（css/jp-price.css の .heading03）と同じ
   「左の赤い縦棒＋下の薄い赤の罫線」にする。
   旧デザインの黄色い左線は外す。色（本文に直書きのグレー）は変えない。 */
.pg-body .icon-text h2.title {
  display: flex !important;
  align-items: center;
  gap: 12px;
  color: #212121 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 0 24px !important;
  padding: 0 0 16px !important;
  border-left: none !important;
  background: none !important;
  border-bottom: 2px solid rgba(230, 51, 18, 0.3) !important;
}

.pg-body .icon-text h2.title::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: #e63312;
}

/* ---------------------------------------------------------
   本文
   16px / 行間1.7（SP 15px）。

   !important が2か所とも要る:
   - font-size … css/add-package.css の .pg-body p が 14px !important を持つ
   - line-height … 本文に line-height:20px が直書きされている
   --------------------------------------------------------- */
.pg-body .pg-text > p,
.pg-body .icon-text .content,
.pg-body .icon-text .content p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: 0;
}

/* タイトル直下の説明文まわりの余白を、レンタル場所ページ（.p-shops__lead）に揃える。
   あちらは タイトル下24px / 説明文下48px。

   タイトル側の margin-bottom は本文に style="margin-bottom: 30px !important" と
   直書きされていて、CSSからは上書きできない（インラインの !important が最優先）。
   そのため差の6pxを説明文側の負のマージンで詰めている。
   本文の直書きを消せる場合は、こちらの margin-top も一緒に外せる。 */
.pg-body .pg-row > h1 + .pg-text {
  margin-top: -6px;
  margin-bottom: 48px;
}

/* 本文の1行を短くする。
   ラッパー幅いっぱい（1180px）に16pxの日本語を流すと1行73文字になり、
   目が次の行の頭に戻れず読みにくい。1行50文字前後に収める。
   表は全幅のまま（列が詰まると逆に読みにくいため）。 */
.pg-body .pg-text > p,
.pg-body .icon-text .content > p {
  max-width: 800px;
}

/* 段落どうしの間隔。ロードアシストの「1.」「2.」「3.」のように
   別々の項目が段落で並ぶ箇所があり、詰まっていると塊が分からない */
.pg-body .icon-text .content > p {
  margin: 0 0 16px;
}

.pg-body .icon-text .content > p:last-child {
  margin-bottom: 0;
}

/* 項目どうしの間隔はここでは指定しない。
   本文側のクラス（.vc_custom_… ）が margin-bottom: 60px !important を持っており、
   5項目とも同じ値で揃っている。ここで書いても効かないため置かない。 */

/* PCだけで効かせる改行。本文に <br class="pc-br"> を入れた箇所で改行する。
   上の max-width: 800px で1行が区切られるため、長い項目だと
   カッコ書きが行の途中で割れて読みにくくなる箇所がある。
   （例:「保険・補償制度やCDW、NOCWの適用除外例」の油種間違いの項目）
   SPは画面幅で自然に折り返るので、この改行は下の SP ブロックで消している。 */

/* ---------------------------------------------------------
   表（基本補償・ノンオペレーションチャージ）
   共通スタイルは14px・グレー寄りで、行の区切りも細く読みにくかった。
   中古車販売ページの表と同じ考え方で、文字を大きく・余白を広く・
   見出し列に地色を敷いて視線を追いやすくする。
   --------------------------------------------------------- */
.pg-body table.custom-table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}

.pg-body table.custom-table th,
.pg-body table.custom-table td {
  font-size: 15px !important;
  line-height: 1.6;
  color: #212121;
  padding: 14px 16px;
  border: 1px solid #e2e2e2;
  vertical-align: middle;
  text-align: left;
}

/* 行の見出し（左端のセル）。値と見分けられるように地色を敷く */
.pg-body table.custom-table th {
  font-weight: 700;
  background: #f9f9f9;
}

/* 「基本補償」のように表全体の見出しになっているセルは、
   本文に直書きされた地色（#FCEAC2）をそのまま活かす */
.pg-body table.custom-table th.center {
  text-align: center;
  font-size: 16px !important;
}

/* ---------------------------------------------------------
   SP
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .pg-body {
    padding-left: 15px;
    padding-right: 15px;
  }

  .pg-body h1 {
    font-size: 24px !important;
  }

  /* SPも料金ページの h2 と同じ値にする */
  .pg-body .icon-text h2.title {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
  }

  .pg-body .icon-text h2.title::before {
    height: 20px;
  }

  .pg-body .pg-text > p,
  .pg-body .icon-text .content,
  .pg-body .icon-text .content p {
    font-size: 15px !important;
  }

  /* SPは画面幅が上限になるので、1行を短くする指定は不要 */
  .pg-body .pg-text > p,
  .pg-body .icon-text .content > p {
    max-width: none;
  }

  /* PC用の改行はSPでは消す。SPは画面幅で自然に折り返るので、
     残すと1行だけ不自然に短くなる */
  .pg-body br.pc-br {
    display: none;
  }

  /* 表はSPだと列が詰まりやすいので余白を少し詰める */
  .pg-body table.custom-table th,
  .pg-body table.custom-table td {
    padding: 12px 10px;
  }

}