@charset "UTF-8";
/* ============================================================================
   Plume（プリュム）｜フレグランスブランド Webサイト制作サンプル
   ----------------------------------------------------------------------------
   設計方針
   1. 淡いピンクは「1色で使うと安くなる」ため、彩度と明度を7段階に散らし、
      必ず締め色（--ink）とごく少量の金（--gold）を併用する。
   2. かわいさは形（丸・ハート・キラキラ）ではなく、光・にじみ・余白・
      柔らかい影で作る。書体は明朝を基調にする。
   3. モーションは「速く鋭く」ではなく「柔らかく遅く」。強いease-outで
      ふわっと止める。すべて prefers-reduced-motion で無効化できる。
   4. 外部ライブラリ・Webフォントは使わない（ビルド工程なしで動くこと）。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img,
svg,
picture { display: block; max-width: 100%; height: auto; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--theme-key, #C08A93);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- 2. Tokens */
:root {
  /* --- ピンクの階調。単調さを避けるため彩度をずらして7段階持つ --- */
  --cream:      #FDF8F6;   /* ベース。純白は基本使わない */
  --cream-warm: #F9EFE9;
  --pink-mist:  #FBEAEC;
  --pink-milk:  #F5D5D8;
  --pink-soft:  #EFC0C5;
  --pink-dust:  #D9A9AC;
  --pink-deep:  #C08A93;
  /* ピンクを「文字色」として使う場合の下限。--pink-deep は淡すぎて
     小さな文字ではWCAG AA（4.5:1）を割るため、テキスト専用に濃い方を持つ */
  --pink-text:  #A15264;

  /* --- 締め色。これが無いと画面が締まらず一気に安く見える --- */
  --ink:        #4A2E32;
  --ink-mid:    #7A5D60;
  --ink-thin:   #A98D8F;
  --line:       rgba(74, 46, 50, 0.14);

  /* --- 差し色。線とごく小さい面にだけ使う。面で使うと下品になる --- */
  --gold:       #C9A227;
  --gold-thin:  #DFC98F;

  /* --- テーマ変数（香りページで上書きする） --- */
  --theme-bg:      var(--cream);
  --theme-bg-alt:  var(--pink-mist);
  --theme-key:     var(--pink-soft);
  --theme-key-deep:var(--pink-deep);
  --theme-ink:     var(--ink);
  --theme-ink-mid: var(--ink-mid);
  --theme-line:    var(--line);
  --theme-veil:    rgba(253, 248, 246, 0.82);

  /* --- 書体 --- */
  --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
  --font-gothic: "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", "Meiryo", sans-serif;
  --font-display: Optima, Candara, "Gill Sans", "Hiragino Mincho ProN", serif;

  /* --- モーション。強いease-outで「ふわっと止まる」感じを作る --- */
  --ease-soft:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-gentle: cubic-bezier(0.33, 0, 0.15, 1);
  --dur-fast: .45s;
  --dur-mid:  .9s;
  --dur-slow: 1.5s;

  /* --- レイアウト --- */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 78rem;
  --header-h: 4.75rem;

  /* --- 影。硬い影は使わない。広く薄く落とす --- */
  --shadow-soft: 0 1.5rem 3.5rem rgba(120, 78, 84, .10);
  --shadow-lift: 0 2.5rem 5rem rgba(120, 78, 84, .16);
}

/* ------------------------------------------------- 3. 香りごとのテーマ配色 */
/* 全部ピンク系のまま4ページを別世界に見せるのがこのサイトの肝。
   ①透明→②甘い→③大人→④華やか の順に、明度を落とし彩度を上げていく。 */

/* ① Rosée｜透明・朝：ミルキーピンク × 白 */
body[data-scent="rosee"] {
  --theme-bg:      #FFFDFD;
  --theme-bg-alt:  #FCEFF1;
  --theme-key:     #F3CDD2;
  --theme-key-deep:#D89AA2;
  --theme-ink:     #4A3236;
  --theme-ink-mid: #86656A;
  --theme-line:    rgba(74, 50, 54, .12);
  --theme-veil:    rgba(255, 253, 253, .84);
}

/* ② Miel｜甘い・昼：ベージュピンク × 生成り */
body[data-scent="miel"] {
  --theme-bg:      #FBF4EC;
  --theme-bg-alt:  #F5E5D8;
  --theme-key:     #E7C1B2;
  --theme-key-deep:#C79076;
  --theme-ink:     #533C2E;
  /* 生成り地の上で 4.5:1 を満たす濃さ。これ以上明るくするとAAを割る */
  --theme-ink-mid: #85655A;
  --theme-line:    rgba(83, 60, 46, .14);
  --theme-veil:    rgba(251, 244, 236, .84);
}

/* ③ Voile｜大人・夕：くすみピンク × チャコール */
body[data-scent="voile"] {
  --theme-bg:      #EFE7E6;
  --theme-bg-alt:  #E1D2D2;
  --theme-key:     #C49BA0;
  --theme-key-deep:#8E6469;
  --theme-ink:     #322A2C;
  --theme-ink-mid: #6B5C5F;
  --theme-line:    rgba(50, 42, 44, .16);
  --theme-veil:    rgba(239, 231, 230, .84);
}

