/* =================================
   CBA by O.SHIMURA
   Main Header
   Version 1.2 / Header Part 1
================================= */


/* ------------------------------
   Header
------------------------------ */

.site-header {

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid rgba(15, 76, 129, 0.15);

}


/* ------------------------------
   Header Inner
------------------------------ */

.header-inner {

    width: min(1200px, 92%);

    margin: 0 auto;

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


/* ------------------------------
   Brand
------------------------------ */

.header-brand {

    display: flex;

    align-items: baseline;

    gap: 18px;

    color: #0f4c81;

    text-decoration: none;

    white-space: nowrap;

}


/* ------------------------------
   CBA
------------------------------ */

.header-brand-cba {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2.25rem;

    font-weight: 500;

    letter-spacing: 0.08em;

}


/* ------------------------------
   by O.SHIMURA
------------------------------ */

.header-brand-name {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.72rem;

    letter-spacing: 0.16em;

    color: #4f87bd;

}


/* ------------------------------
   Navigation
------------------------------ */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 32px;

}


/* ------------------------------
   Navigation Links
------------------------------ */

.main-navigation a {

    position: relative;

    padding: 8px 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.72rem;

    font-weight: 500;

    letter-spacing: 0.14em;

    color: #08213d;

    text-decoration: none;

    transition:
        color 0.3s ease;

}


/* ------------------------------
   Navigation Hover
------------------------------ */

.main-navigation a:hover {

    color: #0f4c81;

}


/* ------------------------------
   Navigation Underline
------------------------------ */

.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background: #4f87bd;

    transition:
        width 0.3s ease;

}


.main-navigation a:hover::after {

    width: 100%;

}


/* ------------------------------
   Tablet / Small Screen
------------------------------ */

@media (max-width: 850px) {

    .header-inner {

        min-height: 82px;

        flex-direction: column;

        justify-content: center;

        gap: 12px;

    }


    .main-navigation {

        gap: 20px;

        flex-wrap: wrap;

        justify-content: center;

    }

}


/* ------------------------------
   Smartphone
------------------------------ */

@media (max-width: 560px) {

    .header-brand {

        gap: 10px;

    }


    .header-brand-cba {

        font-size: 1.8rem;

    }


    .header-brand-name {

        font-size: 0.62rem;

    }


    .main-navigation {

        gap: 14px;

    }


    .main-navigation a {

        font-size: 0.62rem;

        letter-spacing: 0.08em;

    }

}