@charset "UTF-8";
/* placeholder color */
/*---------------------------------------------
fadeIn
---------------------------------------------*/
.is-fadeIn {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 1.0s, transform 1.0s;
  transition-timing-function: ease-out; }

.is-fadeIn.is-scrollIn,
.is-scrollIn .is-fadeIn {
  opacity: 1;
  transform: translate(0, 0); }

/*---------------------------------------------
titleAnim
---------------------------------------------*/
.txtAnimeBar {
  position: relative;
  display: inline-block;
  transform: translate3d(0, 0, 0);
  z-index: 10; }

.txtAnimeBar + .txtAnimeBar {
  margin: 10px 0 0; }
  @media (max-width: 750px) {
    .txtAnimeBar + .txtAnimeBar {
      margin: 1.3vw 0 0; } }

.txtAnimeBar:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #0070C0; }

.is-scrollIn .txtAnimeBar:before {
  animation: txtAnimeBar 1.0s ease 0.5s 1 normal forwards; }

.is-scrollIn .txtAnimeTxt {
  animation: txtAnimeTxt 0s ease 1s 1 normal forwards; }

.txtAnimeTxt {
  opacity: 0;
  transform: translate3d(0, 0, 0); }

@-webkit-keyframes txtAnimeBar {
  0% {
    left: 0;
    right: auto;
    width: 0; }
  50% {
    left: 0;
    right: auto;
    width: 100%; }
  51% {
    left: auto;
    right: 0;
    width: 100%; }
  100% {
    left: auto;
    right: 0;
    width: 0; } }
@keyframes txtAnimeBar {
  0% {
    left: 0;
    width: 0; }
  50% {
    left: 0;
    width: 100%; }
  51% {
    left: 0;
    width: 100%; }
  100% {
    left: 100%;
    width: 0; } }
@-webkit-keyframes txtAnimeTxt {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes txtAnimeTxt {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*---------------------------------------------
imgAnim
---------------------------------------------*/
.animImgBar:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #0070C0; }

.is-scrollIn .animImgBar:before {
  animation: txtAnimeBar 1.0s ease 0.5s 1 normal forwards; }

.is-scrollIn .animImg {
  animation: txtAnimeTxt 0s ease 1s 1 normal forwards; }

.animImg {
  opacity: 0;
  transform: translate3d(0, 0, 0); }

/*---------------------------------------------
menu animation
---------------------------------------------*/
@-webkit-keyframes menufadeIn {
  0% {
    opacity: 0;
    transform: translateX(-2.6vw); }
  100% {
    opacity: 1;
    transform: translateX(0%); } }
@keyframes menufadeIn {
  0% {
    opacity: 0;
    transform: translateX(-2.6vw); }
  100% {
    opacity: 1;
    transform: translateX(0%); } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(2.6vw); }
  100% {
    opacity: 1;
    transform: translateX(0%); } }
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(2.6vw); }
  100% {
    opacity: 1;
    transform: translateX(0%); } }
/**********************************************************************************************

　TOP

**********************************************************************************************/
/**********************************************************************************************

　detail

**********************************************************************************************/
.page_main.is-fadeIn {
  transition-delay: 1s; }