@charset "utf-8";

/* ヘッダー：背景＆ロゴ／アイコン切替 */
/* ★手動切り替え　オーバーレイ状態では白ロゴ／白アイコンを表示 */
#hum.is-top-overlay .logo-dark,
#hum.is-top-overlay .icon-dark {
    /* opacity: 1; */
    opacity: 0;
}

#hum.is-top-overlay .logo-light,
#hum.is-top-overlay .icon-light {
    /* opacity: 0; */
    opacity: 1;
}

#hum.is-top-overlay #cat_search_area_hd .cat_search_box {
    background: transparent;
    border-bottom: 1px solid #1a1a1a;
    border-bottom: 1px solid #fff;
    /* border-radius: 0; */
}

#hum.is-top-overlay #hum-open span,
#hum.is-top-overlay #hum-open span::before,
#hum.is-top-overlay #hum-open span::after {
    /* background: #1a1a1a; */
    background: #fff;
}

#hum.is-top-overlay #cat_search_area_hd .searchbox::placeholder {
    /* color: #1a1a1a; */
    color: #fff;
    transition: .3s ease;
}
/* ★手動切り替え　オーバーレイ状態では白ロゴ／白アイコンを表示 ここまで */


#hum {
    background-color: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
    position: absolute;
}

.logo-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(68px, 19vw, 79px);
    max-width: initial;
    display: block;
    transition: opacity .3s ease;
}

/* ナビアイコン共通 */
.hum-nav ul li a {
    position: relative;
    display: flex;
    width: 5.3vw;
    height: 5.3vw;
}

.hum-nav ul li a .icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity .3s ease;
}

/* ダーク／ライトの初期状態 */
.logo-dark,
.icon-dark { opacity: 1; }

.logo-light,
.icon-light { opacity: 0; }

#hum.is-top-overlay {
    background-color: transparent;
    box-shadow: none;
}

#hum.is-top-overlay .hum-wrapper,
#hum.is-top-overlay .hum-container,
.hum-container,
.hum-wrapper {
    background: transparent;
}

#hum.is-top-solid {
    background-color: #fff;
    box-shadow: 0 4px 8px -3px rgba(17, 17, 17, .06);
}

#hum.is-top-solid .hum-wrapper,
#hum.is-top-solid .hum-container {
    background-color: #fff;
}

/* 検索アイコン（擬似要素 → 実タグ） */
#hum.is-top-overlay #cat_search_area_hd,
#cat_search_area_hd {
    background-color: transparent;
    box-shadow: none;
}

#hum.is-top-overlay #cat_search_area_hd .searchbox {
    background-color: transparent;
    color: #fff;
}

#cat_search_area_hd .cat_search_box {
    background: transparent;
    border-radius: 0;
    background-color: transparent;
    border-bottom: 1px solid #1a1a1a;
}