@charset "UTF-8";

/* ==========================================================================
   cle-common.css — CLE SIESTE 共通スタイル（全ページ読み込み）

   ecforce の theme_customize.css からの移植版。
   theme_customize.css は全宣言に !important が付いていて上書きが困難なため、
   レイアウトからの読み込みを外し、このファイルへ以下の方針で移した。

     - !important を全廃（cle-*.css 側から素直に上書きできるようにする）
     - font-family を全廃（フォント指定は cle-*.css / デザイン側に一本化）
     - 色・サイズは :root の変数に集約し、各ユーティリティは var() で参照

   ■ このファイルを消せない理由
     1. bundle.css が --color-* / --font-size-* を 150 箇所以上参照している
        （--color-page-border だけで 54 箇所）。未定義だと枠線等が消える。
     2. .u-text--* / .u-font--* / .u-color__btn--* の定義元がここしかない。
        liquid テンプレート全体で約 3,400 箇所使われている。

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid（util.css → bundle.css →
     theme.css → 本ファイル）。util.css と同名クラスは後勝ちでここが有効。

   ■ 変数値について
     現状はテーマ既定値（ecforce ベーシックテーマの色・サイズ）のまま。
     CLE SIESTE のブランド値へは :root の 1 箇所を差し替えれば全体に効く。
   ========================================================================== */

/* ==========================================================================
   1. CLE SIESTE デザイントークン & ベース組版

   デザインコーディング（docs/design/sample_0820/styles.css の :root と body）
   からの移植。変数名は --cle- プレフィックスを付けている。
   デザイン側の --bg / --line は bundle.css・theme.css にも同名の変数が
   存在して衝突するため、プレフィックスは必須。

   デザイン側 → 本ファイル の対応:
     --bg → --cle-bg          --ink       → --cle-ink
     --paper → --cle-paper    --ink-soft  → --cle-ink-soft
     --line → --cle-line      --line-strong → --cle-line-strong
   ========================================================================== */

:root {
  --cle-bg: #f4ede1;
  --cle-paper: #faf6ef;
  --cle-paper-strong: #f2ece1;
  --cle-ink: #1e1a16;
  --cle-ink-soft: #5f564d;
  --cle-line: rgba(90, 74, 56, 0.16);
  --cle-line-strong: rgba(70, 54, 40, 0.28);
  --cle-white: #fffdf9;
  --cle-shadow: 0 20px 60px rgba(76, 56, 40, 0.08);

  /* ヘッダーの実高（上下padding 26+26 ＋ ロゴ 43）。
     固定ヘッダーぶんの本文の押し下げと、メガメニューの基準に使う。 */
  --cle-header-h: 95px;

  /* デザインの --page-gutter。1400px の中身の左右の余白。
     商品詳細・商品一覧・部屋・ブランド・軸ページ・パンくずが共通で使う。
     画面幅で 42 → 24 → 20 と変える（このファイルの下のメディアクエリ）。
     デザイン側も about.css の :root 1か所で全ページに効かせている。 */
  --cle-page-gutter: 42px;

  --cle-font-jp: 'Noto Sans JP', sans-serif;
  --cle-font-en: 'Cormorant Garamond', serif;

  /* 明朝。sample_0820 は Zen Old Mincho を先頭に置いていたが、
     sample_0901 は明朝をすべて 'Noto Serif JP', serif で組んでいて
     Zen Old Mincho の指定が1つも無い（<link> では読んでいるが未使用）。
     デザインに合わせて Noto Serif JP に寄せている。 */
  --cle-font-mincho: 'Noto Serif JP', serif;

  /* 商品名など「欧文の固有名詞だが和文で登録されることもある」もの用。
     欧文は Cormorant、和文は明朝で受ける。

     var(--cle-font-en) を先に置いて明朝を継ぐ書き方はできない。
     --cle-font-en の末尾に総称の serif が入っていて、それが必ず一致して
     しまうため、後ろに書いた和文用のフォントへ落ちてこない。
     ここは総称を1つだけ持つ形で書き下すこと。 */
  --cle-font-name: 'Cormorant Garamond', 'Noto Serif JP', serif;
}

/* 左右の余白はデザインどおり画面幅で3段階に変える。デザイン側の
   about.css は全ページから読まれていて、この :root が唯一の定義元
   （42 → 24 → 20）。面ごとに持たせるものではないのでここに置く。

   1024 の段を先に書くこと。同じ詳細度なので、あとに書いたほうが勝つ。 */
@media (max-width: 1024px) {
  :root {
    --cle-page-gutter: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    /* SPはヘッダー上下 padding が 18px に縮む */
    --cle-header-h: 73px;
    --cle-page-gutter: 20px;
  }
}

