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

html {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  background: #fff;
  color: #1a1a1a;
  transition: opacity 0.6s ease-out;
}

/* is-preload は head のインラインスクリプトで付与。JS 無効時は非表示にしない */
html.is-preload,
html.is-preload body {
  background: #fff;
}

html.is-preload body {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  html.is-preload body {
    opacity: 1;
  }
}

html.is-menu-open,
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;
}

.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;
}

.lp__menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 8700;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: rgba(128, 128, 128, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    opacity 0.28s ease-out 0.1s,
    visibility 0s linear 0.38s;
}

.lp__menu-overlay.is-active {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.28s ease-out 0s,
    visibility 0s linear 0s;
}

.lp__pc-margin-deco {
  display: none;
}

.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-menu-btn-font-size: 18px;
}

.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;
}

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

.lp {
  max-width: 100%;
  margin: 0 auto;
  --lp-teal: #8ecfcb;
  --lp-pink: #f4b1b1;
}

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

.lp sup {
  font-size: 0.48em;
  font-weight: 500;
  line-height: 0;
  vertical-align: super;
}

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

.lp__hero .lp__shot {
  aspect-ratio: 1500 / 2030;
}

#concept > .lp__shot {
  aspect-ratio: 1502 / 2234;
}

.lp__concept__copy {
  aspect-ratio: 770 / 301;
}

.lp__point > .lp__shot {
  aspect-ratio: 1153 / 1351;
}

.lp__point__checks img:nth-child(1) {
  aspect-ratio: 1180 / 155;
}

.lp__point__checks img:nth-child(2) {
  aspect-ratio: 1180 / 141;
}

.lp__point__checks img:nth-child(3) {
  aspect-ratio: 1180 / 144;
}

.lp__point__texture .lp__shot {
  aspect-ratio: 1229 / 1398;
}

.lp__lineup--clear .lp__lineup__banner-img {
  aspect-ratio: 1114 / 229;
}

.lp__lineup--moist .lp__lineup__banner-img {
  aspect-ratio: 1115 / 229;
}

.lp__lineup--clear .lp__lineup__visual img,
.lp__lineup--moist .lp__lineup__visual img {
  aspect-ratio: 325 / 954;
}

.lp__lineup--clear .lp__formula__img {
  aspect-ratio: 1314 / 1097;
}

.lp__lineup--moist .lp__formula__img {
  aspect-ratio: 1363 / 1078;
}

.lp__multi .lp__shot {
  aspect-ratio: 1500 / 1146;
}

.lp__multi__usage {
  aspect-ratio: 1230 / 853;
}

.lp__footer__logo {
  aspect-ratio: 1107 / 629;
}

.lp__pc-margin-deco__logo img {
  aspect-ratio: 965 / 724;
}

.lp__pc-margin-deco__bottle--clear {
  aspect-ratio: 379 / 818;
}

.lp__pc-margin-deco__bottle--moist {
  aspect-ratio: 316 / 807;
}

.lp__block {
  overflow: hidden;
}

.lp__reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

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

.lp__reveal-x {
  opacity: 0;
  transition:
    opacity 0.9s ease-out var(--lp-reveal-delay, 0s),
    transform 0.9s ease-out var(--lp-reveal-delay, 0s);
}

.lp__reveal-x--left {
  transform: translateX(-80px);
}

.lp__reveal-x--right {
  transform: translateX(80px);
}

.lp__reveal-x--up {
  transform: none;
}

.lp__reveal-x.is-visible {
  opacity: 1;
  transform: none;
}

.lp__lineup__name.lp__reveal-x,
.lp__lineup__btn.lp__reveal-x {
  transition:
    opacity 0.9s ease-out var(--lp-reveal-delay, 0s),
    transform 0.9s ease-out var(--lp-reveal-delay, 0s),
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lp__reveal,
  .lp__reveal-x {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== MENU ===== */
.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: #111;
  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: min(var(--lp-menu-btn-font-size), calc(100vw * 19 / 320));
  font-weight: 500;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.lp__menu-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease-out 0s,
    visibility 0s linear 0.3s;
}

.lp__menu-panel.is-open {
  z-index: 9600;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.35s ease-out 0.1s,
    visibility 0s linear 0s;
}

.lp__menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqi * 1 / 750);
  width: min(345px, 520px);
  margin-inline: auto;
  padding: 20px 0;
}

