@charset "UTF-8";

/* ==========================================================================
   cle-page.css — CLE SIESTE 下層ページ共通のシェル

   移植元: docs/design/design_0901/about.css（「下層ページ共通の土台」と
           「下層ページ共通のパーツ」の節）

   デザイン側は about.css に下層ページの土台を置き、chambre.css /
   brand.css / guide.css がそれを前提に固有の見た目だけを足している。
   同じ分担にしてある。ここには「複数の下層ページで使うもの」だけを置き、
   ページ固有の見た目は cle-chambre.css などに書く。

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid（bundle.css より後、
     ページ別の cle-*.css より前）。

   ■ クラス名
     デザイン側の .page-wrap / .page-head / .btn-solid などは総称的で、
     bundle.css・theme.css と衝突する恐れがあるため cle- を付けている。

       .page-wrap    → .cle-page__wrap
       .page-block   → .cle-page__block
       .page-flow    → .cle-page__flow
       .page-head    → .cle-page__head
       .crumb        → .cle-crumb
       .btn-solid    → .cle-btn（.--solid / .--outline / .--outline-light）
       .ptag         → .cle-ptag
       .acc-row      → .cle-acc
       .shop-grid    → 使わない（商品グリッドは cle-list.css の
                       .cle-products__grid を共用する。cle-list.css の
                       冒頭コメント参照）
   ========================================================================== */

   
.l-wrapper-none {
  -webkit-font-smoothing: auto;
}


/* ==========================================================================
   1. 幅と余白

   帯（全幅）と中身（1400px）の分担。--cle-page-gutter は
   cle-common.css の :root にある（商品詳細・商品一覧と共用）。
   ========================================================================== */

.cle-page__wrap {
  width: min(100%, 1400px);
  margin: 0 auto;
  padding: 0 var(--cle-page-gutter);
}

.cle-page__block {
  padding: 96px 0;
}

.cle-page__block + .cle-page__block {
  border-top: 1px solid var(--cle-line);
}

/* 本文は不透明。ページヒーローの写真を固定で敷く面では、これが
   写真を覆いながら上がってくることで視差が生まれる。
   地色は body と同じものを敷いて、見た目を変えない。 */
.cle-page__flow {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at top, rgba(255, 251, 244, 0.72), transparent 42%),
    linear-gradient(180deg, #efe6d8 0%, #f6f0e7 34%, #efe8dc 100%);
}

/* 写真を敷かないページ（ショッピングガイド・よくある質問）の地。
   覆う相手がいないので、上端の光を落とした2色だけにする。
   移植元は guide.css の .is-guide .page-flow。 */
