header{
    padding: clamp(12px,2vw,24px) clamp(10px,2vw,30px);
    & > .container{
        height: clamp(60px,8vw,80px);
        position: relative;
        padding: clamp(5px,1.5vw,15px) clamp(10px,2vw,30px);
        background-color: var(--base-white-color);
        border-radius: clamp(5px,1vw,10px);
        display: flex;
        gap: 1em;
        justify-content: space-between;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.05) 8px 8px 16px;
    }
    .logo-area{
        .logo{
            width: clamp(100px,20vw,200px);
            .logo-image{
                height: 100%;
            }
        }
    }
    .nav-area{
        display: flex;
        gap: clamp(5px,1vw,10px);
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        padding-right: calc(var( --container-padding-left-right) + clamp(40px,6vw,60px) );
        a{
            text-decoration: none;
            font-weight: 900;
            transition: 0.5s;
        }
        a:hover{
            color: var(--primary-color);
            transition: 0.5s;
        }
        ul{
            display: flex;
            gap: clamp(14px,2vw,26px);
            justify-content: flex-end;
            list-style: none;
            li{
                margin-bottom: 0;
            }
        }
        .gloval-nav-area{
            position: relative;
            .gloval-nav{
                .gloval-nav-lists{
                    display: flex;
                    gap: clamp(1em,4vw,2em);
                    justify-content: flex-end;
                    align-items: center;
                    font-size: clamp(14px,1.6vw,16px);
                }
            }
            .contact-list{
                padding: clamp(10px,2vw,20px) clamp(20px,3.5vw,35px);
                background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
                border-radius: 100px;
                a{
                    color: var(--base-white-color);
                }
            }
        }
        @media screen and (max-width: 863px) {
            /* 768pxまでの幅の場合に適応される */
            .gloval-nav-area{
                display: none;
            }
            }
    }
    @media screen and (max-width: 864px) {
        .nav-area{
            background-color: transparent;
            padding: 0;
        }
    }
}