/*フォント*/
/* html要素に直接font-sizeを設定（remの基準となる） */
/* ブラウザのデフォルト16pxの1.075倍 = 17.2px */
html {
    font-size: 17.2px !important; /* remの基準となるルートフォントサイズ */
}

@media (max-width: 768px) {
    html {
        font-size: 16px !important; /* モバイルではデフォルトサイズ */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 16px !important; /* 小さいモバイルでもデフォルトサイズ */
    }
}

.font-regular, body {
    font-family: 'EB Garamond', serif !important;
    font-size: 1rem !important; /* htmlの17.2pxを基準にした1rem = 17.2px */
    color: #000000 !important;
}

body {
    font-size: 1rem !important; /* htmlの17.2pxを基準にした1rem = 17.2px */
}
/*ページ枠*/
header{
    display: flex;
    justify-content: space-between
    align-items: center;
    background: none;
    color: none;
    padding: 0vw;
}

html, body {
    background: #ffffff;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* スクロールを許可 */
    -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*LIVIDO_rogo_big*/
#main-menu{
    position:fixed;
    height: auto;
    top: 50%; /* 上下中央配置 */
    right: 1%;/*左の余白*/
    transform: translateY(-50%); /* 上下中央寄せ */
    opacity: 0.99;
    mix-blend-mode: exclusion;
    z-index: 100; /* ロゴを最前面に表示 */
}
#main-menu ul{
    list-style: none;
}
#main-menu ul li a{
    padding: 5px;
}
#main-menu ul li img{
    width: 55px; /*rogo size - 他のページと同じサイズ */
    position: relative;
    z-index: 101; /* ロゴを最前面に配置 */
}

/*LIVIDO_rogo_small*/
#main-menu2{
    position: fixed;
    height: auto;
    top: 50%; /* 上下中央配置 */
    right: 1%; /* 右の余白 */
    transform: translateY(-50%); /* 上下中央寄せ */
    opacity: 0.99;
    mix-blend-mode: exclusion; /* PNG画像に適用 */
    z-index: 1000;
    visibility: visible;
    transition: opacity 1.2s ease-in-out, visibility 0s linear 0s;
}
#main-menu2 ul{
    list-style: none;
}
#main-menu2 ul li a{
    padding: 5px;
}
#main-menu2 ul li a img{
    width: 55px; /*rogo size*/
    position: relative;
    z-index: 1001;
    transition: width 0.3s ease; /* スムーズなサイズ変化 */
}

/* サイドメニュー（PNGアイコン） */
#side-menu {
    position: fixed;
    top: 50%; /* 上下中央配置 */
    left: 1%;
    transform: translateY(-50%); /* 上下中央寄せ */
    padding: 5px;
    z-index: 10; /* 背景より前に配置 */
    mix-blend-mode: exclusion; /* PNG画像に適用 */
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease-in-out, visibility 0s linear 0s;
}
#side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#side-menu ul li {
    margin-bottom: 18px;
}
#side-menu ul li a img {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    position: relative;
    padding: 4px;
}

/* デスクトップ（1025px以上）：左サイド5リング — ホバーで SVG ラベルをリング右へスライド＋フェード（モバイル用 Font と同じアセット） */
@media (min-width: 1025px) {
    #side-menu ul li > a.btn {
        position: relative;
        display: inline-block;
        overflow: visible;
    }

    /* サイドメニューだけ .btn:hover の全体 opacity:0.3 を打ち消し（ラベルまで消えない） */
    #side-menu ul li > a.btn:hover {
        opacity: 1 !important;
    }

    #side-menu ul li > a.btn:hover > img {
        opacity: 0.38;
        transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #side-menu ul li > a.btn > img {
        transition: opacity 0.4s ease;
    }

    #side-menu ul li > a.btn::after {
        content: "";
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        width: min(28vw, 220px);
        height: 30px;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        transform: translate3d(-14px, -50%, 0);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #side-menu ul li > a.btn:hover::after,
    #side-menu ul li > a.btn:focus-visible::after {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
    }

    #side-menu ul li > a.btn[href="index.html"]::after {
        background-image: url("../Font/void_wt.svg");
    }
    #side-menu ul li > a.btn[href="gallery.html"]::after {
        background-image: url("../Font/gallery_wt.svg");
    }
    #side-menu ul li > a.btn[href="context.html"]::after {
        background-image: url("../Font/context_wt.svg");
    }
    #side-menu ul li > a.btn[href="story.html"]::after {
        background-image: url("../Font/story_wt.svg");
    }
    #side-menu ul li > a.btn[href="contact.html"]::after {
        background-image: url("../Font/contact_wt.svg");
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    #side-menu ul li > a.btn::after {
        transition: opacity 0.2s ease;
    }
    #side-menu ul li > a.btn:hover::after,
    #side-menu ul li > a.btn:focus-visible::after {
        transform: translate3d(0, -50%, 0);
    }
}

