@charset "UTF-8";

/*--------------------------------------------------------
// アニメーション
--------------------------------------------------------*/


{
  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
       -o-transition: all 0.5s;
          transition: all 0.5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}




/***************
* fadeInLeft2 *
****************/
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
       -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
       -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
  }
}

.fadeInLeft2 {
  opacity: 0;
}
.fadeInLeft2.go {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;
}


/***************
* fadeInRight2 *
****************/

@-webkit-keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
       -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
       -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
  }
}

.fadeInRight2 {
  opacity: 0;
}
.fadeInRight2.go {
  -webkit-animation-name: fadeInRight2;
  animation-name: fadeInRight2;
}


@-webkit-keyframes menu-bar01 {
  0% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
       -moz-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
         -o-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
       -moz-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
         -o-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
}
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
       -moz-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
         -o-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-20px) rotate(0);
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 100%;
    -webkit-transform: translateY(-100%) rotate(0);
       -moz-transform: translateY(-100%) rotate(0);
        -ms-transform: translateY(-100%) rotate(0);
         -o-transform: translateY(-100%) rotate(0);
            transform: translateY(-100%) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
       -moz-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
         -o-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 100%;
    -webkit-transform: translateY(-100%) rotate(0);
       -moz-transform: translateY(-100%) rotate(0);
        -ms-transform: translateY(-100%) rotate(0);
         -o-transform: translateY(-100%) rotate(0);
            transform: translateY(-100%) rotate(0);
  }
}
@-webkit-keyframes active-menu-bar01 {
  0% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
       -moz-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
         -o-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
}
@keyframes active-menu-bar01 {
  0% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
       -moz-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
         -o-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
}
@-webkit-keyframes active-menu-bar03 {
  0% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
       -moz-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
         -o-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
}
@keyframes active-menu-bar03 {
  0% {
    top: 0%;
    -webkit-transform: translateY(0) rotate(0);
       -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
         -o-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
       -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
         -o-transform: translateY(-50%) rotate(0);
            transform: translateY(-50%) rotate(0);
  }
  100% {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
       -moz-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
         -o-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
}






.smooth{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.move_0-1s{
  -webkit-transition: all 0.1s;
     -moz-transition: all 0.1s;
      -ms-transition: all 0.1s;
       -o-transition: all 0.1s;
          transition: all 0.1s;
}
.move_0-2s{
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
}
.move_0-3s{
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;
}
.move_0-4s{
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;
}
.move_0-5s{
  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
       -o-transition: all 0.5s;
          transition: all 0.5s;
}
.move_1s{
  -webkit-transition: all 1s;
     -moz-transition: all 1s;
      -ms-transition: all 1s;
       -o-transition: all 1s;
          transition: all 1s;
}
.move_1-5s{
  -webkit-transition: all 1.5s;
     -moz-transition: all 1.5s;
      -ms-transition: all 1.5s;
       -o-transition: all 1.5s;
          transition: all 1.5s;
}


.delay01{
  -webkit-animation-delay: 0.1s;
     -moz-animation-delay: 0.1s;
      -ms-animation-delay: 0.1s;
       -o-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.delay01-5{
  -webkit-animation-delay: 0.15s;
     -moz-animation-delay: 0.15s;
      -ms-animation-delay: 0.15s;
       -o-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
.delay02{
  -webkit-animation-delay: 0.2s;
     -moz-animation-delay: 0.2s;
      -ms-animation-delay: 0.2s;
       -o-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.delay02-5{
  -webkit-animation-delay: 0.25s;
     -moz-animation-delay: 0.25s;
      -ms-animation-delay: 0.25s;
       -o-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.delay03{
  -webkit-animation-delay: 0.3s;
     -moz-animation-delay: 0.3s;
      -ms-animation-delay: 0.3s;
       -o-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.delay03-5{
  -webkit-animation-delay: 0.35s;
     -moz-animation-delay: 0.35s;
      -ms-animation-delay: 0.35s;
       -o-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.delay04{
  -webkit-animation-delay: 0.4s;
     -moz-animation-delay: 0.4s;
      -ms-animation-delay: 0.4s;
       -o-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.delay04-5{
  -webkit-animation-delay: 0.45s;
     -moz-animation-delay: 0.45s;
      -ms-animation-delay: 0.45s;
       -o-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
.delay05{
  -webkit-animation-delay: 0.5s;
     -moz-animation-delay: 0.5s;
      -ms-animation-delay: 0.5s;
       -o-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.delay06{
  -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
      -ms-animation-delay: 0.6s;
       -o-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.delay07{
  -webkit-animation-delay: 0.7s;
     -moz-animation-delay: 0.7s;
      -ms-animation-delay: 0.7s;
       -o-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.delay08{
  -webkit-animation-delay: 0.8s;
     -moz-animation-delay: 0.8s;
      -ms-animation-delay: 0.8s;
       -o-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.delay09{
  -webkit-animation-delay: 0.9s;
     -moz-animation-delay: 0.9s;
      -ms-animation-delay: 0.9s;
       -o-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.delay10{
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
      -ms-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
}

.duration0-1 {
  -webkit-animation-duration: 0.1s !important;
  animation-duration: 0.1s !important;
}
.duration0-2 {
  -webkit-animation-duration: 0.2s !important;
  animation-duration: 0.2s !important;
}
.duration0-3 {
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}
.duration0-4 {
  -webkit-animation-duration: 0.4s !important;
  animation-duration: 0.4s !important;
}
.duration0-5 {
  -webkit-animation-duration: 0.5s !important;
  animation-duration: 0.5s !important;
}
.duration0-6 {
  -webkit-animation-duration: 0.6s !important;
  animation-duration: 0.6s !important;
}
.duration0-7 {
  -webkit-animation-duration: 0.7s !important;
  animation-duration: 0.7s !important;
}
.duration0-8 {
  -webkit-animation-duration: 0.8s !important;
  animation-duration: 0.8s !important;
}
.duration0-9 {
  -webkit-animation-duration: 0.9s !important;
  animation-duration: 0.9s !important;
}
.duration1-0 {
  -webkit-animation-duration: 1s !important;
  animation-duration: 1s !important;
}
.duration1-1 {
  -webkit-animation-duration: 1.1s !important;
  animation-duration: 1.1s !important;
}
.duration1-2 {
  -webkit-animation-duration: 1.2s !important;
  animation-duration: 1.2s !important;
}
.duration1-3 {
  -webkit-animation-duration: 1.3s !important;
  animation-duration: 1.3s !important;
}
.duration1-4 {
  -webkit-animation-duration: 1.4s !important;
  animation-duration: 1.4s !important;
}
.duration1-5 {
  -webkit-animation-duration: 1.5s !important;
  animation-duration: 1.5s !important;
}


.animated.load-5s{
  -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.animated.load1s{
  -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.animated.load1-5s{
  -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.animated.load2s{
  -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animated.load2-5s{
  -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}
.animated.load3s{
  -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
.animated.load3-5s{
  -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}
.animated.load4s{
  -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
.animated.load4-5s{
  -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s;
}


.op_h1:hover img{
  opacity: 1;
}
.op_h09:hover img{
  opacity: 0.9;
}
.op_h08:hover img{
  opacity: 0.8;
}
.op_h07:hover img{
  opacity: 0.7;
}
.op_h06:hover img{
  opacity: 0.6;
}
.op_h05:hover img{
  opacity: 0.5;
}
.op_h04:hover img{
  opacity: 0.4;
}
.op_h03:hover img{
  opacity: 0.3;
}
.op_h02:hover img{
  opacity: 0.2;
}
.op_h01:hover img{
  opacity: 0.1;
}
.op_h0:hover img{
  opacity: 0;
}