@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.about123 {
  padding-top: 30px; }

.about123__detail-wrapper {
  width: 325px;
  margin: 0 auto;
  padding: 25px 0; }

.about123__image {
  background-image: url("../images/about_123/123.png");
  background-repeat: no-repeat;
  background-size: 224px 299px;
  background-position-x: 8px;
  max-width: 375px;
  margin: 0 auto;
  width: 100%;
  height: 299px;
  position: relative; }

.about123__123 {
  width: 175px;
  position: absolute;
  right: 29px;
  bottom: 26px; }

.about123__name {
  font-size: 58px;
  line-height: 60px; }
  .about123__name span {
    display: block; }

.about123__name-en {
  font-size: 24px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  letter-spacing: 2.8px;
  text-align: center; }

.about123__title {
  font-size: 29px;
  letter-spacing: .1px; }

.about123__detail {
  margin-top: -34px;
  position: relative; }

.about123__about-legend {
  width: 245px;
  height: 45px;
  display: block;
  text-decoration: none;
  background-color: #fff;
  border-radius: 45px;
  line-height: 45px;
  text-align: center;
  margin: 22px auto 0 auto;
  color: #006939;
  font-size: 21px; }

.about123__about-legend:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

@media (min-width: 640px) {
  .about123__inner {
    width: 620px;
    margin: 0 auto;
    position: relative; }
  .about123__image {
    max-width: 620px;
    overflow: hidden; }
  .about123__123 {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    left: 228px;
    top: 40px; }
  .about123__name {
    font-size: 52px;
    margin-right: 15px;
    line-height: 53px; }
    .about123__name span {
      display: inline; }
  .about123__name-en {
    border-width: 2px;
    font-size: 14.3px; }
  .about123__title-wrapper {
    width: 117px; }
  .about123__title {
    font-size: 19.4px; }
  .about123__detail-wrapper {
    width: 395px;
    position: absolute;
    top: 120px;
    left: 228px; }
  .about123__detail-wrapper {
    font-size: 18px; } }

.cover__black {
  width: 100%;
  height: 558px;
  position: absolute;
  background-color: #000;
  top: 0;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  display: block;
  transition: all 2s ease-in-out 0s;
  pointer-events: none; }