/* ④ Nuit｜華やか・夜：ディープピンク × ボルドー（唯一の反転ページ） */
body[data-scent="nuit"] {
  --theme-bg:      #2A141A;
  --theme-bg-alt:  #3B1C25;
  --theme-key:     #D9647F;
  --theme-key-deep:#F0929F;
  --theme-ink:     #F7E6E9;
  --theme-ink-mid: #C9A3AB;
  --theme-line:    rgba(247, 230, 233, .18);
  --theme-veil:    rgba(42, 20, 26, .84);
  /* 反転ページでは濃いピンクだと読めないので明るい側へ差し替える */
  --pink-text:     #F0929F;
  --shadow-soft:   0 1.5rem 3.5rem rgba(0, 0, 0, .35);
  --shadow-lift:   0 2.5rem 5rem rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------- 4. Base type */
body {
  background: var(--theme-bg);
  color: var(--theme-ink);
  font-family: var(--font-mincho);
  font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem);
  line-height: 2.05;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--dur-mid) var(--ease-soft),
              color var(--dur-mid) var(--ease-soft);
}

p + p { margin-top: 1.5em; }

strong { font-weight: 600; }

::selection {
  background: var(--theme-key);
  color: var(--ink);
}

/* 欧文の見出し。字間を大きく開けるだけで一気に高級に見える */
.en {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.en--tight { letter-spacing: .16em; }

/* セクション上部の小さなラベル */
.eyebrow {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  display: flex;
  align-items: center;
  gap: .9em;
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--theme-key-deep);
  flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--theme-key-deep);
  flex: none;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.28;
  letter-spacing: .12em;
}

.section-title .ja {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(.8125rem, .75rem + .3vw, .9375rem);
  letter-spacing: .28em;
  color: var(--theme-ink-mid);
  margin-top: 1.4em;
}

.lead {
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 2.35;
  color: var(--theme-ink-mid);
}

.note {
  font-family: var(--font-gothic);
  font-size: .75rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--theme-ink-mid);
}

/* -------------------------------------------------------------- 5. Layout */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - var(--gutter) * 2, 46rem); }
.wrap--wide   { width: min(100% - var(--gutter) * 2, 92rem); }

.section {
  padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  position: relative;
}

.section--tight { padding-block: clamp(3rem, 2rem + 6vw, 7rem); }

.section--alt { background: var(--theme-bg-alt); }

.stack > * + * { margin-top: var(--stack, 1.5rem); }

.hr {
  border: 0;
  height: 1px;
  background: var(--theme-line);
}

/* ------------------------------------------------------------- 6. Buttons */
.btn {
  --btn-fg: var(--theme-ink);
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  font-family: var(--font-gothic);
  font-size: .75rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  padding: 1.15em 2.4em;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

/* 塗りが下からふわっと満ちる。速い動きは使わない */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--theme-key);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-soft);
}

.btn:hover,
.btn:focus-visible { border-color: var(--theme-key); }
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn .arrow {
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur-mid) var(--ease-soft);
}
.btn:hover .arrow { width: 2.25rem; }
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn--solid {
  background: var(--theme-ink);
  color: var(--theme-bg);
  border-color: var(--theme-ink);
}
.btn--solid::before { background: var(--theme-key-deep); }
.btn--solid:hover { color: var(--ink); }

/* テキストリンク。下線が左から引かれる */
.link {
  font-family: var(--font-gothic);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: .5em;
  display: inline-block;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-soft);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* -------------------------------------------------------------- 7. Header */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-mid) var(--ease-soft),
              backdrop-filter var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: var(--theme-veil);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--theme-line);
}

.header__inner {
  width: min(100% - var(--gutter) * 2, 92rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-grid;
  grid-template-columns: 1.8rem auto;
  grid-template-areas: "mark name" "mark sub";
  align-items: center;
  column-gap: .7rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: .48em;
  text-transform: uppercase;
  text-indent: .48em;    /* letter-spacing の右余白を打ち消す */
  color: var(--theme-ink);
  view-transition-name: brand;   /* ページ遷移でロゴだけ残る */
}

/* 架空サイトである旨の表示。誤認防止の主要な仕掛けなので、
   狭い画面でも文言を省略せず、小さくしすぎないこと。 */
.sample-badge {
  margin-left: auto;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-family: var(--font-gothic);
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .04em;   /* 和文なので字間は詰める */
  color: var(--theme-ink-mid);
  white-space: nowrap;
}

.brand::before {
  content: "";
  grid-area: mark;
  width: 1.8rem;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("../images/plume-monogram.svg") center / contain no-repeat;
  mask: url("../images/plume-monogram.svg") center / contain no-repeat;
}

.brand__name { grid-area: name; }

.brand small {
  grid-area: sub;
  display: block;
  font-family: var(--font-gothic);
  font-size: .5rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--theme-ink-mid);
  margin-top: .35em;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.75rem); }

.nav__link {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  position: relative;
  padding-block: .5em;
  transition: color var(--dur-fast) var(--ease-soft);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--theme-key-deep);
  transform: translateX(-50%);
  transition: width var(--dur-mid) var(--ease-soft);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--theme-ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

/* ハンバーガー。線が細いほど上品に見える */
.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-right: -.75rem;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 1.375rem;
  height: 1px;
  background: var(--theme-ink);
  transform: translateX(-50%);
  transition: transform var(--dur-mid) var(--ease-soft),
              opacity var(--dur-fast) var(--ease-soft);
}
.burger span:nth-child(1) { top: 1.0625rem; }
.burger span:nth-child(2) { top: 1.4375rem; }
.burger span:nth-child(3) { top: 1.8125rem; }

body.is-menu-open .burger span:nth-child(1) { transform: translateX(-50%) translateY(.375rem) rotate(28deg); }
body.is-menu-open .burger span:nth-child(2) { opacity: 0; }
body.is-menu-open .burger span:nth-child(3) { transform: translateX(-50%) translateY(-.375rem) rotate(-28deg); }

