@charset "UTF-8";

/* ==========================================================================
   cle-legal.css — 法定ページ3枚

     特定商取引法に基づく表記  /shop/law_info      shop/law_infos/show.html.liquid
     プライバシーポリシー      /shop/privacy        shop/privacies/index.html.liquid
     利用規約                  /shop/customer_term  shop/customer_terms/index.html.liquid

   移植元: docs/design/design_0901/legal.html
           （見た目は about.css と guide.css の共通パーツ）

   ■ ページを3枚に分けた
     デザインは3つを1枚に並べて目次のカードからページ内アンカーで
     飛ばす形だったが、ecforce はこの3つをそれぞれ別のレコードと別のURLで
     持っている。フッターの法定リンクも最初から3本に分かれているので、
     既にあるデータの側に乗せた。そのためデザインの目次カード
     （guide.css の .legal-index）とページ内アンカーは使っていない。
     制定日（.legal-date）も、レコードに置き場が無いので出していない。

   ■ 土台は cle-page.css
     このファイルには「法定ページにしか無いもの」だけを置く。
     借りているものは次のとおりで、ここでは寸法を持たない。

       .cle-page__flow.--plain             … 写真を敷かないページの地（1節）
       .cle-page__wrap / .cle-page__block  … 幅と節の余白（同）
       .cle-page__top                      … ページヘッドの帯（2節）
       .cle-page__head                     … 中央寄せの見出し（同）
       .cle-acc-group / .cle-acc           … アコーディオン（6節）
       .cle-page__deftable                 … 定義表（7節）
       .cle-crumb                          … パンくず（3節。テンプレートが出す）

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。
     この3枚はテーマのテンプレートなので head でも判定できそうに見えるが、
     ほかの cle-*.css と揃えてある（cle-brand.css の節に書いた事故を
     繰り返さないため）。指定はすべて .cle-legal の下に閉じてあるので、
     他のページで読まれても影響は出ない。JSは要らない。

   ■ 3枚が同じスコープを共有している
     テンプレート3枚とも main の直下に .cle-legal を持たせてある。
     特商法だけ定義表・残る2枚はアコーディオンという違いはあるが、
     どちらも共通パーツなので面ごとに分ける必要が無い。
     片方だけを直したいときは .cle-legal__body の中で要素を見分けること。
   ========================================================================== */

/* ==========================================================================
   1. 本文の節

   ページヘッドの帯（.cle-page__top）と地続きに見せる。
   .cle-page__block の既定（96px）より上を詰めているのは、
   この面が「見出しのすぐ下から表が始まる」造りのため。
   切る位置は cle-page.css の .cle-page__top と揃えて 1024 / 768。
   ========================================================================== */

.cle-legal__body {
  padding: 40px 0 96px;
}

/* ==========================================================================
   2. リード文（プライバシーポリシーだけ）

   節の冒頭で言い切る一文。アコーディオンに隠さず先に出す。
   値はショッピングガイドの .cle-guide__lead と同じもの。
   ========================================================================== */

.cle-legal__lead {
  margin: 0 0 30px;
  font-size: 13px;
  line-height: 2.15;
}

/* ==========================================================================
   3. 管理画面の入力をそのまま出すところ

   販売価格・販売数量・特商法の任意項目・ポリシー・規約の本文は、
   改行を活かしたいので pre 要素で受けている。既定のままだと等幅かつ
   折り返さないので、その2つだけを戻す。見た目のほかは、定義表の dd
   （cle-page.css 7節）とアコーディオンの .cle-acc__text（同 6節）に任せる。

   よくある質問の .cle-faq__answer と同じ考え方。
   ========================================================================== */

.cle-legal__pre {
  white-space: pre-wrap;
  font-family: inherit;
}

/* 定義表の中に入るぶんは、行そのものが余白を持っているので詰める */
.cle-page__deftable .cle-legal__pre {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ==========================================================================
   4. 1件も無いとき

   空の枠だけが残ると壊れて見えるので一文を置く。
   お知らせの一覧（cle-news.css）と同じ扱い。
   ========================================================================== */

.cle-legal__empty {
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid var(--cle-line);
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ==========================================================================
   5. レスポンシブ（デザインに合わせて 1024px / 768px の2点だけ）
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-legal__body {
    padding: 30px 0 72px;
  }
}

@media (max-width: 768px) {
  .cle-legal__body {
    padding: 22px 0 58px;
  }

  .cle-legal__lead {
    margin-bottom: 24px;
    font-size: 12px;
  }
}