/* ============================================================
   ENJiN!! デザインシステム（実装指示書 §6–§8）
   値はすべて tokens.css のトークン経由。ハードコード禁止。
   単位: PC = calc(var(--ej-u) × 実測値) / SP = calc(var(--ej-us) × 実測値)
   ============================================================ */

/* ---------- 基本 ---------- */
.ej-scope, .ej-scope * { box-sizing: border-box; }
.ej-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ロゴSVGは viewBox がアートワークに密着しているため、既定の overflow: hidden
   だと縮小描画時に外周のアンチエイリアスが切られる。切り抜きを解除する。 */
.ej-header__brand svg,
.ej-drawer__logo svg,
.ej-fv-sp__logo svg { overflow: visible; }

/* PC / SP 切り替え */
.ej-pc-only { display: none; }
.ej-sp-only { display: block; }
@media (min-width: 1024px) {
  .ej-pc-only { display: block; }
  .ej-sp-only { display: none; }
}

/* 未読バッジ（メッセージ） */
.ej-gnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--enjin-pink-core);
  color: var(--enjin-paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ============================================================
   サイトヘッダー — スクロール追従
   ユーティリティバー＋メインヘッダーをひと塊で画面上端に固定する。
   ============================================================ */
.ej-siteheader {
  position: sticky;
  top: 0;
  z-index: 40;
}
/* 追従ヘッダーに隠れないよう、アンカー遷移の着地点をずらす */
html {
  scroll-padding-top: calc(var(--ej-u) * (var(--ejn-util-h) + var(--ejn-header-h)));
}
@media (max-width: 1023.98px) {
  html { scroll-padding-top: calc(max(44px, var(--ej-us) * 36) + var(--ej-us) * 56); }
}

/* ============================================================
   ユーティリティバー（§6-1）
   ============================================================ */
.ej-utility {
  background: var(--c-accent);
  color: var(--enjin-paper);
  font-family: var(--f-jp);
}
.ej-utility a { color: inherit; text-decoration: none; }
.ej-utility a:hover { opacity: 0.8; }
.ej-utility a:focus-visible { outline: calc(var(--bw) * 2) solid var(--enjin-paper); outline-offset: calc(var(--bw) * -2); }

.ej-utility__in {
  display: flex;
  align-items: center;
  height: calc(var(--ej-u) * var(--ejn-util-h));
  padding-left: calc(var(--ej-u) * var(--ejn-util-pad-l));
  padding-right: calc(var(--ej-u) * var(--ejn-util-pad-r));
  gap: calc(var(--ej-u) * var(--ejn-util-gap));
}
.ej-utility__brand {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--ej-u) * var(--ejn-util-fs) * 1.25);
  letter-spacing: calc(var(--ls-en-body) * -1);
  white-space: nowrap;
  display: flex; align-items: baseline; gap: calc(var(--ej-u) * 3);
}
.ej-utility__brand small {
  font-size: 0.55em; font-weight: 500; letter-spacing: var(--ls-en-body);
}
.ej-utility__copy {
  margin: 0;
  font-size: calc(var(--ej-u) * var(--ejn-util-fs));
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  white-space: nowrap;
  overflow: hidden;
}
.ej-utility__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--ej-u) * var(--ejn-util-gap));
  font-size: calc(var(--ej-u) * var(--ejn-util-fs));
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  white-space: nowrap;
}

/* SP ユーティリティバー */
.ej-utility__copy--sp { display: none; }
@media (max-width: 1023.98px) {
  .ej-utility {
    background: var(--enjin-paper);
    color: var(--enjin-black);
  }
  .ej-utility a.ej-utility__brand { color: #14a8b0; }
  .ej-utility a:focus-visible { outline-color: #14a8b0; }
  .ej-utility__in {
    height: max(44px, calc(var(--ej-us) * 36));
    padding-left: calc(var(--ej-us) * 12);
    padding-right: calc(var(--ej-us) * 8);
    gap: calc(var(--ej-us) * 8);
  }
  .ej-utility__brand {
    flex: none;
    font-size: calc(var(--ej-us) * var(--ejs-util-fs) * 1.25);
  }
  .ej-utility__copy--pc { display: none; }
  .ej-utility__copy--sp {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: calc(var(--ej-us) * 9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: left;
  }
  .ej-utility__links { display: none; }
}
.ej-drawer-btn {
  display: none;
  margin-left: auto;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: calc(var(--ej-us) * 6);
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.ej-drawer-btn svg { width: calc(var(--ej-us) * 26); height: calc(var(--ej-us) * 26); display: block; }
@media (max-width: 1023.98px) {
  .ej-drawer-btn { display: inline-flex; }
}

/* ============================================================
   メインヘッダー（§6-2）
   ============================================================ */
.ej-header {
  background: var(--c-bg-fv);
  font-family: var(--f-jp);
}
.ej-header__in {
  display: flex;
  align-items: center;
  height: calc(var(--ej-u) * var(--ejn-header-h));
  padding-left: calc(var(--ej-u) * var(--ejn-header-pad-l));
  padding-right: calc(var(--ej-u) * var(--ejn-header-pad-r));
}
.ej-header__brand {
  color: var(--enjin-black);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.ej-header__brand svg {
  display: block;
  height: calc(var(--ej-u) * var(--ejn-logo-h));
  width: auto;
}
.ej-header__brand:focus-visible { outline: calc(var(--bw) * 2) solid var(--enjin-black); outline-offset: calc(var(--bw) * 4); }
.ej-header__desc {
  margin: 0;
  margin-left: calc(var(--ej-u) * var(--ejn-desc-gap));
  font-size: calc(var(--ej-u) * var(--ejn-desc-fs));
  font-weight: 700;
  line-height: var(--ejn-desc-lh);
  letter-spacing: var(--ls-jp);
  color: var(--c-text);
  white-space: nowrap;
}
.ej-gnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--ej-u) * var(--ejn-nav-gap));
}
.ej-gnav__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ej-u) * 6);
  color: var(--c-text);
  text-decoration: none;
  font-size: calc(var(--ej-u) * var(--ejn-nav-fs));
  font-weight: 700;
  letter-spacing: var(--ls-jp);
  white-space: nowrap;
}
.ej-gnav__link svg {
  width: calc(var(--ej-u) * var(--ejn-nav-icon));
  height: calc(var(--ej-u) * var(--ejn-nav-icon));
}
.ej-gnav__link:hover { color: var(--c-accent); transition: color var(--dur) var(--ease); }
.ej-gnav__link:focus-visible { outline: calc(var(--bw) * 2) solid var(--enjin-black); outline-offset: calc(var(--bw) * 2); }

