@charset "UTF-8";
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 {
  width: 100%;
  color: #5f525a;
  background-color: #0e0c13;
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.04em;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

img {
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

#container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1000px;
  margin: 0 auto;
  overflow-x: hidden;
  z-index: 2;
}

#background {
  position: fixed;
  width: 1920px;
  height: 100%;
  height: 100vh;
  top: 0;
  left: 50%;
  margin-left: -960px;
  background-image: url(../img/bk.jpg);
  background-size: cover;
  background-position: 50% 50%;
  z-index: 1;
}

#background .jumbo {
  -webkit-transition: 0.8s ease opacity;
  transition: 0.8s ease opacity;
}

#background .jumbo .bk {
  position: fixed;
  width: 1920px;
  height: 100%;
  height: 100vh;
  top: 0;
  left: 50%;
  margin-left: -960px;
  background-image: url(../img/jumbo_bk.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

#background .jumbo canvas {
  position: fixed;
  top: 0;
  left: 0;
}

#background.scroll .jumbo {
  -webkit-transition: 0.8s ease opacity;
  transition: 0.8s ease opacity;
  opacity: 0;
}

#jumbotron {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-bottom: 20px;
  overflow: hidden;
}

#jumbotron .platform {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#jumbotron .platform .ns {
  width: 97px;
  height: 97px;
  background-image: url(../img/platform_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron .platform .ps4 {
  width: 182px;
  height: 38px;
  margin-left: 30px;
  background-image: url(../img/platform_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron .inner {
  position: absolute;
  width: 994px;
  height: 900px;
  bottom: -30px;
  left: 50%;
  margin-left: -497px;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

#jumbotron .inner h1 {
  width: 711px;
  height: 673px;
  margin: 0 auto;
  background-image: url(../img/jumbo_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron .inner h2 {
  position: relative;
  width: 596px;
  height: 120px;
  margin: 0 auto;
  top: -220px;
  background-image: url(../img/add_jumbo_date.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron .inner .btns {
  position: relative;
  width: 546px;
  height: 105px;
  margin: 0 auto;
  top: -200px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#jumbotron .inner .btns .btn {
  display: block;
  width: 255px;
  height: 70px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
}

#jumbotron .inner .btns .btn:hover {
  opacity: 0.7;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}

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

#jumbotron .inner .btns .btn.btn_02 {
  background-image: url(../img/jumbo_btn_02.png);
}

#jumbotron .inner .btns .btn.btn_dlc {
  width: 546px;
  height: 177px;
  margin-top: 5px;
  background-image: url(../img/add_jumbo_btn.png);
}

.sp #jumbotron .inner {
  bottom: 80px;
}

#g_nav .nav {
  position: fixed;
  width: 392px;
  height: 100vh;
  padding: 0 14px;
  top: 0;
  right: -492px;
  background-color: rgba(9, 7, 10, 0.6);
  overflow: hidden;
  z-index: 30;
  opacity: 0;
  -webkit-transition: 0.2s ease opacity, 0.4s ease right;
  transition: 0.2s ease opacity, 0.4s ease right;
}

#g_nav .nav ul {
  width: 100%;
  height: 100vh;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#g_nav .nav ul li {
  display: block;
  width: 100%;
  height: 125px;
  border-bottom: 1px solid #575051;
}

#g_nav .nav ul li a {
  display: block;
  height: 100%;
  background-position: 35px 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#g_nav .nav ul li a:hover {
  opacity: 0.5;
}

#g_nav .nav ul li a.item_01 {
  background-image: url(../img/nav_01.png);
  background-size: 103px 28px;
}

#g_nav .nav ul li a.item_02 {
  background-image: url(../img/nav_02.png);
  background-size: 191px 28px;
}

#g_nav .nav ul li a.item_03 {
  background-image: url(../img/nav_03.png);
  background-size: 317px 28px;
}

#g_nav .nav ul li a.item_04 {
  background-image: url(../img/nav_04.png);
  background-size: 229px 28px;
}

