/* ==========================================================================
   フッター
   ロゴ・会社情報・ナビ 3 列がカンプ幅 1280 ちょうどで収まるため、1 行の横並びは xl 以上。
   SP はカンプ未提供のため仮デザイン
   ========================================================================== */

.l-footer {
    color: var(--color-text-inverse);
    background-color: var(--color-bg-dark);
}

.l-footer__inner {
    padding: var(--space-7) var(--gutter);
}

.l-footer__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.l-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    flex-shrink: 0;
}

.l-footer__logo {
    display: block;
    color: inherit;
    text-decoration: none;
}

.l-footer__logo-img {
    width: auto;
    height: var(--footer-logo-h);
}

.l-footer__site-name {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.l-footer__mark-img {
    width: auto;
    height: var(--footer-mark-h);
}

.l-footer__company {
    font-style: normal;
}

.l-footer__company-name {
    margin: 0;
}

/* カンプでは会社名と住所の間が 1 行分空いている */
.l-footer__address {
    margin: calc(var(--text-body) * var(--leading-body)) 0 0;
}

.l-footer__tel {
    margin: var(--space-3) 0 0;
}

.l-footer__tel a {
    text-decoration: none;
}

/* SP はハンバーガーメニュー（.l-header__drawer-list）と同じ見せ方。
   ただし一覧性を優先し、子メニューは開閉させず常に表示する */
.l-footer__nav {
    border-top: var(--border-w) solid var(--color-border-inverse);
}

.l-footer__nav-list,
.l-footer__nav-list .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-footer__nav-list > .menu-item {
    border-bottom: var(--border-w) solid var(--color-border-inverse);
}

.l-footer__nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
}

.l-footer__nav-list > .menu-item > a {
    padding-block: var(--space-4);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
}

.l-footer__nav-list .sub-menu {
    padding-block: var(--space-2);
    border-top: var(--border-w) solid var(--color-border-inverse);
}

.l-footer__nav-list .sub-menu a {
    min-height: var(--hit-min);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
}

.l-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
    text-align: center;
}

.l-footer__sub-nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-footer__sub-nav-list .menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.l-footer__sub-nav-list .menu-item + .menu-item::before {
    content: "";
    width: var(--border-w);
    height: calc(1em * var(--leading-tight));
    background-color: currentColor;
}

.l-footer__sub-nav-list a {
    display: flex;
    align-items: center;
    min-height: var(--hit-min);
    white-space: nowrap;
    text-decoration: none;
}

.l-footer__sub-nav-list,
.l-footer__copyright {
    font-size: var(--text-ui);
    line-height: var(--leading-tight);
}

.l-footer__copyright {
    margin: 0;
}

@media (min-width: 768px) {
    .l-footer__nav-list,
    .l-footer__nav-list .sub-menu {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .l-footer__nav,
    .l-footer__nav-list > .menu-item,
    .l-footer__nav-list .sub-menu {
        border: 0;
    }

    .l-footer__nav-list a,
    .l-footer__nav-list > .menu-item > a,
    .l-footer__nav-list .sub-menu a {
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-2);
        min-height: 0;
        padding-block: 0;
        font-size: var(--text-ui);
        font-weight: var(--weight-regular);
        text-align: left;
    }

    .l-footer__nav-list > .menu-item > a::before {
        content: "";
        flex-shrink: 0;
        width: var(--dot-size);
        height: var(--dot-size);
        /* 折り返したときも点が 1 行目の中央に来るようにする */
        margin-top: calc((1em * var(--leading-tight) - var(--dot-size)) / 2);
        background-color: var(--color-footer-dot);
        border-radius: var(--radius-pill);
    }

    .l-footer__nav-list .sub-menu {
        margin-top: var(--space-3);
        padding-block: 0;
        padding-left: calc(var(--dot-size) + var(--space-2));
    }

    .l-footer__inner {
        padding-inline: var(--space-5);
    }

    .l-footer__main {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-6) var(--space-7);
    }

    .l-footer__bottom {
        align-items: flex-start;
        margin-top: var(--space-8);
        text-align: left;
    }

    .l-footer__sub-nav-list a {
        min-height: 0;
    }

    .l-footer__nav {
        display: flex;
        flex-basis: 100%;
        gap: var(--space-7);
    }
}

@media (min-width: 1280px) {
    .l-footer__inner {
        max-width: calc(var(--container-wide) + var(--space-7) * 2);
        margin-inline: auto;
        padding: var(--space-8) var(--space-7) var(--space-5);
    }

    .l-footer__main {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .l-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .l-footer__nav {
        flex-basis: auto;
    }
}