.cle-page__flow.--plain {
  background: linear-gradient(180deg, #f6f0e7 0%, #efe8dc 100%);
}

/* ==========================================================================
   2. セクション見出し

   日本語の見出しが主役。英語は上に小さく置く装飾のラベルとして扱い、
   フランス語は固有名詞（部屋名・ブランド名）以外では使わない。
   ========================================================================== */

.cle-page__head {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-bottom: 56px;
  text-align: center;
}

.cle-page__head-label {
  margin: 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* h1 と h2 の両方を受ける。ページの中に複数置く面（部屋・ブランド）は
   h2、この見出しがページ唯一の主見出しになる面（軸ページ）は h1。
   見た目は同じにしておき、文書構造だけをページ側で決められるようにする。 */
.cle-page__head h1,
.cle-page__head h2 {
  margin: 0;
  color: var(--cle-ink);
  font: 300 clamp(22px, 2.2vw, 30px)/1.5 var(--cle-font-mincho);
}

.cle-page__head-lead {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2;
}

/* 左寄せの見出し（移植元: about.css の .page-head-left）。

   中央寄せの .cle-page__head と対になるもの。下に定義表やアコーディオン、
   カードの格子など「左端が揃っているもの」が来る節で使う。
   使いどころは About の運営会社と、ショッピングガイドの各節。
   ラベル（.cle-page__head-label）とリード文（同 -lead）はそのまま共用できる。 */
.cle-page__head-left {
  display: grid;
  gap: 10px;
  margin-bottom: 44px;
}

/* h1 と h2 の両方を受ける理由は .cle-page__head と同じ。
   中央寄せのほうより1段小さい（節の見出しとして使うため）。 */
.cle-page__head-left h1,
.cle-page__head-left h2 {
  margin: 0;
  color: var(--cle-ink);
  font: 300 clamp(20px, 2vw, 26px)/1.5 var(--cle-font-mincho);
}

/* ---- ヒーローを持たないページの最初の帯 --------------------------------
   見出しだけの短い帯。移植元は guide.css の .guide-top。

   下に続くもの（目次・質問の並び）と地続きに見せたいので、.cle-page__block
   にはしない（罫線が引かれてしまうため）。節どうしの罫線は
   .cle-page__block 同士の隣接で出る。
   ----------------------------------------------------------------------- */

.cle-page__top {
  padding: 72px 0 0;
}

/* この帯の h1 はページ唯一の主見出しになるので、節の見出し
   （.cle-page__head h1）より1段大きい。 */
.cle-page__top h1 {
  font: 300 clamp(24px, 2.6vw, 34px)/1.5 var(--cle-font-mincho);
}

/* 切る位置が 11節（980/760）ではなく 1024/768 なのは、移植元の
   guide.css がその2点で切っているため。11節の冒頭も参照。 */
@media (max-width: 1024px) {
  .cle-page__top {
    padding-top: 56px;
  }
}

@media (max-width: 768px) {
  .cle-page__top {
    padding-top: 40px;
  }
}

/* 英語は装飾。小さく・字間を広く取り、日本語の見出しに従属させる */
.cle-page__eyebrow {
  margin: 0 0 26px;
  font-size: 12px;
  letter-spacing: 0.24em;
  opacity: 0.8;
}

/* ==========================================================================
   3. パンくず（フッター直前に置く）

   帯は全幅（固定画像を覆うため不透明）、中身は本文と同じコンテンツ幅。

   ■ マークアップの出どころは2つ。形は同じ
     テーマ側 … shop/snippets/_cle_crumb.html.liquid（include 1行で出す）
     部屋側   … clesieste/html/cle-chambre-*.html（コンテンツ欄の手書き。
                コンテンツ欄からは snippet を呼べないため）

     どちらも <nav class="cle-crumb"> > <div class="cle-crumb__inner"> の中に
     <a> と <span class="cle-crumb__sep">—</span> を交互に並べる形。
     片方だけ変えないこと。

   ■ ecforce 既定のパンくず（.p-breadcrumbs / .c-breadcrumbs）は使わない
     既定は PC を本文の上・SP を本文の下に出す2本立てだが、デザインは
     どのページもフッター直前の1本。商品カテゴリと検索結果は
     _cle_crumb へ寄せてある。商品詳細だけは既定の2本立てのままで、
     cle-product.css 1節が見た目を落として使っている。
   ========================================================================== */

.cle-crumb {
  position: relative;
  z-index: 1;
  background: #efe8dc;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.cle-crumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: min(100%, 1400px);
  margin: 0 auto;
  padding: 26px var(--cle-page-gutter) 30px;
  border-top: 1px solid var(--cle-line);
}

.cle-crumb a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.cle-crumb a:hover {
  opacity: 0.6;
}

.cle-crumb__sep {
  opacity: 0.5;
}

/* ---- 経路が複数あるとき ------------------------------------------------
   商品詳細で使う。商品が複数のカテゴリに属していると、_cle_crumb は
   経路の数だけ .cle-crumb__row を積む（1本のときは行の入れ物を出さない
   ので、この節は当たらない。香りの部屋の手書きHTMLも同じ形のまま）。

   帯の余白と最大幅は __inner が持ったままにして、行の並びだけ足す。
   ----------------------------------------------------------------------- */

.cle-crumb__inner:has(.cle-crumb__row) {
  display: block;
}

.cle-crumb__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  row-gap: 6px;
}

.cle-crumb__row + .cle-crumb__row {
  margin-top: 10px;
}

/* ---- 商品グリッドの直後に出るとき -------------------------------------
   商品一覧・検索結果・商品カテゴリは、直前が一覧の地色（#fbf9f3 の平面。
   cle-list.css 1節）。共通の #efe8dc ＋ 上罫線のままだとグリッドとの
   境目に段差が出るので、地続きに見えるよう平面で受ける。
   デザインの products.css .is-products .crumb / .crumb-inner と同じ。

   #add_product_async_view はテーマが商品グリッドを包んでいる div で、
   パンくずはその次に来る（11節の SP の左右も同じ隣接で見ている）。

   :where() で包んで詳細度を 0 にしてある。この隣接を使うと ID の
   詳細度（1,1,0）が付き、面ごとの上書き——ブランドの写真の帯
   （cle-brand.css 1節）や部屋の暗色（cle-chambre.css）——に勝ってしまう。
   :where() なら .cle-crumb 1つぶん（0,1,0）で済むので、あとから読む
   ページ別CSSがそのまま勝つ。打ち消しを書き足す必要がない。
   ----------------------------------------------------------------------- */

:where(#add_product_async_view) + .cle-crumb {
  background: #fbf9f3;
}

:where(#add_product_async_view) + .cle-crumb .cle-crumb__inner {
  border-top: 0;
}

/* ==========================================================================
   4. ボタン

   .--solid  … 明部用の塗り。主導線
   .--outline … 明部用の枠線。副次的な導線
   .--outline-light … 暗部用の枠線。写真や暗い地の上に置く導線
                      （デザインの .btn-outline-light。about.css 566行）
   ========================================================================== */

.cle-btn {
  display: inline-block;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cle-btn.--solid {
  padding: 17px 46px;
  border: 1px solid var(--cle-ink);
  background: var(--cle-ink);
  color: var(--cle-white);
  font-size: 12px;
  transition: opacity 0.35s ease;
}

.cle-btn.--solid:hover,
.cle-btn.--solid:focus-visible {
  opacity: 0.82;
}

.cle-btn.--outline {
  padding: 15px 22px;
  border: 1px solid var(--cle-line-strong);
  background: transparent;
  color: inherit;
  font-size: 11px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.cle-btn.--outline:hover,
.cle-btn.--outline:focus-visible {
  border-color: var(--cle-ink);
  background: rgba(255, 253, 249, 0.6);
}

/* 暗部用。枠も文字も紙色を透かして置く。地が写真でも沈まないよう、
   明部の --outline より太い余白（塗りボタンと同じ 17px 46px）で組む。 */
.cle-btn.--outline-light {
  padding: 17px 46px;
  border: 1px solid rgba(255, 251, 244, 0.4);
  background: transparent;
  color: rgba(255, 251, 244, 0.94);
  font-size: 12px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.cle-btn.--outline-light:hover,
.cle-btn.--outline-light:focus-visible {
  border-color: rgba(255, 251, 244, 0.72);
  background: rgba(255, 251, 244, 0.1);
}

/* ==========================================================================
   5. タグのチップ

   所属部屋・香調・容量など、属性を短く示すのに使う。
   商品カードの中のタグは cle-list.css の .cle-products__ptag（寸法が違う）。
   ========================================================================== */

.cle-ptag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.cle-ptag + .cle-ptag {
  margin-left: 6px;
}

/* ==========================================================================
   6. アコーディオン（details / summary）

   ＋ と − は罫線2本で描く。open のとき縦線だけ消す。

   .cle-acc 単体（部屋の「物語を読む」）と、.cle-acc-group で束ねた並び
   （ショッピングガイドの各節）の両方がある。罫線は details 側が下だけを
   持ち、束ねたときの上端1本を group が足す。単体で使うときは上端の線が
   要らないので、この分担にしてある。
   ========================================================================== */

/* 移植元は about.css の .accordion。罫線のリズムは定義表（7節）と揃えてある */
.cle-acc-group {
  border-top: 1px solid var(--cle-line);
}

.cle-acc {
  border-bottom: 1px solid var(--cle-line);
}

.cle-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: opacity 0.25s ease;
}

.cle-acc summary::-webkit-details-marker {
  display: none;
}

.cle-acc summary:hover {
  opacity: 0.62;
}

.cle-acc summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--cle-ink-soft), var(--cle-ink-soft)) center/11px 1px no-repeat,
    linear-gradient(var(--cle-ink-soft), var(--cle-ink-soft)) center/1px 11px no-repeat;
  transition: background-size 0.3s ease;
}

