@charset "UTF-8";


@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide_in_lv1 {
  0% { transform: translateY(0.7vw); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv2 {
  0% { transform: translateY(1.4vw); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv3 {
  0% { transform: translateY(2.1vw); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv4 {
  0% { transform: translateY(2.8vw); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv5 {
  0% { transform: translateY(3.5vw); }
  100% { transform: translateY(0); }
}


@keyframes slide_in_lv1_ie {
  0% { transform: translateY(1rem); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv2_ie {
  0% { transform: translateY(2rem); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv3_ie {
  0% { transform: translateY(3rem); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv4_ie {
  0% { transform: translateY(4rem); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_lv5_ie {
  0% { transform: translateY(5rem); }
  100% { transform: translateY(0); }
}


@keyframes scale_in_lv1 {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes scale_in_lv2 {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes scale_in_lv3 {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

@keyframes scale_in_lv4 {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

@keyframes scale_in_lv5 {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}



/*============================================================
  block
============================================================*/
/*  title
------------------------------------------------*/
.block-title .cap-title {
  opacity: 0;
}

#footer .cap-title {
  opacity: 1;
}

.block-title.active .cap-title {
  opacity: 1;
  -webkit-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: slide_in_lv1;
     -moz-animation-name: slide_in_lv1;
      -ms-animation-name: slide_in_lv1;
       -o-animation-name: slide_in_lv1;
          animation-name: slide_in_lv1;
}

html.ie .block-title.active .cap-title {
  -webkit-animation-name: slide_in_lv1_ie;
     -moz-animation-name: slide_in_lv1_ie;
      -ms-animation-name: slide_in_lv1_ie;
       -o-animation-name: slide_in_lv1_ie;
          animation-name: slide_in_lv1_ie;
}

.block-title .txt-title {
  opacity: 0;
}

#produce .block-title .txt-title,
#footer .block-title .txt-title {
  opacity: 1;
}

.block-title.active .txt-title {
  -webkit-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv2, fade_in;
     -moz-animation-name: scale_in_lv2, fade_in;
      -ms-animation-name: scale_in_lv2, fade_in;
       -o-animation-name: scale_in_lv2, fade_in;
          animation-name: scale_in_lv2, fade_in;
}

#produce .block-title.active .txt-title {
  -webkit-animation: none;
     -moz-animation: none;
      -ms-animation: none;
       -o-animation: none;
          animation: none;
}

.block-title .pic-animal {
  opacity: 0;
  -webkit-transform-origin: bottom center;
     -moz-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
       -o-transform-origin: bottom center;
          transform-origin: bottom center;
}

.block-title.active .pic-animal {
  -webkit-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv5, fade_in;
     -moz-animation-name: scale_in_lv5, fade_in;
      -ms-animation-name: scale_in_lv5, fade_in;
       -o-animation-name: scale_in_lv5, fade_in;
          animation-name: scale_in_lv5, fade_in;
}


/*  catch
------------------------------------------------*/
.block-catch {
  opacity: 0;
}

.block-catch.active {
  -webkit-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
     -moz-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
       -o-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-animation-name: slide_in_lv1, fade_in;
     -moz-animation-name: slide_in_lv1, fade_in;
      -ms-animation-name: slide_in_lv1, fade_in;
       -o-animation-name: slide_in_lv1, fade_in;
          animation-name: slide_in_lv1, fade_in;
}

html.ie .block-catch.active {
  -webkit-animation-name: slide_in_lv1_ie, fade_in;
     -moz-animation-name: slide_in_lv1_ie, fade_in;
      -ms-animation-name: slide_in_lv1_ie, fade_in;
       -o-animation-name: slide_in_lv1_ie, fade_in;
          animation-name: slide_in_lv1_ie, fade_in;
}



/*============================================================
  header
============================================================*/
#header .logo-sukusukuball {
  -webkit-transform: translate(-100%, -100%);
     -moz-transform: translate(-100%, -100%);
      -ms-transform: translate(-100%, -100%);
       -o-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}

@keyframes slide_in_logo {
  0% { transform: translate(-100%, -100%); }
  100% { transform: translate(0, 0); }
}

#header.active .logo-sukusukuball {
  -webkit-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
     -moz-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
      -ms-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
       -o-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
          animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
  -webkit-animation-name: slide_in_logo;
     -moz-animation-name: slide_in_logo;
      -ms-animation-name: slide_in_logo;
       -o-animation-name: slide_in_logo;
          animation-name: slide_in_logo;
}

#header .nav-header {
  opacity: 0;
  -webkit-transform: translateY(calc(-100% - 2.1vw));
     -moz-transform: translateY(calc(-100% - 2.1vw));
      -ms-transform: translateY(calc(-100% - 2.1vw));
       -o-transform: translateY(calc(-100% - 2.1vw));
          transform: translateY(calc(-100% - 2.1vw));
}

@keyframes slide_in_nav {
  0% { transform: translateY(calc(-100% - 2.1vw)); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_nav_p {
  0% { transform: translateY(calc(-100% - 4vw)); }
  100% { transform: translateY(0); }
}

@keyframes slide_in_nav_ie {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

#header.active .nav-header {
  opacity: 1;
  -webkit-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
     -moz-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
      -ms-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
       -o-animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
          animation: 0.4s cubic-bezier(1, 0, 0, 1) both;
  -webkit-animation-name: slide_in_nav;
     -moz-animation-name: slide_in_nav;
      -ms-animation-name: slide_in_nav;
       -o-animation-name: slide_in_nav;
          animation-name: slide_in_nav;
}

html.ie #header.active .nav-header {
  -webkit-animation-name: slide_in_nav_ie, fade_in;
     -moz-animation-name: slide_in_nav_ie, fade_in;
      -ms-animation-name: slide_in_nav_ie, fade_in;
       -o-animation-name: slide_in_nav_ie, fade_in;
          animation-name: slide_in_nav_ie, fade_in;
}

@media (max-width: 768px) and (orientation: portrait) {
  #header.active .nav-header {
    -webkit-animation-name: slide_in_nav_p;
       -moz-animation-name: slide_in_nav_p;
        -ms-animation-name: slide_in_nav_p;
         -o-animation-name: slide_in_nav_p;
            animation-name: slide_in_nav_p;
  }
}



/*  btn shopping
------------------------------------------------*/
#header .btn-shopping .block-ball {
  opacity: 0;
}

#header.active .btn-shopping .block-ball {
  opacity: 1;
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv5;
     -moz-animation-name: scale_in_lv5;
      -ms-animation-name: scale_in_lv5;
       -o-animation-name: scale_in_lv5;
          animation-name: scale_in_lv5;
}

#header .btn-shopping .block-animal {
  opacity: 0;
}

#header.active .btn-shopping .block-animal {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
  -webkit-animation-name: scale_in_lv5, slide_in_lv2, fade_in;
     -moz-animation-name: scale_in_lv5, slide_in_lv2, fade_in;
      -ms-animation-name: scale_in_lv5, slide_in_lv2, fade_in;
       -o-animation-name: scale_in_lv5, slide_in_lv2, fade_in;
          animation-name: scale_in_lv5, slide_in_lv2, fade_in;
}

html.ie #header.active .btn-shopping .block-animal {
  -webkit-animation-name: scale_in_lv5, slide_in_lv2_ie, fade_in;
     -moz-animation-name: scale_in_lv5, slide_in_lv2_ie, fade_in;
      -ms-animation-name: scale_in_lv5, slide_in_lv2_ie, fade_in;
       -o-animation-name: scale_in_lv5, slide_in_lv2_ie, fade_in;
          animation-name: scale_in_lv5, slide_in_lv2_ie, fade_in;
}



/*============================================================
  concept
============================================================*/
#concept .block-intro .block-image {
  opacity: 0;
}

#concept.active .block-intro .block-image {
  -webkit-animation: 0.2s ease-in both;
     -moz-animation: 0.2s ease-in both;
      -ms-animation: 0.2s ease-in both;
       -o-animation: 0.2s ease-in both;
          animation: 0.2s ease-in both;
  -webkit-animation-name: fade_in;
     -moz-animation-name: fade_in;
      -ms-animation-name: fade_in;
       -o-animation-name: fade_in;
          animation-name: fade_in;
}

#concept .block-point .list-point > li {
  opacity: 0;
}

#concept .block-point .list-point > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  power
============================================================*/
#power .pic-rice {
  opacity: 0;
}

#power.active .pic-rice {
  -webkit-animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
     -moz-animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
      -ms-animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
       -o-animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
          animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}

#power .list-nutrition {
  opacity: 0;
}

#power .list-nutrition.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}

#power .list-nutrition + .txt-note {
  opacity: 0;
}

#power .list-nutrition.active + .txt-note {
  -webkit-animation: 0.2s ease-in both;
     -moz-animation: 0.2s ease-in both;
      -ms-animation: 0.2s ease-in both;
       -o-animation: 0.2s ease-in both;
          animation: 0.2s ease-in both;
  -webkit-animation-name: fade_in;
     -moz-animation-name: fade_in;
      -ms-animation-name: fade_in;
       -o-animation-name: fade_in;
          animation-name: fade_in;
}



/*============================================================
  gallery
============================================================*/
#gallery {
  opacity: 0;
}