#g_nav .nav ul li a.item_05 {
  background-image: url(../img/nav_05.png);
  background-size: 278px 28px;
}

#g_nav .toggle {
  position: fixed;
  top: 24px;
  right: 32px;
  width: 35px;
  height: 28px;
  z-index: 32;
  cursor: pointer;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

#g_nav .toggle:hover {
  opacity: 0.5;
}

#g_nav .toggle .line {
  position: absolute;
  display: block;
  width: 35px;
  height: 4px;
  background-color: #96878a;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

#g_nav .toggle .line_01 {
  top: 0;
  left: 0;
}

#g_nav .toggle .line_02 {
  top: 12px;
  left: 0;
}

#g_nav .toggle .line_03 {
  top: 24px;
  left: 0;
}

#g_nav .toggle .line_04 {
  top: 12px;
  left: 0;
}

#g_nav.active .nav {
  right: 0;
  opacity: 1;
}

#g_nav.active .toggle .line_01 {
  top: 8px;
  opacity: 0;
}

#g_nav.active .toggle .line_02 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#g_nav.active .toggle .line_03 {
  top: 16px;
  opacity: 0;
}

#g_nav.active .toggle .line_04 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sp #g_nav .toggle {
  top: 48px;
  right: 64px;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: scale(2);
  transform: scale(2);
}

@media screen and (max-height: 950px) {
  #background,
  #background .jumbo .bk {
    background-position: 50% 30%;
  }
  #g_nav .nav ul li {
    height: 100px;
  }
}

@media screen and (max-height: 700px) {
  #background,
  #background .jumbo .bk {
    background-position: 50% 20%;
  }
}

@media screen and (max-height: 580px) {
  #background,
  #background .jumbo .bk {
    background-position: 50% 20%;
  }
  #g_nav .nav ul li {
    height: 70px;
  }
}

@media screen and (max-height: 430px) {
  #background,
  #background .jumbo .bk {
    background-position: 50% 20%;
  }
}

.section_box {
  width: 980px;
  margin: 0 auto;
  padding-top: 100px;
}

.section_box > .header h2 {
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

.section_box > .inner {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#about > .header h2 {
  width: 308px;
  height: 45px;
  background-image: url(../img/about_h2.png);
}

#about > .inner p {
  width: 804px;
  height: 183px;
  margin: 50px auto;
}

#about > .inner p span {
  display: block;
  background-image: url(../img/about_text.png);
  background-size: 804px 183px;
  background-repeat: no-repeat;
  font-size: 0;
}

#about > .inner p span.line_01 {
  height: 55px;
  background-position: 0 0;
}

#about > .inner p span.line_02 {
  height: 70px;
  background-position: 0 -55px;
}

#about > .inner p span.line_03 {
  height: 58px;
  background-position: 0 -125px;
}

#about > .inner .thumbnail_01 {
  display: block;
  width: 700px;
  height: 396px;
  margin: 0 auto;
  background-image: url(../img/about_img.png);
  cursor: pointer;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
}

#about > .inner .thumbnail_01:hover {
  opacity: 0.7;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}

#character > .header h2 {
  width: 593px;
  height: 45px;
  background-image: url(../img/character_h2.png);
}

#character .character_box {
  position: relative;
  width: 980px;
  margin: 0 auto;
  left: 20px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#character .character_box .item {
  position: relative;
}

#character .character_box .item h3 {
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .character_box .item p {
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .main_character {
  margin-top: 50px;
}

#character .main_character .item {
  height: 150px;
  padding-top: 575px;
}

#character .main_character .item h3 {
  margin-bottom: 20px;
}

#character .main_character .item .img {
  position: absolute;
  width: 100%;
  height: 575px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  font-size: 0;
}

#character .main_character .item_01 {
  width: 295px;
}

#character .main_character .item_01 h3 {
  width: 161px;
  height: 35px;
  background-image: url(../img/character_01_name.png);
}

