:root {
  --brand-blue: #00469b;
  --brand-blue-dark: #063a77;
  --brand-ink: #111827;
  --brand-muted: #64748b;
  --brand-line: #dbe4ef;
  --brand-soft: #f4f8fc;
  --site-header-font: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif;
}

.header,
.site-header {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10000;
  font-family: var(--site-header-font);
  background: #fff;
  border-bottom: 1px solid var(--brand-line);
}

#site-header {
  position: relative;
  z-index: 10000;
}

body:has(.header),
body:has(.site-header) {
  padding-top: 143px !important;
}

.header *,
.site-header * {
  letter-spacing: 0;
}
.site-header__top {
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
}
.header > .container-1600:first-child,
.site-header__top {
  min-height: 78px;
  padding: 12px 64px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}

.site-language__option {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b3b3b3;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}

.site-language__option.is-active {
  color: var(--brand-ink);
  font-weight: 700;
  cursor: default;
}

.site-language__option:hover:not(.is-active) {
  color: #8a8a8a;
}

.site-language__sep {
  color: #b3b3b3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  user-select: none;
}
.site-logo,
.header > .container-1600:first-child > a[href="index.html"]:not(.header-brand) {
  display: flex;
  align-items: center;
  min-width: 300px;
  height: 54px !important;
}

.site-logo img,
.header > .container-1600:first-child > a[href="index.html"]:not(.header-brand) img {
  height: 42px !important;
  width: auto;
  object-fit: contain;
}

.site-tools,
.header .row.fm.fr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.site-language,
.header .upper-menu p {
  color: var(--brand-muted);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.site-search,
form.site-search.site-search-form,
.header .search-wrapper {
  width: min(420px, 34vw) !important;
  max-width: 420px !important;
  min-width: 0;
  height: 42px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 999px !important;
  background: #fff;
  box-sizing: border-box;
}

.site-search .site-search-form,
.site-search-form:not(.site-search) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-sizing: border-box;
}

.header .search-wrapper.site-search-form {
  width: min(420px, 34vw) !important;
  max-width: 420px !important;
  height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 999px !important;
  background: #fff;
}

.site-search__button,
.header .search-wrapper .site-search__button,
.header .search-wrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  pointer-events: auto;
}

.site-search__button img,
.header .search-wrapper button[type="submit"] img {
  width: 16px;
  height: 16px;
  display: block;
}

.site-search__input,
.header .search-wrapper .site-search__input,
.header .input-header {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--brand-ink);
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.4;
  cursor: text;
  pointer-events: auto;
}

.site-search__input::placeholder,
.header .input-header::placeholder {
  color: var(--brand-muted);
}
.site-search__input:focus-visible {
  outline:0px ;
  outline-offset: 0px;
}
.site-search span,
.header .input-header {
  color: var(--brand-muted);
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.4;
}

.site-nav,
.header .border-top.border-bottom {
  border-top: 1px solid var(--brand-line) !important;
  border-bottom: 0 !important;
  background: #fff;
}

