.mv {
  background-image: url(/toumei-shirohada/assets_new/img/shared/bg-check.png);
  background-repeat: repeat;
  background-size: 115px;
}

.product {
  background-color: var(--color-white);
  position: relative;
}
.product::before {
  content: "";
  width: 100%;
  height: 45px;
  background-image: url(/toumei-shirohada/assets_new/img/shared/product-curve.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: absolute;
  top: -45px;
  left: 0;
}

.product__inner {
  padding-inline: 10px;
  display: grid;
  row-gap: 10px;
}

.product__head {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  background-image: url(/toumei-shirohada/assets_new/img/special/product-heading-kazari-top.svg), url(/toumei-shirohada/assets_new/img/special/product-heading-kazari-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-size: calc(100% - 24px) auto, calc(100% - 41px) auto;
  background-position: top 14px center, bottom 5px left 14px;
}

.product__bubble {
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--color-yellow);
  padding-block: 6px;
  padding-inline: 12px;
  border-radius: 8px;
  font-family: var(--font-zen-maru);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.3;
  position: relative;
}
.product__bubble::after {
  content: "";
  width: 20px;
  height: auto;
  aspect-ratio: 20/13;
  background-color: var(--color-yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.product__heading {
  display: grid;
  justify-items: center;
}

sub {
  font-size: 0.5em;
}

.product__heading__upper {
  font-family: var(--font-zen-maru);
  font-size: 4.875rem;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1.2;
}
.product__heading__upper sub {
  font-size: 1.25rem;
}

.product__heading__bottom {
  font-family: var(--font-zen-maru);
  font-size: 1.75rem;
  font-weight: 900;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.3;
}

.product__note {
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-blue);
}

.product__name {
  font-family: var(--font-zen-maru);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.5;
}

.product__price {
  font-size: 0.9375rem;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.8;
}

.product__price__small {
  font-size: 0.75rem;
}

.feature {
  padding-block-start: 30px;
  padding-block-end: 20px;
  background-color: var(--color-mainLight);
  background-image: url(/toumei-shirohada/assets_new/img/special/feature-curve.png);
  background-repeat: no-repeat;
  background-size: 100% 175px;
  background-position: top center;
  position: relative;
  z-index: 2;
}

.feature__inner {
  display: grid;
  row-gap: 10px;
}

.feature__box {
  border: 2px solid var(--color-yellow);
  padding-block: 0;
  row-gap: 0;
}

.feature__box__block {
  padding-block: 20px;
  display: grid;
  justify-items: center;
  row-gap: 10px;
}
.feature__box__block:not(:last-child) {
  background-image: radial-gradient(circle, var(--color-blue) 1px, transparent 2px);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: bottom;
}

.feature__box__text {
  font-size: 0.9375rem;
  color: var(--color-blue);
}

.feature__box__list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.feature__note {
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-white);
}

.howto {
  background-image: url(/toumei-shirohada/assets_new/img/shared/howto-wave.png), url(/toumei-shirohada/assets_new/img/shared/bg-check.png);
  background-repeat: no-repeat, repeat;
  background-size: 100% 16px, 115px;
  background-position: top center, top left;
  padding-block-start: 40px;
  padding-block-end: 85px;
}

.howto__inner {
  display: grid;
  row-gap: 20px;
}

.howto__box {
  display: grid;
  row-gap: 20px;
}

.howto__box__heading {
  font-family: var(--font-zen-maru);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.4;
}

.howto__box__subheading {
  font-family: var(--font-zen-maru);
  font-size: 1.625rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.4;
}

.howto__box__text {
  font-size: 0.9375rem;
  color: var(--color-blue);
  line-height: 1.8;
}
.howto__box__text.howto__face::after {
  top: -70px;
  right: -36px;
}

.howto__box__image.howto__face::after {
  top: -50px;
  right: -36px;
}

.howto__face {
  position: relative;
}
.howto__face::after {
  content: "";
  position: absolute;
  top: -53px;
  right: -50px;
  width: 80px;
  height: auto;
  aspect-ratio: 80/65;
  background-image: url(/toumei-shirohada/assets_new/img/shared/face-peace.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.howto__box__partition {
  border: none;
  height: 6px;
  background-image: radial-gradient(circle, var(--color-blue) 2px, transparent 2px);
  background-size: 6px 6px;
  background-repeat: repeat-x;
}

.howto__button {
  width: 100%;
  max-width: 260px;
  justify-self: center;
}

.other {
  background-color: var(--color-yellowLight);
  padding-block: 40px;
}

.other__inner {
  display: grid;
  row-gap: 8px;
}

.other__heading {
  font-family: var(--font-zen-maru);
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-blue);
  line-height: 1.4;
}

.other__list {
  margin-block-start: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.product__banner {
  position: relative;
  z-index: 2;
  padding-inline-end: 12px;
  margin-block-end: 12px;
}
.product__banner::before, .product__banner::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.product__banner::before {
  width: 36px;
  height: 47px;
  background-image: url(/toumei-shirohada/assets_new/img/shared/product-banner-left.svg);
  left: 22px;
}
.product__banner::after {
  width: 44px;
  height: 46px;
  background-image: url(/toumei-shirohada/assets_new/img/shared/product-banner-right.svg);
  right: 22px;
}

.product__banner__inner {
  width: 100%;
  background-color: var(--color-accent);
  padding: 4px;
  display: grid;
  justify-items: center;
  position: relative;
}
.product__banner__inner::before {
  content: "";
  width: 100%;
  height: calc(100% + 8px);
  background-color: var(--color-blue);
  position: absolute;
  top: 4px;
  right: -6px;
  z-index: -1;
}

.product__banner__upper {
  font-family: var(--font-zen-maru);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-yellow);
  line-height: 1.3;
}

.product__banner__small {
  font-size: 1.125rem;
}

.product__banner__bottom {
  font-family: var(--font-zen-maru);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-yellow);
  line-height: 1.5;
}

.product--spray {
  position: relative;
  padding-block-start: 20px;
}
.product--spray .product__image {
  margin-inline-start: -10px;
}

.product__gallery {
  display: grid;
  justify-items: center;
  row-gap: 20px;
}

.product__gallery__image {
  width: 100%;
  container-type: inline-size;
  position: relative;
}

.product__gallery__arrow {
  position: absolute;
}

.product__gallery__arrow--neck {
  width: 15.3cqw;
  bottom: -0.7cqw;
  left: 2.5cqw;
  animation: arrowNeck 2s ease-in infinite;
}

.product__gallery__arrow--arm {
  width: 14.9cqw;
  bottom: 1.8cqw;
  left: 32.9cqw;
  animation: arrowArm 2s ease-in infinite;
}

.product__gallery__arrow--sox {
  width: 18.1cqw;
  bottom: 8cqw;
  right: -2.1cqw;
  animation: arrowSox 2s ease-in infinite;
}

@keyframes arrowNeck {
  0%, 100% {
    transform: translate(0, 0);
  }
  60%, 80% {
    transform: translate(1cqw, -3cqw);
  }
}
@keyframes arrowArm {
  0%, 100% {
    transform: translate(0, 0);
  }
  60%, 80% {
    transform: translate(3cqw, -3cqw);
  }
}
@keyframes arrowSox {
  0%, 100% {
    transform: translate(0, 0);
  }
  60%, 80% {
    transform: translate(-4cqw, 1cqw);
  }
}
.feature--spray {
  background-size: 100% 135px;
}
.feature--spray .feature__box {
  border-width: 4px;
}

.feature__compare {
  container-type: inline-size;
  position: relative;
}

.feature__before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: shiroBeforeAnim 4s ease-in-out infinite;
}
.feature__before img {
  width: 100%;
}

