/**
 * Header Scroll Hide - CSS
 * .kh-header が上下スクロールで隠れる/表示されるアニメーション
 */

/* ヘッダーの基本設定 */
.kh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    /* 既存のスタイルは保持 */
}

/* ヘッダーを隠す時 */
.kh-header.kh-header--hide {
    transform: translateY(calc(-100% - 20px));
}

body {
    margin-top: var(--kh-header-height, 70px);
}

/**
 * 注意：
 * .kh-header が position: relative や position: static の場合は、
 * この CSS は効果がありません。
 * 
 * 既存の HTML では position: fixed が設定されていることを確認してください。
 * もし position が設定されていなければ、下記の CSS を追加:
 */

/* 
 * .kh-header {
 *     position: fixed;
 * }
 */