/* /assets/css/benmi.css?v=20260901-edit-01
   =========================================================
   BENMI page-specific stylesheet
   - Legacy BENMI content presentation
   - fudosha.net shared shell integration
   - Light -> Black Edition transition (2000ms)
   ========================================================= */

/* BENMI content blocks (migrated from legacy blocks.css)
   =========================================================
   BENMI blocks
   - Detail pages blocks (/e/<slug>/, /r/<slug>/)
   - Home: UPCOMING / LATEST big blocks
   ========================================================= */

/* =========================================================
   Detail blocks
   ========================================================= */

.block{
  border: 0 solid var(--line);
  border-radius: 0; /* 角丸は使わない */
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0 0 0;
}

.block-body{ padding: 16px; }

.block-title{
  margin: 0;
  padding: 14px 16px 0;
  font-size: 16px;
  letter-spacing: .08em;
}

/* =========================================================
   Home UPCOMING / LATEST
   ========================================================= */

.upcoming-list,
.latest-list{
  display: grid;
  gap: 30px;
}

.upcoming-block{
  display: block;
  position: relative;
  border: 0px solid rgba(255,255,255,.12);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: clamp(260px, 32vw, 460px);
  background: #000;
}

/* サムネ画像は全面展開。ズームやフェードは入れない */
.upcoming-media{
  position: absolute;
  inset: 0;
  background-image: var(--up-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
}

/* 以前のフェード(グラデ)は無効 */
.upcoming-block::before{ content:none; }

.upcoming-overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2.2vw, 26px);
}

.upcoming-badge{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .18em;
  font-weight: 900;
  margin-bottom: 12px;
}

