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

/* 横 overflow 抑止（clip 非対応は hidden が効く） */
html {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: system-ui, sans-serif;
  background: #fff;
  color: #222;
}

/* メニュー表示中：スクロールバーはそのまま。背面操作は JS + pointer-events で遮断 */
html.is-menu-open {
  overscroll-behavior: none;
}

body.is-menu-open {
  overscroll-behavior: none;
}

body.is-menu-open .lp__sp-column > :not(.lp__hero__menu):not(#lp-menu-panel) {
  pointer-events: none;
  user-select: none;
}

/* メニューパネル（9000→open時は上）より下。背面のクリック遮断用 */
.lp__menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 8600;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
}

.lp__menu-scrim.is-active {
  pointer-events: auto;
  visibility: visible;
}

/* PC 用サイド装飾は 451px 未満では非表示（ルールは @media 内） */
.lp__pc-margin-deco {
  display: none;
}

/* 列は全幅。LP は 375 カンプを scale で画面幅に合わせる（430 も外余白なし・レイアウト比率は 375 のまま） */
.lp__sp-column {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: clip;
  overflow-y: visible;
  container-type: inline-size;
  container-name: lp-column;
  --lp-hero-in-ease: cubic-bezier(0.33, 0.86, 0.35, 0.98);
  /* MENU ラベル（451+ は font-size のみ --lp-menu-scale と掛け合わせ） */
  --lp-menu-btn-font-size: 18px;
}

/* 論理幅 375px → min(2,100dvi/375) 倍で表示。視覚幅 min(750px,100dvi) */
.lp__sp-frame {
  position: relative;
  width: 375px;
  max-width: none;
  margin-inline: auto;
  overflow-y: visible;
  overflow-x: clip;
  container-type: inline-size;
  container-name: lp-sp;
  transform: scale(min(2, calc(100dvi / 375px)));
  transform-origin: top center;
}

/*
 * 画像ファイル名で検索 → 主に触るクラス（余白・サイズは各ブロックの margin / max-width など）
 * tonetune_top_bg.jpg … .lp__hero__bg
 * tonetune_top_catchphrase.png … .lp__hero__catchphrase
 * tonetune_top_rogo.svg … .lp__hero__logo
 * tonetune_concept_img.png … #intro（白は親 .lp__intro-concept-wrap の全面背景／IMG には付けない）
 * tonetune_2_img2.png … .lp__concept-hero（同上ラッパー）
 * tonetune_concept_img2.png … .lp__concept-img2
 * tonetune_line-up.png … .lp__line-up-title
 * tonetune_line-up_clear_top.png … #line-up .lp__lineup__top
 * tonetune_line-up_clear_item.png … #line-up .lp__lineup__visual（左 padding）/ 内 img
 * tonetune_line-up_clear_det.png … #line-up .lp__lineup__det
 * tonetune_line-up_moist_top.png … .lp__lineup--moist .lp__lineup__top
 * tonetune_line-up_moist_item.png … .lp__lineup--moist .lp__lineup__visual（右 margin）/ 内 img（幅は各ブロックで同じ数値）
 * tonetune_line-up_moist_det.png … .lp__lineup--moist .lp__lineup__det
 * tonetune_line-up_moist_usage.png … .lp__moist-usage
 * tonetune_fragrance_img.jpg … .lp__fragrance__photo
 * tonetune_fragrance_det.png … サイズは sp.css で「fragrance-detサイズ」検索 → --fragrance-det-width / max-width
 * tonetune_footer.jpg … .lp__footer__visual > img
 * tonetune_pc_bg.jpg … body 背景（@media min-width 451px）
 * tonetune_pc_rogo.svg（左ロゴ） / tonetune_pc_item_*.png（右ボトル）… .lp__pc-margin-deco（451px+）
 *
 * --- Line-up 周りのクラス（長い名前のメモ・検索にそのまま使える）---
 * lp__lineup … 黄／ピンクの Line-up セクション共通（スタイルは .lp__lineup--clear / --moist 側で直指定）。
 * lp__lineup--clear / lp__lineup--moist … クリア列（黄）／モイスト列（ピンク）。
 * lp__lineup__inner … セクション内の縦積みラッパー（padding / gap）。
 * lp__lineup__top … 上部の帯画像（clear_top / moist_top）。
 * lp__lineup__top--outer … 帯画像の外側マージン用。
 * クリア列 … lp__lineup__product / lp__lineup__product--outer / lp__lineup__product--inset-x
 * モイスト列 … lineup-product / lineup-product--margin / lineup-product--inset
 *   → スタイルは sp.css 内「Line-up ピンク（モイスト）専用」ブロックのみ編集（クリアと混ぜない）
 * HTML では data-lp="lineup-product" でも検索可。
 * lp__lineup__visual … ボトル画像の列。
 * lp__lineup__info … 商品名・価格・ボタン列。
 * lp__lineup__det … 下の説明ワイド画像（*_det.png）。
 * Line-up 内側の余白 … .lp__lineup--clear / --moist ごとに .lp__lineup__inner を別ルールで指定（カンマ結合なし）
 */

main.lp {
  margin: 0;
  padding: 0;
  display: block;
}

main.lp > section:first-child {
  margin-top: 0;
}

.lp {
  max-width: 100%;
  margin: 0 auto;
  --lp-yellow: #fff095;
  /* コンセプト画像の横余白 */
  --lp-inset-x: 7px;
  --lp-concept-logo-max-w: 93%;
}