body {
  background:
    radial-gradient(circle at top, rgba(255, 251, 244, 0.72), transparent 42%),
    linear-gradient(180deg, #efe6d8 0%, #f6f0e7 34%, #efe8dc 100%);
  color: var(--cle-ink);
  font: 400 13px/1.8 var(--cle-font-jp);
  letter-spacing: 0.02em;
}

/* 欧文（英語・フランス語）は Cormorant Garamond で組む。
   lang 属性が付いた要素だけに効くので、他への影響はない。 */
:lang(en),
:lang(fr) {
  font-family: var(--cle-font-en);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   2. テーマユーティリティ（theme_customize.css からの移植）
   ========================================================================== */

/* ================ Variables ================ */
:root {
  /* ------------------------------------------------------------------
     テーマ既定の色トークン。CLE SIESTE のブランド値（1節の --cle-*）へ
     差し替えてある。2026-09-06。

     ここを直す意味は大きい。bundle.css がこの11個を150箇所以上、
     liquid テンプレートも .u-color__* を通して全面で参照しているので、
     **手を付けていない面（注文フロー・会員ページ・各種モーダル）まで
     一度に揃う**。逆に言えば、ここを既定のままにしていると、面ごとに
     同じ色を上書きして回ることになる。

     差し替え前は ecforce ベーシックテーマの値で、青緑（#386f81）の
     ボタンとリンク、寒色の灰色（#d8dddf）の罫線が全面に出ていた。

     対応:
       text-head    見出し・強い字     → 墨
       text-body    本文・弱い字       → 墨の薄いほう
       text-overlay 濃い地の上の字     → 紙の白
       text-link    リンク             → 墨（色ではなく下線で示す）
       btn-bg/text  ボタン             → 墨と紙の白
       input-*      入力欄             → 墨と強いほうの罫線
       page-bg      白い面             → 紙の白
       page-border  罫線（54箇所）     → 罫線
       page-accent  強調・注意・OK     → 墨

     注意: page-accent は必須マークやエラー文にも使われる。デザインに
     赤が1色も無いので墨で揃えたが、購入導線で赤い警告を出したくなったら
     ここではなく面ごとに足すこと（このトークンは強調全般に効くため）。
     ------------------------------------------------------------------ */
  --color-text-head: var(--cle-ink);
  --color-text-body: var(--cle-ink-soft);
  --color-text-overlay: var(--cle-white);
  --color-text-link: var(--cle-ink);
  --color-btn-bg: var(--cle-ink);
  --color-btn-text: var(--cle-white);
  --color-input-text: var(--cle-ink);
  --color-input-border: var(--cle-line-strong);
  --color-page-bg: var(--cle-white);
  --color-page-border: var(--cle-line);
  --color-page-accent: var(--cle-ink);

  /* TODO: CLE SIESTE のタイポスケールへ差し替え */
  --font-size-text-head: 24px;
  --font-size-text-subhead: 17px;
  --font-size-text-body: 13px;
  --font-size-text-link: 13px;

  /* --font-family-text-* は意図的に未定義。
     bundle.css 側は var(--font-family-text-subhead, inherit) と
     フォールバック付きで参照しているため、未定義なら継承フォントになる。 */
}

/* ================ Text utilities ================ */
.u-text--head {
  color: var(--color-text-head);
  font-size: var(--font-size-text-head);
}

.u-color--head {
  color: var(--color-text-head);
}

.u-text--subhead {
  color: var(--color-text-head);
  font-size: var(--font-size-text-subhead);
}

.u-text--body {
  color: var(--color-text-body);
  font-size: var(--font-size-text-body);
}

.u-color--body {
  color: var(--color-text-body);
}

.u-text--strong {
  color: var(--color-text-head);
  font-size: var(--font-size-text-body);
}

.u-text--link {
  color: var(--color-text-link);
  font-size: var(--font-size-text-link);
}

/* ================ Text utilities（画像上などのオーバーレイ用） ================ */
.u-text--head--overlay {
  color: var(--color-text-overlay);
  font-size: var(--font-size-text-head);
}

.u-text--subhead--overlay {
  color: var(--color-text-overlay);
  font-size: var(--font-size-text-subhead);
}

.u-text--body--overlay {
  color: var(--color-text-overlay);
  font-size: var(--font-size-text-body);
}

.u-text--color--overlay {
  color: var(--color-text-overlay);
}

/* ================ Button utilities ================ */
.u-color__btn--bg,
.u-color__btn--bg--overlay {
  background: var(--color-btn-bg);
}

.u-color__btn--bg--reverse,
.u-color__btn--bg--overlay--reverse {
  background: var(--color-btn-text);
}

.u-color__btn {
  color: var(--color-btn-bg);
}

.u-color__btn--text {
  color: var(--color-btn-text);
}

.u-color__btn--text--bg {
  background: var(--color-btn-text);
}

.u-text--btn,
.u-text--btn--overlay {
  color: var(--color-btn-text);
  font-size: var(--font-size-text-body);
}

.u-text--btn--reverse,
.u-text--btn--overlay--reverse {
  color: var(--color-btn-bg);
  font-size: var(--font-size-text-body);
  border: 1px solid var(--color-input-border);
}

/* ================ Form utilities ================ */
.u-text--input {
  color: var(--color-input-text);
  font-size: var(--font-size-text-body);
}

.u-color--input {
  color: var(--color-input-text);
}

.u-color__input--bg {
  background: #ffffff;
}

.u-color__border--input {
  border-color: var(--color-input-border);
}

/* ================ Base color utilities ================ */
/* util.css にも同名クラスがあるが、後に読み込まれる本ファイルが優先される */
.u-color__bg--base,
.u-color__bg--main {
  background: var(--color-page-bg);
}

.u-color__border--border,
.u-color__border--main {
  border-color: var(--color-page-border);
}

/* ---- util.css に残っていた既定パレットの上書き（2026-09-07）------------

   assets/util.css は theme_customize.css と同じく ecforce ベーシックテーマの
   色をそのまま持っている。あちらは読み込みごと止めたが、util.css は
   .u-font__* / .u-color__* の定義元がここしか無いクラスを含むので止められない。
   off-brand な値だけをここで差し替える。読み込み順は
   util.css → bundle.css → cle-common.css なので、詳細度を上げずに勝てる。

   直したもの（liquid で使われている数）:

     .u-color__bg--bg      #f4f8fa 寒色の薄い地   52ファイル
     .u-color__text--bg    同上（字）
     .u-color__bg--accent  #386f81 青緑           9ファイル
     .u-color__text--accent 同上（字）            3ファイル
     .u-font__en           Alata（欧文）          8ファイル

   **手を付けていない面（会員ページ・定期便・各種モーダル）にも一度に効く。**
   青緑は「注文を確定する」など購入導線のボタンに出ていた。

   赤（.u-color__text--alert / --bg--alert、62ファイル）は残してある。
   必須の印にもエラー文にも同じ class が付いていて、ここで一律に変えると
   本当の警告まで墨になる。必須の印だけは面ごとに直す（cle-order.css 4節）。
   ------------------------------------------------------------------------ */

.u-color__bg--bg {
  background: var(--cle-paper);
}

.u-color__text--bg {
  color: var(--cle-paper);
}

.u-color__bg--accent {
  background: var(--color-page-accent);
}

.u-color__text--accent {
  color: var(--color-page-accent);
}

.u-color__border--accent {
  border-color: var(--color-page-accent);
}

.u-font__en {
  font-family: var(--cle-font-en);
}

/* ---- bundle.css の @layer が持つパレットの上書き（2026-09-07）------------

   bundle.css 127〜143行に、util.css / theme_customize.css とは**別の**
   色の一式がある。

     @layer foundation.variables.color {
       :root { --Base --Accent-1 --Accent-2 --Sub --Link
               --Background --Alert --Border-1 --Border-2 }
     }

   比較的新しい部品（会員ページのメニュー・クーポン・注文履歴の要約・
   ステータスの印など）がこちらを見ていて、`bundle.css` 内で 70 箇所。
   中身はやはりベーシックテーマの値で、青緑・寒色の灰・寒色の罫線が出る。

   **レイヤー付きの宣言は、レイヤーの無い宣言に必ず負ける。** このファイルは
   @layer の外なので、詳細度を上げなくても素直に勝つ。

   --Alert は残してある。util.css の赤と同じ理由で、本当の警告に使われる。
   ------------------------------------------------------------------------ */

:root {
  --Base: var(--cle-white);
  --Accent-1: var(--cle-ink);
  --Accent-2: var(--cle-ink);
  --Sub: var(--cle-ink-soft);
  --Link: var(--cle-ink);
  --Background: var(--cle-paper-strong);
  --Border-1: var(--cle-line);
  --Border-2: var(--cle-line-strong);
}

/* ================ Font size utilities ================ */
.u-font--head {
  font-size: var(--font-size-text-head);
}

.u-font--subhead {
  font-size: var(--font-size-text-subhead);
}

.u-font--body {
  font-size: var(--font-size-text-body);
}

.u-font--bold {
  font-weight: bold;
}

/* ================ Theme components ================ */
/* 商品詳細のアコーディオン開閉アイコン（＋／－の線） */
.c-product_info__details__icon::before,
.c-product_info__details__icon::after {
  background: var(--color-text-head);
}

.c-steps_to_order--theme {
  --theme-color: var(--color-btn-bg);
  --text-color: var(--color-btn-text);
}

.p-movie--theme {
  --theme-color: var(--color-btn-bg);
}

/* ================ Icons ================ */
/* 移植元は管理画面の表示設定（settings.icon / settings.sns）で出し分けていた。
   theme_customize.css を読み込まなくなったため、現在の設定値
   （favorite_icon: true / cart_icon: true / SNS 3種すべて true）を
   静的に固定している。表示を変える場合はここを直接編集する。 */
.c-product_item__actions .c-product_item__form--favorite,
.c-product_item__actions .c-product_item__form--cart {
  display: inline-block;
}

/* ==========================================================================
   3. スクロールで持ち上がる演出（.cle-reveal）

   もとは cle-top.css の 9 節（Our Brands 用）にあったものをここへ移した。
   TOPだけでなく、香りの部屋・ブランドページでも同じ動きを使うため。

   挙動は clesieste/js/cle-ui.js。data-cle-reveal が付いた要素が
   画面に入ったところで .is-visible が付く。一度出したら戻さない。
   ========================================================================== */

.cle-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.cle-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cle-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}