@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700;900&family=Montserrat:wght@700;900&display=swap";

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  tab-size: 4
}

*,
::after,
::before {
  box-sizing: border-box;
  background-repeat: no-repeat
}

::after,
::before {
  text-decoration: inherit;
  vertical-align: inherit
}

* {
  padding: 0;
  margin: 0
}

hr {
  height: 0;
  overflow: visible
}

details,
main {
  display: block
}

summary {
  display: list-item
}

small {
  font-size: 80%
}

[hidden] {
  display: none
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  border-bottom: 0
}

a {
  background-color: rgba(0, 0, 0, 0)
}

a:active,
a:hover {
  outline-width: 0
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace
}

pre {
  font-size: 1em
}

b,
strong {
  font-weight: bolder
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

input {
  border-radius: 0
}

[disabled] {
  cursor: default
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none
}

textarea {
  overflow: auto;
  resize: vertical
}

button,
input,
optgroup,
select,
textarea {
  font: inherit
}

optgroup {
  font-weight: 700
}

button {
  overflow: visible
}

button,
select {
  text-transform: none
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
  color: inherit;
  cursor: pointer
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button
}

button,
input,
select,
textarea {
  background-color: rgba(0, 0, 0, 0);
  border-style: none
}

select::-ms-expand {
  display: none
}

select::-ms-value {
  color: currentColor
}

legend {
  display: table;
  max-width: 100%;
  color: inherit;
  white-space: normal;
  border: 0
}

::-webkit-file-upload-button {
  font: inherit;
  color: inherit;
  -webkit-appearance: button;
  appearance: button
}

img {
  border-style: none
}

progress {
  vertical-align: baseline
}

@media screen {
  [hidden~=screen] {
    display: inherit
  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important
  }
}

[aria-busy=true] {
  cursor: progress
}

[aria-controls] {
  cursor: pointer
}

[aria-disabled] {
  cursor: default
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer
}

li {
  list-style-type: none
}

address {
  font-style: normal
}

@media only screen and (min-width: 420px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400
}

p,
a {
  word-break: break-all;
  word-wrap: break-word;
  line-break: strict
}

:root {
  font-size: 62.5%;
  --color-main: 230, 0, 22;
  --font-jpn: "Noto Sans JP", "Noto Sans CJK JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  --font-eng: "", sans-serif;
  --font-poppins: "Roboto", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --duration: 320ms
}

body {
  background-color: #fff;
  width: 100%;
  color: #3c3c3c;
  font-family: var(--font-jpn);
  font-weight: 400;
  scroll-behavior: smooth;
  letter-spacing: .04em
}

body.is-locked {
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: scroll
}

button:focus {
  outline: 0
}

img {
  height: auto
}

.wpdl-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 36vw;
  background-color: #e60012;
  color: #fff
}

@media all and (min-width: 760px) {
  .wpdl-header {
    height: 18.75vw
  }
}

.wpdl-header__title-image {
  display: block;
  max-width: calc((256 / 375) * 100vw);
  height: auto
}

@media all and (min-width: 760px) {
  .wpdl-header__title-image {
    max-width: calc((700 / 1600) * 100vw);
  }
  .wpdl-download-header .wpdl-header__title-image {
    max-width: calc((372 / 1600) * 100vw);
  }
}
.wpdl-content {
  padding-top: 7.4666666667vw;
  padding-bottom: 10.6666666667vw
}

@media all and (min-width: 760px) {
  .wpdl-content {
    padding-top: 3.8888888889vw;
    padding-bottom: .8333333333vw
  }
}

.wpdl-content__intro {
  margin-bottom: 8vw;
  font-size: 3.2vw;
  font-weight: 600;
  text-align: center
}

@media all and (min-width: 760px) {
  .wpdl-content__intro {
    margin-bottom: 4.1666666667vw;
    font-size: 1.1111111111vw
  }
}

.wpdl-content__list {
  display: grid;
  grid-template-columns: 100%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  grid-row-gap: 10.6666666667vw;
  margin-bottom: 12.8vw
}

@media not all and (min-width: 760px) {
  .wpdl-content__list {
    padding-right: 3.2vw;
    padding-left: 3.2vw
  }
}

@media all and (min-width: 760px) {
  .wpdl-content__list {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1.3888888889vw;
    grid-row-gap: 5.5555555556vw;
    max-width: 68.0555555556vw;
    margin-bottom: 5.5555555556vw
  }
}

.wpdl-content__item--mario {
  --color-button: #eb4023;
  --color-text: #fff
}

.wpdl-content__item--zelda {
  --color-button: #000;
  --color-text: #dccfb2
}

.wpdl-content__item--ac {
  --color-button: #74bb8c;
  --color-text: #fff
}

.wpdl-content__item--splatoon {
  --color-button: #e9ff3d;
  --color-text: #171717
}

.wpdl-content__item--pikmin {
  --color-button: #5eb31f;
  --color-text: #fff
}

.wpdl-content__item-thumbnail {
  display: block;
  width: 100%;
  height: auto
}

.wpdl-content__item-name {
  margin-bottom: 4.2666666667vw;
  font-size: 5.0666666667vw;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center
}

@media all and (min-width: 760px) {
  .wpdl-content__item-name {
    margin-bottom: 1.3888888889vw;
    font-size: 1.25vw
  }
}

.wpdl-content__item-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 4.2666666667vw;
  column-gap: 4.2666666667vw
}

@media all and (min-width: 760px) {
  .wpdl-content__item-dl {
    -moz-column-gap: .6944444444vw;
    column-gap: .6944444444vw
  }
}

