@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-v56-japanese_latin-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/zen-kaku-gothic-new-v18-japanese_latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/zen-kaku-gothic-new-v18-japanese_latin-900.woff2') format('woff2');
}

:root {
  --blue: #134a87;
  --ink: #16232e;
  --text: #3e4b57;
  --soft: #f5f9fd;
  --pale: #eaf2fb;
  --line: #e4eaf1;
  --green: #2fa88c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

[id] {
  scroll-margin-top: 24px;
}

@media (max-width: 767px) {
  [id] {
    scroll-margin-top: 32px;
  }
}

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
}

.content-bls-white {
  background: #fff;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.content-bls-soft {
  background: var(--soft);
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.font-heading { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
.container-bls { width: min(1260px, 100%); margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 41px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--pale);
  color: var(--blue);
  font-size: 14px;
  line-height: 26.6px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0px 2px 10px 0px #134A870F;
}
.hero-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 3.5px;
  background: var(--green);
}
.hero-pill.no-dot::before {
  display: none;
}
.section-title {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 62px;
  letter-spacing: .4px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 63px;
  padding: 15px 30px 18px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 29.45px;
  box-shadow: 0 8px 10px rgba(30,104,180,.28);
}
.btn-primary:disabled,
button:disabled {
  pointer-events: none !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 63px;
  padding: 15px 30px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
}
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.05);
}
.blue-card {
  border-top: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--soft);
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.05);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,0) 64%);
}
/* .intro-bg {
  background: linear-gradient(180deg, var(--soft), #fff 85%);
} */
.intro-bg img, .contact-intro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: .6; */
}
.cta-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
}
.field {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.textarea {
  width: 100%;
  min-height: 146px;
  border: 1px solid var(--line);
  background: var(--soft);
}

@media (max-width: 900px) {
  .container-bls { width: min(100% - 32px, 640px); }
  .section-title { font-size: 30px; line-height: 44px; }
  .desktop-nav { display: none; }
  .mobile-menu-button { display: inline-flex; }
  .hero-bg::after { background: #FFFFFFCC; }
}
@media (min-width: 901px) {
  .mobile-menu-button { display: none; }
}

@media not all and (min-width: 768px) {
  .content-bls-white, .content-bls-soft {
    padding: 32px 16px;
    gap: 32px;
  }

  .container-bls { width: min(398px, 100%); margin-inline: auto; }

  .banner-intro br {
    display: none !important;
  }
}

body.bls-mobile-nav-open {
  overflow: hidden;
}

body.bls-mobile-nav-open .mobile-drawer {
  transform: translateX(0);
}

body.bls-mobile-nav-open .mobile-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
