@charset "UTF-8";

/* Brand site styles
 * Ranges: SP 0-767 / Tablet 768-1023 / PC 1024-1439 / Wide 1440+
 * Do not override .l-footer / .l-header common styles
 * Motion: do not gate transitions/animations on prefers-reduced-motion
 */

:root {
  --up-content-max: 1280px;
  --up-bp: 768px;
  --up-bp-tablet: 1024px;
  --up-layout-gutter: clamp(20px, 4vw, 60px);
  --up-section-space: clamp(64px, 8vw, 112px);
  --up-color-primary: #f4bb47;
  --up-color-accent: #33b7cb;
  --up-color-surface: #faf6ea;
  --up-color-footer: #f0eeea;
  --up-color-text: #4e4e4e;
  --up-color-muted: #868686;
  --up-font-sans: "Noto Sans JP", "Zen Kaku Gothic Antique", "メイリオ", Meiryo, sans-serif;
  --up-font-serif: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  --up-font-weight-body: 360;
  --up-font-weight-serif: 460;
  --up-header-height: 70px;
}

html {
  scroll-padding-top: var(--up-header-height);
}

.up-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--up-header-height);
  color: var(--up-color-text);
  font-family: var(--up-font-sans);
}

.up-header__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  padding-left: 15px;
}

.up-header__logo {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 55px;
  margin: 0;
}

.up-header__logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.up-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.up-header__actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 70px;
}

.up-header__buy,
.up-header__menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--up-color-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  text-decoration: none;
}

.up-header__buy {
  background: var(--up-color-primary);
  color: #fff;
}

.up-header__buy img {
  display: block;
  width: 26px;
  height: 26px;
}

.up-header__menu-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 27px;
}

.up-header__menu-icon i {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s ease, opacity 0.2s ease;
}

.up-header.is-menu-open .up-header__menu-icon i {
  position: absolute;
  top: 50%;
  left: 0;
}

.up-header.is-menu-open .up-header__menu-icon i:nth-child(1) {
  transform: translateY(-50%) rotate(15deg);
}

.up-header.is-menu-open .up-header__menu-icon i:nth-child(2) {
  opacity: 0;
}

.up-header.is-menu-open .up-header__menu-icon i:nth-child(3) {
  transform: translateY(-50%) rotate(-15deg);
}

.up-header__menu-text--close {
  display: none;
}

.up-header.is-menu-open .up-header__menu-text--open {
  display: none;
}

.up-header.is-menu-open .up-header__menu-text--close {
  display: inline;
}

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

.up-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.5s;
}

.up-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.up-nav__overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.up-nav.is-open .up-nav__overlay {
  opacity: 1;
}

.up-nav__panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 0 0 30px;
  background: var(--up-color-surface);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.up-nav.is-open .up-nav__panel {
  transform: translate3d(0, 0, 0);
}

.up-nav__inner {
  box-sizing: border-box;
  padding: 131px 30px 40px;
}

.up-nav__cols {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.up-nav__col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.up-nav__home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--up-color-muted);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-decoration: none;
}

.up-nav__home-arrow {
  display: block;
  width: 16px;
  height: 9px;
  transform: rotate(-90deg);
}

.up-nav__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--up-color-muted);
}

