@charset "UTF-8";

/* =========================================================
   佐々木あやの 公式サイト
   政策ページ（/policy/ と /policy/<分野>/）専用スタイル
   style.css・page.css の後に読み込む。

   骨格（.layout ＞ .ui／.main／.footer）と下層の差分は page.css に任せる。
   政策ページには写真の列（.hero）を置かず、PC はヘッダーを上の横一列にして本文を幅いっぱいに使う（13. の .layout--wide）。
   それ以外にこのファイルが担当するのは <main> の中だけ。page.css の本文用の指定
   （.content-section h1/h2 など）と混ざらないよう、本文は .pp／.pv の独自の class で組む。

   文字色: 本文と小さい文字は #212121（--color-black）。分野の色（--area）は
   面・線・棒・番号の地にだけ使う（白地での文字のコントラストが 4.5:1 に届かないため）。

   動き: policy-motion.js が <html> に .motion を付けたときだけ、[data-reveal] を
   隠してから見せる。JS が動かない・「視差効果を減らす」のときは最初から全部見える。
   ========================================================= */

/* ---------------------------------------------------------
   0. 分野の色まわり（8色そのものは style.css の 6-5「分野の色」）
   --------------------------------------------------------- */
:where(.pp, .pv) {   /* 詳細度 0：style.css の [data-area] の色が勝つように */
  --area: var(--color-primary);
  --area-tint: var(--color-primary-light);
  --pp-gray: #595959;          /* 補足の文字（白地で 7:1） */
  --pp-line: var(--color-light-gray);
}

/* 分野の色をごく薄くした地。color-mix 非対応のブラウザは薄い灰色 */
[data-area] {
  --area-tint: #f5f5f5;
  --area-tint: color-mix(in srgb, var(--area) 9%, #fff);
}

/* ---------------------------------------------------------
   1. パンくず
   --------------------------------------------------------- */
.breadcrumb {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
}

/* 区切りの「›」は線で描く（読み上げに記号を混ぜない） */
.breadcrumb__list li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 12px 0 8px;
  border-top: 1.5px solid var(--color-black);
  border-right: 1.5px solid var(--color-black);
  transform: rotate(45deg);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   2. 共通の部品
   --------------------------------------------------------- */
/* 英字ラベル（「POLICY 01 / ECONOMY」）。下に分野の色の線を引く */
.pp-label {
  display: block;
  position: relative;
  width: fit-content;
  margin: 0 0 12px;   /* 見出しの直前に置く <p> でも上に余白を足さない */
  padding-bottom: 6px;
  color: var(--color-black);
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.pp-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--area);
  transform-origin: left center;
}

/* 見出しの行：文節（span）ごとにまとめて折り返す（トップの .policy__text と同じ考え方） */
/* 文節が1行に収まらないときは、その中で普通に折り返す（句読点だけが行頭に来ないよう、
   keep-all は使わない） */
.pp-line,
.pp-policy__line,
.pv-area__line {
  display: inline-block;
  max-width: 100%;
}

/* ---------------------------------------------------------
   3. 分野ページの扉
   --------------------------------------------------------- */
.pp-head {
  margin-bottom: 40px;
}

/* 分野の色の面＋大きな英字（＋線画）。飾りなので aria-hidden */
.pp-head__face {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  margin: 0 calc(-1 * var(--col-main-pad-x)) 32px;
  padding: 24px var(--col-main-pad-x) 16px;
  overflow: hidden;
  background-color: var(--area);
  container-type: inline-size;   /* 英字の大きさを、画面ではなくこの面の幅に合わせる */
}

.pp-head__bg {
  margin: 0;
  color: var(--color-white);   /* 8色すべてで 3:1 以上（大きい太字の基準） */
  font-family: var(--font-en);
  font-size: clamp(36px, 11vw, 56px);
  font-size: clamp(30px, 11.5cqi, 56px);   /* PC は本文の列が細いので、vw だと「COMMUNIT / Y」と割れる */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.pp-head__art {
  position: absolute;
  inset: 0;
}

.pp-head__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pp-head__title {
  margin: 0;
  color: var(--color-black);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.pp-head__name {
  font-size: 40px;
}

.pp-head__suffix {
  margin-left: .1em;
  font-size: 24px;
}

/* 「〜福岡へ」：1行ずつせり上がり、最後の行に太い下線を引く */
.pp-head__headline {
  margin: 24px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pp-head__headline .pp-line {
  position: relative;
  z-index: 0;
}

.pp-head__headline .pp-line:last-child::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: .1em;
  height: .35em;
  background-color: var(--area);
  opacity: .45;
  transform-origin: left center;
}

/* 前文 */
.pp-intro {
  margin-top: 32px;
}

.pp-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

.pp-intro p + p {
  margin-top: 1em;
}

.pp-intro strong {
  font-size: 18px;
}

/* ---------------------------------------------------------
   4. 施策一覧（目次）
   --------------------------------------------------------- */
.pp-toc {
  margin: 48px calc(-1 * var(--col-main-pad-x)) 0;
  padding: 32px var(--col-main-pad-x);
  background-color: var(--area-tint);
}

.pp-toc__heading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.pp-toc__item + .pp-toc__item {
  margin-top: 8px;
}

.pp-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap-size);
  padding: 4px 0;
  color: var(--color-black);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

.pp-toc__text {
  padding-top: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.pp-toc__link:hover .pp-toc__text {
  text-decoration-thickness: 2px;
}

/* 施策一覧の下の「前の分野・次の分野・全体像」（PC だけ。スマホは右下の「目次」ボタン） */
.pp-sidepager {
  display: none;
}

/* 8つの分野：スマホの「目次」の窓の中（<template> から policy-motion.js が差し込む） */

.pp-areas__heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.pp-areas__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-size);
  padding: 4px 8px;
  margin-inline: -8px;
  border-radius: 6px;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

/* 分野の色の丸（飾り） */
.pp-areas__link::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--area);
}

