@font-face {
  font-family: hanken-bold;
  src: url(../../../font/HankenGrotesk-Bold.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: mplus-extrabold;
  src: url(../../../font/MPLUS1-ExtraBold.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: mplus-black;
  src: url(../../../font/MPLUS1-Black.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: medium;
  src: url(../../../font/ZenKakuGothicAntique-Medium.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: black;
  src: url(../../../font/ZenKakuGothicAntique-Black.ttf) format("truetype");
  font-display: swap;
}
:root {
  --viewport-min: 375;
  --viewport-max: 1470;
  --font-size-base: 16;
  --gutter: 20;
  @media (width <= 960px) {
    --gutter: 12;
  }
  --color-text: #fff;
  --color-orange: #ee7709;
  --color-blue: #165dff;
  --color-blue-1: #2f80ed;
  --color-blue-2: #0001e2;
  --color-aqua: #02c1e9;
  --color-aqua-1: #56ccf2;
  --color-yellow: #e9ee09;
  --color-gray: #bdbdbd;
  --color-red: #e60000;
  --width-inner: 740;
}
*,
:after,
:before {
  --font-size-slope: calc((var(--font-size-max) - var(--font-size-min)) / (var(--viewport-max) - var(--viewport-min)));
  --font-size-intercept: calc(var(--font-size-min) - (var(--font-size-slope) * var(--viewport-min)));
  --font-size-preferred: calc(var(--font-size-intercept) * (1rem / var(--font-size-base)) + (var(--font-size-slope) * 100vi));
  --font-size-responsive: clamp(calc(var(--font-size-min) * (1rem / var(--font-size-base))), var(--font-size-preferred), calc(var(--font-size-max) * (1rem / var(--font-size-base))));
  box-sizing: border-box;
  font-size: var(--font-size-responsive);
}
:after,
:before {
  display: inline-block;
}
* {
  max-width: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}
html {
  height: -webkit-fill-available;
  font-size: calc(var(--font-size-base) * 1px);
  scroll-behavior: smooth;
}
body {
  --font-size-min: 14;
  --font-size-max: 16;
  min-block-size: 100svb;
  background: rgba(0, 0, 0, 0.7) url(../../../image/bg_1.jpg) 50% / cover;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: medium;
  line-break: strict;
  overflow-wrap: anywhere;
  text-size-adjust: 100%;
  word-break: normal;
}
canvas,
iframe,
img,
picture,
svg,
video {
  display: block;
}
button,
input[type="submit"],
label,
select {
  cursor: pointer;
}
button {
  border: none;
}
select {
  color: inherit;
}
textarea {
  resize: none;
}
a {
  color: inherit;
  display: inline-block;
  transition: 0.2s;
}
img {
  height: auto;
}
li {
  list-style: none;
}
:target {
  scroll-margin-block: 5ex;
}
:has(> .inner) {
  padding-inline: calc(var(--gutter) * 1px);
}
.inner {
  width: calc(var(--width-inner) * 1px);
  margin-inline: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: revert;
  }
}
.footer {
  position: sticky;
  top: 100vh;
}
.header {
  width: 100%;
  padding: 36px 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
}
.header .header__logo {
  width: 144px;
}
@media (max-width: 768px) {
  .header {
    padding: 6px 10px;
  }
  .header .header__logo {
    width: 78px;
  }
}
.completed,
.error,
.failure {
  padding-top: 72px;
}
@media (max-width: 768px) {
  .completed,
  .error,
  .failure {
    padding-top: 32px;
  }
}
.section {
  --padding-block: 56px;
  padding-top: var(--padding-block);
  padding-bottom: var(--padding-block);
}
.section--last {
  padding-bottom: 48px;
}
.section--last .inner > * + * {
  margin-top: 1em;
}
.section--last .inner a {
  text-decoration: none;
}
.section--last .inner .buttons,
.section--last .inner .buttons ~ .attention {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .section {
    --padding-block: 48px;
  }
  .section--sp-full {
    padding-right: 0;
    padding-left: 0;
  }
  .section--last .attention--center:not(.attention--white) {
    text-align: left;
  }
  .section--last .inner .buttons ~ .attention {
    margin-top: 32px;
  }
}
.attention {
  --font-size-min: 12;
  --font-size-max: 14;
  margin-top: 40px;
  color: var(--color-gray);
  line-height: 2;
}
.attention--center {
  text-align: center;
}
.attention--white {
  color: #fff;
}
.attention--yellow {
  color: var(--color-yellow);
}
.attention span {
  color: var(--color-aqua);
}
.box-1 {
  --padding: 32px;
  --corner: 48px;
  padding: calc(var(--padding) + 56px);
  padding-top: var(--padding);
  background: linear-gradient(135deg, rgba(25, 20, 64, 0.9) -0.06%, rgba(17, 13, 28, 0.9) 45%), url(../../../image/bg_3.png);
  clip-path: polygon(0 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% 100%, var(--corner) 100%, 0 calc(100% - var(--corner)));
  position: relative;
}
.box-1:has(.presents) {
  padding-right: calc(var(--padding) + 40px);
  padding-left: calc(var(--padding) + 40px);
}
.box-1 > * + :not(.title-2 + *):not(.box-1__border) {
  margin-top: 40px;
}
.box-1:after,
.box-1:before {
  width: 68px;
  height: 4px;
  content: "";
  position: absolute;
  rotate: 45deg;
}
.box-1:before {
  background-color: var(--color-blue);
  filter: drop-shadow(0 4px 10px var(--color-blue-1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  position: absolute;
  top: var(--padding);
  right: 12px;
  transform-origin: top left;
}
.box-1:after {
  background-color: var(--color-aqua);
  filter: drop-shadow(0 4px 10px var(--color-aqua-1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  position: absolute;
  bottom: var(--padding);
  left: 12px;
  transform-origin: bottom right;
}
.box-1__border {
  pointer-events: none;
  position: absolute;
  inset: var(--padding);
}
.box-1__border:after,
.box-1__border:before {
  content: "";
}
.box-1__border:before {
  width: calc(100% - (var(--corner) * 2));
  height: 4px;
  left: var(--corner);
}
.box-1__border:after {
  width: 4px;
  height: calc(100% - (var(--corner) * 2));
  top: var(--corner);
}
.box-1__border-1:after,
.box-1__border-1:before {
  background-color: var(--color-blue);
  filter: drop-shadow(0 4px 10px var(--color-blue-1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  position: absolute;
}
.box-1__border-1:before {
  top: 0;
}
.box-1__border-1:after {
  right: 0;
}
.box-1__border-2:after,
.box-1__border-2:before {
  background-color: var(--color-aqua);
  filter: drop-shadow(0 4px 10px var(--color-aqua-1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  position: absolute;
}
.box-1__border-2:before {
  bottom: 0;
}
.box-1__border-2:after {
  left: 0;
}
.box-1 + .box-1 {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .box-1 {
    --padding: 16px;
    --corner: 33px;
    padding: calc(var(--padding) + 20px);
    padding-bottom: calc(var(--padding) + 40px);
  }
  .box-1:has(.presents) {
    padding-right: calc(var(--padding) + 20px);
    padding-left: calc(var(--padding) + 20px);
  }
  .box-1 > * + :not(.title-2 + *):not(.box-1__border) {
    margin-top: 32px;
  }
  .box-1:after,
  .box-1:before {
    width: 47px;
  }
  .box-1:before {
    right: 2px;
  }
  .box-1:after {
    left: 2px;
  }
}
.buttons {
  display: flex;
}
.buttons:has(.button-download) {
  gap: 8px;
}
.buttons--center {
  justify-content: center;
}
.button-1 {
  --font-size-min: 24;
  --font-size-max: 24;
  padding: 0.4798em 2.375em;
  background-color: #000;
  border: 3px solid;
  text-decoration: none;
}
.button-1:hover {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}
.button-2 {
  --font-size-min: 14;
  --font-size-max: 20;
  --border-radius: 28px;
  padding-right: 1.857em;
  padding-left: 1.857em;
  background-color: var(--color-red);
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px 0 #fff;
  color: #fff;
  font-family: black;
  display: flex;
  gap: 8px;
  align-items: center;
  line-height: calc(var(--border-radius) * 2);
  text-decoration: none;
}
.button-2:before {
  width: 19px;
  height: 18px;
  background: url(../../../image/icon_blank.svg) 50% / cover;
  content: "";
}
.button-2:hover {
  background-color: #fff;
  color: var(--color-red);
}
.button-2:hover:before {
  background-image: url(../../../image/icon_blank-hover.svg);
}
.button-3,
.button-4 {
  --font-size-min: 14;
  --font-size-max: 18;
  width: 154px;
  box-shadow: 0 0 10px 0 #fff;
  border-radius: 50px;
  color: #fff;
  font-family: black;
  line-height: 46px;
  text-align: center;
}
.button-3 {
  background-color: var(--color-blue);
}
.button-3[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.button-3:hover {
  background-color: #fff;
  color: var(--color-blue);
}
.button-4 {
  background-color: #4f4f4f;
}
.button-4:hover {
  background-color: #fff;
  color: #4f4f4f;
}
.button-download {
  width: auto;
  height: 96px;
}
@media (max-width: 768px) {
  .button-3,
  .button-4 {
    width: 118px;
    line-height: 36px;
  }
  .button-download {
    height: 47px;
  }
}
.coming {
  --font-size-min: 20;
  --font-size-max: 20;
  padding: 0.825em;
  background-color: #2c2d3a;
  font-family: mplus-black;
  font-style: italic;
  text-align: center;
}
.information li + li {
  margin-top: 1.4em;
}
.method + .method {
  margin-top: 48px;
}
.method__title {
  display: flex;
  gap: 20px;
  align-items: center;
  font-family: mplus-black;
  font-style: italic;
}
.method__title + .coming {
  margin-top: 24px;
}
.method__title__number {
  --font-size-min: 18;
  --font-size-max: 28;
  display: grid;
  flex-shrink: 0;
}
.method__title__number span {
  font-family: hanken-bold;
  font-size: 1.8889em;
  line-height: 1;
}
.method__title__text {
  --font-size-min: 18;
  --font-size-max: 32;
  color: var(--color-aqua);
}
.method__title__text span.sm {
  font-size: 0.75em;
}
.method__title__text span.lg {
  font-size: 1.25em;
}
.method__title__text span.gradation {
  color: var(--color-yellow);
  display: inline-block;
  font-size: 1em;
}
.method__text {
  --font-size-min: 14;
  --font-size-max: 20;
  margin-top: 24px;
}
.method__image {
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 768px) {
  .method + .method {
    margin-top: 40px;
  }
  .methods .method:first-of-type .method__title__text span.sm {
    font-size: 0.72222em;
  }
  .method__title__text span.sm {
    font-size: 1em;
  }
  .method__title__text span.lg {
    font-size: 1.27778em;
  }
  .method__title__text span.gradation {
    font-size: 0.88888em;
  }
}
.modal input {
  display: none;
}
.modal input:checked + .modal-inner {
  opacity: 1;
  transform: scale(1);
  z-index: 999;
}
.modal-inner {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
  z-index: -999;
}
.modal-inner .modal-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.modal-inner .modal-content {
  width: 780px;
  padding: 55px 50px;
  background-color: #333;
  position: relative;
}
.modal-inner .modal-content .text-1 + .text-1 {
  margin-top: 24px;
}
.modal-inner .modal-content .buttons {
  margin-top: 80px;
  gap: 46px;
}
@media (max-width: 768px) {
  .modal-inner .modal-content {
    padding: 55px 44px;
  }
  .modal-inner .modal-content .buttons {
    margin-top: 52px;
    gap: 19px;
  }
}
.presents {
  --gap: 1px;
  --column: 3;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) + 8px) var(--gap);
}
.present {
  --font-size-min: 14;
  --font-size-max: 16;
  flex-basis: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column));
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.present__image {
  width: 100%;
  height: 139px;
}
.present__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.present__parson,
.present__title {
  font-family: mplus-black;
  font-style: italic;
  text-align: center;
  text-shadow: 0 0 10px var(--color-blue-2);
}
.present__title {
  --font-size-min: 10;
  --font-size-max: 13;
  height: 121px;
  line-height: 1.857;
  white-space: break-spaces;
}
.present__title--large {
  --font-size-min: 13;
  --font-size-max: 16;
}
.present__parson {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.present__parson span {
  color: var(--color-yellow);
  font-size: 1.25em;
}
.present__text {
  --font-size-min: 16;
  --font-size-max: 18;
  font-family: black;
  text-align: center;
}
.present__text span {
  color: var(--color-aqua);
  font-family: mplus-black;
  font-size: 1.3333em;
}
.present .button-3 {
  margin-right: auto;
  margin-left: auto;
}
@-moz-document url-prefix() {
  .present {
    --font-size-min: 12;
    --font-size-max: 15;
  }
}
::-webkit-full-page-media,
:future,
:root {
  .present {
    --font-size-min: 12;
    --font-size-max: 15;
  }
  .present__parson,
  .present__title {
    text-shadow: 0 0 5px var(--color-blue-2);
  }
}
@media (max-width: 768px) {
  .present {
    gap: 12px;
  }
  .present__title {
    height: 112px;
  }
}
@media (max-width: 520px) {
  .presents {
    --column: 2;
    justify-content: center;
  }
}
.terms {
  height: 231px;
  padding: 20px;
  background-color: #333;
  color: #e0e0e0;
  font-family: black;
}
.term__inner {
  height: 100%;
  padding-right: 12px;
  overflow-y: scroll;
}
.term__inner::-webkit-scrollbar {
  width: 8px;
}
.term__inner::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 4px;
}
.term__inner::-webkit-scrollbar-track {
  background: #4f4f4f;
  border: 1px solid #333;
  border-radius: 4px;
}
* + .terms__title {
  margin-top: 32px;
}
.terms__title {
  --font-size-min: 14;
  --font-size-max: 20;
}
.terms__title + * {
  margin-top: 8px;
}
.terms__text {
  font-family: medium;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .terms {
    padding: 16px;
  }
  .terms__text {
    font-size: 12px;
  }
}
.text-1 {
  --font-size-min: 14;
  --font-size-max: 20;
  font-family: black;
  line-height: 2;
  text-align: center;
}
.text-1 span {
  background: linear-gradient(180deg, transparent calc(100% - 8px), #a10000 calc(100% - 8px));
}
.text-2 {
  --font-size-min: 16;
  --font-size-max: 24;
  color: var(--color-aqua);
}
.text-2,
.title-1 {
  font-family: mplus-black;
  text-align: center;
}
.title-1 {
  --font-size-min: 15;
  --font-size-max: 33;
  font-style: italic;
  line-height: 1.6;
}
.title-1 span {
  margin-right: 8px;
  margin-left: 8px;
  color: var(--color-aqua);
  display: inline-block;
  font-size: 1.1212121em;
}
.title-2 {
  height: 200px;
  margin-top: -26px;
  background: url(../../../image/bg_2.png) top left -48px / auto 200px no-repeat;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.title-3 {
  display: flex;
  gap: 24px;
  align-items: center;
}
.title-3 img {
  flex-shrink: 0;
}
.title-3:after,
.title-3:before {
  height: 5px;
  border-radius: 2px;
  flex-grow: 1;
  background-color: #fff;
  content: "";
}
.title-4 {
  --font-size-min: 32;
  --font-size-max: 40;
  font-family: mplus-extrabold;
  font-style: italic;
  text-align: center;
}
.title-5 {
  --font-size-min: 18;
  --font-size-max: 24;
  font-family: black;
  text-align: center;
}
.title-5 span {
  color: var(--color-yellow);
  font-family: mplus-black;
  font-size: 1.5em;
}
::-webkit-full-page-media,
:future,
:root {
  .title-1 {
    --font-size-min: 14;
  }
  .title-1 span {
    margin-right: 4px;
    margin-left: 4px;
  }
}
@media (max-width: 768px) {
  .title-1 span {
    font-size: 1.2em;
  }
  .title-2 {
    max-width: revert;
    height: 141px;
    margin-inline: calc((100% - 100dvi) / 2);
    padding: calc(var(--padding) + 20px);
    background-position: center left calc(50% - 48px);
    background-size: auto 141px;
  }
}
.completed .section--last,
.error .section--last,
.failure .section--last {
  padding-top: 0;
}
.completed .box-1 > :first-child,
.error .box-1 > :first-child,
.failure .box-1 > :first-child {
  margin-top: 56px;
}
.completed .section--last .buttons:first-child,
.error .section--last .buttons:first-child,
.failure .section--last .buttons:first-child {
  margin-top: 0;
}
@media (max-width: 768px) {
  .completed .box-1 > :first-child,
  .error .box-1 > :first-child,
  .failure .box-1 > :first-child {
    margin-top: 20px;
  }
}
.home .section-1 {
  --padding-block: 0 !important;
  display: grid;
  place-items: center;
}
.home .section-1 .kv img {
  width: 100%;
}
.home .section-2 {
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 20px 0 var(--color-blue);
}
.failure .failure_1,
.failure .icon_attention {
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 768px) {
  .failure .icon_attention {
    width: 60px;
  }
}
.close,
.loggedin {
  --font-size-min: 18;
  --font-size-max: 20;
  width: 360px;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
  font-family: black;
  line-height: 56px;
  text-align: center;
}
.loggedin {
  background-color: #2f871e;
}
.close {
  background-color: #4f4f4f;
}
@media (max-width: 768px) {
  .close,
  .loggedin {
    width: 250px;
  }
}