/* ============================================
   BJ 2.0 — Common Styles
   Shared across all pages
   ============================================ */

/* --- Suppress Elementor / Theme / Plugin residuals --- */
.bj20-page .elementor-location-popup,
.bj20-page .elementor-location-header,
.bj20-page .elementor-location-footer,
.bj20-page .dialog-widget-content,
.bj20-page .otgs-development-site-front-end,
.bj20-page [class*="elementor-popup"],
.bj20-page .hello-header,
.bj20-page .hello-footer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* --- Reset & Variables --- */
.bj20-page *, .bj20-page *::before, .bj20-page *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

.bj20-page {
  /* ============================================================
     Layer 1: プリミティブカラー（原初ブランドカラー + 派生スケール）
     ============================================================ */

  /* 鉄紺 tetsukon — ベース #111B3A */
  --color-tetsukon-100: #E7E8EB;
  --color-tetsukon-200: #C4C6CE;
  --color-tetsukon-300: #9498A6;
  --color-tetsukon-400: #585F75;
  --color-tetsukon-500: #111B3A;
  --color-tetsukon-600: #0E162E;
  --color-tetsukon-700: #0A1023;
  --color-tetsukon-500-rgb: 17, 27, 58;

  /* 藍 ai — ベース #2A5672（将来使用枠） */
  --color-ai-500: #2A5672;

  /* 青磁 seiji — ベース #7BA696（将来使用枠） */
  --color-seiji-500: #7BA696;

  /* 砂 suna — ベース #BFBA9F */
  --color-suna-100: #F9F8F5;
  --color-suna-200: #EFEEE7;
  --color-suna-300: #E2E0D4;
  --color-suna-400: #D2CFBC;
  --color-suna-500: #BFBA9F;
  --color-suna-600: #99957F;
  --color-suna-700: #73705F;
  --color-suna-100-rgb: 249, 248, 245;

  /* 黄橡 kitsurubami — ベース #BB935D */
  --color-kitsurubami-100: #F8F4EF;
  --color-kitsurubami-200: #EEE4D6;
  --color-kitsurubami-300: #E0CEB6;
  --color-kitsurubami-400: #CFB38E;
  --color-kitsurubami-500: #BB935D;
  --color-kitsurubami-600: #96764A;
  --color-kitsurubami-700: #705838;
  --color-kitsurubami-500-rgb: 187, 147, 93;

  /* 茜 akane — ベース #B11D1D */
  --color-akane-100: #F7E8E8;
  --color-akane-200: #ECC6C6;
  --color-akane-300: #DC9999;
  --color-akane-400: #C86161;
  --color-akane-500: #B11D1D;
  --color-akane-600: #8E1717;
  --color-akane-700: #6A1111;

  /* 墨 sumi — ベース #2D2B28 */
  --color-sumi-100: #EAEAEA;
  --color-sumi-200: #CACAC9;
  --color-sumi-300: #9C9690;
  --color-sumi-400: #6C6B68;
  --color-sumi-500: #2D2B28;
  --color-sumi-600: #242220;
  --color-sumi-700: #1B1A18;

  /* ニュートラル — rgba() overlay / shadow 用 */
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;

  /* ============================================================
     Layer 2: セマンティックカラー（役割ベース）
     ============================================================ */
  --color-surface-dark:  var(--color-tetsukon-500);
  --color-footer-bg:     var(--color-tetsukon-600);
  --color-accent:        var(--color-kitsurubami-500);
  --color-error:         var(--color-akane-500);
  --color-bg:            var(--color-suna-100);
  --color-bg-sub:        var(--color-suna-200);
  --color-border:        var(--color-suna-300);
  --color-text:          var(--color-sumi-500);
  --color-text-sub:      var(--color-sumi-400);
  --color-text-muted:    var(--color-sumi-300);

  /* rgba() 用 RGB 版セマンティックトークン */
  --color-surface-dark-rgb: var(--color-tetsukon-500-rgb);
  --color-bg-rgb:            var(--color-suna-100-rgb);
  --color-accent-rgb:        var(--color-kitsurubami-500-rgb);

  /* ============================================================
     タイポグラフィトークン
     ============================================================ */
  /* フォントサイズ — 流動的 */
  --fs-hero-main:  clamp(24px, 4vw, 44px);
  --fs-hero-sub:   clamp(20px, 3.2vw, 36px);
  --fs-page-hero:  clamp(22px, 3.5vw, 38px);
  --fs-heading-l:  clamp(20px, 2.8vw, 28px);
  --fs-heading-m:  clamp(20px, 2.5vw, 26px);
  --fs-h2:         clamp(18px, 2.2vw, 24px);
  --fs-wish:       clamp(17px, 2.2vw, 21px);
  --fs-quote:      clamp(18px, 2.8vw, 28px);

  /* フォントサイズ — 固定 */
  --fs-body:    15px;
  --fs-body-sm: 14px;
  --fs-label:   13px;
  --fs-note:    12px;
  --fs-micro:   11px;
  --fs-kanji:   52px;

  /* letter-spacing */
  --ls-tight:   0.04em;
  --ls-normal:  0.06em;
  --ls-heading: 0.08em;
  --ls-cta:     0.1em;
  --ls-link:    0.12em;
  --ls-label:   0.15em;
  --ls-wide:    0.2em;

  --serif-jp: 'Noto Serif JP', 'YuMincho', serif;
  --sans-jp: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --serif-en: 'Cormorant Garamond', serif;
  --section-py: clamp(80px, 12vw, 160px);
  --content-w: 860px;
  --wide-w: 1200px;

  font-family: var(--sans-jp) !important;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg) !important;
  line-height: 2;
  letter-spacing: 0.04em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

