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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html, body {
  background-color: #fff;
  color: #000;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
}

img {
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

#container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  background-color: #32c1ff;
  overflow: hidden;
}

#header {
  display: block;
  position: fixed;
  width: 100%;
  height: 78px;
  top: 0;
  left: 0;
  border-top: 2px solid #ff8500;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 20;
}

#header .inner {
  width: 980px;
  height: 78px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#header .inner .nav {
  width: 666px;
  height: 78px;
  padding-left: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
}

#header .inner .nav a {
  display: block;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#header .inner .nav a.nav_01 {
  width: 34px;
  height: 28px;
  background-image: url(../img/header_nav_01.png);
  background-size: 34px 25px;
}

#header .inner .nav a.nav_02 {
  width: 59px;
  height: 28px;
  background-image: url(../img/header_nav_02.png);
  background-size: 59px 25px;
}

#header .inner .nav a.nav_03 {
  width: 103px;
  height: 28px;
  background-image: url(../img/header_nav_03.png);
  background-size: 103px 25px;
}

#header .inner .nav a.nav_04 {
  width: 45px;
  height: 28px;
  background-image: url(../img/header_nav_04.png);
  background-size: 45px 25px;
}

#header .inner .nav a.nav_05 {
  width: 85px;
  height: 28px;
  background-image: url(../img/header_nav_05.png);
  background-size: 85px 28px;
}

#header .inner .nav a:hover {
  opacity: 0.5;
}

#header .inner .language {
  width: 265px;
  height: 78px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
}

#header .inner .language .title {
  width: 48px;
  height: 14px;
  background-image: url(../img/header_language_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#header .inner .language ul {
  width: 228px;
  height: 48px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
}

#header .inner .language ul li {
  display: block;
  width: 56px;
  height: 14px;
  padding: 5px 0 5px 25px;
}

#header .inner .language ul li:nth-of-type(5) {
  padding-left: 10px;
}

#header .inner .language ul li a {
  display: block;
  width: 56px;
  height: 14px;
  background-image: url(../img/header_language_btns.png);
  background-size: 112px 70px;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#header .inner .language ul li a:hover {
  opacity: 0.5;
}

#header .inner .language ul li .lang_01 {
  background-position: 0 0px;
}

#header .inner .language ul li .lang_02 {
  background-position: 0 -14px;
}

#header .inner .language ul li .lang_03 {
  background-position: 0 -28px;
}

#header .inner .language ul li .lang_04 {
  background-position: 0 -42px;
}

#header .inner .language ul li .lang_05 {
  background-position: 0 -56px;
}

#header .inner .language ul li a.active {
  opacity: 1;
}

#header .inner .language ul li a.active.lang_01 {
  background-position: -56px 0px;
}

#header .inner .language ul li a.active.lang_02 {
  background-position: -56px -14px;
}

#header .inner .language ul li a.active.lang_03 {
  background-position: -56px -28px;
}

#header .inner .language ul li a.active.lang_04 {
  background-position: -56px -42px;
}

#header .inner .language ul li a.active.lang_05 {
  background-position: -56px -56px;
}

#jumbotron {
  width: 100%;
  height: 1615px;
  background-image: url(../img/bk_01.jpg);
  background-position: 50% 0;
}

#jumbotron .inner {
  position: relative;
  width: 1147px;
  height: 1230px;
  margin: 0 auto;
}

#jumbotron .inner h1 {
  display: block;
  position: absolute;
  width: 824px;
  height: 272px;
  top: 350px;
  left: 357px;
  background-image: url(../img/jumbo_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  z-index: 5;
}

#jumbotron .inner .copy, #jumbotron .inner .copy_bk {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron .inner .copy.copy_01, #jumbotron .inner .copy_bk.copy_01 {
  width: 425px;
  height: 162px;
  top: 120px;
  left: 483px;
  background-image: url(../img/jumbo_copy_01.png);
  z-index: 5;
}