/* SP: フロントページは FV 内に大ロゴがあるためメインヘッダーを出さない。
   下層ページはロゴのみのコンパクトヘッダー */
@media (max-width: 1023.98px) {
  .ej-header--front { display: none; }
  body.page-template-page-signup-php .ej-header { display: none; }
  .ej-header__in {
    height: calc(var(--ej-us) * 56);
    padding-inline: calc(var(--ej-us) * var(--ejs-util-pad));
    justify-content: center;
  }
  /* 42.4 = アートワーク高 40px 相当（viewBox 余白 ×1.06 を打ち消す） */
  .ej-header__brand svg { height: calc(var(--ej-us) * 42.4); width: auto; }
  /* .ej-btn（後ろで display: inline-flex）に負けないよう .ej-header で絞る */
  .ej-header__desc, .ej-gnav, .ej-header .ej-btn--header { display: none; }
}

/* ヘッダーCTA（黒 pill — FV内CTAはシアン。§6-2 重要差分） */
.ej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--f-jp);
  font-weight: 700;
  letter-spacing: var(--ls-jp);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ej-btn--header {
  margin-left: calc(var(--ej-u) * var(--ejn-nav-gap));
  height: calc(var(--ej-u) * var(--ejn-hcta-h));
  padding-inline: calc(var(--ej-u) * var(--ejn-hcta-pad-x));
  gap: calc(var(--ej-u) * var(--ejn-hcta-gap));
  background: var(--enjin-black);
  color: var(--enjin-paper);
  font-size: calc(var(--ej-u) * var(--ejn-hcta-fs));
  transition: background var(--dur) var(--ease);
}
.ej-btn--header:hover { background: var(--c-accent); }
.ej-btn--signup {
  background: var(--c-cta-bg);
  color: var(--enjin-paper);
  box-shadow: 0 calc(var(--bw) * 8) calc(var(--bw) * 18) rgba(32, 174, 180, 0.38);
}
.ej-btn--signup:hover {
  background: var(--enjin-cyan-deep);
  color: var(--enjin-paper);
}
.ej-btn--header svg { width: calc(var(--ej-u) * 17); height: calc(var(--ej-u) * 17); }
.ej-btn:focus-visible { outline: calc(var(--bw) * 2) solid var(--enjin-black); outline-offset: calc(var(--bw) * 2); }

/* ============================================================
   PC ファーストビュー（デザインカンプ ENJIN_PC_01_KV）
   左：ロゴ・帯・説明・無料相談／右：人物＋斜めストライプ／下：特徴3点
   ============================================================ */
