@charset "UTF-8";

/* ==========================================================================
   cle-chambre.css — CLE SIESTE 香りの部屋（セレクションページ）

   移植元: docs/design/design_0901/chambre.css
   マークアップ: 管理画面「セレクション > コンテンツ」欄。
                 原本は clesieste/html/cle-chambre-101.html 〜 105.html
   挙動:     clesieste/js/cle-chambre.js（「物語を読む」の高さ計算だけ）
   土台:     ec_force/assets/cle-page.css（幅・見出し・ボタン・パンくず）

   ■ 5部屋 = 5ページ
     デザインは1ページの中でカルーセルを回し、本文（物語・4つの香り・
     商品）を差し替えていた。ecforce では商品をセレクション単位でしか
     登録できないため、部屋ごとに別のセレクション＝別ページになる。

     結果、ヒーローのカルーセルは「動くもの」ではなく「隣の部屋への
     リンク」になった。アクティブなスライドはページごとに固定なので、
     位置合わせは JS ではなく CSS の固定値でやっている（2節）。

   ■ 商品グリッドはこのファイルに無い
     部屋の商品は selections_show_products.liquid が
     .cle-products__grid で出す。カードの見た目は cle-list.css。
     デザイン側の .chambre-collection-block .shop-card は
     products.css のカードと寸法・縦罫・地のグラデーションまで
     同一だったので、共用して問題ない。

   ■ 背景写真の渡しかた
     写真は CMS のファイルアップロード（/img/）に置く。このファイルは
     テーマの assets にあり liquid が通らないので、URL はコンテンツHTML
     側から CSS 変数で渡している（TOPの Concierge と同じ手口）。

       --cle-chambre-bg ... 情景（導入文〜4つの香りの背面）の写真
   ========================================================================== */

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

   部屋ページは視差を持たないので、地色は平面の #fbf9f3。
   body のグラデーションを覆う必要があるため、面に敷いている。
   ========================================================================== */

.cle-chambre {
  background: #fbf9f3;
}

/* 固定ヘッダーぶんの押し下げは cle-header.css が .l-container に当てて
   いるが、部屋のヒーローはコピーから始まり写真を上端まで敷かないので、
   押し下げはそのまま活かす。ヒーローのコピー側で追加の余白を取る。 */

.cle-chambre__flow {
  position: relative;
  z-index: 1;
  background: #fbf9f3;
}

/* ==========================================================================
   2. ヒーロー

   ■ 構造
     .cle-chambre__hero-carousel ... 画面幅いっぱいの帯。矢印はここに置く
       └ .cle-chambre__hero-visual ... 中央の正方形（帯の 49%）。
                                       overflow:visible なので、左右の
                                       スライドが帯の中へはみ出して覗く
           └ .cle-chambre__hero-track ... 横並び。3枚（前・現在・次）

   ■ 位置合わせ
     スライドは前・現在・次の3枚だけを出し、現在は必ず2枚目に置く。
     そのためトラックの送り量はページによらず「1枚ぶん」で固定になり、
     JS が要らない（デザイン側は5枚＋前後のクローンを持ち、
     activeIndex を JS で計算して translateX していた）。

     4枚目以降は画面外で見えないので、そもそも出していない。
     視界に入るのは中央と左右のわずかなはみ出しだけ。
   ========================================================================== */

.cle-chambre__hero {
  padding-bottom: 0;
  background: #fbf9f3;
}

.cle-chambre__hero-copy {
  display: grid;
  gap: 10px;
  padding-top: 28px;
  justify-items: center;
  text-align: center;
}

.cle-chambre__hero-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  justify-content: center;
}

.cle-chambre__hero-copy .cle-page__eyebrow {
  margin: 0;
  color: var(--cle-ink-soft);
}

.cle-chambre__hero-fr {
  margin: 0;
  color: var(--cle-ink);
  font: 400 clamp(20px, 2.4vw, 30px)/1.1 var(--cle-font-en);
  letter-spacing: 0.08em;
}

.cle-chambre__hero-lead {
  margin: 0;
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.cle-chambre__hero-stage {
  position: relative;
}

/* カルーセルは帯（全幅）。中央の写真だけが 49% を占め、前後の部屋は
   その左右へはみ出して覗く。帯そのものは画面幅を超えないので、
   横スクロールは生まれない。

   デザインは 1400px の箱の中から width:100vw と負のマージンで
   はみ出させていたが、この組み方は Windows などスクロールバーが
   場所を取る環境で横スクロールを生む。ヒーローだけ .cle-page__wrap の
   外に出す形に組み替えてある（cle-product.css 1節と同じ方針）。 */
.cle-chambre__hero-carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  margin-top: 34px;
}

