#splash {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: url("/assets/img/common/splash_bg_01.png");
  background-size: cover;
  text-align: center;
  filter: grayscale(100%);
  transition: filter 1s; }
  #splash.active {
    filter: grayscale(0); }
  #splash .pc_line {
    display: block; }
    @media screen and (max-width: 1024px) {
      #splash .pc_line {
        display: none; } }
    #splash .pc_line #line_08,
    #splash .pc_line #line_09 {
      display: block;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 1; }
      @media screen and (max-width: 1024px) {
        #splash .pc_line #line_08,
        #splash .pc_line #line_09 {
          width: auto;
          height: 100vh; } }
  #splash .sp_line {
    display: none; }
    @media screen and (max-width: 1024px) {
      #splash .sp_line {
        display: block; } }
    @media screen and (max-width: 1024px) {
      #splash .sp_line #line_08_sp,
      #splash .sp_line #line_09_sp {
        width: 100%;
        position: absolute;
        z-index: 1; } }
    #splash .sp_line #line_08_sp {
      top: 40%;
      transform: translateY(-40%); }
    #splash .sp_line #line_09_sp {
      top: 58%;
      transform: translateY(-58%); }
  #splash #splashInner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; }
    #splash #splashInner #text-progress {
      display: none; }
      #splash #splashInner #text-progress div {
        text-align: left; }
        #splash #splashInner #text-progress div:nth-child(2) span:first-child {
          margin-left: 0.5em; }
        #splash #splashInner #text-progress div:nth-child(3) span:first-child {
          margin-left: 0.1em; }
        #splash #splashInner #text-progress div:last-child span:first-child {
          margin-left: 4.25em; }
        #splash #splashInner #text-progress div span {
          font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
          font-weight: 300;
          font-style: normal;
          font-size: 4.25em;
          line-height: 1;
          letter-spacing: 0.1em;
          position: relative;
          color: #fff; }
          @media screen and (max-width: 599px) {
            #splash #splashInner #text-progress div span {
              font-size: 2.5em; } }
      #splash #splashInner #text-progress.active div span {
        animation: text 1.5s forwards; }
      #splash #splashInner #text-progress.active div:first-of-type span:nth-of-type(2) {
        animation-delay: 1.2s; }
      #splash #splashInner #text-progress.active div:first-of-type span:last-of-type {
        animation-delay: .4s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:first-of-type {
        animation-delay: .9s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:nth-of-type(2) {
        animation-delay: 1.6s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:nth-of-type(3) {
        animation-delay: 1.8s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:nth-of-type(4) {
        animation-delay: 1s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:nth-of-type(5) {
        animation-delay: .2s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:nth-of-type(6) {
        animation-delay: 1.4s; }
      #splash #splashInner #text-progress.active div:nth-child(2) span:last-of-type {
        animation-delay: .7s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:first-of-type {
        animation-delay: 1.5s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:nth-of-type(2) {
        animation-delay: .3s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:nth-of-type(3) {
        animation-delay: 1.1s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:nth-of-type(4) {
        animation-delay: 1.7s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:nth-of-type(5) {
        animation-delay: .6s; }
      #splash #splashInner #text-progress.active div:nth-child(3) span:last-of-type {
        animation-delay: .8s; }
      #splash #splashInner #text-progress.active div:last-child span:first-of-type {
        animation-delay: .1s; }
      #splash #splashInner #text-progress.active div:last-child span:nth-of-type(2) {
        animation-delay: 1.3s; }
      #splash #splashInner #text-progress.active div:last-child span:last-of-type {
        animation-delay: .5s; }
    #splash #splashInner #posBLock {
      display: none;
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-family: 'Noto Sans JP', sans-serif; }
      #splash #splashInner #posBLock #skip {
        text-align: right;
        margin: 0 0 10px;
        color: #918DD1;
        /*
        text-align: right;
        margin: 0 0 10px;
        color: #918DD1;
        span {
         display: inline-block;
         width: 240px;
         line-height: 40px;
         border: solid 1px #707070;
         background-color: transparent;
         font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
         font-weight: 300;
         font-style: normal;
         text-align: center;
         cursor: pointer;
         @include tab {
          width: auto;
          padding: 0 20px;
         }
        }
        */ }
        #splash #splashInner #posBLock #skip span {
          padding: 0 5px;
          cursor: pointer; }
          @media screen and (min-width: 1025px) {
            #splash #splashInner #posBLock #skip span:hover {
              text-decoration: underline; } }
      #splash #splashInner #posBLock .copy {
        font-size: 0.625em;
        color: #838383; }

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  0% {
    opacity: 0;
    transform: translateY(100px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@keyframes gradientMove {
  0% {
    background-position: 100% 0%; }
  100% {
    background-position: 0% 0%; } }
@keyframes text {
  0% {
    color: #fff; }
  50% {
    color: rgba(120, 80, 149, 0.5);
    opacity: 0.1; }
  100% {
    color: rgba(120, 80, 149, 0.8);
    opacity: 1; } }