@charset "UTF-8";

/* ==========================================================================
   cle-about.css — CLE SIESTE とは（About）

   移植元: docs/design/design_0901/about.html ＋ about.css
           （about.css のうち「下層ページ共通の土台」と「下層ページ共通の
             パーツ」は ec_force/assets/cle-page.css へ先に移してある。
             ここに置くのは About だけが使う節——ページヒーロー・
             背景／使命・コンセプト・余白の時間・5つの部屋・ビジョン・
             運営会社——の6つ）

   ■ ページの作り
     About は固定ページ（/shop/pages/about）。ページ固有の中身は
     管理画面「固定ページ > 本文」欄のHTMLで、原本は
     clesieste/html/cle-about.html。軸ページと同じ器だが、軸ページ
     （.cle-axis）とは別の造りなので判定も別に持つ。

     DOMはこう並ぶ。

       main.l-container
         section
           div.cle-about              ← 「本文」欄のHTML
             div.cle-about__backdrop  ← ページヒーローの写真（position:fixed）
             section.cle-about__hero
             div.cle-page__flow       ← 写真を覆いながら上がってくる本文
         nav.cle-crumb                ← パンくず（テーマ側が出す）

     .cle-about の外にあるもの（パンくず・本文コンテナ・ヘッダー）には
     .cle-about の子孫セレクタが届かない。そこは :has(.cle-about) で
     「About のとき」を拾う（1節）。

   ■ 読み込みは条件なし（_head.html.liquid）
     cle-brand.css・cle-axis.css と同じ理由。固定ページのどれが About かは
     本文欄の中身でしか分からず、head で判定を持たせると liquid 側の都合で
     「静かに読み込まれない」形で失敗する。
     指定はすべて .cle-about の下か :has(.cle-about) に閉じてあるので、
     他のページで読まれても影響は出ない。JSは要らない。

   ■ 土台は cle-page.css を使う
     幅（.cle-page__wrap）・面の余白（.cle-page__block）・本文の層
     （.cle-page__flow）・見出し（.cle-page__head）・英語のラベル
     （.cle-page__eyebrow）・パンくず（.cle-crumb）・暗部のボタン
     （.cle-btn.--outline-light）は下層ページ共通のものをそのまま使う。
     もともと about.css から移した節なので、デザインとずれない。

   ■ デザインから変えたところ
     1. 5つの部屋のカードは実際の部屋ページへ送る。
        デザインは1枚目だけ chambre.html で、残り4枚は
        index.html#concierge を指していた（部屋ページが1枚しか無かった
        ため）。ecforce では5部屋がそれぞれセレクションになっているので、
        /shop/selections/chambre-101〜105 を指す。遷移は部屋どうしの
        移動と同じく data-cle-veil で暗転させる。
     2. コンセプトの写真の演出はスクロール連動をやめ、共通の reveal
        （.cle-reveal ＋ data-cle-reveal）に寄せた。デザインは script.js が
        スクロール量を --reveal-progress として毎フレーム渡し、ぼかしの
        強さをそれに追従させていたが、そのためだけにJSを1本増やすことに
        なる。香りの部屋の物語の写真（chambre.html の同じ演出）でも同じ
        判断をしてある。ぼかしから立ち上がる見え方自体は3節で残した。
     3. 運営会社の中身は本文欄に静的に書く。ecforce の law_info レコード
        （特定商取引法に基づく表記）とは別の、読み物としての紹介なので
        テーマから引かない。所在地の但し書きのリンク先だけ、デザインの
        仮置き（#）から実際の /shop/law_info に変えてある。
   ========================================================================== */

/* ==========================================================================
   1. ページの土台

   ページヒーローは画面の上端から見せたいので、固定ヘッダーぶんの
   押し下げ（cle-header.css 1節）を About だけ外す。ヘッダーは写真の上に
   そのまま重なる。ブランドページ（cle-brand.css 1節）と同じ形。

   ■ About かどうかは :has(.cle-about) で見る
     打ち消しではなく「About のときだけ足す」形で書くこと。
     打ち消しにすると、:has() の無い環境で押し下げが外れたままになる。

     セレクタは cle-header.css の
     body:not(.cle-top):not(.cle-header-static) .l-container に勝てるよう、
     同じ形のまま :has() を足してある（詳細度で負けると効かない）。
   ========================================================================== */

body:not(.cle-top):not(.cle-header-static) .l-container:has(.cle-about) {
  padding-top: 0;
}