@media (min-width: 1024px) {
  /* ヘッダーは通常の追従（sticky）のまま、白地でつなぐ */
  body.home .ej-header {
    background: var(--enjin-paper);
    box-shadow: inset 0 -1px 0 var(--ejk-line);
  }
}
.ej-fv-pc {
  position: relative;
  background: var(--enjin-paper);
  height: auto;
  min-height: 0;
  overflow: hidden;
  font-family: var(--f-jp);
  color: var(--enjin-black);
}
.ej-fv-pc__stage {
  position: relative;
  min-height: calc(var(--ej-k) * var(--ejk-kv-h));
  overflow: hidden;
  background-color: var(--enjin-paper);
}
/* ヘッダーの下を画面いっぱいに。左が文章、右が人物。写真は切らない */
@media (min-width: 1024px) {
  body.home .ej-fv-pc {
    --ej-head: calc(var(--ej-u) * (var(--ejn-util-h) + var(--ejn-header-h)));
    --ej-kw: calc(min(100vw, 1920px) / 1440);
    --ej-k: min(var(--ej-kw), (100svh - var(--ej-head)) / 820);
    height: calc(100svh - var(--ej-head));
    overflow: hidden;
  }
  body.home .ej-fv-pc {
    --ej-img-w: calc((100svh - var(--ej-head)) * 1560 / 1520);
  }
  body.home .ej-fv-pc__stage {
    display: flex;
    align-items: stretch;
    justify-content: safe center;
    height: 100%;
    min-height: 0;
    padding: 0 clamp(32px, 4vw, 80px);
    gap: clamp(28px, 3vw, 56px);
    box-sizing: border-box;
    overflow: hidden;
  }
  body.home .ej-fv-pc__copy {
    order: 1;
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(40vw, calc(var(--ej-k) * 520));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 0;
    box-sizing: border-box;
  }
  body.home .ej-fv-pc__logo,
  body.home .ej-fv-pc__entry,
  body.home .ej-fv-pc__ribbon {
    max-width: 100%;
  }
  body.home .ej-fv-pc__ribbon {
    max-width: calc(var(--ej-k) * 400);
  }
  body.home .ej-fv-pc__visual {
    order: 2;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: stretch;
    width: var(--ej-img-w);
    height: 100%;
    /* 幅が足りないときは写真を文章の下へ重ね、右端で切らない */
    margin-left: min(0px, calc(100vw - var(--ej-img-w) - min(40vw, var(--ej-k) * 520) - clamp(28px, 3vw, 56px) - clamp(32px, 4vw, 80px)));
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    container-type: size;
    overflow: visible;
  }
  body.home .ej-fv-pc__extend {
    position: absolute;
    z-index: 0;
    top: 0;
    left: calc(100cqh * 1560 / 1520);
    height: 100%;
    width: calc(100cqh * 1200 / 1520);
    display: block;
  }
  body.home .ej-fv-pc__visual picture {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    width: auto;
  }
  body.home .ej-fv-pc__people {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: left top;
  }
  /* 写真の下端は腰で切れている。下だけぼかして白に溶かす */
  body.home .ej-fv-pc__extend,
  body.home .ej-fv-pc__visual picture {
    -webkit-mask-image: linear-gradient(#000 0, #000 74%, transparent 100%);
    mask-image: linear-gradient(#000 0, #000 74%, transparent 100%);
  }
  body.home .ej-fv-pc__visual::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(96px, 16%, 150px);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.72) 46%,
      #fff 78%
    );
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 36%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 36%, #000 100%);
  }
}
/* 左上の淡い三角だけ CSS。斜め帯は元画像に入っている */
.ej-fv-pc__stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ej-fv-pc__tri {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--ej-k) * 390);
  height: calc(var(--ej-k) * 210);
  background: #dbf7f8;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ej-fv-pc__band {
  display: none;
  position: absolute;
  left: 28%;
  width: 140%;
  transform: rotate(-38deg);
  transform-origin: center center;
}
.ej-fv-pc__band--soft {
  top: -28%;
  height: 46%;
  background: #bdebf0;
}
.ej-fv-pc__band--deep {
  top: 2%;
  height: 42%;
  background: #11b0b9;
}
.ej-fv-pc__band--deep2 {
  top: 46%;
  height: 70%;
  background: #11b0b9;
}
.ej-fv-pc__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 人物写真（1560×1520）は切らず、高さに合わせて縦横比のまま置く */
  width: auto;
  height: 100%;
  aspect-ratio: 1560 / 1520;
  max-width: calc(100% - min(46%, calc(var(--ej-k) * 600)));
  z-index: 1;
  pointer-events: none;
}
.ej-fv-pc__visual picture { display: block; height: 100%; width: 100%; background: none; }
.ej-fv-pc__people {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  object-fit: contain;
  object-position: right center;
}
.ej-fv-pc__copy {
  position: relative;
  z-index: 2;
  width: min(44%, calc(var(--ej-k) * 560));
  padding: calc(var(--ej-k) * 72) 0 calc(var(--ej-k) * 12) calc(var(--ej-k) * 64);
}
.ej-fv-pc__logo {
  position: relative;
  width: min(100%, calc(var(--ej-k) * 480));
  height: calc(var(--ej-k) * 178);
  color: var(--enjin-black);
}
.ej-fv-pc__mark,
.ej-fv-pc__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ej-fv-pc__ribbon {
  display: inline-flex;
  align-items: center;
  height: calc(var(--ej-k) * var(--ejk-ribbon-h));
  margin: calc(var(--ej-k) * 28) 0 0 calc(var(--ej-k) * 12);
  padding: 0 calc(var(--ej-k) * 26);
  background: var(--ejk-ribbon);
  color: var(--enjin-paper);
  font-size: calc(var(--ej-k) * 40);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  transform: skewX(-11deg);
}
.ej-fv-pc__ribbon span {
  display: block;
  transform: skewX(11deg);
}
.ej-fv-pc__desc {
  margin: calc(var(--ej-k) * 26) 0 0 calc(var(--ej-k) * 28);
  font-size: calc(var(--ej-k) * 26);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.ej-fv-pc__entry {
  position: relative;
  z-index: 2;
  width: min(100%, calc(var(--ej-k) * 480));
  margin: calc(var(--ej-k) * 16) 0 0;
}
.ej-fv-pc__features {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: min(100%, calc(var(--ej-k) * var(--ejk-feat-w)));
  min-height: calc(var(--ej-k) * var(--ejk-feat-h));
  margin: 0 auto;
  padding: calc(var(--ej-k) * 8) 0;
  list-style: none;
  background: var(--enjin-paper);
}
.ej-fv-pc__features li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ej-k) * 12);
  font-size: calc(var(--ej-k) * 22);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.ej-fv-pc__features li + li { border-left: 1px solid #e4e4e4; }
.ej-fv-pc__features svg {
  width: calc(var(--ej-k) * 34);
  height: calc(var(--ej-k) * 34);
  flex: none;
  color: var(--ejk-stripe-deep);
}

/* タグライン（明朝混植 §4） */
.ej-tagline {
  margin: 0;
  font-family: var(--f-mincho);
  color: var(--c-text);
  white-space: nowrap;
  line-height: 1;
}
.ej-tagline .t-kanji { font-weight: 800; }
.ej-tagline .t-kana  { font-weight: 600; font-size: 0.85em; }
.ej-btn--cta {
  gap: calc(var(--ej-u) * var(--ejn-hcta-gap));
  background: var(--c-cta-bg);
  color: var(--c-cta-text);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ej-btn--cta svg { width: calc(var(--ej-u) * var(--ejn-cta-icon)); height: calc(var(--ej-u) * var(--ejn-cta-icon)); }
.ej-btn--cta:hover {
  transform: translateY(calc(var(--bw) * -2));
  box-shadow: 0 calc(var(--bw) * 10) calc(var(--bw) * 24) rgba(0, 0, 0, 0.18);
}
.ej-fv-sp__login a {
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  text-decoration: underline; /* 参照画像は全文下線（§6-3⑤と差異 → OPEN_QUESTIONS Q-003） */
  text-underline-offset: 0.3em;
}
.ej-fv-sp__login a:hover { color: var(--c-accent); }

/* ============================================================
   SP ファーストビュー（Mobile_Editable.ai・1127×1680）
   ストライプは SVG をこの比率の箱いっぱいに描く。高さ指定で潰さない。
   ============================================================ */
.ej-fv-sp {
  position: relative;
  text-align: center;
  font-family: var(--f-jp);
  color: var(--enjin-black);
  background-color: #fff;
}
.ej-fv-sp__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1127 / 1680;
  overflow: hidden;
  background: #fff;
}
.ej-fv-sp__stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ej-fv-sp__visual {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 51%;
  margin: 0;
}
.ej-fv-sp__kv {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ej-fv-sp__copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 2.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ej-fv-sp__logo {
  display: block;
  color: var(--enjin-black);
  width: 74%;
  aspect-ratio: 830 / 303;
}
.ej-fv-sp__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ej-fv-sp__swoosh {
  display: block;
  width: 62%;
  margin-top: -1.5%;
  color: #18a9b2;
}
.ej-fv-sp__swoosh .ej-swoosh {
  display: block;
  width: 100%;
  height: clamp(8px, 2.2vw, 14px);
}
.ej-fv-sp__ribbon {
  display: inline-block;
  margin: 1.5% 0 0;
  padding: 2.2% 5.5%;
  background: #18a9b2;
  transform: skewX(-8deg);
}
.ej-fv-sp__ribbon span {
  display: inline-block;
  color: var(--enjin-paper);
  font-size: 5.6vw;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  transform: skewX(8deg);
}
.ej-fv-sp__desc {
  margin: 3.2% 0 0;
  font-size: 4.6vw;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
/* ============================================================
   SP ドロワー（§7）
   ============================================================ */
.ej-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--enjin-black);
  color: var(--enjin-paper);
  display: flex;
  flex-direction: column;
  padding: calc(var(--ej-us) * 20);
  overflow-y: auto;
  font-family: var(--f-jp);
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.42s;
}
.ej-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
.ej-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.ej-drawer__head .ej-drawer__logo { color: var(--enjin-paper); }
/* 36 = アートワーク高 34 相当（viewBox 余白 ×1.06 を打ち消す） */
.ej-drawer__head .ej-drawer__logo svg { height: calc(var(--ej-us) * 36); width: auto; display: block; }
.ej-drawer__close {
  background: none; border: 0; color: inherit; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ej-drawer__close svg {
  width: calc(var(--ej-us) * 24);
  height: calc(var(--ej-us) * 24);
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.ej-drawer.is-open .ej-drawer__close svg {
  transform: none;
  opacity: 1;
  transition-delay: 0.12s;
}
.ej-drawer__nav {
  display: flex; flex-direction: column;
  margin-top: calc(var(--ej-us) * 28);
}
.ej-drawer__nav a {
  color: var(--enjin-paper);
  text-decoration: none;
  font-size: calc(var(--ej-us) * 16);
  font-weight: 700;
  letter-spacing: var(--ls-jp);
  padding: calc(var(--ej-us) * 14) 0;
  border-bottom: var(--bw) solid rgba(255, 255, 255, 0.18);
  min-height: 44px;
  display: flex; align-items: center;
}
.ej-drawer__nav a:focus-visible { outline: calc(var(--bw) * 2) solid var(--enjin-paper); outline-offset: calc(var(--bw) * 2); }
.ej-drawer__nav a,
.ej-drawer .ej-btn--cta {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  transition: opacity 0.22s ease, transform 0.28s ease;
}
.ej-drawer.is-open .ej-drawer__nav a,
.ej-drawer.is-open .ej-btn--cta {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ej-drawer.is-open .ej-drawer__nav a:nth-child(1) { transition-delay: 0.08s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(2) { transition-delay: 0.12s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(3) { transition-delay: 0.16s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(4) { transition-delay: 0.2s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(5) { transition-delay: 0.24s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(6) { transition-delay: 0.28s; }
.ej-drawer.is-open .ej-drawer__nav a:nth-child(7) { transition-delay: 0.32s; }
.ej-drawer.is-open .ej-btn--cta { transition-delay: 0.34s; }
.ej-drawer .ej-btn--cta {
  margin-top: calc(var(--ej-us) * 28);
  width: 100%;
  height: calc(var(--ej-us) * var(--ejs-cta-h));
  background: var(--enjin-cyan-ui-sp);
  font-size: calc(var(--ej-us) * var(--ejs-cta-fs));
}
body.ej-drawer-open { overflow: hidden; }

/* ============================================================
   LP セクション共通（§8）— モノクロ骨格＋シアンのアクセント
   ============================================================ */
.ej-section {
  font-family: var(--f-jp);
  padding-block: var(--ej-section-py);
  background: var(--c-bg);
  color: var(--c-text);
}
.ej-section--dark { background: var(--enjin-black); color: var(--enjin-paper); }
.ej-section--surface { background: var(--enjin-surface); }
/* 同じ地色が続く区間は境目が見えないので、余白が二重に入らないようにする */
.ej-section--dark + .ej-section--dark,
.ej-section--surface + .ej-section--surface { padding-top: 0; }

/* エンジン!!とは — ページ見出し */
.ej-about-hero { padding-bottom: clamp(32px, 3vw, 56px); }
.ej-about-hero .ej-h2 { font-size: clamp(32px, 4vw, 56px); }

.ej-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-pc);
}
@media (max-width: 1023.98px) {
  .ej-container { padding-inline: var(--gutter-sp); }
}
.ej-eyebrow {
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps);
  text-transform: uppercase;
  color: var(--c-text-sub);
  margin: 0 0 var(--sp-3);
}
.ej-section--dark .ej-eyebrow { color: var(--enjin-gray-b); }
/* NOTE: 以前は clamp(28px, calc(var(--fs-h2) / 1920 * 100vw), var(--fs-h2)) だった。
   --fs-h2 は px を持つため calc が「長さ × 長さ」になり無効値となり、
   font-size 宣言ごと破棄されて全セクション見出しが 16px に落ちていた。 */
.ej-h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
@media (max-width: 767.98px) {
  .ej-h2 { font-size: clamp(24px, 6.8vw, 32px); }
}
.ej-h2--mincho { font-family: var(--f-mincho); font-weight: 800; }
.ej-h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-jp);
}
.ej-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp);
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}
.ej-num {
  font-family: var(--f-en);
  font-weight: 700;
  letter-spacing: var(--ls-en-body);
}
.ej-lead { max-width: 640px; margin-top: var(--sp-5); }
.ej-center { text-align: center; }
.ej-track-closing { text-align: center; margin-top: var(--sp-6); font-weight: 700; }
.ej-i-chevron svg { width: 100%; height: 100%; display: block; }

/* 01.5 番組ロゴ（FV 直下） */
.ej-programs {
  background: var(--ej-color-accent-yellow);
  color: var(--enjin-black);
  padding-block: clamp(64px, 8vw, 120px);
}
.ej-programs__head {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}
/* 横並びは見出しとリードが両方収まる幅から。768px では窮屈で左右の余白が消える */
@media (min-width: 1024px) {
  /* 見出し＋リードをひと塊として中央に置く。flex-start だと右に 400px 近い
     空きが残り、下のマーキーが左右対称なぶん構図の重心が左に寄って見える */
  .ej-programs__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(28px, 3vw, 48px);
  }
}
.ej-programs__title {
  font-weight: 900;
  font-size: clamp(34px, calc(64 / 1440 * 100vw), 64px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
/* 参考デザインは漢字を大きく・かなを小さく見せる強弱がある（§4 のタグラインと同じ考え方） */
.ej-programs__title .t-kana { font-size: 0.84em; }
.ej-programs__title .t-line { display: block; }
@media (min-width: 768px) {
  /* PC は「誰もが知る、あの番組と／繋がっています。」の2行に詰める */
  .ej-programs__title .t-line--a,
  .ej-programs__title .t-line--b { display: inline; }
}
.ej-programs__lead {
  margin: 0;
  font-size: clamp(15px, calc(16 / 1440 * 100vw), 16px);
  line-height: 2;
  letter-spacing: var(--ls-jp);
  flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .ej-programs__lead {
    max-width: 22em;
  }
  /* 見出しを中央に置く幅では注記も中央に合わせる */
  .ej-programs__note { text-align: center; }
}
/* 2行の無限横スクロール。上下で流れる向きを逆にする */
.ej-programs__rows {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: var(--ej-programs-gap);
}
.ej-programs__marquee { overflow: hidden; }
.ej-programs__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: max-content;
  animation: ej-marquee var(--ej-programs-dur) linear infinite;
}
/* 同じ配列を2回出力しているので -50% でちょうど1周ぶん。
   トラックに gap を置くと末尾の gap が1つ足りず -50% が半 gap 分ずれるため、
   間隔は各タイルの margin-right で持たせる */
@keyframes ej-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ej-programs__track--reverse { animation-direction: reverse; }
.ej-programs__marquee:hover .ej-programs__track,
.ej-programs__marquee:focus-within .ej-programs__track { animation-play-state: paused; }
.ej-programs__item {
  /* 支給素材は背景色も余白もばらつくため、白タイルに載せて見えを揃える */
  flex: 0 0 auto;
  width: var(--ej-programs-tile-w);
  /* aspect-ratio だと中身の実寸に負けて高さが揃わないので実寸で固定する（16:9） */
  height: calc(var(--ej-programs-tile-w) * 9 / 16);
  margin-right: var(--ej-programs-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--enjin-paper);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ej-programs__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* cover にするとロゴが切れる */
}
@media (max-width: 599.98px) {
  .ej-programs__item { padding: 8px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ej-programs__track { animation: none; }
  .ej-programs__marquee { overflow-x: auto; } /* 手動スクロールにフォールバック */
}
.ej-programs__note {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: var(--ls-jp);
  color: rgba(0, 0, 0, 0.6);
}
.ej-programs__lead--short,
.ej-programs__stats,
.ej-programs .ej-swoosh--programs,
.ej-programs__grid,
.ej-swoosh--stat { display: none; }

/* 角のストライプ。グラデーションの百分率で切ると台形になるので、頂点が一点の三角にする */
.ej-programs__stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ej-programs__stripe {
  position: absolute;
  display: block;
}
.ej-programs__stripe--tl {
  left: 0;
  top: 0;
  background: #c8f4f6;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ej-programs__stripe--tr {
  right: 0;
  top: 0;
  background: #e7f9f9;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ej-programs__stripe--br,
.ej-programs__stripe--br2 {
  right: 0;
  bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ej-programs__stripe--br { background: #b7ebef; }
.ej-programs__stripe--br2 { background: #e4f8f9; }
@media (max-width: 1023.98px) {
  .ej-programs {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    padding-block: calc(var(--ej-us) * 36) calc(var(--ej-us) * 28);
    color: var(--enjin-black);
  }
  .ej-programs__stripe--tl { width: 58%; height: 168px; }
  .ej-programs__stripe--tr { width: 34%; height: 120px; }
  .ej-programs__stripe--br { width: 78%; height: 210px; }
  .ej-programs__stripe--br2 { width: 48%; height: 129px; }
  .ej-programs__head { gap: calc(var(--ej-us) * 18); position: relative; }
  .ej-programs__title {
    font-size: clamp(32px, 8.6vw, 40px);
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .ej-programs__title .t-kana { font-size: 1em; }
  .ej-programs__title .t-line--b { color: #21bac2; }
  .ej-programs .ej-swoosh--programs {
    display: block;
    width: min(72%, 260px);
    height: 10px;
    margin-top: calc(var(--ej-us) * -6);
    color: #21bac2;
  }
  .ej-programs__stats {
    display: grid;
    grid-template-columns: 0.9fr 1.15fr 1.2fr;
    margin: calc(var(--ej-us) * 8) 0 0;
    text-align: center;
  }
  .ej-programs__stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ej-us) * 4);
    padding-inline: calc(var(--ej-us) * 4);
  }
  .ej-programs__stats > div + div { border-left: 1px solid #d8d8d8; }
  .ej-programs__stat-label {
    font-size: clamp(10px, 2.7vw, 12px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .ej-programs__stat-num {
    font-family: var(--f-en);
    font-size: clamp(26px, 7.2vw, 34px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #14a8b0;
    white-space: nowrap;
  }
  .ej-swoosh--stat {
    display: block;
    width: 72%;
    height: 8px;
    color: #7fd4dc;
  }
  .ej-programs__stat-num small {
    font-family: var(--f-jp);
    font-size: 0.42em;
    font-weight: 800;
    letter-spacing: 0;
    margin-left: 0.08em;
  }
  .ej-programs__lead--full { display: none; }
  .ej-programs__lead--short {
    display: block;
    font-size: clamp(14px, 3.8vw, 16px);
    font-weight: 500;
    line-height: 1.85;
    text-align: left;
  }
  .ej-programs__rows { display: none; }
  .ej-programs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: calc(var(--ej-us) * 18) 0 0;
    padding: 0;
    list-style: none;
  }
  .ej-programs__card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(16, 70, 78, 0.08);
  }
  .ej-programs__card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92%;
    max-height: 80%;
    object-fit: contain;
  }
  .ej-programs__note { position: relative; text-align: left; }
}

/* PC「誰もが知る、あの番組と」（デザインカンプ ENJIN_PC_02_section） */
@media (min-width: 1024px) {
  .ej-programs {
    position: relative;
    overflow: hidden;
    background-color: var(--enjin-paper);
    padding: calc(var(--ej-k) * var(--ejp-pad-top)) calc(var(--ej-k) * 48) calc(var(--ej-k) * var(--ejp-pad-bottom));
    color: var(--enjin-black);
  }
  .ej-programs__stripe--tl {
    width: calc(var(--ej-k) * 560);
    height: calc(var(--ej-k) * 250);
    background: #caf0f2;
  }
  .ej-programs__stripe--tr {
    width: calc(var(--ej-k) * 280);
    height: calc(var(--ej-k) * 200);
    background: #dff7f8;
  }
  /* 右下は同比率の大小の三角。斜辺が平行で、どちらも先端が一点 */
  .ej-programs__stripe--br {
    width: min(76%, calc(var(--ej-k) * 1080));
    height: calc(var(--ej-k) * 500);
    background: #b9ebee;
  }
  .ej-programs__stripe--br2 {
    width: min(48%, calc(var(--ej-k) * 680));
    height: calc(var(--ej-k) * 315);
    background: #e7f8f9;
  }
  .ej-programs > * { position: relative; z-index: 1; }
  .ej-programs > .ej-programs__stripes { z-index: 0; }
  .ej-programs__head {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: calc(var(--ej-k) * 20);
    row-gap: 0;
    align-items: end;
    justify-content: stretch;
  }
  .ej-programs__title {
    grid-column: 1;
    grid-row: 1;
    font-size: calc(var(--ej-k) * var(--ejp-title-fs));
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .ej-programs__title .t-kana,
  .ej-programs__title .t-kanji { font-size: 1em; font-weight: 900; }
  .ej-programs__title .t-line { display: block; }
  .ej-programs__title .t-line--b { color: var(--ejp-accent); }
  .ej-programs .ej-swoosh--programs {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: min(92%, calc(var(--ej-k) * 420));
    height: calc(var(--ej-k) * 16);
    margin-top: calc(var(--ej-k) * 6);
    color: var(--ejp-swoosh);
  }
  .ej-programs__stats {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: center;
    margin: 0;
    text-align: center;
  }
  .ej-programs__stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ej-k) * 6);
    padding: 0 calc(var(--ej-k) * 8) calc(var(--ej-k) * 4);
  }
  .ej-programs__stats > div + div { border-left: 1px solid var(--ejp-rule); }
  .ej-programs__stat-label {
    font-size: calc(var(--ej-k) * 15);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
  }
  .ej-programs__stat-num {
    font-family: var(--f-en);
    font-size: calc(var(--ej-k) * 56);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ejp-accent);
    white-space: nowrap;
  }
  .ej-programs__stat-num small {
    font-family: var(--f-jp);
    font-size: calc(var(--ej-k) * 20);
    font-weight: 800;
    letter-spacing: 0;
    margin-left: 0.04em;
  }
  .ej-swoosh--stat {
    display: block;
    width: calc(var(--ej-k) * 92);
    height: calc(var(--ej-k) * 10);
    margin-top: calc(var(--ej-k) * 2);
    color: var(--ejp-swoosh);
  }
  .ej-programs__lead--full { display: none; }
  .ej-programs__lead--short {
    display: block;
    grid-column: 1 / -1;
    max-width: none;
    margin: calc(var(--ej-k) * var(--ejp-lead-gap)) 0 0;
    font-size: calc(var(--ej-k) * var(--ejp-lead-fs));
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
  }
  /* 以前と同じ全ロゴを、2行で左右に流す。白地でもタイルが沈まないよう影を足す */
  .ej-programs__grid { display: none; }
  .ej-programs__rows {
    display: grid;
    margin-top: calc(var(--ej-k) * 48);
    gap: calc(var(--ej-k) * 20);
  }
  .ej-programs__item {
    width: calc(var(--ej-k) * 220);
    height: calc(var(--ej-k) * 124);
    margin-right: calc(var(--ej-k) * 20);
    padding: calc(var(--ej-k) * 12);
    border-radius: calc(var(--ej-k) * 14);
    box-shadow: 0 8px 22px rgba(16, 70, 78, 0.08);
  }
  .ej-programs__note {
    width: min(100%, var(--container-max));
    margin: calc(var(--ej-k) * 22) auto 0;
    text-align: left;
    color: rgba(0, 0, 0, 0.55);
  }
}

/* 02 WHY NOW */
.ej-whynow { text-align: center; }
.ej-whynow .ej-h2--mincho { font-size: clamp(34px, calc(76 / 1920 * 100vw), 76px); line-height: 1.4; }
.ej-whynow .ej-body { max-width: 640px; margin: var(--sp-6) auto 0; }

/* 03 TRACK RECORD */
.ej-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); text-align: center; }
@media (max-width: 1023.98px) { .ej-track { grid-template-columns: 1fr; gap: var(--sp-6); } }
.ej-track__num {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(56px, calc(96 / 1920 * 100vw), 96px);
  line-height: 1;
}
.ej-track__label {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--f-en);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps);
  text-transform: uppercase;
  color: var(--c-text-sub);
}

