@charset "UTF-8";

/* =========================================================
   EVENT MYSTAR - style.css（改修案）

   配色は現行の定義（public/css/style.css の :root）をそのまま維持し、
   足りていなかった中間の明度と、ロゴでしか使われていなかった gold を
   本文側へ展開している。変更したのは「組み方」——中央揃え・余白・
   見出しの段——の 3 点。
   ========================================================= */

:root {
  /* --- Brand colors（現行の定義をそのまま） --- */
  --ems-purple: #4600be;
  --ems-pink: #cc2071;
  --ems-navy: #0f193c;
  --ems-gold: #bea064;
  --ems-purple-light: #a7a7ee;
  --ems-mint: #b4fff5;
  --ems-grey: rgb(103, 104, 125);
  --ems-white: #ffffff;
  --ems-gradation-01: linear-gradient(0deg, #0f193c, #4600be);
  --ems-gradation-02: linear-gradient(0deg, #8287c3, #4600be);

  /* --- 追加した中間の明度 ---
     現行は白（17.15:1）と --ems-grey（3.15:1・AA 未達）の間が無く、
     「弱めの本文」を置く色が存在しなかった。 */
  --ems-ink-2: #c9cee6;   /* 本文の弱め  10.99:1 */
  --ems-ink-3: #8e96bc;   /* メタ・注記   5.91:1 */
  --ems-surface: #17224b; /* カードの地（ネイビー +1 段） */
  --ems-line: #3f4a7a;    /* 罫線・カードの枠 */
  --ems-line-2: #2a3560;  /* 弱い区切り線 */
  --ems-footer: #0b1330;

  /* --- Fonts --- */
  --font-jp: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", meiryo, sans-serif;
  --font-en: "Lato", var(--font-jp);

  /* --- Layout ---
     本文は 1000px のまま（日本語の 1 行を長くしすぎない）。
     図とカードグリッドだけ 1280px まで広げ、hero は全幅。 */
  --container: 1000px;
  --container-wide: 1280px;
  --header-h: 80px;

  /* --- リズム ---
     現行は gap 240px + padding-top 100px = 一律 340px だった。
     基準を詰めたうえで、節目だけ広げる。 */
  --section-gap: 140px;
  --section-gap-major: 200px;
  --section-pad-top: 0px;
}

/* =========================================================
   Reset / base
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  /* モーダル開閉で背面が横にずれるのを防ぐ（C-3） */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ems-navy);
  color: var(--ems-white);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* 「ステ｜ップ」のようなカタカナ語の途中改行を避ける。
     非対応ブラウザは無視するだけなので安全に入れられる。 */
  word-break: auto-phrase;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--ems-purple-light);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 4px 4px;
  background: var(--ems-purple);
  color: var(--ems-white);
  font-size: 14px;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   Header / navigation
   ========================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-h);
  /* 背後をぼかしつつ、白帯に寄せる。0.62 だと地の navy が透けて
     灰紫がかり、ホバー時の purple の文字が 4.41:1 で AA 未達だった。
     0.82 で navy 11.80:1 / purple 7.21:1。0.9 まで上げると
     backdrop-filter のぼかしが効かず、ただの白帯に見える。 */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 25, 60, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(var(--container-wide), 92%);
  height: 100%;
  margin-inline: auto;
}

.header__logo img {
  width: 148px;
  height: auto;
}

.gnav {
  margin-left: auto;
}

.gnav__list {
  display: flex;
  align-items: center;
  gap: 26px;
}

