@charset "UTF-8";

@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade_out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scale_up {
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes scale_down {
  0% { transform: scale(1); }
  100% { transform: scale(0.96); }
}

@keyframes slide_in {
  0% { transform: translateX(-8%); }
  100% { transform: translateX(0); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes clip_in {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes trace_in {
  0% { transform: translateX(-101%); }
  40%, 60% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@keyframes blur_in {
  0% { filter: blur(1.6rem); }
  100% { filter: blur(0); }
}


/*============================================================
  motion
============================================================*/
.motion-in-fade {
  opacity: 0;
}

.motion-in-fade.active {
  animation: fade_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.motion-in-fade-clip {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.motion-in-fade-clip.active {
  animation: fade_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both, clip_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

span.motion-in-fade-clip {
  display: inline-block;
}

.delay.active {
  animation-delay: 0.4s;
}


/*============================================================
  hover
============================================================*/
@media (hover: hover) {
  .a-button,
  .a-button-contact,
  .a-button-prev,
  .a-button-next,
  .a-text .icon,
  .input-submit,
  .input-reset,
  .page-numbers {
    transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}


/*============================================================
  html
============================================================*/
html {
  opacity: 0;
}

html.active {
  animation: fade_in 1.6s cubic-bezier(0.45, 0, 0.55, 1) both;
}


/*============================================================
  header
============================================================*/
#header-global.floating {
  animation: header_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  @keyframes header_in {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1;}
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  @keyframes header_in {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
}


/*============================================================
  motion-image
============================================================*/
#business .section-subsection .ul-business .div-column-business .motion-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

#business .section-subsection .ul-business .div-column-business .motion-image .picture {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: calc(100% + 1.6rem);
  opacity: 0;
}

#business .section-subsection .ul-business .div-column-business.active .motion-image .picture {
  animation: motion_image 12s linear infinite;
}

#business .section-subsection .ul-business .div-column-business .motion-image .picture:nth-of-type(1) {
  z-index: 1;
}

#business .section-subsection .ul-business .div-column-business .motion-image .picture:nth-of-type(2) {
  animation-delay: 6s;
}

@keyframes motion_image {
  0% { opacity: 0; transform: translateX(0); }
  10%, 50% { opacity: 1; }
  60%, 100% { opacity: 0; transform: translateX(-1.6rem); }
}