@charset "UTF-8";
/*
 * Author: Taigo Ito
 * Site: https://qwel.design
 * Location: Fukui, Japan
 */
/* Foundation
 * Normalize.css v8.0 | MIT License | github.com/necolas/normalize.css
------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  font-size: 18px;
}

@media (max-width: 575px) {
  :root {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: #000000;
  color: #d9d9d9;
  font-family: "游ゴシック", YuGothic, "ヒラギノゴシック ProN W3", "Hiragino Gothic ProN", Roboto, "Droid Sans", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-align: justify;
  line-height: 1.15;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Roboto, "Droid Sans", "メイリオ", Meiryo, serif;
  font-weight: 500;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.6;
}

ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

ol li, ul li {
  margin-bottom: .5rem;
}

blockquote {
  margin-left: 1rem;
  padding-left: .75rem;
  border-left: 0.25rem solid #d9d9d9;
}

blockquote p, blockquote cite {
  font-style: italic;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

strong {
  font-weight: bolder;
}

small {
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

a {
  color: #b3b3b3;
  text-decoration: none;
}

a:focus {
  outline: 0;
}

a:hover {
  color: #999966;
  text-decoration: none;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  color: #4d4d4d;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

th {
  font-weight: 500;
  text-align: left;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Layout Title
------------------------------*/
html, body {
  width: 100%;
  height: 100%;
  min-height: 576px;
}

body {
  overflow-y: scroll;
}

#title {
  position: relative;
  z-index: 1000;
  height: 144px;
  margin-bottom: .5rem;
  border-bottom: 2px solid #e6e6e6;
  -webkit-transition: 1s all ease-in-out;
  transition: 1s all ease-in-out;
}

h1 {
  position: absolute;
  left: 0;
  bottom: -.5rem;
  width: 24rem;
  font-size: 3rem;
  line-height: 2rem;
  text-align: center;
  -webkit-transition: 1s all ease-in-out;
  transition: 1s all ease-in-out;
}

h1 span {
  font-size: 1rem;
}

@media (min-width: 768px) {
  h1 {
    left: 12.5%;
  }
}

.entrance #title {
  height: 50vh;
}

.entrance h1 {
  left: 50%;
  margin-left: -12rem;
}

.main-menu {
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  text-align: center;
}

.main-menu__item {
  list-style-type: none;
  display: inline;
}

.main-menu__item:not(:first-child)::before {
  content: "/";
  margin-right: .65em;
}

h2 {
  margin-top: 1.5rem;
  margin-bottom: 1.15rem;
  padding-left: 0.65rem;
  padding-bottom: 5px;
  border-bottom: 1px dotted #e6e6e6;
  line-height: 1;
}

h3 {
  padding-left: .65rem;
  border-left: 0.35rem solid #e6e6e6;
  font-size: 1.5rem;
}

h4 {
  margin-top: 1.75rem;
  font-weight: 500;
  font-size: 1.25rem;
}

h4::before {
  content: "- ";
  vertical-align: 8%;
}

h5, h6 {
  font-family: "游ゴシック", YuGothic, "ヒラギノゴシック ProN W3", "Hiragino Gothic ProN", Roboto, "Droid Sans", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

p {
  margin-bottom: .25rem;
  text-align: justify;
  text-indent: .65em;
}

.list-items {
  margin: 1rem auto;
}

.list-items li {
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

.table-fluid {
  width: 100%;
  overflow: auto;
}

.table {
  width: 100%;
  margin: 1rem auto;
}

.table tr {
  border-top: 1px solid #b3b3b3;
}

.table th, .table td {
  padding: .625rem 0;
}

.table tr:hover {
  background: rgba(255, 255, 255, 0.15);
}

.table th, .table td {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
  text-align: center;
}

.table th.th--head, .table th.td--head, .table td.th--head, .table td.td--head {
  width: 8rem;
}

.table th.th--desc, .table th.td--desc, .table td.th--desc, .table td.td--desc {
  padding-left: .65rem;
  padding-right: .65rem;
  text-align: left;
}

caption {
  caption-side: top;
  padding-top: .5rem;
  padding-bottom: .5rem;
  color: #cccccc;
  font-style: italic;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
  text-align: left;
}

#cover-image, #cover-gradient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

#cover-image {
  background: url(./images/landscape00.jpg) center center/cover no-repeat scroll;
}

#cover-gradient {
  background: radial-gradient(rgba(0, 0, 0, 0.5), black);
}

