/* ============================================================
   deck/openers.css — 表紙・目次・章扉・裏表紙

   本文の無い「息継ぎ」のスライド。47枚のうち 10枚がこれにあたる。
   主張1枚もの（02 / 12 / 22 …）は .headline--xl + .top-* で組むので、
   専用のクラスは持たせていない。
   ============================================================ */

/* ---- 01 表紙 ------------------------------------------------ */

.cover__meta {
  position: absolute;
  top: calc(197 * var(--u));
  left: var(--pad-x);
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: 0.03em;
}

.cover__sep {
  padding: 0 calc(9 * var(--u));
  opacity: 0.7;
}

.cover__sub {
  position: absolute;
  top: calc(402 * var(--u));
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  font-size: calc(14 * var(--u));
  color: rgba(255, 255, 255, 0.86);
}

/* ---- 03 目次 ------------------------------------------------ */

.contents {
  position: absolute;
  top: calc(107 * var(--u));
  left: calc(54 * var(--u));
  width: calc(682 * var(--u));
  margin: 0;
}

.contents__row {
  display: grid;
  grid-template-columns: calc(47 * var(--u)) 1fr calc(200 * var(--u)) calc(50 * var(--u));
  align-items: baseline;
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.contents__row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.22); }

.contents__no {
  font-size: calc(19 * var(--u));
  color: var(--c-blue-pale);
}

.contents__title {
  font-size: calc(19 * var(--u));
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.contents__title:hover,
.contents__title:focus-visible { text-decoration: underline; }

.contents__sub,
.contents__page {
  font-size: calc(12 * var(--u));
  text-align: right;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 章扉（04 / 11 / 18 / 25 / 33 / 39 / 45）---------------- */

.opener__label {
  position: absolute;
  top: calc(289 * 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-pale);
}

.opener__chips {
  position: absolute;
  top: calc(324 * var(--u));
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(24 * var(--u));
  margin: 0;
  font-size: calc(10.5 * var(--u));
  color: rgba(255, 255, 255, 0.92);
}

.opener__chips li::before {
  content: "■";
  padding-right: calc(5 * var(--u));
  color: var(--c-blue-pale);
}

/* ---- 主張の下に置く補足 ------------------------------------- */

.note-block {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: 1.85;
}
.note-block p + p { margin-top: calc(3 * var(--u)); }
.is-dark .note-block { color: rgba(255, 255, 255, 0.9); }

.note-block--lg { font-size: calc(14 * var(--u)); line-height: 1.7; }

/* ---- 47 裏表紙 ---------------------------------------------- */

.closing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  text-align: center;
}

.closing__mark {
  width: calc(96 * var(--u));
  height: calc(47 * var(--u));
  background: #fff;
  -webkit-mask: url("../../images/deck/logo-white.png") no-repeat center / contain;
  mask: url("../../images/deck/logo-white.png") no-repeat center / contain;
}

.closing__words {
  margin: 0;
  font-size: calc(14 * var(--u));
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.92);
}

.closing__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(20 * var(--u));
  margin: 0;
  text-align: center;
  font-size: calc(9 * var(--u));
  color: rgba(255, 255, 255, 0.68);
}