/* Path:/css/common/common.css */

@charset "UTF-8";

/* ヘッダー・フッターの基本構造 */
.header_banner {
    width: 100%;
    height: 44px;
    background: #F0F8FF;
    border-bottom: 1px solid #D6EAF8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    transition: transform 0.6s ease;
}

.header_grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    width: 100%;
}

.grid_item_left { grid-column: 1 / 5; display: flex; align-items: center; padding-left: 15px; gap: 12px; }
.grid_item_center { grid-column: 5 / 9; display: flex; justify-content: center; }
.grid_item_right { grid-column: 9 / 13; display: flex; justify-content: flex-end; padding-right: 15px; }

/* アイコンサイズ統一 */
.header_banner .user_icon, .header_banner .logo_svg { height: 30px !important; width: auto; object-fit: contain; }
.header_search_icon { height: 24px; filter: brightness(0) invert(0.3) hue-rotate(200deg); }

/* フッター */
.footer_banner {
    width: 100%;
    height: 44px;
    background: #F0F8FF;
    border-top: 1px solid #D6EAF8;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    transition: bottom 0.6s ease;
}

.footer_grid {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0 20px;
}

.footer_item { display: inline-flex; justify-content: center; align-items: center; padding: 2px 10px; }
.footer_item:not(:last-child) { margin-right: 25px; }
.footer_item:last-child { margin-left: auto; }
.footer_item img { height: 24px; filter: brightness(0) invert(0.3) hue-rotate(200deg); }

/* 通知バッジ */
.rel_pos { position: relative; }
.notis {
    position: absolute; top: -5px; right: -10px;
    background: #E68031; color: #FFF; border-radius: 10px;
    min-width: 20px; padding: 0 3px; font-size: 0.8em; font-weight: bold;
}

/* スクロール時の非表示クラス */
.hide {
    bottom: -70px !important;
}
.hide_top {
    transform: translateY(-100%) !important;
}

/* サブタブ用の非表示クラス */
.hide_top_2 {
    /* メインヘッダー(44px) ＋ 自分の高さ分、上へ移動して隠れる */
    transform: translateY(calc(-100% - 44px)) !important;
}

/* 第3ヘッダー用の非表示クラス */
.hide_top_3 {
    /* 第1(44px) ＋ 第2(44px) ＝ 88px 分と、自分の高さを足して上へ移動 */
    transform: translateY(calc(-100% - 88px)) !important;
}