/* ヒーロー入場：淡く・わずかなスケールのみ */
@keyframes lp-hero-bg-in {
  from {
    opacity: 0;
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lp-hero-logo-rise {
  from {
    opacity: 0;
    transform: translateY(-113px);
  }

  to {
    opacity: 1;
    transform: translateY(-125px);
  }
}

@keyframes lp-hero-menu-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lp-pc-deco-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* PC 左右ボトル：配置用 transform を保ったまま Y だけ滑らかに往復（変数は .lp__pc-margin-deco から継承） */
@keyframes lp-pc-bottle-float-clear {
  0%,
  100% {
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-clear-nudge-x),
        var(--pc-tune-clear-shift-y)
      );
  }

  50% {
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        calc(var(--pc-tune-bottle-pair-nudge-y) + (-20px))
      )
      translate(
        var(--pc-tune-clear-nudge-x),
        var(--pc-tune-clear-shift-y)
      );
  }
}

@keyframes lp-pc-bottle-float-moist {
  0%,
  100% {
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-moist-nudge-x),
        var(--pc-tune-moist-shift-y)
      );
  }

  50% {
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        calc(var(--pc-tune-bottle-pair-nudge-y) + (-20px))
      )
      translate(
        var(--pc-tune-moist-nudge-x),
        var(--pc-tune-moist-shift-y)
      );
  }
}

/* 背景と .lp__hero__inner を同じグリッドセルに重ね、内側の範囲＝背景画像の表示領域に一致させる */
.lp__hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 背景エリアの最小の高さ（375 幅カンプ想定・px のみで調整） */
  --lp-hero-bg-row-min: 600px;
  grid-template-rows: minmax(600px, auto);

  /* ロゴの上下（マイナス＝上へ） */
  --lp-hero-logo-y: -125px;
  margin-bottom: 0;
}

/*
 * intro + concept を .lp__intro-concept-wrap で包み、ここに全面白（IMG には background を付けない）
 * 各 section は transparent にしてラッパーの白が見える。重なりは z-index で intro を手前に。
 */
.lp__hero + .lp__intro-concept-wrap {
  margin-top: -94px;
  position: relative;
  z-index: 2;
  background-color: #fff;
}

.lp__intro-concept-wrap #intro.lp__block--white,
.lp__intro-concept-wrap #concept.lp__block--white {
  background: transparent;
}

.lp__intro-concept-wrap #intro {
  position: relative;
  z-index: 2;
}

/* tonetune_concept_img の下へ続く #concept を少し重ねる（マイナス大きいほどコンセプトが上へ） */
.lp__intro-concept-wrap #concept {
  margin-top: -65px;
  position: relative;
  z-index: 1;
}

.lp__hero__bg {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  /* cover は縦基準で横が切れやすい → 写真全体を収める */
  object-fit: contain;
  object-position: center top;
  transform-origin: center top;
  animation: lp-hero-bg-in 1.15s cubic-bezier(0.33, 0.86, 0.35, 0.98) both;
}

.lp__hero__inner {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-bottom: 0;
}

/* キャッチコピーエリアを縦に伸ばす（.lp__hero__stack） */
.lp__hero__stack {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

/* MENU を上右 → キャッチは左寄せ（.lp__hero__catchphrase）、ロゴは中央。上 padding を抑めて上へ */
.lp__hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  padding: 25px 27px 0;
  box-sizing: border-box;
}

/* MENU ボタン：列の子で fixed。SP は right:14px／451+ で列右に合わせて上書き */
.lp__hero__menu {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10000;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference;
  animation: lp-hero-menu-fade 0.7s cubic-bezier(0.33, 0.86, 0.35, 0.98) 0.08s both;
  transition: transform 0.22s ease, opacity 0.22s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lp__hero__menu-text {
  display: inline-block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: var(--lp-menu-btn-font-size);
  font-weight: 500;
  letter-spacing: 0.07em;
  white-space: nowrap;
  transition: letter-spacing 0.22s ease, opacity 0.22s ease;
}

/* メニューパネル：451+ で inset・余白は --lp-menu-scale（.lp__sp-column） */
.lp__menu-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lp__menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  margin: 0;
  transform: none;
  z-index: 9600;
}

.lp__menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(285px, 340px);
  margin-inline: auto;
  padding: 11px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.lp__menu-brand {
  align-self: center;
  width: 100%;
  margin: -7px 0 14px;
  color: rgba(0, 0, 0, 0.46);
  font-family: "Times New Roman", "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  text-align: center;
}

.lp__menu-link {
  position: relative;
  align-self: stretch;
  color: #1b1b1b;
  text-decoration: none;
  font-family: "Avenir Next", "Helvetica Neue", "Arial", "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.17em;
  text-align: center;
  width: auto;
  max-width: 100%;
  padding: 15px 32px 15px 20px;
  box-sizing: border-box;
  transition:
    color 0.3s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.32s cubic-bezier(0.33, 1, 0.68, 1),
    letter-spacing 0.32s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.25s ease;
}

/* Cormorant 等でハイフンが斜め／欠けに見えるのを避ける（ASCII のみサンセリフ） */
.lp__menu-link__hyphen {
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.lp__menu-link + .lp__menu-link {
  border-top: none;
}

.lp__menu-link::before {
  content: none;
}

.lp__menu-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1px;
  transition:
    background 0.3s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.32s cubic-bezier(0.33, 1, 0.68, 1),
    width 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.lp__menu-link:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.32);
  outline-offset: 5px;
  transform: translateX(-4px);
}

.lp__menu-sub {
  display: block;
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.3);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