.btn{
    transition-duration: .4s;　/*マウスホバー時の不透明化の速度*/
}
.btn:hover{
    opacity: 0.3; /*マウスホバー時の透明度*/
    transition-duration: .4s;　/*マウスホバー時の透明化の速度*/
}

/* サイドバーのリング透明度設定 */
/* デスクトップメニュー */
.sidebar-nav .btn img {
    opacity: 1; /* デフォルトは不透明 */
}

.sidebar-nav .btn.active img {
    opacity: 0.3; /* 現在のページは少し薄く */
}

/* モバイルメニュー */
.mobile-sidebar-nav .btn img {
    opacity: 0.95; /* モバイルメニュー内の通常リング */
}

.mobile-sidebar-nav .btn.active img {
    opacity: 0.3; /* 現在のページは少し薄く */
}

.mobile-sidebar-nav .btn.active .mobile-nav-ring {
    opacity: 0.3;
}

/* 上リングトグルのベース（固定配置・非表示）
   1024px境界で opacity/visibility を切り替えてもレイアウトに干渉しない */
.mobile-menu-toggle {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s;
    mix-blend-mode: exclusion;
    --toggle-ring-size: 55px;
    --toggle-livid-width: 116px;
}

/* 1024境界をまたいでフェード中でも、2枚の画像がレイアウト崩れしないよう常時適用 */
.mobile-menu-toggle img {
    transition: opacity 0.4s ease;
    filter: brightness(0) invert(1);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mobile-menu-toggle .toggle-icon {
    opacity: 1;
    visibility: visible;
    width: 55px;
    min-width: 55px;
    max-width: 55px;
}
.mobile-menu-toggle .toggle-logo {
    opacity: 0;
    visibility: hidden;
    width: 55px;
    min-width: 55px;
    max-width: 55px;
    height: auto;
}

/*WORK*/
.work{
    width: 70%;
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
    left: 15%;  /*左の余白*/
    transition-duration: .8s;　/*マウスホバー時の不透明化の速度*/
}
.work:hover{
    opacity: 0.5; /*マウスホバー時の透明度*/
    transition-duration: .8s;　/*マウスホバー時の透明化の速度*/
}

/* モバイル対応 - exhibitions.htmlと同じサイズ設定 */
@media (max-width: 768px) {
    .work {
        width: 80%;
        max-width: 80%;
        margin: 0 auto 40px auto;
    }
}

@media (max-width: 480px) {
    .work {
        width: 90%;
        max-width: 90%;
        margin: 0 auto 30px auto;
    }
}

/*galllery*/
#gal{
    justify-content: center;
    align-items: center;
    display: block;
    width: 100%; 
    height: 100%;
}

/*WORK2*/
.work2{
    width: 100%;
    left: 15%;  /*左の余白*/
    transition-duration: .8s;　/*マウスホバー時の不透明化の速度*/
}
.work2:hover{
    opacity: ; /*マウスホバー時の透明度*/
    transition-duration: .8s;　/*マウスホバー時の透明化の速度*/
}

#main2{
    justify-content: center;
    align-items: center;
    display: flex;
    min-width: 100vw; 
    min-height: 100vh;
}
#main2 img{
    object-fit: cover;
    width: 100vw; 
    height: 100vh;
    z-index: 0;
}
/* グラデーション削除 */

