/* ========================================
   親テーマと完全に一致させるヘッダー調整CSS
   PC版とSP版の両方に対応
   ======================================== */

/* 微調整用CSS変数 */
:root {
    --logo-offset-y: -2px;    /* ロゴの上下位置調整 */
    --nav-offset-y: 0px;      /* ナビの上下位置調整 */
    --button-offset-y: 0px;   /* ボタンの上下位置調整 */
}

/* ========================================
   PC版（768px以上）のスタイル
   ======================================== */

/* ヘッダー全体の高さを確実に64pxに */
.a22-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 900 !important;
    width: 100% !important;
    height: 64px !important;
    background: #fff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* ロゴエリアのサイズと位置 */
.a22-header .logo {
    width: 198px !important;
    margin-left: 18px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important; /* 背景を透明に */
    transform: translateY(var(--logo-offset-y)) !important; /* 微調整用 */
}

.a22-header .logo a {
    display: block !important;
    background: transparent !important; /* リンクの背景も透明に */
}

.a22-header .logo img {
    width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
    background: transparent !important; /* 画像背景も透明に */
}

/* ヘッダー内部のレイアウト */
.a22-header_inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* バーガーメニューボタンの位置とサイズ（activeでない時のみ） */
.a22-header .btn_menu:not(.active) {
    font-size: 8px !important;
    width: 46px !important;
    padding-top: 25px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 301 !important;
    cursor: pointer !important;
}

/* バーガーメニューのアイコン */
.a22-header .btn_menu i {
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    background: #2e2e2e !important;
    margin: 0 auto 13px !important;
    position: relative !important;
}

/* 初回検診予約ボタンのスタイル */
.header_btn_cta {
    margin: 0 60px 0 30px !important;
    transform: translateY(var(--button-offset-y)) !important; /* 微調整用 */
}

.a22-header .header_btn_cta .header_btn_cta_link,
.header_btn_cta .header_btn_cta_link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    text-align: center !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    font-weight: 500 !important; /* 太字に戻す */
    line-height: 1.3 !important;
    background: #67bded !important; /* 正しいブルーカラー */
    background-color: #67bded !important;
    color: #ffffff !important;
    font-size: 14px !important;
    border: none !important;
    transition: opacity 0.2s !important;
    min-width: 124px !important; /* 親テーマと同じ幅を確保 */
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Helvetica Neue", YuGothic, Arial, メイリオ, Meiryo, sans-serif !important; /* 親テーマと同じフォント */
    white-space: nowrap !important; /* テキストの折り返しを防ぐ */
}

.a22-header .header_btn_cta .header_btn_cta_link:hover,
.header_btn_cta .header_btn_cta_link:hover,
.header_btn_cta_link:hover {
    opacity: 0.8 !important;
    background: #67bded !important;
    color: #ffffff !important;
}

