/* ============================================================
   deck/figures.css — 図・グラフ・1枚だけの組み方

   blocks.css の部品で組めないもの。原則として「そのスライドにしか
   出てこない形」だけをここに置く。2枚目が出てきたら blocks.css へ移す。

   元データで PowerPoint の図形として描かれているもの（矢羽根・棒・
   TAM の箱・ネットワーク線）は、画像に焼かずに CSS で引き直している。
   拡大しても崩れず、文字が文字のまま残る。
   ============================================================ */

/* ---- 06 Our vision：ビジョンの言い換え ---------------------- */

.vision-gloss {
  position: absolute;
  top: calc(190 * var(--u));
  left: var(--pad-x);
  margin: 0;
  padding-left: calc(62 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--c-blue);
}
/* 頭の罫線（元データは 55pt の細い横線）。 */
.vision-gloss::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(48 * var(--u));
  height: 1px;
  background: var(--c-blue);
}

/* ---- 09 わたしたちの始まり：年 + 小見出し ------------------- */

.origin__year {
  margin: 0 0 calc(28 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}
.origin__year.is-accent { color: var(--c-blue); }

.origin__head {
  margin: 0 0 calc(9 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}

/* ---- 07 会社概要：右側にだけ本文が来る ---------------------- */

.panel-right {
  position: absolute;
  top: calc(148 * var(--u));
  left: calc(493 * var(--u));
  right: calc(55 * var(--u));
}

/* ---- 14 導電助剤とは何か：左に図、右に読み --------------- */

.fig-left {
  position: absolute;
  top: calc(210 * var(--u));
  left: calc(55 * var(--u));
  width: calc(433 * var(--u));
}

/* 図の中の文字は、日本語のまま画像に焼き付いていた（英語版で日本語が残る）。
   画像からは消して、ラベルと凡例を HTML の文字として置き直している。
   これで日英を差し替えられ、拡大しても崩れない。 */
.fig-left { position: absolute; }

.fig-left__collector {
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(174 * var(--u));
  margin: 0;
  font-size: calc(10 * var(--u));
  color: var(--c-ink);
}

.fig-left__legend {
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(10 * var(--u));
}
.fig-left__legend li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.fig-left__legend li::before {
  content: "";
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: currentColor;
}
/* 丸の色は元の図から拾った値。 */
.lg--active::before { color: #d5d9df; }
.lg--additive::before { color: #1b4eca; }
.lg--electrolyte::before { color: #8c9eca; }


.so-what {
  position: absolute;
  top: calc(200 * var(--u));
  left: calc(524 * var(--u));
  right: calc(40 * var(--u));
}

.so-what__label {
  margin: 0 0 calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--c-blue);
}

.so-what__lines {
  margin: 0;
  font-size: calc(16 * var(--u));
  line-height: 1.72;
  color: var(--c-ink);
}
.so-what__lines strong { font-weight: 700; }

.keypoints {
  position: absolute;
  top: calc(345 * var(--u));
  left: calc(524 * var(--u));
  right: calc(40 * var(--u));
  margin: 0;
  font-size: calc(11 * var(--u));
  line-height: 1.7;
}
.keypoints li + li { margin-top: calc(14 * var(--u)); }
.keypoints li::before {
  content: "■";
  padding-right: calc(6 * var(--u));
  color: var(--c-blue);
}
.keypoints b {
  font-weight: 700;
  color: var(--c-blue);
}

/* ---- 15 既存の導電助剤：粒子のイラスト付きカード ------------ */

/* 3枚の元画像は縦横比がそれぞれ違う（768/896/792 × 248）。幅だけ揃えると
   高さがばらつき、下のキャプションと箇条書きが3枚で揃わない。高さで揃える。 */
.card__figure {
  display: block;
  width: 100%;
  height: calc(62 * var(--u));
  object-fit: contain;
  margin: calc(6 * var(--u)) 0 calc(10 * var(--u));
}

.card__figcaption {
  margin: 0 0 calc(14 * var(--u));
  text-align: center;
  font-size: calc(8 * var(--u));
  color: var(--c-red);
}
.card__figcaption--ok { color: var(--c-blue); }

/* ---- 17 市場：TAM の箱 --------------------------------------
   軸・目盛・箱の位置は元スライドの pt をそのまま置いている。
   スライド全面を座標系にしているので、pptx の x/y をそのまま書ける。 */

.tam { position: absolute; inset: 0; }

.tam__axis-y,
.tam__axis-x { position: absolute; background: #b9c2d0; }
.tam__axis-y { left: calc(175 * var(--u)); top: calc(172 * var(--u)); height: calc(266 * var(--u)); width: 1px; }
.tam__axis-x { left: calc(175 * var(--u)); top: calc(437 * var(--u)); width: calc(624 * var(--u)); height: 1px; }

.tam__unit,
.tam__scale,
.tam__ytick,
.tam__xtick {
  position: absolute;
  margin: 0;
  font-size: calc(10.5 * var(--u));
  color: var(--c-slate);
}

.tam__unit { left: calc(126 * var(--u)); top: calc(147 * var(--u)); }
.tam__scale { left: calc(808 * var(--u)); top: calc(416 * var(--u)); width: calc(75 * var(--u)); line-height: 1.7; }

.tam__ytick { left: calc(96 * var(--u)); font-weight: 700; color: #46536d; }
.tam__ytick--high { top: calc(193 * var(--u)); }
.tam__ytick--mid { top: calc(290 * var(--u)); }
.tam__ytick--low { top: calc(389 * var(--u)); }

.tam__xtick { top: calc(444 * var(--u)); width: calc(80 * var(--u)); white-space: nowrap; text-align: center; font-weight: 700; color: #46536d; }
.tam__xtick--nm { left: calc(170 * var(--u)); }
.tam__xtick--um { left: calc(339 * var(--u)); }
.tam__xtick--10um { left: calc(508 * var(--u)); }
.tam__xtick--mm { left: calc(678 * var(--u)); }

.tam__box {
  position: absolute;
  display: grid;
  place-content: center;
  border-radius: calc(9 * var(--u));
  text-align: center;
  color: #fff;
  padding: calc(4 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(20, 34, 62, 0.22);
}

.tam__name { margin: 0; font-size: calc(12 * var(--u)); }
.tam__size { margin: calc(3 * var(--u)) 0 0; font-size: calc(10.5 * var(--u)); }

.tam__box--semi { background: #2158ff; left: calc(202 * var(--u)); top: calc(185 * var(--u)); width: calc(220 * var(--u)); height: calc(57 * var(--u)); }
.tam__box--lib-premium { background: #6f95ff; left: calc(371 * var(--u)); top: calc(225 * var(--u)); width: calc(168 * var(--u)); height: calc(52 * var(--u)); }
.tam__box--lib { background: #17b0e8; left: calc(412 * var(--u)); top: calc(290 * var(--u)); width: calc(168 * var(--u)); height: calc(86 * var(--u)); }
.tam__box--aero { background: #45526b; left: calc(658 * var(--u)); top: calc(259 * var(--u)); width: calc(139 * var(--u)); height: calc(48 * var(--u)); }
.tam__box--filler { background: #3d4a64; left: calc(602 * var(--u)); top: calc(366 * var(--u)); width: calc(139 * var(--u)); height: calc(48 * var(--u)); }

/* ---- 19 GMS の構造：左に画像、右に4項目 -------------------- */

.material-fig {
  position: absolute;
  top: calc(177 * var(--u));
  left: calc(99 * var(--u));
  width: calc(250 * var(--u));
  text-align: center;
}
.material-fig figcaption {
  margin-top: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  color: rgba(255, 255, 255, 0.86);
}

.traits {
  position: absolute;
  top: calc(174 * var(--u));
  left: calc(464 * var(--u));
  right: calc(55 * var(--u));
  margin: 0;
}

.traits > div {
  border-left: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.55);
  padding-left: calc(18 * var(--u));
}
.traits > div + div { margin-top: calc(24 * var(--u)); }

.traits dt {
  margin: 0 0 calc(7 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: #fff;
}
.traits dd {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  color: rgba(255, 255, 255, 0.82);
}
.traits dd b { font-weight: 700; color: var(--c-blue-pale); }

/* ---- 21 事例カードの見出しタグ ------------------------------ */

.tag {
  display: inline-block;
  margin: 0 0 calc(14 * var(--u));
  padding: calc(5 * var(--u)) calc(13 * var(--u));
  border-radius: 999px;
  background: #cfe0ea;
  color: #24506b;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}

/* ---- 23 なぜ量産できなかったか：右の濃紺パネル -------------- */

.dark-panel {
  position: absolute;
  top: calc(189 * var(--u));
  left: calc(535 * var(--u));
  right: calc(72 * var(--u));
  /* 左の Background 段（195→453pt）と下端を揃える。高さを中身に任せると
     ページ番号の高さまで伸びて、左右で揃わない。 */
  bottom: calc(87 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #0f243e;
  color: #fff;
  padding: calc(30 * var(--u)) calc(34 * var(--u));
}
.dark-panel__lead {
  margin: 0;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.45;
}
.dark-panel__rule {
  width: calc(86 * var(--u));
  height: 1px;
  margin: calc(22 * var(--u)) 0 calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.5);
  border: 0;
}
.dark-panel__text {
  margin: 0;
  font-size: calc(10 * var(--u));
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- 24 量産実績：写真の上の黒いパネル ---------------------- */

.figure-panel {
  position: absolute;
  left: calc(55 * var(--u));
  right: calc(55 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(0, 0, 0, 0.9);
  padding: calc(28 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
}

/* ---- 27 材料事業：矢羽根で進む4段階 ------------------------- */

.flow {
  position: absolute;
  left: calc(55 * var(--u));
  right: calc(55 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 calc(6 * var(--u));
  margin: 0;
}

.flow__step {
  position: relative;
  display: grid;
  place-content: center;
  height: calc(88 * var(--u));
  padding: 0 calc(26 * var(--u)) 0 calc(14 * var(--u));
  text-align: center;
  color: #fff;
  /* 右が尖り、左がへこむ矢羽根。 */
  clip-path: polygon(
    0 0,
    calc(100% - 26 * var(--u)) 0,
    100% 50%,
    calc(100% - 26 * var(--u)) 100%,
    0 100%,
    calc(26 * var(--u)) 50%
  );
}
.flow__step:first-child {
  padding-left: calc(6 * var(--u));
  clip-path: polygon(
    0 0,
    calc(100% - 26 * var(--u)) 0,
    100% 50%,
    calc(100% - 26 * var(--u)) 100%,
    0 100%
  );
}

.flow__step--1 { background: #003ae1; }
.flow__step--2 { background: #205bff; }
.flow__step--3 { background: #94b3d6; }
.flow__step--4 { background: #375f92; }

.flow__title { margin: 0; font-size: calc(14 * var(--u)); font-weight: 700; }
.flow__sub { margin: calc(4 * var(--u)) 0 0; font-size: calc(12 * var(--u)); }

/* 矢羽根の中のアイコン。元データでは白抜きなので、青いままの SVG を
   filter で真っ白にする（アイコンごとにファイルを増やさない）。 */
.flow__icon {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin: 0 auto calc(6 * var(--u));
  filter: brightness(0) invert(1);
}

/* 42 選考プロセスの矢羽根は色と高さだけ違う。 */
.flow--hire .flow__step { height: calc(96 * var(--u)); }
.flow--hire .flow__step--1 { background: #375f92; }
.flow--hire .flow__step--2 { background: #7ea2ff; }
.flow--hire .flow__step--3 { background: #4b7aff; }
.flow--hire .flow__step--4 { background: #205bff; }
.flow--hire .flow__title { font-size: calc(16 * var(--u)); }
.flow--hire .flow__sub { font-size: calc(11 * var(--u)); }

/* ---- 28 顧客の広がり：中央の円と2列の箱 ---------------------
   座標は元スライドの pt から、この枠（左 55pt / 上 146pt）の中の
   相対値へ直したもの。SVG の viewBox もこの枠と同じ 850 × 330。 */

.reach {
  position: absolute;
  top: calc(146 * var(--u));
  left: calc(55 * var(--u));
  right: calc(55 * var(--u));
  height: calc(330 * var(--u));
}

.reach__hub {
  position: absolute;
  left: calc(85 * var(--u));
  top: calc(105 * var(--u));
  width: calc(103 * var(--u));
  height: calc(103 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #17253f 0%, #0c1526 72%);
  box-shadow: 0 0 0 calc(14 * var(--u)) #cfdcfb;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
}
.reach__hub-top { margin: 0; font-size: calc(10.5 * var(--u)); }
.reach__hub-no { margin: 0; font-size: calc(36 * var(--u)); font-weight: 400; line-height: 1.25; }
.reach__hub-foot { margin: 0; font-size: calc(10.5 * var(--u)); }

.reach__hub-note {
  position: absolute;
  left: calc(19 * var(--u));
  top: calc(252 * var(--u));
  width: calc(235 * var(--u));
  margin: 0;
  text-align: center;
  font-size: calc(8 * var(--u));
}

.reach__colhead {
  position: absolute;
  top: calc(17 * var(--u));
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--c-blue);
}
.reach__colhead--uses { left: calc(232 * var(--u)); }
.reach__colhead--customers { left: calc(532 * var(--u)); }

.reach__col {
  position: absolute;
  top: calc(51 * var(--u));
  display: grid;
  gap: calc(31 * var(--u));
}
.reach__col--uses { left: calc(232 * var(--u)); width: calc(201 * var(--u)); }
.reach__col--customers { left: calc(532 * var(--u)); width: calc(306 * var(--u)); }

.reach__box {
  height: calc(41 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #b9cdf5;
  border-left: calc(3 * var(--u)) solid var(--c-blue);
  border-radius: calc(4 * var(--u));
  background: #fff;
  padding: 0 calc(11 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(20, 34, 62, 0.1);
}
.reach__box--tinted { background: #e9effc; }
.reach__box b { display: block; font-size: calc(12 * var(--u)); color: var(--c-ink); }
.reach__box span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(9 * var(--u)); }

/* 箱と箱をつなぐ線は SVG で1枚だけ敷く。箱より下に置く。 */
.reach__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- 30 4つの壁 --------------------------------------------- */

.walls {
  position: absolute;
  top: calc(166 * var(--u));
  left: calc(54 * var(--u));
  right: calc(50 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 calc(43 * var(--u));
  margin: 0;
}

.wall__icon { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }

.wall__name {
  margin: calc(14 * var(--u)) 0 calc(6 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: #fff;
}
.wall__sub {
  margin: 0 0 calc(16 * var(--u));
  font-size: calc(11 * var(--u));
  color: rgba(255, 255, 255, 0.86);
}
.wall__sub b { font-weight: 700; color: #fff; }

/* 説明文の行数が列ごとに違う（2行 / 3行）。高さを中身に任せると、
   下の「現場では」以降が列ごとにずれる。3行ぶんで固定する。 */
.wall__body {
  margin: 0;
  min-height: calc(61 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: calc(9.5 * var(--u));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
}

.wall__field { margin: calc(24 * var(--u)) 0 0; font-size: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.7); }
.wall__now { margin: calc(4 * var(--u)) 0 0; font-size: calc(15 * var(--u)); font-weight: 700; color: #fff; }
.wall__want { margin: calc(6 * var(--u)) 0 0; font-size: calc(10 * var(--u)); color: var(--c-blue-pale); }

/* ---- 31 プロダクト：左に3つの読み、右に画面 ----------------- */

/* 幅と文字サイズは元データのまま（309pt / 14pt / 8.8pt）。
   これより狭いか大きいと「部下にも他部署にも、聞いて回らなくていい」が
   2行に折れる。 */
.roles {
  position: absolute;
  top: calc(168 * var(--u));
  left: calc(55 * var(--u));
  width: calc(309 * var(--u));
  margin: 0;
}
/* 罫線は全幅ではなく 56pt の短い線（原本の実測）。border-top で全幅に
   引くと、右にあるデモ画面（x=349pt〜）に重なってしまう。 */
.roles > div { position: relative; padding-top: calc(12 * var(--u)); }
.roles > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(56 * var(--u));
  height: calc(1.2 * var(--u));
  background: rgba(255, 255, 255, 0.55);
}
.roles > div + div { margin-top: calc(26 * var(--u)); }
.roles dt { margin: 0 0 calc(5 * var(--u)); font-size: calc(11 * var(--u)); color: var(--c-blue-pale); }
.roles dd { margin: 0; }
.roles__line { display: block; font-size: calc(14 * var(--u)); font-weight: 700; color: #fff; }
.roles__note { display: block; margin-top: calc(4 * var(--u)); font-size: calc(8.8 * var(--u)); color: rgba(255, 255, 255, 0.72); }

/* 画像は版面で切ってあるので、右端・下端にぴったり付ける。
   ⚠️ はみ出させると印刷（PDF 書き出し）でこの画像だけ描かれない。
   枠の高さが変わっても（英語版は見出しが2行ぶん下がる）はみ出さないよう、
   はみ出しは枠の側で切る。日本語版は枠と画像の縦横比がほぼ同じなので
   見え方は変わらない。 */
.screens {
  position: absolute;
  top: calc(138 * var(--u));
  left: calc(349 * var(--u));
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.screens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* 画像の左 190px ぶんは濃い色のサイドバー。元データの位置（左 370pt）だと
   カードの左端がそこに掛かり、地の明暗が箱の途中で変わってしまう。
   サイドバーを外し、画面の明るいところの中ほどに置く。 */
.combo {
  position: absolute;
  left: calc(490 * var(--u));
  top: calc(303 * var(--u));
  width: calc(392 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(18 * var(--u));
  border: 1px solid #6b8bf5;
  border-radius: calc(10 * var(--u));
  background: rgba(6, 12, 26, 0.9);
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  text-align: center;
  color: #fff;
  font-size: calc(15 * var(--u));
  line-height: 1.5;
}
.combo b { font-weight: 700; color: var(--c-blue-pale); }
.combo__x { font-size: calc(16 * var(--u)); opacity: 0.8; }

/* ---- 34 行動指針 -------------------------------------------- */

.creed__no {
  margin: 0 0 calc(12 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--c-blue-pale);
}
.creed__title {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
}
.creed__text {
  margin: calc(52 * var(--u)) 0 0;
  padding-top: calc(14 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: calc(9.5 * var(--u));
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.78);
}

/* ---- 35 拠点カード / 38 Life at 3DC ------------------------- */

.photo-card { overflow: hidden; padding: 0; }
.photo-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-card__body { padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }

/* ---- 36 組織 / 40 出身母体：横棒 ---------------------------- */

.bars {
  position: absolute;
  margin: 0;
  display: grid;
  gap: calc(14 * var(--u));
}

.bar {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) 1fr calc(46 * var(--u));
  align-items: center;
  gap: 0 calc(16 * var(--u));
}

.bar__name { font-size: calc(12 * var(--u)); }
.bar__track {
  height: calc(9 * var(--u));
  border-radius: 999px;
  background: #585958;
  overflow: hidden;
}
.bar__fill { display: block; height: 100%; border-radius: 999px; background: #7ea2ff; }
.bar__value { font-size: calc(12 * var(--u)); font-weight: 700; text-align: right; }

/* 幅は元データの人数・割合そのもの。 */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-23 { width: 23%; }
.w-51 { width: 51%; }
.w-60 { width: 60%; }
.w-80 { width: 80%; }

.bars--light .bar__track { background: #585958; }
.bars--light .bar__name { color: var(--c-slate); }
.bars--light .bar__value { color: var(--c-ink); }
.bars--light .bar__value.is-accent { color: var(--c-blue); }

/* ---- 40 メンバー数の推移：縦棒 ------------------------------ */

.growth {
  position: absolute;
  top: calc(200 * var(--u));
  left: calc(55 * var(--u));
  width: calc(430 * var(--u));
  height: calc(196 * var(--u));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 0 calc(28 * var(--u));
  border-bottom: 1px solid #c4ccd8;
  margin: 0;
}

.growth__bar { position: relative; display: block; background: #75787c; border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0; }
.growth__bar.is-now { background: #7ea2ff; }

.h-11 { height: 11%; }
.h-22 { height: 22%; }
.h-44 { height: 44%; }
.h-66 { height: 66%; }
.h-100 { height: 100%; }

.growth__value {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-19 * var(--u));
  text-align: center;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}
.growth__bar.is-now .growth__value { color: var(--c-blue); }

.growth__axis {
  position: absolute;
  top: calc(400 * var(--u));
  left: calc(55 * var(--u));
  width: calc(430 * var(--u));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 calc(28 * var(--u));
  margin: 0;
  text-align: center;
  font-size: calc(11 * var(--u));
  color: #6b7689;
}

/* ---- 44 連絡先の3枚 ----------------------------------------- */

.contact-card {
  border-radius: calc(4 * var(--u));
  background: rgba(7, 10, 14, 0.93);
  padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  color: #fff;
}
.contact-card__label { margin: 0 0 calc(8 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 700; color: var(--c-blue-pale); }
.contact-card__title { margin: 0; font-size: calc(14 * var(--u)); font-weight: 700; }
.contact-card__text { margin: 0; font-size: calc(10.5 * var(--u)); line-height: 1.8; color: rgba(255, 255, 255, 0.88); }