/* /assets/css/benmi-home.css?v=20260901-edit-01
   BENMI HOME design + BENMI outer-shell source of truth.
   Detail/event pages load this first, then add benmi-event.css for main internals. */

body[data-page="benmi"][data-benmi-kind="home"]{
  --benmi-home-logo-fadeout-delay:3000ms;
  --benmi-home-disc-fade:2300ms;
  --benmi-home-panel: rgba(2, 10, 24, .78);
  --benmi-home-panel-border: rgba(205, 224, 248, .42);
  --benmi-home-ink: rgba(248, 250, 255, .96);
  --benmi-home-muted: rgba(228, 235, 245, .74);
  --benmi-home-line: rgba(190, 211, 238, .24);
  --benmi-home-nav-a: rgba(0, 3, 10, .98);
  --benmi-home-nav-b: rgba(7, 20, 43, .98);
  --benmi-home-nav-c: rgba(0, 3, 10, .98);
  background:#000;
  color:var(--benmi-home-ink);
}

/* ---------------------------------------------------------
   Home shell / common-header integration
   --------------------------------------------------------- */
body[data-page="benmi"][data-benmi-kind="home"] #siteSubHeader{
  margin-bottom:0 !important;
  pointer-events:auto !important;
  background:transparent;
}

body[data-page="benmi"][data-benmi-kind="home"] #siteMain{
  background:transparent;
}

body[data-page="benmi"][data-benmi-kind="home"] #siteMain{
  overflow:visible;
}

/* Keep the home main container out of a transformed containing block once
   the shared reveal has started; this keeps the BENMI nav reliably sticky. */
body[data-page="benmi"][data-benmi-kind="home"].is-ready #siteMain{
  transform:none;
}

body[data-page="benmi"][data-benmi-kind="home"] #siteFooter{
  background:#000;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-main{
  width:100%;
  max-width:none;
  padding:0;
  margin:0;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-view{
  width:100%;
  color:var(--benmi-home-ink);
  background:transparent;
}

/* BENMI main background package.
   The KV/subheader never owns the permanent night background.
   Only the main surface does, and it fades in during the final part of
   the moving-backdrop animation so the two backgrounds crossfade. */
body[data-page="benmi"] .benmi-main-bg-surface{
  position:relative;
  isolation:isolate;
  background:transparent !important;
}

body[data-page="benmi"] .benmi-main-bg-surface::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:#020711;
  background-image:
    linear-gradient(180deg, rgba(0,4,12,.18) 0%, rgba(1,6,16,.26) 38%, rgba(0,0,0,.72) 100%),
    url("/soz/backdrop/page-black.webp?v=20260831-edit-02");
  background-position:top center, top center;
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat;
  opacity:1;
}

html.js body[data-page="benmi"]:not(.is-ready) .benmi-main-bg-surface::before{
  opacity:0;
}

html.js body[data-page="benmi"].is-ready .benmi-main-bg-surface::before{
  animation:benmiMainBackdropCrossfade var(--motion-page-sky-total,2500ms) cubic-bezier(.22,.61,.36,1) both;
}

@keyframes benmiMainBackdropCrossfade{
  0%,58%{ opacity:0; }
  68%{ opacity:.12; }
  82%{ opacity:.58; }
  100%{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  html.js body[data-page="benmi"].is-ready .benmi-main-bg-surface::before{
    animation:benmiMainBackdropReduced 450ms ease-out both;
  }
  @keyframes benmiMainBackdropReduced{
    0%{opacity:0;}
    100%{opacity:1;}
  }
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-content-width{
  width:var(--bgw);
  max-width:var(--max);
  margin-inline:auto;
}

/* Hide fixed-page desktop overlay nav on BENMI home. SP overlay MENU remains common. */
body[data-page="benmi"][data-benmi-kind="home"] #navDesktopSlot{
  display:none !important;
}

/* BENMI HOME logo choreography, shared by PC and SP.
   The logo is present from the first frame, then starts fading out at the
   same cue used to bring in the KV and information panels. */
@keyframes benmiHomeLogoFadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}

body[data-page="benmi"][data-benmi-kind="home"].is-ready #siteHeader .brand-link{
  animation:benmiHomeLogoFadeOut 650ms ease-in-out var(--benmi-home-logo-fadeout-delay,3000ms) forwards;
}

@media (prefers-reduced-motion:reduce){
  body[data-page="benmi"][data-benmi-kind="home"].is-ready #siteHeader .brand-link{
    animation:none;
    opacity:0;
  }
}



/* =========================================================
   BENMI HOME intro layers: DISC -> KV
   ---------------------------------------------------------
   Common fixed-page timing is preserved:
     DISC : header/logo timing
            --motion-fixed-hf-delay + --motion-fixed-fade
     KV   : former subheader timing
            --motion-fixed-subheader-delay + --motion-fixed-fade

   #siteSubHeader itself must stay neutral, otherwise its parent opacity
   would prevent DISC from appearing before KV.
   ========================================================= */
html.js body[data-page="benmi"][data-benmi-kind="home"] #siteSubHeader{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto;
}

@keyframes benmiHomeKvFadeIn{
  from{
    opacity:0;
    transform:translateY(var(--motion-fixed-shift,4px));
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv{
  opacity:0;
  transform:translateY(var(--motion-fixed-shift,4px));
  transition:none !important;
  animation:none;
  will-change:opacity, transform;
}

html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
  opacity:0;
  transition:
    opacity var(--motion-fixed-fade, 1500ms) var(--ease-out, ease-out),
    transform .18s ease;
  will-change:opacity;
}

/* KV timing is handled by benmiHomeKvFadeIn below. */

html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
  opacity:1;
  transition-delay:
    var(--motion-fixed-subheader-delay, 1500ms),
    0ms;
}




/* DISC fade timing.
   DISC is discovered/preloaded by benmi/index.html before the injected
   subheader arrives.  Once BENMI HOME becomes ready, it fades continuously
   from the first frame through the full 2300ms window.

   linear is deliberate: ease-out front-loads opacity and made the image
   look as though the fade had finished almost immediately. */
