header {
    height: 10vw;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    /* 画面の一番上に固定 */
    left: 0;
    width: 100%;
    /* 横幅を画面いっぱいに */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 影で浮かせると見やすい */
    z-index: 1000;
}

.header-contact {
    display: flex;
    justify-content: space-between;
    height: 40%;
}

.header-sns>a {
    margin-left: 1.6vw;

}

.header-sns>a>img {
    width: 2vw;
    height: 2vw;
    margin: 2vw 0;
}

.header-contact>.mail-link {
    margin: 1vw 3vw auto auto;
    font-size: 1.2vw;
    font-weight: 600;
}

.nav-wrapper {
    display: none;
}

.header-contents {
    text-align: center;
    height: 3vw;
    position: relative;
    margin-top: 0;
    padding-top: 1.5%;
}

.header-contents>a {
    margin: auto 0.9vw;
    font-size: 1.3vw;
    font-weight: 600;
}
.close-menu-icon {
    display: none;
}
.top-link>img {
    width: 25%;
    height: auto;
    display: block;
    margin: -1.5vw auto auto auto;
}

@media (max-width: 768px) {
    header {
        height: 20vw;
    }

    .header-contents {
        display: none;
    }

    .top-link>img {
        width: 50%;
        height: auto;
        display: block;
        margin: -1.5vw auto auto auto;
    }

    .header-contact {
        display: block;
        justify-content: center;
    }

    .header-sns>a>img {
        width: 7vw;
        height: 7vw;
        margin-top: 6.4vw;
    }

    .header-contact>.mail-link {
        display: none;
    }

    .header-sns {
        margin-left: 1vw
    }

    .nav-wrapper {
        display: block;
    }
    .hamburger-menu-icon {
        width: 7vw;
        height: 6vw;
        position: absolute;
        top: 7.5vw;
        right: 4%;
    }
     .header-contents {
        display: flex;
        flex-direction: column;
        align-items: start;

        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;

        background-color: #fff;
        padding-top: 20vw;

        transition: right 0.6s ease;
        z-index: 2000;
    }

    .header-contents.is-open {
        right: 0;
    }

    .header-contents a {
        margin: 2vw auto 1vw 10vw;
        font-size: 6vw;
    }

    .close-menu-icon {
        display: block;
        position: absolute;
        top: 8vw;
        right: 6vw;
        width: 6vw;
        height: 6vw;
        cursor: pointer;
    }
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1500;
}

.nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
    transition-delay: 0.3s;
}

/* visible state */
.fade-in.is-visible {
    opacity: 1;
}