body {
    margin: 0; padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 100vh; background-color: white; overflow-x: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-wrapper, .menu-container {
    display: flex; flex-direction: column; align-items: center; width: 100%;
}
.main-wrapper { gap: 15px; }
.menu-container { gap: 5px; margin: 0 auto; }

.header-logo { height: auto; max-height: 40px; width: auto; object-fit: contain; }

html body .top-center-header {
    position: fixed !important;
    top: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    text-align: center !important;
    z-index: 99999 !important; 
}

html body .top-center-header .header-btn,
html body .top-center-header .header-btn:link,
html body .top-center-header .header-btn:visited {
    font-size: 30px !important;
    letter-spacing: 1px !important;
    font-weight: 300 !important;
    color: #000000 !important; 
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-block !important;
    cursor: pointer !important;
}

html body .top-center-header .header-btn:hover {
    text-decoration: underline !important;
}


@media (min-width: 769px) {
    body:has(.logo-link:hover) { background-color: #0000bd; } 
    body:has(.logo-link:hover) .logo-hover-img { display: block; }
    body:has(.logo-link:hover) footer,
    body:has(.logo-link:hover) .sns-icons a { color: white !important; }
    body:has(.logo-link:hover) .top-center-header .header-btn { color: #000000 !important; }

    .hover-text:hover .popup-img { display: block; }
}

.logo-hover-img, .popup-img {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
}
.logo-hover-img { width: 60%; }
.popup-img {
    width: auto !important;      
    height: 100vh !important;    
    object-fit: contain !important; 
}

.hover-text {
    position: relative; font-size: 30px; letter-spacing: 1px; font-weight: 300;
    color: black; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.hover-text:link, .hover-text:visited { color: black; }
.hover-text:hover { text-decoration: underline !important; }

.sns-icons { position: fixed; bottom: 45px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 101; }
.sns-icons a { color: black; text-decoration: none; transition: opacity 0.3s; }
.sns-icons a:hover { opacity: 0.5; }

footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #888; letter-spacing: 1px; z-index: 100; }

.white-logo { display: none; }
.mobile-logo { display: none; }


@media (max-width: 768px) {

    html body .top-center-header {
    top: 25px !important;
    }
    .default-logo, .white-logo { display: none !important; } 
    .mobile-logo { display: inline-block !important; max-height: 130px; }      
    
    .menu-container { flex-direction: column; width: 100%; }
    .hover-text { font-size: 20px; width: fit-content; padding: 5px 0; }
    
    html body .top-center-header .header-btn,
    html body .top-center-header .header-btn:link,
    html body .top-center-header .header-btn:visited {
        font-size: 20px !important; 
    }


    footer { width: 100%; left: 0; bottom: 10px; text-align: center; transform: none; font-size: 10px; }


    body.artist-image-only-mode .top-center-header,
    body.artist-image-only-mode .site-header,
    body.artist-image-only-mode .sns-icons,
    body.artist-image-only-mode footer {
        opacity: 0 !important;
        pointer-events: none !important;
    }


    body.artist-image-only-mode .menu-container .hover-text:not(.is-tapped) {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.artist-image-only-mode .menu-container .hover-text.is-tapped {
        color: transparent !important;
        text-decoration: none !important;
    }

    .menu-container .hover-text.is-tapped .popup-img {
        display: block !important;
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100vw !important;
        height: 100vh !important;
        object-fit: contain !important;
        z-index: 99999 !important;
        pointer-events: none !important; 
    }
}