@charset "UTF-8";

/* ==========================================================================
   cle-header.css — CLE SIESTE ヘッダー（グローバルナビ／メガメニュー／
   全画面検索／SPドロワー）

   移植元: docs/design/sample_0820/styles.css
     - ヘッダー本体・メガメニュー ... 104〜530 行
     - 全画面検索               ... 3447〜3681 行
     - レスポンシブ             ... 2428〜/2519〜/2815〜 の各 @media
     - ヒーロー重なり時の反転   ... about.css 38〜72 行

   クラス名はデザイン側から cle- プレフィックスへ改名している。対応表:
     .site-header    → .cle-header          .mega        → .cle-mega
     .header-glass   → .cle-header__glass   .mega-inner  → .cle-mega__inner
     .header-inner   → .cle-header__inner   .mega-group  → .cle-mega__group
     .brand          → .cle-header__brand   .mega-title  → .cle-mega__title
     .header-actions → .cle-header__actions .mega-brands → .cle-mega__brands
     .menu-toggle    → .cle-header__toggle  .mega-brand  → .cle-mega__brand
     .global-nav     → .cle-gnav            .mega-list   → .cle-mega__list
     .nav-item       → .cle-gnav__item
     .nav-link       → .cle-gnav__link      body.menu-open   → body.cle-menu-open
     .nav-caret      → .cle-gnav__caret
     （.site-search / body.search-open は絞り込みパネルへ移った。8節参照）
     .has-mega       → .--has-mega          body.is-mega-open→ body.cle-mega-open

   状態クラス（.is-open / .is-hidden）は必ず cle- 要素と複合で使う。
   bundle.css の .is-open は全て .c-xxx.is-open の複合セレクタなので衝突しない。
   ========================================================================== */

/* ==========================================================================
   1. 固定ヘッダーぶんの本文押し下げ

   ヘッダーは position:fixed。テーマの本文コンテナ .l-container を
   ヘッダーの実高ぶん押し下げる。
   TOPページ（body.cle-top）だけはヒーローにヘッダーを重ねるので押し下げない。

   ※ ヘッダーに .l-header クラスは付けないこと。bundle.js が
     .l-header を見つけると .l-container に padding-top を自前で当てるため、
     ここの指定と二重に効いてしまう。
   ========================================================================== */

body:not(.cle-top):not(.cle-header-static) .l-container {
  padding-top: var(--cle-header-h);
}

/* 注文フローなど、ヘッダー機能を止めるページ。
   ecforce の disable_header_feature_page_flg が立つとロゴだけのヘッダーになり、
   position も static に戻るので押し下げもしない。 */
.cle-header.--minimal {
  position: static;
}

/* ==========================================================================
   2. ヘッダー本体
   ========================================================================== */

/* 通常時は transform を持たせない。transform が付くとメガメニューの
   backdrop-filter（すりガラス）の参照面が切れてぼかしが効かなくなる。 */
.cle-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  transition: transform 0.35s ease;
}

.cle-header.is-hidden {
  transform: translateY(-100%);
}

/* すりガラスは必ずこの1枚だけが持つ。ヘッダーと帯で別々に backdrop-filter を
   持たせると、親のぼかしが子の参照面を切ってしまい、帯側だけ効かなくなる。
   高さは cle-header.js が「ヘッダー＋開いている帯」に合わせて設定する。 */
.cle-header__glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(36px) saturate(120%);
  backdrop-filter: blur(36px) saturate(120%);
  box-shadow: 0 22px 44px rgba(30, 22, 14, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.cle-mega-open .cle-header__glass {
  opacity: 1;
}

/* ロゴ・ナビ・メガメニューの中身は、すりガラスより前面に置く */
.cle-header__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  color: #1d1916;
}

/* ==========================================================================
   3. ロゴ
   ========================================================================== */

.cle-header__brand {
  display: block;
  text-decoration: none;
}

.cle-header__brand img {
  display: block;
  width: 128px;
  height: auto;
}

/* ==========================================================================
   4. グローバルナビ
   ========================================================================== */

