/* 縦画面 */
.top-page-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/top-bg.png) no-repeat center center / cover;
  width: 100%;
  height: 100%;
}

.start-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 480px;
  height: 680px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  backdrop-filter: blur(7px);
}

.start-card-vector {
  margin-top: 58px;
  margin-bottom: 37px;
}

.start-card-title {
  font-size: 61px;
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-regular);
  margin-bottom: 20px;
}

.start-card-subtitle {
  font-size: 26px;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-medium);
  margin-bottom: 50px;
}

.start-card-btn-container {
  position: relative;
}

.start-card-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 403px;
  height: 121px;
  border: 3px solid var(--key-color);
  border-radius: 9999px;
  margin-bottom: 40px;
  color: var(--key-color);
  font-size: 38px;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
}

.start-card-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--key-color);
  border-radius: 9999px;
  width: 403px;
  height: 121px;
  opacity: 0;
  animation: animateInnerBorder 2s ease-in-out infinite;
}

@keyframes animateInnerBorder {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  100% {
    transform: scaleX(0.9) scaleY(0.8);
    opacity: 0;
  }
}

.start-card-instruction {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-medium);
}

#ciCoSelectModal {
  margin: 0;
  min-width: 800px;
  min-height: 1280px;
  padding: 461px 40px;

  .modal-cico-btn {
    width: 720px;
    height: 159px;
  }
}

/* 横画面 */
@media screen and (orientation: landscape) {
  .top-page-content {
    background: url(../images/top-bg-landscape.png) no-repeat center center / cover;
  }

  .start-card {
    width: 490px;
    height: 658px;
  }

  .start-card-vector {
    margin-top: 52px;
    margin-bottom: 33px;
  }

  #ciCoSelectModal {
    min-width: 1280px;
    min-height: 800px;
    max-width: 1280px;
    padding: 287px 80px 281px 80px;
    margin: 0;

    .modal-cico-btns {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }

    .modal-cico-btn {
      width: 540px;
      height: 232px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      gap: 10px;
      padding: 40px 25px;
      position: static;

      img {
        position: static;
      }
    }
  }
}