.pp-areas__link:hover .pp-areas__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pp-areas__link[aria-current="page"] {
  background-color: var(--area-tint);
  box-shadow: inset 4px 0 0 var(--area);
  font-weight: 700;
}

.pp-areas__all {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.pp-areas__all a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  color: var(--color-black);
  text-underline-offset: 4px;
}

.pp-areas__all a::after {
  content: " →" / "";
  white-space: pre;
}

/* 「目次」ボタン（スマホ）：施策一覧を通り過ぎたら右下に出る。押すと施策一覧と8つの分野の窓が開く */
.pp-jump {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px 0 16px;
  border: 2px solid var(--color-white);
  border-radius: 999px;
  background-color: var(--color-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  color: var(--color-white);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.pp-jump.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

/* 目次の印（3本線） */
.pp-jump::before {
  content: "";
  width: 16px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

.pp-jump:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

.pp-jump-dialog {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  max-height: 85dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background-color: var(--color-white);
  color: var(--color-black);
  overscroll-behavior: contain;
}

.pp-jump-dialog::backdrop {
  background-color: rgba(0, 0, 0, .45);
}

.pp-jump-dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border-bottom: 1px solid var(--pp-line);
  background-color: var(--color-white);
}

.pp-jump-dialog__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.pp-jump-dialog__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-width: var(--tap-size);
  min-height: var(--tap-size);
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-black);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.pp-jump-dialog__close::before {
  content: "×" / "";
  font-size: 22px;
  line-height: 1;
}

.pp-jump-dialog__body {
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.pp-jump-dialog .pp-toc {
  margin: 0;
  padding: 0;
  background: none;
}

.pp-jump-dialog .pp-areas {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-line);
}

.pp-jump-dialog .pp-toc__link.is-current {
  background-color: var(--area-tint);
  box-shadow: inset 4px 0 0 var(--area);
}

.pp-jump-dialog .pp-toc__link {
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 6px;
}

html:has(.pp-jump-dialog[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pp-jump,
  .pp-jump.is-shown {
    transition: none;
  }
}

/* ---------------------------------------------------------
   5. 番号の丸（政策・具体策）。数字は aria-hidden（順番は見出し・<ol> で伝わる）
   --------------------------------------------------------- */
.pp-toc__num,
.pp-policy__num,
.pv-area__dnum,
.pfig__num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--area);
  color: var(--color-white);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
}

