/*
============================================
HEADER.CSS
法人全般 ＋ 喪主代行特設
全ページ共通ヘッダー
============================================
*/


/* =========================================
   HEADER
========================================= */

.site-header{
    position:relative;
    z-index:1000;

    border-bottom:
        1px solid
        rgba(184,139,53,.30);

    background:#080806;
}


.header-inner{
    display:flex;

    min-height:82px;

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

    gap:24px;
}


/* =========================================
   BRAND
========================================= */

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:inherit;
    text-decoration:none;
}

.brand-tomyo{
    display:flex;
    flex:0 0 46px;
    width:46px;
    align-items:center;
    justify-content:center;
}

.brand-tomyo img{
    display:block;
    width:46px;
    height:auto;
}

.brand-text{
    display:block;
}


.brand small{
    display:block;

    color:#ddb96a;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:.72rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.08em;
}

/* 法人名 */
.brand strong{
    display:block;
    margin-top:4px;

    color:#f3eee3;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:1.02rem;
    font-weight:400;
    line-height:1.65;
    letter-spacing:.035em;
}


/* =========================================
   CONTACT
========================================= */

.header-contact{
    display:inline-flex;

    min-height:40px;

    padding:8px 15px;

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

    border:
        1px solid
        #b88b35;

    color:#ddb96a;

    background:transparent;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        sans-serif;

    font-size:.82rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.04em;

    text-decoration:none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.header-contact:hover,
.header-contact:focus-visible{
    color:#080806;

    border-color:#ddb96a;

    background:#ddb96a;
}


/* =========================================
   GLOBAL NAVIGATION
========================================= */

.global-nav{
    position:relative;
    z-index:900;

    border-bottom:
        1px solid
        rgba(184,139,53,.30);

    background:#0b0a08;
}


.global-nav__inner{
    display:flex;

    flex-direction:column;

    gap:0;

    overflow:visible;
}


/* =========================================
   NAV GROUP
========================================= */

.nav-group{
    display:flex;

    min-height:54px;

    flex-wrap:wrap;

    align-items:center;
}


.nav-group + .nav-group{
    border-top:
        1px solid
        rgba(184,139,53,.16);
}


.nav-group__label{
    flex:0 0 auto;

    min-width:108px;

    padding:
        0
        18px
        0
        0;

    color:#b88b35;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        sans-serif;

    font-size:.72rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.12em;

    white-space:nowrap;
}


.nav-group--mourner{
    position:relative;
}


.nav-group--mourner
.nav-group__label{
    color:#ddb96a;
}


/* =========================================
   NAV LINKS
========================================= */

.global-nav a{
    position:relative;

    display:flex;

    min-height:54px;

    padding:
        0
        14px;

    align-items:center;

    color:#cfc6b6;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:.84rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.035em;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .25s ease,
        background .25s ease;
}


.global-nav a:hover,
.global-nav a:focus-visible,
.global-nav a[aria-current="page"]{
    color:#ddb96a;
}


.global-nav a[aria-current="page"]::after{
    position:absolute;

    right:14px;
    bottom:0;
    left:14px;

    height:1px;

    content:"";

    background:#ddb96a;
}


/* =========================================
   HOVER
========================================= */

.global-nav a:hover,
.global-nav a:focus-visible{
    background:
        rgba(184,139,53,.035);
}


/* =========================================
   TABLET
========================================= */

@media(max-width:960px){

    .header-inner{
        min-height:78px;
    }


    .nav-group__label{
        min-width:104px;
    }


    .global-nav a{
        padding:
            0
            12px;

        font-size:.81rem;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

    .header-inner{
        min-height:72px;
        gap:14px;
    }

    .brand-tomyo{
        flex:0 0 38px;
        width:38px;
    }

    .brand-tomyo img{
        width:38px;
    }

    .brand small{
        font-size:.66rem;
    }

    .brand strong{
        max-width:220px;
        font-size:.88rem;
        line-height:1.55;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

    .header-inner{
        align-items:flex-start;

        padding:
            13px
            0;

        flex-direction:column;

        gap:9px;
    }


    .brand strong{
        max-width:none;
    }


    .header-contact{
        min-height:36px;

        padding:
            6px
            10px;
    }


    .nav-group{
        padding:
            7px
            0;
    }


    .nav-group__label{
        padding-left:10px;
    }


    .global-nav a{
        min-height:40px;

        padding:
            0
            10px;

        font-size:.76rem;
    }


    .global-nav
    a[aria-current="page"]::after{
        right:10px;
        left:10px;
    }

}