/* Mobile/Tablet Menu Styles（〜1024pxでモバイルと同じドロップダウンを使う） */
@media (max-width: 1024px) {
    /* 左サイド5リング：ベースは opacity:1 のため、フェード付きで 0 にすると初回描画でチラつく。即非表示にする */
    #side-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }
    /* Mobile collapsed menu button */
    .mobile-menu-toggle {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000; /* 最前面に表示（他の要素より高く） */
        cursor: pointer;
        transition: all 0.3s ease;
        mix-blend-mode: exclusion; /* exclusionで背景に応じて色が変わる */
        height: 60px; /* リングのサイズに合わせる */
        width: 60px;  /* 切り替え時の基準ボックスを固定してガタつきを防ぐ */
        display: flex;
        align-items: center; /* 上下中央配置 */
        justify-content: center; /* 左右中央配置 */
        --toggle-ring-size: 55px;
        --toggle-livid-width: 116px; /* LIVID.png の横長比率に合わせる */
    }

    /* タブレットでもヘッダー（上部）に固定 */
    .mobile-menu-toggle {
        top: 20px;
        bottom: auto;
    }
    
    .mobile-menu-toggle img {
        transition: opacity 0.4s ease;
        filter: brightness(0) invert(1); /* 白→黒→白の二重反転で白背景で黒く表示 */
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* リングアイコン（デフォルト表示） */
    .mobile-menu-toggle .toggle-icon {
        opacity: 1;
        visibility: visible;
        width: 55px;
        transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                    min-width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                    max-width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.45s ease;
    }

    /* 展開時にリング左隣へ表示する LIVID ロゴ */
    .mobile-menu-toggle::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--toggle-livid-width);
        height: var(--toggle-ring-size);
        transform: translate(calc(-100% - (var(--toggle-ring-size) / 2) + 12px), -50%) scale(0.992);
        background: url("../images/LIVID.png") center / contain no-repeat;
        filter: brightness(0) invert(1) blur(2.4px); /* 出現前は少し柔らかくぼかす */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    filter 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s linear 1.05s;
    }
    
    /* LIVIDOロゴ（デフォルト非表示） */
    .mobile-menu-toggle .toggle-logo {
        opacity: 0;
        visibility: hidden;
        width: 55px;
        min-width: 55px;
        max-width: 55px;
        height: auto;
        /* .mobile-menu-toggle img の共通中央配置を利用 */
    }
    
    /* メニューが開いた時：リングを非表示、LIVIDOロゴを表示 */
    .mobile-menu-expanded.active ~ .mobile-menu-toggle .toggle-icon,
    body:has(.mobile-menu-expanded.active) .mobile-menu-toggle .toggle-icon {
        opacity: 0;
        visibility: hidden;
    }
    
    .mobile-menu-expanded.active ~ .mobile-menu-toggle .toggle-logo,
    body:has(.mobile-menu-expanded.active) .mobile-menu-toggle .toggle-logo {
        opacity: 1;
        visibility: visible;
    }
    .mobile-menu-expanded.active ~ .mobile-menu-toggle::before,
    body:has(.mobile-menu-expanded.active) .mobile-menu-toggle::before {
        opacity: 1;
        visibility: visible;
        transform: translate(calc(-100% - (var(--toggle-ring-size) / 2)), -50%) scale(1);
        filter: brightness(0) invert(1) blur(0);
        transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    filter 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s linear 0s;
    }
    
    .mobile-menu-toggle:hover .toggle-icon {
        opacity: 0.3; /* ホバー時に透明に */
    }
    
    /* Mobile expanded menu */
    .mobile-menu-expanded {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.8);
        z-index: 9999; /* トップリングより下、他の要素より上 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    
    .mobile-menu-expanded.active {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-expanded ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .mobile-menu-expanded ul li {
        transform: translateY(-50px);
        opacity: 0;
        transition: all 0.4s ease;
    }
    
    .mobile-menu-expanded.active ul li {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* Staggered animation for menu items */
    .mobile-menu-expanded.active ul li:nth-child(1) { transition-delay: 0.1s; }
    .mobile-menu-expanded.active ul li:nth-child(2) { transition-delay: 0.2s; }
    .mobile-menu-expanded.active ul li:nth-child(3) { transition-delay: 0.3s; }
    .mobile-menu-expanded.active ul li:nth-child(4) { transition-delay: 0.4s; }
    .mobile-menu-expanded.active ul li:nth-child(5) { transition-delay: 0.5s; }

    /* ドロップダウン：展開後にリング→ページ名SVGへフェード切替（先頭 index 行のみリングのまま・void.svg は出さない） */
    #mobileMenuExpanded ul li a.btn.mobile-nav-swap {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: min(92vw, 300px);
        min-height: 56px;
    }
    .mobile-nav-swap-stack {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(92vw, 300px);
        height: 56px;
        min-height: 56px;
    }
    .mobile-nav-ring,
    .mobile-nav-label {
        transition: opacity 0.78s ease;
    }
    .mobile-nav-ring {
        display: block;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
        opacity: 1;
        filter: brightness(0);
        mix-blend-mode: normal;
    }
    .mobile-nav-label {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        box-sizing: content-box;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(92vw, 320px) !important;
        height: 40px !important;
        max-height: none !important;
        object-fit: contain;
        object-position: center;
        opacity: 0;
        pointer-events: none;
        filter: brightness(0);
        mix-blend-mode: normal;
    }
    #mobileMenuExpanded:not(.active) .mobile-nav-swap .mobile-nav-label {
        opacity: 0;
        transition: none;
    }
    #mobileMenuExpanded:not(.active) .mobile-nav-swap .mobile-nav-ring {
        opacity: 1;
        transition: none;
    }
    #mobileMenuExpanded.active .mobile-nav-swap .mobile-nav-ring {
        opacity: 0;
        transition: opacity 0.78s ease 1s;
    }
    #mobileMenuExpanded.active .mobile-nav-swap .mobile-nav-label {
        opacity: 1;
        transition: opacity 0.78s ease 1s;
    }
    #mobileMenuExpanded.active .mobile-nav-swap.btn.active .mobile-nav-label {
        opacity: 0.4;
        transition: opacity 0.78s ease 1s;
    }
    /* 先頭（index）：展開時もリングのみ表示。void.svg への切替はしない */
    #mobileMenuExpanded.active ul li:first-child .mobile-nav-swap .mobile-nav-ring {
        opacity: 1;
        transition: opacity 0.78s ease 1s;
    }
    /* index ページでメニューを開いたとき：先頭リングは active でも薄くせず、黒のまま（opacity を下げない） */
    body.index-home #mobileMenuExpanded.active ul li:first-child .mobile-nav-swap.btn.active .mobile-nav-ring {
        opacity: 1;
        filter: brightness(0);
        mix-blend-mode: normal;
    }
    #mobileMenuExpanded.active ul li:first-child .mobile-nav-swap .mobile-nav-label {
        opacity: 0 !important;
        visibility: hidden;
        transition: none;
    }
    #mobileMenuExpanded.active ul li:first-child .mobile-nav-swap.btn.active .mobile-nav-label {
        opacity: 0 !important;
    }
    .mobile-menu-expanded ul li a {
        display: block;
        padding: 10px;
        border-radius: 50%;
        transition: all 0.3s ease;
        mix-blend-mode: normal;
    }
    
    /* 直接子の img のみ（index のリング）。swap 行の span 内 img には当てない */
    .mobile-menu-expanded ul li a > img {
        width: 40px;
        opacity: 1;
        transition: all 0.3s ease;
        filter: brightness(0);
        mix-blend-mode: normal;
    }

    .mobile-menu-expanded ul li a.mobile-nav-swap img.mobile-nav-label {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(92vw, 320px) !important;
        height: 40px !important;
        max-height: none !important;
        object-fit: contain;
    }
    
    .mobile-menu-expanded ul li a:hover > img {
        opacity: 1;
    }
    
    .mobile-menu-expanded ul li a:hover {
        background: none;
    }
    
    /* モバイルメニュー内のLIVIDOロゴ */
    .mobile-menu-logo {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        opacity: 0;
        transition: opacity 0.4s ease 0.6s; /* メニューアイテムの後に表示 */
    }
    
    .mobile-menu-expanded.active .mobile-menu-logo {
        opacity: 1;
    }
    
    .mobile-menu-logo img {
        width: auto;
        height: 40px;
    }
    
    /* Close button */
    .mobile-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        color: black;
        font-size: 30px;
        opacity: 0.7;
        transition: all 0.3s ease;
        mix-blend-mode: exclusion;
    }
    
    .mobile-menu-close:hover {
        opacity: 1;
    }
    
    /* Additional mobile menu improvements */
    .mobile-menu-expanded {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Ensure mobile menu toggle is visible on mobile */
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity 1.2s ease-in-out, visibility 0s linear 0s !important;
    }
}