@keyframes benmiHomeDiscFadeIn{
  0%{
    opacity:0;
    transform:translateY(var(--motion-fixed-shift,4px));
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc{
  opacity:0;
  transform:translateY(var(--motion-fixed-shift,4px));
  transition:none !important;
  animation:none;
  will-change:opacity, transform;
}

html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc{
  animation:benmiHomeDiscFadeIn var(--benmi-home-disc-fade,2300ms) linear 0ms both;
}


/* BENMI HOME choreography shared by PC and SP:
   - logo is visible from the first frame (no fade-in)
   - DISC uses its independent immediate fade
   - at the shared 3000ms cue, logo fade-out and KV/panel fade-in start
   - panel keyframes use fill-mode:both so they stay hidden during the delay
     even if is-ready is present before the first paint. */
@keyframes benmiHomePanelFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Common header wrapper must not fade the logo in. */
html.js body[data-page="benmi"][data-benmi-kind="home"] #siteHeader{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto;
}

html.js body[data-page="benmi"][data-benmi-kind="home"] #siteHeader .brand-link{
  opacity:1;
  transform:none;
}

html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv{
  animation:
    benmiHomeKvFadeIn
    var(--motion-fixed-fade,1500ms)
    var(--ease-out,ease-out)
    var(--benmi-home-logo-fadeout-delay,3000ms)
    both;
}

html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
  opacity:0;
}

html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
  animation:
    benmiHomePanelFadeIn
    var(--motion-fixed-fade,1500ms)
    var(--ease-out,ease-out)
    var(--benmi-home-logo-fadeout-delay,3000ms)
    both;
  transition:transform .18s ease;
}

@media (prefers-reduced-motion:reduce){
  html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc,
  html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv,
  html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
    opacity:1;
    transform:none;
    transition:none !important;
    animation:none !important;
    will-change:auto;
  }
}


/* ---------------------------------------------------------
   Key visual + event shortcut panels
   --------------------------------------------------------- */
.benmi-home-top{
  width:100%;
  background:transparent;
  color:var(--benmi-home-ink);
}

.benmi-home-hero-shell{
  width:var(--bgw);
  max-width:var(--max);
  margin:0 auto;
}

.benmi-home-hero{
  position:relative;
  width:100%;
  background:transparent;
}

/* During the shared flowing-night intro, the KV area must not own a
   separate opaque underlay.  Let the same body::before backdrop show
   through both inside and outside the hero, exactly as on the top page.
   Once that backdrop fades out, the body's black background becomes the
   common underlay automatically, so no rectangular colour step appears. */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero-shell,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv{
  background:transparent !important;
}

.benmi-home-disc,
.benmi-home-disc img,
.benmi-home-kv,
.benmi-home-kv img{
  display:block;
  width:100%;
}

.benmi-home-disc{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.benmi-home-kv{
  position:relative;
  z-index:1;
}

.benmi-home-disc img,
.benmi-home-kv img{
  height:auto;
  object-fit:contain;
  object-position:center;
}

body[data-page="benmi"] .benmi-detail-kv[hidden],
body[data-page="benmi"] [data-benmi-kv-surface][hidden]{
  display:none !important;
}

.benmi-home-hero-shell{
  position:relative;
}

.benmi-kv-panels{
  pointer-events:none;
}

.benmi-kv-panel{
  position:relative;
  z-index:3;
  display:block;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  padding:0;
  font-family:var(--font-body);
  background:none;
  border:0;
  pointer-events:auto;
  transition:transform .18s ease;
}

.benmi-kv-panel:hover,
.benmi-kv-panel:focus-visible{
  transform:translateY(-1px);
}

.benmi-kv-panel__primary,
.benmi-kv-panel__action{
  position:relative;
  isolation:isolate;
  display:block;
  overflow:hidden;
  background-color:rgba(3,10,27,.68);
  border:1px solid rgba(190,211,238,.42);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}

/* Panel colour stays underneath; groniq.png is laid over it at low opacity.
   Change --benmi-panel-groniq-opacity to tune texture strength globally. */
.benmi-kv-panel__primary::before,
.benmi-kv-panel__action::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url("/soz/benmiframe/groniq.png?v=20260831-edit-02") center / cover no-repeat;
  opacity:var(--benmi-panel-groniq-opacity,.60);
  pointer-events:none;
}

.benmi-kv-panel__date,
.benmi-kv-panel__title,
.benmi-kv-panel__action-text{
  position:relative;
  z-index:1;
  display:block;
  font-family:"wapuro","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  letter-spacing:.03em;
  color:#c3d5e0;
  -webkit-text-stroke:.7px #000;
  paint-order:stroke fill;
  text-shadow:
    2px 1px 1px rgba(0,0,0,.95),
    4px 2px 3px rgba(0,0,0,.55);
}

.benmi-kv-panel__date{
  padding:10px 15px 0;
  font-size:12px;
  line-height:1.25;
  color:#c3d5e0;
}

.benmi-kv-panel__title{
  padding:4px 15px 11px;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
  color:#c3d5e0;
}

.benmi-kv-panel__action{
  margin-top:6px;
  padding:8px 15px 9px;
  font-size:11px;
  line-height:1.25;
  color:#c3d5e0 !important;
  font-weight:700;
  letter-spacing:.03em;
}

.benmi-kv-panel:hover .benmi-kv-panel__date,
.benmi-kv-panel:hover .benmi-kv-panel__title,
.benmi-kv-panel:hover .benmi-kv-panel__action-text,
.benmi-kv-panel:focus-visible .benmi-kv-panel__date,
.benmi-kv-panel:focus-visible .benmi-kv-panel__title,
.benmi-kv-panel:focus-visible .benmi-kv-panel__action-text{
  text-shadow:
    2px 1px 1px rgba(0,0,0,.95),
    4px 2px 3px rgba(0,0,0,.55);
}

@media (min-width:768px){
  .benmi-kv-panels{
    position:absolute;
    inset:0;
  }

  .benmi-kv-panel--upper{
    position:absolute;
    top:7%;
    right:2.2%;
    width:min(27%,280px);
  }

  .benmi-kv-panel--lower{
    position:absolute;
    left:1.6%;
    bottom:4.2%;
    width:min(36%,340px);
  }
}

@media (max-width:767px){
  .benmi-kv-panels{
    position:static;
    display:grid;
    gap:10px;
    width:100%;
    padding:14px 0 18px;
  }

  .benmi-kv-panel{
    width:min(84.6vw,520px);
    margin-inline:auto;
    text-align:center;
  }

  .benmi-kv-panel__action{
    margin-top:4px;
  }
}


/* SP adaptive first-view panel.
   If the untouched KV has at least this much bottom letterbox space,
   one preferred panel enters the first view. The panel may shrink the KV
   slightly; the threshold intentionally does not equal panel height. */
body[data-page="benmi"][data-benmi-kind="home"]{
  --benmi-sp-firstview-panel-min-gap:48px;
}

