#header-container, #header-container *{
    }
    #header-container{
        position: fixed;
        top: 0;
        z-index: 10;
        background-color: white;
        font-family: Lato,sans-serif,'helvetica neue',helvetica,arial,verdana;
        transition-duration: 0.3s;
        width:100%;
    }
    #header-container.lh-nav-bg-transform{
        background-color: transparent;
        transition-duration: 0.3s;
    }
    .lh-nav-bg-transform .header .site-name-text{
        color:white;
    }
    .lh-nav-bg-transform .navi-in a{
        color:white;
    }
    #header{
        display:flex;
        background-color: transparent;
    }
    .header .site-name-text{
        color: #333;
        text-transform: uppercase;
        line-height: 18px;
        display: block;
    }
    .site-name-text-link{
        display: block;
        padding:0;
    }
    #header-in{
        margin:0;
        width:auto;
        flex-grow: 1;
        align-items: center;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #navi-in{
        width:auto;
    }
    .navi-in > ul li{
        width: auto;
    }
    .navi-in > ul{
        gap: 50px;
    }
    .logo-text{
        padding: 0;
    }
    #header-img{
        background-image: url(/public/uploads/2023/03/eyecatch3.png?5);
        background-size: cover;
        background-position: center;
    }
    #header-img img{
        width:100%;
    }
    .navi{
        box-shadow:none;
        background-color: transparent;
    }
    .navi a:hover {
        background-color: inherit;
    }
    .navi-in a:hover{
        background-color: inherit;
    }

    @media screen and (max-width: 1023px) {

        #navi-in > ul{
            display: block;
            position: fixed;
            top: 0;
            left: -100%;
            width: calc(100% - 70px);
            height: 100%;
            background-color: #044b2a;
            transition-duration: 0.3s;
        }
        .navi-in a{
            color: #FFF;
        }

        .logo{
            flex-grow: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
        }
        #header-in{
            padding: 10px 16px;
        }

        .site-name-text-link{
            padding: 0;
        }

        .hamburger_wrap{
            display: flex;
            align-content: end;
        }
        .hamburger {

            width: 37px;
            height: 22px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: transparent;
            border: 0;
        }

        .hamburger_bar {
            display: block;
            width: 100%;
            height: 4px;
            background: #000;
        }
        .lh-nav-bg-transform .hamburger_bar {
            background: #FFF;
        }
        #navi-in > ul.sp_menu_show{
            left:0;
        }

    }
    @media screen and (min-width: 1024px) {
        .hamburger_wrap{
            display:none;
        }
    }