/* =========================================================
   左上の「HOME」ボタン（全ページ共通）
   設置先: wp-content/themes/staffTemplate/css/home-btn.css
   右上の言語切替・メニュー（.header__ui）と高さを揃えています
   ========================================================= */
.home-btn {
    position: fixed;
    top: 42px;
    left: 40px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(20, 20, 23, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    font-family: "NHaasGroteskDSPro-55Rg", sans-serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    transition: background-color .3s, border-color .3s;
    animation: homeBtnIn .8s ease 1s both;
}
.home-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.home-btn span { padding-top: 2px; }
.home-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; }
.home-btn:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

@keyframes homeBtnIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* メニューを開いている間は隠す */
body:has(.header__ui.active) .home-btn,
body:has(.header__nav.active) .home-btn { opacity: 0; pointer-events: none; }

@media screen and (max-width: 768px) {
    .home-btn {
        top: 22px;
        left: 16px;
        padding: 7px 13px 7px 11px;
        font-size: 10px;
        gap: 6px;
    }
    .home-btn svg { width: 13px; height: 13px; }
}