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

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

body {
  overflow-x: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  body {
    background: url(../images/pc/pc_bg.jpg) repeat center top/100% auto;
    background-attachment: fixed;
  }
}
@media screen and (max-width: 767px) {
  body {
    background: url(../images/sp/sp_grid.jpg) no-repeat center top/100% auto;
    background-attachment: fixed;
  }
}

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

img {
  width: 100%;
}

.container {
  position: relative;
}
.container .decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.container .decorations .deco {
  position: absolute;
}
.container .decorations .asaka {
  left: -10%;
  top: calc(35.68 / 1920 * 100vw);
  width: calc(741.19 / 1920 * 100vw);
}
.container .decorations .soka {
  left: -3%;
  top: calc(1231.64 / 1920 * 100vw);
  width: calc(481.05 / 1920 * 100vw);
}
.container .decorations .zakuro {
  left: -3%;
  top: calc(2400.98 / 1920 * 100vw);
  width: calc(476.6 / 1920 * 100vw);
}
.container .decorations .aika {
  left: -2%;
  top: calc(3696.05 / 1920 * 100vw);
  width: calc(446.9 / 1920 * 100vw);
}
.container .decorations .mikaeru {
  right: -4%;
  top: calc(114 / 1920 * 100vw);
  width: calc(530.5 / 1920 * 100vw);
}
.container .decorations .urieru {
  right: -3.3%;
  top: calc(1533 / 1920 * 100vw);
  width: calc(494.27 / 1920 * 100vw);
}
.container .decorations .rafaeru {
  right: -3.3%;
  top: calc(2590.04 / 1920 * 100vw);
  width: calc(522.4 / 1920 * 100vw);
}
.container .decorations .gaburieru {
  right: -2.6%;
  top: calc(3662.19 / 1920 * 100vw);
  width: calc(507.11 / 1920 * 100vw);
}
@media screen and (min-width: 768px) {
  .container main {
    position: relative;
    z-index: 1;
    background: url(../images/pc/pc_repeat_grid.png) repeat center center/cover;
    width: calc(1272 / 1920 * 100vw);
    margin: 0 auto;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .container main {
    width: calc(750 / 750 * 100vw);
  }
}
.container main .download-instructions {
  display: grid;
}
@media screen and (min-width: 768px) {
  .container main .download-instructions {
    grid-template-columns: calc(1038 / 1920 * 100vw) calc(32 / 1920 * 100vw);
    width: calc(1093 / 1920 * 100vw);
    margin: 0 calc(62 / 1920 * 100vw) 0 calc(117 / 1920 * 100vw);
    padding-top: calc(40.93 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-instructions {
    grid-template-columns: calc(670 / 750 * 100vw);
    grid-template-rows: calc(32 / 750 * 100vw) auto;
    gap: calc(13 / 750 * 100vw);
    margin: calc(37 / 750 * 100vw) calc(40 / 750 * 100vw) 0;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-instructions .icon {
    width: calc(35.49 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-instructions .instructions {
    grid-column-start: 1;
    grid-row-start: 2;
    width: calc(1038 / 1920 * 100vw);
    margin-top: calc(32.16 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-instructions .instructions {
    grid-column-start: 1;
    grid-row-start: 2;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-instructions .decoration {
    grid-row: span 2/span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    width: calc(32 / 1920 * 100vw);
    margin-top: calc(10 / 1920 * 100vw);
    margin-left: calc(23 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-instructions .decoration {
    grid-column-start: 1;
    grid-row-start: 1;
    transform: rotate(-90deg);
    transform-origin: center center;
    justify-self: center;
    align-self: center;
    width: calc(32 / 750 * 100vw);
    height: calc(188 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .download-period {
  display: grid;
}
@media screen and (min-width: 768px) {
  .container main .download-period {
    grid-template-columns: calc(32 / 1920 * 100vw) calc(1038 / 1920 * 100vw);
    width: calc(1027 / 1920 * 100vw);
    margin: calc(32.16 / 1920 * 100vw) calc(179 / 1920 * 100vw) 0 calc(66 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-period {
    grid-template-columns: calc(650 / 750 * 100vw);
    grid-template-rows: calc(32 / 750 * 100vw) auto;
    gap: calc(13 / 750 * 100vw);
    margin: calc(47 / 750 * 100vw) calc(50 / 750 * 100vw) 0;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-period .decoration {
    grid-row: span 2/span 2;
    width: calc(32 / 1920 * 100vw);
    -moz-column-gap: calc(32 / 1920 * 100vw);
         column-gap: calc(32 / 1920 * 100vw);
    padding-top: calc(57.84 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-period .decoration {
    grid-column-start: 1;
    grid-row-start: 1;
    transform: rotate(90deg);
    transform-origin: center center;
    justify-self: center;
    align-self: center;
    width: calc(32 / 750 * 100vw);
    height: calc(188 / 750 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .download-period .icon {
    width: calc(35.49 / 1920 * 100vw);
    margin: 0 auto 0 calc(520 / 1920 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .download-period .period {
    grid-column-start: 2;
    grid-row-start: 2;
    width: calc(914 / 1920 * 100vw);
    margin: calc(22.35 / 1920 * 100vw) 0 0 calc(80 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .download-period .period {
    grid-column-start: 1;
    grid-row-start: 2;
  }
}
.container main .auth {
  display: grid;
}
@media screen and (min-width: 768px) {
  .container main .auth {
    grid-template-columns: calc(32 / 1920 * 100vw) calc(1000 / 1920 * 100vw) calc(32 / 1920 * 100vw);
    place-content: center;
    gap: calc(42 / 1920 * 100vw);
    margin-top: calc(103 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth {
    grid-template-columns: calc(686 / 750 * 100vw);
    grid-template-rows: calc(32 / 750 * 100vw) auto;
    gap: calc(40 / 750 * 100vw);
    margin: calc(37 / 750 * 100vw) calc(40 / 750 * 100vw) 0;
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .form {
    background: url(../images/pc/pc_authentication_bg.png) no-repeat center top/100% auto;
    padding: calc(64 / 1920 * 100vw) calc(92 / 1920 * 100vw) calc(20 / 1920 * 100vw);
    width: calc(990 / 1920 * 100vw);
    height: calc(1009 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form {
    background: url(../images/sp/sp_authentication_bg.png) no-repeat center top/contain;
    padding: calc(71 / 750 * 100vw) calc(73 / 750 * 100vw) calc(20 / 750 * 100vw) calc(74 / 750 * 100vw);
    width: calc(686 / 750 * 100vw);
    height: calc(798 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .form input {
    padding-left: calc(20 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form input {
    padding-left: calc(20 / 750 * 100vw);
  }
}
.container main .auth .form input::-moz-placeholder {
  color: #a26cc0;
  opacity: 1;
  font-weight: 400;
}
.container main .auth .form input::placeholder {
  color: #a26cc0;
  opacity: 1;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .container main .auth .form input::-moz-placeholder {
    font-size: calc(18 / 1920 * 100vw);
    line-height: calc(26 / 1920 * 100vw);
  }
  .container main .auth .form input::placeholder {
    font-size: calc(18 / 1920 * 100vw);
    line-height: calc(26 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form input::-moz-placeholder {
    font-size: calc(16 / 750 * 100vw);
    line-height: calc(24 / 750 * 100vw);
  }
  .container main .auth .form input::placeholder {
    font-size: calc(16 / 750 * 100vw);
    line-height: calc(24 / 750 * 100vw);
  }
}
.container main .auth .form .title {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .title {
    width: calc(465 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .title {
    width: calc(289 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .form .id {
    width: calc(814 / 1920 * 100vw);
    margin-top: calc(38 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .id {
    width: calc(523 / 750 * 100vw);
    margin-top: calc(35 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .form .id .heading {
    width: calc(234 / 1920 * 100vw);
    margin-left: calc(15 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .id .heading {
    width: calc(145 / 750 * 100vw);
    margin-left: calc(15 / 750 * 100vw);
  }
}
.container main .auth .form .id .games-id-input {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #d600ff;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .id .games-id-input {
    width: calc(814 / 1920 * 100vw);
    height: calc(89 / 1920 * 100vw);
    border-radius: calc(50 / 1920 * 100vw);
    margin-top: calc(24 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .id .games-id-input {
    width: calc(523 / 750 * 100vw);
    height: calc(49 / 750 * 100vw);
    border-radius: calc(50 / 750 * 100vw);
    margin-top: calc(12 / 750 * 100vw);
  }
}
.container main .auth .form .id .games-id-txt {
  text-align: left;
  letter-spacing: 0px;
  color: #5f0a71;
  opacity: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .id .games-id-txt {
    font-size: calc(20 / 1920 * 100vw);
    line-height: calc(29 / 1920 * 100vw);
    margin-top: calc(6 / 1920 * 100vw);
    margin-left: calc(25 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .id .games-id-txt {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(29 / 750 * 100vw);
    margin-top: calc(14 / 1920 * 100vw);
    margin-left: calc(25 / 1920 * 100vw);
  }
}
.container main .auth .form .id .games-id-txt span {
  text-decoration: underline;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .password {
    width: calc(814 / 1920 * 100vw);
    margin-top: calc(31 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .password {
    width: calc(539 / 750 * 100vw);
    margin-top: calc(33 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .form .password .heading {
    width: calc(194 / 1920 * 100vw);
    margin-left: calc(15 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .password .heading {
    width: calc(119 / 750 * 100vw);
    margin-left: calc(15 / 750 * 100vw);
  }
}
.container main .auth .form .password .password-input {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #d600ff;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .password .password-input {
    width: calc(814 / 1920 * 100vw);
    height: calc(89 / 1920 * 100vw);
    border-radius: calc(50 / 1920 * 100vw);
    margin-top: calc(21 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .password .password-input {
    width: calc(523 / 750 * 100vw);
    height: calc(49 / 750 * 100vw);
    border-radius: calc(50 / 750 * 100vw);
    margin-top: calc(10 / 750 * 100vw);
  }
}
.container main .auth .form .password .password-txt {
  text-align: left;
  letter-spacing: 0px;
  color: #5f0a71;
  opacity: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .password .password-txt {
    font-size: calc(20 / 1920 * 100vw);
    line-height: calc(29 / 1920 * 100vw);
    margin-top: calc(9 / 1920 * 100vw);
    margin-left: calc(25 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .password .password-txt {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(29 / 750 * 100vw);
    width: calc(539 / 750 * 100vw);
    margin-top: calc(5 / 750 * 100vw);
    margin-left: calc(5 / 750 * 100vw);
  }
}
.container main .auth .form .password .password-txt .password-txt__lead {
  display: inline;
}
@media screen and (max-width: 767px) {
  .container main .auth .form .password .password-txt .password-txt__lead {
    display: inline-block;
    white-space: nowrap;
  }
}
.container main .auth .form .auth-btn {
  display: block;
  margin: 0 auto;
  transform: scale(1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
  will-change: transform, opacity;
  position: relative;
  overflow: hidden;
}
.container main .auth .form .auth-btn.disabled {
  cursor: default;
  pointer-events: none;
}
.container main .auth .form .auth-btn:not(.disabled):hover {
  color: #ffffff;
  opacity: 0.85;
  transform: scale(0.94);
}
.container main .auth .form .auth-btn {
  mask-image: url("../images/pc/pc_authentication_btn.png");
  -webkit-mask-image: url("../images/pc/pc_authentication_btn.png");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
@media screen and (min-width: 768px) {
  .container main .auth .form .auth-btn {
    width: calc(339 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .form .auth-btn {
    width: calc(289 / 750 * 100vw);
  }
}
.container main .auth .form .auth-btn::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 150%;
  height: 150%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(45deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: maskShine 2.5s ease-in-out infinite;
}
.container main .auth .form .auth-btn img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
}
.container main .auth .form .auth-btn.disabled {
  cursor: default;
  pointer-events: none;
}
.container main .auth .form .auth-btn.disabled::before {
  content: none;
  animation: none;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .container main .auth .decoration:first-of-type {
    width: calc(32 / 1920 * 100vw);
    padding-top: calc(770 / 1920 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .auth .decoration:last-of-type {
    width: calc(32 / 1920 * 100vw);
    padding-top: calc(200 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .auth .decoration:last-of-type {
    grid-column-start: 1;
    grid-row-start: 1;
    transform: rotate(-90deg);
    transform-origin: center center;
    justify-self: center;
    align-self: center;
    width: calc(32 / 750 * 100vw);
    height: calc(188 / 750 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits {
    background: url(../images/pc/pc_benefits_bg.png) no-repeat center top/100% auto;
    width: calc(1217 / 1920 * 100vw);
    margin: calc(116 / 1920 * 100vw) 0 0 calc(26.53 / 1920 * 100vw);
    padding-bottom: calc(50 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits {
    background: url(../images/sp/sp_benefits_bg.png) no-repeat center top/100% auto;
    width: calc(750 / 750 * 100vw);
    margin-top: calc(60 / 750 * 100vw);
    padding: calc(72 / 750 * 100vw) calc(40 / 750 * 100vw) calc(102 / 750 * 100vw);
  }
}
.container main .benefits .benefit-1 .title {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .title {
    padding-top: calc(88 / 1920 * 100vw);
    width: calc(768 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .title {
    width: calc(486 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor {
    display: flex;
    width: calc(731 / 1920 * 100vw);
    margin: calc(61 / 1920 * 100vw) auto 0;
    gap: calc(59 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor {
    display: grid;
    grid-template-columns: calc(670 / 750 * 100vw);
    grid-template-rows: calc(254 / 750 * 100vw);
    gap: calc(25 / 750 * 100vw);
    margin-top: calc(59 / 750 * 100vw);
  }
}
.container main .benefits .benefit-1 .mouse-cursor .jannu,
.container main .benefits .benefit-1 .mouse-cursor .asaka {
  background-color: #fff6e3;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu,
  .container main .benefits .benefit-1 .mouse-cursor .asaka {
    width: calc(336 / 1920 * 100vw);
    height: calc(561 / 1920 * 100vw);
    border-radius: calc(42 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu,
  .container main .benefits .benefit-1 .mouse-cursor .asaka {
    width: calc(670 / 750 * 100vw);
    height: calc(266 / 750 * 100vw);
    border-radius: calc(42 / 750 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu {
    grid-column-start: 1;
    grid-row-start: 2;
    display: grid;
    grid-template-columns: calc(211 / 750 * 100vw) auto;
    grid-template-rows: calc(87 / 750 * 100vw) calc(43 / 750 * 100vw) calc(84 / 750 * 100vw) auto;
    padding-left: calc(29 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .logo {
    margin-top: calc(20 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .logo {
    width: calc(248 / 750 * 100vw);
    margin-top: calc(14 / 750 * 100vw);
    grid-column-start: 2;
    grid-row-start: 1;
    justify-self: center;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .name {
    width: calc(175 / 1920 * 100vw);
    margin: calc(8 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .name {
    grid-column-start: 2;
    grid-row-start: 2;
    justify-self: center;
    width: calc(371 / 750 * 100vw);
    margin: calc(8 / 750 * 100vw) auto 0;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .shape {
    width: calc(232 / 1920 * 100vw);
    margin: calc(18 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .shape {
    grid-column-start: 1;
    grid-row: 1/span 4;
    justify-self: center;
    align-self: center;
    width: calc(211 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .download-btn {
    width: calc(213 / 1920 * 100vw);
    margin: calc(18 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .download-btn {
    grid-column-start: 2;
    grid-row-start: 3;
    justify-self: center;
    width: calc(238 / 750 * 100vw);
    margin: calc(8 / 750 * 100vw) auto 0;
  }
}
.container main .benefits .benefit-1 .mouse-cursor .jannu .download-count-txt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0px;
  color: #4b345a;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .download-count-txt {
    font-size: calc(18 / 1920 * 100vw);
    line-height: calc(37 / 1920 * 100vw);
    margin: calc(23 / 1920 * 100vw) calc(78 / 1920 * 100vw) calc(29 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .jannu .download-count-txt {
    grid-column-start: 2;
    grid-row-start: 4;
    justify-self: center;
    font-size: calc(18 / 750 * 100vw);
    line-height: calc(37 / 750 * 100vw);
    padding-bottom: calc(10 / 750 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka {
    grid-column-start: 1;
    grid-row-start: 1;
    display: grid;
    grid-template-columns: calc(211 / 750 * 100vw) auto;
    grid-template-rows: calc(104 / 750 * 100vw) calc(33 / 750 * 100vw) calc(84 / 750 * 100vw) auto;
    padding-left: calc(29 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .logo {
    margin-top: calc(20 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .logo {
    width: calc(403 / 750 * 100vw);
    margin-top: calc(24 / 750 * 100vw);
    grid-column-start: 2;
    grid-row-start: 1;
    justify-self: center;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .name {
    width: calc(175 / 1920 * 100vw);
    margin: calc(8 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .name {
    grid-column-start: 2;
    grid-row-start: 2;
    justify-self: center;
    width: calc(314 / 750 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .shape {
    width: calc(232 / 1920 * 100vw);
    margin: calc(18 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .shape {
    grid-column-start: 1;
    grid-row: 1/span 4;
    justify-self: center;
    align-self: center;
    width: calc(211 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .download-btn {
    width: calc(213 / 1920 * 100vw);
    margin: calc(18 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .download-btn {
    grid-column-start: 2;
    grid-row-start: 3;
    justify-self: center;
    width: calc(238 / 750 * 100vw);
    margin: calc(8 / 750 * 100vw) auto 0;
  }
}
.container main .benefits .benefit-1 .mouse-cursor .asaka .download-count-txt {
  text-align: center;
  letter-spacing: 0px;
  color: #4b345a;
  opacity: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .download-count-txt {
    font-size: calc(18 / 1920 * 100vw);
    line-height: calc(37 / 1920 * 100vw);
    margin: calc(23 / 1920 * 100vw) calc(78 / 1920 * 100vw) calc(29 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-1 .mouse-cursor .asaka .download-count-txt {
    grid-column-start: 2;
    grid-row-start: 4;
    justify-self: center;
    font-size: calc(18 / 750 * 100vw);
    line-height: calc(37 / 750 * 100vw);
    padding-bottom: calc(10 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 {
    margin-top: calc(50 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 {
    margin-top: calc(105 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 .title {
    width: calc(828 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 .title {
    width: calc(523 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .benefits .benefit-2 .digital-book {
  background-color: #fff6e3;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 .digital-book {
    width: calc(865 / 1920 * 100vw);
    height: calc(642 / 1920 * 100vw);
    border-radius: calc(94 / 1920 * 100vw);
    margin: calc(49 / 1920 * 100vw) auto calc(96 / 1920 * 100vw);
    padding-top: calc(26 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 .digital-book {
    width: calc(656 / 750 * 100vw);
    height: calc(642 / 750 * 100vw);
    border-radius: calc(94 / 750 * 100vw);
    margin-top: calc(64 / 750 * 100vw);
    padding-top: calc(35 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 .digital-book .image {
    width: calc(527 / 1920 * 100vw);
    margin: 0 calc(179 / 1920 * 100vw) 0 calc(159 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 .digital-book .image {
    width: calc(534 / 750 * 100vw);
    margin: 0 calc(66 / 750 * 100vw) 0 calc(56 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 .digital-book .download-btn {
    width: calc(433 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 .digital-book .download-btn {
    width: calc(433 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .benefits .benefit-2 .digital-book .download-count-txt {
  text-align: center;
  color: #4b345a;
  opacity: 1;
  letter-spacing: 0px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .container main .benefits .benefit-2 .digital-book .download-count-txt {
    font-size: calc(18 / 1920 * 100vw);
    line-height: calc(37 / 1920 * 100vw);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .benefit-2 .digital-book .download-count-txt {
    font-size: calc(18 / 750 * 100vw);
    line-height: calc(37 / 750 * 100vw);
    margin: 0 auto;
  }
}
.container main .benefits .caution {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container main .benefits .caution {
    background: url(../images/pc/pc_caution_bg.png) no-repeat center top/100% auto;
    width: calc(858 / 1920 * 100vw);
    height: calc(506 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .caution {
    background: url(../images/sp/sp_caution_bg.png) no-repeat center top/100% auto;
    width: calc(636.71 / 750 * 100vw);
    height: calc(1072.87 / 750 * 100vw);
    margin-top: calc(126.13 / 750 * 100vw);
  }
}
@media screen and (min-width: 768px) {
  .container main .benefits .caution ul {
    padding: calc(114 / 1920 * 100vw) calc(52 / 1920 * 100vw) calc(72 / 1920 * 100vw) calc(55 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .caution ul {
    padding: calc(140 / 750 * 100vw) calc(54.35 / 750 * 100vw) calc(104.87 / 750 * 100vw) calc(54.35 / 750 * 100vw);
  }
}
.container main .benefits .caution ul li {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0;
  color: #3b3b3b;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .container main .benefits .caution ul li {
    font-size: calc(15 / 1920 * 100vw);
    line-height: calc(30 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .caution ul li {
    font-size: calc(24 / 750 * 100vw);
    line-height: calc(31 / 750 * 100vw);
  }
}
.container main .benefits .caution ul li::marker {
  font-size: calc(10 / 1920 * 100vw);
  color: #3b3b3b;
}
.container main .benefits .banner {
  display: block;
}
@media screen and (min-width: 768px) {
  .container main .benefits .banner {
    width: calc(509 / 1920 * 100vw);
    margin: calc(44 / 1920 * 100vw) auto 0;
  }
}
@media screen and (max-width: 767px) {
  .container main .benefits .banner {
    width: calc(509 / 750 * 100vw);
    margin: calc(44 / 750 * 100vw) auto 0;
  }
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fb8749;
}
@media screen and (min-width: 768px) {
  footer {
    padding: calc(31 / 1920 * 100vw) 0;
  }
}
@media screen and (max-width: 767px) {
  footer {
    padding: calc(17 / 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(845 / 1920 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  footer .copyright img {
    width: calc(581 / 750 * 100vw);
  }
}

.check-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  .check-modal {
    padding: calc(48 / 750 * 100vw) 0;
    box-sizing: border-box;
  }
}
.check-modal.active {
  display: flex;
}
.check-modal .modal-content {
  position: relative;
  display: flex;
  background: #fef2e1;
  border: 5px solid #d1b06f;
}
@media screen and (min-width: 768px) {
  .check-modal .modal-content {
    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 {
    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(31 / 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: 6%;
    top: 4.75%;
    width: calc(177 / 750 * 100vw);
  }
}
.check-modal .modal-content .modal-scroll .modal-procedure a img {
  display: block;
}

.download-btn {
  position: relative;
  display: block;
  overflow: hidden;
  mask-image: url("../images/pc/pc_dl_btn_active.png");
  -webkit-mask-image: url("../images/pc/pc_dl_btn_active.png");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.download-btn::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 170%;
  height: 170%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(12deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: none;
}
.download-btn img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
}
.download-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.download-btn.disabled::before {
  animation: none;
  opacity: 0;
}
.download-btn.enabled {
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
  will-change: transform, opacity;
}
.download-btn.enabled::before {
  animation: maskShine 2.5s ease-in-out infinite;
}
.download-btn.enabled:hover {
  opacity: 0.85;
  transform: scale(0.94);
}

.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 {
  border-radius: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  opacity: 1;
}

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

html.is-loading {
  overflow: hidden;
}

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

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

@keyframes maskShine {
  0% {
    top: -150%;
    left: -150%;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 150%;
    left: 150%;
  }
}