@charset "UTF-8";

/* ==========================================================================
   cle-faq.css — よくある質問（/shop/faq）

   移植元: docs/design/design_0901/faq.html + guide.css の後半
           「よくある質問 ／ お問い合わせ ／ 法定ページ」節のうち FAQ のぶん

   ショッピングガイドと同じ骨格で、ページ本体は
   ec_force/shop/faqs/index.html.liquid（テーマ側のテンプレート）。
   質問と答えは管理画面「よくあるご質問」のレコードから動的に出る。

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

     .cle-page__flow.--plain             … 写真を敷かないページの地（1節）
     .cle-page__wrap / .cle-page__block  … 幅と節の余白（同）
     .cle-page__top                      … ページヘッドの帯（2節）
     .cle-page__head                     … 中央寄せの見出し（同）
     .cle-btn.--outline                  … ボタン（4節）
     .cle-acc-group / .cle-acc           … アコーディオン（6節）
     .cle-page__support                  … 解決しない場合は（8節）
     .cle-crumb                          … パンくず（3節。テンプレートが出す）

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

   ■ カテゴリの絞り込みは持たない
     デザイン（faq.html）はカテゴリのチップを並べていたが、実装では
     入れていない。並び替え・絞り込みなしで全件を1本のアコーディオンに出す。
   ========================================================================== */

/* ==========================================================================
   1. 質問の並び
   ========================================================================== */

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

/* 共通のアコーディオンは summary を space-between で組んでいる。
   Q のしるしを足すと3要素になって間延びするので、この節だけ左詰めに戻し、
   ＋ のしるしだけを右端へ送る。 */
.cle-faq__qa .cle-acc summary {
  justify-content: flex-start;
  gap: 0;
}

.cle-faq__qa .cle-acc summary::after {
  margin-left: auto;
}

/* 質問の頭に置く Q。行頭を揃えたいので幅を固定する */
.cle-faq__q {
  flex: none;
  width: 22px;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* 答えは管理画面の入力をそのまま出す。改行を活かしたいので pre 要素で
   受けているが、既定のままだと等幅かつ折り返さないので2つだけ戻す。
   見た目のほかは共通の .cle-acc__text に任せる。 */
.cle-faq__answer {
  white-space: pre-wrap;
  font-family: inherit;
}

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

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

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