@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

@font-face {
  font-family: 'ƒqƒ‰ƒMƒmŠÛƒS';
  src: url('ƒqƒ‰ƒMƒmŠÛƒS Std W8.otf') format('opentype'),
    url('ƒqƒ‰ƒMƒmŠÛƒS Std W5.otf') format('opentype');
  font-weight: normal;
}

body {
  font-family: 'M PLUS Rounded 1c', 'ƒqƒ‰ƒMƒmŠÛƒS', sans-serif;
  max-width: 100%;
}

h1 {
  font-size: calc(20px + 71 * (100vw - 768px) / 1273);
  font-weight: bold;
}

h2 {
  font-size: calc(17px + 60 * (100vw - 768px) / 1273);
  font-weight: bold;
  letter-spacing: .2rem;
}

p {
  font-size: calc(10px + 37 * (100vw - 768px) / 1273);
  letter-spacing: .1rem;
  line-height: 1.8;
}

main {
  color: #5d5d5f;
}

#base {
  width: 100%;
  min-width: 768px;
  margin: 0 auto;
}

#base img,
#base input {
  width: 100%;
}

.footerbase {
  width: 100%;
  min-width: 768px;
  margin: 0 auto;
}

.footerbase img,
.footerbase input {
  width: 100%;
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {

  h1 {
    font-size: calc(18px + 25 * (100vw - 320px) / 446);
  }

  h2 {
    font-size: calc(16px + 23 * (100vw - 320px) / 446);
  }

  p {
    font-size: calc(5px + 16 * (100vw - 320px) / 446);
  }

  #base {
    max-width: 767px;
    min-width: 320px;
    margin: 0 auto;
  }

  .footerbase {
    max-width: 767px;
    min-width: 320px;
    margin: 0 auto;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .hero {
    padding-top: 15vw;
  }
}