#jumbotron .inner .copy.copy_02, #jumbotron .inner .copy_bk.copy_02 {
  width: 335px;
  height: 149px;
  top: 179px;
  left: 689px;
  background-image: url(../img/jumbo_copy_02.png);
  z-index: 5;
}

#jumbotron .inner .copy.copy_bk_01, #jumbotron .inner .copy_bk.copy_bk_01 {
  width: 92px;
  height: 92px;
  top: 223px;
  left: 445px;
  background-image: url(../img/jumbo_copy_bk_01.png);
  z-index: 4;
}

#jumbotron .inner h3 {
  display: block;
  position: absolute;
  width: 487px;
  height: 111px;
  top: 655px;
  left: 535px;
  background-image: url(../img/jumbo_h2_onsale.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  z-index: 5;
}

#jumbotron .inner .buy {
  display: block;
  position: absolute;
  width: 570px;
  height: 79px;
  top: 788px;
  left: 490px;
  z-index: 5;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#jumbotron .inner .buy a.btn {
  display: block;
  position: relative;
  width: 279px;
  height: 79px;
  background-size: contain;
  background-position: 0 100%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#jumbotron .inner .buy a.btn:after {
  display: block;
  position: absolute;
  width: 279px;
  height: 79px;
  top: 0;
  left: 0;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  content: "";
}

#jumbotron .inner .buy a.btn.btn_01 {
  background-image: url(../img/jumbo_btn_01.png);
}

#jumbotron .inner .buy a.btn.btn_01:after {
  background-image: url(../img/jumbo_btn_01_on.png);
}

#jumbotron .inner .buy a.btn:hover {
  background-image: none;
  opacity: 0.5;
}

#jumbotron .inner .buy a.btn:hover:after {
  opacity: 1;
}

#jumbotron .inner .buy span.btn {
  display: block;
  position: relative;
  width: 279px;
  height: 79px;
  background-size: contain;
  background-position: 0 100%;
  background-repeat: no-repeat;
  font-size: 0;
  opacity: 0.5;
}

#jumbotron .inner .buy span.btn.btn_01 {
  background-image: url(../img/jumbo_btn_01_cs.png);
}

#jumbotron .inner .movie {
  display: block;
  position: absolute;
  width: 633px;
  height: 414px;
  top: 886px;
  left: 449px;
  background-image: url(../img/jumbo_pv_bk.png);
  z-index: 5;
}

#jumbotron .inner .movie .inner {
  position: absolute;
  width: 550px;
  height: 318px;
  top: 43px;
  left: 47px;
  border-radius: 12px;
  background-color: #000;
  z-index: 1;
  overflow: hidden;
}

#jumbotron .inner .movie .inner .cover,
#jumbotron .inner .movie .inner #movie_thumbnail {
  position: absolute;
  width: 568px;
  height: 324px;
  top: -3px;
  left: -9px;
  z-index: 1;
}

#jumbotron .inner .movie .inner .cover {
  z-index: 2;
  background-color: transparent;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
}

#jumbotron .inner .movie .inner:after {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  margin: -33px 0 0 -29px;
  border-style: solid;
  border-width: 33.5px 0 33.5px 58px;
  border-color: transparent transparent transparent #fff;
  z-index: 15;
  content: "";
}

#jumbotron .inner .movie .inner:hover {
  cursor: pointer;
}

#jumbotron .inner .movie .inner:hover .cover {
  background-color: rgba(0, 0, 0, 0.4);
}

#jumbotron .inner .character {
  display: block;
  position: absolute;
  width: 632px;
  height: 962px;
  top: 266px;
  left: -31px;
  background-image: url(../img/jumbo_character.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  z-index: 4;
}