/* v2：大きめ・Cormorant。背景は .lp__menu-panel の #fff を継承（HTML から lp__menu-panel--v2 を外すとベース版） */
.lp__menu-panel--v2 {
  padding: 41px;
}

.lp__menu-panel--v2 .lp__menu-nav {
  width: min(345px, 520px);
  gap: 12px;
  padding: 20px 0;
  align-items: center;
}

.lp__menu-panel--v2 .lp__menu-link {
  align-self: stretch;
  color: #161616;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.22;
  text-align: center;
  padding: 20px 40px 20px 28px;
}

.lp__menu-panel--v2 .lp__menu-link__hyphen {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.lp__menu-panel--v2 .lp__menu-link::after {
  width: 34px;
  height: 2px;
  background: rgba(0, 0, 0, 0.26);
}

.lp__menu-panel--v2 .lp__menu-brand {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 0.22em;
}

.lp__hero__catchphrase {
  align-self: flex-start;
  display: block;
  width: auto;
  max-width: 232px;
  height: auto;
  margin: 0;
  flex-shrink: 0;
  animation: none;
  transform: none;
}

.lp__hero .lp__hero__logo {
  position: relative;
  z-index: 1;
  align-self: center;
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  flex-shrink: 0;
  margin-top: 0;
  animation: lp-hero-logo-rise 0.92s cubic-bezier(0.33, 0.86, 0.35, 0.98) 0.52s both;
}

@media (prefers-reduced-motion: reduce) {
  .lp__hero__bg,
  .lp__hero__menu {
    animation: none !important;
  }

  .lp__hero .lp__hero__logo {
    animation: none !important;
    transform: translateY(-125px);
  }

  img.lp__pc-margin-deco__logo {
    animation: none !important;
  }

  /* ボトル：フロート停止。キーフレーム由来の transform が無くなるので配置を手動で戻す */
  img.lp__pc-margin-deco__bottle--clear {
    animation: none !important;
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-clear-nudge-x),
        var(--pc-tune-clear-shift-y)
      );
  }

  img.lp__pc-margin-deco__bottle--moist {
    animation: none !important;
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-moist-nudge-x),
        var(--pc-tune-moist-shift-y)
      );
  }
}

/*
 * ヒーロー以降：パーツごとにスクロール入場（.lp__reveal）
 * --lp-reveal-delay … セクション内の並びで JS が段階的に設定（ずらし入場）
 */
main.lp .lp__reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.95s cubic-bezier(0.33, 0.86, 0.35, 0.98),
    transform 0.95s cubic-bezier(0.33, 0.86, 0.35, 0.98);
}

main.lp .lp__reveal.lp__reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  main.lp .lp__reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* モイストボトル：reduce 時も最終位置を維持（上書き用） */
  main.lp .lp__lineup--moist .lp__lineup__visual.lp__reveal {
    transform: translate(-5px, -4px) !important;
  }

  /* 香り det（.lp-fragrance-det）：reduce 時も横ずれ（下の translateX と同じ px に） */
  main.lp .lp-fragrance-det.lp__reveal {
    transform: translateX(0px) !important;
  }

  /* フッター画像上テキスト：reduce 時も .lp__reveal-visible と同じ translate に（上と数字を揃える） */
  main.lp .lp__footer__text.lp__reveal,
  main.lp .lp__footer__text.lp__reveal.lp__reveal-visible {
    transform: translate(0px, 0px) !important;
  }

}

.lp__block img {
  display: block;
  width: 100%;
  height: auto;
}

.lp__block {
  overflow: hidden;
}

.lp__block--white {
  background: #fff;
  box-sizing: border-box;
  margin-top: 0;
}

/* .lp__block img より詳細度高く、親の padding 内で 100% 幅に収める */
.lp__block.lp__block--white > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* tonetune_line-up_moist_usage.png のみ追加の左右余白 */
.lp__block.lp__block--white > img.lp__moist-usage {
  width: 88%;
  max-width: 100%;
  margin: 12px auto 25px ;

}

.lp__block--inset-x-10 {
  /* 左右の余白（.lp__concept-hero は下記で中央・最大幅を指定） */
  padding-left: 7px;
  padding-right: 7px;
  /* 上: .lp__concept-hero の margin-top: -36px が .lp__block の overflow:hidden で切れないよう確保（少し余白多め） */
  padding-top: 40px;
}

/* コンセプト：ビジュアル → ロゴ（詰める）→ コピー（中央・行間広め）→ Line-up（白背景は .lp__intro-concept-wrap） */
.lp__concept-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* tonetune_2_img2.png … インセット内いっぱい・中央。上はマイナスで前セクションへ寄せる */
.lp__block--inset-x-10 .lp__concept-hero {
  display: block;
  width: 100%;
  max-width: min(100%, 340px);
  height: auto;
  margin: -36px auto 0;
  position: relative;
  z-index: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 上端: PNG 縁の馴染ませ（白は .lp__intro-concept-wrap） */
.lp__block--inset-x-10 .lp__concept-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #fff 0%,
    rgba(255, 255, 255, 0.75) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}

.lp__block--inset-x-10 .lp__concept-img2 {
  display: block;
  width: auto;
  max-width: 93%;
  height: auto;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  /* 上の画像との重なりを避けるため少し下げる（境は必要なら微調整） */
  margin-top: 10px;
}

.lp__concept-copy {
  width: 100%;
  max-width: 24em;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #3a3a3a;
}

.lp__concept-copy p {
  margin: 0;
  line-height: 1.45;
}