/* Override any Elementor/theme residuals */
.bj20-page .elementor-widget-wrap,
.bj20-page .elementor-element,
.bj20-page #wpadminbar ~ * { /* preserve admin bar */ }

.bj20-page img { max-width: 100%; height: auto; display: block; }
.bj20-page a { color: inherit; text-decoration: none; }
.bj20-page button { border: none; background: none; cursor: pointer; font: inherit; }
.bj20-page ul { list-style: none; }


/* ============================
   Header
   ============================ */
.bj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9990;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s ease, padding 0.4s ease, box-shadow 0.5s ease;
}

/* WP Admin Bar offset */
.admin-bar .bj-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .bj-header { top: 46px; }
}

.bj-header.is-scrolled {
  background: rgba(var(--color-bg-rgb),0.97);
  padding: 14px 40px;
  box-shadow: 0 1px 0 var(--color-border);
}

.bj-header__logo img {
  height: 50px; width: auto;
  transition: height 0.4s ease;
}
.bj-header.is-scrolled .bj-header__logo img { height: 40px; }

.bj-header__right {
  display: flex; align-items: center; gap: 24px;
}

.bj-header__lang {
  font-family: var(--serif-en);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-heading);
  color: var(--color-bg);
  transition: color 0.5s ease;
  display: flex; align-items: center; gap: 6px;
}
.bj-header.is-scrolled .bj-header__lang { color: var(--color-text-sub); }

.bj-header__lang svg {
  display: block;
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linejoin: round;
}
.bj-header__lang-code {
  transform: translateY(-0.1em);
}

.bj-header__menu {
  display: flex; flex-direction: column; gap: 5.5px;
  padding: 8px 0; cursor: pointer;
}
.bj-header__menu span {
  display: block; width: 28px; height: 1.5px;
  background: var(--color-bg);
  transition: background 0.5s ease;
}
.bj-header.is-scrolled .bj-header__menu span { background: var(--color-text-sub); }


/* ============================
   Section Commons
   ============================ */
.bj-section {
  padding: var(--section-py) 40px;
}
.bj-section__inner {
  max-width: var(--content-w); margin: 0 auto;
}
.bj-section__label {
  font-family: var(--serif-en);
  font-size: 16px; font-weight: 400;
  letter-spacing: var(--ls-wide); color: var(--color-accent);
  margin-bottom: 40px;
}
/* ============================
   Section Heading (共通)
   ============================ */
