.c-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    padding: 0.6em 1em;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 700;
    /* 普段は画面の上に隠し、フォーカスされたときだけ見せる */
    transform: translateY(-100%);
}

.c-skip-link:focus {
    transform: translateY(0);
}

.c-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--color-white);
    height: var(--header-height);
}

.c-header__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* 管理画面で設定したロゴ（custom-logo）の上限。テーマのロゴマーク（.c-header__brand-icon）は下で高さを指定する */
.c-header__logo .custom-logo {
    max-height: 48px;
    width: auto;
}

.c-header__brand {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.c-header__brand-icon {
    height: 40px;
    width: auto;
}

.c-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

/* 原本どおり英文社名も黒の太字 */
.c-header__brand-en {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

.c-header__brand-ja {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    white-space: nowrap;
}

.c-header__menu {
    display: flex;
    gap: var(--space-md);
}

.c-header__menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    font-weight: 700;
    color: var(--color-text);
    padding: 0.5em 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base), color var(--transition-base);
}

/* ナビの英字は原本どおりセリフ体 */
.c-header__menu-en {
    font-family: var(--font-heading-en);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.c-header__menu-ja {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-light);
}

.c-header__menu a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.c-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.c-header__cta {
    display: none;
}

.c-header__hamburger {
    position: relative;
    width: 32px;
    height: 24px;
}

.c-header__hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
}

.c-header__hamburger span:nth-child(1) { top: 0; }
.c-header__hamburger span:nth-child(2) { top: 11px; }
.c-header__hamburger span:nth-child(3) { top: 22px; }

/*
 * ヘッダーの社名用の Medium（ヒラギノ角ゴシック W5）。ファミリー名の "Hiragino Sans" に
 * font-weight:500 を指定しても Chrome では W4 で描画される（実測）ため、W5 の書体名を local() で名指しする。
 * Safari は font-family に書体名を直接書くと一致しないことがあるので、@font-face を経由する。
 * Mac 以外は持っていないので、本文と同じ書体で表示される。
 */
@font-face {
    font-family: "Header Medium";
    src: local("HiraginoSans-W5"), local("Hiragino Sans W5");
    font-weight: 500;
}

/*
 * PC のヘッダーは Figma（幅1440px）の寸法を、幅1280pxの枠に収まるよう同じ比率（1280/1440）で縮める。
 * 本文は幅1140pxの枠で組んでいるので、1440px基準のままだとヘッダーだけ左右に広がり本文とずれるため
 * （依頼主の指示）。ロゴの左端は、本文（ホームの「Over The Challenge」）の左端にそろえる（下の padding-left）。
 * 各寸法は Figma の値に --hs（Figma での1px）を掛けて指定する。枠・縮尺・右余白を変えたら、theme-vars.css の
 * --header-height と --header-cta-overhang も直すこと。1280px より狭い画面では全体をさらに比率で縮め、
 * 高さ（--header-height、theme-vars.css）も同じ比率で低くなる。お問い合わせボタンだけは本文のボタンと同じ大きさで縮めない。
 * 縦位置は上下中央そろえ。
 */
@media (min-width: 900px) {
    /* 基準はヘッダー自身の幅（縦スクロールバーを含まない）。100vw だとスクロールバーが常に出る環境ではみ出す */
    .c-header {
        container-type: inline-size;
    }

    .c-header__inner {
        --hs: calc(min(1280px, 100cqw) / 1440);
        max-width: 1280px;
        /*
         * ロゴの左端＝本文の枠（.l-container）の文字の左端（依頼主の指示）。
         * 「コンテナの外側の余白＋コンテナの左右余白」から、この枠（1280px）の外側の余白を引いた値。1440px幅で96px。
         */
        padding-left: calc(max(0px, (100cqw - var(--container-width)) / 2) + var(--container-padding) - max(0px, (100cqw - 1280px) / 2));
        /* Figma ではメニューとボタンの塊の右端が1404px（右余白36px） */
        padding-right: calc(36 * var(--hs));
    }

    .c-header__brand {
        gap: calc(18 * var(--hs));
    }

    .c-header__brand-icon {
        height: calc(83 * var(--hs));
    }

    /*
     * 社名は Figma どおり Medium。Mac 標準の「ヒラギノ角ゴ ProN」は太さが2段階しかなく Medium が
     * 細字になるので、「ヒラギノ角ゴシック」の W5 を使う（下の @font-face。Mac 付属、読み込み不要）。
     */
    .c-header__brand-text {
        font-family: "Header Medium", var(--font-base);
    }

    .c-header__brand-text {
        gap: calc(8 * var(--hs));
        line-height: 1.5;
    }

    /* 社名は Figma の値（英字16px・日本語24px） */
    .c-header__brand-en {
        font-size: calc(16 * var(--hs));
        font-weight: 500;
        /* ヒラギノの英字は Figma の書体より幅が広いので、少し詰めて Figma の幅に近づける */
        letter-spacing: -0.03em;
    }

    .c-header__brand-ja {
        font-size: calc(24 * var(--hs));
        font-weight: 500;
    }

    /*
     * メニューとボタンの塊は右端に寄せる（Figma の書き出しでも塊の中で右に詰まっている）。
     * 項目どうし・ボタンとの間隔は Figma の45px。
     */
    .c-header__nav {
        margin-left: auto;
    }

    .c-header__menu {
        gap: calc(45 * var(--hs));
    }

    .c-header__menu a {
        gap: 0;
        padding: 0;
    }

    /* メニューは Figma の値（英字20px・日本語16px）。2行で塊の高さ59pxに収まる行の高さ */
    .c-header__menu-en {
        font-size: calc(20 * var(--hs));
        line-height: 1.7;
        letter-spacing: 0;
    }

    /* Figma では日本語も英字と同じ黒 */
    .c-header__menu-ja {
        font-size: calc(16 * var(--hs));
        line-height: 1.5;
        color: var(--color-text);
    }

    .c-header__actions {
        margin-left: calc(45 * var(--hs));
    }

    /*
     * お問い合わせボタンは本文のボタンと同じ（198×44・文字約14.5px、buttons.css の .c-btn）。
     * ヘッダーの他の部分と違い、狭い画面でも縮めない（依頼主の指示）。
     */
    .c-header__cta {
        display: inline-flex;
    }

    .c-header__hamburger {
        display: none;
    }
}

@media (max-width: 899px) {
    .c-header__nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        /* iPhone の Safari ではアドレスバーの分だけ下が隠れるので、見えている高さ（dvh）を優先する */
        height: calc(100dvh - var(--header-height));
        background-color: var(--color-white);
        overflow-y: auto;
    }

    .c-header__menu {
        flex-direction: column;
        gap: 0;
        padding: var(--space-md) var(--container-padding);
    }

    .c-header__menu a {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5em;
        /* 項目は1文字分字下げする */
        padding: var(--space-sm) 0 var(--space-sm) 1em;
        border-bottom: 1px solid var(--color-border);
    }
}