@charset "utf-8";

/*===================================
　共通ヘッダー
===================================*/

#header {
    width: 100%;
    height: 50px;
    background: var(--k_black);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/*===================================
　ヘッダー内レイアウト
===================================*/
.header-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    position: relative;
}

/* main の開始位置 */
main {
    padding-top: 50px;
}

/*===================================
　ナビゲーション全体
===================================*/
#g_navi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 40px); /* メニューとWeb予約間の距離 */
}

/*===================================
　ナビのメニュー部分
===================================*/
    #g_navi ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(2px, 1vw, 20px);
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;
    }

        #g_navi ul li a {
            display: flex;
            align-items: center;
            color: #fff;
            padding: 0 clamp(4px, 0.6vw, 14px);
            height: 50px;
            font-size: clamp(0.85rem, 0.9vw, 1rem);
            text-decoration: none;
            letter-spacing: clamp(0.02em, 0.2vw, 0.1em);
            white-space: nowrap;
            transition: background 0.3s, opacity 0.3s;
        }

            #g_navi ul li a:hover {
                background: rgba(255, 255, 255, 0.1);
            }

/*===================================
　Web予約ボタン（横並び用）
===================================*/
.reserve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 clamp(8px, 1vw, 20px);
    font-size: 0.9rem;
    color: #fff;
    background: rgba(243, 152, 0, 0.85);
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.3s ease;
}

    .reserve-btn:hover {
        background: rgba(243, 152, 0, 1);
    }

/*----------------------------------
 🖥️ PC表示：メニューのすぐ右にWeb予約を並べる
----------------------------------*/
@media screen and (min-width:701px) {

    /* ナビと予約ボタンを横並びに */
    #g_navi {
        display: flex;
        align-items: center;
        justify-content: center; /* メニュー中央寄せ */
        gap: clamp(8px, 1.5vw, 30px); /* ← メニューとボタンの間隔（可変） */
    }

    /* Web予約ボタンはナビ内部に自然に並ぶ */
    .reserve-btn {
        position: static; /* ← 絶対配置を解除（横並びに含める） */
        height: 32px;
        margin-left: clamp(8px, 1vw, 20px); /* メニューとの間隔を少しとる */
    }
}

/*===================================
　スマホ用ナビゲーション
===================================*/
@media screen and (max-width:700px) {

    /* --- PC用メニュー非表示 --- */
    #g_navi ul {
        display: none;
    }

    /* --- 全画面メニュー --- */
    #g_navi {
        position: fixed;
        inset: 0;
        background: rgba(64, 64, 64, 0.85);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        z-index: 999;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
    }

        #g_navi.panelactive {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
        }

            #g_navi.panelactive ul {
                display: block;
                width: 100%;
                padding: 0px 10px 40px 10px; /* ← 左右なしで線を端まで伸ばせる */
                color: #fff;
            }

            #g_navi.panelactive li {
                display: block;
                height: 46px;
                padding: 0 10px;
                letter-spacing: 0.4em;
                border-bottom: 1px solid #909090;
            }

            #g_navi.panelactive a {
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: sans-serif;
                font-size: 1.1rem;
                color: #fff;
            }

    /* --- ロゴ --- */
    #logo_konishi {
        display: block;
        position: absolute;
        left: 10px;
        top: 13px;
        z-index: 1000;
    }

    /* --- 電話アイコン --- */
    #icon_tel {
        position: absolute;
        right: 60px;
        top: 13px;
        width: 24px;
        height: 24px;
        z-index: 1000;
    }

    /* --- ハンバーガー --- */
    .openbtn {
        display: block;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        cursor: pointer;
        width: 50px;
        height: 50px;
        z-index: 1001;
    }

    /* --- 予約ボタン：電話の左 --- */
    .reserve-btn {
        position: absolute;
        right: 100px;
        top: 9px;
        padding: 4px 12px;
        font-size: 0.9rem;
        height: 24px;
        border-radius: 4px;
        z-index: 1000;
    }

    /* --- メニュー開いた時は予約ボタン非表示 --- */
    #g_navi.panelactive ~ .reserve-btn,
    #header.panelactive .reserve-btn {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
}

/*===================================
　PC専用表示制御
===================================*/
@media screen and (min-width:701px) {
    #logo_konishi,
    #icon_tel,
    .openbtn {
        display: none !important;
    }
}

/*===================================
　ハンバーガーアニメーション
===================================*/
.openbtn span {
    display: inline-block;
    position: absolute;
    left: 14px;
    height: 1px;
    background: #fff;
    width: 40%;
    transition: all 0.4s;
}

    .openbtn span:nth-of-type(1) {
        top: 15px;
    }

    .openbtn span:nth-of-type(2) {
        top: 23px;
    }

    .openbtn span:nth-of-type(3) {
        top: 31px;
    }

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*===================================
　現在ページのメニュー強調
===================================*/
#g_navi a.active {
    font-weight: 500 !important;
    color: #fff !important;
}