#jumbotron .inner .character.end {
  -webkit-animation: character_fuwafuwa 2s ease infinite alternate;
  -moz-animation: character_fuwafuwa 2s ease infinite alternate;
  animation: character_fuwafuwa 2s ease infinite alternate;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#jumbotron .background {
  position: absolute;
  width: 1920px;
  height: 1615px;
  top: 0;
  left: 50%;
  margin-left: -960px;
  background-image: url(../img/bk_06.png);
  z-index: 1;
  -webkit-animation: jumbo_bk 6s linear infinite;
  -moz-animation: jumbo_bk 6s linear infinite;
  animation: jumbo_bk 6s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#intro {
  position: relative;
}

#intro .wrapper {
  position: relative;
  width: 100%;
  height: 950px;
  margin-top: -710px;
  padding-top: 360px;
  background-image: url(../img/bk_02.png);
  background-position: 50% 0;
  z-index: 2;
}

#intro .wrapper .inner {
  position: relative;
  width: 980px;
  height: 958px;
  margin: 0 auto;
}

#intro .wrapper .inner h2 {
  display: none;
}

#intro .wrapper .inner .lead {
  display: block;
  position: absolute;
  width: 497px;
  height: 168px;
  top: 178px;
  left: 28px;
  background-image: url(../img/intro_lead.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#intro .wrapper .inner .story {
  display: block;
  position: absolute;
  width: 442px;
  height: 270px;
  top: 424px;
  left: 68px;
  z-index: 5;
}

#intro .wrapper .inner .story .text {
  display: block;
  width: 475px;
  height: 30px;
  margin-bottom: 4px;
  background-image: url(../img/intro_story.png);
  background-size: 457px 191px;
  background-repeat: no-repeat;
  font-size: 0;
}

#intro .wrapper .inner .story .text.text_01 {
  background-position: 0 0px;
}

#intro .wrapper .inner .story .text.text_02 {
  background-position: 0 -34px;
}

#intro .wrapper .inner .story .text.text_03 {
  background-position: 0 -68px;
}

#intro .wrapper .inner .story .text.text_04 {
  background-position: 0 -102px;
}

#intro .wrapper .inner .story .text.text_05 {
  background-position: 0 -136px;
}

#intro .wrapper .inner .story .text.text_06 {
  background-position: 0 -170px;
}

#intro .wrapper .inner .copy {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  z-index: 5;
}

#intro .wrapper .inner .copy.copy_01 {
  width: 305px;
  height: 94px;
  top: 630px;
  left: 20px;
  background-image: url(../img/intro_copy_01.png);
}

#intro .wrapper .inner .copy.copy_02 {
  width: 366px;
  height: 96px;
  top: 700px;
  left: 190px;
  background-image: url(../img/intro_copy_02.png);
}

#intro .wrapper .inner .fukidashi {
  display: block;
  position: absolute;
  width: 605px;
  height: 461px;
  top: 356px;
  left: -7px;
  background-image: url(../img/intro_fukidashi.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  z-index: 3;
}

#intro .wrapper .inner .character {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#intro .wrapper .inner .character.character_01 {
  width: 496px;
  height: 737px;
  top: 65px;
  left: 530px;
  background-image: url(../img/intro_character_01.png);
}

#intro .wrapper .inner .character.character_01.end {
  -webkit-animation: character_fuwafuwa 2s ease infinite alternate;
  -moz-animation: character_fuwafuwa 2s ease infinite alternate;
  animation: character_fuwafuwa 2s ease infinite alternate;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#intro .movie {
  position: absolute;
  width: 960px;
  height: 720px;
  top: 950px;
  left: 50%;
  margin-left: -960px;
  background-image: url(../img/bk_anime_01.gif);
  z-index: 1;
}

#intro .character {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#intro .character.character_02 {
  width: 234px;
  height: 351px;
  top: 1161px;
  left: 50%;
  margin-left: -422px;
  background-image: url(../img/intro_character_02.png);
  z-index: 15;
}

#intro .character.character_02.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#character {
  position: relative;
  height: 940px;
  z-index: 5;
}

#character .content {
  position: absolute;
  width: 100%;
  height: 924px;
  top: 0;
  left: 0;
  z-index: 6;
}