.gnav__link {
  display: block;
  color: var(--ems-navy);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.gnav__link:hover,
.gnav__link[aria-current="page"] {
  color: var(--ems-purple);
}

.gnav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.header__cta {
  flex: none;
}

/* --- Hamburger（840px 以下で表示） --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ems-navy);
  cursor: pointer;
}

.nav-toggle__bar {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: background 0.2s ease;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease;
}

.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  padding-inline: 5%;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(85%) contrast(125%);
  z-index: 0;
}

/* hero だけは中央揃えを残す。ここが「特別な場所」であることの合図。 */
.hero__title {
  position: relative;
  z-index: 2;
  color: var(--ems-white);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 40px var(--ems-navy);
}

.hero__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* セクションの中に置く場合は左寄せにする */
.hero__actions--start {
  justify-content: flex-start;
  margin-top: 24px;
}

/* --- スポットライト ---
   「イベントに関わる全ての人をスポットライトで照らす」を画面の動きにする。
   ロゴと同じく、左上（紫）と右上（金）の 2 灯から光が伸び、
   カーソルの位置で交差する。中央にカーソルを置くとロゴの形になる。

   使い方: 光らせたい要素に data-spotlight を付けるだけ。
           中身の要素は JS が挿し込むので、テンプレート側は属性 1 つで済む。
           強さは --beam-l / --beam-r / --pool で場所ごとに変えられる。

   ・ポインタのある環境でだけ動かす（タッチでは出さない）
   ・prefers-reduced-motion では消す
   ・JS が動かなければ要素自体が生まれないので、何も起きないだけで済む
   ・毎フレーム変えるのは transform だけに留める
   ========================================================= */

[data-spotlight] {
  position: relative;
}

.spotlight {
  /* 場所ごとに上書きできる強さ */
  --beam-l: 0.40;
  --beam-r: 0.36;
  --pool: 0.42;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
}

[data-spotlight].is-lit > .spotlight { opacity: 1; }

.spotlight__beam {
  position: absolute;
  width: 220%;
  height: 88vmin;
  margin-top: -44vmin;
  transform-origin: 0 50%;
  transform: rotate(var(--a, 0rad));
  /* 光源側を細く、先へ行くほど広がる円錐にする */
  clip-path: polygon(0 46%, 100% 3%, 100% 97%, 0 54%);
  filter: blur(20px);
  will-change: transform;
}

/* 左上の灯 ＝ ロゴの紫の点。ここから右下へ光が伸びる */
.spotlight__beam--l {
  left: 9%;
  top: -3%;
  background: linear-gradient(
    90deg,
    rgba(167, 167, 238, var(--beam-l)),
    rgba(167, 167, 238, calc(var(--beam-l) * 0.30)) 40%,
    rgba(167, 167, 238, 0) 74%
  );
}

/* 右上の灯 ＝ ロゴの金の点。ここから左下へ光が伸びる */
.spotlight__beam--r {
  left: 91%;
  top: -3%;
  background: linear-gradient(
    90deg,
    rgba(190, 160, 100, var(--beam-r)),
    rgba(190, 160, 100, calc(var(--beam-r) * 0.30)) 40%,
    rgba(190, 160, 100, 0) 74%
  );
}

/* カーソルの位置に落ちる光だまり */
.spotlight__pool {
  position: absolute;
  left: 0;
  top: 0;
  width: 32vmin;
  height: 32vmin;
  transform: translate(var(--px, 0px), var(--py, 0px)) translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, var(--pool)),
    rgba(255, 255, 255, calc(var(--pool) * 0.55)) 22%,
    rgba(220, 200, 165, calc(var(--pool) * 0.26)) 44%,
    transparent 70%
  );
  filter: blur(8px);
  will-change: transform;
}

/* hero は動画（z-index 0）と見出し（z-index 2）の間に入れる */
.hero .spotlight { z-index: 1; }

/* セクションを光らせるための全幅の帯。
   .section は幅を絞って中央寄せするので、光だけは画面幅いっぱいに広げる。
   地がフラットなネイビーだと光がよく見えるので、hero より弱くする。 */
.lit-band {
  --beam-l: 0.15;
  --beam-r: 0.12;
  --pool: 0.15;

  overflow: hidden;
  padding-block: 40px;
}

.lit-band > .section {
  position: relative;
  z-index: 1;
}