/* ヒーローの写真は z-index:-1 の position:fixed。この層はページ全体の
   いちばん奥（body の地の上、各面の地色の下）に描かれる。ところが
   テーマは .l-wrapper に地色（u-color__bg--base）を持たせていて、
   これが不透明なので写真が完全に隠れてしまう。About では透明にして、
   body の地を見せる。

   ここで .cle-about 側に isolation を足して逃げてはいけない。
   重なりの文脈ができると、写真が本文より手前に来て、スクロールしても
   消えなくなる（cle-brand.css 1節と同じ注意）。 */
.l-wrapper:has(.cle-about),
.l-wrapper-none:has(.cle-about) {
  background: transparent;
}

.cle-about {
  position: relative;
  color: var(--cle-ink);
}

/* ヘッダーの文字色はテーマ既定のまま（.is-over-hero で白へ反転）。
   写真の上端帯は暗いので、ブランドの --kv-dark のような出し分けは要らない。
   2026-09-06 実測：可視域の上端帯の平均は rgb(142,103,63)＝輝度およそ108、
   スクリムを重ねるとおよそ95。白抜きで読める。 */

/* ==========================================================================
   2. ページヒーロー（移植元: about.css 「02 ページヒーロー」）

   写真は画面に固定する。z-index:-1 で本文の背後に置き、本文
   （.cle-page__flow）がせり上がって覆っていくことで視差が生まれる。
   ========================================================================== */

.cle-about__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.cle-about__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TOPのヒーローと同じ二層スクリム（縦の沈み＋左右の締め） */
.cle-about__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(45, 32, 21, 0.18), rgba(15, 10, 7, 0.46)),
    linear-gradient(90deg, rgba(8, 10, 16, 0.4) 0%, rgba(8, 10, 16, 0) 26%, rgba(8, 10, 16, 0) 74%, rgba(8, 10, 16, 0.4) 100%);
}

/* ヒーローは写真を持たず、コピーの置き場所として通常どおりスクロールする。
   ヘッダーが重なるぶん、コピーはヘッダー高の半分だけ下げて視覚的な中央に。

   高さは実寸で持たせてある（ブランドのように cle-brand.js で実測しない）。
   cle-header.js は [data-cle-page-hero] の offsetHeight を見て
   .is-over-hero を付け外しするので、この面はJSなしでそのまま噛み合う。 */
.cle-about__hero {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  height: clamp(520px, 76vh, 780px);
  padding-top: calc(var(--cle-header-h) / 2);
  color: var(--cle-white);
}

.cle-about__hero-copy {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 760px);
  text-align: center;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.cle-about__hero-copy h1 {
  margin: 0;
  font: 200 clamp(21px, 2.3vw, 32px)/1.9 var(--cle-font-mincho);
}

/* ==========================================================================
   3. 背景 / 私たちの使命（移植元: about.css 「03 Background / Our mission」）

   2段組。左右は罫線1本で分ける。
   ========================================================================== */

.cle-about__mission {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
}

.cle-about__mission-col + .cle-about__mission-col {
  padding-left: 64px;
  border-left: 1px solid var(--cle-line);
}