.pp-toc__num,
.pv-area__dnum {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

/* ---------------------------------------------------------
   6. 政策（方向性）ごとのブロック
   --------------------------------------------------------- */
.pp-policy {
  margin-top: 80px;
  scroll-margin-top: 24px;
}

@media (max-width: 1199px) {
  .pp-policy,
  .pv-area {
    scroll-margin-top: calc(var(--sp-header-h) + 16px);   /* 固定ヘッダーに隠れないように */
  }
}

.pp-policy__title {
  text-wrap: pretty;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--area);
  color: var(--color-black);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pp-policy__num {
  width: 48px;
  height: 48px;
  font-size: 26px;
}

.pp-policy__text {
  padding-top: 4px;
}

.pp-block {
  margin-top: 24px;
}

.pp-block + .pp-block {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px dashed var(--pp-gray);
}

.pp-block__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

/* 施策の線画：SP は絵が上・文が下、768px 以上は文が左・絵が右 */
.pp-block__intro {
  display: grid;
  gap: 12px;
}

.pp-block__art {
  order: -1;
  width: min(100%, 220px);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .pp-block__intro {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 32px;
  }

  .pp-block__art {
    order: 0;
    width: 100%;
  }
}

/* 線は黒、差し色は分野の色、面は分野の色の薄い地。地面の線は動画のテロップのマーカーと同じ考え方 */
.pp-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pp-art .k,
.pp-art .kw,
.pp-art .a,
.pp-art .aw,
.pp-art .a2,
.pp-art .m,
.pp-art .m2 {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp-art .k  { fill: none; stroke: var(--color-black, #212121); stroke-width: 2.2; }
.pp-art .kw { fill: #fff; stroke: var(--color-black, #212121); stroke-width: 2.2; }
.pp-art .a  { fill: none; stroke: var(--area); stroke-width: 2.2; }
.pp-art .aw { fill: color-mix(in srgb, var(--area) 30%, #fff); stroke: var(--color-black, #212121); stroke-width: 2.2; }
.pp-art .a2 { fill: none; stroke: var(--area); stroke-width: 2; stroke-dasharray: 2 5; }
.pp-art .kf { fill: var(--color-black, #212121); }
.pp-art .af { fill: var(--area); }
.pp-art .t  { fill: var(--area-tint); }
.pp-art .m  { fill: none; stroke: var(--area); stroke-width: 8; opacity: .3; }
.pp-art .m2 { fill: none; stroke: var(--area); stroke-width: 4; opacity: .3; }

/* 「現状 なぜ必要か」「目指す福岡 どう変わるか」 */
.pp-sec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--area);
  line-height: 1.4;
}

.pp-sec__main {
  font-size: 22px;
  font-weight: 700;
}

.pp-sec__sub {
  color: var(--pp-gray);
  font-size: 16px;
  font-weight: 500;
}

/* 現状：薄い地に数字の図と本文 */
.pp-now {
  margin: 32px calc(-1 * var(--col-main-pad-x)) 0;
  padding: 28px var(--col-main-pad-x);
  background-color: var(--area-tint);
}

.pp-now__heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.pp-now__text {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
}

.pp-source {
  margin: 8px 0 0;
  color: var(--pp-gray);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 目指す福岡 */
.pp-goal {
  margin-top: 40px;
}

.pp-goal__text {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
}

.pp-measures {
  margin-top: 24px;
}

.pp-measure + .pp-measure {
  margin-top: 40px;
}

.pp-measure__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--area);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
}

/* 具体策の番号「1-1」：読み上げる文字なので、白地に黒の文字＋分野の色の枠
   （分野の色の面に小さい文字を置かない。DESIGN.md のコントラストの決まり） */
.pp-measure__num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 32px;
  margin-top: 2px;
  padding: 0 10px;
  border: 2px solid var(--area);
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.pp-measure__text {
  padding-top: 2px;
}

/* 具体策の説明（題のすぐ下の1文） */
.pp-measure__desc {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.85;
}

/* 具体策 a〜e：左に灰色の縦線（政策集と同じ） */
.pp-items {
  margin: 16px 0 0 6px;
  padding-left: 14px;
  border-left: 2px solid var(--pp-line);
}

.pp-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 8px;
}

.pp-item + .pp-item {
  margin-top: 16px;
}

/* ①〜④：丸数字は和文の書体にしかないので、本文の書体のまま */
.pp-item__letter {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.pp-item__body {
  font-size: 16px;
  line-height: 1.75;
}

.pp-item__lead {
  display: block;
  font-weight: 700;
}

.pp-item__detail {
  display: block;
}

/* 図（地区の表など）は文字の列に合わせる */
.pp-item > .pfig-wards,
.pp-item > .pfig {
  grid-column: 2;
}

/* 暮らしはこう変わる：施策の「答え」なので、枠で囲んだカードにする。
   「暮らしはこう変わる」は枠の上辺に載せた札（本文の見出しと同じ左の縦線にすると、見出しと続けて読まれてしまう）。
   札の白い文字は小さいので、地は分野の色の濃い版（--area-ink・白文字 4.6:1 以上） */
.pp-kurashi {
  position: relative;
  margin-top: 32px;
  padding: 26px 16px 16px;
  border: 2px solid var(--area);
  border-radius: 12px;
  background-color: var(--color-white);
}

.pp-kurashi__label {
  position: absolute;
  top: 0;
  left: 14px;
  margin: 0;
  padding: 2px 12px 3px;
  border-radius: 999px;
  background-color: var(--area-ink, var(--color-black));
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  transform: translateY(-50%);
}

.pp-kurashi__text {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   7. 現状の数字（.pstat）
   --------------------------------------------------------- */
.pstat {
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.pstat__caption {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.pstat__group + .pstat__group {
  margin-top: 20px;
}

.pstat__sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
  margin: 0 0 8px;
  color: var(--pp-gray);
  font-size: 16px;
  line-height: 1.6;
}

.pstat__aside {
  color: var(--color-black);
  font-weight: 700;
}

.pstat__after,
.pstat__note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.pstat__note {
  color: var(--pp-gray);
}

/* 大きく出す数字 */
.pstat__num {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.pstat__arrow {
  font-size: .8em;
}

/* カード（横に並ぶ数字） */
.pstat-cards,
.pstat-big {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
  gap: 12px;
}

.pstat-cards__item,
.pstat-big__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  border-top: 4px solid var(--pp-line);
  background-color: #fafafa;
}

/* 横に並んだカードどうしで、ラベルが 1 行・2 行と違っても数字の高さをそろえる
   （ラベルの段と数字の段を、親のグリッドと共有する） */
.pstat-cards__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 2px;
}

/* 値が2つのカード（「7年連続」「政令市1位」など）がある組は 3 段にする
   （2 段のままだと、3 つ目が 2 段目に重なる）。同じ組のカードはそろえて 3 段に */
.pstat-cards:has(> .pstat-cards__item > :nth-child(3)) > .pstat-cards__item {
  grid-row: span 3;
}

.pstat-cards__item.is-hl,
.pstat-big__item {
  border-top-color: var(--area);
}

.pstat-cards__label,
.pstat-cards__note,
.pstat-big__note {
  font-size: 16px;
  line-height: 1.5;
}

.pstat-cards__label {
  font-weight: 700;
}

.pstat-cards__note,
.pstat-big__note {
  color: var(--pp-gray);
}

.pstat-big__value .pstat__num {
  font-size: 48px;
}

/* 1枚のカードに値が2つ（「7年連続」「政令市1位」など） */
.pstat-cards__value--more {
  margin-top: 2px;
}

/* カードとカードのあいだの「33％上昇」：矢印として置く（枠も地もなし）。
   スマホは縦に並べて下向き、広い画面は横に並べて右向き */
.pstat-cards:has(> .is-arrow) {
  grid-template-columns: 1fr;
}

.pstat-cards__item.is-arrow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 22px;
  border-top: 0;
  background-color: transparent;
  text-align: center;
}

.pstat-cards__item.is-arrow::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -11px;
  border-top: 14px solid var(--area);
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
}

@media (min-width: 600px) {
  .pstat-cards:has(> .is-arrow) {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }

  .pstat-cards__item.is-arrow {
    padding: 4px 30px 4px 4px;
  }

  .pstat-cards__item.is-arrow::after {
    top: 50%;
    right: 4px;
    bottom: auto;
    left: auto;
    margin: -11px 0 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 14px solid var(--area);
    border-right: 0;
  }
}

/* 推移だけの行（「2017年度 138 → 2025年度 130」） */
.pstat-flow {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* 横棒 */
.pstat__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.5;
}

.pstat__legend-mark {
  width: 2px;
  height: 16px;
  background-color: var(--color-black);
}

.pstat-bars__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "track value";
  align-items: center;
  gap: 2px 12px;
}

.pstat-bars__item + .pstat-bars__item {
  margin-top: 12px;
}

.pstat-bars__label {
  grid-area: label;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.pstat-bars__sub {
  margin-left: .75em;
  color: var(--pp-gray);
  font-weight: 400;
}

.pstat-bars__value {
  grid-area: value;
  font-size: 16px;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

.pstat-bars__value .pstat__num {
  font-size: 24px;
}

.pstat-bars__extra {
  display: block;
  color: var(--pp-gray);
  font-size: 16px;
}

.pstat-bars__track {
  grid-area: track;
  position: relative;
  height: 14px;
}

/* 目盛りの全体（100％など）がある棒だけ、全長を灰色で見せる */
.pstat-bars__track.is-full {
  background-color: #f0f0f0;
}

.pstat-bars__fill {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  background-color: #b3b3b3;
  transform-origin: left center;
}

.is-hl > .pstat-bars__track .pstat-bars__fill {
  background-color: var(--area);
}

.is-dark > .pstat-bars__track .pstat-bars__fill {
  background-color: var(--color-black);
}

.pstat-bars__target {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--t) * 100%);
  width: 2px;
  background-color: var(--color-black);
}

/* ラベルと値の組（kv）・行（rows）・条件（check） */
.pstat-kv div,
.pstat-check div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pp-line);
}

.pstat-kv dt,
.pstat-check dt {
  font-size: 16px;
  line-height: 1.6;
}

.pstat-kv dd,
.pstat-check dd {
  margin: 0 0 0 auto;
  font-size: 16px;
  line-height: 1.3;
}

.pstat-check dd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

/* 満たす見込みの項目にだけチェックの印（線で描く） */
.pstat-check .is-hl dd::before {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border-right: 2.5px solid var(--area);
  border-bottom: 2.5px solid var(--area);
  transform: rotate(45deg);
}

.pstat-rows div {
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-line);
}

.pstat-rows dt {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.pstat-rows dd {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

/* 区ごとのタイル */
.pstat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.pstat-tiles__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border: 2px solid var(--pp-line);
  font-size: 16px;
  line-height: 1.4;
}

.pstat-tiles__item.is-hl {
  border-color: var(--area);
  background-color: var(--area-tint);
}

.pstat-tiles__value .pstat__num {
  font-size: 26px;
}

/* 表（○×） */
.pstat-table__wrap {
  overflow-x: auto;
}

.pstat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.pstat-table th,
.pstat-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--pp-line);
  text-align: center;
}