#gallery.active {
  -webkit-animation: 0.2s ease-in both;
     -moz-animation: 0.2s ease-in both;
      -ms-animation: 0.2s ease-in both;
       -o-animation: 0.2s ease-in both;
          animation: 0.2s ease-in both;
  -webkit-animation-name: fade_in;
     -moz-animation-name: fade_in;
      -ms-animation-name: fade_in;
       -o-animation-name: fade_in;
          animation-name: fade_in;
}

#gallery .list-gallery > li {
  opacity: 0;
}

#gallery .list-gallery > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  voice
============================================================*/
#voice .list-voice > li {
  opacity: 0;
}

#voice .list-voice > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  lineup
============================================================*/
#lineup .list-lineup > li {
  opacity: 0;
}

#lineup .list-lineup > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  shopping
============================================================*/
#shopping .block-scene {
  opacity: 0;
}

#shopping.active .block-scene {
  -webkit-animation: 0.2s ease-in both;
     -moz-animation: 0.2s ease-in both;
      -ms-animation: 0.2s ease-in both;
       -o-animation: 0.2s ease-in both;
          animation: 0.2s ease-in both;
  -webkit-animation-name: fade_in;
     -moz-animation-name: fade_in;
      -ms-animation-name: fade_in;
       -o-animation-name: fade_in;
          animation-name: fade_in;
}

