:root {
  --lp-content-width: 750px;
  --lp-font-sans: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --lp-font-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Times New Roman", "Times", serif;

  /*
   * ホログラム調ホバー用のパステル。
   * フッター背景（top-link-bg）と同じ淡さ（彩度0.10〜0.18・明度0.90前後）に揃えている。
   * アルファ値を後から足せるようRGB成分だけを持たせる。
   */
  --lp-holo-mint: 207, 232, 226;
  --lp-holo-aqua: 194, 223, 236;
  --lp-holo-blue: 200, 212, 237;
  --lp-holo-lavender: 213, 205, 236;
  --lp-holo-pink: 228, 208, 230;
  --lp-holo-rose: 240, 214, 221;
  --lp-holo-cream: 246, 239, 218;

  /*
   * 虹色のベース。background-size: 300% で使う前提で、
   * 左2/3を透明・右1/3に虹色を寄せている。
   * background-position を 0%→100% に動かすと、色が右から斜めに流れ込む。
   * 各色は不透明度0.7前後に抑え、両端は透明にしてフェードアウトさせている。
   */
  --lp-holo-veil: linear-gradient(
    108deg,
    rgba(var(--lp-holo-mint), 0) 0%,
    rgba(var(--lp-holo-mint), 0) 54%,
    rgba(var(--lp-holo-mint), 0.7) 62%,
    rgba(var(--lp-holo-aqua), 1) 70%,
    rgba(var(--lp-holo-blue), 1) 78%,
    rgba(var(--lp-holo-lavender), 1) 85%,
    rgba(var(--lp-holo-pink), 0.95) 91%,
    rgba(var(--lp-holo-rose), 0.7) 96%,
    rgba(var(--lp-holo-cream), 0) 100%
  );

  /*
   * 斜めに走る光の帯。明るい主帯のうしろに細い副帯を添えて、
   * 表面を光がかすめたときの二段の反射を作っている。
   * background-position を 0%→100% に動かすと右から左へ抜けていく。
   */
  --lp-holo-shine: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.95) 49%,
    rgba(255, 255, 255, 0.45) 53%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.28) 63%,
    rgba(255, 255, 255, 0) 70%
  );

  /*
   * MENU項目とTOPリンクのホバーで、文字色として流す虹色。
   * 色相の並びは --lp-holo-* と同じ系統（ミント→ブルー→ラベンダー→モーヴ）だが、
   * ギラつかせないため彩度を15%前後まで落とし、色数も4つに絞っている。
   * 明度は白地で文字が読める範囲（コントラスト比3:1前後）に留めた。
   * 最後を先頭と同色にしてあるので、タイル状に繰り返してもつなぎ目は出ない。
   */
  --lp-holo-text: linear-gradient(
    100deg,
    #66a498 0%,
    #7592b4 27%,
    #9686b0 54%,
    #ad8b9e 78%,
    #66a498 100%
  );

  /* 商品表面を通過する細い光筋。screen で乗せるので白飛びしない強さに抑えている */
  --lp-holo-shine-surface: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.2) 48%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 52%,
    rgba(255, 255, 255, 0) 55%
  );
}

/* ボタンのホバー用。待機を挟まず即座に走り出す */
@keyframes lp-holo-shine {
  0% {
    background-position: 10% 0;
  }

  72%,
  100% {
    background-position: 100% 0;
  }
}

/*
 * MENU項目とTOPリンクの文字を流れる虹色。
 * alternate で往復させるので、色の並びが途切れずに左右へ流れ続ける。
 */
@keyframes lp-holo-text-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/*
 * 商品表面用。1周期のうち前半だけで通過し、残りは待機する。
 * duration 4.5s に対して光筋が見えるのは0.8秒ほどなので、
 * 4〜5秒に1回すっと光が走る間隔になる。
 */
@keyframes lp-shine-sweep {
  0% {
    background-position: 0 0;
  }

  34%,
  100% {
    background-position: 100% 0;
  }
}