/* --------------------------------------------------------- 8. Mobile menu */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--theme-bg);
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-soft),
              visibility 0s linear var(--dur-mid);
}

body.is-menu-open .drawer {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.drawer::before {
  /* 背後の淡いピンクの光。ドロワーが白一色になるのを防ぐ */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 78% 12%, var(--theme-key) 0%, transparent 70%),
    radial-gradient(50% 40% at 12% 88%, var(--theme-bg-alt) 0%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}

.drawer__list { position: relative; }

.drawer__list li {
  overflow: hidden;
  border-bottom: 1px solid var(--theme-line);
}

.drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem .25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 60ms);
}

body.is-menu-open .drawer__list a { transform: none; }

.drawer__list .ja {
  font-family: var(--font-mincho);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--theme-ink-mid);
}

/* -------------------------------------------------------------- 9. Footer */
.footer {
  background: var(--theme-bg-alt);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) 2.5rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 26rem;
  background: radial-gradient(50% 50% at 50% 50%, var(--theme-key) 0%, transparent 70%);
  opacity: .45;
  pointer-events: none;
}

.footer__inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.footer__brand .brand { view-transition-name: none; font-size: 1.25rem; }
.footer__brand .brand::before { width: 2.1rem; }

.footer__heading {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  margin-bottom: 1.5rem;
}

.footer__list li + li { margin-top: .65rem; }

.footer__list a {
  font-size: .875rem;
  letter-spacing: .1em;
  position: relative;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.footer__list a:hover { opacity: .55; }

.footer__bottom {
  position: relative;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--theme-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.footer__copy {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--theme-ink-mid);
}

/* サンプルサイトである旨の明示。架空ブランドなので必ず出す */
.disclaimer {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-gothic);
  font-size: .6875rem;
  line-height: 1.85;
  letter-spacing: .06em;
  text-align: center;
  padding: .9rem var(--gutter);
}

.disclaimer a { text-decoration: underline; text-underline-offset: .25em; }

/* --------------------------------------------------------- 10. Hero (TOP) */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* 光がゆっくり呼吸する。花びらやキラキラ素材を使わずに「かわいさ」を出す層 */
.hero__glow {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, var(--pink-milk) 0%, transparent 62%),
    radial-gradient(42% 46% at 78% 34%, var(--pink-mist) 0%, transparent 65%),
    radial-gradient(52% 40% at 50% 88%, var(--pink-soft) 0%, transparent 70%);
  opacity: .85;
  animation: breathe 18s var(--ease-gentle) infinite alternate;
}

@keyframes breathe {
  from { transform: scale(1) translate3d(0, 0, 0); opacity: .7; }
  to   { transform: scale(1.14) translate3d(0, -2%, 0); opacity: .95; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, 92rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.hero__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(2rem, 1.25rem + 3.4vw, 4rem);
  line-height: 1.6;
  letter-spacing: .1em;
}

/* 1行ずつ下からせり上がる。マスクは overflow:hidden の親で作る。
   ここは JS に依存させない。JS 待ちにすると、スクリプトが止まった環境や
   非アクティブなタブで本文が永久に見えないままになる。 */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(115%);
  animation: line-up 1.6s var(--ease-soft) forwards;
  animation-delay: calc(var(--i, 0) * 130ms + .15s);
}
@keyframes line-up { to { transform: none; } }

.hero__sub {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  max-width: 30rem;
  opacity: 0;
  transform: translateY(1.25rem);
  animation: fade-up var(--dur-slow) var(--ease-soft) .55s forwards;
}

.hero__actions {
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  opacity: 0;
  transform: translateY(1.25rem);
  animation: fade-up var(--dur-slow) var(--ease-soft) .75s forwards;
}

@keyframes fade-up { to { opacity: 1; transform: none; } }

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999rem 999rem 2rem 2rem;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  clip-path: inset(0 0 100% 0);
  animation: wipe-up 1.8s var(--ease-soft) .3s forwards;
}
@keyframes wipe-up { to { clip-path: inset(0 0 0 0); } }

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  animation: zoom-settle 2.4s var(--ease-soft) .3s forwards;
}
@keyframes zoom-settle { to { transform: scale(1); } }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-gothic);
  font-size: .5625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  display: grid;
  justify-items: center;
  gap: .75rem;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: linear-gradient(var(--theme-key-deep), transparent);
  animation: drip 2.6s var(--ease-gentle) infinite;
  transform-origin: top;
}

@keyframes drip {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --------------------------------------------- 11. 舞う花びら（TOP・Rosée） */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.petal {
  position: absolute;
  top: -8%;
  width: var(--size, 14px);
  height: calc(var(--size, 14px) * .72);
  background: var(--petal-color, var(--pink-soft));
  border-radius: 100% 0 100% 0;
  opacity: 0;
  filter: blur(.3px);
  animation: petal-fall var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
}

/* 落下と回転を別々に持たせると、機械的な直線落下に見えない */
@keyframes petal-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: var(--peak, .75); }
  50%  { transform: translate3d(var(--drift, 5vw), 52vh, 0) rotate(190deg); }
  92%  { opacity: var(--peak, .75); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift, 5vw) * -.6), 108vh, 0) rotate(420deg); }
}

