/* ==========================================================
   MW Child Framework
   Header CSS v1.1
   ----------------------------------------------------------
   Kadence Child Theme 共通ヘッダー
   Author : Mistral Works
========================================================== */


/* ==========================================================
   Header Variables
========================================================== */

:root{

    --mw-header-height:82px;

    --mw-header-bg:rgba(255,255,255,.86);

    --mw-header-border:#E7ECF2;

    --mw-header-shadow:
        0 12px 32px rgba(0,0,0,.08);

    --mw-header-text:#1B2733;

    --mw-header-primary:#0D9CE8;

    --mw-header-accent:#45C7F5;

    --mw-header-speed:.28s ease;

}


/* ==========================================================
   Header
========================================================== */

#masthead{

    position:fixed !important;

    top:0;

    right:0;

    left:0;

    width:100%;

    z-index:1000 !important;

    background:var(--mw-header-bg);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--mw-header-border);

    box-shadow:var(--mw-header-shadow);

}

body{

    padding-top:var(--mw-header-height);

}

body.admin-bar #masthead{

    top:32px;

}


/* ==========================================================
   Header Container
========================================================== */

#masthead .site-container{

    max-width:1280px;

    margin:0 auto;

    padding:0 36px;

}

.site-main-header-inner-wrap{

    min-height:var(--mw-header-height);

    display:flex;

    align-items:center;

}


/* ==========================================================
   Logo
========================================================== */

.site-branding{

    display:flex;

    align-items:center;

}

.site-branding img{

    display:block;

    width:auto;

    max-height:48px;

    transition:
        transform var(--mw-header-speed),
        opacity var(--mw-header-speed);

}

.site-branding:hover img{

    opacity:.92;

    transform:translateY(-1px);

}


/* ==========================================================
   Navigation
========================================================== */

#site-navigation{

    font-weight:500;

}

#site-navigation .menu{

    display:flex;

    align-items:center;

    gap:34px;

}

#site-navigation .menu>li{

    list-style:none;

}

#site-navigation .menu>li>a{

    position:relative;

    display:block;

    padding:12px 0;

    color:var(--mw-header-text);

    font-size:15px;

    font-weight:500;

    letter-spacing:.02em;

    text-decoration:none;

    transition:
        color var(--mw-header-speed);

}


/* ==========================================================
   Hover
========================================================== */

#site-navigation .menu>li>a:hover{

    color:var(--mw-header-primary);

}


/* ==========================================================
   Underline Animation
========================================================== */

#site-navigation .menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    border-radius:2px;

    background:
        linear-gradient(
            90deg,
            var(--mw-header-primary),
            var(--mw-header-accent)
        );

    transition:
        width var(--mw-header-speed);

}

#site-navigation .menu>li>a:hover::after{

    width:100%;

}


/* ==========================================================
   Current Page
========================================================== */

.current-menu-item>a,
.current_page_item>a{

    color:var(--mw-header-primary);

}

.current-menu-item>a::after,
.current_page_item>a::after{

    width:100%;

}


/* ==========================================================
   Accessibility
========================================================== */

#site-navigation a:focus-visible{

    outline:2px solid var(--mw-header-primary);

    outline-offset:4px;

    border-radius:4px;

}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:1024px){

    #masthead .site-container{

        padding:0 24px;

    }

    #site-navigation .menu{

        gap:24px;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    body{

        padding-top:72px;

    }

    body.admin-bar #masthead{

        top:46px;

    }

    .site-main-header-inner-wrap{

        min-height:72px;

    }

    .site-branding img{

        max-height:40px;

    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    .site-branding img,
    #site-navigation .menu>li>a,
    #site-navigation .menu>li>a::after{

        transition:none;

    }

}