@charset "utf-8";
/*==============================================================================================

    asset css

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

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

    animation(scroll)

    ***sample***
    ※.scrollanimの高さの半分以上がwindowに写り込んだ時アニメーション
    <div class="scrollanim anim_b-slide0">アニメ</div>

    ※.animtrigger_wrapの高さの半分以上がwindowに写り込んだ時、triggeranimがアニメーション
    <div class="animtrigger_wrap">
        <div class="triggeranim anim_b-slide0">アニメ</div>
    </div>

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

/*下からスライド*/

.anim_b-slide0 {
  opacity: 0;
  -ms-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: transform 1s ease, opacity 1s ease;
  -webkit-transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_b-slide1 {
  opacity: 0;
  -ms-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: transform 1s ease .2s, opacity 1s ease .2s;
  -webkit-transition: transform 1s ease .2s, opacity 1s ease .2s;
  transition: transform 1s ease .2s, opacity 1s ease .2s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_b-slide2 {
  opacity: 0;
  -ms-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: transform 1s ease .4s, opacity 1s ease .4s;
  -webkit-transition: transform 1s ease .4s, opacity 1s ease .4s;
  transition: transform 1s ease .4s, opacity 1s ease .4s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_b-slide3 {
  opacity: 0;
  -ms-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: transform 1s ease .6s, opacity 1s ease .6s;
  -webkit-transition: transform 1s ease .6s, opacity 1s ease .6s;
  transition: transform 1s ease .6s, opacity 1s ease .6s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_b-slide4 {
  opacity: 0;
  -ms-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: transform 1s ease .8s, opacity 1s ease .8s;
  -webkit-transition: transform 1s ease .8s, opacity 1s ease .8s;
  transition: transform 1s ease .8s, opacity 1s ease .8s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*右からスライド*/

.anim_r-slide0 {
  opacity: 0;
  -ms-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -moz-transition: transform 1s ease, opacity 1s ease;
  -webkit-transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_r-slide1 {
  opacity: 0;
  -ms-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -moz-transition: transform 1s ease .2s, opacity 1s ease .2s;
  -webkit-transition: transform 1s ease .2s, opacity 1s ease .2s;
  transition: transform 1s ease .2s, opacity 1s ease .2s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_r-slide2 {
  opacity: 0;
  -ms-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -moz-transition: transform 1s ease .4s, opacity 1s ease .4s;
  -webkit-transition: transform 1s ease .4s, opacity 1s ease .4s;
  transition: transform 1s ease .4s, opacity 1s ease .4s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_r-slide3 {
  opacity: 0;
  -ms-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -moz-transition: transform 1s ease .6s, opacity 1s ease .6s;
  -webkit-transition: transform 1s ease .6s, opacity 1s ease .6s;
  transition: transform 1s ease .6s, opacity 1s ease .6s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_r-slide4 {
  opacity: 0;
  -ms-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -moz-transition: transform 1s ease .8s, opacity 1s ease .8s;
  -webkit-transition: transform 1s ease .8s, opacity 1s ease .8s;
  transition: transform 1s ease .8s, opacity 1s ease .8s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*左からスライド*/

.anim_l-slide0 {
  opacity: 0;
  -ms-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -moz-transition: transform 1s ease, opacity 1s ease;
  -webkit-transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_l-slide1 {
  opacity: 0;
  -ms-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -moz-transition: transform 1s ease .2s, opacity 1s ease .2s;
  -webkit-transition: transform 1s ease .2s, opacity 1s ease .2s;
  transition: transform 1s ease .2s, opacity 1s ease .2s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_l-slide2 {
  opacity: 0;
  -ms-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -moz-transition: transform 1s ease .4s, opacity 1s ease .4s;
  -webkit-transition: transform 1s ease .4s, opacity 1s ease .4s;
  transition: transform 1s ease .4s, opacity 1s ease .4s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_l-slide3 {
  opacity: 0;
  -ms-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -moz-transition: transform 1s ease .6s, opacity 1s ease .6s;
  -webkit-transition: transform 1s ease .6s, opacity 1s ease .6s;
  transition: transform 1s ease .6s, opacity 1s ease .6s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_l-slide4 {
  opacity: 0;
  -ms-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -moz-transition: transform 1s ease .8s, opacity 1s ease .8s;
  -webkit-transition: transform 1s ease .8s, opacity 1s ease .8s;
  transition: transform 1s ease .8s, opacity 1s ease .8s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*ただのフェードイン*/

.anim_fadein0 {
  opacity: 0;
  -moz-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_fadein1 {
  opacity: 0;
  -moz-transition: opacity 1s ease .2s;
  -webkit-transition: opacity 1s ease .2s;
  transition: opacity 1s ease .2s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_fadein2 {
  opacity: 0;
  -moz-transition: opacity 1s ease .4s;
  -webkit-transition: opacity 1s ease .4s;
  transition: opacity 1s ease .4s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_fadein3 {
  opacity: 0;
  -moz-transition: opacity 1s ease .6s;
  -webkit-transition: opacity 1s ease .6s;
  transition: opacity 1s ease .6s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_fadein4 {
  opacity: 0;
  -moz-transition: opacity 1s ease .8s;
  -webkit-transition: opacity 1s ease .8s;
  transition: opacity 1s ease .8s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*scale*/

.anim_scale0 {
  opacity: 0;
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  -moz-transition: transform 1s ease, opacity 1s ease;
  -webkit-transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_scale1 {
  opacity: 0;
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  -moz-transition: transform 1s ease .2s, opacity 1s ease .2s;
  -webkit-transition: transform 1s ease .2s, opacity 1s ease .2s;
  transition: transform 1s ease .2s, opacity 1s ease .2s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_scale2 {
  opacity: 0;
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  -moz-transition: transform 1s ease .4s, opacity 1s ease .4s;
  -webkit-transition: transform 1s ease .4s, opacity 1s ease .4s;
  transition: transform 1s ease .4s, opacity 1s ease .4s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_scale3 {
  opacity: 0;
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  -moz-transition: transform 1s ease .6s, opacity 1s ease .6s;
  -webkit-transition: transform 1s ease .6s, opacity 1s ease .6s;
  transition: transform 1s ease .6s, opacity 1s ease .6s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.anim_scale4 {
  opacity: 0;
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  -moz-transition: transform 1s ease .8s, opacity 1s ease .8s;
  -webkit-transition: transform 1s ease .8s, opacity 1s ease .8s;
  transition: transform 1s ease .8s, opacity 1s ease .8s;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*アニメの再生*/

.animplay,
.animplay .triggeranim {
  opacity: 1;
  -ms-transform: translate(0, 0) scale(1);
  -moz-transform: translate(0, 0) scale(1);
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
}


.anim_origin_center {
  -ms-transform-origin: center center;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  transform-origin: center center;
}

.anim_origin_tl {
  -ms-transform-origin: top left;
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  transform-origin: top left;
}

.anim_origin_tr {
  -ms-transform-origin: top right;
  -moz-transform-origin: top right;
  -webkit-transform-origin: top right;
  transform-origin: top right;
  transform-origin: top right;
}

.anim_origin_bl {
  -ms-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  transform-origin: bottom left;
}

.anim_origin_br {
  -ms-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  transform-origin: bottom right;
}

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

    liquid flex

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

.liqflex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}