#character .content .inner {
  position: relative;
  width: 980px;
  height: 924px;
  margin: 0 auto;
}

#character .content .inner h2 {
  display: block;
  position: absolute;
  width: 100%;
  height: 55px;
  top: 162px;
  left: 0;
  background-image: url(../img/character_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .content .inner .name {
  display: block;
  position: absolute;
  width: 445px;
  height: 78px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .content .inner .name.name_01 {
  top: 655px;
  left: 515px;
  background-image: url(../img/character_text_01.png);
}

#character .content .inner .name.name_02 {
  top: 830px;
  left: 25px;
  background-image: url(../img/character_text_02.png);
}

#character .content .inner .character {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .content .inner .character.character_01 {
  width: 550px;
  height: 570px;
  top: 70px;
  left: 470px;
  background-image: url(../img/character_img_01.gif);
}

#character .content .inner .character.character_02 {
  width: 700px;
  height: 605px;
  top: 250px;
  left: -115px;
  background-image: url(../img/character_img_02.gif);
}

#character .background {
  position: absolute;
  width: 1920px;
  height: 922px;
  top: 0;
  left: 50%;
  margin-left: -960px;
  border-top: 6px solid #000;
  border-bottom: 6px solid #000;
  background-image: url(../img/character_bk_01.png);
  background-position: 50% 0;
  overflow: hidden;
  -webkit-transform: skewY(-20deg);
  -moz-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  -o-transform: skewY(-20deg);
  transform: skewY(-20deg);
}

#character .background .inner {
  position: absolute;
  width: 100%;
  height: 1624px;
  top: -350px;
  left: 0;
  -webkit-transform: skewY(20deg);
  -moz-transform: skewY(20deg);
  -ms-transform: skewY(20deg);
  -o-transform: skewY(20deg);
  transform: skewY(20deg);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#character .background .inner .scroll_bk {
  position: absolute;
  width: 100%;
  height: 1624px;
  top: 0;
  left: 0;
  background-image: url(../img/character_bk_02.png);
  -webkit-animation: character_bk 3s linear infinite;
  -moz-animation: character_bk 3s linear infinite;
  animation: character_bk 3s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#character .background .inner .character {
  width: 50%;
  height: 1624px;
  opacity: 0.16;
}

#character .background .inner .character.character_01 {
  background-image: url(../img/character_bkc_01.gif);
  background-size: 790px 700px;
  background-position: 120px 640px;
  background-repeat: no-repeat;
}

#character .background .inner .character.character_02 {
  position: relative;
  left: 2px;
  background-image: url(../img/character_bkc_02.gif);
  background-size: 810px 920px;
  background-position: -120px 150px;
  background-repeat: no-repeat;
}

#about {
  position: relative;
}

#about .wrapper {
  position: relative;
  width: 100%;
  min-height: 1823px;
  top: -12px;
  background-image: url(../img/bk_03.png);
  background-position: 50% 0;
  background-repeat: no-repeat;
  z-index: 2;
}

#about .wrapper .inner {
  position: relative;
  width: 1060px;
  margin: 0 auto;
  padding-top: 105px;
  z-index: 4;
}

#about .wrapper .inner h2 {
  width: 100%;
  height: 55px;
  background-image: url(../img/about_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#about .wrapper .onitv_bk {
  display: block;
  position: absolute;
  width: 100%;
  height: 909px;
  top: 1820px;
  left: 0;
  border-top: 6px solid #000;
  background-image: url(../img/bk_04.jpg);
  background-position: 0 0;
  background-repeat: repeat-x;
  z-index: 3;
  -webkit-animation: onitv_bk 5s linear infinite;
  -moz-animation: onitv_bk 5s linear infinite;
  animation: onitv_bk 5s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about .movie {
  position: absolute;
  width: 960px;
  height: 720px;
  top: -360px;
  right: 50%;
  margin-right: -960px;
  background-image: url(../img/bk_anime_02.gif);
  z-index: 1;
}

#about .about_content {
  position: relative;
  width: 1060px;
  height: 900px;
  margin: 0 auto 0;
}

