/*
============================================================
# Layouts
============================================================
*/
.l-drawerNav {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 50;
  display: flex;
  flex-flow: nowrap row;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  max-width: 75rem;
  height: 100%;
  padding: 1em;
  padding-top: 7em;
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
  transform: translateX(-50%);
}

.l-scrollHeader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}

.l-scrollHeader.is-show {
  pointer-events: all;
  opacity: 1;
}

.l-main {
  min-height: 100svh;
}

.l-breadcrumb + .l-main {
  margin-top: 2em;
}

.l-mainBottom {
  margin-top: 5em;
}

.l-postBottom {
  margin-top: 3em;
}

.l-footer {
  margin-top: 6em;
}

.l-full {
  height: 100vh;
}

@media screen and (min-width: 75em) {
  .l-frontMainLayout {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto 21em;
    gap: 0 2em;
  }
}
@media screen and (min-width: 75em) {
  .l-frontMainLayout__02 {
    grid-row: 1/3;
    grid-column: 2/3;
  }
}
/* inner
--------------------------------------------- */
.l-inner {
  margin-right: auto;
  margin-left: auto;
}

.l-inner.--rowMV {
  width: 100%;
  max-width: 75rem;
}

.l-inner.--rowFull {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.l-inner.--rowMaxL {
  width: 100%;
  max-width: 125rem;
}

.l-inner.--rowMax {
  width: 100%;
  max-width: 87.5rem;
}

.l-inner.--rowLarge {
  width: 90%;
  max-width: 87.5rem;
}

.l-inner.--rowMain {
  width: 80%;
  max-width: 75rem;
}

.l-inner.--rowWide {
  width: 80%;
  max-width: 62.5rem;
}

.l-inner.--rowMedium {
  width: 80%;
  max-width: 50rem;
}

.l-inner.--rowSmall {
  width: 80%;
  max-width: 40rem;
}

.l-inner.--colMain {
  padding: 3em 0;
}

.l-inner.--colMedium {
  padding: 1.5em 0;
}

.l-inner.--colSmall {
  padding: 1em 0;
}

.l-inner.--colBottom {
  margin-bottom: 3em;
}

/* grid
--------------------------------------------- */
.l-grid.--col3 {
  display: flex;
  flex-flow: wrap row;
  row-gap: clamp(3.5rem, 3rem + 2vw, 5.5rem);
  align-items: stretch;
  justify-content: flex-start;
  margin: 0 calc(-1 * clamp(1rem, 0.875rem + 0.5vw, 1.5rem));
  text-align: center;
  container: footermenu/inline-size;
}

.l-grid.--col3 .l-grid__item {
  width: calc((37.5rem - 100%) * 1000);
  min-width: 33.3333333333%;
  max-width: 50%;
  padding: 0 clamp(1rem, 0.875rem + 0.5vw, 1.5rem);
}

@container footermenu (max-width: 300px) {
  .l-grid.--col3 .l-grid__item {
    width: 100%;
    max-width: none;
  }
}