@charset "UTF-8";
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}
.l-gheaderMount {
  display: contents;
}

.l-gheader,
.l-gheader * {
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
}

:root {
  --gheader-height: 3.75rem;
}
@media screen and (min-width: 1280px) {
  :root {
    --gheader-height: 5.4375rem;
  }
}

:root:has([data-gheader][data-state=open]) {
  overflow: hidden;
}

.l-gheader {
  background: var(--color-white, #fff);
  font-weight: 400;
  letter-spacing: 0.01em;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-index-header, 100);
}
@media screen and (max-width: 750px) {
  .l-gheader {
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .l-gheader[data-gheader-hidden=true]:not([data-state=open]):not(:has(:focus-visible)) {
    transform: translateY(-100%);
  }
}
@media screen and (min-width: 1280px) {
  .l-gheader {
    -webkit-border-after: 1px solid var(--color-gray02, #d9d9d9);
            border-block-end: 1px solid var(--color-gray02, #d9d9d9);
  }
}

.l-gheader__bar {
  align-items: center;
  display: flex;
  height: 3.75rem;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 1280px) {
  .l-gheader__bar {
    gap: 5rem;
    height: 5.4375rem;
    justify-content: flex-start;
    padding-inline: 2.5rem;
    position: static;
  }
}

.l-gheader__toggle,
.l-gheader__accordion,
.l-gheader__navButton {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.l-gheader__toggle {
  align-content: center;
  display: grid;
  gap: 0.125rem;
  height: 2.6875rem;
  justify-items: center;
  left: 1.1875rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8125rem;
}
.l-gheader__toggle[aria-expanded=true] {
  align-content: end;
}
@media screen and (min-width: 1280px) {
  .l-gheader__toggle {
    display: none;
  }
}

.l-gheader__toggleIcon {
  display: grid;
  height: 1.3125rem;
  width: 1.875rem;
}

.l-gheader__toggleBars {
  display: grid;
  gap: 0.375rem;
  grid-area: 1/1;
  place-self: center;
}
[data-gheader][data-state=open] .l-gheader__toggleBars {
  display: none;
}

.l-gheader__toggleBar {
  background: var(--color-body, #191919);
  height: 0.1875rem;
  width: 1.875rem;
}

.l-gheader__toggleClose {
  color: var(--color-body, #191919);
  display: none;
  grid-area: 1/1;
  place-self: center;
  width: 1.875rem;
}
[data-gheader][data-state=open] .l-gheader__toggleClose {
  display: block;
}

.l-gheader__toggleLabel {
  height: auto;
  width: 1.875rem;
}
[data-gheader][data-state=open] .l-gheader__toggleLabel {
  visibility: hidden;
}

.l-gheader__srOnly {
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.l-gheader__logo {
  font-size: 0;
  line-height: 1;
}
.l-gheader__logo a[data-hover-opacity],
.l-gheader__logo a [data-hover-opacity] {
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  .l-gheader__logo a:hover[data-hover-opacity],
  .l-gheader__logo a:hover [data-hover-opacity] {
    opacity: 0.8;
  }
  .l-gheader__logo a:focus-visible[data-hover-opacity],
  .l-gheader__logo a:focus-visible [data-hover-opacity] {
    opacity: 0.8;
  }
}

.l-gheader__logoImage {
  height: auto;
  width: 8.25rem;
}
@media screen and (min-width: 1280px) {
  .l-gheader__logoImage {
    width: 9.75rem;
  }
}

.l-gheader__nav {
  display: none;
}
@media screen and (min-width: 1280px) {
  .l-gheader__nav {
    align-self: stretch;
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .l-gheader__nav--sub {
    align-self: start;
    background: var(--color-pale-blue05, #e8f3ff);
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0.5rem;
    height: 4.5rem;
    margin-inline: auto -1.5rem;
    padding-inline: 1.5rem;
  }
}

@media screen and (min-width: 1280px) {
  .l-gheader__navList {
    display: flex;
    gap: 1.5rem;
    height: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .l-gheader__nav--sub .l-gheader__navList {
    gap: 2.5rem;
    height: 5.4375rem;
  }
}

@media screen and (min-width: 1280px) {
  .l-gheader__navItem {
    display: flex;
  }
}

@media screen and (min-width: 1280px) {
  .l-gheader__navButton,
  .l-gheader__navLink {
    align-items: center;
    color: var(--color-black, #000);
    display: flex;
    font-size: 1rem;
    line-height: 1.125rem;
    white-space: nowrap;
  }
}
@media screen and (min-width: 1280px) and (any-hover: hover) {
  .l-gheader__navButton:hover,
  .l-gheader__navLink:hover {
    color: var(--color-main, #00509a);
  }
  .l-gheader__navButton:hover .l-gheader__navLabel::after,
  .l-gheader__navLink:hover .l-gheader__navLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .l-gheader__navButton:focus-visible,
  .l-gheader__navLink:focus-visible {
    color: var(--color-main, #00509a);
  }
  .l-gheader__navButton:focus-visible .l-gheader__navLabel::after,
  .l-gheader__navLink:focus-visible .l-gheader__navLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@media screen and (min-width: 1280px) {
  .l-gheader__navButton[aria-expanded=true],
  .l-gheader__navLink[aria-expanded=true] {
    color: var(--color-main, #00509a);
  }
  .l-gheader__navButton[aria-expanded=true] .l-gheader__navLabel::after,
  .l-gheader__navLink[aria-expanded=true] .l-gheader__navLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@media screen and (min-width: 1280px) {
  .l-gheader__nav--sub .l-gheader__navButton,
  .l-gheader__nav--sub .l-gheader__navLink {
    font-size: 0.9375rem;
  }
}

@media screen and (min-width: 1280px) {
  .l-gheader__navLabel {
    position: relative;
  }
  .l-gheader__navLabel::after {
    background: currentColor;
    content: "";
    height: 1px;
    inset-block-start: calc(100% + 0.3125rem);
    inset-inline: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}

.l-gheader__mega {
  background: var(--color-pale-blue, #bfdeff);
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  left: 0;
  position: absolute;
  top: 100%;
  transition: visibility 0.3s, -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s;
  transition: clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s, -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 100%;
}
.l-gheader__mega[hidden] {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  display: block;
  visibility: hidden;
}

.l-gheader__megaInner {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
  padding-inline: 5rem 2.5rem;
}

.l-gheader__megaTitle {
  align-items: center;
  color: var(--color-main, #00509a);
  display: flex;
  font-size: 1.25rem;
  gap: 1rem;
  line-height: 1.5rem;
}
.l-gheader__megaTitle::before {
  background: currentColor;
  content: "";
  height: 0.6875rem;
  width: 0.6875rem;
}

.l-gheader__products {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.l-gheader__products::-webkit-scrollbar {
  display: none;
}

.l-gheader__productItem {
  flex-shrink: 0;
  -webkit-margin-start: var(--gheader-space-start, 4.375rem);
          margin-inline-start: var(--gheader-space-start, 4.375rem);
}
.l-gheader__productItem:first-child {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}

.l-gheader__product {
  align-items: start;
  display: grid;
  grid-template-columns: max(var(--gheader-package-width), var(--gheader-logo-width));
  grid-template-rows: 4.875rem auto;
  justify-items: center;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (any-hover: hover) {
  .l-gheader__product:hover {
    opacity: 0.6;
  }
  .l-gheader__product:focus-visible {
    opacity: 0.6;
  }
}

.l-gheader__productPackage,
.l-gheader__productLogo {
  height: auto;
}

.l-gheader__productPackage {
  width: var(--gheader-package-width);
}

.l-gheader__productLogo {
  width: var(--gheader-logo-width);
}

.l-gheader__productBody {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.l-gheader__productName {
  display: grid;
  justify-items: center;
}

.l-gheader__productClass {
  align-items: center;
  border: 1px solid var(--color-black, #000);
  color: var(--color-body, #191919);
  display: flex;
  font-size: 0.75rem;
  height: 1.375rem;
  justify-content: center;
  line-height: 1;
  padding-inline: 0.25rem;
}

.l-gheader__megaGroups {
  display: flex;
  gap: 3rem;
}

.l-gheader__megaGroup {
  display: grid;
  gap: 1.5rem;
}

.l-gheader__banners {
  display: flex;
  gap: 1.5rem;
}

.l-gheader__banner {
  display: grid;
  gap: 1rem;
}
@media (any-hover: hover) {
  .l-gheader__banner:hover .l-gheader__bannerImage {
    opacity: 0.6;
  }
  .l-gheader__banner:hover .l-gheader__bannerLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .l-gheader__banner:focus-visible .l-gheader__bannerImage {
    opacity: 0.6;
  }
  .l-gheader__banner:focus-visible .l-gheader__bannerLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.l-gheader__bannerImage {
  height: auto;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  width: var(--gheader-banner-width);
}

.l-gheader__bannerLabel {
  color: var(--color-main, #00509a);
  font-size: 1rem;
  justify-self: start;
  line-height: 1.1875rem;
  position: relative;
}
.l-gheader__bannerLabel::after {
  background: currentColor;
  content: "";
  height: 1px;
  inset-block-start: calc(100% + 0.3125rem);
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.l-gheader__megaSns {
  align-items: center;
  display: flex;
  gap: 1.75rem;
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
}

.l-gheader__megaSnsList {
  display: flex;
  gap: 1rem;
}

.l-gheader__megaSnsLink {
  display: block;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (any-hover: hover) {
  .l-gheader__megaSnsLink:hover {
    opacity: 0.6;
  }
  .l-gheader__megaSnsLink:focus-visible {
    opacity: 0.6;
  }
}

.l-gheader__megaSnsIcon {
  display: block;
  height: 3.25rem;
  width: 3.25rem;
}

.l-gheader__megaButtons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.l-gheader__megaButton {
  align-items: center;
  border: 1px solid var(--color-main, #00509a);
  border-radius: 0.25rem;
  color: var(--color-main, #00509a);
  display: flex;
  gap: 0.625rem;
  height: 2.5rem;
  padding-inline: 1rem 0.5rem;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (any-hover: hover) {
  .l-gheader__megaButton:hover {
    opacity: 0.6;
  }
  .l-gheader__megaButton:focus-visible {
    opacity: 0.6;
  }
}

.l-gheader__megaButton:link,
.l-gheader__megaButton:visited {
  color: var(--color-main, #00509a);
}

.l-gheader__megaButtonLabel {
  font-size: 0.875rem;
}

.l-gheader__megaButtonIcon {
  flex-shrink: 0;
  height: auto;
  transform: rotate(90deg);
  width: 1.0625rem;
}

.l-gheader__drawer {
  background: var(--color-white, #fff);
  height: calc(100dvh - var(--gheader-height));
  left: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 1rem 2.5rem;
  padding-inline: 1.5rem;
  position: absolute;
  top: 100%;
  width: 100%;
}
.l-gheader__drawer[hidden] {
  display: none;
}
@media screen and (min-width: 1280px) {
  .l-gheader__drawer {
    display: none;
  }
}

.l-gheader__menu {
  display: grid;
  gap: 0.625rem;
}

.l-gheader__menuItem {
  -webkit-border-after: 1px solid var(--color-gray04, #ccc);
          border-block-end: 1px solid var(--color-gray04, #ccc);
  -webkit-padding-after: 0.625rem;
          padding-block-end: 0.625rem;
}

.l-gheader__accordion,
.l-gheader__link {
  align-items: center;
  color: var(--color-black, #000);
  display: flex;
  font-size: 0.9375rem;
  justify-content: space-between;
  line-height: 0.875rem;
  padding-block: 0.625rem;
  width: 100%;
}
@media (any-hover: hover) {
  .l-gheader__accordion:hover .l-gheader__accordionLabel::after,
  .l-gheader__accordion:hover .l-gheader__linkLabel::after,
  .l-gheader__link:hover .l-gheader__accordionLabel::after,
  .l-gheader__link:hover .l-gheader__linkLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .l-gheader__accordion:focus-visible .l-gheader__accordionLabel::after,
  .l-gheader__accordion:focus-visible .l-gheader__linkLabel::after,
  .l-gheader__link:focus-visible .l-gheader__accordionLabel::after,
  .l-gheader__link:focus-visible .l-gheader__linkLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.l-gheader__accordionLabel,
.l-gheader__linkLabel {
  position: relative;
}
.l-gheader__accordionLabel::after,
.l-gheader__linkLabel::after {
  background: currentColor;
  content: "";
  height: 1px;
  inset-block-start: calc(100% + 0.3125rem);
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.l-gheader__accordionIcon {
  align-items: center;
  display: flex;
  font-size: 1.125rem;
  font-weight: 300;
  height: 0.875rem;
  justify-content: center;
  line-height: 1;
  width: 1.125rem;
}
.l-gheader__accordionIcon::before {
  content: "＋";
}
[aria-expanded=true] > .l-gheader__accordionIcon {
  font-size: 1.625rem;
  font-weight: 100;
}
[aria-expanded=true] > .l-gheader__accordionIcon::before {
  content: "−";
}

.l-gheader__linkIcon {
  color: var(--color-black, #000);
  flex-shrink: 0;
  height: auto;
  width: 0.875rem;
}

.l-gheader__panel[hidden] {
  display: none;
}

.l-gheader__child {
  color: var(--color-black, #000);
  display: block;
  font-size: 0.9375rem;
  line-height: 0.875rem;
  padding-block: 0.625rem;
  -webkit-padding-start: 1.5rem;
          padding-inline-start: 1.5rem;
}
@media (any-hover: hover) {
  .l-gheader__child:hover .l-gheader__childLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .l-gheader__child:focus-visible .l-gheader__childLabel::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.l-gheader__childLabel {
  position: relative;
}
.l-gheader__childLabel::after {
  background: currentColor;
  content: "";
  height: 1px;
  inset-block-start: calc(100% + 0.0625rem);
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.l-gheader__childHeading {
  color: var(--color-black, #000);
  font-size: 0.9375rem;
  line-height: 0.875rem;
  padding-block: 0.625rem;
}

.l-gheader__sns {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  padding-block: 0.625rem;
}

.l-gheader__snsLabel {
  color: var(--color-black, #000);
  font-size: 0.9375rem;
  line-height: 0.875rem;
}

.l-gheader__snsList {
  display: flex;
  gap: 1rem;
}

.l-gheader__snsLink {
  display: block;
}

.l-gheader__snsIcon {
  display: block;
  height: 2.125rem;
  width: 2.125rem;
}