footer {
  margin: 6rem auto;
  text-align: center;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height .25s ease;
  transition: height .25s ease;
}

.anim-show {
  -webkit-animation: fadein .35s ease-out;
          animation: fadein .35s ease-out;
}

.anim-hide {
  -webkit-animation: fadeout .15s ease-out;
          animation: fadeout .15s ease-out;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Layout Docs
------------------------------*/
.document {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 576px) {
  .document {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .document {
    max-width: 768px;
  }
}

@media (min-width: 1152px) {
  .document {
    max-width: 1152px;
  }
}

.document > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

.document__navigation {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .document__navigation {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}

.document__article {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .document__article {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

.docs-nav {
  list-style-type: upper-roman;
  padding-left: 2rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Roboto, "Droid Sans", "メイリオ", Meiryo, serif;
  font-weight: 500;
  font-size: 1.17rem;
}

.docs-nav > li:first-child,
.docs-nav > li:last-child {
  list-style-type: none;
}

.docs-nav__item {
  list-style-type: lower-roman;
  margin-left: -1.5rem;
  margin-bottom: .25rem;
  padding-left: 3rem;
  font-size: 1rem;
}

.docs-nav__item > li:first-child {
  margin-top: .5rem;
}

.pagination {
  margin: 1.5rem auto;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

.pagination::after {
  display: block;
  clear: both;
  content: "";
}

.pagination__prev {
  float: left;
}

.pagination__next {
  float: right;
}

/* Layout Sample
------------------------------*/
#sample {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  #sample {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

#sample > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

#sample-select > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
  margin-left: 0;
}

#sample-select > .inner p {
  line-height: inherit;
}

#sample-select > .inner label {
  display: block;
}

#sample-select > .inner input[type="text"], #sample-select > .inner input[type="tel"], #sample-select > .inner input[type="url"], #sample-select > .inner input[type="email"], #sample-select > .inner input[type="password"], #sample-select > .inner input[type="file"], #sample-select > .inner select, #sample-select > .inner optgroup, #sample-select > .inner textarea {
  display: block;
  width: 100%;
  margin-top: .5rem;
  margin-bottom: 1rem;
  padding-left: 9px;
  padding-right: 9px;
}

#sample-select > .inner input[type="text"], #sample-select > .inner input[type="tel"], #sample-select > .inner input[type="url"], #sample-select > .inner input[type="email"], #sample-select > .inner input[type="password"], #sample-select > .inner input[type="file"], #sample-select > .inner select, #sample-select > .inner optgroup {
  height: 2.8rem;
}

#sample-select > .inner input[type="file"] {
  outline: 0;
}

#sample-select > .inner textarea {
  padding-top: 9px;
  padding-top: 9px;
  resize: vertical;
}

#sample-select > .inner [type="button"], #sample-select > .inner [type="reset"], #sample-select > .inner [type="submit"] {
  display: block;
  margin: auto;
  padding: 0.75rem 6rem;
  border: none;
  background-color: #999966;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  margin: auto;
}

#sample-select > .inner [type="button"]:hover, #sample-select > .inner [type="reset"]:hover, #sample-select > .inner [type="submit"]:hover {
  background-color: #828257;
  color: #ffffff;
  text-decoration: none;
}

#sample-select > .inner .form-group {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  #sample-select > .inner .form-group {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
}

