/*----------------------------------------------
variable
----------------------------------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg_loading.png");
  background-position: center;
  background-size: cover;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  min-height: 653px;
  opacity: 0;
  visibility: hidden; }
  @media (max-width: 767px) {
    .loading {
      min-height: auto; } }
  .loading.finished {
    visibility: hidden !important;
    z-index: -100; }
  .loading.animated {
    animation: loading 4s forwards; }
    .loading.animated .anime1 {
      animation: loading_anime1 4s forwards; }
    .loading.animated .anime2 {
      animation: loading_anime2 4s forwards; }
  .loading .anime1 {
    color: #fff;
    font-size: 4rem;
    line-height: 1.45;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    padding: 20px; }
    @media (max-width: 767px) {
      .loading .anime1 {
        font-size: calc(30 / 390 * 100vw);
        padding: calc(15 / 390 * 100vw); } }
  .loading .anime2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    padding: 20px; }
    .loading .anime2 .anime2Text {
      color: #fff;
      font-weight: bold;
      font-size: 2rem;
      line-height: 1.45;
      margin-bottom: 17px;
      text-align: center;
      letter-spacing: 0.14em; }
      @media (max-width: 767px) {
        .loading .anime2 .anime2Text {
          padding: calc(15 / 390 * 100vw);
          font-size: calc(18 / 390 * 100vw);
          margin-bottom: calc(10 / 390 * 100vw); } }
  .loading .skip {
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    position: absolute;
    bottom: 30px;
    right: 30px;
    cursor: pointer; }
    @media (max-width: 767px) {
      .loading .skip {
        bottom: 20px;
        right: 20px; } }
    .loading .skip::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 11px 8px;
      border-color: transparent transparent #fff transparent;
      right: 0;
      transform: translateY(-1px) rotate(90deg);
      transition: all 0.2s ease-out 0s;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px; }

@keyframes loading {
  0% {
    opacity: 1;
    visibility: visible; }
  75% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0; } }
@keyframes loading_anime1 {
  0% {
    opacity: 0;
    visibility: hidden; }
  5% {
    opacity: 0;
    visibility: hidden; }
  8% {
    opacity: 1;
    visibility: visible; }
  33% {
    opacity: 1;
    visibility: visible; }
  36% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 0;
    visibility: hidden; } }
@keyframes loading_anime2 {
  0% {
    opacity: 0;
    visibility: hidden; }
  40% {
    opacity: 0;
    visibility: hidden; }
  43% {
    opacity: 0;
    visibility: hidden; }
  68% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 1;
    visibility: visible; } }
#wrapper {
  opacity: 0;
  visibility: hidden; }
  #wrapper.hide {
    opacity: 0;
    visibility: hidden;
    transition: 1s ease-in; }
  #wrapper.show {
    opacity: 1;
    visibility: visible; }