@charset "utf-8";
/* CSS Document */

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

animation

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

.lpbox .fv-bubble ,
#lpbox .everyday-bubble {
  -webkit-animation-name: bubble;
  -moz-animation-name: bubble;
  -o-animation-name: bubble;
  animation-name: bubble;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
#lpbox .mikata-img-item ,
#lpbox .mikata-img-01 ,
#lpbox .mikata-img-02 ,
#lpbox .mikata-img-03 {
  -webkit-animation-name: bubble;
  -moz-animation-name: bubble;
  -o-animation-name: bubble;
  animation-name: bubble;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



.lpbox .fv-bubble-02 ,.lpbox .fv-bubble-02 picture,
#lpbox .everyday-bubble-02 ,#lpbox .everyday-bubble-02 picture ,
#lpbox .mikata-img-01 , #lpbox .mikata-img-01 picture {
  -webkit-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.lpbox .fv-bubble-03 ,.lpbox .fv-bubble-03 picture,
#lpbox .everyday-bubble-03 ,#lpbox .everyday-bubble-03 picture,
#lpbox .mikata-img-02 , #lpbox .mikata-img-02 picture{
  -webkit-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
}
.lpbox .fv-bubble-04 ,.lpbox .fv-bubble-04 picture,
#lpbox .everyday-bubble-04 ,#lpbox .everyday-bubble-04 picture,
#lpbox .mikata-img-03 , #lpbox .mikata-img-03 picture{
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.lpbox .fv-bubble-05 ,.lpbox .fv-bubble-05 picture{
  -webkit-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;
}

.lpbox .fv-bubble picture ,
#lpbox .everyday-bubble picture {
  display: block;
  -webkit-animation-name: bright;
  -moz-animation-name: bright;
  -o-animation-name: bright;
  animation-name: bright;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
#lpbox .mikata-img-01 picture,
#lpbox .mikata-img-02 picture,
#lpbox .mikata-img-03 picture {
  display: block;
  -webkit-animation-name: bright;
  -moz-animation-name: bright;
  -o-animation-name: bright;
  animation-name: bright;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

}


@-webkit-keyframes bubble {
  from,0%{
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    -webkit-transform: translate3d(0,-4%,0);
    -ms-transform: translate3d(0,-4%,0);
    -o-transform: translate3d(0,-4%,0);
    transform: translate3d(0,-4%,0);
  }
  to,100%{
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes bubble {
  from,0%{
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    -webkit-transform: translate3d(0,-4%,0);
    -ms-transform: translate3d(0,-4%,0);
    -o-transform: translate3d(0,-4%,0);
    transform: translate3d(0,-4%,0);
  }
  to,100%{
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes bright {
  from,0%{
    -webkit-filter: brightness(100%);
    -o-filter: brightness(100%);
    filter: brightness(100%);
  }
  50%{
    -webkit-filter: brightness(115%);
    -o-filter: brightness(115%);
    filter: brightness(115%);
  }
  to,100%{
    -webkit-filter: brightness(100%);
    -o-filter: brightness(100%);
    filter: brightness(100%);
  }
}
@keyframes bright {
  from,0%{
    -webkit-filter: brightness(100%);
    -o-filter: brightness(100%);
    filter: brightness(100%);
  }
  50%{
    -webkit-filter: brightness(115%);
    -o-filter: brightness(115%);
    filter: brightness(115%);
  }
  to,100%{
    -webkit-filter: brightness(100%);
    -o-filter: brightness(100%);
    filter: brightness(100%);
  }
}

/* expand -------------------*/
#lpbox .expand {
  display: block;
  -webkit-animation-name: expand;
  -moz-animation-name: expand;
  -o-animation-name: expand;
  animation-name: expand;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes expand {
  from,0%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(1.12);
    -ms-transform: scale(1.12);
    -o-transform: scale(1.12);
    transform: scale(1.12);
  }
  to,100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes expand {
  from,0%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(1.12);
    -ms-transform: scale(1.12);
    -o-transform: scale(1.12);
    transform: scale(1.12);
  }
  to,100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}