* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

html {
  font-size: calc(100vw / 37.5);
}

body {
  position: relative;
  font-family: 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック',
    'Yu Gothic', 'メイリオ', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}

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

a:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 1px;
}

@media (any-hover: hover) {
  a {
    transition: opacity 0.3s;
  }

  a:hover {
    opacity: 0.7;
  }
}

img {
  width: 100%;
  height: auto;
}

.is-pc {
  display: none !important;
}

button {
  cursor: pointer;
}

button:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 1px;
}

.inner {
  max-width: 32.5rem;
  margin: 0 auto;
}

@media screen and (min-width: 640px) {
  body {
    font-size: 1.6rem;
  }

  html {
    font-size: calc(100vw / 64);
  }

  .inner {
    max-width: 55.4rem;
  }
}

@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }

  html {
    font-size: calc(100vw / 76.8);
  }

  .inner {
    max-width: 57.6rem;
  }

  .is-sp {
    display: none !important;
  }

  .is-pc {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 1.6rem;
  }

  html {
    font-size: calc(100vw / 102.4);
  }

  .inner {
    max-width: 76.8rem;
  }
}

@media screen and (min-width: 1440px) {
  body {
    font-size: 1.6rem;
  }

  html {
    font-size: calc(100vw / 144);
  }

  .inner {
    max-width: 108rem;
  }
}