/* 周遊アプリSTART---------------------------------*/
.app-title-recruit {
  z-index: 10;
  top: -3.5rem;
  left: 3.5rem;
}

.app-title-recruit .app-title-fs-sub {
  margin-left: 35px;
  margin-top: 15px;
  font-weight: 700;
  font-size: calc(70px* 0.25);
}

.app-title-recruit::after {
  content: '';
  z-index: -1;
  position: absolute;
  top: -50%;
  left: 5%;
  width: calc(70px * 2.11);
  height: calc(70px * 2.11);
  transform: rotate(45deg);
  background-color: #ffffff;
  opacity: 0;
}

.app-title-recruit.appear::after {
  animation-name: titlefadeInAnime;
  /* aboutのタイトルと共有 */
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@media screen and (max-width: 1400px) {
  .app-title-recruit {
    top: -4rem;
    right: 0;
  }
}

@media screen and (max-width: 1200px) {
  .app-title-recruit {
    top: -3rem;
    right: -1rem;
  }

  .app-title-recruit::after {
    width: calc(70px * 2.11);
    height: calc(70px * 2.11);
  }
}

@media screen and (max-width: 576px) {
  .app-title-recruit {
    top: -2.75rem;
    right: 0;
  }

  .app-title-recruit::after {
    width: calc(60px * 2.11);
    height: calc(60px * 2.11);
  }
}

@media screen and (max-width: 375px) {
  .app-title-recruit {
    top: -2rem;
  }

  .app-title-recruit::after {
    width: calc(50px * 2.11);
    height: calc(50px * 2.11);
  }
}

#application {
  height: 780px;
}

.app-img {
  position: absolute;
  z-index: 0;
  width: 890px;
  top: 0;
  left: 0;
}

.app-img-outer {
  height: 586px;
}

.app-img-inner {
  z-index: 5;
  width: calc(890px - 60px);
  height: calc(586px - 34px);
  background-image: url(../images/application/application-pc.pjg.jpg);
  background-size: cover;
  background-position: 70% 50%;
  border-radius: 15px;
}

.app-img-frm1 {
  width: calc(890px - 30px);
  height: calc(586px - 17px);
  background-color: #05b9d7;
  border-radius: 25px;
}

.app-img-frm2 {
  width: calc(890px - 30px);
  height: calc(586px - 17px);
  background-color: #c7e4ee;
  border-radius: 25px;
}

.app-comment {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: 580px;
  height: auto;
  background-color: #ffffff;
}

.app-comment-inner {
  padding: 100px 0 60px;
  font-size: 1.25rem;
}

.app-comment-title {
  top: -20px;
  left: -40px;
  padding: 1rem 3rem;
  background-color: #fff338;
  transform: rotate(-8.3deg);
  opacity: 0;
  animation-name: app-comment-title-anime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

@keyframes app-comment-title-anime {
  0% {
    opacity: 0;
    transform: rotate(-8.3deg) translateX(80%) scaleX(40%);
  }

  50% {
    transform: rotate(-8.3deg) translateX(-40%) scaleX(20%);
  }

  100% {
    opacity: 1;
    transform: rotate(-8.3deg) translateX(0) scaleX(100%);
  }
}


.app-comment .pick:hover {
  color: #24b5f5;
  transform: translateY(-1px);
}


@media screen and (max-width: 1200px) {
  .app-img {
    position: relative;
    margin: 0 auto;
  }

  #apprication {
    height: auto;
  }

  .app-comment {
    position: relative;
    height: auto;
    margin: -20px auto 0;
  }
  .serif{
    margin-top:1rem;
  }
}

@media screen and (max-width: 768px) {
  .app-img {
    width: 96%;
  }

  .app-img-outer {
    height: 45vh;
  }

  .app-img-inner {
    width: calc(96% - 60px);
    height: calc(45vh - 34px);
    background-position: 30% 0%;
  }

  .app-img-frm1 {
    width: calc(96% - 30px);
    height: calc(45vh - 17px);
  }

  .app-img-frm2 {
    width: calc(96% - 30px);
    height: calc(45vh - 17px);
  }

  .app-comment {
    margin-top: 0;
    width: 96%;
  }

  .app-comment-title {
    top: -30px;
    left: -25px;
    padding: 1rem 3rem;
    transform: rotate(-8.3deg);
  }

  .app-comment-inner {
    padding: 60px 0;
  }
}

@media screen and (max-width: 576px) {
  .app-comment-title {
    top: -10px;
    left: 50%;
    padding: 0.5rem 1.5rem;
    width: 70vw;
    transform: rotate(0deg) translateX(-50%);
  }

  @keyframes app-comment-title-anime {
    0% {
      opacity: 0;
      transform: translateX(30%) scaleX(40%);
    }

    50% {
      transform: translateX(-90%) scaleX(20%);
    }

    100% {
      opacity: 1;
      transform: translateX(-50%) scaleX(100%);
    }
  }
}

@media screen and (max-width: 375px) {
  .app-comment-title {
    width: 90vw;
  }

  .app-comment-inner {
    font-size: 1rem;
  }
}
/* 周遊アプリEND ---------------------------------*/