@charset "UTF-8";


/*============================================================
  a, button
============================================================*/
@media (hover: hover) {
  .a-content,
  .a-topic,
  .a-column {
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .a-button,
  .a-button-access,
  .a-button-pagetop,
  .button-accordion {
    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;
}

@keyframes header_in {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1;}
}

#header-global::after {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

  #header-global.floating.active .div-contact {
    animation: header_menu_in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

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


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

@keyframes floating_in {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1;}
}


/*============================================================
  head
============================================================*/
#head .div-image .figure-image {
  opacity: 0;
}

html.active #head .div-image .figure-image {
  opacity: 1;
}

html.active #head .div-image .figure-image .picture {
  animation: head_picture_in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

html.active #head .div-image .figure-image::after {
  animation: head_leaf_in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

html.active #head .div-image .figure-image .picture img {
  width: 102%;
  margin-top: -1%;
  animation: head_img_motion 15s linear infinite;
}

html.active #head .div-image .figure-image .picture img:nth-of-type(2) {
  animation-delay: 5s;
}

html.active #head .div-image .figure-image .picture img:nth-of-type(3) {
  animation-delay: 10s;
}

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

@keyframes head_leaf_in {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes head_img_motion {
  0% { opacity: 0; transform: translateX(0); }
  3%, 33% { opacity: 1; }
  36%, 100% { opacity: 0; transform: translateX(-2%); }
}