.bj-section__heading {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--color-text);
  letter-spacing: var(--ls-cta);
  margin: 8px 0 24px;
  line-height: 1.6;
}
.bj-section__body {
  font-size: var(--fs-body); line-height: 2.2;
  color: var(--color-text-sub); margin-bottom: 48px;
}
.bj-section__body p + p { margin-top: 24px; }

.bj-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif-en);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-link);
  color: var(--color-accent);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.3s ease, gap 0.3s ease;
}
.bj-link:hover { border-color: var(--color-accent); gap: 18px; }
.bj-link svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  transition: transform 0.3s ease;
}
.bj-link:hover svg { transform: translateX(4px); }

.bj-divider {
  width: 40px; height: 1px;
  background: var(--color-border);
  margin: 0 auto;
}


/* ============================
   CTA
   ============================ */
.bj-cta {
  background: var(--color-surface-dark);
  padding: var(--section-py) 40px;
  text-align: center;
}
.bj-cta__inner { max-width: 600px; margin: 0 auto; }
.bj-cta__heading {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: var(--fs-heading-l);
  color: var(--color-bg);
  letter-spacing: var(--ls-cta); line-height: 1.9;
  margin-bottom: 48px;
}
.bj20-page .bj-cta__button {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif-jp); font-weight: 400;
  font-size: var(--fs-body); letter-spacing: var(--ls-cta);
  color: var(--color-bg);
  padding: 18px 48px;
  border: 1px solid rgba(var(--color-white-rgb),0.3);
  transition: all 0.4s ease;
}
.bj20-page .bj-cta__button:hover {
  background: rgba(var(--color-white-rgb),0.08);
  border-color: rgba(var(--color-white-rgb),0.6);
  gap: 18px;
}
.bj20-page .bj-cta__button svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  transition: transform 0.3s ease;
}
.bj20-page .bj-cta__button:hover svg { transform: translateX(4px); }


/* ============================
   Footer
   ============================ */
.bj-footer {
  background: var(--color-footer-bg);
  padding: 64px 40px 40px;
  color: rgba(var(--color-white-rgb),0.5);
}
.bj-footer__inner {
  max-width: var(--wide-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 60px;
}
.bj-footer__brand a img {
  display: block;
  height: 48px; width: auto;
  margin-bottom: 20px; opacity: 0.8;
}
.bj-footer__tagline {
  font-family: var(--serif-jp);
  font-size: var(--fs-note); line-height: 1.8;
  color: rgba(var(--color-white-rgb),0.35); letter-spacing: var(--ls-normal);
}
.bj-footer__nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.bj-footer__nav-group h4 {
  font-family: var(--serif-en);
  font-size: var(--fs-note); font-weight: 400;
  letter-spacing: var(--ls-label);
  color: rgba(var(--color-white-rgb),0.3);
  margin-bottom: 16px; text-transform: uppercase;
}
.bj-footer__nav-group li { margin-bottom: 10px; }
.bj-footer__nav-group a {
  font-family: var(--serif-en);
  font-size: var(--fs-label); color: rgba(var(--color-white-rgb),0.5);
  transition: color 0.3s ease; letter-spacing: var(--ls-tight);
}
.bj-footer__nav-group a:hover { color: rgba(var(--color-white-rgb),0.8); }

.bj-footer__bottom {
  max-width: var(--wide-w); margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--color-white-rgb),0.08);
  display: flex; justify-content: space-between; align-items: center;
}
.bj-footer__copyright {
  font-size: var(--fs-micro); letter-spacing: var(--ls-normal);
  color: rgba(var(--color-white-rgb),0.25);
}
.bj-footer__links { display: flex; gap: 24px; }
.bj-footer__links a {
  font-size: var(--fs-micro); color: rgba(var(--color-white-rgb),0.3);
  letter-spacing: var(--ls-tight); transition: color 0.3s ease;
}
.bj-footer__links a:hover { color: rgba(var(--color-white-rgb),0.6); }


/* ============================
   Scroll Animations
   ============================ */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
.fade-in--d1 { transition-delay: 0.15s; }
.fade-in--d2 { transition-delay: 0.3s; }
.fade-in--d3 { transition-delay: 0.45s; }


