/* ベース */
#gallery {
background: #ab0000 url(../img/bg_logo.webp) no-repeat center / 40vw 40vw;
/* background: #0b0f14; */
color: #fff;
/* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
height: 100%;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

/* ヒーロー領域 */
#gallery .hero {
/*background: radial-gradient(1200px 600px at 30% 20%, #0f1720 0%, transparent 60%),linear-gradient(180deg, #0b0f14 0%, #0b0f14 40%, #0b0f14 100%);*/
/*background: #ab0000;*/
/*background-image: url(../img/bg_logo.webp);
background-color: rgba(171,0,0,0.8);
background-blend-mode:lighten;
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
*/
position: relative;
height: 80vh; /* 必要に応じて調整 */
max-height: 900px;
min-height: 420px;
overflow: hidden;
isolation: isolate;
width: 100%;
}
#gallery .hero__title {
position: absolute;
inset: 0 auto auto 0;
z-index: 10;
padding: 2rem 2rem 0 2rem;
pointer-events: none;
}
#gallery .hero__title h1 {
margin: 0;
font-size: clamp(1.6rem, 2.5vw + 1rem, 3.4rem);
line-height: 1.1;
letter-spacing: 0.01em;
text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
}

/* 浮遊画像 */
#gallery .float-item {
position: absolute;
will-change: transform;
user-select: none;
cursor: pointer;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
transition: opacity .25s ease, transform .25s ease;
}
#gallery .float-item:focus-visible {
outline: 3px solid #88ccff;
outline-offset: 2px;
}
#gallery .float-item--dimmed {
opacity: .25;
}

/* モーダル（拡大表示） */
#gallery .modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
z-index: 999;
}
#gallery .modal__inner {
position: relative;
max-width: min(92vw, 1200px);
max-height: min(86vh, 820px);
}
#gallery .modal__img {
display: block;
max-width: 100%;
max-height: 100%;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
#gallery .modal__close {
position: absolute;
top: -14px;
right: -14px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(20,24,28,.9);
color: #fff;
font-size: 22px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
#gallery .modal__close:hover { opacity: .95; }

/* ヒントテキスト（任意） */
#gallery .hero__hint {
position: absolute;
bottom: 12px;
right: 12px;
font-size: .85rem;
opacity: .7;
pointer-events: none;
}

/* TAB  -------------------------------------------------- */
@media screen and (max-width:1000px) {
#gallery .hero{
/*background: #ab0000 url(../img/bg_logo.webp) no-repeat center / 30%;*/
min-height: 360px;
height: 30vh;
}