#character .main_character .item_01 p {
  width: 286px;
  height: 90px;
  background-image: url(../img/character_01_text.png);
}

#character .main_character .item_01 .img {
  top: 20px;
  left: -20px;
  background-image: url(../img/character_01_img.png);
  background-size: 292px 505px;
}

#character .main_character .item_02 {
  width: 300px;
}

#character .main_character .item_02 h3 {
  width: 135px;
  height: 35px;
  background-image: url(../img/character_02_name.png);
}

#character .main_character .item_02 p {
  width: 229px;
  height: 90px;
  background-image: url(../img/character_02_text.png);
}

#character .main_character .item_02 .img {
  top: -30px;
  left: 40px;
  background-image: url(../img/character_02_img.png);
  background-size: 282px 501px;
}

#character .main_character .item_03 {
  width: 308px;
  padding-right: 77px;
}

#character .main_character .item_03 h3 {
  width: 165px;
  height: 36px;
  background-image: url(../img/character_03_name.png);
}

#character .main_character .item_03 p {
  width: 247px;
  height: 90px;
  background-image: url(../img/character_03_text.png);
}

#character .main_character .item_03 .img {
  left: -30px;
  background-image: url(../img/character_03_img.png);
  background-size: 462px 570px;
}

#character .senshi_character {
  position: relative;
  margin-top: 90px;
}

#character .senshi_character .header {
  width: 100%;
}

#character .senshi_character .header h3 {
  width: 151px;
  height: 37px;
  margin: 0 auto;
  background-image: url(../img/character_h3_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .senshi_character .header p {
  width: 725px;
  height: 26px;
  margin: 20px auto 35px;
  background-image: url(../img/character_text_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .senshi_character .item {
  position: relative;
  width: 196px;
  height: 50px;
  padding-top: 380px;
}

#character .senshi_character .item h4 {
  margin-bottom: 20px;
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .senshi_character .item .img {
  position: absolute;
  width: 100%;
  height: 337px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  font-size: 0;
}

#character .senshi_character .item_04 h4 {
  width: 125px;
  height: 30px;
  background-image: url(../img/character_04_name.png);
}

#character .senshi_character .item_04 .img {
  width: 368px;
  top: 30px;
  left: -50px;
  background-image: url(../img/character_04_img.png);
  background-size: 368px 320px;
}

#character .senshi_character .item_05 h4 {
  width: 152px;
  height: 30px;
  background-image: url(../img/character_05_name.png);
}

#character .senshi_character .item_05 .img {
  top: 22px;
  left: -2px;
  background-image: url(../img/character_05_img.png);
  background-size: 186px 308px;
}

#character .senshi_character .item_06 h4 {
  width: 150px;
  height: 30px;
  background-image: url(../img/character_06_name.png);
}

#character .senshi_character .item_06 .img {
  top: 22px;
  left: 18px;
  background-image: url(../img/character_06_img.png);
  background-size: 195px 316px;
}

#character .senshi_character .item_07 h4 {
  width: 146px;
  height: 32px;
  background-image: url(../img/character_07_name.png);
}

#character .senshi_character .item_07 .img {
  top: 13px;
  left: -22px;
  background-image: url(../img/character_07_img.png);
  background-size: 182px 270px;
  z-index: 3;
}

#character .senshi_character .item_08 h4 {
  width: 101px;
  height: 28px;
  background-image: url(../img/character_08_name.png);
}

#character .senshi_character .item_08 .img {
  width: 306px;
  top: 19px;
  left: -80px;
  background-image: url(../img/character_08_img.png);
  background-size: 306px 337px;
}

#character .shimin_character {
  position: relative;
  margin-top: 60px;
}

#character .shimin_character .header {
  width: 100%;
}

#character .shimin_character .header h3 {
  width: 292px;
  height: 38px;
  margin: 0 auto 20px;
  background-image: url(../img/character_h3_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .shimin_character .item {
  position: relative;
  width: 190px;
  height: 50px;
  padding-top: 270px;
}

#character .shimin_character .item h4 {
  margin-bottom: 20px;
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#character .shimin_character .item .img {
  position: absolute;
  width: 100%;
  height: 250px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  font-size: 0;
}

