@charset "utf-8";

:root {
  --pc-contents-width: 1440;
  --sp-contents-width: 750;

  --color-loc: #ffcb00;
  --color-immortelle: #FEE136;
  --color-main-txt: #042368;
  --color-main-border: rgb(180, 189, 210);

  --width-contents-xxl: 1440px;
  --width-contents-xl: 1340px;
  --width-contents-lg: 1240px;
  --width-contents-md: 1080px;
  --width-contents-sm: 926px;
  --width-contents-xsm: 780px;
  --width-contents-xl-sp: calc(325/375*100vw);

  --font-min: YakuHanMP, "Yu Mincho Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝B", "MS Mincho", serif;

  --padding-lr-sp: calc(25/375*100vw);
  --padding-inner-lr-sp: calc(25/375*100vw);
}

/* basic */

html {}

body {}

.scrolled:not(.search-overlay--open) .o-header {
  box-shadow: none;
}

.pc,
.dpc {
  display: block !important;
}

.sp,
.dsp {
  display: none !important;
}

.p-reset-serum {
  color: var(--color-main-txt);
  font-family: YakuHanJP, YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  padding: 0 0 9.2rem 0;
}

.p-reset-serum h1,
.p-reset-serum h2,
.p-reset-serum h3,
.p-reset-serum p {
  margin: 0 auto;
}

.p-reset-serum em,
.p-reset-serum i {
  font-style: normal;
}

.p-reset-serum img {
  width: 100%;
}

.p-reset-serum sup {
  font-size: 30%;
  top: -1em;
}

.p-reset-serum picture {
  display: block;
}

.p-reset-serum video {
  vertical-align: bottom;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));

  outline: none;
  border: none;
}

/* layout */
.p-reset-serum .l-container {
  position: relative;
}

.p-reset-serum .l-container.--left {
  margin-right: auto;
}

.p-reset-serum .l-container.--right {
  margin-left: auto;
}

.p-reset-serum .l-container.--center {
  margin: 0 auto;
}

.p-reset-serum .l-container.--xxl {
  width: var(--width-contents-xxl);
}

.p-reset-serum .l-container.--xl {
  width: var(--width-contents-xl);
}

.p-reset-serum .l-container.--lg {
  width: var(--width-contents-lg);
}

.p-reset-serum .l-container.--md {
  width: var(--width-contents-md);
}

.p-reset-serum .l-container.--sm {
  width: var(--width-contents-sm);
}

.p-reset-serum .l-container.--xsm {
  width: var(--width-contents-xsm);
}

.p-reset-serum .l-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* component */
.c-rs-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-rs-button-arrow {
  -webkit-mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_arrow.svg) no-repeat center center/contain;
  mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_arrow.svg) no-repeat center center/contain;
  width: 0.95rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  background: var(--color-main-txt);
}

/* font */
.p-reset-serum .min {
  font-family: var(--font-min);
  font-weight: normal;
}

@media screen and (max-width: 599px) {
  .p-reset-serum {
    padding: 0 0 10vw 0;
  }

  .p-reset-serum .l-container,
  .p-reset-serum .l-container.--xxl,
  .p-reset-serum .l-container.--xl,
  .p-reset-serum .l-container.--lg,
  .p-reset-serum .l-container.--md,
  .p-reset-serum .l-container.--sm,
  .p-reset-serum .l-container.--xsm {
    width: 100%;
  }

  .p-reset-serum .l-flex {
    flex-flow: column;
  }

  .pc,
  .dpc {
    display: none !important;
  }

  .sp,
  .dsp {
    display: block !important;
  }

  .c-rs-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-rs-button-arrow {
    width: 2.55vw;
    height: 2.1vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5vw;
  }

  .p-reset-serum sup {
    font-size: 50%;
    top: -1em;
  }
}

/* loading */
.fv__bestseller-txt {
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, rgba(4, 35, 104, 1), rgba(33, 84, 198, 0.55) 50%, rgba(4, 35, 104, 1));
  text-align: center;
  padding: 0.65rem;
  margin: 0;
  position: relative;
  z-index: 10;
}

.fv__bestseller-txt>sup {
  font-size: 50%;
  top: -0.7rem;
  right: 0.3rem;
}

.reset-serum-loading {
  display: none;
}

.reset-serum-loading .fv__video-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

.reset-serum-loading .fv__video-container-wrap {
  transition: 0.8s;
  width: 100%;
  height: 100%;
  display: none;
}

.reset-serum-loading .fv__video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reset-serum-loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.reset-serum-loading .fv__video-bg {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: #AEAEAE;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.reset-serum-loading .fv__video-txt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

.reset-serum-loading .fv__video-txt>picture {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 36rem;
}

.reset-serum-loading .fv__video-txt>small {
  font-size: 1.2rem;
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  text-align: right;
  color: #fff;
  width: 100%;
}

@media screen and (max-width: 599px) {
  .fv__bestseller-txt {
    font-size: calc(16/375*100vw);
    color: #fff;
    letter-spacing: -0.05em;
    background: linear-gradient(90deg, rgba(4, 35, 104, 1), rgba(33, 84, 198, 0.55) 50%, rgba(4, 35, 104, 1));
    text-align: center;
    padding: 2.45vw;
  }

  .fv__bestseller-txt>sup {
    font-size: 50%;
    top: -2.3vw;
    right: 0.5vw;
  }

  .reset-serum-loading .fv__video-txt>picture {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 100%;
  }

  .reset-serum-loading .fv__video-txt>small {
    font-size: calc(10/375*100vw);
    position: absolute;
    right: 0;
    bottom: 8vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    line-height: calc(12/10);
    width: 93%;
  }
}

/* 
.reset-serum-loading .fv__video-txt::before {
  content: "";
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_fv-crown.svg) no-repeat center/contain;
  width: 7.022rem;
  height: 4.32rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
} */

.reset-serum-loading .fv__video-txt>strong {
  font-size: 4.6rem;
}

.reset-serum-loading .fv__video-txt>strong>span {
  font-family: 'LOccitaneSerif', sans-serif;
  font-size: 7.2rem;
}

.reset-serum-loading .fv__video-txt>strong sup,
.reset-serum-loading .fv__video-txt>em sup {
  font-size: 50%;
}

.reset-serum-loading .fv__video-txt>em {
  font-size: 4.6rem;
  position: relative;
}

.reset-serum-loading .fv__video-txt>em::before {
  content: "×";
  font-size: 3rem;
  position: absolute;
  top: 0;
  left: 50%;
}

.reset-serum-loading .fv__video-txt>em>span {
  font-family: 'LOccitaneSerif', sans-serif;
  font-size: 6.7rem;
}

.reset-serum-loading .fv__video-txt>em>i {
  font-family: var(--font-min);
  font-size: 6.4rem;
}

/* follow-nav */
.follow-nav,
.follow-hamburger__menu {
  opacity: 1;
  visibility: visible;
}

.follow-nav.is-hidden,
.follow-nav.is-scroll-hidden,
.follow-hamburger__menu.is-scroll-hidden,
.follow-hamburger__menu.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.follow-nav {
  padding-bottom: 2rem;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.follow-nav .follow-nav__inner {
  position: relative;
  justify-content: space-between;
  z-index: 10;
}

.follow-nav .follow-nav__bg {
  background: rgba(187, 187, 187, 0.31);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.3px);
  -webkit-backdrop-filter: blur(7.3px);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5.8rem;
  width: 100%;
}

.follow-nav .follow-nav__reset-serum-link {
  background: var(--color-immortelle);
  color: var(--color-main-txt);
  width: 84.6rem;
  border-radius: 0.6rem;
  height: 7.2rem;
  position: relative;
  padding-left: 5rem;
}

.follow-nav .follow-nav__reset-serum-link::before {
  content: "";
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_reset-serum.png) no-repeat center/contain;
  width: 6.4rem;
  height: 10.787rem;
  position: absolute;
  bottom: 0.7rem;
  left: 1.3rem;
}

.follow-nav .follow-nav__reset-serum-link>a {
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  gap: 0.8rem;
  padding-right: 1.7rem;
}

.follow-nav .follow-nav__reset-serum-link>a>em {
  font-size: 2.4rem;
  font-family: var(--font-min);
  letter-spacing: -0.05em;
}

.follow-nav .follow-nav__reset-serum-link>a>em sup {
  top: -2em;
}

.follow-nav .follow-nav__reset-serum-link>a>span {
  font-size: 1.4rem;
  letter-spacing: -0.05em;
}

.follow-nav .follow-nav__reset-serum-link>a>i {
  font-size: 1.3rem;
  border-radius: 100rem;
  background: #fff;
  box-shadow: #888D97 0.15rem 0.2rem;
  display: inline-block;
  width: 12rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow-nav .follow-nav__skincheck-link {
  width: 29.5rem;
  border-radius: 0.6rem;
  background: #F0F4FF;
  height: 7.2rem;
}

.follow-nav .follow-nav__skincheck-link>a {
  width: 100%;
  height: 100%;
  justify-content: center;
  gap: 1rem;
}

.follow-nav .follow-nav__skincheck-link>a>p {
  margin: 0;
}

.follow-nav .follow-nav__skincheck-link>a>p>span {
  font-size: 1.3rem;
  display: block;
  letter-spacing: -0.05em;
}

.follow-nav .follow-nav__skincheck-link>a>p>em {
  font-size: 1.8rem;
  letter-spacing: -0.05em;
}

.follow-nav .follow-nav__skincheck-link>a>i {
  font-size: 1.3rem;
  border-radius: 100rem;
  background: #fff;
  box-shadow: #888D97 0.15rem 0.2rem;
  display: inline-block;
  width: 12rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow-nav .follow-nav__top-link {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #fff;
  font-family: 'LOccitaneSans', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: 0.1em;
  padding-top: 0.5rem;
  cursor: pointer;
}

.follow-nav .follow-nav__top-link::before {
  content: "";
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_arrow.svg);
  width: 1.05rem;
  height: 0.6rem;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  top: 1.1rem;
  position: absolute;
}

@media screen and (max-width: 599px) {
  .follow-nav {
    padding-bottom: calc(20/375*100vw);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }

  .follow-nav .follow-nav__inner {
    position: relative;
    justify-content: space-between;
    z-index: 10;
    padding: 0 var(--padding-lr-sp);
  }

  .follow-nav .follow-nav__bg {
    background: rgba(187, 187, 187, 0.31);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.3px);
    -webkit-backdrop-filter: blur(7.3px);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(58/375*100vw);
    width: 100%;
  }

  .follow-nav .follow-nav__reset-serum-link {
    background: var(--color-immortelle);
    color: var(--color-main-txt);
    width: 100%;
    border-radius: 0.6rem;
    height: calc(76/375*100vw);
    position: relative;
    padding-left: 17vw;
  }

  .follow-nav .follow-nav__reset-serum-link::before {
    content: "";
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_reset-serum.png) no-repeat center/contain;
    width: 16.4vw;
    height: 23.7vw;
    position: absolute;
    bottom: 1.6vw;
    left: 0.7vw;
  }

  .follow-nav .follow-nav__reset-serum-link>a {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding-right: 0;
  }

  .follow-nav .follow-nav__reset-serum-link>a>em {
    font-size: calc(18/375*100vw);
    font-family: var(--font-min);
    letter-spacing: -0.05em;
  }

  .follow-nav .follow-nav__reset-serum-link>a>em sup {
    font-size: 30%;
  }

  .follow-nav .follow-nav__reset-serum-link>a>em>span {
    font-size: calc(12/375*100vw);
    display: block;
    letter-spacing: 0;
    margin-bottom: -0.1vw;
  }

  .follow-nav .follow-nav__reset-serum-link>a>span {
    font-size: calc(10/375*100vw);
    letter-spacing: -0.05em;
    margin-top: -0.1vw;
  }

  .follow-nav .follow-nav__reset-serum-link>a>i {
    font-size: calc(10/375*100vw);
    border-radius: 100rem;
    background: #fff;
    box-shadow: #888D97 0.35vw 0.4vw;
    display: inline-block;
    width: calc(94/375*100vw);
    height: calc(42/375*100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
  }

  .follow-nav .follow-nav__skincheck-link {
    width: 29.5rem;
    border-radius: 0.6rem;
    background: #F0F4FF;
    height: 7.2rem;
    display: none;
  }

  .follow-nav .follow-nav__skincheck-link>a {
    width: 100%;
    height: 100%;
    justify-content: center;
    gap: 1rem;
  }

  .follow-nav .follow-nav__skincheck-link>a>p {
    margin: 0;
  }

  .follow-nav .follow-nav__skincheck-link>a>p>span {
    font-size: 1.3rem;
    display: block;
    letter-spacing: -0.05em;
  }

  .follow-nav .follow-nav__skincheck-link>a>p>em {
    font-size: 1.8rem;
    letter-spacing: -0.05em;
  }

  .follow-nav .follow-nav__skincheck-link>a>i {
    font-size: 1.3rem;
    border-radius: 100rem;
    background: #fff;
    box-shadow: #888D97 0.15rem 0.2rem;
    display: inline-block;
    width: 12rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .follow-nav .follow-nav__top-link {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: #fff;
    font-family: 'LOccitaneSans', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    letter-spacing: 0.1em;
    padding-top: 0.5rem;
    cursor: pointer;
    display: none;
  }

  .follow-nav .follow-nav__top-link::before {
    content: "";
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_arrow.svg);
    width: 1.05rem;
    height: 0.6rem;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    top: 1.1rem;
    position: absolute;
  }
}