#about .about_content h3 {
  width: 100%;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#about .about_content p {
  margin-top: 35px;
  width: 100%;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#about .about_content .ss {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#about .about_content .ss .img {
  display: block;
  width: 488px;
  height: 276px;
}

#about .about_content .ss .img_01 {
  margin-right: 13px;
}

#about .about_content .character,
#about .about_content .serif {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#about #about_action {
  margin-top: 50px;
}

#about #about_action h3 {
  height: 64px;
  background-image: url(../img/about_h2.png);
}

#about #about_action p {
  height: 70px;
  background-image: url(../img/about_text.png);
}

#about #about_action .ss {
  width: 1054px;
  height: 319px;
  margin-top: 55px;
  padding-top: 24px;
  background-image: url(../img/about_ss_bk.png);
}

#about #about_action .img_01 {
  background-image: url(../img/about_img_01.png);
}

#about #about_action .img_02 {
  background-image: url(../img/about_img_02.png);
}

#about #about_action .character_01 {
  width: 197px;
  height: 463px;
  top: 331px;
  left: 17px;
  background-image: url(../img/about_character_01.png);
}

#about #about_action .character_01.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_action .character_02 {
  width: 250px;
  height: 522px;
  top: 368px;
  left: 822px;
  background-image: url(../img/about_character_02.png);
}

#about #about_action .character_02.end {
  -webkit-animation: kakukaku 0.3s 0.15s steps(2) infinite;
  -moz-animation: kakukaku 0.3s 0.15s steps(2) infinite;
  animation: kakukaku 0.3s 0.15s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_action .character_03 {
  width: 588px;
  height: 316px;
  top: 546px;
  left: 248px;
  background-image: url(../img/about_character_03.png);
}

#about #about_action .serif {
  width: 236px;
  height: 84px;
  top: 568px;
  left: 418px;
  background-image: url(../img/about_waho.png);
}

#about #about_action .serif.end {
  -webkit-animation: fuwafuwa 1s ease infinite alternate;
  -moz-animation: fuwafuwa 1s ease infinite alternate;
  animation: fuwafuwa 1s ease infinite alternate;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_weapon {
  margin-top: -10px;
}

#about #about_weapon h3 {
  height: 55px;
  background-image: url(../img/weapon_h2.png);
}

#about #about_weapon p {
  height: 109px;
  margin-top: 25px;
  background-image: url(../img/weapon_text.png);
}

#about #about_weapon .ss {
  width: 1042px;
  height: 322px;
  margin-top: 230px;
  padding-top: 28px;
  padding-left: 2px;
  background-image: url(../img/weapon_ss_bk.png);
}

#about #about_weapon .img_01 {
  width: 487px;
  height: 277px;
  margin-right: 11px;
  background-image: url(../img/weapon_img_01.png);
}

#about #about_weapon .img_02 {
  width: 487px;
  height: 277px;
  background-image: url(../img/weapon_img_02.png);
}

#about #about_weapon .weapon_lineup {
  display: block;
  position: absolute;
  width: 1960px;
  height: 211px;
  top: 205px;
  left: 50%;
  margin-left: -960px;
  background-image: url(../img/weapon_scroll.png);
  -webkit-animation: weapon_bk 14s linear infinite;
  -moz-animation: weapon_bk 14s linear infinite;
  animation: weapon_bk 14s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_onitv {
  height: 296px;
  padding-top: 425px;
}

#about #about_onitv h3 {
  display: none;
}

#about #about_onitv p {
  height: 106px;
  background-image: url(../img/oni_text.png);
}

#about #about_onitv .ss {
  width: 1041px;
  height: 316px;
  margin-top: 25px;
  padding-top: 28px;
  background-image: url(../img/oni_ss_bk.png);
}

