@charset "UTF-8";
.l-header {
  --icon-size: 30px;
  --cta-size: 92px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  color: #231815;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background-color: #fff;
}
.l-header img {
  display: block;
  width: auto;
}
.l-header a:hover {
  opacity: 0.7;
}
.l-header__wrap {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.l-header__logo {
  padding-left: 24px;
  display: flex;
  align-items: center;
}
.l-header__logo img {
  height: 56px;
  width: auto;
}
.l-header__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
}
.l-header__nav-event ul {
  display: flex;
  gap: 12px;
  align-items: center;
}
.l-header__nav-event ul li img,
.l-header__nav-event ul li svg {
  width: 29px;
}
.l-header__nav-event ul li:first-child {
  display: flex;
  position: relative;
  align-items: center;
  font-weight: 500;
}
.l-header__nav-event ul li:first-child::after {
  position: relative;
  content: "";
  background-color: black;
  display: block;
  width: 2px;
  height: 30px;
  margin-left: 12px;
}
.l-header__nav-global {
  height: 30px;
  display: flex;
  align-items: center;
}
.l-header__nav-global ul {
  display: flex;
  align-items: center;
  gap: 24px;
}
.l-header__nav-global-item a {
  display: flex;
  position: relative;
  align-items: center;
  font-weight: 500;
}
.l-header__nav-global-item.under-md {
  display: none;
}
.l-header__nav-global-item.subitems {
  transition: all 300ms ease;
}
.l-header__nav-global-item.subitems > ul {
  display: block;
  padding-left: 0;
}
.l-header__nav-global-item.subitems > ul li:last-child a {
  border-bottom: 1px solid #e6e6e6;
}
.l-header__nav-global-item.subitems a {
  padding-left: 48px;
  text-align: left;
  border-bottom: none;
}
.l-header__nav-global-item.subitems a::before {
  content: "・";
}
.l-header__icons ul {
  display: flex;
  gap: 1px;
}
.l-header__icons-item a {
  background-color: #1a2f65;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  height: var(--cta-size);
  aspect-ratio: 1;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.l-header__icons-item a img {
  width: auto;
  height: var(--icon-size);
  -o-object-fit: contain;
     object-fit: contain;
}
.l-header__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-right: 24px;
  cursor: pointer;
}
.l-header__hamburger-bar {
  width: 36px;
  height: 20px;
  position: relative;
}
.l-header__hamburger-bar > span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: black;
  left: 50%;
  transition: all 300ms ease;
}
.l-header__hamburger-bar > span:nth-child(1) {
  top: 0;
  translate: -50%;
}
.l-header__hamburger-bar > span:nth-child(2) {
  top: 50%;
  translate: -50% -50%;
}
.l-header__hamburger-bar > span:nth-child(3) {
  bottom: 0;
  translate: -50%;
}
.l-header__hamburger-text {
  font-size: 0.8rem;
}
.l-header__hamburger--open .l-header__hamburger-bar > span:nth-child(1) {
  top: 50%;
  width: 80%;
  translate: -50% -50%;
  rotate: 405deg;
}
.l-header__hamburger--open .l-header__hamburger-bar > span:nth-child(2) {
  opacity: 0;
  width: 200%;
}
.l-header__hamburger--open .l-header__hamburger-bar > span:nth-child(3) {
  top: 50%;
  width: 80%;
  translate: -50% -50%;
  rotate: -405deg;
}
.l-header__megamenu {
  position: relative;
  border-top: 1px solid #e6e6e6;
  height: 250px;
  display: none;
}
.l-header__megamenu-item {
  position: absolute;
  inset: 0;
  height: 250px;
  background-color: white;
  font-weight: 500;
  display: none;
}
.l-header__megamenu-item.is-open {
  display: flex;
  gap: 128px;
  align-items: center;
  justify-content: center;
}
.l-header__megamenu.is-open {
  display: block;
}
.l-header__megamenu-wrap {
  height: 100%;
  display: flex;
  gap: 56px;
  align-items: center;
  justify-content: center;
}
.l-header__megamenu-caption {
  padding-right: 56px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.l-header__megamenu-caption::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 75%;
  right: 0;
  border-right: 1px solid #231815;
}
.l-header__megamenu-contents ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1400px) {
  .l-header {
    --icon-size: 28px;
    --cta-size: 80px;
  }
  .l-header__wrap {
    font-size: 0.9rem;
  }
  .l-header__nav {
    gap: 0;
  }
  .l-header__icons-item a {
    font-size: 0.8rem;
  }
}
@media (max-width: 1200px) {
  .l-header {
    --cta-size: 72px;
    --icon-size: 28px;
  }
  .l-header__wrap {
    font-size: 0.8rem;
  }
  .l-header__logo img {
    height: 48px;
  }
  .l-header__nav-global ul {
    gap: calc(12px + 12 * (100vw - 960px) / 240);
  }
  .l-header__icons-item a {
    gap: 8px;
  }
}
@media (max-width: 959px) {
  .l-header {
    --icon-size: 28px;
    --cta-size: 72px;
  }
  .l-header__wrap {
    padding-block: 8px;
  }
  .l-header__logo {
    padding-left: 16px;
  }
  .l-header__logo img {
    height: 48px;
  }
  .l-header__nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    width: 100%;
    gap: 16px;
    top: 80px;
    display: none;
  }
  .l-header__nav-event {
    order: 2;
    font-size: 1rem;
  }
  .l-header__nav-event ul li:first-child::after {
    width: 1px;
  }
  .l-header__nav-global {
    order: 1;
    display: none;
    height: unset;
    background-color: white;
    width: 100%;
  }
  .l-header__nav-global nav {
    margin-top: 24px;
    width: 100%;
  }
  .l-header__nav-global ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .l-header__nav-global-item {
    width: 100%;
  }
  .l-header__nav-global-item a {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    padding-block: 16px;
    padding-left: 24px;
    border-bottom: 1px solid #e6e6e6;
  }
  .l-header__nav-global-item a span {
    transition: all 300ms ease;
  }
  .l-header__nav-global-item.openmark {
    position: relative;
  }
  .l-header__nav-global-item.openmark > span {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    right: 24px;
    top: 50%;
    translate: 0 -50%;
    cursor: pointer;
  }
  .l-header__nav-global-item.openmark > span::after {
    position: absolute;
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background-color: #888;
    right: 0px;
    top: 50%;
    translate: 0 -50%;
    opacity: 1;
  }
  .l-header__nav-global-item.openmark > span::before {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    height: 16px;
    background-color: #888;
    right: 0;
    top: 50%;
    translate: -7px -50%;
    opacity: 1;
  }
  .l-header__nav-global-item.closemark {
    position: relative;
  }
  .l-header__nav-global-item.closemark a {
    border-bottom: none;
  }
  .l-header__nav-global-item.closemark > span {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    right: 24px;
    top: 50%;
    translate: 0 -50%;
    cursor: pointer;
  }
  .l-header__nav-global-item.closemark > span::after {
    position: absolute;
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background-color: #888;
    right: 0px;
    top: 50%;
    translate: 0 -50%;
    opacity: 1;
  }
  .l-header__nav-global-item.closemark > span::before {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    height: 16px;
    background-color: #888;
    right: 0;
    top: 50%;
    translate: -7px -50%;
    opacity: 0;
  }
  .l-header__nav-global-item.under-md {
    display: block;
  }
  .l-header__nav-global-item.subitems {
    --item-height: 0px;
    transition: all 300ms ease;
    height: var(--item-height);
    overflow: hidden;
    opacity: 0;
  }
  .l-header__nav-global-item.subitems-open {
    height: var(--item-height);
    opacity: 1;
  }
  .l-header__icons {
    display: flex;
    flex-direction: column;
    order: 3;
    align-items: center;
    width: 100%;
    top: calc(100dvh - var(--cta-size));
    display: none;
  }
  .l-header__icons nav {
    width: 100%;
    padding-inline: 2vw;
  }
  .l-header__icons ul {
    width: 100%;
  }
  .l-header__icons-item {
    flex: 1;
  }
  .l-header__icons-item a {
    aspect-ratio: unset;
  }
  .l-header__hamburger {
    margin-right: 16px;
    display: flex;
  }
}
.l-header--md-open.l-header {
  transition: all 300ms ease;
  height: calc(100dvh + env(safe-area-inset-bottom));
}
.l-header--md-open.l-header .l-header__nav {
  display: flex;
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  overflow-y: auto;
  justify-content: flex-start;
}
.l-header--md-open.l-header .l-header__nav-global {
  display: block;
}
.l-header--md-open.l-header .l-header__icons {
  display: flex;
}/*# sourceMappingURL=header.css.map */