.site-nav ul,
.header .js-mega-menu {
  max-width: 1532px;
  height: 64px;
  margin: 0 auto;
  padding: 0 64px !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.site-nav li,
.header .js-mega-menu > li {
  min-width: 0;
  border-right: 0 !important;
}

.site-nav a,
.header .header-menu {
  position: relative;
  height: 64px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
  background: transparent;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.site-nav a,
.site-nav a:visited,
.header .header-menu,
.header .header-menu p {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: inherit;
  white-space: nowrap;
}

.site-nav a::after,
.header .header-menu::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  width: auto;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.site-nav a:hover,
.site-nav a.is-active,
.header .header-menu.current-menu,
.header .header-menu:hover {
  color: var(--brand-blue-dark);
  background: #f2f7fd ;
}

.site-nav a:hover::after,
.site-nav a.is-active::after,
.header .header-menu.current-menu::before,
.header .header-menu:hover::before {
  transform: scaleX(1);
}

.site-menu-button,
.site-mobile-nav {
  display: none;
}

.site-menu-button {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--brand-line);
  background: #fff;
}

.site-menu-button span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-menu-open .site-menu-button span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-menu-open .site-menu-button span:nth-child(2) {
  opacity: 0;
}

.site-header.is-menu-open .site-menu-button span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  body:has(.site-header) {
    padding-top: 66px !important;
  }

  body:has(.header) {
    padding-top: 66px !important;
  }

  .header > .container-1600:first-child,
  .site-header__top {
    min-height: 66px;
    padding: 10px 18px !important;
    z-index: 21;
        position: relative;
  }

  .site-tools,
  .header .row.fm.fr {
    display: none !important;
  }

  .site-logo,
  .header > .container-1600:first-child > a[href="index.html"]:not(.header-brand) {
    min-width: 0;
    height: 44px !important;
  }

  .site-logo img,
  .header > .container-1600:first-child > a[href="index.html"]:not(.header-brand) img {
    height: 32px !important;
  }

  .site-nav {
    display: none;
  }

  .site-menu-button {
    display: flex;
  }

  .site-mobile-nav {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    height: calc(100svh - 66px);
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--brand-line);
    background: #fff !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .site-header.is-menu-open .site-mobile-nav {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }

  html.site-menu-lock,
  body.site-menu-lock {
    overflow: hidden !important;
  }

  .site-mobile-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-mobile-nav a {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid var(--brand-line);
    color: var(--brand-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
  }

  .site-mobile-nav a.is-active {
    color: var(--brand-blue);
    background: var(--brand-soft);
  }

  .site-mobile-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--brand-line);
    background: #fff;
  }

  .site-mobile-tools__lang {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .site-mobile-tools__search {
    flex: 1;
    min-width: 0;
  }

  .site-mobile-tools__search .site-search,
  .site-mobile-tools__search form.site-search.site-search-form.search-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  .site-mobile-search {
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--brand-line);
    background: #fff;
  }

  .site-mobile-search .site-search {
    width: 100% !important;
    max-width: none !important;
  }

  .hamburger-tools-item {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid var(--brand-line);
  }

  .hamburger-tools-item .site-mobile-tools {
    border-bottom: 0;
  }

  .hamburger-search-item {
    list-style: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--brand-line);
  }

  .hamburger-search-item .site-search {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    padding: 0 16px !important;
    border: 1px solid var(--brand-line) !important;
    border-radius: 999px !important;
    background: #fff;
  }

  .header .border-top.border-bottom {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header .border-top.border-bottom::-webkit-scrollbar {
    display: none;
  }

  .header .js-mega-menu {
    width: max-content;
    min-width: 100%;
    height: 56px;
    padding: 0 14px !important;
    display: flex !important;
    gap: 6px;
  }

  .site-nav a,
  .header .header-menu {
    min-width: 112px;
    height: 56px !important;
  }

  .site-nav a,
  .header .header-menu,
  .header .header-menu p {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  .site-nav a::after,
  .header .header-menu::before {
    left: 18px;
    right: 18px;
  }
}

/* Keep inner-page banner copy aligned with the content blocks below. */
.hero__inner,
.quality-hero__inner,
.oem-hero__inner,
.section,
.oem-section,
.breadcrumb,
.detail-hero {
  box-sizing: border-box;
  width: 100%;
  max-width: 1456px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero__inner { padding: 34px; }
  .hero p { font-size: 16px; }
  .info-section h2::before { height: 22px; }
}

.hero h1,
.quality-hero h1,
.oem-hero h1 {
  font-size: clamp(34px, 4.6vw, 58px) !important;
  line-height: 1.08 !important;
}

.section-head h2,
.detail-title,
.product-title,
.summary-copy h1,
.info-section h2,
.message-band h2 {
  font-size: clamp(28px, 3.4vw,32px) !important;
  line-height: 1.16 !important;
}

@media (max-width: 1023px) {
  .hero h1,
  .quality-hero h1,
  .oem-hero h1 {
    font-size: clamp(30px, 32px, 34px) !important;
  }

  .section-head h2,
  .detail-title,
  .product-title,
  .summary-copy h1,
  .info-section h2,
  .message-band h2 {
    font-size:clamp(24px, 24px, 34px) !important;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
}

footer,
.simple-footer {
  padding: 54px 72px 30px !important;
  background: #06152b !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.site-footer-layout {
  max-width: 1456px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.footer-brand__logo {
  color: #fff !important;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  text-decoration: none;
}

.footer-brand p {
  max-width: 360px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.8;
  font-weight: 600;
}

.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  text-decoration: none !important;
}

.footer-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #65b7ff;
  border-right: 2px solid #65b7ff;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.footer-nav a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.footer-bottom {
  max-width: 1456px;
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-existing,
.footer-existing .simple-footer__inner,
.footer-existing .container-1456 {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.footer-existing img {
  display: none !important;
}

.footer-existing a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
}

@media (max-width: 1023px) {
  footer,
  .simple-footer {
    padding: 38px 18px 26px !important;
  }

  .site-footer-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
  }

  .footer-existing,
  .footer-existing .simple-footer__inner,
  .footer-existing .container-1456 {
    display: grid !important;
    justify-content: start !important;
  }
}