/* ============================
   Responsive (common)
   ============================ */
@media (max-width: 1024px) {
  .bj-footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .bj-section { padding: var(--section-py) 24px; }
  .bj-header { padding: 16px 20px; }
  .bj-header.is-scrolled { padding: 12px 20px; }
  .bj-footer__nav { grid-template-columns: 1fr 1fr; }
  .bj-footer__bottom {
    flex-direction: column; gap: 16px; text-align: center;
  }
  .bj-cta { padding: var(--section-py) 24px; }
}


/* ============================
   Slide Menu (right drawer)
   ============================ */
.bj-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(var(--color-surface-dark-rgb),0.4);
  z-index: 9995;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bj-menu-overlay.is-open {
  opacity: 1; visibility: visible;
}

.bj-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 85vw;
  background: var(--color-bg);
  z-index: 9998;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.bj-menu.is-open {
  transform: translateX(0);
}

/* Admin bar offset */
.admin-bar .bj-menu { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .bj-menu { top: 46px; }
}

.bj-menu__header {
  display: flex; justify-content: flex-end;
  padding: 20px 24px 0;
}
.bj-menu__close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-sub);
  transition: color 0.3s ease;
  cursor: pointer;
}
.bj-menu__close:hover { color: var(--color-text); }
.bj-menu__close svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
}

.bj-menu__body {
  flex: 1; padding: 32px 40px;
}

.bj-menu__list {
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
.bj-menu__list li {
  margin: 0 !important; padding: 0 !important;
}
.bj-menu__list a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text);
  letter-spacing: var(--ls-normal);
  transition: color 0.3s ease;
}
.bj-menu__list a:hover { color: var(--color-accent); }

.bj-menu__list--sub a {
  font-size: var(--fs-body);
  padding: 10px 0 10px 8px;
  font-weight: 300;
}
.bj-menu__list--sub a span {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  margin-left: 8px;
}

.bj-menu__list--util a {
  font-family: var(--sans-jp);
  font-weight: 300;
  font-size: var(--fs-body-sm);
  color: var(--color-text-sub);
  padding: 10px 0;
}

.bj-menu__divider {
  width: 100%; height: 1px;
  background: var(--color-border);
  margin: 12px 0;
}

.bj-menu__sub-label {
  font-family: var(--serif-en);
  font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 16px 0 4px;
}

.bj-menu__footer {
  padding: 24px 40px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center;
}
.bj-menu__footer img { opacity: 0.4; }

/* Body scroll lock when menu is open */
.bj20-page.menu-open { overflow: hidden; }

@media (max-width: 767px) {
  .bj-menu__header         { padding: 14px 24px 0; }
  .bj-menu__body           { padding: 20px 28px; }
  .bj-menu__list a         { padding: 10px 0; }
  .bj-menu__list--sub a    { padding: 8px 0 8px 8px; }
  .bj-menu__list--util a   { padding: 8px 0; }
  .bj-menu__divider        { margin: 8px 0; }
  .bj-menu__sub-label      { margin: 10px 0 4px; }
  .bj-menu__footer         { padding: 16px 28px; }
}


/* ============================
   Language Switcher Dropdown
   ============================ */
.bj-header__lang-wrap { position: relative; }

.bj-header__lang-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--color-bg); min-width: 140px;
  box-shadow: 0 4px 24px rgba(var(--color-black-rgb),0.12);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.25s ease;
}
.bj-header__lang-dropdown.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.bj-lang-item {
  display: block; padding: 10px 20px; font-size: var(--fs-label);
  color: var(--color-text-sub); transition: color 0.2s ease;
}
.bj-lang-item:hover, .bj-lang-item.is-active { color: var(--color-text); }
.bj-lang-item.is-active { font-weight: 400; }

