/* ============================================================
   deck/base.css — スライドの座標系・配色・書体

   ■ 座標系
   元データ（3DC_Company deck_ver2026_v8.pptx）は 960 × 540 pt の 16:9。
   デッキ内の寸法は「元のスライド上で何 pt か」で書き、--u を掛けて
   スライド幅に対する相対値へ変換する。

       font-size: calc(32 * var(--u));   ← 元データで 32pt の見出し

   --u はコンテナクエリ単位（cqw）なので、スライドの表示幅が変われば
   中身が丸ごと同じ比率で伸縮する。JavaScript は要らない。

   ■ なぜ .top-150 のような数字入りのクラスがあるか
   _headers の CSP に style-src 'unsafe-inline' が無く、HTML 側の
   style="top:…" は効かない。スライドごとに違う縦位置は、元スライドの
   pt をそのまま名前にしたクラスで渡している。数字は元データの座標な
   ので、デッキが改訂されたら pptx 側の値と突き合わせて直すこと。

   ■ 配色
   pptx の中で実際に使われている色をそのまま持ってきている。
   ============================================================ */

.deck {
  /* --- 元スライドの色 ------------------------------------- */
  --c-ink: #000000; /* 明るいスライドの見出し */
  --c-slate: #3d4a64; /* 明るいスライドの本文 */
  --c-blue: #4c7bff; /* 基調のアクセント */
  --c-blue-deep: #1e4fd8;
  --c-blue-icon: #215bff;
  --c-blue-pale: #7fa3ff; /* 濃色スライドのアクセント */
  --c-pale: #d9e4ff;
  --c-red: #ff5050; /* 「トレードオフ」「選べない」など否定の強調 */

  --c-paper: #ffffff;
  --c-paper-blue: #ecf1f8;
  --c-paper-grey: #f1f2f1;
  --c-paper-warm: #f7f9fc;
  --c-navy: #0a1a3c; /* 濃色のカード */
  --c-night: #03060d; /* 濃色スライドの地 */
  --c-glow: #102148; /* 濃色スライドの青い滲み */

  --c-line: #dce6f2;

  /* --- 書体 ------------------------------------------------
     元データは和欧文とも Noto Serif JP。欧文だけ別書体にすると
     元の字面と変わってしまうので、1書体で通している。 */
  --font-deck: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ============================================================
   リセット
   このサイトはデッキ本体と 404 の2ページだけで、共通の base.css を持たない。
   404 は assets/css/notfound.css に独立して閉じてある（デッキ側の調整で
   404 が巻き添えで崩れるのを避けるため）。
   ============================================================ */

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

html,
body { height: 100%; }

body {
  margin: 0;
  background: #0b0d11;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* height: auto を落とすと、width/height 属性の値がそのまま高さになり、
   幅だけ縮んで縦横比が崩れる。 */
img,
svg { display: block; max-width: 100%; height: auto; }

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

/* ® などの上付きは、既定だと行の高さを押し広げる。同じ見出しでも
   ® の有無で行の高さが変わり、隣の列と揃わなくなる（15枚目で発生）。 */
sup { font-size: 0.62em; line-height: 0; }

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

/* ============================================================
   スライドの器
   ============================================================ */

.slide {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-family: var(--font-deck);
  font-weight: 400;
  letter-spacing: 0.01em;

  /* 1 = 元スライド上の 1pt。960pt = 100cqw。 */
  --u: 0.10416667cqw;

  /* 本文の版面。元データは左右とも 55pt でほぼ揃っている。 */
  --pad-x: calc(55 * var(--u));
}

/* 地の色。スライドごとに1つだけ付ける。 */
.slide--paper { background: var(--c-paper); color: var(--c-slate); }
.slide--paper-blue { background: var(--c-paper-blue); color: var(--c-slate); }
.slide--paper-grey { background: var(--c-paper-grey); color: var(--c-slate); }
.slide--paper-warm { background: var(--c-paper-warm); color: var(--c-slate); }
.slide--black { background: #000; color: #fff; }

/* 白 → 淡青の縦グラデーション（経営陣・トレードオフ・募集職種）。 */
.slide--paper-fade {
  background: linear-gradient(180deg, #fff 0%, #edf2ff 52%, var(--c-pale) 100%);
  color: var(--c-slate);
}

/* 濃色スライド。青い滲みの位置だけ 4 種類ある。 */
.slide--night { background: var(--c-night); color: #fff; }

.slide--night-tr {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--c-glow) 0%, transparent 62%),
    var(--c-night);
}
.slide--night-bl {
  background:
    radial-gradient(120% 90% at 0% 100%, var(--c-glow) 0%, transparent 62%),
    var(--c-night);
}
.slide--night-center {
  background:
    radial-gradient(80% 72% at 50% 50%, #0f1c3c 0%, transparent 72%),
    var(--c-night);
}
.slide--night-bottom {
  background: linear-gradient(180deg, var(--c-night) 32%, #102147 100%);
}

/* 濃色の地に載るスライドは、まとめてこの印を付けて文字色を反転する。
   （背景の種類ごとにセレクタを列挙すると、増えたときに漏れる） */
.slide.is-dark { color: #fff; }

/* ============================================================
   全面の写真
   ============================================================ */

.slide__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の上に文字を載せるための覆い。
   種類と数値は pptx の中の全面図形（gradFill / solidFill）そのまま。
   目分量で作ると、写真の見え方が元データと変わってしまう。 */
.slide__veil { position: absolute; inset: 0; }

/* 07 会社概要 — 右へ向かって濃くなる。本文が右半分に来る。 */
.slide__veil--right {
  background: linear-gradient(90deg, rgba(0, 10, 10, 0) 0%, #000a0a 60%, #000a0a 100%);
}

/* 18 GMS という答え / 36 組織 — 左 1/4 は真っ黒、右端で透明。 */
.slide__veil--left {
  background: linear-gradient(90deg, #000 0%, #000 25%, rgba(0, 0, 0, 0) 100%);
}

/* 37 研究と製造 — 左端の黒から右端の透明まで、まっすぐ薄くなる。 */
.slide__veil--left-soft {
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* 39 採用情報 — 同じだが、元データの図形が幅 807pt しかない。 */
.slide__veil--left-807 {
  right: calc(153 * var(--u));
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* 43 Why join — 上端の黒から中央で 60% になり、そのまま下まで。 */
.slide__veil--top {
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* 44 Get in touch — 一様に灰色をかぶせる（tx1 lumMod85% + alpha70%）。 */
.slide__veil--flat { background: rgba(38, 38, 38, 0.7); }

/* 覆いの上に来る中身は、これで持ち上げる。 */
.slide__body {
  position: relative;
  height: 100%;
}

/* ============================================================
   全スライド共通の飾り（ロゴ・ページ番号）
   ============================================================ */

/* 右上の 3DC マーク。1枚の白 PNG をマスクにして色だけ変える。
   明るいスライド用に黒版の画像を別に持つと、片方だけ差し替わる。 */
.slide__mark {
  position: absolute;
  top: calc(23 * var(--u));
  right: calc(26 * var(--u));
  width: calc(35 * var(--u));
  height: calc(17 * var(--u));
  background: currentColor;
  -webkit-mask: url("../../images/deck/logo-white.png") no-repeat center / contain;
  mask: url("../../images/deck/logo-white.png") no-repeat center / contain;
}

/* 31 / 32 は元データでロゴが一回り大きい。 */
.slide__mark--lg {
  top: calc(32 * var(--u));
  right: calc(54 * var(--u));
  width: calc(48 * var(--u));
  height: calc(24 * var(--u));
}

.slide__pageno {
  position: absolute;
  right: calc(26 * var(--u));
  bottom: calc(20 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 0.08em;
  opacity: 0.72;
}

/* ============================================================
   見出しまわり — ほぼすべてのスライドが同じ組み方をしている
   ============================================================ */

/* 左上の欧文ラベル（Traction / Our vision / The moat …）。 */
.eyebrow {
  position: absolute;
  top: calc(24 * var(--u));
  left: var(--pad-x);
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-blue);
}
.is-dark .eyebrow { color: var(--c-blue-pale); }

/* スライドの主見出し。位置は .top-* で渡す（既定は 60pt）。 */
.headline {
  position: absolute;
  top: calc(60 * var(--u));
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}
.is-dark .headline { color: #fff; }

.headline--xs { font-size: calc(22 * var(--u)); }
.headline--sm { font-size: calc(26 * var(--u)); }
.headline--md { font-size: calc(28 * var(--u)); }
.headline--lg { font-size: calc(40 * var(--u)); line-height: 1.4; }
.headline--xl { font-size: calc(44 * var(--u)); line-height: 1.42; }
.headline--cover { font-size: calc(54 * var(--u)); line-height: 1.22; color: #fff; }

/* 見出しの中の強調。青が既定、否定的な語だけ赤。 */
.hl-blue { color: var(--c-blue); font-style: normal; }
.hl-red { color: var(--c-red); font-style: normal; }
.is-dark .hl-blue { color: var(--c-blue-pale); }

/* 見出しの下のリード文。 */
.lead {
  position: absolute;
  top: calc(116 * var(--u));
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: 1.8;
}
.lead p + p { margin-top: calc(4 * var(--u)); }
.lead strong { font-weight: 700; color: var(--c-ink); }
.is-dark .lead { color: rgba(255, 255, 255, 0.9); }
.is-dark .lead strong { color: #fff; }

/* 脚注（※ …）。 */
.footnote {
  position: absolute;
  left: var(--pad-x);
  bottom: calc(20 * var(--u));
  margin: 0;
  font-size: calc(9 * var(--u));
  line-height: 1.6;
  opacity: 0.85;
}

/* 写真の説明（左下）。 */
.photo-caption {
  position: absolute;
  left: calc(27 * var(--u));
  bottom: calc(20 * var(--u));
  margin: 0;
  font-size: calc(10 * var(--u));
  color: rgba(255, 255, 255, 0.82);
}

.slide a { color: inherit; text-underline-offset: 0.18em; }

/* ============================================================
   縦位置のユーティリティ
   数字は元スライド上の pt。CSP でインライン style が使えないため、
   スライドごとに違う縦位置はここを経由して渡す。
   ============================================================ */

.top-46 { top: calc(46 * var(--u)); }
.top-52 { top: calc(52 * var(--u)); }
.top-58 { top: calc(58 * var(--u)); }
.top-62 { top: calc(62 * var(--u)); }
.top-72 { top: calc(72 * var(--u)); }
.top-88 { top: calc(88 * var(--u)); }
.top-104 { top: calc(104 * var(--u)); }
.top-107 { top: calc(107 * var(--u)); }
.top-116 { top: calc(116 * var(--u)); }
.top-121 { top: calc(121 * var(--u)); }
.top-130 { top: calc(130 * var(--u)); }
.top-137 { top: calc(137 * var(--u)); }
.top-144 { top: calc(144 * var(--u)); }
.top-146 { top: calc(146 * var(--u)); }
.top-140 { top: calc(140 * var(--u)); }
.top-150 { top: calc(150 * var(--u)); }
.top-160 { top: calc(160 * var(--u)); }
.top-170 { top: calc(170 * var(--u)); }
.top-190 { top: calc(190 * var(--u)); }
.top-200 { top: calc(200 * var(--u)); }
.top-209 { top: calc(209 * var(--u)); }
.top-213 { top: calc(213 * var(--u)); }
.top-224 { top: calc(224 * var(--u)); }
.top-256 { top: calc(256 * var(--u)); }
.top-262 { top: calc(262 * var(--u)); }
.top-300 { top: calc(300 * var(--u)); }
.top-310 { top: calc(310 * var(--u)); }
.top-355 { top: calc(355 * var(--u)); }
.top-363 { top: calc(363 * var(--u)); }
.top-369 { top: calc(369 * var(--u)); }
.top-380 { top: calc(380 * var(--u)); }
.top-396 { top: calc(396 * var(--u)); }
.top-436 { top: calc(436 * var(--u)); }

.top-143 { top: calc(143 * var(--u)); }
.top-149 { top: calc(149 * var(--u)); }
.top-155 { top: calc(155 * var(--u)); }
.top-159 { top: calc(159 * var(--u)); }
.top-169 { top: calc(169 * var(--u)); }
.top-173 { top: calc(173 * var(--u)); }
.top-179 { top: calc(179 * var(--u)); }
.top-180 { top: calc(180 * var(--u)); }
.top-181 { top: calc(181 * var(--u)); }
.top-184 { top: calc(184 * var(--u)); }
.top-197 { top: calc(197 * var(--u)); }
.top-253 { top: calc(253 * var(--u)); }
.top-286 { top: calc(286 * var(--u)); }
.top-316 { top: calc(316 * var(--u)); }
.top-361 { top: calc(361 * var(--u)); }
.top-387 { top: calc(387 * var(--u)); }

/* 横位置。左半分だけ / 右半分だけを使うスライドで .eyebrow などに足す。 */
.left-493 { left: calc(493 * var(--u)); }
.right-half { right: calc(500 * var(--u)); }