/*==================================================
 サイトヘッダー
 site-header.css
==================================================*/

#site-header{

    transition:none !important;

}

#site-header-container.container{

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    gap:20px;

    padding-top:16px;
    padding-bottom:16px;

    overflow:visible;

    transition:none !important;

}

/*==================================
ロゴ（左）
==================================*/

.site-header-logo{

    grid-column:1;
    justify-self:start;
    align-self:center;

    margin:0;
    padding:0;
    line-height:0;

    display:flex;
    align-items:center;

    transition:none !important;

}

.site-header-logo img{

    display:block;

    max-height:44px;
    width:auto;
    height:auto;

    transition:none !important;

}

.site-header-logo a{

    display:flex;
    align-items:center;

    line-height:0;

}

/*==================================
ナビ（中央）
==================================*/

#global-nav{

    grid-column:2;
    justify-self:center;

}

/*==================================
Contactボタン（右）
==================================*/

.site-header-contact{

    grid-column:3;
    justify-self:end;

    display:flex;
    align-items:center;
    gap:12px;

}

.site-header-contact-lead{

    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    color:#5F8E37;

}

.site-header-contact-lead-text{

    display:inline-block;
    text-align:center;
    line-height:1.5;

}

.site-header-contact-lead-arrow{

    font-size:15px;

}

.site-header-contact-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    height:44px;
    padding:0 24px;

    background:transparent;
    border:1px solid #8CC63F;
    border-radius:30px;

    font-size:14px;
    font-weight:500;
    color:#5F8E37;

    text-decoration:none;
    white-space:nowrap;

    transition:.2s;

}

.site-header-contact-button svg{

    flex-shrink:0;

}

.site-header-contact-button:hover{

    background:#8CC63F;
    color:#fff;

}

/*==================================
スクロール固定時もロゴを表示する
==================================*/

body.scrolled .site-header-logo,
body.header_scrolled .site-header-logo{

    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;

}

body.scrolled #site-header-container.container,
body.header_scrolled #site-header-container.container{

    grid-template-columns:1fr auto 1fr !important;

}

/*==================================
タブレット・スマホ
==================================*/

/*==================================
タブレット（768px〜1100px）
==================================*/

@media (max-width:1100px) and (min-width:768px){

    .site-header-logo img{

        max-height:36px;

    }

}

/*==================================
スマホ（767px以下）
==================================*/

@media (max-width:767px){

    /* テーマ標準のハンバーガーメニュー挙動に干渉しないよう調整しつつ、ロゴとContactは横並びにする */
    #site-header-container.container{

        display:flex !important;
        justify-content:space-between;
        align-items:center;

    }

    .site-header-logo img{

        max-height:28px;

    }

    /* お問い合わせ導線は残しつつ、アイコンのみの小さいボタンにする */
    .site-header-contact{

        display:flex;

    }

    .site-header-contact-lead{

        display:none;

    }

    .site-header-contact-button{

        width:36px;
        height:36px;
        padding:0;
        border-radius:50%;

    }

    .site-header-contact-button span{

        display:none;

    }

}