.pstat-table th[scope="row"] {
  text-align: left;
}

.pstat-table td {
  font-size: 20px;
  font-weight: 700;
}

/* ---------------------------------------------------------
   8. 具体策に添える図（カード・区ごとの表）
   --------------------------------------------------------- */
.pfig {
  margin: 20px 0 0;
}

.pfig__caption {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.pfig__lead {
  margin: -4px 0 10px;
  color: var(--pp-gray);
  font-size: 16px;
  line-height: 1.6;
}

.pfig__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  gap: 10px;
}

.pfig__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--pp-line);
  border-top: 4px solid var(--area);
  font-size: 16px;
  line-height: 1.6;
}

.pfig__num {
  width: 28px;
  height: 28px;
  font-size: 18px;
}

.pfig__title {
  font-weight: 700;
}

.pfig-wards {
  margin: 12px 0 0;
}

.pfig-wards div {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-line);
  font-size: 16px;
  line-height: 1.6;
}

.pfig-wards dt {
  font-weight: 700;
}

.pfig-wards dd {
  margin: 0;
}

/* ---------------------------------------------------------
   8-2. 政策集 v6 で増えた形
   （現状の小見出し・値のない箇条書き・番号のない具体策・表・流れ図・ほかの分野への参照）
   --------------------------------------------------------- */
/* 現状の中の小見出し（「一時預かり」「産後ケア」など） */
.pp-now__sub {
  margin: 24px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--area);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.pp-now__sub + .pp-now__text {
  margin-top: 6px;
}

/* 現状の箇条書き（数字のない行）。点は飾りなので CSS で描く */
.pstat-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pstat-lines li {
  position: relative;
  padding: 8px 0 8px 16px;
  border-bottom: 1px solid var(--pp-line);
  font-size: 16px;
  line-height: 1.6;
}

.pstat-lines li::before,
.pp-item__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--area);
}

.pstat-lines li::before {
  top: calc(8px + 0.8em - 3px);
}

/* 「×」「✓」や順位の付いた行。印は飾りで、読み上げは文だけ */
.pstat-marks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pstat-marks__item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-line);
  font-size: 16px;
  line-height: 1.6;
}

.pstat-marks__mark {
  flex: none;
  width: 1.6em;
  color: var(--area-ink, var(--area));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* 1つの組の中で、表・箇条書き・推移の行が入れ替わるところ */
.pstat__group > :is(.pstat-kv, .pstat-lines) + :is(.pstat-kv, .pstat-lines, .pstat-flow),
.pstat__group > .pstat-flow + :is(.pstat-kv, .pstat-lines) {
  margin-top: 8px;
}

/* 番号のない具体策（【ハード・サービス面】と箇条書き） */
.pp-item--group {
  display: block;
}

.pp-item__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.pp-item__list li {
  position: relative;
  padding-left: 16px;
}

.pp-item__list li + li {
  margin-top: 6px;
}

.pp-item__list li::before {
  top: calc(0.875em - 3px);
}

/* 具体策の中の補足（【共同調達の導入順序】など） */
.pp-item__sub {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--pp-line);
}

.pp-item__sub-head {
  display: block;
  font-weight: 700;
}

