@font-face {
  font-family: "Recruit Noto Sans JP";
  src: url("./fonts/NotoSansJP-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recruit Noto Sans JP";
  src: url("./fonts/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recruit Noto Sans JP";
  src: url("./fonts/NotoSansJP-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recruit Noto Sans JP";
  src: url("./fonts/NotoSansJP-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recruit Noto Sans JP";
  src: url("./fonts/NotoSansJP-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --recruit-font-jp: "Recruit Noto Sans JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  --recruit-font-latin: "Schibsted Grotesk", var(--recruit-font-jp);
}

/* Shared recruitment-site navigation: always readable over every hero. */
html {
  scrollbar-gutter: stable;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

body,
[class*="scroll"],
[class*="table"],
[class*="compare"],
[class*="requirements"] {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
[class*="scroll"]::-webkit-scrollbar,
[class*="table"]::-webkit-scrollbar,
[class*="compare"]::-webkit-scrollbar,
[class*="requirements"]::-webkit-scrollbar {
  display: block !important;
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
[class*="scroll"]::-webkit-scrollbar-thumb,
[class*="table"]::-webkit-scrollbar-thumb,
[class*="compare"]::-webkit-scrollbar-thumb,
[class*="requirements"]::-webkit-scrollbar-thumb {
  background: rgba(13, 31, 78, .38);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
[class*="scroll"]::-webkit-scrollbar-track,
[class*="table"]::-webkit-scrollbar-track,
[class*="compare"]::-webkit-scrollbar-track,
[class*="requirements"]::-webkit-scrollbar-track {
  background: rgba(13, 31, 78, .08);
}

nav#nav,
nav#nav.scrolled,
nav#nav.nav-light,
nav#nav.on-dark,
nav#nav.nav-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  box-shadow: 0 1px 18px rgba(0, 0, 0, .08) !important;
  backdrop-filter: none !important;
  color: #111 !important;
  box-sizing: border-box !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 clamp(24px, 3vw, 56px) !important;
  transition: none !important;
}

nav#nav .nav-logo,
nav#nav .nav-links,
nav#nav .nav-item > .nav-trigger {
  align-items: center !important;
}

nav#nav .nav-logo-img {
  height: 34px !important;
}

nav#nav .nav-logo-word-main,
nav#nav .nav-logo-word-sub,
nav#nav .nav-logo-sub {
  color: #111 !important;
  transition: none !important;
}

nav#nav .nav-logo-sub {
  color: #666 !important;
}

nav#nav .nav-links a:not(.nav-entry),
nav#nav .nav-item > .nav-trigger {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  color: #111 !important;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1) !important;
}

nav#nav .nav-links a:not(.nav-entry) {
  letter-spacing: .02em !important;
}

nav#nav .nav-item > .nav-trigger {
  letter-spacing: .03em !important;
}

nav#nav .nav-logo-sub {
  font-weight: 500 !important;
}

nav#nav .nav-links a:not(.nav-entry):hover,
nav#nav .nav-item > .nav-trigger:hover {
  color: #111 !important;
}

body,
body :is(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  dd,
  td,
  th,
  a,
  button,
  input,
  textarea,
  select,
  .hero-title,
  .hero-name,
  .hero-ja,
  .hero-quote,
  .intro-catch,
  .profile-name,
  .profile-text,
  .profile-bio,
  .promo-title,
  .about-title,
  .talk-heading,
  .talk-q,
  .talk-text,
  .qa-q-text,
  .qa-a-text,
  .iv-scroll-body,
  .message h2,
  .chapter h2,
  .event-title,
  .next-title,
  .next-main,
  .cta-title,
  .p6-ttl,
  .p6-col-name,
  .p7-ttl,
  .p8-title,
  .nc-heading,
  .card-name,
  .card-quote,
  .req-cta-link
) {
  font-family: var(--recruit-font-jp) !important;
  font-synthesis-weight: none;
}

body :is(
  .nav-logo-word-main,
  .nav-logo-word-sub,
  .nav-logo-sub,
  .rf-wm,
  .rf-brand-word-main,
  .rf-brand-word-sub,
  .rf-brand-label,
  .rf-col-head,
  .rf-copyright,
  .hero-bg-text,
  .hero-num,
  .hero-scroll span,
  .profile-name-en,
  .qa-q-badge,
  .qa-a-badge,
  .nav-int-dir,
  .nav-int-num,
  .footer-logo,
  .footer-copy,
  .dc-list-num,
  .p2-label,
  .news-date,
  .dc-tag,
  .nc-label,
  .nc-more
) {
  font-family: var(--recruit-font-latin) !important;
}

nav#nav .nav-burger span {
  background: #111 !important;
}

nav#nav .nav-dropdown {
  background: #fff !important;
}

nav#nav .nav-dropdown a,
nav#nav .nav-dropdown a:hover {
  color: #111 !important;
}

@keyframes recruitHeroZoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes recruitHeroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

.hero::before,
.hero-bg,
.hero-bg-crop,
#p1 .hero-video-wrap video {
  transform: scale(1.06);
  transform-origin: center center;
  animation: recruitHeroZoom 1.6s cubic-bezier(.22, 1, .36, 1) forwards !important;
}

.hero-label,
.hero-kicker,
.hero-num {
  opacity: 0;
  transform: translateY(28px);
  animation: recruitHeroFadeUp .8s cubic-bezier(.22, 1, .36, 1) .1s forwards !important;
}

.hero-title,
.hero-name {
  opacity: 0;
  transform: translateY(28px);
  animation: recruitHeroFadeUp .8s cubic-bezier(.22, 1, .36, 1) .2s forwards !important;
}