/* ------------------------------------------------- 12. スクロールreveal共通 */
/* この2つだけは IntersectionObserver で .is-visible を付ける。
   JS が動かない環境では下の @media (scripting: none) で最初から表示する。 */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--dur-slow) var(--ease-soft),
              transform var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-img {
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.7s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ヒーローにも、カーソルに香りの余韻が追従する光を重ねる */
.hero {
  --aura-x: 50%;
  --aura-y: 50%;
  --aura-color: rgba(228, 170, 184, .72);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle 2.2rem at var(--aura-x) var(--aura-y), rgba(255, 255, 255, .42), transparent 72%),
    radial-gradient(circle 10rem at var(--aura-x) var(--aura-y), color-mix(in srgb, var(--aura-color) 24%, transparent), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .65s var(--ease-soft);
}
.hero.is-aura-active::after { opacity: 1; }
.reveal-img.is-visible { clip-path: inset(0 0 0 0); }

.reveal-img img {
  transform: scale(1);
  transition: transform 2.2s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-img.is-visible img { transform: scale(1); }

/* ------------------------------------------------- 13. コレクション一覧 */
.collection-intro {
  min-height: clamp(26rem, 52svh, 34rem);
  display: grid;
  align-content: center;
  text-align: center;
  padding-top: calc(var(--header-h) + 3rem);
  position: relative;
  /* 内側の .hero__glow が inset:-20% ではみ出すので、必ずここで切る */
  overflow: hidden;
}

/* 4本は常に見せ、ポインタには香りの余韻を思わせる光だけを添える */
.collection-stage {
  position: relative;
  isolation: isolate;
  --aura-x: 50%;
  --aura-y: 50%;
  --aura-color: rgba(228, 170, 184, .72);
}

.collection-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle 2.2rem at var(--aura-x) var(--aura-y), rgba(255, 255, 255, .42), transparent 72%),
    radial-gradient(circle 10rem at var(--aura-x) var(--aura-y), color-mix(in srgb, var(--aura-color) 24%, transparent), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .65s var(--ease-soft);
}

.collection-stage.is-aura-active::after { opacity: 1; }

.scent-aura__hint {
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  opacity: .78;
}

.scent-aura {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.scent-particle {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow: 0 0 1.1rem var(--particle-color);
  filter: blur(.4px);
  opacity: 0;
  animation: scent-drift var(--particle-life) var(--ease-soft) forwards;
}

.scent-particle--ring {
  background: transparent;
  border: 1px solid var(--particle-color);
  filter: none;
}

@keyframes scent-drift {
  0% { opacity: 0; transform: translate3d(0, .35rem, 0) scale(.55); }
  18% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate3d(var(--particle-drift-x), var(--particle-drift-y), 0) scale(1.35);
  }
}

.scent-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  /* 写真とタイムラインをひとまとまりとして視界に収める */
  padding-bottom: clamp(.75rem, .5rem + .5vw, 1.25rem);
}

.scent-card {
  --aura-color: rgba(228, 170, 184, .72);
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.6;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--card-bg, var(--pink-mist));
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-slow) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft);
}

.scent-card:nth-child(1) { --aura-color: rgba(243, 193, 205, .82); }
.scent-card:nth-child(2) { --aura-color: rgba(226, 180, 116, .8); }
.scent-card:nth-child(3) { --aura-color: rgba(197, 157, 170, .78); }
.scent-card:nth-child(4) { --aura-color: rgba(154, 58, 86, .72); }

.scent-card:hover {
  transform: translateY(-.75rem);
  box-shadow: var(--shadow-lift);
}

.scent-card:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: .35rem;
}

.scent-card__media {
  position: absolute;
  inset: 0;
}
.scent-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease-soft);
}
.scent-card:hover .scent-card__media img { transform: scale(1.07); }

.scent-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, var(--card-veil, rgba(74, 46, 50, .55)) 100%);
}

.scent-card__body {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  color: #fff;
  display: grid;
  gap: .5rem;
}

.scent-card__no {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .3em;
  opacity: .8;
}

.scent-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.scent-card__ja {
  font-size: .75rem;
  letter-spacing: .18em;
  opacity: .85;
}

.scent-card__time {
  position: absolute;
  top: clamp(1rem, .75rem + 1vw, 1.75rem);
  left: clamp(1rem, .75rem + 1vw, 1.75rem);
  font-family: var(--font-gothic);
  font-size: .5625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  padding: .4em 1em;
  /* カード上部は下部のグラデーションが届かないため、写真が明るいと
     白文字が溶けてしまう（Rosée で 1.4:1）。バッジ自身に暗色を敷いて
     写真の明るさに依存しないようにする。ぼかしは残してガラス質感を保つ。 */
  background: rgba(46, 28, 32, .55);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 一覧の下に置く「朝→夜」のグラデーション帯。4本が1つの流れであることを示す */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  margin-top: clamp(.75rem, .5rem + .5vw, 1rem);
}
.timeline__bar {
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #F3CDD2 0%, #E7C1B2 33%, #C49BA0 66%, #8E3550 100%);
  margin-bottom: .9rem;
}
.timeline__label {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  text-align: center;
}

/* ------------------------------------------------------- 14. 香り詳細ページ */
.scent-hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 2rem);
}

.scent-hero__inner {
  position: relative;
  z-index: 3;
  width: min(100% - var(--gutter) * 2, 92rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.scent-hero__no {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 9vw, 10rem);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--theme-key);
  opacity: .55;
}

.scent-hero__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: -.35em;
}

.scent-hero__ja {
  font-size: .875rem;
  letter-spacing: .3em;
  color: var(--theme-ink-mid);
  margin-top: 1.25rem;
}

.scent-hero__copy {
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.5rem);
  line-height: 2.1;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  max-width: 24em;
}