.lp__concept-copy p + p {
  margin-top: 16px;
}

/* tonetune_line-up.png（Line-up 見出し・余白は margin-top/bottom など） */
.lp__block.lp__block--white.lp__block--inset-x-10 .lp__line-up-title {
  display: block;
  width: auto;
  max-width: min(20%, 140px);
  height: auto;
  margin-top: 39px;
  margin-bottom: 21px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.lp__block--yellow {
  background: #fff095;
}

.lp__block--pink {
  background: #f6c6c5;
}

.lp__lineup img + img {
  margin-top: 0;
}

.lp__lineup__top--outer {
  display: block;
  margin-inline: auto;
  margin-top: 5px;
  margin-bottom: 9px;
}

/*
 * 商品ブロック（ボトル＋文＋ボタン）— クリアとモイストでクラス名を分ける
 * data-lp="lineup-product" で検索可
 */
/* クリア：商品1段の外周 */
.lp__lineup__product--outer {
  margin-inline: auto;
  margin-bottom: 9px;
  width: 100%;
}

/* Line-up 黄（clear） */
.lp__lineup--clear .lp__lineup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 21px 8px;
  max-width: 100%;
}

.lp__lineup--clear .lp__lineup__top {
  display: block;
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
  height: auto;
}

.lp__lineup--clear .lp__lineup__det {
  width: 100%;
  align-self: stretch;
  margin-top: -10px;
}

.lp__lineup--clear .lp__lineup__product {
  display: grid;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: auto;
  max-width: none;
  gap: 35px;
  grid-template-columns: auto minmax(0, 1fr);
}

.lp__lineup--clear .lp__lineup__visual {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: center;
  width: fit-content;
  justify-self: center;
  margin-left: 16px;
  margin-bottom: 0;
  box-sizing: border-box;
}

.lp__lineup--clear .lp__lineup__visual img {
  width: 72px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.lp__lineup--clear .lp__lineup__info {
  min-width: 0;
  box-sizing: border-box;
  width: min(100%, 320px);
  max-width: 320px;
  justify-self: start;
  align-self: start;
  padding: 0;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: none;
}

.lp__lineup--clear .lp__lineup__info > * {
  max-width: 100%;
  box-sizing: border-box;
}

.lp__lineup--clear .lp__lineup__name {
  margin: 0;
  margin-top: 9.5px;
  margin-left: 3px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.7;
  color: #1a1a1a;
}

.lp__lineup--clear .lp__lineup__price {
  margin: 5px 0 0;
  margin-left: 3px;
  font-size: 11.3px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: #333;
  white-space: normal;
  max-width: 100%;
}

.lp__lineup--clear .lp__lineup__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  transform: none;
  margin-top: 19px;
}

.lp__lineup--clear .lp__lineup__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 20px;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  color: #1a1a1a;
  /* 先頭を Bold 名のフォントにしない（SP で太く寄りやすい）。350 は環境によって 400 に丸められるため 400 で統一 */
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.lp__lineup--clear .lp__lineup__btn:focus-visible {
  outline: 2px solid #6b4f9a;
  outline-offset: 2px;
}

/* =============================================================================
 * Line-up ピンク（モイスト）専用
 * -----------------------------------------------------------------------------
 * ・このファイルでは「ピンクの Line-up」を直すときは基本ここだけ触る（クリア列は上の .lp__lineup--clear）。
 * ・CSS カスタムプロパティ（var）はこのブロックでは使わない。数値はそのまま書く。
 * ・セレクタをカンマで複数まとめない（クリアと moist を1つのルールにしない）。
 * HTML: index.html の section.lp__lineup--moist … data-lp-variant="moist"
 * ============================================================================= */

/* ピンク背景（section 全体）を上へ。マイナスを大きくするほど黄に食い込む */
.lp__lineup--moist {
  margin-top: -10px;
}

/* 商品1段ラッパーの下あき（下の det 画像との間隔） */
.lp__lineup--moist .lineup-product--margin {
  margin-inline: auto;
  margin-bottom: 9px;
  width: 100%;
}

/* 商品1段を左右 48px インデントして幅を狭く見せる（数値を変えるなら 48 と 96 をセットで） */
.lp__lineup--moist .lineup-product--inset {
  width: calc(100% - 96px) !important;
  max-width: calc(100% - 96px) !important;
  margin-left: 48px !important;
  margin-right: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* セクション内の縦並び・内側余白（下だけ少し詰めてピンク背景の下端を削る） */
.lp__lineup--moist .lp__lineup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 21px 8px 16px;
  max-width: 100%;
}

/* 上帯画像 tonetune_line-up_moist_top.png（共通 .lp__lineup__top--outer の margin-top:5px を上書き） */
.lp__lineup--moist .lp__lineup__top {
  display: block;
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
  margin-top: -5px;
  height: auto;
}

/* 下ワイド画像 tonetune_line-up_moist_det.png
 * stretch+幅100%だと横に引き伸ばされてたるんで見えることがある→中央寄せ・幅は比率どおり（最大100%）
 * .lp__reveal の transform とぶつけないよう、横の微調整は left のみ */
.lp__lineup--moist .lp__lineup__det {
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 97%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  position: relative;
  left: -5px;
}