.cle-gnav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 34px;
  font-size: 11px;
}

.cle-gnav a {
  text-decoration: none;
}

/* メガメニューを画面幅いっぱいの帯にするため、項目は静的に置き、
   .cle-mega の基準を fixed の .cle-header に取らせる。 */
.cle-gnav__item {
  display: flex;
  align-items: center;
}

.cle-gnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  white-space: nowrap;
}

/* リンク下の細いアンダーライン（ホバーで左から伸びる） */
.cle-gnav__link::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  content: '';
  background: currentColor;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cle-gnav__item:hover .cle-gnav__link::after,
.cle-gnav__item:focus-within .cle-gnav__link::after {
  width: 100%;
}

/* キャレット（三角ではなく細い矢羽根で世界観に寄せる） */
.cle-gnav__caret {
  display: block;
  width: 4px;
  height: 4px;
  margin-bottom: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.5;
}

.cle-gnav__item.is-open .cle-gnav__caret {
  transform: rotate(225deg) translate(-2px, -2px);
  opacity: 1;
}

/* PCではドロワー専用のブロックを出さない */
.cle-gnav__account {
  display: none;
}

/* SPドロワー専用の3つ。PCでは出さない。

   __body は display:contents にして入れ子を無かったことにする。
   こうすると中の .cle-gnav__item がそのまま .cle-gnav の flex の子になり、
   PCの並び（11節でパネルにするときだけ意味を持つ入れ子）を持ち込まずに済む。
   SPでは11節がここをスクロールする器へ戻す。 */
.cle-gnav__head,
.cle-gnav__scrim {
  display: none;
}

.cle-gnav__body {
  display: contents;
}

/* ==========================================================================
   5. メガメニュー

   基準は .cle-header。ヘッダーの直下に全幅の帯として続く。
   ヘッダーと同じ地色・同じぼかしなので、境目なく一枚の面に見える。
   動きは付けず、その場でふわっと現れるフェードのみ。
   ========================================================================== */

.cle-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 34px 42px 46px;
  /* 地色とぼかしは .cle-header__glass が受け持つので、ここは中身だけ */
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

/* hidden 属性が付いていても display:none にせず、フェードで制御する。
   hidden はスクリーンリーダー向けの状態同期にだけ使っている。 */
.cle-mega[hidden] {
  display: block;
}

/* ナビ項目と帯のあいだを渡る見えない橋。これが無いと、リンクから帯へ
   マウスを下ろす途中でホバーが切れる。高さはヘッダー下padding(26)＋
   .cle-gnav__link の下padding(4) ＝ 30px 分。 */
.cle-mega::before {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 30px;
  content: '';
}

.cle-gnav__item.is-open .cle-mega {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
}

/* 帯は全幅、中身は本文と同じコンテンツ幅で中央に揃える */
.cle-mega__inner {
  width: min(100%, 1400px);
  margin: 0 auto;
}

/* グループが複数あるときは横に割らず、罫で区切って縦に積む */
.cle-mega__group + .cle-mega__group {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--cle-line);
}