/* Non-scrolled header (transparent) dropdown variant */
.bj-header:not(.is-scrolled) .bj-header__lang-dropdown {
  background: rgba(var(--color-surface-dark-rgb),0.9); backdrop-filter: blur(8px);
}
.bj-header:not(.is-scrolled) .bj-lang-item { color: rgba(var(--color-white-rgb),0.7); }
.bj-header:not(.is-scrolled) .bj-lang-item:hover,
.bj-header:not(.is-scrolled) .bj-lang-item.is-active { color: var(--color-bg); }


/* ============================
   Inner Page Hero (.bj-page-hero)
   ============================ */
.bj-page-hero {
  position: relative; height: 60vh; min-height: 400px;
  overflow: hidden; display: flex; align-items: flex-end;
  padding: 0 40px clamp(60px, 10vw, 120px);
}
.bj-page-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.bj-page-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(var(--color-surface-dark-rgb),0.2) 0%, rgba(var(--color-surface-dark-rgb),0.6) 100%);
}
.bj-page-hero__content { position: relative; z-index: 2; }
.bj-page-hero__label {
  font-family: var(--serif-en); font-size: var(--fs-label);
  letter-spacing: var(--ls-wide); color: var(--color-accent); margin-bottom: 16px;
}
.bj-page-hero__title {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: var(--fs-page-hero); color: var(--color-bg);
  letter-spacing: var(--ls-cta); line-height: 1.7;
}

@media (max-width: 767px) {
  .bj-page-hero { padding: 0 24px clamp(40px, 8vw, 80px); }
}

/* --- Page Hero responsive background images (mobile first) --- */
/* Mobile: 640w */
.bj-page-hero__bg--concept { background-image: url('../img/bj20/concept-hero-640w.webp'); }
.bj-page-hero__bg--journey { background-image: url('../img/bj20/journey-hero-640w.webp'); }
.bj-page-hero__bg--sensei  { background-image: url('../img/bj20/sensei-hero-640w.webp');  }
/* FAQ hero: JS srcset (data-src-base) で設定 */

/* Tablet: 1200w */
@media (min-width: 768px) {
  .bj-page-hero__bg--concept { background-image: url('../img/bj20/concept-hero-1200w.webp'); }
  .bj-page-hero__bg--journey { background-image: url('../img/bj20/journey-hero-1200w.webp'); }
  .bj-page-hero__bg--sensei  { background-image: url('../img/bj20/sensei-hero-1200w.webp');  }
}

/* PC: full size */
@media (min-width: 1025px) {
  .bj-page-hero__bg--concept { background-image: url('../img/bj20/concept-hero.webp'); }
  .bj-page-hero__bg--journey { background-image: url('../img/bj20/journey-hero.webp'); }
  .bj-page-hero__bg--sensei  { background-image: url('../img/bj20/sensei-hero.webp');  }
}


/* ============================
   Video Grid (.bj-video-swiper)
   ============================ */
.bj-video-swiper {
  background: var(--color-bg-sub);
  padding: var(--section-py) 40px;
}
.bj-video-swiper__header {
  margin-bottom: 48px;
}
.bj-video-swiper__heading {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-heading-m);
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
  line-height: 1.8;
  margin-bottom: 20px;
}
.bj-video-swiper__sub {
  font-size: var(--fs-body-sm);
  line-height: 2.0;
  color: var(--color-text-sub);
  max-width: 560px;
}

.bj-video-swiper__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--wide-w);
  margin: 0 auto;
}

.bj-video-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.bj-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-dark);
  margin-bottom: 16px;
}
.bj-video-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.bj-video-card:hover .bj-video-card__thumb img { transform: scale(1.03); }

.bj-video-card__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--color-surface-dark-rgb),0.2);
  transition: background 0.3s ease;
}
.bj-video-card:hover .bj-video-card__play { background: rgba(var(--color-surface-dark-rgb),0.35); }
.bj-video-card__play svg {
  width: 40px; height: 40px;
  fill: rgba(var(--color-white-rgb),0.85);
  stroke: none;
  filter: drop-shadow(0 2px 8px rgba(var(--color-black-rgb),0.3));
}

