@import url(https://db.onlinewebfonts.com/c/32221d15ba89369a53aad4939b3b4d54?family=LiHei+Pro);

@font-face {
    font-family: "LiHei Pro";
    src: url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.eot");
    src: url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/32221d15ba89369a53aad4939b3b4d54.svg#LiHei Pro")format("svg");
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

._tab {
    display: none;
}

@media (max-width: 1025px) {
    ._tab {
        display: block;
    }
}

header {
    position: absolute;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: transparent;
    font-family: biz-udgothic, system-ui, sans-serif;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.header-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2%;
}

.header-logo {
    display: flex;
    align-items: center;
    font-size: 2.6rem;
    font-family: "LiHei Pro", system-ui, sans-serif;

    gap: 15px;
}

.header-logo a {
    width: fit-content;
}

.header-logo a img {
    display: block;
    width: auto;
    height: 40px;
}

.header-nav.gnav._pc {
    display: flex;
    align-items: center;

    gap: 10px;
}

.header-nav-item {
    position: relative;
    padding: 10px;
    color: #333333;
    font-weight: 500;
    font-size: 2.1rem;
    border: 2px solid transparent;
    border-radius: 25px;
    box-sizing: border-box;
    transition: all .3s ease;
}

.header-btn {
    padding: 10px 25px;
    border-radius: 30px;
    background-color: #21a3dc;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    transition: background-color .3s ease,color .3s ease,box-shadow .3s ease;
}

.hamburger {
    display: none;
}

/* Desktop Hover */
@media (min-width: 1026px) {
    .header-nav-item:hover {
        border: 2px solid #21a4dc;
        border-radius: 25px;
    }

    /* アクティブなページでもホバー時に同じスタイルを適用 */
    .header-nav .service .header-nav-item:hover,
    .header-nav .company .header-nav-item:hover,
    .header-nav .contact .header-nav-item:hover,
    .header-nav .news .header-nav-item:hover {
        border: 2px solid #21a4dc;
        border-radius: 25px;
    }

    .gnav-a-last .header-nav-item::after {
        display: none;
    }

    .header-btn:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        background-color: #bfe3f2;
        color: #222222;
    }
}

/* ==================================================
   Tablet (768〜1025px)
================================================== */
@media (max-width:1025px) and (min-width:768px) {
    .nav-overlay {
        display: none !important;
    }

    /* Header */
    .header-logo {
        font-size: 2.2rem;
    }

    .header-nav {
        margin-left: auto;

        gap: 18px;
    }

    .header-nav-item {
        padding: 10px 12px;
        font-size: 1.9rem;
        box-sizing: border-box;
    }

    .header-btn {
        padding: 8px 22px;
        font-size: 1.8rem;
        box-sizing: border-box;
    }

    .hamburger {
        display: none;
    }

    .header-nav.gnav._pc {
        flex-direction: row;
        opacity: 1;
        position: static;
        transform: none;
        width: auto;
        height: auto;
        padding: 0;
        box-shadow: none;
        background: none;

        pointer-events: auto;
    }

    .header-nav.gnav._pc li {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==================================================
   Mobile (〜767px)
================================================== */
@media (max-width:767px) {
    /* Header */
    .header-menu {
        padding: 10px 15px;
    }
    .header-logo {
        font-size: 1.8rem;

        gap: 10px;
    }
    .header-logo a img {
        height: 28px;
    }

    /* Hamburger */
    .hamburger {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 2000;
        width: 32px;
        height: 24px;
        cursor: pointer;
    }

    .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background: #333333;
        transition: .3s;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 10px;
    }

    .hamburger span:nth-child(3) {
        top: 20px;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* SP Navigation */
    .header-nav.gnav._pc {
        display: flex;
        flex-direction: column;
        opacity: 0;
        position: fixed;
        top: 0;
        right: -80%;
        z-index: 1050;
        width: 70%;
        height: 100vh;
        padding: 80px 30px;
        box-shadow: -4px 0 18px rgba(0,0,0,.1);
        background: #ffffff;
        transition: right .45s cubic-bezier(.22,1,.36,1),opacity .3s ease;

        gap: 24px;
        pointer-events: none;
    }

    .header-nav.gnav._pc.active {
        opacity: 1;
        right: 0;

        pointer-events: auto;
    }

    .header-nav.gnav._pc li {
        opacity: 0;
        transform: translateX(20px);
    }

    .header-nav.gnav._pc.active li {
        animation: navItemFade .45s ease forwards;
    }

    .header-nav.gnav._pc.active li:nth-child(1) {
        animation-delay: .05s;
    }

    .header-nav.gnav._pc.active li:nth-child(2) {
        animation-delay: .1s;
    }

    .header-nav.gnav._pc.active li:nth-child(3) {
        animation-delay: .15s;
    }

    .header-nav.gnav._pc.active li:nth-child(4) {
        animation-delay: .2s;
    }

    .header-nav.gnav._pc.active li:nth-child(5) {
        animation-delay: .25s;
    }
}

@keyframes navItemFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}