/* ============================================================
   deck/blocks.css — スライドの中身を組む部品

   デッキ 47枚は、見た目の型がかなり揃っている。ここにある部品の
   組み合わせでほとんどのスライドができている。個々のスライド用の
   CSS を足す前に、既にある部品で組めないかを見ること。
   ============================================================ */

/* ============================================================
   .cols — 上罫線つきの横並び（2〜4列）
   Our vision の「創る／届ける／変える」、Traction の数字、
   Tunability の可変域など、デッキ全体で一番よく出る形。
   ============================================================ */

.cols {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  display: grid;
  gap: 0 calc(43 * var(--u));
  margin: 0;
}

.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }

.cols--gap-sm { gap: 0 calc(24 * var(--u)); }

/* 列の上の罫線。最後の列だけ青くするのが元データの癖。 */
.cols--ruled > * {
  border-top: calc(1.4 * var(--u)) solid #9aa4b5;
  padding-top: calc(14 * var(--u));
}
.cols--ruled > .is-accent { border-top-color: var(--c-blue); }

.is-dark .cols--ruled > * { border-top-color: rgba(255, 255, 255, 0.85); }
.is-dark .cols--ruled > .is-accent { border-top-color: var(--c-blue-pale); }

/* 列と列の間の縦罫（Origin の 2014 / 2014-2022 / 2022）。
   列に border-left を付けると線が列の先頭に寄って、元データの
   「余白の真ん中」からずれる。余白の中心へ背景で 1px を描く。
   3列・余白 43pt のとき中心は 32.5% と 67.5%（元データの実測）。 */
.cols--divided {
  background-image:
    linear-gradient(var(--c-line), var(--c-line)),
    linear-gradient(var(--c-line), var(--c-line));
  background-size: 1px 100%, 1px 100%;
  background-position: 32.5% 0, 67.5% 0;
  background-repeat: no-repeat;
}
.is-dark .cols--divided {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22));
}

.col__head {
  margin: 0 0 calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}