html {
  font-size: 4.266666666666667cqi; /* 750pxを100vwとした時の基準値。SPコンテナクエリの基準 */
  /* 常にスクロールバー分の余白を確保し、MENU開閉でビューポート幅が変わらないようにする */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

/* 視覚的には隠すが、スクリーンリーダーには読み上げさせる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * MENUを開いている間だけ、画面全体に敷く半透明グレーのオーバーレイ。
 * ページ本体の色味を一段落ち着かせるためのもので、動きはフェードのみ。
 *
 * 重なり順は下から
 *   ページ本体 .lp（z-index: auto / 内部は最大2）
 *   → このグレーオーバーレイ（90）
 *   → MENU .lp__menu（100）内の 白パネル（1）→ メニュー項目
 * となる。90〜99は他で使っていないので、本体とMENUの間に確実に入る。
 */
body::before {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* 色は .is-menu-open のときだけ載せる。常時 rgba を持つと、
     opacity: 0 でも合成の都合で背景がくすんで見えることがある */
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  content: '';
}

body.is-menu-open::before {
  background-color: rgba(120, 120, 120, 0.4);
  opacity: 1;
  visibility: visible;
}

/*
 * 読み込み中のローディング画面。
 * z-index は MENU（100）やグレーオーバーレイ（90）より前に出して画面全体を覆う。
 * container-type を持たせ、中のロゴを cqi（= このレイヤー幅 = ビューポート幅）で組む。
 */
.lp__loader {
  container-type: inline-size;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 背景画像が届くまでの下地。エンディング背景と同じホログラム寄りの色 */
  background-color: #ebfdff;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/*
 * 背景はフッター（エンディング）と同じホログラム画像。
 * 白のロゴが最も読みやすく、かつ軽い（webp 32KB）ので初回表示が速い。
 */
.lp__loader-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/original/top-link-bg.png');
  background-image: image-set(
    url('../img/top-link-bg.webp') type('image/webp'),
    url('../img/original/top-link-bg.png') type('image/png')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.lp__loader-logo {
  position: relative;
  display: block;
  width: 62cqi;
  max-width: 380px;
  /* 明るいホログラム上で白ロゴが飛ばないよう、わずかに影を落とす */
  filter: drop-shadow(0 0.4cqi 1.2cqi rgba(80, 90, 110, 0.28));
  animation: lp-loader-pulse 1.5s ease-in-out infinite;
}

.lp__loader-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes lp-loader-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.lp__loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lp {
  container-type: inline-size;
  max-width: var(--lp-content-width);
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  background: #fff;
  font-family: var(--lp-font-sans);
  /* ローディング画面が消えるのに合わせて、フェードイン＋わずかに浮き上がらせる */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/*
 * transform を残すと中の position: fixed（.lp__menu）の基準が .lp になるため、
 * 表示後は none に戻してビューポート基準へ復帰させる。
 */
.lp.is-loaded {
  opacity: 1;
  transform: none;
}

@media (min-width: 751px) {
  /*
   * fixed でビューポート基準にしている。
   * 既定の scroll だと cover の基準がページ全体の高さになるため、
   * ページが長いほど背景が縦に引き伸ばされ、スクロールでも一緒に動いてしまう。
   */
  body {
    background-color: #ebfdff;
    background-image: url('../img/original/body-bg-pc.jpeg');
    background-image: image-set(
      url('../img/body-bg-pc.webp') type('image/webp'),
      url('../img/original/body-bg-pc.jpeg') type('image/jpeg')
    );
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.lp__kv {
  position: relative;
}

/*
 * MENUはコンテンツ幅（750px）と同じ座標系に揃えるための固定レイヤー。
 * ボタン・パネルを個別にビューポート基準で置くと、
 * スクロールバーの有無で .lp とズレるため、このレイヤー基準で配置する。
 * z-index: 100 で、body::before のホログラム背景（90）より前に出す。
 */
.lp__menu {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: min(100%, var(--lp-content-width));
  height: 100vh;
  height: 100dvh;
  transform: translateX(calc(-50% - var(--lp-scroll-lock-offset, 0px)));
  pointer-events: none;
}

.lp__menu-btn {
  position: absolute;
  top: 3.5cqi;
  right: 4cqi;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 1cqi;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.lp__menu-label {
  font-family: var(--lp-font-serif);
  font-size: 4cqi;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}

.lp__menu-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 14cqi 7cqi 8cqi;
  /*
   * ベースは不透明な白。後ろのページ本体やグレーオーバーレイは透かさない。
   * その上に淡い虹色の映り込みと斜めの光沢を重ねて「白っぽいホログラム調」にしている。
   * 文字を読ませる面なので重ねる色のアルファは低く抑え、明るさは白寄りに保つ。
   */
  background-color: #fff;
  background-image:
    linear-gradient(
      104deg,
      rgba(255, 255, 255, 0) 12%,
      rgba(255, 255, 255, 0.55) 34%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(
      146deg,
      rgba(var(--lp-holo-mint), 0.34) 0%,
      rgba(var(--lp-holo-aqua), 0.26) 22%,
      rgba(255, 255, 255, 0.1) 42%,
      rgba(var(--lp-holo-lavender), 0.26) 62%,
      rgba(var(--lp-holo-pink), 0.22) 80%,
      rgba(var(--lp-holo-cream), 0.3) 100%
    );
  /* 閉じている間は画面の上へ退避。開閉時はここを上下させるだけ */
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.55s ease-out,
    visibility 0s linear 0.55s;
}

.lp__menu.is-open .lp__menu-panel {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* 項目は白パネルと一緒に降りてくるので、リスト単体では動かさない */
.lp__menu-list {
  display: grid;
  gap: 5cqi;
  width: 82cqi;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp__menu-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9cqi;
  align-items: center;
  gap: 4cqi;
  color: #111;
  font-family: var(--lp-font-serif);
  font-size: 4.4cqi;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

/*
 * 幅を文字幅に合わせているのは、ホバー時のグラデーションを
 * 列幅ではなく文字の長さいっぱいに乗せるため。
 * text-align: center が効いているので見た目の位置は変わらない。
 */
.lp__menu-text {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

/*
 * ホバー時に文字の形で見せる虹色。MENU項目とTOPリンクで共用している。
 * 常に敷いておき、通常時は文字色
 * （-webkit-text-fill-color の初期値 = currentColor）が上から塗りつぶすので見えない。
 *
 * 文字列そのものと .lp__char の両方に敷いているのは、
 * JSが1文字ずつのspanに分割するかどうかで文字の持ち主が変わるため。
 * 親に background-clip: text を掛けても、子spanの中の文字は
 * 切り抜き対象に入らず文字ごと消えてしまう。
 */
.lp__menu-text,
.lp__top-bar-text,
.lp__menu-link .lp__char,
.lp__top-bar-text .lp__char {
  background-image: var(--lp-holo-text);
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* 分割なし（reduced motion時）は文字列全体に色の並びを1往復ぶん乗せる */
.lp__menu-text,
.lp__top-bar-text {
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

/*
 * 分割あり時。fixed でビューポート基準にすると、1文字ずつのspanでも
 * 1枚のグラデーションを共有するので、文字をまたいで色がつながる。
 * タイルを広めに取ると1色の帯が太くなり、色の変わり目がなだらかになる。
 */
.lp__menu-link .lp__char,
.lp__top-bar-text .lp__char {
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 75% 100%;
}

.lp__menu-item--series {
  display: grid;
  gap: 3.2cqi;
}

.lp__menu-sublist {
  display: grid;
  gap: 3.2cqi;
  margin: 0;
  padding: 0.6cqi 0 0.6cqi 5.5cqi;
  border-left: 0.18cqi solid #ccc;
  list-style: none;
}

.lp__menu-link--product {
  font-size: 3.5cqi;
  letter-spacing: 0.12em;
}

.lp__menu-link::after {
  display: block;
  width: 9cqi;
  height: 0.2cqi;
  background: #aaa;
  content: '';
  transition: width 0.25s ease, background-color 0.25s ease;
}

.lp__menu-btn:focus-visible,
.lp__menu-link:focus-visible {
  outline: 0.25cqi solid #5baaa8;
  outline-offset: 0.8cqi;
}

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

.lp__kv-slider {
  position: relative;
  width: 100%;
}

.lp__kv-slider picture {
  display: block;
  width: 100%;
}

.lp__kv-slider picture:not(:first-of-type) {
  position: absolute;
  top: 0;
  left: 0;
}

.lp__kv-image {
  width: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.lp__kv-image.is-active {
  opacity: 1;
}

.lp__intro {
  background-image: url('../img/original/concept-bg.png');
  background-image: image-set(
    url('../img/concept-bg.webp') type('image/webp'),
    url('../img/original/concept-bg.png') type('image/png')
  );
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.lp__concept {
  padding: 20cqi 0 16cqi;
  text-align: center;
}

.lp__concept-text {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-size: 4.7cqi;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: 0.1em;
  color: #111;
}

.lp__series {
  text-align: center;
}

.lp__series-heading {
  margin: 0;
  padding: 2cqi 0 7.5cqi;
  font-family: var(--lp-font-serif);
  font-size: 5.4cqi;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #111;
}

.lp__series-item > picture {
  display: block;
  width: 100%;
}

.lp__series-image {
  width: 100%;
  display: block;
}

.lp__series-body {
  padding: 11cqi 4cqi 12cqi;
  background: #fff;
}

.lp__series-item--mist .lp__series-body {
  padding-bottom: 16.3cqi;
  background-image: url('../img/original/deco-ripple.png');
  background-image: image-set(
    url('../img/deco-ripple.webp') type('image/webp'),
    url('../img/original/deco-ripple.png') type('image/png')
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lp__series-name,
.lp__series-catch,
.lp__series-lead {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-weight: 500;
  color: #111;
}

.lp__series-name {
  font-size: 3.7cqi;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.lp__series-catch {
  margin-top: 1.4cqi;
  font-size: 3.3cqi;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.lp__series-lead {
  margin-top: 1.2cqi;
  font-size: 3.3cqi;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.lp__series-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 50cqi;
  height: 11.2cqi;
  margin-top: 7.5cqi;
  border: 0.18cqi solid #111;
  border-radius: 9999px;
  background: #fff;
  text-decoration: none;
  /* 光の演出がボタンの輪郭からはみ出さないようにする */
  overflow: hidden;
  /* 疑似要素をボタン背景の上・画像の下に重ねるためのスタッキングコンテキスト */
  isolation: isolate;
  transition: transform 0.2s cubic-bezier(0.16, 0.85, 0.3, 1);
}

/*
 * ホログラム調の光沢を、ボタン背景と画像の間に敷く。
 * ボタン画像は84%が透過なので、VIEW MOREの文字を残したまま光が乗る。
 * ::before が淡い虹色のベース、::after が斜めに走る光の帯。
 * ボタンと同じ位置・同じ大きさ・同じ角丸にして、輪郭とぴったり重ねる。
 */
.lp__series-button::before,
.lp__series-button::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0 0;
  pointer-events: none;
  content: '';
}

.lp__series-button::before {
  background-image: var(--lp-holo-veil);
  /* 初動を早くするため、立ち上がりの速いイージングで短めに動かす */
  transition: background-position 0.45s cubic-bezier(0.16, 0.85, 0.3, 1);
}

.lp__series-button::after {
  background-image: var(--lp-holo-shine);
}

.lp__series-button-image {
  width: 100%;
  max-width: 30cqi;
  height: auto;
  display: block;
  margin: 0 auto;
}

.lp__lineup {
  position: relative;
  padding: 0 0 12cqi;
  background-color: #ebfdff;
  text-align: center;
}

.lp__lineup-head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.9cqi 0 14.3cqi;
  background-image: url('../img/deco-ripple.webp');
  background-image: image-set(
    url('../img/deco-ripple.webp') type('image/webp'),
    url('../img/original/deco-ripple.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: -10cqi 0;
  background-size: 60cqi auto;
}

.lp__lineup-title {
  display: flex;
  align-items: center;
  position: relative;
}

.lp__lineup-title > picture {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 28cqi;
  margin-left: -3cqi;
  transform: translateY(calc(-50% - 1.2cqi));
  pointer-events: none;
}

.lp__lineup-swatch {
  display: block;
  width: 100%;
  height: auto;
}

.lp__lineup-heading {
  margin: 0;
  font-family: var(--lp-font-serif);
  font-size: 5.4cqi;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #111;
}

.lp__lineup-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3cqi;
  row-gap: 15cqi;
  margin: 0;
  padding: 0 7cqi;
  list-style: none;
}

.lp__lineup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp__lineup-item > picture {
  position: relative;
  display: block;
  /* 光筋が画像の輪郭からはみ出さないようにする */
  overflow: hidden;
  /* 疑似要素の mix-blend-mode を picture の内側に閉じ込める */
  isolation: isolate;
  /*
   * 登場モーション用。transition を .lp__lineup-image-reveal 側に置くと
   * 詳細度の高いこのセレクタに丸ごと上書きされるため、ここで指定する。
   */
  transition:
    opacity 0.65s ease-out var(--lp-image-reveal-delay, 0ms),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--lp-image-reveal-delay, 0ms);
}

/*
 * 商品の表面を白い光筋が斜めに通過する演出。ホバーを問わず常時ループさせる。
 * 商品画像そのものをマスクに使うので、光は商品のシルエットから外へ出ない。
 * 画像と同じ位置・同じ大きさにして、輪郭とぴったり重ねる。
 */
.lp__lineup-item > picture::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: var(--lp-holo-shine-surface);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-mask-image: var(--lp-shine-mask, none);
  mask-image: var(--lp-shine-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* screen で光が当たった部分だけが明るくなる */
  mix-blend-mode: screen;
  animation: lp-shine-sweep 4.5s ease-in-out var(--lp-shine-delay, 0s) infinite;
  pointer-events: none;
  content: '';
}

/*
 * 商品ごとのシルエットマスクと、光筋の開始タイミング。
 * 4つが同時に光ると機械的なので、通過をずらしている。
 */
.lp__lineup-item--serum-clear {
  --lp-shine-mask: url('../img/lineup-serum-clear.webp');
  --lp-shine-delay: 0s;
}

.lp__lineup-item--serum-moist {
  --lp-shine-mask: url('../img/lineup-serum-moist.webp');
  --lp-shine-delay: 1.1s;
}

.lp__lineup-item--mist-vitac {
  --lp-shine-mask: url('../img/lineup-mist-vitac.webp');
  --lp-shine-delay: 2.2s;
}

.lp__lineup-item--mist-reti {
  --lp-shine-mask: url('../img/lineup-mist-reti.webp');
  --lp-shine-delay: 3.3s;
}

.lp__lineup-image {
  display: block;
  width: auto;
  /* 30cqi の1.2倍。ホバーで拡大せず、常時この大きさで見せる */
  height: 36cqi;
  object-fit: contain;
}

.lp__lineup-name,
.lp__lineup-meta {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-weight: 500;
  color: #111;
}

.lp__lineup-name {
  margin-top: 9cqi;
  font-size: 2.7cqi;
  line-height: 1.9;
  letter-spacing: normal;
}

.lp__lineup-meta {
  margin-top: 1.4cqi;
  font-size: 2.55cqi;
  letter-spacing: normal;
}

.lp__lineup-price {
  font-size: 1.3em;
  font-weight: 500;
}

.lp__lineup-tax {
  font-size: 0.8em;
}

.lp__ending {
  background-color: #ebfdff;
}

/* クリック領域は従来どおり横幅いっぱい。上下の余白もここで持たせる */
.lp__top-bar-link {
  display: block;
  overflow: hidden;
  padding: 10cqi 0 6.3cqi;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/*
 * ホバー判定を文字の実寸に絞るため inline-block にしている。
 * 横幅いっぱいのblockや余白付きのままだと、
 * 文字の左右の空白に触れただけでホバー演出が始まってしまう。
 */
.lp__top-bar-text {
  display: inline-block;
  padding: 0;
  font-family: var(--lp-font-serif);
  font-size: 5.4cqi;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #111;
}

.lp__ending-panel {
  --lp-ending-inline: 5.5cqi;
  position: relative;
}

.lp__ending-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.lp__ending-link > picture {
  display: block;
  width: 100%;
}

.lp__ending-image {
  display: block;
  width: 100%;
  height: auto;
}

.lp__footer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 10cqi var(--lp-ending-inline) 9.5cqi;
  text-align: left;
  pointer-events: none;
}

.lp__footer-logo {
  display: block;
  width: 82cqi;
  max-width: 100%;
  /* 上の余白はここで持たせる。.lp__footer の padding-top には触らない */
  margin: 6cqi 0 0;
  text-align: left;
  text-decoration: none;
  pointer-events: auto;
}

.lp__footer-logo picture,
.lp__footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.lp__footer-body {
  width: 100%;
  margin: 0;
  text-align: left;
  pointer-events: auto;
}

.lp__footer-text,
.lp__footer-copyright {
  margin: 0;
  font-family: var(--lp-font-sans);
  font-weight: 500;
  color: #111;
}

.lp__footer-text {
  font-size: 2.5cqi;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.lp__footer-text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.lp__footer-copyright {
  margin-top: 8cqi;
  font-size: 2.5cqi;
  letter-spacing: 0.04em;
}

.lp__char-clip {
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  vertical-align: bottom;
}

.lp__char {
  display: inline-block;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.lp__char-source--heading .lp__char {
  transform: translateY(120%);
  transition:
    opacity 0.26s ease-out,
    transform 0.42s cubic-bezier(0.12, 0.9, 0.2, 1);
  transition-delay: var(--lp-char-delay, 0ms);
}

.lp__char-source--body .lp__char {
  transform: translateY(75%);
  transition:
    opacity 0.6s ease-out,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--lp-char-delay, 0ms);
}

/* 回転とオーバーシュートは入れず、まっすぐ上がるだけにする */
.lp__char-source--menu .lp__char {
  transform: translateY(150%);
  transition:
    opacity 0.34s ease-out,
    transform 0.48s ease-out;
  transition-delay: var(--lp-char-delay, 0ms);
}

.lp__char-source.is-char-visible .lp__char {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* transition は .lp__lineup-item > picture 側でまとめて指定している */
.lp__lineup-image-reveal {
  opacity: 0;
  transform: translateY(4cqi);
}

.lp__lineup-image-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .lp__menu-btn:hover {
    color: #347f7d;
    opacity: 0.85;
  }

  /*
   * 文字の塗りを透明にして、下に敷いた虹色だけを見せる。
   * 色の位置をゆっくり往復させることで、文字の上を色が左右に流れる。
   */
  .lp__menu-link:hover .lp__menu-text,
  .lp__menu-link:hover .lp__char,
  .lp__top-bar-text:hover,
  .lp__top-bar-text:hover .lp__char {
    -webkit-text-fill-color: transparent;
    animation: lp-holo-text-flow 5s ease-in-out infinite alternate;
  }

  .lp__menu-link:hover::after {
    width: 11cqi;
    background: #5f8f8d;
  }

  .lp__series-button:hover {
    opacity: 1;
    transform: scale(1.04);
  }

  /* 虹色が右から流れ込む */
  .lp__series-button:hover::before {
    background-position: 100% 0;
  }

  /* 光の帯が繰り返し斜めに通過する。待機時間を置かず即座に走り出す */
  .lp__series-button:hover::after {
    animation: lp-holo-shine 2.4s ease-out 0s infinite;
  }

  .lp__footer-text a:hover {
    color: #347f7d;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* ローディングは点滅も浮き上がりもさせず、フェードだけで切り替える */
  .lp__loader-logo {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .lp {
    transform: none;
    transition: opacity 0.4s ease;
  }

  body::before,
  .lp__menu-panel,
  .lp__menu-list,
  .lp__menu-btn,
  .lp__menu-link,
  .lp__series-button,
  .lp__footer-text a,
  .lp__lineup-item > picture,
  .lp__char {
    transition: none;
  }

  .lp__lineup-image-reveal,
  .lp__char {
    opacity: 1;
    transform: none;
  }

  /* ホログラムの光沢は色だけ出し、光筋は動かさない */
  .lp__series-button::before,
  .lp__series-button::after,
  .lp__lineup-item > picture::after,
  .lp__menu-link:hover .lp__menu-text,
  .lp__menu-link:hover .lp__char,
  .lp__top-bar-text:hover,
  .lp__top-bar-text:hover .lp__char {
    transition: none;
    animation: none;
  }
}