svg, img {
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.l-container {
  max-width: 680px;
  margin-inline: auto;
}
@media screen and (max-width: 800px) {
  .l-container {
    padding-inline: min(4.6666666667vw, 35px);
  }
}

.c-buttonPink {
  width: 100%;
  background-color: #E7438A;
  border: 5px solid #E7438A;
  border-radius: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}
.c-buttonPink::before {
  content: "";
  width: 12px;
  height: 16px;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (any-hover: hover) {
  .c-buttonPink {
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
  }
  .c-buttonPink::before {
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
  .c-buttonPink:hover {
    background-color: #ffffff;
    color: #E7438A;
  }
  .c-buttonPink:hover::before {
    background-color: #E7438A;
  }
}

.mvHome {
  position: relative;
  -webkit-padding-before: 20px;
          padding-block-start: 20px;
}
@media screen and (min-width: 801px) {
  .mvHome {
    background: linear-gradient(to top, #00B9EF 312px, transparent 312px), url(/toumei-shirohada/assets/img/home/check-bg.png) center/cover;
    -webkit-padding-after: 60px;
            padding-block-end: 60px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome {
    background: linear-gradient(to top, #00B9EF min(49.6vw, 372px), transparent min(49.6vw, 372px)), url(/toumei-shirohada/assets/img/home/check-bg.png) center/cover;
    -webkit-padding-after: 20px;
            padding-block-end: 20px;
  }
}

.mvHome__catch {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (max-width: 800px) {
  .mvHome__catch {
    max-width: min(79.8666666667vw, 599px);
  }
}

.mvHome__catch__spf {
  position: absolute;
}
@media screen and (min-width: 801px) {
  .mvHome__catch__spf {
    top: 19px;
    left: -70px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__catch__spf {
    width: min(27.0666666667vw, 203px);
    top: min(2.5333333333vw, 19px);
    left: calc(min(9.3333333333vw, 70px) * -1);
  }
}

.mvHome__catch__face {
  position: absolute;
}
@media screen and (min-width: 801px) {
  .mvHome__catch__face {
    bottom: -36px;
    right: -26px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__catch__face {
    width: min(21.2vw, 159px);
    bottom: calc(min(4.8vw, 36px) * -1);
    right: calc(min(3.4666666667vw, 26px) * -1);
  }
}

.mvHome__prod {
  position: relative;
}
@media screen and (max-width: 800px) {
  .mvHome__prod {
    margin-inline: calc(50% - 50vw);
    -webkit-padding-start: min(2.9333333333vw, 22px);
            padding-inline-start: min(2.9333333333vw, 22px);
    -webkit-padding-end: min(6.1333333333vw, 46px);
            padding-inline-end: min(6.1333333333vw, 46px);
    -webkit-margin-before: calc(min(4vw, 30px) * -1);
            margin-block-start: calc(min(4vw, 30px) * -1);
  }
}

.mvHome__prod__image {
  position: absolute;
  z-index: 2;
}
@media screen and (min-width: 801px) {
  .mvHome__prod__image {
    width: 100%;
    max-width: 415px;
    top: -40px;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__prod__image {
    width: 100%;
    max-width: min(55.3333333333vw, 415px);
    top: calc(min(2.6666666667vw, 20px) * -1);
    left: min(20.6666666667vw, 155px);
  }
}

.mvHome__prod__pop {
  position: absolute;
}
@media screen and (min-width: 801px) {
  .mvHome__prod__pop {
    bottom: 16px;
    right: 42px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__prod__pop {
    width: min(21.8666666667vw, 164px);
    bottom: min(2.1333333333vw, 16px);
    right: min(11.7333333333vw, 88px);
  }
}

.mvHome__info {
  display: -ms-grid;
  display: grid;
  justify-items: center;
}

@media screen and (min-width: 801px) {
  .mvHome__info__title {
    -webkit-margin-before: 13px;
            margin-block-start: 13px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__info__title {
    -webkit-margin-before: min(1.0666666667vw, 8px);
            margin-block-start: min(1.0666666667vw, 8px);
  }
}

@media screen and (min-width: 801px) {
  .mvHome__info__points {
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__info__points {
    -webkit-margin-before: min(2.6666666667vw, 20px);
            margin-block-start: min(2.6666666667vw, 20px);
  }
}

@media screen and (min-width: 801px) {
  .mvHome__info__date {
    -webkit-margin-before: 21px;
            margin-block-start: 21px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__info__date {
    -webkit-margin-before: min(2.8vw, 21px);
            margin-block-start: min(2.8vw, 21px);
  }
}

.mvHome__gallery {
  display: -ms-grid;
  display: grid;
  justify-items: center;
}
@media screen and (min-width: 801px) {
  .mvHome__gallery {
    -webkit-margin-before: 42px;
            margin-block-start: 42px;
    row-gap: 14px;
  }
}
@media screen and (max-width: 800px) {
  .mvHome__gallery {
    -webkit-margin-before: min(5.6vw, 42px);
            margin-block-start: min(5.6vw, 42px);
    row-gap: min(1.8666666667vw, 14px);
  }
}

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

.mvHome__gallery__arrow {
  position: absolute;
}

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

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

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

@-webkit-keyframes arrowNeck {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(1cqw, -3cqw);
            transform: translate(1cqw, -3cqw);
  }
  80% {
    -webkit-transform: translate(1cqw, -3cqw);
            transform: translate(1cqw, -3cqw);
  }
}

@keyframes arrowNeck {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(1cqw, -3cqw);
            transform: translate(1cqw, -3cqw);
  }
  80% {
    -webkit-transform: translate(1cqw, -3cqw);
            transform: translate(1cqw, -3cqw);
  }
}
@-webkit-keyframes arrowArm {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(3cqw, -3cqw);
            transform: translate(3cqw, -3cqw);
  }
  80% {
    -webkit-transform: translate(3cqw, -3cqw);
            transform: translate(3cqw, -3cqw);
  }
}
@keyframes arrowArm {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(3cqw, -3cqw);
            transform: translate(3cqw, -3cqw);
  }
  80% {
    -webkit-transform: translate(3cqw, -3cqw);
            transform: translate(3cqw, -3cqw);
  }
}
@-webkit-keyframes arrowSox {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(-4cqw, 1cqw);
            transform: translate(-4cqw, 1cqw);
  }
  80% {
    -webkit-transform: translate(-4cqw, 1cqw);
            transform: translate(-4cqw, 1cqw);
  }
}
@keyframes arrowSox {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  60% {
    -webkit-transform: translate(-4cqw, 1cqw);
            transform: translate(-4cqw, 1cqw);
  }
  80% {
    -webkit-transform: translate(-4cqw, 1cqw);
            transform: translate(-4cqw, 1cqw);
  }
}
.sectionProd {
  background-color: #00B9EF;
  position: relative;
  z-index: 2;
  -webkit-padding-after: 80px;
          padding-block-end: 80px;
}

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

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

.sectionProd__toneup__image__arrow, .sectionProd__toneup__image__kirakira {
  position: absolute;
}

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

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

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

.sectionProd__toneup__text {
  width: 81.2cqw;
  -webkit-margin-start: 1.8cqw;
          margin-inline-start: 1.8cqw;
  -webkit-margin-before: -5.9cqw;
          margin-block-start: -5.9cqw;
}

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

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

.sectionProd__box {
  background-color: #ffffff;
  border: 10px solid #FFEA00;
  border-radius: 20px;
  padding-block: 40px;
  padding-inline: 20px;
  display: -ms-grid;
  display: grid;
  row-gap: 40px;
  justify-items: center;
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
}
@media screen and (min-width: 801px) {
  .sectionProd__box {
    padding-block: 40px;
    padding-inline: 20px;
  }
}
@media screen and (max-width: 800px) {
  .sectionProd__box {
    padding-block: 30px;
    padding-inline: 10px;
  }
}

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

.sectionProd__paragraph {
  color: #005FAD;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}
.sectionProd__paragraph .pink {
  color: #E7438A;
}
@media screen and (min-width: 801px) {
  .sectionProd__paragraph {
    font-size: 26px;
  }
}
@media screen and (max-width: 800px) {
  .sectionProd__paragraph {
    font-size: 16px;
  }
}

.sectionProd__note {
  color: #005FAD;
  font-weight: bold;
  text-align: right;
  line-height: 1;
}
@media screen and (min-width: 801px) {
  .sectionProd__note {
    font-size: 14px;
  }
}
@media screen and (max-width: 800px) {
  .sectionProd__note {
    font-size: 10px;
  }
}

.sectionProd__video {
  max-width: 405px;
}
.sectionProd__video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 405/720;
}

.sectionProd__shirohada {
  container-type: inline-size;
  max-width: 620px;
  margin-inline: auto;
  display: -ms-grid;
  display: grid;
  row-gap: 30px;
  justify-items: center;
  -webkit-margin-before: 60px;
          margin-block-start: 60px;
}

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

.sectionProd__shirohada__comparison {
  container-type: inline-size;
  width: min(60vw, 450px);
  position: relative;
  z-index: 2;
}

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

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

.sectionProd__shirohada__after__star, .sectionProd__shirohada__after__text {
  position: absolute;
}

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

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

.js-mist {
  -webkit-animation: shiroMistAnim 4s ease-in-out infinite;
          animation: shiroMistAnim 4s ease-in-out infinite;
}

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

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

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

.sectionProd__shirohada__spray {
  width: min(38.9333333333vw, 292px);
  position: absolute;
  bottom: 0;
  right: 0;
}

.sectionFeature {
  background: url(/toumei-shirohada/assets/img/home/check-bg.png) center/cover;
  position: relative;
  z-index: 2;
  -webkit-padding-before: 80px;
          padding-block-start: 80px;
}
@media screen and (min-width: 801px) {
  .sectionFeature {
    -webkit-padding-after: 206px;
            padding-block-end: 206px;
  }
}
@media screen and (max-width: 800px) {
  .sectionFeature {
    -webkit-padding-after: 120px;
            padding-block-end: 120px;
  }
}
.sectionFeature::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  width: 100%;
  background-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
@media screen and (min-width: 801px) {
  .sectionFeature::after {
    height: 300px;
  }
}
@media screen and (max-width: 800px) {
  .sectionFeature::after {
    height: 150px;
  }
}

.sectionFeature__box {
  background-color: #fff;
}

.sectionFeature__list {
  container-type: inline-size;
  border-radius: 50px;
  padding: min(2.6666666667vw, 20px);
  display: -ms-grid;
  display: grid;
  row-gap: min(2.6666666667vw, 20px);
  position: relative;
}
.sectionFeature__list::before {
  content: "";
  width: 29cqw;
  height: auto;
  aspect-ratio: 197/159;
  background-image: url(/toumei-shirohada/assets/img/home/feature-face.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.sectionFeature__list::after {
  content: "";
  width: 118cqw;
  height: auto;
  aspect-ratio: 762/1206;
  background-image: url(/toumei-shirohada/assets/img/home/feature-kazari.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: -6cqw;
  bottom: -12cqw;
  z-index: -1;
}

.sectionFeature__inner {
  max-width: 750px;
}

.sectionFeature__item {
  background-color: #FFFBDA;
  border: min(0.6666666667vw, 5px) solid #005FAD;
  border-radius: 40px;
  display: -ms-grid;
  display: grid;
  justify-items: center;
}
@media screen and (min-width: 801px) {
  .sectionFeature__item {
    padding-block: 50px;
    padding-inline: 27px;
    row-gap: 30px;
  }
}
@media screen and (max-width: 800px) {
  .sectionFeature__item {
    padding-block: min(6.6666666667vw, 50px);
    padding-inline: min(3.6vw, 27px);
    row-gap: min(4vw, 30px);
  }
}

.sectionFeature__item__button {
  max-width: 400px;
}
@media screen and (min-width: 801px) {
  .sectionFeature__item__button {
    font-size: 28px;
    padding-block: 20px;
  }
}
@media screen and (max-width: 800px) {
  .sectionFeature__item__button {
    font-size: 16px;
    padding-block: 12px;
  }
}

.sectionFeature__item__line {
  max-width: min(72.6666666667vw, 545px);
}

.sectionFeature__item__heading--cut {
  max-width: min(51.6vw, 387px);
}

.sectionFeature__item__heading--resistant {
  max-width: min(61.0666666667vw, 458px);
}

.sectionFeature__item__heading--skin {
  max-width: min(55.2vw, 414px);
}

.sectionFeature__item__content--cut-spf {
  max-width: min(78.1333333333vw, 586px);
}

.sectionFeature__item__content--cut-resistant {
  max-width: min(35.4666666667vw, 266px);
}

.sectionFeature__item__content--resistant-proof {
  max-width: min(66.6666666667vw, 500px);
}

.sectionFeature__item__content--skin-nonchemical {
  max-width: min(47.8666666667vw, 359px);
}

.sectionFeature__item__content--skin-note {
  max-width: min(42.4vw, 318px);
}

.sectionFeature__item__content--skin-component {
  max-width: min(53.8666666667vw, 404px);
}

.sectionFeature__support {
  -webkit-margin-before: min(8vw, 60px);
          margin-block-start: min(8vw, 60px);
  border-radius: 40px;
  -webkit-padding-before: min(6.6666666667vw, 50px);
          padding-block-start: min(6.6666666667vw, 50px);
  -webkit-padding-after: min(4vw, 30px);
          padding-block-end: min(4vw, 30px);
  padding-inline: min(5.2vw, 39px);
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  row-gap: min(3.2vw, 24px);
  position: relative;
}
.sectionFeature__support::before {
  content: "";
  width: min(11.0666666667vw, 83px);
  height: auto;
  aspect-ratio: 1/1;
  background-image: url(/toumei-shirohada/assets/img/home/feature-plus.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: calc(min(9.3333333333vw, 70px) * -1);
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

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

.sectionFeature__support__note {
  color: #005FAD;
  text-align: right;
}
@media screen and (min-width: 801px) {
  .sectionFeature__support__note {
    font-size: 16px;
  }
}
@media screen and (max-width: 800px) {
  .sectionFeature__support__note {
    font-size: 10px;
  }
}

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

.sectionFeature__support__item {
  max-width: min(25.8666666667vw, 194px);
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@-webkit-keyframes swing {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@keyframes swing {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@-webkit-keyframes pulseDown {
  0%, 100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulseDown {
  0%, 100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes pulseUp {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
}
@keyframes pulseUp {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
}
@-webkit-keyframes arrow {
  0%, 100% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
  }
  30%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes arrow {
  0%, 100% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
  }
  30%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes peelRight {
  0%, 100% {
    clip-path: inset(0 0 0 100%);
  }
  30%, 80% {
    clip-path: inset(0 0 0 0%);
  }
}
@keyframes peelRight {
  0%, 100% {
    clip-path: inset(0 0 0 100%);
  }
  30%, 80% {
    clip-path: inset(0 0 0 0%);
  }
}
@-webkit-keyframes kirakira {
  0%, 100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  30%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kirakira {
  0%, 100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  30%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes shiroBeforeAnim {
  0%, 40% {
    opacity: 1;
  }
  45%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shiroBeforeAnim {
  0%, 40% {
    opacity: 1;
  }
  45%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shiroAfterAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}
@keyframes shiroAfterAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}
@-webkit-keyframes shiroMistAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}
@keyframes shiroMistAnim {
  0%, 25%, 100% {
    opacity: 0;
  }
  40%, 99% {
    opacity: 1;
  }
}
@-webkit-keyframes shiroStarAnim {
  0%, 25%, 100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45%, 99% {
    opacity: 1;
    -webkit-transform: scale(3);
            transform: scale(3);
  }
}
@keyframes shiroStarAnim {
  0%, 25%, 100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45%, 99% {
    opacity: 1;
    -webkit-transform: scale(3);
            transform: scale(3);
  }
}
@-webkit-keyframes shiroTextAnim {
  0%, 40%, 100% {
    clip-path: inset(0 100% 0 0);
  }
  45%, 99% {
    clip-path: inset(0 0% 0 0);
  }
}
@keyframes shiroTextAnim {
  0%, 40%, 100% {
    clip-path: inset(0 100% 0 0);
  }
  45%, 99% {
    clip-path: inset(0 0% 0 0);
  }
}
.a-spin {
  -webkit-animation: spin 16s linear infinite;
          animation: spin 16s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.a-float {
  -webkit-animation: float 2s ease-in-out infinite;
          animation: float 2s ease-in-out infinite;
}

.a-swing {
  -webkit-animation: swing 2s ease-in-out infinite;
          animation: swing 2s ease-in-out infinite;
  transform-box: fill-box;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

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

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

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

.a-arrow {
  -webkit-animation: arrow 4s ease-in-out infinite;
          animation: arrow 4s ease-in-out infinite;
  transform-box: fill-box;
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
}

.a-peel--right {
  -webkit-animation: peelRight 4s ease-in-out infinite;
          animation: peelRight 4s ease-in-out infinite;
}

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

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

@-webkit-keyframes sprayOnce {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sprayOnce {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.a-delay--h {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.a-delay--q {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
/*# sourceMappingURL=home.css.map */