@charset "UTF-8";
/* ==========================================================================
   legal-b.css — 法的表記ページ専用のスタイル

   このファイルは **法的表記のページからのみ読み込む。**
   2026-08-26 現在、読み込んでいるのは次の2ページ。
     /tokushoho/ … 特定商取引に関する表記（G-2 の表を使う）
     /privacy/  … プライバシーポリシー（G-4 の文書パーツを使う）
   ページ名ではなく「legal」という名前にしてあるのはこのため。

   FV（.b-svc-hero）・地色・セクション共通（.b-svc-sec / .b-svc-lead）は
   service-b.css を流用している。ここには法的表記ページ固有のものだけを書く。

   使うトークン：--b-title / --b-line / --b-bg-tint / --c-ink /
   --fw-bold / --fw-label / --radius / --b-svc-sec-gap
   （すべて home-b.css・service-b.css・base.css で定義済み）。
   ========================================================================== */

/* ==========================================================================
   G-1. 本文の器（FVの下）

   追従目次は無いので、中央寄せの読みやすい幅にする。
   company-b.css の .b-company と同じ値。
   ========================================================================== */

.b-legal {
  width: min(92%, 1040px);
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 80px) clamp(56px, 8vw, 120px);
}

.b-legal > .b-svc-sec + .b-svc-sec {
  margin-top: var(--b-svc-sec-gap);
}

/* ==========================================================================
   G-2. 表記テーブル（項目｜内容の2列）

   会社情報の表（company-b.css の C-3）と同じ見た目だが、こちらは
   **内容が長く複数行になる**ので、項目の幅を狭め（26%）にして内容側を広く取る。
   会社情報のような2カラム化はしない（1項目あたりの分量が多く、半幅では入らない）。
   ========================================================================== */

.b-legal-table {
  width: 100%;
  margin-top: clamp(18px, 2.4vw, 32px);
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.b-legal-table th,
.b-legal-table td {
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px);
  border-top: 1px solid var(--b-line);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
}

.b-legal-table tr:first-child th,
.b-legal-table tr:first-child td {
  border-top: 0;
}

/* 左（項目）。薄い水色の帯にして見出しらしくする。 */
.b-legal-table th {
  width: 26%;
  background-color: var(--b-bg-tint);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
}

.b-legal-table td {
  color: var(--c-ink);
  font-weight: var(--fw-label);
}

.b-legal-table a {
  color: var(--b-title);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

/* 内容が複数ブロックに分かれるときの間隔 */
.b-legal-table td > * + * {
  margin-top: 0.9em;
}

/* 内容の中の小見出し（「銀行振込の場合」「商品に不備がある場合（不良品）」など） */
.b-legal__sub {
  font-weight: var(--fw-bold);
  color: var(--b-title);
}

/* 小見出しの直後の本文は、間隔を詰めて1かたまりに見せる */
.b-legal__sub + p {
  margin-top: 0.2em;
}

/* 箇条書き。行頭の「・」を外へ吊るして、折り返した2行目が頭ぞろえになるようにする */
.b-legal__list {
  padding-left: 1.1em;
  list-style: none;
}

.b-legal__list > li {
  position: relative;
}

.b-legal__list > li::before {
  content: "・";
  position: absolute;
  left: -1.1em;
}

.b-legal__list > li + li {
  margin-top: 0.2em;
}

/* 送料の内訳（箇条書きの中の入れ子）。こちらは行頭に記号を付けない */
.b-legal__sublist {
  margin-top: 0.2em;
  list-style: none;
}

/* ==========================================================================
   G-3. 599px以下：項目と内容を縦に積む

   会社情報の表と同じ扱い。26%の項目幅では内容が入らなくなるため。
   ========================================================================== */

@media (max-width: 599px) {
  .b-legal-table th,
  .b-legal-table td {
    display: block;
    width: auto;
  }

  .b-legal-table th {
    border-top: 1px solid var(--b-line);
  }

  .b-legal-table td {
    border-top: 0;
  }

  .b-legal-table tr:first-child th {
    border-top: 0;
  }
}

/* ==========================================================================
   G-4. 文書型のページ（プライバシーポリシー／2026-08-26 追加）

   特商法は「項目｜内容」の表だが、プライバシーポリシーは
   **前文＋番号付きの節＋改定日**の読み物。節見出しと段落のための最小限だけ置く。
   ========================================================================== */

/* 前文 */
.b-legal__intro {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 2;
  color: var(--c-ink);
}

/* 節見出し（「1.弊社が取得する情報」など）。

   **.b-svc-sec__title（22〜44px）はここでは使わない。**
   6節すべてがサービスページの大見出しと同じ大きさになると、
   読み物ではなく販促ページのように見えるため、本文より一回り大きい程度に抑えている。
   左の青い縦棒は .b-svc-lead（service-b.css）と同じ意匠。 */
.b-legal__heading {
  margin-top: clamp(28px, 3.4vw, 48px);
  padding-left: clamp(10px, 0.9vw, 14px);
  border-left: clamp(5px, 0.55vw, 8px) solid var(--b-title-dark);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  color: var(--b-title);
}

/* 節の本文 */
.b-legal__body {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 2;
  color: var(--c-ink);
}

.b-legal__body > * + * {
  margin-top: 1.1em;
}

/* 本文中のリンク。**表の中（.b-legal-table a）と同じ見た目にそろえる。**
   これが無いと本文と同じ色になり、リンクだと分からない（2026-08-26 に実際にそうなっていた）。 */
.b-legal__body a {
  color: var(--b-title);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

/* 箇条書きの中にぶら下げる補足（「例）…」など） */
.b-legal__list li > p {
  margin-top: 0.4em;
}

/* 末尾の改定日 */
.b-legal__date {
  margin-top: clamp(32px, 4vw, 56px);
  text-align: right;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--c-text-sub);
}