@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInY {
  0% {
    opacity: 0;
    transform: translate(0, 80px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/*============================================================
  motion
============================================================*/
.motion-in {
  opacity: 0;
}
.motion-in.active {
  animation: fadeIn 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}
.charm-features .motion-in.active {
  animation: fadeInY 1.2s cubic-bezier(0.26, 0.62, 0.36, 1) 0s both;
}
.motion-in.active.charm-hero__logo__text {
  animation-delay: 1s;
}
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  .motion-in.active.dly-1 {
    animation-delay: 0s;
  }
  .motion-in.active.dly-2 {
    animation-delay: 0.5s;
  }
  .motion-in.active.dly-3 {
    animation-delay: 1s;
  }
  .motion-in.active.dly-4 {
    animation-delay: 1.5s;
  }
  .motion-in.active.dly-5 {
    animation-delay: 2s;
  }
  .motion-in.active.dly-6 {
    animation-delay: 2.5s;
  }
  .motion-in.active.dly-7 {
    animation-delay: 3s;
  }
  .motion-in.active.dly-8 {
    animation-delay: 3.5s;
  }
}

.motion-in.features__box__detail .features__box__detail__catch::before, .motion-in.features__box__detail .features__box__detail__catch::after {
  width: 0;
}
.motion-in.features__box__detail.active .features__box__detail__catch::before {
  animation: catchline 1.5s cubic-bezier(0.83, 0, 0.17, 1) 1s both;
  width: 100%;
}
.motion-in.features__box__detail.active .features__box__detail__catch::after {
  animation: catchline2 1s cubic-bezier(0.83, 0, 0.17, 1) 1s both;
  width: 106px;
}

@keyframes catchline {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes catchline2 {
  0% {
    width: 0;
  }
  100% {
    width: 106px;
  }
}
.typefade .module-slider-content > li {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.6s ease;
}
.typefade .module-slider-content > li.is-active {
  opacity: 1;
  z-index: 2;
}
.typefade.no-transition .module-slider-content > li {
  transition: none !important;
}

.dec_img[data-parallax] figure {
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

.ddp[data-parallax] .change_img,
.ddp[data-parallax] .videoWrap {
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

.button-reservation {
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.button-reservation.active {
  opacity: 1;
  pointer-events: auto;
}

/*============================================================
  :hover
============================================================*/
@media (hover: hover) {
  .button-next,
  .button-prev {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .button-accordion {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-footer .division-charm-footer-1 .ul-menu > li > a {
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-footer .division-charm-footer-1 .ul-sns > li > a {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-index .division-charm-index-2 .division-charm-index-2-2 .ul-menu > li > a {
    transition: border 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-halls .division-charm-halls-2 .ul-menu > li > a {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
/*============================================================
  CONTENTS
============================================================*/
@keyframes header_in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
#charm-header.floating {
  animation: header_in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#charm-header .input-menu .button-menu .icon-menu::before, #charm-header .input-menu .button-menu .icon-menu::after {
  transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
#charm-header .input-menu .button-menu .icon-menu .bar {
  transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes scroll {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
.charm-hero__movie::after {
  transition: background-color 1s;
  background-color: rgba(0, 0, 0, 0);
}
.charm-hero__movie.moved::after {
  background-color: rgba(0, 0, 0, 0.5);
}
.charm-hero__scroll span::after {
  animation: scroll 1.8s linear 0.4s infinite;
}
.charm-hero__scroll.moved {
  animation: fadeOut 0.4s cubic-bezier(0.26, 0.62, 0.36, 1) 0s both;
}

@keyframes fade3 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  43% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade4 {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.change_img {
  position: relative;
  background-color: #FFF;
}
.change_img picture {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.change_img.is-3 picture {
  animation: fade3 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.change_img.is-3 picture:nth-child(1) {
  animation-delay: 0s;
}
.change_img.is-3 picture:nth-child(2) {
  animation-delay: 4s;
}
.change_img.is-3 picture:nth-child(3) {
  animation-delay: 8s;
}
.change_img.is-4 picture {
  animation: fade4 16s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.change_img.is-4 picture:nth-child(1) {
  animation-delay: 0s;
}
.change_img.is-4 picture:nth-child(2) {
  animation-delay: 4s;
}
.change_img.is-4 picture:nth-child(3) {
  animation-delay: 8s;
}
.change_img.is-4 picture:nth-child(4) {
  animation-delay: 12s;
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.photoScrollWrap {
  display: flex;
  overflow: hidden;
}
.photoScrollWrap .photoScrollList {
  display: flex;
}
.photoScrollWrap .photoScrollList.scrollLeft {
  animation: scrollLeft 60s infinite linear 0.5s both;
}
.photoScrollWrap .photoScrollList li {
  width: 20vw;
  padding: 0 10px;
}
@media (max-width: 768px) and (orientation: portrait) {
  .photoScrollWrap .photoScrollList li {
    width: 55.5555555556vw;
    padding: 0 1.7vw;
  }
}
.photoScrollWrap .photoScrollList li img {
  width: 100%;
  height: auto;
}