width="600" height="450" @charset "utf-8";

/*===============================================================================================

    share 共通

=================================================================================================*/

/*--------------------スクロールでオブジェクトが動く-----------------------*/
.obj_in {
  opacity: 0;
  transition: 2s;
}
.obj_in.is-show {
  opacity: 1;
}
.obj_up {
  opacity: 0;
  transform: translate(0, 30%);
  transition: 1s;
}
.obj_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.obj_up1 {  opacity: 0;  transform: translate(0, 10%);  transition: 1s;}
.obj_up1.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_up2 {  opacity: 0;  transform: translate(0, 20%);  transition: 1s;}
.obj_up2.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_up3 {  opacity: 0;  transform: translate(0, 30%);  transition: 1s;}
.obj_up3.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_up4 {  opacity: 0;  transform: translate(0, 40%);  transition: 1s;}
.obj_up4.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_up5 {  opacity: 0;  transform: translate(0, 50%);  transition: 1s;}
.obj_up5.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_up6 {  opacity: 0;  transform: translate(0, 60%);  transition: 1s;}
.obj_up6.is-show {  transform: translate(0, 0);  opacity: 1;}

.obj_left {
  opacity: 0;
  transform: translate(-10%, 0);
  transition: 2s;
}
.obj_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.obj_left1 {  opacity: 0;  transform: translate(-10%, 0);  transition: 1s;}
.obj_left1.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_left2 {  opacity: 0;  transform: translate(-20%, 0);  transition: 1s;}
.obj_left2.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_left3 {  opacity: 0;  transform: translate(-30%, 0);  transition: 1s;}
.obj_left3.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_left4 {  opacity: 0;  transform: translate(-40%, 0);  transition: 1s;}
.obj_left4.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_left5 {  opacity: 0;  transform: translate(-50%, 0);  transition: 1s;}
.obj_left5.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_left6 {  opacity: 0;  transform: translate(-60%, 0);  transition: 1s;}
.obj_left6.is-show {  transform: translate(0, 0);  opacity: 1;}

.obj_right {
  opacity: 0;
  transform: translate(10%, 0);
  transition: 2s;
}
.obj_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.obj_right1 {  opacity: 0;  transform: translate(10%, 0);  transition: 1s;}
.obj_right1.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_right2 {  opacity: 0;  transform: translate(20%, 0);  transition: 1s;}
.obj_right2.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_right3 {  opacity: 0;  transform: translate(20%, 0);  transition: 1s;}
.obj_right3.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_right4 {  opacity: 0;  transform: translate(30%, 0);  transition: 1s;}
.obj_right4.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_right5 {  opacity: 0;  transform: translate(40%, 0);  transition: 1s;}
.obj_right5.is-show {  transform: translate(0, 0);  opacity: 1;}
.obj_right6 {  opacity: 0;  transform: translate(50%, 0);  transition: 1s;}
.obj_right6.is-show {  transform: translate(0, 0);  opacity: 1;}

.obj_zoom-21 {
      width: 100%;
      height: auto;
      animation: animationZoom1 1s ease-in-out forwards;
    }
    
.obj_zoom-21.is-show {
      width: 100%;
      height: auto;
      animation: animationZoom1 1s ease-in-out forwards;
    }
.obj_zoom {
    width: 240px;
      height: 240px;
      overflow: hidden;
      margin-bottom: 30px
    }

    @keyframes animationZoom1 {
      100% { transform:scale(1.4)} 
    }
    @keyframes animationZoom2 {
      50% { transform:scale(1.1)} 
    }
    @keyframes animationZoom3 {
      100% { transform:scale(1.1)} 
    }
     @media screen and (max-width:1024px){
        .obj_in {
          opacity: 0;
          transition: 2s;
        }
        .obj_in.is-show {
          opacity: 1;
        }
        .obj_up {
          opacity: 0;
          transform: translate(0, 0%);
          transition: 2s;
        }
        .obj_up.is-show {
          transform: translate(0, 0);
          opacity: 1;
        }
        .obj_left {
          opacity: 0;
          transform: translate(-0%, 0);
          transition: 2s;
        }
        .obj_left.is-show {
          transform: translate(0, 0);
          opacity: 1;
        }
        .obj_right {
          opacity: 0;
          transform: translate(0%, 0);
          transition: 2s;
        }
        .obj_right.is-show {
          transform: translate(0, 0);
          opacity: 1;
        }
    }

/*-------------------------------------------*/
/* どくどく */
.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/*-------------------------------------------*/
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.animation1{
  animation-duration: 1.0s;
}
.animation2{
  animation-duration: 0.5s;
}
.animation3{
  animation-duration: 1.0s;
}
.keyframe0{
  animation-name: anim_po;
  position: absolute;
}

@keyframes anim_po {
  0% {
    top: 0px;
  }
  100% {
    top: 20px;
  }
}

/*-------------------------------------------*/
.reflection-img{
    width       :600px;
    position    :relative;
    overflow    :hidden;
}

.reflection {
    height      :100%;
    width       :60px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}