/* ========================================
   ヘッダー専用CSS

   通常画面では現在の大きさを維持し，
   ズームや画面幅の縮小時には，
   ロゴ，余白，ボタンが自動的に縮小する．
======================================== */


/* ========================================
   ヘッダーの変更用設定

   通常表示時の最大値は，
   現在の設定を基準としている．
======================================== */

:root {
    /* ========================================
       ヘッダー本体
    ======================================== */

    /*
       ヘッダーバーの高さ

       最小72px，
       最大90px．
    */
    --header-height:
        clamp(
            72px,
            5.2vw,
            90px
        );

    /*
       ヘッダーの左右に残す空間

       全ページ共通余白より少し小さくし，
       元の24pxを最大値としている．
    */
    --header-side-space:
        clamp(
            16px,
            1.25vw,
            24px
        );

    /*
       画面上端からヘッダーまでの距離
    */
    --header-top-space:
        clamp(
            10px,
            0.75vw,
            14px
        );

    /*
       ヘッダー内部の左右余白

       元の38pxを最大値としている．
    */
    --header-inner-space:
        clamp(
            20px,
            2vw,
            38px
        );

    /*
       ロゴとナビゲーションの間隔
    */
    --header-main-gap:
        clamp(
            18px,
            2.1vw,
            40px
        );

    /*
       ヘッダーの角丸

       ヘッダー高さに合わせて縮小する．
    */
    --header-radius:
        clamp(
            36px,
            2.7vw,
            50px
        );


    /* ========================================
       ロゴ
    ======================================== */

    /*
       ロゴ画像の高さ

       元の50pxを最大値とする．
    */
    --logo-height:
        clamp(
            34px,
            2.7vw,
            50px
        );

    /*
       ロゴの最大横幅

       元の380pxを最大値とする．
    */
    --logo-max-width:
        clamp(
            220px,
            20vw,
            380px
        );

    /*
       ロゴリンク領域の高さ
    */
    --logo-area-height:
        clamp(
            60px,
            4.4vw,
            80px
        );


    /* ========================================
       通常リンク
    ======================================== */

    /*
       「このサイトについて」の文字サイズ
    */
    --header-link-font-size:
        clamp(
            13px,
            0.84vw,
            16px
        );

    /*
       通常リンクの太さ
    */
    --header-link-font-weight: 700;

    /*
       通常リンク右側の余白
    */
    --header-link-margin-right:
        clamp(
            0px,
            0.5vw,
            10px
        );


    /* ========================================
       ヘッダーボタン
    ======================================== */

    /*
       ボタンの横幅

       元の200pxを最大値とする．
    */
    --header-button-width:
        clamp(
            142px,
            10.4vw,
            200px
        );

    /*
       ボタンの高さ

       元の50pxを最大値とする．
    */
    --header-button-height:
        clamp(
            42px,
            2.6vw,
            50px
        );

    /*
       ボタン内部の左右余白
    */
    --header-button-side-padding:
        clamp(
            16px,
            1.15vw,
            22px
        );

    /*
       ボタン内の文字と矢印の間隔
    */
    --header-button-gap:
        clamp(
            12px,
            1.15vw,
            22px
        );

    /*
       ボタン内の文字サイズ

       10ptは約13.3pxである．
    */
    --header-button-font-size:
        clamp(
            12px,
            0.7vw,
            13.3px
        );

    /*
       ボタンの枠線
    */
    --header-button-border-width: 1.5px;

    /*
       矢印の文字サイズ
    */
    --header-arrow-font-size:
        clamp(
            14px,
            0.84vw,
            16px
        );

    /*
       ナビゲーション内の間隔
    */
    --header-nav-gap:
        clamp(
            8px,
            0.84vw,
            16px
        );
}


/* ========================================
   ヘッダー本体
======================================== */

