/* ====================================
   ヘッダーアライメント調整
   ロゴとメニューボタンの高さを統一
==================================== */

/* ヘッダーの最前面表示を保証 */
.main-header,
#header-container .navbar,
.navbar {
    position: fixed !important;
    z-index: 9999 !important; /* 最前面に表示 */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* ヘッダーコンテナの基本設定（全デバイス共通） */
.header-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* デスクトップ表示でのロゴ位置調整 */
@media (min-width: 992px) {
    /* ヘッダーコンテナのflexbox設定 */
    .header-container {
        display: flex !important;
        align-items: center !important;
        min-height: 110px !important;
    }
    
    /* navbar-brandとnavbar-navを同じ高さに配置 */
    #header-container .navbar-brand,
    .main-header .navbar-brand,
    .navbar .navbar-brand,
    header .navbar-brand,
    .header-container .navbar-brand {
        /* flexアイテムとして中央配置 */
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ナビゲーションメニューも同様に中央配置 */
    .navbar-collapse {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-nav {
        align-items: center !important;
    }
}

/* タブレット表示（768px-991px）でも調整 */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-brand {
        /* タブレットでは少し控えめに調整 */
        margin-top: 20px !important;
    }
}

/* より細かい画面サイズ対応のためのメディアクエリ追加 */
/* 小さいスマートフォン（iPhone SE等） */
@media (max-width: 480px) {
    .navbar-brand img {
        max-height: 32px !important;
    }
    
    .navbar-brand {
        min-height: 42px !important;
    }
}

/* 標準的なスマートフォン */
@media (min-width: 481px) and (max-width: 640px) {
    .navbar-brand img {
        max-height: 38px !important;
    }
    
    .navbar-brand {
        min-height: 44px !important;
    }
}

/* 大きめのスマートフォンとタブレット */
@media (min-width: 641px) and (max-width: 991px) {
    .navbar-brand img {
        max-height: 42px !important;
    }
    
    .navbar-brand {
        min-height: 48px !important;
    }
}

/* モバイル表示でのレイアウト調整（Media Queryで2段レイアウト実現） */
/* 背景色はmobile-header-unified.cssで管理 */
@media (max-width: 991px) {
    /* ヘッダー全体を2段構成に変更 */
    /* 背景色・位置固定はmobile-header-unified.cssで管理 */
    .main-header {
        padding: 0 !important;
        /* background-color削除 - mobile-header-unified.cssで管理 */
        /* モバイルではアニメーションを無効化 */
        transition: none !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        /* box-shadow削除 - mobile-header-unified.cssで管理 */
    }
    
    /* navbarをflexbox縦並びに変更 */
    .navbar {
        padding: 0 !important;
        min-height: auto !important;
        /* menu.html/news.htmlの背景色を保持、他はtransparent */
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important; /* 縦並びに変更 */
        align-items: center !important;
        /* モバイルではアニメーションを無効化 */
        transition: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* scrolledクラスがついてもアニメーションしない */
    .navbar.scrolled {
        transition: none !important;
        /* background-color削除 - mobile-header-unified.cssで管理 */
        /* box-shadow削除 - mobile-header-unified.cssで管理 */
    }
    
    /* header-containerも縦並びに */
    .header-container {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* 縦並びに変更（2段構成） */
        align-items: stretch !important;
        padding: 0 !important;
        position: relative !important;
        height: auto !important;
    }
    
    /* ロゴを上段中央に配置 */
    .navbar-brand {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 10px 0 8px 0 !important;
        /* border-bottom削除 - mobile-header-unified.cssで管理 */
        position: relative !important; 
        order: 1 !important; /* 最初に表示 */
        /* background-color削除 - mobile-header-unified.cssで管理 */
        min-height: 45px !important;
    }
    
    .navbar-brand img {
        height: auto !important;
        /* clampによる動的調整とメディアクエリの組み合わせ */
        /* デフォルトはclampで柔軟に対応 */
        max-height: clamp(30px, 8vw, 45px) !important;
        width: auto !important;
        /* アスペクト比を維持 */
        object-fit: contain !important;
        display: inline-block !important;
    }
    
    /* メニューを下段に配置（Bootstrap navbar-expandを上書き） */
    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-collapse.collapse,
    .navbar-collapse.collapsing {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 8px 0 !important;
        /* background-color削除 - mobile-header-unified.cssで管理 */
        margin-top: 0 !important;
        flex-basis: auto !important;
        order: 2 !important; /* ロゴの後に表示 */
        /* border-bottom削除 - mobile-header-unified.cssで管理 */
    }
    
    .navbar-nav {
        margin: 0 auto !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important; /* アイテム間の隙間 */
        width: auto !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .navbar-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    /* メニュー項目のサイズ最適化 */
    .nav-item {
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    .nav-link {
        display: inline-block !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        text-align: center !important;
        min-width: auto !important;
        margin: 0 2px !important;
        line-height: 1.4 !important;
        /* border・背景色・ホバー効果はmobile-header-unified.cssで管理 */
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
    }
    
    /* 言語選択ボタンを右上に配置 */
    .language-switcher.language-switcher-mobile {
        position: absolute !important;
        right: 10px !important;
        top: 32px !important;  /* 1段目の高さ45pxの中で、境界線に被らない位置に調整 */
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        display: block !important;
    }
    
    .language-switcher-mobile button {
        background: transparent !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 20px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        color: #333 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .language-switcher-mobile button:hover {
        background-color: #f0f0f0 !important;
    }
    
    .language-switcher.language-switcher-desktop {
        display: none !important;
    }

    
    /* bodyのpadding-topはmobile-header-fix.cssで管理 */
}

/* タブレット表示（768px-991px）*/
/* 背景色はmobile-header-unified.cssで管理 */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        padding-top: 65px !important;
    }
}

/* ロゴ画像の垂直配置を最適化 */
.navbar-brand img {
    vertical-align: middle;
    display: inline-block;
}

/* ナビゲーションバー全体のアライメント確保 */
.navbar {
    align-items: stretch !important;
}

.navbar-nav {
    align-items: center !important;
}

/* 言語選択ボタンも同じ高さになるよう微調整 */
@media (min-width: 992px) {
    .language-switcher-desktop {
        align-self: center;
    }
}