.feature__after {
  position: relative;
  animation: shiroAfterAnim 4s ease-in-out infinite;
}

.feature__after__kazari,
.feature__after__text {
  position: absolute;
}

.feature__after__kazari--left {
  width: 12cqw;
  bottom: 6cqw;
  left: 18cqw;
  animation: shiroStarAnim 4s ease-out infinite;
  transform-origin: left bottom;
  scale: -1 1;
}

.feature__after__kazari--right {
  width: 12cqw;
  top: 8cqw;
  right: 4cqw;
  animation: shiroStarAnim 4s ease-out infinite;
  transform-origin: left bottom;
}

.feature__after__text {
  width: 40cqw;
  top: -5cqw;
  left: -5cqw;
  animation: shiroTextAnim 4s ease-out infinite;
}

.feature__box--pack {
  margin-block-start: 29px;
}

.feature__box__pop--cheat {
  margin-inline: calc(var(--content-padding-inline) * -1);
  margin-block-start: -59px;
}

.feature__box__note {
  width: 100%;
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-blue);
}

.feature__toneup {
  container-type: inline-size;
  padding-inline: 13px;
  position: relative;
}

.feature__toneup__image {
  width: 66.9cqw;
  margin-inline-start: 6.9cqw;
  position: relative;
}

.feature__toneup__image__arrow,
.feature__toneup__image__kirakira {
  position: absolute;
}