/* hamburger-menu */
.follow-hamburger__menu {
  position: fixed;
  right: 0;
  top: 142px;
  z-index: 500;
  height: 100%;
}

.follow-hamburger__menu.is-active {
  width: 100%;
}

.hamburger-menu__container {
  margin: 0 auto;
  padding-bottom: 0;
  background: #fff;
  right: 0;
  padding: 0;
  position: absolute;
  transform: translateX(100%);
  transition: 0.3s;
  top: 0;
  width: 31.5rem;
  height: calc(100vh);
  z-index: 550;
  overflow-y: scroll;
}

#hamburger {
  display: none;
}

#hamburger:checked~.hamburger-menu__container {
  transform: translateX(0%);
  transition: 0.4s;
  overflow-y: scroll;
}

.hamburger__menu-button {
  display: none;
}

.hamburger__menu-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  height: 4rem;
  justify-content: center;
  gap: 0.7rem;
  width: 5.049rem;
  position: absolute;
  right: 5rem;
  top: 1.6rem;
  z-index: 551;
}

.hamburger__menu-button>span {
  background: var(--color-main-txt);
  display: block;
  height: 1px;
  transition: 0.4s;
  width: 100%;
}

.hamburger__menu-button>p {
  font-family: 'LOccitaneSans', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  margin-left: 0.2rem;
}

#hamburger:checked~.hamburger__menu-button>span:nth-of-type(1) {
  transform: translateY(0.39rem) rotate(8deg);
}

#hamburger:checked~.hamburger__menu-button>span:nth-of-type(2) {
  transform: translateY(-0.39rem) rotate(-8deg);
}

.hamburger__menu-bg {
  background: rgba(187, 187, 187, 0.31);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.3px);
  -webkit-backdrop-filter: blur(7.3px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  height: 100vh;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 501;
  transition: opacity 0.2s, visibility 0.2s;
}

#hamburger:checked~.hamburger__menu-bg {
  opacity: 1;
  visibility: visible;
}

.hamburger-menu__container ul {
  padding: 13rem 0 17rem 5rem;
  position: relative;
}

.hamburger-menu__container ul::before {
  background: var(--color-main-border);
  width: 27.5rem;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  top: 7rem;
  content: "";
  position: absolute;
}

.hamburger-menu__container ul li {
  padding: 0;
  position: relative;
  font-family: var(--font-min);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.hamburger-menu__container ul li+li {
  margin-top: 2.2rem;
}

.hamburger-menu__container ul li.hamburger-menu__list-item-branch {
  font-size: 1.3rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.hamburger-menu__container ul li.hamburger-menu__list-item-branch::before {
  content: "";
  background: var(--color-main-txt);
  height: 1px;
  width: 2.8rem;
  display: inline-block;
}

.hamburger-menu__container ul li a {
  font-size: 1.6rem;
  color: var(--color-main-txt);
  text-decoration: none;
}

.hamburger-menu__container ul li.hamburger-menu__list-item-branch>a {
  font-size: 1.3rem;
}

@media screen and (max-width: 599px) {
  .follow-hamburger__menu {
    position: fixed;
    right: 0;
    top: 55px;
    z-index: 500;
    height: 100%;
  }

  .follow-hamburger__menu.is-active {
    width: 100%;
  }

  .hamburger-menu__container {
    margin: 0 auto;
    padding-bottom: 0;
    background: #fff;
    right: 0;
    padding: 0;
    position: absolute;
    transform: translateX(100%);
    transition: 0.3s;
    top: 0;
    width: 100%;
    height: calc(100vh);
    z-index: 550;
    overflow-y: scroll;
    transition: transform 0.4s;
  }

  #hamburger {
    display: none;
  }

  #hamburger:checked~.hamburger-menu__container {
    transform: translateX(0%);
    transition: transform 0.4s;
  }

  .hamburger__menu-button {
    display: none;
  }

  .hamburger__menu-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    height: 10vw;
    justify-content: center;
    gap: calc(7/375*100vw);
    width: calc(32/375*100vw);
    position: absolute;
    right: calc(27/375*100vw);
    top: 4vw;
    z-index: 551;
  }

  .hamburger__menu-button>span {
    background: var(--color-main-txt);
    display: block;
    height: 1px;
    transition: 0.4s;
    width: 100%;
  }

  .hamburger__menu-button>p {
    font-family: 'LOccitaneSans', sans-serif;
    font-size: calc(10/375*100vw);
    letter-spacing: 0.06em;
    margin-left: 0.2vw;
    margin-top: -1vw;
  }

  #hamburger:checked~.hamburger__menu-button>span:nth-of-type(1) {
    transform: translateY(0.39rem) rotate(8deg);
  }

  #hamburger:checked~.hamburger__menu-button>span:nth-of-type(2) {
    transform: translateY(-0.39rem) rotate(-8deg);
  }

  .hamburger__menu-bg {
    background: rgba(187, 187, 187, 0.31);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.3px);
    -webkit-backdrop-filter: blur(7.3px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    height: 100vh;
    left: 0;
    position: absolute;
    width: 100vw;
    z-index: 501;
    transition: opacity 0.2s, visibility 0.2s;
    display: none;
  }

  #hamburger:checked~.hamburger__menu-bg {
    opacity: 1;
    visibility: visible;
  }

  .hamburger-menu__container ul {
    padding: 30vw 0 80vw calc(50/375*100vw);
    position: relative;
    overflow-y: scroll;
  }

  .hamburger-menu__container ul::before {
    background: var(--color-main-border);
    width: calc(325/375*100vw);
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    top: 17.5vw;
    content: "";
    position: absolute;
  }

  .hamburger-menu__container ul li {
    padding: 0;
    position: relative;
    font-family: var(--font-min);
    font-size: calc(16/375*100vw);
    letter-spacing: 0.02em;
  }

  .hamburger-menu__container ul li+li {
    margin-top: 6vw;
  }

  .hamburger-menu__container ul li.hamburger-menu__list-item-branch {
    font-size: calc(13/375*100vw);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5vw;
    margin-top: 2vw;
  }

  .hamburger-menu__container ul li.hamburger-menu__list-item-branch::before {
    content: "";
    background: var(--color-main-txt);
    height: 1px;
    width: 8vw;
    display: inline-block;
  }

  .hamburger-menu__container ul li a {
    font-size: calc(16/375*100vw);
    color: var(--color-main-txt);
    text-decoration: none;
  }

  .hamburger-menu__container ul li.hamburger-menu__list-item-branch>a {
    font-size: calc(13/375*100vw);
  }
}


/* fv */
@keyframes fvFadeIn {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }

  50% {
    opacity: 0;
    transform: translateY(4rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fvFadeIn02 {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }

  80% {
    opacity: 0;
    transform: translateY(4rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fv .fv__img-container {
  animation-name: fvFadeIn02;
  animation-duration: 5s;
  position: relative;
}

.fv .fv__txt-container {
  position: absolute;
  left: 30.4rem;
  top: 4.4rem;
}

.fv .fv__txt {
  color: #fff;
  animation-name: fvFadeIn02;
  animation-duration: 6s;
}

.fv .fv__txt>h1 {
  font-size: 5.8rem;
  line-height: calc(76/58);
}

.fv .fv__txt>h1>.line {
  text-align: left !important;
}

@media screen and (max-width: 599px) {
  .fv .fv__img-container {
    position: relative;
  }

  .fv .fv__txt-container {
    position: absolute;
    left: 50%;
    top: 5vw;
    transform: translatex(-50%);
    width: 100%;
  }

  .fv .fv__txt {
    color: #fff;
    text-align: center;
  }

  .fv .fv__txt>h1 {
    font-size: calc(32/375*100vw);
    line-height: calc(42/32);
    letter-spacing: -0.02em;
    text-align: center;
  }


  .fv .fv__txt>h1>.line {
    text-align: center !important;
  }
}

/* special-movie */
.special-movie .special-movie__inner {
  padding: 7.5rem 0;
}

.special-movie .special-movie__head {
  text-align: center;
  letter-spacing: 0.02em;
}

.special-movie .special-movie__head>h2 {
  font-size: 4.2rem;
  font-weight: 500;
}

.special-movie .special-movie__head>h2 i {
  font-size: 2.4rem;
  font-family: var(--font-min);
  display: block;
  font-weight: 500;
}

.special-movie .special-movie__body {
  width: 100%;
  margin-top: 4.7rem;
  position: relative;
}

.special-movie .special-movie__body iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.special-movie .special-movie__body>video {
  width: 100%;
}

.special-movie .special-movie__body-video-btn {
  position: absolute;
  width: 2.8rem;
  height: 2.4rem;
  bottom: 2rem;
  right: 3rem;
  background: none;
  transition: 0.4s;
}

.special-movie .special-movie__body-video-btn>img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 599px) {
  .special-movie .special-movie__inner {
    width: 100%;
    padding: calc(60/375*100vw) 0;
  }

  .special-movie .special-movie__head {
    text-align: center;
    letter-spacing: 0.02em;
  }

  .special-movie .special-movie__head>h2 {
    font-size: calc(24/375*100vw);
    font-weight: 500;
  }

  .special-movie .special-movie__head>h2>i {
    font-size: calc(16/375*100vw);
    font-family: var(--font-min);
    display: block;
    font-weight: 500;
    margin-bottom: 1vw;
  }

  .special-movie .special-movie__body {
    width: 100%;
    margin-top: 7.5vw;
  }

  .special-movie .special-movie__body>video {
    width: 100%;
  }


  .special-movie .special-movie__body-video-btn {
    position: absolute;
    width: calc(21/375*100vw);
    height: calc(18/375*100vw);
    bottom: 5vw;
    right: 6vw;
    background: none;
    transition: 0.4s;
  }

}

/* reset-serum-nav */
.reset-serum-nav {
  background: var(--color-immortelle);
  padding: 2rem 0;
}

.reset-serum-nav .nav__list {
  justify-content: space-between;
}

.reset-serum-nav .nav__list-item {
  width: 29.5rem;
  background: #fff;
  border-radius: 0.6rem;
  position: relative;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.reset-serum-nav .nav__list-item::before {
  content: "";
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: -1rem;
  left: -1rem;
}

.reset-serum-nav .nav__list-item:nth-of-type(1)::before {
  width: 11.9rem;
  height: 11.6rem;
  top: -4.8rem;
  left: -3.6rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_01.png);
}

.reset-serum-nav .nav__list-item:nth-of-type(2)::before {
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_02.png);
}

.reset-serum-nav .nav__list-item:nth-of-type(3)::before {
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_03.png);
}

.reset-serum-nav .nav__list-item:nth-of-type(4)::before {
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_04.png);
}

.reset-serum-nav .nav__list-item .c-rs-button {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 1.8rem;
  text-align: center;
  padding: 1.6rem 0 1.5rem;
  letter-spacing: -0.08em;
  color: var(--color-main-txt);
}

.reset-serum-nav .nav__list-item .c-rs-button>i {
  font-size: 1.4rem;
  display: block;
  font-family: var(--font-min);
  margin-bottom: 0.1rem;
  letter-spacing: 0;
}

@media screen and (max-width: 599px) {
  .reset-serum-nav {
    padding: 5vw var(--padding-lr-sp);
  }

  .reset-serum-nav .nav__list {
    justify-content: space-between;
    flex-flow: column;
    gap: 3vw;
  }

  .reset-serum-nav .nav__list-item {
    width: 100%;
    background: #fff;
    border-radius: 2.5vw;
    position: relative;
    filter: drop-shadow(0 2vw 3vw rgba(0, 0, 0, 0.2));
  }

  .reset-serum-nav .nav__list-item::before {
    content: "";
    width: calc(48/375*100vw);
    height: calc(48/375*100vw);
    position: absolute;
    top: -1.5vw;
    left: 3.5vw;
  }

  .reset-serum-nav .nav__list-item:nth-of-type(1)::before {
    width: calc(107.8/375*100vw);
    height: calc(107.4/375*100vw);
    top: -9.5vw;
    left: -5.5vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_01.png);
  }

  .reset-serum-nav .nav__list-item:nth-of-type(2)::before {
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_02.png);
  }

  .reset-serum-nav .nav__list-item:nth-of-type(3)::before {
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_03.png);
  }

  .reset-serum-nav .nav__list-item:nth-of-type(4)::before {
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_nav_04.png);
  }

  .reset-serum-nav .nav__list-item .c-rs-button {
    width: 100%;
    height: 100%;
    display: block;
    font-size: calc(14/375*100vw);
    text-align: left;
    padding: 2.35vw 0 2.3vw 19vw;
  }

  .reset-serum-nav .nav__list-item .c-rs-button>i {
    font-size: calc(10/375*100vw);
    display: block;
    font-family: var(--font-min);
  }

  .reset-serum-nav .nav__list-item .c-rs-button>i sup {}
}

/* reset-serum-recommend */
.reset-serum-recommend {
  background: var(--color-main-txt);
}

.reset-serum-recommend .reset-serum-recommend__inner {
  background: var(--color-main-txt);
  color: #fff;
  text-align: center;
}

