@charset "UTF-8";
/* 順々に表示させるアニメーション */
.fadein-item {
  opacity: 0; }

.fadein-left .fadein-view:nth-child(1) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 0.3s 1 forwards;
  animation: fadein_left 0.3s ease 0.3s 1 forwards; }

.fadein-left .fadein-view:nth-child(2) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 0.6s 1 forwards;
  animation: fadein_left 0.3s ease 0.6s 1 forwards; }

.fadein-left .fadein-view:nth-child(3) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 0.9s 1 forwards;
  animation: fadein_left 0.3s ease 0.9s 1 forwards; }

.fadein-left .fadein-view:nth-child(4) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 1.2s 1 forwards;
  animation: fadein_left 0.3s ease 1.2s 1 forwards; }

.fadein-left .fadein-view:nth-child(5) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 1.5s 1 forwards;
  animation: fadein_left 0.3s ease 1.5s 1 forwards; }

.fadein-left .fadein-view:nth-child(6) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 1.8s 1 forwards;
  animation: fadein_left 0.3s ease 1.8s 1 forwards; }

.fadein-left .fadein-view:nth-child(7) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 2.1s 1 forwards;
  animation: fadein_left 0.3s ease 2.1s 1 forwards; }

.fadein-left .fadein-view:nth-child(8) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 2.4s 1 forwards;
  animation: fadein_left 0.3s ease 2.4s 1 forwards; }

.fadein-left .fadein-view:nth-child(9) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 2.7s 1 forwards;
  animation: fadein_left 0.3s ease 2.7s 1 forwards; }

.fadein-left .fadein-view:nth-child(10) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 3s 1 forwards;
  animation: fadein_left 0.3s ease 3s 1 forwards; }

.fadein-left .fadein-view:nth-child(11) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 3.3s 1 forwards;
  animation: fadein_left 0.3s ease 3.3s 1 forwards; }

.fadein-left .fadein-view:nth-child(12) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 3.6s 1 forwards;
  animation: fadein_left 0.3s ease 3.6s 1 forwards; }

.fadein-left .fadein-view:nth-child(13) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 3.9s 1 forwards;
  animation: fadein_left 0.3s ease 3.9s 1 forwards; }

.fadein-left .fadein-view:nth-child(14) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 4.2s 1 forwards;
  animation: fadein_left 0.3s ease 4.2s 1 forwards; }

.fadein-left .fadein-view:nth-child(15) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 4.5s 1 forwards;
  animation: fadein_left 0.3s ease 4.5s 1 forwards; }

.fadein-left .fadein-view:nth-child(16) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 4.8s 1 forwards;
  animation: fadein_left 0.3s ease 4.8s 1 forwards; }

.fadein-left .fadein-view:nth-child(17) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 5.1s 1 forwards;
  animation: fadein_left 0.3s ease 5.1s 1 forwards; }

.fadein-left .fadein-view:nth-child(18) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 5.4s 1 forwards;
  animation: fadein_left 0.3s ease 5.4s 1 forwards; }

.fadein-left .fadein-view:nth-child(19) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 5.7s 1 forwards;
  animation: fadein_left 0.3s ease 5.7s 1 forwards; }

.fadein-left .fadein-view:nth-child(20) {
  /* 左から */
  -webkit-animation: fadein_left 0.3s ease 6s 1 forwards;
  animation: fadein_left 0.3s ease 6s 1 forwards; }

.fadein-up .fadein-view:nth-child(1) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 0.3s 1 forwards;
  animation: fadein_up 0.3s ease 0.3s 1 forwards; }

.fadein-up .fadein-view:nth-child(2) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 0.6s 1 forwards;
  animation: fadein_up 0.3s ease 0.6s 1 forwards; }

.fadein-up .fadein-view:nth-child(3) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 0.9s 1 forwards;
  animation: fadein_up 0.3s ease 0.9s 1 forwards; }

.fadein-up .fadein-view:nth-child(4) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 1.2s 1 forwards;
  animation: fadein_up 0.3s ease 1.2s 1 forwards; }

.fadein-up .fadein-view:nth-child(5) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 1.5s 1 forwards;
  animation: fadein_up 0.3s ease 1.5s 1 forwards; }

.fadein-up .fadein-view:nth-child(6) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 1.8s 1 forwards;
  animation: fadein_up 0.3s ease 1.8s 1 forwards; }

