/* ==============================
  社労士トップページ H1
============================== */
.sr-top-hero,
.sr-top-hero * {
  box-sizing: border-box;
}

.sr-top-hero {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 160px;
  margin: 0 auto;
  overflow: hidden;

  background-image: url("/shiken/sharosi/wp-content/uploads/hgkfile/_src/1388087/h1_bg_20260807113145152.webp?v=1786073082288") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: cover !important;

  /* 子要素を横幅に合わせて縮小するための設定 */
  container-type: inline-size;
}

.sr-top-hero__title {
  position: absolute;
  top: 50%;
  left: 8.75%;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);

  color: #2b5066;
  font-family:
    "Yu Gothic",
    "YuGothic",
    "Noto Sans JP",
    Meiryo,
    sans-serif;
  line-height: 1;
}

.sr-top-hero__ja {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.sr-top-hero__sharoshi {
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.sr-top-hero__exam {
  margin-left: 3px;
  font-size: 49px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.sr-top-hero__en {
  display: block;
  margin-top: 7px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 21px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ==============================
  SP・800px未満
  PCの800×160pxと同じ比率で縮小
============================== */
@media screen and (max-width: 800px) {
  .sr-top-hero {
    height: auto;
    aspect-ratio: 5 / 1;
  }

  .sr-top-hero__sharoshi {
    font-size: 7.5cqw;
  }

  .sr-top-hero__exam {
    margin-left: 0.375cqw;
    font-size: 6.125cqw;
  }

  .sr-top-hero__en {
    margin-top: 0.875cqw;
    font-size: 2.625cqw;
  }
}