#sample-select > .inner .form-label {
  display: inline-block;
  width: 3rem;
  text-align: center;
}

#sample-select > .inner .form-control {
  display: inline-block;
  width: 9rem;
}

@media (min-width: 1152px) {
  #sample-select > .inner {
    margin-left: 4.5rem;
  }
}

#sample-list {
  opacity: 0;
}

#sample-list.show {
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#sample-list .sample-list-main {
  width: 48rem;
  margin: 0 auto;
}

#sample-list .sample-list-main thead th, #sample-list .sample-list-main thead td {
  padding: .5rem;
  border-top: 0;
}

#sample-list .sample-list-main tr {
  cursor: pointer;
}

#sample-list-overlay {
  position: absolute;
  top: 7.5rem;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  #sample-list-overlay {
    top: 3rem;
  }
}

#sample-list.show #sample-list-overlay {
  display: none;
}

#sample-unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
  top: 7.5rem;
  left: 0;
  right: 0;
  z-index: 20;
  margin: auto;
}

#sample-unit .table {
  border-bottom: 1px solid #b3b3b3;
}

#sample-unit .table th, #sample-unit .table td {
  padding: .4rem 0;
}

@media (min-width: 768px) {
  #sample-unit {
    top: 3rem;
  }
}

@media (min-width: 1152px) {
  #sample-unit {
    width: 48rem;
  }
}

.sample-unit-body-1 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .sample-unit-body-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}

.sample-unit-body-2 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .sample-unit-body-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

@media (max-width: 576px) {
  .sample-unit-body-2 .table {
    width: 36rem;
  }
}

.sample-unit-body-3 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .sample-unit-body-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .sample-unit-body-3 .table {
    width: 36rem;
  }
}

.sample-unit-skills th,
.sample-unit-equips th {
  font-weight: 500;
}

.border--none {
  border: 0 !important;
}

/* Layout Battle
------------------------------*/
#battle {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 87.5%;
  line-height: 1.8;
  letter-spacing: 0.04rem;
}

@media (min-width: 1152px) {
  #battle {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

#battle > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#battle h5, #battle h6 {
  margin-top: 0;
  margin-bottom: 0;
}

#battle .caption {
  line-height: 2rem;
  font-weight: 500;
  font-size: 87.5%;
  letter-spacing: 0.04rem;
}

#battle-formation,
#battle-summary,
#battle-command,
#battle-log {
  display: none;
  padding-right: 1rem;
  padding-left: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media (min-width: 768px) {
  #battle-formation,
  #battle-summary,
  #battle-command,
  #battle-log {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 42rem;
  }
}

@media (min-width: 1152px) {
  #battle-formation,
  #battle-summary,
  #battle-command,
  #battle-log {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 31.5rem;
  }
}

#battle-formation {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  height: 10.5rem;
  background: rgba(255, 255, 255, 0.15);
}

#battle-summary {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  height: 21rem;
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1152px) {
  #battle-summary {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

#battle-command {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  height: 10.5rem;
  background: rgba(255, 255, 255, 0.15);
}

@media (min-width: 1152px) {
  #battle-command {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    background: rgba(255, 255, 255, 0.3);
  }
}

#battle-log {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  height: 21rem;
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1152px) {
  #battle-log {
    background: rgba(255, 255, 255, 0.15);
  }
}

#battle-formation-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-right: 0;
  margin-left: 0;
}

#battle-formation-col-pc-back,
#battle-formation-col-pc-forward,
#battle-formation-col-enemy-forward,
#battle-formation-col-enemy-back {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

#battle-formation-col-pc-back > div,
#battle-formation-col-pc-forward > div,
#battle-formation-col-enemy-forward > div,
#battle-formation-col-enemy-back > div {
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  overflow: hidden;
}

#battle-formation-col-pc-forward {
  padding-top: .75rem;
  padding-bottom: 1.25rem;
  border-right: 1px solid red;
}