.benmi-kv-firstview-panel-slot{
  display:none;
}

@media (max-width:767px){
  .benmi-kv-firstview-panel-slot:not(:empty){
    display:block;
    flex:0 0 auto;
    width:100%;
    padding:4px 0 8px;
  }

  .benmi-kv-firstview-panel-slot .benmi-kv-panel{
    width:min(84.6vw,520px);
    margin-inline:auto;
    text-align:center;
  }

  .benmi-kv-panels:empty{
    display:none;
  }
}

/* SP relocation target for the manually editable hero information panels.
   Hidden on PC; on SP it sits between the BENMI divider and NEWS. */
.benmi-kv-panels-sp-slot{
  display:none;
}

@media (max-width:767px){
  .benmi-kv-panels-sp-slot{
    display:block;
    width:100%;
    background:#000;
  }

  .benmi-kv-panels-sp-slot .benmi-kv-panels{
    position:static;
    width:100%;
    max-width:none;
    margin-inline:0;
    padding:14px 0 18px;
  }
}

/* ---------------------------------------------------------
   PC sticky global menu / SP visual divider
   --------------------------------------------------------- */
.benmi-global-bar{
  position:relative;
  width:100%;
  color:#fff;
  background-color:#070d25;
  background-image:url("/soz/benmiframe/sticky.png?v=20260831-edit-02"), url("/soz/benmiframe/sticky.png?v=20260831-edit-02");
  background-position:center, center;
  background-size:100% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  border-top:1px solid rgba(128,159,201,.16);
  border-bottom:1px solid rgba(112,149,197,.22);
}

@media (min-width:768px){
  .benmi-global-bar{
    position:sticky;
    top:0;
    z-index:1500;
    min-height:86px;
  }
  .benmi-global-bar__inner{
    position:relative;
    width:var(--bgw);
    max-width:var(--max);
    min-height:96px;
    margin:0 auto;
    padding:44px 0 4px;
    box-sizing:border-box;
  }
  .benmi-global-bar__brand{
    position:absolute;
    top:12px;
    left:50%;
    width:208px;
    transform:translateX(-50%);
    opacity:.76;
    text-decoration:none;
    filter:brightness(1.12) drop-shadow(0 0 7px rgba(188,216,255,.32));
    transition:filter .18s ease, transform .18s ease, opacity .18s ease;
  }
  .benmi-global-bar__brand:hover,
  .benmi-global-bar__brand:focus-visible{
    opacity:.96;
    filter:brightness(1.28) drop-shadow(0 0 10px rgba(204,226,255,.56));
    transform:translateX(-50%) translateY(-1px);
  }
  .benmi-global-bar__brand img{
    display:block;
    width:100%;
    height:auto;
  }
  .benmi-global-bar__social{
    position:absolute;
    top:10px;
    right:0;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .benmi-global-bar__social a{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    opacity:1;
    filter:brightness(1.2) saturate(1.18) drop-shadow(0 0 4px rgba(182,212,255,.18));
    transition:opacity .18s ease, transform .18s ease, filter .18s ease;
  }
  .benmi-global-bar__social a:hover,
  .benmi-global-bar__social a:focus-visible{
    opacity:1;
    filter:brightness(1.28) saturate(1.24) drop-shadow(0 0 5px rgba(196,223,255,.26));
    transform:translateY(-1px);
  }
  .benmi-global-bar__social img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .benmi-global-nav{
    display:grid;
    grid-template-columns:repeat(9, minmax(0, 1fr));
    align-items:center;
    gap:4px;
    width:100%;
  }
  .benmi-global-nav > a,
  .benmi-global-nav > .is-disabled{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:50px;
    padding:3px 3px 3px;
    color:rgba(242,247,255,.90);
    text-decoration:none;
    text-align:center;
    isolation:isolate;
  }
  .benmi-global-nav > a::before,
  .benmi-global-nav > .is-current::before{
    content:"";
    position:absolute;
    inset:3px 0;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(170,207,255,.22) 0%, rgba(98,145,215,.08) 46%, rgba(0,0,0,0) 74%);
    opacity:0;
    transform:scale(.72);
    transition:opacity .2s ease, transform .2s ease;
  }
  .benmi-global-nav > a:hover::before,
  .benmi-global-nav > a:focus-visible::before{
    inset:-2px -10px -1px;
    background:radial-gradient(ellipse at center, rgba(189,220,255,.46) 0%, rgba(90,152,235,.24) 42%, rgba(30,79,156,.08) 62%, rgba(0,0,0,0) 78%);
    opacity:1;
    transform:scale(1.12);
  }
  .benmi-global-nav > a.is-current::before{
    inset:-2px -10px -1px;
    background:radial-gradient(ellipse at center, rgba(189,220,255,.46) 0%, rgba(90,152,235,.24) 42%, rgba(30,79,156,.08) 62%, rgba(0,0,0,0) 78%);
    opacity:1;
    transform:scale(1.12);
  }
  .benmi-global-nav span:not(.is-disabled),
  .benmi-global-nav > a > span,
  .benmi-global-nav > .is-disabled > span{
    font-family:var(--nav-pc-font);
    font-size:clamp(12px, .95vw, 16px);
    line-height:1;
    letter-spacing:.08em;
    white-space:nowrap;
  }
  .benmi-global-nav small{
    display:block;
    margin-top:5px;
    font-family:var(--font-body);
    font-size:8px;
    line-height:1.15;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .benmi-global-nav .is-current,
  .benmi-global-nav > a:hover,
  .benmi-global-nav > a:focus-visible{
    color:#fff;
    text-shadow:0 0 6px rgba(228,240,255,.76), 0 0 16px rgba(116,178,255,.76);
  }
  .benmi-global-nav .is-current small,
  .benmi-global-nav > a:hover small,
  .benmi-global-nav > a:focus-visible small{
    color:#fff;
    text-shadow:0 0 8px rgba(172,211,255,.70);
  }
  .benmi-global-nav .is-disabled{
    opacity:.34;
    cursor:default;
  }
}

@media (max-width:767px){
  .benmi-global-bar{
    position:relative;
    height:28px;
    min-height:28px;
  }
  .benmi-global-bar__inner,
  .benmi-global-bar__brand,
  .benmi-global-bar__social,
  .benmi-global-nav{
    display:none !important;
  }
}

/* ---------------------------------------------------------
   Full-width chapter bands
   --------------------------------------------------------- */
.benmi-home-section{
  width:100%;
}

.benmi-home-section + .benmi-home-section{
  margin-top:clamp(80px, 7vw, 120px);
}

.benmi-section-band{
  width:100%;
  min-height:75px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  background:url("/soz/benmiframe/obi.png?v=20260831-edit-02") center / cover no-repeat;
  border-top:1px solid rgba(182,205,236,.14);
  border-bottom:1px solid rgba(182,205,236,.18);
}

.benmi-section-band__en{
  font-family:var(--nav-pc-font);
  font-size:26px;
  line-height:1;
  letter-spacing:.12em;
}

.benmi-section-band__ja{
  margin-top:6px;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.15;
  letter-spacing:.04em;
  color:#111F43 !important;
  font-weight:700;
  -webkit-text-stroke:0;
  text-shadow:none;
}

@media (max-width:767px){
  .benmi-home-section + .benmi-home-section{
    margin-top:48px;
  }
  .benmi-section-band{ min-height:62px; }
  .benmi-section-band__en{ font-size:22px; }
  .benmi-section-band__ja{ font-size:11px; margin-top:4px; }
}


.benmi-news-section{
  padding-top:clamp(12px, 1.1vw, 18px);
}

/* ---------------------------------------------------------
   News
   --------------------------------------------------------- */
.benmi-news-list{
  padding-top:22px;
}

.benmi-news-row{
  display:grid;
  grid-template-columns:minmax(88px, 120px) 1fr;
  gap:18px;
  align-items:start;
  padding:13px 2px;
  border-bottom:1px solid var(--benmi-home-line);
  color:var(--benmi-home-ink) !important;
  text-decoration:none !important;
}

.benmi-news-row__date{
  font-size:13px;
  letter-spacing:.06em;
  color:rgba(236,243,255,.86);
}

.benmi-news-row__text{
  font-size:16px;
  line-height:1.72;
}

a.benmi-news-row:hover .benmi-news-row__text,
a.benmi-news-row:focus-visible .benmi-news-row__text{
  text-decoration:underline;
  text-decoration-color:#fff;
  text-underline-offset:.18em;
}

@media (max-width:767px){
  .benmi-news-row{
    grid-template-columns:1fr;
    gap:3px;
    padding:12px 0;
  }
  .benmi-news-row__date{ font-size:12px; }
  .benmi-news-row__text{ font-size:14px; }
}

/* ---------------------------------------------------------
   ABOUT gallery
   --------------------------------------------------------- */
.benmi-about-content{
  padding-top:30px;
}

.benmi-gallery{
  width:100%;
}

.benmi-gallery__stage{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#02050b;
}

.benmi-gallery__image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:1;
  transition:opacity .5s ease;
}