/* タッチ端末では出さない（追うカーソルが無いため） */
@media (hover: none), (pointer: coarse) {
  .spotlight { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight { display: none; }
}

/* サイトで最も見られる 1 行に、ごく控えめな動きを足す。
   opacity は動かさない（動かすと C-1 と同じく「消える」事故になる）。 */
@media (prefers-reduced-motion: no-preference) {
  .hero__title {
    animation: hero-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero__actions {
    animation: hero-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
  }
  @keyframes hero-rise {
    from { translate: 0 14px; }
    to { translate: none; }
  }
}

/* =========================================================
   Section 共通
   ========================================================= */

.sections {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-block: 120px 160px;
}

/* 外枠の幅はページ内で 1 本に統一する。混在させると左端がずれて、
   セクションごとに違うページのように見える。読みやすさは幅ではなく
   個々の要素の max-width（.lead は 62ch など）で担保する。 */
.section {
  width: min(var(--container-wide), 92%);
  margin-inline: auto;
  scroll-margin-top: var(--header-h);
}

/* 以前の区別は残しておくが、幅は同じ（マークアップ側の指定を壊さないため） */
.section--wide { width: min(var(--container-wide), 92%); }

/* 節目の前だけ余白を広げる。均一な 340px をやめ、余白に意味を持たせる。 */
.section--major {
  margin-top: calc(var(--section-gap-major) - var(--section-gap));
}

/* --- 見出しの 3 段 ---
   小さな英字ラベル（gold）／ 日本語見出し ／ 本文。
   現行は「58px の英単語」と「16px の本文」の 2 段しか無かった。 */
.sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ems-line);
}

/* 罫線を引かず、すぐ下の内容とくっつけたい見出し */
.sec__head--plain {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

.sec__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ems-gold);
  text-transform: uppercase;
}

.sec__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sec__more {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ems-mint);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sec__more:hover { opacity: 0.7; }

.lead {
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 2;
  color: var(--ems-ink-2);
}

.lead + .lead { margin-top: 1em; }

/* 1 文だけで立たせる宣言。周りの余白を「間」に変えるため、本文より大きく組む。 */
.statement {
  max-width: 24em;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* --- ミッション／ビジョン ---
   カード 2 枚に並べると、長い本文が窮屈になり読み飛ばされていた。
   左に小さなラベル、右に見出しと本文を積んで、1 段ずつ縦に読ませる。 */
.creed {
  display: grid;
  gap: 72px;
}

.creed__item {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 12px 32px;
  align-items: start;
}

.creed__label {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ems-gold);
  /* 見出しの 1 行目の中心あたりに合わせる */
  padding-top: 0.45em;
}

/* max-width は改行位置を見て決めている。body の word-break: auto-phrase は
   文節を割らないため、次の文節が入らないと行がそこで終わる。列の幅
   （1014px）より狭く絞ると、その「余って改行」が増えて読みにくくなる。
   24em だと「…"すべての人が輝く社会" を / つくる」と最後の一語が
   取り残されていた。36em で 1 行に収まり、Vision も
   「…顧客から指名される / "スター" を生み出す」と自然な位置で割れる。 */
.creed__title {
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
  max-width: 36em;
}

/* 本文も同じ理由で広げた。44em では 1 行に収まる文が 2 行に割れ、
   2 行目が「溢れさせる。」だけになっていた。
   40 文字前後という本文の目安は超えるが、ここは 1〜2 行の短い段落が
   並ぶ節なので、行長より改行位置の自然さを優先している。 */
.creed__text {
  margin-top: 22px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--ems-ink-2);
  max-width: 50em;
}

/* 見出しと本文の間だけ少し広く取る */
.creed__title + .creed__text { margin-top: 28px; }

@media (max-width: 720px) {
  .creed { gap: 52px; }
  .creed__item { grid-template-columns: 1fr; gap: 10px; }
  .creed__label { padding-top: 0; }
}

.page-head {
  width: min(var(--container-wide), 92%);
  margin-inline: auto;
  padding-block: 72px 0;
}

/* ページ見出しの直後は、セクション間と同じだけ空ける必要がない */
.page-head + .sections { padding-top: 72px; }

