@import url("https://use.typekit.net/oth6btz.css") layer(foundation);
@import url("./variables.css") layer(foundation);
@import url("./base.css") layer(foundation);
@layer component {
  @container l-header (max-width: 992px) {
    .c-header-main-menu {
      display: none;
    }
  }
  .c-header-main-menu__items {
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: calc(15px / var(--fz-base, 16px) * 1rem);
    gap: clamp(0.75rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
    font-family: var(--ff-en);
  }
}
@layer layout {
  .l-header {
    --container-min-width: 20;
    --container-base-width: 40;
    width: 100%;
    height: var(--global-header-height);
    container-type: inline-size;
    container-name: l-header;
  }
  .l-header__inner {
    height: 100%;
    padding-inline: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: clamp(1.5rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
    background: #fff;
  }
  .l-header__logo img {
    width: clamp(5.625rem, calc(120px / var(--design-width, 1440px) * 100vw), 7.5rem);
  }
  .l-header__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .l-header__buttons {
    --button-h: clamp(2rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
    --button-fz: clamp(0.75rem, calc(13px / var(--design-width, 1440px) * 100vw), 0.8125rem);
  }
  .l-header__hamburger {
    width: calc(32px / var(--fz-base, 16px) * 1rem);
    height: calc(32px / var(--fz-base, 16px) * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 62.0625em) {
    .l-header__hamburger {
      display: none;
    }
  }
}
@layer component {
  .c-footer-main-menu__items {
    display: grid;
    flex-direction: var(--footer-main-menu-direction, column);
    gap: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
    line-height: 1.1;
    font-family: var(--ff-en);
  }
  .c-footer-main-menu__items:has(.c-footer-main-menu__item:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
  .c-footer-main-menu__item {
    min-width: 160px;
  }
  .c-footer-main-menu-lv1 {
    margin-top: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  .c-footer-main-menu-lv1__items {
    display: grid;
    gap: calc(12px / var(--fz-base, 16px) * 1rem);
  }
  .c-footer-main-menu-lv1__item {
    font-size: calc(13px / var(--fz-base, 16px) * 1rem);
  }
}
@layer component {
  .c-footer-sub-menu__items {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
    line-height: 1.1;
  }
  .c-footer-sub-menu__items:has(.c-footer-sub-menu__item:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
  .c-footer-sub-menu__item {
    font-size: calc(11px / var(--fz-base, 16px) * 1rem);
    color: color-mix(in srgb, transparent, #000 60%);
    line-height: 1.1;
  }
  .c-footer-main-menu-lv1 {
    margin-top: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  .c-footer-main-menu-lv1__items {
    display: grid;
    gap: calc(12px / var(--fz-base, 16px) * 1rem);
  }
  .c-footer-main-menu-lv1__item {
    font-size: calc(13px / var(--fz-base, 16px) * 1rem);
  }
}
@layer component {
  .c-copyright {
    font-size: calc(13px / var(--fz-base, 16px) * 1rem);
    line-height: 1.1;
    font-family: var(--ff-en);
  }
}
@layer layout {
  .l-footer {
    --content-min-margin: 10;
    --content-base-margin: 20;
    padding: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
  }
  .l-footer__container {
    background-color: #F5F5F5;
    padding: clamp(3.75rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem) clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem) calc(40px / var(--fz-base, 16px) * 1rem);
    border-radius: calc(20px / var(--fz-base, 16px) * 1rem);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(40px / var(--fz-base, 16px) * 1rem);
  }
  .l-footer__main {
    display: flex;
    align-items: start;
    gap: clamp(3rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
  }
  @media (max-width: 62em) {
    .l-footer__main {
      flex-direction: column;
    }
  }
  .l-footer__content {
    flex: 1;
    display: flex;
    align-items: start;
    justify-content: end;
    flex-wrap: wrap;
    gap: calc(32px / var(--fz-base, 16px) * 1rem) clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  @media (max-width: 48em) {
    .l-footer__content {
      flex-direction: column;
    }
  }
  .l-footer__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(32px / var(--fz-base, 16px) * 1rem) clamp(2.5rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
  }
  @media (max-width: 48em) {
    .l-footer__sub {
      flex-direction: column;
      align-items: start;
    }
  }
}
@layer layout {
  .l-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
}
@layer component {
  .c-drawer-main-menu {
    border-bottom: 1px solid color-mix(in srgb, #fff, #000 5%);
  }
  @container l-header (max-width: 992px) {
    .c-drawer-main-menu {
      display: none;
    }
  }
  .c-drawer-main-menu__items {
    padding: calc(16px / var(--fz-base, 16px) * 1rem) calc(30px / var(--fz-base, 16px) * 1rem);
    font-family: var(--ff-en);
  }
  .c-drawer-main-menu__item {
    position: relative;
    height: calc(60px / var(--fz-base, 16px) * 1rem);
    display: flex;
  }
  .c-drawer-main-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }
  .c-drawer-main-menu__link a::after {
    content: "";
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .c-drawer-main-menu__link::after {
    content: "";
    display: block;
    width: calc(5px / var(--fz-base, 16px) * 1rem);
    height: calc(8px / var(--fz-base, 16px) * 1rem);
    background: url("../img/bracket-right.svg") center center no-repeat;
    background-size: contain;
  }
}
@layer component {
  .c-close-button {
    position: relative;
    width: var(--close-btn-size, calc(32px / var(--fz-base, 16px) * 1rem));
    height: var(--close-btn-size, calc(32px / var(--fz-base, 16px) * 1rem));
    margin-left: auto;
    margin-right: 0;
  }
  .c-close-button::before, .c-close-button::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    position: absolute;
    margin: auto;
    width: calc(13px / var(--fz-base, 16px) * 1rem);
    height: calc(1px / var(--fz-base, 16px) * 1rem);
    background-color: var(--close-button-bgc, #000);
  }
  .c-close-button::before {
    transform: rotate(45deg);
  }
  .c-close-button::after {
    transform: rotate(-45deg);
  }
}
@layer layout {
  .l-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0s;
  }
  .l-drawer:not(.is-open) {
    transform: translateX(100%);
  }
  .l-drawer__header {
    padding: calc(16px / var(--fz-base, 16px) * 1rem) calc(24px / var(--fz-base, 16px) * 1rem);
    display: flex;
    justify-content: end;
    align-items: center;
    height: var(--global-header-height);
  }
}
@layer component {
  .c-breadcrumb {
    font-size: calc(11px / var(--fz-base, 16px) * 1rem);
    display: flex;
    padding-block: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  .c-breadcrumb__inner {
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
    padding-inline: clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
  }
  .c-breadcrumb__items {
    display: flex;
    align-items: center;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .c-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .c-breadcrumb__item:last-child {
    opacity: 0.4;
  }
  .c-breadcrumb__item:not(:first-child)::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../common/img/bracket-right.svg") center center no-repeat;
    background-size: 5px 8px;
    opacity: 0.867;
  }
}
@layer component {
  .c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-w, -moz-fit-content);
    width: var(--button-w, fit-content);
    height: var(--button-h, calc(30px / var(--fz-base, 16px) * 1rem));
    padding: var(--button-py, 8px) var(--button-px, 20px);
    background: var(--button-bgc, rgba(0, 0, 0, 0.0509803922));
    border-radius: var(--button-radius, 0);
    font-size: var(--button-fz, clamp(0.75rem, calc(13px / var(--design-width, 1440px) * 100vw), 0.8125rem));
    line-height: var(--button-lh, 1);
    color: var(--button-clr, #000);
    font-family: var(--ff-en);
    transition-property: color, background-color, border-color, opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0s;
  }
  .c-button .c-svg {
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0s;
  }
  .c-button:has(.c-svg) {
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  @media (hover: hover) and (pointer: fine) {
    .c-button:has(.c-svg):hover .c-svg {
      transform: translateX(2px);
    }
  }
  .c-button[data-variant*="clr:black"] {
    --button-bgc: #000000;
    --button-clr: #fff;
  }
  .c-button[data-variant*="clr:light-gray"] {
    --button-bgc: #0000000D;
  }
  .c-button[data-variant*="rounded:full"] {
    --button-radius: var(--button-h, calc(30px / var(--fz-base, 16px) * 1rem));
  }
}
@layer component {
  .c-svg {
    display: block;
    aspect-ratio: var(--svg-ratio, 1/1);
    width: var(--svg-w, 20px);
    height: var(--svg-h, auto);
    fill: var(--svg-fill, currentColor);
  }
  .c-svg--arrow-right {
    --svg-ratio: 39 / 32;
  }
  .c-svg--bracket-right {
    --svg-ratio: 20 / 32;
  }
  .c-svg--hamburger {
    --svg-ratio: 42 / 32;
  }
}
@layer component {
  .c-sns-icons {
    display: flex;
    align-items: center;
  }
  .c-sns-icons span {
    display: block;
  }
}
@layer component {
  .c-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-w, -moz-fit-content);
    width: var(--button-w, fit-content);
    height: var(--button-h, calc(30px / var(--fz-base, 16px) * 1rem));
    padding: var(--button-py, 8px) var(--button-px, 0);
    font-size: var(--button-fz, clamp(0.75rem, calc(13px / var(--design-width, 1440px) * 100vw), 0.8125rem));
    line-height: var(--button-lh, 1);
    color: var(--button-clr, #000);
    position: relative;
  }
  .c-link-button::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, #fff, #000 20%);
    transition: background 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  @media (hover: hover) and (pointer: fine) {
    .c-link-button:hover::before {
      background: #000;
    }
  }
}
.u-flex {
  display: flex;
  align-items: var(--flex-items, center);
  justify-content: var(--flex-justify, start);
  gap: var(--flex-gap, 0);
}
.u-flex[data-variant*="items:center"] {
  --flex-items: center;
}
.u-flex[data-variant*="justify:between"] {
  --flex-justify: space-between;
}

@layer foundation, layout, project, component, page, utility;