@charset "UTF-8";

/* ==========================================================================
   N organic Happy Holiday 2026 × KIGI  /  teaser LP
   デザイン原寸は SP(2).psd = 750px 幅（375px ビューポートの @2x）。
   すべての座標・寸法は PSD の実測値（750px 基準）をそのまま書き、
   --u（= 表示幅 / 750）を掛けて任意幅にスケールさせる。
   PC（1000px 以上）は PC(2).psd の外枠だけを再現し、
   --vw を 536px に固定してコンテンツ幅を約 502px（PC カンプ実寸）に合わせる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lenis（慣性スクロール）の必須スタイル。lenis@1.3.17 の dist/lenis.css と同内容。
   同梱の js/lenis.min.js とバージョンを合わせること
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

:root {
  /* 上限 750px → 1000px（2026-10-01 社内チェック「両サイドに背景が見えている」）。
     PC 版面に切り替わるのは 1000px からなので、750px で止めていると
     751〜999px（タブレット縦など）だけが「750px の版面＋左右の地色帯」に
     なっていた。上限を PC ブレークポイントと同じ 1000px まで上げて帯を消す。
     代償として本文画像の拡大率が最大 1.07 倍 → 1.42 倍になるが、画像は
     すべて 702 グリッドの等倍書き出しで揃っているので一律に甘くなるだけで、
     特定の 1 枚だけ浮くことはない。750px 以下（スマホ）と 1000px 以上（PC）は
     従来どおりで影響しない */
  --vw: min(100vw, 1000px);
  /* 分母は PSD のカンバス幅 750 ではなく、コンテンツ列の幅 702。
     こうするとコンテンツ列の幅がちょうど --vw = 画面幅になり、
     PSD が持っていた左右 24px の緑の余白が無くなる（2026-09-30 指示
     「両サイドのグリーンのフチは全て無し・画面いっぱいまで背景を伸ばす」）。
     --x / --y / --w は PSD 実測のまま使えるので HTML は無変更。
     副作用として全体が 750/702 = 6.84% 大きくなる */
  --u: calc(var(--vw) / 702);

  --green: #0f4536; /* ページ地色 */
  --green-wtb: #0d4a34; /* Where to Buy セクション */
  --red: #c40022;
  --pink: #db4068;
  --gold: #c49849;
  --ink: #383433; /* 価格の「定期便初回」行など、白地に載る黒文字 */

  /* イージング（参考実装が使っている GSAP のイージング相当の CSS 版） */
  --ease-out1: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* power1.out */
  --ease-acc: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* power1.inOut */
  --ease-move: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1); /* sine.out */
  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715); /* sine.in */

  /* ホバーの出入り。母の日 LP（mothersday_2026）に合わせて、
     入りをゆっくり・戻りを速くした非対称にしている。
     イージングは向こうの --_ease-change が上の --ease-sine-out と同値。

     各ボタンは transition に直接 0.45s / 0.3s と書かず --hov-dur を挟み、
     ホバー側では --hov-dur だけを差し替える。transition-duration で上書き
     すると、同じ transition に並んでいる入場アニメの尺まで巻き添えになる */
  --hov-in: 0.45s;
  --hov-out: 0.3s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior は指定しない。慣性スクロールは Lenis が担当していて、
     CSS のスムーススクロールと同時に効かせると取り合いになる
     （Lenis 自身も lenis-smooth 時は scroll-behavior: auto を当てる）。
     Lenis を動かさない環境（prefers-reduced-motion）では既定の
     瞬間ジャンプになる ＝ 動きを減らす設定として正しい挙動 */
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--green);
  color: #fff;
  /* 原稿書体は游ゴシック体 Pr6N R（PSD のテキストレイヤー 161 枚すべてこれ）。
     yu-gothic-pr6n = Adobe Fonts のファミリ名、"Yu Gothic Pr6N" = OTF の
     英語 typographic family（ローカルに入っている場合）。
     YuGothic / "Yu Gothic" は macOS / Windows 同梱版へのフォールバックで、
     字形セットは違うが字送りはほぼ同じ */
  font-family: "yu-gothic-pr6n", "Yu Gothic Pr6N", YuGothic, "Yu Gothic",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 400;
  line-break: strict;
  overflow-wrap: break-word;
}

/* 見出し等の既定マージンがセクション外へ相殺で漏れて高さが狂うため全消し */
h1,
h2,
h3,
p,
ul,
ol,
figure,
figcaption,
dl,
dd {
  margin: 0;
}

img {
  display: block;
  border: 0;
}

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

/* URL をそのまま出しているリンクだけ、下線で触れることを示す。

   以降のボタン類も含め、:hover は必ず (hover: hover) and (pointer: fine) の
   中に書く。素で書くとタッチ端末ではタップ後もホバーが残り続け、別の場所を
   触るまで「押しっぱなし」に見えてしまう。母の日 LP は jQuery の
   enableTouchOver() が .is-touched を付けて逃げているが、こちらは jQuery を
   積んでいないので :active で代用する */
.link-url:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .link-url:hover {
    text-decoration: underline;
  }
}

/* --- 基本レイアウト ------------------------------------------------------- */

.page {
  width: var(--vw);
  margin-inline: auto;
}