.cle-acc[open] summary::after {
  background-size: 11px 1px, 1px 0;
}

.cle-acc__body {
  padding: 0 4px 30px;
}

.cle-acc__text {
  margin: 0 0 16px;
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2.15;
  text-align: justify;
  text-align-last: left;
}

.cle-acc__text:last-child {
  margin-bottom: 0;
}

.cle-acc__text a {
  border-bottom: 1px solid var(--cle-line-strong);
  text-decoration: none;
}

/* ==========================================================================
   7. 定義表（dl）

   移植元は about.css の .deftable。「項目名 — 値」を並べる表。
   About の運営会社と、ショッピングガイドの配送・送料で使う。

   dl > div > (dt + dd) の3階層で組む。div を挟むのは、1行を grid の
   1マスとして扱うため（dt と dd を直接並べると行ごとの罫線が引けない）。
   罫線のリズムはアコーディオン（6節）と揃えてある。
   ========================================================================== */

.cle-page__deftable {
  margin: 0;
  border-top: 1px solid var(--cle-line);
}

.cle-page__deftable > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--cle-line);
}

.cle-page__deftable dt {
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.cle-page__deftable dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

.cle-page__deftable dd a {
  border-bottom: 1px solid var(--cle-line-strong);
  color: inherit;
  text-decoration: none;
}

/* 項目名の段を畳んで縦積みにする。切る位置がこのファイルの
   レスポンシブ（10節、980/760）ではなく 768 なのは、移植元の
   about.css が 1024/768 で切っているため。10節の冒頭も参照。 */
@media (max-width: 768px) {
  .cle-page__deftable > div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 2px;
  }
}

