@charset "utf-8";
/*確認作業用リセット*/
/*
*{ animation: 0s !important; opacity: 1.0 !important;}
#loading{ display: none !important;}
body{ overflow:  auto !important;}
*/
/*アニメーション*/
section{ opacity: 0; position: relative;}
section.active{ animation: section ease-in-out 1.0s forwards; animation-delay: 0s;}
@keyframes section{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}


/*アニメーション*/
#fv_list ul li img{ position: relative; animation: fv_list_img ease-in-out 3.0s infinite; animation-delay: 0s;}
#fv_list ul li.list02 img{ animation-delay: 0.3s;}
#fv_list ul li.list03 img{ animation-delay: 0.6s;}
#fv_list ul li.list04 img{ animation-delay: 0.9s;}
#fv_list ul li.list05 img{ animation-delay: 1.2s;}
#fv_list ul li.list06 img{ animation-delay: 1.5s;}
#fv_list ul li.list07 img{ animation-delay: 1.8s;}
#fv_list ul li.list08 img{ animation-delay: 2.1s;}
#fv_list ul li.list09 img{ animation-delay: 2.4s;}
#fv_list ul li.list10 img{ animation-delay: 2.7s;}
@keyframes fv_list_img{
0%{ transform: scale(1.0);}
5%{ transform: scale(1.1);}
10%{ transform: scale(1.0);}
100%{ transform: scale(1.0);}
}


/*アニメーション*/
#product_cont .maincontent{ opacity: 0; position: relative;}
#product_cont .maincontent.active{ animation: product_cont ease-in-out 1.0s forwards; animation-delay: 0s;}
@keyframes product_cont{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}


/*アニメーション*/
#product_nav ul li{ opacity: 0; position: relative;}
#product_nav.active ul li{ animation: product_nav ease-in-out 1.0s forwards;}
#product_nav.active ul li:nth-child(1){ animation-delay: 0s;}
#product_nav.active ul li:nth-child(2){ animation-delay: 0.3s;}
#product_nav.active ul li:nth-child(3){ animation-delay: 0.6s;}
#product_nav.active ul li:nth-child(4){ animation-delay: 0.9s;}
#product_nav.active ul li:nth-child(5){ animation-delay: 1.2s;}
#product_nav.active ul li:nth-child(6){ animation-delay: 1.5s;}
#product_nav.active ul li:nth-child(7){ animation-delay: 1.8s;}
#product_nav.active ul li:nth-child(8){ animation-delay: 2.1s;}
#product_nav.active ul li:nth-child(9){ animation-delay: 2.4s;}
#product_nav.active ul li:nth-child(10){ animation-delay: 2.7s;}
@keyframes product_nav{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}


/*アニメーション*/
#award ul li{ opacity: 0; position: relative;}
#award ul li.active{ animation: award ease-in-out 1.0s forwards; animation-delay: 0s;}
@keyframes award{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}