/* ========================================
   ヘッダー関連CSS
   #header, #header_logo, #header_inner, #global_menu など
======================================== */

/* ヘッダー全体 */
#header {
    width: 100%;
    height: 170px;
    z-index: 20;
    position: relative;
    background: #fff;
    border-block: 1px solid #ddd;
}

/* トップページのヘッダー */
body.home #header {
    border-bottom: none;
}

/* ========================================
   ロゴエリア
======================================== */
#header_logo {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 30;
    height: 110px;
    width: auto;
    max-width: 1080px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

#header_logo>* {
    pointer-events: auto;
    /* ロゴとテキストはクリック可能 */
}

/* 説明文 */
#header_logo .desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    margin: 0 0 0 25px;
}

#header_logo .desc::after {
    content: "創造的で高品質な車をプロデュースします";
    font-family: 'Noto Sans JP', sans-serif;
    padding: 3px 0 0 0;
    font-size: 16px !important;
    font-weight: 500;
    display: block;
}

/* ========================================
   ヘッダーインナー（連絡先エリア）
======================================== */
#header_inner {
    width: 1080px;
    height: 110px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 50;
    /* グローバルメニューより上に配置 */
}

/* 連絡先エリア全体 */
#header_contact_area {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 51;
    /* さらに上に配置 */
}

/* SNSアイコン共通スタイル */
.header_sns_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.header_sns_icon svg {
    width: 32px;
    height: 32px;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* SVGがクリックを妨げないようにする */
}

.header_sns_icon:hover {
    transform: scale(1.1);
}

.header_sns_icon:hover svg {
    opacity: 0.8;
}


/* 連絡先情報 */
.header_contact_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 10px;
}

/* 電話番号 */
.header_phone {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* 住所 */
.header_address {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   グローバルメニュー
======================================== */
#global_menu {
    position: absolute;
    top: 110px;
    left: 0px;
    z-index: 40;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #ddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

#global_menu>ul {
    width: 1080px;
    line-height: 150%;
    position: relative;
    text-align: center;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#global_menu>ul>li {
    position: relative;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    /* 新しいフォント */
    background: #454545;
    /* デフォルト背景色 */
    border-right: 2px solid #ffffff;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
}

#global_menu>ul>li:nth-child(2) {
    flex: 0 0 177px;
}

#global_menu>ul>li:nth-child(7) {
    flex: 0 0 240px;
}

#global_menu>ul>li>a {
    color: #ffffff !important;
    font-size: 16px;
    text-decoration: none;
    height: 60px;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}

/* ホバー時の背景色変更 */
#global_menu>ul>li:hover {
    background: #9E2339;
}

/* ========================================
   親テーマのアニメーションをリセット
======================================== */
/* 下線アニメーションのリセット */
#global_menu>ul>li>a:after {
    transition: none !important;
    animation: none !important;
    height: 0 !important;
}

#global_menu>ul>li>a:hover:after,
#global_menu>ul>li.current-menu-item a:after {
    height: 0 !important;
}

/* 固定ヘッダーのスライドダウンアニメーションをリセット */
.pc .header_fix #header {
    animation: none !important;
}

/* すべてのtransitionとtransformをリセット */
#global_menu,
#global_menu * {
    transition: none !important;
    transform: none !important;
}

/* ========================================
   レスポンシブ: 中間サイズ (951px〜1210px)
   PC表示を維持しつつ、幅を調整
======================================== */
@media screen and (min-width: 951px) and (max-width: 1210px) {
    #header_logo {
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #header_inner {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #global_menu>ul {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

/* ========================================
   951px以上ではメニューボタンを非表示
======================================== */
@media screen and (min-width: 951px) {
    #menu_button {
        display: none !important;
    }
}

/* ========================================
   950px以下ではグローバルメニューを非表示
   (ドロワーメニューを使用)
======================================== */
@media screen and (max-width: 950px) {
    #global_menu {
        display: none !important;
    }
}