.fadein-up .fadein-view:nth-child(7) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 2.1s 1 forwards;
  animation: fadein_up 0.3s ease 2.1s 1 forwards; }

.fadein-up .fadein-view:nth-child(8) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 2.4s 1 forwards;
  animation: fadein_up 0.3s ease 2.4s 1 forwards; }

.fadein-up .fadein-view:nth-child(9) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 2.7s 1 forwards;
  animation: fadein_up 0.3s ease 2.7s 1 forwards; }

.fadein-up .fadein-view:nth-child(10) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 3s 1 forwards;
  animation: fadein_up 0.3s ease 3s 1 forwards; }

.fadein-up .fadein-view:nth-child(11) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 3.3s 1 forwards;
  animation: fadein_up 0.3s ease 3.3s 1 forwards; }

.fadein-up .fadein-view:nth-child(12) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 3.6s 1 forwards;
  animation: fadein_up 0.3s ease 3.6s 1 forwards; }

.fadein-up .fadein-view:nth-child(13) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 3.9s 1 forwards;
  animation: fadein_up 0.3s ease 3.9s 1 forwards; }

.fadein-up .fadein-view:nth-child(14) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 4.2s 1 forwards;
  animation: fadein_up 0.3s ease 4.2s 1 forwards; }

.fadein-up .fadein-view:nth-child(15) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 4.5s 1 forwards;
  animation: fadein_up 0.3s ease 4.5s 1 forwards; }

.fadein-up .fadein-view:nth-child(16) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 4.8s 1 forwards;
  animation: fadein_up 0.3s ease 4.8s 1 forwards; }

.fadein-up .fadein-view:nth-child(17) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 5.1s 1 forwards;
  animation: fadein_up 0.3s ease 5.1s 1 forwards; }

.fadein-up .fadein-view:nth-child(18) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 5.4s 1 forwards;
  animation: fadein_up 0.3s ease 5.4s 1 forwards; }

.fadein-up .fadein-view:nth-child(19) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 5.7s 1 forwards;
  animation: fadein_up 0.3s ease 5.7s 1 forwards; }

.fadein-up .fadein-view:nth-child(20) {
  /* 下から */
  -webkit-animation: fadein_up 0.3s ease 6s 1 forwards;
  animation: fadein_up 0.3s ease 6s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(1) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 0.3s 1 forwards;
  animation: fadein_zoom 0.3s ease 0.3s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(2) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 0.6s 1 forwards;
  animation: fadein_zoom 0.3s ease 0.6s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(3) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 0.9s 1 forwards;
  animation: fadein_zoom 0.3s ease 0.9s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(4) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 1.2s 1 forwards;
  animation: fadein_zoom 0.3s ease 1.2s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(5) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 1.5s 1 forwards;
  animation: fadein_zoom 0.3s ease 1.5s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(6) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 1.8s 1 forwards;
  animation: fadein_zoom 0.3s ease 1.8s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(7) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 2.1s 1 forwards;
  animation: fadein_zoom 0.3s ease 2.1s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(8) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 2.4s 1 forwards;
  animation: fadein_zoom 0.3s ease 2.4s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(9) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 2.7s 1 forwards;
  animation: fadein_zoom 0.3s ease 2.7s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(10) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 3s 1 forwards;
  animation: fadein_zoom 0.3s ease 3s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(11) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 3.3s 1 forwards;
  animation: fadein_zoom 0.3s ease 3.3s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(12) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 3.6s 1 forwards;
  animation: fadein_zoom 0.3s ease 3.6s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(13) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 3.9s 1 forwards;
  animation: fadein_zoom 0.3s ease 3.9s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(14) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 4.2s 1 forwards;
  animation: fadein_zoom 0.3s ease 4.2s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(15) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 4.5s 1 forwards;
  animation: fadein_zoom 0.3s ease 4.5s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(16) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 4.8s 1 forwards;
  animation: fadein_zoom 0.3s ease 4.8s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(17) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 5.1s 1 forwards;
  animation: fadein_zoom 0.3s ease 5.1s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(18) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 5.4s 1 forwards;
  animation: fadein_zoom 0.3s ease 5.4s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(19) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 5.7s 1 forwards;
  animation: fadein_zoom 0.3s ease 5.7s 1 forwards; }