/* 05 タグライン（P.11） */
.ej-tagline-sec { text-align: center; padding-block: clamp(72px, 9vw, 140px); }
.ej-tagline-sec__main {
  margin: var(--sp-5) 0 0;
  font-size: clamp(34px, calc(72 / 1440 * 100vw), 72px);
  line-height: 1.3;
  color: inherit; /* ダーク背景では反転させる（.ej-tagline は既定で黒） */
}
.ej-tagline-sec .ej-en-sub {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--f-en);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps);
  text-transform: uppercase;
  color: var(--enjin-gray-b);
}
.ej-tagline-sec__note { margin: var(--sp-6) auto 0; max-width: 640px; color: var(--enjin-gray-b); }

/* 10 サービスの4本柱（P.27–28）— 01–02 / 03–04 の2グループ */
.ej-pillars-sec .ej-pillar-group + .ej-pillar-group { margin-top: clamp(56px, 6vw, 96px); }
.ej-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); margin-top: var(--sp-6); }
@media (max-width: 1023.98px) { .ej-pillars { grid-template-columns: 1fr; gap: var(--sp-6); } }
/* 01 と 02 の間の縦罫（SP では 1 カラムに落ちるため消す） */
.ej-pillars > .ej-pillar + .ej-pillar {
  border-left: var(--bw) solid var(--c-border);
  padding-left: var(--sp-7);
}
@media (max-width: 1023.98px) {
  .ej-pillars > .ej-pillar + .ej-pillar { border-left: 0; padding-left: 0; }
}
.ej-pillar .ej-num {
  display: block;
  font-family: var(--f-en);
  font-weight: 200; /* 提案書は番号を大きく細いウェイトで見せる */
  font-size: clamp(48px, calc(80 / 1440 * 100vw), 80px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-accent);
}
.ej-pillar__en {
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-en-caps);
  text-transform: uppercase;
  margin-top: var(--sp-2);
  color: var(--c-text-sub);
}
.ej-pillar h3 {
  margin: var(--sp-3) 0 0;
  font-size: clamp(22px, calc(30 / 1440 * 100vw), 30px);
  font-weight: 700;
  line-height: 1.4;
}
/* 見出し下の短い横罫（提案書 P.27 / P.28） */
.ej-pillar h3::after {
  content: "";
  display: block;
  width: 40px;
  height: calc(var(--bw) * 2);
  margin-top: var(--sp-4);
  background: var(--enjin-black);
}
.ej-pillar p { margin: var(--sp-4) 0 0; font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--c-text-sub); }