#battle-formation-col-enemy-forward {
  padding-top: .75rem;
  padding-bottom: 1.25rem;
  border-left: 1px solid red;
}

#battle-formation .c-bad {
  color: #fcc;
}

#battle-formation .c-worse {
  color: #f99;
}

#battle-formation .c-worst {
  color: #f66;
}

#battle-formation .dead {
  color: #f66;
}

#battle-summary {
  font-size: 87.5%;
}

#battle-summary table {
  width: 100%;
}

#battle-summary caption {
  padding: 0;
  text-align: left;
}

#battle-summary thead {
  border-bottom: 1px solid #b3b3b3;
}

#battle-summary th, #battle-summary td {
  width: 6rem;
  padding: .25rem 0;
  text-align: center;
}

#battle-summary th:first-child, #battle-summary td:first-child {
  border-right: 1px solid #b3b3b3;
}

#battle-command {
  overflow: auto;
}

#battle-command .description {
  font-size: 87.5%;
}

#battle-command .description table {
  width: 16rem;
  margin: auto;
}

#battle-command button {
  width: 6rem;
  height: 2rem;
  margin-top: .25rem;
  margin-bottom: .25rem;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 87.5%;
}

#battle-command button:hover {
  background: rgba(0, 0, 0, 0.7);
}

#battle-command button:not(.active):not(.excute):not(.back) {
  display: none;
}

#battle-command-main,
.command-option {
  max-width: 25rem;
  margin: auto;
  text-align: center;
}

#battle-command-main:not(.active),
.command-option:not(.active) {
  display: none;
}

#battle-command-special button:not(.back),
#battle-command-spell button:not(.back) {
  width: 10.5rem;
}

#battle-command-special button:not(.back).inactive,
#battle-command-spell button:not(.back).inactive {
  color: gray;
}

#battle-log-container {
  width: 100%;
  height: 320px;
  overflow: hidden;
}

#battle-log-content {
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

#battle-log-content h6, #battle-log-content p {
  height: 24px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "游ゴシック", YuGothic, "ヒラギノゴシック ProN W3", "Hiragino Gothic ProN", Roboto, "Droid Sans", "メイリオ", Meiryo, sans-serif;
  font-size: 87.5%;
  text-indent: 1rem;
}

#battle-log-content p {
  text-indent: 2rem;
}

#battle-info {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 60rem;
  margin: 3rem auto;
}

@media (min-width: 1152px) {
  #battle-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

#battle-info > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

#battle-list {
  opacity: 0;
}

#battle-list.show {
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#battle-list .battle-list-main {
  width: 48rem;
  margin: 0 auto;
}

#battle-list .battle-list-main thead th, #battle-list .battle-list-main thead td {
  padding: .5rem;
  border-top: 0;
}

#battle-list .battle-list-main tr {
  cursor: pointer;
}

#battle-list-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

#battle-list.show #battle-list-overlay {
  display: none;
}

#battle-unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  margin: auto;
}

#battle-unit .table {
  border-bottom: 1px solid #b3b3b3;
}

#battle-unit .table th, #battle-unit .table td {
  padding: .4rem 0;
}

@media (min-width: 1152px) {
  #battle-unit {
    width: 48rem;
  }
}

.battle-unit-body-1 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .battle-unit-body-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}

.battle-unit-body-2 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .battle-unit-body-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

@media (max-width: 576px) {
  .battle-unit-body-2 .table {
    width: 36rem;
  }
}

.battle-unit-body-3 {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .battle-unit-body-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .battle-unit-body-3 .table {
    width: 36rem;
  }
}

.battle-unit-skills th,
.battle-unit-equips th {
  font-weight: 500;
}

/* Layout Progress
------------------------------*/
#developing-progress {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  #developing-progress {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

#developing-progress > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

#progress {
  margin: 0 1rem;
}