.fadein-zoom .fadein-view:nth-child(20) {
  /* すこし下からズームイン */
  -webkit-animation: fadein_zoom 0.3s ease 6s 1 forwards;
  animation: fadein_zoom 0.3s ease 6s 1 forwards; }

.fadein-blur .fadein-view:nth-child(1) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 0.3s 1 forwards;
  animation: fadein_blur 1s ease 0.3s 1 forwards; }

.fadein-blur .fadein-view:nth-child(2) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 0.6s 1 forwards;
  animation: fadein_blur 1s ease 0.6s 1 forwards; }

.fadein-blur .fadein-view:nth-child(3) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 0.9s 1 forwards;
  animation: fadein_blur 1s ease 0.9s 1 forwards; }

.fadein-blur .fadein-view:nth-child(4) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 1.2s 1 forwards;
  animation: fadein_blur 1s ease 1.2s 1 forwards; }

.fadein-blur .fadein-view:nth-child(5) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 1.5s 1 forwards;
  animation: fadein_blur 1s ease 1.5s 1 forwards; }

.fadein-blur .fadein-view:nth-child(6) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 1.8s 1 forwards;
  animation: fadein_blur 1s ease 1.8s 1 forwards; }

.fadein-blur .fadein-view:nth-child(7) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 2.1s 1 forwards;
  animation: fadein_blur 1s ease 2.1s 1 forwards; }

.fadein-blur .fadein-view:nth-child(8) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 2.4s 1 forwards;
  animation: fadein_blur 1s ease 2.4s 1 forwards; }

.fadein-blur .fadein-view:nth-child(9) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 2.7s 1 forwards;
  animation: fadein_blur 1s ease 2.7s 1 forwards; }

.fadein-blur .fadein-view:nth-child(10) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 3s 1 forwards;
  animation: fadein_blur 1s ease 3s 1 forwards; }

.fadein-blur .fadein-view:nth-child(11) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 3.3s 1 forwards;
  animation: fadein_blur 1s ease 3.3s 1 forwards; }

.fadein-blur .fadein-view:nth-child(12) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 3.6s 1 forwards;
  animation: fadein_blur 1s ease 3.6s 1 forwards; }

.fadein-blur .fadein-view:nth-child(13) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 3.9s 1 forwards;
  animation: fadein_blur 1s ease 3.9s 1 forwards; }

.fadein-blur .fadein-view:nth-child(14) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 4.2s 1 forwards;
  animation: fadein_blur 1s ease 4.2s 1 forwards; }

.fadein-blur .fadein-view:nth-child(15) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 4.5s 1 forwards;
  animation: fadein_blur 1s ease 4.5s 1 forwards; }

.fadein-blur .fadein-view:nth-child(16) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 4.8s 1 forwards;
  animation: fadein_blur 1s ease 4.8s 1 forwards; }

.fadein-blur .fadein-view:nth-child(17) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 5.1s 1 forwards;
  animation: fadein_blur 1s ease 5.1s 1 forwards; }

.fadein-blur .fadein-view:nth-child(18) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 5.4s 1 forwards;
  animation: fadein_blur 1s ease 5.4s 1 forwards; }

.fadein-blur .fadein-view:nth-child(19) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 5.7s 1 forwards;
  animation: fadein_blur 1s ease 5.7s 1 forwards; }

.fadein-blur .fadein-view:nth-child(20) {
  /* ぼやかしてはっきりしてくる */
  -webkit-animation: fadein_blur 1s ease 6s 1 forwards;
  animation: fadein_blur 1s ease 6s 1 forwards; }

.rotate-right .fadein-view:nth-child(1) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 0.3s 1 forwards;
  animation: rotate_right 0.5s ease 0.3s 1 forwards; }

.rotate-right .fadein-view:nth-child(2) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 0.6s 1 forwards;
  animation: rotate_right 0.5s ease 0.6s 1 forwards; }

.rotate-right .fadein-view:nth-child(3) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 0.9s 1 forwards;
  animation: rotate_right 0.5s ease 0.9s 1 forwards; }

.rotate-right .fadein-view:nth-child(4) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 1.2s 1 forwards;
  animation: rotate_right 0.5s ease 1.2s 1 forwards; }

.rotate-right .fadein-view:nth-child(5) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 1.5s 1 forwards;
  animation: rotate_right 0.5s ease 1.5s 1 forwards; }