.lp__menu-link {
  position: relative;
  align-self: stretch;
  color: #161616;
  text-decoration: none;
  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: calc(100cqi * 6 / 750) 40px calc(100cqi * 10 / 750) 28px;
}

.lp__menu-link__hyphen {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.lp__menu-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 2px;
  background: rgba(0, 0, 0, 0.26);
}

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

.lp__menu-panel--v2 {
  padding: 41px;
}

/* ===== HERO / 完成画像セクション ===== */
.lp__hero,
.lp__shot-block {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

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

.lp__hero .lp__shot {
  position: relative;
  z-index: 1;
}

.lp__hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s ease;
}

.lp__hero.is-fv-alt .lp__hero__overlay {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lp__hero__overlay {
    transition: none;
  }
}

#concept.lp__shot-block {
  position: relative;
  container-type: inline-size;
}

.lp__concept__copy {
  position: absolute;
  top: calc(100cqi * 67 / 750);
  left: calc(100cqi * 183 / 750);
  z-index: 2;
  width: calc(100cqi * 384 / 750);
  height: auto;
  pointer-events: none;
}

/* ===== LINE-UP ===== */
.lp__point-lineup {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

.lp__point-lineup > * {
  position: relative;
  z-index: 1;
}

.lp__lineup-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(100cqi * 100 / 750) 0 calc(100cqi * 40 / 750);
  background: none;
}

.lp__lineup-head__title {
  margin: 0;
  padding-left: 0.06em;
  color: #000;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: calc(100cqi * 40 / 750);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.lp__char-reveal .lp__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.5s ease-out calc(var(--i, 0) * 0.09s),
    transform 0.5s ease-out calc(var(--i, 0) * 0.09s);
}

.lp__char-reveal .lp__char::before {
  content: attr(data-char);
}

.lp__char-reveal.is-visible .lp__char {
  opacity: 1;
  transform: none;
}

.lp__char-reveal .lp__char--hyphen {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
}

.lp__lineup--clear {
  position: relative;
  background: var(--lp-teal);
}

.lp__lineup--moist {
  position: relative;
  background: var(--lp-pink);
}

.lp__lineup__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(100cqi * 57 / 750) 0 calc(100cqi * 32 / 750);
}

.lp__lineup__banner-img {
  display: block;
  width: calc(100cqi * 557 / 750);
  max-width: none;
  height: auto;
  margin: 0 auto calc(100cqi * 39 / 750);
}

.lp__lineup--clear .lp__lineup__product,
.lp__lineup--moist .lineup-product {
  display: grid;
  align-items: start;
  width: calc(100cqi * 483 / 750);
  margin: 0 auto calc(100cqi * 38 / 750);
  gap: calc(100cqi * 40 / 750);
}

.lp__lineup--clear .lp__lineup__product {
  grid-template-columns: calc(100cqi * 163 / 750) calc(100cqi * 280 / 750);
}

.lp__lineup--moist .lineup-product {
  grid-template-columns: calc(100cqi * 280 / 750) calc(100cqi * 163 / 750);
}

.lp__lineup__visual img {
  width: calc(100cqi * 163 / 750);
  margin-inline: auto;
}

.lp__lineup__info {
  margin-top: calc(100cqi * 30 / 750);
}

.lp__lineup__name {
  display: block;
  width: calc(100cqi * 274 / 750);
  margin: 0;
  color: #000;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

.lp__lineup__name-title {
  margin: 0;
  font-size: calc(100cqi * 24 / 750);
  font-weight: 500;
  line-height: calc(100cqi * 41 / 750);
  letter-spacing: 0.02em;
}

.lp__lineup__name-title span {
  display: block;
}

.lp__lineup__name-price {
  margin: calc(100cqi * 21 / 750) 0 0;
  font-size: calc(100cqi * 21 / 750);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.lp__lineup__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(100cqi * 22 / 750);
  margin-top: calc(100cqi * 42 / 750);
  width: calc(100cqi * 280 / 750);
  max-width: none;
}

.lp__lineup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(100cqi * 54 / 750);
  padding: 0.2em 0 0;
  border: calc(100cqi * 2 / 750) solid #111;
  border-radius: 999px;
  background: transparent;
  color: #111;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  font-size: calc(100cqi * 24 / 750);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.lp__lineup__btn:first-child {
  letter-spacing: 0.22em;
}

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