.benmi-gallery.is-switching .benmi-gallery__image,
.benmi-gallery.is-switching .benmi-gallery__copy{
  opacity:0;
}

.benmi-gallery__veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(270deg, rgba(0,4,12,.58) 0%, rgba(0,4,12,.30) 32%, rgba(0,4,12,0) 62%);
}

.benmi-gallery__copy{
  position:absolute;
  z-index:2;
  width:min(42%, 430px);
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.78);
  transition:opacity .5s ease;
}

.benmi-gallery__copy[data-position="right-top"]{ top:11%; right:7%; text-align:left; }
.benmi-gallery__copy[data-position="right-center"]{ top:50%; right:7%; transform:translateY(-50%); }
.benmi-gallery__copy[data-position="right-bottom"]{ right:7%; bottom:11%; }
.benmi-gallery__copy[data-position="left-top"]{ top:11%; left:7%; }
.benmi-gallery__copy[data-position="left-center"]{ top:50%; left:7%; transform:translateY(-50%); }
.benmi-gallery__copy[data-position="left-bottom"]{ left:7%; bottom:11%; }

.benmi-gallery__copy h3{
  margin:0;
  font-family:var(--font-heading);
  font-size:clamp(22px, 2.8vw, 36px);
  line-height:1.2;
  letter-spacing:.03em;
}

.benmi-gallery__copy p{
  margin:.7em 0 0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.7;
}

.benmi-gallery__arrow{
  position:absolute;
  z-index:3;
  top:50%;
  width:38px;
  height:50px;
  border:1px solid rgba(218,231,249,.50);
  border-radius:0;
  background:rgba(0,11,30,.78);
  color:#fff;
  font-size:30px;
  line-height:1;
  transform:translateY(-50%);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}

.benmi-gallery__arrow:hover,
.benmi-gallery__arrow:focus-visible{
  background:rgba(13,38,75,.92);
  border-color:rgba(235,243,255,.82);
}

.benmi-gallery__arrow--prev{ left:12px; }
.benmi-gallery__arrow--next{ right:12px; }

.benmi-gallery__thumbs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(96px, 1fr);
  gap:10px;
  width:min(86%, 940px);
  margin:14px auto 0;
  position:relative;
  z-index:4;
}

.benmi-gallery__thumb{
  appearance:none;
  border:2px solid rgba(255,255,255,.64);
  border-radius:0;
  padding:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#000;
  opacity:1;
  filter:brightness(.82) saturate(.90);
  cursor:pointer;
  transition:border-color .2s ease, filter .2s ease, box-shadow .2s ease;
}

.benmi-gallery__thumb:hover,
.benmi-gallery__thumb:focus-visible{
  filter:brightness(1) saturate(1);
}

.benmi-gallery__thumb.is-current{
  opacity:1;
  filter:brightness(1) saturate(1);
  border-color:rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(145,184,235,.48);
}

.benmi-gallery__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.benmi-about-description{
  width:min(88%, 820px);
  margin:54px auto 0;
  font-size:15px;
  line-height:2.05;
  color:rgba(247,250,255,.95);
  text-align:center;
}

@media (max-width:767px){
  .benmi-about-content{ padding-top:22px; }
  .benmi-gallery__copy{
    width:58%;
  }
  .benmi-gallery__copy h3{ font-size:clamp(18px, 5.4vw, 26px); }
  .benmi-gallery__copy p{ font-size:12px; line-height:1.62; }
  .benmi-gallery__arrow{ width:34px; height:46px; font-size:26px; }
  .benmi-gallery__thumbs{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    margin:12px 0 0;
    gap:8px;
  }

  .benmi-gallery__thumb{
    flex:0 0 calc((100% - 16px) / 3);
    min-width:0;
  }
  .benmi-about-description{
    width:100%;
    margin-top:36px;
    font-size:14px;
    line-height:1.95;
  }
}

/* ---------------------------------------------------------
   EVENTS subsection titles
   --------------------------------------------------------- */