.rotate-right .fadein-view:nth-child(6) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 1.8s 1 forwards;
  animation: rotate_right 0.5s ease 1.8s 1 forwards; }

.rotate-right .fadein-view:nth-child(7) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 2.1s 1 forwards;
  animation: rotate_right 0.5s ease 2.1s 1 forwards; }

.rotate-right .fadein-view:nth-child(8) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 2.4s 1 forwards;
  animation: rotate_right 0.5s ease 2.4s 1 forwards; }

.rotate-right .fadein-view:nth-child(9) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 2.7s 1 forwards;
  animation: rotate_right 0.5s ease 2.7s 1 forwards; }

.rotate-right .fadein-view:nth-child(10) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 3s 1 forwards;
  animation: rotate_right 0.5s ease 3s 1 forwards; }

.rotate-right .fadein-view:nth-child(11) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 3.3s 1 forwards;
  animation: rotate_right 0.5s ease 3.3s 1 forwards; }

.rotate-right .fadein-view:nth-child(12) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 3.6s 1 forwards;
  animation: rotate_right 0.5s ease 3.6s 1 forwards; }

.rotate-right .fadein-view:nth-child(13) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 3.9s 1 forwards;
  animation: rotate_right 0.5s ease 3.9s 1 forwards; }

.rotate-right .fadein-view:nth-child(14) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 4.2s 1 forwards;
  animation: rotate_right 0.5s ease 4.2s 1 forwards; }

.rotate-right .fadein-view:nth-child(15) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 4.5s 1 forwards;
  animation: rotate_right 0.5s ease 4.5s 1 forwards; }

.rotate-right .fadein-view:nth-child(16) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 4.8s 1 forwards;
  animation: rotate_right 0.5s ease 4.8s 1 forwards; }

.rotate-right .fadein-view:nth-child(17) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 5.1s 1 forwards;
  animation: rotate_right 0.5s ease 5.1s 1 forwards; }

.rotate-right .fadein-view:nth-child(18) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 5.4s 1 forwards;
  animation: rotate_right 0.5s ease 5.4s 1 forwards; }

.rotate-right .fadein-view:nth-child(19) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 5.7s 1 forwards;
  animation: rotate_right 0.5s ease 5.7s 1 forwards; }

.rotate-right .fadein-view:nth-child(20) {
  /* 180度右回転*/
  -webkit-animation: rotate_right 0.5s ease 6s 1 forwards;
  animation: rotate_right 0.5s ease 6s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(1) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 0.5s 1 forwards;
  animation: fadein_sepia 4s ease 0.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(2) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 1s 1 forwards;
  animation: fadein_sepia 4s ease 1s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(3) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 1.5s 1 forwards;
  animation: fadein_sepia 4s ease 1.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(4) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 2s 1 forwards;
  animation: fadein_sepia 4s ease 2s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(5) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 2.5s 1 forwards;
  animation: fadein_sepia 4s ease 2.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(6) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 3s 1 forwards;
  animation: fadein_sepia 4s ease 3s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(7) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 3.5s 1 forwards;
  animation: fadein_sepia 4s ease 3.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(8) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 4s 1 forwards;
  animation: fadein_sepia 4s ease 4s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(9) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 4.5s 1 forwards;
  animation: fadein_sepia 4s ease 4.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(10) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 5s 1 forwards;
  animation: fadein_sepia 4s ease 5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(11) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 5.5s 1 forwards;
  animation: fadein_sepia 4s ease 5.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(12) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 6s 1 forwards;
  animation: fadein_sepia 4s ease 6s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(13) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 6.5s 1 forwards;
  animation: fadein_sepia 4s ease 6.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(14) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 7s 1 forwards;
  animation: fadein_sepia 4s ease 7s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(15) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 7.5s 1 forwards;
  animation: fadein_sepia 4s ease 7.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(16) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 8s 1 forwards;
  animation: fadein_sepia 4s ease 8s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(17) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 8.5s 1 forwards;
  animation: fadein_sepia 4s ease 8.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(18) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 9s 1 forwards;
  animation: fadein_sepia 4s ease 9s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(19) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 9.5s 1 forwards;
  animation: fadein_sepia 4s ease 9.5s 1 forwards; }