/* パンくずリストをヘッダーの下に配置 */
.header-menu.header-menu_new.header-menu_abso_blog.header-menu_white {
    margin-top: 64px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* PCナビゲーションのスタイル */
.a22-header .nav_a {
    display: block !important; /* デスクトップで表示 */
    transform: translateY(var(--nav-offset-y)) !important; /* 微調整用 */
}

.a22-header .nav_a ul {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.a22-header .nav_a li {
    margin-left: 30px !important;
}

.a22-header .nav_a li a {
    display: block !important;
    letter-spacing: 0.06em !important;
    padding-left: 38px !important;
    position: relative !important;
    transition: all 0.4s !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.a22-header .nav_a li a:before {
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 各メニューアイコン */
.a22-header .nav_a li.price a:before {
    background-image: url("../../kireilign-theme-2022/assets/images/common/header/icon_price.svg") !important;
    background-size: 14px auto !important;
}

.a22-header .nav_a li.case a:before {
    background-image: url("../../kireilign-theme-2022/assets/images/common/header/icon_case.svg") !important;
    background-size: 22px auto !important;
}

.a22-header .nav_a li.location a:before {
    background-image: url("../../kireilign-theme-2022/assets/images/common/header/icon_location.svg") !important;
    background-size: 18px auto !important;
}

.a22-header .nav_a li.blog a:before {
    background-image: url("../../kireilign-theme-2022/assets/images/common/header/icon_blog.svg") !important;
    background-size: 23px auto !important;
}

/* 下層ページの余分なナビゲーションを非表示 */
body:not(.home) #kl_navigation_cta.sp {
    display: none !important;
}

body:not(.home) #kl_navigation.nav_bottom {
    display: none !important;
}

/* ========================================
   バーガーメニュー（nav_b）のスタイル
   ======================================== */
.a22-header .nav_b {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 300 !important;
    width: 500px !important;
    height: 100vh !important;
    background: #fff !important;
    overflow-y: auto !important;
    transform: translateX(110%) !important;
    opacity: 0 !important;
    transition: all 0.4s !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2) !important;
}

.a22-header .nav_b.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.a22-header .nav_b .outer {
    width: 100% !important;
    height: 100% !important;
    padding: 100px 50px 50px !important;
    box-sizing: border-box !important;
}

.a22-header .nav_b .logo_inner {
    margin-bottom: 50px !important;
}

.a22-header .nav_b ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.a22-header .nav_b li {
    margin-bottom: 20px !important;
}

.a22-header .nav_b li a {
    display: block !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: color 0.3s !important;
}

.a22-header .nav_b li a:hover {
    color: #009EF3 !important;
}

/* ========================================
   SP版（768px以下）のスタイル
   ======================================== */
@media only screen and (max-width: 768px) {
    /* PC用ナビゲーションを非表示 */
    .a22-header .nav_a {
        display: none !important;
    }
    
    /* 初回検診予約ボタンはSP版でも表示（親テーマと同じ） */
    .a22-header .header_btn_cta {
        display: block !important;
        margin: 0 17.33vw 0 4vw !important;
    }
    
    .a22-header .header_btn_cta .header_btn_cta_link {
        display: flex !important;
        padding: 1.26vw 5.33vw !important; /* 高さを37pxに調整（親テーマと一致） */
        font-size: 3.2vw !important;
        min-width: auto !important; /* SP版ではmin-widthを解除 */
        white-space: normal !important;
        line-height: 1.3 !important;
        height: 9.49vw !important; /* 37px = 9.49vw at 390px width */
        box-sizing: border-box !important;
    }
    
    /* ヘッダー全体の高さ（vw単位） */
    .a22-header {
        left: 0 !important;
        height: 17.0666666667vw !important;
        font-size: 1.8666666667vw !important;
    }
    
    /* ロゴエリアのサイズと位置 */
    .a22-header .logo {
        width: 37.3333333333vw !important;
        margin-left: 1.8666666667vw !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 3.25vw !important; /* 15pxに調整（親テーマと一致） */
    }
    
    .a22-header .logo img {
        width: 100% !important;
        height: auto !important;
        max-height: 9vw !important; /* ロゴの最大高さを制限 */
    }
    
    /* バーガーメニューボタン */
    .a22-header .btn_menu {
        display: block !important; /* 必ず表示 */
        font-size: 2.1333333333vw !important;
        width: 16vw !important;
        padding-top: 6.6666666667vw !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
    }
    
    .a22-header .btn_menu:not(.active) {
        font-size: 2.1333333333vw !important;
        width: 16vw !important;
        padding-top: 6.6666666667vw !important;
    }
    
    /* バーガーメニューのアイコン */
    .a22-header .btn_menu i {
        width: 6.4vw !important;
        margin: 0 auto 3.4666666667vw !important;
    }
    
    /* バーガーメニューアイコンの擬似要素位置 */
    .a22-header .btn_menu i:before {
        top: -1.8666666667vw !important;
    }
    
    .a22-header .btn_menu i:after {
        top: 1.8666666667vw !important; /* 下の線を正しい位置に */
    }
    
    /* パンくずリストの位置調整 */
    .header-menu.header-menu_new.header-menu_abso_blog.header-menu_white {
        margin-top: 17.0666666667vw !important;
    }
    
    /* SP版でも余分なナビゲーションを非表示 */
    body:not(.home) #kl_navigation_cta.sp {
        display: none !important;
    }
    
    body:not(.home) #kl_navigation.nav_bottom {
        display: none !important;
    }
    
    /* メニューリスト項目の余白を削除 */
    .a22-header .nav_b li {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        height: auto !important;
    }
    
    .a22-header .nav_b li a {
        font-size: 4vw !important; /* 15.6px 相当 */
        line-height: 5.04vw !important; /* 19.656px 相当 */
        padding: 5.13vw 0 !important;
        display: block !important;
    }
    
    .a22-header .nav_b li:last-child a {
        padding-bottom: 5.13vw !important;
    }
    
    
    /* パンくずリストの位置調整 */
    .header-menu.header-menu_new.header-menu_abso_blog.header-menu_white {
        margin-top: 17.0666666667vw;
    }
    
    /* SP版のバーガーメニュー（nav_b）調整 */
    .a22-header .nav_b {
        width: 100% !important;
        background: rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-110%) !important;
        box-shadow: none !important;
    }
    
    .a22-header .nav_b.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    
    .a22-header .nav_b .outer {
        width: 80vw !important;
        height: auto !important;
        padding: 26.6666666667vw 5.3333333333vw !important;
        background: #fff !important;
        margin: 0 auto !important;
    }
    
    /* メニューが開いた時のクローズボタン（バツ）のサイズ調整 */
    .a22-header .btn_menu.active {
        width: 16vw !important;
        height: 13.06vw !important;
        font-size: 2.1333333333vw !important;
    }
    
    .a22-header .btn_menu.active i:before,
    .a22-header .btn_menu.active i:after {
        width: 6.4vw !important;
        height: 0.26vw !important;
        background: #2e2e2e !important;
    }
    
    .a22-header .btn_menu.active i:before {
        transform: rotate(45deg) !important;
        top: 0 !important;
    }
    
    .a22-header .btn_menu.active i:after {
        transform: rotate(-45deg) !important;
        top: 0 !important;
    }
}

/* さらに小さい画面サイズでのロゴ調整 */
@media only screen and (max-width: 768px) and (max-width: 768px) {
    .a22-header .logo {
        width: 37.3333333333vw;
    }
}

/* ========================================
   ナビゲーションメニューのスタイル（SP版）
   ======================================== */
@media only screen and (max-width: 768px) {
    .a22-header .nav_a {
        display: none; /* モバイルではPC用ナビゲーションを非表示 */
    }
    
    .a22-header .nav_a ul {
        display: flex;
        align-items: flex-start;
        height: auto;
    }
    
    .a22-header .nav_a li {
        width: 11.7333333333vw;
        padding-top: 2.4vw;
        margin-left: 0;
    }
    
    .a22-header .nav_a li a {
        letter-spacing: inherit;
        padding-left: 0;
        transition: none;
    }
    
    .a22-header .nav_a li.location {
        width: 13.3333333333vw;
    }
}