.developing-progress-table {
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1152px) {
  .developing-progress-table {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}

/* Component Evil icons
------------------------------*/
.icon {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  fill: currentColor;
}

.icon__cnt {
  width: 100%;
  height: 100%;
  background: inherit;
  fill: inherit;
  pointer-events: none;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -ms-transform: translate(0.5px, -0.3px);
}

.icon--m {
  width: 3rem;
  height: 3rem;
}

.icon--l {
  width: 4.5rem;
  height: 4.5rem;
}

/* Component No support
------------------------------*/
.no-support {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  padding: 2rem;
  background-color: #000000;
  color: #d9d9d9;
  text-align: center;
}

/* Component Preloader
------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 1;
  -webkit-transition: opacity ease-in-out .5s;
  transition: opacity ease-in-out .5s;
}

#preloader:not(.show) {
  opacity: 0;
}

#spinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  height: 48px;
  margin: auto;
}

#spinner > span {
  position: absolute;
  top: 18px;
  left: 22px;
  display: block;
  width: 4px;
  height: 12px;
  border-radius: 2px;
}

#spinner > span:nth-child(1) {
  background-color: rgba(217, 217, 217, 0.0714286);
  -webkit-transform: rotate(0deg) translate(0, 16px);
          transform: rotate(0deg) translate(0, 16px);
}

#spinner > span:nth-child(2) {
  background-color: rgba(217, 217, 217, 0.142857);
  -webkit-transform: rotate(30deg) translate(0, 16px);
          transform: rotate(30deg) translate(0, 16px);
}

#spinner > span:nth-child(3) {
  background-color: rgba(217, 217, 217, 0.214286);
  -webkit-transform: rotate(60deg) translate(0, 16px);
          transform: rotate(60deg) translate(0, 16px);
}

#spinner > span:nth-child(4) {
  background-color: rgba(217, 217, 217, 0.285714);
  -webkit-transform: rotate(90deg) translate(0, 16px);
          transform: rotate(90deg) translate(0, 16px);
}

#spinner > span:nth-child(5) {
  background-color: rgba(217, 217, 217, 0.357143);
  -webkit-transform: rotate(120deg) translate(0, 16px);
          transform: rotate(120deg) translate(0, 16px);
}

#spinner > span:nth-child(6) {
  background-color: rgba(217, 217, 217, 0.428571);
  -webkit-transform: rotate(150deg) translate(0, 16px);
          transform: rotate(150deg) translate(0, 16px);
}

#spinner > span:nth-child(7) {
  background-color: rgba(217, 217, 217, 0.5);
  -webkit-transform: rotate(180deg) translate(0, 16px);
          transform: rotate(180deg) translate(0, 16px);
}

#spinner > span:nth-child(8) {
  background-color: rgba(217, 217, 217, 0.571429);
  -webkit-transform: rotate(210deg) translate(0, 16px);
          transform: rotate(210deg) translate(0, 16px);
}

#spinner > span:nth-child(9) {
  background-color: rgba(217, 217, 217, 0.642857);
  -webkit-transform: rotate(240deg) translate(0, 16px);
          transform: rotate(240deg) translate(0, 16px);
}

#spinner > span:nth-child(10) {
  background-color: rgba(217, 217, 217, 0.714286);
  -webkit-transform: rotate(270deg) translate(0, 16px);
          transform: rotate(270deg) translate(0, 16px);
}

#spinner > span:nth-child(11) {
  background-color: rgba(217, 217, 217, 0.785714);
  -webkit-transform: rotate(300deg) translate(0, 16px);
          transform: rotate(300deg) translate(0, 16px);
}

#spinner > span:nth-child(12) {
  background-color: rgba(217, 217, 217, 0.857143);
  -webkit-transform: rotate(330deg) translate(0, 16px);
          transform: rotate(330deg) translate(0, 16px);
}
/*# sourceMappingURL=style.css.map */