.fadein-sepia .fadein-view:nth-child(20) {
  /* セピアから徐々にカラーに */
  -webkit-animation: fadein_sepia 4s ease 10s 1 forwards;
  animation: fadein_sepia 4s ease 10s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(1) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.1s 1 forwards;
  animation: fadein_fadein 4s ease 0.1s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(2) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.2s 1 forwards;
  animation: fadein_fadein 4s ease 0.2s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(3) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.3s 1 forwards;
  animation: fadein_fadein 4s ease 0.3s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(4) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.4s 1 forwards;
  animation: fadein_fadein 4s ease 0.4s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(5) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.5s 1 forwards;
  animation: fadein_fadein 4s ease 0.5s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(6) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.6s 1 forwards;
  animation: fadein_fadein 4s ease 0.6s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(7) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.7s 1 forwards;
  animation: fadein_fadein 4s ease 0.7s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(8) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.8s 1 forwards;
  animation: fadein_fadein 4s ease 0.8s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(9) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 0.9s 1 forwards;
  animation: fadein_fadein 4s ease 0.9s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(10) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1s 1 forwards;
  animation: fadein_fadein 4s ease 1s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(11) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.1s 1 forwards;
  animation: fadein_fadein 4s ease 1.1s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(12) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.2s 1 forwards;
  animation: fadein_fadein 4s ease 1.2s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(13) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.3s 1 forwards;
  animation: fadein_fadein 4s ease 1.3s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(14) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.4s 1 forwards;
  animation: fadein_fadein 4s ease 1.4s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(15) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.5s 1 forwards;
  animation: fadein_fadein 4s ease 1.5s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(16) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.6s 1 forwards;
  animation: fadein_fadein 4s ease 1.6s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(17) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.7s 1 forwards;
  animation: fadein_fadein 4s ease 1.7s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(18) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.8s 1 forwards;
  animation: fadein_fadein 4s ease 1.8s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(19) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 1.9s 1 forwards;
  animation: fadein_fadein 4s ease 1.9s 1 forwards; }

.fadein-fadein .fadein-view:nth-child(20) {
  /* その場でフェードイン */
  -webkit-animation: fadein_fadein 4s ease 2s 1 forwards;
  animation: fadein_fadein 4s ease 2s 1 forwards; }

.fadein-zoomout .fadein-view:nth-child(1) {
  /* 拡大から普通の画像に */
  -webkit-animation: fadein_zoomout 0.3s ease 0.1s 1 forwards;
  animation: fadein_zoomout 0.3s ease 0.1s 1 forwards; }