.feature__toneup__image__arrow {
  width: 23cqw;
  bottom: 10cqw;
  right: 15.4cqw;
}

.feature__toneup__image__kirakira--01 {
  width: 6cqw;
  bottom: 17cqw;
  right: 10cqw;
}

.feature__toneup__image__kirakira--02 {
  width: 4.2cqw;
  bottom: 24cqw;
  right: 7cqw;
}

.feature__toneup__text {
  width: 81.2cqw;
  margin-inline-start: 1.8cqw;
  margin-block-start: -5.9cqw;
}

.feature__toneup__prod {
  width: 19.1cqw;
  position: absolute;
  bottom: 14.1cqw;
  right: 1.8cqw;
}

.feature__toneup__bg {
  width: 106cqw;
  position: absolute;
  top: 4cqw;
  right: 12cqw;
  z-index: -1;
}

.feature__shirohada {
  container-type: inline-size;
  width: 100%;
  margin-inline: auto;
  display: grid;
  row-gap: 8px;
  margin-block-start: 10px;
  justify-items: center;
}

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

.feature__shirohada__comparison {
  container-type: inline-size;
  width: 70cqw;
  position: relative;
  z-index: 2;
}

.feature__shirohada__before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: shiroBeforeAnim 4s ease-in-out infinite;
}
.feature__shirohada__before img {
  width: 100%;
}

.feature__shirohada__after {
  position: relative;
  animation: shiroAfterAnim 4s ease-in-out infinite;
}

.feature__shirohada__after__star,
.feature__shirohada__after__text {
  position: absolute;
}

.feature__shirohada__after__star {
  animation: shiroStarAnim 4s ease-out infinite;
  transform-origin: left bottom;
}

.feature__shirohada__after__text {
  animation: shiroTextAnim 4s ease-out infinite;
}

.feature__shirohada__after__star--01 {
  width: 2.6cqw;
  bottom: 15.6cqw;
  left: 12.4cqw;
}

.feature__shirohada__after__star--02 {
  width: 2.4cqw;
  bottom: 8.4cqw;
  left: 21.3cqw;
}

.feature__shirohada__after__text {
  width: 48.7cqw;
  bottom: 11.6cqw;
  right: 10.7cqw;
}

.feature__shirohada__spray {
  width: 45cqw;
  position: absolute;
  bottom: 0;
  right: 0;
}

@keyframes shiroBeforeAnim {
  0%, 40% {
    opacity: 1;
  }
  45%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shiroAfterAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}
@keyframes shiroStarAnim {
  0%, 40%, 100% {
    opacity: 0;
  }
  45%, 99% {
    opacity: 1;
  }
}
@keyframes shiroTextAnim {
  0%, 40%, 100% {
    clip-path: inset(0 100% 0 0);
  }
  45%, 99% {
    clip-path: inset(0 0% 0 0);
  }
}
.howto--spray {
  padding-block-end: 40px;
}

.howto__box__note {
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-blue);
  line-height: 1.8;
}