.hero-dept,
.hero-quote,
.hero-ja {
  opacity: 0;
  transform: translateY(28px);
  animation: recruitHeroFadeUp .8s cubic-bezier(.22, 1, .36, 1) .3s forwards !important;
}

.req-cta-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.req-cta-link {
  min-width: 150px;
  border: 1px solid rgba(0, 0, 0, .22);
  background: rgba(255, 255, 255, .74);
  color: #000;
  text-decoration: none;
  font-family: 'Schibsted Grotesk', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(2px);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              color .2s,
              border-color .2s,
              background .2s;
}

.req-cta-link:hover {
  border-color: #e02020;
  color: #e02020;
  background: #fff;
  transform: scale(1.04);
}

@media (max-width: 768px) {
  nav#nav {
    background: #fff !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }

  nav#nav .nav-logo-img {
    height: 24px !important;
  }

  nav#nav .nav-burger {
    width: 40px !important;
    height: 40px !important;
  }

  nav#nav .nav-links {
    padding-top: 74px !important;
  }

  .req-cta-links {
    flex-wrap: wrap;
    gap: 10px;
    width: min(100%, 360px);
    margin-top: 16px;
  }

  .req-cta-link {
    min-width: 0;
    flex: 1 1 calc(50% - 10px);
    font-size: 11px;
    letter-spacing: .08em;
    padding: 12px 10px;
  }

  .cta-sns-row,
  .apply-cta-sns {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 32px !important;
    right: auto !important;
    bottom: auto !important;
  }

  .cta-sns-row a,
  .apply-cta-sns a {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 14px 12px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .cta-sns-row a:last-child,
  .apply-cta-sns a:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Mobile type scale shared by every recruitment page. */
@media (max-width: 768px) {
  body
  :is(main, #scroller, section)
  :where(h1) {
    font-size: clamp(34px, 10vw, 50px) !important;
  }

  body
  :is(main, #scroller, section)
  :where(h2) {
    font-size: 29px !important;
  }

  body
  :is(main, #scroller, section)
  :where(h3) {
    font-size: 24px !important;
  }

  body
  :is(main, #scroller, section)
  :where(h4) {
    font-size: 17px !important;
  }

  body
  :is(main, #scroller, section)
  :where(
    p,
    li,
    dd,
    td,
    .talk-text,
    .event-text,
    .profile-bio,
    .qa-a-text,
    .card-quote
  ):not([class*="num"]):not([class*="stat"]):not([class*="value"]):not([class*="count"]):not([class*="year"]):not([class*="price"]):not(.qa-q-text) {
    font-size: 16px !important;
  }

  body
  :is(main, #scroller, section)
  :where(
    .lead,
    .lede,
    .lead-copy,
    .intro-lead,
    .about-lead,
    .section-lead
  ) {
    font-size: 18px !important;
  }

  body
  :is(main, #scroller, section)
  :where(
    .qa-q-text,
    .lede-head
  ) {
    font-size: 21px !important;
  }

  body
  :is(main, #scroller, section)
  :where(
    .card-name,
    .event-title
  ) {
    font-size: 24px !important;
  }

  body
  :is(main, #scroller, section)
  :where(
    .hero-label,
    .hero-kicker,
    .hero-num,
    .promo-label,
    .section-label,
    .eyebrow,
    .kicker
  ) {
    font-size: 17px !important;
  }

  body
  :is(
    section:not(.hero):not([class*="hero"]):not([id*="hero"]),
    main > :not(.hero):not([class*="hero"]):not([id*="hero"]),
    #scroller > :not(.hero):not([class*="hero"]):not([id*="hero"])
  )
  :where(
    p,
    li,
    dd,
    td,
    .talk-text,
    .event-text,
    .profile-bio,
    .qa-a-text,
    .card-quote
  ):not([class*="num"]):not([class*="stat"]):not([class*="value"]):not([class*="count"]):not([class*="year"]):not([class*="price"]):not(.qa-q-text) {
    line-height: 1.68 !important;
  }

  body
  :is(
    section:not(.hero):not([class*="hero"]):not([id*="hero"]),
    main > :not(.hero):not([class*="hero"]):not([id*="hero"]),
    #scroller > :not(.hero):not([class*="hero"]):not([id*="hero"])
  )
  :where(
    .lead,
    .lede,
    .lead-copy,
    .intro-lead,
    .about-lead,
    .section-lead,
    .talk-text,
    .event-text,
    .profile-bio,
    .qa-a-text
  ) {
    line-height: 1.6 !important;
  }

  body
  :is(
    section:not(.hero):not([class*="hero"]):not([id*="hero"]),
    main > :not(.hero):not([class*="hero"]):not([id*="hero"]),
    #scroller > :not(.hero):not([class*="hero"]):not([id*="hero"])
  )
  :where(h2, h3, h4, .qa-q-text, .lede-head, .event-title, .card-name) {
    line-height: 1.28 !important;
    margin-bottom: .55em !important;
  }

  body
  :is(
    section:not(.hero):not([class*="hero"]):not([id*="hero"]),
    main > :not(.hero):not([class*="hero"]):not([id*="hero"]),
    #scroller > :not(.hero):not([class*="hero"]):not([id*="hero"])
  )
  :where(p, .lead, .lede, .lead-copy, .intro-lead, .about-lead, .section-lead, .talk-text, .event-text, .profile-bio, .qa-a-text) + :where(p, .lead, .lede, .lead-copy, .intro-lead, .about-lead, .section-lead, .talk-text, .event-text, .profile-bio, .qa-a-text) {
    margin-top: .72em !important;
  }
}