.benmi-events-content{
  padding-top:32px;
}

.benmi-event-group + .benmi-event-group{
  margin-top:clamp(56px, 5.8vw, 82px);
}

.benmi-subsection-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0 0 28px;
  padding-bottom:0;
  border-bottom:0;
  text-align:center;
}

.benmi-subsection-title__en{
  font-family:var(--nav-pc-font);
  font-size:22px;
  line-height:1;
  letter-spacing:.10em;
  color:#fff;
}

.benmi-subsection-title__ja{
  font-family:var(--font-body);
  font-size:11px;
  line-height:1.2;
  color:var(--benmi-home-muted);
}

@media (max-width:767px){
  .benmi-event-group + .benmi-event-group{ margin-top:46px; }
  .benmi-subsection-title{ gap:5px; margin-bottom:18px; }
  .benmi-subsection-title__en{ font-size:19px; }
  .benmi-subsection-title__ja{ font-size:9px; }
}

/* ---------------------------------------------------------
   Upcoming / badges
   --------------------------------------------------------- */
.benmi-next-card,
.benmi-upcoming-card,
.benmi-latest-card,
.benmi-archive-card{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  color:inherit !important;
  text-decoration:none !important;
}

.benmi-event-media{
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:visible;
  background:#000;
}

.benmi-event-media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  background:#000;
}

.benmi-event-media--next{ aspect-ratio:16 / 9; }
.benmi-event-media--upcoming{ aspect-ratio:3 / 2; }

@keyframes benmiBadgeSignal{
  0%,63%,68%,73%,100%{ opacity:1; }
  65%{ opacity:.62; }
  66%{ opacity:.92; }
  70%{ opacity:.76; }
}

@keyframes benmiBadgeScan{
  0%,54%{
    background-position:0 -25%, center;
  }
  82%,100%{
    background-position:0 125%, center;
  }
}

.benmi-event-sticker{
  position:absolute;
  top:0;
  right:5%;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  color:#fff;
  font-family:var(--nav-pc-font);
  font-style:normal;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
  white-space:nowrap;
  writing-mode:vertical-rl;
  text-orientation:sideways;
  text-shadow:2px 0 0 rgba(2,8,28,.88);
  width:auto;
  height:100%;
  border-radius:0;
  aspect-ratio:98 / 1024;
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(225,236,242,.38) 48%,
      transparent 100%
    ) 0 -25% / 100% 18% no-repeat,
    url("/soz/benmiframe/badge.png?v=20260831-edit-02") center / 100% 100% no-repeat;
  filter:drop-shadow(2px 0 0 rgba(2,8,28,.76));
  animation:
    benmiBadgeSignal 4.2s steps(1, end) infinite,
    benmiBadgeScan 4.2s steps(10, end) infinite;
  will-change:opacity, background-position;
}

.benmi-event-media--next .benmi-event-sticker{
  font-size:16px;
}

.benmi-event-media--upcoming .benmi-event-sticker{
  font-size:12px;
}

@media (prefers-reduced-motion:reduce){
  .benmi-event-sticker{
    animation:none;
    will-change:auto;
    background-position:0 110%, center;
  }
}

.benmi-event-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding-top:12px;
}

.benmi-event-meta strong,
.benmi-event-meta span{
  display:block;
  font-size:19px;
  line-height:1.48;
  color:rgba(247,250,255,.96);
  opacity:1;
}

.benmi-upcoming-lower{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(220px, .95fr);
  gap:clamp(24px, 4vw, 52px);
  align-items:stretch;
  margin-top:38px;
}

.benmi-upcoming-lower.has-no-upcoming{
  grid-template-columns:1fr;
}

.benmi-upcoming-lower > *,
.benmi-upcoming-list,
.benmi-upcoming-card,
.benmi-upcoming-description{
  min-width:0;
  max-width:100%;
}

.benmi-upcoming-description{
  overflow-wrap:anywhere;
  display:flex;
  align-items:flex-start;
}

.benmi-upcoming-list{
  display:grid;
  gap:34px;
}

.benmi-upcoming-card__info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding-top:10px;
}

.benmi-upcoming-card__info strong,
.benmi-upcoming-card__info span{
  display:block;
  font-size:19px;
  line-height:1.48;
  color:rgba(247,250,255,.96);
  opacity:1;
}

.benmi-upcoming-description{
  font-size:15px;
  line-height:2.02;
  color:rgba(245,248,253,.93);
  text-align:center;
}

.benmi-upcoming-description p{
  margin:0;
}

@media (max-width:767px){
    .benmi-event-media--next .benmi-event-sticker{
    font-size:13px;
  }
  .benmi-event-media--upcoming .benmi-event-sticker{
    font-size:10px;
  }
  .benmi-event-meta{
    display:block;
  }
  .benmi-event-meta strong,
  .benmi-event-meta span{ display:block; font-size:15px; }
  .benmi-event-meta span{ margin-top:3px; }
  .benmi-upcoming-lower{
    grid-template-columns:1fr;
    gap:26px;
    margin-top:30px;
  }
  .benmi-upcoming-description{ font-size:14px; line-height:1.92; }
}

/* ---------------------------------------------------------
   Latest event
   --------------------------------------------------------- */
.benmi-latest-card{
  display:block;
}

.benmi-latest-card__images{
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:visible;
}

.benmi-latest-card__main{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center;
  background:#000;
}

.benmi-latest-card__sub{
  position:absolute;
  right:2.8%;
  bottom:4.2%;
  width:33%;
  max-width:33%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(224,237,253,.64);
  background:#000;
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}

.benmi-latest-card__copy{
  margin-top:22px;
}

.benmi-latest-card__copy h4{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
}

.benmi-latest-card__copy time{
  display:block;
  margin-top:5px;
  font-size:18px;
  line-height:1.45;
  color:rgba(247,250,255,.96);
  opacity:1;
}


/* LATEST with latestS43:
   Use the SP picture-in-picture composition on every viewport.
   M occupies the full top row; S sits at lower-right, with about 40%
   of its height overlapping M. Date/title fill the lower-left space. */
.benmi-latest-card.has-sub{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42%;
  grid-template-rows:auto auto;
  column-gap:clamp(10px,1.5vw,18px);
  align-items:start;
}

.benmi-latest-card.has-sub .benmi-latest-card__images{
  display:contents;
}

.benmi-latest-card.has-sub .benmi-latest-card__main{
  grid-column:1 / -1;
  grid-row:1;
  position:static;
  width:100%;
  max-width:100%;
  z-index:1;
}