/* ==========================================================================
   8. 解決しない場合は（お問い合わせへの導線）

   移植元は guide.css の .contact-block。ページの末尾に置く受け皿で、
   ショッピングガイドとよくある質問が同じものを使う。

   本文と同じ地色のまま置く。すぐ下にパンくずの帯が続くので、ここで色を
   変えると帯が2本重なって見える。上の節との区切りは .cle-page__block
   同士の罫線が受け持つ。

   名前を .cle-page__contact にしていないのは、.cle-page__content
   （管理画面の1枠に全体を書くページの目印。9節）と2文字しか違わず、
   打ち間違いに気づけないため。
   ========================================================================== */

.cle-page__support {
  padding: 88px 0 96px;
}

.cle-page__support-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

/* 明部の枠線ボタンは幅が詰まりやすいので、この節では下限を持たせる */
.cle-page__support-cta .cle-btn.--outline {
  min-width: 180px;
  padding: 16px 24px;
  font-size: 12px;
}

.cle-page__support-hours {
  margin: 30px 0 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 切る位置は .cle-page__top と同じ理由で 1024/768 */
@media (max-width: 1024px) {
  .cle-page__support {
    padding: 78px 0;
  }
}

@media (max-width: 768px) {
  .cle-page__support {
    padding: 62px 0;
  }

  /* ボタンが2つ並ぶと狭いので縦積みにする */
  .cle-page__support-cta {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   9. 管理画面の1枠にページ全体を書くページの土台

   2種類ある。どちらも枠は1つだけで、商品グリッドはテーマ側が出す。

     香りの部屋 … セレクションの「コンテンツ」欄
                  .cle-selection__content（selections_show_content.liquid）
     ブランド   … 商品カテゴリの「詳細」欄
                  .cle-category__content（product_categories/show.html.liquid）

   枠が1つしかないので、HTMLの並びだけでは商品グリッドをまたげない。
   data-cle-place="after-products" が付いたものは clesieste/js/cle-ui.js が
   グリッドの直後へ移す。移動が済むまでは隠しておき、並べ替わる瞬間の
   ちらつきを止める（移動すると枠の外に出るので、この指定は外れる）。

   目印は両方に付けてある .cle-page__content。
   ========================================================================== */

.cle-page__content [data-cle-place='after-products'] {
  display: none;
}

/* ==========================================================================
   10. ページ遷移の幕

   香りの部屋は5部屋が別ページ（別セレクション）なので、ヒーローの
   カルーセルで隣へ移るのは実際にはページ遷移になる。素のままだと
   一瞬白く飛ぶため、出るときに幕を下ろし、着いた先で上げる。

   マークアップを持たせたくない（コンテンツHTML側に何も書かせない）ので
   html の擬似要素1枚で作っている。

     html.cle-veil         … 幕あり（不透明）
     html.cle-veil.is-open … 幕が上がっている（透明）

   付け外しは _head.html.liquid（着地時の初期状態と保険のタイマー）と
   clesieste/js/cle-ui.js（上げ下げ）。
   ========================================================================== */

html.cle-veil::after {
  position: fixed;
  inset: 0;
  z-index: 9999;
  content: '';
  background: #1a1611;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.48s ease;
}

html.cle-veil.is-open::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.cle-veil::after {
    display: none;
  }
}

/* ==========================================================================
   11. レスポンシブ
   ========================================================================== */

@media (max-width: 980px) {
  .cle-page__block {
    padding: 72px 0;
  }
}

@media (max-width: 760px) {
  /* 左右の余白（--cle-page-gutter）はここでは触らない。
     以前は #selection-show-view に閉じて 20px にしていたが、デザインでは
     全ページ共通の値なので cle-common.css の :root へ移した。
     狭まる位置がこのブロックの 760 ではなく 768 になるが、デザインも
     余白は 768、部屋のレイアウトは 760 と別々に切っている（この節の
     980/760 は chambre.css 由来、余白の 1024/768 は about.css 由来）。 */

  .cle-page__block {
    padding: 56px 0;
  }

  .cle-page__head {
    margin-bottom: 36px;
  }

  /* SP の左右は面ごとに違う（部屋・下層ページ 20px／商品グリッド 16px）。
     パンくずは直前の面の左端に揃えたいので、商品グリッドの下に出るとき
     （商品カテゴリ・検索結果）だけ 16px にする。#add_product_async_view は
     テーマがグリッドを包んでいる div で、パンくずはその次に来る。 */
  .cle-crumb__inner {
    padding: 18px var(--cle-page-gutter) 22px;
  }

  #add_product_async_view + .cle-crumb .cle-crumb__inner {
    padding-inline: 16px;
  }

  .cle-btn.--solid {
    padding: 15px 32px;
  }
}