.up-nav__heading,
.up-nav__buy-heading {
  margin: 0;
  color: var(--up-color-muted);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.up-nav__buy-heading {
  margin-top: 40px;
}

.up-nav__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-nav__links a {
  color: var(--up-color-muted);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.up-nav__stores {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.up-nav__store {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 137px;
  border: 1px solid var(--up-color-muted);
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
}

.up-nav__store-logo {
  display: block;
  width: auto;
  max-width: 70%;
  height: 80px;
  object-fit: contain;
}

.up-nav__store-external {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 17px;
  height: 17px;
}

.up-main {
  overflow: hidden;
  min-height: 40vh;
  background: var(--up-color-surface);
  color: var(--up-color-text);
  font-family: var(--up-font-sans);
  font-weight: var(--up-font-weight-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Figma: TOP/商品詳細/記事とも OpenType PALT は未使用（default）。縦書きのみ VERT */
  font-kerning: none;
  -webkit-font-feature-settings: "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  font-feature-settings: "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  text-autospace: no-autospace;
  -webkit-text-spacing-trim: space-all;
  text-spacing-trim: space-all;
}

.up-mv {
  position: relative;
  width: 100%;
  background: var(--up-color-surface);
}

.up-mv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 375px;
  height: 688px;
  margin: 0 auto;
  overflow: hidden;
}

.up-mv__main-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.up-mv__slides {
  position: absolute;
  inset: 0;
}

.up-mv__slide {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, z-index 0s linear 1.8s;
}

.up-mv__slide.is-current {
  z-index: 1;
  opacity: 1;
  transition: opacity 1.8s ease-in-out, z-index 0s;
}

.up-mv__main-pc {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .up-mv__slides {
    display: none;
  }

  .up-mv__main-pc {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.up-mv__statement {
  position: static;
  margin: 0;
  color: var(--up-color-muted);
  font-family: var(--up-font-serif);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.up-mv__statement-line {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
}

.up-mv__statement-visual {
  position: absolute;
  z-index: 2;
  top: 106px;
  left: 22px;
  display: block;
  width: 71px;
  height: 253px;
}

.up-mv__sub-image {
  display: none;
}

.up-mv__products {
  position: absolute;
  z-index: 1;
  top: 380px;
  left: 119px;
  width: 217px;
  height: 312.22px;
  margin: 0;
}

.up-mv__product {
  position: absolute;
  display: block;
}

.up-mv__product--cream {
  top: 44.462%;
  left: 1.684%;
  width: 56.566%;
}

.up-mv__product--lotion {
  top: 0;
  right: 0;
  width: 41.751%;
}

.up-mv__product img {
  display: block;
  width: 100%;
  height: auto;
}

.up-mv__product-main {
  position: relative;
  z-index: 1;
}

.up-mv__product--cream .up-mv__product-main {
  transform: rotate(0.26deg);
}

.up-mv__product-reflection {
  position: absolute;
  z-index: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.up-mv__product-reflection img {
  mix-blend-mode: multiply;
  filter: brightness(0) blur(0.6px);
  transform: scaleY(-1);
  transform-origin: center;
}

.up-mv__product--lotion .up-mv__product-reflection {
  top: 100%;
  opacity: 0.55;
  -webkit-mask-image: url("../images/mask_reflection_lotion_001.svg");
  mask-image: url("../images/mask_reflection_lotion_001.svg");
  -webkit-mask-position: 0.22% 0;
  mask-position: 0.22% 0;
  -webkit-mask-size: 95.09% 40%;
  mask-size: 95.09% 40%;
}

.up-mv__product--cream .up-mv__product-reflection {
  top: calc(100% - 4.2%);
  opacity: 0.55;
  -webkit-mask-image: url("../images/mask_reflection_cream_001.svg");
  mask-image: url("../images/mask_reflection_cream_001.svg");
  -webkit-mask-position: -2.98% 0;
  mask-position: -2.98% 0;
  -webkit-mask-size: 105.56% 50%;
  mask-size: 105.56% 50%;
}

.up-mv__product--cream .up-mv__product-reflection img {
  mix-blend-mode: normal;
  filter: none;
}

.up-mv__product--lotion .up-mv__product-reflection img {
  mix-blend-mode: normal;
  filter: none;
}

.up-mv__benefit {
  margin: 0;
  font-family: var(--up-font-serif);
  font-weight: 300;
}

.up-mv__moisture {
  position: absolute;
  z-index: 2;
  top: 424px;
  left: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60px;
  height: 110px;
  color: var(--up-color-muted);
  font-size: 5.7rem;
  line-height: 0.96;
  letter-spacing: 0.2em;
}

.up-mv__moisture span {
  display: block;
  line-height: 1;
}

.up-mv__plus {
  position: absolute;
  z-index: 2;
  top: 555px;
  left: 36px;
  width: 59px;
  height: 59px;
}

.up-mv__plus::before,
.up-mv__plus::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.36px;
  background: var(--up-color-primary);
  content: "";
  transform: translateY(-50%);
}

.up-mv__plus::after {
  transform: translateY(-50%) rotate(90deg);
}

.up-mv__itch {
  position: absolute;
  z-index: 2;
  top: 635px;
  left: 50%;
  width: auto;
  color: var(--up-color-primary);
  font-size: 5.7rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.up-mv__itch > span:nth-child(1) {
  letter-spacing: 1.14px;
}

.up-mv__itch > span:nth-child(2) {
  letter-spacing: 2.28px;
}

@supports (text-box-trim: trim-both) {
  .up-mv__moisture,
  .up-mv__itch {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .up-mv__moisture {
    line-height: 1.2;
  }

  .up-mv__itch {
    line-height: 1.6;
  }
}

.up-heading {
  margin: 0 auto;
  padding: 0 20px;
  color: var(--up-color-muted);
  text-align: center;
}

.up-heading__en {
  margin: 0 0 20px;
  font-family: var(--up-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.up-heading__ja {
  margin: 0;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

@supports (text-box-trim: trim-both) {
  .up-heading__ja,
  .up-struggle__lead,
  .up-reason__title,
  .up-reason__text,
  .up-why__lead,
  .up-why__body,
  .up-why__cause-label,
  .up-why__cause-text,
  .up-why__question-line,
  .up-why__diagram-kicker,
  .up-why__diagram-title,
  .up-why__step-label,
  .up-why__step-text,
  .up-why__close-lead,
  .up-why__close-main,
  .up-why__close-name,
  .up-why__quote,
  .up-features__lead,
  .up-features__body,
  .up-features__approach,
  .up-features__summary,
  .up-features__quote,
  .up-features__restore-title {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .up-features__vert span {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .up-struggle__items li {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.up-struggle {
  padding: 73px 0 0;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
}

.up-struggle__panel {
  position: relative;
  width: 341px;
  margin: 49px auto 0;
}

.up-struggle__frame {
  position: relative;
  min-height: 481px;
  padding: 42px 14px 110px 50px;
}

.up-struggle__frame::before {
  position: absolute;
  inset: 0;
  background: url("../images/frame_list_001_sp.svg") no-repeat center / 100% 100%;
  content: "";
  pointer-events: none;
}

.up-struggle__items {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0 0 0 46px;
  list-style: none;
}

.up-struggle__items li {
  position: relative;
  width: 199px;
  font-size: 1.6rem;
  font-weight: var(--up-font-weight-body);
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.up-struggle__items li:nth-child(4) {
  width: 157px;
}

.up-struggle__check {
  position: absolute;
  top: 3px;
  left: -46px;
  display: block;
  width: 31px;
  height: 24px;
}

.up-struggle__lead {
  position: relative;
  z-index: 2;
  width: 232px;
  margin: -86px auto 0;
  padding: 24px 14px 31px;
  background: var(--up-color-surface);
  font-family: var(--up-font-serif);
  font-size: 2.4rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: left;
}

.up-struggle__lead-line {
  display: block;
  white-space: nowrap;
}

.up-br-sp {
  display: block;
}

.up-br-pc {
  display: none;
}

.up-reason {
  padding: 26px 0 40px;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
}

.up-reason__inner {
  position: relative;
  width: 100%;
  max-width: 375px;
  min-height: 772px;
  margin: 0 auto;
  padding-top: 99px;
  overflow: visible;
}

.up-reason__care {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -5px;
  width: 212px;
  height: 126px;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none;
}

.up-reason__care img {
  display: block;
  width: 241px;
  max-width: none;
  height: 161px;
  margin-top: -34px;
  object-fit: cover;
  object-position: 0 0;
  filter: blur(4.5px);
  opacity: 0.5;
}

.up-reason__body {
  position: relative;
  z-index: 1;
  width: 335px;
  min-height: 444px;
  margin: 0 auto;
  padding: 67px 20px 120px 21px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
}

.up-reason__title {
  margin: 0 0 35px;
  font-family: var(--up-font-serif);
  font-size: 2.4rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.6;
  letter-spacing: 0.06em;
  -webkit-font-feature-settings: "palt" 0;
  font-feature-settings: "palt" 0;
}

.up-reason__text {
  margin: 0;
  font-size: 1.6rem;
  font-weight: var(--up-font-weight-body);
  line-height: 2;
  letter-spacing: 0.1em;
  -webkit-font-feature-settings: "palt" 0;
  font-feature-settings: "palt" 0;
}

.up-reason__text--pc {
  display: none;
}

.up-reason__mark {
  background-image: linear-gradient(rgba(244, 187, 71, 0.5), rgba(244, 187, 71, 0.5));
  background-repeat: no-repeat;
  background-position: 0 4px;
  background-size: 100% 15px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.up-reason__scratch {
  position: relative;
  z-index: 2;
  width: 206px;
  height: 286px;
  margin: -57px 0 0 auto;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
}

.up-reason__scratch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 40%;
}

.up-reason__drop {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.up-reason__drop img {
  display: block;
  width: 100%;
  height: auto;
}

.up-reason__drop--1 {
  top: 51px;
  left: 248px;
  width: 80px;
}

.up-reason__drop--2 {
  top: auto;
  bottom: 53px;
  left: 22px;
  width: 130px;
}

.up-why {
  padding: 0 0 72px;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
}

.up-why > .up-heading {
  padding: 0 20px;
}

.up-why > .up-heading .up-heading__en {
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.up-why__intro {
  width: 335px;
  margin: 72px auto 0;
}

.up-why__lead,
.up-why__body,
.up-why__cause-text,
.up-why__step-text,
.up-why__close,
.up-features__lead,
.up-features__body,
.up-features__approach,
.up-features__summary,
.up-features__restore-text {
  margin: 0;
  -webkit-font-feature-settings: "palt" 0;
  font-feature-settings: "palt" 0;
}

.up-why__lead {
  margin-bottom: 40px;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}

.up-why__body {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

.up-why__causes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  width: 335px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.up-why__causes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.up-why__cause-label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--up-color-accent);
  border-radius: 50px;
  background: #fff;
  color: var(--up-color-accent);
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
}

.up-why__cause-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 223.93 / 134.991;
  margin: 0;
}

.up-why__cause-photo-inner {
  position: absolute;
  z-index: 0;
  inset: 4.44% 2.68%;
  overflow: hidden;
  border-radius: 24px;
}

.up-why__cause-photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-why__cause-photo-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.up-why__causes li:nth-child(1) .up-why__cause-photo-inner img {
  object-position: 59% 45%;
}

.up-why__causes li:nth-child(2) .up-why__cause-photo-inner img {
  object-position: 54% 40%;
}

.up-why__causes li:nth-child(3) .up-why__cause-photo-inner img {
  object-position: 53% 64%;
}

.up-why__causes li:nth-child(4) .up-why__cause-photo-inner img {
  object-position: 60% 60%;
}

.up-why__causes li:nth-child(5) .up-why__cause-photo-inner img {
  object-position: 50% 34%;
}

.up-why__cause-text {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
}

.up-why__question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 321px;
  margin: 61px auto 0;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: left;
  font-feature-settings: "palt" 0;
}

.up-why__question-line {
  display: block;
  box-sizing: border-box;
  overflow: visible;
  height: 29px;
  margin: 0 auto;
  padding: 6px 12px 7px 6px;
  background: #fff;
  box-shadow: 0 0 16px rgba(134, 134, 134, 0.2);
  white-space: nowrap;
}

.up-why__question-line:first-child {
  width: 236px;
}

.up-why__question-line:last-child {
  width: 321px;
  padding-right: 14px;
}

.up-why__cycle {
  margin-top: 62px;
}

.up-why__diagram {
  position: relative;
  width: 335px;
  margin: 0 auto;
  padding-top: 28px;
  text-align: center;
}

.up-why__diagram-heading {
  position: relative;
  overflow: visible;
}

.up-why__diagram-kicker,
.up-why__diagram-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--up-color-accent);
  font-family: var(--up-font-serif);
  font-weight: 300;
  line-height: 1.2;
}

.up-why__diagram-kicker {
  font-size: 2.2rem;
  letter-spacing: 0.06em;
}

.up-why__diagram-title {
  margin-top: 12px;
  font-size: 3.6rem;
  letter-spacing: 0.06em;
}

/* 枠はグリフ実寸（Figma SP 330.195 / PC 530.946）。見出しの中央に置き、ハロー込み viewBox は img で中央重ね */
.up-why__diagram-script {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  overflow: visible;
  width: 88.053vw;
  max-width: none;
  aspect-ratio: 530.946 / 81.714;
  margin: 0;
  transform: translate(-50%, 23%);
  pointer-events: none;
}

.up-why__diagram-script picture {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: calc(621 / 530.946 * 100%);
  max-width: none;
  transform: translate(-50%, -50%);
}

.up-why__diagram-script img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  /* SP: Figma `0 0 40px #868686` 相当。PC用SVGを縮小するとハローが濃く見えるため画面pxで乗せる */
  filter: drop-shadow(0 0 20px #868686);
}

@media print, screen and (min-width: 768px) {
  .up-why__diagram-script img {
    filter: none;
  }
}

.up-why__petals {
  width: 335px;
  margin: 68px auto 0;
}

.up-why__petals video,
.up-why__petals img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  background-color: transparent;
}

.up-why__petals [hidden] {
  display: none;
}

.up-why__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 335px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
}

.up-why__steps > li {
  width: 100%;
}

.up-why__steps > li:not(:last-child) {
  margin-bottom: 10px;
}

.up-why__steps > li:not(:last-child)::after {
  display: block;
  width: 0;
  height: 0;
  margin: 10px auto 0;
  border-width: 16px 9px 0;
  border-style: solid;
  border-color: var(--up-color-accent) transparent transparent;
  content: "";
}

.up-why__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 0 35px rgba(134, 134, 134, 0.1);
}

.up-why__step-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 292px;
}

.up-why__step-label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 30px;
  border: 1px solid var(--up-color-accent);
  border-radius: 30px;
  background: #fff;
  color: var(--up-color-accent);
  font-family: var(--up-font-serif);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.up-why__step-text {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}

.up-why__step-illust {
  position: relative;
  width: 147px;
  height: 136px;
  overflow: hidden;
}

.up-why__step-illust img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.up-why__steps > li:nth-child(3) .up-why__step,
.up-why__steps > li:nth-child(4) .up-why__step {
  gap: 20px;
}

.up-why__steps > li:nth-child(3) .up-why__step-illust {
  height: 138px;
}

.up-why__steps > li:nth-child(3) .up-why__step-illust img {
  position: absolute;
  top: -52.07%;
  left: -27.8%;
  width: 150.84%;
  height: 160.04%;
}

.up-why__steps > li:nth-child(4) .up-why__step-illust {
  height: 149px;
}

.up-why__steps > li:nth-child(4) .up-why__step-illust img {
  position: absolute;
  top: -10.93%;
  left: -39.12%;
  width: 154.77%;
  height: 152.18%;
}

.up-why__steps > li:nth-child(5) .up-why__step-illust {
  height: 126px;
}

.up-why__steps > li:nth-child(5) .up-why__step-illust img {
  position: absolute;
  top: -11.11%;
  left: -0.68%;
  width: 101.36%;
  height: 118.25%;
}

.up-why__close {
  width: 335px;
  margin: 67px auto 0;
  text-align: center;
}

.up-why__close-lead {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.up-why__close-main {
  margin: 23px 0 0;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.up-why__close-brand {
  margin: 25px 0 0;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.up-why__close-break {
  display: block;
}

.up-why__quote {
  position: relative;
  display: inline-block;
  padding: 0 29px 8px;
  overflow: visible;
  background-image: linear-gradient(var(--up-color-primary), var(--up-color-primary));
  background-repeat: no-repeat;
  background-position: 29px 12px;
  background-size: calc(100% - 58px) 11px;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  letter-spacing: 0.1em;
}

.up-why__quote::before,
.up-why__quote::after {
  position: absolute;
  top: 50%;
  color: var(--up-color-primary);
  font-family: var(--up-font-serif);
  font-size: 4.4rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-52%);
}

.up-why__quote::before {
  left: 0;
  content: "“";
}

.up-why__quote::after {
  right: 0;
  content: "”";
}

.up-features {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
}

.up-features__hero {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.up-features__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.up-features__hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18%;
  background: linear-gradient(to bottom, rgb(250 246 234 / 0%), var(--up-color-surface));
  pointer-events: none;
  content: "";
}

.up-features__inner {
  position: relative;
  z-index: 1;
  margin-top: -570px;
}

.up-features__inner > .up-heading {
  color: var(--up-color-muted);
}

.up-features__inner > .up-heading .up-heading__en {
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.up-features__intro {
  width: 335px;
  margin: 72px auto 0;
}

.up-features__lead {
  margin-bottom: 40px;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}

.up-features__body {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

.up-features__stage {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 335px;
  margin: 43px auto 0;
}

.up-features__panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 58px 27px 75px;
  overflow: visible;
  background: transparent;
  border-radius: 40px;
  transform: translateZ(0);
}

.up-features__panel-skin {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  border-radius: inherit;
  box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
  pointer-events: none;
}

.up-features__ripple {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.up-features__ripple img {
  display: block;
  width: 100%;
  height: auto;
}

.up-features__drop {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.up-features__drop img {
  display: block;
  width: 100%;
  height: auto;
}

.up-features__drop--1 {
  top: 27px;
  left: 81px;
  width: 56px;
}

.up-features__vert {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 11px;
  margin: 0 0 55px;
  font-family: var(--up-font-serif);
  font-size: 2.4rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
}

.up-features__vert span {
  display: block;
  width: 1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  letter-spacing: 0.06em;
}

.up-features__approach {
  position: relative;
  z-index: 1;
  width: 282px;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.1em;
}

.up-features__mark {
  background-image: linear-gradient(#f1f1f1, #f1f1f1);
  background-repeat: no-repeat;
  background-position: 0 0.72em;
  background-size: 100% 15px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.up-features__mark--short {
  background-size: 158px 15px;
}

.up-features__pair {
  position: relative;
  z-index: 1;
  width: 320px;
  margin: 29px auto 0;
}

.up-features__pair img {
  display: block;
  width: 100%;
  height: auto;
}

.up-features__summary {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 38px 0 0;
  font-size: 1.6rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-align: center;
}

.up-features__summary-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 18px;
}

.up-features__summary-end {
  margin-top: 18px;
  line-height: 1.5;
}

.up-features__quote {
  position: relative;
  display: inline-block;
  padding: 0 22px 4px;
  overflow: visible;
  background-image: linear-gradient(#f1f1f1, #f1f1f1);
  background-repeat: no-repeat;
  background-position: 22px 10px;
  background-size: 112px 11px;
  font-family: var(--up-font-serif);
  font-size: 2rem;
  letter-spacing: 0.1em;
}

.up-features__quote::before,
.up-features__quote::after {
  position: absolute;
  top: 50%;
  color: #f1f1f1;
  font-family: var(--up-font-serif);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-52%);
}

.up-features__quote::before {
  left: 0;
  content: "“";
}

.up-features__quote::after {
  right: 0;
  content: "”";
}

.up-features__summary-rest {
  margin-left: 0.2em;
}

.up-features__itch,
.up-features__moist {
  font-weight: 600;
}

.up-features__itch {
  color: var(--up-color-primary);
}

.up-features__moist {
  color: var(--up-color-accent);
}

.up-features__restore {
  position: relative;
  z-index: 2;
  margin-top: 70px;
}

.up-features__products {
  position: relative;
  width: 206px;
  height: 286px;
  margin: 0 auto;
  overflow: visible;
  border-radius: 30px;
}

.up-features__products-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
}

.up-features__products-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 38%;
}

.up-features__products .up-features__drop img {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.up-features__drop--2 {
  z-index: 3;
  top: auto;
  right: -56px;
  bottom: -28px;
  width: 88px;
}

.up-features__drop--3 {
  z-index: 3;
  top: auto;
  left: 84.466%;
  right: auto;
  bottom: -53px;
  width: 27px;
}

.up-features__restore-copy {
  margin-top: 57px;
  text-align: left;
}

.up-features__restore-title {
  margin: 0 0 45px;
  font-family: var(--up-font-serif);
  font-size: 2.4rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.up-features__restore-text {
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.1em;
}

.up-features__care {
  --up-care-mask: url("/chc/brand/urepearl/images/mask_features_care_001.svg");
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  width: 212px;
  height: 126px;
  overflow: visible;
  border-radius: 20px;
  pointer-events: none;
  -webkit-mask-image: var(--up-care-mask);
  mask-image: var(--up-care-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 105.41% 109.09%;
  mask-size: 105.41% 109.09%;
}

.up-features__care img {
  position: absolute;
  top: -17px;
  left: -13px;
  display: block;
  width: 230px;
  max-width: none;
  height: 153px;
  object-fit: fill;
  filter: blur(3.5px);
  opacity: 0.5;
}

.up-fab {
  position: fixed;
  z-index: 90;
  left: 5px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: 365px;
  max-width: calc(100vw - 10px);
  height: 89px;
  margin: 0;
  overflow: hidden;
  text-decoration: none;
}

.up-fab:focus-visible {
  outline: 2px solid var(--up-color-accent);
  outline-offset: 3px;
}

.up-fab img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  :root {
    --up-header-height: 18.667vw;
  }

  .up-header {
    height: var(--up-header-height);
  }

  .up-header__inner {
    height: 18.667vw;
    padding-left: 4vw;
  }

  .up-header__logo {
    width: 26.667vw;
    height: 14.667vw;
  }

  .up-header__actions {
    height: 18.667vw;
  }

  .up-header__buy,
  .up-header__menu {
    gap: 0.533vw;
    width: 18.667vw;
    height: 18.667vw;
    font-size: 2.667vw;
  }

  .up-header__buy img {
    width: 6.933vw;
    height: 6.933vw;
  }

  .up-header__menu-icon {
    gap: 1.333vw;
    width: 8vw;
    height: 7.2vw;
  }

  .up-header__menu-icon i {
    width: 8vw;
    height: 0.533vw;
    border-radius: 0.533vw;
  }

  .up-nav__panel {
    border-radius: 0 0 0 8vw;
  }

  .up-nav__inner {
    padding: 34.933vw 8vw 10.667vw;
  }

  .up-nav__cols,
  .up-nav__col {
    gap: 10.667vw;
  }

  .up-nav__home,
  .up-nav__heading,
  .up-nav__buy-heading {
    font-size: 5.867vw;
  }

  .up-nav__home-arrow {
    width: 4.267vw;
    height: 2.4vw;
  }

  .up-nav__group {
    gap: 5.333vw;
  }

  .up-nav__buy-heading {
    margin-top: 10.667vw;
  }

  .up-nav__links {
    gap: 2.667vw;
  }

  .up-nav__links a {
    font-size: 4.8vw;
  }

  .up-nav__stores {
    gap: 4.8vw;
    margin-top: 5.333vw;
  }

  .up-nav__store {
    height: 36.533vw;
    border-radius: 5.333vw;
  }

  .up-nav__store-logo {
    height: 21.333vw;
  }

  .up-nav__store-external {
    top: 3.467vw;
    right: 3.467vw;
    width: 4.533vw;
    height: 4.533vw;
  }

  .up-mv__inner {
    max-width: none;
    height: 183.467vw;
  }

  .up-mv__main-image {
    height: 101.333vw;
  }

  .up-mv__statement {
    font-size: 5.333vw;
  }

  .up-mv__statement-visual {
    top: 28.267vw;
    left: 5.867vw;
    width: 18.933vw;
    height: 67.467vw;
  }

  .up-mv__products {
    top: 101.333vw;
    left: 31.733vw;
    width: 57.867vw;
    height: 83.259vw;
  }

  .up-mv__moisture {
    top: 113.067vw;
    left: 8.533vw;
    width: 16vw;
    height: 29.333vw;
    font-size: 15.2vw;
  }

  .up-mv__plus {
    top: 148vw;
    left: 9.6vw;
    width: 15.733vw;
    height: 15.733vw;
  }

  .up-mv__plus::before,
  .up-mv__plus::after {
    height: 0.363vw;
  }

  .up-mv__itch {
    top: 169.333vw;
    font-size: 15.2vw;
  }

  .up-mv__itch > span:nth-child(1) {
    letter-spacing: 0.304vw;
  }

  .up-mv__itch > span:nth-child(2) {
    letter-spacing: 0.608vw;
  }

  .up-heading {
    padding-inline: 5.333vw;
  }

  .up-heading__en {
    margin-bottom: 5.333vw;
    font-size: 3.2vw;
  }

  .up-heading__ja {
    font-size: 5.867vw;
  }

  .up-struggle {
    padding-top: 19.467vw;
  }

  .up-struggle__panel {
    width: 90.933vw;
    margin-top: 13.067vw;
  }

  .up-struggle__frame {
    min-height: 128.267vw;
    padding: 11.2vw 3.733vw 29.333vw 13.333vw;
  }

  .up-struggle__items {
    gap: 6.4vw;
    padding-left: 12.267vw;
  }

  .up-struggle__items li {
    width: 53.067vw;
    font-size: 4.267vw;
    letter-spacing: 0.1em;
  }

  .up-struggle__items li:nth-child(4) {
    width: 41.867vw;
  }

  .up-struggle__check {
    top: 0.8vw;
    left: -12.267vw;
    width: 8.267vw;
    height: 6.4vw;
  }

  .up-struggle__lead {
    width: 61.867vw;
    margin-top: -22.933vw;
    padding: 6.4vw 3.733vw 8.267vw;
    font-size: 6.4vw;
  }

  .up-reason {
    padding: 6.933vw 0 10.667vw;
  }

  .up-reason__inner {
    max-width: none;
    min-height: 205.867vw;
    padding-top: 26.4vw;
  }

  .up-reason__care {
    left: -1.333vw;
    width: 56.533vw;
    height: 33.6vw;
    border-radius: 5.333vw;
  }

  .up-reason__care img {
    width: 64.267vw;
    height: 42.933vw;
    margin-top: -9.067vw;
    filter: blur(1.2vw);
  }

  .up-reason__body {
    width: 89.333vw;
    min-height: 118.4vw;
    margin-top: 0;
    padding: 17.867vw 5.333vw 32vw 5.6vw;
    border-radius: 8vw;
    box-shadow: 0 0 20.267vw rgba(134, 134, 134, 0.1);
  }

  .up-reason__title {
    margin-bottom: 9.333vw;
    font-size: 6.4vw;
  }

  .up-reason__text {
    width: 76.533vw;
    margin-left: 0.8vw;
    font-size: 4.267vw;
    letter-spacing: 0.1em;
  }

  .up-reason__mark {
    background-image: linear-gradient(#f4bb47, #f4bb47);
    background-position: 0 1.05em;
    background-size: 100% 11px;
  }

  .up-reason__scratch {
    width: 54.933vw;
    height: 76.267vw;
    margin-top: -15.2vw;
    border-radius: 8vw;
    box-shadow: 0 0 20.267vw rgba(134, 134, 134, 0.1);
  }

  .up-reason__drop--1 {
    top: 13.6vw;
    left: 66.133vw;
    width: 21.333vw;
  }

  .up-reason__drop--2 {
    top: auto;
    bottom: 14.133vw;
    left: 5.867vw;
    width: 34.667vw;
  }

  .up-why {
    padding: 0 0 19.2vw;
  }

  .up-why > .up-heading {
    padding-inline: 5.333vw;
  }

  .up-why > .up-heading .up-heading__en {
    margin-bottom: 5.333vw;
    font-size: 3.733vw;
  }

  .up-why__intro,
  .up-why__causes,
  .up-why__diagram,
  .up-why__steps,
  .up-why__close,
  .up-features__intro,
  .up-features__stage {
    width: 89.333vw;
  }

  .up-why__intro {
    margin-top: 19.2vw;
  }

  .up-why__lead,
  .up-features__lead {
    margin-bottom: 10.667vw;
    font-size: 4.8vw;
  }

  .up-why__body,
  .up-features__body {
    font-size: 4.267vw;
  }

  .up-why__causes {
    gap: 8vw 5.333vw;
    margin-top: 10.667vw;
  }

  .up-why__causes li {
    gap: 2.667vw;
  }

  .up-why__cause-label {
    padding: 2.667vw;
    font-size: 4.267vw;
  }

  .up-why__cause-photo-inner {
    border-radius: 4.5vw;
  }

  .up-why__cause-text {
    font-size: 3.733vw;
  }

  .up-why__question {
    width: 85.6vw;
    gap: 1.6vw;
    margin-top: 16.267vw;
    font-size: 5.867vw;
  }

  .up-why__question-line {
    height: 7.733vw;
    padding: 1.6vw 3.2vw 1.867vw 1.6vw;
  }

  .up-why__question-line:first-child {
    width: 62.933vw;
  }

  .up-why__question-line:last-child {
    width: 85.6vw;
    padding-right: 3.733vw;
  }

  .up-why__cycle {
    margin-top: 16.533vw;
  }

  .up-why__diagram {
    padding-top: 7.467vw;
  }

  .up-why__diagram-kicker {
    font-size: 5.867vw;
  }

  .up-why__diagram-title {
    margin-top: 3.2vw;
    font-size: 9.6vw;
  }

  .up-why__diagram-script {
    width: 88.053vw;
  }

  .up-why__petals {
    width: 89.333vw;
    margin-top: 5vw;
  }

  .up-why__steps {
    margin-top: 5.333vw;
  }

  .up-why__steps > li:not(:last-child) {
    margin-bottom: 2.667vw;
  }

  .up-why__steps > li:not(:last-child)::after {
    margin-top: 2.667vw;
    border-width: 4.267vw 2.4vw 0;
  }

  .up-why__step {
    gap: 2.667vw;
    padding: 5.333vw 0;
    border-radius: 10.667vw;
    box-shadow: 0 0 9.333vw rgba(134, 134, 134, 0.1);
  }

  .up-why__step-copy {
    gap: 5.333vw;
    width: 77.867vw;
  }

  .up-why__step-label {
    padding: 2.667vw 8vw;
    border-radius: 8vw;
    font-size: 4.267vw;
  }

  .up-why__step-text {
    font-size: 4vw;
  }

  .up-why__step-illust {
    width: 39.2vw;
    height: 36.267vw;
  }

  .up-why__steps > li:nth-child(3) .up-why__step-illust {
    height: 36.8vw;
  }

  .up-why__steps > li:nth-child(4) .up-why__step-illust {
    height: 39.733vw;
  }

  .up-why__steps > li:nth-child(5) .up-why__step-illust {
    height: 33.6vw;
  }

  .up-why__close {
    margin-top: 17.867vw;
  }

  .up-why__close-lead {
    font-size: 4.267vw;
  }

  .up-why__close-main {
    margin-top: 6.133vw;
    font-size: 5.867vw;
    line-height: 1.45;
  }

  .up-why__close-brand {
    margin-top: 6.667vw;
    font-size: 4.267vw;
    line-height: 1.2;
  }

  .up-why__quote {
    margin-top: 4vw;
    padding: 0 7.733vw 2.133vw;
    background-position: 7.733vw 3.333vw;
    background-size: calc(100% - 15.466vw) 2.933vw;
    font-size: 5.867vw;
  }

  .up-why__quote::before,
  .up-why__quote::after {
    font-size: 11.733vw;
  }

  .up-features {
    padding-bottom: 63.2vw;
  }

  .up-features__hero {
    height: 170.667vw;
  }

  .up-features__inner {
    margin-top: -152vw;
  }

  .up-features__inner > .up-heading .up-heading__en {
    margin-bottom: 5.333vw;
    font-size: 3.733vw;
  }

  .up-features__intro {
    margin-top: 19.2vw;
  }

  .up-features__stage {
    width: 89.333vw;
    margin-top: 11.733vw;
  }

  .up-features__panel {
    height: 393.333vw;
    padding: 15.467vw 7.2vw 20vw;
    border-radius: 10.667vw;
  }

  .up-features__panel-skin {
    box-shadow: 0 0 20.267vw rgba(134, 134, 134, 0.1);
  }

  .up-features__ripple {
    right: 0;
    width: 100%;
  }

  .up-features__drop--1 {
    top: 7.2vw;
    left: 21.6vw;
    width: 14.933vw;
  }

  .up-features__vert {
    gap: 2.933vw;
    margin-bottom: 14.667vw;
    font-size: 6.4vw;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }

  .up-features__vert span {
    width: 6.4vw;
    letter-spacing: 0.21em;
  }

  .up-features__approach {
    width: 75.2vw;
    font-size: 4.267vw;
  }

  .up-features__mark {
    background-position: 0 2.933vw;
    background-size: 100% 4vw;
  }

  .up-features__mark--short {
    background-size: 42.133vw 4vw;
  }

  .up-features__pair {
    width: 85.333vw;
    margin-top: 7.733vw;
    margin-right: 0;
    margin-left: -5.2vw;
  }

  .up-features__summary {
    width: 89.333vw;
    margin-top: 10.133vw;
    margin-right: -7.2vw;
    margin-left: -7.2vw;
    font-size: 4.267vw;
  }

  .up-features__summary-line {
    margin-top: 0;
  }

  .up-features__summary-end {
    margin-top: 1.6vw;
  }

  .up-features__quote {
    padding: 0 5.867vw 1.067vw;
    background-position: 5.867vw 2.667vw;
    background-size: 29.867vw 2.933vw;
    font-size: 5.333vw;
  }

  .up-features__quote::before,
  .up-features__quote::after {
    font-size: 13.333vw;
  }

  .up-features__restore {
    margin-top: 5.6vw;
  }

  .up-features__products {
    width: 54.933vw;
    height: 76.267vw;
    border-radius: 8vw;
  }

  .up-features__products-clip {
    box-shadow: 0 0 20.267vw rgba(134, 134, 134, 0.1);
  }

  .up-features__products-clip img {
    position: absolute;
    top: -9.477vw;
    left: -45.106vw;
    width: 119.961vw;
    max-width: none;
    height: 87.092vw;
    object-fit: fill;
    object-position: 0 0;
  }

  .up-features__drop--2 {
    right: -14.933vw;
    bottom: -7.467vw;
    width: 23.392vw;
  }

  .up-features__drop--3 {
    bottom: -14.035vw;
    width: 7.088vw;
  }

  .up-features__restore-copy {
    margin-top: 15.2vw;
    margin-left: 1.6vw;
  }

  .up-features__restore-title {
    margin-bottom: 8.5vw;
    font-size: 6.4vw;
    line-height: 1.6;
    letter-spacing: 0.06em;
  }

  .up-features__restore-text {
    font-size: 4.267vw;
    line-height: 2.4;
    letter-spacing: 0.06em;
  }

  .up-features__care {
    top: 383.733vw;
    left: -5.333vw;
    bottom: auto;
    width: 56.533vw;
    height: 33.6vw;
    margin: 0;
    border-radius: 5.333vw;
  }

  .up-features__care img {
    top: -4.581vw;
    left: -3.513vw;
    width: 61.366vw;
    height: 40.931vw;
    filter: blur(1.867vw);
  }

  .up-fab {
    left: 1.333vw;
    bottom: calc(2.667vw + env(safe-area-inset-bottom, 0px));
    width: 97.333vw;
    max-width: none;
    height: 23.733vw;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1023px) {
  body#top,
  body#product,
  body#article,
  .up-main#l-content {
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  :root {
    --up-header-height: clamp(82px, 10.5vw, 96px);
  }

  .up-header {
    height: var(--up-header-height);
  }

  .up-header__inner {
    height: 100%;
    padding-left: var(--up-layout-gutter);
  }

  .up-header__logo {
    width: clamp(108px, 13vw, 120px);
    height: auto;
    aspect-ratio: 123 / 67;
  }

  .up-header__actions {
    height: 100%;
  }

  .up-header__buy,
  .up-header__menu {
    gap: 4px;
    width: clamp(82px, 10.5vw, 96px);
    height: 100%;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
  }

  .up-header__buy img {
    width: clamp(27px, 3.3vw, 32px);
    height: clamp(27px, 3.3vw, 32px);
  }

  .up-nav__panel {
    width: min(1040px, 85vw);
    border-radius: 60px 0 0 60px;
  }

  .up-nav__inner {
    padding: calc(var(--up-header-height) + 40px) 48px 56px;
  }

  .up-nav__home,
  .up-nav__heading,
  .up-nav__buy-heading {
    font-size: 24px;
  }

  .up-nav__links a {
    font-size: 20px;
  }

  .up-nav__store {
    height: 120px;
  }

  .up-nav__store-logo {
    height: 72px;
  }

  .up-mv__inner {
    max-width: none;
    height: 69.444vw;
    min-height: 533px;
  }

  .up-mv__main-image {
    width: 62.5%;
    height: 100%;
    border-radius: 0 0 clamp(54px, 6.944vw, 71px) 0;
  }

  .up-mv__statement {
    font-size: clamp(2.4rem, 2.917vw, 3rem);
  }

  .up-mv__statement-visual {
    display: none;
  }

  .up-mv__statement-line {
    position: absolute;
    z-index: 2;
    display: block;
    overflow: visible;
    clip: unset;
    clip-path: none;
    box-sizing: border-box;
    width: 3.056vw;
    height: auto;
    padding-top: clamp(4px, 0.55vw, 6px);
    background: #fff;
    -webkit-font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
    font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
    writing-mode: vertical-rl;
    white-space: nowrap;
  }

  .up-mv__statement-line--01 {
    top: 40.1%;
    left: 16.94%;
    min-height: 36.7%;
  }

  .up-mv__statement-line--02 {
    top: 48.1%;
    left: 12.43%;
    min-height: 41.6%;
  }

  .up-mv__statement-line--03 {
    top: 69.1%;
    left: 8.33%;
    width: 2.639vw;
    min-height: 26.8%;
  }

  .up-mv__sub-image {
    position: absolute;
    top: 11.1%;
    right: 0;
    display: block;
    width: 43.958%;
    height: 36.4%;
    margin: 0;
    overflow: hidden;
    border-radius: clamp(22px, 2.778vw, 28px) 0 0 clamp(22px, 2.778vw, 28px);
  }

  .up-mv__sub-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .up-mv__products {
    top: 50.7%;
    left: auto;
    right: 4.861%;
    width: 20.625%;
    height: 42.733%;
  }

  .up-mv__moisture {
    top: 53.8%;
    left: 66.1%;
    width: 6.12%;
    height: 16.6%;
    font-size: clamp(4.6rem, 5.972vw, 6.1rem);
    letter-spacing: 0.2em;
  }

  .up-mv__plus {
    top: 74.5%;
    left: 66.1%;
    width: 6.042vw;
    height: 6.042vw;
  }

  .up-mv__plus::before,
  .up-mv__plus::after {
    height: clamp(1.4px, 0.139vw, 2px);
  }

  .up-mv__itch {
    top: 87.3%;
    left: 81.6%;
    font-size: clamp(4.6rem, 5.972vw, 6.1rem);
  }

  .up-heading__en {
    margin-bottom: clamp(24px, 3vw, 31px);
    font-size: clamp(1.2rem, 1.45vw, 1.4rem);
  }

  .up-heading__ja {
    font-size: clamp(2.4rem, 2.9vw, 2.8rem);
  }

  .up-struggle {
    padding-top: var(--up-section-space);
  }

  .up-struggle__panel {
    container-type: inline-size;
    width: calc(100% - (var(--up-layout-gutter) * 2));
    margin-top: clamp(40px, 5vw, 50px);
  }

  .up-struggle__frame {
    min-height: 21.75cqw;
    height: auto;
    padding: 3.4167cqw 0 9.5cqw;
  }

  .up-struggle__frame::before {
    background-image: url("../images/frame_list_001_pc.svg");
  }

  .up-struggle__items {
    grid-template-columns: 432fr 334fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 1.4167cqw 7.75cqw;
    width: 75%;
    max-width: none;
    margin: 0 0 0 12.5%;
    padding-left: 3.4167cqw;
    align-items: start;
  }

  .up-struggle__items li {
    display: block;
    width: auto;
    height: 2cqw;
    min-height: 2cqw;
    padding-top: 0.6667cqw;
    box-sizing: border-box;
    font-size: 1.5cqw;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: visible;
    text-box-trim: unset;
    text-box-edge: auto;
  }

  .up-struggle__items li:nth-child(4) {
    width: auto;
  }

  .up-struggle__check {
    top: 0;
    left: -3.4167cqw;
    width: 2.5833cqw;
    height: 2cqw;
    transform: none;
  }

  .up-struggle__lead {
    width: 52.5cqw;
    margin: -5.5cqw auto 0;
    padding: 1.0833cqw 2.3333cqw 1.4167cqw;
    font-size: 2.8333cqw;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .up-struggle__lead-line {
    white-space: nowrap;
  }

  .up-br-sp {
    display: none;
  }

  .up-br-pc {
    display: inline;
  }

  .up-reason {
    padding: clamp(70px, 8vw, 82px) 0 clamp(48px, 6vw, 60px);
  }

  .up-reason__inner {
    width: calc(100% - (var(--up-layout-gutter) * 2));
    max-width: 975px;
    min-height: clamp(680px, 76vw, 740px);
    padding-top: 0;
  }

  .up-reason__care {
    top: 12%;
    left: 0;
    width: 34%;
    height: 23%;
    border-radius: clamp(20px, 3.5vw, 40px);
  }

  .up-reason__care img {
    width: 114%;
    height: 128%;
    margin-top: -16%;
  }

  .up-reason__body {
    position: absolute;
    top: 31%;
    left: 7%;
    width: 66%;
    min-height: 62%;
    margin: 0;
    padding: clamp(72px, 6.875vw, 90px) clamp(56px, 5.972vw, 78px) clamp(56px, 4.792vw, 69px) clamp(72px, 6.875vw, 90px);
    border-radius: clamp(40px, 5vw, 52px);
  }

  .up-reason__title {
    margin-bottom: clamp(48px, 4.444vw, 60px);
    font-size: clamp(2.8rem, 2.361vw, 3.3rem);
    letter-spacing: 0.06em;
  }

  .up-reason__text {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    line-height: 2;
    letter-spacing: 0.1em;
  }

  .up-reason__mark {
    background-image: linear-gradient(#f4bb47, #f4bb47);
    background-position: 0 1.05em;
    background-size: 100% 11px;
  }

  .up-reason__text--sp {
    display: none;
  }

  .up-reason__text--pc {
    display: block;
  }

  .up-reason__scratch {
    position: absolute;
    top: 0;
    right: 0;
    width: 42%;
    height: 72%;
    margin: 0;
    border-radius: clamp(40px, 5vw, 52px);
  }

  .up-reason__drop--1 {
    top: 25%;
    left: 45%;
    width: clamp(60px, 7.5vw, 76px);
  }

  .up-reason__drop--2 {
    top: 78%;
    left: 78%;
    width: clamp(165px, 21vw, 215px);
  }

  .up-why {
    padding: clamp(72px, 9vw, 96px) 0 clamp(64px, 8vw, 88px);
  }

  .up-why > .up-heading {
    padding: 0 var(--up-layout-gutter);
  }

  .up-why > .up-heading .up-heading__en {
    margin-bottom: clamp(24px, 3vw, 35px);
    font-size: 1.4rem;
  }

  .up-why__intro {
    width: min(800px, calc(100% - (var(--up-layout-gutter) * 2)));
    margin-top: clamp(56px, 7vw, 70px);
  }

  .up-why__lead {
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  }

  .up-why__body {
    font-size: clamp(1.5rem, 1.8vw, 1.6rem);
    text-align: center;
    word-break: keep-all;
    line-break: strict;
  }

  .up-why__causes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - (var(--up-layout-gutter) * 2));
    max-width: 720px;
    gap: clamp(24px, 3vw, 32px) 20px;
    margin-top: clamp(40px, 5vw, 54px);
  }

  .up-why__causes li {
    gap: 16px;
  }

  .up-why__cause-label {
    width: fit-content;
    min-width: min(100%, 160px);
    padding: 10px 20px;
    font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  }

  .up-why__cause-photo-inner {
    border-radius: 20px;
  }

  .up-why__cause-text {
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    line-height: 1.8;
  }

  .up-why__question {
    width: min(392px, calc(100% - 48px));
    gap: 10px;
    margin-top: clamp(64px, 8vw, 102px);
    font-size: clamp(2.2rem, 2.8vw, 2.6rem);
  }

  .up-why__question-line:first-child {
    width: min(306px, 100%);
  }

  .up-why__question-line:last-child {
    width: min(386px, 100%);
  }

  .up-why__cycle {
    margin-top: clamp(48px, 6vw, 65px);
  }

  .up-why__diagram,
  .up-why__steps,
  .up-why__close {
    width: min(560px, calc(100% - (var(--up-layout-gutter) * 2)));
  }

  .up-why__diagram-kicker {
    font-size: clamp(2.2rem, 2.8vw, 2.4rem);
  }

  .up-why__diagram-title {
    margin-top: 16px;
    font-size: clamp(3.6rem, 5vw, 4.2rem);
  }

  .up-why__diagram-script {
    width: min(530.946px, 100%);
  }

  .up-why__petals {
    width: 100%;
    margin-top: clamp(40px, 5vw, 48px);
  }

  .up-why__step {
    flex-direction: row;
    justify-content: center;
    gap: clamp(24px, 4vw, 40px);
    padding: 20px 24px;
  }

  .up-why__step-copy {
    align-items: flex-start;
    width: min(292px, 55%);
  }

  .up-why__step-text {
    text-align: left;
  }

  .up-why__close-main {
    margin-top: clamp(24px, 3vw, 36px);
    font-size: clamp(2.4rem, 3vw, 2.8rem);
  }

  .up-why__quote {
    margin-top: 0;
    padding: 0 36px 6px;
    background-position: 36px 14px;
    background-size: calc(100% - 72px) 11px;
    font-size: clamp(2.4rem, 3vw, 2.8rem);
  }

  .up-why__quote::before,
  .up-why__quote::after {
    font-size: clamp(5rem, 6vw, 5.8rem);
  }

  .up-fab {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 180px;
    height: 204px;
    overflow: visible;
    transform: none;
  }
}

@media print, screen and (min-width: 768px) {
  .up-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
  }

  .up-fab.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  .up-features__hero {
    height: min(64.236vw, 925px);
  }

  .up-features {
    padding-bottom: 416px;
    overflow: visible;
  }

  .up-features__hero img {
    object-position: 50% 0;
  }

  .up-features__hero::after {
    height: 12%;
  }

  .up-features__inner {
    margin-top: calc(100px - min(64.236vw, 925px));
  }

  .up-features__inner > .up-heading .up-heading__en {
    margin-bottom: 35px;
    font-size: 1.4rem;
  }

  .up-features__inner > .up-heading .up-heading__ja {
    font-size: 2.8rem;
  }

  .up-features__intro {
    width: min(750px, calc(100% - (var(--up-layout-gutter) * 2)));
    margin-top: 100px;
    text-align: center;
  }

  .up-features__lead {
    font-size: 2.4rem;
  }

  .up-features__body {
    font-size: 1.8rem;
  }

  .up-features__stage {
    width: 800px;
    margin-top: 54px;
  }

  .up-features__panel {
    width: 100%;
    height: 1369px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 32px 33px 0;
    overflow: visible;
    background: transparent;
    border-radius: 60px;
    box-shadow: none;
  }

  .up-features__panel-skin {
    background: #fff;
    box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
  }

  .up-features__ripple {
    top: 0;
    right: 0;
    width: 100%;
  }

  .up-features__drop--1 {
    z-index: 2;
    top: 32px;
    left: 108px;
    width: 76px;
  }

  .up-features__vert {
    position: absolute;
    z-index: 2;
    top: 86px;
    left: 156px;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
    font-size: 2.8rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }

  .up-features__vert span {
    width: 1em;
    letter-spacing: 0.06em;
  }

  .up-features__approach {
    position: absolute;
    z-index: 2;
    top: 126px;
    left: 314px;
    width: 399px;
    margin: 0;
    font-size: 1.8rem;
    line-height: 2.4;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .up-features__mark {
    background-position: 0 0.75em;
    background-size: 265px 15px;
  }

  .up-features__mark--short {
    background-size: 210px 15px;
  }

  .up-features__pair {
    position: relative;
    z-index: 2;
    width: 734px;
    max-width: 100%;
    margin: 356px auto 0;
  }

  .up-features__summary {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    font-size: 2.4rem;
  }

  .up-features__summary-line {
    margin-top: 8px;
  }

  .up-features__summary-end {
    margin-top: 4px;
    line-height: 1.9;
  }

  .up-features__quote {
    padding: 0 32px 7px;
    background-position: 32px 14px;
    background-size: 174px 11px;
    font-size: 3.1rem;
  }

  .up-features__quote::before,
  .up-features__quote::after {
    font-size: 8rem;
  }

  .up-features__restore {
    position: absolute;
    z-index: 2;
    top: 916px;
    left: -100px;
    display: grid;
    grid-template-columns: 458px 323px;
    gap: 0 51px;
    align-items: start;
    width: 832px;
    margin: 0;
  }

  .up-features__products {
    width: 458px;
    height: 635px;
    margin: 0;
    overflow: visible;
    border-radius: 60px;
    box-shadow: none;
  }

  .up-features__products-clip {
    box-shadow: 0 0 76px rgba(134, 134, 134, 0.1);
  }

  .up-features__products-clip img {
    position: absolute;
    top: -79px;
    left: -376px;
    width: 1000px;
    max-width: none;
    height: 726px;
    object-fit: fill;
    object-position: 0 0;
    border-radius: 0;
    box-shadow: none;
  }

  .up-features__drop--2 {
    top: 371px;
    right: auto;
    left: 404px;
    bottom: auto;
    width: 136px;
  }

  .up-features__drop--3 {
    display: block;
    top: 517px;
    left: 404px;
    right: auto;
    bottom: auto;
    width: 41px;
  }

  .up-features__restore-copy {
    margin: 71px 0 0;
    min-width: 0;
    width: 323px;
  }

  .up-features__restore-title {
    margin-bottom: 52px;
    font-size: 3.4rem;
    white-space: nowrap;
  }

  .up-features__restore-text {
    font-size: 1.8rem;
  }

  .up-features__care {
    top: 1268px;
    right: auto;
    bottom: auto;
    left: 630px;
    width: 370px;
    height: 220px;
    margin: 0;
    border-radius: 40px;
  }

  .up-features__care img {
    position: absolute;
    top: -30px;
    left: -23px;
    width: 401px;
    max-width: none;
    height: 268px;
    object-fit: fill;
    filter: blur(3.5px);
    opacity: 0.5;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .up-features {
    --up-features-col: calc(100vw - (var(--up-layout-gutter) * 2));
    --up-features-scale: calc(var(--up-features-col) / 800px);
    padding-bottom: calc(416px * var(--up-features-scale));
  }

  .up-features__intro {
    width: calc(var(--up-features-col) * 0.84375);
  }

  .up-features__stage {
    left: 50%;
    margin-left: -400px;
    transform: scale(var(--up-features-scale));
    transform-origin: top center;
    margin-bottom: calc(1369px * var(--up-features-scale) - 1369px);
  }
}

@media print, screen and (min-width: 1024px) {
  .up-main {
    overflow-x: clip;
    overflow-y: visible;
  }

  :root {
    --up-header-height: clamp(92px, 7.708vw, 111px);
  }

  .up-header {
    height: var(--up-header-height);
  }

  .up-header__inner {
    height: 100%;
    padding-left: var(--up-layout-gutter);
  }

  .up-header__logo {
    width: clamp(114px, 8.542vw, 123px);
    height: auto;
    aspect-ratio: 123 / 67;
  }

  .up-header__actions {
    height: 100%;
  }

  .up-header__buy,
  .up-header__menu {
    gap: 5px;
    width: clamp(92px, 7.639vw, 110px);
    height: 100%;
    font-size: clamp(1.1rem, 0.833vw, 1.2rem);
  }

  .up-header__buy img {
    width: clamp(29px, 2.222vw, 32px);
    height: clamp(29px, 2.222vw, 32px);
  }

  .up-nav__panel {
    width: min(1040px, 72.222vw);
    border-radius: min(100px, 6.944vw) 0 0 min(100px, 6.944vw);
  }

  .up-nav__inner {
    padding: calc(var(--up-header-height) + min(50px, 3.472vw)) min(110px, 7.639vw) min(80px, 5.556vw) min(83px, 5.764vw);
  }

  .up-nav__cols {
    flex-direction: row;
    gap: min(80px, 5.556vw);
    align-items: flex-start;
  }

  .up-nav__col {
    flex: 1;
    min-width: 0;
    gap: min(60px, 4.167vw);
  }

  .up-nav__home,
  .up-nav__heading,
  .up-nav__buy-heading {
    font-size: clamp(22px, 1.944vw, 28px);
  }

  .up-nav__home-arrow {
    width: 16px;
    height: 9px;
  }

  .up-nav__buy-heading {
    margin-top: min(75px, 5.208vw);
  }

  .up-nav__links a {
    font-size: clamp(18px, 1.667vw, 24px);
  }

  .up-nav__stores {
    flex-direction: row;
    gap: min(20px, 1.389vw);
    margin-top: min(13px, 0.903vw);
  }

  .up-nav__stores li {
    flex: 1;
    min-width: 0;
  }

  .up-nav__store {
    height: min(117px, 8.125vw);
    border-radius: 20px;
  }

  .up-nav__store-logo {
    height: min(84px, 5.833vw);
  }

  .up-nav__store-external {
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
  }

  .up-mv__inner {
    max-width: 1440px;
    height: min(1000px, 69.444vw);
  }

  .up-mv__main-image {
    width: 62.5%;
    height: 100%;
    border-radius: 0 0 min(100px, 6.944vw) 0;
  }

  .up-mv__statement {
    font-size: clamp(2.2rem, 2.917vw, 4.2rem);
  }

  .up-mv__statement-visual {
    display: none;
  }

  .up-mv__statement-line {
    position: absolute;
    z-index: 2;
    display: block;
    overflow: visible;
    clip: unset;
    clip-path: none;
    box-sizing: border-box;
    width: min(2.639vw, 38px);
    height: auto;
    padding-top: 8px;
    background: #fff;
    -webkit-font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
    font-feature-settings: "vert" 1, "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
    /* 白枠幅 ÷ 文字サイズ。大きくすると左、小さくすると右へ寄る */
    line-height: 1.048;
    writing-mode: vertical-rl;
    white-space: nowrap;
  }

  .up-mv__statement-line--01 {
    top: 40.1%;
    left: 16.94%;
    width: min(3.056vw, 44px);
    min-height: 36.7%;
  }

  .up-mv__statement-line--02 {
    top: 48.1%;
    left: 12.43%;
    width: min(3.056vw, 44px);
    min-height: 41.6%;
  }

  .up-mv__statement-line--03 {
    top: 69.1%;
    left: 8.33%;
    width: min(3.056vw, 44px);
    min-height: 26.8%;
  }

  .up-mv__sub-image {
    position: absolute;
    top: 11.1%;
    right: 0;
    display: block;
    width: 43.958%;
    height: 36.4%;
    margin: 0;
    overflow: hidden;
    border-radius: min(40px, 2.778vw) 0 0 min(40px, 2.778vw);
  }

  .up-mv__sub-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .up-mv__products {
    top: 50.7%;
    left: auto;
    right: 4.861%;
    width: 20.625%;
    height: 42.733%;
  }

  .up-mv__moisture {
    top: 53.8%;
    left: 66.1%;
    width: 6.12%;
    height: 16.6%;
    font-size: clamp(4.6rem, 5.972vw, 8.6rem);
    letter-spacing: 0.2em;
  }

  .up-mv__plus {
    top: 74.5%;
    left: 66.1%;
    width: min(87px, 6.042vw);
    height: min(87px, 6.042vw);
  }

  .up-mv__plus::before,
  .up-mv__plus::after {
    height: 2px;
  }

  .up-mv__itch {
    top: 87.3%;
    left: 81.6%;
    width: auto;
    font-size: clamp(4.6rem, 5.972vw, 8.6rem);
    text-align: center;
  }

  .up-mv__itch > span:nth-child(1) {
    letter-spacing: 0.32px;
  }

  .up-mv__itch > span:nth-child(2) {
    letter-spacing: 0.64px;
  }

  .up-heading__en {
    margin-bottom: 35px;
    font-size: 1.4rem;
  }

  .up-heading__ja {
    font-size: 2.8rem;
  }

  .up-struggle {
    padding: clamp(80px, 6.736vw, 97px) 0 0;
  }

  .up-struggle__panel {
    container-type: inline-size;
    width: min(calc(100% - (var(--up-layout-gutter) * 2)), 1200px);
    margin-top: clamp(44px, 3.472vw, 50px);
  }

  .up-struggle__frame {
    min-height: 21.75cqw;
    padding: 3.4167cqw 0 9.5cqw;
  }

  .up-struggle__frame::before {
    background-image: url("../images/frame_list_001_pc.svg");
  }

  .up-struggle__items {
    grid-template-columns: 432fr 334fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 1.4167cqw 7.75cqw;
    width: 75%;
    max-width: none;
    margin: 0 0 0 12.5%;
    padding-left: 3.4167cqw;
    align-items: start;
  }

  .up-struggle__items li {
    display: block;
    width: auto;
    height: 2cqw;
    min-height: 2cqw;
    padding-top: 0.6667cqw;
    box-sizing: border-box;
    font-size: 1.5cqw;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: visible;
    text-box-trim: unset;
    text-box-edge: auto;
  }

  .up-struggle__items li:nth-child(4) {
    width: auto;
  }

  .up-struggle__check {
    top: 0;
    left: -3.4167cqw;
    width: 2.5833cqw;
    height: 2cqw;
    transform: none;
  }

  .up-struggle__lead {
    width: 52.5cqw;
    margin: -5.5cqw auto 0;
    padding: 1.0833cqw 2.3333cqw 1.4167cqw;
    font-size: 2.8333cqw;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .up-struggle__lead-line {
    white-space: nowrap;
  }

  .up-br-sp {
    display: none;
  }

  .up-br-pc {
    display: inline;
  }

  .up-reason {
    padding: clamp(50px, 4.653vw, 67px) 0 clamp(40px, 4.167vw, 60px);
  }

  .up-reason__inner {
    width: min(calc(100% - (var(--up-layout-gutter) * 2)), 1101px);
    max-width: 1101px;
    min-height: 0;
    aspect-ratio: 1101 / 802;
  }

  .up-reason__care {
    top: 15.586%;
    left: 0;
    width: 33.606%;
    height: 27.431%;
    border-radius: 40px;
  }

  .up-reason__care img {
    width: 114.054%;
    height: 127.727%;
    margin-top: -16.216%;
  }

  .up-reason__body {
    position: absolute;
    top: 37.157%;
    left: 9.083%;
    width: 64.578%;
    min-height: 62.843%;
    margin: 0;
    padding: clamp(80px, 6.875vw, 99px) clamp(70px, 5.972vw, 86px) clamp(56px, 4.792vw, 69px) clamp(80px, 6.875vw, 99px);
    border-radius: clamp(50px, 4.167vw, 60px);
  }

  .up-reason__title {
    margin-bottom: 64px;
    font-size: 34px;
    letter-spacing: 0.06em;
  }

  .up-reason__text {
    width: auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.1em;
  }

  .up-reason__mark {
    background-image: linear-gradient(#f4bb47, #f4bb47);
    background-position: 0 1.05em;
    background-size: 100% 11px;
  }

  .up-reason__text--sp {
    display: none;
  }

  .up-reason__text--pc {
    display: block;
  }

  .up-reason__scratch {
    position: absolute;
    top: 0;
    right: 0;
    width: 41.599%;
    height: 79.177%;
    margin: 0;
    border-radius: clamp(50px, 4.167vw, 60px);
  }

  .up-reason__drop--1 {
    top: 31.172%;
    left: 45.05%;
    width: 7.266%;
  }

  .up-reason__drop--2 {
    top: 88.529%;
    left: 79.382%;
    width: 22.343%;
  }

  .up-why {
    padding: 0 0 96px;
  }

  .up-why > .up-heading {
    padding: 0;
  }

  .up-why > .up-heading .up-heading__en {
    margin-bottom: 35px;
    font-size: 1.4rem;
  }

  .up-why > .up-heading .up-heading__ja {
    font-size: 2.8rem;
  }

  .up-why__intro {
    width: min(800px, calc(100% - 120px));
    margin-top: 70px;
  }

  .up-why__lead {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
  }

  .up-why__body {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    text-align: center;
    word-break: keep-all;
    line-break: strict;
  }

  .up-why__causes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(1200px, calc(100% - 120px));
    gap: 20px;
    margin-top: 54px;
  }

  .up-why__causes li {
    gap: 0;
  }

  .up-why__cause-label {
    width: 160px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    font-size: clamp(1.6rem, 1.389vw, 2rem);
    line-height: 2;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .up-why__causes li:nth-child(3) .up-why__cause-label {
    width: auto;
    max-width: 100%;
    padding: 10px 20px;
  }

  .up-why__cause-photo {
    margin-top: 19px;
  }

  .up-why__cause-photo-inner {
    border-radius: 24px;
  }

  .up-why__cause-text {
    margin-top: 30px;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  .up-why__question {
    width: 386px;
    gap: 15px;
    margin-top: 102px;
    font-size: 2.8rem;
  }

  .up-why__question-line {
    height: 29px;
    padding: 5px 12px 6px 6px;
  }

  .up-why__question-line:first-child {
    width: 306px;
  }

  .up-why__question-line:last-child {
    width: 386px;
    padding-right: 14px;
  }

  .up-why__cycle {
    display: grid;
    grid-template-columns: minmax(0, 598px) minmax(0, 600px);
    gap: 0;
    align-items: stretch;
    width: min(1198px, calc(100% - 120px));
    margin: 65px auto 0;
  }

  .up-why__diagram {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-top: 85px;
  }

  .up-why__diagram-sticky {
    position: sticky;
    top: 120px;
  }

  .up-why__diagram-kicker {
    font-size: 2.6rem;
  }

  .up-why__diagram-title {
    margin-top: 19px;
    font-size: 4.6rem;
  }

  .up-why__diagram-script {
    width: min(530.946px, calc(100% * 530.946 / 598));
  }

  .up-why__petals {
    width: min(548px, 100%);
    max-width: 100%;
    margin-top: 62px;
  }

  .up-why__steps {
    width: 100%;
    margin-top: 0;
  }

  .up-why__step {
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    padding: 20px 24px;
    border-radius: 40px;
  }

  .up-why__step-copy {
    align-items: flex-start;
    gap: 22px;
    width: 292px;
  }

  .up-why__step-label {
    padding: 10px 30px;
    font-size: 2rem;
    line-height: 1.6;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .up-why__step-text {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    text-align: left;
  }

  .up-why__step-illust {
    width: 147px;
    height: 146px;
  }

  .up-why__steps > li:nth-child(3) .up-why__step-illust,
  .up-why__steps > li:nth-child(4) .up-why__step-illust,
  .up-why__steps > li:nth-child(5) .up-why__step-illust {
    height: 149px;
  }

  .up-why__steps > li:nth-child(3) .up-why__step-illust img {
    top: -48.23%;
    left: -27.8%;
    width: 150.84%;
    height: 148.23%;
  }

  .up-why__steps > li:nth-child(5) .up-why__step-illust img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }

  .up-why__close {
    width: min(790px, calc(100% - 80px));
    margin-top: 110px;
  }

  .up-why__close-lead {
    font-size: 2.4rem;
    letter-spacing: 0.06em;
  }

  .up-why__close-main {
    margin-top: 36px;
    font-size: 3.4rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .up-why__close-brand {
    margin-top: 30px;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .up-why__close-break {
    display: none;
  }

  .up-why__quote {
    margin-top: 0;
    padding: 0 40px 7px;
    background-position: 40px 14px;
    background-size: calc(100% - 80px) 11px;
    font-size: 3.4rem;
    vertical-align: -0.12em;
  }

  .up-why__quote::before,
  .up-why__quote::after {
    font-size: 5.8rem;
  }

  .up-fab {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 180px;
    height: 204px;
    overflow: visible;
    transform: none;
  }
}

@media print, screen and (min-width: 1440px) {
  .up-mv::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: calc((100% - 1440px) / 2);
    height: 100%;
    background: #fff;
    pointer-events: none;
    content: "";
  }

  .up-nav__panel {
    width: 1040px;
    border-radius: 100px 0 0 100px;
  }

  .up-nav__inner {
    padding: 161px 110px 80px 83px;
  }

  .up-nav__cols {
    gap: 80px;
  }

  .up-nav__col {
    gap: 60px;
  }

  .up-nav__col:first-child {
    flex: 0 0 430px;
  }

  .up-nav__col:last-child {
    flex: 0 0 365px;
  }

  .up-nav__home,
  .up-nav__heading,
  .up-nav__buy-heading {
    font-size: 28px;
  }

  .up-nav__buy-heading {
    margin-top: 75px;
  }

  .up-nav__links a {
    font-size: 24px;
  }

  .up-nav__stores {
    width: 847px;
    gap: 20px;
    margin-top: 13px;
  }

  .up-nav__store {
    height: 117px;
  }

  .up-nav__store-logo {
    height: 84px;
  }
}

/* Product Lineup / product-detail reusable block */
.up-lineup {
  position: relative;
  z-index: 1;
  padding: 0;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
}

.up-lineup__deco-logo {
  display: none;
}

@media screen and (max-width: 767px) {
  .up-lineup__deco-logo {
    position: absolute;
    z-index: 0;
    top: -40vw;
    left: 20.533vw;
    display: block;
    width: 94.133vw;
    height: 51.2vw;
    overflow: visible;
    pointer-events: none;
  }

  .up-lineup__deco-logo picture,
  .up-lineup__deco-logo img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .up-lineup__deco-logo img {
    position: static;
    top: auto;
    left: auto;
    max-width: none;
    filter: drop-shadow(0 0 22.4vw rgba(134, 134, 134, 0.25));
  }
}

.up-lineup__heading,
.up-lineup__lead,
.up-product-tabs,
.up-lineup__panels {
  position: relative;
  z-index: 1;
}

.up-lineup__heading {
  height: 56px;
  text-align: left;
}

.up-lineup__heading .up-heading__en {
  margin-bottom: 16px;
  font-size: 1.2rem;
}

.up-lineup__heading .up-heading__ja {
  font-size: 2.2rem;
  line-height: 1;
}

.up-lineup__lead {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  height: 58px;
  margin: 56px 0 0;
  color: var(--up-color-primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: center;
}

.up-lineup__lead-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  height: 36px;
  white-space: nowrap;
}

.up-lineup__lead-line > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.up-lineup__lead-tail {
  display: block;
  flex-shrink: 0;
  width: max-content;
  margin-top: 7px;
  white-space: nowrap;
}

.up-lineup__choice {
  position: relative;
  display: inline-block;
  z-index: 0;
  flex: 0 0 auto;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
}

.up-lineup__choice > span {
  position: absolute;
  top: 0;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding-bottom: 0.04em;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--up-color-primary);
}

.up-lineup__choice--part {
  width: 65px;
  height: 36px;
  margin-left: 1px;
}

.up-lineup__choice--part > span:nth-child(1),
.up-lineup__choice--scene > span:nth-child(1) {
  left: 0;
}

.up-lineup__choice--part > span:nth-child(2) {
  left: 29px;
}

.up-lineup__choice--part + span {
  margin-left: 5px;
}

.up-lineup__choice--scene {
  width: 91px;
  height: 36px;
  margin-left: 2px;
}

.up-lineup__choice--scene > span:nth-child(2) {
  left: 28px;
}

.up-lineup__choice--scene > span:nth-child(3) {
  left: 55px;
}

.up-product-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 335px;
  height: 96px;
  margin: 8px auto 0;
  padding-bottom: 23px;
  box-sizing: border-box;
}

.up-product-tabs::after {
  position: absolute;
  z-index: 0;
  right: 50%;
  bottom: 22px;
  width: 100vw;
  height: 4px;
  background: var(--up-color-primary);
  transform: translateX(50%);
  content: "";
}

.up-product-tabs__item {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 0 0 140px;
  height: 43px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #929292;
  color: #fff;
  font-family: var(--up-font-sans);
  text-align: left;
  cursor: pointer;
  transition: none;
}

.up-product-tabs__item.is-active {
  height: 57px;
  background: var(--up-color-primary);
}

.up-product-tabs__item[data-up-product-tab="lotion"] {
  flex-basis: 148px;
}

.up-product-tabs__item[data-up-product-tab="cream"] {
  flex-basis: 140px;
}

.up-product-tabs__item[data-up-product-tab="lotion"].is-active {
  flex-basis: 189px;
}

.up-product-tabs__item[data-up-product-tab="cream"].is-active {
  flex-basis: 181px;
}

.up-product-tabs__copy {
  position: static;
  z-index: 2;
  display: block;
}

.up-product-tabs__copy small {
  position: absolute;
  top: 7px;
  left: 15px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.up-product-tabs__copy b {
  position: absolute;
  top: 20px;
  left: 15px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.up-product-tabs__item.is-active .up-product-tabs__copy small {
  top: 13px;
  left: 50px;
}

.up-product-tabs__item.is-active .up-product-tabs__copy b {
  top: 27px;
  left: 50px;
  font-size: 1.8rem;
}

.up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy small {
  left: 77px;
}

.up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy b {
  top: 26px;
  left: 77px;
}

.up-product-tabs__image {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  max-width: none;
  pointer-events: none;
}

.up-product-tabs__image img {
  position: absolute;
  display: block;
  max-width: none;
}

.up-product-tabs__image--lotion img {
  top: -23.18%;
  left: -44.04%;
  width: 174.88%;
  height: 142%;
}

.up-product-tabs__image--cream img {
  top: -27.98%;
  left: -20.76%;
  width: 138.04%;
  height: 142.79%;
}

.up-product-tabs__image--lotion {
  top: -16px;
  left: 5px;
  width: 45px;
  height: 96px;
}

.up-product-tabs__item:not(.is-active) .up-product-tabs__image--lotion {
  display: none;
}

.up-product-tabs__item:not(.is-active) .up-product-tabs__image--cream {
  display: none;
}

.up-product-tabs__image--cream {
  top: 4px;
  left: 15px;
  width: 52px;
  height: 37px;
}

.up-product-tabs__item.is-active .up-product-tabs__image--cream {
  top: 6px;
  left: 5px;
  width: 78px;
  height: 55px;
}

.up-product-card__chevron {
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.up-product-tabs__arrow {
  top: 13px;
  right: 13px;
  position: absolute;
  z-index: 3;
  display: block;
  width: 17px;
  height: 17px;
  max-width: none;
}

.up-product-tabs__item[data-up-product-tab="lotion"] .up-product-tabs__arrow {
  right: 11px;
}

.up-product-tabs__item.is-active .up-product-tabs__arrow {
  display: none;
}

.up-lineup__panels {
  margin-top: 24px;
}

.up-product-card {
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 17.067vw;
}

.up-product-card[hidden] {
  display: none;
}

.up-product-card__hero {
  position: relative;
  height: 725px;
  overflow: hidden;
  background: var(--up-color-surface);
}

.up-product-card--cream .up-product-card__hero {
  height: 749px;
}

.up-product-card__catch,
.up-product-card__name,
.up-product-card__category,
.up-product-card__feature p,
.up-product-card__feel p,
.up-product-card__case-list p {
  margin: 0;
}

.up-product-card__catch {
  position: absolute;
  top: 0;
  left: 20px;
  width: 335px;
  height: 45px;
  border-bottom: 1px dotted #9d9d9d;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  font-weight: var(--up-font-weight-serif);
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.up-product-card__name {
  position: absolute;
  z-index: 2;
  top: 65px;
  left: 20px;
  color: var(--up-color-primary);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.up-product-card__name small {
  margin-left: 8px;
  color: var(--up-color-muted);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.up-product-card__category {
  position: absolute;
  z-index: 2;
  top: 141px;
  left: 20px;
  box-sizing: border-box;
  min-width: 91px;
  height: 27px;
  padding: 4px 9px;
  border: 1px solid var(--up-color-muted);
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
}

.up-product-card__visual {
  position: absolute;
  z-index: 1;
  top: 178px;
  left: 0;
  width: 375px;
  height: 261px;
}

.up-product-card__visual img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.up-product-card__texture {
  z-index: 0;
  top: 23px;
  left: 166px;
  width: 226px;
  height: 226px !important;
  object-fit: cover;
  border-radius: 50%;
}

.up-product-card__package--box {
  z-index: 1;
  top: 0;
  left: 92px;
  width: 110px;
  height: 261px !important;
}

.up-product-card__package--product {
  z-index: 2;
  top: 30px;
  left: 9px;
  width: 96px;
  height: 231px !important;
}

.up-product-card--cream .up-product-card__visual {
  top: 183px;
  height: 253px;
}

.up-product-card--cream .up-product-card__texture {
  top: 0;
  left: 170px;
  width: 242px;
  height: 242px !important;
}

.up-product-card--cream .up-product-card__package--box {
  top: 0;
  left: 33px;
  width: 204px;
  height: 149px !important;
}

.up-product-card--cream .up-product-card__package--product {
  top: 118px;
  left: -7px;
  width: 184px;
  height: 135px !important;
}

.up-product-card__benefits {
  position: absolute;
  z-index: 2;
  top: 458px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 335px;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  list-style: none;
}

.up-product-card__benefits li {
  position: relative;
  min-height: 24px;
  padding-left: 41px;
}

.up-product-card__benefits li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 31px;
  height: 25px;
  background: url("/chc/brand/urepearl/images/icon_check_001.svg") no-repeat 0 0 / contain;
  content: "";
}

.up-product-card__buy {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 40px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 79px;
  border: 1px solid var(--up-color-primary);
  border-radius: 40px;
  background: #fff;
  color: var(--up-color-primary);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.up-product-card__cart {
  width: 32px;
  height: 32px;
  background: currentColor;
  -webkit-mask: url("/chc/brand/urepearl/images/icon_cart_001.svg") 50% 50% / contain no-repeat;
  mask: url("/chc/brand/urepearl/images/icon_cart_001.svg") 50% 50% / contain no-repeat;
}

.up-product-card__buy .up-product-card__chevron {
  right: 25px;
}

.up-product-card__details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 47px;
  height: auto;
  padding: 40px 20px;
  background: #f1f1f1;
}

.up-product-card__cases,
.up-product-card__feature,
.up-product-card__feel {
  position: relative;
}

.up-product-card__feature,
.up-product-card__feel {
  display: flex;
  flex-direction: column;
}

.up-product-card__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  min-height: 16px;
  margin: 0;
  color: var(--up-color-primary);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.up-product-card__section-title::before,
.up-product-card__section-title::after {
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background: repeating-linear-gradient(to right, #868686 0 2px, transparent 2px 4px);
  content: "";
}

.up-product-card__case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.up-product-card__case-list li {
  min-width: 0;
}

.up-product-card__case-image {
  display: block;
  width: 100%;
  height: 105px;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
}

.up-product-card__case-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: fill;
}

.up-product-card__case-list p {
  margin-top: 20px;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.up-product-card__feature > p,
.up-product-card__feel > p {
  width: 100%;
  margin-top: 40px;
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.1em;
}

@supports (text-box-trim: trim-both) {
  .up-product-card__feature > p,
  .up-product-card__feel > p {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.up-product-card__actions {
  display: block;
  width: 100%;
  max-width: 335px;
  height: auto;
  margin-top: 30px;
  aspect-ratio: 335 / 337;
  object-fit: contain;
}

.up-product-card__feel .up-product-card__section-title {
  line-height: 1.4;
}

.up-product-card__apply {
  display: block;
  width: 100%;
  max-width: 335px;
  height: auto;
  margin-top: 30px;
  overflow: hidden;
  aspect-ratio: 335 / 191.357;
  object-fit: cover;
  border-radius: 8px;
}

.up-product-card__links {
  display: grid;
  gap: 10px;
  margin: 0 20px;
}

.up-product-card__links a {
  position: relative;
  display: block;
  height: 62px;
  border: 1px solid var(--up-color-muted);
  border-radius: 31px;
  background: #fff;
  color: var(--up-color-muted);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.up-product-card__links .up-product-card__chevron {
  top: 22px;
  left: 266px;
  width: 8px;
  height: 16px;
  border: 0;
  transform: none;
}

.up-product-card__links .up-product-card__chevron::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16.7071px;
  height: 9.06066px;
  background: url("/chc/brand/urepearl/images/icon_product_link_arrow_001.svg") 50% 50% / 100% 100% no-repeat;
  content: "";
  transform: translate(-50%, -50%) rotate(-90deg);
}

.up-product-card__doc-icon,
.up-product-card__pdf-icon {
  position: absolute;
  top: 14px;
  width: 32px;
  height: 32px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.up-product-card__doc-icon {
  left: 54px;
  background-image: url("/chc/brand/urepearl/images/icon_product_info_001.svg");
}

.up-product-card__pdf-icon {
  left: 82px;
  overflow: hidden;
  background-image: url("/chc/brand/urepearl/images/icon_product_pdf_001.svg");
  color: transparent;
  font-size: 0;
}

.up-product-card__link-label {
  position: absolute;
  top: 50%;
  line-height: 1.6;
  white-space: nowrap;
  transform: translateY(-50%);
}

.up-product-card__link--info .up-product-card__link-label {
  left: 104px;
}

.up-product-card__link--pdf .up-product-card__link-label {
  left: 132px;
}

@media screen and (max-width: 767px) {
  .up-lineup__heading {
    height: 14.933vw;
  }

  .up-lineup__heading .up-heading__en {
    margin-bottom: 4.267vw;
    font-size: 3.2vw;
  }

  .up-lineup__heading .up-heading__ja {
    font-size: 5.867vw;
  }

  .up-lineup__lead {
    height: 15.467vw;
    margin-top: 14.933vw;
    font-size: 5.333vw;
  }

  .up-lineup__lead-line {
    height: 9.6vw;
  }

  .up-lineup__lead-line > span:first-child {
    flex-basis: auto;
  }

  .up-lineup__lead-tail {
    margin-top: 1.867vw;
  }

  .up-lineup__choice {
    font-size: 6.4vw;
  }

  .up-lineup__choice > span {
    width: 9.6vw;
    height: 9.6vw;
  }

  .up-lineup__choice--part {
    width: 17.333vw;
    height: 9.6vw;
    margin-left: 0.267vw;
  }

  .up-lineup__choice--part > span:nth-child(2) {
    left: 7.733vw;
  }

  .up-lineup__choice--part + span {
    margin-left: 1.333vw;
  }

  .up-lineup__choice--scene {
    width: 24.267vw;
    height: 9.6vw;
    margin-left: 0.533vw;
  }

  .up-lineup__choice--scene > span:nth-child(2) {
    left: 7.467vw;
  }

  .up-lineup__choice--scene > span:nth-child(3) {
    left: 14.667vw;
  }

  .up-product-tabs {
    gap: 1.6vw;
    width: 89.333vw;
    height: 25.6vw;
    margin-top: 2.133vw;
    padding-bottom: 6.133vw;
  }

  .up-product-tabs::after {
    bottom: 5.867vw;
    height: 1.067vw;
  }

  .up-product-tabs__item {
    flex-basis: 37.333vw;
    height: 11.467vw;
    border-radius: 2.667vw 2.667vw 0 0;
  }

  .up-product-tabs__item.is-active {
    height: 15.2vw;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"] {
    flex-basis: 39.467vw;
  }

  .up-product-tabs__item[data-up-product-tab="cream"] {
    flex-basis: 37.333vw;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"].is-active {
    flex-basis: 50.4vw;
  }

  .up-product-tabs__item[data-up-product-tab="cream"].is-active {
    flex-basis: 48.267vw;
  }

  .up-product-tabs__copy small {
    top: 1.867vw;
    left: 4vw;
    font-size: 2.667vw;
  }

  .up-product-tabs__copy b {
    top: 5.333vw;
    left: 4vw;
    font-size: 3.733vw;
  }

  .up-product-tabs__item.is-active .up-product-tabs__copy small {
    top: 3.467vw;
    left: 13.333vw;
  }

  .up-product-tabs__item.is-active .up-product-tabs__copy b {
    top: 7.2vw;
    left: 13.333vw;
    font-size: 4.8vw;
  }

  .up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy small {
    left: 20.533vw;
  }

  .up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy b {
    top: 6.933vw;
    left: 20.533vw;
  }

  .up-product-tabs__image--lotion {
    top: -4.267vw;
    left: 1.333vw;
    width: 12vw;
    height: 25.6vw;
  }

  .up-product-tabs__image--cream {
    top: 1.067vw;
    left: 4vw;
    width: 13.867vw;
    height: 9.867vw;
  }

  .up-product-tabs__item.is-active .up-product-tabs__image--cream {
    top: 1.6vw;
    left: 1.333vw;
    width: 20.8vw;
    height: 14.667vw;
  }

  .up-product-card__chevron {
    width: 2.667vw;
    height: 2.667vw;
  }

  .up-product-tabs__arrow {
    top: 3.467vw;
    right: 3.467vw;
    width: 4.533vw;
    height: 4.533vw;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"] .up-product-tabs__arrow {
    right: 2.933vw;
  }

  .up-lineup__panels {
    margin-top: 6.4vw;
  }

  .up-product-card {
    width: 100%;
    max-width: none;
  }

  .up-product-card__hero {
    height: 193.333vw;
  }

  .up-product-card--cream .up-product-card__hero {
    height: 199.733vw;
  }

  .up-product-card__catch {
    left: 5.333vw;
    width: 89.333vw;
    height: 12vw;
    font-size: 5.867vw;
  }

  .up-product-card__name {
    top: 17.333vw;
    left: 5.333vw;
    font-size: 6.4vw;
  }

  .up-product-card__name small {
    margin-left: 2.133vw;
    font-size: 3.733vw;
  }

  .up-product-card__category {
    top: 37.6vw;
    left: 5.333vw;
    min-width: 24.267vw;
    height: 7.2vw;
    padding: 1.067vw 2.4vw;
    font-size: 3.2vw;
  }

  .up-product-card__visual {
    top: 47.348vw;
    width: 100%;
    height: 69.572vw;
  }

  .up-product-card__texture {
    top: 6.011vw;
    left: 44.175vw;
    width: 60.359vw;
    height: 60.359vw !important;
  }

  .up-product-card__package--box {
    left: 24.479vw;
    width: 29.226vw;
    height: 69.572vw !important;
  }

  .up-product-card__package--product {
    top: 7.942vw;
    left: 2.4vw;
    width: 25.573vw;
    height: 61.471vw !important;
  }

  .up-product-card--cream .up-product-card__visual {
    top: 48.8vw;
    height: 67.467vw;
  }

  .up-product-card--cream .up-product-card__texture {
    top: 0;
    left: 45.34vw;
    width: 64.527vw;
    height: 64.527vw !important;
  }

  .up-product-card--cream .up-product-card__package--box {
    top: 0;
    left: 8.8vw;
    width: 54.4vw;
    height: 39.733vw !important;
  }

  .up-product-card--cream .up-product-card__package--product {
    top: 31.467vw;
    left: -1.867vw;
    width: 49.067vw;
    height: 36vw !important;
  }

  .up-product-card__benefits {
    top: 122.133vw;
    left: 5.333vw;
    gap: 2.4vw;
    width: 89.333vw;
    font-size: 4.267vw;
  }

  .up-product-card__benefits li {
    min-height: 6.4vw;
    padding-left: 10.933vw;
  }

  .up-product-card__benefits li::before {
    width: 8.267vw;
    height: 6.667vw;
  }

  .up-product-card__buy {
    right: 5.333vw;
    bottom: 10.667vw;
    left: 5.333vw;
    gap: 3.733vw;
    height: 21.067vw;
    border-radius: 10.667vw;
    font-size: 5.333vw;
  }

  .up-product-card__cart {
    width: 8.533vw;
    height: 8.533vw;
  }

  .up-product-card__buy .up-product-card__chevron {
    right: 6.667vw;
  }

  .up-product-card__details {
    gap: 12.533vw;
    height: auto;
    padding: 10.667vw 5.333vw;
  }

  .up-product-card__section-title {
    gap: 2.667vw;
    min-height: 4.267vw;
    font-size: 5.867vw;
  }

  .up-product-card__section-title::before,
  .up-product-card__section-title::after {
    min-width: 5.333vw;
  }

  .up-product-card__case-list {
    gap: 8vw 2.667vw;
    margin-top: 10.667vw;
  }

  .up-product-card__case-image {
    height: 28vw;
    border-radius: 1.333vw;
  }

  .up-product-card__case-list p {
    margin-top: 5.333vw;
    font-size: 4vw;
  }

  .up-product-card__feature > p,
  .up-product-card__feel > p {
    width: 100%;
    margin-top: 10.667vw;
    font-size: 4.267vw;
  }

  .up-product-card__actions {
    max-width: none;
    margin-top: 8vw;
  }

  .up-product-card__apply {
    max-width: none;
    margin-top: 8vw;
    border-radius: 2.133vw;
  }

  .up-product-card__links {
    margin: 0 5.333vw;
    gap: 2.667vw;
  }

  .up-product-card__links a {
    height: 16.533vw;
    border-radius: 8.267vw;
    font-size: 4.267vw;
  }

  .up-product-card__links .up-product-card__chevron {
    top: 5.867vw;
    left: 70.933vw;
    width: 2.133vw;
    height: 4.267vw;
  }

  .up-product-card__links .up-product-card__chevron::before {
    width: 4.455vw;
    height: 2.416vw;
  }

  .up-product-card__doc-icon,
  .up-product-card__pdf-icon {
    top: 3.733vw;
    width: 8.533vw;
    height: 8.533vw;
  }

  .up-product-card__doc-icon {
    left: 14.4vw;
  }

  .up-product-card__pdf-icon {
    left: 21.867vw;
  }

  .up-product-card__link--info .up-product-card__link-label {
    left: 27.733vw;
  }

  .up-product-card__link--pdf .up-product-card__link-label {
    left: 35.2vw;
  }
}

@media print, screen and (min-width: 768px) {
  .up-lineup__heading {
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    height: 75px;
    padding: 0;
  }

  .up-lineup__heading .up-heading__en {
    margin-bottom: 32px;
    font-size: 1.2rem;
  }

  .up-lineup__heading .up-heading__ja {
    font-size: 2.8rem;
  }

  .up-lineup__lead {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height: 54px;
    margin-top: 81px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 3rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .up-lineup__lead-line {
    width: auto;
    height: 54px;
  }

  .up-lineup__lead-line > span:first-child {
    flex-basis: auto;
  }

  .up-lineup__lead-tail {
    width: auto;
    margin: 0 0 0 3px;
  }

  .up-lineup__choice {
    font-size: 3.4rem;
  }

  .up-lineup__choice--part {
    width: 96px;
    height: 54px;
    margin-left: 5px;
  }

  .up-lineup__choice > span {
    width: 54px;
    height: 54px;
  }

  .up-lineup__choice--part > span:nth-child(2) {
    left: 42px;
  }

  .up-lineup__choice--part + span {
    margin-left: 5px;
  }

  .up-lineup__choice--scene {
    width: 135px;
    height: 54px;
    margin-left: 4px;
  }

  .up-lineup__choice--scene > span:nth-child(2) {
    left: 42px;
  }

  .up-lineup__choice--scene > span:nth-child(3) {
    left: 81px;
  }

  .up-product-tabs {
    gap: 24px;
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    height: 172px;
    margin-top: 15px;
    padding-bottom: 0;
  }

  .up-product-tabs::after {
    top: 130px;
    bottom: auto;
    height: 7px;
  }

  .up-product-tabs__item,
  .up-product-tabs__item.is-active {
    position: relative;
    align-self: flex-start;
    flex-basis: calc((100% - 24px) * 0.476);
    height: 80px;
    margin-top: 50px;
    padding: 0;
    border-radius: 20px 20px 0 0;
  }

  .up-product-tabs__item.is-active {
    height: 101px;
    margin-top: 29px;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"],
  .up-product-tabs__item[data-up-product-tab="lotion"].is-active {
    flex-basis: calc((100% - 24px) * 0.5);
  }

  .up-product-tabs__item[data-up-product-tab="cream"],
  .up-product-tabs__item[data-up-product-tab="cream"].is-active {
    flex-basis: calc((100% - 24px) * 0.476);
  }

  .up-product-tabs__copy small {
    top: 13px;
    left: 189px;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .up-product-tabs__copy b,
  .up-product-tabs__item.is-active .up-product-tabs__copy b {
    top: 33px;
    left: 189px;
    font-size: 2.4rem;
    line-height: 1.4;
  }

  .up-product-tabs__item.is-active .up-product-tabs__copy small {
    top: 21px;
    left: 176px;
  }

  .up-product-tabs__item.is-active .up-product-tabs__copy b {
    top: 41px;
    left: 176px;
    font-size: 3rem;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"]:not(.is-active) .up-product-tabs__copy small {
    left: 191px;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"]:not(.is-active) .up-product-tabs__copy b {
    left: 191px;
  }

  .up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy small {
    left: 231px;
  }

  .up-product-tabs__item[data-up-product-tab="cream"].is-active .up-product-tabs__copy b {
    top: 41px;
    left: 231px;
  }

  .up-product-tabs__item:not(.is-active) .up-product-tabs__image--cream {
    display: block;
  }

  .up-product-tabs__image--lotion,
  .up-product-tabs__item:not(.is-active) .up-product-tabs__image--lotion {
    top: -29px;
    left: 86px;
    width: 81px;
    height: 172px;
  }

  .up-product-tabs__item:not(.is-active) .up-product-tabs__image--lotion {
    top: -38px;
    left: 118px;
    display: block;
    width: 59px;
    height: 125px;
  }

  .up-product-tabs__image--cream,
  .up-product-tabs__item.is-active .up-product-tabs__image--cream {
    top: 4px;
    left: 69px;
    width: 118px;
    height: 83px;
  }

  .up-product-tabs__item.is-active .up-product-tabs__image--cream {
    top: -4px;
    left: 53px;
    width: 184px;
    height: 130px;
  }

  .up-product-tabs__arrow,
  .up-product-tabs__item[data-up-product-tab="lotion"] .up-product-tabs__arrow {
    top: 26px;
    right: 46px;
    width: 28px;
    height: 28px;
  }

  .up-lineup__panels {
    margin-top: 25px;
  }

  .up-product-card {
    width: 1000px;
    padding-bottom: 100px;
  }

  .up-product-card__hero,
  .up-product-card--cream .up-product-card__hero {
    height: 652px;
  }

  .up-product-card__catch {
    left: 0;
    width: 1000px;
    height: 49px;
    border: 0;
    font-size: 3.4rem;
    line-height: 1.4;
  }

  .up-product-card__catch::after {
    position: absolute;
    top: 24px;
    right: 0;
    width: 555px;
    border-top: 1px dotted #9d9d9d;
    content: "";
  }

  .up-product-card__name {
    top: 97px;
    left: 0;
    font-size: 3.4rem;
    line-height: 1.4;
  }

  .up-product-card__name small {
    font-size: 1.6rem;
  }

  .up-product-card__category {
    top: 211px;
    left: 0;
    height: 37px;
    padding-block: 9px;
  }

  .up-product-card__visual,
  .up-product-card--cream .up-product-card__visual {
    top: 0;
    width: 1000px;
    height: 570px;
  }

  .up-product-card__texture {
    top: 107px;
    left: 620px;
    width: 380px;
    height: 380px !important;
  }

  .up-product-card__package--box {
    top: 69px;
    left: 496px;
    width: 184px;
    height: 438px !important;
  }

  .up-product-card__package--product {
    top: 119px;
    left: 357px;
    width: 161px;
    height: 387px !important;
  }

  .up-product-card--cream .up-product-card__texture {
    top: 75px;
    left: 620px;
    width: 380px;
    height: 380px !important;
  }

  .up-product-card--cream .up-product-card__package--box {
    top: 75px;
    left: 406px;
    width: 319px;
    height: 235px !important;
  }

  .up-product-card--cream .up-product-card__package--product {
    top: 259px;
    left: 342px;
    width: 288px;
    height: 212px !important;
  }

  .up-product-card__benefits {
    top: 290px;
    left: 0;
    gap: 21px;
    width: 350px;
    font-size: 1.8rem;
    line-height: 1.55;
  }

  .up-product-card__benefits li {
    padding-left: 41px;
  }

  .up-product-card__buy {
    top: 520px;
    right: auto;
    bottom: auto;
    left: 0;
    width: 350px;
    height: 80px;
    font-size: 2rem;
  }

  .up-product-card__details {
    display: flex;
    flex-direction: column;
    gap: 60px;
    height: auto;
    padding: 60px 100px 93px;
  }

  .up-product-card__cases,
  .up-product-card__feature,
  .up-product-card__feel {
    position: static;
    right: auto;
    left: auto;
  }

  .up-product-card__feature,
  .up-product-card__feel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 335px;
    align-items: start;
  }

  .up-product-card__feature .up-product-card__section-title,
  .up-product-card__feel .up-product-card__section-title {
    grid-column: 1 / -1;
  }

  .up-product-card__section-title {
    gap: 30px;
    font-size: 2.4rem;
  }

  .up-product-card__case-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 27px;
    margin-top: 30px;
  }

  .up-product-card__case-image {
    height: 116px;
  }

  .up-product-card__case-list p {
    margin-top: 20px;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
  }

  .up-product-card__feature > p,
  .up-product-card__feel > p {
    position: static;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 2;
    width: auto;
    max-width: 465px;
    margin-top: 136px;
    font-size: 1.8rem;
    line-height: 2.4;
    letter-spacing: 0.1em;
  }

  .up-product-card__actions {
    position: static;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 2;
    width: 335px;
    max-width: none;
    height: auto;
    margin-top: 30px;
    aspect-ratio: 335 / 353;
  }

  .up-product-card__feel > p {
    justify-self: start;
    width: 472px;
    max-width: none;
    margin-top: 76px;
  }

  .up-product-card__apply {
    position: static;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 2;
    width: 335px;
    max-width: none;
    height: auto;
    margin-top: 30px;
    aspect-ratio: 335 / 191.357;
    border-radius: 8px;
  }

  .up-product-card__links {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 34px 0 0;
    grid-template-columns: repeat(auto-fit, 312px);
    justify-content: center;
    gap: 20px;
  }

  .up-product-card__links a {
    height: 62px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .up-lineup__panels {
    --up-product-col: calc(100vw - (var(--up-layout-gutter) * 2));
    --up-product-scale: calc(var(--up-product-col) / 1000px);
    height: calc(2048px * var(--up-product-scale));
    overflow: visible;
  }

  .up-product-card {
    position: relative;
    left: var(--up-layout-gutter);
    width: 1000px;
    max-width: none;
    margin-left: 0;
    padding-bottom: 0;
    transform: scale(var(--up-product-scale));
    transform-origin: top left;
  }

  @supports (zoom: 1) {
    .up-lineup__panels {
      height: auto;
    }

    .up-product-card {
      zoom: var(--up-product-scale);
      transform: none;
    }
  }

  .up-lineup {
    padding-bottom: 100px;
  }
}

@media print, screen and (min-width: 1024px) {
  .up-lineup__deco-logo {
    position: absolute;
    z-index: 0;
    top: -267px;
    left: calc(50% - 132px);
    display: block;
    width: 994px;
    height: 541.401px;
    pointer-events: none;
  }

  .up-lineup__deco-logo img {
    position: absolute;
    top: -84px;
    left: -84px;
    display: block;
    width: 1162px;
    max-width: none;
    height: 709.401px;
  }

  .up-product-tabs__item[data-up-product-tab="lotion"],
  .up-product-tabs__item[data-up-product-tab="lotion"].is-active {
    flex-basis: 500px;
  }

  .up-product-tabs__item[data-up-product-tab="cream"],
  .up-product-tabs__item[data-up-product-tab="cream"].is-active {
    flex-basis: 476px;
  }
}

/* Total Care */
.up-check {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 78.667vw;
  height: 16.533vw;
  margin: 3.2vw auto 0;
  padding-left: 18.667vw;
  border: 1px solid var(--up-color-muted);
  border-radius: 8.267vw;
  background: #fff;
  color: var(--up-color-muted);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
}

.up-check[aria-disabled="true"] {
  pointer-events: none;
}

.up-check__chevron {
  position: absolute;
  top: 6.133vw;
  left: 63.2vw;
  width: 2.133vw;
  height: 4.267vw;
}

.up-check__chevron::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16.7071px;
  height: 9.06066px;
  background: url("/chc/brand/urepearl/images/icon_product_link_arrow_001.svg") 50% 50% / 100% 100% no-repeat;
  content: "";
  transform: translate(-50%, -50%) rotate(-90deg);
}

.up-total {
  position: relative;
  background: #fff;
  color: var(--up-color-muted);
  border-radius: 10.667vw 10.667vw 0 0;
}

.up-total__top {
  position: relative;
  height: 189.6vw;
}

.up-total__heading {
  position: absolute;
  top: 18.667vw;
  left: 5.333vw;
  width: max-content;
  max-width: calc(100% - 10.667vw);
  margin: 0;
  padding: 0;
  text-align: left;
}

.up-total__heading .up-heading__en,
.up-total__heading .up-heading__ja {
  white-space: nowrap;
}

.up-total__heading .up-heading__en {
  margin-bottom: 5.333vw;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}

.up-total__heading .up-heading__ja {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.up-total__hero {
  position: absolute;
  top: 63.2vw;
  left: 0;
  width: 63.998vw;
  height: 38.133vw;
  margin: 0;
  overflow: hidden;
  border-radius: 5.333vw;
}

.up-total__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
}

.up-total__badge {
  position: absolute;
  z-index: 1;
  top: 39.2vw;
  left: 56.533vw;
  width: 38.133vw;
  height: 52.267vw;
}

.up-total__badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.up-total__bubble {
  position: absolute;
  z-index: 1;
  top: 88.533vw;
  left: 14.4vw;
  width: 80.267vw;
  height: 49.473vw;
}

.up-total__bubble-shape,
.up-total__illust {
  display: block;
}

.up-total__bubble-shape {
  position: absolute;
  inset: 0;
}

.up-total__bubble-shape img {
  display: block;
  width: 100%;
  height: 100%;
}

.up-total__illust {
  position: absolute;
  top: 31.733vw;
  left: -10.4vw;
  width: 37.6vw;
  height: 34.211vw;
}

.up-total__illust img {
  display: block;
  width: 100%;
  height: 100%;
}

.up-total__slides {
  position: absolute;
  top: 0;
  right: 8vw;
  left: 8vw;
  height: 82.95%;
  min-height: 0;
}

.up-total__bubble-text {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--up-font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

@supports (text-box-trim: trim-both) {
  .up-total__bubble-text {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.up-total__bubble-text.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.up-total__dots {
  position: absolute;
  top: 5.333vw;
  right: 5.333vw;
  display: flex;
  gap: 1.6vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-total__dots li {
  width: 2.08vw;
  height: 2.08vw;
  overflow: hidden;
  border-radius: 50%;
}

.up-total__dots button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.up-total__dots .is-current button {
  background: var(--up-color-primary);
}

.up-total__question {
  position: absolute;
  top: 158.933vw;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 6.4vw);
  margin: 0;
  font-family: var(--up-font-serif);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  transform: translateX(-50%);
}

.up-total__question-line {
  display: block;
  white-space: nowrap;
}

.up-total__mark {
  padding: 0 2px;
  background: linear-gradient(#f1f1f1, #f1f1f1) 50% 54% / 100% 6.667vw no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.up-total__ng {
  position: relative;
  width: 100%;
  min-height: 149vw;
  padding: 13.333vw 0 4vw;
  box-sizing: border-box;
}

.up-total__ng-frame {
  display: block;
  position: absolute;
  width: 89.333vw;
  height: 16vw;
  pointer-events: none;
}

.up-total__ng-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.up-total__ng-frame--tl {
  top: 0;
  left: 0;
}

.up-total__ng-frame--br {
  right: 0;
  bottom: 0;
  width: 91.467vw;
}

.up-total__ng-photo {
  position: relative;
  width: 78.667vw;
  height: 46.867vw;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5.333vw;
}

.up-total__ng-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.up-total__ng-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-total__ng-label {
  position: absolute;
  top: 24.8vw;
  left: -8.533vw;
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.up-total__ng-label span {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 8vw;
  padding-left: 7.733vw;
  background: #fff;
  line-height: 1;
}

.up-total__ng-label span:first-child {
  width: 36.267vw;
}

.up-total__ng-label span + span {
  width: max-content;
  margin-top: 1.333vw;
  padding-right: 3.2vw;
}

.up-total__ng-copy {
  width: 78.667vw;
  margin: 4vw auto 0;
}

.up-total__ng-copy h3 {
  margin: 0 0 2.4vw;
  color: var(--up-color-primary);
  font-family: var(--up-font-sans);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.4;
}

.up-total__ng-copy p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-total__habit {
  position: relative;
  height: 176.533vw;
}

.up-total__habit-copy {
  position: absolute;
  z-index: 2;
  top: 20vw;
  left: 5.333vw;
  width: 89.333vw;
  margin: 0;
  padding: 0;
}

.up-total__habit-copy h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 8vw;
  color: var(--up-color-muted);
  font-family: var(--up-font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.up-total__habit-copy p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0;
}

.up-total__habit-photo {
  position: absolute;
  z-index: 0;
  top: 116.6vw;
  right: 0;
  left: 0;
  width: 100%;
  height: 113.6vw;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.up-total__habit-photo::before,
.up-total__habit-photo::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 15.733vw;
  pointer-events: none;
  content: "";
}

.up-total__habit-photo::before {
  top: 0;
  background: linear-gradient(#fff, rgb(255 255 255 / 0%));
}

.up-total__habit-photo::after {
  bottom: 0;
  background: linear-gradient(rgb(255 255 255 / 0%), #fff);
}

.up-total__habit-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.up-total__habit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-total__lessons {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5.333vw;
  width: 89.333vw;
  margin: 0 auto;
  padding: 0 0 16vw;
  list-style: none;
}

.up-total__lesson {
  --up-lesson-frame-height: 130.133vw;
  --up-lesson-btn-hang: 8.267vw;

  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  box-sizing: border-box;
  height: auto;
  padding: 10.667vw 5.333vw 22.467vw;
  background: transparent;
}

.up-total__lesson::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: var(--up-lesson-btn-hang);
  left: 0;
  background: var(--up-lesson-frame) 50% 0 / 100% 100% no-repeat;
  content: "";
}

.up-total__lesson:nth-child(1) {
  --up-lesson-frame: url("../images/frame_total_lesson_001_sp.svg");
}

.up-total__lesson:nth-child(2) {
  --up-lesson-frame: url("../images/frame_total_lesson_002_sp.svg");
  --up-lesson-btn-hang: 4.8vw;
}

.up-total__lesson:nth-child(3) {
  --up-lesson-frame: url("../images/frame_total_lesson_003_sp.svg");
}

.up-total__lesson:nth-child(4) {
  --up-lesson-frame: url("../images/frame_total_lesson_004_sp.svg");
}

.up-total__lesson-script {
  position: absolute;
  z-index: 1;
  top: 10vw;
  left: 4.8vw;
  display: block;
  width: 36.267vw;
  height: auto;
}

.up-total__lesson-topic {
  position: absolute;
  top: 11.467vw;
  right: 5.333vw;
  margin: 0;
  color: var(--up-color-primary);
  font-family: var(--up-font-serif);
  font-size: 3.6rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.up-total__lesson-topic::before {
  position: absolute;
  top: 3.467vw;
  right: 22.133vw;
  width: 17.867vw;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--up-color-muted) 0 2px, transparent 2px 4px);
  content: "";
}

/* SP: 本文上端はカードから93px、本文〜写真10px、写真〜ボタン22px。高さは本文量に追従 */
.up-total__lesson-body {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 3.39cqw;
  width: 100%;
  margin-top: 17.966cqw;
}

.up-total__lesson-text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-total__lesson-photo {
  width: 100%;
  height: 46.867vw;
  margin: 0;
  overflow: hidden;
  border-radius: 10.667vw;
}

.up-total__lesson-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-total__lesson .up-check {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 78.667vw;
  margin: 0;
  transform: translateX(-50%);
}

.up-end-wrap {
  background: var(--up-color-footer);
}

.up-end {
  display: flex;
  flex-direction: column;
  gap: 21.333vw;
  padding: 12vw 0 16vw;
  background: #fff;
  color: var(--up-color-muted);
  border-radius: 10.667vw 10.667vw 0 0;
}

.up-end--top {
  border-radius: 0;
}

.up-end--detail {
  position: relative;
  z-index: 1;
  border-radius: 10.667vw 10.667vw 0 0;
}

.up-end-wrap--detail {
  position: relative;
  background: var(--up-color-footer);
}

.up-end-wrap--detail::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 10.667vw;
  background: var(--up-color-surface);
  content: "";
}

.up-qa__heading,
.up-store__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  text-align: center;
}

.up-qa__heading h2,
.up-store__heading h2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 14.933vw;
  margin: 0;
}

.up-qa__heading h2 img,
.up-store__heading h2 img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.up-qa__heading h2 img {
  width: 24.533vw;
  height: 9.867vw;
}

.up-store__heading h2 img {
  width: 80vw;
  height: 7.733vw;
}

.up-qa__heading p,
.up-store__heading p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
}

.up-qa {
  display: flex;
  flex-direction: column;
  gap: 13.333vw;
  width: 100%;
}

.up-qa__list {
  display: flex;
  flex-direction: column;
  gap: 10.667vw;
  width: 100%;
  margin: 0;
  padding: 0 5.333vw;
  list-style: none;
}

.up-qa__item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.up-qa__q-heading {
  margin: 0;
}

.up-qa__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.667vw;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  min-height: 8vw;
}

.up-qa__q-body {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2.667vw;
  min-width: 0;
}

.up-qa__mark {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  box-sizing: border-box;
  width: 9.333vw;
}

.up-qa__mark img {
  display: block;
  width: auto;
  height: auto;
}

.up-qa__mark--q img {
  width: 6.613vw;
  height: 5.973vw;
}

.up-qa__mark--a img {
  width: 5.867vw;
  height: 4.693vw;
}

.up-qa__q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--up-font-serif);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.4;
  -webkit-font-feature-settings: "palt" 0;
  font-feature-settings: "palt" 0;
}

.up-qa__arrow {
  flex-shrink: 0;
  width: 3.922vw;
  height: 2.149vw;
  background: url("/chc/brand/urepearl/images/icon_qa_arrow_sp_001.svg") 50% 50% / 100% 100% no-repeat;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.up-qa__question[aria-expanded="true"] .up-qa__arrow {
  transform: scaleY(-1);
}

.up-qa__rule {
  width: 100%;
  height: 0;
  margin-top: 5.333vw;
  border-top: 1px solid var(--up-color-muted);
}

.up-qa__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.up-qa__item:has(.up-qa__question[aria-expanded="true"]) .up-qa__panel {
  grid-template-rows: 1fr;
}

.up-qa__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.up-qa__answer {
  display: flex;
  align-items: center;
  gap: 2.667vw;
  width: 100%;
  padding-top: 3.2vw;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.up-qa__item:has(.up-qa__question[aria-expanded="true"]) .up-qa__answer {
  opacity: 1;
}

.up-qa__answer > p,
.up-qa__a-text p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--up-font-serif);
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
  -webkit-font-feature-settings: "palt" 0;
  font-feature-settings: "palt" 0;
}

.up-qa__a-text {
  flex: 1 1 auto;
  min-width: 0;
}

.up-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.333vw;
  width: 100%;
  text-align: center;
  scroll-margin-top: 8vw;
}

.up-store__list {
  display: flex;
  flex-direction: column;
  gap: 4.8vw;
  width: 89.333vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-store__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38.933vw;
  border: 1px solid var(--up-color-muted);
  border-radius: 5.333vw;
  background: #fff;
}

.up-store__logo {
  display: block;
  width: auto;
  max-width: 70%;
  height: 26.133vw;
  object-fit: contain;
}

.up-store__external {
  position: absolute;
  top: 3.667vw;
  right: 3.667vw;
  width: 4.9vw;
  height: 4.9vw;
}

/* SP 375基準。枠はvwなのに文字がremだと375超で関係が崩れる */
@media screen and (max-width: 767px) {
  .up-check {
    font-size: 4.267vw;
  }

  .up-check__chevron::before {
    width: 4.455vw;
    height: 2.416vw;
  }

  .up-total__heading .up-heading__en {
    font-size: 3.733vw;
  }

  .up-total__heading .up-heading__ja {
    font-size: 5.867vw;
  }

  .up-total__bubble-text {
    font-size: 4.267vw;
  }

  .up-total__question {
    font-size: 5.867vw;
  }

  .up-total__mark {
    padding: 0 0.533vw;
  }

  .up-total__ng-label {
    font-size: 5.333vw;
  }

  .up-total__ng-copy h3 {
    font-size: 6.4vw;
  }

  .up-total__ng-copy p {
    font-size: 4.267vw;
  }

  .up-total__habit-copy h3 {
    font-size: 6.4vw;
  }

  .up-total__habit-copy p {
    font-size: 4.267vw;
  }

  .up-total__lesson-topic {
    font-size: 9.6vw;
  }

  .up-total__lesson-text {
    font-size: 4.267vw;
  }

  .up-qa__heading p,
  .up-store__heading p {
    font-size: 4.267vw;
  }

  .up-qa__q-text {
    font-size: 5.333vw;
  }

  .up-qa__answer > p,
  .up-qa__a-text p {
    font-size: 4.8vw;
  }
}

@media print, screen and (min-width: 768px) {
  .up-check {
    width: 312px;
    height: 62px;
    margin: 20px auto 0;
    padding-left: 87px;
    border-radius: 31px;
    font-size: 1.6rem;
    line-height: 1;
    text-indent: 0;
  }

  .up-check__chevron {
    top: 23px;
    left: 254px;
    width: 8px;
    height: 16px;
  }

  .up-total {
    border-radius: 60px 60px 0 0;
  }

  .up-total__top {
    container-type: inline-size;
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    height: auto;
    aspect-ratio: 1000 / 906;
    margin: 0 auto;
  }

  .up-total__heading {
    top: 10cqw;
    left: 0;
    width: max-content;
    max-width: none;
  }

  .up-total__heading .up-heading__en {
    margin-bottom: 3.5cqw;
    font-size: 1.4cqw;
  }

  .up-total__heading .up-heading__ja {
    font-size: 2.8cqw;
    font-weight: 300;
  }

  .up-total__hero {
    top: 25.8cqw;
    left: 0;
    width: 55.4cqw;
    height: 33cqw;
    border-radius: 4cqw;
  }

  .up-total__badge {
    top: 16.1cqw;
    left: 62.7cqw;
    width: 30.8cqw;
    height: 28.1cqw;
  }

  .up-total__bubble {
    top: 41.3cqw;
    left: 50.1cqw;
    width: 50cqw;
    height: 28.8cqw;
  }

  .up-total__illust {
    top: 7.5cqw;
    left: -23.3cqw;
    width: 27.8cqw;
    height: 25.3cqw;
  }

  .up-total__slides {
    top: 9.9cqw;
    right: 0;
    left: 0;
    width: auto;
    height: auto;
    min-height: 5.5cqw;
  }

  .up-total__bubble-text {
    top: 0;
    transform: none;
    font-size: 2.4cqw;
    letter-spacing: 0.06em;
  }

  .up-total__dots {
    top: 2.6cqw;
    right: 3.6cqw;
    gap: 1cqw;
  }

  .up-total__dots li {
    width: 1cqw;
    height: 1cqw;
  }

  .up-total__question {
    top: 77.7cqw;
    width: max-content;
    max-width: none;
    font-size: 2.8cqw;
    font-weight: 500;
  }

  .up-total__mark {
    background-size: 100% 3cqw;
  }

  .up-total__ng {
    container-type: inline-size;
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    min-height: 0;
    margin: 0 auto;
    padding: 0;
  }

  .up-total__ng-frame {
    width: 90cqw;
    height: 10cqw;
  }

  .up-total__ng-frame--br {
    top: 27.6cqw;
    right: auto;
    bottom: auto;
    left: 10cqw;
    width: 90cqw;
  }

  .up-total__ng-photo {
    float: left;
    width: 42.9cqw;
    height: 25.6cqw;
    margin: 6cqw 0 3.2cqw 10cqw;
    border-radius: 4cqw;
  }

  .up-total__ng-label {
    top: 16.4cqw;
    left: -1.3cqw;
    font-size: 2cqw;
  }

  .up-total__ng-label span {
    height: 3cqw;
    padding-left: 2.9cqw;
  }

  .up-total__ng-label span:first-child {
    width: 13.6cqw;
  }

  .up-total__ng-label span + span {
    width: max-content;
    margin-top: 0.5cqw;
    padding-right: 1.2cqw;
  }

  .up-total__ng-copy {
    float: right;
    width: 33.5cqw;
    margin: 6cqw 10cqw 3.2cqw 0;
  }

  .up-total__ng-copy h3 {
    margin-bottom: 1.4cqw;
    font-size: 2.4cqw;
  }

  .up-total__ng-copy p {
    font-size: 1.6cqw;
  }

  .up-total__ng-copy .up-check {
    width: 31.2cqw;
    height: 6.2cqw;
    margin-top: 4.2cqw;
    padding-left: 8.7cqw;
    border-radius: 3.1cqw;
    font-size: 1.6cqw;
  }

  .up-total__ng-copy .up-check__chevron {
    top: 2.3cqw;
    left: 25.4cqw;
    width: 0.8cqw;
    height: 1.6cqw;
  }

  .up-total__ng::before {
    display: block;
    float: left;
    width: 0;
    height: 37.6cqw;
    content: "";
    visibility: hidden;
    pointer-events: none;
  }

  .up-total__ng::after {
    display: block;
    clear: both;
    content: "";
  }

  .up-total__habit {
    container-type: inline-size;
    height: 42.014cqw;
    margin-top: 5.972cqw;
  }

  .up-total__habit-photo {
    top: 0;
    width: 100%;
    height: 66.736cqw;
  }

  .up-total__habit-photo::before {
    height: 10.694cqw;
  }

  .up-total__habit-photo::after {
    height: 15.556cqw;
  }

  .up-total__habit-copy {
    z-index: 2;
    top: 4.514cqw;
    left: 50%;
    width: 43.75cqw;
    padding: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  .up-total__habit-copy h3 {
    margin-bottom: 2.5cqw;
    font-size: 1.944cqw;
    font-weight: 500;
    line-height: 1.6;
  }

  .up-total__habit-copy p {
    font-size: 1.25cqw;
    line-height: 2.4;
    letter-spacing: 0.1em;
  }

  .up-total__lessons {
    container-type: inline-size;
    gap: 40px;
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    padding: 80px 0 120px;
  }

  .up-total__lesson {
    --up-lesson-frame-height: 40.7cqw;
    --up-lesson-btn-hang: 3.1cqw;

    container-type: normal;
    display: block;
    height: auto;
    min-height: 43.8cqw;
    padding: 4.4cqw 10cqw 8.4cqw;
  }

  .up-total__lesson::before {
    right: auto;
    bottom: auto;
    width: 100%;
    height: var(--up-lesson-frame-height);
  }

  .up-total__lesson:nth-child(1) {
    --up-lesson-frame: url("../images/frame_total_lesson_001_pc.svg");
  }

  .up-total__lesson:nth-child(2) {
    --up-lesson-frame: url("../images/frame_total_lesson_002_pc.svg");
  }

  .up-total__lesson:nth-child(3) {
    --up-lesson-frame: url("../images/frame_total_lesson_003_pc.svg");
    --up-lesson-frame-height: 40.7cqw;

    min-height: 43.8cqw;
  }

  .up-total__lesson:nth-child(4) {
    --up-lesson-frame: url("../images/frame_total_lesson_004_pc.svg");
  }

  .up-total__lesson-script {
    position: relative;
    z-index: auto;
    top: 0.5cqw;
    left: -5.9cqw;
    width: 23.1cqw;
    height: auto;
    margin-bottom: -1.6cqw;
  }

  .up-total__lesson-topic {
    top: 5.2cqw;
    right: 3.6cqw;
    font-size: 4.6cqw;
  }

  .up-total__lesson-topic::before {
    top: 2cqw;
    right: 13cqw;
    width: 50.7cqw;
  }

  .up-total__lesson-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5cqw;
    width: 100%;
    margin-top: 4.3cqw;
  }

  .up-total__lesson-text {
    float: none;
    flex: 1 1 auto;
    width: 41.6cqw;
    margin: 0;
    font-size: 1.8cqw;
  }

  .up-total__lesson-photo {
    float: none;
    flex: 0 0 33.4cqw;
    width: 33.4cqw;
    height: 19.9cqw;
    margin-top: 0;
    border-radius: 4cqw;
  }

  .up-total__lesson .up-check {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 31.2cqw;
    height: 6.2cqw;
    margin: 0;
    padding-left: 8.7cqw;
    border-radius: 3.1cqw;
    font-size: 1.6cqw;
    transform: translateX(-50%);
  }

  .up-total__lesson .up-check__chevron {
    top: 2.3cqw;
    left: 25.4cqw;
    width: 0.8cqw;
    height: 1.6cqw;
  }

  .up-total__lesson::after {
    display: block;
    clear: both;
    content: "";
  }

  .up-end {
    gap: 150px;
    padding: 60px 0 120px;
    border-radius: 60px;
  }

  .up-end--top {
    border-radius: 0 0 60px 60px;
  }

  .up-end--detail {
    border-radius: 60px;
    padding-top: 80px;
  }

  .up-end-wrap--detail::before {
    height: 60px;
  }

  .up-qa {
    container-type: inline-size;
    width: 800px;
    max-width: calc(100% - (var(--up-layout-gutter) * 2));
    margin: 0 auto;
    gap: 80px;
  }

  .up-qa__heading,
  .up-store__heading {
    gap: 0;
  }

  .up-qa__heading h2,
  .up-store__heading h2 {
    height: 84px;
  }

  .up-qa__heading h2 img {
    width: 137px;
    height: 55px;
  }

  .up-store__heading h2 img {
    width: 449px;
    height: 43px;
  }

  .up-qa__list {
    gap: 60px;
    padding: 0;
  }

  .up-qa__rule {
    margin-top: 32px;
  }

  .up-qa__q-body,
  .up-qa__answer {
    gap: 50px;
  }

  .up-qa__mark {
    width: 35px;
  }

  .up-qa__mark--q img {
    width: 31px;
    height: 28px;
  }

  .up-qa__mark--a img {
    width: 28px;
    height: 22px;
  }

  .up-qa__heading p {
    font-size: 2cqw;
  }

  .up-qa__q-text {
    font-size: 3.5cqw;
  }

  .up-qa__question {
    min-height: 42px;
  }

  .up-qa__arrow {
    width: 35px;
    height: 17.5px;
    background-image: url("/chc/brand/urepearl/images/icon_qa_arrow_001.svg");
  }

  .up-qa__answer > p,
  .up-qa__a-text p {
    font-family: var(--up-font-sans);
    font-size: 3cqw;
  }

  .up-qa__answer {
    padding-top: 32px;
  }

  .up-store {
    gap: 80px;
    padding: 0;
    background: transparent;
    scroll-margin-top: 0;
  }

  .up-store__list {
    flex-direction: row;
    justify-content: center;
    gap: 18px;
    width: min(1000px, calc(100% - (var(--up-layout-gutter) * 2)));
    margin: 0;
  }

  .up-store__list li {
    flex: 0 1 calc((100% - 36px) / 3);
    max-width: calc((100% - 36px) / 3);
  }

  .up-store__card {
    height: 140px;
    border-radius: 20px;
  }

  .up-store__logo {
    height: 100px;
    max-width: 70%;
  }

  .up-store__external {
    top: 13px;
    right: 13px;
    width: 18px;
    height: 18px;
  }
}

/* Product detail page
 * Figma: PC 777:24589 / SP 777:28194（ローション基準）
 * クリーム PC 777:24963 / SP 777:28568。1ページ＋タブ切替。ピクセル2周目は後追い。
 */
body#product #l-wrap,
body#article #l-wrap {
  padding-top: 0;
}

.up-detail {
  position: relative;
  background: var(--up-color-surface);
}

.up-detail__masthead {
  position: relative;
  height: 53.867vw;
  overflow: visible;
  background: #fff;
}

.up-detail__drops {
  position: absolute;
  z-index: 3;
  top: 32.8vw;
  left: 60.267vw;
  width: 37.6vw;
  height: 36.8vw;
  pointer-events: none;
}

.up-detail__drops img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.up-detail__title {
  position: relative;
  z-index: 2;
  margin-top: -27.2vw;
  margin-bottom: 10.667vw;
}

.up-detail__title-panel {
  display: flex;
  flex-direction: column;
  gap: 5.333vw;
  box-sizing: border-box;
  width: 56vw;
  padding: 10.667vw 0 8vw 5.333vw;
  background: var(--up-color-surface);
  border-radius: 0 16vw 0 0;
}

.up-detail__title-en {
  margin: 0;
  width: 27.467vw;
  height: 2.933vw;
}

.up-detail__title-en img {
  display: block;
  width: 100%;
  height: 100%;
}

.up-detail__title-ja {
  margin: 0;
  color: var(--up-color-muted);
  font-family: var(--up-font-serif);
  font-size: 7.467vw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

@supports (text-box-trim: trim-both) {
  .up-detail__title-ja {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.up-lineup--detail .up-product-tabs {
  margin-top: 0;
}

.up-lineup--detail {
  padding-bottom: 11.2vw;
}

.up-lineup--detail .up-product-card {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  body#product .up-lineup__panels {
    height: calc((1974px + 40px + 2800px) * var(--up-product-scale));
  }

  @supports (zoom: 1) {
    body#product .up-lineup__panels {
      height: auto;
    }
  }

  .up-detail__masthead {
    height: clamp(180px, 22vw, 220px);
  }

  .up-detail__drops {
    top: clamp(48px, 8vw, 70px);
    left: auto;
    right: clamp(24px, 6vw, 80px);
    width: clamp(180px, 28vw, 260px);
    height: clamp(176px, 27vw, 254px);
  }

  .up-detail__title {
    margin-top: clamp(-100px, -12vw, -80px);
    margin-bottom: clamp(40px, 5.5vw, 60px);
  }

  .up-detail__title-panel {
    gap: clamp(20px, 2.8vw, 30px);
    width: clamp(320px, 52vw, 520px);
    padding: clamp(36px, 5vw, 50px) 0 clamp(20px, 3vw, 28px) clamp(24px, 4vw, 48px);
    border-top-right-radius: 60px;
  }

  .up-detail__title-en {
    width: 103px;
    height: 11px;
  }

  .up-detail__title-ja {
    font-size: clamp(2.8rem, 3.2vw, 3.4rem);
  }

  .up-lineup--detail {
    padding-bottom: 120px;
  }

  .up-lineup--detail .up-product-card {
    padding-bottom: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .up-lineup--detail .up-product-card--lotion .up-product-card__links,
  .up-lineup--detail .up-product-card--cream .up-product-card__links {
    grid-template-columns: 312px;
  }
}

@media print, screen and (min-width: 1024px) {
  .up-detail__masthead {
    height: 220px;
  }

  .up-detail__drops {
    top: 56px;
    left: 51.667%;
    width: 19.444%;
    height: auto;
    aspect-ratio: 280 / 274;
  }

  .up-detail__title {
    margin-top: -110px;
    margin-bottom: 60px;
  }

  .up-detail__title-panel {
    gap: 30px;
    width: min(665px, 58%);
    padding: 50px 0 24px clamp(48px, 15.278vw, 220px);
    border-top-right-radius: 60px;
  }

  .up-detail__title-en {
    width: 103px;
    height: 11px;
  }

  .up-detail__title-ja {
    font-size: 3.4rem;
    letter-spacing: 0.06em;
  }

  .up-lineup--detail {
    padding-bottom: 120px;
  }

  .up-lineup--detail .up-product-card {
    padding-bottom: 0;
  }
}

@media print, screen and (min-width: 1440px) {
  .up-total__habit-copy {
    top: 65px;
    width: 630px;
  }

  .up-total__habit-copy h3 {
    margin-bottom: 36px;
    font-size: 2.8rem;
  }

  .up-total__habit-copy p {
    font-size: 1.8rem;
  }

  .up-detail__drops {
    left: calc(50% - 720px + 744px);
    width: 280px;
    height: 274px;
    aspect-ratio: auto;
  }

  .up-detail__title-panel {
    margin-left: 0;
    width: calc(50% - 720px + 665px);
    padding-left: calc(50% - 720px + 220px);
  }
}

/* Product insert (package insert copy below the reusable card) */
.up-insert {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
  padding: 40px 0 40px;
  overflow-x: clip;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
  font-family: var(--up-font-sans);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-kerning: none;
  font-feature-settings: "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  line-break: strict;
  text-autospace: no-autospace;
  text-spacing-trim: space-all;
}

.up-insert__block {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
}

.up-insert__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  color: var(--up-color-muted);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.up-insert__title::after {
  display: block;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--up-color-muted) 0 2px,
    transparent 2px 4px
  );
  content: "";
}

.up-insert__subhead {
  margin: 0;
  color: var(--up-color-accent);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.up-insert p {
  margin: 0;
}

.up-insert__copy p + .up-insert__topic,
.up-insert__topic + .up-insert__topic {
  margin-top: 1.5em;
}

.up-insert__mark {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: inherit;
}

.up-insert__block > div p + p {
  margin-top: 1.5em;
}

.up-insert__ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: up-insert;
}

.up-insert__ol > li {
  display: grid;
  grid-template-columns: 1.7em minmax(0, 1fr);
  column-gap: 0;
  row-gap: 10px;
  min-width: 0;
  counter-increment: up-insert;
}

.up-insert__ol > li::before {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  content: counter(up-insert) ".";
}

.up-insert__ol > li > p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.up-insert__ol > li > .up-insert__table {
  grid-column: 1 / -1;
}

.up-insert__table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--up-color-muted);
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
  color: var(--up-color-muted);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.up-insert__table th,
.up-insert__table td {
  box-sizing: border-box;
  padding: 16px 10px;
  border: 0;
  border-right: 1px solid var(--up-color-muted);
  border-bottom: 1px solid var(--up-color-muted);
  vertical-align: middle;
  text-align: center;
  overflow-wrap: break-word;
}

.up-insert__table th:last-child,
.up-insert__table td:last-child {
  border-right: 0;
}

.up-insert__table tr:last-child td {
  border-bottom: 0;
}

.up-insert__table th {
  height: 50px;
  padding: 0 10px;
  background: #f1f1f1;
  font-weight: 700;
}

.up-insert__table td {
  min-height: 50px;
}

.up-insert__table--symptoms td:last-child {
  text-align: left;
}

.up-insert__table--symptoms th:first-child,
.up-insert__table--symptoms td:first-child {
  width: 29.85%;
}

.up-insert__pc {
  display: none;
}

.up-insert__sp {
  display: inline;
}

@media print, screen and (min-width: 768px) {
  .up-insert {
    width: 100%;
    max-width: none;
    padding: 40px 0 0;
    font-size: 1.6rem;
  }

  .up-insert__title {
    gap: 10px;
    font-size: 2rem;
  }

  .up-insert__subhead {
    font-size: 1.8rem;
  }

  .up-insert__block {
    gap: 30px;
  }

  .up-insert__table {
    font-size: 1.6rem;
  }

  .up-insert__table th {
    height: 50px;
    padding: 0 12px;
  }

  .up-insert__table td {
    padding: 12px;
  }

  .up-insert__table--symptoms td {
    padding: 19px 12px;
  }

  .up-insert__table--symptoms th:first-child,
  .up-insert__table--symptoms td:first-child {
    width: 21%;
  }

  .up-insert__table--symptoms td:last-child {
    padding-left: 31px;
    padding-right: 31px;
  }

  .up-insert__pc {
    display: inline;
  }

  .up-insert__sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .up-insert {
    width: 89.333vw;
    max-width: none;
    padding: 10.667vw 0;
    gap: 10.667vw;
    font-size: 4.267vw;
  }

  .up-insert__block {
    gap: 8vw;
  }

  .up-insert__title {
    gap: 2.667vw;
    font-size: 5.333vw;
  }

  .up-insert__subhead {
    font-size: 4.8vw;
  }

  .up-insert__ol {
    gap: 2.667vw;
  }

  .up-insert__ol > li {
    row-gap: 2.667vw;
  }

  .up-insert__table {
    font-size: 4.267vw;
  }

  .up-insert__table th,
  .up-insert__table td {
    padding: 4.267vw 2.667vw;
  }

  .up-insert__table th {
    height: 13.333vw;
    padding: 0 2.667vw;
  }
}

/* Article detail (common template; first instance is meal)
 * Figma: PC 910:13530 / SP 910:12581
 */
.up-article {
  overflow: clip;
  background: var(--up-color-surface);
  color: var(--up-color-muted);
  font-kerning: none;
  -webkit-font-feature-settings: "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  font-feature-settings: "palt" 0, "pkna" 0, "pwid" 0, "halt" 0;
  text-autospace: no-autospace;
  -webkit-text-spacing-trim: space-all;
  text-spacing-trim: space-all;
}

.up-article__title {
  overflow: visible;
  margin-bottom: 13.333vw;
}

.up-article__title .up-detail__title-en {
  width: 11.2vw;
  height: 5.333vw;
}

.up-article__title .up-detail__title-en img {
  width: 11.2vw;
  height: 2.667vw;
}

.up-article__title .up-detail__title-panel {
  overflow: visible;
  padding-bottom: 0;
}

.up-article__titles {
  display: flex;
  flex-direction: column;
  gap: 8vw;
}

.up-article__lead {
  margin: 0;
  color: var(--up-color-muted);
  font-family: var(--up-font-serif);
  font-size: 4.8vw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

@supports (text-box-trim: trim-both) {
  .up-article__lead,
  .up-article__headline,
  .up-article__source,
  .up-article__source-label,
  .up-article__source-body,
  .up-article__related-ja {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.up-article__title .up-detail__title-ja {
  width: max-content;
  max-width: none;
}

.up-article__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16vw;
  padding: 16vw 5.333vw;
  background: #fff;
}

.up-article__lesson {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4vw;
  margin: 0;
}

.up-article__lesson-script {
  display: block;
  width: 34.933vw;
  height: auto;
  transform: rotate(-3.77deg);
}

.up-article__lesson-rule {
  display: block;
  height: 0;
  border-top: 1px dashed var(--up-color-muted);
}

.up-article__lesson-label {
  color: var(--up-color-primary);
  font-family: var(--up-font-serif);
  font-size: 9.6vw;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.up-article__head,
.up-article__head-text,
.up-article__section,
.up-article__sections {
  display: flex;
  flex-direction: column;
}

.up-article__head {
  gap: 6.933vw;
}

.up-article__head-text {
  gap: 11.2vw;
}

.up-article__section {
  gap: 8vw;
}

.up-article__sections {
  gap: 16vw;
}

.up-article__headline {
  margin: 0;
  color: var(--up-color-muted);
  font-size: 7.467vw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.up-article__source {
  margin: 0;
  font-size: 4vw;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .up-article__source {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .up-article__source-label {
    flex: none;
    white-space: nowrap;
  }

  .up-article__source-body {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.up-article__h {
  display: flex;
  gap: 4.8vw;
  align-items: stretch;
  margin: 0;
  padding-bottom: 5.333vw;
  border-bottom: 2px solid var(--up-color-primary);
  color: var(--up-color-muted);
  font-size: 5.333vw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-article__h::before {
  flex: none;
  width: 4.267vw;
  background: var(--up-color-primary);
  content: "";
}

.up-article__body {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

.up-article__body p {
  margin: 0;
  font-size: 4.267vw;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-article__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 800 / 477;
  border-radius: 5.333vw;
}

.up-article__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.up-article__related {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10.667vw;
  padding: 18.667vw 5.2vw 26.667vw;
}

.up-article__related-main {
  display: flex;
  flex-direction: column;
  gap: 10.667vw;
}

.up-article__related-heading {
  display: flex;
  flex-direction: column;
  gap: 5.333vw;
  align-items: center;
  text-align: center;
}

.up-article__related-en {
  margin: 0;
  width: 23.867vw;
  height: 4.533vw;
}

.up-article__related-en img {
  display: block;
  width: 23.867vw;
  height: auto;
}

.up-article__related-ja {
  margin: 0;
  font-family: var(--up-font-serif);
  font-size: 5.867vw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.up-article__related-list {
  display: flex;
  flex-direction: column;
  gap: 5.333vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-related-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4.8vw;
  width: 100%;
  padding: 10.667vw 5.333vw;
  background: #fff;
  border-radius: 10.667vw;
}

.up-related-card__lesson {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.133vw;
  width: 100%;
  margin: 0 0 0.267vw;
  padding-bottom: 3.2vw;
  border-bottom: 1px dashed var(--up-color-muted);
}

.up-related-card__script {
  display: block;
  width: 29.067vw;
  height: auto;
  transform: rotate(-3.77deg);
}

.up-related-card__label {
  color: var(--up-color-primary);
  font-family: var(--up-font-serif);
  font-size: 9.6vw;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.up-related-card__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 280 / 167;
  border-radius: 5.333vw;
}

.up-related-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.up-related-card__text {
  margin: 0;
  font-size: 4.267vw;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-related-card__btn {
  display: flex;
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14.667vw;
  width: 100%;
  height: 16.533vw;
  min-height: 16.533vw;
  padding: 0 8vw 0 18.667vw;
  border: 1px solid var(--up-color-muted);
  border-radius: 16vw;
  background: #fff;
  color: var(--up-color-muted);
  font-size: 4.267vw;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.up-related-card__cta {
  display: block;
  line-height: 1;
  transform: translateY(-0.125em);
}

.up-related-card__chevron {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 2.133vw;
  height: 4.267vw;
  margin-left: 0;
}

.up-related-card__chevron::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.455vw;
  height: 2.416vw;
  background: url("/chc/brand/urepearl/images/icon_product_link_arrow_001.svg") 50% 50% / 100% 100% no-repeat;
  content: "";
  transform: translate(-50%, -50%) rotate(-90deg);
}

.up-article__back-wrap {
  margin: 0;
  text-align: center;
}

.up-article__back {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 89.333vw;
  min-height: 21.067vw;
  border: 1px solid var(--up-color-primary);
  border-radius: 16vw;
  background: #fff;
  color: var(--up-color-primary);
  font-size: 5.333vw;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

@media print, screen and (min-width: 768px) and (max-width: 1023px) {
  .up-article__lead {
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    line-height: 1.6;
  }

  .up-article__card {
    width: calc(100% - (var(--up-layout-gutter) * 2));
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) clamp(32px, 4.5vw, 56px);
    gap: clamp(48px, 6vw, 64px);
    border-radius: 40px;
  }

  .up-article__lesson-script {
    width: clamp(140px, 22vw, 200px);
  }

  .up-article__lesson-label {
    font-size: clamp(3.2rem, 4vw, 4rem);
  }

  .up-article__headline {
    font-size: clamp(2.6rem, 3.2vw, 3.6rem);
    line-height: 1.3;
  }

  .up-article__source {
    gap: 10px;
    font-size: 1.6rem;
  }

  .up-article__h {
    gap: 16px;
    font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  }

  .up-article__h::before {
    width: 16px;
  }

  .up-article__body p {
    font-size: 1.6rem;
  }

  .up-article__head {
    gap: clamp(28px, 3.5vw, 40px);
  }

  .up-article__head-text {
    gap: clamp(36px, 4.5vw, 50px);
  }

  .up-article__section {
    gap: clamp(28px, 3.5vw, 40px);
  }

  .up-article__sections {
    gap: clamp(48px, 6vw, 60px);
  }

  .up-article__figure,
  .up-related-card__figure {
    border-radius: 20px;
  }

  .up-article__related {
    width: calc(100% - (var(--up-layout-gutter) * 2));
    max-width: 720px;
    margin: 0 auto;
    padding: 70px 0 100px;
    gap: 70px;
  }

  .up-article__related-main {
    gap: 70px;
  }

  .up-article__title {
    margin-bottom: clamp(40px, 5.5vw, 60px);
  }

  .up-article__titles {
    gap: clamp(20px, 2.8vw, 30px);
  }

  .up-article__title .up-detail__title-en {
    width: 42px;
    height: 11px;
  }

  .up-article__title .up-detail__title-en img {
    width: 42px;
    height: 10px;
  }

  .up-article__related-en {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 20px;
    line-height: 0;
  }

  .up-article__related-en img {
    width: 104px;
    height: 11px;
  }

  .up-article__related-ja {
    font-size: 2.4rem;
  }

  .up-article__related-list {
    gap: 24px;
  }

  .up-related-card {
    gap: 18px;
    padding: 40px 28px;
    border-radius: 40px;
  }

  .up-related-card__lesson {
    margin-bottom: 0;
    padding-bottom: 12px;
  }

  .up-related-card__script {
    width: 140px;
  }

  .up-related-card__label {
    font-size: 3.2rem;
  }

  .up-related-card__text {
    font-size: 1.6rem;
  }

  .up-related-card__btn {
    gap: 55px;
    height: 62px;
    min-height: 62px;
    padding: 0 30px 0 70px;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 60px;
  }

  .up-related-card__chevron {
    width: 8px;
    height: 16px;
    margin-left: 0;
  }

  .up-related-card__chevron::before {
    width: 16.7071px;
    height: 9.06066px;
  }

  .up-article__back {
    width: min(350px, 100%);
    min-height: 80px;
    font-size: 2rem;
    border-radius: 60px;
  }
}

@media print, screen and (min-width: 1024px) {
  .up-article__lead {
    font-size: 2.4rem;
    line-height: 1.6;
    letter-spacing: 0.06em;
  }

  .up-article__card {
    width: min(calc(100% - (var(--up-layout-gutter) * 2)), 1000px);
    margin: 0 auto;
    padding: 100px 40px;
    gap: 70px;
    border-radius: 40px;
  }

  .up-article__lesson {
    gap: 24px;
    padding: 0 0 0 0;
  }

  .up-article__lesson-script {
    width: 223px;
  }

  .up-article__lesson-label {
    font-size: 4.6rem;
    letter-spacing: 0.06em;
  }

  .up-article__head,
  .up-article__section {
    width: min(800px, 100%);
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
  }

  .up-article__head {
    gap: 40px;
  }

  .up-article__head-text {
    gap: 50px;
  }

  .up-article__section {
    gap: 30px;
  }

  .up-article__sections {
    width: min(800px, 100%);
    margin: 0 auto;
    gap: 60px;
  }

  .up-article__figure,
  .up-related-card__figure {
    border-radius: 20px;
  }

  .up-article__related-list > li {
    display: flex;
    min-width: 0;
  }

  .up-article__headline {
    font-size: 4.8rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }

  .up-article__source {
    gap: 10px;
    font-size: 1.8rem;
  }

  .up-article__h {
    gap: 18px;
    padding-bottom: 20px;
    font-size: 3.4rem;
  }

  .up-article__h::before {
    width: 16px;
  }

  .up-article__body p {
    font-size: 1.8rem;
  }

  .up-article__related {
    width: min(calc(100% - (var(--up-layout-gutter) * 2)), 1000px);
    margin: 0 auto;
    padding: 100px 0;
    gap: 70px;
  }

  .up-article__related-main {
    gap: 70px;
  }

  .up-article__related-heading {
    gap: 35px;
    width: min(384px, 100%);
    margin: 0 auto;
  }

  .up-article__title {
    margin-bottom: 60px;
  }

  .up-article__titles {
    gap: 30px;
  }

  .up-article__title .up-detail__title-en {
    width: 42px;
    height: 11px;
  }

  .up-article__title .up-detail__title-en img {
    width: 42px;
    height: 10px;
  }

  .up-article__related-en {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 20px;
    line-height: 0;
  }

  .up-article__related-en img {
    width: 104px;
    height: 11px;
  }

  .up-article__related-ja {
    font-size: 2.8rem;
    letter-spacing: 0.06em;
  }

  .up-article__related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .up-related-card {
    height: 100%;
    gap: 18px;
    padding: 30px 20px 40px;
    border-radius: 40px;
  }

  .up-related-card__lesson {
    margin-bottom: 0;
    padding-bottom: 12px;
  }

  .up-related-card__script {
    width: 109px;
  }

  .up-related-card__label {
    font-size: 3.6rem;
  }

  .up-related-card__text {
    flex: 1 1 auto;
    font-size: 1.6rem;
  }

  .up-related-card__btn {
    gap: 55px;
    height: 62px;
    min-height: 62px;
    margin-top: auto;
    padding: 0 30px 0 70px;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 60px;
  }

  .up-related-card__chevron {
    width: 8px;
    height: 16px;
    margin-left: 0;
  }

  .up-related-card__chevron::before {
    width: 16.7071px;
    height: 9.06066px;
  }

  .up-article__back {
    width: 350px;
    min-height: 80px;
    font-size: 2rem;
    border-radius: 60px;
  }
}

/* Article detail — NG habits (separate from meal/sleep/bathing/env)
 * Figma: PC 910:12333 (本文 910:12495) / SP 910:12847
 */
.up-habits {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16vw;
  padding: 16vw 5.333vw;
  background: #fff;
}

.up-habits__intro,
.up-habits__copy,
.up-habits__ng,
.up-habits__blocks,
.up-habits__block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.up-habits__intro {
  gap: 11.2vw;
}

.up-habits__copy {
  gap: 8vw;
}

.up-habits__ng {
  gap: 10.667vw;
}

.up-habits__blocks {
  gap: 16vw;
}

.up-habits__block {
  gap: 8vw;
}

.up-habits__mid {
  display: flex;
  align-items: center;
  gap: 2.667vw;
  margin: 0;
  color: var(--up-color-primary);
  font-size: 5.867vw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.up-habits__mid::before,
.up-habits__mid::after {
  flex: 1 1 0;
  min-width: 2.667vw;
  height: 0;
  border-top: 1px dashed var(--up-color-muted);
  content: "";
}

.up-habits__mid-text {
  flex: 0 1 auto;
  min-width: 0;
}

.up-habits__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10.667vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-habits__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.733vw;
}

.up-habits__photo {
  position: relative;
  width: 59.715vw;
  aspect-ratio: 223.93 / 135;
  margin: 0;
}

.up-habits__photo-inner {
  position: absolute;
  z-index: 0;
  inset: 4.44% 2.68%;
  overflow: hidden;
  border-radius: 6.4vw;
}

.up-habits__photo-inner img,
.up-habits__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.up-habits__photo-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.up-habits__caption {
  margin: 0;
  font-size: 4.8vw;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}

.up-habits__block-head {
  display: flex;
  align-items: center;
  gap: 4.8vw;
  padding-bottom: 5.333vw;
  border-bottom: 2px solid var(--up-color-primary);
}

.up-habits__thumb {
  flex: none;
  width: 36.77vw;
  aspect-ratio: 137.887 / 79.992;
  margin: 0;
  overflow: hidden;
  border-radius: 4.267vw;
}

.up-habits__block-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--up-color-muted);
  font-size: 5.333vw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

.up-habits__body--emphasis p {
  font-size: 4.25vw;
  font-weight: 600;
}

.up-habits__back-wrap {
  margin: 0;
  padding: 18.667vw 5.2vw 26.667vw;
  text-align: center;
}

@supports (text-box-trim: trim-both) {
  .up-habits__mid-text,
  .up-habits__caption,
  .up-habits__block-title {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1023px) {
  .up-habits {
    width: calc(100% - (var(--up-layout-gutter) * 2));
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) clamp(32px, 4.5vw, 56px);
    gap: 60px;
    border-radius: 40px;
  }

  .up-habits__intro {
    gap: clamp(42px, 5.5vw, 60px);
  }

  .up-habits__copy,
  .up-habits__ng,
  .up-habits__block {
    gap: 30px;
  }

  .up-habits__blocks {
    gap: 60px;
  }

  .up-habits__mid {
    gap: 20px;
    font-size: clamp(2rem, 2.4vw, 2.4rem);
  }

  .up-habits__mid::before,
  .up-habits__mid::after {
    min-width: 20px;
  }

  .up-habits__grid {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px 40px;
    width: 100%;
  }

  .up-habits__grid li {
    gap: 14px;
  }

  .up-habits__photo {
    width: 223.93px;
  }

  .up-habits__photo-inner {
    border-radius: 24px;
  }

  .up-habits__caption {
    font-size: 1.8rem;
  }

  .up-habits__block-head {
    gap: 16px;
    padding-bottom: 20px;
  }

  .up-habits__thumb {
    width: 138px;
    border-radius: 16px;
  }

  .up-habits__block-title {
    font-size: clamp(2.2rem, 2.8vw, 2.8rem);
  }

  .up-habits__body--emphasis p {
    font-size: 1.6rem;
  }

  .up-habits__back-wrap {
    padding: 70px 0 100px;
  }
}

@media print, screen and (min-width: 1024px) {
  .up-habits {
    width: min(calc(100% - (var(--up-layout-gutter) * 2)), 1000px);
    margin: 0 auto;
    padding: 100px;
    gap: 60px;
    border-radius: 40px;
  }

  .up-habits__intro {
    gap: 60px;
  }

  .up-habits__copy,
  .up-habits__ng,
  .up-habits__block {
    gap: 30px;
  }

  .up-habits__blocks {
    width: min(800px, 100%);
    margin: 0 auto;
    gap: 60px;
  }

  .up-habits__mid {
    gap: 30px;
    font-size: 2.4rem;
  }

  .up-habits__mid::before,
  .up-habits__mid::after {
    min-width: 30px;
  }

  .up-habits__mid-text {
    flex: none;
    white-space: nowrap;
  }

  .up-habits__grid {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px 60px;
    width: min(800px, 100%);
    margin: 0 auto;
  }

  .up-habits__grid li {
    gap: 14px;
  }

  .up-habits__photo {
    width: 223.93px;
  }

  .up-habits__photo-inner {
    border-radius: 24px;
  }

  .up-habits__caption {
    font-size: 1.8rem;
  }

  .up-habits__block-head {
    gap: 16px;
    padding-bottom: 20px;
  }

  .up-habits__thumb {
    width: 137.887px;
    border-radius: 16px;
  }

  .up-habits__block-title {
    font-size: 3.4rem;
  }

  .up-habits__body--emphasis p {
    font-size: 1.8rem;
  }

  .up-habits__back-wrap {
    padding: 70px 0 100px;
  }
}

@media print, screen and (min-width: 768px) {
  .up-check,
  .up-check__chevron,
  .up-related-card__btn,
  .up-related-card__chevron,
  .up-product-card__buy,
  .up-product-card__links a,
  .up-product-card__doc-icon,
  .up-product-card__pdf-icon,
  .up-product-card__links .up-product-card__chevron,
  .up-nav__home,
  .up-nav__links a,
  .up-nav__store-logo,
  .up-nav__store-external,
  .up-store__logo {
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .up-check:hover {
    color: color-mix(in srgb, var(--up-color-muted) 60%, transparent);
  }

  .up-check:hover .up-check__chevron {
    opacity: 0.6;
  }

  .up-related-card__btn:hover {
    color: color-mix(in srgb, var(--up-color-muted) 60%, transparent);
  }

  .up-related-card__btn:hover .up-related-card__chevron {
    opacity: 0.6;
  }

  .up-product-card__buy:hover {
    color: color-mix(in srgb, var(--up-color-primary) 60%, transparent);
  }

  .up-product-card__links a:hover {
    color: color-mix(in srgb, var(--up-color-muted) 60%, transparent);
  }

  .up-product-card__links a:hover .up-product-card__doc-icon,
  .up-product-card__links a:hover .up-product-card__pdf-icon,
  .up-product-card__links a:hover .up-product-card__chevron {
    opacity: 0.6;
  }

  .up-store__card:hover .up-store__logo {
    opacity: 0.6;
  }

  .up-nav__home:hover,
  .up-nav__links a:hover {
    opacity: 0.6;
  }

  .up-nav__store:hover .up-nav__store-logo,
  .up-nav__store:hover .up-nav__store-external {
    opacity: 0.6;
  }
}