/* 各セクション = 702px 幅のコンテンツカラム（左右 24px は地色の余白） */
.sec {
  position: relative;
  width: calc(702 * var(--u));
  margin-inline: auto;
  /* --acc-delta はアコーディオンの開閉差分（js/main.js が px で入れる） */
  height: calc(var(--h) * var(--u) + var(--acc-delta, 0px));
}

/* FV を画面いっぱいに（2026-10-01 指摘「KV が画面全体より長くて間延びしてる」）。

   高さは **svh**。lvh / dvh ではない理由は 2 つある。
   ・lvh はアドレスバーが引っ込んだときの高さ。開いた直後（バーが出ている）は
     画面より KV のほうが高くなり、**指摘された「画面より長い」状態がそのまま
     残る**。下端のクレジット（2026.11.06 Debut）も隠れる
   ・切り取られる向きが変わる。素材の比は 0.5189 なので、画面の高さが
     「幅 × 1.927」を超えると画面のほうが縦長になり、**上下ではなく左右が
     切れる**。iPhone 390pt なら 752px が分かれ目で、バーが出ている
     高さ（≒664px）は上下トリミング、lvh（≒790px）だと左右トリミングに入る
   svh なら必ず上下だけが切れて、開いた瞬間にぴったり収まる。

   トリミング量は実測で上下あわせて 12% 程度。素材はロゴ上端が 22%、
   クレジット下端が 85% の位置なので、文字には当たらない。

   横向きは対象外。横長の枠に 0.5189 の絵を cover すると縦が 7 割以上
   飛んで構図が壊れるため、従来どおり版面比で置く */
/* 全画面化を許す条件に **画面の縦横比** も入れてある（max-aspect-ratio: 7/10
   ＝ 高さが幅の 1.43 倍以上）。
   cover は「足りない側に合わせて拡大して余りを切る」ので、画面が相対的に
   横長になるほど上下の切り取りが増える。片側の切り取り率は
   実測で  1/2 − 0.26 × (高さ÷幅)  になり、
   ・W/H = 0.587（iPhone 390x664）… 片側 5.7%
   ・W/H = 0.70 … 片側 12.9%
   ・W/H = 0.80 … 片側 17.5%
   FV の素材はクレジット（2026.11.06 Debut）の下端が 85%、フッターの素材は
   ロゴ上端が 18.5% の位置にあるので、片側 15% を超えると文字が欠け、
   フッターではさらにボタンが商品に重なり始める。
   境目は 0.70 付近なので、そこで線を引いて、それより横長の縦画面
   （タブレットやブラウザ窓を縦長にした PC）は従来どおり版面比で置く。
   スマホは縦向きなら最も横幅のある機種でも 0.69 以下なので全部入る */
@media (max-width: 999px) and (orientation: portrait) and (max-aspect-ratio: 7 / 10) {
  .sec--fv {
    height: 100vh; /* svh 非対応ブラウザ向け。iOS では従来と同じ挙動になる */
    height: 100svh;
  }

  /* 最終セクション（フッターの KV）も全画面に（2026-10-01 指示）。
     単位は FV と揃えて svh。svh は「アドレスバーが出ているときの高さ」＝
     いちばん小さい値なので、どの状態でも画面からはみ出さない。
     バーが引っ込んで表示領域が広がったときは、KV の上に前のセクション
     （Where to Buy）が少し覗く形になる。ページ末尾なので KV の下には
     何も出ない */
  .sec--foot {
    height: 100vh;
    height: 100svh;
  }

  /* ボタンは「セクション上端から --y」ではなく **下端から一定** に変える。
     全画面化でセクションの高さが可変になり、上端基準のままだと画面から
     はみ出すため（390x664 ではボタン下端が 680px ＝ 16px はみ出す）。
     127 はカンプでのボタン下端（y1223）から画像下端（y1350）までのアキ。
     ボタンが載るのは絵柄の無い平らな緑なので、画像のトリミング位置と
     多少ずれても絵には当たらない */
  .sec--foot > .pill {
    top: auto;
    bottom: calc(127 * var(--u));
  }
}

.sec--clip {
  overflow: hidden;
}

.sec--red {
  background: var(--red);
}
.sec--white {
  background: #fff;
}
.sec--gold {
  background: var(--gold);
}
/* 商品 4・5 の区切り。2026-09-30 指示で金 14px → 緑 7px（線幅 1/2）に */
.sec--green {
  background: var(--green);
}

/* 絶対配置ヘルパー。--x/--y/--w/--h を PSD 実測値で渡す */
.p {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  /* 重なり順は原則 DOM 順。前に出したいものだけ --z を持つ（馬は映像の
     上辺に足を乗せて歩くので、映像より手前に置く）。スプライトの最終コマの
     canvas はカスタムプロパティだけを引き継ぐので、--z もそのまま効く */
  z-index: var(--z, auto);
}

/* .p 自身が img の場合は --w が効くよう width を上書きしない */
.p > img {
  width: 100%;
  height: auto;
}

img.p {
  height: auto;
}

/* ポーチ写真 2 枚並び。flex-basis: 0 で画面幅を等分し、高さは
   幅なりに決まるので、元画像の縦横比はそのまま保たれる */
.pouch-pair {
  display: flex;
  align-items: flex-start;
}