.scent-hero__bottle {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.scent-hero__bottle img { width: 100%; height: 100%; object-fit: cover; }

/* --- ①Rosée：光がにじむ --- */
.fx-bloom {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(30% 34% at 30% 30%, var(--theme-key) 0%, transparent 65%),
    radial-gradient(34% 30% at 72% 58%, #FFF3F4 0%, transparent 62%);
  filter: blur(8px);
  animation: bloom 14s var(--ease-gentle) infinite alternate;
}
@keyframes bloom {
  from { transform: scale(1) rotate(0deg); opacity: .65; }
  to   { transform: scale(1.2) rotate(6deg); opacity: 1; }
}

/* --- ②Miel：とろけるグラデーション --- */
.fx-melt {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from 0deg at 50% 50%,
    #F5E5D8 0deg, #E7C1B2 90deg, #F3D9C4 180deg, #DFAE93 270deg, #F5E5D8 360deg);
  filter: blur(70px);
  opacity: .75;
  animation: melt 28s linear infinite;
}
@keyframes melt {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

/* --- ③Voile：薄布が揺れる --- */
.fx-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.fx-veil span {
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(115deg, transparent 20%, var(--theme-key) 50%, transparent 80%);
  opacity: .28;
  filter: blur(28px);
  animation: veil-sway var(--dur, 20s) var(--ease-gentle) infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes veil-sway {
  from { transform: translate3d(-8%, 0, 0) skewY(-3deg) scaleY(1); }
  to   { transform: translate3d(8%, 4%, 0) skewY(3deg) scaleY(1.15); }
}

/* --- ④Nuit：液体が広がる／弾ける --- */
.fx-bloomdark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.fx-bloomdark span {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 28rem);
  aspect-ratio: 1;
  margin: calc(var(--size, 28rem) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--theme-key) 0%, transparent 68%);
  opacity: 0;
  filter: blur(40px);
  animation: ripple var(--dur, 9s) var(--ease-gentle) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ripple {
  0%   { transform: scale(.25); opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------- 15. 香りノート（表） */
.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.note-card {
  padding-top: 1.75rem;
  border-top: 1px solid var(--theme-line);
  position: relative;
}

.note-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 1px;
  background: var(--theme-key-deep);
}

.note-card__label {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
}

.note-card__value {
  font-family: var(--font-mincho);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  line-height: 1.9;
  letter-spacing: .1em;
  margin-top: .85rem;
}

/* 時間経過での香りの変化を示すバー */
.timeline-notes { display: grid; gap: 1.25rem; }
.timeline-notes__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
.timeline-notes__name {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--theme-ink-mid);
}
.timeline-notes__track {
  height: 3px;
  border-radius: 3px;
  background: var(--theme-line);
  overflow: hidden;
}
.timeline-notes__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--theme-key-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.is-visible .timeline-notes__fill { transform: scaleX(var(--v, .6)); }

/* ----------------------------------------------------------- 16. 汎用ブロック */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }

.figure {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--wide { aspect-ratio: 16 / 10; }

/* Roséeの情景を一枚の説明写真から、香りの一日をたどるギャラリーへ */
.mood-intro { text-align: center; }
.mood-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(12rem, 11rem + 8vw, 23rem);
  grid-template-areas:
    "hero hero hero hero hero bottle bottle bottle table table table table"
    "hero hero hero hero hero bottle bottle bottle outing outing sillage sillage";
  gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
}

.scent-card__notes {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.5rem);
  font-family: var(--font-gothic);
  font-size: .625rem;
  line-height: 1.7;
  letter-spacing: .08em;
  transition: max-height var(--dur-mid) var(--ease-soft),
              opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-soft);
}

.scent-card:hover .scent-card__notes,
.scent-card:focus-visible .scent-card__notes {
  max-height: 3.5rem;
  opacity: .9;
  transform: none;
}
.mood-gallery__item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--pink-mist);
  box-shadow: var(--shadow-soft);
}
.mood-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft); }
.mood-gallery__item:hover img { transform: scale(1.04); }
.mood-gallery__item--hero { grid-area: hero; }
.mood-gallery__item--bottle { grid-area: bottle; }
.mood-gallery__item--table { grid-area: table; }
.mood-gallery__item--outing { grid-area: outing; }
.mood-gallery__item--sillage { grid-area: sillage; }
.figure--square { aspect-ratio: 1; }

.figure__caption {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--theme-ink-mid);
  margin-top: .9rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.step {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid var(--theme-line);
}
.step__no {
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .24em;
  color: var(--pink-text);
}
.step__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: .12em;
  margin-top: .75rem;
}
.step__text {
  font-size: .875rem;
  line-height: 2.1;
  color: var(--theme-ink-mid);
  margin-top: .9rem;
}
.step-photo {
  grid-column: 2 / -1;
  min-width: 0;
  width: 100%;
  min-height: 13rem;
  aspect-ratio: 2.25 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--pink-mist);
  box-shadow: var(--shadow-soft);
}
.step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 価格・容量 */
.spec {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--theme-line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--theme-bg-alt) 55%, transparent);
}
.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  font-size: .9375rem;
}
.spec__row + .spec__row { padding-top: 1rem; border-top: 1px solid var(--theme-line); }
.spec__key { font-family: var(--font-gothic); font-size: .75rem; letter-spacing: .16em; color: var(--theme-ink-mid); }
.spec__val { font-family: var(--font-display); letter-spacing: .1em; }

/* 次の香りへの導線 */
.next-scent {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.next-scent img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 2.4s var(--ease-soft);
}
.next-scent:hover img { transform: scale(1.12); }
.next-scent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 30, 36, .42);
}
.next-scent__body { position: relative; z-index: 2; display: grid; gap: .75rem; }
.next-scent__label {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .85;
}
.next-scent__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- 17. フォーム */
.form { display: grid; gap: 1.75rem; }