/* 06 ステートメント */
.ej-statement { text-align: center; }
.ej-statement__body {
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: clamp(16px, calc(22 / 1920 * 100vw), 22px);
  line-height: 1.9;
  letter-spacing: var(--ls-jp);
  margin: var(--sp-6) auto 0;
  max-width: 640px;
}
.ej-statement__body p { margin: 0 0 var(--sp-4); }

/* 07 MVV — 見出し行を持たないので eyebrow と最初の区切り線を詰める */
.ej-mvv { margin-top: var(--sp-3); display: grid; gap: var(--sp-6); }
.ej-mvv__item { border-top: calc(var(--bw) * 2) solid var(--enjin-paper); padding-top: var(--sp-4); }
.ej-mvv__label {
  font-family: var(--f-en); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps); text-transform: uppercase; color: var(--enjin-gray-b);
}
.ej-mvv__item h3 { margin: var(--sp-3) 0 0; font-size: clamp(24px, calc(40 / 1920 * 100vw), 40px); font-weight: 700; line-height: 1.4; }
.ej-mvv__item .ej-en-sub {
  display: block; margin-top: var(--sp-2);
  font-family: var(--f-en); font-size: var(--fs-cap); font-weight: 500;
  letter-spacing: var(--ls-en-caps); text-transform: uppercase; color: var(--enjin-gray-a);
}
.ej-mvv__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-cap);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp);
  color: var(--enjin-gray-b);
}
.ej-values { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.ej-values li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-bottom: var(--bw) solid rgba(255, 255, 255, 0.18);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-body); font-weight: 700;
}
.ej-values .ej-num { color: var(--c-accent); font-size: var(--fs-cap); }
.ej-values .ej-values__en {
  font-family: var(--f-en); font-size: var(--fs-cap); font-weight: 500;
  letter-spacing: var(--ls-en-body); color: var(--enjin-gray-b); text-transform: uppercase;
}