.howto__box__video {
  max-width: 280px;
  justify-self: center;
  position: relative;
}
.howto__box__video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 405/720;
}

.howto__outer {
  border-radius: 25px;
  padding: 10px;
  background-color: var(--color-white);
}

.howto__list {
  container-type: inline-size;
  border-radius: 20px;
  padding: 20px;
  display: grid;
  row-gap: 20px;
  position: relative;
  background-color: #FFFBDA;
  border: 3px solid var(--color-blue);
}
.howto__list::before {
  content: "";
  width: 36cqw;
  height: auto;
  aspect-ratio: 197/159;
  background-image: url(/toumei-shirohada/assets_new/img/special/feature-face.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: -10cqw;
  left: -6cqw;
}
.howto__list::after {
  content: "";
  width: 118cqw;
  height: auto;
  aspect-ratio: 762/1206;
  background-image: url(/toumei-shirohada/assets_new/img/special/feature-kazari.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: -6cqw;
  bottom: -12cqw;
  z-index: -1;
}

.howto__item {
  display: grid;
  justify-items: center;
  row-gap: 12px;
}
.howto__item:not(:last-child) {
  padding-block-end: 20px;
  background-image: radial-gradient(circle, var(--color-blue) 2px, transparent 3px);
  background-size: 10px 6px;
  background-repeat: repeat-x;
  background-position: bottom;
}

.howto__item__heading {
  display: grid;
  justify-items: center;
  row-gap: 4px;
}

.howto__item__heading__middle {
  font-family: var(--font-zen-maru);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.2;
  text-align: center;
}

.howto__item__heading__small {
  font-family: var(--font-zen-maru);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.2;
  text-align: center;
}

.howto__item__heading__text {
  font-family: var(--font-zen-maru);
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1.2;
  text-align: center;
}

.howto__item__spec {
  font-family: var(--font-zen-maru);
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.4;
  text-align: center;
}

.howto__item__sub {
  font-family: var(--font-zen-maru);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.6;
  text-align: center;
}

.howto__item__note {
  font-family: var(--font-zen-maru);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.7;
  text-align: center;
}

.howto__item__button {
  padding-block: 10px;
  padding-inline: 42px;
}
.howto__item__button .c-buttonTheme__label {
  font-family: var(--font-family);
  font-size: 0.875rem;
}

.howto__support {
  border-radius: 20px;
  padding-block-start: 25px;
  padding-block-end: 15px;
  padding-inline: 20px;
  display: grid;
  justify-content: center;
  row-gap: 10px;
  position: relative;
  background-color: var(--color-white);
}
.howto__support::before {
  content: "";
  width: 42px;
  height: auto;
  aspect-ratio: 1/1;
  background-image: url(/toumei-shirohada/assets_new/img/special/feature-plus.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
}

.howto__support__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.howto__support__note {
  color: var(--color-blue);
  text-align: right;
  font-size: 0.625rem;
}

.howto__support__heading {
  max-width: min(80.4vw, 603px);
}

.howto__support__item {
  max-width: min(25.8667vw, 194px);
}

.a-kirakira {
  animation: kirakira 4s ease-in-out infinite;
  transform-origin: center;
}

.a-pulse--down {
  animation: pulseDown 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.a-pulse--up {
  animation: pulseUp 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.a-tear {
  animation: pulseUp 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: top left;
}

.a-spray {
  opacity: 0;
  transform-origin: center;
}
.a-spray.is-animated {
  animation: sprayOnce 1.2s ease-out forwards;
}

.a-delay--h {
  animation-delay: 1s;
}

.a-delay--q {
  animation-delay: 0.5s;
}

@keyframes kirakira {
  0%, 100% {
    transform: scale(0.5);
  }
  30%, 80% {
    transform: scale(1);
  }
}
@keyframes pulseDown {
  0%, 100% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes pulseUp {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8);
  }
}
@keyframes sprayOnce {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.js-mist {
  animation: shiroMistAnim 4s ease-in-out infinite;
}

@keyframes shiroMistAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}