/* Specialist article hero master rule — based on the construction article. */
.articleHero {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 250px !important;
  padding: 0 !important;
  display: block !important;
  background: linear-gradient(90deg, #fff 0%, #fff 58%, #f7fbfe 58%, #edf7fc 100%) !important;
  border-bottom: 1px solid var(--line) !important;
}

.articleHero > .shell {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 40px !important;
  padding-left: 40px !important;
  padding-top: 64px !important;
  padding-bottom: 44px !important;
}

.articleHero .category {
  margin-bottom: 18px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
}

.articleHero h1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: .03em !important;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  .articleHero h1 {
    word-break: auto-phrase;
  }
}

.articleHeroSummary {
  max-width: 100% !important;
  margin: 18px 0 0 !important;
  color: #617281 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
}

.articleMeta {
  display: block !important;
  margin-top: 20px !important;
  color: #7b8995 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .03em !important;
}

@media (max-width: 950px) {
  .articleHero {
    background: #fff !important;
  }

  .articleHero h1 {
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .articleHero {
    min-height: 350px !important;
    padding: 40px 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .articleHero > .shell {
    padding-right: 24px !important;
    padding-left: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .articleHero h1 {
    width: 100%;
    max-width: 100% !important;
    font-size: 26px !important;
    line-height: 1.55 !important;
  }

  .articleHeroSummary {
    margin-top: 16px !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
  }

  .articleMeta {
    margin-top: 16px !important;
    font-size: 11px !important;
  }
}

/* Keep the primary specialist-article title on one line on desktop. */
@media (min-width: 951px) {
  body .articleHero > .shell > h1 {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

@media (min-width: 951px) and (max-width: 1050px) {
  body .articleHero > .shell > h1 {
    font-size: 36px !important;
    letter-spacing: .01em !important;
  }
}