/* 08 To each their own — 3色 */
.ej-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); }
@media (max-width: 1023.98px) { .ej-colors { grid-template-columns: 1fr; } }
.ej-color-card { color: var(--enjin-paper); padding: var(--sp-6) var(--sp-5); }
.ej-color-card--pink   { background: var(--enjin-pink-core); }
.ej-color-card--cyan   { background: var(--enjin-cyan-core); }
.ej-color-card--yellow { background: var(--enjin-yel-core); color: var(--enjin-black); }
.ej-color-card .ej-num { font-size: var(--fs-cap); letter-spacing: var(--ls-en-caps); opacity: 0.8; }
.ej-color-card h3 { margin: var(--sp-3) 0 0; font-size: clamp(22px, calc(28 / 1920 * 100vw), 28px); font-weight: 700; }
.ej-color-card p { margin: var(--sp-3) 0 0; font-size: var(--fs-cap); line-height: var(--lh-body); }
.ej-color-card .ej-color-card__hex {
  display: block; margin-top: var(--sp-4);
  font-family: var(--f-en); font-size: var(--fs-label); letter-spacing: var(--ls-en-caps); opacity: 0.85;
}

/* 09 求人一覧への導線 */
.ej-jobs { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 1023.98px) { .ej-jobs { grid-template-columns: 1fr; } }
.ej-job {
  border: var(--bw) solid var(--c-border);
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--dur) var(--ease);
  background: var(--c-bg);
}
.ej-job:hover { border-color: var(--enjin-black); }
.ej-job__cat {
  font-family: var(--f-en);
  font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps); text-transform: uppercase;
  color: var(--c-accent);
}
.ej-job h3 { margin: 0; font-size: clamp(15px, calc(17 / 1920 * 100vw), 17px); font-weight: 700; line-height: 1.5; }
.ej-job__meta { margin: 0; font-size: var(--fs-cap); color: var(--c-text-sub); line-height: var(--lh-cap); }
.ej-more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  color: var(--c-text); font-weight: 700; font-size: var(--fs-cap);
  letter-spacing: var(--ls-jp); text-decoration: none;
  border-bottom: var(--bw) solid var(--enjin-black);
  padding-bottom: var(--sp-1);
}
.ej-more:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* 11 最終CTA */
.ej-closing {
  text-align: center;
}
.ej-closing__lead {
  margin: 0 0 var(--sp-4);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: clamp(20px, calc(32 / 1440 * 100vw), 32px);
  line-height: 1.5;
  letter-spacing: var(--ls-jp);
}
.ej-closing .ej-tagline {
  font-size: clamp(36px, calc(72 / 1920 * 100vw), 72px);
  white-space: nowrap;
}
.ej-closing .ej-en-sub {
  display: block; margin-top: var(--sp-4);
  font-family: var(--f-en); font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--ls-en-caps); text-transform: uppercase; color: var(--c-text-sub);
  line-height: 2;
}
.ej-closing .ej-btn--cta {
  margin-top: 0;
  min-width: 280px;
  height: 60px;
  font-size: var(--fs-body);
}
.ej-closing .ej-btn svg { flex: none; width: 20px; height: 20px; }
.ej-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: var(--sp-6);
}
.ej-btn--ghost {
  min-width: 280px;
  height: 60px;
  background: transparent;
  color: var(--c-text);
  border: var(--bw) solid var(--enjin-black);
}
.ej-section--dark .ej-btn--ghost {
  color: var(--enjin-paper);
  border-color: var(--enjin-paper);
}
.ej-section--dark .ej-btn--ghost:hover {
  background: var(--enjin-paper);
  color: var(--enjin-black);
}
.ej-btn--ghost:hover {
  background: var(--enjin-black);
  color: var(--enjin-paper);
}

/* ---------- リビール（§8 モーション）---------- */
.ej-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
  transition-delay: var(--ej-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.ej-reveal.is-in { opacity: 1; transform: none; }
/* JS が動かない・失敗した場合でも本文が必ず読めるようにする */
html:not(.eng-js) .ej-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ej-reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
  .ej-scope *, .ej-scope *::before, .ej-scope *::after { animation: none !important; transition: none !important; }
}