@charset "UTF-8";

/* ==========================================================================
   cle-top.css — CLE SIESTE TOPページ

   移植元: docs/design/sample_0820/styles.css
     - ヒーロー本体          ... 551〜853 行
     - メガメニュー時の減光  ... 388〜397 行
     - Pickup（商品リスト）  ... 847〜941 行
     - レスポンシブ          ... 2484〜（〜1024）／2552〜（タブレット）／2897〜（SP）

   docs/design/sample_0820/index-v2.css（styles.css への差分版）から
     - Pickup までの「ため」    ... 1節
     - 読み込み中の幕          ... 2節
     - 商品カードのオンマウス  ... 7節

   クラス名の対応表は、ヒーローが下、Pickup は 6 節の頭に置いている。

   読み込みは _head.html.liquid の TOPページ（shop_root）のみ。
   cle-header.css より後に読むので、ヘッダー側の指定を上書きできる。

   クラス名はデザイン側から cle- プレフィックスへ改名している。対応表:
     .hero-shell            → .cle-hero
     .hero                  → .cle-hero__viewport
     .hero-scroll-space     → .cle-hero__scroll-space
     .hero-stage            → .cle-hero__stage
     .hero-carousel         → .cle-hero__carousel
     .hero-slides           → .cle-hero__slides
     .hero-slide            → .cle-hero__slide
     .hero-media            → .cle-hero__media
     .hero-media-overlay    → .cle-hero__media-overlay
     .hero-intro            → .cle-hero__intro
     .hero-lead             → .cle-hero__lead
     .hero-lead-sub         → .cle-hero__lead-sub
     .hero-slide-logo       → .cle-hero__slide-logo
     .hero-reveal           → .cle-hero__reveal
     .hero-center           → .cle-hero__center
     .hero-center-background→ .cle-hero__center-bg
     .hero-center-overlay   → .cle-hero__center-overlay
     .hero-copy             → .cle-hero__copy
     .hero-copy-kicker      → .cle-hero__kicker
     .hero-copy h1          → .cle-hero__title
     .hero-subcopy          → .cle-hero__subcopy
     .hero-carousel-nav     → .cle-hero__nav
     .hero-carousel-dot     → .cle-hero__dot
     .hero-carousel-dot-track    → .cle-hero__dot-track
     .hero-carousel-dot-progress → .cle-hero__dot-progress
     .hero-carousel-dot-center   → .cle-hero__dot-center
     --hero-progress        → --cle-hero-progress
     --hero-carousel-duration    → --cle-hero-dot-duration
   ========================================================================== */

/* ==========================================================================
   1. スクロール領域と、後続セクションとの重なり

   ヒーローは「145vh ぶんスクロールするあいだ、画面に貼り付いたまま
   中央のコピー面が左右から開く」という作り。
   .cle-hero が 145vh の場所取りをして、中身の .cle-hero__viewport が
   position:fixed で画面に留まる。

   ■ 後続セクションの被せ方と「ため」
     デザイン側はヒーロー以降の全セクションを .content-stack で包み、
       margin-top: calc(var(--pickup-hold) - 100vh); padding-top: 100vh;
     で引き上げている（index-v2.css 1節）。

     ecforce はセクションが兄弟で並ぶので包めない。代わりに
     .cle-hero 側の margin-bottom で同じ位置へ落とす。
       次セクションの上端 = 高さ + margin-top + 100vh
                          = 高さ + (--pickup-hold - 100vh) + 100vh
                          = 高さ + --pickup-hold
     つまり margin-bottom にそのまま --cle-pickup-hold を入れればよい。
     高さに依存しない式なので、タブレット/SPで高さが変わっても同じ。

     この余白は「間（ま）」そのもの。中央の幕が開ききるスクロール量が
     「高さ - 100vh」＝ 45vh、Pickup が画面下端に顔を出すのが
     「高さ - 100vh + --cle-pickup-hold」＝ 55vh。その差の 10vh ぶん、
     幕が開いたあと何も動かない時間ができる。
     旧版は -30vh で、幕が開ききる 30vh も手前からせり上がっていた。

   ■ 重なり順
     .cle-hero__viewport は fixed。後続セクションはそれより手前に来る
     必要があるので、兄弟セレクタで z-index を持たせる。
     対象を [data-section-id] に絞っているのは、TOPページのテンプレート
     （shop/base/index.html.liquid）がセクションと同じ階層に
     .c-movie_modal（position:fixed）を置いており、そこに position:relative を
     被せると動画モーダルが壊れるため。

   ■ Concierge の扉だけ Our Brands の上に出す
     デザインでは、Our Brands の地の写真が Concierge の下端に食い込みつつ、
     扉だけがその上に顔を出す（styles.css の .door-visual が z-index:1、
     .our-brands は z-index を持たない、という三層構造）。

     ecforce ではセクションに z-index:10 を付けているので、そのままだと
     Concierge と Our Brands がそれぞれ別の重なり文脈になり、扉の
     z-index:1 が Concierge の中に閉じ込められる。結果、DOM で後ろにある
     Our Brands がセクションごと扉を覆ってしまう。

     そこでこの2つのセクションにだけ z-index を持たせず、扉と地の写真を
     同じ（ルートの）重なり文脈に置いてデザインと同じ三層に戻している。

       レベル0 … .cle-hero__viewport → .cle-concierge → .cle-brands の地の写真
       レベル1 … .cle-door（扉）／.cle-brands__shell（中身は透過）

     z-index を外すと固定ヒーローより後ろへ回るため、ヒーロー側の
     .cle-hero__viewport も z-index:1 → 0 に下げてレベルを揃えてある。
     この2つのセクションは DOM で後ろにあるぶん、同じレベル0でも
     ヒーローより手前に描かれる。

     この指定は custom_html セクション全体に効くので、増やすと
     どれも重なり文脈を作らなくなる（中の z-index がページ全体に効く）。
     「香りの探し方」は自分の面に isolation:isolate を掛けて中を
     閉じ込めている（10節）。新しく足すときも同じようにすること。
   ========================================================================== */

:root {
  /* cle-top.js がスクロール量を 0→1 に正規化して書き込む */
  --cle-hero-progress: 0;

  /* 中央の幕が開ききってから Pickup がせり上がるまでの「ため」 */
  --cle-pickup-hold: 10vh;
}

.cle-hero {
  position: relative;
  height: 145vh;
  margin-bottom: var(--cle-pickup-hold);
  color: var(--cle-white);
}

.cle-hero ~ [data-section-id] {
  position: relative;
  z-index: 10;
}

/* Concierge（カスタムHTML）と Our Brands だけは重なり文脈を作らない。
   扉を Our Brands の上に出すため。上記「■ Concierge の扉だけ〜」参照。 */
.cle-hero ~ [data-section-type='custom_html'],
.cle-hero ~ .cle-brands {
  z-index: auto;
}

.cle-hero__viewport {
  position: fixed;
  top: 0;
  left: 0;
  /* 0 にしているのは、上の2つのセクションと同じレベルに置いて
     DOM 順で前後を決めさせるため。1 のままだと両者を覆ってしまう。 */
  z-index: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;
}

/* .cle-hero__viewport が fixed で流れから抜けるため、
   シェルの中身はこの余白だけになる。高さの内訳を明示する意味で残している。 */
.cle-hero__scroll-space {
  height: 45vh;
}

.cle-hero__stage {
  position: relative;
  height: 100%;
  background: #0b0f15;
  isolation: isolate;
}

/* ==========================================================================
   2. カルーセル（動画スライド／画像スライド）
   ========================================================================== */

.cle-hero__carousel,
.cle-hero__slides,
.cle-hero__slide,
.cle-hero__media,
.cle-hero__media-overlay,
.cle-hero__reveal,
.cle-hero__center {
  position: absolute;
  inset: 0;
}

.cle-hero__carousel {
  z-index: 1;
}

.cle-hero__slides {
  overflow: hidden;
}

/* 切り替えは 1.2 秒のクロスフェード。visibility を遅らせて落とすことで、
   フェードアウトが終わるまで要素を残す。 */
.cle-hero__slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  pointer-events: none;
  transition:
    opacity 1.2s ease-in-out,
    transform 1.2s ease-in-out,
    visibility 0s linear 1.2s;
  will-change: opacity, transform;
}

.cle-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: none;
  transition:
    opacity 1.2s ease-in-out,
    transform 1.2s ease-in-out,
    visibility 0s linear 0s;
}

.cle-hero__media {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上下は締めて文字を読ませ、左右の端だけわずかに明るく起こす */
.cle-hero__media-overlay {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(45, 32, 21, 0.08), rgba(15, 10, 7, 0.34)),
    linear-gradient(90deg, rgba(255, 248, 235, 0.14), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(255, 248, 235, 0.14));
}

/* ---- 動画スライドの導入コピー ---------------------------------------- */