.cle-about__mission-label {
  margin: 0 0 20px;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.cle-about__mission-col h2 {
  margin: 0 0 28px;
  color: var(--cle-ink);
  font: 300 clamp(17px, 1.55vw, 22px)/1.85 var(--cle-font-mincho);
}

/* 本文の段落。強調（b）は太字ではなく下線1本で示す。 */
.cle-about__prose p {
  margin: 0 0 20px;
  line-height: 2.15;
  text-align: justify;
  text-align-last: left;
}

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

.cle-about__prose b {
  border-bottom: 1px solid var(--cle-line-strong);
  font-weight: 500;
}

/* ==========================================================================
   4. コンセプト（移植元: about.css 「04 Concept」）

   左テキストは他の面と同じコンテンツ幅の左端に揃え、右の写真はページ
   右端まで抜く。負のマージンや 100vw を使わないので、スクロールバー幅の
   ズレや横スクロールが起きない。
   ========================================================================== */

.cle-about__concept-block {
  padding-left: max(
    var(--cle-page-gutter),
    calc((100% - 1400px) / 2 + var(--cle-page-gutter))
  );
  padding-right: 0;
}

/* 写真は行の高さいっぱいに伸ばし、テキストだけを天地中央に置く。
   中央揃えのままだと、行の高さが写真より大きくなったときに
   写真が上に取り残されてテキストと位置がずれる。 */
.cle-about__concept {
  display: grid;
  grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
  align-items: stretch;
  gap: 56px;
}

.cle-about__concept-copy {
  align-self: center;
}

.cle-about__concept-copy h2 {
  margin: 18px 0 32px;
  color: var(--cle-ink);
  font: 300 clamp(20px, 1.95vw, 26px)/1.75 var(--cle-font-mincho);
}

.cle-about__concept-copy p {
  margin: 0 0 22px;
  line-height: 2.3;
}

.cle-about__concept-copy p:last-child {
  margin-bottom: 0;
}

/* 枠を行の高さいっぱいに伸ばし、写真は absolute でその枠に貼り付ける。
   写真の高さが行の高さと必ず一致するので、上下の余白は左の段と同じ値
   （面の padding）になり、テキストとも天地中央で揃う。

   登場演出の scale(1.04) が画面右端からはみ出して横スクロールが出るため、
   枠でクリップしておく。 */
.cle-about__concept-visual {
  position: relative;
  align-self: stretch;
  min-height: clamp(520px, 70vh, 760px);
  overflow: hidden;
}

.cle-about__concept-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 登場演出：ぼかしから輪郭が立ち上がる（ヒーローのスライド切替と同じ語彙）。
   デザインはスクロール量に追従させていたが、共通の reveal に寄せてある
   （冒頭コメントの「デザインから変えたところ」2）。

   .cle-reveal（cle-common.css）の持ち上がりはこの枠には要らないので、
   透明度と変形は枠ではなく中の写真に持たせる。枠側の .cle-reveal は
   ここで打ち消す。 */
.cle-about__concept-visual.cle-reveal {
  opacity: 1;
  transform: none;
}

.cle-about__concept-visual.cle-reveal img {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.04);
  transition:
    opacity 1.2s ease,
    filter 0.9s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cle-about__concept-visual.cle-reveal.is-visible img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* ==========================================================================
   5. 香りと過ごす、余白の時間（移植元: about.css 「05 整える体験」）

   TOPの product-card と同じ、罫線だけで区切る3段組。
   ========================================================================== */

.cle-about__care-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cle-about__care-card {
  padding: 0 34px;
  border-right: 1px solid var(--cle-line);
}

.cle-about__care-card:first-child {
  padding-left: 0;
}

.cle-about__care-card:last-child {
  padding-right: 0;
  border-right: 0;
}

.cle-about__care-no {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  opacity: 0.28;
}

/* 英語は番号に添える小さなラベル、日本語がこのブロックの見出し */
.cle-about__care-en {
  margin: 16px 0 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.cle-about__care-label {
  margin: 8px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cle-line);
  color: var(--cle-ink);
  font: 300 19px/1.6 var(--cle-font-mincho);
}

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

/* ==========================================================================
   6. 5つの部屋（暗部。移植元: about.css 「06 5つの部屋」）

   ここだけ地が暗い。カードは5部屋のセレクションページへのリンク。
   ========================================================================== */

.cle-about__rooms {
  padding: 96px 0 104px;
  background: #26211d;
  color: rgba(255, 251, 244, 0.94);
}

/* 見出しは地の色を継ぐ（cle-page.css は明部向けに --cle-ink を当てている）。
   ラベルとリード文は紙色を透かす。デザインは .rooms-dark でリード文だけ
   明るくしていて、ラベル（Rooms）は明部と同じ --ink-soft のまま＝暗い地に
   暗い字だったので、ここで揃えてある。 */
.cle-about__rooms .cle-page__head h2 {
  color: inherit;
}

.cle-about__rooms .cle-page__head-label,
.cle-about__rooms .cle-page__head-lead {
  color: rgba(255, 251, 244, 0.68);
}

.cle-about__room-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.cle-about__room-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.5s ease;
}

/* ホバーしていない4枚は沈めて、選んだ1枚に視線を集める。
   （タッチ環境ではホバーが残るため、ポインタのある環境だけ） */
@media (hover: hover) {
  .cle-about__room-grid:hover .cle-about__room-card:not(:hover) {
    opacity: 0.55;
  }
}

.cle-about__room-grid:focus-within .cle-about__room-card:not(:focus-within) {
  opacity: 0.55;
}

/* 枠は登場時のわずかな引き（scale の戻し）を受け持つ。
   ホバーの拡大は中の img 側なので、両者がぶつからない。

   .is-visible は cle-ui.js が .cle-about__room-grid（data-cle-reveal 付き）に
   足す。グリッド全体で1回だけ動かし、5枚は --cle-reveal-delay でずらす。 */
.cle-about__room-media {
  overflow: hidden;
  margin-bottom: 18px;
  transform: scale(1.04);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cle-reveal-delay, 0s);
}

.cle-about__room-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  opacity: 0;
  filter: blur(14px);
  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s ease,
    filter 0.9s ease;
  transition-delay: var(--cle-reveal-delay, 0s);
}

.cle-about__room-grid.is-visible .cle-about__room-media {
  transform: scale(1);
}

.cle-about__room-grid.is-visible .cle-about__room-media img {
  opacity: 0.86;
  filter: blur(0);
}

/* 左から順に 0.1 秒ずつ遅らせて、廊下を歩いて扉を見ていくように */
.cle-about__room-card:nth-child(2) {
  --cle-reveal-delay: 0.1s;
}