.page-head h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin-block: 10px 16px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ems-ink-3);
}

.breadcrumb li + li::before {
  content: "／";
  margin-right: 8px;
  color: var(--ems-line);
}

.breadcrumb a:hover { color: var(--ems-mint); }

/* --- スクロールイン ---
   既定は「表示」。CSS のスクロール駆動アニメーションに対応した
   ブラウザでだけ動く。JS には一切依存しないので、何が起きても
   本文は必ず出る（現行の C-1 の作りを反転させたもの）。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes reveal-rise {
      from { opacity: 0; translate: 0 24px; }
      to { opacity: 1; translate: none; }
    }
  }
}

/* =========================================================
   Buttons / links
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding-inline: 32px;
  border: 1px solid var(--ems-grey);
  border-radius: 32px;
  background: var(--ems-gradation-01);
  color: var(--ems-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background 400ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover {
  background: var(--ems-gradation-02);
  transform: translateY(-2px);
}

.btn:active { transform: translateY(1px); }

/* 副 CTA。次に進む導線なので mint。
   地を透明にすると hero 動画の明るい部分やスポットライトの上で
   文字が読めなくなる（最悪 1.05:1）。ネイビーを敷いて下地を固定する。
   フラットなネイビー地の上では見た目は変わらない。 */
.btn--ghost {
  background: rgba(15, 25, 60, 0.7);
  border-color: var(--ems-mint);
  color: var(--ems-mint);
}

.btn--ghost:hover {
  background: rgba(15, 25, 60, 0.88);
  border-color: var(--ems-white);
  color: var(--ems-white);
  transform: translateY(-2px);
}

/* 最終 CTA は 1 ページに 1 つだけ。
   gradation は下端が地色（#0f193c）と同一で、ネイビー地では
   ボタンの下辺が背景に溶ける（分離 1.00:1）。pink の面なら
   地との分離 3.28:1・白文字 5.23:1 で、視線の終点として成立する。 */
.btn--final {
  background: var(--ems-pink);
  border-color: var(--ems-pink);
}

.btn--final:hover {
  background: #e02b80;
  border-color: #e02b80;
}

.btn--sm {
  min-height: 44px;
  padding-inline: 20px;
  font-size: 14px;
}

.btn--block { width: 100%; }

.link-next {
  /* <a> と <button> の両方で使うので、button の既定値を消しておく */
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ems-mint);
  font-size: 14px;
  font-weight: 500;
  transition: gap 0.2s ease;
}

.link-next:hover { gap: 11px; }

.required {
  color: var(--ems-pink);
  font-weight: 700;
}

/* =========================================================
   ユーティリティ

   HTML に style="" を書かずに済ませるための、最小限の調整用。
   CSP の style-src から 'unsafe-inline' を外すために用意している。
   ========================================================= */

.u-mt-16 { margin-top: 16px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-28 { margin-top: 28px; }

/* カードの下端にそろえる */
.u-foot-10 { margin-top: auto; padding-top: 10px; }
.u-foot-12 { margin-top: auto; padding-top: 12px; }

/* =========================================================
   Cards / grids
   ========================================================= */

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-line);
  border-radius: 4px;
}

/* 中核・重要なカードだけ gold の枠。ラベルと同じ「構造の印」。 */
.card--key { border-color: var(--ems-gold); }

.card__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ems-gold);
  text-transform: uppercase;
}

.card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ems-ink-2);
}

.card__note {
  font-size: 13px;
  color: var(--ems-ink-3);
}

.card__note a { color: var(--ems-mint); }

.tag {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ems-ink-2);
  border: 1px solid var(--ems-line);
  border-radius: 3px;
  padding: 4px 10px;
}

/* --- 事業領域の目次（トップ用） ---
   説明文は /service/ にしか置かない。トップは /service/ と同じ
   「CORE 2 ＋ 対応する領域」という構造だけを、面積の差で見せる。 */

.tier-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ems-ink-3);
}

.tier-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ems-line-2);
}