.bj-video-card__body { padding: 0 4px; }
.bj-video-card__label {
  display: block;
  font-family: var(--serif-en);
  font-size: var(--fs-note); letter-spacing: var(--ls-label);
  color: var(--color-accent);
  margin-bottom: 6px;
}
.bj-video-card__title {
  font-family: var(--sans-jp);
  font-size: var(--fs-body-sm); font-weight: 400;
  color: var(--color-text-sub);
  line-height: 2; letter-spacing: var(--ls-tight);
}

@media (max-width: 1024px) { .bj-video-swiper { padding: var(--section-py) 32px; } }
@media (max-width: 767px) {
  .bj-video-swiper { padding: var(--section-py) 20px; }
  .bj-video-swiper__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================
   Video Modal (.bj-video-modal)
   ============================ */
.bj-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bj-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.bj-video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-surface-dark-rgb),0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bj-video-modal__content {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 900px;
}

.bj-video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--color-white-rgb),0.7);
  transition: color 0.3s ease;
}
.bj-video-modal__close:hover {
  color: var(--color-bg);
}
.bj-video-modal__close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.bj-video-modal__iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-dark);
}
.bj-video-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CTA inside modal */
.bj-video-modal__cta {
  text-align: center;
  padding: 28px 0 28px;
  background: var(--color-surface-dark);
}
.bj-video-modal__cta-lead {
  font-family: var(--serif-jp);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  color: rgba(var(--color-white-rgb),0.75);
  margin-bottom: 20px;
}
.bj20-page .bj-video-modal__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-cta);
  color: var(--color-bg);
  padding: 16px 44px;
  border: 1px solid rgba(var(--color-white-rgb),0.35);
  transition: all 0.4s ease;
}
.bj20-page .bj-video-modal__cta-button:hover {
  background: rgba(var(--color-white-rgb),0.08);
  border-color: rgba(var(--color-white-rgb),0.6);
  gap: 18px;
}
.bj20-page .bj-video-modal__cta-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  transition: transform 0.3s ease;
}
.bj20-page .bj-video-modal__cta-button:hover svg {
  transform: translateX(4px);
}
.bj-video-modal__cta-note {
  font-family: var(--sans-jp);
  font-size: var(--fs-micro);
  color: rgba(var(--color-white-rgb),0.4);
  margin-top: 14px;
  letter-spacing: var(--ls-tight);
}

/* Body scroll lock when modal is open */
.bj20-page.modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .bj-video-modal__content {
    width: 95vw;
  }
  .bj-video-modal__close {
    top: -40px;
  }
  .bj-video-modal__cta-lead { font-size: var(--fs-label); }
  .bj-video-modal__cta-button { font-size: var(--fs-body-sm); padding: 14px 36px; }
  .bj-video-modal__cta-note { font-size: var(--fs-micro); }
}


/* ============================
   Header: Account Icon
   ============================ */
.bj-header .bj-header__account {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-bg);
  transition: color 0.5s ease;
}

.bj-header .bj-header__account svg {
  width: 22px; height: 22px;
}
.bj-header.is-scrolled .bj-header__account { color: var(--color-text-sub); }

.bj-header__account-dot {
  position: absolute;
  top: 0; right: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 1.5px solid transparent;
  transition: border-color 0.5s ease;
}
.bj-header:not(.is-scrolled) .bj-header__account-dot {
  border-color: rgba(var(--color-surface-dark-rgb), 0.01); /* transparent上で見やすく */
}
.bj-header.is-scrolled .bj-header__account-dot {
  border-color: rgba(var(--color-bg-rgb), 0.97); /* 白背景に合わせる */
}


/* ============================
   間 (Ma) — shared across pages
   ============================ */
.bj-ma {
  position: relative;
  height: 70vh; min-height: 400px; max-height: 700px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bj-ma > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.bj-ma__overlay {
  position: absolute; inset: 0;
  background: rgba(var(--color-surface-dark-rgb),0.45);
}
.bj-ma__quote {
  position: relative; z-index: 2;
  text-align: center; padding: 40px;
}
.bj-ma__quote blockquote {
  font-family: var(--serif-jp); font-weight: 300;
  font-size: var(--fs-quote);
  color: var(--color-bg);
  letter-spacing: var(--ls-cta); line-height: 2;
}