#character .shimin_character .item_09 h4 {
  width: 126px;
  height: 31px;
  background-image: url(../img/character_09_name.png);
}

#character .shimin_character .item_09 .img {
  top: 0;
  left: 0;
  background-image: url(../img/character_09_img.png);
  background-size: 97px 221px;
}

#character .shimin_character .item_10 h4 {
  width: 129px;
  height: 30px;
  background-image: url(../img/character_10_name.png);
}

#character .shimin_character .item_10 .img {
  top: 0;
  left: 0;
  background-image: url(../img/character_10_img.png);
  background-size: 101px 227px;
}

#character .shimin_character .item_11 h4 {
  width: 121px;
  height: 30px;
  background-image: url(../img/character_11_name.png);
}

#character .shimin_character .item_11 .img {
  top: 0;
  left: 0;
  background-image: url(../img/character_11_img.png);
  background-size: 108px 230px;
}

#character .shimin_character .item_12 h4 {
  width: 104px;
  height: 28px;
  background-image: url(../img/character_12_name.png);
}

#character .shimin_character .item_12 .img {
  top: 0;
  left: 0;
  background-image: url(../img/character_12_img.png);
  background-size: 97px 206px;
}

#character .shimin_character .item_13 h4 {
  width: 127px;
  height: 29px;
  background-image: url(../img/character_13_name.png);
}

#character .shimin_character .item_13 .img {
  top: 0;
  left: 0;
  background-image: url(../img/character_13_img.png);
  background-size: 62px 200px;
}

#system > .header h2 {
  width: 368px;
  height: 46px;
  background-image: url(../img/system_h2.png);
}

#system .system_section {
  width: 980px;
  margin: 0 auto;
}

#system .system_section h3 {
  margin: 50px auto 40px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_flow h3 {
  width: 184px;
  height: 35px;
  background-image: url(../img/system_01_h3.png);
}

#system #system_flow .flow_wrap {
  position: relative;
  width: 980px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#system #system_flow .flow_wrap .item .img {
  display: block;
  width: 480px;
  height: 270px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_flow .flow_wrap .item p {
  margin: 5px 0 13px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_flow .flow_wrap .item_01 .img {
  background-image: url(../img/system_01_item_01_img.png);
}

#system #system_flow .flow_wrap .item_01 p {
  width: 185px;
  height: 23px;
  background-image: url(../img/system_01_item_01_text.png);
}

#system #system_flow .flow_wrap .item_02 .img {
  background-image: url(../img/system_01_item_02_img.png);
}

#system #system_flow .flow_wrap .item_02 p {
  width: 327px;
  height: 23px;
  margin-right: 0;
  margin-left: auto;
  background-image: url(../img/system_01_item_02_text.png);
}

#system #system_flow .flow_wrap .item_03 .img {
  background-image: url(../img/system_01_item_03_img.png);
}

#system #system_flow .flow_wrap .item_03 p {
  width: 181px;
  height: 23px;
  background-image: url(../img/system_01_item_03_text.png);
}

#system #system_flow .flow_wrap .item_04 .img {
  background-image: url(../img/system_01_item_04_img.png);
}

#system #system_flow .flow_wrap .item_04 p {
  width: 412px;
  height: 24px;
  margin-right: 0;
  margin-left: auto;
  background-image: url(../img/system_01_item_04_text.png);
}

#system #system_flow .flow_wrap .arrow {
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_flow .flow_wrap .arrow.arrow_01 {
  width: 131px;
  height: 69px;
  top: 160px;
  left: 425px;
  background-image: url(../img/system_01_arrow_lr.png);
}

#system #system_flow .flow_wrap .arrow.arrow_02 {
  width: 69px;
  height: 129px;
  top: 226px;
  left: 345px;
  background-image: url(../img/system_01_arrow_ud.png);
}