/* 中核 2 領域 — 大きく、gold の枠で */
.core-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.core {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 26px 26px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-gold);
  border-radius: 4px;
}

.core__no {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ems-gold);
}

.core__name {
  margin-top: 4px;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* 中核カードのサブコピー */
.core__sub {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ems-ink-3);
}

/* 対応する領域 — チップにして、中核との主従を面積で出す */
.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.area-chip {
  padding: 10px 18px;
  border: 1px solid var(--ems-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ems-ink-2);
}

/* =========================================================
   NEWS
   ========================================================= */

.news__list { width: 100%; max-width: 880px; }

.news__item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--ems-line-2);
}

.news__list > .news__item:last-child { border-bottom: 1px solid var(--ems-line-2); }

.news__date {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--ems-ink-3);
  font-variant-numeric: tabular-nums;
}

.news__title {
  font-size: 15px;
  line-height: 1.8;
}

.news__title a:hover { color: var(--ems-mint); }

.news__ext {
  font-size: 11px;
  color: var(--ems-ink-3);
  margin-left: 6px;
}

/* =========================================================
   MEMBER
   ========================================================= */

.member__list {
  display: grid;
  gap: 20px;
  /* 4 名なので 4 × 1 か 2 × 2。auto-fit だと 1100〜1390px あたりで
     3 枚 + 1 枚になり、最後の 1 枚が取り残される。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1259px) {
  .member__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.member {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 22px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-line);
  border-radius: 4px;
}

.member__thumb {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
}

.member__thumb img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  transition: transform 300ms ease;
}

/* 「イベントに関わる全ての人をスポットライトで照らす」を画面に一度だけ。
   名刺に触れた人にだけ光が当たる（Q9・不要なら .member__thumb::after を消すだけ） */
.member__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: radial-gradient(
    120% 80% at 50% 0%,
    rgba(180, 255, 245, 0.34),
    rgba(167, 167, 238, 0.12) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.member__thumb:hover::after,
.member__thumb:focus-visible::after { opacity: 1; }

.member__thumb:hover img,
.member__thumb:focus-visible img { transform: scale(1.03); }

.member__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* これが無いと長いタグがカードの外にはみ出す */
  min-width: 0;
}

.member__role {
  font-size: 13px;
  font-weight: 500;
  color: var(--ems-purple-light);
}

.member__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.member__en {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--ems-ink-3);
}

.member__actions { margin-top: auto; padding-top: 12px; }

/* MYSTAR の由来 */
.mystar {
  padding: 28px 30px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-gold);
  border-radius: 4px;
  margin-bottom: 28px;
}

.mystar__formula {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.mystar__formula em {
  font-style: normal;
  color: var(--ems-gold);
}

.mystar__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 2;
  color: var(--ems-ink-2);
}

/* =========================================================
   PROCESS
   ========================================================= */

.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--ems-surface);
  border-top: 2px solid var(--ems-gold);
  counter-increment: step;
}

.step__no {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ems-gold);
}

.step__no::after { content: " 0" counter(step); }

.step__title { font-size: 16px; font-weight: 700; line-height: 1.6; }
.step__text { font-size: 13.5px; line-height: 1.9; color: var(--ems-ink-2); }

/* --- ページ中間の CTA ---
   hero と最下部の間に行動導線が 1 つも無かったので、
   説明が一通り済む PROCESS の直後に 1 か所だけ置く。 */
.mid-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 32px;
}

.mid-cta__note {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ems-ink-3);
}

.mid-cta__note a {
  color: var(--ems-mint);
}

/* --- 実績の数値 ---
   自社でしか出せない一次情報なので、面積を取って先に見せる。 */
.stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 8px;
}

/* 数値が 1 つだけのときは横に伸ばしすぎない */
.stats:has(> :only-child) { max-width: 420px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 28px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-gold);
  border-radius: 4px;
}

.stat__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ems-ink-2);
}

.stat__value {
  font-family: var(--font-en);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ems-mint);
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  margin-left: 6px;
  color: var(--ems-ink-2);
}