.benmi-latest-card.has-sub .benmi-latest-card__sub{
  grid-column:2;
  grid-row:1 / 3;
  align-self:end;
  justify-self:stretch;
  position:static;
  width:100%;
  max-width:none;
  aspect-ratio:4 / 3;
  z-index:2;
  box-shadow:0 9px 22px rgba(0,0,0,.40);
}

/* Left column width is 58% of the card.
   3.07:1 makes the lower row about 18.9% of card width.
   Since S is 42% wide at 4:3, this leaves roughly 60% of S below M,
   i.e. about 40% of S overlaps the main image on both PC and SP. */
.benmi-latest-card.has-sub .benmi-latest-card__copy{
  grid-column:1;
  grid-row:2;
  min-width:0;
  aspect-ratio:3.07 / 1;
  margin-top:0;
  padding:clamp(9px,1.35vw,14px) 2px 0 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.benmi-latest-card.has-sub .benmi-latest-card__copy time{
  order:-1;
  margin:0 0 clamp(4px,.55vw,7px);
  font-size:clamp(12px,1.45vw,16px);
  line-height:1.35;
  letter-spacing:.02em;
  color:rgba(247,250,255,.78);
}

.benmi-latest-card.has-sub .benmi-latest-card__copy h4{
  margin:0;
  font-size:clamp(14px,1.7vw,18px);
  line-height:1.45;
  overflow-wrap:anywhere;
}

@media (max-width:767px){
  /* LATEST without a sub image keeps the ordinary mobile stack. */
  .benmi-latest-card__images{
    padding-bottom:0;
  }

  .benmi-latest-card:not(.has-sub) .benmi-latest-card__copy h4,
  .benmi-latest-card:not(.has-sub) .benmi-latest-card__copy time{
    font-size:16px;
  }
}

/* ---------------------------------------------------------
   Archive auto columns
   --------------------------------------------------------- */
.benmi-archive-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:26px 20px;
}

@media (max-width:980px) and (min-width:768px){
  .benmi-archive-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}


.benmi-archive-card{
  display:block;
  transition:transform .2s ease;
}

.benmi-archive-card__image{
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:#000;
  border:0;
}

.benmi-archive-card__image img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.90);
  transition:filter .2s ease;
}

.benmi-archive-card strong,
.benmi-archive-card time{
  display:block;
}

.benmi-archive-card strong{
  margin-top:9px;
  font-size:15px;
  line-height:1.5;
}

.benmi-archive-card time{
  margin-top:3px;
  font-size:15px;
  line-height:1.5;
  color:rgba(247,250,255,.95);
  opacity:1;
}

.benmi-archive-card:hover,
.benmi-archive-card:focus-visible{
  transform:translateY(-3px);
}

.benmi-archive-card:hover .benmi-archive-card__image img,
.benmi-archive-card:focus-visible .benmi-archive-card__image img{
  filter:brightness(1.04);
}

@media (max-width:767px){
  .benmi-archive-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(145px, 100%), 1fr));
    gap:22px 12px;
  }
  .benmi-archive-card strong{ font-size:13px; }
  .benmi-archive-card time{ font-size:13px; }
}

/* ---------------------------------------------------------
   Q&A
   --------------------------------------------------------- */
.benmi-qa-list{
  padding-top:26px;
  padding-bottom:clamp(80px, 8vw, 120px);
}

.benmi-qa-item + .benmi-qa-item{
  margin-top:10px;
}

.benmi-qa-question{
  width:100%;
  min-height:52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:13px 16px;
  border:1px solid rgba(187,211,242,.28);
  border-radius:0;
  background:rgba(9, 14, 61, 0.78);
  color:#fff;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.48;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}

.benmi-qa-question:hover,
.benmi-qa-question:focus-visible{
  background:rgba(11,29,57,.88);
  border-color:rgba(219,234,253,.56);
}

.benmi-qa-question__mark{
  flex:0 0 auto;
  font-size:17px;
  line-height:1;
}

.benmi-qa-answer{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  border:1px solid transparent;
  border-top:0;
  background:rgba(7, 61, 83, 0.7);
  transition:grid-template-rows .30s ease, opacity .30s ease, border-color .30s ease;
}

.benmi-qa-answer__inner{
  min-height:0;
  overflow:hidden;
  padding:0 16px;
  font-size:15px;
  line-height:1.9;
  color:rgba(245,248,253,.93);
  transition:padding .30s ease;
}

.benmi-qa-answer__inner a{
  color:#d9eaff !important;
  text-decoration:underline !important;
  text-underline-offset:.18em;
}

.benmi-qa-item.is-open .benmi-qa-answer{
  grid-template-rows:1fr;
  opacity:1;
  border-color:rgba(187,211,242,.22);
}

.benmi-qa-item.is-open .benmi-qa-answer__inner{
  padding:14px 16px 16px;
}

@media (max-width:767px){
  .benmi-qa-list{ padding-top:20px; padding-bottom:70px; }
  .benmi-qa-question{ font-size:15px; padding:12px 13px; }
  .benmi-qa-answer__inner{ font-size:14px; }
}

/* Smooth in-page destination offset so PC sticky bar never hides headings. */
@media (min-width:768px){
  #benmi-next,
  #benmi-next-kv,
  #benmi-upcoming,
  #benmi-upcoming-kv,
  #benmi-latest,
  #benmi-latest-kv,
  #benmi-archive,
  #benmi-about,
  #benmi-qa{
    scroll-margin-top:112px;
  }
}