/* desktop: 上リングはフェードで非表示（display:none にしない） */
@media (min-width: 1025px) {
    .mobile-menu-toggle {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s !important;
    }
    .mobile-menu-expanded {
        display: none !important;
    }
}

/* タブレット: リング幅 55px・ページ名 SVG 高さ 55px */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-menu-toggle {
        --toggle-ring-size: 55px;
        --toggle-livid-width: 174px;
    }
    .mobile-menu-toggle .toggle-icon {
        width: 55px !important;
    }
    .mobile-menu-toggle .toggle-logo {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }
    .mobile-menu-expanded ul li a > img {
        width: 55px !important;
    }
    /* ドロップダウン内5リング（実表示要素）を確実に55pxへ */
    .mobile-menu-expanded.mobile-sidebar-nav ul li a.btn img {
        width: 55px !important;
    }
    .mobile-menu-expanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap img.mobile-nav-label {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(90vw, 360px) !important;
        height: 55px !important;
        max-height: none !important;
        object-fit: contain;
    }
    /* タブレット：ページ名 SVG の基準高さ 55px（リング幅 55px に揃える） */
    .mobile-nav-label {
        height: 55px !important;
    }
    #mobileMenuExpanded.mobile-menu-expanded.mobile-sidebar-nav ul li a.btn > img {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }
    .mobile-nav-swap-stack {
        width: min(90vw, 360px);
        height: 64px;
        min-height: 64px;
    }
    #mobileMenuExpanded ul li a.btn.mobile-nav-swap .mobile-nav-ring,
    #mobileMenuExpanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap .mobile-nav-ring {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }
}