.pouch-pair > img {
  /* min-width: 0 が無いと、flex アイテムの既定 min-width: auto が効いて
     画像は元画像の幅（353px）より縮まず、2 枚で枠からはみ出す */
  flex: 1 1 0;
  min-width: 0;
}

/* .hotspot（画像に焼き込まれたボタンに重ねる透明なリンク領域）は、
   2026-09-30 にフッターの KV を差し替えて最後の 1 箇所が .pill の実描画に
   変わったため撤去した。.sec--divider（白帯）も同日「白罫線トル」で
   使う箇所が無くなったので同様 */

/* テキストは「インクの中心 Y（--cy）」で配置し、transform で上下中央合わせ。
   line-height を変えても位置がずれないため、PSD 実測値をそのまま使える。 */
.t {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc((var(--cy) + var(--dy, 0)) * var(--u));
  width: calc(var(--w) * var(--u));
  transform: translateY(-50%);
  margin: 0;
  font-size: calc(var(--fs) * var(--u));
  letter-spacing: calc(var(--ls, 0) * var(--u));
  line-height: var(--lh, 1.5);
}

.t--center {
  text-align: center;
}
.t--justify {
  text-align: justify;
  text-justify: inter-character;
}
.t--red {
  color: var(--red);
}

/* 約物（かぎ括弧）を詰める。PSD で約物半角になっている行に使う */
.t--palt {
  font-feature-settings: "palt" 1;
}

/* 商品リードコピーの下線（PSD 実測: 金 #c49849・線幅 3px・ベースラインから 4px 下） */
.t--ul > span {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: calc(4 * var(--u));
  text-decoration-thickness: calc(3 * var(--u));
  text-decoration-skip-ink: none;
}

/* --- hero ---------------------------------------------------------------- */

/* hero 右端の縦罫は 2026-09-30 指示で金の矢印（images/arrow.svg）に置き換えた。
   「動きなし」なので、トラック＋流れるバーの .rule / @keyframes rule-sweep は
   まるごと撤去している。位置と寸法の根拠は index.html 側のコメントに書いた */

/* --- FV（動画 + 文字） ----------------------------------------------------
   KV は動画だが、文字は動画側に入っていないので透過 1 枚を重ねている。
   動画の縦横比（1080:2076）と版面（702:1350）は 0.04% ずれているだけなので、
   object-fit: cover で吸収する。下地は動画が出るまでの数フレーム分の保険で、
   KV の床の色を置いてある。 */

.fv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #24493c;
  /* FV は最初から出ている。ほかの要素のような入場フェードは載せない
     （[data-fade-in-img] を付けない）ので、ここで opacity を触る必要も無い */
}

.fv__movie {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- BGM の ON/OFF ------------------------------------------------------- *
   FV の左下に小さく置くトグル（2026-10-01 要望）。

   地色を敷いている理由は index.html 側のコメントのとおりで、FV は
   12.8 秒のループ中に左下の明るさが輝度平均 20〜127（部分的に 252）まで
   動くため、白抜きだけでは明るいコマで読めなくなる。色は左下の実測平均
   rgb(16,67,55) ＝ KV の地の深緑そのまま。

   寸法は版面（702）基準の値に --su を掛ける。--su は --u の 0.8 倍で、
   2026-10-01 の「80% くらい小さく」に対応したもの。**画面端からの距離
   （40）だけは --u のまま**にしてあり、箱が小さくなっても隅での収まりが
   変わらない。
   角丸は 2026-10-01 指示で無し。 */

.sound {
  --su: calc(var(--u) * 0.8);

  position: absolute;
  left: calc(40 * var(--u));
  bottom: calc(40 * var(--u));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--su));
  margin: 0;
  padding: calc(22 * var(--su)) calc(24 * var(--su));
  border: 0;
  border-radius: 0;
  background: rgba(16, 67, 55, 0.5);
  -webkit-backdrop-filter: blur(calc(8 * var(--su)));
  backdrop-filter: blur(calc(8 * var(--su)));
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* iOS でタップ時に出る灰色の矩形を消す */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s linear;
}

/* 見た目を 80% に縮めたぶん、箱そのものは 375px 実機で高さ 34px になり、
   タップ目標の 44px を割る。見えない余白を外側に足して当たりだけ戻す
   （背景は箱のままなので、見た目は小さいまま） */
.sound::before {
  content: "";
  position: absolute;
  inset: calc(-10 * var(--u));
}

/* JS が動くまでは出さない。hidden だけだと上の display: flex に負ける */
.sound[hidden] {
  display: none;
}

.sound__icon {
  display: block;
  width: calc(36 * var(--su));
  height: calc(36 * var(--su));
  fill: currentColor;
  flex: none;
}

/* 消音アイコンと再生アイコンの出し分け。既定（aria-pressed="false"）は
   「いま音が出ていない」状態なので、消音のほうを見せる */
.sound__glyph--on {
  display: none;
}

.sound[aria-pressed="true"] .sound__glyph--on {
  display: block;
}

.sound[aria-pressed="true"] .sound__glyph--off {
  display: none;
}