/* ---------------------------------------------------------
   Footer integration (BENMI home only)
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-gallery__image,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-gallery__copy,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-qa-answer,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-qa-answer__inner{
    transition:none !important;
  }
}

/* =========================================================
   BENMI detail/content shell compatibility
   ---------------------------------------------------------
   HOME remains the source design. Detail pages reuse the same
   header/KV/sticky classes and only add their own main internals.
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"]{
  --benmi-home-panel: rgba(2, 10, 24, .78);
  --benmi-home-panel-border: rgba(205, 224, 248, .42);
  --benmi-home-ink: rgba(248, 250, 255, .96);
  --benmi-home-muted: rgba(228, 235, 245, .74);
  --benmi-home-line: rgba(190, 211, 238, .24);
  background:#000;
  color:var(--benmi-home-ink);
}

body[data-page="benmi"][data-benmi-kind="event"] #siteSubHeader{
  margin-bottom:0 !important;
  pointer-events:auto !important;
  background:transparent;
}

body[data-page="benmi"][data-benmi-kind="event"] #siteMain{
  background:transparent;
  overflow:visible;
}

body[data-page="benmi"][data-benmi-kind="event"].is-ready #siteMain{
  transform:none;
}

body[data-page="benmi"][data-benmi-kind="event"] #siteFooter{
  background:#000;
}

body[data-page="benmi"][data-benmi-kind="event"] .benmi-main{
  width:100%;
  max-width:none;
  padding:0;
  margin:0;
}

body[data-page="benmi"][data-benmi-kind="event"] #navDesktopSlot{
  display:none !important;
}

body[data-page="benmi"][data-benmi-kind="event"] [data-benmi-home-only],
body[data-page="benmi"][data-benmi-kind="event"] [data-benmi-home-kv]{
  display:none !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .benmi-detail-kv[hidden],
body[data-page="benmi"][data-benmi-kind="event"] [data-benmi-kv-surface][hidden]{
  display:none !important;
}

@media (min-width:768px){
  body[data-page="benmi"][data-benmi-kind="event"].is-ready #siteHeader .brand-link{
    animation:benmiHomeLogoFadeOut 650ms ease-in-out 3000ms forwards;
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:768px){
  body[data-page="benmi"][data-benmi-kind="event"].is-ready #siteHeader .brand-link{
    animation:none;
    opacity:0;
  }
}

@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="event"] #siteHeader .brand-link{
    transform:none !important;
    opacity:1 !important;
    animation:none !important;
  }
}


/* =========================================================
   BENMI first-view lock
   ---------------------------------------------------------
   HOME / event detail share the same outer-shell rule:
     PC : KV + sticky navigation = exactly one small viewport
     SP : common fixed header + KV area + BENMI divider = one small viewport

   Only the KV area's height changes.  Nothing in the main content is scaled.
   100svh is intentional: on mobile it uses the conservative viewport while
   browser chrome is visible, so the first main section does not peek in on
   initial access.
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="home"],
body[data-page="benmi"][data-benmi-kind="event"]{
  --benmi-firstview-nav-h:98px;
}

@media (min-width:768px){
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-global-bar,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-global-bar{
    height:var(--benmi-firstview-nav-h);
    min-height:var(--benmi-firstview-nav-h);
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top{
    height:calc(100vh - var(--benmi-firstview-nav-h));
    height:calc(100svh - var(--benmi-firstview-nav-h));
    min-height:0;
    display:flex;
    align-items:stretch;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero-shell,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-hero-shell{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-hero{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    place-items:center;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-kv{
    width:100%;
    height:100%;
    min-height:0;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc img,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv img,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-kv img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
}

@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="home"],
  body[data-page="benmi"][data-benmi-kind="event"]{
    --benmi-firstview-nav-h:28px;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top{
    height:calc(100vh - var(--header-offset-sp, 150px) - var(--benmi-firstview-nav-h));
    height:calc(100svh - var(--header-offset-sp, 150px) - var(--benmi-firstview-nav-h));
    min-height:0;
    display:flex;
    align-items:stretch;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero-shell,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-hero-shell{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-hero{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    place-items:center;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-kv{
    width:100%;
    height:100%;
    min-height:0;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc img,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv img,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-kv img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }

  /* HOME information panels are outside this first-view box on SP.
     The KV therefore receives the full remaining first-view height. */
}


@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc img,
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv img{
    object-position:center top;
  }
}

/* =========================================================
   BENMI HOME / PC header hit-test
   The common motion layer re-enables pointer events on #siteHeader and
   .site-header after reveal. On BENMI HOME the desktop nav is hidden, so
   the transparent/faded header must never intercept the HERO panels.
   ========================================================= */
@media (min-width:768px){
  html.js body[data-page="benmi"][data-benmi-kind="home"] #siteHeader,
  html.js body[data-page="benmi"][data-benmi-kind="home"] #siteHeader .site-header{
    pointer-events:none !important;
  }
}


/* =========================================================
   BENMI HOME event thumbnail frame
   Apply the same 1px white line directly to the rendered image.
   Covers NEXT / UPCOMING / LATEST main+sub / ARCHIVE.
   ========================================================= */
.benmi-event-media > img,
.benmi-latest-card__main,
.benmi-latest-card__sub,
.benmi-archive-card__image > img{
  border:1px solid rgba(255,255,255,.92);
  box-sizing:border-box;
}

@media (min-width:768px){
  .benmi-latest-card.has-sub .benmi-latest-card__sub{
    transform:translateX(-5%);
  }
}

/* PC only: DISC is physically much larger than on SP, so a linear opacity
   ramp makes its bright edges become perceptible too early.
   Keep the same 2300ms completion time, but hold back the first half. */