/* モバイル: リングは 40px */
@media (max-width: 768px) {
    .mobile-menu-toggle .toggle-icon {
        width: 40px !important;
    }
    .mobile-menu-toggle .toggle-logo {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
    }
    .mobile-menu-expanded ul li a > img {
        width: 40px !important;
    }
    /* ドロップダウン内5リング（実表示要素）を確実に40pxへ */
    .mobile-menu-expanded.mobile-sidebar-nav ul li a.btn img {
        width: 40px !important;
    }
    .mobile-menu-expanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap img.mobile-nav-label {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(92vw, 320px) !important;
        height: 40px !important;
        max-height: none !important;
        object-fit: contain;
    }
    #mobileMenuExpanded.mobile-menu-expanded.mobile-sidebar-nav ul li a.btn > img {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
    }
}




/* タブレット＆モバイルでは右側のロゴ（#main-menu, #main-menu2）を非表示 */
@media (max-width: 1024px) {
    /* 初回ロードでデスクトップ用ロゴがフワッと消えるのを防ぐため transition は付けない */
    #main-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }

    #main-menu2 {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }
}

/* #main-menu2：モバイル幅では上記で即非表示。アイコン寸法のみ別指定 */
@media (max-width: 1024px) {
    #main-menu2 ul li a img {
        width: 55px !important;
    }
}

/* 統一された下部メニューバー設定（story.htmlからコピー） */
.bottom-menu-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    padding: 15px 0; /* 幅を30pxに（上下15pxずつ） */
    z-index: 1000;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in-out;
    display: flex;
    align-items: center; /* 上下中央に配置 */
    justify-content: center;
}

.bottom-menu-bar.visible {
    transform: translateY(0);
    opacity: 1;
}

.bottom-menu-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bottom-menu-item {
    text-decoration: none;
    transition: opacity 0.4s ease;
    position: relative;
}

.bottom-menu-item img {
    width: auto;
    height: 14px !important; /* デスクトップ用のタイトルサイズを少し大きく */
    opacity: 0.2; /* 非アクティブページは透明度を上げる */
    transition: opacity 0.4s ease;
}

.bottom-menu-item:hover img {
    opacity: 0.3;
}

.bottom-menu-item.active img {
    opacity: 1;
}

/* story.svgとgallery.svg、context.svgは常に完全に不透明 */
.bottom-menu-item img[src*="story.svg"],
.bottom-menu-item img[src*="gallery.svg"],
.bottom-menu-item img[src*="context.svg"] {
    opacity: 1 !important;
}

/* story.svg、gallery.svg、context.svg、exhibitions.svg、interviews.svg、press_features.svgのサイズ設定 - context.htmlと同じ */
.bottom-menu-item img[src*="story.svg"],
.bottom-menu-item img[src*="gallery.svg"],
.bottom-menu-item img[src*="context.svg"],
.bottom-menu-item img[src*="exhibitions.svg"],
.bottom-menu-item img[src*="interviews.svg"],
.bottom-menu-item img[src*="press_features.svg"],
.bottom-menu-item img[src*="contact.svg"] {
    width: auto;
    height: 20px !important; /* デスクトップ用サイズ（context.htmlと同じ） */
}

