@charset "UTF-8";
/*基本設定*/
/* line 7, ../sass/style-anim.scss */
.trimming { width: 100%; margin: 0; padding: 0; overflow: hidden; position: relative; }

/* keyframes
----------------------------------------------- */
@keyframes slide { 0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes kumo1 { 0% { left: 400px; }
  100% { left: 2072px; } }
@keyframes kumo2 { 0% { left: 350px; }
  100% { left: 2070px; } }
@keyframes on { 50% { opacity: 1; } }
@keyframes off { 50% { opacity: 0; } }
@keyframes wtihe { 0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes moji-on { 0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes uketori { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes switch1 { 0% { opacity: 0; }
  16% { opacity: 1; }
  32% { opacity: 1; }
  48% { opacity: 0; }
  64% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes switch2 { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes ride-on { 2% { transform: translate(50px, -160px); }
  10% { transform: translate(100px, 110px); }
  100% { transform: translate(100px, 110px); } }
@keyframes build-out-tome { 50% { opacity: 1; }
  59% { opacity: 0; } }
@keyframes truck-move { 0% { left: 620px; }
  90% { left: 620px; }
  100% { left: 1100px; } }
@keyframes yure { 0% { transform: translate(0px, 0px) rotateZ(0deg); }
  25% { transform: translate(1px, 1px) rotateZ(1deg); }
  50% { transform: translate(0px, 1px) rotateZ(0deg); }
  75% { transform: translate(1px, 0px) rotateZ(-1deg); }
  100% { transform: translate(0px, 0px) rotateZ(0deg); } }
@keyframes driving { 0% { opacity: 1; } }
@keyframes deliver-on { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes watasu { 0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 1; } }
@media screen and (max-width: 640px) { /* line 101, ../sass/style-anim.scss */
  .anim-wrap { max-width: 640px; }
  /* line 103, ../sass/style-anim.scss */
  .anim-wrap .sp-anim { position: relative; width: 100%; height: auto; }
  /* line 107, ../sass/style-anim.scss */
  .anim-wrap .sp-anim:before { content: ""; display: block; padding-top: 62%; }
  /* line 112, ../sass/style-anim.scss */
  .anim-wrap .sp-anim .sp-anim-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  /* line 121, ../sass/style-anim.scss */
  .anim-wrap .sp-anim .sp-anim-bg img { width: 100%; height: auto; opacity: 0; animation-name: slide; animation-duration: 6s; animation-timing-function: step-end; animation-iteration-count: infinite; }
  /* line 130, ../sass/style-anim.scss */
  .anim-wrap .sp-anim .sp-anim-bg .slide2 { animation-delay: 2s; }
  /* line 133, ../sass/style-anim.scss */
  .anim-wrap .sp-anim .sp-anim-bg .slide3 { animation-delay: 4s; }
  /* line 138, ../sass/style-anim.scss */
  .anim-wrap .pc-anim { display: none; } }
@media screen and (min-width: 641px) { /* line 147, ../sass/style-anim.scss */
  .trimming { min-width: 320px; height: 930px; }
  /* line 151, ../sass/style-anim.scss */
  .anim-wrap { width: 2000px; height: 930px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -1000px; }
  /* line 158, ../sass/style-anim.scss */
  .anim-wrap .sp-anim { display: none; }
  /* line 161, ../sass/style-anim.scss */
  .anim-wrap .pc-anim { overflow: hidden; }
  /* line 163, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner { width: 2000px; height: 930px; background-image: url(../images/bg-main.jpg); background-repeat: no-repeat; position: relative; }
  /* line 169, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner li { list-style: none; position: absolute; z-index: 1; }
  /* line 174, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kumo1 { left: 400px; animation-name: kumo1; animation-duration: 64s; animation-timing-function: linear; animation-iteration-count: infinite; }
  /* line 181, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kumo2 { left: 350px; animation-name: kumo2; animation-duration: 80s; animation-timing-function: linear; animation-delay: 0.25s; animation-iteration-count: infinite; }
  /* line 189, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action { position: relative; z-index: 2; }
  /* line 192, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action div { position: absolute; top: 0; left: 0; }
  /* line 196, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action div span:first-child img { opacity: 0; animation-name: on; animation-duration: 2s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
  /* line 203, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action div span:last-child { position: absolute; top: 0; left: 0; }
  /* line 208, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action div span:last-child img { opacity: 1; animation-name: off; animation-duration: 2s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
  /* line 216, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .action .tenin { opacity: 0; animation-name: uketori; animation-duration: 18s; animation-timing-function: step-end; }
  /* line 223, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action { position: relative; z-index: 3; }
  /* line 226, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action div { position: absolute; top: 0; left: 0; }
  /* line 230, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action div img { position: absolute; top: 0; left: 0; }
  /* line 237, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 img { opacity: 0; animation-name: switch1; animation-duration: 7s; animation-timing-function: step(7, start); }
  /* line 243, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching2 { animation-delay: 1s; }
  /* line 246, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching3 { animation-delay: 2s; }
  /* line 249, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching4 { animation-delay: 3s; }
  /* line 252, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching5 { animation-delay: 4s; }
  /* line 255, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching6 { animation-delay: 5s; }
  /* line 258, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene1 .switching7 { animation-delay: 6s; }
  /* line 263, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene2 img { opacity: 0; animation-name: switch2; animation-duration: 3s; animation-timing-function: step-end; animation-delay: 8s; }
  /* line 270, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene2 .switching2 { animation-delay: 9s; }
  /* line 273, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene2 .switching3 { animation-delay: 10s; }
  /* line 277, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene3 { animation-name: ride-on; animation-duration: 8s; animation-timing-function: ease-out; animation-delay: 13s; }
  /* line 282, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene3 .ride { opacity: 0; animation-name: build-out-tome; animation-duration: 24s; animation-timing-function: step-end; }
  /* line 289, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene4 { width: 200px; left: 1100px; animation-name: truck-move; animation-duration: 16s; }
  /* line 294, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene4 .yure { width: 200px; animation-name: yure; animation-duration: .1s; animation-delay: 14s; }
  /* line 299, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene4 .yure .drive2 { opacity: 0; animation-name: driving; animation-duration: 3s; animation-timing-function: step-end; animation-delay: 14s; }
  /* line 308, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene5 { opacity: 1; animation-name: deliver-on; animation-duration: 18s; animation-timing-function: step-end; }
  /* line 314, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .anim-bg-inner .kame-action .scene5 .hand-over2 { opacity: 0; animation-name: watasu; animation-duration: 10s; animation-timing-function: step-end; animation-delay: 18s; }
  /* line 324, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .bg-white { width: 2000px; height: 930px; position: absolute; top: 0; left: 0; opacity: 1; z-index: 4; background-color: #ffffff; animation-name: wtihe; animation-duration: 28s; }
  /* line 335, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .bg-white .scene-last { width: 2000px; height: 930px; position: relative; }
  /* line 339, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .bg-white .scene-last .last-bg { position: absolute; top: 0; left: 0; opacity: 1; animation-name: moji-on; animation-duration: 32s; }
  /* line 347, ../sass/style-anim.scss */
  .anim-wrap .pc-anim .bg-white .scene-last .last-moji { position: absolute; top: 0; left: 0; opacity: 1; animation-name: moji-on; animation-duration: 35s; } }