#about #about_onitv .img_01 {
  width: 488px;
  height: 276px;
  margin-right: 11px;
  background-image: url(../img/oni_img_01.png);
}

#about #about_onitv .img_02 {
  width: 488px;
  height: 276px;
  background-image: url(../img/oni_img_02.png);
}

#about #about_onitv .serif_01 {
  width: 395px;
  height: 256px;
  top: -150px;
  left: 40px;
  background-image: url(../img/oni_fukidashi_01.png);
  z-index: 5;
}

#about #about_onitv .serif_01.end {
  -webkit-animation: fuwafuwa 1s ease infinite alternate;
  -moz-animation: fuwafuwa 1s ease infinite alternate;
  animation: fuwafuwa 1s ease infinite alternate;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_onitv .serif_02 {
  width: 410px;
  height: 256px;
  top: -150px;
  left: 625px;
  background-image: url(../img/oni_fukidashi_02.png);
  z-index: 5;
}

#about #about_onitv .serif_02.end {
  -webkit-animation: fuwafuwa 1s 0.3s ease infinite alternate;
  -moz-animation: fuwafuwa 1s 0.3s ease infinite alternate;
  animation: fuwafuwa 1s 0.3s ease infinite alternate;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_onitv .character_01 {
  width: 266px;
  height: 352px;
  top: 85px;
  left: 210px;
  background-image: url(../img/oni_character_01.png);
  z-index: 3;
}

#about #about_onitv .character_01.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#about #about_onitv .character_02 {
  width: 266px;
  height: 376px;
  top: 62px;
  left: 581px;
  background-image: url(../img/oni_character_02.png);
  z-index: 3;
}

#about #about_onitv .character_02.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#multiplay {
  height: 754px;
  border-top: 8px solid #000;
  border-bottom: 6px solid #000;
  background-image: url(../img/bk_05.jpg);
  background-position: 0 0;
  background-repeat: repeat-x;
  z-index: 3;
  -webkit-animation: multi_bk 5s linear infinite;
  -moz-animation: multi_bk 5s linear infinite;
  animation: multi_bk 5s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#multiplay .inner {
  position: relative;
  width: 1060px;
  height: 900px;
  margin: 0 auto 0;
  padding-top: 250px;
}

#multiplay .inner h2 {
  width: 213px;
  height: 55px;
  margin: 0 auto;
  background-image: url(../img/multi_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#multiplay .inner h3 {
  width: 377px;
  height: 54px;
  margin: 60px auto 0;
  background-image: url(../img/multi_h2.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#multiplay .inner p {
  width: 468px;
  height: 107px;
  margin: 50px auto 0;
  background-image: url(../img/multi_text.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#multiplay .inner .ss {
  width: 1054px;
  height: 320px;
  margin-top: 50px;
  padding-top: 23px;
  background-image: url(../img/multi_ss_bk.png);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#multiplay .inner .ss .img_01 {
  display: block;
  width: 488px;
  height: 276px;
  margin-right: 13px;
  background-image: url(../img/multi_img_01.png);
}

#multiplay .inner .ss .img_02 {
  display: block;
  width: 488px;
  height: 276px;
  background-image: url(../img/multi_img_02.png);
}

#multiplay .inner .character {
  display: block;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#multiplay .inner .character.character_01 {
  width: 170px;
  height: 205px;
  top: 382px;
  left: 40px;
  background-image: url(../img/multi_character_01.png);
}

#multiplay .inner .character.character_01.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#multiplay .inner .character.character_02 {
  width: 185px;
  height: 217px;
  top: 370px;
  left: 834px;
  background-image: url(../img/multi_character_02.png);
}

#multiplay .inner .character.character_02.end {
  -webkit-animation: kakukaku 0.3s steps(2) infinite;
  -moz-animation: kakukaku 0.3s steps(2) infinite;
  animation: kakukaku 0.3s steps(2) infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#spec {
  padding-top: 230px;
}

#spec h2 {
  display: none;
}