/* タブレットサイズで縦並びに切り替え（ロゴサイズ変更と同じタイミング） */
@media (max-width: 1024px) {
    .bottom-menu-item img[src*="story.svg"],
    .bottom-menu-item img[src*="gallery.svg"],
    .bottom-menu-item img[src*="context.svg"],
    .bottom-menu-item img[src*="exhibitions.svg"],
    .bottom-menu-item img[src*="interviews.svg"],
    .bottom-menu-item img[src*="press_features.svg"],
    .bottom-menu-item img[src*="contact.svg"] {
        height: 20px !important; /* タブレット用サイズ */
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .bottom-menu-item img[src*="story.svg"],
    .bottom-menu-item img[src*="gallery.svg"],
    .bottom-menu-item img[src*="context.svg"],
    .bottom-menu-item img[src*="exhibitions.svg"],
    .bottom-menu-item img[src*="interviews.svg"],
    .bottom-menu-item img[src*="press_features.svg"] {
        height: 20px !important; /* モバイル用サイズ */
    }
    
    /* press_features_2.svgのサイズを2倍に */
    .bottom-menu-item img[src*="press_features_2.svg"] {
        height: 44px !important; /* 22px * 2 = 44px */
    }
}

@media (max-width: 480px) {
    .bottom-menu-item img[src*="story.svg"],
    .bottom-menu-item img[src*="gallery.svg"],
    .bottom-menu-item img[src*="context.svg"],
    .bottom-menu-item img[src*="exhibitions.svg"],
    .bottom-menu-item img[src*="interviews.svg"],
    .bottom-menu-item img[src*="press_features.svg"] {
        height: 20px !important; /* iPhone用サイズ */
    }
    
    /* press_features_2.svgのサイズを2倍に */
    .bottom-menu-item img[src*="press_features_2.svg"] {
        height: 44px !important; /* 22px * 2 = 44px */
    }
}

@media (max-width: 768px) {
    /* Title bar adjustments - 完全に下寄せ */
    .bottom-menu-bar {
        padding: 9px 0 !important;
        align-items: flex-start !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        bottom: 0 !important; /* 完全に下寄せ */
    }

    .bottom-menu-bar.visible {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .bottom-menu-bar:not(.visible) {
        transform: translateY(100%) !important;
        opacity: 0 !important;
    }
}

@media (max-width: 480px) {
    .mobile-menu-logo img {
        width: auto;
        height: 40px;
    }
    
    /* iPhone用タイトルバーアニメーション設定 - 完全に下寄せ */
    .bottom-menu-bar {
        padding: 9px 0 !important;
        align-items: flex-start !important;
        bottom: 0 !important; /* 完全に下寄せ */
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in-out !important;
    }

    .bottom-menu-bar.visible {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .bottom-menu-bar:not(.visible) {
        transform: translateY(100%) !important;
        opacity: 0 !important;
    }
}

.bottom-menu-item:hover img[src*="story.svg"],
.bottom-menu-item:hover img[src*="gallery.svg"],
.bottom-menu-item:hover img[src*="context.svg"] {
    opacity: 1 !important;
}


/* 下部メニューバーのモバイル対応 */
@media (max-width: 768px) {
    .bottom-menu-content {
        gap: 40px;
        padding: 0 15px;
    }
    
    .bottom-menu-item img {
        height: 10px !important;
    }
    
    /* story.svg、gallery.svg、context.svg、exhibitions.svg、interviews.svg、press_features.svgはcontext.htmlと同じサイズを維持 */
    .bottom-menu-item img[src*="story.svg"],
    .bottom-menu-item img[src*="gallery.svg"],
    .bottom-menu-item img[src*="context.svg"],
    .bottom-menu-item img[src*="exhibitions.svg"],
    .bottom-menu-item img[src*="interviews.svg"],
    .bottom-menu-item img[src*="press_features.svg"],
    .bottom-menu-item img[src*="contact.svg"] {
        height: 17px !important;
    }
    
    /* press_features_2.svg も同サイズに統一 */
    .bottom-menu-item img[src*="press_features_2.svg"] {
        height: 17px !important;
    }
    
}

/* ===============================
   Ring size final override
   (mobile/tablet menu icons)
   =============================== */
@media (max-width: 768px) {
    /* トグルリング */
    #mobileMenuToggle .toggle-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
    }
    /* ドロップダウン内5リング（実DOMを直接指定） */
    #mobileMenuExpanded ul li a.btn > img,
    #mobileMenuExpanded ul li a.btn.mobile-nav-swap .mobile-nav-ring,
    #mobileMenuExpanded.mobile-sidebar-nav ul li a.btn > img,
    #mobileMenuExpanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap .mobile-nav-ring,
    .mobile-sidebar-nav .btn > img {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
    }
    .mobile-nav-swap-stack {
        width: min(92vw, 300px) !important;
        height: 56px !important;
        min-height: 56px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #mobileMenuExpanded ul li a.btn.mobile-nav-swap {
        min-height: 64px;
    }
    #mobileMenuToggle .toggle-icon {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }
    #mobileMenuExpanded ul li a.btn > img,
    #mobileMenuExpanded ul li a.btn.mobile-nav-swap .mobile-nav-ring,
    #mobileMenuExpanded.mobile-sidebar-nav ul li a.btn > img,
    #mobileMenuExpanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap .mobile-nav-ring,
    .mobile-sidebar-nav .btn > img {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        height: auto !important;
    }
    .mobile-nav-swap-stack {
        width: min(90vw, 360px) !important;
        height: 64px !important;
        min-height: 64px !important;
    }
    .mobile-menu-expanded.mobile-sidebar-nav ul li a.btn.mobile-nav-swap img.mobile-nav-label {
        max-width: min(90vw, 360px) !important;
        height: 55px !important;
        max-height: none !important;
        object-fit: contain;
    }
    .mobile-nav-label {
        height: 55px !important;
    }
}

@media (max-width: 480px) {
    .bottom-menu-content {
        gap: 30px;
        padding: 0 10px;
    }
    
    .bottom-menu-item img {
        height: 8px !important;
    }
    
    /* story.svg、gallery.svg、context.svg、exhibitions.svg、interviews.svg、press_features.svgはcontext.htmlと同じサイズを維持 */
    .bottom-menu-item img[src*="story.svg"],
    .bottom-menu-item img[src*="gallery.svg"],
    .bottom-menu-item img[src*="context.svg"],
    .bottom-menu-item img[src*="exhibitions.svg"],
    .bottom-menu-item img[src*="interviews.svg"],
    .bottom-menu-item img[src*="press_features.svg"],
    .bottom-menu-item img[src*="contact.svg"] {
        height: 17px !important;
    }
    
    /* press_features_2.svg も同サイズに統一 */
    .bottom-menu-item img[src*="press_features_2.svg"] {
        height: 17px !important;
    }
    
}

/* 黒背景ページ用：サイドリング/右ロゴ/ボトムSVG の透明度調整 */
body.dark-ui #side-menu {
    opacity: 0.85;
}
body.dark-ui #main-menu2 ul li a img {
    opacity: 0.72 !important;
}
body.dark-ui #bottomMenuBar .bottom-menu-item img,
body.dark-ui #bottomMenuBar .bottom-menu-item:hover img,
body.dark-ui #bottomMenuBar .bottom-menu-item.active img {
    opacity: 0.62 !important;
}
/* 黒背景ページ：モバイル/タブレットのドロップダウン背景も黒の同透け感に */
body.dark-ui .mobile-menu-expanded {
    background: rgba(10, 10, 10, 0.8) !important;
}
/* 黒背景ページ：ドロップダウンは暗背景のため、ナビのリング／SVGを反転して白表示（exclusion+filter:none だと黒のまま背景に溶ける） */
body.dark-ui .mobile-menu-expanded ul li a {
    mix-blend-mode: normal;
}
body.dark-ui .mobile-menu-expanded ul li a > img,
body.dark-ui .mobile-menu-expanded ul li a.mobile-nav-swap .mobile-nav-ring,
body.dark-ui .mobile-menu-expanded ul li a.mobile-nav-swap .mobile-nav-label {
    filter: brightness(0) invert(1);
    mix-blend-mode: normal;
}

/* モーダル作品キャプション（body の EB Garamond を上書き）— 今後追加するキャプションも同フォント */
.modal-caption {
    font-family: "Helvetica Now", Helvetica, Arial, sans-serif !important;
}
.modal-caption .modal-caption-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.modal-caption .modal-caption-link:hover {
    opacity: 0.88;
}