.is-dark .col__head { color: #fff; }

.col__head.is-accent { color: var(--c-blue); }

.col__text {
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: 1.72;
}

.col__text--sm { font-size: calc(10.5 * var(--u)); }

.col__text + .col__text { margin-top: calc(10 * var(--u)); }

/* ============================================================
   .stat — 大きな数字（Traction / 量産実績 / 可変域）
   ============================================================ */

.stat__value {
  margin: 0;
  font-size: calc(42 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.is-dark .stat__value { color: #fff; }

.stat__value.is-accent { color: var(--c-blue); }
.is-dark .stat__value.is-accent { color: var(--c-blue-pale); }

/* 「億円」「名」「社」「kg/年」— 数字に添える単位。 */
.stat__unit {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  padding-left: calc(2 * var(--u));
  letter-spacing: 0;
}

.stat__label {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}
.is-dark .stat__label { color: #fff; }

.stat__note {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.6;
}
.is-dark .stat__note { color: rgba(255, 255, 255, 0.82); }

/* 可変域（20）のように、値が大きく見出しが上に来る並び。 */
.stat--flip .stat__label { margin: 0 0 calc(16 * var(--u)); }
.stat--flip .stat__value { font-size: calc(36 * var(--u)); }
.stat--flip .stat__note { margin-top: calc(12 * var(--u)); }

/* ============================================================
   .timeline — 年表（Traction の 2022~23 → 2026）
   ============================================================ */

.timeline {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 calc(24 * var(--u));
  margin: 0;
  padding-top: calc(18 * var(--u));
  border-top: 1px solid #b9c2d0;
}

.timeline__step { position: relative; }

.timeline__step::before {
  content: "";
  position: absolute;
  top: calc(-22 * var(--u));
  left: 0;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #7c8494;
}
.timeline__step.is-now::before { background: var(--c-blue); }

.timeline__year {
  margin: 0 0 calc(9 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}
.timeline__step.is-now .timeline__year { color: var(--c-blue); }

.timeline__list {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.72;
}

.timeline__list li {
  position: relative;
  padding-left: calc(11 * var(--u));
}
.timeline__list li + li { margin-top: calc(3 * var(--u)); }
.timeline__list li::before {
  content: "・";
  position: absolute;
  left: calc(-1 * var(--u));
}

/* ============================================================
   .banner — 1行の言い切り（濃紺の帯 / 中央寄せの青文字）
   ============================================================ */

/* 中央寄せの青い1行（Origin / Market shift）。 */
.claim {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  text-align: center;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-blue);
}
.is-dark .claim { color: var(--c-blue-pale); }

/* 濃紺の帯（The bottleneck / Tunability）。 */
.banner {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  border-radius: calc(10 * var(--u));
  background: #0f243e;
  color: #fff;
  padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(12, 22, 40, 0.22);
}

.banner__lead {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.4;
}

.banner__note {
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   .card — 角丸のカード（3枚 / 4枚 / 2枚）
   ============================================================ */

.cards {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  display: grid;
  gap: calc(24 * var(--u));
  margin: 0;
}

.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border-radius: calc(14 * var(--u));
  background: #fff;
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(23, 39, 63, 0.14);
}

/* 「これが答え」の側だけ淡青にする、元データの使い分け。 */
.card--accent {
  background: #ebf0ff;
  box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(23, 39, 63, 0.18);
}

/* 濃色スライドの上に置くカード。 */
.card--night {
  background: #02040b;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.card--night-solid {
  background: #444f64;
  border: 0;
  box-shadow: none;
}

.card__icon {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  margin-bottom: calc(18 * var(--u));
  border-radius: calc(9 * var(--u));
  background: #eef2fb;
  padding: calc(5 * var(--u));
}
.card--night .card__icon { background: rgba(255, 255, 255, 0.9); }

.card__eyebrow {
  margin: 0 0 calc(3 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--c-blue);
}
.card__eyebrow--muted { color: #6b7689; font-weight: 400; }
.card--night .card__eyebrow--muted { color: rgba(255, 255, 255, 0.7); }

/* line-height を明示する。既定のままだと、字形（カタカナだけの行と
   漢字を含む行など）で行 box の高さが変わり、同じ1行でもカードごとに
   下の本文の開始位置が数 pt ずれる。 */
.card__title {
  margin: 0 0 calc(9 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}
.card--night .card__title,
.card--night-solid .card__title { color: #fff; }

.card__title--lg { font-size: calc(18 * var(--u)); }

.card__text {
  margin: 0;
  font-size: calc(11.5 * var(--u));
  line-height: 1.78;
}
.card--night .card__text,
.card--night-solid .card__text { color: rgba(255, 255, 255, 0.86); }

.card__text + .card__text { margin-top: calc(10 * var(--u)); }

.card__meta {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  color: #6b7689;
}
.card--night .card__meta { color: rgba(255, 255, 255, 0.66); }

.card__rule {
  width: calc(46 * var(--u));
  height: 1px;
  margin: calc(16 * var(--u)) 0 calc(12 * var(--u));
  background: currentColor;
  opacity: 0.4;
}

/* カードの中の箇条書き。 */
.bullets {
  margin: 0;
  font-size: calc(11.5 * var(--u));
  line-height: 1.78;
}
.bullets li {
  position: relative;
  padding-left: calc(12 * var(--u));
}
.bullets li + li { margin-top: calc(6 * var(--u)); }
.bullets li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: #8f9bb0;
}
.bullets strong { font-weight: 700; color: var(--c-blue); }
.bullets .is-warn { font-weight: 700; color: var(--c-red); }

/* ============================================================
   .spec — 項目名 ／ 内容 の定義リスト（会社概要・用語集）
   ============================================================ */

.spec {
  margin: 0;
  font-size: calc(10.5 * var(--u));
}

.spec__row {
  display: grid;
  grid-template-columns: calc(78 * var(--u)) 1fr;
  gap: 0 calc(10 * var(--u));
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid var(--c-line);
}
.spec__row:first-child { padding-top: 0; }

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

.spec__value {
  margin: 0;
  line-height: 1.72;
}

/* 濃色（会社概要は写真の上に載る）。 */
.spec--onphoto .spec__row { border-bottom-color: rgba(255, 255, 255, 0.28); }
.spec--onphoto .spec__key { color: #fff; }
.spec--onphoto .spec__value { color: rgba(255, 255, 255, 0.92); }

/* 用語集は 2 段組。 */
.spec--glossary .spec__row { grid-template-columns: calc(112 * var(--u)) 1fr; }

/* ============================================================
   .people — 経営陣
   ============================================================ */

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

.person {
  display: grid;
  grid-template-columns: calc(113 * var(--u)) 1fr;
  gap: 0 calc(15 * var(--u));
  align-items: start;
}

.person__photo {
  width: calc(113 * var(--u));
  height: calc(113 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(20, 34, 62, 0.18);
}

.person__name {
  margin: calc(6 * var(--u)) 0 calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--c-ink);
}

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

.person__history {
  margin: 0;
  font-size: calc(10 * var(--u));
  line-height: 1.85;
}

/* 短い区切り線（元データが多用している 46pt の細線）。 */
.rule {
  width: calc(46 * var(--u));
  height: calc(1.2 * var(--u));
  margin: 0 0 calc(12 * var(--u));
  background: currentColor;
  opacity: 0.7;
  border: 0;
}