#shopping .block-news {
  opacity: 0;
} 

#shopping .block-news.active {
  -webkit-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
     -moz-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
       -o-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-animation-name: slide_in_lv1, fade_in;
     -moz-animation-name: slide_in_lv1, fade_in;
      -ms-animation-name: slide_in_lv1, fade_in;
       -o-animation-name: slide_in_lv1, fade_in;
          animation-name: slide_in_lv1, fade_in;
}

html.ie #shopping .block-news.active {
  -webkit-animation-name: slide_in_lv1_ie, fade_in;
     -moz-animation-name: slide_in_lv1_ie, fade_in;
      -ms-animation-name: slide_in_lv1_ie, fade_in;
       -o-animation-name: slide_in_lv1_ie, fade_in;
          animation-name: slide_in_lv1_ie, fade_in;
}

#shopping .list-shopping > li {
  opacity: 0;
}

#shopping .list-shopping > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  qa
============================================================*/
#qa {
  opacity: 0;
}

#qa.active {
  -webkit-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
     -moz-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
       -o-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-animation-name: slide_in_lv1, fade_in;
     -moz-animation-name: slide_in_lv1, fade_in;
      -ms-animation-name: slide_in_lv1, fade_in;
       -o-animation-name: slide_in_lv1, fade_in;
          animation-name: slide_in_lv1, fade_in;
}

