@charset "UTF-8";
/* ==========================================================================
   フッター（DsFooter）
   紺 #354E6F の面・白文字。4列（サイトマップ／本体サイト／運営会社／ポリシー）。
   モバイルはリンクを2列・タップ領域44px。
   ========================================================================== */
.lab-footer {
  padding: 96px 0 32px;
  background: var(--lab-navy);
  color: var(--lab-white);

  @media (max-width: 767px) {
    padding: 64px 0 24px;
  }

  & :focus-visible {
    outline-color: var(--lab-white);
    outline-offset: 2px;
  }

  /* 12カラム換算でブランド4列（416px）＋リンク2列（192px）×4。1440px で基準デザインと一致する比 13:6。
     狭いデスクトップ幅ではリンク列が min-content を下回らず、ブランド列が縮む */
  & .lab-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 13fr) repeat(4, minmax(min-content, 6fr));
    column-gap: var(--lab-gutter);
    align-items: start;
    max-width: var(--lab-container);
    margin-inline: auto;
    padding-inline: var(--lab-margin);

    @media (max-width: 1023px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      row-gap: 48px;
    }

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 32px;
    }
  }

  & .lab-footer__brand {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (max-width: 1023px) {
      grid-column: 1 / -1;
    }

    @media (max-width: 767px) {
      margin-bottom: 16px;
    }
  }

  /* ロゴ画像を紺の面の上で白抜きにする */
  & .lab-footer__logo {
    align-self: flex-start;
    width: auto;
    height: 28px;
    filter: brightness(0) invert(1);

    @media (max-width: 767px) {
      height: 24px;
    }
  }

  & .lab-footer__en {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--lab-bg-2);
  }

  & .lab-footer__group {
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (max-width: 767px) {
      gap: 4px;
    }
  }

  & .lab-footer__title {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-bg-2);
  }

  /* 見出し自体がリンク（プライバシーポリシー・お問い合わせ） */
  & .lab-footer__title-link {
    color: inherit;
    text-underline-offset: 4px;

    &:hover {
      text-decoration: underline;
    }
  }

  & .lab-footer__links {
    display: flex;
    flex-direction: column;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
    }
  }

  & .lab-footer__link {
    display: inline-block;
    padding: 4px 0;

    @media (max-width: 767px) {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0;
    }

    &:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    &:focus-visible {
      @media (max-width: 767px) {
        outline-offset: -2px;
      }
    }
  }

  & .lab-footer__bottom {
    max-width: var(--lab-container);
    margin: 96px auto 0;
    padding-inline: var(--lab-margin);

    @media (max-width: 767px) {
      margin-top: 48px;
    }
  }

  & .lab-footer__copy {
    padding-top: 24px;
    border-top: 1px solid var(--lab-negative);
    font-size: var(--lab-fs-label);
    line-height: 1.4;
    letter-spacing: .04em;
    color: var(--lab-bg-2);
  }
}