@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");
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  height: 13.3333333333vw;
  min-height: 60px;
  z-index: 10;
  top: 0;
  padding: 0 5.3333333333vw;
}
@media screen and (min-width: 751px) {
  .header {
    padding: 0 50px;
    height: 100px;
  }
}
@media screen and (min-width: 1500px) {
  .header {
    padding: 0 3.3333333333vw;
    height: 6.6666666667vw;
  }
}
.header .header-logo .jp-title {
  font-size: clamp(10px, 2.1333333333vw, 16px);
}
@media screen and (min-width: 751px) {
  .header .header-logo .jp-title {
    font-size: 16px;
  }
}
@media screen and (min-width: 1500px) {
  .header .header-logo .jp-title {
    font-size: 1.0666666667vw;
  }
}
.header .header-login {
  display: none;
}
@media screen and (min-width: 751px) {
  .header .header-login {
    display: flex;
    align-items: center;
    gap: 30px;
  }
}
@media screen and (min-width: 1500px) {
  .header .header-login {
    gap: 2vw;
  }
}
.header .header-login .title-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header .header-login .title-user .icon-user {
  width: 14px;
  height: 28px;
}
.header .header-login .title-user p {
  color: #666666;
}
@media screen and (min-width: 1500px) {
  .header .header-login .title-user {
    gap: 0.8vw;
  }
  .header .header-login .title-user .icon-user {
    width: 0.9333333333vw;
    height: 1.8666666667vw;
  }
}
.header .header-login .btn-login {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 17px 47px 18px;
  background-color: #23afc0;
  color: white;
  border: 0;
  border-radius: 25px;
}
.header .header-login .btn-login p {
  letter-spacing: 1px;
  line-height: 1;
}
.header .header-login .btn-login .icon-logout {
  width: 12px;
  height: 11px;
}
.header .header-login .btn-login:hover {
  background-color: #2cc0ce;
}
.header .header-login .btn-login:active {
  background-color: #23afc0;
}
@media screen and (min-width: 1500px) {
  .header .header-login .btn-login {
    gap: 0.6vw;
    padding: 1.1333333333vw 3.1333333333vw 1.2vw;
    border-radius: 1.6666666667vw;
  }
  .header .header-login .btn-login p {
    letter-spacing: 0.0666666667vw;
  }
  .header .header-login .btn-login .icon-logout {
    width: 0.8vw;
    height: 0.7333333333vw;
  }
}
.header .btn-show-menu {
  display: block;
  cursor: pointer;
}
@media screen and (min-width: 751px) {
  .header .btn-show-menu {
    display: none;
  }
}
.header .btn-show-menu .icon-menu {
  width: 4.8vw;
  min-width: 21px;
  height: 4vw;
  min-height: 18px;
}
@media screen and (min-width: 751px) {
  .header .btn-show-menu .icon-menu {
    width: 36px;
    height: 30px;
  }
}
.header .btn-show-menu:hover .icon-menu {
  opacity: 0.7;
  transition: 0.3s;
}
.header .btn-close-menu {
  display: block;
  cursor: pointer;
}
.header .btn-close-menu .icon-close {
  width: 3.5826666667vw;
  min-width: 16px;
  height: 3.5826666667vw;
  min-height: 16px;
}
@media screen and (min-width: 751px) {
  .header .btn-close-menu {
    display: none;
  }
}
.header .btn-close-menu .icon-close-hover {
  display: none;
}
.header .btn-close-menu:hover {
  opacity: 0.7;
}