.stat__note { font-size: 12.5px; color: var(--ems-ink-3); }

/* --- 実績の動画 ---
   クリックするまで YouTube を読み込まない。サムネイルは自社チャンネルのものを
   assets/ に取り込んであるので、押すまで第三者への通信は発生しない。 */
.works {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.work {
  display: flex;
  flex-direction: column;
  background: var(--ems-surface);
  border: 1px solid var(--ems-line);
  border-radius: 4px;
  overflow: hidden;
}

.work__player {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.work__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease, transform 400ms ease;
}

.work__player:hover img,
.work__player:focus-visible img {
  opacity: 0.82;
  transform: scale(1.02);
}

/* 再生ボタン */
.work__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(15, 25, 60, 0.78);
  border: 1px solid var(--ems-mint);
  transition: background 250ms ease, scale 250ms ease;
}

.work__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ems-mint);
}

.work__player:hover .work__play,
.work__player:focus-visible .work__play {
  background: var(--ems-purple);
  scale: 1.08;
}

.work__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.work__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
}

/* =========================================================
   COMPANY table
   ========================================================= */

.company__table { width: 100%; max-width: 880px; }

.company__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--ems-line-2);
}

.company__table > .company__row:last-child { border-bottom: 1px solid var(--ems-line-2); }

.company__label { font-size: 15px; font-weight: 700; }
.company__value { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ems-ink-2); }
.company__value a:hover { color: var(--ems-mint); }

/* =========================================================
   CONTACT
   ========================================================= */

.contact__ways {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.contact__way {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-line);
  border-radius: 4px;
}

.contact__way--form { border-color: var(--ems-gold); }

.contact__big {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.contact__big--sm { font-size: 17px; }

.contact__big a:hover { color: var(--ems-mint); }

.contact__form-wrap {
  width: 100%;
  border-radius: 8px;
  background: var(--ems-white);
  overflow: hidden;
}

.contact__iframe {
  display: block;
  width: 100%;
  /* Google フォームの iframe は高さの自動調整ができないため固定値。
     項目を増やしたらこの値も手で合わせる。 */
  height: 1200px;
  border: 0;
}

.contact__fallback {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ems-ink-2);
}

.contact__fallback a {
  color: var(--ems-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   法務ページ
   ========================================================= */

.legal-page { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 20px 22px;
  background: var(--ems-surface);
  border: 1px solid var(--ems-line);
  border-radius: 4px;
}

.legal-toc__title {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ems-gold);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ems-line);
}

.legal-toc ol { display: grid; gap: 7px; }
.legal-toc a { font-size: 13px; line-height: 1.6; color: var(--ems-ink-2); }
.legal-toc a:hover { color: var(--ems-mint); }

.legal-body { max-width: 68ch; }
.legal-body h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 40px;
  margin-bottom: 12px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { font-size: 14.5px; line-height: 2.1; color: var(--ems-ink-2); }
.legal-body p + p { margin-top: 1.2em; }
.legal-body .legal-date {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ems-line-2);
  font-size: 14px;
  color: var(--ems-ink-3);
}

/* =========================================================
   404
   ========================================================= */

.notfound {
  width: min(var(--container), 92%);
  margin-inline: auto;
  padding-block: 120px 160px;
  text-align: center;
}

.notfound__code {
  font-family: var(--font-en);
  font-size: clamp(56px, 10vw, 96px);
  font-weight: 900;
  line-height: 1;
  color: var(--ems-purple-light);
  letter-spacing: 0.06em;
}

.notfound__title { margin-top: 16px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; }
.notfound__text { margin-top: 14px; color: var(--ems-ink-2); font-size: 15px; }
.notfound .grid { margin-top: 44px; text-align: left; }
.notfound__actions { margin-top: 44px; }

/* =========================================================
   Footer
   ========================================================= */

.footer {
  padding-block: 56px 40px;
  background: var(--ems-footer);
  border-top: 1px solid var(--ems-line-2);
}

