@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 {
  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: scale(1.04); }
  6%, 50% { opacity: 1; }
  56%, 100% { opacity: 0; transform: scale(1); }
}


/*============================================================
  button
============================================================*/
@media (hover: hover) {
  .a-button {
    transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.button-accordion::before,
.button-accordion::after {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/*============================================================
  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; }
  }
}

#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); }
}