.pp-item__sub-line {
  display: block;
}

/* 比べる表（今の制度｜これから） */
.pfig-table__wrap {
  overflow-x: auto;
}

.pfig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
}

.pfig-table th,
.pfig-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--pp-line);
  text-align: left;
  vertical-align: top;
}

.pfig-table thead th {
  border-bottom: 2px solid var(--area);
}

.pfig-table th[scope="row"] {
  padding-left: 0;
  white-space: nowrap;
}

.pfig__note {
  margin: 8px 0 0;
  color: var(--pp-gray);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 流れ図（申請 → 審査 → …）。下向きの矢印は飾り */
.pfig-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfig-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 16px;
  padding: 12px 14px;
  border: 1px solid var(--pp-line);
  border-left: 4px solid var(--area);
  font-size: 16px;
  line-height: 1.6;
}

.pfig-flow__step + .pfig-flow__step {
  margin-top: 22px;
}

.pfig-flow__step + .pfig-flow__step::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  border-top: 10px solid var(--area);
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  transform: translateX(-50%);
}

.pfig-flow__label {
  font-weight: 700;
}

@media (min-width: 600px) {
  .pfig-flow__step {
    grid-template-columns: 7em 1fr;
  }
}

/* ほかの分野の施策への参照 */
.pp-ref {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.pp-ref a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* リンクで飛んできたときに、固定ヘッダーに隠れないように */
.pp-measure[id] {
  scroll-margin-top: 24px;
}

@media (max-width: 1199px) {
  .pp-measure[id] {
    scroll-margin-top: calc(var(--sp-header-h) + 16px);
  }
}

/* 暮らしはこう変わる：文が2つあるとき */
.pp-kurashi__text + .pp-kurashi__text {
  margin-top: 8px;
}

/* ---------------------------------------------------------
   9. 前後の分野・全体像へ
   --------------------------------------------------------- */
.pp-pager {
  margin-top: 80px;
}

.pp-pager__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pp-pager__all {
  grid-column: 1 / -1;
}

.pp-pager__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  height: 100%;
  padding: 10px 16px;
  border: 2px solid var(--color-black);
  border-radius: 8px;
  color: var(--color-black);
  line-height: 1.4;
  text-decoration: none;
}

.pp-pager__link:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.pp-pager__link--next {
  align-items: flex-end;
  text-align: right;
}

/* 先頭の分野（前がない）は「次」を右の列に置く */
.pp-pager__list li:first-child:has(.pp-pager__link--next) {
  grid-column: 2;
}

.pp-pager__dir {
  font-size: 16px;
}

.pp-pager__link--prev .pp-pager__dir::before {
  content: "← " / "";
}

.pp-pager__link--next .pp-pager__dir::after {
  content: " →" / "";
}

.pp-pager__name {
  font-size: 18px;
  font-weight: 700;
}

.pp-pager__link--all {
  align-items: center;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
}

/* ---------------------------------------------------------
   10. 全体像ページ（/policy/）
   --------------------------------------------------------- */
.pv-head__title {
  margin: 0;
  color: var(--color-black);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.pv-head__count {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 700;
}

/* はじめに（候補者のメッセージ）。SP は写真を上に 4:5 で、PC は左に写真・右に文 */
.pv-intro {
  margin-top: 40px;
}

.pv-intro__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #eaeeef;   /* 写真の背景と同じ色。読み込み前の面 */
}

.pv-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;   /* 顔から胸元までを残す */
}

.pv-intro__body {
  margin-top: 32px;
}

.pv-intro__label {
  font-family: var(--font-ja);
}

.pv-intro__title {
  margin: 0;
  color: var(--color-black);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  word-break: auto-phrase;
}

.pv-intro__hl {
  color: var(--color-primary-dark);
}

.pv-intro__text {
  margin-top: 24px;
}

.pv-intro__text p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  word-break: auto-phrase;   /* 文節で折り返す（「です。」だけが次の行に残らないように） */
}

.pv-intro__text p + p {
  margin-top: 1.25em;
}

/* スライドで改行していた文の区切り */
.pv-intro__s {
  display: block;
}

.pv-intro__closing {
  margin: 32px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  word-break: auto-phrase;
}

/* 署名の画像。トップの .greeting__sign と同じ大きさ */
.pv-intro__name {
  margin: 24px 0 0;
  text-align: right;
}

.pv-intro__name img {
  display: inline-block;
  width: 184px;
  height: 34px;
}

.pv-area {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 4px solid var(--area);
  scroll-margin-top: 24px;
}

.pv-area__title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 12px;
  margin: 0;
  line-height: 1.3;
}

/* トップの .policy__num と同じ書体の番号。分野の色・56px（大きい文字なので 3:1 以上で足りる） */
.pv-area__num {
  grid-row: 1 / span 2;
  color: var(--area);
  font-family: "Petit Formal Script", cursive;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}

.pv-area__en {
  margin-bottom: 4px;
}

.pv-area__link {
  color: var(--color-black);
  font-size: 30px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--area);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

.pv-area__link:hover {
  text-decoration-thickness: 5px;
}

.pv-area__headline {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.pv-area__lead {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.9;
}

.pv-area__dirs {
  margin-top: 20px;
}

.pv-area__dirs li + li {
  margin-top: 6px;
}

.pv-area__dirs a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap-size);
  padding: 4px 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

.pv-area__dirs a > span:last-child {
  padding-top: 5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pv-area__dirs .pv-area__dnum {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.pv-area__more {
  margin: 24px 0 0;
}

/* ---------------------------------------------------------
   12. SP の文字の大きさ
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .pp-head__name,
  .pv-head__title {
    font-size: 32px;
  }

  .pv-area__link {
    font-size: 24px;   /* 「医療・介護・福祉」「ジェンダー・人権」が1行に収まる大きさ */
  }

  .pp-head__headline {
    font-size: 22px;
  }

  .pp-policy__title {
    font-size: 22px;
  }
}