.footer__inner {
  width: min(var(--container-wide), 92%);
  margin-inline: auto;
  display: grid;
  gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr;
}

.footer__logo img { width: 148px; height: auto; margin-bottom: 18px; }

.footer__address {
  font-size: 13.5px;
  line-height: 2;
  color: var(--ems-ink-2);
  font-style: normal;
}

.footer__address a:hover { color: var(--ems-mint); }

.footer__heading {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ems-gold);
  margin-bottom: 14px;
}

.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: 13.5px; color: var(--ems-ink-2); }
.footer__links a:hover { color: var(--ems-mint); }

.footer__bottom {
  width: min(var(--container-wide), 92%);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--ems-line-2);
}

.footer__copy {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--ems-ink-3);
}

/* =========================================================
   MEMBER モーダル（<dialog>）
   フォーカストラップ・背面の inert・Esc・::backdrop は
   ブラウザ標準で付いてくるので、JS 側は URL 同期だけでよくなった。
   ========================================================= */

.modal {
  width: min(1000px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  padding: 0;
  border: 1px solid var(--ems-line);
  border-radius: 10px;
  background: var(--ems-navy);
  color: var(--ems-white);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(7, 11, 26, 0.72);
  backdrop-filter: blur(3px);
}

.modal__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 32px 28px;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ems-ink-2);
  font-family: var(--font-jp);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal__close:hover { color: var(--ems-white); }

.modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ems-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ems-white);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.modal__nav:hover { border-color: var(--ems-mint); color: var(--ems-mint); }
.modal__nav svg { width: 26px; height: 26px; }

.modal__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
  min-width: 0;
}

.modal__image {
  width: 240px;
  height: auto;
  aspect-ratio: 280 / 460;
  border: 1px solid var(--ems-line);
  border-radius: 8px;
  object-fit: cover;
}

.modal__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ems-gold);
}
.modal__name { font-size: 26px; font-weight: 700; line-height: 1.35; }
.modal__role { font-size: 14px; color: var(--ems-purple-light); }
.modal__cta { margin-top: 18px; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1080px) {
  .legal-page { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; }
}

@media (max-width: 840px) {
  :root {
    --section-gap: 96px;
    --section-gap-major: 132px;
  }

  .sections { padding-block: 80px 110px; }
  .page-head { padding-block: 48px 0; }

  .nav-toggle { display: flex; }
  .header__cta { display: none; }

  .gnav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(15, 25, 60, 0.16);
    display: none;
  }

  .gnav.is-open { display: block; }

  .gnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 16px;
  }

  .gnav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 5%;
    border-bottom: 1px solid rgba(15, 25, 60, 0.1);
  }

  .gnav__jp {
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 400;
    color: var(--ems-grey);
  }

  .gnav__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 5% 0;
  }

  .modal__inner { grid-template-columns: 1fr; gap: 16px; padding: 44px 18px 24px; }
  .modal__body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .modal__image { width: 200px; }
  .modal__info { align-items: center; }
  .modal__navs {
    display: flex;
    justify-content: center;
    gap: 40px;
    order: 3;
  }
}

@media (min-width: 841px) {
  .gnav__jp,
  .gnav__actions { display: none; }
  .modal__navs { display: contents; }
}

@media (max-width: 640px) {
  .news__item { grid-template-columns: 1fr; }
  .company__row { grid-template-columns: 1fr; }
  .member { grid-template-columns: 90px 1fr; gap: 16px; padding: 18px; }
  .hero { gap: 28px; }
  .btn { width: 100%; }
  .hero__actions { width: 100%; max-width: 320px; flex-direction: column; }
}

/* 追従 CTA（SP のみ） */
.sticky-cta { display: none; }

@media (max-width: 840px) {
  .sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 10px;
    padding: 10px 5%;
    background: rgba(15, 25, 60, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ems-line);
  }
  .sticky-cta .btn { flex: 1; min-height: 48px; font-size: 14px; padding-inline: 12px; }
  .sticky-cta .btn--tel { flex: none; width: 56px; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}