@media (hover: hover) and (pointer: fine) {
  .lp__lineup__btn:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.22);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      background-color 0.3s ease;
  }

  .lp__lineup--clear .lp__lineup__btn:hover {
    background-color: #74b8b4;
  }

  .lp__lineup--moist .lp__lineup__btn:hover {
    background-color: #e89a9a;
  }
}

.lp__formula__img {
  display: block;
  position: relative;
  left: calc(100cqi * -14 / 750);
  width: calc(100cqi * 657 / 750);
  max-width: none;
  height: auto;
  margin: 0 auto;
}

.lp__lineup--clear .lp__formula__img {
  left: calc(100cqi * -23 / 750);
}

.lp__lineup--moist .lp__formula__img {
  width: calc(100cqi * 681 / 750);
}

/* ===== POINT ===== */
#point {
  /* 見出し直下の図解（4種PDRNナノカプセル）が画面内に入るよう着地を下げる */
  scroll-margin-top: calc(100cqi * 500 / 750);
}

.lp__point {
  margin: 0;
  padding: 0;
  container-type: inline-size;
  background: none;
}

.lp__point > .lp__shot {
  display: block;
  width: calc(100cqi * 577 / 750);
  height: auto;
  margin-inline: auto;
}

.lp__point__texture {
  position: relative;
  width: 100%;
}

.lp__point__texture .lp__shot {
  position: relative;
  left: calc(100cqi * -54 / 750);
  display: block;
  width: calc(100cqi * 615 / 750);
  height: auto;
  margin-inline: auto;
}

.lp__point__checks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqi * 28 / 750);
  width: calc(100cqi * 590 / 750);
  margin: calc(100cqi * 28 / 750) auto calc(100cqi * 77 / 750);
}

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

/* ===== MULTI-USE / TOP（見出し〜ボトル〜TOP） ===== */
.lp__close-glow {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

.lp__point-lineup::before,
.lp__close-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/bg_prism.webp");
  background-repeat: no-repeat;
  background-position: calc(100% * 702 / 900) calc(100% * 220 / 221);
  background-size: calc(100% * 2401 / 1501) calc(100% * 3694 / 3473);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.lp__close-glow > * {
  position: relative;
  z-index: 1;
}

.lp__block.lp__multi {
  overflow: visible;
  margin: 0;
  padding: 0;
  background: none;
}

.lp__multi .lp__shot {
  display: block;
  width: 100%;
  height: auto;
}

.lp__multi__usage {
  display: block;
  width: calc(100cqi * 615 / 750);
  height: auto;
  margin: calc(100cqi * 20 / 750) auto 0;
}

/* ===== FOOTER ===== */
.lp__block.lp__footer {
  position: relative;
  z-index: auto;
  overflow: visible;
  margin: 0;
  padding: calc(100cqi * 16 / 750) 0 calc(100cqi * 70 / 750);
  background-color: #e8eef4;
  background-image: url("../img/footer_bg.webp");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
}

.lp__top-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: calc(100cqi * 120 / 750) auto calc(100cqi * 36 / 750);
  color: #000;
  text-decoration: none;
}

.lp__top-bar-text {
  display: block;
  padding-left: 0.06em;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: calc(100cqi * 40 / 750);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0.06em;
  line-height: 1;
}

.lp__footer__logo {
  display: block;
  position: relative;
  z-index: 1;
  width: calc(100cqi * 598 / 750);
  height: auto;
  margin: calc(100cqi * -30 / 750) 0 calc(100cqi * 18 / 750) calc(100cqi * 50 / 750);
}

.lp__footer__text {
  position: relative;
  z-index: 1;
  
  pointer-events: auto;
  margin: calc(100cqi * 80 / 750) 0 0;
  padding: 0 calc(100cqi * 58 / 750);
  color: #111;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: calc(100cqi * 16 / 750);
  font-weight: 500;
  line-height: calc(100cqi * 33 / 750);
  letter-spacing: 0.04em;
}

.lp__footer__line {
  margin: 0;
}

.lp__footer__company-link,
.lp__footer__tel-link {
  color: inherit;
  text-decoration: none;
}

.lp__footer__copy {
  margin: calc(100cqi * 77 / 750) 0 0;
  font-size: calc(100cqi * 19 / 750);
  letter-spacing: 0.06em;
}

@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-underline-offset: 0.28em;
  }
}