.sound__label {
  /* 書体は body の指定（游ゴシック系）をそのまま継ぐ。この LP に欧文用の
     ウェブフォントは積んでいない（英字の見出しはすべて画像）ので、
     ここだけ別物を読みに行かせない。
     ON と OFF で幅が変わって箱の大きさが動かないよう、
     最小幅を広いほう（OFF）に合わせて確保しておく。

     **中央揃え**。左揃えにすると、確保した幅の中で短い ON だけ左に寄って
     右に余白が残り、箱に対して文字が左にずれて見える（2026-10-01 指摘）。
     中央に置けば、どちらでも文字の重心が同じ位置に来る。
     字間（letter-spacing）は最後の字の右にも入るので、そのぶん
     右へ半字ぶん寄る。負のマージンで打ち消しておく */
  min-width: calc(56 * var(--su));
  font-size: calc(26 * var(--su));
  letter-spacing: calc(1.5 * var(--su));
  margin-right: calc(-1.5 * var(--su));
  text-align: center;
}

@media (hover: hover) {
  .sound:hover {
    background: rgba(16, 67, 55, 0.72);
  }
}

/* --- 本文中の動画 --------------------------------------------------------- */

.video {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
  overflow: hidden;
  background: #000;
}

.video > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- アコーディオン ------------------------------------------------------
   構造・CSS・JS は sirok.jp/teasers/mothersday/2026 の [data-accordion] に合わせた。
   パネルは overflow:hidden + height を JS で 0 ⇄ scrollHeight に遷移させる。
   セクションは PSD 実測値で高さ固定のため、開閉差分を --acc-delta で吸収する
   （js/main.js 参照）。 */

.acc {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(582 * var(--u));
  border-top: calc(2 * var(--u)) solid #fff;
  border-bottom: calc(2 * var(--u)) solid #fff;
}

