@charset "UTF-8";


/*============================================================
  motion-image
============================================================*/
.motion-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.motion-image .picture {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.motion-image .picture {
  width: calc(100% + 1.6rem);
  animation: motion_image 12s linear infinite;
}

.motion-image .picture:nth-of-type(1) {
  z-index: 1;
}

.motion-image .picture:nth-of-type(2) {
  animation-delay: 6s;
  z-index: 0;
  opacity: 0;
}

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


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

  .a-link-card .picture {
    transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}


/*============================================================
  header
============================================================*/
#header-global .div-menu .div-online a {
  transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#header-global .button-menu .bar::before,
#header-global .button-menu .bar::after {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) and (orientation: portrait) {
  #header-global .nav-header.active {
    animation: header_menu_in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes header_menu_in {
  0% { transform: translateY(-0.8rem); }
  100% { transform: translateY(0); }
}


/*============================================================
  div-slider
============================================================*/
.div-slider .div-slider-content .ul-slider {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.div-slider .div-slider-content .ul-slider.return.prev {
  animation: slider_return_prev 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slider_return_prev {
  0% { right: 0; }
  50% { right: -0.64rem; }
  100% { right: 0; }
}

.div-slider .div-slider-content .ul-slider.return.next {
  animation: slider_return_next 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slider_return_next {
  0% { left: 0; }
  50% { left: -0.64rem; }
  100% { left: 0; }
}