@media (max-width: 374px) {
  .pstat__num {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------
   12.5 ヘッダー（政策ページ用）
   政策ページはトップより一段深いので、ヘッダーにはトップのナビ（ごあいさつ・
   プロフィールなど）を置かない。氏名（トップへのリンク）と「政策」（全体像への
   リンク）、「トップページへ」だけにして、ここが政策の階層だとわかるようにする。
   SP はトップのヘッダーと同じ 80px 幅のマスを2つ並べる。PC は 13. で横一列にする
   --------------------------------------------------------- */
.ui-section,
.ui-home {
  position: relative;
  z-index: 1;                          /* ノイズ（.ui::before）より前面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  border-left: 1px solid rgba(255, 255, 255, .5);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s;
}

/* いま開いているのが全体像のページのとき */
.ui-section[aria-current="page"],
.ui-section:hover,
.ui-section:focus-visible,
.ui-home:hover,
.ui-home:focus-visible {
  background-color: rgba(255, 255, 255, .15);
}

.ui-section:hover .ui-section__ja,
.ui-section:focus-visible .ui-section__ja,
.ui-home:hover .ui-home__label,
.ui-home:focus-visible .ui-home__label {
  text-decoration: underline;
}

/* フォーカスリングをリンクの内側に描く（トップのナビと同じ） */
.ui-section:focus-visible,
.ui-home:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--color-black);
}

@media (max-width: 1199px) {
  .ui-section,
  .ui-home {
    gap: 6px;
    width: 80px;
    min-height: var(--sp-header-h);
  }

  /* メニューがないので、JS が動かなくてもヘッダーは上に固定したままでよい */
  html:not(.js) .ui {
    position: fixed;
    flex-wrap: nowrap;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .1);
  }
}

/* ---------------------------------------------------------
   13. PC（1200px〜）：写真の列と右の列をなくし、本文を広く使う
   政策は量が多く、トップと同じ細い中央カラムでは読みにくい。政策ページだけ
   ヘッダーを上の横一列（画面に追従）にし、その下を本文が幅いっぱいに使う。
   左から右へ読む流れの先頭に「氏名｜政策」が来るようにする（右の縦長の列は使わない）。
   本文の中は、分野ページが「施策一覧（画面に追従）｜政策」、
   全体像が「分野名と見出し｜前文と施策一覧」の2列。中身の幅は 1180px まで
   --------------------------------------------------------- */