#system #system_flow .flow_wrap .arrow.arrow_03 {
  width: 69px;
  height: 129px;
  top: 226px;
  left: 565px;
  background-image: url(../img/system_01_arrow_ud.png);
}

#system #system_flow .flow_wrap .arrow.arrow_04 {
  width: 131px;
  height: 69px;
  top: 355px;
  left: 425px;
  background-image: url(../img/system_01_arrow_lr.png);
}

#system #system_ending h3 {
  width: 214px;
  height: 35px;
  background-image: url(../img/system_02_h3.png);
}

#system #system_ending .text_01 {
  width: 903px;
  height: 91px;
  margin: 0 auto;
}

#system #system_ending .text_01 span {
  display: block;
  background-image: url(../img/system_02_text_01.png);
  background-size: 903px 91px;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .text_01 span.line_01 {
  height: 45px;
  background-position: 0 0;
}

#system #system_ending .text_01 span.line_02 {
  height: 46px;
  background-position: 0 -45px;
}

#system #system_ending .ending_wrap {
  position: relative;
  padding-top: 50px;
}

#system #system_ending .ending_wrap .img_01 {
  width: 480px;
  height: 270px;
  margin: 0 auto;
  background-image: url(../img/system_02_img_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .ending_wrap .line_wrap {
  width: 515px;
  height: 161px;
  margin: 10px auto 20px;
}

#system #system_ending .ending_wrap .line {
  width: 515px;
  height: 161px;
  background-image: url(../img/system_02_line.png);
  background-size: 515px 161px;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

#system #system_ending .ending_wrap p {
  position: absolute;
  width: 564px;
  height: 52px;
  top: 393px;
  left: 50%;
  margin-left: -282px;
  background-image: url(../img/system_02_text_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .ending_wrap .imgs {
  height: 270px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#system #system_ending .ending_wrap .imgs .img_02 {
  width: 480px;
  height: 270px;
  background-image: url(../img/system_02_img_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .ending_wrap .imgs .img_03 {
  width: 480px;
  height: 270px;
  background-image: url(../img/system_02_img_03.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .text_02 {
  width: 948px;
  height: 138px;
  margin: 40px auto 0;
}

#system #system_ending .text_02 span {
  display: block;
  background-image: url(../img/system_02_text_03.png);
  background-size: 948px 138px;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_ending .text_02 span.line_01 {
  height: 30px;
  background-position: 0 0;
}

#system #system_ending .text_02 span.line_02 {
  height: 50px;
  background-position: 0 -30px;
}

#system #system_ending .text_02 span.line_03 {
  height: 58px;
  background-position: 0 -80px;
}

#system #system_battle {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#system #system_battle h3 {
  width: 100%;
  height: 31px;
  margin: 100px auto 65px;
  background-image: url(../img/system_03_h3.png);
  background-size: 213px 31px;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

#system #system_battle .item {
  width: 480px;
}

#system #system_battle .item h4 {
  width: 100%;
  height: 58px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_battle .item .img {
  width: 480px;
  height: 270px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_battle .item p {
  width: 480px;
  margin: 16px 0 40px;
  background-size: contain;
  background-position: 50% 0;
  background-repeat: no-repeat;
  font-size: 0;
}

#system #system_battle .item_01 h4 {
  background-image: url(../img/system_03_item_01_h4.png);
  background-size: 75px 42px;
}

#system #system_battle .item_01 .img {
  background-image: url(../img/system_03_item_01_img.png);
}

#system #system_battle .item_01 p {
  height: 48px;
  background-image: url(../img/system_03_item_01_text.png);
}

#system #system_battle .item_02 h4 {
  background-image: url(../img/system_03_item_02_h4.png);
  background-size: 165px 39px;
}

#system #system_battle .item_02 .img {
  background-image: url(../img/system_03_item_02_img.png);
}

#system #system_battle .item_02 p {
  height: 48px;
  background-image: url(../img/system_03_item_02_text.png);
}

#system #system_battle .item_03 h4 {
  background-image: url(../img/system_03_item_03_h4.png);
  background-size: 442px 40px;
}

