@charset "utf-8";
/* =========================================================
   共通スタイル / PCデフォルト (max-width: 1280px以上のスタイル)
========================================================= */

#switch {
    display: none;
}

.header-inner {
    max-width: 1280px;
    width: 96%;
    margin: 5px auto;
    min-height: 70px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    overflow: visible;
}

/* ★ 修正なし: PCサイズではハンバーガーボタンのラベル自体を非表示にする */
#switch ~ label {
    display: none;
}

.header-inner #NavWrap {
    display: flex;
    align-items: center;
}

.header-inner #NavWrap ul.txtMenu,
.header-inner > #NavWrap ul.txtMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    margin: 0;
    margin-right: 32px;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

#NavWrap ul.txtMenu li,
.header-inner > #NavWrap ul.txtMenu li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 32px;
    list-style: none;
}

#NavWrap ul.txtMenu li.sp-only {
    display: none;
}

.header-inner > #NavWrap ul {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
}

.btn-contact-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 140px;
    height: 32px;
    padding: 0;
    border-radius: 5px;
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    transition: background 0.2s;
}

.bg-color-main {
    background: var(--main-color);
}

.bg-color-sub {
    background: var(--sub-color);
}

/* =========================================================
    メディアクエリ (微妙なサイズ) - min-width: 901px - max-width: 1280px
========================================================= */
@media screen and (min-width: 901px) and (max-width: 1280px) {

    .header-inner {
        max-width: 96%;
        width: 96%;
        margin: 5px auto;
        min-height: 60px;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        overflow: visible;
    }

    .logo img, 
    .logo a img {
        height: 60px !important;
    }

}

/* =========================================================
    メディアクエリ (SP/タブレット対応) - max-width: 900px
========================================================= */

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

    ul, li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* SP専用要素を表示 */
    #NavWrap ul.txtMenu li.sp-only {
        display: block;
    }
    
    /* ★ 修正: SPでのみハンバーガーボタン（ラベル）を表示・固定配置 */
    #switch ~ label {
        display: block !important; /* !important を使い、PC側の display: none を上書き */
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2000;
        width: 60px;
        height: 60px;
        padding: 12px 12px;
        box-sizing: border-box;
    }
    
    /* ナビゲーション全体（#NavWrap）を縦積みFlexコンテナに変更 */
    #NavWrap {
        position: fixed;
        top: -100%;
        left: 0;
        z-index: 100000;
        display: flex; 
        flex-direction: column; /* 縦並び */
        width: 100%;
        max-width: calc(100% - 60px);
        height: 100%;
        background: rgba(247, 244, 244, 0.9);
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
        transition: all 0.4s;
        text-align: left;
    }
    
    /* ナビゲーションが開いた状態 */
    #switch:checked ~ #NavWrap { 
        top: 0; 
    }

    /* ハンバーガーボタンの中央の線 */
    #switch ~ label span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--dark);
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        transition: 0.2s transform;
    }
    
    /* ハンバーガーボタンの上下の線 */
    #switch ~ label span:before,
    #switch ~ label span:after {
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: var(--dark);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    #switch ~ label span:before {
        top: -9px;
    }
    
    #switch ~ label span:after {
        top: 9px;
    }
    
    /* ハンバーガーボタン: 閉じるアイコン (X) */
    #switch:checked ~ label span {
        transform: rotate(-45deg);
    }
    
    #switch:checked ~ label span:before {
        top: 0;
    }
    
    #switch:checked ~ label span:after {
        transform: rotate(270deg);
        top: 0;
        margin-top: 0;
    }
    
    /* === レイアウト崩れ防止と縦積み配置 === */
    
    /* 1. テキストメニュー ul.txtMenu: 縦並びを維持 */
    .header-inner #NavWrap ul.txtMenu,
    .header-inner > #NavWrap ul.txtMenu { 
        display: block;
        width: calc(100% - 20px);
        text-align: left; 
        flex-direction: column; 
        margin-left: 20px;
        margin-bottom: 40px;
        align-items: flex-start;
    }

    /* 2. ボタン群の ul: 横並びを有効化 */
    .header-inner > #NavWrap ul {
        display: flex; 
        justify-content: space-around;
        gap: 12px;
        list-style: none;
        padding: 0 10px;
    }
    
    /* 3. ナビゲーション内の li: display: flex の影響を排除 */
    .header-inner > #NavWrap ul.txtMenu li {
        padding: 0;
        display: block;
    }

    /* リンクのスタイル */
    li {
        text-align: left;
    }
    
    li a {
        display: block;
        padding: 0px 0;
        text-decoration: none;
    }

    /* スクロール防止用のクラス */
    .scroll-prevent {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 768px) {
    #switch ~ label {
        display: block !important; /* !important を使い、PC側の display: none を上書き */
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2000;
        width: 46px;
        height: 46px;
        padding: 12px 12px;
        box-sizing: border-box;
    }

}

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

    .header-inner > #NavWrap ul {
        display: block; 
    }

    .header-inner > #NavWrap ul li{
        text-align: left;
        margin-bottom: 20px;
    }

}