@media (min-width: 1200px) {
  .layout--wide {
    --pc-header-h: 72px;
  }

  .layout.layout--wide {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  .layout--wide .main,
  .layout--wide .footer {
    grid-column: 1;
  }

  .layout--wide .main {
    grid-row: 2;
  }

  .layout--wide .footer {
    grid-row: 3;
  }

  /* --- 上の帯：左に「氏名｜政策」、右に「トップページへ」 --- */
  .layout--wide .ui {
    grid-column: 1;
    grid-row: 1;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: var(--pc-header-h);
    padding-left: clamp(24px, 3vw, 48px);
    overflow: visible;
    background-image: linear-gradient(90deg, var(--color-ui-gradient-start), var(--color-ui-gradient-end));
    box-shadow: 0 4px 5px rgba(0, 0, 0, .1);
  }

  .layout--wide .ui__name {
    margin-right: 28px;
  }

  .layout--wide .ui__name-img--sp {
    display: block;
    width: 200px;
    height: auto;
  }

  .layout--wide .ui-section {
    padding-inline: 28px;
    font-size: 20px;
  }

  .layout--wide .ui-home {
    margin-left: auto;
    padding-inline: clamp(24px, 3vw, 48px);
  }

  .layout--wide .ui-home br {
    display: none;
  }

  .layout--wide .main {
    --col-main-pad-x: clamp(40px, 4.5vw, 80px);
    padding-top: 32px;
    padding-bottom: 120px;
    box-shadow: none;
  }

  .layout--wide .breadcrumb,
  .pp-head__body,
  .pp-body,
  .pp-pager,
  .pv {
    max-width: 1180px;
    margin-inline: auto;
  }

  /* --- 分野ページの扉：色の帯は本文の幅いっぱい、その下に見出し｜前文 --- */
  .pp-head {
    margin-bottom: 0;
  }

  .pp-head__face {
    min-height: 320px;
    margin-bottom: 56px;
    /* 面は幅いっぱい。中の英字は、下の本文（1180px まで）の左端に揃える */
    padding: 40px var(--col-main-pad-x) 28px;
    padding-inline: max(var(--col-main-pad-x), calc((100% + 2 * var(--col-main-pad-x) - 1180px) / 2));
  }

  .pp-head__bg {
    font-size: clamp(56px, 9cqi, 168px);
    line-height: .95;
  }

  .pp-head__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  .pp-head__name {
    font-size: 56px;
  }

  .pp-head__suffix {
    font-size: 28px;
  }

  /* 見出しは政策集の改行どおり2行で見せる。いちばん長い行（14字）が列に収まる大きさにする */
  .pp-head__text {
    container-type: inline-size;
  }

  .pp-head__headline {
    margin-top: 32px;
    font-size: clamp(22px, calc(100cqi / 14.5), 32px);
    line-height: 1.55;
  }

  .pp-head__headline .pp-line {
    display: block;
    width: fit-content;
  }

  .pp-intro {
    margin-top: 0;
    padding-top: 6px;
  }

  .pp-intro p {
    font-size: 17px;
    line-height: 2.05;
  }

  .pp-intro strong {
    font-size: 20px;
  }

  /* --- 施策一覧｜政策 --- */
  .pp-body {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: clamp(40px, 4.5vw, 80px);
    align-items: start;
    margin-top: 88px;
  }

  /* 左の列（施策一覧＋8つの分野）は画面に追従させる。
     施策一覧では、いま読んでいる政策に印を付ける（policy-motion.js の .is-current）。
     画面の高さが足りないときは施策一覧の中だけをスクロールし、8つの分野はいつも見えるようにする */
  .pp-side {
    position: sticky;
    top: calc(var(--pc-header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - var(--pc-header-h) - 48px);
  }

  .pp-toc {
    flex: 0 1 auto;
    min-height: 160px;
    margin: 0;
    padding: 24px 16px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 施策一覧がスクロールするときは、下端に薄い影を出して続きがあることを示す
     （覆いは中身と一緒に動くので、いちばん下まで行くと影が消える） */
  .pp-toc {
    background:
      linear-gradient(to top, var(--area-tint) 50%, transparent) 0 100% / 100% 32px no-repeat local,
      linear-gradient(to top, rgba(0, 0, 0, .14), transparent) 0 100% / 100% 14px no-repeat scroll,
      var(--area-tint);
  }

  .pp-sidepager {
    display: block;
    flex: none;
  }

  .pp-sidepager__list {
    border: 1px solid var(--pp-line);
  }

  .pp-sidepager__list li + li {
    border-top: 1px solid var(--pp-line);
  }

  .pp-sidepager__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px 10px 20px;
    color: var(--color-black);
    line-height: 1.4;
    text-decoration: none;
  }

  .pp-sidepager__link:hover {
    background-color: var(--area-tint);
  }

  .pp-sidepager__link:hover .pp-sidepager__name {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .pp-sidepager__dir {
    flex-shrink: 0;
    color: var(--pp-gray);
    font-size: 15px;
  }

  .pp-sidepager__name {
    font-size: 16px;
    font-weight: 700;
  }

  .pp-sidepager__link--prev .pp-sidepager__dir::before {
    content: "← " / "";
  }

  .pp-sidepager__link--next .pp-sidepager__name::after,
  .pp-sidepager__link--all .pp-sidepager__name::after {
    content: " →" / "";
  }

  /* PC は左の列があるので「目次」ボタンは出さない */
  .pp-jump,
  .pp-jump-dialog {
    display: none;
  }

  .pp-toc__heading {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .pp-toc__item + .pp-toc__item {
    margin-top: 4px;
  }

  .pp-toc__link {
    gap: 10px;
    margin-inline: -8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.55;
  }

  .pp-toc__num {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .pp-toc__text {
    padding-top: 3px;
  }

  .pp-toc__link.is-current {
    background-color: var(--color-white);
    box-shadow: inset 4px 0 0 var(--area);
  }

  .pp-policies {
    max-width: 840px;
  }

  .pp-policy {
    scroll-margin-top: calc(var(--pc-header-h) + 32px);
  }

  .pp-policy:first-child {
    margin-top: 0;
  }

  .pp-policy + .pp-policy {
    margin-top: 120px;
  }

  .pp-policy__title {
    gap: 18px;
    font-size: 30px;
    line-height: 1.45;
  }

  .pp-policy__num {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }

  .pp-policy__text {
    padding-top: 6px;
  }

  .pp-block__lead {
    font-size: 19px;
  }

  /* 薄い地の箱は、SP のように画面の端まで伸ばさず列の中に置く */
  .pp-now {
    margin-inline: 0;
    padding: 32px 36px;
  }

  .pp-now__text,
  .pp-measure__desc,
  .pp-item__body {
    font-size: 17px;
  }

  .pp-goal {
    margin-top: 56px;
  }

  .pp-goal__text {
    font-size: 24px;
  }

  .pp-measures {
    margin-top: 32px;
  }

  .pp-measure + .pp-measure {
    margin-top: 48px;
  }

  .pp-measure__title {
    font-size: 21px;
  }

  .pp-items {
    margin-left: 8px;
    padding-left: 20px;
  }

  .pp-kurashi {
    padding: 28px 24px 20px;
  }

  .pp-kurashi__label {
    left: 20px;
  }

  .pp-kurashi__text {
    font-size: 18px;
  }

  /* --- 前の分野｜全体像｜次の分野 を1行に --- */
  .pp-pager {
    margin-top: 120px;
  }

  .pp-pager__list {
    grid-template-columns: 1fr minmax(0, 1fr) 1fr;
    align-items: stretch;
  }

  .pp-pager__list li:has(.pp-pager__link--prev) {
    grid-column: 1;
    grid-row: 1;
  }

  .pp-pager__list li:has(.pp-pager__link--next),
  .pp-pager__list li:first-child:has(.pp-pager__link--next) {
    grid-column: 3;
    grid-row: 1;
  }

  .pp-pager__all {
    grid-column: 2;
    grid-row: 1;
  }

  .pp-pager__link {
    min-height: 80px;
    padding: 12px 24px;
  }

  .pp-pager__link--all {
    border-radius: 8px;
  }

  /* --- 全体像ページ --- */
  .pv-head__title {
    font-size: 56px;
  }

  .pv-intro {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    column-gap: 64px;
    align-items: center;
    margin-top: 56px;
  }

  .pv-intro__photo {
    aspect-ratio: 2 / 3;
  }

  .pv-intro__body {
    margin-top: 0;
  }

  .pv-intro__title {
    font-size: 34px;
  }

  .pv-intro__text {
    margin-top: 32px;
  }

  .pv-intro__text p {
    font-size: 17px;
  }

  .pv-intro__closing {
    font-size: 24px;
  }

  .pv .pillars {
    margin-top: 48px;
  }

  .pv .pillars__count-num {
    font-size: 88px;
  }

  /* PC の全体像では、柱を 4×2 のカードにする。上が分野の色の面（番号・英字・分野名）、下に見出しと矢印 */
  .pv .pillars__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .pv .pillars__link {
    align-items: stretch;
    gap: 0;
    height: 100%;
    border: 1px solid #dcdcdc;
    background-color: var(--color-white);
    transition: border-color .2s, box-shadow .2s;
  }

  .pv .pillars__link:hover {
    border-color: var(--area);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  }

  .pv .pillars__bar {
    top: 0;
    bottom: auto;
    height: 176px;
    background-color: var(--area-ink, var(--area));   /* 番号・英字（白の小さな文字）が載るため */
  }

  .pv .pillars__num,
  .pv .pillars__en {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 24px;
    color: var(--color-white);
  }

  .pv .pillars__num {
    padding-top: 22px;
    font-size: 18px;
  }

  .pv .pillars__en {
    margin-top: 6px;
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }

  .pv .pillars__name {
    align-items: flex-end;
    min-height: 0;
    height: 112px;
    padding: 0 24px 22px;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    writing-mode: horizontal-tb;
  }

  /* 見出しの行は pptx どおり。カードが狭いときは文節で折り返す */
  .pv .pillars__lead {
    display: block;
    flex: 1;
    padding: 20px 20px 0 24px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    word-break: auto-phrase;
  }

  .pv .pillars__lead > span {
    display: block;
  }

  .pv .pillars__link::after {
    content: "→" / "";
    position: static;
    display: block;
    padding: 12px 24px 20px;
    color: var(--area);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
  }

  .pv-area {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
    margin-top: 104px;
    padding-top: 40px;
    scroll-margin-top: calc(var(--pc-header-h) + 32px);
  }

  .pv-area__num {
    font-size: 72px;
  }

  .pv-area__link {
    font-size: 36px;
  }

  .pv-area__headline {
    margin-top: 28px;
    font-size: 24px;
  }

  .pv-area__lead {
    margin-top: 0;
    font-size: 17px;
    line-height: 2;
  }

  .pv-area__dirs {
    margin-top: 28px;
  }

  .pv-area__more {
    margin-top: 32px;
  }
}

/* ---------------------------------------------------------
   14. 動き（policy-motion.js が <html> に .motion を付けたときだけ）
   transform と opacity だけを動かす。.is-in が付いたら定位置へ
   --------------------------------------------------------- */
.motion [data-reveal]:not([data-reveal="pillar"]) {
  transition:
    opacity .7s cubic-bezier(.2, .7, .2, 1),
    transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 110ms);
}

.motion [data-reveal="line"]:not(.is-in) {
  opacity: 0;
  transform: translateY(.6em);
}

.motion [data-reveal="fade"]:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}

/* 色の面：面はすぐ見せ（LCP を遅らせない）、中の英字だけ下から滑り込む */
.motion [data-reveal="face"] {
  transition: none;
}

.motion [data-reveal="face"] .pp-head__bg {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.motion [data-reveal="face"]:not(.is-in) .pp-head__bg {
  transform: translateY(.45em);
}

/* 棒・柱：根元から伸びる */
.motion [data-reveal="bar"] {
  transition-duration: 1s;
}

.motion [data-reveal="bar"]:not(.is-in) {
  transform: scaleX(0);
}

/* 英字ラベルの線：左から引く */
.motion [data-reveal="rule"]::after {
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) .2s;
}

.motion [data-reveal="rule"]:not(.is-in)::after {
  transform: scaleX(0);
}

/* 見出しの最後の行の下線：行が出たあとに引く */
.motion .pp-head__headline .pp-line:last-child::after {
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 110ms + .5s);
}

.motion .pp-head__headline .pp-line:last-child:not(.is-in)::after {
  transform: scaleX(0);
}

/* 線画：線が描かれていく（SVG 側の線に pathLength="1" を付けておく） */
.pp-head__art [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.motion .pp-head__face .pp-head__art [pathLength] {
  transition: stroke-dashoffset 1.6s cubic-bezier(.3, .6, .2, 1) .3s;
}

.motion .pp-head__face:not(.is-in) .pp-head__art [pathLength] {
  stroke-dashoffset: 1;
}

/* 施策の線画：線が描かれ、面と地面のマーカーがあとから出る */
/* 線は class で選ぶ（[pathLength] で選ぶと、Chrome で .is-in が付いても描き直されない） */
.motion [data-reveal="art"] :is(.k, .a, .kw, .aw) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 1.4s cubic-bezier(.3, .6, .2, 1) .1s,
    fill-opacity .6s ease .9s;
}

.motion [data-reveal="art"] .t,
.motion [data-reveal="art"] .m,
.motion [data-reveal="art"] .m2,
.motion [data-reveal="art"] .a2,
.motion [data-reveal="art"] .kf,
.motion [data-reveal="art"] .af {
  transition: opacity .6s ease .7s;
}

@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal="art"]:not(.is-in) :is(.k, .a, .kw, .aw) {
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }

  .motion [data-reveal="art"]:not(.is-in) :is(.t, .m, .m2, .a2, .kf, .af) {
    opacity: 0;
  }
}

/* 「視差効果を減らす」：JS 側でも .motion を付けないが、念のため止める */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion [data-reveal]::after,
  .motion .pp-head__headline .pp-line::after,
  .motion .pp-head__art [pathLength],
  .motion [data-reveal="art"] :is(.k, .a, .kw, .aw),
  .motion .pp-head__bg {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important;
  }
}