.reset-serum-recommend .reset-serum-recommend__txt {
  flex: 1;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head {
  font-family: var(--font-min);
  padding: 0 0 1.2rem 0;
  border-bottom: 1px solid var(--color-main-border);
  margin: 0 10rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>em {
  font-size: 5.4rem;
  display: block;
  font-weight: 500;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>em sup {
  top: -2em;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>p {
  font-size: 3.9rem;
  font-weight: 500;
  margin-top: -0.4rem;
  letter-spacing: -0.03em;
  line-height: 2;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>p>i {
  position: relative;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>p>em,
.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>p>i {
  display: inline-block !important;
}

.reset-serum-recommend__txt-head-underline {
  position: absolute;
  bottom: -4rem;
  left: 47%;
  transform: translateX(-50%);
  width: 17rem;
}

.reset-serum-recommend__txt-head-underline img {
  object-fit: contain;
}

.reset-serum-recommend__txt-head-underline>span {
  width: 100%;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body {
  padding: 3.3rem 0 0;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead {
  font-family: var(--font-min);
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead>p {
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead>p>i {
  font-size: 1.8rem;
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select {
  margin-top: 4rem;
  margin: 2.4rem 10rem 0;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select>p {
  margin-bottom: 0.9rem;
  font-size: 1.4rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap {}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap select {
  flex: 1;
  color: var(--color-main-txt);
  height: 5rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .select-box {
  position: relative;
  display: inline-block;
  flex: 1;
  color: var(--color-main-txt);
  font-size: 1.3rem;
  overflow: visible;
  font-weight: 500;
}

.reset-serum-recommend .reset-serum-recommend__txt .select-box .item-selected {
  cursor: pointer;
  background: #CFD8EA;
  height: 5rem;
  display: flex;
  align-items: center;
  padding-left: 2.5rem;
  justify-content: flex-start;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-selected>i {
  font-size: 1.4rem;
  font-weight: 600;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-selected .c-rs-button-arrow {
  margin: 0;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-list {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100%;
  transition: opacity 0.3s, visibility 0.3s;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-list.is-active {
  opacity: 1;
  visibility: visible;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-list div:not(.is-selected) {
  cursor: pointer;
  background: #AFBDDC;
  height: 5rem;
  display: flex;
  align-items: center;
  padding-left: 2.5rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .item-list div:not(.is-selected)>i {
  font-weight: 600;
  font-size: 1.4rem;
}

.reset-serum-recommend .reset-serum-recommend__txt .is-selected {
  display: none;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap .c-buy {
  width: 20rem;
  background: #fff;
  height: 100%;
  height: 5rem;
  color: var(--color-main-txt);
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-note {
  margin: 0 4rem 0 10rem;
  text-align: left;
}

.reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-note small {
  font-size: 1.2rem;
  line-height: calc(18/12);
  padding-top: 2rem;
  display: block;
}

.reset-serum-recommend .reset-serum-recommend__img {
  width: 72rem;
}

@media screen and (max-width: 599px) {
  .reset-serum-recommend .reset-serum-recommend__inner {
    background: var(--color-main-txt);
    color: #fff;
    text-align: center;
    flex-flow: column-reverse;
  }

  .reset-serum-recommend .reset-serum-recommend__txt {
    flex: 1;
    padding: 10.6vw 0 9vw;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head {
    font-family: var(--font-min);
    padding: 0 0 2vw 0;
    border-bottom: 1px solid var(--color-main-border);
    margin: 0 var(--padding-lr-sp);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>em {
    font-size: calc(36/375*100vw);
    display: block;
    font-weight: 500;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>em sup {
    top: -1em;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-head>h2>p {
    font-size: calc(26/375*100vw);
    font-weight: 500;
    margin-top: -1.5vw;
    font-feature-settings: "palt";
  }

  .reset-serum-recommend__txt-head-underline {
    position: absolute;
    bottom: -7.4vw;
    left: 46.7%;
    transform: translateX(-50%);
    width: calc(106/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body {
    padding: 7.3vw 0 0;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead {
    font-family: var(--font-min);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead>p {
    font-size: calc(22/375*100vw);
    font-weight: 500;
    letter-spacing: -0.03em;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-lead>p>i {
    font-size: calc(16/375*100vw);
    display: block;
    font-weight: 500;
    margin-bottom: 0.5vw;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select {
    margin-top: 4vw;
    margin: 5.1vw var(--padding-lr-sp) 0;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select>p {
    margin-bottom: 1.8vw;
    font-size: calc(12/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap {
    gap: calc(10/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap select {
    flex: 1;
    color: var(--color-main-txt);
    height: calc(40/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .select-box {
    position: relative;
    display: inline-block;
    flex: 1;
    color: var(--color-main-txt);
    font-size: calc(13/375*100vw);
    overflow: visible;
    font-weight: 500;
    width: 100%;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .select-box .item-selected {
    cursor: pointer;
    background: #CFD8EA;
    height: calc(40/375*100vw);
    display: flex;
    align-items: center;
    padding-left: 5vw;
    justify-content: flex-start;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .select-box .item-selected>em {
    margin: 0;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-selected>i {
    font-size: calc(14/375*100vw);
    font-weight: 600;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-selected .c-rs-button-arrow {
    margin: 0;
    right: 4vw;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-list {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 100%;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-list.is-active {
    opacity: 1;
    visibility: visible;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-list div:not(.is-selected) {
    cursor: pointer;
    background: #AFBDDC;
    height: calc(40/375*100vw);
    display: flex;
    align-items: center;
    padding-left: 5vw;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-list div:not(.is-selected)>em {
    margin: 0;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .item-list div:not(.is-selected)>i {
    font-weight: 600;
    font-size: calc(14/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .is-selected {
    display: none;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-select-box-wrap .c-buy {
    width: calc(158/375*100vw);
    background: #fff;
    height: 100%;
    height: calc(48/375*100vw);
    color: var(--color-main-txt);
    font-size: calc(12/375*100vw);
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-note {
    margin: 0 var(--padding-lr-sp);
    text-align: left;
  }

  .reset-serum-recommend .reset-serum-recommend__txt .reset-serum-recommend__txt-body-note small {
    font-size: calc(10/375*100vw);
    line-height: calc(12/10);
    padding-top: 11vw;
    display: block;
  }

  .reset-serum-recommend .reset-serum-recommend__img {
    width: 100%;
  }
}

/* reset-serum-feature */
.reset-serum-feature .feature__inner {
  position: relative;
}

/* .reset-serum-feature .feature__inner::before {
  content: "";
  position: absolute;
  width: 37.94rem;
  height: 37.98rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_01.png);
  top: 39.6rem;
  right: -0.4rem;
  z-index: 50;
} */

/* .reset-serum-feature .feature__inner::after {
  content: "";
  position: absolute;
  width: 16.4rem;
  height: 85.919rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_02.png);
  left: 0;
  bottom: -34rem;
  z-index: 50;
} */
.reset-serum-feature .feature__bubbles-before {
  position: absolute;
  width: 35.4rem;
  height: 42.4rem;
  top: 33.6rem;
  right: 0;
}

.reset-serum-feature .feature__bubbles-before>span {
  content: "";
  position: absolute;
  width: 100%;
  right: 0;
  z-index: 50;
}

.reset-serum-feature .feature__bubbles-before>span.js-fadeInAddClass {
  transform: translateY(4rem);
}

.reset-serum-feature .feature__bubbles-before>span.js-fadeInAddClass.is-fadeIn {
  transform: translateY(0);
}

.reset-serum-feature .feature__bubbles-before .feature__bubbles-before-01 {
  height: 10rem;
  width: 10rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_01-01.png);
  bottom: 0;
  left: 0;
}

.reset-serum-feature .feature__bubbles-before .feature__bubbles-before-02 {
  height: 18rem;
  width: 16.2rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_01-02.png);
  bottom: 10rem;
  right: 0;
}

.reset-serum-feature .feature__bubbles-before .feature__bubbles-before-03 {
  height: 18rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_01-03.png);
  bottom: 26.2rem;
  width: 16.2rem;
  right: 0;
}

.reset-serum-feature .feature__bubbles-after {
  position: absolute;
  width: 18rem;
  bottom: -34rem;
}

.reset-serum-feature .feature__bubbles-after>span {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 50;
}

.reset-serum-feature .feature__bubbles-after>span.js-fadeInAddClass {
  transform: translateY(4rem);
}

.reset-serum-feature .feature__bubbles-after>span.js-fadeInAddClass.is-fadeIn {
  transform: translateY(0);
}

.reset-serum-feature .feature__bubbles-after .feature__bubbles-after-01 {
  height: 47.9rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_02-01.png);
  bottom: 0;
}

.reset-serum-feature .feature__bubbles-after .feature__bubbles-after-02 {
  height: 9rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_02-02.png);
  bottom: 47.9rem;
}

.reset-serum-feature .feature__bubbles-after .feature__bubbles-after-03 {
  height: 7.6rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_02-03.png);
  bottom: 56.9rem;
}

.reset-serum-feature .feature__bubbles-after .feature__bubbles-after-04 {
  height: 7.6rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_02-04.png);
  bottom: 64.5rem;
}

.reset-serum-feature .feature__head {
  position: relative;
  height: 54rem;
}

.reset-serum-feature .feature__head img {
  height: 100%;
  object-fit: cover;
}

.reset-serum-feature .feature__head .feature__head-txt {
  position: absolute;
  left: 50%;
  top: 10.2rem;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  width: 100%;
}

.reset-serum-feature .feature__head .feature__head-txt>h2 {
  font-weight: 500;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>span {
  font-size: 3.2rem;
  position: relative;
  display: block;
  margin-bottom: 4rem;
  overflow: visible;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>span::after {
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 4rem;
  bottom: -2.2rem;
  background: #fff;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>em {
  font-size: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>em b:first-of-type {
  font-size: 5.6rem;
  padding-top: 0.7rem;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>em b {
  font-family: 'LOccitaneSerif', sans-serif;
  font-weight: 500;
  font-size: 7.6rem;
  font-weight: 400;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>em i {
  font-size: 6rem;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>p {
  font-size: 2rem;
  line-height: calc(42/28);
  margin-top: 0.2rem;
  font-weight: 600;
}

.reset-serum-feature .feature__head .feature__head-txt>h2>p sup {
  top: -2em;
}

.reset-serum-feature .feature__head .feature__head-txt>p {
  font-size: 1.8rem;
  margin-top: 1.6rem;
}

.reset-serum-feature .feature__inner.l-container .feature__body {
  background: #fff;
  padding: 0;
  margin-top: -6.5rem;
  position: relative;
}

.reset-serum-feature .feature__body-item {
  display: grid;
  gap: 0 7rem;
  padding: 6rem 0 2rem;
  margin: 0 8rem;
  z-index: 51;
  position: relative;
}

.reset-serum-feature .feature__body-item:nth-of-type(1) {
  grid-template-columns: 49rem 1fr;
  padding-bottom: 0.5rem;
  padding-top: 6.5rem;
}

.reset-serum-feature .feature__body-item:nth-of-type(2) {
  grid-template-columns: 49rem 1fr;
  gap: 3rem 7rem;
}

.reset-serum-feature .feature__body-item+.feature__body-item {
  border-top: 1px solid var(--color-main-border);
}

.reset-serum-feature .feature__body-item .feature__body-img {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.reset-serum-feature .feature__body-item .feature__body-img>video {
  width: 54rem;
  margin-left: -8rem;
  object-fit: cover;
  height: auto;
}

.reset-serum-feature .feature__body-item .feature__body-txt>h3>span {
  color: #fff;
  font-size: 2.4rem;
  background: linear-gradient(90deg, rgba(4, 35, 104, 1), rgba(33, 84, 198, 0.55) 50%, rgba(4, 35, 104, 1));
  display: inline-block;
  font-weight: 500;
  padding: 0.25rem 1.6rem;
}

.reset-serum-feature .feature__body-item .feature__body-txt>h3>span+span {
  margin-top: 0.5rem;
}

.reset-serum-feature .feature__body-item .feature__body-txt>p {
  font-size: 1.8rem;
  line-height: calc(32/18);
  margin-top: 1rem;
  font-family: var(--font-min);
}

.reset-serum-feature .feature__body-item .feature__body-txt>picture {
  margin-top: 2rem;
}

.reset-serum-feature .feature__body-note {
  text-align: right;
  z-index: 51;
  position: relative;
}

@media screen and (max-width: 599px) {

  /* .reset-serum-feature .feature__inner::before {
    content: "";
    position: absolute;
    width: 71.94vw;
    height: 94.98vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_01.png);
    top: 87.6vw;
    right: -11.9vw;
    z-index: 50;
  }

  .reset-serum-feature .feature__inner::after {
    content: "";
    position: absolute;
    width: 28.4vw;
    height: 120.919vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_02.png);
    left: 0;
    bottom: -35vw;
    z-index: 50;
  } */

  .reset-serum-feature .feature__bubbles-before {
    position: absolute;
    width: calc(150/375*100vw);
    height: calc(331/375*100vw);
    top: 93.6vw;
    right: 0;
  }

  .reset-serum-feature .feature__bubbles-before>span {
    content: "";
    position: absolute;
    width: 100%;
    right: 0;
    z-index: 50;
  }

  .reset-serum-feature .feature__bubbles-before>span.js-fadeInAddClass {
    transform: translateY(4rem);
  }

  .reset-serum-feature .feature__bubbles-before>span.js-fadeInAddClass.is-fadeIn {
    transform: translateY(0);
  }

  .reset-serum-feature .feature__bubbles-before .feature__bubbles-before-01 {
    height: calc(100/375*100vw);
    width: 100%;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_01-01.png);
    bottom: 0;
    right: 0;
    left: auto;
  }

  .reset-serum-feature .feature__bubbles-before .feature__bubbles-before-02 {
    height: calc(154/375*100vw);
    width: 100%;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_01-02.png);
    bottom: calc(100/375*100vw);
    right: 0;
  }

  .reset-serum-feature .feature__bubbles-before .feature__bubbles-before-03 {
    height: calc(77/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_01-03.png);
    bottom: calc(254/375*100vw);
    width: 100%;
    right: 0;
  }

  .reset-serum-feature .feature__bubbles-after {
    position: absolute;
    width: calc(100/375*100vw);
    height: calc(400/375*100vw);
    bottom: -27vw;
  }

  .reset-serum-feature .feature__bubbles-after>span {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 50;
  }

  .reset-serum-feature .feature__bubbles-after>span.js-fadeInAddClass {
    transform: translateY(4rem);
  }

  .reset-serum-feature .feature__bubbles-after>span.js-fadeInAddClass.is-fadeIn {
    transform: translateY(0);
  }

  .reset-serum-feature .feature__bubbles-after .feature__bubbles-after-01 {
    height: calc(100/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_02-01.png);
    bottom: 0;
  }

  .reset-serum-feature .feature__bubbles-after .feature__bubbles-after-02 {
    height: calc(100/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_02-02.png);
    bottom: calc(100/375*100vw);
  }

  .reset-serum-feature .feature__bubbles-after .feature__bubbles-after-03 {
    height: calc(100/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_02-03.png);
    bottom: calc(200/375*100vw);
  }

  .reset-serum-feature .feature__bubbles-after .feature__bubbles-after-04 {
    height: calc(100/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_02-04.png);
    bottom: calc(300/375*100vw);
  }


  .reset-serum-feature .feature__head {
    position: relative;
    height: auto;
  }

  .reset-serum-feature .feature__head .feature__head-img {
    width: 100%;
  }

  .reset-serum-feature .feature__head .feature__head-img video {
    width: 100%;
    height: calc(400/375*100vw);
    object-fit: cover;
  }

  .reset-serum-feature .feature__head .feature__head-img-multiply {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background: #AEAEAE;
  }

  .reset-serum-feature .feature__head .feature__head-txt {
    position: absolute;
    left: 50%;
    top: 14vw;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    width: 100%;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2 {
    font-weight: 500;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>span {
    font-size: calc(20/375*100vw);
    line-height: calc(28/20);
    position: relative;
    display: block;
    margin-bottom: 6vw;
    overflow: visible;
    text-align: center;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>span::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: calc(40/375*100vw);
    bottom: -4.4vw;
    background: #fff;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>em {
    font-size: calc(32/375*100vw);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>em b {
    font-family: 'LOccitaneSerif', sans-serif;
    font-weight: 500;
    font-size: calc(52/375*100vw);
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>em b:first-of-type {
    font-size: calc(40/375*100vw);
    padding-top: 0.7vw;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>em i {
    font-size: calc(45/375*100vw);
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>p {
    font-size: calc(16/375*100vw);
    margin-top: 0;
  }

  .reset-serum-feature .feature__head .feature__head-txt>h2>p sup {
    top: -1em;
  }

  .reset-serum-feature .feature__head .feature__head-txt>p {
    font-size: calc(14/375*100vw);
    line-height: calc(21/14);
    margin-top: 1.2vw;
  }

  .reset-serum-feature .feature__inner.l-container .feature__body {
    background: #fff;
    width: var(--width-contents-xl-sp);
    padding: calc(33/375*100vw) var(--padding-inner-lr-sp) 0;
    margin-top: calc(130/375*100vw * -1);
  }

  .reset-serum-feature .feature__body-item {
    display: grid;
    gap: 0 5vw;
    padding: 10.666vw 0 0;
    margin: 0;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(1) {
    grid-template-columns: 100%;
    padding-bottom: 0;
    padding-top: 0;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(1) .feature__body-desc {
    width: calc(100% + 26.66vw);
    margin: 0 -13.33vw;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(2) {
    grid-template-columns: 100%;
    gap: 0;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(2) .feature__body-txt {
    text-align: center;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(2) .feature__body-txt>p {
    margin-top: 4.4vw;
  }

  .reset-serum-feature .feature__body-item:nth-of-type(2) .feature__body-desc {
    margin-top: 5vw;
  }

  .reset-serum-feature .feature__body-item+.feature__body-item {
    border-top: 1px solid var(--color-main-border);
  }

  .reset-serum-feature .feature__body-item .feature__body-img {
    grid-row: 2 / 3;
    grid-column: 1 / 1;
    margin-top: 5.5vw;
  }

  .reset-serum-feature .feature__body-item .feature__body-img>video {
    width: calc(100% + 10vw);
    margin: 0 -5vw;
    height: calc(325/375*100vw);
    object-fit: contain;
  }

  .reset-serum-feature .feature__body-item .feature__body-txt>h3>span {
    color: #fff;
    font-size: calc(16/375*100vw);
    background: linear-gradient(90deg, rgba(4, 35, 104, 1), rgba(33, 84, 198, 0.55) 50%, rgba(4, 35, 104, 1));
    display: inline-block;
    font-weight: 500;
    padding: 0.65vw 3.2vw;
    letter-spacing: -0.05em;
  }

  .reset-serum-feature .feature__body-item .feature__body-txt>h3>span+span {
    margin-top: 1vw;
  }

  .reset-serum-feature .feature__body-item .feature__body-txt>p {
    font-size: calc(13/375*100vw);
    line-height: calc(22/14);
    margin-top: 2.4vw;
    letter-spacing: -0.05em;
    text-align: left;
  }

  .reset-serum-feature .feature__body-item .feature__body-txt>picture {
    margin-top: 2vw;
  }

  .reset-serum-feature .feature__body-note {
    text-align: left;
  }

  .reset-serum-feature .feature__body-note>.c-note {
    padding-top: 5vw;
  }
}

/* message */
.message {
  background: no-repeat center/cover url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/bg_message.jpg);
  padding: 7rem 0;
  margin: 7rem auto 0;
}

.message .message__inner {
  background: #fff;
  padding: 6.3rem 7.4rem 4rem;
}

.message .message__head>span {
  background: var(--color-main-txt);
  color: #fff;
  font-size: 1.6rem;
  width: 20.5rem;
  height: 5.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.message .message__head>h2 {
  font-size: 2.8rem;
  letter-spacing: -0.05em;
  font-weight: 500;
  text-align: center;
}

.message .message__body-desc {
  padding: 0 0 0 4rem;
  margin-top: 6rem;
}

.message .message__body-desc .message__body-desc-img {
  width: 32rem;
}

.message .message__body-desc .message__body-desc-txt {
  flex: 1;
  text-align: center;
  font-family: var(--font-min);
}

.message .message__body-desc .message__body-desc-txt>p>span {
  font-size: 1.4rem;
  line-height: calc(26/14);
  display: block;
}

.message .message__body-desc .message__body-desc-txt>p>span:nth-of-type(1) {
  margin-bottom: 1.2rem;
}

.message .message__body-desc .message__body-desc-txt>p>span:nth-of-type(2) {
  margin-top: 1.5rem;
}

.message .message__body-desc .message__body-desc-txt>p>em {
  font-size: 2rem;
  line-height: calc(28/20);
  display: block;
  margin: 2rem auto;
  position: relative;
  background: linear-gradient(transparent 85%, var(--color-immortelle) 0%);
  display: inline;
}

.message .message__body-profile {
  margin-top: 4rem;
  border-top: 1px solid var(--color-main-border);
  padding: 2.5rem 0 0;
  align-items: flex-start;
  justify-content: flex-start;
}

.message .message__body-profile .message__body-profile-head {
  width: 10.8rem;
}

.message .message__body-profile .message__body-profile-head>h3 {
  font-size: 1.4rem;
  font-family: 'LOccitaneSans', sans-serif;
  line-height: calc(26/14);
  letter-spacing: 0.04em;
}

.message .message__body-profile .message__body-profile-txt>p {
  font-size: 1.4rem;
  line-height: calc(26/14);
}

@media screen and (max-width: 599px) {
  .message {
    background: no-repeat center/cover url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/bg_message.jpg);
    padding: var(--padding-lr-sp) var(--padding-lr-sp);
    margin: 9.5vw auto 0;
  }

  .message .message__inner {
    background: #fff;
    padding: 0 var(--padding-inner-lr-sp) 8.4vw;
  }

  .message .message__head>span {
    background: var(--color-main-txt);
    color: #fff;
    font-size: calc(12/375*100vw);
    width: calc(140/375*100vw);
    height: calc(44/375*100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
  }

  .message .message__head>h2 {
    font-size: calc(22/375*100vw);
    font-weight: 500;
    text-align: center;
    margin-top: 5.9vw;
  }

  .message .message__body-desc {
    padding: 0;
    margin-top: 6.8vw;
  }

  .message .message__body-desc .message__body-desc-img {
    width: calc(235/375*100vw);
  }

  .message .message__body-desc .message__body-desc-txt {
    flex: 1;
    text-align: center;
    font-family: var(--font-min);
    margin-top: 8.7vw;
  }

  .message .message__body-desc .message__body-desc-txt>p>span {
    font-size: calc(14/375*100vw);
    line-height: calc(26/14);
    display: block;
  }

  .message .message__body-desc .message__body-desc-txt>p>span:nth-of-type(1) {
    margin-bottom: 2.2vw;
  }

  .message .message__body-desc .message__body-desc-txt>p>span:nth-of-type(2) {
    margin-top: 2.9vw;
  }

  .message .message__body-desc .message__body-desc-txt>p>em {
    font-size: calc(18/375*100vw);
    line-height: calc(28/18);
    display: block;
    margin: 2vw auto;
    position: relative;
    background: linear-gradient(transparent 82.1%, var(--color-immortelle) 0%);
    display: inline;
  }

  .message .message__body-profile {
    margin-top: 8.8vw;
    border-top: 1px solid var(--color-main-border);
    padding: 6vw 0 0;
    align-items: flex-start;
    flex-flow: row;
  }

  .message .message__body-profile .message__body-profile-head {
    width: calc(75/375*100vw);
  }

  .message .message__body-profile .message__body-profile-head>h3 {
    font-size: calc(12/375*100vw);
    font-family: 'LOccitaneSans', sans-serif;
  }

  .message .message__body-profile .message__body-profile-txt {
    flex: 1;
  }

  .message .message__body-profile .message__body-profile-txt>p {
    font-size: calc(12/375*100vw);
    line-height: calc(20/12);
  }
}

/* user-voice */
.user-voice {
  margin: 8.3rem auto 9.2rem;
}

.user-voice .l-container.user-voice__inner {
  background: #FFF7D0;
  padding: 6rem 9.7rem;
  position: relative;
}

.user-voice .l-container.user-voice__inner::after {
  content: "";
  position: absolute;
  width: 38.2rem;
  height: 28.85rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_voice-deco.png);
  top: 5.5rem;
  right: -15.5rem;
}

.user-voice .user-voice__head>h2 {
  text-align: center;
}

.user-voice .user-voice__head>h2>i {
  font-family: 'LOccitaneSans', sans-serif;
  font-size: 1.8rem;
  display: block;
  margin-bottom: 1.3rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.user-voice .user-voice__head>h2>em {
  font-size: 3.2rem;
  display: inline-block;
  position: relative;
  letter-spacing: -0.05em;
}

.user-voice .user-voice__head>h2>em::before,
.user-voice .user-voice__head>h2>em::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 1.6rem;
}

.user-voice .user-voice__head>h2>em::before {
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_emphasis-before.svg);
  top: 0;
  left: -2.4rem;
}

.user-voice .user-voice__head>h2>em::after {
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_emphasis-after.svg);
  right: -2.4rem;
  bottom: 0;
}

.user-voice .user-voice__list {
  margin-top: 4.4rem;
}

.user-voice .user-voice__list-item {
  background: #fff;
  padding: 2.3rem 0 3rem 2.3rem;
  position: relative;
}

.user-voice .user-voice__list-item+.user-voice__list-item {
  margin-top: 2rem;
}

.user-voice .user-voice__list-item:nth-of-type(1) {
  width: 55.8rem;
}

.user-voice .user-voice__list-item:nth-of-type(2) {
  width: 65rem;
  margin-left: auto;
}

.user-voice .user-voice__list-item:nth-of-type(3) {
  width: 47.5rem;
  margin-left: 8.4rem;
}

.user-voice .user-voice__list-item::before,
.user-voice .user-voice__list-item::after {
  content: "";
  position: absolute;
  width: 3.2rem;
  height: 6rem;
  background: transparent;
}

.user-voice .user-voice__list-item::before {
  border-top: 1px solid var(--color-main-txt);
  border-left: 1px solid var(--color-main-txt);
  top: 0;
  left: 0;
}

.user-voice .user-voice__list-item::after {
  border-bottom: 1px solid var(--color-main-txt);
  border-right: 1px solid var(--color-main-txt);
  bottom: 0;
  right: 0;
}

.user-voice .user-voice__list-item>p {
  font-size: 1.6rem;
  line-height: 2;
}

.user-voice .user-voice__list-item>p>span {
  font-size: 2rem;
  display: inline;
  font-weight: 600;
  background: var(--color-immortelle);
  letter-spacing: -0.02em;
}

.user-voice .user-voice__list-item>span {
  position: absolute;
  bottom: 2.3rem;
  right: 3rem;
  font-size: 1.4rem;
  font-weight: 600;
}

@media screen and (max-width: 599px) {
  .user-voice {
    margin: calc(20/375*100vw) auto 0;
  }

  .user-voice .l-container.user-voice__inner {
    background: #FFF7D0;
    padding: 10vw var(--padding-inner-lr-sp);
    position: relative;
    width: var(--width-contents-xl-sp);
  }

  .user-voice .l-container.user-voice__inner::after {
    content: "";
    position: absolute;
    width: 49.2vw;
    height: 33.85vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_voice-deco.png);
    top: -22vw;
    right: -16vw;
  }

  .user-voice .user-voice__head>h2 {
    text-align: center;
  }

  .user-voice .user-voice__head>h2>i {
    font-family: 'LOccitaneSans', sans-serif;
    font-size: calc(14/375*100vw);
    display: block;
    margin-bottom: 1.5vw;
  }

  .user-voice .user-voice__head>h2>em {
    font-size: calc(26/375*100vw);
    display: inline-block;
    position: relative;
    line-height: calc(32/26);
  }

  .user-voice .user-voice__head>h2>em::before,
  .user-voice .user-voice__head>h2>em::after {
    content: "";
    position: absolute;
    width: calc(17/375*100vw);
    height: calc(14/375*100vw);
  }

  .user-voice .user-voice__head>h2>em::before {
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_emphasis-before.svg);
    top: 0;
    left: 7vw;
  }

  .user-voice .user-voice__head>h2>em::after {
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_emphasis-after.svg);
    right: 4vw;
    bottom: 4.4vw;
  }

  .user-voice .user-voice__list {
    margin-top: 8vw;
  }

  .user-voice .user-voice__list-item {
    background: #fff;
    padding: calc(25/375*100vw);
    position: relative;
  }

  .user-voice .user-voice__list-item+.user-voice__list-item {
    margin-top: calc(20/375*100vw);
  }

  .user-voice .user-voice__list-item:nth-of-type(1) {
    width: 100%;
  }

  .user-voice .user-voice__list-item:nth-of-type(2) {
    width: 100%;
    margin-left: 0;
  }

  .user-voice .user-voice__list-item:nth-of-type(3) {
    width: 100%;
    margin-left: 0;
  }

  .user-voice .user-voice__list-item::before,
  .user-voice .user-voice__list-item::after {
    content: "";
    position: absolute;
    width: calc(19/375*100vw);
    height: calc(42/375*100vw);
    background: transparent;
  }

  .user-voice .user-voice__list-item::before {
    border-top: 1px solid var(--color-main-txt);
    border-left: 1px solid var(--color-main-txt);
    top: 0;
    left: 0;
  }

  .user-voice .user-voice__list-item::after {
    border-bottom: 1px solid var(--color-main-txt);
    border-right: 1px solid var(--color-main-txt);
    bottom: 0;
    right: 0;
  }

  .user-voice .user-voice__list-item>p {
    font-size: calc(12/375*100vw);
    line-height: 2;
  }

  .user-voice .user-voice__list-item>p>span {
    font-size: calc(14/375*100vw);
    display: inline;
    font-weight: 600;
    background: var(--color-immortelle);
  }

  .user-voice .user-voice__list-item>span {
    position: absolute;
    bottom: 4vw;
    right: calc(25/375*100vw);
    font-size: calc(12/375*100vw);
    font-weight: 600;
  }
}

/* howto */
.howto {
  background: #F0F4FF;
  padding: 10rem 0;
  margin: 0 auto 0;
}

.howto .howto__head>h2 {
  text-align: center;
  letter-spacing: -0.05em;
}

.howto .howto__head>h2>i {
  font-size: 2.4rem;
  display: block;
  font-weight: 500;
  font-family: var(--font-min);
}

.howto .howto__head>h2>p {
  font-size: 4rem;
  margin-top: -0.4rem;
}

.howto .howto__head>h2>p>em {
  position: relative;
  z-index: 10;
}

.howto .howto__head>h2>p>em::after {
  position: absolute;
  content: "";
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-immortelle);
  width: 100%;
  height: 1.2rem;
  z-index: -1;
}

.howto .howto__head>h2>p>em>span {
  font-size: 6.2rem;
  font-family: var(--font-min);
  font-weight: 500;
}

.howto .howto__body {
  background: var(--color-main-txt);
  padding: 2rem 2rem;
  margin-top: 4.5rem;
}

.howto .howto__body-head>h3 {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.howto .howto__body-head>h3>i {
  font-size: 2rem;
}

.howto .howto__body-head>h3>em {
  font-family: 'LOccitaneSerif', sans-serif;
  font-size: 4.2rem;
  font-weight: 500;
  font-style: italic;
}

.howto .howto__body-desc {
  border-radius: 0 1.2rem 1.2rem 0;
  background: linear-gradient(90deg, transparent 0%, transparent 48.419865%, #fff 48.419865%, #fff 100%);
  gap: 4rem;
  margin-top: 2.1rem;
}

.howto .howto__body-desc-img {
  width: 42.9rem;
}

.howto .howto__body-desc-img>video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.howto .howto__body-desc-list {
  flex: 1;
}

.howto .howto__body-desc-list-item+.howto__body-desc-list-item {
  margin-top: 1.3rem;
}

.howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl {
  font-family: 'LOccitaneSerif', sans-serif;
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 0.5rem;
}

.howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl>em {
  font-size: 1.4rem;
}

.howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl>span {
  background: var(--color-immortelle);
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.howto .howto__body-desc-list-item>p {
  font-size: 1.6rem;
  font-family: var(--font-min);
  margin-top: 0.3rem;
}

@media screen and (max-width: 599px) {
  .howto {
    background: #F0F4FF;
    padding: 15vw var(--padding-lr-sp) calc(52/375*100vw);
    margin: 0 auto 0;
  }

  .howto .howto__inner {
    padding: 0 var(--padding-inner-lr-sp);
  }

  .howto .howto__head>h2 {
    text-align: center;
  }

  .howto .howto__head>h2>i {
    font-size: calc(16/375*100vw);
    display: block;
    font-weight: 500;
  }

  .howto .howto__head>h2>p {
    font-size: calc(26/375*100vw);
    line-height: 1.1;
    margin-top: 4vw;
  }

  .howto .howto__head>h2>p>em {
    position: relative;
    z-index: 10;
  }

  .howto .howto__head>h2>p>em::after {
    position: absolute;
    content: "";
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-immortelle);
    width: 100%;
    height: 2.2vw;
    z-index: -1;
  }

  .howto .howto__head>h2>p>em>span {
    font-size: calc(36/375*100vw);
  }

  .howto .howto__body {
    background: var(--color-main-txt);
    padding: 6vw calc(10/375*100vw) calc(10/375*100vw);
    margin-top: 9vw;
  }

  .howto .howto__body-head>h3 {
    display: block;
    font-size: calc(20/375*100vw);
    font-weight: 500;
    color: #fff;
  }

  .howto .howto__body-head>h3>i {
    font-size: calc(14/375*100vw);
    display: block;
    margin-bottom: -1vw;
  }

  .howto .howto__body-head>h3>em {
    font-family: 'LOccitaneSerif', sans-serif;
    font-size: calc(32/375*100vw);
    font-weight: 500;
    font-style: italic;
  }

  .howto .howto__body-desc {
    border-radius: 0 0 2vw 2vw;
    background: none;
    gap: 0;
    margin-top: 6vw;
    padding-bottom: 6vw;
  }

  .howto .howto__body-desc-img {
    width: 100%;
    margin-bottom: -0.1vw;
  }

  .howto .howto__body-desc-img>video {}

  .howto .howto__body-desc-list {
    flex: 1;
    padding: 0;
    background: #fff;
    border-radius: 0 0 2vw 2vw;
    padding: 6vw;
    width: 100%;
  }

  .howto .howto__body-desc-list-item {
    flex-flow: row;
    display: flex;
    gap: 4vw;
  }

  .howto .howto__body-desc-list-item+.howto__body-desc-list-item {
    margin-top: 3.3vw;
  }

  .howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl {
    font-family: 'LOccitaneSerif', sans-serif;
    display: flex;
    align-items: center;
    font-weight: 700;
    gap: 0.5vw;
    width: calc(25/375*100vw);
    flex-flow: column;
  }

  .howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl>em {
    font-size: calc(8/375*100vw);
  }

  .howto .howto__body-desc-list-item .howto__body-desc-list-item-ttl>span {
    background: var(--color-immortelle);
    border-radius: 50%;
    width: calc(25/375*100vw);
    height: calc(25/375*100vw);
    font-size: calc(14/375*100vw);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .howto .howto__body-desc-list-item>p {
    font-size: calc(12/375*100vw);
    font-family: var(--font-min);
    flex: 1;
    margin-top: 0.6vw;
  }
}

/* stress-check */
.stress-check {
  background: #FFFCEA;
  padding: 9.4rem 0 10rem;
  text-align: center;
}

.stress-check .stress-check__head>h2>i {
  display: block;
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-family: var(--font-min);
}

.stress-check .stress-check__head>h2>em {
  font-size: 4rem;
  font-weight: 600;
  display: block;
}

.stress-check .stress-check__head>h2>em>span {
  position: relative;
  font-size: 4.2rem;
  z-index: 10;
  letter-spacing: 0.05em;
}

.stress-check .stress-check__head>h2>em>span>i {
  font-size: 6.2rem;
  font-family: 'LOccitaneSerif', sans-serif;
}

.stress-check .stress-check__head>h2>em>span::after {
  position: absolute;
  content: "";
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-immortelle);
  width: 100%;
  height: 1.2rem;
  z-index: -1;
}

.stress-check .stress-check__head>p {
  font-size: 1.6rem;
  font-family: var(--font-min);
  margin-top: 0.8rem;
}

.stress-check>h2>* {
  display: block !important;
}

.stress-check>h2>b {
  font-size: 38px;
  line-height: 1.4;
}

.stress-check>h2>small {
  font-size: 18px !important;
  line-height: 1.8 !important;
  margin-top: 1em !important;
}

.stress-check .acc_btn {
  width: 460px;
  background: #192076;
  padding: 1em 3em;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.075em;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transition-duration: 0.2s;
}

.stress-check .acc_btn i {
  display: inline-block;
  background: #fff;
  border-radius: 2em;
  padding: 0 1em;
  font-size: 14px;
  color: #192076;
  margin-top: 0.4em;
}

.stress-check .acc_btn:before {
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}

.stress-check .acc_btn:after {
  display: block;
  content: "";
  width: 2px;
  height: 24px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 1.65em;
  transform: translateY(-50%);
  transition-duration: 0.2s;
}

.stress-check .acc_btn.open {
  margin-bottom: -40px;
}

.stress-check .acc_btn.open:after {
  opacity: 0;
  transform: rotate(180deg) translateY(50%);
}

.stress-check .acc_btn:hover {
  background: #2b349d;
  cursor: pointer;
}

.stress-check .acc_body {
  width: 1000px;
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/bg_stress-check.jpg) no-repeat center/cover;
  margin: 6rem auto 0;
}

.stress-check .acc_body>.wrap {
  padding: 2rem 2rem;
  position: relative;
}

.stress-check .acc_body h3 {}

.stress-check .acc_body h3>strong {
  display: inline-block;
  padding: 0 0.3em;
  font-size: 30px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  position: relative;
}

.stress-check .acc_body h3>strong:after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #a1a4c6;
  position: absolute;
  bottom: 0;
  left: 0;
}

.stress-check .acc_body h3>p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 1em;
}

.stress-check .acc_body nav {
  width: 420px;
  margin: 0 auto -30px;
  position: relative;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -2rem;
}

.stress-check .acc_body nav>ul {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border: none;
  background: #ECECEC;
  border-radius: 10rem;
  font-size: 1.4rem;
}

.stress-check .acc_body nav>ul li {
  width: 50%;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  height: 5.8rem;
  position: relative;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stress-check .acc_body nav>ul li:nth-child(1) {
  width: 47%;
  border: none;
  border-radius: 10rem 0 0 10rem;
}

.stress-check .acc_body nav>ul li:nth-child(2) {
  width: 53%;
  border: none;
  border-radius: 0 10rem 10rem 0;
}

.stress-check .acc_body nav>ul li.act {
  background: var(--color-main-txt);
  color: #fff;
}

.stress-check .acc_body nav>ul li.act:after {
  display: block;
  content: "";
  width: 19px;
  height: 0;
  padding-top: 50px;
  position: absolute;
  top: 0;
}

.stress-check .acc_body nav>ul lix:nth-child(1).act:after {
  border-width: 25px 0 25px 15px;
  border: none;
  right: -15px;
}

.stress-check .acc_body nav>ul lix:nth-child(2).act:after {
  border-width: 25px 0 25px 15px;
  border-color: transparent transparent transparent #ffffff;
  left: 0;
}

.stress-check .acc_body nav>ul li:nth-child(1).act:after {
  -webkit-mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_01.svg) center/cover no-repeat;
  mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_01.svg) center/cover no-repeat;
  background: var(--color-main-txt);
  right: -18.4px;
  height: 5.8rem;
}

.stress-check .acc_body nav>ul li:nth-child(2).act:after {
  -webkit-mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_02.svg) center/cover no-repeat;
  mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_02.svg) center/cover no-repeat;
  background: #ECECEC;
  left: -0.1rem;
  height: 5.8rem;
}

.stress-check .acc_body .box {
  width: 100%;
  background: #fff;
  padding: 55px 40px 55px;
  position: relative;
}

.stress-check .acc_body .box:after {
  display: none;
  content: "";
  width: 114px;
  height: 0;
  padding-top: 106px;
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/202005_resetserum/images/stress-check_ingre_01.png) center/contain no-repeat;
  position: absolute;
  bottom: -20px;
  right: -30px;
}

.stress-check .acc_body .box .disp {
  width: 880px;
  height: 420px;
  position: relative;
}

.stress-check .acc_body .box .disp>div {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-duration: 0.3s;
}

.stress-check .acc_body .box .ask {}

.stress-check .acc_body .box .ask>b {
  display: block;
  font-size: 20px;
  font-family: var(--font-min);
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
}

.stress-check .acc_body .box .ask>ul {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 35px 0 -10px;
}

.stress-check .acc_body .box .ask>small {
  position: absolute;
  bottom: -22rem;
  right: -20rem;
}

.stress-check .acc_body .box .ask>ul>li {
  width: 49.43%;
  background: #fef9e8;
  padding: 1.3em 1em 1.3em 2.8em;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 10px;
  position: relative;
  transition-duration: 0.2s;
}

.stress-check .acc_body .box .ask>ul>li:before,
.stress-check .acc_body .box .ask>ul>li:after {
  display: block;
  content: "";
  position: absolute;
}

.stress-check .acc_body .box .ask>ul>li:before {
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1px #cdd0e4 solid;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
}

.stress-check .acc_body .box .ask>ul>li:hover {
  cursor: pointer;
  background: #f3eacc;
}

.stress-check .acc_body .box .ask>ul>li.checked:after {
  width: 17px;
  height: 17px;
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_check.svg) center/contain no-repeat;
  top: 50%;
  left: 1em;
  transform: translateY(-70%);
}

.stress-check .acc_body .box .result {
  display: block;
  opacity: 0;
  pointer-events: none;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
}

.stress-check .acc_body .box .result:after {
  display: none;
  content: "";
  width: 258px;
  height: 0;
  padding-top: 258px;
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/202005_resetserum/images/stress-check_ingre_02.png) center/contain no-repeat;
  position: absolute;
  top: -155px;
  left: -50px;
}

.stress-check .acc_body .box .result>i {
  display: inline-block;
  background: #fefad7;
  border-radius: 2em;
  padding: 0 1.8em;
  font-size: 23px;
  line-height: 1.8;
  margin-top: 2rem;
}

.stress-check .acc_body .box .result>i span {
  display: inline-block;
  padding: 0 0.1em;
  font-size: 32px;
  vertical-align: baseline;
  letter-spacing: 0;
}

.stress-check .acc_body .box .result>b {
  display: block;
  font-size: 3.2rem;
  margin-top: 2.4rem;
  font-weight: 500;
}

.stress-check .acc_body .box .result>b em {
  display: inline-block;
  position: relative;
}

.stress-check .acc_body .box .result>b em:after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-main-txt);
  position: absolute;
  bottom: -0.1em;
  left: 0;
}

.stress-check .acc_body .box .result>p {
  display: block;
  font-size: 1.8rem;
  line-height: 2;
  margin: 2.5rem auto 2.4rem;
}

.stress-check .acc_body .box .result>a.more {
  display: inline-block;
  background-color: #192076;
  border-radius: 2em;
  padding: 0 4.5em 0 5.5em;
  font-size: 16px;
  color: #fff;
  line-height: 3.125;
  position: relative;
  overflow: visible;
}

.stress-check .acc_body .box .result>a.more::before {
  content: "";
  background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_reset-serum.png) no-repeat center/contain;
  width: 4.4rem;
  height: 7.187rem;
  position: absolute;
  bottom: -0.5rem;
  left: 1.9rem;
}

.stress-check .acc_body .box .result>small {
  display: inline-block;
  font-size: 12px;
  font-family: inherit inherit;
  color: #000;
  text-align: right;
  position: absolute;
  bottom: -12em;
  right: 0;
}

.stress-check .acc_body .box>.check_btn {
  display: block;
  width: 220px;
  background: #192076;
  font-size: 16px;
  font-weight: 600;
  line-height: 3;
  color: #fff;
  margin: 30px auto 0;
  position: relative;
  transition-duration: 0.2s;
}

.stress-check .acc_body .box>.check_btn.ini {
  background: #ccc;
}

.stress-check .acc_body .box>.check_btn.back {
  background: #ccc;
  margin-top: 5rem;
  margin-bottom: 2rem;
}

.stress-check .acc_body .box>.check_btn.ini:hover {
  cursor: default;
  opacity: 1;
}

.stress-check .acc_body .box>.check_btn:after {
  display: block;
  content: "\e821";
  position: absolute;
  top: 50%;
  right: 0.2em;
  transform: translateY(-50%);
  color: #fff;
  font: bold 2em/1 icons;
}

.stress-check .acc_body .box>.check_btn.back:after {
  content: "\e823";
  right: auto;
  left: 0.2em;
}

.stress-check .acc_body .box>.check_btn:hover {
  opacity: 0.8;
  cursor: pointer;
}

.stress-check .acc_body .box .ask.hide,
.stress-check .acc_body .box .result.hide {
  opacity: 0;
  pointer-events: none;
}

.stress-check .acc_body .box .ask.show,
.stress-check .acc_body .box .result.show {
  opacity: 1;
  pointer-events: all;
}

.stress-check .acc-trigger {
  display: none;
}

@media screen and (max-width: 599px) {
  .stress-check {
    padding: 12.5vw 0 10vw;
    position: relative;
  }

  .stress-check::before {
    background: linear-gradient(to bottom, transparent, transparent, #fff);
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 50vw;
    width: 100%;
    z-index: 10;
  }

  .stress-check.is-open::before {
    display: none;
  }

  .stress-check .stress-check__head>h2>i {
    font-size: calc(16/375*100vw);
  }


  .stress-check .stress-check__head>h2>em {
    font-size: calc(26/375*100vw);
    font-weight: 600;
  }

  .stress-check .stress-check__head>h2>em>span {
    position: relative;
    z-index: 10;
    font-size: calc(26/375*100vw);
  }

  .stress-check .stress-check__head>h2>em>span::after {
    position: absolute;
    content: "";
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-immortelle);
    width: 100%;
    height: 2.4vw;
    z-index: -1;
  }

  .stress-check .stress-check__head>h2>em>span>i {
    font-size: calc(26/375*100vw);
  }

  .stress-check .stress-check__head>p {
    font-size: calc(12/375*100vw);
    line-height: calc(20/12);
    font-family: var(--font-min);
    margin-top: 0.9vw;
  }

  .stress-check>h2>* {
    display: block !important;
  }

  .stress-check>h2>b {
    font-size: 6.25vw;
    line-height: 1.4;
  }

  .stress-check>h2>small {
    font-size: 3.28125vw !important;
    line-height: 1.8 !important;
    margin-top: 1em !important;
  }

  .stress-check .acc_btn {
    width: 90vw;
    background: #192076;
    padding: 1em 3em;
    font-size: 3.125vw;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.075em;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transition-duration: 0.2s;
  }

  .stress-check .acc_btn i {
    display: inline-block;
    background: #fff;
    border-radius: 2em;
    padding: 0 1em;
    font-size: 2.5vw;
    color: #192076;
    margin-top: 0.4em;
  }

  .stress-check .acc_btn:before {
    display: block;
    content: "";
    width: 4vw;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
  }

  .stress-check .acc_btn:after {
    display: block;
    content: "";
    width: 2px;
    height: 4vw;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 4.8vw;
    transform: translateY(-50%);
    transition-duration: 0.2s;
  }

  .stress-check .acc_btn.open {
    margin-bottom: 0;
  }

  .stress-check .acc_btn.open:after {
    opacity: 0;
    transform: rotate(180deg) translateY(50%);
  }

  .stress-check .acc_btn:hover {
    background: #2b349d;
    cursor: pointer;
  }

  .stress-check .acc_body {
    width: calc(317/375*100vw);
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/bg_stress-check.jpg) no-repeat center/cover;
    margin: 10vw auto 0;
    max-height: 90vw;
    transition: max-height 0.6s;
  }

  .stress-check .acc_body>.wrap {
    padding: 0 4vw 4vw;
  }

  .stress-check .acc_body h3 {}

  .stress-check .acc_body h3>strong {
    display: inline-block;
    padding: 0 0.3em;
    font-size: 5.625vw;
    letter-spacing: 0.05em;
    line-height: 1.6;
    position: relative;
  }

  .stress-check .acc_body h3>strong:after {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #a1a4c6;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .stress-check .acc_body h3>p {
    font-size: 2.8125vw;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 1em;
  }

  .stress-check .acc_body nav {
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 2;
    top: -3vw;
  }

  .stress-check .acc_body nav>ul {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .stress-check .acc_body nav>ul li {
    width: 50%;
    height: calc(35/375*100vw);
    font-size: calc(10/375*100vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 4;
    color: #192076;
    position: relative;
  }

  .stress-check .acc_body nav>ul li:nth-child(1) {
    width: 46%;
    border: none;
    border-radius: 10rem 0 0 10rem;
  }

  .stress-check .acc_body nav>ul li:nth-child(2) {
    width: 54%;
    border: none;
    border-radius: 0 10rem 10rem 0;
  }

  .stress-check .acc_body nav>ul li.act {
    background: var(--color-main-txt);
    color: #fff;
  }

  .stress-check .acc_body nav>ul li.act:after {
    display: block;
    content: "";
    width: 3vw;
    height: 0;
    padding-top: calc(35/375*100vw);
    position: absolute;
    top: 0;
  }

  .stress-check .acc_body nav>ul lix:nth-child(1).act:after {
    border-width: 25px 0 25px 15px;
    border: none;
    right: -15px;
  }

  .stress-check .acc_body nav>ul lix:nth-child(2).act:after {
    border-width: 25px 0 25px 15px;
    border-color: transparent transparent transparent #ffffff;
    left: 0;
  }

  .stress-check .acc_body nav>ul li:nth-child(1).act:after {
    -webkit-mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_01.svg) center/cover no-repeat;
    mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_01.svg) center/cover no-repeat;
    background: var(--color-main-txt);
    right: -2.9vw;
    height: calc(35/375*100vw);
  }

  .stress-check .acc_body nav>ul li:nth-child(2).act:after {
    -webkit-mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_02.svg) center/cover no-repeat;
    mask: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_arrow_02.svg) center/cover no-repeat;
    background: #ECECEC;
    left: -0.1rem;
    height: calc(35/375*100vw);
  }

  .stress-check .acc_body .box {
    width: 100%;
    background: #fff;
    padding: 9vw calc(10/375*100vw) 7vw;
    position: relative;
    margin-top: -5vw;
  }

  .stress-check .acc_body .box:after {
    display: none;
    content: "";
    width: 114px;
    height: 0;
    padding-top: 28%;
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/202005_resetserum/images/stress-check_ingre_01.png) center/contain no-repeat;
    position: absolute;
    bottom: -30vw;
    right: -17vw;
    z-index: 2;
  }

  .stress-check .acc_body .box .disp {
    width: 100%;
    height: 171vw;
    position: relative;
  }

  .stress-check .acc_body .box .disp.res {
    height: 106vw;
  }

  .stress-check .acc_body .box .disp>div {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition-duration: 0.3s;
  }

  .stress-check .acc_body .box .ask {}

  .stress-check .acc_body .box .ask>b {
    display: block;
    font-size: calc(14/375*100vw);
    letter-spacing: 0.075em;
    line-height: calc(24/14);
  }

  .stress-check .acc_body .box .ask>ul {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 6vw 0 -4vw;
  }

  .stress-check .acc_body .box .ask>small {
    font-size: calc(10/375*100vw);
    right: auto;
    left: -8vw;
    bottom: -34vw;
    visibility: hidden;
  }

  .stress-check .acc_body .box .ask>ul>li {
    width: 100%;
    background: #fef9e8;
    padding: 1.3em 1em 1.3em 2.8em;
    font-size: calc(10/375*100vw);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: calc(16/10);
    text-align: left;
    margin-bottom: 3vw;
    position: relative;
    transition-duration: 0.2s;
  }

  .stress-check .acc_body .box .ask>ul>li:before,
  .stress-check .acc_body .box .ask>ul>li:after {
    display: block;
    content: "";
    position: absolute;
  }

  .stress-check .acc_body .box .ask>ul>li:before {
    width: 3.5vw;
    height: 3.5vw;
    background: #fff;
    border: 1px #cdd0e4 solid;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
  }

  .stress-check .acc_body .box .ask>ul>li:hover {
    cursor: pointer;
    background: #f3eacc;
  }

  .stress-check .acc_body .box .ask>ul>li.checked:after {
    width: 3.8vw;
    height: 3.8vw;
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/special/202005_resetserum/images/stress-check_check.svg) center/contain no-repeat;
    top: 50%;
    left: 1em;
    transform: translateY(-70%);
  }

  .stress-check .acc_body .box .result {
    display: block;
    opacity: 0;
    pointer-events: none;
    letter-spacing: 0.075em;
  }

  .stress-check .acc_body .box .result:after {
    display: none;
    content: "";
    width: 30vw;
    height: 0;
    padding-top: 18%;
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/202005_resetserum/images/sp/stress-check_ingre_02.png) center/contain no-repeat;
    position: absolute;
    top: -4vw;
    left: 54vw;
  }

  .stress-check .acc_body .box .result>i {
    display: inline-block;
    background: #FFFCEA;
    border-radius: 2em;
    padding: 0 1.8em;
    font-size: 3.75vw;
    line-height: 2.8;
    margin-top: 0;
  }

  .stress-check .acc_body .box .result>i span {
    display: inline-block;
    padding: 0 0.1em;
    font-size: 4.925vw;
    vertical-align: baseline;
  }

  .stress-check .acc_body .box .result>b {
    display: block;
    font-size: calc(21/375*100vw);
    margin-top: 4vw;
  }

  .stress-check .acc_body .box .result>p {
    display: block;
    font-size: calc(12/375*100vw);
    line-height: calc(22/12);
    color: var(--color-main-txt);
    margin: 5.5vw 0 6vw;
  }

  .stress-check .acc_body .box .result>a.more {
    display: inline-block;
    background-color: var(--color-main-txt);
    border-radius: 100rem;
    padding: 0 0 0 4vw;
    font-size: calc(12/375*100vw);
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1.5;
    height: calc(40/375*100vw);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: calc(252/375*100vw);
    margin: 0 auto;
  }

  .stress-check .acc_body .box .result>a.more::before {
    content: "";
    background: url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/icon_reset-serum.png) no-repeat center/contain;
    width: 9.4vw;
    height: 15.7vw;
    position: absolute;
    bottom: 1.1vw;
    left: 1.7vw;
  }

  .stress-check .acc_body .box .result>small {
    display: inline-block;
    font-size: calc(10/375*100vw);
    font-family: inherit inherit;
    color: #000;
    text-align: right;
    position: absolute;
    bottom: -36.7vw;
    right: 1em;
  }

  .stress-check .acc_body .box>.check_btn {
    display: block;
    width: 50vw;
    background: #192076;
    font-size: 3.75vw;
    font-weight: 600;
    line-height: 3;
    color: #fff;
    margin: 6vw auto 0;
    position: relative;
    transition-duration: 0.2s;
  }

  .stress-check .acc_body .box>.check_btn.ini {
    background: #ccc;
  }

  .stress-check .acc_body .box>.check_btn.back {
    background: #ccc;
    margin-top: calc(40/375*100vw);
    margin-bottom: 12vw;
  }

  .stress-check .acc_body .box>.check_btn.ini:hover {
    cursor: default;
    opacity: 1;
  }

  .stress-check .acc_body .box>.check_btn:after {
    display: block;
    content: "\e821";
    position: absolute;
    top: 50%;
    right: 0.2em;
    transform: translateY(-50%);
    color: #fff;
    font: bold 2em/1 icons;
  }

  .stress-check .acc_body .box>.check_btn.back:after {
    content: "\e823";
    right: auto;
    left: 0.2em;
  }

  .stress-check .acc_body .box>.check_btn:hover {
    opacity: 0.8;
    cursor: pointer;
  }

  .stress-check .acc_body .box .ask.hide,
  .stress-check .acc_body .box .result.hide {
    opacity: 0;
    pointer-events: none;
  }

  .stress-check .acc_body .box .ask.show,
  .stress-check .acc_body .box .result.show {
    opacity: 1;
    pointer-events: all;
  }

  .stress-check .acc-trigger {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    border-radius: 100rem;
    background: var(--color-main-txt);
    font-size: calc(10/375*100vw);
    min-width: calc(92/375*100vw);
    display: inline-block;
    top: 80vw;
    padding: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 50;
  }

  .stress-check .acc-trigger .c-rs-button-arrow {
    background: #fff;
    width: 1.55vw;
    height: 2.1vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.6vw;
  }
}

/* research */
.research {
  padding-bottom: 12rem;
}

.research .research__head {
  position: relative;
}

.research .research__head .research__head-txt {
  position: absolute;
  color: #fff;
  top: 49%;
  transform: translateY(-50%);
  right: 19rem;
  text-align: center;
}

.research .research__head .research__head-txt>h2 {
  font-size: 5.2rem;
}

.research .research__head .research__head-txt>h2>i {
  font-size: 2.3rem;
  display: block;
  font-family: var(--font-min);
  font-weight: 500;
  margin-bottom: 1rem;
}

.research .research__body-list {
  margin: 8rem auto 0;
}

.research .research__body-list .research__body-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  border: 3px solid var(--color-loc);
}

.research .research__body-list .research__body-list-item+.research__body-list-item {
  margin-top: 5.8rem;
}

.research .research__body-list .research__body-list-item:nth-of-type(1) {
  flex-flow: row-reverse;
  margin: 0 2rem 0 18rem;
  padding: 4rem 0 5.5rem 6.5rem;
  align-items: flex-end;
}

.research .research__body-list .research__body-list-item:nth-of-type(1) .research__body-list-item-img {
  width: 49.3rem;
  margin-right: -2rem;
}

.research .research__body-list .research__body-list-item:nth-of-type(2) {
  margin-right: 18.7rem;
  padding: 4rem 4rem 5.5rem;
}

.research .research__body-list .research__body-list-item:nth-of-type(2) .research__body-list-item-img {
  width: 42.7rem;
}

.research .research__body-list .research__body-list-item .research__body-list-item-txt {
  flex: 1;
}

.research .research__body-list .research__body-list-item .research__body-list-item-txt>h3>i {
  font-family: 'LOccitaneSans', sans-serif;
  font-size: 1.4rem;
  display: block;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.research .research__body-list .research__body-list-item .research__body-list-item-txt>h3>em {
  font-size: 2.4rem;
  letter-spacing: -0.05em;
  margin: 0.7rem auto 1rem;
  display: block;
}

.research .research__body-list .research__body-list-item .research__body-list-item-txt>p {
  font-size: 1.4rem;
  line-height: 2;
}

.research .research__body-bnr {
  margin: 7rem 4rem 0;
}

@media screen and (max-width: 599px) {
  .research {
    padding-bottom: calc(60/375*100vw);
  }

  .research .research__head {
    position: relative;
  }

  .research .research__head .research__head-txt {
    position: absolute;
    color: #fff;
    top: 8.1vw;
    transform: translatex(-50%);
    right: auto;
    left: 50%;
    text-align: center;
    width: 100%;
  }

  .research .research__head .research__head-txt>h2 {
    font-size: calc(28/375*100vw);
  }

  .research .research__head .research__head-txt>h2>i {
    font-size: calc(16/375*100vw);
    display: block;
    font-family: var(--font-min);
    font-weight: 500;
    margin-bottom: -0.4vw;
  }

  .research .research__body-list {
    margin: calc(60/375*100vw) auto 0;
    padding: 0 var(--padding-lr-sp);
  }

  .research .research__body-list .research__body-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3vw;
    border: 3px solid var(--color-immortelle);
    flex-flow: column;
  }

  .research .research__body-list .research__body-list-item+.research__body-list-item {
    margin-top: calc(37/375*100vw);
  }

  .research .research__body-list .research__body-list-item:nth-of-type(1) {
    flex-flow: column;
    margin: 0 auto;
    padding: 0 var(--padding-inner-lr-sp) 6vw;
  }

  .research .research__body-list .research__body-list-item:nth-of-type(1) .research__body-list-item-img {
    width: 100%;
    margin-right: 0;
  }

  .research .research__body-list .research__body-list-item:nth-of-type(2) {
    margin-right: 0;
    padding: 0 var(--padding-inner-lr-sp) 6vw;
  }

  .research .research__body-list .research__body-list-item:nth-of-type(2) .research__body-list-item-img {
    width: 100%;
  }

  .research .research__body-list .research__body-list-item .research__body-list-item-img {
    margin-top: -6vw;
  }

  .research .research__body-list .research__body-list-item .research__body-list-item-txt {
    flex: 1;
    margin-top: 3.2vw;
  }

  .research .research__body-list .research__body-list-item .research__body-list-item-txt>h3>i {
    font-family: 'LOccitaneSans', sans-serif;
    font-size: calc(12/375*100vw);
    display: block;
    font-weight: 300;
  }

  .research .research__body-list .research__body-list-item .research__body-list-item-txt>h3>em {
    font-size: calc(16/375*100vw);
    letter-spacing: -0.05em;
    margin: 2vw 0;
  }

  .research .research__body-list .research__body-list-item .research__body-list-item-txt>p {
    font-size: calc(14/375*100vw);
    line-height: calc(26/14);
  }

  .research .research__body-bnr {
    margin: calc(50/375*100vw) var(--padding-lr-sp) 0;
  }
}

/* trial-set */
.trial-set {
  background: #fff7d0;
  padding: 5rem 0 6rem;
  margin: 9rem auto 0;
  position: relative;
}

/* .trial-set::before {
  content: "";
  position: absolute;
  width: 18.5rem;
  height: 32.952rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_03.png);
  top: 0;
  right: 0;
  z-index: 50;
}

.trial-set::after {
  content: "";
  position: absolute;
  width: 18.4rem;
  height: 57.519rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_04.png);
  left: 0;
  bottom: 2rem;
  z-index: 50;
} */

.trial-set .trial-set__bubbles-before {
  position: absolute;
  width: 18rem;
  height: 34.2rem;
  top: -3rem;
  right: 0;
}

.trial-set .trial-set__bubbles-before>span {
  content: "";
  position: absolute;
  width: 100%;
  right: 0;
  z-index: 50;
}

.trial-set .trial-set__bubbles-before>span.js-fadeInAddClass {
  transform: translateY(4rem);
}

.trial-set .trial-set__bubbles-before>span.js-fadeInAddClass.is-fadeIn {
  transform: translateY(0);
}

.trial-set .trial-set__bubbles-before .trial-set__bubbles-before-01 {
  height: 17.1rem;
  width: 100%;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_03-01.png);
  bottom: 0;
  right: 0;
}

.trial-set .trial-set__bubbles-before .trial-set__bubbles-before-02 {
  height: 17.1rem;
  width: 100%;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_03-02.png);
  bottom: 17.1rem;
  right: 0;
}

.trial-set .trial-set__bubbles-after {
  position: absolute;
  width: 20rem;
  bottom: 0;
}

.trial-set .trial-set__bubbles-after>span {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 50;
}

.trial-set .trial-set__bubbles-after>span.js-fadeInAddClass {
  transform: translateY(4rem);
}

.trial-set .trial-set__bubbles-after>span.js-fadeInAddClass.is-fadeIn {
  transform: translateY(0);
}

.trial-set .trial-set__bubbles-after .trial-set__bubbles-after-01 {
  height: 45.3rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_04-01.png);
  bottom: 0;
}

.trial-set .trial-set__bubbles-after .trial-set__bubbles-after-02 {
  height: 9.8rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_04-02.png);
  bottom: 45.3rem;
}

.trial-set .trial-set__bubbles-after .trial-set__bubbles-after-03 {
  height: 6.6rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_04-03.png);
  bottom: 55.1rem;
}

.trial-set .trial-set__bubbles-after .trial-set__bubbles-after-04 {
  height: 6.6rem;
  background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/img_bubbles_04-04.png);
  bottom: 61.7rem;
}

.trial-set .trial-set__inner {
  background: #fff;
  padding: 6rem 0 6rem;
}

.trial-set .trial-set__head {
  text-align: center;
  z-index: 51;
  position: relative;
}

.trial-set .trial-set__head>h2>i {
  font-size: 1.6rem;
  font-family: 'LOccitaneSans', sans-serif;
  display: block;
  font-weight: 400;
  margin-bottom: 1.7rem;
  letter-spacing: 0.02em;
}

.trial-set .trial-set__head>h2>em {
  font-size: 2.8rem;
}

.trial-set .trial-set__body {
  z-index: 51;
  position: relative;
}

.trial-set .trial-set__body-list .trial-set__body-list-item picture {
  margin-bottom: 0;
}

.trial-set .trial-set__body-list .trial-set__body-list-item strong {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: calc(30/18);
}

.trial-set .trial-set__body-list .trial-set__body-list-item em {
  font-size: 1.4rem;
  line-height: calc(25/14);
}

.trial-set .trial-set__body-list .trial-set__body-list-item .c-buy {
  background: var(--color-immortelle);
  margin-top: 2.2rem;
}

@media screen and (max-width: 599px) {
  .trial-set {
    margin: calc(40/375*100vw) auto 0;
    padding: calc(40/375*100vw) var(--padding-lr-sp);
  }

  /* .trial-set::before {
    content: "";
    position: absolute;
    width: 34.5vw;
    height: 91.952vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_03.png);
    top: -45vw;
    right: 0;
    z-index: 50;
  }

  .trial-set::after {
    content: "";
    position: absolute;
    width: 29.4vw;
    height: 93.519vw;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_04.png);
    left: 0;
    bottom: 0;
    z-index: 50;
  } */


  .trial-set .trial-set__bubbles-before {
    position: absolute;
    width: calc(100/375*100vw);
    height: calc(200/375*100vw);
    top: -18vw;
    right: 0;
  }

  .trial-set .trial-set__bubbles-before>span {
    content: "";
    position: absolute;
    width: 100%;
    right: 0;
    z-index: 50;
  }

  .trial-set .trial-set__bubbles-before>span.js-fadeInAddClass {
    transform: translateY(4rem);
  }

  .trial-set .trial-set__bubbles-before>span.js-fadeInAddClass.is-fadeIn {
    transform: translateY(0);
  }

  .trial-set .trial-set__bubbles-before .trial-set__bubbles-before-01 {
    height: calc(100/375*100vw);
    width: 100%;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_03-01.png);
    bottom: 0;
    right: 0;
  }

  .trial-set .trial-set__bubbles-before .trial-set__bubbles-before-02 {
    height: calc(100/375*100vw);
    width: 100%;
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_03-02.png);
    bottom: calc(100/375*100vw);
    right: 0;
  }

  .trial-set .trial-set__bubbles-after {
    position: absolute;
    width: calc(100/375*100vw);
    height: calc(366/375*100vw);
    bottom: 0;
    left: 0;
  }

  .trial-set .trial-set__bubbles-after>span {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 50;
  }

  .trial-set .trial-set__bubbles-after>span.js-fadeInAddClass {
    transform: translateY(4rem);
  }

  .trial-set .trial-set__bubbles-after>span.js-fadeInAddClass.is-fadeIn {
    transform: translateY(0);
  }

  .trial-set .trial-set__bubbles-after .trial-set__bubbles-after-01 {
    height: calc(126/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_04-01.png);
    bottom: 0;
  }

  .trial-set .trial-set__bubbles-after .trial-set__bubbles-after-02 {
    height: calc(100/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_04-02.png);
    bottom: calc(126/375*100vw);
  }

  .trial-set .trial-set__bubbles-after .trial-set__bubbles-after-03 {
    height: calc(70/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_04-03.png);
    bottom: calc(226/375*100vw);
  }

  .trial-set .trial-set__bubbles-after .trial-set__bubbles-after-04 {
    height: calc(70/375*100vw);
    background: no-repeat center/contain url(/on/demandware.static/-/Sites-OCC_JP-Library/ja_JP/data/campaign/reset-serum/images/sp/img_bubbles_04-04.png);
    bottom: calc(296/375*100vw);
  }


  .trial-set .trial-set__inner {
    background: #fff;
    padding: 10vw 0 calc(45/375*100vw);
  }

  .trial-set .trial-set__head {
    text-align: center;
  }

  .trial-set .trial-set__head>h2>i {
    font-size: calc(14/375*100vw);
    font-family: 'LOccitaneSans', sans-serif;
    display: block;
    font-weight: 400;
    margin-bottom: 1vw;
  }

  .trial-set .trial-set__head>h2>em {
    font-size: calc(24/375*100vw);
    line-height: calc(32/24);
  }

  .trial-set .trial-set__body-list .trial-set__body-list-item strong {
    font-weight: 500;
    font-size: calc(15/375*100vw);
    line-height: calc(24/15);
  }

  .trial-set .trial-set__body-list .trial-set__body-list-item em {
    font-size: calc(12/375*100vw);
    line-height: calc(20/12);
    margin-top: 1.3vw;
  }

  .trial-set .trial-set__body-list .trial-set__body-list-item+.trial-set__body-list-item {
    margin-top: 5vw;
  }

  .trial-set .trial-set__body-list .trial-set__body-list-item .c-buy {
    background: var(--color-immortelle);
    margin-top: 4vw;
  }
}

/* faq */
.faq {
  background: #F0F4FF;
  padding: 9.3rem 0 9rem;
}

.faq .faq__head {
  text-align: center;
}

.faq .faq__head>h2 {
  font-size: 2.8rem;
}

.faq .faq__body .faq__body-list-item {
  border-top: 1px solid var(--color-main-border);
}

.faq .faq__body .faq__body-list-item:last-of-type {
  border-bottom: 1px solid var(--color-main-border);
}

.faq .faq__body .faq__body-list {
  margin: 2.8rem auto 0;
}

.faq .faq__body .faq__body-list-item>dt {
  font-size: 1.6rem;
  position: relative;
  margin-left: 5.8rem;
  padding: 2rem;
  cursor: pointer;
}

.faq .faq__body .faq__body-list-item>dt::before {
  content: "Q.";
  font-size: 2.8rem;
  font-family: 'LOccitaneSerif', sans-serif;
  position: absolute;
  top: 50%;
  left: -5rem;
  transform: translateY(-50%);
}

.faq .faq__body .faq__body-list-item>dt .faq__trigger_icon {
  width: 2rem;
  height: 2rem;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translate(-50%, -50%);
}

.faq .faq__body .faq__body-list-item>dt .faq__trigger_icon::before {
  content: "";
  position: absolute;
  background: var(--color-main-txt);
  height: 1px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq .faq__body .faq__body-list-item>dt .faq__trigger_icon::after {
  content: "";
  position: absolute;
  background: var(--color-main-txt);
  height: 100%;
  width: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .3s;
}

.faq .faq__body .faq__body-list-item>dt.is-open .faq__trigger_icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq .faq__body .faq__body-list-item>dt.is-open+dd {}

.faq .faq__body .faq__body-list-item>dd {
  margin-left: 5.8rem;
  font-size: 1.4rem;
  line-height: calc(26/14);
  overflow: hidden;
  padding-right: 8rem;
  padding-left: 2rem;
  padding-bottom: 2rem;
  display: none;
}

.faq .faq__body .faq__body-list-item>dd>a {
  font-size: 1.4rem;
  text-decoration: underline;
  font-weight: 600;
  color: var(--color-main-txt);
}

@media screen and (max-width: 599px) {
  .faq {
    background: #F0F4FF;
    padding: 14vw var(--padding-lr-sp) calc(50/375*100vw);
  }

  .faq .faq__head {
    text-align: center;
  }

  .faq .faq__head>h2>i {
    font-size: calc(18/375*100vw);
    display: block;
    margin-bottom: 0.6vw;
  }

  .faq .faq__head>h2 {
    font-size: calc(25/375*100vw);
  }

  .faq .faq__body .faq__body-list-item {
    border-top: 1px solid var(--color-main-border);
  }

  .faq .faq__body .faq__body-list-item:last-of-type {
    border-bottom: 1px solid var(--color-main-border);
  }

  .faq .faq__body .faq__body-list-item>dt {
    font-size: calc(14/375*100vw);
    position: relative;
    margin: 0;
    padding: 0 9.8vw 0 9.8vw;
    cursor: pointer;
    height: calc(70/375*100vw);
    line-height: calc(20/14);
    display: flex;
    align-items: center;
  }

  .faq .faq__body .faq__body-list-item>dt::before {
    content: "Q.";
    font-size: calc(24/375*100vw);
    font-family: 'LOccitaneSerif', sans-serif;
    position: absolute;
    top: 50%;
    left: -0.3vw;
    transform: translateY(-50%);
  }

  .faq .faq__body .faq__body-list-item>dt .faq__trigger_icon {
    width: calc(18/375*100vw);
    height: calc(18/375*100vw);
    position: absolute;
    right: 2vw;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .faq .faq__body .faq__body-list-item>dt .faq__trigger_icon::before {
    content: "";
    position: absolute;
    background: var(--color-main-txt);
    height: 1px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .faq .faq__body .faq__body-list-item>dt .faq__trigger_icon::after {
    content: "";
    position: absolute;
    background: var(--color-main-txt);
    height: 100%;
    width: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
  }

  .faq .faq__body .faq__body-list-item>dt.is-open .faq__trigger_icon::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .faq .faq__body .faq__body-list-item>dt.is-open+dd {}

  .faq .faq__body .faq__body-list-item>dd {
    margin: 0;
    font-size: calc(12/375*100vw);
    line-height: calc(20/12);
    overflow: hidden;
    padding: 0 5vw 0 9.8vw;
    padding-bottom: 7vw;
  }

  .faq .faq__body .faq__body-list-item>dd>a {
    font-size: calc(12/375*100vw);
    line-height: calc(20/12);
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-main-txt);
  }
}

/* popup-event */
.popup-event {
  background: var(--color-immortelle);
  padding: 6rem 0;
}

.popup-event .popup-event__inner {
  background: #fff;
  padding: 4.5rem 5.5rem 6rem;
}

.popup-event .popup-event__head {
  text-align: center;
}

.popup-event .popup-event__head>h2>em {
  font-size: 3.6rem;
  letter-spacing: 0.08em;
  font-family: 'LOccitaneSans', sans-serif;
  display: block;
  margin-bottom: 1rem;
}

.popup-event .popup-event__head>h2>p {
  font-size: 1.6rem;
  font-family: var(--font-min);
  font-weight: 500;
}

.popup-event .popup-event__body-list {
  margin: 5.8rem auto 0;
}

.popup-event .popup-event__body-list-item {
  position: relative;
}

.popup-event .popup-event__body-list-item-end {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 600;
}

.popup-event .popup-event__body-list-item+.popup-event__body-list-item {
  margin-top: 3.2rem;
}

.popup-event .popup-event__body-list-item>dt {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.popup-event .popup-event__body-list-item:nth-of-type(2)>dt {
  font-size: 2rem;
}

.popup-event .popup-event__body-list-item>dd {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0;
  margin: 0;
  border-top: 1px solid var(--color-main-border);
  align-items: center;
}

.popup-event .popup-event__body-list-item>dd:last-of-type {
  border-bottom: 1px solid var(--color-main-border);
}

.popup-event .popup-event__body-list-item.cs>dd {
  background: #FEF9E8;
  font-family: 'LOccitaneSans', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 8rem;
  border: none;
}

.popup-event .popup-event__body-list-item>dd .popup-event__body-list-txt {
  font-size: 1.4rem;
}

.popup-event .popup-event__body-list-item>dd .popup-event__body-list-links {
  display: flex;
  gap: 0.8rem;
}

.popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a {
  font-size: 1.4rem;
  border-radius: 100rem;
  padding: 1.05rem 0;
  display: inline-block;
  width: 13rem;
  text-align: center;
  height: 100%;
}

.popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a:nth-of-type(1) {
  background: var(--color-main-txt);
  color: #fff;
}

.popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a:nth-of-type(2) {
  background: #ECEBEB;
  color: var(--color-main-txt);
}


@media screen and (max-width: 599px) {
  .popup-event {
    background: var(--color-immortelle);
    padding: calc(40/375*100vw) var(--padding-lr-sp);
  }

  .popup-event .popup-event__inner {
    background: #fff;
    padding: 8.6vw var(--padding-inner-lr-sp) calc(40/375*100vw);
  }

  .popup-event .popup-event__head {
    text-align: center;
  }

  .popup-event .popup-event__head>h2>em {
    font-size: calc(28/375*100vw);
    letter-spacing: 0.08em;
    font-family: 'LOccitaneSans', sans-serif;
    display: block;
    margin-bottom: 0.8vw;
  }

  .popup-event .popup-event__head>h2>p {
    font-size: calc(12/375*100vw);
    font-family: var(--font-min);
    font-weight: 500;
    line-height: 2;
  }

  .popup-event .popup-event__body-list {
    margin: 5.8vw auto 0;
  }

  .popup-event .popup-event__body-list-item-end {
    font-size: 3.5vw;
  }

  .popup-event .popup-event__body-list-item+.popup-event__body-list-item {
    margin-top: 7.2vw;
  }

  .popup-event .popup-event__body-list-item>dt {
    font-size: calc(14/375*100vw);
    font-weight: 600;
    margin-bottom: 3.8vw;
  }

  .popup-event .popup-event__body-list-item:nth-of-type(2)>dt {
    font-size: calc(14/375*100vw);
  }

  .popup-event .popup-event__body-list-item>dd {
    display: flex;
    justify-content: center;
    padding: 4.2vw 0 calc(20/375*100vw);
    margin: 0;
    border-top: 1px solid var(--color-main-border);
    align-items: flex-start;
    flex-flow: column;
    gap: 2.7vw;
  }

  .popup-event .popup-event__body-list-item>dd:last-of-type {
    border-bottom: 1px solid var(--color-main-border);
  }

  .popup-event .popup-event__body-list-item.cs>dd {
    background: #FEF9E8;
    font-family: 'LOccitaneSans', sans-serif;
    font-size: calc(14/375*100vw);
    font-weight: 300;
    letter-spacing: 0.02em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(48/375*100vw);
    border: none;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-txt {
    font-size: calc(14/375*100vw);
    text-align: left;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-txt>p {
    width: 100%;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-links {
    display: flex;
    gap: 0;
    justify-content: space-between;
    width: 100%;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a {
    font-size: calc(12/375*100vw);
    border-radius: 100rem;
    padding: 2.35vw 0;
    display: inline-block;
    width: calc(132/375*100vw);
    text-align: center;
    height: 100%;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a:nth-of-type(1) {
    background: var(--color-main-txt);
    color: #fff;
  }

  .popup-event .popup-event__body-list-item>dd .popup-event__body-list-links>a:nth-of-type(2) {
    background: #ECEBEB;
    color: var(--color-main-txt);
  }

}


/* animation */
.js-txtSplit .line {
  text-align: center !important;
}

.js-fadeIn .line {
  text-align: center !important;
}

.js-txtFadeIn .char {
  opacity: 0;
}

.js-txtSplit .word+.word {
  margin-left: -0.3em;
}


.js-fadeInAddClass,
.js-fadeInAddClass--sp {
  opacity: 0;
  transform: translateY(2rem);
  overflow: hidden;
  display: block;
}

.is-fadeIn,
.is-fadeIn--sp {
  transform: translateY(0);
  opacity: 1;
  transition: 1s;
}

@media screen and (max-width: 599px) {
  .js-fadeInAddClass {
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
  }

  .is-fadeIn {
    transform: translateY(0);
    opacity: 1;
    transition: 1s;
  }
}


@keyframes slideTxtX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideTxtX-100 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.js-slideInAddClass {
  opacity: 0;
}


.is-slideIn {
  overflow: hidden;
  display: inline-block;
  opacity: 0;
  animation: slideTxtX100 .8s 1.9s forwards;
}

.is-slideIn .slide-in_inner {
  display: inline-block;
  animation: slideTxtX-100 .8s 1.9s forwards;
  opacity: 0;
}

@media screen and (max-width: 599px) {
  .is-slideIn {
    overflow: hidden;
    display: inline-block;
    opacity: 0;
    animation: slideTxtX100 .8s .8s forwards;
  }

  .is-slideIn .slide-in_inner {
    display: inline-block;
    animation: slideTxtX-100 .8s .8s forwards;
    opacity: 0;
  }
}