.field { display: grid; gap: .65rem; }

.field__label {
  font-family: var(--font-gothic);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  display: flex;
  align-items: center;
  gap: .75em;
}

.field__req {
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--pink-text);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .15em .7em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-gothic);
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: .95rem 1.1rem;
  background: color-mix(in srgb, var(--theme-bg) 70%, #fff);
  border: 1px solid var(--theme-line);
  border-radius: .625rem;
  transition: border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--theme-key-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-key) 40%, transparent);
}

.field textarea { min-height: 11rem; resize: vertical; line-height: 1.9; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-family: var(--font-gothic);
  font-size: .8125rem;
  line-height: 1.9;
}
.check input { width: 1.375rem; height: 1.375rem; margin-top: .25rem; accent-color: var(--pink-deep); flex: none; }

.form-status {
  background: var(--pink-mist);
  border: 1px solid var(--theme-line);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

/* 取扱店リスト */
.shop-list { display: grid; gap: 0; }
.shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--theme-line);
}
.shop:first-child { border-top: 1px solid var(--theme-line); }
.shop__name { font-size: 1.0625rem; letter-spacing: .1em; }
.shop__addr { font-family: var(--font-gothic); font-size: .8125rem; color: var(--theme-ink-mid); line-height: 1.9; }
.shop__tag {
  font-family: var(--font-gothic);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--theme-ink-mid);
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  padding: .35em 1em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 18. 404ページ */
.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem;
  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------- 19. View Transitions */
/* クロスドキュメント遷移。対応ブラウザでは色がスイープして繋がり、
   非対応ブラウザでは通常のページ遷移になるだけで壊れない。 */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: .85s; }

::view-transition-old(root) {
  animation: vt-fade-out .5s var(--ease-soft) forwards;
}

::view-transition-new(root) {
  animation: vt-sweep-in .85s var(--ease-soft) forwards;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-sweep-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ロゴだけは遷移をまたいでその場に残す */
::view-transition-group(brand) {
  animation-duration: .85s;
  animation-timing-function: var(--ease-soft);
}

/* ------------------------------------------------------- 20. レスポンシブ */
/* ------------------------------------------ 19.5 TOP editorial expansion */
.service-band {
  border-block: 1px solid var(--theme-line);
  background: color-mix(in srgb, var(--theme-bg) 88%, var(--theme-key));
}
.service-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-mini {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 7.5rem;
  padding: 1.5rem clamp(1rem, 2.2vw, 2.5rem);
  border-right: 1px solid var(--theme-line);
  transition: background var(--dur-fast) var(--ease-soft);
}
.service-mini:first-child { border-left: 1px solid var(--theme-line); }
.service-mini:hover { background: var(--theme-bg-alt); }
.service-mini__no, .service-mini small { font-family: var(--font-gothic); color: var(--theme-ink-mid); }
.service-mini__no { font-size: .625rem; letter-spacing: .18em; }
.service-mini strong { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .12em; }
.service-mini small { display: block; font-size: .6875rem; margin-top: .25rem; }
.service-mini__arrow { transition: transform var(--dur-fast) var(--ease-soft); }
.service-mini:hover .service-mini__arrow { transform: translate(.2rem, -.2rem); }

.news-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.news-list { border-top: 1px solid var(--theme-line); }
.news-list li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--theme-line);
  align-items: center;
}
.news-list time, .news-list em {
  font-family: var(--font-gothic);
  font-size: .625rem;
  letter-spacing: .15em;
  color: var(--theme-ink-mid);
}
.news-list em { font-style: normal; text-transform: uppercase; border: 1px solid var(--theme-line); border-radius: 999px; padding: .25rem .75rem; }

.section--ink { background: var(--ink); color: var(--cream); }
.section--ink .eyebrow, .section--ink .lead { color: var(--pink-dust); }
.section--ink .eyebrow::before { background: var(--pink-soft); }
.editorial-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr); gap: clamp(2.5rem, 2rem + 5vw, 7rem); align-items: center; }
.editorial-split__media { min-height: 34rem; overflow: hidden; }
.editorial-split__media img { width: 100%; height: 100%; object-fit: cover; }
.consult-steps { border-top: 1px solid rgba(253,248,246,.2); }
.consult-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(253,248,246,.2); }
.consult-steps > li > span { font-family: var(--font-gothic); font-size: .625rem; color: var(--pink-dust); }
.consult-steps strong { font-weight: 500; letter-spacing: .12em; }
.consult-steps p { margin: .25rem 0 0; font-family: var(--font-gothic); font-size: .75rem; color: var(--pink-dust); }
.section--ink .btn { --btn-fg: var(--cream); border-color: rgba(253,248,246,.3); }

.editorial-grid { display: grid; grid-template-columns: minmax(17rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 1.5rem + 5vw, 6rem); align-items: end; }
.editorial-grid__wide { aspect-ratio: 16 / 10; overflow: hidden; }
.editorial-grid__wide img { width: 100%; height: 100%; object-fit: cover; }
.ingredient-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--theme-line); }
.ingredient-list > div { padding: 1.75rem 1.5rem 0 0; border-right: 1px solid var(--theme-line); }
.ingredient-list > div + div { padding-left: 1.5rem; }
.ingredient-list > div:last-child { border-right: 0; }
.ingredient-list dt { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .15em; }
.ingredient-list dd { font-family: var(--font-gothic); font-size: .625rem; color: var(--theme-key-deep); letter-spacing: .12em; margin-top: .55rem; }
.ingredient-list p { font-size: .8125rem; color: var(--theme-ink-mid); line-height: 1.9; margin-top: 1.25rem; }