.cover__black--fadein {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.cover__gray {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: block;
  visibility: hidden; }

.cover__gray--visible {
  transition: opacity .1s ease-in-out .2s;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  visibility: visible; }

.cover__logo {
  width: 375px;
  height: 100%;
  margin: 0 auto;
  position: relative; }

.cover__logo-bo {
  width: 200px;
  height: 174px;
  background-image: url("../images/cover/logo-bo.png");
  background-repeat: no-repeat;
  background-size: 200px auto;
  transition: all .3s ease-in .5s;
  position: absolute;
  bottom: 330px;
  left: 90px;
  -webkit-transform: scale(5);
          transform: scale(5);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.cover__logo-bo--anim {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.cover__logo-bo--hidden {
  transition: all 0s linear 0s;
  visibility: hidden; }

.cover__logo-gin {
  width: 238px;
  height: 192px;
  background-image: url("../images/cover/logo-gin.png");
  background-repeat: no-repeat;
  background-size: 238px auto;
  position: absolute;
  bottom: 160px;
  left: 90px;
  transition: all .3s ease-in 1s;
  -webkit-transform: scale(5);
          transform: scale(5);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.cover__logo-gin--anim {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.cover__logo-gin--hidden {
  transition: all 0s linear 0s;
  visibility: hidden; }

.cover__moving-gin-wrapper {
  width: 375px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }

.cover__moving-gin {
  width: 30px;
  height: 110px;
  background-image: url("../images/cover/moving-gin.png");
  background-size: 30px auto;
  background-repeat: no-repeat;
  transition: all .3s ease-in 2s;
  position: absolute;
  top: 202px;
  left: 275px; }

.cover__moving-gin--visible {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.cover__moving-gin--anim {
  transition: -webkit-transform .3s ease-in 0s;
  transition: transform .3s ease-in 0s;
  transition: transform .3s ease-in 0s, -webkit-transform .3s ease-in 0s;
  -webkit-transform: translateY(-93px) scale(3);
          transform: translateY(-93px) scale(3); }

.cover__moving-gin--breakthrough {
  transition: all .1s ease-out 0s;
  -webkit-transform: translateY(-400px) scale(3);
          transform: translateY(-400px) scale(3); }

.cover__flash {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  display: block;
  visibility: hidden; }

.cover__flash--visible {
  background-color: #fff;
  visibility: visible;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  transition: opacity .1s linear 0s; }

.cover__loading {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.cover__loading-img {
  width: 100px;
  height: 120px;
  background-image: url("../images/cover/rotate-123-small.png");
  background-repeat: no-repeat;
  background-size: 100px 1014px;
  transition: opacity .3s ease-in 0.01s;
  margin: 0 auto 40px auto;
  -webkit-animation: loading_123-sp 0.5s steps(8) 0s infinite;
          animation: loading_123-sp 0.5s steps(8) 0s infinite; }

@-webkit-keyframes loading_123-sp {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -1014px; } }

@keyframes loading_123-sp {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -1014px; } }

@-webkit-keyframes loading_123-pc {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -2128px; } }

@keyframes loading_123-pc {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -2128px; } }

.cover__loading-text {
  width: 213px;
  height: 56px;
  background-image: url("../images/cover/loading.png");
  background-size: cover; }

.cover__loading--hidden {
  display: none; }

.cover__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  position: fixed;
  overflow-y: auto;
  display: none; }

.cover__overlay--show {
  display: block; }

.cover__base-click {
  width: 100%;
  height: 100%;
  position: fixed; }

.cover__base {
  width: 325px;
  background-color: #000;
  font-size: 14px;
  padding: 24px 30px;
  margin: 90px auto;
  position: relative; }
  .cover__base h1 {
    text-align: center;
    font-size: 26px; }
  .cover__base h2 {
    margin: 20px 0 5px 0;
    font-size: 20px; }
  .cover__base h3 {
    text-decoration: underline;
    font-size: 18px; }
  .cover__base p {
    margin: 5px 0; }
  .cover__base li {
    padding-left: 1em;
    position: relative; }
  .cover__base li:before {
    display: block;
    content: "・";
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 0; }

.cover__close {
  width: 50px;
  height: 58px;
  background-image: url("../images/cover/close-piece.png");
  background-size: cover;
  position: absolute;
  top: -12px;
  right: -8px;
  cursor: pointer; }

.cover__return-wrapper {
  width: 100%;
  margin-top: 24px; }

.cover__return {
  width: 50px;
  height: 58px;
  background-image: url("../images/cover/return-piece.png");
  background-size: cover;
  margin: 0 auto;
  cursor: pointer; }

@media (min-width: 640px) {
  .cover__black {
    height: 600px; }
  .cover__loading-img {
    background-size: 200px 2128px;
    width: 200px;
    height: 266px;
    -webkit-animation: loading_123-pc 0.5s steps(8) 0s infinite;
            animation: loading_123-pc 0.5s steps(8) 0s infinite; }
  .cover__loading-text {
    width: 509px;
    height: 134px; }
  .cover__moving-gin-wrapper {
    width: 620px;
    right: 0; }
  .cover__logo {
    width: 620px; }
  .cover__moving-gin {
    top: 259px;
    left: 543px; }
  .cover__logo-bo {
    bottom: 370px;
    left: 350px; }
  .cover__logo-gin {
    bottom: 190px;
    left: 350px; }
  .cover__base {
    width: 620px;
    font-size: 16px; }
    .cover__base h2 {
      margin: 20px 0 5px 0;
      font-size: 22px; }
    .cover__base h3 {
      text-decoration: underline;
      font-size: 18px; }
    .cover__base p {
      margin: 5px 0; }
    .cover__base li {
      padding-left: 1em;
      position: relative; } }

.documentary {
  border-top: 2px solid #006939;
  border-bottom: 2px solid #006939;
  padding: 6px 0;
  width: 375px;
  height: 200px;
  margin: 0 auto;
  position: relative; }

.documentary__inner {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(3);
          transform: scale(3);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: relative; }

.documentary__inner--anim {
  -webkit-animation: movie-anim .3s ease-in 0s forwards;
          animation: movie-anim .3s ease-in 0s forwards; }

@-webkit-keyframes movie-anim {
  0% {
    -webkit-transform: scale(3);
            transform: scale(3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes movie-anim {
  0% {
    -webkit-transform: scale(3);
            transform: scale(3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

.documentary__play-wrapper {
  width: 100%;
  height: 120px;
  position: absolute;
  top: 100px; }

.documentary__play {
  width: 110px;
  margin: 40px auto 0 auto;
  height: 100%;
  position: relative;
  background-image: url("../images/documentary/play.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.documentary__play--anim {
  -webkit-animation: play-anim .8s ease-in 0s forwards;
          animation: play-anim .8s ease-in 0s forwards; }

@-webkit-keyframes play-anim {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  45% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  68% {
    -webkit-transform: translate(20px, -8px);
            transform: translate(20px, -8px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  72% {
    -webkit-transform: translate(-16px, 5px);
            transform: translate(-16px, 5px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  76% {
    -webkit-transform: translate(14px, -3px);
            transform: translate(14px, -3px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  80% {
    -webkit-transform: translate(-12px, 2px);
            transform: translate(-12px, 2px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  84% {
    -webkit-transform: translate(10px, -1px);
            transform: translate(10px, -1px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  88% {
    -webkit-transform: translate(-8px, 1px);
            transform: translate(-8px, 1px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  92% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  96% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes play-anim {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  45% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  68% {
    -webkit-transform: translate(20px, -8px);
            transform: translate(20px, -8px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  72% {
    -webkit-transform: translate(-16px, 5px);
            transform: translate(-16px, 5px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  76% {
    -webkit-transform: translate(14px, -3px);
            transform: translate(14px, -3px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  80% {
    -webkit-transform: translate(-12px, 2px);
            transform: translate(-12px, 2px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  84% {
    -webkit-transform: translate(10px, -1px);
            transform: translate(10px, -1px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  88% {
    -webkit-transform: translate(-8px, 1px);
            transform: translate(-8px, 1px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  92% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  96% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

.documentary__movie {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative; }

.documentary__movie-cover {
  width: 100%;
  height: 100%;
  background-image: url("../images/documentary/movie.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  cursor: pointer; }
  .documentary__movie-cover.is-hide {
    visibility: hidden; }

@media (min-width: 640px) {
  .documentary {
    width: 620px;
    height: 331px; }
  .documentary__movie-cover {
    background-size: 626px auto;
    background-position: center; }
  .documentary__play-wrapper {
    height: 160px;
    top: 203px; }
  .documentary__play {
    margin-top: 53px;
    width: 146px; } }

.footer__wrapper {
  height: 760px;
  background-color: #000;
  padding: 73px 0 0 0;
  overflow: hidden; }

.recruit {
  margin: 0 auto 75px auto;
  text-align: center;
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }

.recruit__link {
  text-decoration: under-line;
  color: #fff;
  margin-left: 5px; }

.footer__board-wrapper {
  width: 100%; }

.footer__board {
  width: 329px;
  height: 358px;
  margin: 0 auto;
  background-image: url("../images/footer/board.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative; }

.footer__board--anim {
  -webkit-animation: board-anim .2s linear .18s 1;
          animation: board-anim .2s linear .18s 1; }

@-webkit-keyframes board-anim {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  5% {
    -webkit-transform: translate(50px, -10px);
            transform: translate(50px, -10px); }
  10% {
    -webkit-transform: translate(-50px, 10px);
            transform: translate(-50px, 10px); }
  15% {
    -webkit-transform: translate(35px, -8px);
            transform: translate(35px, -8px); }
  20% {
    -webkit-transform: translate(-35px, 8px);
            transform: translate(-35px, 8px); }
  25% {
    -webkit-transform: translate(20px, -5px);
            transform: translate(20px, -5px); }
  30% {
    -webkit-transform: translate(-20px, 5px);
            transform: translate(-20px, 5px); }
  35% {
    -webkit-transform: translate(10px, -2px);
            transform: translate(10px, -2px); }
  40% {
    -webkit-transform: translate(-10px, 2px);
            transform: translate(-10px, 2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

@keyframes board-anim {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  5% {
    -webkit-transform: translate(50px, -10px);
            transform: translate(50px, -10px); }
  10% {
    -webkit-transform: translate(-50px, 10px);
            transform: translate(-50px, 10px); }
  15% {
    -webkit-transform: translate(35px, -8px);
            transform: translate(35px, -8px); }
  20% {
    -webkit-transform: translate(-35px, 8px);
            transform: translate(-35px, 8px); }
  25% {
    -webkit-transform: translate(20px, -5px);
            transform: translate(20px, -5px); }
  30% {
    -webkit-transform: translate(-20px, 5px);
            transform: translate(-20px, 5px); }
  35% {
    -webkit-transform: translate(10px, -2px);
            transform: translate(10px, -2px); }
  40% {
    -webkit-transform: translate(-10px, 2px);
            transform: translate(-10px, 2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

.footer__piece-11kyo {
  width: 21px;
  height: 25px;
  background-image: url("../images/footer/kyo_second.png");
  background-size: cover;
  position: absolute;
  top: 18px;
  left: 291px;
  transition: -webkit-transform .05s ease-in 0s;
  transition: transform .05s ease-in 0s;
  transition: transform .05s ease-in 0s, -webkit-transform .05s ease-in 0s; }

.footer__piece-11kyo--anim {
  -webkit-transform: translate(20px, -140px) rotate(1203deg);
          transform: translate(20px, -140px) rotate(1203deg); }

.footer__piece-21kei {
  width: 23px;
  height: 26px;
  background-image: url("../images/footer/kei_second.png");
  background-size: cover;
  position: absolute;
  top: 18px;
  left: 256px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-21kei--anim {
  -webkit-transform: translate(-40px, -90px) rotate(987deg);
          transform: translate(-40px, -90px) rotate(987deg); }

.footer__piece-31kaku {
  width: 28px;
  height: 31px;
  background-image: url("../images/footer/kaku_second.png");
  background-size: cover;
  position: absolute;
  top: 15px;
  left: 219px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-31kaku--anim {
  -webkit-transform: translate(-48px, -77px) rotate(1047deg);
          transform: translate(-48px, -77px) rotate(1047deg); }

.footer__piece-32kin {
  width: 24px;
  height: 27px;
  background-image: url("../images/footer/kin_second.png");
  background-size: cover;
  position: absolute;
  top: 54px;
  left: 221px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-32kin--anim {
  -webkit-transform: translate(-9px, -90px) rotate(917deg);
          transform: translate(-9px, -90px) rotate(917deg); }

.footer__piece-42gyoku {
  width: 28px;
  height: 31px;
  background-image: url("../images/footer/gyoku.png");
  background-size: cover;
  position: absolute;
  top: 52px;
  left: 185px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-42gyoku--anim {
  -webkit-transform: translate(-23px, -40px) rotate(780deg);
          transform: translate(-23px, -40px) rotate(780deg); }

.footer__piece-33gin {
  width: 24px;
  height: 27px;
  background-image: url("../images/footer/gin_second.png");
  background-size: cover;
  position: absolute;
  top: 91px;
  left: 221px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-33gin--anim {
  -webkit-transform: translate(-80px, -130px) rotate(1107deg);
          transform: translate(-80px, -130px) rotate(1107deg); }

.footer__piece-43gin {
  width: 24px;
  height: 27px;
  background-image: url("../images/footer/gin_second.png");
  background-size: cover;
  position: absolute;
  top: 91px;
  left: 187px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-43gin--anim {
  -webkit-transform: translate(2px, -51px) rotate(917deg);
          transform: translate(2px, -51px) rotate(917deg); }

.footer__piece-13fu {
  width: 20px;
  height: 25px;
  background-image: url("../images/footer/fu_second.png");
  background-size: cover;
  position: absolute;
  top: 92px;
  left: 291px;
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s; }

.footer__piece-13fu--anim {
  -webkit-transform: translate(17px, -171px) rotate(955deg);
          transform: translate(17px, -171px) rotate(955deg); }

.footer__piece-24fu {
  width: 20px;
  height: 25px;
  background-image: url("../images/footer/fu_second.png");
  background-size: cover;
  position: absolute;
  top: 129px;
  left: 257px;
  transition: -webkit-transform .5s ease-in .1s;
  transition: transform .5s ease-in .1s;
  transition: transform .5s ease-in .1s, -webkit-transform .5s ease-in .1s; }

.footer__piece-24fu--anim {
  -webkit-transform: translate(-410px, -500px) scale(7) rotate(2160deg);
          transform: translate(-410px, -500px) scale(7) rotate(2160deg); }

.footer__piece-34fu {
  width: 20px;
  height: 25px;
  background-image: url("../images/footer/fu_second.png");
  background-size: cover;
  position: absolute;
  top: 129px;
  left: 223px;
  transition: -webkit-transform .1s ease-in .20s;
  transition: transform .1s ease-in .20s;
  transition: transform .1s ease-in .20s, -webkit-transform .1s ease-in .20s; }

.footer__piece-34fu--anim {
  -webkit-transform: translate(-13px, -123px) rotate(845deg);
          transform: translate(-13px, -123px) rotate(845deg); }

.footer__piece-44fu {
  width: 20px;
  height: 25px;
  background-image: url("../images/footer/fu_second.png");
  background-size: cover;
  position: absolute;
  top: 129px;
  left: 189px;
  transition: -webkit-transform .1s ease-in .2s;
  transition: transform .1s ease-in .2s;
  transition: transform .1s ease-in .2s, -webkit-transform .1s ease-in .2s; }

.footer__piece-44fu--anim {
  -webkit-transform: translate(-17px, -43px) rotate(685deg);
          transform: translate(-17px, -43px) rotate(685deg); }

.footer__piece-35gin {
  width: 150px;
  height: 175px;
  position: absolute;
  top: 91px;
  left: 157px;
  background-image: url("../images/footer/gin_first.png");
  background-size: cover;
  transition: -webkit-transform .1s ease-in-out 0s;
  transition: transform .1s ease-in-out 0s;
  transition: transform .1s ease-in-out 0s, -webkit-transform .1s ease-in-out 0s;
  -webkit-transform: scale(0.16);
          transform: scale(0.16); }

.footer__piece-35gin:hover {
  cursor: pointer; }

.footer__piece-35gin--ready {
  transition: -webkit-transform 1s ease-in-out 0s;
  transition: transform 1s ease-in-out 0s;
  transition: transform 1s ease-in-out 0s, -webkit-transform 1s ease-in-out 0s;
  -webkit-transform: translate(10px, 221px) scale(1);
          transform: translate(10px, 221px) scale(1); }

.footer__piece-35gin--dougin {
  transition: -webkit-transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s;
  transition: transform .1s ease-in 0s, -webkit-transform .1s ease-in 0s;
  -webkit-transform: translate(35px, -38px) scale(0.16);
          transform: translate(35px, -38px) scale(0.16); }

.footer__piece-35gin--anim {
  -webkit-animation: gin-anim .1s infinite;
          animation: gin-anim .1s infinite; }

.footer__piece-35gin--hidden {
  transition: opacity .3s ease-in 2s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.footer__piece-35gin--out {
  -webkit-transform: translateY(300px);
          transform: translateY(300px); }

@-webkit-keyframes gin-anim {
  0% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  5% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  15% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  30% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  45% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  60% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  75% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  90% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  100% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); } }

@keyframes gin-anim {
  0% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  5% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  15% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  30% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  45% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  60% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  75% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); }
  90% {
    -webkit-transform: translate(35px, -58px) scale(0.16);
            transform: translate(35px, -58px) scale(0.16); }
  100% {
    -webkit-transform: translate(35px, -18px) scale(0.16);
            transform: translate(35px, -18px) scale(0.16); } }

.footer__piece-35gin-top {
  position: absolute;
  font-size: 20px;
  top: 480px;
  left: 193px;
  transition: opacity 1s linear 1s; }

@media (min-width: 640px) {
  .footer__board-wrapper {
    width: 620px;
    margin: 0 auto; }
  .footer__board {
    margin: 0 0 0 auto; }
  .recruit {
    font-size: 18px; } }

.interview__inner {
  width: 325px;
  margin: 0 auto;
  padding: 0 0 15px 0; }

.interview__title-wrapper {
  width: 375px;
  margin: 0 auto; }

.interview__title {
  height: 55px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 55px;
  background-color: #fff;
  color: #006939;
  font-size: 22px; }

.interview__image {
  height: 240px;
  width: 100%;
  background-image: url("../images/interview/interview.png");
  background-size: 100% auto;
  background-position-x: center;
  background-repeat: no-repeat;
  margin: 0 auto 22px auto; }

.interview__sub-title {
  font-size: 17px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.interview__sub-title-line {
  border-bottom: 1px solid;
  border-color: #fff;
  width: 52px; }

.interview__recommend-123 {
  margin-top: 15px;
  font-size: 13.5px;
  margin-bottom: 35px; }

.interview__recommend-original {
  text-align: center;
  font-size: 21px;
  margin: 0 auto; }

@media (min-width: 640px) {
  .interview__title-wrapper {
    width: 620px;
    font-size: 26px; }
  .interview__inner {
    width: 620px;
    padding-bottom: 0; }
  .interview__sub-title {
    font-size: 22px; }
  .interview__sub-title-line {
    width: 268px; }
  .interview__recommend-original {
    font-size: 26px; }
  .interview__recommend-123 {
    font-size: 18px; } }

.intro {
  background-image: url("../images/intro/board.png");
  background-size: 526px auto;
  background-position: center;
  background-repeat: no-repeat;
  padding: 38px 0; }

.intro__inner {
  width: 325px;
  margin: 0 auto;
  padding: 36px 0 5px 0; }

.intro__inner-title {
  text-align: center;
  margin: 0 0 35px 0;
  font-size: 26px;
  letter-spacing: -1px; }
  .intro__inner-title span {
    display: block; }

.intro__detail {
  text-align: center;
  font-size: 17.5px;
  letter-spacing: -1px; }
  .intro__detail .intro__paragraph {
    margin: 0 0 35px 0; }
  .intro__detail span {
    margin-left: 3px; }

@media (min-width: 640px) {
  .intro {
    background-size: 391px auto; }
  .intro__inner {
    width: 620px;
    padding-top: 52px; }
  .intro__detail {
    font-size: 18px; } }

.kv--anim {
  -webkit-animation: kv-bounce .7s linear 0s 1;
          animation: kv-bounce .7s linear 0s 1; }

@-webkit-keyframes kv-bounce {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px); }
  5% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px); }
  10% {
    -webkit-transform: translateY(-120px);
            transform: translateY(-120px); }
  15% {
    -webkit-transform: translateY(120px);
            transform: translateY(120px); }
  20% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px); }
  25% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px); }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes kv-bounce {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px); }
  5% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px); }
  10% {
    -webkit-transform: translateY(-120px);
            transform: translateY(-120px); }
  15% {
    -webkit-transform: translateY(120px);
            transform: translateY(120px); }
  20% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px); }
  25% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px); }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.kv__inner {
  position: relative;
  overflow: hidden; }

.kv__sky {
  width: 100%;
  height: 456px;
  background-image: url("../images/kv/sky-before.png");
  background-size: cover; }

.kv__sky--after {
  background-image: url("../images/kv/sky-after.png"); }

.kv__oute {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-image: url("../images/kv/oute.png");
  background-size: 419px 170px;
  background-position: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.kv__oute-wrapper {
  width: 100%;
  height: 170px;
  overflow: hidden;
  position: absolute;
  top: -8px; }

.kv__oute--after {
  -webkit-animation: label-anim .2s linear 2.5s forwards;
          animation: label-anim .2s linear 2.5s forwards; }

@-webkit-keyframes oute-anim {
  0% {
    -webkit-transform: scale(5);
            transform: scale(5);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes oute-anim {
  0% {
    -webkit-transform: scale(5);
            transform: scale(5);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

.kv__main-image {
  width: 100%;
  height: 403px;
  background-image: url("../images/kv/top_of_123-before.png");
  background-size: cover;
  position: absolute;
  top: 227px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 531px 381px;
  transition: -webkit-transform 2s linear 0s;
  transition: transform 2s linear 0s;
  transition: transform 2s linear 0s, -webkit-transform 2s linear 0s; }

.kv__main-image--anim {
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px); }

.kv__main-image--after {
  background-image: url("../images/kv/top_of_123-after.png"); }

.kv__hand-before-wrapper {
  width: 100%;
  height: 197px;
  position: absolute;
  top: 375px; }

.kv__hand-before--shaking {
  -webkit-animation: hand-before-anim 3.8s ease-out 0s forwards;
          animation: hand-before-anim 3.8s ease-out 0s forwards; }

@-webkit-keyframes hand-before-anim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  25% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  55% {
    -webkit-transform: translateY(-140px);
            transform: translateY(-140px); }
  80% {
    -webkit-transform: translateY(-140px);
            transform: translateY(-140px); }
  97% {
    -webkit-transform: translateY(-160px);
            transform: translateY(-160px); }
  100% {
    -webkit-transform: translateY(-160px);
            transform: translateY(-160px); } }

@keyframes hand-before-anim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  25% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  55% {
    -webkit-transform: translateY(-140px);
            transform: translateY(-140px); }
  80% {
    -webkit-transform: translateY(-140px);
            transform: translateY(-140px); }
  97% {
    -webkit-transform: translateY(-160px);
            transform: translateY(-160px); }
  100% {
    -webkit-transform: translateY(-160px);
            transform: translateY(-160px); } }

.kv__hand-before {
  width: 375px;
  height: 100%;
  background-image: url("../images/kv/hand-before.png");
  background-size: 340px 263px;
  background-position-x: right;
  background-repeat: no-repeat;
  margin: 0 auto;
  -webkit-transform: translateX(-237px);
          transform: translateX(-237px); }

.kv__hand-before--hidden {
  visibility: hidden; }

.kv__fog-back {
  width: 100%;
  height: 513px;
  background-image: url("../images/kv/fog-back.png");
  background-size: 1240px 483px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -55px;
  -webkit-animation: fog-back-anim 10s ease-in-out 0s infinite;
          animation: fog-back-anim 10s ease-in-out 0s infinite; }

@-webkit-keyframes fog-back-anim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); }
  40% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  70% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fog-back-anim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); }
  40% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  70% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.kv__town {
  width: 100%;
  height: 332px;
  background-image: url("../images/kv/town-before.png");
  background-size: auto 334px;
  background-position: center;
  position: absolute;
  top: 304px; }

.kv__fog-front-wrapper {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 350px;
  background-image: url("../images/kv/fog-r.png");
  background-size: auto 100%; }

.kv__fog-front {
  width: 375px;
  height: 100%;
  margin: 0 auto;
  position: relative; }

.kv__fog-left {
  width: 1158px;
  height: 626px;
  background-image: url("../images/kv/fog-left.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 10px;
  right: 250px; }

.kv__fog-right {
  width: 1155px;
  height: 645px;
  background-image: url("../images/kv/fog-right.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -20px;
  left: 260px; }

.kv__fog--hidden {
  display: none; }

.kv__town--after {
  background-image: url("../images/kv/town-after.png"); }

.kv__board-side {
  width: 100%;
  height: 210px;
  background-image: url("../images/kv/board-side.png");
  background-size: 618px auto;
  background-position: center -16px;
  background-repeat: no-repeat;
  margin: -19px 0 0 0;
  position: relative; }

.kv__hand-after-wrapper {
  width: 100%;
  height: 225px;
  position: absolute;
  top: 283px;
  transition: -webkit-transform .3s linear 0s;
  transition: transform .3s linear 0s;
  transition: transform .3s linear 0s, -webkit-transform .3s linear 0s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(1.15);
          transform: scale(1.15); }

.kv__hand-after {
  width: 375px;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: translateX(-121px);
          transform: translateX(-121px);
  background-image: url("../images/kv/hand-after.png");
  background-size: auto 210px;
  background-position-x: right;
  background-repeat: no-repeat;
  background-position: 0 0; }

.kv__hand-after--visible {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.kv__board-side--after {
  background-image: url("../images/kv/board-side-after.png"); }

.kv__pieces {
  width: 100%;
  height: 134px;
  background-image: url("../images/kv/pieces.png");
  background-size: auto 134px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 354px;
  transition: opacity 100ms ease-in 0ms, -webkit-transform 100ms ease-in 100ms;
  transition: transform 100ms ease-in 100ms, opacity 100ms ease-in 0ms;
  transition: transform 100ms ease-in 100ms, opacity 100ms ease-in 0ms, -webkit-transform 100ms ease-in 100ms; }

.kv__pieces--after {
  -webkit-transform: scale(0.3) translateY(-170px);
          transform: scale(0.3) translateY(-170px);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.kv__flying-pieces {
  width: 100%;
  height: 345px;
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  top: 273px;
  -webkit-transform: scale(0.2);
          transform: scale(0.2);
  transition: -webkit-transform 100ms cubic-bezier(0, 1.07, 0.9, 0.92) 100ms;
  transition: transform 100ms cubic-bezier(0, 1.07, 0.9, 0.92) 100ms;
  transition: transform 100ms cubic-bezier(0, 1.07, 0.9, 0.92) 100ms, -webkit-transform 100ms cubic-bezier(0, 1.07, 0.9, 0.92) 100ms; }

.kv__flying-pieces-inner {
  width: 375px;
  height: 460px;
  margin: 0 auto;
  position: relative; }

.kv__flying-pieces--after {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px); }

.kv__flying-kyuyo {
  position: absolute;
  top: 1px;
  left: -57px; }

.kv__flying-kyuyo-para {
  width: 113px;
  height: 112px;
  background-image: url("../images/kv/flying-kyuyo.png");
  background-size: cover;
  position: absolute;
  top: 0px; }

.kv__flying-paper {
  position: absolute;
  top: 144px;
  left: 317px; }

.kv__flying-paper-para {
  position: absolute;
  width: 63px;
  height: 72px;
  background-image: url("../images/kv/flying-paper.png");
  background-size: cover;
  top: 0px; }

.kv__flying-kintai {
  position: absolute;
  top: 188px;
  left: 331px; }

.kv__flying-kintai-para {
  position: absolute;
  width: 98px;
  height: 97px;
  background-image: url("../images/kv/flying-kintai.png");
  background-size: cover;
  top: 0px; }

.kv__flying-romu {
  position: absolute;
  top: 21px;
  left: 279px; }

.kv__flying-romu-para {
  width: 127px;
  height: 133px;
  background-image: url("../images/kv/flying-romu.png");
  background-size: cover;
  position: absolute;
  top: 0px; }

.kv__flying-security {
  position: absolute;
  top: 121px;
  left: -54px; }

.kv__flying-security-para {
  width: 81px;
  height: 76px;
  background-image: url("../images/kv/flying-security.png");
  background-size: cover;
  position: absolute;
  top: 0px; }

.kv__flying-plane {
  position: absolute;
  top: 199px;
  left: -65px; }

.kv__flying-plane-para {
  width: 105px;
  height: 134px;
  background-image: url("../images/kv/flying-plane.png");
  background-size: cover;
  position: absolute;
  top: 0px; }

.kv__challenge-wrapper {
  width: 100%;
  height: 188px;
  position: absolute;
  top: -500px; }

.kv__challenge-wrapper--anim {
  visibility: visible;
  -webkit-animation: challenge-bounce 1s ease-in 0s forwards;
          animation: challenge-bounce 1s ease-in 0s forwards; }

@-webkit-keyframes challenge-bounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  85% {
    -webkit-transform: translateY(840px);
            transform: translateY(840px); }
  90% {
    -webkit-transform: translateY(780px);
            transform: translateY(780px); }
  95% {
    -webkit-transform: translateY(810px);
            transform: translateY(810px); }
  100% {
    -webkit-transform: translateY(800px);
            transform: translateY(800px); } }

@keyframes challenge-bounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  85% {
    -webkit-transform: translateY(840px);
            transform: translateY(840px); }
  90% {
    -webkit-transform: translateY(780px);
            transform: translateY(780px); }
  95% {
    -webkit-transform: translateY(810px);
            transform: translateY(810px); }
  100% {
    -webkit-transform: translateY(800px);
            transform: translateY(800px); } }

.kv__challenge {
  width: 375px;
  height: 100%;
  margin: 0 auto;
  background-size: 368px 188px;
  background-image: url("../images/kv/challenge.png");
  background-position: center;
  background-repeat: no-repeat;
  color: transparent; }

.kv__down-wrapper {
  width: 100%;
  height: 15px;
  position: absolute;
  top: 498px;
  -webkit-animation: down-anim 1.5s ease-in-out 0s infinite;
          animation: down-anim 1.5s ease-in-out 0s infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: opacity .5s ease-in-out .5s; }

@-webkit-keyframes down-anim {
  0% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); } }

@keyframes down-anim {
  0% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px); } }

.kv__down-wrapper--arrive {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.kv__down {
  width: 42px;
  height: 15px;
  background-image: url("../images/kv/down.png");
  margin: 0 auto;
  background-size: cover;
  position: relative; }

.kv__down:after {
  content: "scroll";
  top: 12px;
  left: 2px;
  position: absolute; }

.kv__sns-wrapper {
  width: 100%;
  position: absolute;
  bottom: 0px; }

.kv__sns {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 245px;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto; }

.kv__sns-fb {
  width: 68px;
  height: 75px;
  background-image: url("../images/kv/fb-piece.png");
  background-size: cover;
  cursor: pointer; }

.kv__sns-fb:hover {
  opacity: .8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.kv__sns-tw {
  width: 68px;
  height: 75px;
  background-image: url("../images/kv/twitter-piece.png");
  background-size: cover;
  cursor: pointer; }

.kv__sns-tw:hover {
  opacity: .8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.kv__sns-line {
  width: 68px;
  height: 75px;
  background-image: url("../images/kv/line-piece.png");
  background-size: cover;
  cursor: pointer; }

.kv__sns-line:hover {
  opacity: .8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

@-webkit-keyframes sns-anim {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  5% {
    -webkit-transform: translate(30px, -10px);
            transform: translate(30px, -10px); }
  10% {
    -webkit-transform: translate(-28px, 10px);
            transform: translate(-28px, 10px); }
  15% {
    -webkit-transform: translate(24px, -8px);
            transform: translate(24px, -8px); }
  20% {
    -webkit-transform: translate(-18px, 8px);
            transform: translate(-18px, 8px); }
  25% {
    -webkit-transform: translate(12px, -5px);
            transform: translate(12px, -5px); }
  30% {
    -webkit-transform: translate(-8px, 5px);
            transform: translate(-8px, 5px); }
  35% {
    -webkit-transform: translate(6px, -2px);
            transform: translate(6px, -2px); }
  40% {
    -webkit-transform: translate(-3px, 2px);
            transform: translate(-3px, 2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

@keyframes sns-anim {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  5% {
    -webkit-transform: translate(30px, -10px);
            transform: translate(30px, -10px); }
  10% {
    -webkit-transform: translate(-28px, 10px);
            transform: translate(-28px, 10px); }
  15% {
    -webkit-transform: translate(24px, -8px);
            transform: translate(24px, -8px); }
  20% {
    -webkit-transform: translate(-18px, 8px);
            transform: translate(-18px, 8px); }
  25% {
    -webkit-transform: translate(12px, -5px);
            transform: translate(12px, -5px); }
  30% {
    -webkit-transform: translate(-8px, 5px);
            transform: translate(-8px, 5px); }
  35% {
    -webkit-transform: translate(6px, -2px);
            transform: translate(6px, -2px); }
  40% {
    -webkit-transform: translate(-3px, 2px);
            transform: translate(-3px, 2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

@media (min-width: 640px) {
  .kv__main-image {
    top: 117px; }
  .kv__hand-before-wrapper {
    height: 250px;
    top: 295px; }
  .kv__hand-after-wrapper {
    top: 183px; }
  .kv__fog-back {
    top: -115px; }
  .kv__sky {
    height: 425px; }
  .kv__town {
    top: 254px; }
  .kv__oute-wrapper {
    height: 310px;
    top: -42px; }
  .kv__oute {
    background-image: url("../images/kv/oute-pc.png");
    background-size: 735px auto; }
  .kv__board-side {
    margin: -65px 0 0 0; }
  .kv__pieces {
    top: 278px; }
  .kv__flying-pieces {
    width: 100%;
    height: 460px; }
  .kv__flying-pieces--after {
    -webkit-transform: translateY(-220px);
            transform: translateY(-220px); }
  .kv__flying-kyuyo {
    top: 63px;
    left: -221px; }
  .kv__flying-security {
    top: 271px;
    left: -220px; }
  .kv__flying-paper {
    top: 214px;
    left: 423px; }
  .kv__flying-kintai {
    top: 278px;
    left: 541px; }
  .kv__flying-romu {
    top: 91px;
    left: 450px; }
  .kv__flying-plane {
    visibility: hidden; }
  .kv__down-wrapper {
    visibility: hidden; }
  .kv__challenge {
    width: 470px;
    background-size: 470px auto;
    background-image: url("../images/kv/challenge.png"); }
  .kv__challenge-wrapper {
    top: -630px;
    height: 255px; }
  .kv__sns-wrapper {
    bottom: 0px; }
  .kv__sns {
    width: 186px; }
  .kv__sns-line {
    display: none; }
  .kv__sns-fb:hover {
    -webkit-animation: sns-anim .2s linear 0s 1;
            animation: sns-anim .2s linear 0s 1; }
  .kv__sns-tw:hover {
    -webkit-animation: sns-anim .2s linear 0s 1;
            animation: sns-anim .2s linear 0s 1; } }

.present {
  background-color: #fff;
  color: #000;
  overflow: hidden; }

.present__inner {
  width: 325px;
  margin: 0 auto;
  padding: 25px 0 35px 0; }

.present__title {
  text-align: center;
  color: #006939;
  margin-bottom: 10px;
  font-size: 18px;
  letter-spacing: -1px; }
  .present__title span {
    display: block; }
  .present__title strong {
    font-size: 31px;
    letter-spacing: normal;
    display: block; }

.present__image-wrapper {
  height: 216px;
  width: 100%;
  margin-bottom: 25px;
  position: relative; }

.present__image {
  height: 100%;
  width: 100%;
  background-image: url("../images/present/present-sp.png");
  background-size: cover; }

.present__image-pieces {
  height: 98px;
  width: 139px;
  background-image: url("../images/present/present-pieces.png");
  background-size: cover;
  position: absolute;
  top: 108px;
  left: 6px; }

.js-present__step {
  overflow: hidden;
  transition: all 0.1s ease-out 0s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(3);
          transform: scale(3);
  pointer-events: none; }

.js-present__step--anim {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
  pointer-events: auto; }

.present__step-hl-area {
  height: 55px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  background-color: #006939;
  margin-bottom: 5px; }

.present__step-hl-area-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.present__step-hl-area--adj {
  padding-bottom: 5px; }

.present__step-num {
  margin-right: .5em;
  font-size: 16px; }
  .present__step-num strong {
    font-size: 23px; }

.present__step-num--adj {
  margin-right: 0; }

.present__step-num--multi-line {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center; }

.present__step-headline {
  font-size: 16px;
  letter-spacing: -1px; }

.present__step-detail {
  font-size: 16px; }
  .present__step-detail a {
    color: #006939;
    text-decoration: none; }

.present__step-detail-txt {
  margin-bottom: 5px; }

.present__step-follow {
  display: block;
  text-align: center;
  margin: 0 0 5px 0; }

.present__step-follow:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.present__step-next {
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 15px solid #006939;
  margin: 0 auto -5px auto; }

.present__tweet {
  text-decoration: none; }

.present__tweet-inner {
  margin: 30px auto 0 auto;
  height: 50px;
  width: 260px; }

.present__tweet-bg {
  height: 100%;
  width: 100%;
  border-radius: 25px;
  background-color: #55acee;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.present__tweet-bg:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.present__tweet-text {
  color: #fff;
  font-size: 20px;
  line-height: 50px; }

.present__tweet-img {
  height: 26px;
  width: 30px;
  margin-right: 5px;
  background-image: url("../images/present/twitter-icon.png");
  background-size: contain;
  background-repeat: no-repeat; }

.present__tweet:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.present__policy {
  text-align: center;
  margin-top: 30px;
  text-decoration: underline;
  cursor: pointer; }

.present__april {
  text-align: center;
  margin: 30px auto 0 auto;
  font-size: 8px; }

.present__close {
  margin: 30px 0 20px 0;
  padding: 20px 0;
  width: 100%;
  background-color: #454545; }

.present__close-inner {
  text-align: center;
  font-size: 16px;
  color: #fff;
  padding-left: 9px; }

@media (min-width: 640px) {
  .present__inner {
    width: 620px;
    padding: 65px 0; }
  .present__title {
    font-size: 26px;
    line-height: 1.3; }
    .present__title strong {
      display: inline;
      font-size: 60px; }
  .present__step-next {
    margin: 10px auto 20px auto; }
  .present__step-detail {
    width: 570px;
    margin: 0 auto;
    font-size: 18px; }
  .spec-freee__detail-img {
    width: 120px; }
  .present__image-wrapper {
    height: 206px;
    margin-bottom: 60px; }
  .present__image {
    background-image: url("../images/present/present-pc.png"); }
  .present__image-pieces {
    display: none; }
  .present__step-num--multi-line {
    -webkit-align-self: auto;
        -ms-flex-item-align: auto;
                -ms-grid-row-align: auto;
            align-self: auto; }
  .present__step-hl-area {
    margin-bottom: 10px; }
  .present__step-num {
    font-size: 18px; }
    .present__step-num strong {
      font-size: 26px; }
  .present__step-headline {
    font-size: 22px; }
  .present__april {
    font-size: 18px; }
  .present__close-inner {
    font-size: 22px; } }

.spec-123 {
  overflow: hidden; }

.spec-123__title-wrapper {
  overflow: hidden;
  height: 105px;
  width: 100%; }

.spec-123__title-bg {
  width: 100%;
  height: 100%;
  background-image: url("../images/spec_123/band.png");
  background-size: 584px auto;
  background-repeat: no-repeat;
  background-position: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.spec-123__title {
  width: 100%;
  height: 70px;
  font-size: 25px;
  -webkit-transform: rotate(1.9deg) translate(0px, 4px);
          transform: rotate(1.9deg) translate(0px, 4px);
  line-height: 32px; }

.spec-123__title-first {
  text-align: center;
  display: block; }

.spec-123__title-second {
  text-align: center;
  display: block; }

.spec-123__inner {
  width: 325px;
  margin: 0 auto;
  padding: 20px 0 50px 0; }

.spec-123__imagine {
  border: 2px solid #006939;
  height: 347px;
  position: relative; }

.spec-123__imagine-inner {
  width: 100%;
  height: 100%;
  background-image: url("../images/spec_123/grid.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all .5s ease-in .7s; }

.spec-123__imagine-inner--arrival {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.spec-123__imagine-tri-wrapper {
  bottom: 0;
  left: 30px;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
  position: absolute; }

.spec-123__imagine-tri-base {
  content: "";
  width: 0;
  height: 0;
  border-top: 40px solid #006939;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  position: absolute; }

.spec-123__imagine-tri-line {
  content: "";
  width: 0;
  height: 0;
  border-top: 40px solid #000;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  position: absolute;
  top: -4px; }

.spec-123__headline {
  margin: 0 13px 12px 13px;
  font-size: 21px;
  line-height: 52px;
  text-align: center;
  border-bottom: 1px solid #006939; }

.spec-123__detail {
  margin: 0 16px;
  font-size: 16px; }

.spec-123__img-wrapper {
  position: relative; }

.spec-123__piece-yamada {
  width: 52px;
  height: 53px;
  background-image: url("../images/spec_123/piece_yamada.png");
  position: absolute;
  background-size: cover;
  top: 32px;
  left: 26px;
  -webkit-animation: float-piece-back 2s infinite;
          animation: float-piece-back 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms; }

.spec-123__piece-nishiyama {
  width: 58px;
  height: 60px;
  background-image: url("../images/spec_123/piece_nishiyama.png");
  position: absolute;
  background-size: cover;
  top: 14px;
  left: 97px;
  -webkit-animation: float-piece-back 2s infinite;
          animation: float-piece-back 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms; }

.spec-123__piece-horiuchi {
  width: 55px;
  height: 54px;
  background-image: url("../images/spec_123/piece_horiuchi.png");
  position: absolute;
  background-size: cover;
  top: 16px;
  left: 180px;
  -webkit-animation: float-piece-back 2s infinite;
          animation: float-piece-back 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms; }

.spec-123__piece-tanaka {
  width: 58px;
  height: 62px;
  background-image: url("../images/spec_123/piece_tanaka.png");
  position: absolute;
  background-size: cover;
  top: 34px;
  left: 240px;
  -webkit-animation: float-piece-back 2s infinite;
          animation: float-piece-back 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.spec-123__inspiration {
  width: 174px;
  height: 159px;
  background-image: url("../images/spec_123/inspiration.png");
  position: absolute;
  background-size: cover;
  top: 47px;
  left: 83px; }

.spec-123__piece-sato-sha {
  width: 54px;
  height: 60px;
  background-image: url("../images/spec_123/piece-sato-sha.png");
  position: absolute;
  background-size: cover;
  top: 73px;
  left: 60px;
  -webkit-animation: float-piece-sato-sha 2s infinite;
          animation: float-piece-sato-sha 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms; }

.spec-123__piece-sato {
  width: 67px;
  height: 70px;
  background-image: url("../images/spec_123/piece_sato.png");
  position: absolute;
  background-size: cover;
  top: 53px;
  left: 49px;
  -webkit-animation: float-piece 2s infinite;
          animation: float-piece 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms; }

.spec-123__piece-kato-sha {
  width: 54px;
  height: 62px;
  background-image: url("../images/spec_123/piece-kato-sha.png");
  position: absolute;
  background-size: cover;
  top: 59px;
  left: 145px;
  -webkit-animation: float-piece-kato-sha 2s infinite;
          animation: float-piece-kato-sha 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.spec-123__piece-kato {
  width: 62px;
  height: 71px;
  background-image: url("../images/spec_123/piece_kato.png");
  position: absolute;
  background-size: cover;
  top: 36px;
  left: 130px;
  -webkit-animation: float-piece 2s infinite;
          animation: float-piece 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.spec-123__piece-nakamura-sha {
  width: 53px;
  height: 67px;
  background-image: url("../images/spec_123/piece-nakamura-sha.png");
  position: absolute;
  background-size: cover;
  top: 79px;
  left: 202px;
  -webkit-animation: float-piece-nkm-sha 2s infinite;
          animation: float-piece-nkm-sha 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms; }

.spec-123__piece-nakamura {
  width: 61px;
  height: 79px;
  background-image: url("../images/spec_123/piece_nakamura.png");
  position: absolute;
  background-size: cover;
  top: 55px;
  left: 202px;
  -webkit-animation: float-piece 2s infinite;
          animation: float-piece 2s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms; }

@-webkit-keyframes float-piece {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  50% {
    -webkit-transform: translate(0px, 10px);
            transform: translate(0px, 10px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes float-piece {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  50% {
    -webkit-transform: translate(0px, 10px);
            transform: translate(0px, 10px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes float-piece-back {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  50% {
    -webkit-transform: translate(0px, 6px);
            transform: translate(0px, 6px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes float-piece-back {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  50% {
    -webkit-transform: translate(0px, 6px);
            transform: translate(0px, 6px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes float-piece-nkm-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

@keyframes float-piece-nkm-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

@-webkit-keyframes float-piece-sato-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

@keyframes float-piece-sato-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

@-webkit-keyframes float-piece-kato-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

@keyframes float-piece-kato-sha {
  0% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(6px, 0px);
            transform: translate(6px, 0px); } }

.spec-123__img-create-paper {
  width: 166px;
  height: 212px;
  background-image: url("../images/spec_123/paper.png");
  background-size: cover;
  position: absolute;
  left: 19px;
  top: 5px; }

.spec-123__img-writing-wrapper {
  width: 255px;
  height: 148px;
  height: 172px;
  position: absolute;
  left: 45px;
  top: 38px;
  overflow: hidden; }

.spec-123__img-writing-123 {
  width: 175px;
  height: 210px;
  background-image: url("../images/spec_123/writing-123.png");
  background-size: cover;
  -webkit-animation: writing 2s infinite;
          animation: writing 2s infinite;
  left: 100px;
  position: absolute; }

@-webkit-keyframes writing {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); }
  50% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); }
  75% {
    -webkit-transform: translate(0px, 0px) rotateZ(-15deg);
            transform: translate(0px, 0px) rotateZ(-15deg);
    -webkit-transform-origin: 80px 200px;
            transform-origin: 80px 200px; }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); } }

@keyframes writing {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); }
  50% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); }
  75% {
    -webkit-transform: translate(0px, 0px) rotateZ(-15deg);
            transform: translate(0px, 0px) rotateZ(-15deg);
    -webkit-transform-origin: 80px 200px;
            transform-origin: 80px 200px; }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg); } }

.spec-123__img-123-eye {
  width: 200px;
  height: 212px;
  background-image: url("../images/spec_123/123-eye.png");
  background-size: cover;
  position: absolute;
  left: 12px;
  top: 9px; }

.spec-123__img-123-eye-beam-left {
  width: 441px;
  height: 164px;
  background-image: url("../images/spec_123/beam-left.png");
  background-size: 441px 164px;
  position: absolute;
  left: 163px;
  top: -9px;
  -webkit-animation: beam-left-anim 0.1s steps(2) infinite;
          animation: beam-left-anim 0.1s steps(2) infinite; }

@-webkit-keyframes beam-left-anim {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  50% {
    -webkit-transform: scale(1, -1) translateY(-25px);
            transform: scale(1, -1) translateY(-25px); }
  100% {
    -webkit-transform: scale(1, -1) translateY(-25px);
            transform: scale(1, -1) translateY(-25px); } }

@keyframes beam-left-anim {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  50% {
    -webkit-transform: scale(1, -1) translateY(-25px);
            transform: scale(1, -1) translateY(-25px); }
  100% {
    -webkit-transform: scale(1, -1) translateY(-25px);
            transform: scale(1, -1) translateY(-25px); } }

.spec-123__img-123-eye-flash-left {
  width: 79px;
  height: 60px;
  background-image: url("../images/spec_123/eye-flash-left.png");
  background-size: cover;
  position: absolute;
  left: 166px;
  top: 55px; }

.spec-123__img-123-eye-beam-right {
  width: 441px;
  height: 164px;
  background-image: url("../images/spec_123/beam-right.png");
  background-size: 441px 164px;
  position: absolute;
  left: 91px;
  top: 8px;
  -webkit-animation: beam-right-anim 0.1s steps(2) infinite;
          animation: beam-right-anim 0.1s steps(2) infinite; }

@-webkit-keyframes beam-right-anim {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  50% {
    -webkit-transform: scale(1, -1) translateY(-23px);
            transform: scale(1, -1) translateY(-23px); }
  100% {
    -webkit-transform: scale(1, -1) translateY(-23px);
            transform: scale(1, -1) translateY(-23px); } }

@keyframes beam-right-anim {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  50% {
    -webkit-transform: scale(1, -1) translateY(-23px);
            transform: scale(1, -1) translateY(-23px); }
  100% {
    -webkit-transform: scale(1, -1) translateY(-23px);
            transform: scale(1, -1) translateY(-23px); } }

.spec-123__img-123-eye-flash-right {
  width: 72px;
  height: 53px;
  background-image: url("../images/spec_123/eye-flash-right.png");
  background-size: cover;
  position: absolute;
  left: 96px;
  top: 74px; }

.spec-123__img-yagura-left {
  width: 111px;
  height: 196px;
  background-image: url("../images/spec_123/yagura-left.png");
  background-size: cover;
  position: absolute;
  left: 90px;
  top: 15px;
  -webkit-animation: left-123 15s ease-out infinite;
          animation: left-123 15s ease-out infinite; }

.spec-123__img-yagura-right {
  width: 111px;
  height: 196px;
  background-image: url("../images/spec_123/yagura-right.png");
  background-size: cover;
  position: absolute;
  left: 130px;
  top: 14px;
  -webkit-animation: right-123 15s ease-out infinite;
          animation: right-123 15s ease-out infinite; }

@-webkit-keyframes left-123 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  10% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px); }
  30% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px); }
  35% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  70% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  95% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes left-123 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  10% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px); }
  30% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px); }
  35% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  70% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  95% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@-webkit-keyframes right-123 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  35% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  45% {
    -webkit-transform: translateX(70px);
            transform: translateX(70px); }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  55% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  65% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px); }
  70% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes right-123 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  35% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  45% {
    -webkit-transform: translateX(70px);
            transform: translateX(70px); }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  55% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  65% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px); }
  70% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

.spec-123__img-big-yagura {
  width: 210px;
  height: 225px;
  background-image: url("../images/spec_123/big-yagura.png");
  background-size: cover;
  position: absolute;
  left: 64px;
  top: -4px; }

.spec-123__rotation_img-wrapper {
  transition: -webkit-transform 1s ease-in 0.01s;
  transition: transform 1s ease-in 0.01s;
  transition: transform 1s ease-in 0.01s, -webkit-transform 1s ease-in 0.01s;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.spec-123__rotation_img-wrapper--arrival {
  transition: -webkit-transform 1s ease-in 0.01s;
  transition: transform 1s ease-in 0.01s;
  transition: transform 1s ease-in 0.01s, -webkit-transform 1s ease-in 0.01s;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.spec-123__rotation_img {
  width: 200px;
  height: 266px;
  background-image: url("../images/spec_123/rotate-123.png");
  background-repeat: no-repeat;
  background-size: 200px 2128px;
  transition: opacity .25s ease-in 0.01s;
  margin: -15px auto 0 auto;
  position: relative; }

.spec-123__rotate {
  -webkit-animation: rotate_123 0.25s steps(8) 0s 4;
          animation: rotate_123 0.25s steps(8) 0s 4; }

@-webkit-keyframes rotate_123 {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -2128px; } }

@keyframes rotate_123 {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -2128px; } }

.js-spec-123-hidden {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all .25s ease-in 1.2s; }

.js-spec-123-hidden--arrival {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.spec-123__label {
  width: 100px;
  height: 230px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 36px;
  left: 222px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.spec-123__label--anim {
  -webkit-animation: label-anim .2s linear 1.8s forwards;
          animation: label-anim .2s linear 1.8s forwards; }

@-webkit-keyframes label-anim {
  0% {
    -webkit-transform: scale(5);
            transform: scale(5);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes label-anim {
  0% {
    -webkit-transform: scale(5);
            transform: scale(5);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  70% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  80% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  90% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  95% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

.spec-123__jinji-label {
  background-image: url("../images/spec_123/jinji-label.png");
  background-size: 95px 214px; }

.spec-123__paper-label {
  background-image: url("../images/spec_123/paper-label.png");
  background-size: 93px 194px; }

.spec-123__eye-label {
  background-image: url("../images/spec_123/eye-label.png");
  background-size: 98px 200px; }

.spec-123__security-label {
  background-image: url("../images/spec_123/security-label.png");
  background-size: 86px 191px; }

@media (min-width: 640px) {
  .spec-123__inner {
    width: 620px; }
  .spec-123__title {
    width: 450px;
    -webkit-transform: rotate(1.9deg) translate(0px, 1px);
            transform: rotate(1.9deg) translate(0px, 1px);
    line-height: 34px;
    font-size: 26px; }
  .spec-123__title-first {
    text-align: left; }
  .spec-123__title-second {
    text-align: right; }
  .spec-123__title-wrapper {
    height: 155px; }
  .spec-123__title-bg {
    background-size: 690px auto; }
  .spec-123__imagine {
    width: 325px;
    margin-bottom: 48px; }
  .spec-123__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .spec-123__rotation_img {
    -webkit-transform-origin: center center;
            transform-origin: center center;
    left: 10px;
    top: 100px; }
  .spec-123__img-123-eye-beam-right {
    width: 350px; }
  .spec-123__img-123-eye-beam-left {
    width: 300px; }
  .spec-123__imagine-tri-wrapper {
    bottom: 70px;
    left: 322px; }
  .spec-123__imagine-tri-base {
    border-left: 40px solid #006939;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent; }
  .spec-123__imagine-tri-line {
    border-left: 40px solid #000;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    left: -4px;
    top: 0px; }
  .spec-123__imagine-tri-wrapper {
    -webkit-transform: skewY(-45deg);
            transform: skewY(-45deg); }
  .spec-123__label {
    left: 155px;
    top: 130px; } }

.spec-freee {
  background-color: #006939;
  color: #fff;
  position: relative;
  overflow: hidden; }

.spec-freee__inner {
  width: 325px;
  margin: 0 auto;
  padding: 80px 0 40px 0; }

.spec-freee__top-triangle {
  width: 0;
  height: 0;
  border-left: 70vw solid transparent;
  border-right: 70vw solid transparent;
  border-top: 50px solid #000;
  position: absolute;
  top: -5px;
  left: -20vw; }

.spec-freee__title {
  color: #006939;
  background-color: #fff;
  font-size: 21.69px;
  text-align: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin: 0 0 28px 0; }

.spec-freee__item {
  position: relative;
  width: 100%;
  height: 138px;
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  margin-bottom: 30px;
  transition: all .1s ease-in 0s; }

.spec-freee__triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 30px solid #fff;
  border-right: 30px solid transparent; }

.spec-freee__headline {
  width: 300px;
  margin: 0 auto;
  border-bottom: solid;
  border-width: 1px;
  border-color: #fff;
  text-align: center;
  line-height: 39px; }

.spec-freee__detail {
  background-repeat: no-repeat;
  background-position: right center;
  font-size: 11.5px;
  height: 93px;
  width: 300px;
  margin: 0 auto;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.spec-freee__detail-text {
  width: 225px; }

.spec-freee__detail-img {
  width: 77px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat; }

.spec-freee__detail-img-support {
  background-image: url("../images/spec_freee/support-icon.png");
  background-size: 77px 63px; }

.spec-freee__detail-img-pc {
  background-image: url("../images/spec_freee/pc-icon.png");
  background-size: 71px 60px; }

.spec-freee__detail-img-paper {
  background-image: url("../images/spec_freee/paper-icon.png");
  background-size: 46px 63px; }

.spec-freee__detail-img-lock {
  background-image: url("../images/spec_freee/lock-icon.png");
  background-size: 53px 61px; }

.spec-freee__original-headline {
  text-align: center;
  font-size: 22px; }

.spec-freee__original-logo {
  width: 274px;
  height: 76px;
  background-image: url("../images/spec_freee/freee-logo-sp.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 18px auto 36px auto; }

.spec-freee__original-link {
  display: block;
  height: 50px;
  width: 260px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  background-color: #fff;
  color: #006939;
  text-decoration: none;
  font-size: 18px; }

.spec-freee__original-link:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.spec-freee__123-copy-wrapper {
  width: 100%;
  height: 750px;
  position: absolute;
  top: 60px; }

.spec-freee__123-copy {
  width: 375px;
  height: 100%;
  margin: 0 auto;
  background-image: url("../images/spec_freee/123-copy.png");
  background-size: 121px 603px;
  background-position: 60px 180px;
  background-repeat: no-repeat;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: opacity 1s ease-in-out 0s; }

.spec-freee__123-copy--anim {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.spec-freee__123-cover-wrapper {
  width: 100%;
  position: absolute;
  top: 163px; }

.spec-freee__123-cover-inner {
  width: 375px;
  margin: 0 auto;
  position: relative;
  transition: -webkit-transform 1s ease-in-out 0s;
  transition: transform 1s ease-in-out 0s;
  transition: transform 1s ease-in-out 0s, -webkit-transform 1s ease-in-out 0s; }

.spec-freee__123-cover {
  width: 357px;
  height: 654px;
  position: absolute;
  background-image: url("../images/spec_freee/123-cover.png");
  background-size: cover;
  left: 550px;
  -webkit-animation: arrive-123-return 1s forwards;
          animation: arrive-123-return 1s forwards; }

.spec-freee__123-cover-inner--anim {
  -webkit-transform: translateX(-370px);
          transform: translateX(-370px); }

.spec-freee__123-cover--anim {
  -webkit-transform-origin: center 70%;
          transform-origin: center 70%;
  -webkit-animation: arrive-123-sp 1s forwards;
          animation: arrive-123-sp 1s forwards; }

@-webkit-keyframes arrive-123-sp {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  70% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  80% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  90% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes arrive-123-sp {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  70% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  80% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  90% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@-webkit-keyframes arrive-123-pc {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes arrive-123-pc {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@-webkit-keyframes arrive-123-return {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  80% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes arrive-123-return {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  80% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@media (min-width: 640px) {
  .spec-freee__top-triangle {
    border-top: 100px solid #000; }
  .spec-freee {
    padding-top: 50px; }
  .spec-freee__inner {
    width: 620px;
    padding-bottom: 70px; }
  .spec-freee__original-logo {
    width: 594px;
    height: 165px;
    background-image: url("../images/spec_freee/freee-logo-pc.png");
    background-size: cover; }
  .spec-freee__item {
    height: 190px; }
  .spec-freee__title {
    font-size: 26px; }
  .spec-freee__headline {
    width: 500px;
    line-height: 59px;
    font-size: 26px; }
  .spec-freee__detail {
    width: 500px;
    height: 125px; }
  .spec-freee__detail-img {
    width: 120px;
    background-size: auto 90px; }
  .spec-freee__detail-text {
    width: 370px;
    font-size: 18px; }
  .spec-freee__original-logo {
    background-size: 404px auto;
    margin: -15px auto 20px auto; }
  .spec-freee__original-headline {
    text-align: center;
    font-size: 22px; }
  .spec-freee__123-copy-wrapper {
    height: 1010px; }
  .spec-freee__123-copy {
    width: 620px;
    background-size: 163px auto; }
  .spec-freee__123-cover {
    width: 495px;
    height: 905px; }
  .spec-freee__123-cover--anim {
    -webkit-animation: arrive-123-pc 1s forwards;
            animation: arrive-123-pc 1s forwards; } }

.wrapper {
  font-family: "A1明朝", "A1 Mincho", "Sawarabi Mincho", "HGP明朝E ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
  font-size: 16px;
  line-height: 1.5; }

*, *:before, *:after {
  box-sizing: border-box; }

body {
  background-color: #000;
  color: #fff; }

.section-whole {
  overflow: hidden; }

@media (min-width: 640px) {
  .is_sp {
    display: none; } }

@media (max-width: 639px) {
  .is_pc {
    display: none; } }