.wpdl-content__item-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  height: 11.7333333333vw;
  padding-right: 1.6vw;
  background-color: var(--color-button);
  color: var(--color-text);
  font-family: var(--font-eng);
  font-size: 3.7333333333vw;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  transition-property: scale, box-shadow;
  transition-duration: 300ms
}

@media all and (min-width: 760px) {
  .wpdl-content__item-link {
    height: 3.8194444444vw;
    width: 13.0555555556vw;
    font-size: 1.0416666667vw;
    padding-right: .4166666667vw
  }
}

@media(hover: hover) {
  .wpdl-content__item-link:hover {
    scale: 1.03
  }
}

.wpdl-content__item-link:active {
  scale: .98;
  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, .2)
}

.wpdl-content__item-arrow {
  position: absolute;
  top: 4.8vw;
  right: 2.6666666667vw;
  width: 2.1333333333vw;
  height: auto;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  overflow: visible
}

@media all and (min-width: 760px) {
  .wpdl-content__item-arrow {
    top: 1.4583333333vw;
    right: .9722222222vw;
    width: .7638888889vw
  }
}

.wpdl-annotation {
  margin-bottom: 14.4vw;
  padding-left: 6.4vw;
  padding-right: 6.4vw
}

@media all and (min-width: 760px) {
  .wpdl-annotation {
    padding-left: 0;
    padding-right: 0;
    max-width: 68.0555555556vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4.4444444444vw
  }
}

.wpdl-annotation__item {
  display: flex;
  color: #3c3c3c;
  font-size: 2.6666666667vw
}

@media all and (min-width: 760px) {
  .wpdl-annotation__item {
    justify-content: center;
    font-size: .8333333333vw;
    font-weight: 400
  }
}

.wpdl-annotation__item:not(:last-child) {
  margin-bottom: 2.1333333333vw
}

@media all and (min-width: 760px) {
  .wpdl-annotation__item:not(:last-child) {
    margin-bottom: 1.1111111111vw
  }
}

.wpdl-annotation__item::before {
  content: "※"
}

.wpdl-annotation__sign {
  display: block;
  margin-top: 5.3333333333vw;
  text-align: center;
  font-size: 2.6666666667vw;
  font-weight: 600
}

@media all and (min-width: 760px) {
  .wpdl-annotation__sign {
    margin-top: 2.2222222222vw;
    font-size: .8333333333vw
  }
}

.wpdl-language {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 37.8666666667vw;
  height: 7.4666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e6e6e6
}

@media all and (min-width: 760px) {
  .wpdl-language {
    margin-right: 1.1111111111vw;
    width: 10.4166666667vw;
    height: 1.9444444444vw
  }
}

.wpdl-language__label {
  margin-left: auto;
  color: #8c8c8c;
  font-size: 3.2vw;
  letter-spacing: .08em;
  font-weight: 500
}

@media all and (min-width: 760px) {
  .wpdl-language__label {
    font-size: .9027777778vw
  }
}

.wpdl-language__arrow {
  margin-right: 0;
  margin-left: auto;
  margin-right: 2.1333333333vw;
  width: 1.3333333333vw;
  height: 2.1333333333vw
}

@media all and (min-width: 760px) {
  .wpdl-language__arrow {
    margin-right: .5555555556vw;
    width: .3472222222vw;
    height: .5555555556vw
  }
}

.wpdl-language__select {
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  padding-left: .8em;
  padding-right: .8em
}

.wpdl-download {
  display: flex;
  flex-direction: column;
  min-height: 100vh
}

.wpdl-download-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 17.0666666667vw;
  background-color: #e60012;
  color: #fff
}

@media all and (min-width: 760px) {
  .wpdl-download-header {
    height: 6.6666666667vw
  }
}

.wpdl-download-header__title-image {
  display: block;
  max-width: 64vw;
  height: auto
}

@media all and (min-width: 760px) {
  .wpdl-download-header__title-image {
    max-width: 26.0416666667vw
  }
}

.wpdl-download-header__back {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6666666667vw;
  left: 4.8vw
}

@media all and (min-width: 760px) {
  .wpdl-download-header__back {
    width: 1.1111111111vw;
    left: 2.2222222222vw
  }
}

@media(hover: hover) {
  .wpdl-download-header__back {
    transition-property: opacity;
    transition-duration: 300ms
  }

  .wpdl-download-header__back:hover {
    opacity: .8
  }
}

.wpdl-download-header__back-arrow {
  width: 4.8vw;
  height: 8vw
}

@media all and (min-width: 760px) {
  .wpdl-download-header__back-arrow {
    width: .9722222222vw;
    height: 1.6666666667vw
  }
}

.wpdl-download-content {
  padding-top: 10.6666666667vw;
  padding-bottom: 10.6666666667vw
}

@media all and (min-width: 760px) {
  .wpdl-download-content {
    padding-top: 5.8333333333vw;
    padding-bottom: 5.5555555556vw
  }
}

.wpdl-download-content__thumbnail {
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 62.4vw
}

@media all and (min-width: 760px) {
  .wpdl-download-content__thumbnail {
    max-width: 20.4166666667vw
  }
}

.wpdl-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e60012;
  height: 11.7333333333vw
}

@media all and (min-width: 760px) {
  .wpdl-footer {
    height: 4.0277777778vw
  }
}

.wpdl-footer__logo {
  width: 19.7333333333vw
}

@media all and (min-width: 760px) {
  .wpdl-footer__logo {
    display: block;
    width: 6.6666666667vw;
    height: auto
  }
}

@media all and (min-width: 1024.98px) {
  .u-hidden-gt-medium {
    display: none
  }
}

@media not all and (min-width: 1024.98px) {
  .u-hidden-lt-medium {
    display: none
  }
}