@charset "UTF-8";


.page-top:not(.page-top--loaded) .l-header,
.page-top:not(.page-top--loaded) .l-footer {
  opacity: 0;
  pointer-events: none;
}
.page-top .top-wrapper {
  height: 100vh;
  position: relative;
}
.page-top .top-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.page-top .top-scene-head {
  position: relative;
  z-index: 2;
  max-width: 100%;
  opacity: 0;
}
.page-top .top-scene.is-on .top-scene-head {
  animation: fadein 0.5s both;
}
.page-top .top-scene-description {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
  margin-top: 0.6rem;
}
.page-top .top-scene-link {
  display: block;
  width: 4rem;
  margin-top: 1rem;
}
.page-top .top-scene-link img {
  width: 100%;
}
.page-top .top-loading {
  z-index: 5;
}
.page-top .top-fullproducts {
  z-index: 6;
}
.page-top .top-about {
  z-index: 4;
}
.page-top .top-products {
  z-index: 3;
}
.page-top .top-animals {
  z-index: 2;
}
.page-top .top-loading {
  background: #FFF;
}
.page-top .top-loading.is-off {
  animation: fadeOut 0s 1s both;
  pointer-events: none;
}
.page-top .top-loading::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--colorMain2);
  z-index: 0;
}
.page-top .top-loading__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page-top .top-loading__logo {
  filter: var(--filtercolorMain1);
  width: 26rem;
  font-size: 0;
}
.page-top .top-loading__logo img {
  width: 100%;
}
.page-top .top-loading__progress {
  background: #fff;
  width: 25.6rem;
  height: 2px;
  margin-top: 5rem;
  position: relative;
}
@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.page-top .top-loading__progress__bar {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--colorKoala);
  transform-origin: center left;
}
.page-top .top-loading.is-on .top-loading__progress__bar {
  animation: progressBar 0.5s var(--easing1) both;
}
@keyframes fullproductsClip {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}
.page-top .top-fullproducts:not(.is-on) {
  opacity: 0;
}
.page-top .top-fullproducts.is-off {
  animation: fullproductsClip 0.4s var(--easing1) both;
}
@keyframes fullproductsCircle {
  0% {
    -webkit-clip-path: circle(0% at 50% 50%);
            clip-path: circle(0% at 50% 50%);
  }
  100% {
    -webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);
  }
}
.page-top .top-fullproducts__inner {
  width: 100%;
  height: 100%;
}
.page-top .top-fullproducts.is-on .top-fullproducts__inner {
  animation: fullproductsCircle 0.4s var(--easing1) both;
}
@keyframes fullproductsImage {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10%);
  }
}
.page-top .top-fullproducts__image {
  width: 120%;
  height: 100%;
  background: #FFF;
  position: relative;
}
.page-top .top-fullproducts__image img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-top .top-fullproducts.is-on .top-fullproducts__image {
  animation: fullproductsImage 8s linear both;
}
.page-top .top-about {
  background: url("/sp/hellonature/assets/img/top/about-pattern.jpg") repeat left top/26.7rem auto;
}
.page-top .top-about:not(.is-on) {
  opacity: 0;
}
.page-top .top-about.is-on {
  animation: fadein 2s both;
}
.page-top .top-about__motion-area {
  position: relative;
}
.page-top .top-about__globe-wrap {
  width: 20rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.page-top .top-about__globe {
  width: 100%;
  aspect-ratio: 1/1;
  opacity: 0;
}
.page-top .top-about__animal-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.page-top .top-about__animal {
  position: absolute;
}
.page-top .top-about__animal img {
  width: 100%;
  opacity: 0;
}
.page-top .top-about__animal--red-panda {
  width: 5.7rem;
  right: 7.5%;
  top: -12.5%;
  transform: rotate(31.93deg);
}
.page-top .top-about__animal--sea-otter {
  width: 5.3rem;
  right: -20.5%;
  top: 40%;
  transform: rotate(75deg);
}
.page-top .top-about__animal--seal {
  width: 6.5rem;
  right: 4%;
  bottom: -3%;
  transform: rotate(145deg);
}
.page-top .top-about__animal--dolphin {
  width: 7.5rem;
  left: -5%;
  bottom: -5%;
  transform: rotate(220deg);
}
.page-top .top-about__animal--koala {
  width: 3.1rem;
  left: -15%;
  bottom: 46.5%;
  transform: rotate(-90deg);
}
.page-top .top-about__animal--penguin {
  width: 2.9rem;
  left: 5%;
  top: -10%;
  transform: rotate(-46deg);
}
.page-top .top-about__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  z-index: 1;
}
.page-top .top-about__orbit::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #FFF;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  transform: scale(0, 0);
}
.page-top .top-about__orbit--01 {
  width: 34rem;
}
.page-top .top-about__orbit--02 {
  width: 45rem;
}
.page-top .top-about__orbit--02::before {
  opacity: 0.6;
}
.page-top .top-about__orbit--03 {
  width: 60rem;
}
.page-top .top-about__orbit--03::before {
  opacity: 0.3;
}
.page-top .top-about__orbit__inner {
  width: 100%;
  height: 100%;
}
.page-top .top-about__planet {
  position: absolute;
  z-index: 5;
}
.page-top .top-about__planet img {
  width: 100%;
  opacity: 0;
}
.page-top .top-about__planet--01-01 {
  width: 3.2rem;
  right: 6.5%;
  top: 13.5%;
}
.page-top .top-about__planet--01-02 {
  width: 2.2rem;
  right: 17.5%;
  bottom: 6.5%;
}
.page-top .top-about__planet--01-03 {
  width: 1.32rem;
  left: 3%;
  top: 24.5%;
  animation: none;
}
.page-top .top-about__planet--02-01 {
  width: 3.5rem;
  right: 22%;
  top: 3%;
}
.page-top .top-about__planet--02-02 {
  width: 3.9rem;
  right: 4%;
  bottom: 18%;
}
.page-top .top-about__planet--02-03 {
  width: 1.3rem;
  right: 30%;
  bottom: 2.6%;
  animation: none;
}
.page-top .top-about__planet--02-04 {
  width: 2.1rem;
  left: 10%;
  bottom: 15.6%;
  animation: none;
}
.page-top .top-about__planet--02-05 {
  width: 2.5rem;
  left: 16%;
  top: 8.6%;
}
.page-top .top-about__planet--02-06 {
  width: 4.8rem;
  left: 30%;
  top: -1.6%;
}
.page-top .top-about__planet--03-01 {
  width: 3.1rem;
  right: 22%;
  top: 4%;
}
.page-top .top-about__planet--03-02 {
  width: 2.4rem;
  left: 33%;
  bottom: 0%;
}
.page-top .top-about__planet--03-02 img {
  transform: rotate(-35deg);
}
.page-top .top-about__planet--03-03 {
  width: 4rem;
  left: 18%;
  bottom: 5.5%;
}
.page-top .top-about.is-on .top-about__globe {
  animation: bounceIn 0.6s 0.6s both;
}
.page-top .top-about.is-on .top-about__globe img {
  animation: rotate 85s 0.6s linear infinite;
}
.page-top .top-about.is-on .top-about__animal--dolphin img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 0);
}
.page-top .top-about.is-on .top-about__animal--koala img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 1);
}
.page-top .top-about.is-on .top-about__animal--penguin img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 2);
}
.page-top .top-about.is-on .top-about__animal--red-panda img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 3);
}
.page-top .top-about.is-on .top-about__animal--sea-otter img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 4);
}
.page-top .top-about.is-on .top-about__animal--seal img {
  animation: bounceIn 0.6s both calc(1s + 0.1s * 5);
}
@keyframes topAboutRedPanda {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-1.3rem);
  }
  100% {
    transform: translateY(0%);
  }
}
.page-top .top-about.is-on.is-child-animals-active .top-about__animal--red-panda .top-about__animal__illust {
  animation: topAboutRedPanda 0.2s both var(--easing1);
}
@keyframes topAboutSeal {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.page-top .top-about.is-on.is-child-animals-active .top-about__animal--seal .top-about__animal__illust {
  animation: topAboutSeal 0.2s 0.5s both var(--easing1);
}
@keyframes topAboutDolphin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.page-top .top-about.is-on.is-child-animals-active .top-about__animal--dolphin .top-about__animal__illust {
  animation: topAboutDolphin 0.2s 0.7s both var(--easing1);
}
@keyframes topAboutKoala {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
.page-top .top-about.is-on.is-child-animals-active .top-about__animal--koala .top-about__animal__illust {
  animation: topAboutKoala 0.3s 1.2s both var(--easing1);
}
.page-top .top-about.is-on .top-about__orbit::before {
  animation: scale 0.7s 1.3s var(--easing1) both;
}
.page-top .top-about.is-on .top-about__orbit--02::before {
  animation-delay: 1.5s;
}
.page-top .top-about.is-on .top-about__orbit--03::before {
  animation-delay: 1.7s;
}
.page-top .top-about.is-on .top-about__orbit__inner {
  animation: rotate 68s infinite linear;
}
.page-top .top-about.is-on .top-about__planet {
  animation: rotateReverse 68s infinite linear;
}
.page-top .top-about.is-on .top-about__planet img {
  animation: fadein 2s 2.5s both;
}
.page-top .top-about.is-on .top-about__head {
  animation-delay: 2.5s;
}
.page-top .top-about.is-on .top-about__orbit--02 .top-about__orbit__inner {
  animation-name: rotateReverse;
}
.page-top .top-about.is-on .top-about__orbit--02 .top-about__planet {
  animation-name: rotate;
}
.page-top .top-about.is-off {
  pointer-events: none;
  animation: fadeOut 1.5s 0.5s both;
}
.page-top .top-about.is-off .top-about__animal-wrap,
.page-top .top-about.is-off .top-about__orbit {
  animation: scaleReverse 0.3s var(--easing1) both;
}
.page-top .top-about.is-off .top-about__head,
.page-top .top-about.is-off .top-about__animal,
.page-top .top-about.is-off .top-about__orbit,
.page-top .top-about.is-off .top-about__planet {
  animation: fadeOut 0.3s both;
}
.page-top .top-about.is-off .top-about__globe {
  opacity: 1;
  animation: scaleReverse 1.2s var(--easing1) both;
}
.page-top .top-products.is-off {
  animation: fadeOut 0.6s both;
  pointer-events: none;
}
@keyframes productsOverlay {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
  }
}
.page-top .top-products__overlay {
  background: url("/sp/hellonature/assets/img/top/products-pattern.jpg") repeat left top/26.7rem auto;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.page-top .top-products__panels {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
}
.page-top .top-products__panels__block {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.page-top .top-products__panels__block--01 {
  background: url("/sp/hellonature/assets/img/top/products-panel-pattern_01.jpg") no-repeat center bottom/cover;
  grid-area: area01;
}
.page-top .top-products__panels__block--02 {
  background: url("/sp/hellonature/assets/img/top/products-panel-pattern_02.jpg") no-repeat center center/cover;
  grid-area: area02;
}
.page-top .top-products__panels__block--03 {
  background: url("/sp/hellonature/assets/img/top/products-panel-pattern_03.jpg") no-repeat left center/cover;
  grid-area: area03;
}
.page-top .top-products__panels__kakikata {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.page-top .top-products__panels__kakikata__image {
  transform: translateX(70%);
}
.page-top .top-products__panels__penguin {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 5.1rem;
  z-index: 2;
  aspect-ratio: 104/40;
  z-index: 1;
}
.page-top .top-products__panels__penguin img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
}
.page-top .top-products__panels__can {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 84%;
  max-height: 80%;
  aspect-ratio: 1/1.37;
}
.page-top .top-products__panels__can__image {
  position: absolute;
}
.page-top .top-products__panels__can__image--01 {
  left: 13%;
  width: 45%;
  top: 50%;
  transform: translateY(-50%);
}
.page-top .top-products__panels__can__image--02, .page-top .top-products__panels__can__image--03 {
  right: 0;
  width: 46%;
}
.page-top .top-products__panels__can__image--02 {
  top: 0;
}
.page-top .top-products__panels__can__image--03 {
  bottom: 0;
}
.page-top .top-products__panels__dolphin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 38%;
}
.page-top .top-products__panels__gift {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.page-top .top-products__panels__red-panda {
  position: absolute;
  left: 15%;
  top: -15%;
  height: 18%;
  aspect-ratio: 46/37;
  z-index: 2;
}
.page-top .top-products__panels__red-panda img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
}
.page-top .top-products.is-on .top-products__overlay {
  animation: productsOverlay 0.8s 0.8s var(--easing1) both;
}
@keyframes productsImage {
  to {
    transform: translateX(-100%);
  }
}
@keyframes topKakikataIllustSp {
  0% {
    transform: translate(0rem, 20rem);
    opacity: 0;
  }
  25% {
    transform: translate(-3rem, -3rem);
    opacity: 1;
  }
  40% {
    transform: translate(-4rem, 3rem);
    opacity: 1;
  }
  55% {
    transform: translate(-5rem, 0rem);
  }
  100% {
    transform: translate(-100vw, 0rem);
  }
}
@keyframes topKakikataIllustPc {
  0% {
    transform: translate(0rem, 20rem);
    opacity: 0;
  }
  25% {
    transform: translate(-3rem, -3rem);
    opacity: 1;
  }
  40% {
    transform: translate(-4rem, 3rem);
    opacity: 1;
  }
  55% {
    transform: translate(-5rem, 0rem);
  }
  100% {
    transform: translate(-33.3333333333vw, 0rem);
  }
}
.page-top .top-products.is-on .top-products__panels__penguin {
  animation: topKakikataIllustSp 3s 1.8s var(--easing1) both;
}
.page-top .top-products.is-on .top-products__panels__kakikata__image {
  animation: productsImage 10s 0s linear;
}
@keyframes topCanImage {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-top .top-products.is-on .top-products__panels__can__image img {
  animation: topCanImage 0.5s 2.1s both;
}
.page-top .top-products.is-on .top-products__panels__can__image--02 img {
  animation-delay: 2.3s;
}
.page-top .top-products.is-on .top-products__panels__can__image--03 img {
  animation-delay: 2.5s;
}
@keyframes topProductsBounceOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}
.page-top .top-products.is-on .top-products__panels__dolphin {
  animation: bounceIn 0.5s 3s both;
}
.page-top .top-products.is-on .top-products__panels__dolphin img {
  animation: topProductsBounceOut 0.5s 6.5s both;
}
.page-top .top-products.is-on .top-products__panels__gift__image {
  animation: bounceIn 0.6s 2.8s both;
}
.page-top .top-products.is-on .top-products__panels__red-panda {
  animation: bounceIn 0.5s 3.3s both;
}
.page-top .top-products.is-on .top-products__panels__red-panda img {
  animation: topProductsBounceOut 0.5s 6.8s both;
}
.page-top .top-animals__main-area {
  aspect-ratio: 2/1;
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: calc(100% - 40rem);
  max-height: 28.5rem;
  min-height: 20.9rem;
}
.page-top .top-animals__main-area img {
  width: 100%;
}
.page-top .top-animals__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.page-top .top-animals__bg__item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.page-top .top-animals.is-child-sea .top-animals__bg__sea,
.page-top .top-animals.is-child-field .top-animals__bg__field,
.page-top .top-animals.is-child-cold .top-animals__bg__cold {
  animation: fadein 0.5s both;
}
.page-top .top-animals.is-child-field .top-animals__bg__sea,
.page-top .top-animals.is-child-cold .top-animals__bg__field {
  animation: fadeOut 0.5s both;
}
.page-top .top-animals__bg__sea {
  background: url("/sp/hellonature/assets/img/top/sea-bg.jpg") no-repeat center bottom/cover;
  z-index: 1;
}
.page-top .top-animals__bg__field {
  background: url("/sp/hellonature/assets/img/top/field-bg.jpg") no-repeat center bottom/cover;
  z-index: 2;
}
.page-top .top-animals__bg__cold {
  background: url("/sp/hellonature/assets/img/top/cold-bg.jpg") no-repeat center bottom/cover;
  z-index: 3;
}
.page-top .top-animals__globe {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.page-top .top-animals__globe__item {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transform-origin: bottom center;
}
.page-top .top-animals__globe__sea {
  z-index: 1;
  opacity: 1;
}
.page-top .top-animals.is-child-sea .top-animals__globe__sea {
  animation: bounceIn 0.5s 0.5s both;
}
.page-top .top-animals.is-child-cold .top-animals__globe__sea {
  opacity: 0;
}
.page-top .top-animals.is-child-cold .top-animals__globe__field {
  opacity: 1;
}
@keyframes animalsGlobe {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.page-top .top-animals.is-child-field .top-animals__globe__field,
.page-top .top-animals.is-child-cold .top-animals__globe__cold {
  animation: animalsGlobe 1s both;
  opacity: 1;
}
.page-top .top-animals__globe__field {
  z-index: 2;
}
.page-top .top-animals__globe__cold {
  z-index: 3;
}
.page-top .top-animals.is-child-field .top-animals__dolphin,
.page-top .top-animals.is-child-field .top-animals__splash,
.page-top .top-animals.is-child-field .top-animals__crescent-moon,
.page-top .top-animals.is-child-field .top-animals__sea-otter,
.page-top .top-animals.is-child-cold .top-animals__dolphin,
.page-top .top-animals.is-child-cold .top-animals__splash,
.page-top .top-animals.is-child-cold .top-animals__crescent-moon,
.page-top .top-animals.is-child-cold .top-animals__sea-otter {
  opacity: 0;
  pointer-events: none;
}
.page-top .top-animals__crescent-moon {
  position: absolute;
  z-index: 2;
  width: 16.66%;
  right: 22%;
  bottom: 164%;
}
.page-top .top-animals__dolphin {
  position: absolute;
  z-index: 2;
  width: 21.792%;
  left: 60%;
  bottom: 87%;
}
.page-top .top-animals__splash {
  position: absolute;
  z-index: 2;
  width: 27.5%;
  right: 5.5%;
  bottom: 92%;
  z-index: 0;
}
.page-top .top-animals__sea-otter {
  position: absolute;
  z-index: 2;
  width: 14.7168%;
  bottom: 62.5%;
  right: 22%;
}
.page-top .top-animals__sea-otter img {
  width: 100%;
}
.page-top .top-animals.is-child-sea .top-animals__crescent-moon {
  animation: topAnimalsCrescentMoon 1s 1s both;
}
@keyframes topAnimalsCrescentMoon {
  0% {
    opacity: 0;
    filter: blur(5rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.page-top .top-animals.is-child-sea .top-animals__splash {
  animation: fadein 0.45s 0.9s both;
}
@keyframes topAnimalsSplash {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -30%);
    opacity: 0;
  }
}
.page-top .top-animals.is-child-sea .top-animals__splash img {
  animation: topAnimalsSplash 1s 1.5s both;
}
.page-top .top-animals.is-child-sea .top-animals__dolphin {
  animation: bounceIn 0.45s 0.7s both, topAnimalsDolphinToLeft 2.8s 1.4s both;
}
@keyframes topAnimalsDolphin {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(0, -10rem) rotate(20deg);
    opacity: 1;
  }
  30% {
    transform: translate(0, -10rem);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: translate(0, 4rem) rotate(-25deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, 4rem) rotate(-15deg);
  }
}
@keyframes topAnimalsDolphinToLeft {
  to {
    left: 15%;
  }
}
.page-top .top-animals.is-child-sea .top-animals__dolphin img {
  animation: topAnimalsDolphin 2.8s 1.4s both;
}
.page-top .top-animals.is-child-sea .top-animals__sea-otter {
  animation: bounceIn 0.45s 0.9s both;
}
@keyframes topAnimalsSeaOtter {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}
.page-top .top-animals.is-child-sea .top-animals__sea-otter img {
  animation: topAnimalsSeaOtter 0.5s 4.5s both;
}
.page-top .top-animals.is-child-sea .top-animals__mountains,
.page-top .top-animals.is-child-sea .top-animals__red-panda,
.page-top .top-animals.is-child-sea .top-animals__koala,
.page-top .top-animals.is-child-sea .top-animals__tree,
.page-top .top-animals.is-child-sea .top-animals__leaf,
.page-top .top-animals.is-child-sea .top-animals__moon,
.page-top .top-animals.is-child-sea .top-animals__birds,
.page-top .top-animals.is-child-sea .top-animals__cloud01,
.page-top .top-animals.is-child-sea .top-animals__cloud02 {
  opacity: 0;
  pointer-events: none;
}
.page-top .top-animals.is-child-cold .top-animals__mountains,
.page-top .top-animals.is-child-cold .top-animals__red-panda,
.page-top .top-animals.is-child-cold .top-animals__koala,
.page-top .top-animals.is-child-cold .top-animals__tree,
.page-top .top-animals.is-child-cold .top-animals__leaf,
.page-top .top-animals.is-child-cold .top-animals__moon,
.page-top .top-animals.is-child-cold .top-animals__birds,
.page-top .top-animals.is-child-cold .top-animals__cloud01,
.page-top .top-animals.is-child-cold .top-animals__cloud02 {
  animation: fadeOut 0.8s both;
  pointer-events: none;
}
.page-top .top-animals__mountains {
  width: 68.64%;
  position: absolute;
  left: 50%;
  bottom: 67%;
  transform: translateX(-50%);
}
.page-top .top-animals__red-panda {
  position: absolute;
  left: 51%;
  transform: translateX(-50%);
  bottom: 93%;
  width: 17.472%;
  z-index: 3;
}
.page-top .top-animals__koala {
  position: absolute;
  left: 28%;
  bottom: 51%;
  width: 8.9664%;
  z-index: 2;
}
.page-top .top-animals__leaf {
  position: absolute;
  left: 14.5%;
  bottom: 47%;
  width: 15.456%;
  z-index: 1;
  transform: rotate(-3deg);
}
.page-top .top-animals__tree {
  position: absolute;
  left: 52.5%;
  transform: translateX(-50%);
  bottom: 66.8%;
  width: 69.792%;
  z-index: 2;
}
.page-top .top-animals__moon {
  position: absolute;
  width: 19.2%;
  left: 70%;
  bottom: 131%;
  z-index: 2;
}
.page-top .top-animals__birds {
  position: absolute;
  left: 23%;
  bottom: 120%;
  z-index: 3;
  width: 5.76%;
}
.page-top .top-animals__cloud01,
.page-top .top-animals__cloud02 {
  position: absolute;
  z-index: 4;
}
.page-top .top-animals__cloud01 {
  left: -3%;
  bottom: 75%;
  width: 66.72%;
}
.page-top .top-animals__cloud02 {
  right: -14.5%;
  bottom: 98%;
  width: 52.1568%;
}
.page-top .top-animals.is-child-field .top-animals__mountains img {
  transform-origin: center bottom;
  animation: bounceIn 0.7s 1s both;
}
.page-top .top-animals.is-child-field .top-animals__tree img {
  transform-origin: center bottom;
  animation: bounceIn 0.7s 0.9s both;
}
@keyframes topAnimalsRedPanda {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.page-top .top-animals.is-child-field .top-animals__red-panda img {
  animation: fadein 0.7s 1.1s both, topAnimalsRedPanda 0.25s 3s both;
}
@keyframes topAnimalsKoala {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(5deg);
  }
  66% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.page-top .top-animals.is-child-field .top-animals__koala {
  animation: bounceIn 0.7s 1.5s both;
}
.page-top .top-animals.is-child-field .top-animals__koala img {
  transform-origin: center bottom;
  animation: topAnimalsKoala 0.4s 2.5s both;
}
.page-top .top-animals.is-child-field .top-animals__leaf img {
  animation: fadein 0.7s 1.5s both;
}
.page-top .top-animals.is-child-field .top-animals__moon img {
  animation: fadein 0.7s 0.5s both;
}
@keyframes topAnimalsCloud01 {
  0% {
    transform: translateX(-4rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem);
    opacity: 1;
  }
}
@keyframes topAnimalsCloud02 {
  0% {
    transform: translateX(4rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem);
    opacity: 1;
  }
}
.page-top .top-animals.is-child-field .top-animals__cloud01 img {
  animation: topAnimalsCloud01 4s 1.5s both;
}
.page-top .top-animals.is-child-field .top-animals__cloud02 img {
  animation: topAnimalsCloud02 4s 1.5s both;
}
.page-top .top-animals.is-child-field .top-animals__birds img {
  animation: fadein 0.7s 1.5s both;
}
.page-top .top-animals.is-child-sea .top-animals__penguin,
.page-top .top-animals.is-child-sea .top-animals__particle,
.page-top .top-animals.is-child-sea .top-animals__seal,
.page-top .top-animals.is-child-field .top-animals__penguin,
.page-top .top-animals.is-child-field .top-animals__particle,
.page-top .top-animals.is-child-field .top-animals__seal {
  opacity: 0;
  pointer-events: none;
}
.page-top .top-animals__penguin {
  position: absolute;
  left: 47.5%;
  bottom: 97.5%;
  z-index: 4;
  width: 7.104%;
  transform: scaleX(-1);
}
.page-top .top-animals__seal {
  position: absolute;
  right: 18.7%;
  bottom: 88%;
  z-index: 4;
  width: 16.224%;
}
.page-top .top-animals__particle {
  position: absolute;
  left: -56.5%;
  bottom: -7.5%;
  z-index: 2;
  width: 208.5%;
}
.page-top .top-animals.is-child-cold .top-animals__penguin,
.page-top .top-animals.is-child-cold .top-animals__seal {
  animation: bounceIn 0.4s 1s both;
}
.page-top .top-animals.is-child-cold .top-animals__seal {
  animation-delay: 1.25s;
}
@keyframes topAnimalsParticle {
  0% {
    opacity: 0;
    filter: blur(1rem);
    transform: translateY(-10%);
  }
  10% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-8%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.page-top .top-animals.is-child-cold .top-animals__particle img {
  animation: topAnimalsParticle 10s 1s linear both;
}
@media (min-width: 768px) {
  .page-top .top-wrapper {
    min-height: 60rem;
  }
  .page-top .top-scene-head {
    padding-top: calc(var(--headerHeight) + 8rem);
  }
  .page-top .top-scene-description {
    margin-top: 1.7rem;
  }
  .page-top .top-scene-link {
    margin-top: 2.2rem;
    width: 4.8rem;
  }
  .page-top .top-loading__logo {
    width: 43.8rem;
  }
  .page-top .top-loading__progress {
    margin-top: 10rem;
  }
  .page-top .top-about__motion-area {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .page-top .top-about__globe-wrap {
    width: 30rem;
  }
  .page-top .top-about__animal--red-panda {
    width: 9.064rem;
  }
  .page-top .top-about__animal--sea-otter {
    width: 8.446rem;
    right: -21.5%;
  }
  .page-top .top-about__animal--seal {
    width: 10.403rem;
    right: 0%;
    bottom: -4%;
  }
  .page-top .top-about__animal--dolphin {
    width: 12.154rem;
    left: -9%;
    bottom: -10%;
  }
  .page-top .top-about__animal--koala {
    width: 4.944rem;
    left: -17.5%;
  }
  .page-top .top-about__animal--penguin {
    width: 4.532rem;
    left: 5%;
    top: -12%;
    transform: rotate(-40deg);
  }
  .page-top .top-about__orbit--01 {
    width: 70rem;
  }
  .page-top .top-about__orbit--02 {
    width: 90rem;
  }
  .page-top .top-about__orbit--03 {
    width: 110rem;
  }
  .page-top .top-about__planet--01-01 {
    width: 5.238rem;
    top: 15.5%;
  }
  .page-top .top-about__planet--01-02 {
    width: 4.4rem;
  }
  .page-top .top-about__planet--01-03 {
    width: 2.4rem;
    left: 3.8%;
  }
  .page-top .top-about__planet--02-01 {
    width: 6.6rem;
  }
  .page-top .top-about__planet--02-02 {
    width: 7.2rem;
  }
  .page-top .top-about__planet--02-03 {
    width: 2.4rem;
    bottom: 2.4%;
  }
  .page-top .top-about__planet--02-04 {
    width: 4rem;
    left: 9.5%;
  }
  .page-top .top-about__planet--02-05 {
    width: 3.8rem;
  }
  .page-top .top-about__planet--02-06 {
    width: 8.4rem;
  }
  .page-top .top-about__planet--03-01 {
    width: 5.8rem;
  }
  .page-top .top-about__planet--03-02 {
    width: 4.1rem;
  }
  .page-top .top-about__planet--03-03 {
    width: 7.3rem;
  }
  .page-top .top-products__panels {
    grid-template-areas: "area01 area02 area03";
    grid-template-columns: 1fr 1fr 1fr;
  }
  .page-top .top-products__panels__kakikata__image {
    width: 72.864rem;
  }
  .page-top .top-products__panels__penguin {
    width: 10.4rem;
    right: 0;
  }
  .page-top .top-products__panels__can {
    top: var(--headerHeight);
    width: 100%;
    max-height: 100%;
  }
  .page-top .top-products__panels__can__image--01 {
    width: 45%;
  }
  .page-top .top-products__panels__can__image--02, .page-top .top-products__panels__can__image--03 {
    width: 46%;
  }
  .page-top .top-products__panels__dolphin {
    width: 10.4rem;
    left: 21%;
    top: 9%;
  }
  .page-top .top-products__panels__gift {
    width: 27.936rem;
    margin-left: 3rem;
    bottom: 4.5rem;
  }
  .page-top .top-products__panels__red-panda {
    width: 30.24%;
    left: 4%;
    top: -15.5%;
  }
  .page-top .top-products.is-on .top-products__panels__penguin {
    animation-name: topKakikataIllustPc;
    animation-delay: 2.3s;
  }
  .page-top .top-animals__main-area {
    max-height: 30rem;
    min-height: 22rem;
  }
  .page-top .top-animals__crescent-moon {
    width: 23.335%;
    right: calc(50% - 37.4rem);
    bottom: 144%;
  }
  .page-top .top-animals__dolphin {
    width: 22.7%;
  }
  .page-top .top-animals__sea-otter {
    bottom: 62.5%;
    right: 14.5%;
    width: 15.33%;
  }
  .page-top .top-animals__mountains {
    width: 71.5%;
  }
  .page-top .top-animals__red-panda {
    bottom: 84.5%;
    width: 18.2%;
  }
  .page-top .top-animals__koala {
    width: 9.34%;
    bottom: 47%;
    left: 21%;
  }
  .page-top .top-animals__leaf {
    transform: rotate(0deg);
    left: 7.7%;
    bottom: 43%;
    width: 16.1%;
  }
  .page-top .top-animals__tree {
    left: 51%;
    bottom: 69.8%;
    width: 72.7%;
  }
  .page-top .top-animals__moon {
    width: 26.668%;
    left: 90%;
    bottom: 120%;
  }
  .page-top .top-animals__birds {
    width: 6%;
  }
  .page-top .top-animals__cloud01 {
    width: 66.667%;
    bottom: 49%;
    left: -17%;
  }
  .page-top .top-animals__cloud02 {
    width: 50.834%;
    right: -9.5%;
    bottom: 103%;
  }
  .page-top .top-animals__penguin {
    width: 7.4%;
  }
  .page-top .top-animals__seal {
    width: 16.9%;
  }
  .page-top .top-animals__particle {
    width: 233.33%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -29.5%;
  }
  .page-top .top-products__panels__block--01 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .page-top .top-products__panels__block--02 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .page-top .top-products__panels__block--03 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}
@media (max-width: 767px) {
  .page-top .top-scene-head {
    padding-top: calc(var(--headerHeight) + 5rem);
    flex: none;
  }
  .page-top .top-scene-heading .m-primary-heading__en-text {
    font-size: 3.2rem;
  }
  .page-top .top-scene-heading .m-primary-heading__jp-text {
    font-size: 1.6rem;
  }
  .page-top .top-about {
    display: flex;
    flex-direction: column;
  }
  .page-top .top-about__motion-area {
    flex: 1 1;
    margin-bottom: var(--footerHeight);
  }
  .page-top .top-products__panels {
    grid-template-areas: "area01 area01" "area02 area03";
    grid-template-rows: 60% 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .page-top .top-products__panels__kakikata {
    margin: auto;
    height: calc(100% - 24rem);
    max-height: 23rem;
  }
  .page-top .top-products__panels__kakikata__image {
    height: 134%;
  }
  .page-top .top-products__panels__kakikata__image img {
    height: 100%;
    width: auto;
    max-width: initial;
  }
  .page-top .top-products__panels__gift {
    aspect-ratio: 312/410;
    height: 90%;
    max-height: 18.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .page-top .top-products__panels__gift img {
    width: 100%;
    height: 100%;
    max-width: initial;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center bottom;
       object-position: center bottom;
  }
  .page-top .top-products__panels__block--01 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .page-top .top-products__panels__block--02 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .page-top .top-products__panels__block--03 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
}
@media (min-width: 1024px) {
  .page-top .top-scene-head {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-top .top-about__motion-area {
    margin-top: 5.5rem;
  }
  .page-top .top-animals__crescent-moon {
    right: 0;
  }
}
@media (min-width: 768px) and (max-height: 699px) {
  .page-top .top-products .top-scene-description {
    display: none;
  }
}