.site-header {
    /*
       スクロールしても上部に残す．
    */
    position: fixed;

    top: var(--header-top-space);
    left: 50%;

    z-index: 1000;

    /*
       画面中央へ配置する．
    */
    transform: translateX(-50%);

    /* 本文より少しだけ広い、ヘッダー専用の共通幅 */
    width: var(--header-content-outer-width);

    /*
       以前の2140px制限は，
       一般的なPC画面では事実上効かないため，
       固定最大幅を使用しない．
    */
    max-width: none;

    height: var(--header-height);

    padding:
        0
        var(--header-inner-space);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--header-main-gap);

    background-color:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        1px
        solid
        rgba(
            28,
            38,
            52,
            0.06
        );

    border-radius: var(--header-radius);

    box-shadow:
        0
        10px
        34px
        rgba(
            28,
            38,
            52,
            0.09
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ========================================
   ロゴ
======================================== */

.logo-area {
    /*
       必要以上には縮ませないが，
       以前の固定380pxにはしない．
    */
    flex:
        0
        1
        var(--logo-max-width);

    display: flex;

    align-items: center;

    width: var(--logo-max-width);
    max-width: var(--logo-max-width);
    height: var(--logo-area-height);

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.lab-logo {
    display: block;

    width: 100%;
    height: var(--logo-height);

    max-width: var(--logo-max-width);
    max-height: var(--logo-height);

    object-fit: contain;

    /*
       ロゴをリンク領域の左側へ配置する．
    */
    object-position: left center;
}


/* ========================================
   ヘッダー右側
======================================== */

.header-nav {
    /*
       固定590pxを廃止し，
       中身に必要な幅で表示する．
    */
    flex:
        0
        1
        auto;

    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: var(--header-nav-gap);
}


/* ========================================
   通常テキストリンク
======================================== */

.header-link {
    flex-shrink: 0;

    margin-right: var(--header-link-margin-right);

    color: var(--text-color);

    font-size: var(--header-link-font-size);
    font-weight: var(--header-link-font-weight);
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        opacity
        0.2s
        ease;
}


.header-link:hover {
    opacity: 0.55;
}


/* ========================================
   ヘッダー内の丸いボタン
======================================== */

.header-button {
    /*
       通常画面では最大200px，
       狭い画面では自動的に縮む．
    */
    width: var(--header-button-width);
    min-width: 0;
    height: var(--header-button-height);

    padding:
        0
        var(--header-button-side-padding);

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--header-button-gap);

    border:
        var(--header-button-border-width)
        solid
        var(--text-color);

    border-radius: 999px;

    font-size: var(--header-button-font-size);
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.header-button:hover {
    transform: translateY(-2px);
}


/* ========================================
   白いボタン
======================================== */

.secondary-button {
    background-color: #ffffff;

    color: var(--text-color);
}


.secondary-button:hover {
    background-color: #f5f6f7;
}


/* ========================================
   濃紺ボタン
======================================== */

.primary-button {
    background-color: var(--text-color);

    color: #ffffff;
}


.primary-button:hover {
    background-color: #354155;

    border-color: #354155;
}


/* ========================================
   ボタン内の矢印
======================================== */

.button-arrow {
    flex-shrink: 0;

    font-size: var(--header-arrow-font-size);
    font-weight: 400;
    line-height: 1;

    transition:
        transform
        0.2s
        ease;
}


.header-button:hover .button-arrow {
    transform: translateX(3px);
}


/* ========================================
   キーボード操作時
======================================== */

.logo-area:focus-visible,
.header-link:focus-visible,
.header-button:focus-visible {
    outline:
        3px
        solid
        rgba(
            61,
            169,
            252,
            0.55
        );

    outline-offset: 4px;
}


/* ========================================
   PCズーム・狭い画面時の調整

   CSS上の画面幅が1250px未満になった場合，
   通常テキストリンクを非表示にして，
   2つの主要ボタンを優先する．
======================================== */

@media (max-width: 1250px) {
    .header-link {
        display: none;
    }

    .site-header {
        --header-main-gap: 16px;
    }
}


/* ========================================
   さらに狭いPC表示時

   スマートフォン用ではなく，
   高倍率ズーム時の破綻防止である．
======================================== */

@media (max-width: 900px) {
    .secondary-button {
        display: none;
    }

    .header-nav {
        flex-shrink: 0;
    }

    .primary-button {
        width:
            clamp(
                140px,
                24vw,
                180px
            );
    }
}