/* ============================================================
   05-section.css
   セクション共通（見出し・目盛りタグ・reveal）
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
section{position:relative}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:88px 24px}

.mp-tag{
  display:inline-flex;align-items:center;gap:12px;min-height:8px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;
  color:var(--ink-soft);margin-bottom:12px;
}
.mp-tag:empty{margin-bottom:16px}
.mp-tag::before{
  content:'';width:42px;height:8px;
  background:
    linear-gradient(90deg,var(--navy) 1.5px,transparent 1.5px) 0 0/11px 8px repeat-x,
    linear-gradient(var(--navy),var(--navy)) 0 100%/100% 1.5px no-repeat;
}
.section-title{
  margin:0 0 16px;font-weight:900;
  font-size:clamp(1.6rem,3.4vw,2.35rem);letter-spacing:.04em;color:var(--navy);
}
.section-title em{font-style:normal;color:var(--red)}
.section-lead{
  margin:0;color:var(--ink-soft);font-weight:500;/*max-width:40em;*/
  /* 対応ブラウザでは文節単位で折り返す */
  word-break:auto-phrase;
  line-break:strict;
}
/* 意味のかたまりを途中で切らせない（word-break:auto-phrase が効かない環境の保険） */
.section-lead.phrase>span{display:inline-block}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* 注意書き ── ※ を頭に置いた小さな文字。素の箇条書きの黒丸はやめる */
.notes{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.notes li{
  position:relative;padding-left:1.35em;
  font-size:.8rem;line-height:1.85;color:var(--ink-soft);letter-spacing:.03em;
}
.notes li::before{content:'※';position:absolute;left:0;top:0}