/* ========================================
   レスポンシブ: タブレット (651px〜950px)
======================================== */
@media screen and (min-width: 651px) and (max-width: 950px) {
    #header {
        height: 170px !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 1. 左上: 説明文 */
    #header_logo .desc {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        width: calc(100% - 120px) !important;
        /* メニューボタンとの被りを防ぐ */
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-align: left !important;
        line-height: 1.4 !important;
        z-index: 10 !important;
        order: unset !important;
    }

    #header_logo .desc::after {
        content: "創造的で高品質な車をプロデュースします" !important;
        padding: 3px 0 0 0;
        font-size: 14px !important;
        font-weight: bold !important;
        display: block !important;
    }

    /* 2. 右上: メニューボタン */
    #menu_button {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 100 !important;
    }



    /* 3. 左下: ロゴ画像 */
    #header_logo {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 10 !important;
        display: block !important;
        /* Flexbox解除 */
    }

    /* h1.logo / div.logo のマージンリセット */
    #header_logo .logo {
        position: absolute !important;
        bottom: 0px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #header_logo a {
        display: block !important;
    }

    /* ロゴ画像のサイズ指定 */
    #header_logo img,
    #header_logo .mobile_logo_image img {
        height: 80px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 4. 右下: 連絡先エリア */
    #header_inner {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 20 !important;
    }

    #header_inner:after {
        display: none !important;
    }

    #header_contact_area {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* 連絡先情報を最初に表示、100%幅で改行 */
    .header_contact_info {
        order: 1 !important;
        width: 100% !important;
        text-align: right !important;
        margin: 0 !important;
    }

    .header_phone {
        font-size: 14px !important;
        font-weight: bold !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .header_address {
        font-size: 14px !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 500 !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    /* SNSアイコンを横並びで2番目に表示 */
    #header_contact_area .youtube_icon {
        order: 2 !important;
        margin-right: 10px !important;
    }

    #header_contact_area .instagram_icon {
        order: 3 !important;
    }

    .header_sns_icon svg {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
    }
}

/* ========================================
   レスポンシブ: モバイル (650px以下)
   ユーザー指定のカスタムレイアウト
======================================== */
@media screen and (max-width: 650px) {
    #header {
        height: 140px !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 1. 左上: 説明文 */
    #header_logo .desc {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        width: calc(100% - 70px) !important;
        /* メニューボタンとの被りを防ぐ */
        margin: 0 !important;
        font-size: clamp(9px, 3.2vw, 12px) !important;
        /* 画面幅に合わせて縮小 */
        font-weight: bold !important;
        text-align: left !important;
        line-height: 1.4 !important;
        z-index: 10 !important;
        order: unset !important;
        white-space: nowrap !important;
        /* 改行禁止 */
        /* Flexboxの順序解除 */
    }

    #header_logo .desc::after {
        content: "創造的で高品質な車をプロデュースします" !important;
        padding: 3px 0 0 0;
        font-size: clamp(9px, 3.2vw, 12px) !important;
        /* 画面幅に合わせて縮小 */
        font-weight: bold !important;
        display: block !important;
        white-space: nowrap !important;
        /* 改行禁止 */
    }

    /* 2. 右上: メニューボタン */
    #menu_button {
        width: 25px !important;
        height: 25px !important;
        display: flex !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 100 !important;
    }

    /* グローバルメニュー本体はヘッダー内では非表示（ドロワー等で使用） */
    #global_menu {
        display: none !important;
    }

    /* 3. 左下: ロゴ画像 */
    #header_logo {
        position: absolute !important;
        bottom: 10px !important;
        left: 10px !important;
        width: auto !important;
        right: 10px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 10 !important;
        display: block !important;
        /* Flexbox解除 */
    }

    /* h1.logo / div.logo のマージンリセット */
    #header_logo .logo {
        position: absolute !important;
        bottom: 0px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #header_logo a {
        display: block !important;
    }

    /* ロゴ画像のサイズ指定 */
    #header_logo img,
    #header_logo .mobile_logo_image img {
        height: 74px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 4. 右下: 連絡先エリア */
    #header_inner {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 20 !important;
    }

    #header_inner:after {
        display: none !important;
    }

    #header_contact_area {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* 連絡先情報を最初に表示、100%幅で改行 */
    .header_contact_info {
        order: 1 !important;
        width: 100% !important;
        text-align: right !important;
        margin: 0 !important;
    }

    .header_phone {
        font-size: 12px !important;
        font-weight: bold !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    .header_address {
        font-size: 12px !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 500 !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    /* SNSアイコンを横並びで2番目に表示 */
    #header_contact_area .youtube_icon {
        order: 2 !important;
        margin-right: 10px !important;
    }

    #header_contact_area .instagram_icon {
        order: 3 !important;
    }

    .header_sns_icon svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }
}