/* /assets/css/base.css
   =========================================================
   BENMI base
   - Layout tokens, reset, containers
   - Page sections (home)
   ========================================================= */

:root{
  --bg: #050505;
  --ink: #e9e9e9;
  --muted: rgba(233,233,233,.72);

  /* Default content width (UPCOMING / LATEST など) */
  --wrap-pc: 60vw;
  --wrap-max: 864px;

  /* Home spacing (section間 / 見出し-本文) */
  --home-gap: 18px;

  --radius: 14px;
  --shadow: 0 14px 36px rgba(0,0,0,.55);
  --line: rgba(255,255,255,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  width: min(var(--wrap-pc), var(--wrap-max));
  margin: 0 auto;
  padding: 0;
}

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

/* -------------------------
   1) Fonts
   ------------------------- */
@font-face{
  font-family: "MOBO";
  src: url("/assets/fonts/MOBO-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Guanine";
  src: url("/assets/fonts/Guanine.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* tspc98（元は latest.css に閉じていたが、comment等でも使うため共通へ移動） */
@font-face{
  font-family: "tspc98";
  src: url("/assets/fonts/tspc98.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "misaki";
  src: url("/assets/fonts/misaki_gothic_2nd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "wapuro";
  src: url("/assets/fonts/wapuro-mincho.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   GAP TUNING:
   - スクショ1「ヘッダーと本文の間が空きすぎ」 → ここ（main上）を詰める
   --------------------------------------------------------- */
.site-main .wrap{
  padding-top: 6px;
  padding-bottom: 22px;
}

@media (max-width: 767px){
  /* SP: main と footer の間の隙間を 0 に */
  .site-main .wrap{
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------
   HOME sections
   - 見出し（ARCHIVES / PAST EVENTS）の上下余白が不均衡になりがち。
     sectionに上下paddingを入れると「前sectionの下padding + 次sectionの上padding」で
     見出しの上だけ余白が増えやすい。
     → section間の余白と、見出し下の余白を同一トークン(--home-gap)に統一。
   --------------------------------------------------------- */
.section{ padding: 0; margin: 0; }
.section + .section{ margin-top: var(--home-gap); }

.section-title{
  margin: 0 0 var(--home-gap);
  color: var(--muted);
  line-height: 0; /* 画像見出しの下に謎の隙間が出るのを防ぐ */
}

/* UPCOMINGの見出しは空運用なので、余白も消す */
.section-title[aria-hidden="true"]{ display:none; }

/* 見出し画像（ARCHIVES / PAST EVENTS） */
.section-title-img{
    margin-left: auto;
  margin-right: auto;
  display: block;
  width: 60%;   /* セクション表示領域いっぱい */
  height: auto;
}

.rich p{ margin: .6em 0; }
.rich ul{ margin: .6em 0; padding-left: 1.2em; }

/* =========================================================
   THUMB OVERLAY (home cards/blocks)
   - Date: top-left, black bg, white text
   - Badge: top-right
   - Title: bottom-right, black bg, white text
   ========================================================= */

:root{
  --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);
}

.thumb-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.thumb-date{
  position: absolute;
  top: var(--thumb-gap);
  left: 0;
  display: inline-block;
  padding: .55em 1.0em;
  background: #000;
  color: #fff;
  font-weight: 800;
  font-size: var(--thumb-date-fs);
  letter-spacing: .08em;
  line-height: 1;
}

.thumb-title{
  position: absolute;
  right: 0;
  bottom: var(--thumb-gap);
  display: inline-block;
  max-width: min(92%, 1000px);
  padding: .55em 1.0em;
  background: #000;
  color: #fff;
  font-weight: 900;
  /*
    NOTE:
    - Primary knob: --thumb-title-fs (defined in :root above)
    - Fallback alias: --thum-title-fs (common typo) so "変えたのに効かない"事故を減らす
  */
  font-size: var(--thumb-title-fs, var(--thum-title-fs, 32px));
  letter-spacing: .02em;
  line-height: 1.06;
}

@media (max-width: 767px){
  .thumb-title{ font-size: var(--thumb-title-fs-sp, var(--thum-title-fs-sp, 22px)); }
}

.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;
}

.thumb-badge--img{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.thumb-badge-img{
  display: block;
  height: clamp(30px, 3.6vw, 52px);
  width: auto;
}


body[data-page="benmi-home"] .section-title.section-title--logo{
  margin: 30px 0 30px; /* 上下の“空気”を増やす。ここだけ調整 */
}

/* 空の見出し（upcomingのh2空白）に余白が乗らないよう保険 */
body[data-page="benmi-home"] .section-title:empty{
  margin: 0;
  padding: 0;
  height: 0;
}

/* =========================================================
   Global fade-in (all pages) 2000ms
   - Use fixed overlay fade-out (SPでのbody/fixed合成ズレ対策)
   - CSS-only (no JS dependency)
   ========================================================= */
html{
  background: var(--bg, #050505);
}

/* body自体はアニメーションしない（SPでfixed要素とズレやすいため） */
body{
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg, #050505);
  pointer-events: none;
  z-index: 2147483647;
  opacity: 1;
  animation: benmiFadeScreen 2000ms ease forwards;
}

@keyframes benmiFadeScreen{
  0%   { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce){
  body::before{
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }
}