.cle-mega__title {
  margin: 0 0 20px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

/* ロゴ行の高さを固定し、その中で天地中央に置く。
   各SVGは中央にロゴが配置された共通キャンバスなので、これで縦が揃う。 */
.cle-mega__brand {
  display: grid;
  grid-template-rows: 118px auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  text-decoration: none;
}

/* 支給ロゴは共通キャンバス（227:150）だが、その中でロゴが占める割合が
   0.19〜0.67 とばらつく。高さで揃えると字面の大きさが不揃いになるため、
   ブランドごとに幅を与えて光学的な大きさを揃える。
   幅はセクション設定「ロゴの表示幅」で1件ずつ指定し、liquid が
   --cle-brand-logo-w としてインラインで渡す（未指定時は 140px）。 */
.cle-mega__brand img {
  width: 100%;
  max-width: var(--cle-brand-logo-w, 140px);
  height: auto;
  filter: brightness(0) saturate(100%) opacity(0.8);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.cle-mega__brand:hover img {
  filter: brightness(0) saturate(100%) opacity(1);
}

.cle-mega__brand span {
  color: var(--cle-ink-soft);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

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

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

.cle-mega__list a {
  position: relative;
  padding-left: 13px;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* 各項目の頭に短い罫（ホテルのインデックス表記の見立て） */
.cle-mega__list a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 1px;
  content: '';
  background: var(--cle-line-strong);
  transition: width 0.3s ease;
}

.cle-mega__list a:hover::before {
  width: 10px;
}

.cle-mega__list a:hover {
  opacity: 0.62;
}

/* SPでは大項目のタップがアコーディオン開閉になるため、遷移先はこのリンクで出す。
   PCは大項目自身が遷移先を持つので不要。 */
.cle-mega__all {
  display: none;
}

/* ==========================================================================
   6. ヘッダーアクション（検索・アカウント・カート）
   ========================================================================== */

.cle-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cle-header__action {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cle-header__action img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* カートの個数バッジ。テーマの .count（bundle.css）は
   .l-header__inner__block__item 配下にしか効かないので、ここで自前に持つ。 */
.cle-header__badge {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cle-ink);
  color: var(--cle-white);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
}

/* 0個のときはバッジを出さない（liquid 側で is-empty を付ける） */
.cle-header__badge.is-empty {
  display: none;
}

/* カートモーダル使用時に出るテーマのツールチップ。
   .l-header__inner__block__item 配下ではないので位置指定を自前で持つ。 */
.cle-header__action .c-tooltip {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
}

/* ==========================================================================
   7. ハンバーガー（SPのみ表示）
   ========================================================================== */

.cle-header__toggle {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cle-header__toggle span {
  position: absolute;
  left: 8px;
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.cle-header__toggle span:nth-child(1) {
  top: 15px;
}

.cle-header__toggle span:nth-child(2) {
  top: 22px;
}

/* 開いている間の × への組み替えは持たない。
   ドロワーが右から画面全体を覆う造りになり（11節）、開くとこのボタン自体が
   パネルの後ろに隠れて見えなくなったため。閉じる操作はパネルの頭の × と
   暗幕が受け持つ。デザイン側も同じで、.menu-toggle に開いた状態の指定は無い。 */

/* ==========================================================================
   8. 全画面検索 — 撤去済み

   ヘッダーの虫めがねが開く先は絞り込みパネルへ移した。キーワード入力は
   パネルの最上部にある。検索の入口を2つに分けないため。

   スタイルは ec_force/assets/cle-filter.css、
   markup は shop/snippets/_cle_filter_panel.html.liquid。

   節番号は詰めていない。以降の節番号を全部ずらすと、他ファイルからの
   「cle-header.css の N 節」という参照がまとめて狂うため。
   ========================================================================== */

/* ==========================================================================
   9. 下層ページ：ヘッダーの地色と、ヒーローに重なっている間の反転
      （移植元: about.css 28〜72行）
   ========================================================================== */

/* 下層ページのヘッダーは地色を敷いて可読性を確保する。
   TOP（body.cle-top）は固定ヒーローの上に重ねるので地色を持たない。
   デザイン側の .is-page .site-header にあたる。

   backdrop-filter はここに置かないこと。ヘッダー側に付けると
   メガメニューのすりガラス（.cle-header__glass）の参照面が切れて
   ぼかしが効かなくなる（2節の注意書きと同じ理由）。

   このセレクタは詳細度が「クラス2つ＋要素1つ」。打ち消す側（.is-over-hero）は
   同じ形（body:not(.cle-top) を前置）で書くこと。クラスだけで書くと要素1つぶん
   足りず、あとに置いても勝てない。 */
body:not(.cle-top) .cle-header {
  background: rgba(250, 246, 239, 0.92);
  transition:
    transform 0.35s ease,
    background-color 0.5s ease,
    border-color 0.5s ease;
}

.cle-header__brand img,
.cle-header__action img,
.cle-header__inner {
  transition: filter 0.4s ease, color 0.4s ease;
}

/* ヒーローに重なっている間は地色を引いて写真を最上部まで見せる。
   写真が暗いので、ロゴとナビは白に反転させる。
   ヒーローを持つ下層ページ（[data-cle-page-hero] がある面）だけ、
   cle-header.js がスクロール量を見てこのクラスを付け外しする。

   TOPページもこのクラスを借りている。あちらは cle-top.js が「暗いスライドが
   出ている間」だけ付ける（スライドごとのセクション設定で決める）。地色を消す
   下の指定は body:not(.cle-top) が前に付いていてTOPには当たらず、色とロゴ・
   アイコンの反転だけが効く。**この節の指定はTOPにも効くので、下層ページの
   都合だけで触らないこと。**

   地色の打ち消しは、上の body:not(.cle-top) .cle-header と同じ形で書く。
   クラスだけの .cle-header.is-over-hero では詳細度が要素1つぶん足りず、
   地色が残ったままになる（ブランドページで実際に踏んだ）。
   文字色・ロゴの反転のほうは打ち消す相手がクラス1つなので、この前置は要らない。 */
body:not(.cle-top) .cle-header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
}

.cle-header.is-over-hero .cle-header__inner {
  color: var(--cle-white);
}

.cle-header.is-over-hero .cle-header__brand img,
.cle-header.is-over-hero .cle-header__action img {
  filter: brightness(0) invert(1);
}

/* カートの個数バッジは墨で塗った丸なので、暗い写真の上では潰れて見えない。
   アイコンに合わせて明暗を入れ替える。 */
.cle-header.is-over-hero .cle-header__badge {
  background: var(--cle-white);
  color: var(--cle-ink);
}

/* メガメニューが開いている間はヘッダーの地色を引き、
   すりガラス1枚だけが上部を覆う状態にする。
   ただしガラスは明るいので、ヒーロー上でも文字色は戻す。 */
.cle-mega-open .cle-header.is-over-hero .cle-header__inner {
  color: #1d1916;
}

.cle-mega-open .cle-header.is-over-hero .cle-header__brand img,
.cle-mega-open .cle-header.is-over-hero .cle-header__action img {
  filter: none;
}

.cle-mega-open .cle-header.is-over-hero .cle-header__badge {
  background: var(--cle-ink);
  color: var(--cle-white);
}

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

/* ---- タブレット（769〜1199）------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .cle-header__inner {
    gap: clamp(14px, 1.8vw, 24px);
    padding-top: clamp(20px, 2.2vw, 26px);
    padding-bottom: clamp(20px, 2.2vw, 26px);
    padding-left: clamp(24px, 4.2vw, 42px);
    padding-right: clamp(24px, 4.2vw, 42px);
  }

  .cle-header__brand img {
    width: clamp(108px, 11vw, 128px);
  }

  .cle-gnav {
    gap: clamp(14px, 2vw, 28px);
    font-size: clamp(10px, 0.95vw, 11px);
  }
}

/* ---- 〜1024 ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cle-header__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cle-gnav {
    gap: 18px;
    font-size: 10px;
  }

  .cle-mega {
    padding: 32px 24px 34px;
  }

  /* 列幅が狭くなるぶん、ロゴ行も比率を保って縮める */
  .cle-mega__brands {
    gap: 20px;
  }

  .cle-mega__brand {
    grid-template-rows: 96px auto;
  }

  /* 幅指定は liquid が渡す値の 8割に落とす */
  .cle-mega__brand img {
    max-width: calc(var(--cle-brand-logo-w, 140px) * 0.81);
  }

  /* 幅が足りなくなるため、リストは3列に落とす */
  .cle-mega__list,
  .cle-mega__list.--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
  }

}

/* ==========================================================================
   11. SP（〜768）— ドロワー

   デザイン（styles.css 2466〜2745 の .mobile-menu-layer）に寄せてある。
   黒い暗幕の上に、右から幅 90% のパネルが滑り込む。地は半透明のすりガラスで、
   頭に × だけの帯を持つ。

   ▼デザインと違うところ（どれも意図的）

     1. パネルの中身は PC のナビをそのまま畳んで使う。
        デザインは .mobile-menu-layer という別の DOM にナビをもう一組
        持っていたが、ecforce ではナビの中身がテーマ設定から出るので、
        二重に持つと管理画面の1回の変更で両方を直すことになる。
        そのため .cle-gnav 自体をパネルへ組み替えている。
        したがって中身の組みはメガメニューのまま（デザインのチップ・
        ブランド格子・行の組みは採っていない。香りの部屋だけ例外で、
        下の --rooms でチップにしている）。

     2. ヘッダーアクション（検索・アカウント・カート）はSPでも出す。
        デザインは display:none にしていて代替導線が無く、SPから
        カートに到達できなくなるため。

     3. 会員／ゲストメニューをパネル末尾に置く（デザインに無い）。

   ▼重なりの順

     パネルと暗幕は .cle-header（z-index 40）の中にある。画面全体を覆う面は
     本来ヘッダーの外へ出したい（絞り込みパネルはそうしている）が、パネルの
     中身は PC のナビそのものなので中に置くしかない。結果、ページ本文より前・
     絞り込みパネル（z-index 60）より後ろに入る。2つが同時に開くことは無い
     （虫めがねを押すと cle-filter.js がドロワーを閉じる）。

   ▼パネルが header の中にあるための注意

     .cle-header に transform が付くとパネルの backdrop-filter の参照面が
     切れてぼかしが消える。スクロールで隠す .is-hidden がまさに transform
     なので、cle-header.js は開いた瞬間に .is-hidden を外し、開いている間は
     付け直さない。**ヘッダー側に transform を足すときはここに影響する。**
   ========================================================================== */

@media (max-width: 768px) {
  .cle-header__inner {
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .cle-header__brand img {
    width: 108px;
  }

  /* 検索・アカウント・カートはSPでも残す（上の 2） */
  .cle-header__actions {
    margin-left: auto;
    gap: 4px;
  }

  .cle-header__toggle {
    display: block;
    margin-left: 2px;
  }

  /* ---- 暗幕 ----
     パネルより後ろ（z-index 34 < 35）。押すと閉じる。 */
  .cle-gnav__scrim {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: block;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s ease,
      visibility 0s linear 0.45s;
  }

  .cle-menu-open .cle-gnav__scrim {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.45s ease,
      visibility 0s linear 0s;
  }

  /* ---- パネル本体（右から滑り込む）----

     色を自分で持つこと。パネルは .cle-header__inner の中にあるので、
     ヒーローに重なっている面（ブランド・About など。9節の .is-over-hero）では
     白い字を継いでしまい、明るいガラスの上で読めなくなる。
     継承した色は要素自身の指定に必ず負けるので、詳細度は要らない。 */
  .cle-gnav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 35;
    display: flex;
    flex: none;
    flex-direction: column;
    /* 4節は横並びの前提で gap と justify-content を持っている。
       縦並びに変えるここで両方とも戻さないと、頭と中身の間に 34px 空く。 */
    gap: 0;
    justify-content: flex-start;
    width: 90%;
    padding: 0;
    background: rgba(255, 250, 245, 0.78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--cle-shadow);
    color: var(--cle-ink);
    font-size: 13px;
    /* 閉じている間は visibility で畳む。パネルは常に DOM にあるので、
       画面外へずらすだけでは中のリンクにタブでフォーカスが入る。 */
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.55s;
  }

  .cle-menu-open .cle-gnav {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  body.cle-menu-open {
    overflow: hidden;
  }

  /* ---- 頭（× だけの帯）----
     パネルはヘッダーごと覆うので、ハンバーガーは押せなくなる。
     閉じる操作はこの × と暗幕が受け持つ（デザインと同じ）。 */
  .cle-gnav__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 17px 30px;
    border-bottom: 1px solid rgba(61, 47, 34, 0.08);
    background: rgba(255, 255, 255, 0.18);
  }

  .cle-gnav__close {
    position: relative;
    width: 34px;
    height: 34px;
    margin-right: -16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

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

  .cle-gnav__close::before,
  .cle-gnav__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    margin-left: -7px;
    content: '';
    background: currentColor;
  }

  .cle-gnav__close::before {
    transform: rotate(45deg);
  }

  .cle-gnav__close::after {
    transform: rotate(-45deg);
  }

  /* ---- 中身（スクロールするのはここだけ）----
     PCでは display:contents で入れ子を無かったことにしている（4節）。 */
  .cle-gnav__body {
    flex: 1;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 30px 40px;
    scrollbar-color: #746d60 transparent;
    scrollbar-width: thin;
  }

  .cle-gnav__body::-webkit-scrollbar {
    width: 8px;
  }

  .cle-gnav__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .cle-gnav__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #746d60;
  }

  .cle-gnav__item {
    display: block;
    border-bottom: 1px solid rgba(61, 47, 34, 0.08);
  }

  .cle-gnav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
  }

  /* SPではホバーの下線を出さない */
  .cle-gnav__link::after {
    display: none;
  }

  /* キャレットはアコーディオンの開閉サインとして残す */
  .cle-gnav__caret {
    margin-bottom: 4px;
    opacity: 0.7;
  }

  /* ---- メガメニュー → アコーディオン ---- */
  .cle-mega,
  .cle-mega[hidden] {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cle-gnav__item.is-open .cle-mega {
    grid-template-rows: 1fr;
  }

  /* grid-template-rows のアニメーションは中身を overflow:hidden にする必要がある */
  .cle-mega__inner {
    overflow: hidden;
    min-height: 0;
  }

  /* 帯とナビの橋渡しはSPでは不要 */
  .cle-mega::before {
    display: none;
  }

  .cle-gnav__item.is-open .cle-mega__inner {
    padding-bottom: 18px;
  }

  .cle-mega__title {
    margin: 14px 0 12px;
    font-size: 9px;
  }

  .cle-mega__group + .cle-mega__group {
    margin-top: 16px;
    padding-top: 16px;
  }

  /* ブランドは2列。ロゴ行は低くする */
  .cle-mega__brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .cle-mega__brand {
    grid-template-rows: 64px auto;
  }

  .cle-mega__brand img {
    max-width: calc(var(--cle-brand-logo-w, 140px) * 0.72);
  }

  /* 系統・軸・ガイドは2列。項目名が長いので折り返しを許可する */
  .cle-mega__list,
  .cle-mega__list.--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .cle-mega__list a {
    white-space: normal;
    font-size: 12px;
  }

  /* 香りの部屋だけチップで出す（デザインの .mobile-menu-chips）。
     「Chambre 101」の5つは字が短く揃っているので、2列の格子より
     チップのほうが収まる。他の帯と同じ組みに戻したくなったら、
     この2つを消して header.liquid の --rooms を外すこと。

     上の2列の指定より後ろに置くこと。詳細度が並ぶので、
     先に書くと display:grid に負ける。 */
  .cle-mega__list.--rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cle-mega__list.--rooms a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 8px 16px;
    border: 1px solid rgba(61, 47, 34, 0.22);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }

  /* 大項目の遷移先。帯の末尾に控えめに置く。 */
  .cle-mega__all {
    display: inline-block;
    margin-top: 14px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--cle-line-strong);
    color: var(--cle-ink-soft);
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* ---- パネル末尾の会員／ゲストメニュー（上の 3）---- */
  .cle-gnav__account {
    display: grid;
    gap: 2px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cle-line);
  }

  .cle-gnav__account a {
    padding: 12px 0;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .cle-gnav__account-name {
    margin: 0 0 6px;
    color: var(--cle-ink-soft);
    font-size: 11px;
  }

}

/* ==========================================================================
   12. モーション低減
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cle-header,
  .cle-header__glass,
  .cle-mega,
  .cle-gnav,
  .cle-gnav__scrim,
  .cle-header__toggle span {
    transition: none;
  }
}