.ritual-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(18rem, .65fr); gap: clamp(2.5rem, 1.5rem + 8vw, 10rem); align-items: center; }
.ritual-layout__image { width: min(100%, 42rem); justify-self: end; }
.ritual-layout__image img { width: 100%; }
.ritual-quote { border-left: 1px solid var(--theme-key-deep); padding-left: 1.75rem; }
.ritual-quote p { font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); line-height: 2; }
.ritual-quote cite { display: block; margin-top: 1rem; font-family: var(--font-gothic); font-size: .625rem; color: var(--theme-ink-mid); font-style: normal; letter-spacing: .16em; }


.feature-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .65fr); gap: clamp(2.5rem, 2rem + 6vw, 8rem); align-items: center; }
.feature-row__media { aspect-ratio: 16 / 10; overflow: hidden; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
.plain-spec { border-top: 1px solid var(--theme-line); }
.plain-spec li { display: grid; grid-template-columns: 7rem 1fr; padding: .85rem 0; border-bottom: 1px solid var(--theme-line); font-size: .8125rem; }
.plain-spec span { font-family: var(--font-gothic); font-size: .625rem; letter-spacing: .12em; color: var(--theme-ink-mid); text-transform: uppercase; }

.section--discovery { background: linear-gradient(135deg, var(--pink-mist), var(--cream-warm)); overflow: hidden; }
.discovery-panel { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 2rem + 6vw, 8rem); align-items: center; }
.discovery-panel__media { box-shadow: var(--shadow-soft); }
.discovery-spec { border-block: 1px solid var(--theme-line); }
.discovery-spec > div { display: grid; grid-template-columns: 8rem 1fr; padding: .75rem 0; border-bottom: 1px solid var(--theme-line); }
.discovery-spec > div:last-child { border-bottom: 0; }
.discovery-spec dt { font-family: var(--font-gothic); font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--theme-ink-mid); }
.discovery-spec dd { font-size: .875rem; }
.discovery-spec small { color: var(--theme-ink-mid); }

.faq-layout { display: grid; grid-template-columns: minmax(15rem, .55fr) minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 6vw, 8rem); align-items: start; }
.faq-list { border-top: 1px solid var(--theme-line); }
.faq-list details { border-bottom: 1px solid var(--theme-line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative; letter-spacing: .1em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: .5rem; font-family: var(--font-gothic); font-size: 1.25rem; font-weight: 300; transition: transform var(--dur-fast) var(--ease-soft); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 3rem 1.5rem 0; margin: 0; font-family: var(--font-gothic); font-size: .8125rem; line-height: 2; color: var(--theme-ink-mid); }

@media (max-width: 60rem) {
  :root { --header-h: 4rem; }

  .nav { display: none; }
  .burger { display: block; }

  .sample-badge { margin-left: auto; }

  .hero__inner,
  .scent-hero__inner,
  .split { grid-template-columns: minmax(0, 1fr); }

  .split--reverse > *:first-child { order: 0; }

  .hero__visual { aspect-ratio: 4 / 3; border-radius: 999rem 999rem 1.25rem 1.25rem; }

  .scent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-photo {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .scent-hero {
    min-height: auto;
    padding-bottom: clamp(3.5rem, 8vw, 5rem);
  }
  .scent-hero__inner { align-items: start; }
  .scent-hero__bottle {
    width: min(100%, 34rem);
    justify-self: center;
  }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }

  .notes { grid-template-columns: minmax(0, 1fr); }

  .shop { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .shop__tag { justify-self: start; }

  .service-band__grid { grid-template-columns: minmax(0, 1fr); }
  .service-mini { min-height: 6rem; border: 0; border-bottom: 1px solid var(--theme-line); }
  .service-mini:first-child { border-left: 0; }
  .service-mini:last-child { border-bottom: 0; }
  .editorial-split, .editorial-grid, .ritual-layout, .feature-row, .discovery-panel, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .mood-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "hero hero" "bottle bottle" "table outing" "table sillage"; grid-auto-rows: clamp(12rem, 28vw, 20rem); }
  .editorial-split__media { min-height: auto; aspect-ratio: 16 / 10; }
  .ingredient-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingredient-list > div:nth-child(2) { border-right: 0; }
  .ingredient-list > div:nth-child(3) { padding-left: 0; }
  .ritual-layout__image { justify-self: start; width: min(85%, 38rem); }
  .feature-row__body { max-width: 40rem; }
  .discovery-panel__media { order: -1; }
}

@media (max-width: 34rem) {
  :root {
    --gutter: 1.25rem;
    --header-h: 4rem;
  }

  body {
    line-height: 1.95;
    letter-spacing: .045em;
  }

  .section { padding-block: clamp(3.75rem, 13vw, 5rem); }
  .section--tight { padding-block: clamp(3rem, 10vw, 4rem); }

  .brand {
    grid-template-columns: 1.55rem auto;
    column-gap: .55rem;
    font-size: .9375rem;
    letter-spacing: .36em;
    text-indent: .36em;
  }
  .brand::before { width: 1.55rem; }
  .brand small { font-size: .4375rem; }

  /* 文言は省略しない。狭い幅ではロゴ側とヘッダーの間隔を詰めて収める */
  .sample-badge { padding-inline: .5rem; font-size: .625rem; }
  .header__inner { gap: .5rem; }
  .brand { font-size: .9375rem; letter-spacing: .3em; text-indent: .3em; }

  .drawer {
    justify-content: flex-start;
    gap: 1.5rem;
    overflow-y: auto;
  }
  .drawer__list a {
    min-height: 3.5rem;
    padding-block: .9rem;
    font-size: clamp(1.1rem, 5.5vw, 1.35rem);
  }

  .hero__inner { padding-block: 2.75rem 3.5rem; }
  .hero__title {
    font-size: clamp(1.75rem, 8.4vw, 2.15rem);
    line-height: 1.55;
    letter-spacing: .1em;
  }
  .hero__sub { line-height: 2.05; }
  .hero__actions { gap: .75rem 1rem; }
  .btn {
    max-width: 100%;
    padding-inline: 1.65em;
    letter-spacing: .2em;
  }

  .section-title {
    overflow-wrap: anywhere;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    letter-spacing: .09em;
  }
  .section-title .ja { letter-spacing: .18em; }

  .scent-hero { padding-top: calc(var(--header-h) + 2.25rem); }
  .scent-hero__inner { gap: 2.25rem; }
  .scent-hero__no { font-size: clamp(3.5rem, 18vw, 4.75rem); }
  .scent-hero__name {
    font-size: clamp(2.2rem, 12vw, 3rem);
    letter-spacing: .12em;
  }
  .scent-hero__ja { letter-spacing: .22em; }
  .scent-hero__copy { font-size: 1rem; }
  .scent-hero__bottle {
    width: 100%;
    border-radius: 1rem;
  }

  .scent-grid { grid-template-columns: minmax(0, 1fr); }
  .step-photo {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .scent-card { aspect-ratio: 3 / 3.4; }
  .scent-card__notes { max-height: 3.5rem; opacity: .9; transform: none; }

  .link { display: inline-flex; align-items: center; min-height: 2.75rem; }

  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .5rem; }

  .timeline-notes__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }

  .spec { padding: 1.25rem; }
  .spec__row {
    align-items: start;
    gap: .5rem 1rem;
    flex-wrap: wrap;
  }
  .spec__val {
    margin-left: auto;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .next-scent { min-height: 17rem; }
  .next-scent img,
  .next-scent:hover img { transform: none; }

  .footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .hero__scroll { display: none; }

  .news-head { align-items: start; flex-direction: column; }
  .news-list li { grid-template-columns: 1fr auto; gap: .35rem 1rem; }
  .news-list li span { grid-column: 1 / -1; grid-row: 2; }
  .news-list em { grid-column: 2; grid-row: 1; }
  .ingredient-list { grid-template-columns: minmax(0, 1fr); }
  .mood-gallery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "bottle" "table" "outing" "sillage"; grid-auto-rows: minmax(16rem, 72vw); }
  .ingredient-list > div, .ingredient-list > div + div { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--theme-line); }
  .ritual-layout__image { width: 100%; }
  .plain-spec li, .discovery-spec > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .faq-list summary { min-height: 3.5rem; padding-block: 1.1rem; }
}

