/* 基本スタイル */
body {
    margin: 0;
    font-family: sans-serif;
    /* JSで動的に設定するため、CSSでの固定paddingは削除 */
}

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

a {
    text-decoration: none;
    color: inherit;
}

/* ヘッダー全体 */
.header {
    background-color: #fff;
    transition: box-shadow 0.3s ease, padding 0.3s ease; /* スムーズな変化のため */
    position: sticky; /* stickyに変更 */
    top: 0; /* 画面上部に固定 */
    left: 0; /* 不要だが念のため */
    width: 100%;
    z-index: 1000; /* 他の要素より手前に表示 */
    padding: 30px 0 10px;
    /* border-bottom は削除し、スクロール時に shadow を追加 */
}
/* .header:not(.scrolled) スタイル削除 */


/* ヘッダーインナー */
.header-inner {
    display: flex;
    align-items: center; /* ロゴとナビエリアを中央揃え */
    padding: 10px 20px; /* 上下左右のパディング */
    /* 初期状態の高さはコンテンツに依存 */
}

.logo {
    margin-right: 20px; /* ロゴとナビエリアの間隔 */
}

.logo img {
    display: block;
    width: 180px; /* 初期幅 */
    height: auto; /* 高さは自動調整 */
    /* transition と transform-origin は削除 (GSAPで制御) */
}

/* ナビゲーションエリア */
.nav-area {
    margin-left: auto; /* 右寄せ */
}

/* 上段ナビ */
.nav-top {
    border-bottom: 1px solid #eee; /* 上下段の区切り線 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.nav-top ul {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
}
.nav-top li {
    margin-left: 15px;
    font-size: 12px;
}

/* メインナビ */
.nav-main ul {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
}
.nav-main li {
    margin-left: 20px;
    font-weight: bold;
}

/* サブナビ（お問い合わせ、検索） */
.nav-sub {
    position: absolute;
    bottom: 17px;
    right: 70px;
    opacity: 0; /* 初期状態では透明 */
    transform: translateY(10px); /* 少し下から浮き上がるように */
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: 20px; /* メインナビとの間隔 */
    width: auto; /* 幅を自動調整 */
}
.nav-sub ul {
    display: flex;
}
.nav-sub li {
    margin-left: 15px;
    font-size: 12px;
}

/* nav-mainにスライド用のスタイル */
.nav-main {
    position: relative;
    transition: transform 0.3s ease;
}


/* --- スクロール時のスタイル --- */
.header.scrolled {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* スクロール時に影を追加 */
}

.header.scrolled .header-inner {
    padding: 5px 20px; /* スクロール時は少し高さを詰める */
    align-items: center; /* 要素を垂直中央揃え */
}

/* .header.scrolled .logo img スタイル削除 (GSAPで制御) */

.header.scrolled .nav-area {
    flex-direction: row; /* 横並びにする */
    align-items: center; /* 要素を垂直中央揃え */
}

.header.scrolled .nav-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.header.scrolled .nav-main {
    /* margin調整は不要かも */
}

.header.scrolled .nav-sub {
    display: flex; /* スクロール時はサブナビを表示 */
    margin-left: 20px; /* メインナビとの間隔 */
}


/* body.header-fixed-padding スタイル削除 (JSで直接body.style.paddingTopを設定するため) */