.cle-about__room-card:nth-child(3) {
  --cle-reveal-delay: 0.2s;
}

.cle-about__room-card:nth-child(4) {
  --cle-reveal-delay: 0.3s;
}

.cle-about__room-card:nth-child(5) {
  --cle-reveal-delay: 0.4s;
}

/* ホバー：暗い客室に明かりが入るように、拡大は控えめで明度を上げる。
   filter は登場演出の blur と同じプロパティなので、blur(0) を残したまま
   brightness を足す（関数リストが揃うので滑らかに補間される）。
   ホバーは待たせないので delay は 0 に戻す。 */
.cle-about__room-card:hover .cle-about__room-media img,
.cle-about__room-card:focus-visible .cle-about__room-media img {
  opacity: 1;
  filter: blur(0) brightness(1.18) saturate(1.05);
  transform: scale(1.03);
  transition-delay: 0s;
}

.cle-about__room-code {
  margin: 0;
  color: rgba(255, 251, 244, 0.52);
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* 日本語の部屋名が主。フランス語名は固有名詞として小さく添える */
.cle-about__room-name {
  margin: 8px 0 0;
  font: 300 17px/1.5 var(--cle-font-mincho);
}

.cle-about__room-fr {
  margin: 5px 0 0;
  color: rgba(255, 251, 244, 0.6);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.04em;
}

.cle-about__room-mood {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 251, 244, 0.6);
  font-size: 11px;
}

/* ==========================================================================
   7. ビジョン（移植元: about.css 「07 Vision」）
   ========================================================================== */

.cle-about__phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.cle-about__phase-card {
  padding-top: 24px;
  border-top: 1px solid var(--cle-line-strong);
}

.cle-about__phase-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.cle-about__phase-no {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* 「現在地」のしるし。字組みは共通のタグのチップ（.cle-ptag）と同じ */
.cle-about__phase-now {
  padding: 4px 10px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* 英語は小さなラベル、日本語がフェーズの見出し */
.cle-about__phase-en {
  margin: 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.cle-about__phase-ja {
  margin: 10px 0 24px;
  color: var(--cle-ink);
  font: 300 18px/1.5 var(--cle-font-mincho);
}

.cle-about__phase-desc {
  margin: 0;
  font-size: 12px;
  line-height: 2.1;
  text-align: justify;
  text-align-last: left;
}

/* ==========================================================================
   8. 運営会社（移植元: about.css 「08 運営会社」）

   この面に固有の指定は無い。中身は共通パーツ2つで組んである。

     左寄せの見出し … .cle-page__head-left（cle-page.css 2節）
     定義表         … .cle-page__deftable（同 7節）

   どちらも移植当初はこのファイルに .cle-about__head-left /
   .cle-about__deftable として持っていたが、ショッピングガイドが同じものを
   使うので cle-page.css へ移した（デザイン側も about.css の
   「下層ページ共通のパーツ」に置いている）。寸法を直すときはあちら1か所。
   ========================================================================== */

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

   .cle-page__block の余白は cle-page.css が 980/760 で切っている
   （移植元が chambre.css のため）。ここで重ねて指定はしない。
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-about__room-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .cle-about__care-card {
    padding: 0 22px;
  }

  .cle-about__concept {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .cle-about__hero {
    height: clamp(320px, 46vh, 420px);
  }

  .cle-about__mission {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .cle-about__mission-col + .cle-about__mission-col {
    padding-top: 42px;
    padding-left: 0;
    border-top: 1px solid var(--cle-line);
    border-left: 0;
  }

  /* SPは1カラム。写真は左右とも全幅で抜く */
  .cle-about__concept-block {
    padding-left: 0;
  }

  .cle-about__concept {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cle-about__concept-copy {
    padding: 0 var(--cle-page-gutter);
  }

  /* SPではビジュアルを先に見せる */
  .cle-about__concept-visual {
    order: -1;
    min-height: clamp(320px, 52vh, 460px);
  }

  .cle-about__care-grid,
  .cle-about__phase-grid {
    grid-template-columns: 1fr;
  }

  .cle-about__care-card {
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--cle-line);
  }

  .cle-about__care-card + .cle-about__care-card {
    padding-top: 30px;
  }

  .cle-about__care-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .cle-about__phase-grid {
    gap: 30px;
  }

  .cle-about__rooms {
    padding: 62px 0 72px;
  }

  .cle-about__room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}

/* ==========================================================================
   10. 演出を切っている環境
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cle-about__concept-visual.cle-reveal img,
  .cle-about__room-media,
  .cle-about__room-media img {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .cle-about__room-media img {
    opacity: 0.86;
  }
}