/* 基本スタイル設定 (モバイルファースト) */
body {
    overflow-x: hidden;
}

.mobile-header {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
}

.mobile-header .logo {
    display: flex;
    align-items: center;
}

.mobile-header .cjlogo {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.mobile-header .cjlogo:hover {
    opacity: 0.7;
}

.mobile-header .sitename {
    max-width: 235px; /* デフォルトはモバイル用 */
    height: auto;
    max-height: 42px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.mobile-header .sitename:hover {
    opacity: 0.7;
}

.nav-buttons {
    display: flex;
    gap: 10px;
}

.mobile-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5em;
}

.mobile-nav-buttons-and-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-nav-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-shrink: 1;
}

.mobile-c_search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0.5em 0.1em 0.7em 0;
}

/* モバイル用レスポンシブ調整 */
@media screen and (min-width: 375px) {
    .mobile-header .sitename {
        max-width: 265px;
    }
}

@media screen and (min-width: 390px) {
    .mobile-header .sitename {
        max-width: 280px;
    }
}

@media screen and (min-width: 415px) {
    .mobile-header .sitename {
        max-width: 305px;
    }
}

@media screen and (min-width: 430px) {
    .mobile-header .sitename {
        max-width: 320px;
    }
}

/* デスクトップ用スタイル */
.pc-header {
    display: none; /* デフォルトは非表示 */
    flex-direction: column;
    padding: 0px;
}

.pc-header .logo {
    display: flex;
    align-items: center;
}

.pc-header .cjlogo {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.pc-header .cjlogo:hover {
    opacity: 0.7;
}

.pc-header .sitename {
    /* レスポンシブ対応でアスペクト比を確保 */
    /* display: block;               */
    max-width: 568px;            /* デスクトップ用の最大幅 */
    height: auto;                /* アスペクト比に基づき高さを自動調整 */
    max-height: 42px;
    cursor: pointer;
    transition: opacity 0.3s ease;

    /* オプション: 最新ブラウザ向けにaspect-ratioを追加 */
    aspect-ratio: 568 / 42;      /* アスペクト比を指定 */
}

.pc-header .sitename:hover {
    opacity: 0.7;
}

.pc-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5em 0.5em 0.3em 0.5em;
}

.pc-nav-buttons-and-search {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    justify-content: flex-end;
}

.pc-c_search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ナイトモードでの通常時のロゴフィルター */
body.dark-mode .logo img{
    filter: brightness(0.8) contrast(1.1); /* 通常時のフィルター */
}

/* ホバー時のフィルターを解除 */
body.dark-mode .logo img:hover {
    filter: none; /* フィルター解除で明るく表示 */
    opacity: 1;
}

/* デスクトップ用メディアクエリ */
@media (min-width: 930px) {
    .pc-header {
        display: flex;
    }
    .mobile-header {
        display: none;
    }
    /* デスクトップ用sitenameのmax-widthを適用 */
    .pc-header .sitename {
        max-width: 360px;
    }
}

/* モバイル用追加のスタイル */
@media (max-width: 650px) {
    .mobile-nav-buttons-and-search {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mobile-c_search {
        justify-content: center;
        margin: 0.5em 0em 0em 0;
    }
}


/* タッチデバイス向け: ホバー効果を無効化 */
@media (hover: none) {
    /* ロゴのホバー無効化 */
    .mobile-header .cjlogo:hover,
    .pc-header .cjlogo:hover {
        opacity: 1; /* ホバー時の透明度変更をリセット */
    }

    /* サイト名のホバー無効化 */
    .mobile-header .sitename:hover,
    .pc-header .sitename:hover {
        opacity: 1; /* ホバー時の透明度変更をリセット */
    }

    /* ナイトモードのロゴホバー無効化 */
    body.dark-mode .logo img:hover {
        filter: brightness(0.8) contrast(1.1); /* 通常時のフィルターに戻す */
        opacity: 1; /* 透明度を変更しない */
    }
}