#spec .inner {
  width: 980px;
  margin: 0 auto 60px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#spec .inner dl {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#spec .inner dl.dl_01 {
  width: 600px;
}

#spec .inner dl.dl_01 dt {
  position: relative;
  width: 90px;
  height: 45px;
  border-bottom: 1px solid #fff;
  background-repeat: no-repeat;
  background-position: 21px 50%;
  font-size: 0;
}

#spec .inner dl.dl_01 dt.dt_01 {
  background-image: url(../img/spec_dt_01.png);
  background-size: 33px 13px;
}

#spec .inner dl.dl_01 dt.dt_02 {
  background-image: url(../img/spec_dt_02.png);
  background-size: 57px 13px;
}

#spec .inner dl.dl_01 dt.dt_03 {
  background-image: url(../img/spec_dt_03.png);
  background-size: 21px 13px;
}

#spec .inner dl.dl_01 dt.dt_04 {
  background-image: url(../img/spec_dt_04.png);
  background-size: 44px 13px;
}

#spec .inner dl.dl_01 dt.dt_05 {
  background-image: url(../img/spec_dt_05.png);
  background-size: 43px 13px;
}

#spec .inner dl.dl_01 dt:before {
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 19px;
  left: 5px;
  border-radius: 50%;
  background-color: #fefd05;
  content: "";
}

#spec .inner dl.dl_01 dd {
  width: 490px;
  height: 27px;
  padding: 18px 0 0 20px;
  border-bottom: 1px solid #b8e9fe;
}

#spec .inner dl.dl_02 {
  width: 350px;
}

#spec .inner dl.dl_02 dt {
  position: relative;
  width: 90px;
  height: 45px;
  border-bottom: 1px solid #fff;
  background-repeat: no-repeat;
  background-position: 21px 50%;
  font-size: 0;
}

#spec .inner dl.dl_02 dt.dt_06 {
  background-image: url(../img/spec_dt_06.png);
  background-size: 33px 13px;
}

#spec .inner dl.dl_02 dt.dt_07 {
  background-image: url(../img/spec_dt_07.png);
  background-size: 22px 12px;
}

#spec .inner dl.dl_02 dt.dt_08 {
  background-image: url(../img/spec_dt_08.png);
  background-size: 44px 13px;
}

#spec .inner dl.dl_02 dt.dt_09 {
  background-image: url(../img/spec_dt_09.png);
  background-size: 22px 11px;
}

#spec .inner dl.dl_02 dt:before {
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 19px;
  left: 5px;
  border-radius: 50%;
  background-color: #fefd05;
  content: "";
}

#spec .inner dl.dl_02 dd {
  width: 240px;
  height: 27px;
  padding: 18px 0 0 20px;
  border-bottom: 1px solid #b8e9fe;
}

#footer .inner {
  width: 980px;
  height: 63px;
  margin: 0 auto 60px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
}

#footer .inner a, #footer .inner span {
  display: block;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#footer .inner .logo_01 {
  width: 58px;
  height: 58px;
  background-image: url(../img/footer_logo_01.png);
}

#footer .inner .logo_02 {
  width: 115px;
  height: 24px;
  margin-left: 15px;
  background-image: url(../img/footer_logo_02.png);
}

#footer .inner .logo_03 {
  width: 52px;
  height: 60px;
  margin-right: 15px;
  background-image: url(../img/footer_logo_03.png);
}

#footer .inner .logo_04 {
  width: 58px;
  height: 63px;
  background-image: url(../img/footer_logo_04.png);
}

#footer .inner a {
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#footer .inner a:hover {
  opacity: 0.5;
}

#footer .inner p {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  width: 625px;
  height: 36px;
  margin-left: 18px;
  background-image: url(../img/footer_copyright.png);
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0;
}

#share {
  position: fixed;
  top: 103px;
  right: 17px;
  z-index: 30;
}

#share a {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 7px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#share a.item_01 {
  background-image: url(../img/sns_01.png);
}