/* 文言列＋ボトル列のグリッド（左が info / 右が visual） */
.lp__lineup--moist .lineup-product {
  display: grid;
  align-items: start;
  justify-content: center;
  align-self: stretch;
  width: auto;
  max-width: none;
  gap: 35px;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ボトル列 tonetune_line-up_moist_item.png
 * 注意: この div に .lp__reveal が付くため、下の「main.lp … lp__reveal」で transform を合成しないと左への translate が効かない */
.lp__lineup--moist .lp__lineup__visual {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: start;
  width: fit-content;
  justify-self: center;
  margin-right: 16px;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* 入場アニメの translateY(12px 分) と、ボトル位置（左・少し上）を同時指定（詳細度で .lp__reveal-visible に勝つ） */
main.lp .lp__lineup--moist .lp__lineup__visual.lp__reveal {
  transform: translate(-5px, 8px);
}

main.lp .lp__lineup--moist .lp__lineup__visual.lp__reveal.lp__reveal-visible {
  transform: translate(-5px, 3.5px);
}

.lp__lineup--moist .lp__lineup__visual img {
  width: 72px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 商品名・価格・ボタン列 */
.lp__lineup--moist .lp__lineup__info {
  min-width: 0;
  box-sizing: border-box;
  width: min(100%, 320px);
  max-width: 320px;
  justify-self: start;
  align-self: start;
  margin-left: 8px;
  padding: 0;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: none;
}

.lp__lineup--moist .lp__lineup__info > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 商品名 3 行 */
.lp__lineup--moist .lp__lineup__name {
  margin: 0;
  margin-top: 12.5px;
  margin-left: 3px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.7;
  color: #1a1a1a;
}

/* 価格行 */
.lp__lineup--moist .lp__lineup__price {
  margin: 8px 0 0;
  margin-left: 3px;
  font-size: 11.3px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: #333;
  white-space: normal;
  max-width: 100%;
}

/* OFFICIAL / Rakuten / Qoo10 の縦並び */
.lp__lineup--moist .lp__lineup__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  transform: none;
  margin-top: 18px;
}

.lp__lineup--moist .lp__lineup__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 20px;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  color: #1a1a1a;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.lp__lineup--moist .lp__lineup__btn:focus-visible {
  outline: 2px solid #6b4f9a;
  outline-offset: 2px;
}

/* ========== Line-up モイスト専用ここまで ========== */

/* クリア：同上（モイストとセレクタ分離） */
.lp__lineup__product--inset-x {
  width: calc(100% - 96px) !important;
  max-width: calc(100% - 96px) !important;
  margin-left: 48px !important;
  margin-right: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== 香り（写真奥 → 黄が重なる → det 画像は中央・最前面）===== */
/*
 * tonetune_fragrance_img.png … .lp__fragrance__photo（z-index:1）
 * 黄パネル … .lp__fragrance__yellow（z-index:2）
 * tonetune_fragrance_det.png … .lp-fragrance-det（z-index:3・中央）
 * tonetune_top_bar.png … .lp__top-bar
 *
 * 黄の食い込み → .lp__fragrance__yellow の margin-top
 *
 * tonetune_fragrance_det.png → 下の「tonetune_fragrance_det」ブロック（.lp-fragrance-det）のみ編集
 */

.lp__block.lp__fragrance {
  overflow: visible;
  position: relative;
  z-index: 0;
}

.lp__fragrance__inner {
  position: relative;
  overflow: visible;
  /* 写真を下げた分は margin だと透けるので、上の白とつなげるため padding＋白背景（増やすと写真がさらに下がる） */
  padding-top: 20px;
  background-color: #fff;
}

.lp__fragrance__photo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.lp__fragrance__yellow {
  position: relative;
  z-index: 2;
  margin-top: 0;
  background: #fff095;
  padding-top: 38px;
  padding-bottom: 15px;
}

.lp__fragrance__yellow .lp__top-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 180px;
  margin-inline: auto;
  /* TOP 文言（.lp__top-bar-text）を少し上へ … 大きいほど下 */
  margin-top:242px;
  padding: 0;
  text-decoration: none;
  outline-offset: 4px;
  background: transparent;
  box-shadow: none;
}

.lp__fragrance__yellow .lp__top-bar-text {
  display: block;
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lp__fragrance__yellow .lp__top-bar-link:hover .lp__top-bar-text,
  .lp__fragrance__yellow .lp__top-bar-link:focus-visible .lp__top-bar-text {
    color: #5c5c5c;
    text-shadow: none;
    transform: scale(1.05);
  }
}

/*
 * ■■■ tonetune_fragrance_det.png（香りブロックの果物画像）■■■
 *
 * 【まずこれ】sp.css 全体検索:  fragrance-detサイズ
 *   → すぐ下の .lp-fragrance-det の「①サイズ」の2行だけ変えれば大きさが変わる。
 *
 * Line-up の帯画像（lp__lineup__top）とは別物。混同しない。
 */

.lp-fragrance-det {
  /* ①サイズ … 次の2行の数字だけ変える（あとは触らなくてよい） */
  --fragrance-det-width: 50%;
  --fragrance-det-max-width:322px;
  width: var(--fragrance-det-width);
  max-width: var(--fragrance-det-max-width);
  height: auto;

  /* ②縦の位置 … 大きいほど下へ */
  top: 173px;

  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 3;
  pointer-events: none;
}

/* .lp__reveal が transform を上書きするので入場と横位置をここで合成 */
main.lp .lp-fragrance-det.lp__reveal {
  transform: translateY(12px) translateX(0px);
}

main.lp .lp-fragrance-det.lp__reveal.lp__reveal-visible {
  transform: translateX(0px);
}

.lp__foreground {
  position: relative;
  z-index: 0;
}

.lp__header {
  z-index: 1;
}

/* ----- フッター（黄 TOP バー + 画像上テキスト）----- */
.lp__block.lp__footer {
  overflow: visible;
}

.lp__footer__topbar {
  margin: 0;
  background: #fff095;
  color: #fff;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.28em;
  padding: 12px 12px;
  font-size: 16px;
  line-height: 1.2;
}

/* tonetune_footer.jpg：上の香りブロック黄背景と重ならないよう transform で上へ引っ張らない（共通 .lp__reveal のみ） */
.lp__footer__visual {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.lp__footer__visual > img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * フッター画像上の文字（細めゴシック・字間は各リンク／行で指定）
 *
 * ■■ 位置（検索: lp__footer__text-position）■■
 * .lp__sp-frame が container（lp-sp）… left / bottom / max-width は cqw＝列幅に対する％。
 * 375px 幅と同じ見え方: left 26px→6.933cqw、bottom 28px→7.467cqw、幅上限 96%→96cqw。
 * ② 表示後の数 px ずらし … .lp__reveal-visible の translate（画面幅より cqw の方が合わせやすい場合あり）
 */
.lp__footer__text {
  position: absolute;
  left: 6.933cqw;
  bottom: 7.467cqw;
  max-width: min(96cqw, 560px);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-size: 8px;
  line-height: 1.65;
  font-weight: 200;
  letter-spacing: 0.15em;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", YuGothic, Meiryo, sans-serif;
}

/* .lp__reveal と transform を合成（検索: lp__footer__text-reveal） */
main.lp .lp__footer__text.lp__reveal {
  transform: translate(0px, 12px);
}

main.lp .lp__footer__text.lp__reveal.lp__reveal-visible {
  /* 表示後の位置＝ここの translate(横px, 縦px) だけ編集（入場前は上の 0,12px） */
  transform: translate(0px, 0px);
}

.lp__footer__line {
  margin: 0 0 0.5em;
}

.lp__footer__company-link,
.lp__footer__tel-link {
  color: #fff;
  font-weight: 200;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    opacity 0.22s ease,
    border-color 0.22s ease,
    text-shadow 0.22s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.lp__footer__company-link {
  letter-spacing: 0.04em;
}

.lp__footer__tel-link {
  letter-spacing: 0.1em;
}

.lp__footer__company-link:visited,
.lp__footer__tel-link:visited {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .lp__footer__company-link:hover,
  .lp__footer__tel-link:hover {
    opacity: 0.92;
    border-bottom-color: rgba(255, 255, 255, 0.55);
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(255, 255, 255, 0.35);
  }
}

.lp__footer__company-link:focus-visible,
.lp__footer__tel-link:focus-visible {
  opacity: 0.95;
  border-bottom-color: rgba(255, 255, 255, 0.65);
  outline: none;
}

/* index の --title / --body / --tel は互換用。見た目は親と同じ（電話だけ数字幅を固定） */
.lp__footer__line--tel {
  font-variant-numeric: tabular-nums;
  /* © 側の調整で電話行の位置が変わらないよう、下マージンは一般行と同じ値を明示 */
  margin-bottom: 0.5em;
  letter-spacing: 0.15em;
}

/* © だけ上へ。margin-top は広めのまま（電話行まわりのレイアウトを固定）→ translateY で見た目だけ移動 */
.lp__footer__copy {
  margin: 3.5em 0 0;
  font-size: 11px;
  transform: translateY(-1em);
  /* 親の letter-spacing: 0.15em より詰めて一行の横幅を短く */
  letter-spacing: 0.07em;
}

/* SP（451px 未満）：MENU を 1px 大きく／フッターリンクの下線 */
@media screen and (max-width: 450px) {
  .lp__sp-column {
    --lp-menu-btn-font-size: 19px;
  }

  .lp__footer__company-link,
  .lp__footer__tel-link {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.72);
    text-underline-offset: 0.28em;
    text-decoration-thickness: 1px;
    border-bottom: none;
    padding: 0.2em 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
  }

  .lp__footer__company-link:active,
  .lp__footer__tel-link:active {
    opacity: 0.88;
  }

  .lp__footer__company-link:focus-visible,
  .lp__footer__tel-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-bottom: none;
  }
}

/* 451px 以上: body 背景・左右装飾。LP scale は .lp__sp-frame。MENU／パネルは列幅＋--lp-menu-scale */
@media screen and (min-width: 451px) {
  body {
    background-color: #fff;
    background-image: url("../img/tonetune_pc_bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
  }

  .lp__sp-column {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow-x: clip;
    --lp-col-visual: min(750px, 100dvi);
    /* fixed 系は .lp__sp-frame の scale に乗らない。横上限: v2 相当幅 345 + padding 41×2 → 427px */
    --lp-menu-scale: min(2, 100dvi / 375px, min(770px, 100dvi) / 427px);
  }

  .lp__sp-frame {
    z-index: 1;
  }

  .lp__hero__menu {
    right: calc(50dvi - var(--lp-col-visual) / 2 + 14px);
    top: 20px;
  }

  .lp__menu-panel,
  .lp__menu-panel.is-open {
    inset: 0 max(0px, calc((100dvi - var(--lp-col-visual)) / 2 - 10px));
    width: auto;
    max-width: none;
  }

  .lp__menu-panel {
    padding: calc(30px * var(--lp-menu-scale));
    max-height: 100dvh;
    max-height: 100dvb;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }

  .lp__menu-panel--v2 {
    padding: calc(41px * var(--lp-menu-scale));
  }

  .lp__menu-nav {
    gap: calc(8px * var(--lp-menu-scale));
    width: min(calc(285px * var(--lp-menu-scale)), calc(340px * var(--lp-menu-scale)));
    padding: calc(11px * var(--lp-menu-scale)) 0;
  }

  .lp__menu-panel--v2 .lp__menu-nav {
    width: min(calc(345px * var(--lp-menu-scale)), calc(520px * var(--lp-menu-scale)));
    gap: calc(12px * var(--lp-menu-scale));
    padding: calc(20px * var(--lp-menu-scale)) 0;
  }

  .lp__menu-brand {
    margin: calc(-7px * var(--lp-menu-scale)) 0 calc(14px * var(--lp-menu-scale));
    font-size: calc(19px * var(--lp-menu-scale));
  }

  .lp__menu-panel--v2 .lp__menu-brand {
    font-size: calc(20px * var(--lp-menu-scale));
  }

  .lp__menu-link {
    font-size: calc(17px * var(--lp-menu-scale));
    padding: calc(15px * var(--lp-menu-scale)) calc(32px * var(--lp-menu-scale))
      calc(15px * var(--lp-menu-scale)) calc(20px * var(--lp-menu-scale));
  }

  .lp__menu-panel--v2 .lp__menu-link {
    font-size: calc(23px * var(--lp-menu-scale));
    padding: calc(20px * var(--lp-menu-scale)) calc(40px * var(--lp-menu-scale))
      calc(20px * var(--lp-menu-scale)) calc(28px * var(--lp-menu-scale));
  }

  .lp__menu-link::after {
    width: calc(21px * var(--lp-menu-scale));
    height: calc(2px * var(--lp-menu-scale));
  }

  .lp__menu-panel--v2 .lp__menu-link::after {
    width: calc(34px * var(--lp-menu-scale));
  }

  .lp__menu-sub {
    margin-top: calc(5px * var(--lp-menu-scale));
    font-size: calc(8px * var(--lp-menu-scale));
  }

  .lp__menu-link:focus-visible {
    outline-offset: calc(5px * var(--lp-menu-scale));
    transform: translateX(calc(-4px * var(--lp-menu-scale)));
  }

  html.is-menu-open,
  body.is-menu-open {
    overflow-y: hidden;
    overflow-x: clip;
  }

  /* PC 左右装飾（451px+）。中央列の外側ガターをスロット化し、その中で中央寄せ。 */
  .lp__pc-margin-deco {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    --pc-col-visual-w: var(--lp-col-visual);
    --pc-left-gutter-w: max(0px, calc((100dvi - var(--pc-col-visual-w)) / 2));
    --pc-col-right: calc((100dvi + var(--pc-col-visual-w)) / 2);

    --pc-deco-ref-w: 1500px;
    --pc-deco-scale-min: 0.5;
    --pc-deco-scale-max: 1.35;
    --pc-deco-scale: clamp(
      var(--pc-deco-scale-min),
      calc(100dvi / var(--pc-deco-ref-w)),
      var(--pc-deco-scale-max)
    );

    /* 調整: logo（横は nudge のみ）/ pair-nudge / clear・moist の縦ずれ / sep・clear_right_extra＝ボトル間 gap */
    --pc-tune-logo-nudge-x: 1.04rem;
    --pc-tune-logo-w: 360px;
    --pc-tune-logo-w-min: 96px;
    --pc-tune-logo-w-max: 400px;

    --pc-tune-bottle-w: 400px;
    --pc-tune-bottle-w-min: 112px;
    --pc-tune-bottle-w-max: 520px;
    --pc-tune-bottle-h: 380px;
    --pc-tune-bottle-h-min: 106px;
    --pc-tune-bottle-h-max: 500px;
    --pc-tune-bottle-sep: 1px;
    --pc-tune-bottle-pair-nudge-x: 0px;
    --pc-tune-bottle-pair-nudge-y: 0px;

    --pc-tune-moist-nudge-x: 0px;
    --pc-tune-moist-shift-y: calc(-30% + 12px);

    --pc-tune-clear-nudge-x: 0px;
    --pc-tune-clear-shift-y: calc(-60% - 10px);
    --pc-tune-clear-right-extra: 0px;

    --pc-logo-w: min(
      var(--pc-tune-logo-w-max),
      max(
        var(--pc-tune-logo-w-min),
        calc(var(--pc-tune-logo-w) * var(--pc-deco-scale))
      )
    );
    --pc-bottle-w: min(
      var(--pc-tune-bottle-w-max),
      max(
        var(--pc-tune-bottle-w-min),
        calc(var(--pc-tune-bottle-w) * var(--pc-deco-scale))
      )
    );
    --pc-bottle-h: min(
      var(--pc-tune-bottle-h-max),
      max(
        var(--pc-tune-bottle-h-min),
        calc(var(--pc-tune-bottle-h) * var(--pc-deco-scale))
      )
    );
    --pc-bottle-between: max(
      1px,
      calc(var(--pc-tune-bottle-sep) * var(--pc-deco-scale))
    );
    --pc-clear-right-offset: calc(
      var(--pc-tune-clear-right-extra) * var(--pc-deco-scale)
    );
    /*
     * 右ボトル：img の translateY はレイアウトに効かず見た目だけ上にずれる。
     * 内側ラッパーでまとめて下げ、帯の上下中央に近づける（二枚の相対位置は各 img の transform のまま）。
     */
    --pc-bottles-group-balance-y: calc(var(--pc-bottle-h) * 0.4545);
  }

  /* 左ガター：中央列左端〜画面左端の帯の中央にロゴ */
  .lp__pc-margin-deco__left {
    position: fixed;
    z-index: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--pc-left-gutter-w);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    pointer-events: none;
  }

  .lp__pc-margin-deco__left .lp__pc-margin-deco__logo {
    pointer-events: auto;
  }

  /* 右ガター：内側ブロックを帯の中央に（grid place-content）。上下の見た目調整は --pc-bottles-group-balance-y */
  .lp__pc-margin-deco__bottles {
    position: fixed;
    z-index: 0;
    left: var(--pc-col-right);
    right: 0;
    top: 0;
    bottom: 0;
    display: grid;
    place-content: center;
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    pointer-events: none;
  }

  .lp__pc-margin-deco__bottles-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: max(1px, calc(var(--pc-bottle-between) + var(--pc-clear-right-offset)));
    transform: translateY(var(--pc-bottles-group-balance-y));
    pointer-events: none;
  }

  .lp__pc-margin-deco__bottles-inner .lp__pc-margin-deco__bottle {
    pointer-events: auto;
  }

  /* img. で末尾の img{width:100%} より優先 */
  img.lp__pc-margin-deco__logo {
    position: relative;
    flex-shrink: 0;
    width: min(var(--pc-logo-w), 100%);
    max-width: min(var(--pc-logo-w), 100%);
    height: auto;
    margin: 0;
    object-fit: contain;
    transform: translateX(var(--pc-tune-logo-nudge-x));
    animation: lp-pc-deco-fade 1s var(--lp-hero-in-ease) 0.55s both;
  }

  img.lp__pc-margin-deco__bottle {
    position: relative;
    flex: 0 0 auto;
    width: var(--pc-bottle-w);
    height: var(--pc-bottle-h);
    max-width: none;
    margin: 0;
    object-fit: contain;
    object-position: center center;
  }

  /*
   * ボトル：リロード直後〜フロート delay 中も位置が崩れないよう
   * ① 静止時 transform を明示 ② フロートは backwards で遅延中も 0% を適用
   */
  img.lp__pc-margin-deco__bottle--clear {
    object-position: right center;
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-clear-nudge-x),
        var(--pc-tune-clear-shift-y)
      );
    animation:
      lp-pc-deco-fade 1s var(--lp-hero-in-ease) 0.68s both,
      lp-pc-bottle-float-clear 5.6s ease-in-out 1s infinite normal backwards;
  }

  img.lp__pc-margin-deco__bottle--moist {
    object-position: left center;
    transform: translate(
        var(--pc-tune-bottle-pair-nudge-x),
        var(--pc-tune-bottle-pair-nudge-y)
      )
      translate(
        var(--pc-tune-moist-nudge-x),
        var(--pc-tune-moist-shift-y)
      );
    animation:
      lp-pc-deco-fade 1s var(--lp-hero-in-ease) 0.8s both,
      lp-pc-bottle-float-moist 5.6s ease-in-out 3.8s infinite normal backwards;
  }

  .lp__hero__menu-text {
    font-size: calc(var(--lp-menu-btn-font-size) * var(--lp-menu-scale));
  }

  .lp__lineup--clear .lp__lineup__btn {
    transition:
      background-color 0.22s ease,
      color 0.22s ease,
      border-color 0.22s ease,
      transform 0.22s ease;
  }

  /* Line-up モイスト：451px 以上でボタンにホバーアニメ（下の @media (hover) と対）— var() なし */
  .lp__lineup--moist .lp__lineup__btn {
    transition:
      background-color 0.22s ease,
      color 0.22s ease,
      border-color 0.22s ease,
      transform 0.22s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .lp__hero__menu:hover {
      transform: scale(1.04);
    }

    .lp__hero__menu:hover .lp__hero__menu-text {
      letter-spacing: 0.11em;
      opacity: 0.88;
    }

    .lp__menu-link:hover {
      color: #4a4a4a;
      transform: translateX(calc(-5px * var(--lp-menu-scale)));
      letter-spacing: 0.2em;
    }

    .lp__menu-panel--v2 .lp__menu-link:hover {
      color: #2c2c2c;
      transform: translateX(calc(-6px * var(--lp-menu-scale)));
      letter-spacing: 0.24em;
    }

    .lp__menu-link:hover::after {
      background: rgba(0, 0, 0, 0.45);
      transform: translateY(-50%) scaleX(1.18);
      width: calc(23px * var(--lp-menu-scale));
    }

    .lp__menu-panel--v2 .lp__menu-link:hover::after {
      width: calc(40px * var(--lp-menu-scale));
    }

    .lp__lineup--clear .lp__lineup__btn:hover {
      background: #1a1a1a;
      color: #fff;
      border-color: #1a1a1a;
      transform: translateY(-1px);
    }

    /* Line-up モイスト：ボタンホバー */
    .lp__lineup--moist .lp__lineup__btn:hover {
      background: #1a1a1a;
      color: #fff;
      border-color: #1a1a1a;
      transform: translateY(-1px);
    }
  }
}

/*
 * 超狭幅（max-width: 360px）— scale はベースの 100dvi/375 に任せる。
 */
@media screen and (max-width: 360px) {
  .lp__sp-column {
    width: 100%;
    overflow-x: hidden;
  }

  /* 縮小後も 1 行 nowrap が窮屈な場合のみ */
  .lp__lineup--clear .lp__lineup__price {
    white-space: normal;
  }

  /* Line-up モイスト：全体縮小時の価格行の折り返し */
  .lp__lineup--moist .lp__lineup__price {
    white-space: normal;
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
}