@charset "utf-8";

@import "../../../common/css/layout.css";


body {
    background: url(../img/bg.jpg) repeat-y center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

/*-------------------------------------------------------------------------
  Title
/*-----------------------------------------------------------------------*/

  #ttl #chara01 {
    width: 27.43%;
    position: absolute;
    top: 0;
    right: 18%;
  }

/*-------------------------------------------------------------------------
  Job
/*-----------------------------------------------------------------------*/

#job {
    position: relative;
}
    #job h2 {
        width: 31.04%;
        margin: 2% 0 0 10.07%;
    }
    #job .slider {
        width: 37.50%;
        background: #ffe600;
        position: absolute;
        top: -2%;
        left: 50%;
        z-index: 2;
    }
        #job .slider .ttl {
          margin: 0 auto;
          padding-top: 3%;
        }
        #job .slider .txt {
          margin: 2% auto 0;
          padding: 0 0 4%;
        }
        #job .slider .box {
            width: 87.04%;
            margin: 2% auto 0;
            padding-top: 48.96%;
            background-color: #000;
            border: solid 8px #000;
            overflow: hidden;
            position: relative;
        }
          #job .slider .box iframe {
          }
        #job .slider .slide01 .ttl {
            width: 43.89%;
        }
        #job .slider .slide01 .txt {
            width: 67.04%;
        }
        #job .slider .slide02 .ttl {
            width: 29.44%;
        }
        #job .slider .slide02 .txt {
            width: 76.48%;
        }
        #job .slider .slide03 .ttl {
            width: 54.44%;
        }
        #job .slider .slide03 .txt {
            width: 79.26%;
        }


  #job .slick-next,
  #job .slick-prev {
    background-position: left top;
    background-repeat: no-repeat;
    width: 4.8vw;
    height: 8vw;
    text-indent: -9999px;
    z-index: 10;
    margin-top: -4%;
    background-size: 100%;
    transition: all .1s ease-out;
  }
  #job .slick-next {
    background-image: url(../img/job/slide/btn_next_off.png);
    animation: btnNext .8s ease infinite alternate;
    top: 44%;
    right: -16%;
  }
@keyframes btnNext {
  0% { transform: translateX(0); }
  16% { transform: translateX(8px);}
  32% { transform: translateX(0);}
  100% { transform: translateX(0);}
}
  #job .slick-prev {
    background-image: url(../img/job/slide/btn_prev_off.png);
    animation: btnPrev .8s ease infinite alternate;
    top: 44%;
    left: -16%;
  }
@keyframes btnPrev {
  0% { transform: translateX(0); }
  16% { transform: translateX(-8px);}
  32% { transform: translateX(0);}
  100% { transform: translateX(0);}
}
  #job .slick-next:hover {
    background-image: url(../img/job/slide/btn_next_on.png);
    animation-play-state: paused;
  }
  #job .slick-prev:hover {
    background-image: url(../img/job/slide/btn_prev_on.png);
    animation-play-state: paused;
  }
  #job .slick-list {
    margin-bottom: 1.5%;
  }
  #job .slick-dots {
    bottom: -9%;
  }
  #job .slick-dots li {
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 50px;
    background-color: #ffe600;
    margin: 0 2%;
  }
    #job .slick-dots li button {
      display: none;
    }
  #job .slick-dots li.slick-active {
    background-color: #000;
    border: solid 0.3vw #ffe600;
  }

  #job .ttl02 {
    width: 26.67%;
    position: absolute;
    bottom: 18%;
    right: 5%;
  }
  #job .anm {
    position: absolute;
  }

  #job #chara01 {
    width: 28.33%;
    position: absolute;
    top: -80%;
    left: 54%;
    z-index: 1;
  }

/*-------------------------------------------------------------------------
  Type
/*-----------------------------------------------------------------------*/

#type {
    padding: 6% 0 5%;
}
    #type > div {
        margin-top: 4%;
    }
    #type #spot {
        background: url(../img/type/bg.png) center center #a69e80;
        display: flex;
    }
        #type #spot .ttl {
            width: 40.07%;
        }
        #type #spot ul {
            width: 59.93%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #type #spot ul #antonball {
                width: calc( 41.95% + 4% );
                padding-right: 4%;
            }
            #type #spot ul #poker {
                width: 41.71%;
            }
    #type #race {
        background: url(../img/type/bg.png) center center #998ba6;
        display: flex;
    }
        #type #race .ttl {
            width: 58.33%;
        }
        #type #race .box {
            width: 41.67%;
        }
        #type #race .video {
            width: 80%;
            margin: 6% 0 0 10%;
            padding-bottom: 45%;
            border: solid 8px #000;
            overflow: hidden;
            position: relative;
        }
        #type #race .video .inner {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: absolute;
        }
    #type #mine {
        background: url(../img/type/bg.png) center center #738eb1;
        display: flex;
    }
        #type #mine .ttl {
            width: 52.08%;
        }
        #type #mine .box {
            width: 47.92%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #type #mine .box p {
                width: 94.20%;
            }
    #type #high-score {
        display: flex;
        background: url(../img/type/bg.png) center center #89a0a2;
    }
        #type #high-score .ttl {
            width: 50%;
        }
        #type #high-score .box {
            width: 50%;
        }
          #type #high-score .box p {
            margin-top: 2.4%;
              width: 96.94%;
          }


#type .isCharacter .ttl,
#type #spot.isCharacter ul,
#type .isCharacter .box {
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
  #type .isCharacter.show .ttl,
  #type #spot.isCharacter.show ul,
  #type .isCharacter.show .box {
    transition-delay:0.8s;
    transition: all .4s ease-out;
  }
#type #spot.isCharacter .ttl,
#type #mine.isCharacter .ttl {
  position: relative;
  left: -100%;
}
#type #spot.isCharacter ul,
#type #mine.isCharacter .box {
  position: relative;
  right: -100%;
}

  #type #spot.isCharacter.show .ttl,
  #type #mine.isCharacter.show .ttl {
    left: 0;
  }
  #type #spot.isCharacter.show ul,
  #type #mine.isCharacter.show .box {
    transition-delay:0.2s;
    right: 0;
  }

#type #race.isCharacter .ttl,
#type #high-score.isCharacter .ttl {
  position: relative;
  right: -100%;
}
#type #race.isCharacter .box,
#type #high-score.isCharacter .box {
  position: relative;
  left: -100%;
}
  #type #race.isCharacter.show .ttl,
  #type #high-score.isCharacter.show .ttl {
    right: 0;
  }
  #type #race.isCharacter.show .box,
  #type #high-score.isCharacter.show .box {
    transition-delay:0.2s;
    left: 0;
  }