.cle-hero__intro {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(100% - 48px, 760px);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cle-hero__lead,
.cle-hero__lead-sub {
  margin: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.cle-hero__lead {
  font-size: clamp(34px, 3.68vw, 51px);
  line-height: 1.08;
  opacity: 0.8;
}

.cle-hero__lead-sub {
  margin-top: 12px;
  font-size: 14.4px;
  font-weight: 300;
  line-height: 1.8;
}

/* ---- 画像スライドのブランドロゴ -------------------------------------- */

.cle-hero__slide-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(57.6vw, 336px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 素材は黒のロゴなので、写真の上では反転させて白で置く */
.cle-hero__slide-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: invert(1) drop-shadow(0 12px 32px rgba(0, 0, 0, 0.28));
}

/* ==========================================================================
   3. 中央に開くコピー面

   clip-path でスクロール量ぶんだけ左右から開く。
   --cle-hero-progress が 0 のときは幅ゼロ、1 で全開。
   ========================================================================== */

.cle-hero__reveal {
  z-index: 3;
  overflow: clip;
  pointer-events: none;
}

.cle-hero__center {
  display: grid;
  place-items: center;
  left: 0;
  width: 100%;
  padding: 92px 0 110px;
  overflow: hidden;
  clip-path: inset(0 calc((1 - var(--cle-hero-progress)) * 50%) 0 calc((1 - var(--cle-hero-progress)) * 50%));
}

.cle-hero__center-bg,
.cle-hero__center-overlay {
  position: absolute;
  inset: 0;
}

/* 背景画像は liquid が style 属性で入れる（ファイルアップロード側にあるため） */
.cle-hero__center-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cle-hero__center-overlay {
  background: linear-gradient(90deg, rgba(8, 10, 16, 0.74) 0%, rgba(8, 10, 16, 0.04) 18%, rgba(8, 10, 16, 0.04) 82%, rgba(8, 10, 16, 0.74) 100%);
}

/* 開ききる少し手前（progress 0.18）から文字を立ち上げる。
   transition は付けない。スクロールに直結させないと開き方が遅れて見える。 */
.cle-hero__copy {
  position: relative;
  z-index: 5;
  width: min(100%, 470px);
  padding: 42px 34px 36px;
  text-align: center;
  transform: translateY(-110px);
  opacity: clamp(0, calc((var(--cle-hero-progress) - 0.18) * 1.45), 1);
}

.cle-hero__kicker {
  width: fit-content;
  margin: 24px auto 18px;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cle-hero__title {
  margin: 0;
  font: 200 clamp(19px, 2vw, 28px)/1.52 'Noto Serif JP', serif;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.cle-hero__subcopy {
  max-width: 380px;
  margin: 26px auto 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.1;
  text-align: justify;
  text-align-last: left;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}

/* ==========================================================================
   4. スライド切り替えのドット

   画面右下に固定。中央の点が、めくれるまでの残り時間を描く円に変わる。
   ヒーローが画面から出たら消す（cle-top.js が .is-visible を外す）。
   ========================================================================== */

.cle-hero__nav {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.cle-hero__nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* デザイン側は button 全体に appearance:none のリセットを掛けていた。
   こちらはグローバルなリセットを入れていないので、ここで打ち消す
   （入れないと iOS Safari が既定の見た目を付けてくる）。 */
.cle-hero__dot {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.cle-hero__dot svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 80%;
  height: 80%;
  overflow: visible;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cle-hero__dot-track,
.cle-hero__dot-progress {
  fill: none;
  stroke-width: 3.2;
}

.cle-hero__dot-progress {
  stroke: rgba(255, 253, 249, 0.96);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: 0;
}

/* 軌道は出さない。残り時間の線だけが暗がりに浮かぶ見え方にする。 */
.cle-hero__dot-track {
  display: none;
}

.cle-hero__dot-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 7px;
  height: 7px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cle-hero__dot.is-active .cle-hero__dot-progress {
  opacity: 1;
  animation: cle-hero-dot-progress var(--cle-hero-dot-duration, 9s) linear forwards;
}

.cle-hero__dot.is-active .cle-hero__dot-center {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

@keyframes cle-hero-dot-progress {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   5. メガメニューが開いているあいだの減光

   帯の下に潜るヒーローの白文字は、すりガラス越しでも白のまま残って
   メニューと干渉する。開いている間だけ引かせる。
   .cle-hero__copy は opacity をスクロール量で駆動しているので、
   ここでは transition を付けない（付けると開き方が遅れて見える）。
   ========================================================================== */

.cle-hero__intro,
.cle-hero__slide-logo {
  transition: opacity 0.5s ease;
}

.cle-mega-open .cle-hero__intro,
.cle-mega-open .cle-hero__slide-logo,
.cle-mega-open .cle-hero__copy {
  opacity: 0.16;
}

/* ==========================================================================
   6. Pickup（商品リスト）

   移植元: docs/design/sample_0820/styles.css 847〜941 行

   クラス名の対応表:
     .hero-pickup-overlay → .cle-pickup__overlay
     .pickup              → .cle-pickup__body
     .pickup-heading      → .cle-pickup__heading
     .product-grid        → .cle-product-grid
     .product-card        → .cle-product-card
     .product-image       → .cle-product-card__image
     .product-card small  → .cle-product-card__brand
     .product-card h3     → .cle-product-card__name
     .product-card p      → .cle-product-card__price
     .pc-media            → .cle-product-card__media   （v2 で追加）
     .pc-view             → .cle-product-card__view    （v2 で追加）
     （対応なし）          → .cle-pickup__more / __view-all（News の帯と同じ組み）

   .cle-product-grid / .cle-product-card は Pickup 専用ではなく、
   デザイン側ではブランドページの商品一覧（.brand-product-grid）でも
   使い回している共通コンポーネント。2ページ目で必要になった時点で
   共通CSSへ移すこと。
   ========================================================================== */

/* 見出しの帯。ヒーローの上に重なる位置なので地色は敷かず、
   黒のグラデーションだけを掛けて白文字を読ませる。 */
.cle-pickup__overlay {
  position: relative;
  z-index: 8;
  padding: 18px 42px 19px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 52%, rgba(0, 0, 0, 0.82) 100%);
}

/* 背景画像は liquid が style 属性で入れる（地色のグラデーションと重ねて出力）。
   ファイルアップロード側にあるため、URL をここに書けない。

   background-color を必ず敷いているのは、この面が透けると背後の
   ヒーロー（position:fixed）がそのまま見えてしまうため。
   デザイン側は背景画像が不透明であることに依存していて地色を持たないが、
   ここでは画像未設定でも成立するようにしている。 */
.cle-pickup__body {
  position: relative;
  z-index: 1;
  background-color: var(--cle-paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cle-pickup__heading {
  display: flex;
  align-items: baseline;
  gap: 28px;
  color: var(--cle-white);
}

/* デザイン側は .pickup-heading / .section-header / .rooms-copy-left .eyebrow の
   3つで同じ見出し組みを共有している。ここでも同じ形にしておく。 */
.cle-pickup__heading h2,
.cle-section-header h2 {
  margin: 0;
  font-size: clamp(30px, 2.88vw, 40px);
  line-height: 1;
}

.cle-pickup__heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2em;
  font-weight: 300;
}

/* 列数は管理画面の「行あたりの商品表示件数」を liquid が
   --cle-product-columns として渡してくる。 */
.cle-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--cle-product-columns, 4), minmax(0, 1fr));
}

/* カード同士は縦罫1本だけで仕切る。カードの地色は下へ向かって
   透明に抜け、背景画像に溶ける。 */
/* position:relative は View（.cle-product-card__view）の位置基準。

   カードの地（background）は絶対にトランジションさせないこと。
   下へ向かって透けるグラデーションから単色へは補間できず、
   background-image が即座に none へ飛ぶ一方で background-color だけが
   補間されるため、途中でカードがまるごと透明になる。
   カード自体は動かさず、中身だけを静かに応えさせる。 */
.cle-product-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 420px;
  padding: 26px 8px 18px;
  border-right: 1px solid var(--cle-line);
  background: linear-gradient(180deg, #fff 0%, #fff 56%, rgba(255, 255, 255, 0.78) 78%, rgba(255, 255, 255, 0) 100%);
  color: inherit;
  text-align: left;
  text-decoration: none;
}

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

/* 画像の拡大がカードの外へはみ出さないよう、枠で切る。
   aspect-ratio と下余白は、v2 で画像本体からこの枠へ移った。 */
.cle-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 18px;
  overflow: hidden;
}

/* 画像は最初から 3.5% 大きい寸法で置き、通常時は縮めて表示する。
   ホバーで等倍（scale(1)）まで戻すことで「拡大した」ように見せる。

   scale(1) → scale(1.035) と拡大する書き方にしないのは、Chrome が
   合成レイヤーを「等倍」の解像度で焼くため。拡大が進むと解像度が
   足りなくなってレイヤーを焼き直し、それが小刻みな震えとして見える。
   1フレームあたり片側 0.125px しか動かないサブピクセル領域なので、
   焼き直しの粗さがそのまま目立つ。
   最初から大きい寸法で置けば、レイヤーは「拡大しきった側」の解像度で
   焼かれ、アニメーション中に焼き直しが起きない。

   枠が正方形なので、負の margin（% は上下左右とも幅基準）で中央に戻せる。 */
.cle-product-card__media .cle-product-card__image {
  /* bundle.css / util.css の img { max-width: 100% } が効くと
     幅だけ 100% に丸められて縦横比が崩れるので明示的に外す。 */
  max-width: none;
  width: 103.5%;
  height: 103.5%;
  margin: -1.75% 0 0 -1.75%;
  object-fit: contain;
  transform: scale(0.966184); /* = 1 / 1.035 */
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.cle-product-card:hover .cle-product-card__image,
.cle-product-card:focus-visible .cle-product-card__image {
  transform: scale(1);
}

/* View は価格行の左の余白に置く。価格は右寄せなので、
   カードの高さを増やさずに収まる。 */
.cle-product-card__view {
  position: absolute;
  left: 8px;
  bottom: 21px;
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.cle-product-card__view::after {
  display: inline-block;
  margin-left: 8px;
  content: '\2192';
}

.cle-product-card:hover .cle-product-card__view,
.cle-product-card:focus-visible .cle-product-card__view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cle-product-card__media .cle-product-card__image,
  .cle-product-card__view {
    transition-duration: 0.01ms;
  }
}

.cle-product-card__brand {
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cle-product-card__name {
  margin: auto 0 0;
  font-size: 14px;
}

.cle-product-card__price {
  margin: 3px 0 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  text-align: right;
}

/* 「View all」。デザインには無く、News の帯（11節の .cle-news__more /
   .cle-news__view-all）と同じ組みで足したもの。違うのは地の明暗だけで、
   あちらが暗い地の白、こちらが明るい地の墨。
   寸法を直すときは両方を見ること。

   グリッドはカードが全幅に並ぶので、左右の余白はこの行が自分で持つ。
   --cle-page-gutter（cle-common.css の :root。42 → 24 → 20）を使うので、
   レスポンシブの指定は要らない。 */
.cle-pickup__more {
  display: flex;
  justify-content: flex-end;
  padding: 4px var(--cle-page-gutter) 56px;
}

.cle-pickup__view-all {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: var(--cle-ink);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.cle-pickup__view-all:hover,
.cle-pickup__view-all:focus-visible {
  opacity: 0.6;
}

/* ==========================================================================
   7. 読み込み中の幕

   移植元: docs/design/sample_0820/index-v2.css 2節

   初期状態は「非表示」。cle-top.js が html.cle-loading を付けたときだけ出す。
   こうしておけば JS が落ちても幕が残って本文が読めなくなることがない。

   クラス名の対応表:
     .site-loader      → .cle-loader
     .site-loader-logo → .cle-loader__logo
     html.is-loading   → html.cle-loading
   ========================================================================== */

.cle-loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  /* cle-common.css が未読込などで変数が解決できないと、幕が透明になって
     背後の暗いヒーローが透けてしまう。実値をフォールバックに置く。 */
  background: var(--cle-bg, #f4ede1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.cle-loading .cle-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 読み込み中はスクロールさせない。
   scrollbar-gutter でスクロールバーぶんの幅を確保しておくのが要点。
   これが無いと、ロック解除の瞬間にスクロールバーが戻って表示領域が狭まり、
   中央寄せのロゴがフェード中に横へ数ピクセルずれる。 */
html.cle-loading,
html.cle-loading body {
  overflow: hidden;
}

html.cle-loading {
  scrollbar-gutter: stable;
}

.cle-loader__logo {
  width: min(46vw, 220px);
  height: auto;
  opacity: 0;
  /* 位置は一切動かさない。translateY を入れるとロゴが数ピクセル動いて見え、
     さらにサブピクセル位置になって輪郭が滲む。フェードだけで見せる。 */
  transition: opacity 1s ease;
}

/* .is-in は JS が次フレームで付ける（同一フレームだと transition が走らない）。
   html.cle-loading を条件に入れないこと。退場時に cle-loading が外れた瞬間、
   ロゴが transition なしで消えてバッサリ切り替わってしまう。 */
.cle-loader.is-in .cle-loader__logo {
  opacity: 1;
}

/* ---- 退場 -------------------------------------------------------------
   退場は .is-out だけで完結させる。
   ベースの .cle-loader は visibility:hidden を持っているため、
   ここで visibility を明示的に戻しておかないと、cle-loading が外れた瞬間に
   幕が即座に消えてフェードが見えなくなる（visibility は transition しない）。 */
.cle-loader.is-out {
  visibility: visible;
  opacity: 0;
  /* ロゴが消えきるのを待ってから、ゆっくり幕を引く。 */
  transition:
    opacity 1.15s ease 0.35s,
    visibility 0s linear 1.5s;
}

.cle-loader.is-out .cle-loader__logo {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* 退場しきったら cle-top.js が hidden 属性を付ける。
   UA の [hidden]{display:none} は .cle-loader{display:grid} に負けるので、
   ここで明示的に落とす。これが無いと、透明なまま z-index:400 の面が
   ページの上に残り続ける。 */
.cle-loader[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cle-loader,
  .cle-loader__logo,
  .cle-loader.is-out,
  .cle-loader.is-out .cle-loader__logo {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   アンカーで来たときの着地位置

   ヘッダーとフッターの「香りの部屋」「取扱ブランド」は /#concierge と
   /#brands でここへ送ってくる。ヘッダーは固定なので、そのまま合わせると
   節の頭がヘッダーの下に潜る。ショッピングガイドの節（cle-guide.css 2節）と
   同じ値で下げている。

   位置合わせそのものは cle-top.js の読み込みの幕が行う。幕の裏では
   overflow を止めているので、ブラウザ既定の飛び先合わせが効かないため。
   -------------------------------------------------------------------------- */

.cle-concierge,
.cle-brands {
  scroll-margin-top: calc(var(--cle-header-h) + 24px);
}

/* ==========================================================================
   8. Concierge（気分を選ぶ → 鍵 → 扉）

   移植元: docs/design/sample_0820/styles.css 949〜1357 行
           docs/design/sample_0820/index-v2.css 3節（尺の調整ぶんは反映済み）

   マークアップは管理画面のカスタムHTMLに入れている（静的なため）。
   挙動は cle-top.js の「Concierge」節。

   クラス名の対応表:
     .concierge            → .cle-concierge
     .plaster-surface      → .cle-concierge__surface
     .section-header       → .cle-section-header
     .mood-grid            → .cle-mood-grid
     .mood-ring            → .cle-mood-ring
     .mood-key             → .cle-mood-key
     .auto-flying-key      → .cle-flying-key
     .rooms-stage          → .cle-rooms
     .rooms-copy-left      → .cle-rooms__copy--left
     .rooms-copy-right     → .cle-rooms__copy--right
     .eyebrow              → .cle-rooms__eyebrow
     .room-entry-copy      → .cle-room-entry
     .room-entry-number    → .cle-room-entry__number
     .room-entry-name      → .cle-room-entry__name
     .room-entry-title     → .cle-room-entry__title
     .room-entry-description → .cle-room-entry__desc
     .room-entry-nav       → .cle-room-entry__nav
     .room-entry-arrow     → .cle-room-entry__arrow
     .door-visual          → .cle-door
     .door-gif             → .cle-door__media
     .door-enter           → .cle-door__enter
     .screen-blackout      → .cle-blackout
     body.is-transitioning → body.cle-transitioning

   .cle-section-header はデザイン側の .section-header と同じく、
   Our Brands など後続セクションでも使う共通の見出し。
   ========================================================================== */

/* 背景写真の URL はカスタムHTML が style 属性で --cle-concierge-bg に渡す。
   background-color を敷いているのは Pickup と同じ理由で、この面が透けると
   背後の固定ヒーローが見えてしまうため。

   position:relative は、セクション枠から z-index を外した代わり（1節参照）。
   これが無いと背景が「位置指定なしの背景」の層まで落ちて、
   固定ヒーローの下に沈む。z-index は付けないこと（付けると重なり文脈が
   できて、扉がまた Our Brands の下に閉じ込められる）。 */
.cle-concierge {
  position: relative;
  background-color: var(--cle-paper);
  background-image:
    linear-gradient(180deg, rgba(252, 248, 240, 0.68), rgba(250, 244, 234, 0.9)),
    var(--cle-concierge-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cle-concierge__surface {
  padding: 72px 42px 92px;
}

/* ---- 見出し（共通） --------------------------------------------------- */

.cle-section-header {
  display: flex;
  align-items: baseline;
  gap: 28px;
}

.cle-concierge .cle-section-header {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.cle-section-header p {
  margin: 0;
  color: var(--cle-ink-soft);
}

/* ---- 気分のボタン ----------------------------------------------------- */

.cle-mood-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin-top: 42px;
}

.cle-mood-grid button {
  position: relative;
  width: 168px;
  min-width: 168px;
  min-height: 168px;
  padding: 24px 18px;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  color: #3f372f;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  overflow: visible;
  transition: opacity 0.35s ease;
}

/* 円は SVG のストロークを描き足していく。回転させて 12 時から始める。 */
.cle-mood-ring {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  overflow: visible;
  transform: rotate(-90deg);
}

.cle-mood-ring circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 282.75;
  stroke-dashoffset: 282.75;
}

.cle-mood-grid button span {
  display: inline-block;
  max-width: 8em;
  text-align: center;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.cle-mood-grid button span small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.2;
  opacity: 1;
  white-space: nowrap;
}

/* 鍵。出現は v2 で 0.35s → 0.7s に伸ばしている。 */
.cle-mood-key {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 74%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  filter: drop-shadow(0 14px 22px rgba(52, 40, 28, 0.16));
}

/* 鍵が出ているあいだは、円と文字を引っ込める */
.cle-mood-grid button.is-key-visible .cle-mood-ring,
.cle-mood-grid button.is-key-visible span {
  opacity: 0;
  visibility: hidden;
}

.cle-mood-grid button.is-key-visible .cle-mood-key {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  transform: translate(-50%, -50%) scale(1);
}

/* 部屋が開いているボタンは円を白く光らせる */
.cle-mood-grid button.is-room-open .cle-mood-ring {
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 38px rgba(255, 255, 255, 0.58));
}

.cle-mood-grid button.is-room-open .cle-mood-ring circle {
  stroke: rgba(255, 255, 255, 1);
}

.cle-mood-grid button.is-room-open span {
  filter: none;
  text-shadow: none;
}

.cle-mood-grid button.is-key-dragging .cle-mood-key {
  cursor: grabbing;
}

.cle-mood-grid button.is-key-used .cle-mood-key {
  opacity: 0;
  pointer-events: none;
}

/* 飛ぶ鍵とのクロスフェードが長いと二重に見えるので、
   移動が始まるときのボタン上の鍵は素早く引き取る（v2）。 */
.cle-mood-grid button.is-key-flying .cle-mood-key {
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* ---- 扉へ飛ぶ鍵 -------------------------------------------------------
   ボタン上の鍵とは別に、body 直下へ複製を作って動かす。
   出現は短く、消えるときだけゆっくりフェードさせる（v2）。 */

.cle-flying-key {
  position: fixed;
  z-index: 30;
  width: var(--cle-flying-key-size, 74%);
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    left 1.35s cubic-bezier(0.22, 0.8, 0.2, 1),
    top 1.35s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.22s ease;
  filter: drop-shadow(0 16px 22px rgba(52, 40, 28, 0.22));
}

.cle-flying-key.is-visible {
  opacity: 1;
}

.cle-flying-key.is-fading {
  opacity: 0;
  transition:
    left 1.35s cubic-bezier(0.22, 0.8, 0.2, 1),
    top 1.35s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.6s ease;
}

@keyframes cle-mood-ring-draw {
  from {
    stroke-dashoffset: 282.75;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ---- 部屋（扉と左右のコピー） ----------------------------------------- */

.cle-rooms {
  position: relative;
  --cle-door-width: clamp(330px, 36vw, 480px);
  /* 扉の絵は上寄りに描かれているので、周りのコピーを視覚的に合わせるための逃げ */
  --cle-door-optical-offset: -52px;
  display: grid;
  grid-template-columns: minmax(140px, 0.86fr) minmax(280px, 380px) minmax(180px, 0.86fr);
  align-items: center;
  gap: 12px;
  min-height: 760px;
  margin-top: -56px;
}

.cle-rooms__copy--left {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center end;
  align-self: center;
  justify-self: end;
  padding-right: 0;
  transform: translateY(calc(var(--cle-door-optical-offset) + 65px));
}

.cle-rooms__copy--right {
  position: relative;
  z-index: 1;
  display: grid;
  align-self: center;
  justify-self: start;
  width: max-content;
  max-width: 300px;
  padding-left: 0;
  text-align: left;
  transform: translateY(calc(var(--cle-door-optical-offset) + 75px));
}

/* 部屋が選ばれると「Nos Chambres」が引き、その場所に部屋の情報が現れる */
.cle-rooms__eyebrow {
  margin: 0;
  color: #1f1812;
  font-size: clamp(30px, 2.88vw, 40px);
  line-height: 1;
  transition: opacity 0.7s ease;
}

.cle-rooms__copy--left.is-room-active .cle-rooms__eyebrow {
  opacity: 0;
}

.cle-room-entry {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 220px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.7s ease;
}

.cle-room-entry.is-visible {
  opacity: 1;
}

.cle-room-entry__number,
.cle-room-entry__name,
.cle-room-entry__title,
.cle-room-entry__desc {
  margin: 0;
}

.cle-room-entry__number {
  font-size: 11px;
  letter-spacing: 0.1em;
}

.cle-room-entry__name {
  margin-top: 6px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  white-space: nowrap;
}

.cle-room-entry__title {
  margin-top: 10px;
  font: 300 15px/1.6 'Noto Serif JP', serif;
}

.cle-room-entry__desc {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.9;
  white-space: nowrap;
}

.cle-room-entry__nav {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.cle-room-entry__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(31, 24, 18, 0.22);
  border-radius: 999px;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.cle-room-entry__arrow:hover {
  background: rgba(31, 24, 18, 0.06);
  border-color: rgba(31, 24, 18, 0.38);
  transform: translateY(-1px);
}

.cle-room-entry__arrow span {
  font-size: 14px;
  line-height: 1;
}

.cle-rooms__copy--right h3 {
  margin: 0 0 18px;
  font: 300 clamp(24px, 2.45vw, 34px)/1.18 'Noto Serif JP', serif;
}

.cle-rooms__copy--right p {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: 11px;
  line-height: 2;
  text-align: justify;
  text-align-last: left;
}

/* ---- 扉 --------------------------------------------------------------- */

.cle-door {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 1;
  transform-origin: center center;
  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease;
}

.cle-door__enter {
  position: absolute;
  top: calc(50% + var(--cle-door-optical-offset) + 92px);
  left: calc(50% - 3px);
  z-index: 3;
  color: rgba(255, 255, 255, 0.96);
  font: 400 29.7px/1 'Cormorant Garamond', serif;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.28s ease;
}

.cle-door.is-drop-target {
  filter: drop-shadow(0 0 22px rgba(191, 154, 94, 0.24));
}

.cle-door.is-open {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.22));
}

/* ENTER は扉が開ききってから浮かび上がらせる（v2）。
   扉と同時に出ると、開く前から出口が見えていて興ざめになる。 */
.cle-door.is-ready .cle-door__enter {
  opacity: 1;
  transition: opacity 0.6s ease 1.4s;
}

/* 遷移に入るときは待たずに消す */
.cle-door.is-transitioning .cle-door__enter {
  opacity: 1;
  transition: opacity 0.28s ease;
}

.cle-door.is-ready {
  cursor: pointer;
}

/* 部屋へ入るとき。扉が手前へ大きくなりながら消える。 */
.cle-door.is-transitioning {
  opacity: 0;
  transform: scale(2.35);
  transition:
    transform 8s cubic-bezier(0.2, 0.72, 0.16, 1) 0.2s,
    filter 8s ease 0.2s,
    opacity 0.42s ease;
}

/* 素材はアニメーションWebP（元は GIF）。
   差し替わる瞬間のカットは v2 で 0.18s → 0.45s に伸ばしている */
.cle-door__media {
  width: min(100%, var(--cle-door-width));
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.18));
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* 1コマ目を canvas で焼くまでは出さない（読み込み直後に勝手に再生されるのを隠す） */
.cle-door__media[data-has-static-frame='0']:not([data-frozen='1']) {
  opacity: 0;
}

/* ---- 部屋ページへの遷移で画面を暗転させる幕 ---------------------------
   ヘッダー（z-index 40）より前、読み込み中の幕（400）より後ろ。
   マークアップは cle_hero.liquid が出す。セクションの中に置くと
   z-index:10 の重なり文脈に閉じ込められてヘッダーを覆えないため。 */

.cle-blackout {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.cle-blackout.is-active {
  opacity: 1;
}

body.cle-transitioning {
  overflow: hidden;
}

/* ==========================================================================
   9. Our Brands（ブランドを切り替えて見せる）

   移植元: docs/design/sample_0820/styles.css 1361〜1560 行
           docs/design/sample_0820/index-v2.css 4〜5 節

   マークアップは shop/snippets/_cle_brands.html.liquid、
   挙動は cle-top.js の「Our Brands」節。

   クラス名の対応表:
     .our-brands            → .cle-brands
     .our-brands-shell      → .cle-brands__shell
     .brand-backdrop        → .cle-brands__backdrop
     .brand-backdrop-layer  → .cle-brands__backdrop-layer
     .brand-backdrop-scrim  → .cle-brands__scrim
     .our-brands-header     → .cle-brands__header
     .brand-marquee         → .cle-brands__marquee
     .brand-marquee-link    → .cle-brands__logo-btn
     .brand-marquee-logo    → .cle-brands__logo
     .brand-marquee-logo-base   → .cle-brands__logo.--base
     .brand-marquee-logo-invert → .cle-brands__logo.--invert
     .brand-feature         → .cle-brands__feature
     .brand-feature-visual  → .cle-brands__visual
     .brand-feature-copy    → .cle-brands__copy（中の1ブランド分が __copy-item）
     .brand-feature-logo    → .cle-brands__feature-logo
     .brand-feature-link    → .cle-brands__link
     .brand-product-grid    → .cle-brands__products（中の1ブランド分が __product-set）
     .brand-reveal          → .cle-reveal
     .is-brand-swapping     → .is-swapping

   ■ デザインとの作りの違い
     デザイン側は JS が画像URLと商品名を差し替えていたので、表示中の
     1ブランド分しか DOM に無かった。ここでは商品が liquid 側にしか
     無いため5ブランド分を出力し、is-active を付け替えている。
     そのぶん、地の写真の「2レイヤーを交互に使う」仕掛けは要らない
     （5枚を重ねて opacity を入れ替えれば、それがクロスフェードになる）。

     商品カードは Pickup と同じ .cle-product-card をそのまま使う。
     デザイン側は暗い地の上に置く前提で白抜きにしたものを index-v2.css の
     5節で紙のカードへ戻していたが、こちらは最初から紙のカードなので
     打ち消しは要らない。
   ========================================================================== */

/* 地の写真は __backdrop が持つので、セクション自身は暗い地色だけ。
   margin-top で Concierge の下端に食い込ませ、__shell の上 padding で
   中身を押し戻している（食い込んだぶんは地の写真が見える）。 */
.cle-brands {
  position: relative;
  margin-top: -252px;
  overflow: hidden;
  background-color: #17120d;
}

.cle-brands__shell {
  position: relative;
  z-index: 1;
  padding: 199px 42px 92px;
}

/* ---- 地の写真 --------------------------------------------------------- */

.cle-brands__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 5枚を重ねて opacity で入れ替える。切り替え中に写真が抜けないよう、
   出ていく側と入ってくる側が同時に動く。 */
.cle-brands__backdrop-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.cle-brands__backdrop-layer.is-active {
  opacity: 1;
}

/* どのブランドの写真に変わっても、見出しと商品名の読みやすさが
   変わらないようにする固定の膜。上から下まで生成りの膜をかけ、
   ブランド写真は色味だけを透かす。文字はすべて濃色で、5ブランド
   すべてで WCAG AA を満たすことをデザイン側で実測済み。 */
.cle-brands__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(244, 237, 225, 0.94) 0%,
    rgba(244, 237, 225, 0.8) 16%,
    rgba(250, 244, 234, 0.72) 42%,
    rgba(250, 245, 236, 0.74) 60%,
    rgba(251, 247, 240, 0.84) 76%,
    rgba(252, 248, 242, 0.9) 100%
  );
}

/* スクロールで持ち上がる演出（.cle-reveal）は cle-common.css の 3 節へ移した。
   香りの部屋・ブランドページでも使うため。挙動は clesieste/js/cle-ui.js。 */

/* ---- 見出し ----------------------------------------------------------- */

.cle-brands__header {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* 色は --cle-ink-soft より濃い。地の写真にかかる位置なので、
   膜の濃度と合わせてコントラストを取ってある値（デザイン側の実測）。 */
.cle-brands__header p {
  max-width: 560px;
  color: rgba(39, 31, 24, 0.78);
  font-size: 11px;
  line-height: 1.9;
}

/* ---- ロゴの列 --------------------------------------------------------- */

/* grid-auto-flow: column にしているのは、ブランドの数が増減しても
   列数を書き換えずに済むようにするため（repeat(5,...) と同じ結果）。 */
.cle-brands__marquee {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 38px auto 50px;
  max-width: 1400px;
}

.cle-brands__logo-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.45s ease;
}

.cle-brands__logo-btn.is-active,
.cle-brands__logo-btn:hover,
.cle-brands__logo-btn:focus-visible {
  opacity: 1;
}

.cle-brands__logo {
  width: 100%;
  max-width: 315px;
  height: 105px;
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 通常は黒、ホバー時は白。1枚の filter を掛け替えると切り替わりが
   飛ぶので、2枚重ねて opacity で渡す。 */
.cle-brands__logo.--base {
  filter: brightness(0) saturate(100%) opacity(0.92);
  opacity: 1;
}

.cle-brands__logo.--invert {
  position: absolute;
  inset: 0;
  filter: invert(1) brightness(0.96) opacity(0.92);
  opacity: 0;
}

.cle-brands__logo-btn:hover .cle-brands__logo.--base,
.cle-brands__logo-btn:focus-visible .cle-brands__logo.--base {
  opacity: 0;
}

.cle-brands__logo-btn:hover .cle-brands__logo.--invert,
.cle-brands__logo-btn:focus-visible .cle-brands__logo.--invert {
  opacity: 1;
}

/* ロゴ画像が未設定のときの代替。 */
.cle-brands__logo-text {
  font-family: var(--cle-font-en);
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- ブランド写真と説明 ------------------------------------------------ */

.cle-brands__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.92fr);
  gap: 34px;
  align-items: center;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.cle-brands__visual {
  position: relative;
}

/* 写真の高さがブランドごとに変わると、切り替えのたびに下の商品が
   上下してしまうので、比率を固定する。 */
.cle-brands__visual-image {
  display: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cle-brands__visual-image.is-active {
  display: block;
}

.cle-brands__copy-item {
  display: none;
  justify-items: center;
  padding-bottom: 18px;
}

.cle-brands__copy-item.is-active {
  display: grid;
}

/* 幅はブランドごとに liquid が --cle-brand-logo-w で渡す
   （ロゴの縦横比が揃っていないため）。 */
.cle-brands__feature-logo {
  width: 100%;
  max-width: var(--cle-brand-logo-w, 139px);
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) opacity(0.92);
}

.cle-brands__copy-item p {
  margin: 0;
  color: rgba(39, 31, 24, 0.84);
  font-size: 15px;
  line-height: 2;
  text-align: justify;
  text-align-last: left;
}

.cle-brands__link {
  display: inline-block;
  position: relative;
  margin-top: 34px;
  color: inherit;
  font-size: 22px;
  text-decoration: none;
}

/* 下線は2本用意する。通常時に見えている ::before を消しながら、
   ::after を左から引き直す。 */
.cle-brands__link::before,
.cle-brands__link::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  content: '';
  background: currentColor;
}

.cle-brands__link::before {
  width: 100%;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.cle-brands__link::after {
  width: 0;
  animation: none;
}

.cle-brands__link:hover::before,
.cle-brands__link:focus-visible::before {
  opacity: 0;
}

.cle-brands__link:hover::after,
.cle-brands__link:focus-visible::after {
  animation: cle-brands-underline 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cle-brands-underline {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ---- 商品 -------------------------------------------------------------- */

.cle-brands__products {
  width: min(100%, 1400px);
  margin: 68px auto 0;
}

/* .cle-product-grid の display:grid を打ち消すので、
   6節より後ろ（＝このファイルのここ）に置く必要がある。 */
.cle-brands__product-set {
  display: none;
}

.cle-brands__product-set.is-active {
  display: grid;
}

/* ---- ブランドを切り替えるあいだのフェード ------------------------------
   .cle-brands__feature と .cle-brands__products は data-cle-reveal の
   スクロール演出が opacity を握っているので、その子要素側でフェードさせる。
   ----------------------------------------------------------------------- */

.cle-brands__visual,
.cle-brands__copy,
.cle-brands__product-set {
  transition: opacity 0.45s ease;
}

.cle-brands.is-swapping .cle-brands__visual,
.cle-brands.is-swapping .cle-brands__copy,
.cle-brands.is-swapping .cle-brands__product-set {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cle-reveal,
  .cle-brands__backdrop-layer,
  .cle-brands__logo,
  .cle-brands__visual,
  .cle-brands__copy,
  .cle-brands__product-set {
    transition-duration: 0.01ms;
  }
}


/* ==========================================================================
   10. 香りの探し方（Trouvez votre parfum）

   移植元: docs/design/sample_0901/styles.css 1556〜1898 行

   マークアップは管理画面のカスタムHTML（原本 clesieste/html/cle-finder.html）、
   挙動は cle-top.js の「香りの探し方」節。

   ■ 2026-09-01 のデザイン変更で作り直した節
     旧版は「地色を持たない円形カード（border-radius が変形し続ける
     もやもや＋白い外側の光）」だったが、デザイン側が 2026-08-27 に
     角丸3pxの矩形カードへ作り直した（経緯は sample_0901/index.css の 6 節）。

     旧版から落としたもの:
       @keyframes cle-finder-blob-1〜5      … 形の変形。カードが矩形になった
       @keyframes cle-finder-surface-1〜5   … 表面の粒の明滅。柄が無く空回りしていた
       .cle-finder__card::before / ::after  … 外側の光と粒。新デザインに無い
       .cle-finder__stage::before           … カードを囲む角丸の枠
       nth-child による6列の変則配置        … flex の折り返しになった
       .cle-finder__stage の min-height     … padding で高さを取る
       .cle-finder__card の color           … 暗い地に暗い文字色。中の文字は
                                              すべて色を自分で持っていて効かず、
                                              むしろ後から文字を足したときの罠
                                              になるので入れていない

     旧版から変わったもの:
       面に地の写真が入った（それまでは黒50%の膜だけ）
       カードにアイコン（線画SVG）が付き、__card-body / __card-text が増えた
       リード文が見出しの下 → カードの下へ移動

   クラス名の対応表:
     .brand-finder-section    → .cle-finder
     .brand-finder            → .cle-finder__inner
     .brand-finder-stage      → .cle-finder__stage
     .brand-finder-header     → .cle-finder__header
     .brand-finder-eyebrow    → .cle-finder__eyebrow
     .brand-finder h3         → .cle-finder__title
     .brand-finder-grid       → .cle-finder__grid
     .brand-finder-card       → .cle-finder__card
     .brand-finder-card-icon  → .cle-finder__card-icon
     .brand-finder-card-body  → .cle-finder__card-body
     .brand-finder-card-text  → .cle-finder__card-text
     .brand-finder-label      → .cle-finder__label
     .brand-finder-card h4    → .cle-finder__card-title
     .brand-finder-copy       → .cle-finder__copy
     .brand-finder-lead       → .cle-finder__lead
     .brand-reveal            → .cle-reveal（9節。Our Brands と共用）
     body.is-brand-finder-active → body.cle-finder-active
     body.is-brand-finder-near   → body.cle-finder-near

   ■ 地の写真は変数で受け取る
     カスタムHTML側が style="--cle-finder-bg: url(...)" で渡す。
     Concierge（--cle-concierge-bg）・フッター（--cle-footer-bg）と同じ作り。
     素材は clesieste/img/finder-bg.jpg（デザイン側の Concierge.png。
     名前に反してこの面の背景で、Concierge セクションとは無関係）。

   ■ デザインから意図的に変えた3点

     1. 地の写真のはみ出し（top/bottom: -50px → inset: 0）
        デザインは ::before を上下50pxはみ出させているが、あちらは
        .content-stack（z-index:10）が重なり文脈を作っていて、
        z-index:-1 のこの ::before は前後のセクションより先に描かれる。
        つまりはみ出したぶんは Our Brands とフッターに隠れて見えない。

        こちらは .cle-finder 自身に isolation:isolate を掛けている（後述）
        ため ::before がこの面から出られず、はみ出しがそのまま
        前セクションの上に乗ってしまう。見えている絵は同じなので
        inset:0 にして、はみ出しは持ってこない。

     2. オンマウスの持ち上げ（transform → translate）
        デザインは .brand-finder-card:hover { transform: translateY(-6px) }
        だが、直前の .brand-finder.is-visible .brand-finder-card
        （詳細度 0-3-0）が transform:translateY(0) で勝つため、
        実際には持ち上がらない。デザインの意図どおり持ち上げるため、
        出現は transform、ホバーは translate（個別プロパティ）に分けた。
        9節・旧10節と同じ手口。

     3. 出現のずらし（transition-delay を1値 → プロパティごと）
        デザインは transition-delay を1値で書いているので、遅延が
        border-color や box-shadow にも掛かり、5枚目はオンマウスの
        反応が 0.5 秒遅れる。遅延は opacity と transform にだけ掛ける。
        値の並びは .cle-finder__card の transition と同じ順。

   ■ isolation:isolate を外さないこと
     この面が乗るセクション枠は z-index を持たない（1節参照）。
     掛けておかないと __inner の z-index:1 / __header・__grid の z-index:2 が
     ページ全体に効いてしまう。

   ■ カードは5枚固定
     出現のずらしを nth-child(1)〜(5) で書いている。増減するときは
     そこを見直すこと（配置自体は flex なので枚数に追従する）。
   ========================================================================== */

.cle-finder {
  position: relative;
  isolation: isolate;
  padding: 46px 42px 52px;
}

/* 地の写真と、その上に敷く黒50%の膜。
   写真が未指定（--cle-finder-bg 無し）でも膜だけは出る。 */
.cle-finder::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    var(--cle-finder-bg, none) center / cover no-repeat;
  pointer-events: none;
}

.cle-finder__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.cle-finder__stage {
  position: relative;
  padding: 64px 0;
}

/* ---- 見出し ----------------------------------------------------------- */

.cle-finder__header {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(100%, 420px);
  margin: 0 auto;
  text-align: center;
}

.cle-finder__eyebrow {
  margin: 0;
  color: rgba(255, 250, 244, 0.82);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cle-finder__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 2px 0 0;
  color: rgba(255, 250, 244, 0.96);
  font: 300 clamp(20px, 2vw, 28px) / 1.24 var(--cle-font-mincho);
  font-feature-settings: 'palt';
}

/* 見出しを挟む一対の細線（受付プレート風）。
   旧デザインにも定義はあったが content:none で打ち消されていて出なかった。
   flex-shrink は既定の 1 のまま。幅が足りないときは線が縮んで、
   見出しがはみ出すより先に逃げてくれる。 */
.cle-finder__title::before,
.cle-finder__title::after {
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  content: '';
  background: rgba(255, 255, 255, 0.5);
}

/* ---- カード ------------------------------------------------------------ */

/* 折り返して中央に寄せる。カードは 200px を起点に 224px まで伸びるので、
   幅 1200px なら5枚が1行に並び（224×5＋gap×4＝1176px）、狭くなるにつれて
   3枚＋2枚、2枚＋2枚＋1枚と折り返していく。SPでは1列の grid に切り替える。 */
.cle-finder__grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: min(100%, 1200px);
  margin: 36px auto 0;
}

/* 出現は transform、ホバーの持ち上げは translate（個別プロパティ）。
   分けている理由は節冒頭の「意図的に変えた3点」の 2 を参照。

   transition の並び順は下の transition-delay と対応している。
   順番を変えるときは両方直すこと。 */
.cle-finder__card {
  position: relative;
  display: flex;
  flex: 1 1 200px;
  max-width: 224px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 14px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  background: rgba(20, 15, 10, 0.45);
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  translate: 0 0;
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    translate 0.35s ease;
}

/* PCでは body の箱を消して、アイコン・テキスト・本文をカード直下の
   3要素として扱う（1行目＝アイコン＋テキスト、2行目＝本文）。 */
.cle-finder__card-body {
  display: contents;
}

.cle-finder__card-text {
  display: flex;
  flex-direction: column;
}

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

/* ---- 出現のずらし ------------------------------------------------------
   opacity と transform にだけ遅延を掛け、ホバー用の4つには掛けない。
   値の並びは .cle-finder__card の transition と同じ順。
   ----------------------------------------------------------------------- */

.cle-finder__inner.is-visible .cle-finder__card:nth-child(1) {
  transition-delay: 0.1s, 0.1s, 0s, 0s, 0s, 0s;
}

.cle-finder__inner.is-visible .cle-finder__card:nth-child(2) {
  transition-delay: 0.2s, 0.2s, 0s, 0s, 0s, 0s;
}

.cle-finder__inner.is-visible .cle-finder__card:nth-child(3) {
  transition-delay: 0.3s, 0.3s, 0s, 0s, 0s, 0s;
}

.cle-finder__inner.is-visible .cle-finder__card:nth-child(4) {
  transition-delay: 0.4s, 0.4s, 0s, 0s, 0s, 0s;
}

.cle-finder__inner.is-visible .cle-finder__card:nth-child(5) {
  transition-delay: 0.5s, 0.5s, 0s, 0s, 0s, 0s;
}

/* ---- オンマウス -------------------------------------------------------- */

.cle-finder__card:hover,
.cle-finder__card:focus-visible {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(20, 15, 10, 0.62);
  box-shadow: 0 14px 30px rgba(10, 8, 6, 0.22);
  translate: 0 -6px;
}

/* ---- アイコン ---------------------------------------------------------- */

.cle-finder__card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  color: rgba(255, 250, 244, 0.86);
  transition: transform 0.35s ease;
}

.cle-finder__card-icon svg {
  width: 100%;
  height: 100%;
}

.cle-finder__card:hover .cle-finder__card-icon,
.cle-finder__card:focus-visible .cle-finder__card-icon {
  transform: translateY(-2px);
}

/* ---- カードの文字 ------------------------------------------------------ */

.cle-finder__label {
  margin: 0;
  color: rgba(255, 250, 244, 0.72);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.cle-finder__card-title {
  margin: 0;
  color: rgba(255, 250, 244, 0.96);
  font: 300 16.2px / 1.35 var(--cle-font-jp);
  font-feature-settings: 'palt';
}

/* flex-basis:100% で2行目へ折り返す。
   __card-body が display:contents なので、カード直下の flex 要素として効く。 */
.cle-finder__copy {
  flex-basis: 100%;
  margin: 10px 0 0;
  color: rgba(255, 250, 244, 0.72);
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
  font-feature-settings: 'palt';
}

/* ---- カードの下のリード文 ---------------------------------------------- */

.cle-finder__lead {
  max-width: none;
  margin: 28px 0 0;
  color: rgba(255, 250, 244, 0.82);
  font-size: 14px;
  line-height: 1.95;
  white-space: nowrap;
  text-align: center;
  font-feature-settings: 'palt';
}

/* PC・タブレットでは句読点の <br> を無効にして1行のまま見せる。
   11節（レスポンシブ）は max-width で書いているので、ここだけ min-width。
   対の指定なので .cle-finder__lead の隣に置いている。 */
@media (min-width: 769px) {
  .cle-finder__lead br {
    display: none;
  }
}

/* ---- 背後のヒーローを黙らせる ------------------------------------------
   旧デザインではこの面が地色を持たず、ヒーローの見出しやロゴが
   カードに重なって読めてしまうので消していた。地の写真が入った今は
   写真が覆うので実質不要だが、デザイン側も body.is-brand-finder-* を
   残しているので保険としてそのままにしてある。

   near（少しでも見えている）と active（しっかり見えている）の2段があるが、
   効かせる内容は同じ。デザイン側の作りをそのまま残している。
   ----------------------------------------------------------------------- */

body.cle-finder-near .cle-hero__copy,
body.cle-finder-near .cle-hero__intro,
body.cle-finder-near .cle-hero__slide-logo,
body.cle-finder-active .cle-hero__copy,
body.cle-finder-active .cle-hero__intro,
body.cle-finder-active .cle-hero__slide-logo {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cle-finder__card,
  .cle-finder__card-icon {
    transition-duration: 0.01ms;
  }
}


/* ==========================================================================
   11. News（TOPページ最下部の帯）

   移植元: docs/design/design_0901/index.css 434〜527 行（9節 News）

   マークアップは shop/sections/information.liquid。中身は管理画面
   「お知らせ」のレコードなので、記事が増えてもテーマ側は触らない。JSは無い。

   クラス名の対応表:
     .news-section   → .cle-news
     .news-header    → .cle-news__header（見出しの組みは共通の .cle-section-header）
     .news-list      → .cle-news__list
     .news-item      → .cle-news__item
     .news-date      → .cle-news__date
     .news-tag       → .cle-news__tag
     .news-title     → .cle-news__title
     .news-more      → .cle-news__more
     .news-view-all  → .cle-news__view-all

   ■ 左右の余白は --cle-page-gutter を使わない
     デザインはこの帯だけ「42px ＋ --tablet-pad」で、ほかの面より深く内側へ
     入れている（暗い地の中で行を短く見せるため）。--tablet-pad は
     デザイン側の :root にある clamp(24px, 4.2vw, 42px) だが、テーマで使うのが
     この帯だけなので全体の変数にはせず、自分の面で持っている。
     余白を直すときはこの節の3か所（基本・タブレット・SP）。

   ■ 地の2色はトークンに無い
     linear-gradient(135deg, #746D60, #1A1611)。--cle-ink 系より明るい茶で、
     既存のトークンに当たるものが無いのでデザインの直値をそのまま写している。

   ■ 重なりは1節が面倒を見る
     .cle-hero ~ [data-section-id] で position:relative ＋ z-index:10 が
     付くので、固定ヒーローの上に出る。この節では何もしない。
   ========================================================================== */

.cle-news {
  /* デザインの --tablet-pad。使うのはこの帯だけ。 */
  --cle-news-pad: clamp(24px, 4.2vw, 42px);

  padding: 72px calc(42px + var(--cle-news-pad)) 92px;
  background: linear-gradient(135deg, #746d60 0%, #1a1611 100%);
}

/* 見出しの組みは 8節の .cle-section-header がそのまま受け持つ。
   暗い地なので、ここでは色と下の余白だけを足す。 */
.cle-news__header {
  margin-bottom: 40px;
}

.cle-news__header h2,
.cle-news__header p {
  color: #f4f1e9;
}

.cle-news__list {
  display: flex;
  flex-direction: column;
}

/* 1行は「日付 — タグ — 見出し」。字の大きさが3つとも違うので
   baseline で揃える。 */
.cle-news__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(244, 241, 233, 0.22);
  color: #f4f1e9;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

/* 最後の1本にだけ下の罫線を足してリストを閉じる */
.cle-news__list .cle-news__item:last-child {
  border-bottom: 1px solid rgba(244, 241, 233, 0.22);
}

.cle-news__item:hover,
.cle-news__item:focus-visible {
  opacity: 0.6;
}

.cle-news__date {
  flex: 0 0 auto;
  color: rgba(244, 241, 233, 0.72);
  font-family: var(--cle-font-en);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* タグはお知らせカテゴリー名。未設定なら liquid が要素ごと出さない。 */
.cle-news__tag {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid rgba(244, 241, 233, 0.4);
  border-radius: 999px;
  color: rgba(244, 241, 233, 0.85);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.cle-news__title {
  font-size: 13px;
  line-height: 1.6;
}

/* Pickup（6節の .cle-pickup__more / __view-all）が同じ組みを持つ。
   違うのは地の明暗だけなので、寸法を直すときは両方を見ること。 */
.cle-news__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cle-news__view-all {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: #f4f1e9;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.cle-news__view-all:hover,
.cle-news__view-all:focus-visible {
  opacity: 0.6;
}

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

/* ---- 〜1024 ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* 帯側にも余白が付くので、ここは二重に入る。デザインどおり。 */
  .cle-pickup__heading {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cle-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 扉と左右のコピーを縦積みにする */
  .cle-rooms {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
    padding: 78px 0 0;
  }

  .cle-rooms__copy--right {
    text-align: center;
  }

  .cle-room-entry {
    position: static;
    margin-top: 26px;
    margin-left: auto;
    margin-right: auto;
  }

  .cle-mood-grid {
    justify-content: center;
  }

  /* ---- Our Brands ---- */

  .cle-brands__shell {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 2列に折り返す。5つめだけ最後の行いっぱいに広げる。 */
  .cle-brands__marquee {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cle-brands__logo-btn:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- タブレット（769〜1199）------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .cle-hero {
    height: clamp(138vh, 142vh, 145vh);
  }

  .cle-hero__scroll-space {
    height: clamp(38vh, 42vh, 45vh);
  }

  .cle-hero__center {
    padding: clamp(72px, 8vw, 92px) 0 clamp(84px, 9vw, 110px);
  }

  .cle-hero__intro {
    width: min(100% - calc(clamp(24px, 4.2vw, 42px) * 2), 760px);
  }

  .cle-hero__slide-logo {
    width: clamp(250px, 30vw, 336px);
  }

  .cle-hero__copy {
    width: min(100%, clamp(380px, 42vw, 470px));
    padding: clamp(28px, 3.2vw, 42px) clamp(24px, 2.9vw, 34px) clamp(26px, 3vw, 36px);
    transform: translateY(clamp(-110px, -8vw, -68px));
  }

  .cle-hero__kicker {
    margin: clamp(16px, 1.8vw, 24px) auto clamp(14px, 1.6vw, 18px);
    font-size: clamp(10px, 0.9vw, 11px);
  }

  .cle-hero__title {
    font-size: clamp(20px, 2.1vw, 28px);
  }

  .cle-hero__subcopy {
    max-width: min(100%, 32em);
    margin-top: clamp(18px, 2.2vw, 26px);
    font-size: clamp(12px, 1.1vw, 13px);
  }

  .cle-pickup__overlay {
    padding: clamp(16px, 1.8vw, 18px) clamp(24px, 4.2vw, 42px) clamp(17px, 1.9vw, 19px);
  }

  .cle-pickup__heading {
    padding-left: clamp(24px, 4.2vw, 42px);
    padding-right: clamp(24px, 4.2vw, 42px);
  }

  .cle-pickup__heading h2 {
    font-size: clamp(30px, 3.2vw, 40px);
  }

  /* 〜1024 で2列に落としたぶんを、この幅では設定どおりの列数へ戻す */
  .cle-product-grid {
    grid-template-columns: repeat(var(--cle-product-columns, 4), minmax(0, 1fr));
    gap: 0;
  }

  .cle-product-card {
    min-height: clamp(320px, 31vw, 420px);
    padding: 26px 8px 18px;
  }

  .cle-product-card__name {
    font-size: clamp(16px, 1.45vw, 19px);
  }

  .cle-section-header p {
    font-size: clamp(13px, 1.2vw, 15px);
  }

  .cle-concierge__surface {
    padding-top: clamp(58px, 6vw, 72px);
    padding-bottom: clamp(72px, 7vw, 92px);
    padding-left: clamp(24px, 4.2vw, 42px);
    padding-right: clamp(24px, 4.2vw, 42px);
  }

  /* 5つを1行に収めるため折り返さない */
  .cle-mood-grid {
    flex-wrap: nowrap;
    gap: clamp(18px, 2vw, 30px);
  }

  .cle-mood-grid button {
    width: clamp(122px, 12vw, 148px);
    min-width: clamp(122px, 12vw, 148px);
    min-height: clamp(122px, 12vw, 148px);
    padding: clamp(18px, 1.8vw, 24px) clamp(14px, 1.6vw, 18px);
    font-size: clamp(13px, 1.2vw, 15px);
  }

  .cle-mood-grid button span small {
    font-size: clamp(12px, 1.1vw, 14px);
  }

  .cle-rooms {
    --cle-door-width: clamp(250px, 30vw, 380px);
    grid-template-columns: minmax(120px, 0.85fr) minmax(220px, 0.95fr) minmax(150px, 0.85fr);
    gap: clamp(8px, 1.4vw, 16px);
    min-height: clamp(560px, 62vw, 760px);
    margin-top: clamp(-56px, -4vw, -24px);
    padding: 0;
  }

  .cle-rooms__copy--left {
    display: grid;
    place-items: center end;
    align-self: center;
    justify-self: end;
    text-align: left;
    transform: translateY(calc(var(--cle-door-optical-offset) + clamp(42px, 4vw, 65px)));
  }

  .cle-rooms__copy--right {
    display: grid;
    align-self: center;
    justify-self: start;
    width: max-content;
    max-width: clamp(200px, 22vw, 260px);
    text-align: left;
    transform: translateY(calc(var(--cle-door-optical-offset) + clamp(50px, 4.6vw, 75px)));
  }

  .cle-rooms__eyebrow {
    font-size: clamp(30px, 3.2vw, 40px);
  }

  /* 〜1024 で static に落としたぶんを、この幅では元の重ね位置へ戻す */
  .cle-room-entry {
    position: absolute;
    top: 50%;
    left: 0;
    max-width: clamp(180px, 19vw, 220px);
    margin: 0;
    text-align: left;
    transform: translateY(-50%);
  }

  .cle-room-entry__name {
    font-size: clamp(24px, 2.6vw, 38px);
  }

  .cle-room-entry__title {
    font-size: clamp(13px, 1.15vw, 15px);
  }

  .cle-rooms__copy--right h3 {
    font-size: clamp(22px, 2.2vw, 34px);
  }

  .cle-door__enter {
    font-size: clamp(24px, 2.45vw, 29.7px);
  }

  /* ---- Our Brands ---- */

  .cle-brands {
    margin-top: clamp(-252px, -18vw, -150px);
  }

  .cle-brands__shell {
    padding-top: clamp(150px, 17vw, 199px);
    padding-bottom: clamp(72px, 7vw, 92px);
    padding-left: clamp(24px, 4.2vw, 42px);
    padding-right: clamp(24px, 4.2vw, 42px);
  }

  /* この幅では5つとも1行に収まるので、〜1024 の折り返しを戻す。 */
  .cle-brands__marquee {
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: clamp(12px, 1.5vw, 20px);
  }

  .cle-brands__logo-btn:last-child {
    grid-column: auto;
  }

  .cle-brands__logo {
    height: clamp(74px, 8.5vw, 105px);
  }

  .cle-brands__feature {
    grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
    gap: clamp(22px, 2.4vw, 34px);
  }

  .cle-brands__link {
    font-size: clamp(18px, 2vw, 22px);
  }

  /* 商品は3列のまま。--cle-product-columns には触らず、
     ここで直接指定して〜1024 の2列を打ち消す。 */
  .cle-brands__product-set.is-active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 20px);
  }

  /* ---- 香りの探し方 ----
     デザインはここで .brand-finder の width と .brand-finder-label の
     font-size も書いているが、どちらも基本値と同じ値なので持ってきていない。 */

  .cle-finder {
    padding-top: clamp(40px, 4.5vw, 46px);
    padding-bottom: clamp(44px, 5vw, 52px);
  }

  .cle-finder__header {
    width: min(100%, clamp(320px, 34vw, 420px));
  }

  .cle-finder__title {
    font-size: clamp(22px, 2.1vw, 28px);
  }

  .cle-finder__grid {
    width: min(100%, clamp(560px, 78vw, 1200px));
    margin-top: clamp(30px, 3.5vw, 48px);
  }

  .cle-finder__card {
    flex: 1 1 clamp(160px, 19vw, 200px);
    max-width: clamp(180px, 21vw, 224px);
    padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.7vw, 20px) clamp(16px, 1.6vw, 20px);
  }

  .cle-finder__card-title {
    font-size: clamp(14.4px, 1.35vw, 16.2px);
  }

  .cle-finder__copy {
    font-size: clamp(10px, 0.95vw, 11px);
  }

  .cle-finder__lead {
    font-size: clamp(13px, 1.15vw, 14px);
  }

  /* ---- News ---- */

  /* デザインはこの幅でだけ「42px ＋ pad」をやめて pad の2倍にする。
     769px 付近で左右が狭まりすぎないようにするための調整。 */
  .cle-news {
    padding-left: calc(var(--cle-news-pad) * 2);
    padding-right: calc(var(--cle-news-pad) * 2);
  }
}

/* ---- SP（〜768）------------------------------------------------------- */
@media (max-width: 768px) {
  .cle-hero {
    height: 138vh;
  }

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

  .cle-hero__copy {
    width: min(100%, 92vw);
    padding: 24px 20px 20px;
  }

  .cle-hero__intro {
    width: min(100% - 32px, 92vw);
  }

  .cle-hero__nav {
    right: 20px;
    bottom: 20px;
  }

  .cle-hero__slide-logo {
    width: min(54.4vw, 240px);
  }

  .cle-hero__dot {
    width: 30px;
    height: 30px;
  }

  .cle-hero__lead {
    font-size: 27px;
  }

  .cle-hero__lead-sub {
    margin-top: 8px;
    font-size: 13.2px;
  }

  .cle-hero__kicker {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .cle-hero__title {
    font-size: 19px;
  }

  .cle-hero__subcopy {
    margin-top: 16px;
    font-size: 14.4px;
    line-height: 1.9;
  }

  .cle-pickup__overlay {
    padding: 14px 12px 16px;
  }

  .cle-pickup__heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cle-pickup__heading h2 {
    font-size: 34px;
  }

  .cle-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cle-product-card {
    min-height: auto;
  }

  /* 2列なので、右端（偶数番目）だけ縦罫を落とす */
  .cle-product-card:nth-child(even) {
    border-right: 0;
  }

  .cle-product-card__brand {
    font-size: 12px;
  }

  .cle-product-card__name {
    font-size: 16.8px;
  }

  .cle-product-card__price {
    font-size: 13.2px;
  }

  .cle-section-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cle-section-header p {
    font-size: 14.4px;
  }

  /* 3列 + 下段2つを左右へずらして、円が花びらのように並ぶ配置にする */
  .cle-mood-grid {
    display: grid;
    grid-template-columns: repeat(3, 118px);
    justify-content: center;
    gap: 20px;
  }

  .cle-mood-grid button {
    width: 118px;
    min-width: 118px;
    min-height: 118px;
    padding: 18px 10px;
    font-size: 13px;
  }

  .cle-mood-grid button span small {
    font-size: 14px;
  }

  .cle-mood-grid button:nth-child(4) {
    grid-column: 1;
    justify-self: end;
    margin-top: -18px;
    transform: translateX(69px);
  }

  .cle-mood-grid button:nth-child(5) {
    grid-column: 3;
    justify-self: start;
    margin-top: -18px;
    transform: translateX(-69px);
  }

  /* SPは指で触るので、鍵の拡大アニメーションは付けない */
  .cle-mood-key {
    transform: translate(-50%, -50%);
    transition: opacity 0.35s ease;
  }

  .cle-mood-grid button.is-key-visible .cle-mood-key {
    transform: translate(-50%, -50%);
  }

  .cle-rooms {
    --cle-door-optical-offset: 0px;
    display: grid;
    grid-template-columns: minmax(148px, 2fr) minmax(0, 3fr);
    grid-template-areas:
      'left door'
      'right right';
    align-items: center;
    gap: 27px 0;
    margin-top: 0;
    padding-top: 26px;
  }

  .cle-rooms__copy--left {
    grid-area: left;
    position: relative;
    min-height: 156px;
    padding-top: 18px;
    text-align: left;
    justify-self: start;
    align-self: center;
    transform: none;
  }

  .cle-rooms__eyebrow {
    font-size: 34px;
    text-align: center;
    transform: translateX(36px);
  }

  .cle-rooms__copy--right {
    grid-area: right;
    width: 100%;
    max-width: none;
    margin-top: 14px;
    margin-left: 0;
    text-align: center;
    justify-self: center;
    align-self: start;
    transform: none;
  }

  .cle-rooms__copy--right h3 {
    margin-bottom: 12px;
  }

  .cle-rooms__copy--right p {
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    text-align-last: center;
  }

  .cle-door {
    grid-area: door;
    width: min(100%, 220px);
    align-self: center;
    justify-self: end;
  }

  .cle-door__enter {
    top: calc(50% + var(--cle-door-optical-offset) + 20px);
    font-size: 19.8px;
  }

  .cle-room-entry {
    position: absolute;
    top: 58%;
    left: 0;
    max-width: none;
    margin: 0;
    text-align: left;
    transform: translateY(-50%);
  }

  .cle-room-entry__number {
    font-size: 16.5px;
  }

  .cle-room-entry__name {
    font-size: 27.216px;
  }

  .cle-room-entry__title {
    font-size: 18px;
  }

  .cle-room-entry__desc {
    max-width: none;
    font-size: 13.2px;
    white-space: nowrap;
  }

  .cle-concierge__surface {
    padding-inline: 24px;
  }

  /* ---- Our Brands ---- */

  .cle-brands {
    margin-top: -40px;
  }

  .cle-brands__shell {
    padding-top: 58px;
    padding-bottom: 92px;
  }

  .cle-brands__header p {
    font-size: 12px;
  }

  /* 6列のグリッドに 3 + 2 で置いて、2段とも中央に寄せる。
     ブランドが5つであることを前提にした配置。 */
  .cle-brands__marquee {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    gap: 8px 10px;
    margin-top: 30px;
    margin-bottom: 34px;
  }

  .cle-brands__logo-btn:nth-child(1) {
    grid-column: 1 / span 2;
  }

  .cle-brands__logo-btn:nth-child(2) {
    grid-column: 3 / span 2;
  }

  .cle-brands__logo-btn:nth-child(3) {
    grid-column: 5 / span 2;
  }

  .cle-brands__logo-btn:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .cle-brands__logo-btn:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .cle-brands__logo {
    max-width: 100%;
    height: 90px;
  }

  .cle-brands__feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cle-brands__copy-item {
    text-align: center;
  }

  .cle-brands__link {
    margin-top: 24px;
    font-size: 18px;
  }

  .cle-brands__products {
    margin-top: 42px;
  }

  .cle-brands__copy-item p {
    font-size: 14px;
  }

  /* 画面幅いっぱいの横スクロールにする。__shell の左右 padding ぶんを
     負のマージンで打ち消して、画面の端から端まで使う。 */
  .cle-brands__product-set.is-active {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: 7vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cle-brands__product-set::-webkit-scrollbar {
    display: none;
  }

  .cle-brands__product-set .cle-product-card {
    scroll-snap-align: center;
  }

  /* ---- 香りの探し方 ---- */

  .cle-finder {
    padding: 32px 24px 38px;
  }

  .cle-finder__stage {
    padding: 8px 0 0;
  }

  .cle-finder__header {
    width: min(100%, 420px);
    margin: 0 auto 28px;
  }

  .cle-finder__eyebrow {
    font-size: 16.5px;
  }

  .cle-finder__title {
    font-size: 24px;
    line-height: 1.18;
    gap: 12px;
  }

  /* カードが幅いっぱいになるので、折り返しの flex ではなく1列の grid にする。 */
  .cle-finder__grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
    width: 100%;
  }

  .cle-finder__card {
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    /* アイコンを、見出し＋欧文＋本文をまとめたブロックの高さ中央に揃える */
    align-items: center;
    justify-content: flex-start;
    padding: 18px 20px 20px;
    text-align: left;
  }

  /* PCでは display:contents で消していた body を実体化し、
     テキストと本文を縦に積んでアイコンの右へ置く。 */
  .cle-finder__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 見出しと欧文を横並びにして、order で「見出し → 欧文」の順に見せる。 */
  .cle-finder__card-text {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .cle-finder__label {
    order: 2;
    font-size: 15px;
  }

  .cle-finder__card-title {
    order: 1;
    font-size: 16px;
  }

  .cle-finder__copy {
    flex-basis: auto;
    margin-top: 5px; /* 見出しとの間隔を半分に */
    white-space: normal;
    font-size: 13px;
  }

  /* white-space:nowrap のまま。<br> は 769px 以上でだけ消しているので、
     SPでは2行に折れて、それぞれが1行に収まる。 */
  .cle-finder__lead {
    margin-top: 24px;
    font-size: clamp(9.5px, 3.3vw, 14px);
    font-weight: 100;
  }

  /* ---- News ---- */

  .cle-news {
    padding: 56px calc(12px + var(--cle-news-pad)) 64px;
  }

  /* 日付・タグ・見出しを折り返す。見出しが長いと3つ横並びでは
     入らないので、見出しだけ次の行へ落ちる。 */
  .cle-news__item {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}