:root {
  --vw-pc: max(1200px, 100vw);
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 20.513vw;
}
@media screen and (min-width: 768px) {
  html {
    scroll-margin-top: calc(0.055556 * var(--vw-pc, max(1200px, 100vw)));
  }
}

body {
  background: #fff;
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 768px) {
  body {
    min-width: 1200px;
  }
}
body img {
  width: 100%;
  height: auto;
}

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

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

.btn_blue {
  position: relative;
}
.btn_blue::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.769vw;
  left: 0.769vw;
  width: 100%;
  height: 100%;
  border-radius: 10000px;
  background-color: #222;
  z-index: 1;
}
.btn_blue a {
  transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 10000px;
  background-color: #3f41db;
  color: #fff;
  font-weight: 900;
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  .btn_blue::before {
    top: calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
    left: calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
  }
}
@media screen and (min-width: 768px) and (hover: hover) {
  .btn_blue:hover a {
    translate: calc(0.003472 * var(--vw-pc, max(1200px, 100vw))) calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
  }
}
.btn_blue.is-disabled {
  filter: grayscale(1);
  opacity: 0.5;
  pointer-events: none;
}
.btn_blue.is-disabled a {
  transition: none;
}
.btn_blue.is-disabled:hover a {
  translate: none;
}

.btn_white {
  position: relative;
}
.btn_white::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.769vw;
  left: 0.769vw;
  width: 100%;
  height: 100%;
  border-radius: 10000px;
  background-color: #222;
  z-index: 1;
}
.btn_white a,
.btn_white button {
  transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 10000px;
  background-color: #fff;
  color: #222;
  font-weight: 900;
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .btn_white::before {
    top: calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
    left: calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
  }
}
@media screen and (min-width: 768px) and (hover: hover) {
  .btn_white:hover a, .btn_white:hover button {
    translate: calc(0.003472 * var(--vw-pc, max(1200px, 100vw))) calc(0.003472 * var(--vw-pc, max(1200px, 100vw)));
  }
}

/*# sourceMappingURL=common.css.map */