/* ===== PC 451+：既存と同じ中央カラム＋左右装飾 ===== */
@media screen and (min-width: 451px) {
  body {
    background-color: #fff;
    background-image: url("../img/bg_prism.webp");
    background-repeat: no-repeat;
    background-position: calc(100% * 702 / 900) calc(100% * 220 / 221);
    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);
    --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));
  }

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

  .lp__menu-panel--v2 .lp__menu-nav {
    width: min(calc(345px * var(--lp-menu-scale)), calc(520px * var(--lp-menu-scale)));
    gap: calc(100cqi * 5 / 750);
  }

  .lp__menu-link {
    font-size: calc(23px * var(--lp-menu-scale));
    padding: calc(100cqi * 6 / 750) calc(40px * var(--lp-menu-scale))
      calc(100cqi * 15 / 750) calc(28px * var(--lp-menu-scale));
  }

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

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

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

  .lp__lineup__btn:not(.lp__reveal-x) {
    transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .lp__menu-link:hover {
      color: #2c2c2c;
    }
  }
}

/* PC 余白装飾：親をコンテナにし、位置・サイズは 100cqi（親幅）基準 */
.lp__pc-margin-deco__logo {
  position: fixed;
  top: 49svh;
  left: calc(100cqi * 74 / 1920);
  width: calc(100cqi * 600 / 1920);
  /* 右端と中央750pxカラム左端の間に 3cqi の余白を常に確保 */
  max-width: max(0px, calc((100cqi - 750px) / 2 - 100cqi * 74 / 1920 - 1.2cqi));
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%) rotate(0deg);
}

.lp__pc-margin-deco__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.lp__pc-margin-deco__bottles {
  position: fixed;
  /* 中心固定: 1920時の塊中心 150+(270*716/300)/2=472。縮小しても重心は動かない */
  top: calc(100svh * 472 / 1080);
  /* 除数は単位なし(1170)。px同士の除算だと width/right が無効になり消える */
  right: calc((100cqi - 750px) * 158 / 1170);
  width: calc((100cqi - 750px) * 270 / 1170);
  max-width: calc(100cqi * 270 / 1920);
  aspect-ratio: 300 / 716;
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

@keyframes lp-pc-bottle-float {
  0%,
  100% {
    transform: translateY(calc(-1 * var(--lp-bottle-float, 8px)))
      rotate(var(--lp-bottle-rot, 0deg));
  }
  50% {
    transform: translateY(var(--lp-bottle-float, 8px))
      rotate(var(--lp-bottle-rot, 0deg));
  }
}

.lp__pc-margin-deco__bottles img {
  position: absolute;
  display: block;
  height: auto;
}

.lp__pc-margin-deco__bottle--clear {
  left: calc(100% * 4 / 300);
  top: calc(100% * 50 / 716);
  width: calc(100% * 190 / 300);
  --lp-bottle-rot: 1deg;
  --lp-bottle-float: 8px;
  transform: rotate(1deg);
  transform-origin: center center;
  animation: lp-pc-bottle-float 3.55s ease-in-out infinite;
  animation-delay: -0.7s;
}

.lp__pc-margin-deco__bottle--moist {
  left: calc(100% * 142 / 300);
  top: calc(100% * 360 / 716);
  width: calc(100% * 158 / 300);
  --lp-bottle-rot: 0deg;
  --lp-bottle-float: 10px;
  transform: rotate(0deg);
  animation: lp-pc-bottle-float 4.2s ease-in-out infinite;
  animation-delay: -2.3s;
}

@media (prefers-reduced-motion: reduce) {
  .lp__pc-margin-deco__bottle--clear,
  .lp__pc-margin-deco__bottle--moist {
    animation: none;
  }
}

@media screen and (max-width: 749px) {
  .lp__pc-margin-deco,
  .lp__pc-margin-deco__logo,
  .lp__pc-margin-deco__bottles {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .lp__pc-margin-deco {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    container-type: inline-size;
    container-name: lp-pc-deco;
  }
}

@media screen and (min-width: 751px) {
  body {
    background-image: url("../img/fv_bottle_main.webp");
  }
}

@media screen and (max-width: 374px) {
  .lp__sp-column {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    overflow-x: hidden;
  }

  .lp__sp-frame {
    margin-inline: 0;
    transform-origin: top left;
    transform: scale(calc(100vw / 375px));
  }
}

@media screen and (max-width: 319px) {
  .lp__hero__menu {
    top: min(14px, 4.4vw);
    right: min(14px, 4.4vw);
  }
}