@-webkit-keyframes slideLeft {
  0% {
    transform: translate3d(-100%, 0, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@keyframes slideLeft {
  0% {
    transform: translate3d(-100%, 0, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes slideTop {
  0% {
    transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@keyframes slideTop {
  0% {
    transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes expansion {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.1, 1.1); } }
@keyframes expansion {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.1, 1.1); } }
@-webkit-keyframes fadein_left {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@keyframes fadein_left {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes fadein_up {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@keyframes fadein_up {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes fadein_zoom {
  0% {
    opacity: 0;
    transform: scale(0.6) translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0); } }
@keyframes fadein_zoom {
  0% {
    opacity: 0;
    transform: scale(0.6) translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0); } }
@-webkit-keyframes fadein_blur {
  0% {
    opacity: 0.3;
    filter: blur(12px);
    transform: scale(1.02); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); } }
@keyframes fadein_blur {
  0% {
    opacity: 0.3;
    filter: blur(12px);
    transform: scale(1.02); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); } }
@-webkit-keyframes rotate_right {
  0% {
    opacity: 0;
    transform: rotateZ(180deg); }
  100% {
    opacity: 1;
    transform: rotateZ(360deg); } }
@keyframes rotate_right {
  0% {
    opacity: 0;
    transform: rotateZ(180deg); }
  100% {
    opacity: 1;
    transform: rotateZ(360deg); } }
@-webkit-keyframes fadein_sepia {
  0% {
    opacity: 0.5;
    filter: sepia(90%); }
  100% {
    opacity: 1;
    transform: sepia(0%); } }
@keyframes fadein_sepia {
  0% {
    opacity: 0.5;
    filter: sepia(90%); }
  100% {
    opacity: 1;
    transform: sepia(0%); } }
@-webkit-keyframes fadein_fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadein_fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadein_zoomout {
  0% {
    opacity: 1;
    background-size: 140%; }
  100% {
    opacity: 1;
    background-size: 100%; } }
@keyframes fadein_zoomout {
  0% {
    opacity: 1;
    background-size: 140%; }
  100% {
    opacity: 1;
    background-size: 100%; } }
.fadein-left.fadein-view {
  animation: slideLeft 1s 1s forwards; }

.fadein-up.fadein-view {
  animation: slideTop 1s 1s forwards; }

.fadein-zoom.fadein-view {
  animation: fadein_zoom 1s 1s forwards; }

.fadein-blur.fadein-view {
  animation: fadein_blur 1s 1s forwards; }

.rotate-right.fadein-view {
  animation: rotate_right 1s 0.3s forwards; }

.fadein-sepia.fadein-view {
  animation: fadein_sepia 4s 0.3s forwards; }

.fadein-fadein.fadein-view {
  animation: fadein_fadein 4s 0.1s forwards; }

.fadein-zoomout.fadein-view {
  animation: fadein_zoomout 4s 0.3s forwards; }

/*========= タイピング ===============*/
.TextTyping p span {
  display: none; }

@keyframes typinganime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*========= オンマウスでALT ===============*/
.img_caption {
  position: relative; }

.img_caption.fadein-item {
  opacity: 1; }

.img_caption div.cover {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--vk-color-primary);
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  box-sizing: border-box; }

.img_caption.fadein-view div.cover {
  opacity: 0.6; }

.img_caption:hover div.cover {
  opacity: 0; }

.img_caption p.alt {
  position: absolute;
  opacity: 1;
  color: #FFF;
  font-size: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }

/*========= ファーストビューでのアニメーション ===============*/
/*========= 画像がその場でフェードイン===============*/
.anime-top-fadein {
  animation: 2s  anime_top_fadein 0.2s forwards;
  opacity: 0; }

@keyframes anime_top_fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*========= 画像がズームアウト===============*/
.anime-top-zoomout {
  animation: 2s anime_top_zoomout 0.2s forwards;
  opacity: 1; }

@keyframes anime_top_zoomout {
  0% {
    opacity: 1;
    transform: scale(3, 3); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
/*========= フェードアウトしながら　縮小する ===============*/
.anime-top-fadein-zoomout {
  animation: 2s anime_top_fadein_zoomout 0.2s forwards;
  opacity: 0; }

@keyframes anime_top_fadein_zoomout {
  0% {
    opacity: 0;
    transform: scale(3, 3); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
/*========= フェードインしながら　拡大して通常サイズになる　===============*/
.anime-top-fadein-zoomin {
  animation: 0.1s anime_top_fadein_zoomin 2s forwards;
  opacity: 0; }

@keyframes anime_top_fadein_zoomin {
  0% {
    opacity: 0;
    transform: scale(0, 0); }
  10% {
    opacity: 0.8;
    transform: scale(0.2 0.2); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
/*========= その場でふわふわ繰り返し動く===============*/
.anime-fuwafuwa {
  animation: fuwafuwa 1s infinite; }

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0px); } }
/*========= その場でピコピコ繰り返し動く===============*/
.anime-pikopiko {
  animation: pikopiko 1s steps(2, start) infinite; }

@keyframes pikopiko {
  0% {
    transform: rotate(5deg); }
  to {
    transform: rotate(-5deg); } }
/*=========　その場もちもちコ繰り返し動く ===============*/
.anime-mochimochi {
  animation: mochimochi 1s infinite; }

@keyframes mochimochi {
  0% {
    transform: scale(1, 0.9); }
  20% {
    transform: scale(0.9, 1.05); }
  90% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1, 0.9); } }
/*=========　個別 ===============*/
/* 下からふわっと */
.fadeUp.fadein-view {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(150px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* 左からふわっと出てくる */
.fadeLeft.fadein-view {
  animation-name: fadeLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* 右からふわっと出てくる */
.fadeRight.fadein-view {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/*==================================================
最低限おぼえておきたい動き
===================================*/
/*背景色が伸びて出現（左から・右から）　*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*背景色が伸びて出現（左から）*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/*背景色が伸びて出現（右から）*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-20par);
  /*伸びる背景色の設定*/ }

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0); }
  50% {
    transform-origin: right;
    transform: scaleX(1); }
  50.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scaleX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger, .bgRLextendTrigger, .bgLRextendTrigger {
  opacity: 0; }