.cle-chambre__hero-visual {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: min(49%, 1080px);
  aspect-ratio: 1 / 1;
  overflow: visible;
}

/* 送り量は1枚ぶんで固定（gap の 1px を足す）。現在の部屋は常に2枚目。 */
.cle-chambre__hero-track {
  display: flex;
  gap: 1px;
  height: 100%;
  transform: translateX(calc(-100% - 1px));
}

.cle-chambre__hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.cle-chambre__hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cle-chambre__hero-slide.is-active {
  z-index: 3;
}

/* 中央の部屋の名前は h1 側（写真の上に縦組みで載る）が受け持つので、
   スライドに焼き込んだコピーは出さない */
.cle-chambre__hero-slide.is-active .cle-chambre__slide-copy {
  display: none;
}

.cle-chambre__slide-copy {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  color: rgba(255, 251, 244, 0.92);
  text-align: right;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

/* 次の部屋は帯の右へはみ出す。文字は左端に寄せて見切れさせない */
.cle-chambre__hero-slide.is-next .cle-chambre__slide-copy {
  right: auto;
  left: 16px;
  width: calc(100% - 24px);
  text-align: left;
}

.cle-chambre__slide-code,
.cle-chambre__slide-fr,
.cle-chambre__slide-title,
.cle-chambre__slide-lead {
  margin: 0;
}

.cle-chambre__slide-code {
  font-size: 10px;
  letter-spacing: 0.14em;
}

.cle-chambre__slide-fr {
  margin-top: 4px;
  font: 400 22px/1.1 var(--cle-font-en);
  letter-spacing: 0.06em;
}

.cle-chambre__slide-title {
  margin-top: 6px;
  font: 300 16px/1.5 var(--cle-font-mincho);
}

.cle-chambre__slide-lead {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.cle-chambre__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* 部屋名。写真の中央に縦組みで載せる */
.cle-chambre__hero-visual h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  margin: 0;
  color: rgba(255, 251, 244, 0.94);
  font: 300 clamp(24px, 2.5vw, 34px)/1.6 var(--cle-font-mincho);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cle-chambre__hero-meta {
  position: absolute;
  left: clamp(18px, 3vw, 38px);
  right: clamp(18px, 3vw, 38px);
  bottom: clamp(18px, 3vw, 26px);
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

.cle-chambre__hero-time {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.12em;
}

/* ---- 矢印（前後の部屋へのリンク） ------------------------------------- */

.cle-chambre__hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 44px;
  height: 44px;
  transition: opacity 0.25s ease;
  transform: translateY(-50%);
}

.cle-chambre__hero-arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.cle-chambre__hero-arrow.--prev {
  left: clamp(12px, 2vw, 28px);
}

.cle-chambre__hero-arrow.--prev::before {
  border-right: 8px solid rgba(255, 255, 255, 0.94);
  transform: translate(-55%, -50%);
}

.cle-chambre__hero-arrow.--next {
  right: clamp(12px, 2vw, 28px);
}

.cle-chambre__hero-arrow.--next::before {
  border-left: 8px solid rgba(255, 255, 255, 0.94);
  transform: translate(-45%, -50%);
}

.cle-chambre__hero-arrow:hover,
.cle-chambre__hero-arrow:focus-visible {
  opacity: 0.72;
}

/* ---- ドット（5部屋への直リンク） -------------------------------------- */

.cle-chambre__hero-pager {
  position: absolute;
  left: 50%;
  bottom: -16px;
  z-index: 7;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
}

.cle-chambre__hero-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cle-chambre__hero-dot {
  display: block;
  width: 21px;
  height: 5px;
  border-radius: 3px;
  background: #f4f1e9;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.cle-chambre__hero-dot:hover {
  opacity: 0.72;
}

.cle-chambre__hero-dot.is-current {
  background: #746d60;
}

/* ==========================================================================
   3. 情景（導入文〜4つの香り の背面）

   写真は1枚を面いっぱいに敷き、上に置く3つのブロックが順に重なる。
   写真のURLはコンテンツHTML側から --cle-chambre-bg で渡す。
   ========================================================================== */

.cle-chambre__atmosphere {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.cle-chambre__atmosphere::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: var(--cle-chambre-bg) center top / cover no-repeat;
}

.cle-chambre__atmosphere > * {
  position: relative;
  z-index: 1;
}

/* 面の中では罫線で区切らない（写真が背面にあるため） */
.cle-chambre__atmosphere > .cle-page__block + .cle-page__block {
  border-top: 0;
}

/* ==========================================================================
   4. 導入文
   ========================================================================== */

.cle-chambre__intro-block {
  padding: 82px 0 88px;
}

.cle-chambre__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cle-chambre__intro-text {
  margin: 20px 0 0;
  color: var(--cle-ink);
  font: 300 clamp(17px, 1.7vw, 22px)/2.2 var(--cle-font-mincho);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   5. 物語（Resident's Story）
   ========================================================================== */

.cle-chambre__story-block {
  position: relative;
  z-index: 12;
}

.cle-chambre__story {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.cle-chambre__story-visual {
  position: relative;
  z-index: 13;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
}

.cle-chambre__story-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.cle-chambre__story-copy {
  position: relative;
  z-index: 13;
}

.cle-chambre__story-name {
  margin: 10px 0 0;
  color: var(--cle-ink);
  font: 400 clamp(30px, 4vw, 42px)/1.1 var(--cle-font-en);
  letter-spacing: 0.08em;
}

.cle-chambre__story-role {
  margin: 10px 0 0;
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.cle-chambre__story-quote {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--cle-line-strong);
}

.cle-chambre__story-quote p {
  margin: 0;
  color: var(--cle-ink);
  font: 300 clamp(15px, 1.45vw, 18px)/2.15 var(--cle-font-mincho);
}

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

/* ---- 「物語を読む」（アコーディオン） ----------------------------------
   次の面（4つの香り）の暗いグラデーションが背面から上がってきて、
   この開閉部分に重なる。文字色を明るくしているのはそのため。

   高さは JS が実測して --cle-story-acc-h に入れる（cle-chambre.js）。
   details の既定の開閉は高さが飛ぶので、パネル側で切って滑らかに開く。
   ----------------------------------------------------------------------- */

.cle-chambre__story-details {
  position: relative;
  z-index: 13;
  margin-top: 40px;
  margin-bottom: -24px;
  padding: 0 18px;
  border-bottom-color: rgba(244, 241, 233, 0.42);
  transform: translateY(24px);
}

.cle-chambre__story-details summary {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #f4f1e9;
  border-top-color: rgba(244, 241, 233, 0.42);
}

.cle-chambre__story-details summary::after {
  background:
    linear-gradient(#f4f1e9, #f4f1e9) center/11px 1px no-repeat,
    linear-gradient(#f4f1e9, #f4f1e9) center/1px 11px no-repeat;
}

/* 高さは cle-chambre.js が実測して --cle-story-acc-h に入れる。

   ここに height の transition は付けないこと。
   開いた直後に JS が「物語の面がどれだけ伸びたか」を実測して
   --cle-story-growth に入れており、その値で次の面（4つの香り）の
   グラデーションの上端を据え置いている。transition があると
   測る時点でまだ高さが変わっておらず、伸びた量が 0 と判定される。
   結果、グラデーションが展開したぶんだけ下へずれ、
   「物語を読む」まわりの明るい文字が写真の上に乗って読めなくなる。 */
.cle-chambre__story-details-panel {
  position: relative;
  height: var(--cle-story-acc-h, 0px);
  overflow: hidden;
}

.cle-chambre__story-details .cle-acc__body {
  position: relative;
  z-index: 2;
}

.cle-chambre__story-details .cle-acc__text {
  color: #f4f1e9;
}

/* ==========================================================================
   6. 4つの香り（Signature Scent）

   背面のグラデーションだけを物語の面へ食い込ませる。

     --cle-scent-overlap ... 何px 上へはみ出させるか
     --cle-scent-lift ...... さらに全体を持ち上げる量
     --cle-story-growth .... 「物語を読む」を開いて物語の面が伸びた量。
                             差し引かないと開閉のたびにグラデーションの
                             上端が上下する（cle-chambre.js が実測して入れる）

   margin-top で引き上げ、padding-top で同じだけ押し戻すので、
   見出し以下の位置は動かず、グラデーションの開始位置だけが上がる。
   ========================================================================== */

.cle-chambre__scent-block {
  --cle-scent-overlap: 296px;
  --cle-scent-lift: 50px;
  position: relative;
  isolation: isolate;
  background: transparent;
  margin-top: calc(-1 * var(--cle-scent-overlap) - var(--cle-scent-lift) - var(--cle-story-growth, 0px));
  padding-top: calc(96px + var(--cle-scent-overlap) + var(--cle-story-growth, 0px));
}

.cle-chambre__scent-block::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  background:
    linear-gradient(
      180deg,
      rgba(116, 109, 96, 0.92) 0%,
      rgba(116, 109, 96, 0.82) 22%,
      rgba(116, 109, 96, 0.62) 48%,
      rgba(116, 109, 96, 0.32) 74%,
      rgba(116, 109, 96, 0) 100%
    ),
    var(--cle-chambre-bg) center / cover no-repeat;
  background-blend-mode: multiply;
}

.cle-chambre__scent-block .cle-page__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.cle-chambre__scent-block .cle-page__head {
  max-width: 320px;
  margin: 0;
  justify-items: start;
  text-align: left;
}

.cle-chambre__scent-block .cle-page__head h2 {
  color: #fff;
}

.cle-chambre__scent-block .cle-page__head-label,
.cle-chambre__scent-block .cle-page__head-lead {
  color: #1a1611;
}

.cle-chambre__scent-block .cle-page__head-lead {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.cle-chambre__scent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 12px;
  justify-content: end;
  justify-items: center;
  max-width: 780px;
  margin: 0 0 0 auto;
}

.cle-chambre__scent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 172px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 24px 20px;
  border-radius: 999px;
  overflow: hidden;
  text-align: center;
}

/* 丸の地。body と同じグラデーションを丸く切り抜いた見え方にする */
.cle-chambre__scent-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  border-radius: inherit;
  background:
    radial-gradient(circle at top, rgba(255, 251, 244, 0.72), transparent 42%),
    linear-gradient(180deg, #efe6d8 0%, #f6f0e7 34%, #efe8dc 100%);
}

.cle-chambre__scent-card > * {
  position: relative;
  z-index: 1;
}

.cle-chambre__scent-name {
  margin: 0;
  color: #746d60;
  font: 300 18px/1 var(--cle-font-mincho);
  white-space: nowrap;
}

/* 丸の中の和名（英名の下の1行）だけ、英名の 2/3 のサイズにする */
.cle-chambre__scent-name-jp {
  font-size: 12px;
}

.cle-chambre__scent-role {
  margin: 12px 0 0;
  color: #746d60;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ==========================================================================
   7. 商品グリッドの見出しとCTA

   グリッド本体は selections_show_products.liquid（cle-list.css）。
   見出しはグリッドの直前に来るのでコンテンツHTMLの末尾に、
   CTA はグリッドの後ろなので data-cle-place="after-products" で置く。
   ========================================================================== */

.cle-chambre__collection-head {
  padding-top: 96px;
}

/* グリッドとの間は .cle-products の padding-top（44px）が持つので、
   見出し側の下余白（既定 56px）は落とす。二重にすると開きすぎる。 */
.cle-chambre__collection-head .cle-page__head {
  max-width: 720px;
  margin: 0 auto;
}

.cle-chambre__collection-head .cle-page__head-lead {
  max-width: 520px;
  margin-inline: auto;
}

.cle-chambre__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  padding: 0 var(--cle-page-gutter) 96px;
  background: #fbf9f3;
  text-align: center;
}

.cle-chambre__cta .cle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 22px;
  font-family: var(--cle-font-jp);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
}

/* ==========================================================================
   8. 前後の部屋（Bridge）とパンくず

   部屋ページの足元は暗部で締める。パンくずも同じ地色に合わせる。
   ========================================================================== */

.cle-chambre__bridge-block {
  padding: 56px 0;
  background: #1a1611;
}

.cle-chambre__bridge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 28px;
  width: min(100%, 1400px);
  margin: 0 auto;
  padding: 0 var(--cle-page-gutter);
}

.cle-chambre__bridge-room {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cle-white);
  text-decoration: none;
  transition: opacity 0.35s ease;
}

.cle-chambre__bridge-room:hover,
.cle-chambre__bridge-room:focus-visible {
  opacity: 0.58;
}

.cle-chambre__bridge-room.--prev {
  justify-self: start;
  text-align: left;
}

.cle-chambre__bridge-room.--next {
  justify-self: end;
  text-align: right;
}

.cle-chambre__bridge-code {
  color: rgba(255, 253, 249, 0.68);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.cle-chambre__bridge-fr {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
}

/* パンくず（cle-page.css の .cle-crumb）を暗部に合わせる */
.cle-crumb.--dark {
  background: #1a1611;
  color: rgba(255, 253, 249, 0.72);
}

.cle-crumb.--dark .cle-crumb__inner {
  border-top: 0;
}

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

/* ---- タブレット（〜980）------------------------------------------------ */
@media (max-width: 980px) {
  .cle-chambre__story {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .cle-chambre__story-visual {
    max-width: 480px;
  }

  .cle-chambre__scent-block .cle-page__wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cle-chambre__scent-block .cle-page__head {
    max-width: none;
  }

  .cle-chambre__scent-grid {
    grid-template-columns: repeat(2, minmax(0, 180px));
    justify-content: center;
    margin: 0 auto;
  }

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

  .cle-chambre__bridge-room.--prev,
  .cle-chambre__bridge-room.--next {
    justify-self: center;
    text-align: center;
  }
}

/* ---- スマートフォン（〜760）--------------------------------------------
   カルーセルの組み方が PC と変わる。写真は画面の 80% を占め、
   前後の部屋は画面外に置いて、矢印は写真の下へ回す。
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .cle-chambre__hero-copy {
    padding-top: 18px;
  }

  .cle-chambre__hero-copy .cle-page__eyebrow {
    font-size: 17.3px;
  }

  .cle-chambre__hero-heading {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .cle-chambre__hero-fr {
    font-size: 34.6px;
  }

  .cle-chambre__hero-lead {
    font-size: 14px;
  }

  .cle-chambre__hero-carousel {
    margin-top: 22px;
  }

  .cle-chambre__hero-visual {
    width: 100%;
    overflow: hidden;
  }

  /* SPは横並びをやめ、3枚を画面のどこに置くかで見せる。
     PC用の送り（translateX）はここでは邪魔なので打ち消す。 */
  .cle-chambre__hero-track {
    position: relative;
    display: block;
    gap: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: none;
  }

  .cle-chambre__hero-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80vw;
    height: 100%;
    margin: 0;
  }

  .cle-chambre__hero-slide.is-prev {
    left: -70vw;
    z-index: 2;
  }

  .cle-chambre__hero-slide.is-active {
    left: 10vw;
    z-index: 3;
  }

  .cle-chambre__hero-slide.is-next {
    left: 90vw;
    z-index: 2;
  }

  /* 画面外に置いてあるので、はみ出しの文字は出さない */
  .cle-chambre__slide-copy {
    display: none;
  }

  .cle-chambre__hero-visual h1 {
    font-size: 22px;
  }

  .cle-chambre__hero-meta {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  .cle-chambre__hero-time {
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    white-space: normal;
    text-wrap: pretty;
  }

  /* 矢印は写真の下へ。写真の中に置くと親指で隠れる */
  .cle-chambre__hero-arrow {
    top: calc(100% + 20px);
    z-index: 20;
    width: 52px;
    height: 52px;
  }

  .cle-chambre__hero-arrow.--prev {
    left: 0;
  }

  .cle-chambre__hero-arrow.--next {
    right: 0;
  }

  .cle-chambre__hero-arrow::before {
    transform: translate(-50%, -50%);
  }

  .cle-chambre__hero-arrow.--prev::before {
    border-right-color: #000;
    border-right-width: 9px;
  }

  .cle-chambre__hero-arrow.--next::before {
    border-left-color: #000;
    border-left-width: 9px;
  }

  .cle-chambre__hero-pager {
    bottom: -26px;
  }

  .cle-chambre__intro-block {
    padding: 64px 0 68px;
  }

  .cle-chambre__intro-text {
    font-size: 17px;
    line-height: 1.9;
  }

  .cle-chambre__story-details {
    margin-top: 28px;
    margin-bottom: -16px;
    transform: translateY(16px);
  }

  /* SPは物語が縦積みになるため、必要な食い込み量が PC と大きく違う。
     PC と同じ「20px 上から始まる」に揃う値（デザイン側の実測）。 */
  .cle-chambre__scent-block {
    --cle-scent-overlap: 54.39px;
    --cle-scent-lift: 50px;
  }

  .cle-chambre__scent-grid {
    grid-template-columns: repeat(2, minmax(0, 160px));
  }

  .cle-chambre__scent-card {
    padding: 30px 20px 26px;
  }

  .cle-chambre__collection-head {
    padding-top: 64px;
  }

  .cle-chambre__cta {
    gap: 22px;
    padding-bottom: 64px;
  }

  .cle-chambre__cta .cle-btn {
    min-width: 200px;
  }

  .cle-chambre__bridge-block {
    padding: 32px 0 41px;
  }

  .cle-chambre__bridge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .cle-chambre__bridge-room.--prev {
    justify-self: start;
    text-align: left;
  }

  .cle-chambre__bridge-room.--next {
    justify-self: end;
    text-align: right;
  }

  .cle-chambre__bridge-code,
  .cle-chambre__bridge-fr {
    display: block;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}