/* ========================================
   場面をまたいで使う部品（章のラベル・見出し・二者のカード・◎△の印）
   各場面の CSS で大きさを変えてよい。色と形はここでそろえる。
   ----------------------------------------
   🚨 二者の色はパーツ側が CSS 変数で受ける。使う側は --side: var(--wp); と書くだけで、
      同じ形の別クラス（card_ptn_2 など）は作らない。
   ======================================== */

.kicker {
  justify-self: start;
  padding: 6px 16px;
  background: var(--kicker-bg, var(--ink));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.16em;
  border-radius: 4px;
}

.title {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.34em;
  letter-spacing: 0.01em;
}

.lead {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.7em;
}

/* 蛍光ペンの線（文字の下半分だけ塗る） */
.marker {
  background: linear-gradient(transparent 58%, var(--marker) 58%);
  font-style: normal;
}

/* 二者のカード。色は --side / --side-soft で受ける */
.side {
  padding: 20px 22px 22px;
  display: grid;
  justify-items: center;
  gap: 10px;
  background: var(--side-soft, var(--paper));
  border: 3px solid var(--side, var(--ink));
  border-radius: 14px;
}
.side .side-name {
  color: var(--side, var(--ink));
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2em;
}
.side .side-sub {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}

.is-wp {
  --side: var(--wp);
  --side-soft: var(--wp-soft);
}
.is-st {
  --side: var(--st);
  --side-soft: var(--st-soft);
}
.is-kojin {
  --side: var(--kojin);
  --side-soft: var(--kojin-soft);
}
.is-hojin {
  --side: var(--hojin);
  --side-soft: var(--hojin-soft);
}

/* 見出しの中の読点だけ細く見せる */
.thin { font-style: normal; font-weight: 500; }

/* ◎ ○ △ の印。表の中で使う */
.mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 800;
  border-radius: 50%;
}
.mark.good {
  background: var(--key-soft);
  color: var(--key);
}
.mark.mid {
  background: var(--paper-deep);
  color: var(--ink-soft);
}
.mark.bad {
  background: #f6e0da;
  color: var(--warn);
}

/* 描く線の共通設定（pathLength="1" と組み合わせて、線を 0 → 1 で描く） */
.d {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

/* 🚨 SVG の中の図形を回すときは必ず付ける。
   既定の transform-box: view-box だと「画面の中心」を軸に公転して枠外へ消える */
.spin {
  transform-box: fill-box;
  transform-origin: center;
}