#system #system_battle .item_03 .img {
  background-image: url(../img/system_03_item_03_img.png);
}

#system #system_battle .item_03 p {
  height: 74px;
  background-image: url(../img/system_03_item_03_text.png);
}

#system #system_battle .item_04 h4 {
  background-image: url(../img/system_03_item_04_h4.png);
  background-size: 102px 35px;
}

#system #system_battle .item_04 .img {
  background-image: url(../img/system_03_item_04_img.png);
}

#system #system_battle .item_04 p {
  height: 74px;
  background-image: url(../img/system_03_item_04_text.png);
}

#system #system_battle .item_05 h4 {
  background-image: url(../img/system_03_item_05_h4.png);
  background-size: 259px 39px;
}

#system #system_battle .item_05 .img {
  background-image: url(../img/system_03_item_05_img.png);
}

#system #system_battle .item_05 p {
  height: 74px;
  background-image: url(../img/system_03_item_05_text.png);
}

#system #system_battle .item_06 h4 {
  background-image: url(../img/system_03_item_06_h4.png);
  background-size: 169px 38px;
}

#system #system_battle .item_06 .img {
  background-image: url(../img/system_03_item_06_img.png);
}

#system #system_battle .item_06 p {
  height: 74px;
  background-image: url(../img/system_03_item_06_text.png);
}

#product {
  padding-top: 50px;
}

#product > .header h2 {
  width: 448px;
  height: 45px;
  background-image: url(../img/product_h2.png);
}

#product > .inner {
  padding-top: 55px;
}

#product > .inner ul {
  width: 980px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

#product > .inner ul li {
  height: 50px;
  border-bottom: 1px solid #966742;
}

#product > .inner ul li:nth-of-type(2n+1) {
  width: 380px;
  padding-left: 80px;
}

#product > .inner ul li:nth-of-type(2n) {
  width: 520px;
}

#product > .inner ul li dl {
  width: 100%;
  height: 50px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#product > .inner ul li dl dt {
  margin-right: 15px;
  color: #966742;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

#product > .inner ul li dl dt:before {
  display: inline-block;
  margin-right: 5px;
  font-weight: 400;
  content: "◆";
}

#product > .inner ul li dl dd {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

#footer {
  width: 100%;
  margin-top: 130px;
  padding: 55px 0 100px;
  background-color: #0f070d;
}

#footer .inner {
  width: 980px;
  height: 62px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#footer .inner .maker_logo {
  height: 62px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#footer .inner .maker_logo .item {
  display: block;
  margin-right: 32px;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
}

#footer .inner .maker_logo .item:hover {
  opacity: 0.7;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}

#footer .inner .maker_logo .item_01 {
  width: 57px;
  height: 57px;
  background-image: url(../img/footer_logo_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#footer .inner .maker_logo .item_02 {
  width: 48px;
  height: 57px;
  background-image: url(../img/footer_logo_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#footer .inner p {
  width: 580px;
  height: 62px;
  background-image: url(../img/footer_text.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

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

#modal .inner {
  position: absolute;
  width: 1024px;
  height: 576px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
}

#modal .close {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  left: 50%;
  z-index: 42;
  cursor: pointer;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
  -webkit-transform: translateY(320px);
  transform: translateY(320px);
}

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

#modal .close:before {
  position: absolute;
  display: block;
  width: 35px;
  height: 4px;
  top: 0;
  left: 0;
  background-color: #96878a;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

#modal .close:after {
  position: absolute;
  display: block;
  width: 35px;
  height: 4px;
  top: 0;
  left: 0;
  background-color: #96878a;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
}

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

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

#loading .inner .bar {
  position: relative;
  width: 400px;
  height: 1px;
  background-color: #333138;
}

#loading .inner .progress {
  position: absolute;
  width: 0;
  height: 1px;
  top: 0;
  left: 0;
  background-color: #d56038;
}
/*# sourceMappingURL=style.css.map */