/* ========================================
   場面をまたいで使う部品（章のラベル・見出し・年号の札・人物の札）
   各場面の CSS で大きさを変えてよい。色と形はここでそろえる。
   ----------------------------------------
   色違いはパーツ側が CSS 変数で「受ける」。使う側は --person: var(--nobunaga); と書くだけで、
   同じ形の別クラス（person_ptn_2 など）は作らない。
   ======================================== */

/* 章のラベル（画面左上の小さな帯） */
.kicker {
  justify-self: start;
  padding: 6px 16px;
  background: var(--kicker-bg, var(--ink));
  color: #fff;
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.18em;
  border-radius: 4px;
}

/* 大見出し。歴史の場面なので明朝、ただし小学生が読むので太く大きく */
.title {
  font-family: var(--font-mincho);
  font-size: 58px;
  font-weight: 900;
  line-height: 1.32em;
  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;
}

/* 年号の札。数字は欧文書体で、桁が揃うようにする */
.year {
  padding: 4px 14px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 4px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 6px;
}
.year small {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
}

/* 人物の札。色は --person / --person-soft で受ける */
.person {
  padding: 16px 18px 18px;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 232px;
  background: var(--person-soft, var(--paper));
  border: 3px solid var(--person, var(--ink));
  border-radius: 14px;
}
.person .face {
  width: 104px;
  height: 104px;
  color: var(--person, var(--ink));
}
.person .who {
  font-family: var(--font-mincho);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2em;
}
.person .did {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}

.is-nobunaga {
  --person: var(--nobunaga);
  --person-soft: var(--nobunaga-soft);
}
.is-hideyoshi {
  --person: var(--hideyoshi);
  --person-soft: var(--hideyoshi-soft);
}
.is-ieyasu {
  --person: var(--ieyasu);
  --person-soft: var(--ieyasu-soft);
}

/* 描く線の共通設定（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;
}