@charset 'utf-8';

/* =============================================================
   l-footer
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.l-footer {
    background-color: var(--color-hamabo-blue);
    font-family: var(--font-noto);
    line-height: 1;
}

.l-footer__inner {
    max-width: 1920px;
    margin-inline: auto;
    /* 左右は他セクションと同じ比率で詰める（1440px 時 120 / 40） */
    padding: calc(93 * var(--u)) max(24px, calc(var(--gut) / 3)) calc(29 * var(--u)) var(--gut);
}

/* 右端はコピーライトのみ 40px、他は 120px 相当まで */
.l-footer__body,
.l-footer__lead {
    padding-right: max(24px, calc(var(--gut) * 2 / 3));
}

/* -------------------------------------------------------------
   body ( brand / nav )
   ------------------------------------------------------------- */
.l-footer__body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: calc(40 * var(--u));
    row-gap: calc(60 * var(--u));
}

.l-footer__brand {
    flex-shrink: 0;
    margin-top: calc(11 * var(--u));
}

.l-footer__logo {
    display: block;
    width: calc(342 * var(--u));
}

.l-footer__address {
    margin-top: calc(54 * var(--u));
    color: var(--color-light-blue);
    font-size: calc(13 * var(--u));
    font-style: normal;
    font-weight: 400;
    line-height: 1.84;
    letter-spacing: 0.077em;
}

.l-footer__tel {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------
   nav
   ------------------------------------------------------------- */
.l-footer__nav {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: calc(176 * var(--u)) calc(112 * var(--u)) calc(172 * var(--u));
    column-gap: calc(88 * var(--u));
}

/* プライバシーポリシーを列の下端へ送るため（下の margin-top: auto 参照） */
.l-footer__navCol {
    display: flex;
    flex-direction: column;
}

.l-footer__navBlock + .l-footer__navBlock {
    margin-top: calc(35 * var(--u));
}

.l-footer__navHead {
    display: block;
    white-space: nowrap;
}

.l-footer__navEn {
    display: block;
    margin-right: -0.1em;
    color: var(--color-medium-blue);
    font-family: var(--font-mon);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
}

.l-footer__navJa {
    display: block;
    margin-top: calc(9 * var(--u));
    color: var(--color-light-silver);
    font-size: calc(18 * var(--u));
    font-weight: 500;
    line-height: 1;
}

.l-footer__navSub {
    margin-top: calc(25 * var(--u));
}

.l-footer__navSubItem + .l-footer__navSubItem {
    margin-top: calc(11 * var(--u));
}

.l-footer__navSubLink {
    display: block;
    color: var(--color-light-blue);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    line-height: 1.28;
    white-space: nowrap;
}

/* いちばん背の高い列（COMPANY）の下端＝「関連会社」と高さを揃える。
   行の高さいっぱいまで押し下げ、行送りもサブリンクと同じにする */
.l-footer__privacy {
    display: block;
    margin-top: auto;
    color: var(--color-light-blue);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    line-height: 1.28;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   lead
   ------------------------------------------------------------- */
.l-footer__lead {
    margin-top: calc(89.5 * var(--u));
}

/* 「いまと未来に、橋をかける。」は画像（Figma 書き出し 4x → 3208 / 4 = 802） */
.l-footer__leadJa {
    width: min(calc(802 * var(--u)), 100%);
}

.l-footer__leadJa img {
    display: block;
    width: 100%;
    height: auto;
}

.l-footer__leadEn {
    width: min(calc(394 * var(--u)), 100%);
    margin-top: calc(39 * var(--u));
}

/* 英語版：和文の画像は無く、英字 1 行（Figma 書き出し 821 x 67）だけ */
.l-footer__leadEn--main {
    width: min(calc(821 * var(--u)), 100%);
    margin-top: 0;
}

/* -------------------------------------------------------------
   copyright
   ------------------------------------------------------------- */
.l-footer__copyright {
    margin-top: calc(44 * var(--u));
    color: var(--color-light-blue);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: right;
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    .l-footer__inner {
        padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(21 * var(--u));
    }

    .l-footer__body,
    .l-footer__lead {
        padding-right: 0;
    }

    .l-footer__body {
        display: block;
    }

    .l-footer__brand {
        margin-top: 0;
    }

    .l-footer__logo {
        width: calc(303.5 * var(--u));
    }

    .l-footer__address {
        margin-top: calc(20 * var(--u));
        font-size: calc(13 * var(--u));
        line-height: 1.84;
    }

    /* --- nav --- */
    /* 列幅を固定 px にすると --u が 1.2px で頭打ちになるため、
       450px 以上で列の合計幅が伸びず右側が大きく空く。
       コンテナ幅いっぱいに 3 等分する。
       1fr ではなく minmax(0, 1fr) にしているのは、サブリンクが
       white-space: nowrap のため 1fr だと最小幅がその文字幅に
       引っ張られ、列幅が不揃いになるのを防ぐため。 */
    .l-footer__nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0;
        margin-top: calc(44 * var(--u));
        row-gap: calc(28 * var(--u));
    }

    .l-footer__navCol--a {
        grid-column: 1;
        grid-row: 1;
    }

    .l-footer__navCol--b {
        grid-column: 3;
        grid-row: 1;
    }

    .l-footer__navCol--c {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        /* 上の 3 列と同じ割り付けにして PEOPLE / RECRUIT / CONTACT を揃える */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .l-footer__navBlock--people {
        grid-column: 1;
        grid-row: 1;
    }

    .l-footer__navBlock--recruit {
        grid-column: 2;
        grid-row: 1;
    }

    .l-footer__navBlock--contact {
        grid-column: 3;
        grid-row: 1;
    }

    .l-footer__navBlock + .l-footer__navBlock {
        margin-top: calc(24 * var(--u));
    }

    .l-footer__navCol--c .l-footer__navBlock + .l-footer__navBlock {
        margin-top: 0;
    }

    .l-footer__navEn {
        font-size: calc(12 * var(--u));
    }

    .l-footer__navJa {
        margin-top: calc(6 * var(--u));
        font-size: calc(15 * var(--u));
    }

    .l-footer__navSub {
        margin-top: calc(19 * var(--u));
    }

    .l-footer__navSubItem + .l-footer__navSubItem {
        margin-top: calc(9.6 * var(--u));
    }

    .l-footer__navSubLink {
        font-size: calc(13 * var(--u));
        line-height: 1.72;
    }

    .l-footer__privacy {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: calc(25 * var(--u));
        font-size: calc(13 * var(--u));
        line-height: 1.72;
    }

    /* --- lead --- */
    .l-footer__lead {
        margin-top: calc(55 * var(--u));
    }

    /* SP は 2 行版の画像（1083 / 4 = 271） */
    .l-footer__leadJa {
        width: calc(271 * var(--u));
    }

    .l-footer__leadEn {
        width: calc(250 * var(--u));
        margin-top: calc(32 * var(--u));
    }

    .l-footer__leadEn--main {
        width: 100%;
        margin-top: 0;
    }

    /* --- copyright --- */
    .l-footer__copyright {
        margin-top: calc(52 * var(--u));
        font-size: calc(13 * var(--u));
    }
}

/* =============================================================
   英語版：ナビ見出しは英字 1 行（Figma「英語版」フッター：Montserrat 600 / 15px / 大文字）
   日本語版の英字キャプションは同じ語の重複になるので出さない
   ============================================================= */
html[lang^="en"] .l-footer__navEn {
    display: none;
}

html[lang^="en"] .l-footer__navJa {
    margin-top: 0;
    font-family: var(--font-mon);
    font-size: calc(15 * var(--u));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}