@keyframes benmiHomeDiscFadeInPc{
  0%{
    opacity:0;
    transform:translateY(var(--motion-fixed-shift,4px));
  }
  18%{ opacity:.005; }
  36%{ opacity:.025; }
  52%{ opacity:.08; }
  66%{ opacity:.20; }
  79%{ opacity:.42; }
  90%{ opacity:.70; }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc{
  animation-name:benmiHomeDiscFadeInPc;
  animation-duration:var(--benmi-home-disc-fade,2300ms);
  animation-timing-function:linear;
  animation-delay:0ms;
  animation-fill-mode:both;
}

/* =========================================================
   BENMI HOME text hierarchy
   ---------------------------------------------------------
   Only color / outline / shadow are controlled here.
   Font / size / weight / spacing / layout remain unchanged.
   Information panels keep their stronger existing style.
   Q&A is excluded.
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="home"]{
  --benmi-home-heading-text:#c3d5e0;
  --benmi-home-subheading-text:#1B2C53;
  --benmi-home-body-text:#fff;

  --benmi-home-heading-shadow:
    2px 1px 1px rgba(0,0,0,.95),
    4px 2px 3px rgba(0,0,0,.55);

  --benmi-home-subheading-shadow:
    0 1px 1px rgba(255,255,255,.85),
    1px 2px 2px rgba(255,255,255,.45);

  --benmi-home-body-shadow:
    1px 1px 1px rgba(0,0,0,.70);
}

/* ---------------------------------------------------------
   Information panels: keep current strong treatment
   --------------------------------------------------------- */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel__date,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel__title,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel__action,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel__action-text{
  color:#c3d5e0 !important;
  -webkit-text-stroke:.7px #000;
  paint-order:stroke fill;
  text-shadow:var(--benmi-home-heading-shadow);
}

/* ---------------------------------------------------------
   Main English headings
   NEWS / EVENTS / UPCOMING / LATEST / ARCHIVE etc.
   --------------------------------------------------------- */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-section-band__en,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-subsection-title__en{
  color:var(--benmi-home-heading-text) !important;
  -webkit-text-stroke:.7px #000;
  paint-order:stroke fill;
  text-shadow:var(--benmi-home-heading-shadow);
}

/* ---------------------------------------------------------
   Japanese subheadings
   Dark blue text + no outline + soft white shadow
   --------------------------------------------------------- */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-section-band__ja,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-subsection-title__ja{
  color:var(--benmi-home-subheading-text) !important;
  -webkit-text-stroke:0;
  paint-order:normal;
  text-shadow:var(--benmi-home-subheading-shadow);
}

/* ---------------------------------------------------------
   Body copy / event titles / dates
   White with only a light readability assist.
   --------------------------------------------------------- */

/* NEWS */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-news-row__date,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-news-row__text,

/* ABOUT */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-gallery__copy h3,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-gallery__copy p,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-about-description,

/* NEXT / UPCOMING */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-event-meta strong,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-event-meta span,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-upcoming-card__info strong,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-upcoming-card__info span,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-upcoming-description,

/* LATEST */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-latest-card__copy h4,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-latest-card__copy time,

/* ARCHIVE */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-archive-card strong,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-archive-card time{
  color:var(--benmi-home-body-text) !important;
  -webkit-text-stroke:.3px #000;
  paint-order:stroke fill;
  text-shadow:var(--benmi-home-body-shadow);
}

/* Q&A stays exactly as currently designed. */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-qa-list,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-qa-list *{
  -webkit-text-stroke:0;
  text-shadow:none;
}

/* SP: keep the common logo visible permanently.
   DISC / KV / information-panel choreography remains unchanged. */
@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="home"].is-ready #siteHeader .brand-link{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* LATEST body copy.
   PC: fill the lower-left space directly beneath title/date.
   SP: keep the existing full-width copy below the whole PIP composition. */
.benmi-latest-card__description{
  color:#fff;
  -webkit-text-stroke:.3px #000;
  paint-order:stroke fill;
  text-shadow:1px 1px 1px rgba(0,0,0,.70);
  text-align:center;
}

.benmi-latest-card__description--pc{
  display:none;
}

.benmi-latest-card__description--sp{
  margin-top:18px;
  font-size:14px;
  line-height:1.92;
}

.benmi-latest-card.has-sub .benmi-latest-card__description--sp{
  grid-column:1 / -1;
  grid-row:3;
}

@media (min-width:768px){
  .benmi-latest-card__description--pc{
    display:block;
    margin-top:clamp(12px,1.4vw,18px);
    font-size:15px;
    line-height:1.82;
    text-align:left;
  }

  .benmi-latest-card__description--sp{
    display:none;
  }

  /* The PC lower-left area is content-driven now rather than a blank
     aspect-ratio spacer.  The S image remains in the right column. */
  .benmi-latest-card.has-sub .benmi-latest-card__copy{
    aspect-ratio:auto;
    min-height:clamp(150px,18vw,210px);
    padding-bottom:12px;
  }
}

/* SP UPCOMING content order:
   NEXT -> section description -> UPCOMING cards.
   PC keeps the existing two-column composition unchanged. */
@media (max-width:767px){
  .benmi-upcoming-lower .benmi-upcoming-description{
    order:-1;
  }

  .benmi-upcoming-lower .benmi-upcoming-list{
    order:0;
  }
}


@keyframes benmiLowPcStickyStripFadeIn{
  from{
    opacity:0;
    transform:translateY(var(--motion-fixed-shift,4px));
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   BENMI HOME / event-detail low-height desktop first view
   ---------------------------------------------------------
   Normal desktop and SP keep their existing first-view design.

   Short desktop viewport only:
     HERO (KV + panels) + short decorative sticky.png strip = 100svh
     The real 98px sticky navigation starts immediately below the fold.

   Match the existing JS small-PC threshold (760px).  Requiring a
   hover-capable fine pointer avoids applying this desktop treatment to
   ordinary touch-only tablets that happen to share desktop CSS widths.
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top::after,
body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top::after{
  content:none;
}

@media (min-width:768px) and (max-height:760px) and (hover:hover) and (pointer:fine){
  body[data-page="benmi"][data-benmi-kind="home"]{
    --benmi-lowpc-strip-h:32px;
  }

  body[data-page="benmi"][data-benmi-kind="event"]{
    --benmi-lowpc-strip-h:32px;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top{
    height:100vh;
    height:100svh;
    min-height:0;
    flex-direction:column;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero-shell,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-hero-shell{
    flex:1 1 auto;
    height:auto;
    min-height:0;
  }

  body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top::after,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top::after{
    content:"";
    display:block;
    flex:0 0 var(--benmi-lowpc-strip-h);
    width:100%;
    height:var(--benmi-lowpc-strip-h);
    box-sizing:border-box;
    pointer-events:none;

    opacity:0;
    transform:translateY(var(--motion-fixed-shift,4px));
    animation:none;
    will-change:opacity, transform;

    background-color:#070d25;
    background-image:url("/soz/benmiframe/sticky.png?v=20260831-edit-02");
    background-position:center;
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-top:1px solid rgba(128,159,201,.16);
    border-bottom:0;
  }

  html.js body.is-ready[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top::after,
  html.js body.is-ready[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top::after{
    animation:
      benmiLowPcStickyStripFadeIn
      var(--motion-fixed-fade,1500ms)
      var(--ease-out,ease-out)
      var(--motion-fixed-main-delay,0ms)
      both;
  }

  @media (prefers-reduced-motion:reduce){
    html.js body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-top::after,
    html.js body[data-page="benmi"][data-benmi-kind="event"] .benmi-home-top::after{
      opacity:1;
      transform:none;
      animation:none !important;
      will-change:auto;
    }
  }

  /* Decorative strip and the real sticky bar are one continuous surface. */
  body[data-page="benmi"][data-benmi-kind="home"] .benmi-global-bar,
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-global-bar{
    border-top:0;
  }
}

/* =========================================================
   BENMI HOME intro layer order
   logo < DISC < KV < information panels
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="home"] #siteHeader{
  z-index:0;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero-shell,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-hero{
  position:relative;
  z-index:1;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-disc{
  z-index:2;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-home-kv{
  z-index:3;
}

body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panels,
body[data-page="benmi"][data-benmi-kind="home"] .benmi-kv-panel{
  z-index:4;
}