/* --------------------------------- 20.5 JavaScript が動かない環境 */
/* スクロール表示だけは JS に頼っているので、動かないときも
   コンテンツは最初から見えている状態にしておく。 */
@media (scripting: none) {
  .reveal,
  .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .reveal-img img { transform: none !important; }
  .timeline-notes__fill { transform: scaleX(var(--v, .6)) !important; }
  /* ドロワーは開けないので、狭い画面でもナビを直接出す */
  .burger { display: none !important; }
  .header { height: auto; padding-block: .75rem; }
  .nav { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1rem; }
}

/* ------------------------------------------- 21. アクセシビリティ配慮 */
/* 動きを減らす設定の環境では、装飾アニメーションを全部止める。
   コンテンツは最初から見えている状態にする。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .hero__sub,
  .hero__actions { opacity: 1 !important; transform: none !important; }

  .reveal-line > span { transform: none !important; }

  .reveal-img,
  .hero__visual { clip-path: none !important; }

  .reveal-img img,
  .hero__visual img { transform: none !important; }

  .petals,
  .scent-aura,
  .fx-bloom,
  .fx-melt,
  .fx-veil,
  .fx-bloomdark { display: none !important; }

  .timeline-notes__fill { transform: scaleX(var(--v, .6)) !important; }

  @view-transition { navigation: none; }
}

/* 印刷時は装飾を落として本文だけ残す */
@media print {
  .header, .drawer, .footer::before, .petals, .scent-aura,
  .fx-bloom, .fx-melt, .fx-veil, .fx-bloomdark, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal, .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* --------------------------------------------------- 22. ユーティリティ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-gothic);
  font-size: .8125rem;
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem .5rem;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { top: 0; }

/* PCだけで効く改行。中央揃えの和文で、最終行が数文字だけ残る
   （「ください。」のような泣き別れ）のを防ぐために文単位で折る。
   狭い画面では不自然な短い行になるため無効化し、自然な折り返しに任せる。 */
.br-pc { display: none; }

/* 文末が数文字だけ次の行に落ちるのを防ぐ。折り返す場合はこの塊ごと
   次の行へ送られるので、最終行が必ずこの長さ以上になる。 */
.nobr { white-space: nowrap; }

/* 48rem（768px）以上で有効にする。ナビの 60rem ではなく、
   いちばん長い文が段落幅に収まる下限に合わせている。 */
@media (min-width: 48rem) {
  .br-pc { display: inline; }
}

.text-center { text-align: center; }
.mt-s  { margin-top: 1.25rem; }
.mt-m  { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.mt-l  { margin-top: clamp(2.5rem, 1.75rem + 3vw, 5rem); }
.mt-xl { margin-top: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); }