@charset "utf-8";
/* Reset CSS - YUI 3.12.0 (build 8655935) */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
}
input,
textarea,
select {
  *font-size: 100%;
}
legend {
  color: #000;
}
#yui3-css-stamp.cssreset {
  display: none;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/* Common Container */
html {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
a img {
  border: 0 none;
}
input,
select {
  outline-style: none;
}
button {
  cursor: pointer;
  font-family: "Roboto", sans-serif;
}
button,
input,
textarea,
select {
  box-sizing: border-box;
  outline-style: none;
  resize: none;
}
* {
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  transition-delay: 0;
  transition-duration: 0.3s;
  transition-property: none;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hide {
  display: none !important;
}
/* Layout */
.wrap {
  position: relative;
  margin: 0 auto;
  min-width: 1420px;
  max-width: 2560px;
  overflow: hidden;
}
.wrap a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
#header .logo {
  position: absolute;
  top: 31px;
  left: 50%;
  z-index: 10;
  margin-left: -649px;
  background: url(../img/logo.png) no-repeat 0 0;
  width: 163px;
  height: 91px;
}
#header .home {
  position: absolute;
  top: 31px;
  left: 50%;
  z-index: 10;
  transition-property: background;
  margin-left: 610px;
  background: url(../img/btn_home.png) no-repeat 0 0;
  width: 160px;
  height: 50px;
}
#header .home:hover {
  background: url(../img/btn_home_hover.png) no-repeat 0 0;
}

@keyframes animation-char-3 {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}
@keyframes animation-effect-1 {
  0% {
    transform: scale(0.7) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(15px) scale(1) translateY(-20px);
    opacity: 0.6;
  }
}
@keyframes animation-effect-1-1 {
  0% {
    transform: scale(0.5) translateY(0px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(15px) scale(1) translateY(-20px);
    opacity: 0.2;
  }
}
@keyframes animation-effect-1-2 {
  0% {
    transform: scale(0.3) translateY(0px);
    opacity: 0.2;
  }
  100% {
    transform: translateY(15px) scale(1) translateY(-20px);
    opacity: 0;
  }
}
@keyframes animation-button {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
#content {
  position: relative;
  background: url(../img/bg.jpg) no-repeat center 0;
  height: 1440px;
}
#content .hidden {
  display: none;
}
#content > * {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  text-indent: -100000em;
}
#content .animation {
  opacity: 0;
  transition-property: opacity, background, transform;
}
#content .title.text-1 {
  top: 100px;
  transition-delay: 0.4s;
  margin-left: -311px;
  background: url(../img/title_text-1.png) no-repeat 0 0;
  width: 321px;
  height: 41px;
}
#content .title.text-2 {
  top: 132px;
  transform: translateY(-150px);
  transition-delay: 0;
  margin-left: -517px;
  background: url(../img/title_text-2.png) no-repeat 0 0;
  width: 660px;
  height: 204px;
}
#content .title.text-3 {
  top: 341px;
  z-index: 1;
  transition-delay: 0.4s;
  margin-left: -300px;
  background: url(../img/title_text-3.png) no-repeat 0 0;
  width: 297px;
  height: 114px;
}
#content .title.text-4 {
  top: 368px;
  transform: translateY(150px);
  transition-delay: 0.2s;
  margin-left: -648px;
  background: url(../img/title_text-4.png) no-repeat 0 0;
  width: 900px;
  height: 174px;
}
#content .char.char-1 {
  top: 107px;
  transform: translateY(-150px);
  transition-delay: 0.6s;
  margin-left: 180px;
  background: url(../img/char-1.png) no-repeat 0 0;
  width: 662px;
  height: 1261px;
}
#content .char.char-2 {
  top: 545px;
  transform: translateX(150px);
  transition-delay: 0.8s;
  margin-left: 603px;
  background: url(../img/char-2.png) no-repeat 0 0;
  width: 577px;
  height: 756px;
}
#content .char.char-3 {
  top: 544px;
  transform: translateY(-150px);
  z-index: 1;
  animation: animation-char-3 1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s infinite
    alternate;
  transition-delay: 1s;
  margin-left: -1254px;
  background: url(../img/char-3.png) no-repeat 0 0;
  width: 574px;
  height: 740px;
}
#content .effect.effect-1 {
  top: 1218px;
  transform-origin: center;
  opacity: 0;
  animation: animation-effect-1 2s cubic-bezier(0, 0.55, 0.45, 1) 3.3s infinite
    normal;
  transition-delay: 3.3s;
  margin-left: -1092px;
  background: url(../img/effect-1.png) no-repeat 0 0;
  width: 341px;
  height: 125px;
}
#content .effect.effect-1 + .effect-1 {
  animation: animation-effect-1-1 2s cubic-bezier(0, 0.55, 0.45, 1) 3.3s
    infinite normal;
}
#content .effect.effect-1 + .effect-1 + .effect-1 {
  animation: animation-effect-1-2 2s cubic-bezier(0, 0.55, 0.45, 1) 3.3s
    infinite normal;
}
#content .button.button-1 {
  top: 585px;
  transition-property: background;
  margin-left: -233px;
  background: url(../img/button-1.png) no-repeat 0 0;
  width: 226px;
  height: 76px;
}
#content .button.button-1:hover {
  background-image: url(../img/button-1_hover.png);
}
#content .button.button-2 {
  top: 585px;
  transition-property: background;
  margin-left: 21px;
  background: url(../img/button-2.png) no-repeat 0 0;
  width: 226px;
  height: 76px;
}
#content .button.button-2:hover {
  background-image: url(../img/button-2_hover.png);
}
#content .button.button-2 {
  top: 585px;
  transition-property: background;
  margin-left: 21px;
  background: url(../img/button-2.png) no-repeat 0 0;
  width: 226px;
  height: 76px;
}
#content .button.button-2:hover {
  background-image: url(../img/button-2_hover.png);
}
#content .button.button-3 {
  top: 624px;
  animation: animation-button 1.5s ease-in-out 0s infinite alternate;
  transition-property: background;
  margin-left: -642px;
  background: url(../img/button-3.png) no-repeat 0 0;
  width: 468px;
  height: 389px;
}
#content .button.button-3:hover {
  background-image: url(../img/button-3_hover.png);
}
#content .button.button-4 {
  top: 794px;
  animation: animation-button 1.5s ease-in-out 0.5s infinite alternate;
  transition-property: background;
  margin-left: -170px;
  background: url(../img/button-4.png) no-repeat 0 0;
  width: 470px;
  height: 389px;
}
#content .button.button-4:hover {
  background-image: url(../img/button-4_hover.png);
}
#content.animation-start > .animation {
  transform: none;
  opacity: 1;
}

#footer {
  position: absolute;
  bottom: 0;
  z-index: 15;
  width: 100%;
  height: 90px;
  color: #788398;
  font: 13px/90px Arial, sans-seirf;
  font-weight: bold;
  text-align: center;
}
#footer:before {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 40px 0 0;
  background: url(../img/footer_logo.png) no-repeat 0 0;
  width: 163px;
  height: 16px;
  content: "";
}