@charset "UTF-8";
.vote-wrap {
  min-height: 100vh;
  padding: 4rem 0 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #7fd9d1;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    320px auto,
    320px auto,
    15px auto;
  background-position:
    bottom 20px left 20px,
    bottom 20px right 20px,
    top left;
  background-image:
    url(../img/vote-cut-1.png), url(../img/vote-cut-2.png),
    url(../img/bg-dot.png);
}

.vote-wrap main {
  flex: 1 0 auto;
}

.vote-wrap .footer {
  margin-top: auto;
  flex-shrink: 0;
}

.vote-title {
  position: relative;
  width: 50%;
  margin: 0 auto 3rem;
}

.thanks-title {
  position: relative;
  width: 50%;
  margin: 0 auto 3rem;
}

.vote-chara {
  position: relative;
  width: 400px;
  margin: 0 auto 1.5rem;
  font-optical-sizing: auto;
  font-style: normal;
}

.vote-thumb {
  position: relative;
  margin: 0 0 2.5rem;
}

.vote-thumb img {
  width: 100%;
  border: #1d48a9 4px solid;
  box-shadow: 6px 6px 0 rgba(254, 153, 113, 1);
}

.chara-name {
  position: absolute;
  bottom: -5%;
  left: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 60%;
  aspect-ratio: 1 / 0.18;
  text-align: center;
  background-color: #5a77a1;
  border-radius: 9999px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.chara-name #voteTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400;
}

.chara-num {
  position: absolute;
  top: -1em;
  left: -1em;
  width: 16%;
  aspect-ratio: 1 / 1;
  background-color: #fe9971;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
}

.vote-btn {
  position: relative;
  width: 80%;
  aspect-ratio: 1 / 0.206;
  margin: 0 auto;
  background-image: url(../img/btn-off.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  line-height: 0;
}

.vote-btn a {
  display: block;
  pointer-events: auto;
}

.thanks-btn {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

button.disabled img {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0);
}

.back-btn {
  width: 180px;
  margin: 0 auto;
}

textarea {
  width: 100%;
  height: 10em;
  text-align: 14px;
  margin: 0;
  padding: 1em;
  line-height: 1.4;
}

.ft-logo {
  width: 24%;
  margin: 2rem auto;
}

.ft-bg {
  background: none !important;
  color: #000;
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .vote-wrap {
    padding: 2rem 0 0;
    background-size:
      32% auto,
      32% auto,
      10px auto;
    background-position:
      bottom 10px left 0,
      bottom 10px right 0,
      top left;
  }

  .vote-title {
    width: 90%;
  }

  .thanks-title {
    width: 90%;
  }

  .vote-chara {
    width: 60%;
    margin: 0 auto 1.5rem;
  }

  .vote-thumb {
    position: relative;
    margin: 0 0 1.5rem;
  }

  .vote-thumb img {
    border: #1d48a9 3px solid;
    box-shadow: 4px 4px 0 rgba(254, 153, 113, 1);
  }

  .chara-name {
    aspect-ratio: 1 / 0.18;
    font-size: 3.6vw;
  }

  .chara-num {
    width: 20%;
    font-size: 18px;
  }

  .vote-btn {
    width: 100%;
  }

  .thanks-btn {
    width: 100%;
  }

  .back-btn {
    width: 40%;
  }

  .ft-logo {
    width: 32%;
    margin: 0 auto 1rem;
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .vote-wrap {
    padding: 4rem 0 0;
    background-size:
      30% auto,
      30% auto,
      15px auto;
  }

  .vote-chara {
    width: 40%;
    margin: 0 auto 2rem;
  }

  /* Tablet font-size overrides */
  .chara-name {
    font-size: 2.195vw;
  }
  .chara-num {
    font-size: 2.439vw;
  }
}