.upcoming-title{
  font-size: clamp(36px, 5.6vw, 78px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.02;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.upcoming-sub{
  margin-top: 8px;
  font-size: clamp(16px, 2.1vw, 28px);
  font-weight: 800;
  color: rgba(233,233,233,.92);
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.upcoming-meta{
  margin-top: 10px;
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(233,233,233,.86);
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

/* entry button (and generic .btn) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--btn-pad-y, 14px) var(--btn-pad-x, 20px);
  font-size: var(--btn-fs, 18px);
  font-weight: var(--btn-fw, 900);
  letter-spacing: var(--btn-ls, .12em);

  border: var(--btn-border, 1px solid var(--line));
  border-radius: var(--btn-radius, 0);

  background: var(--btn-bg, rgba(255,255,255,.06));
  color: var(--btn-ink, currentColor);

  text-decoration: none;
  box-shadow: var(--btn-shadow, none);
}

.btn:hover{
  background: var(--btn-hover-bg, var(--btn-bg, rgba(255,255,255,.06)));
  color: var(--btn-hover-ink, var(--btn-ink, currentColor));
}
.gallery{ display: grid; gap: 14px; }
.gallery-item{ margin: 0; }
.gallery-zoom{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  text-align: inherit;
}
.gallery-zoom img,
.gallery-item img{ width: 100%; height: auto; display: block; border-radius: 0; }
.gallery-item figcaption{ margin-top: 6px; color: var(--muted); font-size: 13px; }

/* Gallery lightbox */
.is-gallery-lightbox-open{ overflow: hidden; }
.gallery-lightbox[hidden]{ display: none !important; }
.gallery-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(0,0,0,.86);
}
.gallery-lightbox__figure{
  width: min(1120px, 96vw);
  max-height: 90vh;
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.gallery-lightbox__img{
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.gallery-lightbox__caption{
  max-width: min(960px, 92vw);
  color: #fff;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}
.gallery-lightbox__close{
  position: fixed;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  z-index: 10000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.gallery-lightbox__close:focus-visible,
.gallery-zoom:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* REPORT block */
.report-block .report-list{
  width: min(920px, 100%);
  margin: 0;
  padding-left: 1.25em;
  list-style: disc outside;
  display: grid;
  gap: .72em;
  text-align: left;
}
.report-block .report-list__item{
  display: list-item;
  line-height: 1.45;
  font-weight: 800;
}
.report-block .report-link,
.report-block .report-link:link,
.report-block .report-link:visited,
.report-block .report-link:hover,
.report-block .report-link:active{
  color: inherit;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.report-block .report-link:hover{
  opacity: .72;
}
.report-block .report-link--nolink{
  text-decoration: none !important;
}
.report-block .report-note{
  display: inline-block;
  margin-left: .65em;
  font-size: .72em;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .72;
}

.faq-item{ border-top: 1px solid var(--line); }
.faq-item:first-child{ border-top: none; }
.faq-q{
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.faq-plus{ width: 1.2em; }
.faq-a{ padding: 0 16px 14px; }

/* simple themes */
.theme-slate{ background: rgba(255,255,255,.04); }
.theme-rose{ background: rgba(255, 0, 128, .10); }
.theme-teal{ background: rgba(0, 255, 214, .10); }

/* =========================================================
   BENMI blocks extension
   - per-block style vars
   - center layout
   - hover color
   - toc block
   - hero veil: default 0 (do not darken key visual)
   ========================================================= */

.block{
  /* block.style から入る */
  background: var(--block-bg, transparent);
  color: var(--block-ink, inherit);

  /* 内側余白: 0が基本。必要なら block.style.padX/padY で足す */
  padding: var(--block-pad-y, 0) var(--block-pad-x, 0);

  /* 高さ（任意） */
  min-height: var(--block-min-h, auto);

  /* hoverで色を変える */
  transition: background-color 0ms, color 0ms;
}
.block:hover{
  background: var(--block-hover-bg, var(--block-bg, transparent));
  color: var(--block-hover-ink, var(--block-ink, inherit));
}

.block-title{
  color: var(--block-title-ink, currentColor);
  font-family: "Guanine", "MOBO", system-ui, sans-serif;
  font-weight: 700; /* ← 追加（好みで 700〜900） */
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(24px, 4.0vw, 32px);
    /* SP: center / PC: left */
  text-align: center;
}

@media (min-width: 768px){
  .block-title{ text-align: left; }
}

.block-body{
  /* 中央揃えが基本。左寄せしたい場合は中のHTMLで .u-left を使う */
  display: flex;
  align-items: var(--block-align, center);
  justify-content: var(--block-justify, center);
  text-align: var(--block-text-align, center);

  color: var(--block-body-ink, currentColor);
  font-size: var(--block-body-size, inherit);
  font-family: var(--block-body-font, inherit);
}

.block-inner{
  width: 100%;
  max-width: 100%;
}

/* HTML側で任意に揃えを変える用 */
.u-left{ text-align:left; }
.u-center{ text-align:center; }
.u-right{ text-align:right; }

/* SPは中央のまま、PCだけ左寄せ */
.u-left-pc{ text-align: center; }
@media (min-width: 768px){
  .u-left-pc{ text-align: left; }
}

/* 文字のベース（textブロック） */
.block .rich p{ margin: .6em 0; }
.block .rich ul{ margin: .6em 0; padding-left: 1.2em; }

/* textブロック内：画像＋キャプション（figure） */
.block .rich figure.rich-figure{
  width: min(var(--fig-max, 980px), 100%);
  margin: 18px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em; /* 好みで */
}
.block .rich figure.rich-figure img{
  display: block;
  width: 100%;
  height: auto;
}
.block .rich figure.rich-figure figcaption{
  margin-top: .55em;
  text-align: center;
  font-size: .92em;
  opacity: .78;
}


/* -------------------------
   TOC block
   ------------------------- */
.toc-box{
  width: min(920px, 100%);
  background: rgba(255,255,255,.92);
  color: #1a1a1a;
  padding: 18px 20px;
  position: relative;              /* 左上基準を toc-box にする */
}

/* TOC: PCは日付を左上固定、目次リストは中央のまま */
.toc-dates{
  position: absolute;
  top: clamp(10px, 2.8vw, 16px);
  left: clamp(12px, 3.2vw, 18px);

  margin: 0;
  display: grid;
  gap: 4px;

  text-align: left;                /* 親の中央寄せを無効化 */
  color: #d60000;
  font-weight: 800;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.2;
}

.toc-date{ /* 追加で装飾したい時用 */ }

.toc-list{
  list-style: none;
  /* absolute配置の日付2行ぶんの逃がし。前のmargin-topが後段で上書きされていたので統合 */
  margin: clamp(40px, 10vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.toc-item a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.toc-indent-1{ padding-left: 18px; }
.toc-indent-2{ padding-left: 36px; }

/* 狭い画面では日付を通常フローに戻して重なりを根本回避 */
@media (max-width: 640px){
  .toc-dates{
    position: static;
    margin: 0 0 10px 0;
  }

  .toc-list{
    margin-top: 0;
  }
}

/* -------------------------
   KV helper (DATE/PLACEみたいな大文字レイアウト用)
   ------------------------- */
.kv-grid{
  width: min(920px, 100%);
  display: grid;
  gap: 34px;
}
.kv-row{ display: grid; gap: 10px; }
.kv-label{
  font-family: "Guanine", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(24px, 4.0vw, 32px);
}
.kv-value{
  font-family: "Guanine", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(32px, 4.0vw, 72px);
  line-height: 1.02;
}
.kv-link{
  display: inline-block;
  margin-left: .35em;
  font-size: .55em;
  vertical-align: baseline;
}

/* BENMI home cards (migrated from legacy cards.css)
   =========================================================
   BENMI index (PAST EVENTS)
   - 参照サイト寄せ: 横長サムネを全面展開し、その上に文字を重ねる
   - 基準は .wrap（--wrap-pc = 60vw）。
     その中で左右 ~5% の余白 → report-grid を 90% 幅で中央寄せ。
   ========================================================= */

:root{
  --past-gap: clamp(14px, 2.2vw, 28px);
  --past-line: rgba(255,255,255,.18);
  --past-line-hover: rgba(240,138,42,.92);
}

.report-grid{
  width: 90%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--past-gap);
}

@media (max-width: 767px){
  .report-grid{ width: 100%; }
}

@media (max-width: 900px){
  .report-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Tile
   --------------------------------------------------------- */

.report-card{
  position: relative;
  display: block;
  overflow: hidden;

  border: 0 solid var(--past-line);
  border-radius: 0;
  background: #000;

  /* thumb overlay sizes (smaller than upcoming) */
  --thumb-date-fs: clamp(12px, 1.15vw, 14px);
  --thumb-title-fs: clamp(14px, 2.4vw, 18px);
  --thumb-title-fs-sp: clamp(12px, 6.0vw, 14px);


  aspect-ratio: 16 / 9;

  transform: translateY(0);
  transition: border-color 140ms ease, transform 140ms ease;
}

.report-card:hover{
  border-color: var(--past-line-hover);
  transform: translateY(-1px);
}

/* 画像は枠いっぱいに */
.report-media{
  position: absolute;
  inset: 0;
  background-image: var(--report-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 画像が無い場合の簡易フォールバック */
.report-card[data-thumb="none"] .report-media{
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px, 28px 28px;
  background-position: 0 0, 9px 9px;
}

.report-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
  pointer-events: none;

  font-size: clamp(16px, 2.6vw, 34px);
  color: rgba(255,255,255,.16);
}

/* ---------------------------------------------------------
   Overlay text
   - フル面のヴェールは使わない
   - 読めるように text-shadow だけ強め
   --------------------------------------------------------- */

.report-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(14px, 2.2vw, 22px);

  display: grid;
  gap: 10px;
}

.report-ribbon{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: .38em .85em;

  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}

.report-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(28px, 3.2vw, 44px);

  color: #fff;
  text-shadow:
    0 4px 18px rgba(0,0,0,.85),
    0 0 1px rgba(0,0,0,.95);
}

.report-meta{
  margin: 0;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(14px, 1.45vw, 18px);

  color: rgba(255,255,255,.92);
  text-shadow:
    0 4px 18px rgba(0,0,0,.85),
    0 0 1px rgba(0,0,0,.95);
}

/* PAST: バッジだけ右端に寄せる（タイトル/日付サイズは触らない） */
.report-card .thumb-badge{
  right: 4px; /* ここを 4px / 2px でさらに詰められる */
}

@media (max-width: 767px){
  /* SP: past events のカード群に余白（左右12px + 上下少し） */
  body[data-page="benmi"][data-benmi-kind="home"] .report-grid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}

/* BENMI thumbnail overrides (migrated from legacy thumb-overrides.css)
   =========================================================
   BENMI home thumbnail overlay overrides
   - DO NOT touch user-tuned sizes (title/date font-size, section logo widths, etc.)
   - Provide:
     * Past-only position tuning for date/title/badge
     * Upcoming badge text styling
     * Font assignment for overlay texts
   ========================================================= */

/* Fonts for overlay texts */
.thumb-title{
  font-family: "MOBO", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
}

.thumb-date{
  font-family: "MOBO", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
}
.thumb-badge{
  font-family: "Guanine", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
}

/* UPCOMING badge (0227 reference)
   - PC: sash (slightly overflow + rotate)
   - SP: burst (clip-path)
   Notes:
   - This is intentionally limited to upcoming cards.
   - Keeps title/date sizes untouched elsewhere.
*/
.upcoming-block.is-nolink{ cursor: default; }

/* default (SP): do not overflow */
.upcoming-block{ overflow: hidden; }

/* common */
.thumb-badge--upcoming{
  position: absolute;
  z-index: 3;

  background: #d60000;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 0;

  letter-spacing: .09em;
  line-height: 1;

  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  transform-origin: 100% 0%;

  /* breathe slower */
  animation-duration: 5.0s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ========== PC (sash) ========== */
@media (min-width: 768px){
  .upcoming-block{ overflow: visible; }

  .thumb-badge--upcoming{
    top: 15px;
    right: -20px;

    padding: .62em 1.55em .56em 1.60em;
    font-size: clamp(13px, 1.9vw, 18px);

    transform: rotate(12deg) translateY(0) scale(1);
    animation-name: benmiBreatheSash;
    clip-path: none;
  }

  @keyframes benmiBreatheSash{
    0%,100%{ transform: rotate(12deg) translateY(0) scale(1); }
    50%    { transform: rotate(12deg) translateY(-1px) scale(1.05); }
  }
}

/* ========== SP (burst) ========== */
@media (max-width: 767px){
  .thumb-badge--upcoming{
    top: var(--thumb-gap);
    right: 1px;

    padding: .78em 1.10em .70em 1.20em;
    font-size: clamp(12px, 4.2vw, 16px);

    transform: translateY(0) scale(1);
    animation-name: benmiBreatheBurst;

    clip-path: polygon(
      50% 0,60% 8%,72% 2%,76% 14%,88% 12%,86% 24%,98% 28%,90% 38%,
      100% 50%,90% 62%,98% 72%,86% 76%,88% 88%,76% 86%,72% 98%,60% 92%,
      50% 100%,40% 92%,28% 98%,24% 86%,12% 88%,14% 76%,2% 72%,10% 62%,
      0 50%,10% 38%,2% 28%,14% 24%,12% 12%,24% 14%,28% 2%,40% 8%
    );
  }

  @keyframes benmiBreatheBurst{
    0%,100%{ transform: translateY(0) scale(1); }
    50%    { transform: translateY(-1px) scale(1.05); }
  }
}

@media (prefers-reduced-motion: reduce){
  .thumb-badge--upcoming{ animation: none; }
}


@media (max-width: 767px){
  .thumb-badge--upcoming{
    transform: rotate(5deg);
    top: calc(var(--thumb-gap) - 20px);
    right: calc(var(--thumb-gap) - 20px);
  }
}

/* ---------------------------------------------------------
   PAST EVENTS: position tuning (independent)
   - date:  top-left (user can shift down/right)
   - title: bottom-right (user can shift up/left)
   - badge: above title (bottom-right)

   How to tune:
   - Edit the variables in .report-card below.
   --------------------------------------------------------- */

.report-card{
  /* Date position */
  --past-date-top: 15px;
  --past-date-left: 0px;

  /* Title position */
  --past-title-right: 0px;
  --past-title-bottom: 15px;

  /* Badge position (above title) */
  --past-badge-right: 5px;
  --past-badge-bottom: calc(var(--past-title-bottom) + 45px);
}

.report-card .thumb-date{
  top: var(--past-date-top);
  left: var(--past-date-left);
}

.report-card .thumb-title{
  right: var(--past-title-right);
  bottom: var(--past-title-bottom);
}

.report-card .thumb-badge{
  top: auto;
  bottom: var(--past-badge-bottom);
  right: var(--past-badge-right);
}

/* BENMI integration / Black Edition transition
   BENMI integrated into fudosha.net.
   Common header/nav/subheader/footer/layout come from fudosha.net.
   This file only supplies BENMI content styling + 2s Black Edition transition. */

body[data-page="benmi"]{
  --benmi-theme-duration: 2000ms;
  --ink: var(--text);
  --wrap-pc: var(--bgw);
  --wrap-max: var(--max);
  --home-gap: 18px;
  --thumb-gap: clamp(20px, 2.0vw, 30px);
  --thumb-date-fs: clamp(24px, 1.15vw, 28px);
  --thumb-title-fs: clamp(24px, 3.2vw, 28px);
  --thumb-title-fs-sp: clamp(18px, 6.5vw, 26px);

  transition:
    background-color var(--benmi-theme-duration) ease,
    color var(--benmi-theme-duration) ease;
}

body[data-page="benmi"][data-theme="black"]{
  --bg: rgb(0,0,0);
  --text: rgba(245,245,245,.92);
  --muted: rgba(245,245,245,.66);
  --line: rgba(245,245,245,.16);
  --glass: rgba(18,18,18,.58);
  --glass-strong: rgba(18,18,18,.76);
  --nav-pc-font-color: rgba(245,245,245,.92);
  --footer-rule-color: rgba(245,245,245,.92);
  --footer-text-color: rgba(245,245,245,.92);
  --ink: var(--text);
}

/* Explicit-color parts need their own transition; inherited body color transitions naturally. */
body[data-page="benmi"] .site-footer,
body[data-page="benmi"] .footer-rule,
body[data-page="benmi"] .banner-title,
body[data-page="benmi"] .banner-more,
body[data-page="benmi"] .menu-toggle,
body[data-page="benmi"] .menu-icon,
body[data-page="benmi"] .menu-icon::before,
body[data-page="benmi"] .menu-icon::after,
body[data-page="benmi"] .section-title,
body[data-page="benmi"] .block,
body[data-page="benmi"] .block-title,
body[data-page="benmi"] .block-body{
  transition-property: color, background-color, border-color, opacity, filter;
  transition-duration: var(--benmi-theme-duration);
  transition-timing-function: ease;
}

body[data-page="benmi"][data-theme="black"] .menu-toggle{
  background: rgba(20,20,20,.54);
}
body[data-page="benmi"][data-theme="black"] .menu-icon,
body[data-page="benmi"][data-theme="black"] .menu-icon::before,
body[data-page="benmi"][data-theme="black"] .menu-icon::after{
  background: rgba(245,245,245,.80);
}
body[data-page="benmi"][data-theme="black"] .menu-toggle[aria-expanded="true"] .menu-icon{
  background: transparent;
}

/* ----- Theme image crossfade ----- */
body[data-page="benmi"] .theme-swap--light,
body[data-page="benmi"] .theme-swap--black{
  transition: opacity var(--benmi-theme-duration) ease !important;
}

/* PC header logo */
@media (min-width:768px){
  body[data-page="benmi"] .brand-logo--pc.theme-swap--light,
  body[data-page="benmi"] .brand-logo--pc.theme-swap--black{
    display:block !important;
  }
}
body[data-page="benmi"]:not([data-theme="black"]) .brand-logo--pc.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .brand-logo--pc.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .brand-logo--pc.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .brand-logo--pc.theme-swap--black{ opacity:1; }

/* Desktop nav */
@media (min-width:768px){
  body[data-page="benmi"] .nav-map-img.theme-swap--light,
  body[data-page="benmi"] .nav-map-img.theme-swap--black{
    display:block !important;
  }
}
body[data-page="benmi"]:not([data-theme="black"]) .nav-map-img.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .nav-map-img.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .nav-map-img.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .nav-map-img.theme-swap--black{ opacity:1; }

/* SP header logo: normal=logo-sp / Black Edition=logo-wh.
   Header itself is hidden while the overlay menu is open. */
@media (max-width:767px){
  body[data-page="benmi"] .brand-logo--sp.theme-swap--light,
  body[data-page="benmi"] .brand-logo--sp.theme-swap--black{
    display:block !important;
  }
}
body[data-page="benmi"]:not([data-theme="black"]) .brand-logo--sp.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .brand-logo--sp.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .brand-logo--sp.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .brand-logo--sp.theme-swap--black{ opacity:1; }

/* Footer logo theme crossfade.
   Keep both theme assets in the same grid cell, but DO NOT give BENMI its own
   fixed logo height.  footer.css / desktop-scale.css remain the sole source
   of footer sizing, so BENMI and ordinary pages stay identical in scale. */
body[data-page="benmi"] .footer-logo-link{
  position:relative;
  display:grid;
  grid-template-columns:max-content;
  grid-template-rows:max-content;
  width:max-content;
  height:auto;
  aspect-ratio:auto;
  flex:0 0 auto;
}
body[data-page="benmi"] .footer-logo.theme-swap--light,
body[data-page="benmi"] .footer-logo.theme-swap--black{
  display:block !important;
  position:relative;
  inset:auto;
  grid-area:1 / 1;
  width:auto;
  /* height intentionally comes from the common footer rules */
  object-fit:contain;
}
body[data-page="benmi"]:not([data-theme="black"]) .footer-logo.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .footer-logo.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .footer-logo.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .footer-logo.theme-swap--black{ opacity:1; }

/* Subheader wall/rule crossfade. */
body[data-page="benmi"] .subheader-wall.theme-swap--light,
body[data-page="benmi"] .subheader-wall.theme-swap--black,
body[data-page="benmi"] .subheader-rule.theme-swap--light,
body[data-page="benmi"] .subheader-rule.theme-swap--black{
  display:block !important;
}
body[data-page="benmi"]:not([data-theme="black"]) .subheader-wall.theme-swap--light,
body[data-page="benmi"]:not([data-theme="black"]) .subheader-rule.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .subheader-wall.theme-swap--black,
body[data-page="benmi"]:not([data-theme="black"]) .subheader-rule.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .subheader-wall.theme-swap--light,
body[data-page="benmi"][data-theme="black"] .subheader-rule.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .subheader-wall.theme-swap--black,
body[data-page="benmi"][data-theme="black"] .subheader-rule.theme-swap--black{ opacity:1; }

/* BENMI subheader title: normal -> Black Edition crossfade. */
body[data-page="benmi"] .benmi-subheader-title.theme-swap--light,
body[data-page="benmi"] .benmi-subheader-title.theme-swap--black{
  display:block !important;
}
body[data-page="benmi"] .benmi-subheader-title--black{
  position:absolute;
  inset:0;
  z-index:var(--z-subheader-text);
}
body[data-page="benmi"]:not([data-theme="black"]) .benmi-subheader-title.theme-swap--light{ opacity:1; }
body[data-page="benmi"]:not([data-theme="black"]) .benmi-subheader-title.theme-swap--black{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .benmi-subheader-title.theme-swap--light{ opacity:0; }
body[data-page="benmi"][data-theme="black"] .benmi-subheader-title.theme-swap--black{ opacity:1; }

/* ----- BENMI content layout, but using fudosha width tokens ----- */
body[data-page="benmi"] .wrap{
  width:var(--bgw);
  max-width:var(--max);
  margin:0 auto;
  padding:0;
}
body[data-page="benmi"] .site-main .wrap{
  padding-top:6px;
  padding-bottom:22px;
}
@media (max-width:767px){
  body[data-page="benmi"] .site-main .wrap{ padding-bottom:0; }
}

body[data-page="benmi"] .section{ padding:0; margin:0; }
body[data-page="benmi"] .section + .section{ margin-top:var(--home-gap); }
body[data-page="benmi"] .section-title{
  margin:0 0 var(--home-gap);
  color:var(--muted);
  line-height:0;
}
body[data-page="benmi"] .section-title[aria-hidden="true"]{ display:none; }
body[data-page="benmi"] .section-title-img{
  margin-left:auto;
  margin-right:auto;
  display:block;
  width:60%;
  height:auto;
}
body[data-page="benmi"][data-benmi-kind="home"] .section-title.section-title--logo{ margin:30px 0; }
body[data-page="benmi"][data-benmi-kind="home"] .section-title:empty{
  margin:0; padding:0; height:0;
}
body[data-page="benmi"] .rich p{ margin:.6em 0; }
body[data-page="benmi"] .rich ul{ margin:.6em 0; padding-left:1.2em; }
body[data-page="benmi"] .benmi-main a{ color:inherit; text-decoration:none; }

/* Home thumbnail overlays. */
body[data-page="benmi"] .thumb-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}
body[data-page="benmi"] .thumb-date{
  position:absolute; top:var(--thumb-gap); left:0; display:inline-block;
  padding:.55em 1em; background:#000; color:#fff; font-weight:800;
  font-size:var(--thumb-date-fs); letter-spacing:.08em; line-height:1;
  font-family:"MOBO",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Arial,sans-serif;
}
body[data-page="benmi"] .thumb-title{
  position:absolute; right:0; bottom:var(--thumb-gap); display:inline-block;
  max-width:min(92%,1000px); padding:.55em 1em; background:#000; color:#fff;
  font-weight:900; font-size:var(--thumb-title-fs,32px); letter-spacing:.02em; line-height:1.06;
  font-family:"MOBO",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Arial,sans-serif;
}
body[data-page="benmi"] .thumb-badge{
  position:absolute; top:var(--thumb-gap); right:var(--thumb-gap); display:inline-flex;
  align-items:center; justify-content:center; padding:.45em .95em; background:rgba(0,0,0,.88);
  color:#fff; font-weight:900; font-size:clamp(12px,1.2vw,14px); letter-spacing:.16em;
  text-transform:uppercase; border-radius:999px; line-height:1;
  font-family:"Guanine",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Arial,sans-serif;
}
body[data-page="benmi"] .thumb-badge--img{ background:transparent; padding:0; border-radius:0; }
body[data-page="benmi"] .thumb-badge-img{ display:block; height:clamp(30px,3.6vw,52px); width:auto; }
@media (max-width:767px){
  body[data-page="benmi"] .thumb-title{ font-size:var(--thumb-title-fs-sp,22px); }
}

/* Detail pages use the same typography as fudosha; image/keyvisual colors are deliberately untouched. */
body[data-page="benmi"] #benmiDetailView[hidden],
body[data-page="benmi"] #benmiHomeView[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  body[data-page="benmi"],
  body[data-page="benmi"] *,
  body[data-page="benmi"] *::before,
  body[data-page="benmi"] *::after{
    transition-duration:0ms !important;
  }
}

/* =========================================================
   BENMI PC: let HERO information panels receive clicks
   ---------------------------------------------------------
   The absolute PC header overlaps the upper part of the HOME KV.
   Its visual area must not capture pointer events; only the
   desktop navigation remains interactive.
   ========================================================= */
@media (min-width: 768px){
  body[data-page="benmi"] .site-header{
    pointer-events: none;
  }

  body[data-page="benmi"] #navDesktopSlot{
    pointer-events: auto;
  }
}