@charset "UTF-8";
/* スタート css */

main {
  padding: 40px 12px;
}

.content {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

main > p {
  font-size: 20px;
}
main > p ~ p {
  margin-top: 12px;
}
.chkCode-box {
  width: 346px;
  margin: 60px auto 0;
  position: relative;
}

.chkCode-box div:has(input) {
  position: absolute;
  z-index: -1;
  width: 346px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.chkCode-box div:has(input.actv) {
  z-index: 1;
}

.chkCode-box input {
  height: auto;
  font-size: 40px;
  border: 2px solid #777;
  padding: 12px 8px;
  background-color: transparent;
  border-color: transparent;
  letter-spacing: 77px;
}
.chkCode-box input:focus {
  outline: none;
}
.chkCode-box input:not(:focus) {
  color: transparent;
}

.chkCode-box ul {
  font-size: 40px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.chkCode-box ul li {
  padding: 12px 8px;
  border: 2px solid #777;
  border-radius: 8px;
  background-color: #fff;
}
.chkCode-box ul li:empty::before {
  content: '0';
  color: transparent;
}

[name="chkCodeForm"] .btn.lrg {
  min-width: auto;
  display: block;
  margin: 40px auto;
  width: 220px;
  padding: 24px 40px;
  font-size: 32px;
}
[name="chkCodeForm"] .btn.lrg:disabled {
  display: none;
}