html.ie #qa.active {
  -webkit-animation-name: slide_in_lv1_ie, fade_in;
     -moz-animation-name: slide_in_lv1_ie, fade_in;
      -ms-animation-name: slide_in_lv1_ie, fade_in;
       -o-animation-name: slide_in_lv1_ie, fade_in;
          animation-name: slide_in_lv1_ie, fade_in;
}

#qa .list-qa > li {
  opacity: 0;
}

#qa .list-qa > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  produce
============================================================*/
#produce {
  opacity: 0;
}

#produce.active {
  -webkit-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
     -moz-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
       -o-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-animation-name: slide_in_lv1, fade_in;
     -moz-animation-name: slide_in_lv1, fade_in;
      -ms-animation-name: slide_in_lv1, fade_in;
       -o-animation-name: slide_in_lv1, fade_in;
          animation-name: slide_in_lv1, fade_in;
}

html.ie #produce.active {
  -webkit-animation-name: slide_in_lv1_ie, fade_in;
     -moz-animation-name: slide_in_lv1_ie, fade_in;
      -ms-animation-name: slide_in_lv1_ie, fade_in;
       -o-animation-name: slide_in_lv1_ie, fade_in;
          animation-name: slide_in_lv1_ie, fade_in;
}



/*============================================================
  animal
============================================================*/
#animal {
  opacity: 0;
}

#animal.active {
  -webkit-animation: 0.2s ease-in both;
     -moz-animation: 0.2s ease-in both;
      -ms-animation: 0.2s ease-in both;
       -o-animation: 0.2s ease-in both;
          animation: 0.2s ease-in both;
  -webkit-animation-name: fade_in;
     -moz-animation-name: fade_in;
      -ms-animation-name: fade_in;
       -o-animation-name: fade_in;
          animation-name: fade_in;
}

#animal .list-animal > li {
  opacity: 0;
}

#animal .list-animal > li.active {
  -webkit-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1, fade_in;
     -moz-animation-name: scale_in_lv1, fade_in;
      -ms-animation-name: scale_in_lv1, fade_in;
       -o-animation-name: scale_in_lv1, fade_in;
          animation-name: scale_in_lv1, fade_in;
}



/*============================================================
  footer
============================================================*/
#footer {
  /* opacity: 0; */
}

#footer.active {
  -webkit-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
     -moz-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
       -o-animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-animation-name: slide_in_lv1, fade_in;
     -moz-animation-name: slide_in_lv1, fade_in;
      -ms-animation-name: slide_in_lv1, fade_in;
       -o-animation-name: slide_in_lv1, fade_in;
          animation-name: slide_in_lv1, fade_in;
}

html.ie #footer.active {
  -webkit-animation-name: slide_in_lv1_ie, fade_in;
     -moz-animation-name: slide_in_lv1_ie, fade_in;
      -ms-animation-name: slide_in_lv1_ie, fade_in;
       -o-animation-name: slide_in_lv1_ie, fade_in;
          animation-name: slide_in_lv1_ie, fade_in;
}



/*============================================================
  modal
============================================================*/
#modal.active.in .block-content {
  -webkit-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
     -moz-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      -ms-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
       -o-animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
          animation: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation-name: scale_in_lv1;
     -moz-animation-name: scale_in_lv1;
      -ms-animation-name: scale_in_lv1;
       -o-animation-name: scale_in_lv1;
          animation-name: scale_in_lv1;
}