#share a.item_02 {
  background-image: url(../img/sns_02.png);
}

#share a.item_03 {
  background-image: url(../img/sns_03.png);
}

#share a:hover {
  opacity: 0.5;
}

#loading {
  display: none;
}

#loading .wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 100;
}

#loading .wrapper .inner {
  position: absolute;
  width: 170px;
  height: 168px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#loading .wrapper .inner .character {
  width: 110px;
  height: 114px;
  margin: 0 auto;
  background-image: url(../img/loading_img.gif);
}

#loading .wrapper .inner .progress {
  padding-top: 25px;
}

#loading .wrapper .inner .progress span {
  display: inline-block;
  width: 13px;
  height: 27px;
  margin: 0 2px;
  background-image: url(../img/loading_progress.png);
  background-position: -13px 0;
}

#loading .wrapper .inner .progress span.active {
  background-position: 0 0;
}

#loading .effect {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: skewY(-20deg);
  -moz-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  -o-transform: skewY(-20deg);
  transform: skewY(-20deg);
  z-index: 99;
}

#loading .effect div {
  position: absolute;
  width: 100%;
  height: 20%;
  background-color: #fff;
}

#loading .effect div:nth-of-type(1) {
  top: -40.1%;
}

#loading .effect div:nth-of-type(2) {
  top: -20.2%;
}

#loading .effect div:nth-of-type(3) {
  top: -0.3%;
}

#loading .effect div:nth-of-type(4) {
  top: 19.6%;
}

#loading .effect div:nth-of-type(5) {
  top: 39.5%;
}

#loading .effect div:nth-of-type(6) {
  top: 59.4%;
}

#loading .effect div:nth-of-type(7) {
  top: 79.3%;
}

#loading .effect div:nth-of-type(8) {
  top: 99.2%;
}

#loading .effect div:nth-of-type(9) {
  top: 119.1%;
}

#modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

#modal .inner {
  position: absolute;
  width: 960px;
  height: 540px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 5px;
  border: 5px solid #000;
  background-color: #000;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#modal .inner div {
  display: none;
  width: 960px;
  height: 540px;
  background-size: cover;
  background-position: 50% 50%;
}

#modal .close {
  display: block;
  position: fixed;
  width: 30px;
  height: 29px;
  top: 30px;
  right: 30px;
  background-image: url(../img/modal_close.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  font-size: 0;
  cursor: pointer;
  -webkit-transition: 0.2s ease opacity;
  -moz-transition: 0.2s ease opacity;
  -o-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#modal .close:hover {
  opacity: 0.5;
}

@-webkit-keyframes character_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -282px 0;
  }
}

@-moz-keyframes character_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -282px 0;
  }
}

@keyframes character_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -282px 0;
  }
}

@-webkit-keyframes weapon_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1909px 0;
  }
}

@-moz-keyframes weapon_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1909px 0;
  }
}

@keyframes weapon_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1909px 0;
  }
}

@-webkit-keyframes onitv_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 370px 0;
  }
}

@-moz-keyframes onitv_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 370px 0;
  }
}

@keyframes onitv_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 370px 0;
  }
}

@-webkit-keyframes multi_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -497px 0;
  }
}

@-moz-keyframes multi_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -497px 0;
  }
}

@keyframes multi_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -497px 0;
  }
}

@-webkit-keyframes jumbo_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -547px 0;
  }
}

@-moz-keyframes jumbo_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -547px 0;
  }
}

@keyframes jumbo_bk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -547px 0;
  }
}

@-webkit-keyframes kakukaku {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-moz-keyframes kakukaku {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes kakukaku {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25px);
  }
}

@-moz-keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25px);
  }
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25px);
  }
}

@-webkit-keyframes character_fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(35px);
  }
}

@-moz-keyframes character_fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(35px);
  }
}

@keyframes character_fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(35px);
  }
}

/*# sourceMappingURL=style.css.map */