.acc__btn {
  display: block;
  position: relative;
  width: 100%;
  height: calc(101 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  --hov-dur: var(--hov-out);
  transition: opacity var(--hov-dur) var(--ease-sine-out);
}

.acc__btn:focus-visible,
.acc__btn:active {
  --hov-dur: var(--hov-in);
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  .acc__btn:hover {
    --hov-dur: var(--hov-in);
    opacity: 0.6;
  }
}

.acc__label {
  position: absolute;
  left: calc(7 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: calc(25 * var(--u));
  line-height: 1;
}

/* ＋／− アイコン（PSD 実測: 37x4 の横棒）。参考実装と同じく同じ棒を 2 本重ね、
   閉じているあいだだけ片方を -90deg 倒して＋に見せ、開くと回転して−になる。 */
.acc__icon {
  position: absolute;
  right: calc(1 * var(--u));
  top: 50%;
  width: calc(37 * var(--u));
  height: calc(37 * var(--u));
  transform: translateY(-50%);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(4 * var(--u));
  background: #fff;
  translate: -50% -50%;
}

.acc__icon::after {
  rotate: -90deg;
  transition: rotate 0.45s var(--ease-move);
}

.acc__btn[aria-expanded="true"] .acc__icon::after {
  rotate: 0deg;
}

.acc__panel {
  display: block;
  overflow: hidden;
  height: 0;
  background: var(--pink);
  transition: height var(--acc-dur, 0.45s) var(--ease-acc);
}

/* JS が動く前でもカンプの初期状態（商品 1・5 は開いた状態）を保つ */
.acc.is-open > .acc__panel {
  height: auto;
}

.acc__panel-inner {
  position: relative;
  padding: calc(19 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}

/* 会員様限定セットのパネルだけ地色を変える（2026-09-30 指示 #a0001e）。
   商品 1〜3 のパネルはピンク地に赤いチップが載っているので、--pink は触らない */
.acc__panel:has(> .acc__panel-inner--vie) {
  background: #a0001e;
}

/* 会員様限定セットのパネルは中身を絶対配置する */
.acc__panel-inner--vie {
  height: calc(399 * var(--u));
  padding: 0;
}

/* 取扱場所のチップ（ピンク地に赤い角丸なしの箱） */
.acc__chips {
  margin: 0;
  font-size: 0; /* インライン要素間の余白を殺して PSD どおりに並べる */
}

.acc__chip {
  display: inline-block;
  height: calc(42 * var(--u));
  margin: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0;
  padding: 0 calc(11.5 * var(--u));
  background: var(--red);
  font-size: calc(22 * var(--u));
  line-height: calc(42 * var(--u));
  white-space: nowrap;
}

.acc__list {
  margin: calc(8.5 * var(--u)) 0 0;
  padding: 0 0 0 calc(2 * var(--u));
  list-style: none;
  font-size: calc(23 * var(--u));
  line-height: calc(28.8 / 23);
}

.acc__list > li {
  padding-left: calc(15 * var(--u));
  text-indent: calc(-15 * var(--u));
}

.acc__list > li + li {
  margin-top: calc(2 * var(--u));
}

/* 開閉差分に追従させるセクションと、アコーディオンより下に置かれた要素 */
.sec--acc {
  transition: height var(--acc-dur, 0.45s) var(--ease-acc);
}

.acc-shift {
  margin-top: var(--acc-delta, 0px);
  transition: margin-top var(--acc-dur, 0.45s) var(--ease-acc);
}

/* --- 価格ボックス -------------------------------------------------------- */

.price {
  position: absolute;
  left: 0;
  top: calc(var(--y) * var(--u));
  width: calc(702 * var(--u));
  height: calc(var(--h) * var(--u));
  background: #fff;
  color: var(--red);
}

.price__label {
  position: absolute;
  left: calc(131 * var(--u));
  top: calc(var(--cy) * var(--u));
  transform: translateY(-50%);
  margin: 0;
  font-size: calc(var(--lfs, 28) * var(--u));
  letter-spacing: calc(var(--lls, -1) * var(--u));
  line-height: 1;
}

.price__value {
  position: absolute;
  left: calc(var(--x, 280) * var(--u));
  top: calc(var(--cy) * var(--u));
  transform: translateY(-50%);
  margin: 0;
  font-size: calc(var(--vfs, 25) * var(--u));
  letter-spacing: calc(var(--vls, 1.2) * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* 中央組（2026-09-30 指示）。PSD はラベルを左端 131px に固定していたが、
   ラベルと金額を 1 行につないで行ごと中央へ寄せる。
   --lfs/--vfs は行から継承させているので、文字サイズの指定は元のまま効く */
.price__row {
  position: absolute;
  left: 0;
  top: calc(var(--cy) * var(--u));
  width: calc(702 * var(--u));
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

/* 中の label / value は絶対配置をやめて素直に流す */
.price__row .price__label,
.price__row .price__value {
  position: static;
}

/* ラベルと金額の間（PSD 実測「通常価格：」の右端から金額まで 9px） */
.price__row .price__label {
  margin-right: calc(9 * var(--u));
}

/* 定期便初回の行は PSD 実測で通常価格の行より一回り小さく、文字色は黒 */
.price__row--sub {
  color: var(--ink);
  --lfs: 23;
  --lls: 0.6;
  --vfs: 23;
  --vls: 0.8;
}

.price__value--center {
  left: 0;
  width: calc(702 * var(--u));
  text-align: center;
}

.price__hr {
  position: absolute;
  left: calc(131 * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(440 * var(--u));
  height: calc(2 * var(--u));
  background: var(--red);
}

.tax {
  font-size: 0.6em;
  letter-spacing: 0;
}

/* 「6,160円（税込）送料無料」の末尾だけさらに小さい */
.vie-ship {
  margin-left: calc(6 * var(--u));
  font-size: 0.77em;
}

/* --- 商品注釈 ------------------------------------------------------------ */

/* PSD には無い、薬機／景表法まわりの注釈（2026-09-30 追加）。
   本文が折り返す＝高さが原稿の字数で決まるので、ここだけ --h 固定をやめて
   中身なりに伸ばす。赤セクションの直後に同じ赤で続けているので、見た目は
   ひとつづきのブロックに見える。
   上下の余白は CTA の下と区切りの上で同じ 101px（2026-09-30 指示で上下同値、
   値は制作会社 PDF の②＝「現状の④の空き幅」に合わせた）。
   上の 101px は赤セクションが CTA の下に持っている余白がそのまま効くので、
   padding-top は 0。下の 101px だけ padding で作る。
   行間の半分（half-leading）は 1 行目の上と最終行の下に同じだけ付くので、
   文字の実体で見ても上下は揃う */
.sec--note {
  height: auto;
  padding: 0 calc(58 * var(--u)) calc(101 * var(--u));
}

/* font-size は .tax（通常価格の行 --vfs: 25 の 0.6em）と同じ 15px。
   左右は CTA ボタンの外形（--x: 58 / 幅 586）に揃えた */
.note {
  font-size: calc(15 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
  line-height: 1.85;
}

/* ※ / ＊ のぶら下げ。折り返した行が記号の右に揃う */
.note > p {
  padding-left: 1em;
  text-indent: -1em;
}

.note > p + p {
  margin-top: calc(6 * var(--u));
}

/* --- 販路ラベル ---------------------------------------------------------- */

/* 「楽天・Amazon LINEギフト限定」「会員様限定セット」。
   2026-09-30 指示「背景金＋写真につける（左揃え）」。
   写真の左上に、箱の下辺を写真の上辺に合わせて置く。幅は文字なり。
   高さ 53px・左右パディング 20px は制作会社 PDF の参考画像を画素で実測した値
   （箱 52.2/53.7px・左右パディング 22.4/17.9px → 対称に丸めた）。
   文字サイズ 33px は差し替え前の見出しと同じ */
.tag {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  width: fit-content;
  height: calc(53 * var(--u));
  margin: 0;
  padding-inline: calc(20 * var(--u));
  background: var(--gold);
  font-size: calc(33 * var(--u));
  letter-spacing: calc(var(--ls, 0) * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* --- ボタン類 ------------------------------------------------------------ */

/* 「ご予約はこちら」＝ 二重罫のピル（PSD 実測: 外 586x110 / 内 568x92） */
.cta {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: block;
  width: calc(586 * var(--u));
  height: calc(110 * var(--u));
  /* PSD は外罫 2px・内罫 1px（内罫の外辺が要素端から 9px）。
     表示 375px 幅では 1px / 0.5px のヘアラインになって外罫が細く見えるため、
     外罫だけ 3px に太らせて太さの差をはっきり出している
     （2026-09-22 苑子さん指示） */
  border: calc(3 * var(--u)) solid #fff;
  border-radius: calc(55 * var(--u));
  text-decoration: none;
  --hov-dur: var(--hov-out);
}

.cta::before {
  content: "";
  position: absolute;
  inset: calc(6 * var(--u)); /* 外罫 3px + 6px = PSD の 9px */
  border: calc(1 * var(--u)) solid #fff;
  border-radius: calc(46 * var(--u));
}

.cta__main,
.cta__sub {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
  transform: translateY(-50%);
}

.cta__main {
  top: calc(39.5 * var(--u));
  font-size: calc(27 * var(--u));
  letter-spacing: calc(3.17 * var(--u));
}

.cta__sub {
  top: calc(71.5 * var(--u));
  font-size: calc(19 * var(--u));
  letter-spacing: calc(2.2 * var(--u));
}

/* .cta / .pill は入場アニメ（[data-fade-in-img]）も載っている要素で、
   あちらの transition 指定が後から丸ごと上書きしてしまう（`.js [data-fade-in-img]`
   と `.cta` では前者が勝つ）。そのせいでホバーの transition はこれまで
   効いておらず、白地への反転が一瞬で切り替わっていた。
   入場ぶんとホバーぶんを 1 本の transition にまとめ、属性セレクタを足した
   specificity で勝たせる */
.js .cta[data-fade-in-img],
.js .pill[data-fade-in-img] {
  transition: var(--anim-fade-in-img),
    background-color var(--hov-dur) var(--ease-sine-out),
    color var(--hov-dur) var(--ease-sine-out);
}

/* JS が動かない＝入場アニメが無いときのぶん */
.cta,
.pill {
  transition: background-color var(--hov-dur) var(--ease-sine-out),
    color var(--hov-dur) var(--ease-sine-out);
}

.cta:focus-visible,
.cta:active {
  --hov-dur: var(--hov-in);
  background-color: #fff;
  color: var(--red);
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    --hov-dur: var(--hov-in);
    background-color: #fff;
    color: var(--red);
  }
}

/* ピル型ボタン（白 2px 罫） */
.pill {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: calc(var(--h) / 2 * var(--u));
  font-size: calc(var(--fs, 25) * var(--u));
  letter-spacing: calc(var(--ls, 0) * var(--u));
  line-height: 1;
  text-align: center;
  text-decoration: none;
  --hov-dur: var(--hov-out);
}

.pill--2line {
  line-height: var(--lh, 1.25);
}

.pill:focus-visible,
.pill:active {
  --hov-dur: var(--hov-in);
  background-color: #fff;
  color: var(--red);
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    --hov-dur: var(--hov-in);
    background-color: #fff;
    color: var(--red);
  }
}

/* 白地の見出しチップ（「販売場所」「選べる購入サイト」） */
.chip {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: #fff;
  color: var(--red);
  font-size: calc(27 * var(--u));
  line-height: 1;
}

/* --- デザイン紹介セクション（上下が赤にフェードする白地） ---------------
   PSD から実測したカーブ（イージングがかかっているため多段ストップ） */

.sec--design {
  background: linear-gradient(
    to bottom,
    #c60a2b 0%,
    #ce2b47 0.637%,
    #d54a62 1.274%,
    #dc687c 1.911%,
    #e28192 2.548%,
    #e798a6 3.185%,
    #ecadb8 3.822%,
    #f0c0c8 4.459%,
    #f4d0d6 5.096%,
    #f7dee2 5.732%,
    #fae9ec 6.369%,
    #fcf2f4 7.006%,
    #fdf8f9 7.643%,
    #fffdfd 8.28%,
    #ffffff 8.826%,
    #ffffff 85.487%,
    #fefafb 86.579%,
    #fbeff1 87.671%,
    #f7dde2 88.763%,
    #f2c5cd 89.854%,
    #e9a2ae 90.946%,
    #e0798b 92.038%,
    #d4455e 93.13%,
    #c6092a 94.222%,
    #c40022 95.314%,
    #c40022 100%
  );
}

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

/* <a> 自身の opacity は入場アニメが使っているので、ホバーの減光は中の
   <img> に載せる。掛け算になるので入場中に触れても破綻しない */
.share-icon {
  display: block;
  --hov-dur: var(--hov-out);
}

.share-icon img {
  transition: opacity var(--hov-dur) var(--ease-sine-out);
}

.share-icon:focus-visible img,
.share-icon:active img {
  --hov-dur: var(--hov-in);
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  .share-icon:hover img {
    --hov-dur: var(--hov-in);
    opacity: 0.6;
  }
}

/* --- PC（PC(2).psd の外枠のみ再現） -------------------------------------- */

.sidenav {
  display: none;
}

@media (min-width: 1000px) {
  :root {
    /* PC カンプのコンテンツカラム幅。--u の分母が 702 になったので
       コンテンツ列の幅 = --vw。以前の 536px * (702/750) と同じ値 */
    --vw: 502px;
  }

  /* PC カンプ実測（1280px 幅・@1x）のご予約ボタンは外罫 2px・内罫 1px・
     内罫の外辺が 6px。SP カンプ（@2x）の 2px = 表示 1px なので、PC は SP の
     倍の太さで組まれている。--u でスケールすると 1.43px になって細く見えるため、
     PC だけ絶対値で当てる（2026-09-22 苑子さん指摘の「外側の線が細い」の実因） */
  .cta {
    border-width: 2px;
  }
  .cta::before {
    border-width: 1px;
  }

  .sidenav {
    display: block;
    position: fixed;
    /* PC カンプ実測: 1280px 幅のとき left=145px（= 50% - 495px） */
    left: max(24px, calc(50% - 495px));
    /* 右端は本文カラム（左端 = 50% - 268px）の 8px 手前で止める。
       こうしておくと、SPECIAL COLLABORATION のような長い項目が
       本文に被らず、入りきらないときだけ折り返す */
    right: calc(50% + 276px);
    top: 72px;
    z-index: 10;
    color: var(--gold);
  }

  .sidenav__logo {
    display: block;
    width: 85px;
  }

  .sidenav__logo img {
    width: 100%;
    height: auto;
  }

  .sidenav__list {
    /* 43 → 51px。line-height を 36px から 1.25 に変えたぶん 1 行目のインクが
       行ボックスの上寄りになる（10px 下 → 2px 下）ので、ロゴから CONCEPT
       までの見た目の距離を元のまま保つために 8px 足している */
    margin: 51px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    letter-spacing: 0.9px;
    /* 項目の中の行間。折り返す SPECIAL COLLABORATION が「SPECIAL」
       「COLLABORATION」の 2 項目に見えないよう、項目内は詰めておく */
    line-height: 1.25;
  }

  /* 項目どうしの送り。1 行の項目はカンプどおり 36px ピッチになる
     （行ボックス 20px ＋ 16px）。

     2026-09-30 指摘「CONCEPT の下のマージンを COLLABORATION の下と
     同じにしたい」。
     もとは ul の line-height: 36px を項目ピッチとして使っていたが、
     これは 1 行の項目にしか効かない。折り返した SPECIAL COLLABORATION は
     インラインブロックの高さが 40px で 36px の strut を超えるため、
     はみ出したぶんがベースライン揃えで**上側**に積まれ、その上にある
     CONCEPT との間隔だけが 12px に潰れていた（他はすべて 20px）。
     送りを margin に出せば、項目が何行でも下のアキは一定になる */
  .sidenav__list li + li {
    margin-top: 16px;
  }
  .sidenav__list a {
    display: inline-block;
    line-height: 1.25;
    text-decoration: none;
    --hov-dur: var(--hov-out);
    transition: opacity var(--hov-dur) var(--ease-sine-out);
  }

  /* 左ナビは PC 専用（min-width: 1000px）なので (hover: hover) で囲む必要は
     薄いが、タッチのノート PC もあるので他と同じ書き方で揃える */
  .sidenav__list a:focus-visible,
  .sidenav__list a:active {
    --hov-dur: var(--hov-in);
    opacity: 0.6;
  }

  @media (hover: hover) and (pointer: fine) {
    .sidenav__list a:hover {
      --hov-dur: var(--hov-in);
      opacity: 0.6;
    }
  }
}

/* --- スプラッシュ -------------------------------------------------------
   0.3 秒おいて 1.4 秒かけて文字が浮かび、1 秒おいて 0.8 秒で画面ごと消える
   （全体で 3.5 秒）。表示中はスクロールを止める。
   参考にした mothersday 2026 は「1 秒 + 3 秒」だが、あちらは背景が写真で
   最初から絵が出ている。こちらは赤ベタなので、同じ間合いだと最初の 2 秒が
   ただの赤い画面になって不具合に見える。そのぶん詰めてある。
   出るのは 1 日 1 回だけで、判定は cookie（js/main.js）。
   初期状態が「赤で全面を覆う」なので、JS が動く環境（html.js）にだけ適用する。
   PSD は SP 750x1440 / PC 1280x800。絵柄は同じものなので、解像度の高い
   SP 側の書き出し 1 組だけを両方で使っている */

/* hidden 属性を付けてあるので、この CSS が当たらない環境では出ない
   （古いキャッシュの CSS を掴んだときに、素のままの巨大な文字が
   ページ頭に居座るのを防ぐ） */
.splash {
  display: none;
}

.js .splash {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--red);
  /* 消えるとき：1 秒おいてから 0.8 秒 */
  transition: opacity 0.8s var(--ease-sine-in) 1s;
}

.splash.is-hidden {
  opacity: 0;
}

/* 消え終わったら描画対象から外す（transition 後に JS が付ける） */
.splash.is-done {
  display: none;
}

.splash__inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* PSD 実測：上段の下端 742 → 下段の上端 836 */
  gap: calc(94 * var(--u));
  opacity: 0;
  /* 出るとき：0.3 秒おいてから 1.4 秒 */
  transition: opacity 1.4s var(--ease-sine-out) 0.3s;
}

.splash__inner.is-shown {
  opacity: 1;
}

.splash__top {
  width: calc(384 * var(--u));
  height: auto;
}

.splash__bottom {
  width: calc(531 * var(--u));
  height: auto;
}

/* スプラッシュ表示中はスクロールさせない（Lenis は JS 側で止める） */
html.is-splash,
html.is-splash body {
  overflow: hidden;
}

@media (min-width: 1000px) {
  /* PC カンプ実測（1280x800）。SP と違って等倍 */
  .splash__inner {
    gap: 63px;
  }

  .splash__top {
    width: 261px;
  }

  .splash__bottom {
    width: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .splash,
  .splash__inner {
    transition: none;
  }
}

/* --- スクロールインアニメーション ----------------------------------------
   sirok.jp/teasers/vie_facial_serum_2026 の [data-blur-in-txt] /
   [data-fade-in-img] を、GSAP を使わず IntersectionObserver + CSS transition で
   再現したもの。初期値（translate 0.8rem / blur 0.4rem）と duration・イージング・
   delay は参考実装の実測値に合わせている。
   位置合わせに transform: translateY(-50%) を使っているため、移動には
   transform ではなく独立した translate プロパティを使う。
   初期状態が opacity:0 なので、JS が動く環境（html.js）だけに適用する。 */

:root {
  --anim-shift: 12.8px; /* 参考実装の 0.8rem */
  --anim-blur: 6.4px; /* 参考実装の 0.4rem */

  /* ボタン類（.cta / .pill）は入場アニメとホバーを 1 本の transition に
     まとめる必要があるので、こちらの内容を変数に出して共有する */
  --anim-fade-in-img: opacity 0.5s linear 0.1s, translate 0.5s linear 0.1s,
    margin-top var(--acc-dur, 0.45s) var(--ease-acc);
}

.js [data-blur-in-txt],
.js [data-fade-in-img] {
  opacity: 0;
  translate: 0 var(--anim-shift);
}

.js [data-blur-in-txt] {
  filter: blur(var(--anim-blur));
  /* margin-top はアコーディオン開閉の追従用（.acc-shift と同じ設定） */
  transition: opacity 0.7s var(--ease-out1), translate 0.7s var(--ease-out1),
    filter 0.7s var(--ease-out1),
    margin-top var(--acc-dur, 0.45s) var(--ease-acc);
}

.js [data-fade-in-img] {
  transition: var(--anim-fade-in-img);
}

.js [data-blur-in-txt].is-inview,
.js [data-fade-in-img].is-inview {
  opacity: 1;
  filter: none;
  translate: none;
}

/* PC 左ナビだけは [data-fade-in-img] が使えない。position: fixed で最初から
   画面内に居るので、読み込み直後に IntersectionObserver が発火してしまい、
   スプラッシュの裏でフェードが終わって誰も見ない。
   スプラッシュが明ける瞬間（js が html から .is-splash を外すとき）に
   合わせて出す。2 度目以降の訪問はスプラッシュ自体が出ないので、
   .is-splash も付かず、ナビは最初から見えている */
@media (min-width: 1000px) {
  .js .sidenav {
    transition: opacity 0.5s linear 0.1s, translate 0.5s linear 0.1s;
  }

  .js.is-splash .sidenav {
    opacity: 0;
    translate: 0 var(--anim-shift);
  }
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .js .sidenav {
    transition: none;
  }
}

/* --- スプライトアニメーション ------------------------------------------- *
   コマ送りのイラスト（馬・リボン・人）。1枚のシート画像の表示位置を
   ずらしてパラパラ漫画にする。画面に入ったらコマ数ぶんの時間で1回だけ再生。

   シートは表示直前まで読み込まず、再生し終わったら最終コマの静止画に
   差し替えてシートを捨てる。展開後のビットマップは画素数×4バイトを
   占めるので（人のシートは 4455x5313 ＝ 90MB）、出しっぱなしにしない。

   JS が動かない環境と「動きを減らす」設定では .sprite は出てこないので、
   隣に置いた静止画（＝アニメの1コマ目）がそのまま見える。 */

.sprite {
  height: calc(var(--h) * var(--u));
  background-repeat: no-repeat;
  /* シート全体を「列数 × 表示サイズ」に縮める＝1コマが表示サイズちょうどになる */
  background-size: calc(var(--w) * var(--cols) * var(--u))
    calc(var(--h) * var(--rows) * var(--u));
  background-position: 0 0;
  /* シートを読み終わるまでは静止画を見せておく。
     出るときは他のイラスト（[data-fade-in-img]）と同じ速さでふわっと出し、
     出切ってからコマ送りを始める */
  opacity: 0;
  transition: opacity 0.5s linear 0.1s;
  /* --travel-x は「開始位置が最終位置から何 px 右か」。
     馬だけが移動する（映像の縁を右から左へ歩く）。
     .p が left で位置決めしているので、移動には transform を使う */
  transform: translateX(calc(var(--travel-x, 0) * var(--u)));
}

.sprite.is-shown {
  opacity: 1;
}

/* 再生し終わった最終コマ。シートから canvas に写し取ったもので、
   直前のコマと同一画素なので、フェードを挟まず即座に置き換える */
.sprite-end {
  height: calc(var(--h) * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では最初から最後まで静止画のまま */
  .sprite {
    display: none;
  }
  .sprite,
  .sprite-end {
    transition: none;
  }
}

/* --- ユーティリティ ------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  /* アニメーションを止めるだけだと初期状態のまま見えなくなるため明示的に戻す */
  .js [data-blur-in-txt],
  .js [data-fade-in-img] {
    opacity: 1;
    filter: none;
    translate: none;
  }
}