@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

picture,
img {
  display: block;
  width: 100%;
}

body.is-modal-open {
  overflow: hidden;
}

.container {
  position: relative;
}
.container main {
  background: url(../images/common/bg.jpg) no-repeat center top/100% 100%;
}
@media screen and (min-width: 768px) {
  .container main {
    position: relative;
    z-index: 1;
    width: calc(1212 / 1920 * 100vw);
    margin: 0 auto;
    padding: calc(120 / 1920 * 100vw) 0;
  }
}
@media screen and (max-width: 767px) {
  .container main {
    width: calc(750 / 750 * 100vw);
    padding: calc(120 / 750 * 100vw) 0;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-instructions {
    width: calc(1048 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .download-instructions {
    width: calc(673 / 750 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-period {
    width: calc(793 / 1920 * 100vw);
    margin: calc(120 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .download-period {
    width: calc(673 / 750 * 100vw);
    margin: calc(120 / 750 * 100vw) auto 0;
  }
}
.container main .form {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .form {
    margin-top: calc(120 / 1920 * 100vw);
    background: url(../images/pc/auth_bg.png) no-repeat center top/100% 100%;
    padding: calc(75 / 1920 * 100vw) calc(88 / 1920 * 100vw) calc(38 / 1920 * 100vw);
    width: calc(990 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form {
    margin: calc(120 / 750 * 100vw) auto 0;
    background: url(../images/sp/auth_bg.png) no-repeat center top/contain;
    padding: calc(75 / 750 * 100vw) calc(48 / 750 * 100vw) calc(71 / 750 * 100vw) calc(47 / 750 * 100vw);
    width: calc(673 / 750 * 100vw);
    height: calc(1100 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .form input {
    margin-top: calc(20 / 1920 * 100vw);
    padding-left: calc(20 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form input {
    margin-top: calc(40 / 750 * 100vw);
    padding-left: calc(20 / 750 * 100vw);
  }
}
.container main .form input::-moz-placeholder {
  color: #242150;
  font-weight: 400;
}
.container main .form input::placeholder {
  color: #242150;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .container main .form input::-moz-placeholder {
    font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
    line-height: clamp(24px, 26 / 1920 * 100vw, 26px);
  }
  .container main .form input::placeholder {
    font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
    line-height: clamp(24px, 26 / 1920 * 100vw, 26px);
  }
}
@media screen and (max-width: 767px) {
  .container main .form input::-moz-placeholder {
    font-size: calc(16 / 750 * 100vw);
    line-height: calc(24 / 750 * 100vw);
  }
  .container main .form input::placeholder {
    font-size: calc(16 / 750 * 100vw);
    line-height: calc(24 / 750 * 100vw);
  }
}
.container main .form .title {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .form .title {
    width: calc(345 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .title {
    width: calc(292 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .form .games-id {
    width: calc(814 / 1920 * 100vw);
    margin-top: calc(56 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .games-id {
    width: calc(523 / 750 * 100vw);
    margin-top: calc(40 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .form .games-id .heading {
    width: calc(243 / 1920 * 100vw);
    margin-left: calc(10 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .games-id .heading {
    width: calc(196 / 750 * 100vw);
  }
}
.container main .form .games-id .games-id-input {
  border: 3px solid #707070;
  background-color: #ffffff;
  opacity: 0.89;
}
@media screen and (min-width: 768px) {
  .container main .form .games-id .games-id-input {
    width: calc(814 / 1920 * 100vw);
    height: calc(101 / 1920 * 100vw);
    margin-top: calc(20 / 1920 * 100vw);
    border-radius: calc(51 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .games-id .games-id-input {
    width: calc(578 / 750 * 100vw);
    height: calc(101 / 750 * 100vw);
    margin-top: calc(16 / 750 * 100vw);
    border-radius: calc(51 / 750 * 100vw);
  }
}
.container main .form .games-id .games-id-txt {
  color: #242150;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .container main .form .games-id .games-id-txt {
    font-size: clamp(18px, 20 / 1920 * 100vw, 20px);
    line-height: clamp(30px, 32 / 1920 * 100vw, 32px);
    margin-top: calc(7 / 1920 * 100vw);
    margin-left: calc(25 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .games-id .games-id-txt {
    font-size: calc(22 / 750 * 100vw);
    line-height: calc(32 / 750 * 100vw);
    margin-top: calc(14 / 750 * 100vw);
  }
}
.container main .form .games-id .games-id-txt span {
  text-decoration: underline;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .container main .form .password {
    width: calc(814 / 1920 * 100vw);
    margin-top: calc(31 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .password {
    width: calc(539 / 750 * 100vw);
    margin-top: calc(69 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .form .password .heading {
    width: calc(194 / 1920 * 100vw);
    margin-left: calc(15 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .password .heading {
    width: calc(171 / 750 * 100vw);
  }
}
.container main .form .password .password-input {
  border: 3px solid #707070;
  background-color: #ffffff;
  opacity: 0.89;
}
@media screen and (min-width: 768px) {
  .container main .form .password .password-input {
    width: calc(814 / 1920 * 100vw);
    height: calc(101 / 1920 * 100vw);
    margin-top: calc(21 / 1920 * 100vw);
    border-radius: calc(51 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .password .password-input {
    width: calc(578 / 750 * 100vw);
    height: calc(101 / 750 * 100vw);
    margin-top: calc(20 / 750 * 100vw);
    border-radius: calc(51 / 750 * 100vw);
  }
}
.container main .form .password .password-txt {
  color: #242150;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .container main .form .password .password-txt {
    font-size: clamp(18px, 20 / 1920 * 100vw, 20px);
    line-height: clamp(27px, 29 / 1920 * 100vw, 29px);
    margin-top: calc(7 / 1920 * 100vw);
    margin-left: calc(25 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .form .password .password-txt {
    font-size: calc(22 / 750 * 100vw);
    line-height: calc(32 / 750 * 100vw);
    width: calc(578 / 750 * 100vw);
    margin-top: calc(16 / 750 * 100vw);
  }
}
.container main .form .password .password-txt .password-txt__lead {
  display: inline;
}
@media screen and (max-width: 767px) {
  .container main .form .password .password-txt .password-txt__lead {
    width: 98%;
  }
}
.container main .form .auth-btn {
  position: relative;
  display: block;
  overflow: hidden;
  border: none;
  background: none;
  touch-action: manipulation;
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.container main .form .auth-btn:not(.disabled):hover {
  transform: scale(0.9, 0.9);
}
@media screen and (min-width: 768px) {
  .container main .form .auth-btn {
    width: calc(302 / 1920 * 100vw);
    margin: calc(17 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .form .auth-btn {
    width: calc(302 / 750 * 100vw);
    margin: calc(50 / 750 * 100vw) auto 0;
  }
}
.container main .form .auth-btn .auth-btn-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
}
.container main .form .auth-btn.disabled {
  cursor: default;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section {
    margin-top: calc(120 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section {
    margin-top: calc(120 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .title {
    width: calc(276 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .title {
    width: calc(229 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .benefit-section .buy-benefit .voice {
  background: url(../images/common/benefit_bg.png) no-repeat center top/100% 100%;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .voice {
    width: calc(727 / 1920 * 100vw);
    margin: calc(40 / 1920 * 100vw) auto 0;
    padding: calc(49 / 1920 * 100vw) calc(53 / 1920 * 100vw) calc(29 / 1920 * 100vw) calc(52 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .voice {
    width: calc(673 / 750 * 100vw);
    margin: calc(40 / 750 * 100vw) auto 0;
    padding: calc(50 / 750 * 100vw) calc(26 / 750 * 100vw) calc(48 / 750 * 100vw) calc(25 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .voice .image {
    width: calc(622 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .voice .image {
    width: calc(622 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .benefit-section .buy-benefit .voice .download-btn {
  position: relative;
  display: block;
  overflow: hidden;
  border: none;
  border-radius: calc(80 / 1920 * 100vw);
  background: none;
  touch-action: manipulation;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .voice .download-btn {
    width: calc(435 / 1920 * 100vw);
    margin: calc(16 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .voice .download-btn {
    width: calc(435 / 750 * 100vw);
    margin: calc(12 / 750 * 100vw) auto 0;
    border-radius: calc(80 / 750 * 100vw);
  }
}
.container main .benefit-section .buy-benefit .voice .download-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
}
.container main .benefit-section .buy-benefit .voice .download-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
}
.container main .benefit-section .buy-benefit .voice .download-btn.enabled {
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.container main .benefit-section .buy-benefit .voice .download-btn.enabled:hover {
  transform: scale(0.9, 0.9);
}
.container main .benefit-section .buy-benefit .voice .download-btn.enabled:focus-visible {
  outline: none;
}
.container main .benefit-section .buy-benefit .voice .download-btn.disabled {
  cursor: default;
  pointer-events: none;
}
.container main .benefit-section .buy-benefit .voice .wrapper-download_count-txt {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .voice .wrapper-download_count-txt {
    height: calc(26 / 1920 * 100vw);
    margin: calc(19 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .voice .wrapper-download_count-txt {
    width: calc(220 / 750 * 100vw);
    height: calc(32 / 750 * 100vw);
    margin: calc(20 / 750 * 100vw) auto 0;
  }
}
.container main .benefit-section .buy-benefit .voice .download-count-txt {
  color: #242150;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .buy-benefit .voice .download-count-txt {
    font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
    line-height: clamp(24px, 26 / 1920 * 100vw, 26px);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .buy-benefit .voice .download-count-txt {
    font-size: calc(22 / 750 * 100vw);
    line-height: calc(32 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution {
    margin: calc(120 / 1920 * 100vw) auto 0;
    width: calc(860 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution {
    margin: calc(120 / 750 * 100vw) auto 0;
    width: calc(670 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution .title {
    width: calc(280 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution .title {
    width: calc(236 / 750 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution .contents {
    background: url(../images/pc/caution_bg.png) no-repeat center top/100% 100%;
    width: calc(860 / 1920 * 100vw);
    margin: calc(28 / 1920 * 100vw) auto 0;
    padding: calc(68 / 1920 * 100vw) 0 calc(67 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution .contents {
    background: url(../images/sp/caution_bg.png) no-repeat center top/100% 100%;
    width: calc(670 / 750 * 100vw);
    margin: calc(34 / 750 * 100vw) auto 0;
    padding: calc(79 / 750 * 100vw) 0 calc(78 / 750 * 100vw);
  }
}
.container main .benefit-section .caution ul {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution ul {
    width: calc(766 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.container main .benefit-section .caution ul li {
  color: #242150;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution ul li {
    font-size: clamp(12px, 14 / 1920 * 100vw, 14px);
    line-height: clamp(28px, 30 / 1920 * 100vw, 30px);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution ul li {
    font-size: calc(24 / 750 * 100vw);
    line-height: calc(30 / 750 * 100vw);
  }
}
.container main .benefit-section .caution ul li::marker {
  color: #242150;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .caution ul li::marker {
    font-size: clamp(8px, 10 / 1920 * 100vw, 10px);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .caution ul li::marker {
    font-size: calc(10 / 750 * 100vw);
  }
}
.container main .benefit-section .wrapper-banner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .wrapper-banner {
    width: calc(509 / 1920 * 100vw);
    margin: calc(57 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .wrapper-banner {
    width: calc(670 / 750 * 100vw);
    margin: calc(130 / 750 * 100vw) auto 0;
  }
}
.container main .benefit-section .wrapper-banner .banner {
  display: block;
}
@media screen and (min-width: 768px) {
  .container main .benefit-section .wrapper-banner .banner {
    width: calc(509 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefit-section .wrapper-banner .banner {
    width: calc(670 / 750 * 100vw);
  }
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4b0800;
}
@media screen and (min-width: 768px) {
  footer {
    padding: calc(33 / 1920 * 100vw) 0;
  }
}
@media screen and (max-width: 767px) {
  footer {
    padding: calc(33 / 750 * 100vw) 0;
  }
}
footer .copyright {
  display: flex;
  align-items: center;
}
footer .copyright img {
  display: block;
  height: auto;
}
@media screen and (min-width: 768px) {
  footer .copyright img {
    width: calc(244 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  footer .copyright img {
    width: calc(244 / 750 * 100vw);
  }
}

.check-modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .check-modal {
    padding: sp_calc_vw(48) 0;
    box-sizing: border-box;
  }
}
.check-modal.active {
  display: flex;
}
.check-modal .modal-content {
  position: relative;
  display: flex;
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content {
    background: url("../images/pc/popup_bg.png") center/100% auto no-repeat;
    width: calc(1110 / 1920 * 100vw);
    aspect-ratio: 1110/802;
    margin: auto calc(405 / 1920 * 100vw);
    padding: 0 calc(40 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .check-modal .modal-content {
    background: url("../images/sp/popup_bg.png") center/100% auto no-repeat;
    width: min(100%, 670 / 750 * 100vw);
    margin: 0 auto;
    padding: calc(32 / 750 * 100vw);
  }
}
.check-modal .modal-content .close-btn {
  position: absolute;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content .close-btn {
    width: calc(69 / 1920 * 100vw);
    top: calc(26 / 1920 * 100vw);
    right: calc(50 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .check-modal .modal-content .close-btn {
    width: calc(69 / 750 * 100vw);
    top: calc(65 / 750 * 100vw);
    right: calc(31 / 750 * 100vw);
  }
}
.check-modal .modal-content .modal-title {
  position: absolute;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content .modal-title {
    width: calc(596 / 1920 * 100vw);
    top: calc(68 / 1110 * 100%);
    left: 37.5%;
  }
}
@media screen and (max-width: 767px) {
  .check-modal .modal-content .modal-title {
    width: calc(596 / 750 * 100vw);
    top: 15%;
    left: 50%;
  }
}
.check-modal .modal-content .modal-scroll {
  position: relative;
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content .modal-scroll {
    width: calc(879 / 1920 * 100vw);
    margin: 15% auto 3%;
    max-height: 70vh;
  }
}
@media screen and (max-width: 767px) {
  .check-modal .modal-content .modal-scroll {
    width: calc(594 / 750 * 100vw);
    margin: 40% auto 10%;
    height: 98vw;
    max-height: 98vh;
  }
}
.check-modal .modal-content .modal-scroll .modal-procedure {
  position: relative;
  width: 100%;
}
.check-modal .modal-content .modal-scroll .modal-procedure a {
  position: absolute;
  z-index: 1000;
  display: block;
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content .modal-scroll .modal-procedure a {
    left: 4.7%;
    top: 0.23%;
    width: 17.4%;
  }
}
@media screen and (max-width: 767px) {
  .check-modal .modal-content .modal-scroll .modal-procedure a {
    left: 5.5%;
    top: 0%;
    width: calc(177 / 750 * 100vw);
  }
}
.check-modal .modal-content .modal-scroll .modal-procedure a img {
  display: block;
}

.modal-scroll .simplebar-track.simplebar-vertical {
  width: 1.7%;
  background: #9f9f9f;
}
@media screen and (min-width: 768px) {
  .modal-scroll .simplebar-track.simplebar-vertical {
    right: -5%;
  }
}
@media screen and (max-width: 767px) {
  .modal-scroll .simplebar-track.simplebar-vertical {
    right: -3%;
  }
}

.modal-scroll .simplebar-scrollbar::before {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background: #ffffff;
  opacity: 1;
}

.loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.loading-modal.active {
  display: flex;
}
@media screen and (max-width: 767px) {
  .loading-modal.safari {
    position: absolute;
    margin-top: -45%;
    height: 150dvh;
  }
}
.loading-modal .loading-img {
  display: flex;
  width: 100%;
  height: 100%;
}
.loading-modal .loading-img picture {
  display: flex;
  width: 100%;
  height: 100%;
}
.loading-modal .loading-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

html.is-loading {
  overflow: hidden;
}

body.is-loading {
  overflow: hidden;
  height: 100%;
}

.download-count-txt.hidden {
  display: none;
}