@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-VariableFont_wdth,wght.ttf");
}
.main {
  margin-top: clamp(60px, 13.3333333333vw, 100px);
  display: block;
  padding: 8vw 6.6666666667vw 6.6666666667vw;
}
@media screen and (min-width: 751px) {
  .main {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 27.2727272727vw calc(100% - 35.4545454545vw);
    gap: 8.1818181818vw;
    padding: 70px 60px 50px 50px;
    min-height: calc(100vh - 100px);
  }
}
@media screen and (min-width: 1100px) {
  .main {
    grid-template-columns: 300px calc(100% - 390px);
    gap: 90px;
  }
}
@media screen and (min-width: 1500px) {
  .main {
    margin-top: 6.6666666667vw;
    gap: 6vw;
    grid-template-columns: 20vw calc(100% - 26vw);
    padding: 4.6666666667vw 4vw 3.3333333333vw 3.3333333333vw;
    min-height: calc(100vh - 6.6666666667vw);
  }
}
.main .page-title {
  padding-bottom: 6.6666666667vw;
}
.main .page-title {
  font-size: 24px;
}
@media screen and (min-width: 1500px) {
  .main .page-title {
    font-size: 1.6vw;
  }
}
@media screen and (max-width: 750px) {
  .main .page-title {
    font-size: clamp(21.6px, 4.793608522vw, 36px) !important;
  }
}
@media screen and (min-width: 751px) {
  .main .page-title {
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 1500px) {
  .main .page-title {
    padding-bottom: 2.6666666667vw;
  }
}

.hissu {
  margin-left: 10px;
  padding: 2px 3px;
  font-size: 10px;
  border: 2px solid red;
  color: red;
  background: #fcc;
  border-radius: 7px;
  vertical-align: middle;
}