@charset "UTF-8";

/* =========================================================
   農業遺産認定地域 詳細ページ（たたき台）
   Figma: 農業遺産認定地域_詳細 (466:12394) の本文部分
   ※ヘッダー・フッターは対象外
   ========================================================= */

/* ---------- デザイントークン（Figma変数と対応） ---------- */
:root {
  --green: #006124;        /* Figma: グリーン */
  --green-base: #00913a;   /* Figma: グリーンベース */
  /* ヒーローの英字ラベル（AREA / Support case など）の左に付く2色のバー。
     右半分は全ページ共通で緑。左半分だけページ種別で変わる:
       認定地域 #ffd900（黄・既定）／連携事例・解説ページ #29abe2（水色）
     左半分は .page-hero--case / --heritage が --mark-1 を上書きして切り替える */
  --mark-1: #ffd900;
  --mark-2: #00a767;
  --black: #333;           /* Figma: 黒 */
  --gray-2: #f5f5f5;       /* Figma: 色-2 */
  --white: #fff;           /* Figma: ホワイト */
  --border: rgba(51, 51, 51, 0.5);

  /* Figmaは見出しと本文で書体を分けている。
     ヒーローの緑帯（タイトル・企業名・カテゴリ）とヘッダー/フッターのメニューが Zen Kaku Gothic New、
     パンくず・活動内容・声・基本情報・Information・ボタンなどの本文は Hiragino Kaku Gothic。
     ただし Hiragino は macOS 標準でWindowsには入らず、Webフォント配信もできないため、
     Windows では游ゴシックに落ちる。「見出しと本文で書体を変える」意図だけ再現する方針。 */
  --font-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  /* 游ゴシックは Regular が細すぎるので Medium を先に指定する（Windowsでの定番の書き方） */
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック",
    Meiryo, sans-serif;

  /* ★本文の太さは 400（標準）か 700（太字）だけを使う★
     Mac のヒラギノは W3/W6、Windows の游ゴシックは Medium/Bold しか出ないため、
     400と500、600と700 はどちらのOSでも同じ見た目になる。
     見出しの Zen Kaku Gothic New はWebフォントなので 400/500/700 の3段が使える。
     測定は tools/font-weight-check.html */
  --font-num: "DIN Alternate", "DIN", "Helvetica Neue", Arial, sans-serif;
  /* 明朝は TOP の飾り英字と LINK のバナーだけ。Google Fonts はTOPでしか読まない */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --container: 1200px;
  --gutter: 24px;
}

/* ---------- リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* アンカーリンクのジャンプをスムーススクロールにする。
   OSで「視差効果を減らす」を有効にしている場合は即時ジャンプに戻す */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  /* Figmaの本文は行間がAuto（フォント標準＝1.5〜1.6程度）だが、
     実際に記事を読むと詰まって見えるため、Webの可読性を優先して1.8のままにする */
  line-height: 1.8;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: var(--green);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 共通レイアウト ---------- */
/* コンテンツ幅そのものが --container（左右パディングは外側に確保） */
.l-inner {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 本文カラム用の狭いバリエーション。タイトル帯（1200px）はそのままに、
   読みやすさと素材画像の実寸（900〜1000px程度）に合わせて本文だけ1000pxにする。
   --container を上書きすることで .l-inner の計算式をそのまま使い回す */
.l-inner--narrow {
  --container: 1000px;
}

/* =========================================================
   パンくず
   ========================================================= */
.breadcrumb {
  padding-block: 34px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  list-style: none; /* ol の連番を非表示 */
}

.breadcrumb__list li + li::before {
  content: "＞";
  margin-right: 4px;
  color: var(--black);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* =========================================================
   ページタイトル（緑ベース）
   Figma: 緑ベース 466:13235 / h=228, 左下角丸20px
   ========================================================= */
/* 緑帯の中だけ見出し用の書体にする。タイトル・企業名・カテゴリのラベルが対象。
   「Support case」「AREA」は .page-hero__mark が --font-num で上書きする */
.page-hero {
  background: var(--green-base);
  border-bottom-left-radius: 20px;
  padding-block: 41px 56px;
  color: var(--white);
  font-family: var(--font-heading);
}

/* GIAHSマーク */
.page-hero__mark {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.page-hero__mark::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--mark-1) 0 50%,
    var(--mark-2) 50% 100%
  );
}

.page-hero__title {
  margin: 21px 0 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   本文
   ========================================================= */
.content {
  padding-block: 32px 0;
}

/* 本文h2（Figma＝maff .content h2 / 背景グレー） */
.content-heading {
  margin: 30px 0 20px;
  padding: 7px 18px;
  background-color: #eee;
  /* ラベルと値でサイズが違うので、箱自体は基準値だけ持たせて中で個別に指定する */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
}

.content-heading:first-child {
  margin-top: 0;
}

.content-heading__label {
  display: block;
  font-size: 14px;
  font-weight: 400;
}

/* 農林水産業システム名。case/ の会社名（.page-hero__company）と同じ28pxにして、
   節見出し24pxより上に立たせる */
.content-heading__value {
  font-size: 28px;
  font-weight: 700;
}

/* 本文h3（Figma初期案はグレーの下線だったが、地域×企業連携事例の緑の縦線に統一） */
.content-subheading {
  display: flex;
  align-items: stretch; /* 縦線をテキストと同じ高さに伸ばす（2行になる見出しにも追従） */
  gap: 20px;
  margin: 40px 0 20px;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}

.content-subheading::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  border-radius: 2px;
  background: var(--green);
  /* 高さ自体はテキストと同じ100%のまま取り、見た目だけ80%に縮める
     （height:80%だとテキスト側の高さが先に決まらず0になってしまうため） */
  transform: scaleY(0.8);
}

/* セクション見出し（Figma: 基本情報見出し 466:13248） */
.section-heading {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 64px 0 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

.section-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--green);
}

.body-text {
  margin: 0 0 24px;
  /* 本文は case/ の .case-text と同じ18px。地域ページのFigmaはキャプチャで
     実データが無いため、サイト内で統一する値としてこちらを採る */
  font-size: 18px;
}

/* 本文中のリスト。ポリシー各ページの条文で使う */
.body-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 18px;
}

.body-list > li {
  position: relative;
  line-height: 1.8;
}

.body-list > li + li {
  margin-top: 8px;
}

/* 「（1）（2）」という括弧付きの番号はブラウザの既定では出せないので counter で作る。
   先頭の記号は、折り返しても1行目に留まるよう絶対配置する（.link-list と同じ考え方） */
.body-list--num {
  counter-reset: body-list;
}

.body-list--num > li {
  padding-left: 2.6em;
}

.body-list--num > li::before {
  counter-increment: body-list;
  content: "（" counter(body-list) "）";
  position: absolute;
  left: 0;
}

.body-list--dot > li {
  padding-left: 1.2em;
}

.body-list--dot > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 中黒の下に入る2段目 */
.body-list--circle > li {
  padding-left: 1.4em;
}

.body-list--circle > li::before {
  content: "○";
  position: absolute;
  left: 0;
}

.body-list .body-list {
  margin: 4px 0 0;
  font-size: inherit;
}

/* ポリシー3ページの条見出し。.section-heading（緑の縦棒）とは別物 */
.policy-heading {
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--green-base);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

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

/* 「1.」「2.」の項番号 */
.body-list--dec {
  counter-reset: body-list-dec;
}

.body-list--dec > li {
  padding-left: 1.8em;
}

.body-list--dec > li::before {
  counter-increment: body-list-dec;
  content: counter(body-list-dec) ".";
  position: absolute;
  left: 0;
}

.content--policy .body-text,
.content--policy .body-list {
  font-size: 16px;
}

.content--policy {
  padding-block: 96px;
}

/* 下マージンが padding に足されて下だけ広くなるのを防ぐ */
.content--policy > :last-child {
  margin-bottom: 0;
}

/* プライバシーポリシー末尾の運営事業者 */
.policy-operator {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.8;
}

.policy-operator p {
  margin: 0;
}

.policy-operator__name {
  font-weight: 700;
}

/* お問合わせ */
.content--contact {
  padding-top: 52px;
}

.contact-heading {
  margin: 48px 0 24px;
  padding-block: 10px;
  border-bottom: 1px solid var(--green-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

.contact-heading:first-child {
  margin-top: 0;
}

.contact-info {
  font-size: 16px;
  line-height: 30px;
}

.contact-info p {
  margin: 0;
}

.contact-info__name {
  font-size: 18px;
  font-weight: 700;
}

.contact-info__note,
.policy-operator__note {
  padding-left: 3em;
}

/* 図版 */
.figure {
  margin: 0 0 32px;
}

.figure__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--black);
}

/* カラム幅より小さい図を中央に置く */
.figure--center {
  text-align: center;
}

.figure--pair {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 横並びの写真。
   flex-grow を 0 にして元画像より大きく表示しない（引き延ばし防止）。
   幅の基準は width 属性の実寸だが、それだけだと合計がカラム幅を超えたときに
   flex-wrap の行分割が先に働いて縦並びになってしまう。max-width で半分に
   クランプしておくと、行分割の判定前にサイズが収まるので必ず横に並ぶ。
   （gap 16px なので 50% - 9px で2枚がちょうど1行に収まる） */
.figure--pair img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50% - 9px);
}

/* 縦横比の差が大きい写真ペアは、幅を均等ではなく縦横比に応じて配分し、
   高さを揃える（鳥羽・志摩：縦長の海女写真と横長の真珠写真） */
.figure--pair img.figure__img--narrow {
  max-width: calc(37% - 9px);
}

.figure--pair img.figure__img--wide {
  max-width: calc(63% - 9px);
}

.figure--pair .figure__caption {
  flex: 1 0 100%;
}

/* リンクリスト
   flexではなくインライン配置にしている。flexだとテキストが2行に折り返したとき、
   アイコンがブロック全体の上下中央に浮いてしまい行末に付いてこないため */
.link-list li {
  position: relative;
  padding-left: 14px;
  line-height: 1.8;
}

/* 【分割版】など、親リンクにぶら下がる子リンク群 */
.link-sub {
  padding-left: 14px; /* 親項目の三角のぶんだけ下げる */
}

.link-sub__label {
  display: block;
  font-size: 15px;
}

/* 【分割版】のようにラベルが短い場合は、改行せず右にリンクを並べる */
.link-sub--inline {
  display: flex;
  align-items: baseline;
  column-gap: 8px;
}

.link-sub--inline .link-sub__label {
  flex: 0 0 auto;
}

.link-sub--inline .link-list--cols {
  flex: 1 1 auto;
  min-width: 0;
}

/* 狭い画面ではラベルを上の行に戻す */
@media (max-width: 600px) {
  .link-sub--inline {
    display: block;
  }
}

/* 「その1」のように短いラベルが並ぶ場合は横3列にする。
   行間は row-gap で取る。li + li の margin-top を残すと1行目だけ
   先頭の項目に余白が付かず、横一列が揃わない */
.link-list--cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}

/* 後方にある .link-list li + li に勝たせるため詳細度を上げる */
ul.link-list--cols li + li {
  margin-top: 0;
}

@media (max-width: 600px) {
  .link-list--cols {
    grid-template-columns: 1fr;
  }
}

/* 先頭の三角。折り返しても1行目の高さに留まるよう絶対配置する */
.link-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.8em - 9px) / 2); /* 1行目の中央。1.8はliのline-height */
  width: 6px;
  height: 9px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.link-list li + li {
  margin-top: 8px;
}

.link-list a {
  text-decoration: none;
  color: #333333; /* 文字色は本文と同じグレー。矢印・アイコンは緑／原色のまま */
}

/* 下線はテキスト部分のみに引く（矢印やPDF・NEWアイコンには引かない） */
.link-list__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.link-list a:hover {
  color: var(--green);
}

.link-note {
  font-size: 14px;
  color: var(--black);
}

/* インライン配置なので、行末のテキストに続いて並ぶ */
.icon-file,
.icon-blank,
.icon-new {
  vertical-align: middle;
  margin-left: 6px;
}

/* content-subheading（h3）は縦線の高さ調整のため display:flex; align-items:stretch。
   見出し内のNEWアイコンまで縦に引き伸ばされてしまうので、自身の高さを保つ */
.content-subheading .icon-new {
  align-self: center;
}

/* 動画 */
.video {
  max-width: 560px;
  margin: 0 0 8px;
  aspect-ratio: 16 / 9;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.caption {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--black);
}

/* =========================================================
   認定地域一覧ページ（areas.html）
   Figma: 農業遺産認定地域 (466:9304)
   ========================================================= */

/* ページタイトル（Figma: 466:10276 / 40px 中央揃え） */
.page-title {
  margin: 40px 0 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--black);
}

.page-title--policy {
  font-size: 32px;
}

/* エリア絞り込みボタン（Figma: ボタン 466:10278 ほか / 160×56） */
.area-nav {
  margin-top: 51px;
}

/* flex ではなく grid。ボタンのかたまりごと中央に置きつつ、
   折り返した最後の1個は行の左端に置きたい（7個なので必ず1個余る。
   flex の justify-content:center だと、その1個が行の真ん中に浮いて目立つ）。
   grid なら列の集まりが中央に来て、中身は左から詰まる */
.area-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 160px);
  justify-content: center;
  gap: 10px;
}

/* 1行に7個並ぶ幅（1200px以上）では、行の左右端を本文と同じ1200pxの
   端まで揃える（center のままだと 7×160px+6×10pxgap=1180px で20px余ってしまう） */
@media (min-width: 1248px) {
  .area-nav__list {
    justify-content: space-between;
  }
}

/* 全ボタン160px固定。7個×160px + 6×10pxのgapが基準（1200px幅では左右の端に揃う）。
   最長の「中国・四国エリア」「九州・沖縄エリア」は8文字＝128pxなので左右8pxの余白で足りる */
.area-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 160px;
  height: 56px;
  padding: 0 8px;
  border: 2px solid var(--green);
  border-radius: 28px;
  background: var(--white);
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.area-nav__btn:hover {
  background: var(--green);
  color: var(--white);
}

/* エリア見出しバー（Figma: Rectangle 41 ほか / 1200×50） */
.area-section {
  margin-top: 107px;
  scroll-margin-top: 24px;
}

.area-section + .area-section {
  margin-top: 90px;
}

.area-bar {
  margin: 0;
  padding: 10px 23px;
  min-height: 50px;
  background: var(--green-base);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

/* カードグリッド（Figma: 3列 / 横23px・縦26px） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 23px;
  margin-top: 26px;
}

/* 遺産地域カード（Figma: 遺産地域カード 466:10520 / 378×494）
   カード全体がリンク。地域名の <a> を疑似要素でカード全面まで広げているので、
   カード内には他のリンクやボタンを置かないこと */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--white);
}

/* 画像の枠。はみ出したズーム分をここで切る */
.card__thumb {
  overflow: hidden;
  aspect-ratio: 292 / 222;
  border-radius: 4px;
}

.card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

/* タッチ端末はタップした後もズームが残ってしまうので、ホバーできる環境だけ */
@media (hover: hover) {
  .card:hover .card__image {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__image {
    transition: none;
  }

  .card:hover .card__image {
    transform: none;
  }
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card__tags li {
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--black);
}

.card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

/* 既定は下線なし。ホバーで緑にして細い下線を出す（連携事例の一覧と共通の見せ方） */
.card__title a {
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* この疑似要素がカード全面を覆い、どこを押しても地域名のリンクが開く */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.card:hover .card__title a,
.card:focus-within .card__title a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* キーボード操作時の枠はカード全体に出す */
.card__title a:focus-visible {
  outline: none;
}

.card__title a:focus-visible::after {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.card__cert {
  margin: 0;
  font-size: 14px;
  /* 行の空き（line-height − font-size）を16px → 8px に半減 */
  line-height: 22px;
}

.card__note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

/* =========================================================
   地域×企業 連携事例
   ========================================================= */
.linkage {
  margin-top: 96px;
}

.linkage .section-heading {
  margin-top: 0;
}

/* 事例ボタンは「企業名　事例名」で長くなるため縦1列に並べる */
.linkage__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ラベルが1行に収まらない場合があるので、高さを固定せず折り返しを許す。
   本文カラムを超えないよう幅の上限も付ける */
.linkage__list .btn--outline {
  max-width: 100%;
  height: auto;
  min-height: 48px;
  padding: 12px 24px;
  text-align: left;
}

/* ラベルは矢印に押しつぶされないよう、縮んでよい flex アイテムにする */
.linkage__label {
  flex: 0 1 auto;
  min-width: 0;
}

/* PC では「企業名（全角空白）事例名」の1続きに見せる。
   空白は文字ではなく ::after で入れるので、改行させる際に消せる */
.linkage__company::after {
  content: "\3000";
}

/* =========================================================
   ボタン
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: inherit; /* <button> で使うと既定の書体になってしまうため */
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* 矢印は文字と中央でそろえる。「和文の字面は下寄り」として下げると、
   実測では逆に矢印が文字より約1.5px下がって見える */
.btn img {
  flex: 0 0 auto;
}

/* ホバーで矢印を少し右へ送る。
   対象は「最後の画像」に限る（先頭にアイコンを置いたときに動かさないため） */
.btn img:last-child {
  transition: transform 0.2s ease;
}

.btn:hover img:last-child {
  transform: translateX(4px);
}

/* 白地・緑枠（Figma: 農業遺産認定地域ボタン 466:13246） */
.btn--outline {
  min-width: 240px;
  height: 48px; /* Figma: 240×48 */
  padding: 0 32px;
  border: 1px solid var(--green);
  border-radius: 24px;
  background: var(--white);
  color: var(--green);
  font-size: 16px;
}

.btn--outline:hover {
  background: var(--green);
  color: var(--white);
}

.btn--outline:hover img {
  filter: brightness(0) invert(1);
}

/* 白地・緑枠の一回り大きいもの（Figma: ボタン 916:7084 = 272×56） */
.btn--outline-lg {
  height: 56px;
  padding: 0 27px;
  border-radius: 28px;
}

/* 農林水産省の該当地域ページへの参考リンク（area/ の記事末）。
   主導線ではないのでボタンにはせず、右寄せの1行テキストリンクにしている。
   下線は .link-list__text が引く（アイコンには引かない） */
.maff-link {
  margin: 32px 0 40px;
  text-align: right;
  font-size: 18px;
}

/* inline-flex にして、外部リンクアイコンと矢印を文字の中央にそろえる。
   .icon-blank が持っている margin-left は gap と二重になるので打ち消す */
.maff-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--green);
  font-weight: 700; /* 本文書体は 400 と 700 の2段しか出ないので 700 を使う */
}

.maff-link a img {
  flex: 0 0 auto;
  margin-left: 0;
}

/* 色が最初から緑なので、ホバーは色ではなく濃度で示す */
.maff-link a:hover {
  opacity: 0.7;
}

/* オフィシャルサポーター申請（Figma: ボタン 466:10266 = 359×56）。
   黄色地に緑の枠で「申請」の主導線だと分かるようにする */
.btn--apply {
  min-width: 359px;
  height: 56px;
  padding: 0 40px;
  border: 2px solid var(--green);
  border-radius: 28px;
  background: var(--yellow);
  color: var(--green);
  font-size: 16px;
}

.btn--apply:hover {
  opacity: 0.85;
}

/* TOPの丸ボタン（Figma: ボタン 13:316）。枠は2px、角丸28px。
   幅はFigmaでは359pxだが、その中に文字が収まっていないので内容なりにしている */
.btn--pill {
  height: 52px;
  white-space: nowrap;
  padding: 0 40px;
  border: 2px solid var(--green);
  border-radius: 28px;
  background: var(--white);
  color: var(--green);
  font-size: 16px;
}

/* ホバーは白地・緑枠の .btn--outline と同じ反転にそろえる（矢印も白へ） */
.btn--pill:hover {
  background: var(--green);
  color: var(--white);
}

.btn--pill:hover img {
  filter: brightness(0) invert(1);
}

/* 大きいボタン（Figma: ボタン 466:17031）。塗り（--primary）と白地（--secondary）で大きさは同じ */
.btn--primary,
.btn--secondary {
  min-width: 480px;
  padding: 16px 40px;
  border: 1px solid var(--green);
  border-radius: 8px;
  font-size: 20px;
}

.btn--primary {
  background: var(--green);
  color: var(--white);
}

.btn--secondary {
  background: var(--white);
  color: var(--green);
}

.btn--primary:hover {
  opacity: 0.85;
}

/* 白地は透かしても変化が分かりにくいので、ごく薄い緑を敷く。
   緑地に反転させると、ホバーした瞬間にすぐ上の塗りボタンと同じ見た目になってしまう */
.btn--secondary:hover {
  background: #eef5f0;
}

/* 長い文言を意味の切れ目で折り返す。塊ごと次の行へ回り、塊自体が入りきらなければ中で折り返す */
.btn__phrase {
  display: inline-block;
}

/* =========================================================
   お問合せ先（Figma: Group 166 / 466:12466）
   ========================================================= */
.contact {
  margin-top: 106px;
}

/* ページ末尾にお問合せ先が来る場合（areas.html）は下にも同じだけ余白を取る */
.contact:last-child {
  margin-bottom: 106px;
}

/* この囲みの3行はFigmaが Zen Kaku Gothic New Medium 指定。
   本文フォントでは500が出ないので、見出しフォント（Webフォント）を使う */
.contact__box {
  font-family: var(--font-heading);
  display: flex;
  max-width: 863px;
  margin-inline: auto;
  min-height: 120px;
  border: 1px solid var(--border);
}

.contact__label {
  flex: 0 0 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* p の既定マージンでセル上下に白が残るのを防ぐ */
  background: var(--gray-2);
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

.contact__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px 20px 23px;
  color: #000;
}

.contact__dept {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

/* 担当者と代表番号。広い画面では全角2文字分あけて横並び。
   flexにしているのはタグ間の改行が空白として入るのを避け、間隔を2em丁度にするため */
.contact__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* =========================================================
   一覧へ戻るボタン（案内文などは無く、一覧ページへの導線のみ）
   ========================================================= */
.back-to-list {
  margin-block: 86px 108px;
  text-align: center;
}

/* ボタンを2つ縦に並べるとき。幅は長いほうのボタンにそろえる */
.back-to-list--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  margin-inline: auto;
  gap: 32px;
}

/* =========================================================
   レスポンシブ（たたき台としての最低限）
   ========================================================= */
@media (max-width: 900px) {
  .page-hero {
    padding-block: 28px 36px;
  }

  .page-hero__title {
    font-size: 32px;
  }

  .section-heading {
    font-size: 20px;
    margin-top: 48px;
  }

  .content-heading,
  .content-subheading {
    font-size: 17px;
  }

  .content-subheading {
    margin-top: 32px;
  }

  /* 狭い画面では左右30pxだと本文が窮屈になるため詰める */
  .body-text,
  .body-list,
  .link-list {
    padding-inline: 16px;
  }

  .content--policy .body-text,
  .content--policy .body-list {
    padding-inline: 0;
  }

  .content--policy {
    padding-block: 56px;
  }

  .content--contact {
    padding-top: 40px;
  }

  .contact-info__note,
  .policy-operator__note {
    padding-left: 0;
  }

  .body-list {
    font-size: 17px;
  }

  .linkage {
    margin-top: 64px;
  }

  .contact {
    margin-top: 64px;
  }

  .contact:last-child {
    margin-bottom: 64px;
  }

  .contact__box {
    flex-direction: column;
  }

  .contact__label {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 12px 20px;
  }

  .contact__body {
    padding: 16px 20px;
  }

  .contact__dept {
    font-size: 18px;
  }

  /* 狭い画面では担当者と代表番号を改行して縦に並べる */
  .contact__detail {
    flex-direction: column;
    gap: 4px;
  }

  .btn--primary,
  .btn--secondary {
    min-width: 0;
    width: 100%;
    font-size: 17px;
    padding: 16px 24px;
  }

  /* 「〜その他の情報は／農林水産省HPへ」を375pxで2行に収めるため、左右を詰める */
  .back-to-list--stack .btn {
    padding-inline: 16px;
  }

  .back-to-list {
    margin-block: 56px 72px;
  }

  /* --- 認定地域一覧ページ --- */
  .page-title {
    margin-top: 24px;
    font-size: 28px;
  }

  /* 長いタイトルが折り返すので、かたまりは中央のまま行頭をそろえる */
  .page-title--policy {
    width: fit-content;
    margin-inline: auto;
    text-align: left;
  }

  .area-nav {
    margin-top: 32px;
  }

  /* 狭い画面では160pxのまま折り返す（文字は15px＝最長120pxで収まる） */
  .area-nav__btn {
    height: 48px;
    font-size: 15px;
  }

  .area-section {
    margin-top: 56px;
  }

  .area-section + .area-section {
    margin-top: 56px;
  }

  .area-bar {
    padding: 8px 16px;
    font-size: 20px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }

  .card__title {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   地域×企業 連携事例 詳細（case/index.html）
   Figma: 03_NEXCO西日本コミュニケーションズ株式会社 (526:5419)
   ※ヘッダー・フッターは対象外
   ========================================================= */

/* ---------- ページタイトル（連携事例版） ---------- */
/* .page-hero の緑ベースをそのまま使い、下段（企業名＋カテゴリ）を足した派生 */
.page-hero--case {
  /* Support case のバーは水色→緑（認定地域ページの黄→緑に対して） */
  --mark-1: #29abe2;
  padding-bottom: 0;
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  margin-top: 20px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.page-hero__company {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}

.page-hero__company-label {
  font-size: 16px;
  font-weight: 500;
}

/* ---------- カテゴリ（PR活動／環境保全／教育活動／商品開発／その他） ---------- */
.case-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.case-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}

/* 白丸＋緑枠は共通なのでCSSで描き、中のグリフだけ画像で差し替える。
   グリフ未入手のカテゴリは <span> を空にすれば白丸だけになる */
.case-cat__icon {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--green-base);
  border-radius: 50%;
  background: var(--white);
}

.case-cat__icon img {
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- メイン画像＋サムネイル ---------- */
.case-media {
  margin-top: 83px;
  /* ノートPCなど画面の低い環境で、メイン画像＋サムネイルが1画面に収まるようにする。
     ステージに使える高さ（画面高 − 前後の余白とサムネイル108px）を 4:3 で幅に換算し、
     それを幅の上限にすることで、トリミングを増やさずにブロック全体を縮める。
     幅の狭い端末では min() が 100% を選ぶため、従来どおりの見た目になる */
  --stage-max-h: max(320px, calc(100svh - 200px));
  width: min(100%, calc(var(--stage-max-h) * 4 / 3));
  margin-inline: auto;
}

/* スライドを重ねるので高さは比率で固定する（Figma: 1000×750） */
.case-media__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gray-2);
}

.case-media__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 素材に縦位置の写真が混ざる（case-main-2/3）ため、cover では上下が切れてしまう。
     contain で必ず全体を表示し、余った領域には .case-media__stage の背景色が出る */
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.case-media__slide.is-active {
  opacity: 1;
}

/* 枠より小さい写真を引き伸ばさない */
.case-media__slide--actual {
  object-fit: scale-down;
}

/* 提供素材の解像度が低く、ステージいっぱいに引き延ばすと粗が目立つページ用
   （9_JAめぐみの）。差し替え素材は用意しない方針なので、
   この見せ方が最終形。スライドの表示幅だけを絞り、余った領域には
   .case-media__stage の背景グレーを出す。ステージの寸法は変えないので、
   サムネイル列や前後のブロックの位置はそのまま。
   幅は --slide-w で調整できる（既定は半分）。
   なお絶対配置の img は width:auto が「左右の指定」ではなく画像の固有幅に
   解決されてしまうので、left/right ではなく width を明示すること */
.case-media--narrow .case-media__slide {
  --slide-w: 50%;
  width: var(--slide-w);
  left: calc((100% - var(--slide-w)) / 2);
  right: auto;
}

/* スマホでは元から表示幅が小さく、これ以上絞ると何の写真か分からなくなる */
@media (max-width: 600px) {
  .case-media--narrow .case-media__slide {
    --slide-w: 80%;
  }
}

/* メイン画像に説明を添える企業がある（17_インパクトサークル）。
   サムネイル列との間に入るので、上下の余白は控えめにする */
.case-media__caption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--black);
}

/* サムネイルは最大3枚。折り返さず1行に並べ、幅が足りなければ縮める
   （wrap にすると縮む前に3枚目だけ次の行へ送られてしまう） */
.case-media__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 18px;
}

/* 画像が1枚のとき js/case.js が hidden を付ける。
   display:flex が効いたままだと隠れないので打ち消す */
.case-media__thumbs[hidden] {
  display: none;
}

/* 基準は120px幅。画面が狭いときは折り返さず、3枚とも縮んで1行に収まるようにする
   （min-width:0 が無いと画像の原寸で下限が決まり、3枚目だけ改行されてしまう） */
.case-media__thumbs li {
  flex: 0 1 120px;
  min-width: 0;
}

/* 枠線ではなくoutlineで囲むことで、選択状態が変わってもレイアウトがずれない */
.case-media__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.case-media__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ロゴなど、切り抜くと欠ける画像は全体を収める */
.case-media__thumb--contain img {
  object-fit: contain;
  background: var(--white);
}

.case-media__thumb:hover {
  opacity: 0.8;
}

.case-media__thumb.is-current {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- 汎用ブロック（活動内容／基本情報／連携事例のある農業遺産認定地域） ---------- */
.case-block {
  margin-top: 64px;
}

.case-block .section-heading {
  margin-top: 0;
}

/* 本文は18px。Figma同様、段落間はあけない */
.case-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
}

/* 活動内容の末尾に付く注記（「※〜」）はFigmaでも一段小さい */
.case-block .link-note {
  font-size: 14px;
}

/* ---------- 地域の声／企業の声 ---------- */
.voice {
  display: flex;
  align-items: center;
  min-height: 300px;
  margin-top: 30px;
  padding-left: 40px;
  border: 1px solid var(--black);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
}

.voice__figure {
  flex: 0 0 283px;
  margin: 0;
}

/* Figmaでは声の画像は283×200の固定枠。素材に縦位置の写真が混ざるので、
   枠の比率を固定して写真は cover で切り抜く */
.voice__figure img {
  width: 100%;
  aspect-ratio: 283 / 200;
  object-fit: cover;
}

/* ロゴマークなど、切り抜くと意味が失われる画像は枠内に全体を収める */
.voice__figure--contain img {
  object-fit: contain;
}

/* 人物など、上のほうを残して切り抜きたい画像 */
.voice__figure--top img {
  object-position: center top;
}

.voice__caption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.voice__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 40px;
}

.voice__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.voice__icon {
  flex: 0 0 auto;
}

.voice__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}

/* 本文末尾の注記（「※2023年度当時」など）はFigmaでも一段小さい。
   .link-note 単体では .voice__body p に負けるので、ここで上書きする */
.voice__body .link-note {
  font-size: 14px;
}

/* ---------- 農業遺産オフィシャルサポーターの基本情報 ---------- */
/* ロゴは表に対して上下中央に置く（表のほうが背が高いので、実質ロゴだけが中央に寄る） */
.supporter {
  display: flex;
  align-items: center;
  gap: 41px;
}

/* 2社連名の事例（18_助けあいジャパン）はサポーター情報が2つ並ぶ */
.supporter + .supporter {
  margin-top: 40px;
}

/* Figmaのロゴ枠は全ページ239×159。高さで縮んだロゴが左に寄らないよう、枠の中央に置く */
.supporter__logo {
  display: flex;
  flex: 0 0 239px;
  align-items: center;
  justify-content: center;
  height: 159px;
  margin: 0;
}

/* 正方形や縦長のロゴをそのまま置くと枠からはみ出して表より大きく見えるので、
   高さも枠に収める（横長のロゴは幅239pxが先に効くので影響なし） */
.supporter__logo img {
  max-height: 159px;
  width: auto;
}

.supporter__table {
  flex: 1 1 auto;
  min-width: 0;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.supporter__table th,
.supporter__table td {
  height: 53px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: #000;
  font-weight: 400;
  text-align: left;
}

.supporter__table tr:last-child th,
.supporter__table tr:last-child td {
  border-bottom: 1px solid var(--border);
}

.supporter__table th {
  width: 119px;
  padding-inline: 8px;
  background: var(--gray-2);
  text-align: center;
}

.supporter__table td {
  padding-left: 21px;
  /* 長いURLや住所が枠を突き抜けないようにする */
  overflow-wrap: anywhere;
}

/* ---------- Topics / Information ---------- */
.panel {
  position: relative;
  margin-top: 64px;
  border-top: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  background: var(--white);
}

/* Topics と Information が並ぶ場合は詰めて配置する */
.panel + .panel {
  margin-top: 20px;
}

/* 上の罫線に重ねるため -2px。ラベル分の高さは .panel__inner の上padding で確保している */
.panel__label {
  position: absolute;
  top: -2px;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 20px;
  border-bottom-right-radius: 10px;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.panel__inner {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 59px 0 40px;
}

/* 画像側の幅を優先し、本文は残り幅に収める（basis:0 にしないと本文が伸びて画像が枠外に出る） */
.panel__body {
  flex: 1 1 0;
  min-width: 0;
}

.panel__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.panel__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}

/* Figmaでは Topics / Information 内の外部リンクだけ太字（Hiragino W6・W7）。
   基本情報の表のHPリンクは太字にしないので、ここに限定して指定する */
.panel__body a {
  font-weight: 700;
}

/* 画像なしの場合は .panel__media ごと削除すれば本文が全幅になる */
.panel__media {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
  /* 既定の stretch だと、縦横比の違う画像が一番高いものに合わせて引き伸ばされる。
     上端をそろえて、各画像は自分の縦横比のまま表示する */
  align-items: flex-start;
}

/* 画像は既定で min-width:auto ＝ 原寸のまま縮まないため、明示的に縮小を許可する */
.panel__media img {
  min-width: 0;
}

/* 横長のロゴなど、本文に対して上下中央に置きたい画像 */
@media (min-width: 901px) {
  .panel__media--center {
    align-self: center;
  }
}

/* ---------- 連携事例のある農業遺産認定地域 ---------- */
/* 連携先が複数になっても折り返して並ぶ */
/* Figmaはボタンを横4個並べる（x=170/423/676/929、幅240、縦の間隔は68−48＝20px）。
   ラベルの長さがまちまちなので flex だと4個に揃わない。4等分のグリッドにして
   ボタンを列いっぱいに広げ、必ず横4個になるようにする */
/* 列は240px固定。本文カラム1000pxのときちょうど4列になる（240×4＋13×3＝999px）。
   auto-fill なので幅が狭まれば3列・2列と自動で減り、
   ボタンが1個でも240pxのまま（auto-fit だと1個が全幅に伸びてしまう） */
.area-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  gap: 20px 13px;
}

/* 列幅に合わせるので min-width は解除する。
   最長の「兵庫県北播磨・六甲山北部地域」（14字）まで1行に収めるため、
   左右の余白・矢印との間隔・字間を詰める。字間の -0.05em は Figma が長い地域名に
   使っている tracking -0.8px と同じ値。地域名は中央ぞろえなので、
   短いラベルでは余白が余り、詰めたことは見た目に響かない */
.area-links .btn--outline {
  min-width: 0;
  width: 100%;
  padding: 0 2px;
  gap: 6px;
  letter-spacing: -0.05em;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  /* 狭い画面ではデザイン通りの改行位置がかえって読みにくいので、自然に流す */
  .page-hero--case .page-hero__title br {
    display: none;
  }

  .page-hero__meta {
    padding-block: 16px;
  }

  .page-hero__company {
    font-size: 20px;
  }

  .page-hero__company-label {
    font-size: 14px;
  }

  .case-cat {
    font-size: 14px;
  }

  .case-media {
    margin-top: 48px;
  }

  .case-media__thumbs {
    gap: 12px;
  }

  .case-block,
  .panel {
    margin-top: 48px;
  }

  .case-text {
    font-size: 16px;
  }

  /* 声・基本情報・パネルは画像と本文を縦積みにする */
  .voice {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 24px;
  }

  .voice__figure {
    flex: 0 0 auto;
  }

  .voice__body {
    padding: 16px 0 0;
  }

  .voice__title {
    font-size: 20px;
  }

  .supporter {
    flex-direction: column;
    gap: 24px;
  }

  .supporter__logo {
    flex: 0 0 auto;
  }

  .supporter__table {
    width: 100%;
    font-size: 14px;
  }

  .supporter__table th {
    width: 88px;
  }

  .panel__inner {
    flex-direction: column;
    padding: 52px 0 32px;
    gap: 20px;
  }

  /* 縦積みになると画像列が原寸のままでは収まらないので縮小を許可する */
  .panel__media {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .panel__title {
    font-size: 20px;
  }

  /* 4列のままだと1列が60px程度になり地域名が収まらないので1列にする。
     幅に余裕ができるぶん、詰めていた余白・字間もボタン既定に戻す */
  .area-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .area-links .btn--outline {
    padding: 0 24px;
    gap: 10px;
    letter-spacing: normal;
  }

  /* 連携事例ボタンは幅が足りないので、企業名と事例名を必ず改行して2行に分ける。
     PC でつないでいた全角空白は行頭の余白になってしまうため消す。
     margin-bottom は、企業名と事例名の切れ目が事例名自体の行間（line-height 1.4）に
     埋もれないよう、1行ぶんの行間より広げるための余白 */
  .linkage__company {
    display: block;
    margin-bottom: 0.4em;
  }

  .linkage__company::after {
    content: none;
  }
}

@media (max-width: 600px) {
  .page-hero--case .page-hero__title {
    font-size: 24px;
  }

  .case-block .section-heading,
  .voice__title,
  .panel__title {
    font-size: 18px;
  }
}

/* 320px級の端末では1列でも最長の地域名が入りきらないので、余白と字間だけ詰める */
@media (max-width: 360px) {
  .area-links .btn--outline {
    padding: 0 8px;
    gap: 6px;
    letter-spacing: -0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-media__slide {
    transition: none;
  }
}

/* =========================================================
   共通ヘッダー / フッター
   Figma: ヘッダー 115:502（1366×100）／グロナビ_プルダウン 466:8919
          フッター 433:6551（1366×392）

   Figmaは1366px固定の1枚デザインで、レスポンシブの指定は無い。
   ・ヘッダーは全幅（Figmaどおり。ロゴ左端10px／右端27px）
   ・フッターは左右83px空き＝実質1200pxなので、本文と同じ .l-inner に乗せる
   ・1200px未満でハンバーガーに切り替える
     （1段に収めるのに1162px必要なため、切り替えと縮小の境目を1200pxで揃えている）
   ========================================================= */

:root {
  --yellow: #ffd900;       /* Figma: 黄色（会員様ログインボタン） */
  --gold: #c78214;         /* TOPの見出しの飾り（葉マーク・縦棒） */
  --header-h: 100px;
  --header-h-compact: 64px;  /* デスクトップでスクロールしたときの高さ */
  --header-h-sp: 64px;
}

/* ---------- ヘッダー ---------- */
/* sticky ではなく fixed にしている。sticky だと縮むときにヘッダーの高さが
   本文の流れに影響し、切り替わった瞬間に本文が36px跳ねてちらつくため。
   高さは直後の .site-header__spacer で確保する */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
}

/* ヘッダーの高さぶんの place holder。縮んでも高さは変えない */
.site-header__spacer {
  height: var(--header-h-sp);
}

@media (min-width: 1200px) {
  .site-header__spacer {
    height: var(--header-h);
  }
}

/* 固定ヘッダーの下に見出しが潜らないようにする。
   アンカーで飛ぶときは必ずスクロール後＝縮んだ状態（64px）なので、
   デスクトップもスマホも同じ値でよい */
html {
  scroll-padding-top: calc(var(--header-h-compact) + 10px);
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding-inline: 10px 27px;   /* Figma: ロゴ左10px / 右端27px */
}

.site-header__logo {
  flex: none;
  display: block;
  align-self: center;
}

.site-header__logo img {
  display: block;
  width: 200px;
  height: auto;
}

/* 右側はボタン列とナビの2段。Figmaの y=13 / y=60 に合わせている */
.site-header__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  padding-top: 13px;
}

/* ---------- ヘッダー右上のボタン ---------- */
.site-header__actions {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding-inline: 14px;
  border: 0;              /* <button> で使う場合に既定の枠が出ないように */
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}

.hbtn img {
  display: block;
  flex: none;
}

.hbtn--login {
  min-width: 142px;
  background: var(--yellow);
}

/* ログイン後は「会員様ログイン」がこれに入れ替わる。
   ログアウトは頻度の低い副次的な操作なので、黄色より一段トーンを落とす。
   白＋緑枠にすると隣の「お問合わせ」と見分けがつかなくなるためグレーベタ。
   色を変えるときは images/icon-logout.svg の stroke も合わせて直すこと */
.hbtn--logout {
  min-width: 142px;
  background: #707070;
  color: var(--white);
  border: 0;
  cursor: pointer;
}

.hbtn--contact {
  min-width: 112px;
  background: var(--white);
  border: 1px solid var(--green);
}

.hbtn:hover {
  opacity: 0.8;
}

/* ---------- グローバルナビ ---------- */
.gnav__list {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__item {
  position: relative;
}

.gnav__link {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  /* 下線ぶんの高さをここで確保しておく（線そのものは ::after が引く） */
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.44;   /* Figma: 16pxの行が高さ23px */
  color: var(--black);
  text-decoration: none;
  white-space: nowrap; /* 幅が足りないと2行に折り返して段組みが崩れるため */
  cursor: pointer;
  transition: color 0.2s ease;
}

/* 下線は左から右へ引く。border だと引いている途中を作れないので疑似要素にする */
.gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
}

/* 現在地。Figmaはコンポーネント側ではなくインスタンス側で下線を足していた。
   文字は黒のままで、下線だけ緑にする。
   「農業遺産とは」は子ページにいるとき aria-current="true" が付く。
   読み込んだ時点で引かれている状態にしつつ、その1回だけ左から引いて見せる */
.gnav__link[aria-current]::after {
  transform: scaleX(1);
  animation: gnav-underline 0.4s ease;
}

@keyframes gnav-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.gnav__link:hover {
  color: var(--green);
}

/* 「農業遺産とは」の▼。Figmaは緑10pxの文字だが三角形はCSSで描く。
   開いても回転させない */
.gnav__caret {
  display: inline-block;
  margin-left: 6px;
  border: 5px solid transparent;
  border-top: 6px solid var(--green);
  border-bottom: 0;
  vertical-align: 3px;
}

/* ---------- プルダウン（Figma: 166×160 / 4行×40px） ---------- */
.gnav__sub {
  position: absolute;
  top: calc(100% + 6px);   /* Figma: ナビ文字の下端83px → パネル上端89px */
  left: 50%;
  translate: -50% 0;
  z-index: 20;
  width: 166px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  background: var(--green);
  list-style: none;
  overflow: hidden;
}

/* Figmaは行間の3本だけで、上下端に線は無い */
.gnav__sub li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.gnav__sub a {
  display: flex;
  align-items: center;
  height: 40px;
  padding-inline: 15px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}

/* 外部リンクアイコンは黒で書き出してあるので、白文字に合わせて反転させる */
.gnav__sub a img {
  margin-left: 4px;
  filter: brightness(0) invert(1);
}

.gnav__sub a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* デスクトップかつマウスのある環境では、ホバーで開く。
   :focus-within を併記しているのでキーボードでタブ移動しても開く。
   タッチ端末（hover: none）はこのブロックが効かず、nav.js のクリック開閉が残る。
   ホバーだけにすると 1200px 以上のタッチ端末で開けなくなるため分けている。 */
@media (min-width: 1200px) and (hover: hover) {
  /* display の切り替えではアニメーションできないので、常に display:block にして
     opacity と位置で出し入れする。display:block は作者スタイルなので、
     JS が付けた hidden 属性（UAの display:none）より優先される。
     閉じ切ってから visibility を切り、隠れているあいだはタブで入れないようにする */
  .gnav__sub {
    display: block;
    opacity: 0;
    visibility: hidden;
    translate: -50% -6px;
    transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s 0.2s;
  }

  .gnav__item--parent:hover .gnav__sub,
  .gnav__item--parent:focus-within .gnav__sub {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s;
  }

  /* ナビ文字とパネルの間の6pxを埋める。
     ここが空いているとマウスを下ろす途中でホバーが切れて閉じてしまう。
     .gnav__sub は角丸を切るために overflow:hidden なので、そちらではなく
     項目（li）側に出す */
  .gnav__item--parent:hover::after,
  .gnav__item--parent:focus-within::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
    content: "";
  }
}

/* ---------- デスクトップの固定（スクロールで1段に縮める） ----------
   1段に収めるのに1162px必要（padding37＋ロゴ120＋隙間16＋ナビ690＋隙間24＋ボタン275）なので、
   デスクトップ扱いは1200px以上。それ未満はハンバーガーにする。
   Figmaの2段（100px）のまま固定すると画面を圧迫するので、スクロールしたら
   ロゴを小さくし、ボタン列とナビを1行にまとめて64pxにする。
   縮んだ状態のデザインはFigmaに無いので、こちらで起こしたもの。
   .is-compact は nav.js が <html> に付ける。 */
@media (min-width: 1200px) {
  .site-header {
    transition: background-color 0.25s ease;
  }

  .site-header__inner,
  .site-header__logo img {
    transition: height 0.25s ease, width 0.25s ease;
  }

  /* 縮んだときは背景を少し透かして圧迫感を減らす。
     下の本文が透けて文字が読みにくくならないよう、ぼかしも併せて掛ける */
  .is-compact .site-header {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }

  /* ぼかしが効かないブラウザでは透かさない（本文がそのまま透けて読みにくいため） */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .is-compact .site-header {
      background: var(--white);
    }
  }
}

@media (min-width: 1200px) {
  .is-compact .site-header__inner {
    height: var(--header-h-compact);
    align-items: center;
  }

  .is-compact .site-header__logo img {
    width: 120px;
  }

  /* ボタン列とナビを1行に。ソース順は「ボタン → ナビ」なので、
     row-reverse で見た目を「ナビ → ボタン」にする */
  .is-compact .site-header__body {
    flex-direction: row-reverse;
    align-items: center;
    gap: 24px;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .site-header__logo img,
  .gnav__link,
  .gnav__sub,
  .gnav__caret {
    transition: none;
  }

  /* 現在地の下線は引かずに、最初から出ている状態にする */
  .gnav__link[aria-current]::after {
    animation: none;
  }

  /* 開いた状態のほうが詳細度が高いので、こちらにも要る */
  .gnav__item--parent:hover .gnav__sub,
  .gnav__item--parent:focus-within .gnav__sub {
    transition: none;
  }
}

/* ---------- ハンバーガー（1200px未満で表示） ---------- */
.site-header__toggle {
  display: none;
  flex: none;
  align-self: center;
  gap: 7px;   /* 三本線と「メニュー」の間 */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* 上下の線は absolute なので高さを持たない。
   margin で 7px ずつ確保して、ボタンの中で 16px の箱として扱えるようにする
   （これを忘れると下の「メニュー」の文字と重なる） */
.site-header__toggle-icon {
  position: relative;
  margin-block: 7px;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.site-header__toggle-icon::before { top: -7px; }
.site-header__toggle-icon::after  { top: 7px; }

.site-header__toggle-text {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--green);
}

/* 開いているときは中央の線を消して×にする */
.is-open .site-header__toggle-icon { background: transparent; }
.is-open .site-header__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.is-open .site-header__toggle-icon::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
  .site-header {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .site-header__inner {
    position: relative;
    align-items: center;
    height: var(--header-h-sp);
    padding-inline: 16px;
  }

  .site-header__logo img {
    width: 120px;
  }

  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ドロワー。max-height を 0 から画面いっぱいまで伸ばして上からスライドさせる。
     display:none だとアニメーションできないので、閉じた状態は max-height:0 で潰す。
     閉じている間は visibility:hidden にしてキーボードのタブ移動から外す
     （visibility の transition を 0.35s 遅らせて、閉じ切ってから消す）。
     ※grid-template-rows の 0fr→1fr で書くと中身の実寸ぶんだけ正確に開くが、
       包みのdivを1枚増やす必要があるのでこちらにしている。
       max-height は中身より大きい値を上限にするため、内容が上限より低いと
       アニメーションが途中で終わって見える（実測では気にならない範囲）。 */
  .site-header__body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;   /* ナビを上、ボタンを下に */
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--white);
    border-top: 1px solid rgba(51, 51, 51, 0.15);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: max-height 0.35s ease-out, visibility 0s linear 0.35s;
  }

  .is-open .site-header__body {
    max-height: calc(100svh - var(--header-h-sp));
    visibility: visible;
    transition: max-height 0.35s ease-out, visibility 0s;
  }

  /* ドロワーの後ろに敷くグレー。ヘッダーの下から画面の底まで。
     ヘッダー（z-index:50）より下、本文より上に置く。
     hidden を外してから is-open を付けるのでフェードインする（nav.js） */
  .nav-overlay {
    position: fixed;
    inset: var(--header-h-sp) 0 0;
    z-index: 49;
    background: rgba(51, 51, 51, 0.55);
    opacity: 0;
    transition: opacity 0.35s ease-out;
  }

  .nav-overlay.is-open {
    opacity: 1;
  }

  /* 中身が画面より高くなったら（アコーディオンを開いたときなど）ここでスクロールする。
     開くアニメーションの最中は中身が枠からあふれているので、そのまま overflow:auto に
     しておくと一瞬スクロールバーが出る。開き切ってから nav.js がこのクラスを付ける */
  .site-header__body.is-scrollable {
    overflow-y: auto;
  }

  .gnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .gnav__item {
    border-bottom: 1px solid rgba(51, 51, 51, 0.12);
  }

  .gnav__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding-inline: 20px;
    border-bottom: 0;
    text-align: left;
  }

  /* 縦並びのメニューでは下線を出さず、色と太さで現在地を示す */
  .gnav__link::after {
    display: none;
  }

  .gnav__link[aria-current] {
    color: var(--green);
    font-weight: 700;
  }

  .gnav__toggle {
    justify-content: space-between;
  }

  /* 開いているあいだは三角を反転させる */
  .gnav__caret {
    margin-left: auto;
    transition: rotate 0.25s ease;
  }

  .gnav__toggle[aria-expanded="true"] .gnav__caret {
    rotate: 180deg;
  }

  /* ドロワー内はパネルではなくアコーディオンにする。
     開閉は max-height で送る（ドロワー本体と同じ作り）。
     子項目4つ×52pxなので、上限は少し大きめの280px */
  .gnav__sub {
    position: static;
    translate: none;
    width: auto;
    max-height: 280px;
    border-radius: 0;
    transition: max-height 0.25s ease, visibility 0s;
  }

  /* hidden の display:none だとアニメーションできないので打ち消す。
     閉じ切ってから visibility を切り、隠れた項目にタブで入らないようにする */
  .gnav__sub[hidden] {
    display: block;
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s 0.25s;
  }

  /* 子項目はデスクトップの40px固定のままだと、親項目（56px）に対して詰まって見える。
     高さは固定せず min-height にして、文字が折り返しても潰れないようにする。
     左は親の20pxより深くして、階層が分かるようにインデントする */
  .gnav__sub a {
    height: auto;
    min-height: 52px;
    padding: 12px 20px 12px 32px;
  }

  .site-header__actions {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  /* ドロワーの中では2つとも幅いっぱいに伸ばす。
     デスクトップの min-width（142px / 112px）は幅の下限なので、width:100% で上書きする */
  .hbtn {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--white);
  font-family: var(--font-body);
  color: var(--black);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  /* Figma: メニューの下端248px → ©とリンク類の上端306px で 58px 空いている */
  row-gap: 58px;
  padding-block: 14px 24px;
}

.site-footer__brand {
  grid-column: 1;
  grid-row: 1;
}

.site-footer__logo {
  margin: 50px 0 0;
}

.site-footer__logo img {
  display: block;
  width: 267px;
  height: auto;
}

/* 右側のメニュー2列。Figma: 1列目 x=838 / 2列目 x=1116 */
.site-footer__nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 54px;
  padding-top: 34px;
}

.fnav,
.fnav__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnav > li > a,
.fnav__head {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

/* Figmaは「- ホーム」と半角ハイフンを本文に持っている。装飾なのでCSSで出す */
.fnav > li > a::before,
.fnav__head::before {
  content: "- ";
}

.fnav__sub a {
  display: block;
  padding-left: 1em;
  font-size: 16px;
  line-height: 40px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

/* 外部リンクアイコン。行の高さが40pxあるので、ベースラインぞろえだと
   文字よりかなり下に落ちて、改行したように見えてしまう */
.fnav__sub a img {
  margin-left: 4px;
  vertical-align: middle;
}

.fnav a:hover {
  color: var(--green);
  text-decoration: underline;
}

.site-footer__copy {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.site-footer__policy {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__policy a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--black);
  text-decoration: none;
}

.site-footer__policy a:hover {
  color: var(--green);
  text-decoration: underline;
}

/* 最下部の緑帯。Figma: 高さ40px / グリーンベース / 白14px中央 */
.site-footer__note {
  margin: 0;
  padding: 10px 16px;
  background: var(--green-base);
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  text-align: center;
}

/* 幅が足りなくなったら「サイト運営管理：〜」を丸ごと次の行へ回す。
   inline-block なので、行に収まらなければ塊ごと折り返す（文の途中で切れない）。
   さらに狭くて塊自体が入りきらない場合は、中で普通に折り返す */
.site-footer__note-admin {
  display: inline-block;
}

@media (max-width: 900px) {
  /* メニュー2列を本文の下へ回す */
  .site-footer__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .site-footer__brand,
  .site-footer__nav,
  .site-footer__copy,
  .site-footer__policy {
    grid-column: 1;
    grid-row: auto;
  }

  .site-footer__nav {
    padding-top: 0;
  }

  .site-footer__logo {
    margin-top: 0;
  }

  /* 行間はデスクトップの line-height:40px から padding に置き換える。
     行の高さを稼ぎつつ、文字が折り返しても行間が保たれる。
     タップ領域としても40pxを超えるようにしている */
  .fnav > li > a,
  .fnav__head,
  .fnav__sub a {
    line-height: 1.6;
    padding-block: 12px;
  }

  .site-footer__copy {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .site-footer__logo img {
    width: 200px;
  }

  .site-footer__nav {
    flex-direction: column;
    gap: 0;
  }

  .fnav > li > a,
  .fnav__head,
  .fnav__sub a {
    white-space: normal;
  }

  .site-footer__copy {
    white-space: normal;
  }
}

/* OSで「視差効果を減らす」が有効ならドロワーは即座に開閉し、矢印も動かさない */
@media (prefers-reduced-motion: reduce) {
  .site-header__body,
  .is-open .site-header__body,
  .nav-overlay {
    transition: none;
  }

  .btn img:last-child {
    transition: none;
  }

  .btn:hover img:last-child {
    transform: none;
  }
}

/* ==========================================================
   ログイン案内モーダル / ログインフォーム
   Figma: ログイン (781:14213) ＝ 案内モーダル
          フォームはFigmaに無く「ログインフォーム参考.png」から起こした
   ========================================================== */

/* <dialog> の既定の枠と余白を消して、パネルだけを見せる */
.login-modal {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;          /* 閉じるボタンが角からはみ出すため */
  max-width: none;
  max-height: none;
}

.login-modal::backdrop {
  /* Figma: 51,51,51 の50%。mix-blend-multiply は白背景では通常の重ねと同じに見える */
  background: rgba(51, 51, 51, 0.5);
}

/* ---- reCAPTCHA を出すときのログインフォーム ----
   画像チャレンジ（「信号を選べ」のパネル）は body 直下に作られる。
   showModal() で開いた dialog はブラウザの「最前面レイヤー」に載るため、
   body 直下の要素は z-index をいくら上げてもその後ろにしか来られず、
   チャレンジが暗幕の裏に隠れて操作できなくなる。
   そこでキーがあるときだけ show()（通常のレイヤー）で開き、
   最前面レイヤーが自動で描いてくれる暗幕を ::before で代替する。
   ★Google側のDOMには触らない。動かすと iframe が読み込み直しになり、
     チャレンジそのものが壊れる。 */
.login-modal--plain[open] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  z-index: 1000;   /* チャレンジは z-index 2000000000 なので前に出られる */
}

.login-modal--plain[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;     /* パネルの後ろ・ページの前 */
  background: rgba(51, 51, 51, 0.5);
}

.login-modal__panel {
  position: relative;
  width: min(800px, calc(100vw - 32px));
  padding: 20px;
  background: var(--white);
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.25);
}

/* ---- 緑の見出し帯 ---- */
.login-modal__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 8px 16px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.login-modal__body {
  padding: 14px 16px 16px;
  text-align: center;
}

.login-modal__lead {
  margin: 0;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
}

/* ---- 黄色いボタン（会員様ログイン／ログイン） ---- */
.login-modal__action {
  margin: 37px 0 0;
}

.login-modal__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  border: 0;
  border-radius: 26px;
  background: var(--yellow);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.login-modal__primary:hover {
  opacity: 0.85;
}

/* ---- 下線つきのテキストリンク（会員登録はこちら） ---- */
.login-modal__sub {
  /* インラインブロックのベースライン分の余白が出ないよう行送りを殺す */
  margin: 21px 0 0;
  line-height: 0;
}

/* Figmaでは下線まで含めて高さ30px。23+6+1で合わせている。
   ログアウト確認の「キャンセル」は <button> だが同じ見た目にそろえる */
.login-modal__sub a,
.login-modal__cancel {
  display: inline-block;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--green);
  background: none;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  text-decoration: none;
  cursor: pointer;
}

/* ---- 閉じるボタン。Figmaでは角から外へはみ出している ---- */
.login-modal__close {
  position: absolute;
  top: -12px;
  right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #707070;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* 画面が狭いとはみ出しぶんが切れるので内側へ寄せる */
@media (max-width: 840px) {
  .login-modal__close {
    top: 4px;
    right: 4px;
  }
}

/* ---- フォーム ---- */
.login-form {
  margin: 0;
}

.login-form__field {
  display: block;
  width: min(360px, 100%);
  margin: 0 auto;
  text-align: left;
}

.login-form__label {
  display: block;
  margin-bottom: 6px;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}

.login-form__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(51, 51, 51, 0.3);
  border-radius: 4px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 16px;   /* iOSで自動ズームさせないため16px以上にする */
}

.login-form__input:focus {
  border-color: var(--green);
  outline: 2px solid rgba(0, 97, 36, 0.25);
  outline-offset: 1px;
}

/* reCAPTCHA。中身はGoogleのiframe（304px固定）なので、
   位置と余白だけこちらで持つ。パスワード欄とログインボタンに合わせて中央に置く */
.login-form__recaptcha {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 狭い画面ではウィジェットがパネルからはみ出す。
   Google側のHTMLは触れないので、外から縮めて収める。
   縮めたぶん下に空きが残るので、負のマージンで詰める（78px×0.15≒12px） */
@media (max-width: 400px) {
  .login-form__recaptcha {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -12px;
  }
}

.login-modal__error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #c0392b;
  background: #fdf0ee;
  color: #c0392b;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.login-modal__note {
  margin: 21px 0 0;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
}

.login-modal__note a {
  color: var(--green);
}

/* ---- ログアウト後などの短い通知 ---- */
.login-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  margin: 0;
  padding: 12px 24px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 狭い画面では2行に折り返させる */
@media (max-width: 600px) {
  .login-modal__title {
    font-size: 17px;
  }

  .login-modal__lead {
    font-size: 15px;
    line-height: 24px;
  }

  .login-modal__lead br {
    display: none;
  }

  .login-modal__sub a,
  .login-modal__primary {
    font-size: 16px;
  }
}

/* ==========================================================
   未ログイン時の案内（地域の課題の詳細ページ）
   ========================================================== */

.contacts__locked {
  margin: 0 0 48px;
  padding: 40px 24px;
  border-radius: 6px;
  background: var(--gray-2);
  text-align: center;
}

.contacts__locked-text {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--black);
}

/* ==========================================================
   農業遺産の解説ページ（about-giahs.html / about-niahs.html）
   Figma: 世界農業遺産 (739:10607) / 日本農業遺産 (737:5365)

   ・ヒーローは既存の .page-hero をそのまま使い、
     「タイトル中央ぞろえ＋下に写真モザイク」の差分だけを --heritage で足す
   ・本文は .l-inner--narrow（1000px）。見出しは既存の .section-heading
   ========================================================== */

/* モザイク写真の上にタイトルを重ねる。緑帯は使わない。
   写真は全幅だが、英字ラベルとタイトルは他ページと同じ 1200px（.l-inner）に収める */
.page-hero--heritage {
  /* 英字ラベルのバーは連携事例ページと同じ水色→緑（Figma: #29ABE2 → #00A767） */
  --mark-1: #29abe2;

  position: relative;
  padding-block: 0;
  border-bottom-left-radius: 0;
  background: none;
}

/* 写真を暗くして白文字を読めるようにする（Figma: Rectangle 37） */
.page-hero--heritage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-hero__overlay > .l-inner {
  position: relative;
  height: 100%;
}

/* 英字ラベルは写真の上端から29px（写真が430pxのときの比率） */
.page-hero--heritage .page-hero__mark {
  position: absolute;
  top: 6.7%;
  left: var(--gutter);
  right: var(--gutter);
}

.page-hero--heritage .page-hero__title {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  letter-spacing: 0.1em;
  /* 字間を空けたぶん、行全体が左に寄って見えるのを打ち消す */
  text-indent: 0.1em;
}

/* ---------- ヒーロー下の写真モザイク ----------
   Figmaの実寸（1364×430）をそのまま比率にした8枚のグリッド。
   全幅なので l-inner の外に置く。 */
.hero-mosaic {
  display: grid;
  grid-template-columns: 160fr 564fr 320fr 160fr 160fr;
  grid-template-rows: 215fr 73fr 142fr;
  /* 画面幅にかかわらずFigmaと同じ高さの比率を保つ。
     max-height を足すと aspect-ratio の副作用で横幅まで縮んで全幅にならないので、
     高さは比率任せにする */
  aspect-ratio: 1364 / 430;
}

/* SP用の小さい画像へ差し替えるため、各タイルは picture で包んである。
   grid-area は picture 側に付くので、中の img は枠いっぱいに広げる */
.hero-mosaic picture {
  display: block;
  min-width: 0;
  min-height: 0;
}

.hero-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 8枚の配置。名前はFigmaの並び順ではなく左上からの位置で付けた */
.hero-mosaic__a { grid-area: 1 / 1 / 2 / 2; }
.hero-mosaic__b { grid-area: 2 / 1 / 4 / 2; }
.hero-mosaic__c { grid-area: 1 / 2 / 4 / 3; }
.hero-mosaic__d { grid-area: 1 / 3 / 3 / 4; }
.hero-mosaic__e { grid-area: 3 / 3 / 4 / 4; }
.hero-mosaic__f { grid-area: 1 / 4 / 2 / 6; }
.hero-mosaic__g { grid-area: 2 / 4 / 4 / 5; }
.hero-mosaic__h { grid-area: 2 / 5 / 4 / 6; }

/* ---------- 認定基準の番号付きリスト ----------
   「1. 食料及び生計の保障」を緑の見出しにして、説明文をぶら下げる */
.criteria {
  margin: 0 0 24px;
  list-style: none;
  counter-reset: criteria;
}

.criteria > li {
  margin-bottom: 12px;
}

.criteria__title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: var(--green);
}

/* 日本農業遺産だけの3基準は赤、保全計画は茶で色分けする（Figma） */
.criteria__title--jp {
  color: #d72d2d;
}

.criteria__title--plan {
  color: #815620;
}

/* 番号は counter で振る。「システムの持続性のための保全計画」だけ
   番号が付かないので、その項目は --nonum で外す */
.criteria > li:not(.criteria__item--nonum) .criteria__title::before {
  counter-increment: criteria;
  content: counter(criteria) ". ";
}

.criteria__body {
  margin: 0;
  padding-left: 1.4em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--black);
}

/* 補足（※1 ランドスケープ：…）。本文より一段小さく、色を落とす */
/* 本文中の参照マーク（※1）。Figmaでは本文18pxに対してここだけ14pxに落ちている */
.note-ref {
  font-size: 14px;
}

.note-small {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

/* ---------- リンクリストの点（・）バリエーション ----------
   地域ページは緑の三角だが、この2ページのFigmaは中黒になっている */
.link-list--dot > li::before {
  top: calc((1.8em - 5px) / 2);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--black);
  clip-path: none;
}

/* 地域別一覧の下にぶら下がる「取組事例集／全体版」の1行。
   Figmaは行頭の中黒が無く、上に1行ぶん空けてある。
   44px＝通常の行間8px＋1行ぶんの高さ36px */
.link-list--summary {
  margin-top: 44px;
}

.link-list--summary > li {
  padding-left: 0;
}

.link-list--summary > li::before {
  content: none;
}

/* 見出しのすぐ下に付く小見出し（「認定基準」「申請書作成のガイドライン」） */
.list-heading {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}

/* 図の上に置くラベル（●世界農業遺産申請フロー） */
.figure-label {
  margin: 24px 0 8px;
  padding-inline: 4px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}

/* 先頭の●だけ緑（Figma: #006124） */
.figure-label__mark {
  color: var(--green);
}

/* ---------- Q&A ---------- */
.qa {
  margin: 0 0 24px;
  padding: 24px 19px;
  border-radius: 12px;
  background: #e3f3e9;
}

.qa__item + .qa__item {
  margin-top: 24px;
}

/* 「Q1」と設問、「A.」と回答を2列に並べる。
   ラベル列の幅と左位置を左右でそろえ、ラベル自体は列の中央に置く。
   こうすると字幅の違う「Q1」と「A.」の中心がぴたりと重なる */
.qa__q,
.qa__a {
  display: grid;
  grid-template-columns: 41px 1fr;
  align-items: start;
  margin: 0;
}

.qa__label,
.qa__a-label {
  text-align: center;
}

.qa__q {
  padding: 0 15px 6px 7px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--green);
}

.qa__a {
  padding: 8px 15px 8px 7px;
  border-radius: 4px;
  background: var(--white);
}

.qa__a-label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--green);
}

.qa__a-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
}

/* 狭い画面ではラベルを詰める */
@media (max-width: 600px) {
  .qa {
    padding: 16px 12px;
  }

  .qa__q,
  .qa__a {
    grid-template-columns: 32px 1fr;
  }

  .qa__q {
    padding: 0 8px 6px 2px;
    font-size: 17px;
  }

  .qa__a {
    padding-inline: 2px 8px;
  }

  .qa__a-label {
    font-size: 17px;
  }
}

/* ---------- 解説ページのレスポンシブ ---------- */
@media (max-width: 900px) {
  /* 5列のままだと1枚あたりが細くなりすぎるので、
     大きい写真1枚＋左右2枚ずつの3列に組み替える */
  .hero-mosaic {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .hero-mosaic__a { grid-area: 1 / 1 / 2 / 2; }
  .hero-mosaic__b { grid-area: 2 / 1 / 3 / 2; }
  .hero-mosaic__c { grid-area: 1 / 2 / 3 / 3; }
  .hero-mosaic__d { grid-area: 1 / 3 / 2 / 4; }
  .hero-mosaic__e { grid-area: 2 / 3 / 3 / 4; }
  .hero-mosaic__f { grid-area: 3 / 1 / 4 / 2; }
  .hero-mosaic__g { grid-area: 3 / 2 / 4 / 3; }
  .hero-mosaic__h { grid-area: 3 / 3 / 4 / 4; }
}

/* ==========================================================
   オフィシャルサポーター申請・サポーターバンク登録
   （supporter-entry.html）
   Figma: サポーター申し込み (781:14097)

   左（申請）はピンク、右（バンク登録）は水色の2カラム。
   色だけが違う同じ構造なので、色は CSS変数で外から差し替える。
   ========================================================== */

.entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin: 56px 0 0;
}

/* 「農業遺産地域に関する活動実績のある方はこちら」
   文字は左ぞろえ、かたまりは中央。fit-content で行の長さまで縮めてから
   margin-inline:auto で中央に置く。2行になるときは長いほうの行の幅でそろう */
.entry__lead {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #000;
}

/* 広い画面は1行。狭いときだけ「農業遺産地域に関する／活動実績の…」で折る */
.entry__lead br {
  display: none;
}

/* 2列に並んでいるあいだ、1列ぶんは (1200-40)/2 = 580px しかない。
   見出しは1行で484px（実測）で、1列がこれを切るのは1055px以下。
   そこだけのために区切りを増やさず、ほかと同じ1199pxで <br> を出している */
@media (max-width: 1199px) {
  .entry__lead br {
    display: inline;
  }
}

/* 色の付く語だけ差し替える */
.entry__lead em {
  font-style: normal;
  color: var(--entry-key);
}

/* 色はカラム単位で持たせる。見出し（.entry__lead）はパネルの外にあるので、
   パネル側に置くと見出しの色分けが効かない */
.entry__col {
  --entry-key: #d4656a;
  --entry-tint: #f1d7d8;
  --entry-badge: #eeaaad;
  --entry-row: rgba(241, 215, 216, 0.4);

  /* 左右のパネルの高さをそろえる（グリッドで伸びた高さをパネルまで渡す） */
  display: flex;
  flex-direction: column;
}

.entry__col--bank {
  --entry-key: #348dd5;
  --entry-tint: #c6e0f5;
  --entry-badge: #86bbe6;
  --entry-row: rgba(198, 224, 245, 0.4);
}

.entry__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 4px solid var(--entry-tint);
  border-radius: 20px;
  background: var(--white);
}

/* 見出し帯は枠線と同じ色。パネル側を overflow:hidden でクリップすると
   境目に細い隙間が出るので、帯自身で角を丸める（外側20px − 枠線4px ＝ 16px） */
.entry__title {
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px 16px 0 0;
  background: var(--entry-tint);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #000;
}

.entry__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 21px;
}

/* ---------- STEPの行 ---------- */
.entry-step {
  display: flex;
  align-items: stretch;
  /* Figmaの行はすべて70px。1行だけの行（STEP4など）が
     テキストの高さまで縮まないよう下限を決める */
  min-height: 70px;
  background: var(--entry-row);
}

.entry-step__no {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--entry-badge);
  color: var(--white);
  line-height: 1.2;
}

.entry-step__no-label {
  font-size: 14px;
  font-weight: 700;
}

.entry-step__no-num {
  font-size: 28px;
  font-weight: 700;
}

.entry-step__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 12px 16px;
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

/* 「※●●●●●かかる場合がございます」など、STEP内の補足。太字は本文だけに掛ける */
.entry-step__note {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* STEP2の行末に付く赤い「※1」。Figmaでは本文より小さく、太字でもない */
.entry-step__text .entry-box__mark {
  font-size: 16px;
  font-weight: 400;
}

/* STEP間の下向き三角 */
.entry-arrow {
  display: block;
  width: 20px;
  height: 14px;
  margin: 9px auto;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* STEP1の下にぶら下がるダウンロードリンク */
.entry-files {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.entry-files li + li {
  margin-top: 6px;
}

.entry-files a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-files a:hover {
  color: var(--green);
}

/* パネル内の注記（※地域の課題の詳細が閲覧可能になります。） */
.entry__note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

/* パネル下部の白い囲み。左右でSTEP数が違うので底に寄せて開始位置をそろえる。
   margin-top:auto は余白が無いと0になるため、直前の要素側で最低20pxを確保する */
.entry__body > :nth-last-child(2) {
  margin-bottom: 20px;
}

.entry-box {
  margin-top: auto;
  padding: 20px 21px;
  border: 1px solid var(--border);
  background: var(--white);
  color: #3e3a39;
}

/* 「サポーターバンクとは」の見出し。STEPの説明文と同じ級数・太さにそろえる。
   下の .entry-box p（16px）に負けないよう要素名を足して詳細度を上げている。
   背景はカラムの色を引く（Figma: 879:2776 ＝ バンク側で #c6e0f5） */
.entry-box p.entry-box__title {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 5px;
  padding: 2px 10px;
  background: var(--entry-tint);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.entry-box p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.entry-box__mark {
  color: #d72d2d;
}

/* ---------- 申請フローの図（Figma: 878:2759） ----------
   左パネルのSTEP2の下に入る。図形とテキストで組まれているので画像にせず
   HTMLで起こしてある。文字が読めなくなるので、狭い画面では2段に折る */
.entry-flow {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--entry-badge);
  border-radius: 4px;
  background: var(--entry-row);
  font-weight: 700;
  color: #333;
}

.entry-flow__cols {
  display: grid;
  /* Figmaは 288 : 203。左が広いのは協議会の枝があるため */
  grid-template-columns: minmax(0, 288fr) minmax(0, 203fr);
  gap: 9px;
}

.entry-flow__col {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background: var(--white);
}

/* グレーの見出し帯。上だけ角丸 */
.entry-flow__head {
  margin: 0;
  padding: 5px 10px;
  border-radius: 4px 4px 0 0;
  background: #707070;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--white);
}

/* 「広域的な活動等」の下の但し書き。図の中でここだけ通常ウェイト */
.entry-flow__def {
  margin: 8px 9px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  color: #3e3a39;
}

/* A社 / B社 の青いチップ */
.entry-flow__co {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-height: 40px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: #668fb1;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}

/* 右の列はA社のような枝が無いので中央に置く */
.entry-flow__co--wide {
  margin: 10px auto 0;
}

/* A社 →（枝）→ 2つの協議会 */
.entry-flow__chart {
  display: flex;
  align-items: center;
  margin: 10px 10px 0;
}

/* 枝。A社の右辺の中央から、2つの協議会の中央へ直線を2本引く（Figma: 878:2762）。
   上下の margin 20px は協議会の箱（高さ40px）の半分。これで線の端が箱の中央にそろう。
   preserveAspectRatio="none" で枠に合わせて伸ばし、線の太さだけ非拡大にしている */
.entry-flow__branch {
  flex: 0 0 62px;
  align-self: stretch;
  margin: 20px 0;
}

.entry-flow__branch svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.entry-flow__branch path {
  fill: none;
  stroke: #333;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.entry-flow__councils {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 地域協議会の緑のチップ */
.entry-flow__councils li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #79ad8c;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: var(--white);
}

.entry-flow__apply {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

/* 「意見書が必要／不要」の白い囲み。パネルの底に寄せて左右の高さをそろえる */
.entry-flow__need {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 6px 10px 10px;
  padding: 6px 4px;
  border: 1px solid #333;
  border-radius: 4px;
  background: var(--white);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

.entry-flow__col > .entry-flow__need {
  margin-top: auto;
}

.entry-flow__need em {
  font-style: normal;
  color: #d72d2d;
}

/* 様式番号はFigmaどおり次の行に落とす */
.entry-flow__form {
  display: block;
  font-size: 16px;
}

/* 2列から農林水産省へ下りる2本の三角 */
.entry-flow__arrows {
  display: grid;
  grid-template-columns: minmax(0, 288fr) minmax(0, 203fr);
  gap: 9px;
  margin: 6px 0;
}

.entry-flow__arrows::before,
.entry-flow__arrows::after {
  content: "";
  width: 20px;
  height: 14px;
  margin-inline: auto;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 黄色の帯。文字はサイトの緑 */
.entry-flow__maff {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: #ffd900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--green);
}

.entry-flow__result {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

/* 広い画面は1行。狭いときだけ「踏まえ／「サポーター」に…」で折る */
.entry-flow__result br {
  display: none;
}

.entry-flow__result em {
  font-style: normal;
  color: #d72d2d;
}

/* ---------- 2カラムの下の注記（Figma: 781:14127） ---------- */
.entry-notes {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
  color: #3e3a39;
}

/* ---------- 自治体の方への案内（Figma: 878:2774） ----------
   赤い線の角丸。中の文字も赤 */
.entry-alert {
  margin: 35px 0 0;
  padding: 10px 20px;
  border: 1px solid #d72d2d;
  border-radius: 24px;
  background: var(--white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #d72d2d;
}

/* ---------- 提出先 ----------
   お問合せ先（.contact__box）と似ているが、枠が緑・ラベルが緑ベタで別物 */
.submit-to {
  margin: 57px 0 0;
}

.submit-to__box {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 940px;
  margin-inline: auto;
  padding: 0 30px 0 0;
  border: 1px solid var(--green);
  background: var(--white);
}

.submit-to__label {
  flex: 0 0 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin: 0;
  background: var(--green);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--white);
}

.submit-to__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 28px;
  font-weight: 700;
  color: #000;
}

/* 下の .submit-to__body p（16〜18px）に負けないよう要素名を足して詳細度を上げている。
   .entry-box p.entry-box__title と同じ理由 */
.submit-to__body p.submit-to__dept {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}

.submit-to__body p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.submit-to__note {
  font-size: 16px !important;
}

/* ---------- 申請ページのレスポンシブ ---------- */
@media (max-width: 900px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 40px;
  }

  .entry__title {
    font-size: 20px;
  }

  .entry__body {
    padding: 16px;
  }

  .entry-step__no {
    flex-basis: 56px;
  }

  .entry-step__text {
    padding: 10px 12px;
    font-size: 16px;
  }

  .entry-box {
    padding: 16px 18px;
  }

  .submit-to__box {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .submit-to__label {
    min-height: 56px;
    flex-basis: auto;
  }

  .submit-to__body {
    padding: 16px 20px 20px;
  }

  /* 部署名は折り返すので、下の「担当者：」との間を広めに取る */
  .submit-to__body p.submit-to__dept {
    margin-bottom: 14px;
    font-size: 19px;
  }

  .submit-to__body p {
    font-size: 16px;
  }
}

/* 申請フローの図は左パネルの中に入るので、SPでは2列が保てない。
   横並びをやめて縦積みにし、字も1段落とす */
@media (max-width: 600px) {
  .entry-flow {
    padding: 10px;
  }

  .entry-flow__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .entry-flow__head,
  .entry-flow__co,
  .entry-flow__councils li,
  .entry-flow__apply,
  .entry-flow__need,
  .entry-flow__maff,
  .entry-flow__result {
    font-size: 16px;
  }

  .entry-flow__def {
    font-size: 13px;
  }

  .entry-flow__form {
    font-size: 14px;
  }

  /* 縦積みにすると列は1つなので、下向きの三角も1つにする */
  .entry-flow__arrows {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-flow__arrows::after {
    display: none;
  }

  /* 高さをそろえる必要が無くなるので、底寄せをやめる */
  .entry-flow__col > .entry-flow__need {
    margin-top: 6px;
  }

  /* 協議会の箱に文字が入るよう、枝の幅を詰める */
  .entry-flow__branch {
    flex-basis: 34px;
  }

  .entry-flow__result br {
    display: inline;
  }

  .entry-notes {
    font-size: 14px;
  }

  .entry-alert {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 16px;
    text-align: left;
  }
}

/* 「申請から認定まで」の❶〜⓯。丸数字はデザイン側の字形をそのまま使うので
   list-style は消して、字下げだけそろえる */
.flow-steps {
  margin: 0 0 24px;
  padding-inline: 4px;
  list-style: none;
}

.flow-steps li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
}

/* ❶〜⓯ の丸数字だけ緑（Figma: #00913a＝グリーンベース） */
.flow-steps__no {
  color: var(--green-base);
}

.flow-steps li + li {
  margin-top: 10px;
}

/* ==========================================================
   ページ先頭へ戻るボタン
   ========================================================== */

.pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-heading);

  /* スクロールするまでは隠しておく。表示の切り替えは js/pagetop.js */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}

.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ホバーは濃い緑。--green-base だとTOPのセクション3の緑背景と同じ色になり、
   重なったときにボタンの輪郭が消えてしまう */
.pagetop:hover {
  background: #00491b;
}

/* 上向きの「∧」。文字ではなく2辺の傾きで作ると、書体に左右されない */
.pagetop__arrow {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

.pagetop__text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 読み上げ用。見た目には出さない */
.pagetop__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .pagetop {
    right: 16px;
    bottom: 16px;
    width: 60px;
    height: 60px;
  }

  .pagetop__text {
    font-size: 12px;
  }
}

/* =========================================================
   地域×企業 連携事例 一覧（case/index.html）
   Figma: サポート事例一覧_リスト型 (14:1134)
          サポート事例一覧_タイル型 (427:4810)

   カードは全件をHTMLに出しておき、絞り込み・ページ送り・表示切替は
   js/case-list.js が .is-hidden の付け外しでやる。
   ========================================================= */

/* 読み上げ用。見た目には出さない */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ページタイトルの「×」だけ緑（Figma: 669:10083） */
.page-title__x {
  color: var(--green);
}

/* ---------- 詳細検索パネル（Figma: Rectangle 9 / 1200×440・角丸20px） ---------- */
.case-search {
  /* 開閉は grid の行を 1fr→0fr へ送って高さを動かす。
     max-height と違って当て推量の上限がいらず、中身が増えても調整不要 */
  display: grid;
  grid-template-rows: auto 1fr;
  transition: grid-template-rows 0.3s ease, padding-bottom 0.3s ease;
  margin-top: 43px;
  /* 白ボックスの下の余白は、パネル側の padding で確保する。
     白ボックスに margin-bottom を持たせると、最後の子の margin が
     パネルの外へ抜けてしまい（margin の相殺）緑地が下で切れる */
  padding-bottom: 50px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--green-base);
}

/* 折りたたんだときは緑の帯だけにする */
.case-search.is-closed {
  grid-template-rows: auto 0fr;
  padding-bottom: 0;
}

/* 行の高さに合わせて中身を潰す入れ物。display:none だとアニメーションできない。
   閉じ切ってから visibility を切り、隠れた項目にタブで入らないようにする */
.case-search__panel {
  overflow: hidden;
  min-height: 0;
  transition: visibility 0s;
}

.case-search.is-closed .case-search__panel {
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

/* 動きを減らす設定の環境では、開閉を一瞬で切り替える */
@media (prefers-reduced-motion: reduce) {
  .case-search,
  .case-search__panel,
  .case-search__toggle-bar::before,
  .case-list {
    transition: none;
  }
}

.case-search__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}

.case-search__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  /* letter-spacing は最後の文字の右にも入るので、その分だけ左へ寄せて中央に見せる */
  margin-right: -0.1em;
  color: var(--white);
}

/* 開閉ボタン（Figma: Rectangle 19 / 46×46 の当たり判定に横線24px） */
.case-search__toggle {
  position: absolute;
  top: 12px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  cursor: pointer;
}

.case-search__toggle-bar {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
}

/* 閉じているときは縦棒を足して＋にする */
.case-search__toggle-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: rotate(90deg) scaleX(0);
  transition: transform 0.2s ease;
}

.case-search.is-closed .case-search__toggle-bar::before {
  transform: rotate(90deg) scaleX(1);
}

/* 白ボックス（Figma: Rectangle 10 / 1100×320・角丸12px） */
.case-search__body {
  width: calc(100% - 100px);
  margin: 0 auto;
  padding: 36px 30px 24px;
  border-radius: 12px;
  background: var(--white);
}

/* ---------- 活動内容から探す ---------- */
.case-search__acts {
  display: flex;
  align-items: center;
  gap: 38px;
}

.case-search__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* 左詰めで並べつつ、最後のボタンが白ボックスの右端で終わるようにする
   （Figmaはアイコン間が53pxで、ちょうど右端に着地している） */
.case-search__act-list {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.case-search__act {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--green);
  cursor: pointer;
}

/* 白丸＋緑枠はCSSで描き、中のグリフだけ画像で差し替える。
   事例ページの .case-cat__icon と同じ作りで、ホバーと選択で中が黄色になる */
.case-search__act-icon {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: var(--white);
  transition: background-color 0.2s ease;
}

.case-search__act-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
}

/* ホバーは選択時と同じ黄色を白で70%薄めた色。選択との差をつけるため */
.case-search__act:hover .case-search__act-icon {
  background: #fff3b3;
}

/* 選択が優先。詳細度が同じなのでホバーより後に置く */
.case-search__act[aria-pressed="true"] .case-search__act-icon {
  background: var(--mark-1);
}

.case-search__divider {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: var(--border);
}

/* ---------- プルダウン（Figma: Group 84 ほか / 333×52・角丸4px） ---------- */
.case-search__selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.case-search__select {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  height: 52px;
  border: 1px solid var(--black);
  border-radius: 4px;
  background: var(--white);
}

/* ラベルは縦線までの幅（78px）のなかで左右中央に置く。
   縦線は枠の高さいっぱいではなく30pxだけ引く */
.case-search__select-label {
  position: relative;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.case-search__select-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 30px;
  background: var(--black);
  transform: translateY(-50%);
}

.case-search__select select {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 18px;
  border: 0;
  outline: 0;
  border-radius: 0 4px 4px 0;
  /* 三角は14px。右から27pxの位置に置く（Figma: Polygon 1） */
  background:
    linear-gradient(45deg, transparent 50%, var(--green) 50%) calc(100% - 27px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--green) 50%, transparent 50%) calc(100% - 20px) 50% / 7px 7px no-repeat,
    var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  /* 企業名・地域名には枠に収まらないものがある。
     途中で断ち切らず「…」で省略する */
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}

/* ---------- 検索ボタン ---------- */
.case-search__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
}

/* 白地・緑枠の丸ボタン（Figma: ボタン 427:4882 / 224×56・枠2px・角丸28px）。
   .btn--outline より枠が太く背が高いので別のバリエーションにする */
.btn--search {
  min-width: 224px;
  height: 56px;
  padding: 0 40px;
  border: 2px solid var(--green);
  border-radius: 28px;
  background: var(--white);
  color: var(--green);
  font-size: 16px;
}

/* 件数だけ一回り大きく出す。2桁ぶんの幅を確保して、桁が変わっても幅が動かないようにする */
.btn--search__num {
  display: inline-block;
  min-width: 2ch;
  font-size: 20px;
  text-align: center;
}

.btn--search:hover {
  background: var(--green);
  color: var(--white);
}

.btn--search:hover img {
  filter: brightness(0) invert(1);
}

.case-search__clear {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--black);
  cursor: pointer;
}

.case-search__clear:hover {
  text-decoration: underline;
}

/* ---------- 検索結果のヘッダ ---------- */
.case-result {
  margin-top: 50px;
}

.case-result__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* 件数だけ32px・緑。単位の「件」は18px（Figma: 427:4889） */
.case-result__count {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.case-result__num {
  margin: 0 4px 0 12px;
  font-size: 32px;
  font-weight: 700;
  color: var(--green);
}

.case-result__views {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-result__views-label {
  font-size: 16px;
  font-weight: 700;
}

.case-result__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 96px;
  height: 32px;
  border: 1px solid var(--green);
  border-radius: 16px;
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 選ばれていない側だけ、ホバーで薄く色を敷く */
.case-result__view:not(.is-current):hover {
  background: rgba(0, 97, 36, 0.08);
}

.case-result__view.is-current {
  background: var(--green);
  color: var(--white);
}

/* 表示切替のアイコン。4.22pxの四角を5.89px間隔で並べたもの（Figma実測） */
.case-result__view-icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.case-result__view-icon--tile {
  background-image:
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-repeat: no-repeat;
  background-size: 4.22px 4.22px;
  background-position:
    0 0, 5.89px 0, 11.78px 0,
    0 5.89px, 5.89px 5.89px, 11.78px 5.89px,
    0 11.78px, 5.89px 11.78px, 11.78px 11.78px;
}

/* 左に四角3つ、右に横棒3本 */
.case-result__view-icon--list {
  background-image:
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-repeat: no-repeat;
  background-size:
    4.22px 4.22px, 4.22px 4.22px, 4.22px 4.22px,
    9.6px 1.5px, 9.6px 1.5px, 9.6px 1.5px;
  background-position:
    0 0, 0 5.89px, 0 11.78px,
    6.4px 1.36px, 6.4px 7.25px, 6.4px 13.14px;
}

/* ---------- 選択中の条件 ---------- */
.case-result__conds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 35px;
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* 値が長いと、inline-flex ではラベルと「|」が別々に折り返して分断される。
   通常のテキストとして流し、min-width: 0 で枠のなかに収める */
.case-result__conds span {
  display: block;
  min-width: 0;
}

.case-result__conds span::before {
  content: "●";
  margin-right: 4px;
  color: var(--green);
}

.case-result__conds b {
  font-weight: 700;
}

/* ---------- 一覧 ---------- */
/* 表示切替のときは、いったん薄くしてから並べ替える */
.case-list {
  margin-top: 38px;
  list-style: none;
  transition: opacity 0.16s ease;
}

.case-list.is-switching {
  opacity: 0;
}

.case-item.is-hidden {
  display: none;
}

.case-item__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.case-item__thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gray-2);
}

.case-item__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 292 / 222;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* カードは全体がリンク。画像だけ寄る（area の一覧と同じ見せ方） */
.case-item__link:hover .case-item__thumb img {
  transform: scale(1.06);
}

/* 地域一覧のカードと同じで、ホバーでタイトルを緑にして細い下線を出す */
.case-item__link:hover .case-item__title,
.case-item__link:focus-visible .case-item__title {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.case-item__body {
  display: flex;
  flex-direction: column;
}

.case-item__meta {
  font-size: 16px;
  line-height: 1.5;
}

.case-item__title {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.case-item__excerpt {
  /* リスト型は3行で打ち切る（Figma: 72px = 24px × 3行） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.case-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.case-item__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--green);
  font-size: 15px;
  line-height: 1.2;
  color: var(--white);
}

/* ---------- タイル型（Figma: 事例カード 378×494） ---------- */
.case-list--tile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 33px;
  row-gap: 40px;
}

.case-list--tile .case-item,
.case-list--slider .case-item {
  padding: 20px;
  border-radius: 12px;
  background: var(--white);
}

.case-list--tile .case-item__body,
.case-list--slider .case-item__body {
  margin-top: 16px;
}

/* タイル型はバッジが画像のすぐ下、抜粋は出さない */
.case-list--tile .case-item__tags,
.case-list--slider .case-item__tags {
  order: -1;
  margin-bottom: 16px;
}

.case-list--tile .case-item__excerpt,
.case-list--slider .case-item__excerpt {
  display: none;
}

/* ---------- リスト型（Figma: Group 89 ほか / 画像338px＋本文827px） ---------- */
.case-list--list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-list--list .case-item__link {
  display: grid;
  grid-template-columns: 338px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.case-list--list .case-item__meta {
  font-size: 18px;
}

.case-list--list .case-item__title {
  font-size: 28px;
}

/* リスト型はバッジが本文の下 */
.case-list--list .case-item__tags {
  margin-top: 20px;
}

/* ページがまだ無い事例（準備中）。lib/data/coming.php を空にすれば消える */
.case-item--coming .case-item__link {
  cursor: default;
}

.case-item--coming .case-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 292 / 222;
  border: 1px dashed var(--border);
}

.case-item__soon {
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}


.case-list__empty {
  margin: 60px 0 0;
  padding: 48px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}

/* ---------- ページ送り ---------- */
.case-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 113px 0 138px;
  font-size: 16px;
}

/* 1ページに収まるときは中身が空になる。下の余白だけ残す */
.case-pager:empty {
  margin: 0 0 138px;
}

.case-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  cursor: pointer;
}

.case-pager__num.is-current {
  background: var(--green);
  color: var(--white);
  cursor: default;
}

.case-pager__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--green);
  cursor: pointer;
}

.case-pager__step--prev {
  margin-right: 7px;
}

.case-pager__step--next {
  margin-left: 6px;
}

/* 「前へ」の矢印だけ左向きにする */
.case-pager__step--prev img {
  transform: scaleX(-1);
}

.case-pager__step:disabled {
  opacity: 0.35;
  cursor: default;
}

.case-pager__step:not(:disabled):hover {
  text-decoration: underline;
}

/* 「検索結果」だけ16px。件数32px・単位18px（Figma: 427:4888 / 427:4889） */
.case-result__count-label {
  font-size: 16px;
}

/* ---------- 連携事例一覧のレスポンシブ ---------- */
/* 検索パネルはヘッダーがドロワーに変わるのと同じ幅で組み替える。
   これより広い組み方のままだと、活動内容の5つが1行に収まらない */
@media (max-width: 1199px) {
  .case-search {
    margin-top: 32px;
    padding-bottom: 28px;
    border-radius: 14px;
  }

  .case-search__head {
    height: 60px;
  }

  .case-search__title {
    font-size: 22px;
  }

  .case-search__toggle {
    top: 7px;
    right: 6px;
  }

  .case-search__body {
    width: calc(100% - 40px);
    padding: 24px 20px 20px;
  }

  /* ラベルを1行使い、アイコンは3列で折り返す */
  .case-search__acts {
    display: block;
  }

  .case-search__label {
    margin-bottom: 16px;
  }

  .case-search__act-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .case-search__act {
    justify-content: flex-start;
    font-size: 16px;
  }

  .case-search__selects {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .case-result {
    margin-top: 36px;
  }

  .case-list--tile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
  }

  .case-list--tile .case-item,
  .case-list--slider .case-item {
    padding: 12px;
  }

  .case-item__title {
    font-size: 20px;
  }

  .case-list--list .case-item__link {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }

  .case-list--list .case-item__meta {
    font-size: 16px;
  }

  .case-list--list .case-item__title {
    font-size: 22px;
  }

  .case-pager {
    margin: 70px 0 90px;
  }

  .case-pager:empty {
    margin: 0 0 90px;
  }
}

@media (max-width: 600px) {
  .case-search__title {
    font-size: 20px;
  }

  .case-search__body {
    width: calc(100% - 24px);
    padding: 20px 16px 16px;
  }

  .case-search__act-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-search__act {
    gap: 8px;
    font-size: 15px;
  }

  .case-search__act-icon {
    width: 44px;
    height: 44px;
  }

  /* 52pxで書き出したグリフを44pxの丸に収める。
     倍率で縮めるので、横長のPR活動も同じ比率のまま収まる */
  .case-search__act-icon img {
    transform: translate(-50%, -50%) scale(0.72);
  }

  .case-search__select {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .case-search__select-label {
    font-size: 15px;
  }

  .case-search__select select {
    padding-right: 36px;
    font-size: 15px;
  }

  /* 幅が足りないとラベルが折り返すので、左右の余白を詰めて1行に収める */
  .btn--search {
    min-width: 0;
    width: 100%;
    padding: 0 16px;
  }

  .btn--search span {
    white-space: nowrap;
  }

  /* 件数と表示切替を上下に分ける */
  .case-result__bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 1カラムになるので、リスト型とタイル型で段組の差が無くなる。
     押しても段組が変わらないボタンは誤解を招くので、切替ごと出さない。
     下の .case-list--list の上書きで、どちらの状態でも同じ見え方にしてある */
  .case-result__views {
    display: none;
  }

  /* 「活動内容から探す」は中央に置く */
  .case-search__label {
    text-align: center;
  }

  .case-result__conds {
    gap: 6px 20px;
    font-size: 13px;
  }

  /* カードに枠も背景差も無いので、余白だけが区切りになる。
     1カラムでは40pxでは足りず、広い画面より大きく取る */
  .case-list--tile {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }

  /* タイル型は1カラムで全幅になるので、枠の余白は取らない */
  .case-list--tile .case-item {
    padding: 0;
  }

  /* 幅が狭いとリスト型でも横並びは苦しいので、画像を上に積む。
     切替ボタンを出していないぶん、タイル型と同じ見え方にそろえる。
     広い画面でリスト型を選んだまま縮めてもここに入るので、
     JSで戻すのではなくCSSでそろえている（読み込み直後にちらつかない） */
  .case-list--list {
    gap: 64px;
  }

  .case-list--list .case-item__link {
    display: block;
  }

  .case-list--list .case-item__body {
    margin-top: 16px;
  }

  /* バッジは画像のすぐ下（タイル型と同じ位置） */
  .case-list--list .case-item__tags {
    order: -1;
    margin-top: 0;
    margin-bottom: 16px;
  }

  /* 抜粋は本文冒頭200文字の機械抽出で、文の途中で切れる。
     狭い画面では出さない（タイル型と同じ） */
  .case-list--list .case-item__excerpt {
    display: none;
  }

  .case-list--list .case-item__meta,
  .case-item__meta {
    font-size: 15px;
  }

  .case-list--list .case-item__title,
  .case-item__title {
    font-size: 19px;
  }

  .case-item__excerpt {
    font-size: 15px;
  }

  .case-item__tag {
    padding: 3px 8px;
    font-size: 13px;
  }

  .case-pager {
    flex-wrap: wrap;
    gap: 8px;
    margin: 56px 0 72px;
  }

  .case-pager:empty {
    margin: 0 0 72px;
  }

  .case-pager__step--prev,
  .case-pager__step--next {
    margin: 0;
  }
}

/* =========================================================
   TOPページ
   Figma: TOP (95:493)  ファイル qS6d03vuoGHOwZz9jgwQXf「農水省0903」
   ========================================================= */

/* ---------- 1. メインビジュアル（Figma: 1_TOP_MV 99:495） ----------
   写真は全幅。左下だけ 60px の角丸。写真の下に事例の情報バーが乗る。
   Figmaのバーの左右は 74px / 82px で、1200px のコンテナとほぼ一致するため
   既存の .l-inner をそのまま使う */
/* MV の下の余白は「2. 募集リード」の padding-top で取っている */

/* Figmaのデザイン幅（1366px）まで広げ、それより広い画面では中央に置く。
   情報バーは1200pxなので、MVのほうが左右に張り出す。これがFigmaと同じ関係。
   画面が1366pxより狭いときは左右の端まで使う（Figmaでも端まで届いている） */
.mv__stage {
  position: relative;
  width: min(100%, 1366px);
  height: 497px;
  margin-inline: auto;
  border-bottom-left-radius: 60px;
  background: var(--gray-2); /* 全表示のときに見える下地 */
  overflow: hidden;
}

/* SPだけ別の写真に差し替える事例のために img を picture で包んでいる。
   picture は既定でインラインなので、枠いっぱいの箱にして中の img の 100% を効かせる */
.mv__stage picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* 事例のメイン画像は最大1200px幅で縦横比もまちまちなので、
   引き伸ばさず中央を基準に切り取る */
.mv__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦の切り取り位置。0% が上端で、既定は中央。対象は index.html の $MV_POS */
  object-position: center var(--mv-pos, center);
  position: relative;
  z-index: 1;
}

/* 縦長・極端な横長の事例は切らずに収める。余った左右（または上下）は
   下に敷いた .mv__bg が見える。対象は index.html の $MV_CONTAIN */
.mv__image.is-contain {
  object-fit: contain;
}

/* 画面を狭めたときだけ収める事例（index.html の $MV_CONTAIN_NARROW） */
@media (min-width: 601px) and (max-width: 1320px) {
  .mv__image.is-contain-narrow {
    object-fit: contain;
    object-position: center;
  }
}

/* 収めたときの余白に同じ写真を敷く。ぼかしたうえでコントラストを落とし、
   写真ごとの濃さの差が出ないようにする。切り抜きのときは写真の下に隠れる */
.mv__bg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(.95) brightness(1.12) contrast(.45);
  /* 枠と同じ大きさに置いてから少しだけ広げる。ぼかしの端が薄くなるのを隠しつつ、
     幅の計算がずれて右に隙間ができることがない。あわせてレイヤーに固定する */
  transform: scale(1.06) translateZ(0);
  will-change: filter;
}

/* 切り抜きのときは写真が全面を覆うので、下に敷く必要がない */
.mv__bg[hidden] {
  display: none;
}

.mv__catch {
  position: absolute;
  z-index: 2;
  left: 51px;
  top: 194px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  /* 写真の明るい部分に重なっても読めるようにする */
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

/* 右側の黄色い丸バッジ。外側の円と、内側に一回り小さい円を重ねる */
/* 写真の右下に置く。右端からの距離はFigmaと同じ19pxで、下端も同じだけ空ける */
.mv__badge {
  position: absolute;
  z-index: 2;
  right: 19px;
  bottom: 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 186px;
  height: 186px;
  border-radius: 50%;
  background: var(--yellow);
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

/* 内側の細い円（Figma: Ellipse 5 の156px） */
.mv__badge::before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid var(--green);
  border-radius: 50%;
}

.mv__badge:hover {
  opacity: 0.85;
}

.mv__badge-lead {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.mv__badge-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--green);
}

/* 写真は同じ大きさのレイヤーを2枚重ねてある。奥に次の写真を用意してから手前と入れ替えるので、
   途中で下地が見えない（クロスフェード）。切り替えは js/top.js が受け持つ */
.mv__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 長さは js/top.js が --mv-fade に入れる。ここの値はJSが動かないときの備え */
  transition: opacity var(--mv-fade, 2s) ease-in-out;
}

.mv__layer.is-current {
  opacity: 1;
}

/* 下の文字とサムネイル列は薄くして、差し替えてから戻す。
   写真が溶けきる時間の半分を、消えるのと現れるのに充てるので、写真と歩調が合う。
   長さは js/top.js が --mv-swap に入れる */
.mv__current,
.mv__thumbs {
  transition: opacity var(--mv-swap, 1s) ease-in-out;
}

.mv__current.is-switching,
.mv__thumbs.is-switching {
  opacity: 0;
}

/* 動きを減らす設定のときは溶かさずに入れ替える */
@media (prefers-reduced-motion: reduce) {
  .mv__layer {
    transition: none;
  }
}

/* ---------- メインビジュアル下の事例バー ---------- */
.mv__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-top: 20px;
}

.mv__current {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

/* 地域名。右の縦線は擬似要素で引く（地域名が無い事例では要素ごと隠れる） */
.mv__area {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding-right: 16px;
  padding-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

.mv__area::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 1px;
  height: 16px;
  background: #ccc;
}

.mv__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

.mv__more {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mv__more:hover {
  color: var(--green);
}

/* 矢印は文字と同じ色で、ホバーでわずかに右へ送る */
.mv__arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.mv__more:hover .mv__arrow,
.mv__next:hover .mv__arrow {
  transform: translateX(3px);
}

/* ---------- サムネイル ---------- */
.mv__picker {
  flex: 0 0 auto;
}

.mv__thumbs {
  display: flex;
  gap: 6px;
  /* すぐ下の「別の5件を見る」と近いと押し間違えるので離す */
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.mv__thumb button {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.mv__thumb button:hover {
  opacity: 0.8;
}

/* いま表示中の1枚を緑の枠で示す */
.mv__thumb.is-current button {
  border-color: var(--green);
}

.mv__thumb img {
  width: 64px;
  height: 48px;
  object-fit: cover;
}

.mv__next {
  display: block;
  margin-left: auto;
  /* 文字だけだと押せる範囲が狭いので上下に広げる */
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mv__next:hover {
  color: var(--green);
}

/* ---------- メインビジュアルのレスポンシブ ---------- */
@media (max-width: 900px) {
  .mv__stage {
    height: 360px;
    border-bottom-left-radius: 40px;
  }

  /* 枠が浅くなるぶん、キャッチは左上へ。右下の黄色い丸と対角になる */
  .mv__catch {
    left: 24px;
    top: 24px;
    font-size: 26px;
  }

  .mv__badge {
    width: 140px;
    height: 140px;
    right: 16px;
    bottom: 16px;
  }

  .mv__badge-lead { font-size: 11px; }
  .mv__badge-title { font-size: 14px; }

  .mv__bar {
    display: block;
  }

  .mv__picker {
    margin-top: 20px;
  }

  /* 指で押すので、文字も押せる範囲も大きくする */
  .mv__more,
  .mv__next {
    font-size: 16px;
  }

  .mv__more {
    display: inline-block;
    padding: 4px 0;
  }

  .mv__next {
    padding: 8px 0;
  }

  /* 事例によってタイトルの行数が変わる。縦積みでは下のサムネイルが上下に動いて
     しまうので、2行ぶんの高さを先に確保して、あふれる場合は2行で打ち切る */
  .mv__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 3em;
  }
}

@media (max-width: 600px) {
  .mv {
    margin-bottom: 56px;
  }

  /* 画面の端まで使う幅では角丸が効きすぎるので、まっすぐ切る */
  .mv__stage {
    border-bottom-left-radius: 0;
  }

  .mv__current {
    display: block;
  }

  /* 縦積みでは縦線が意味を持たないので消す */
  .mv__area {
    padding-right: 0;
    margin-bottom: 4px;
  }

  .mv__area::after {
    display: none;
  }

  /* 枚数が少ないページも5枚のときと同じ位置に並べる */
  .mv__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 68px));
    justify-content: space-between;
  }

  .mv__thumb button {
    width: 100%;
  }

  .mv__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* 地域名は事例によって出ないことがある。その1行ぶんで高さが変わらないよう、
     いちばん高くなるときの寸法を確保しておく（地域名＋タイトル2行＋リンク） */
  .mv__current {
    min-height: 118px;
  }
}

/* ---------- 2. 募集リード（Figma: Frame 130 196:819） ----------
   左に文章とボタン、右に写真3枚。いちばん右の1枚だけ大きく、小さい2枚は
   左上・左下だけ 40px の角丸。写真の右端は 1366px の枠の右端まで届く。
   背景にはごく薄いグレーの英字が敷いてある */
.support-lead {
  position: relative;
  width: min(100%, 1366px);
  margin-inline: auto;
  padding-bottom: 109px;
  /* 英字が枠からはみ出しても横スクロールを出さない */
  overflow: hidden;
}

/* 飾りの英字。--gray-2 なので白地にうっすら乗るだけで、読ませる文字ではない */
.support-lead__watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: var(--font-serif);
  /* Georgia のボールドは 150px だと 1399px になり 1366px の枠から溢れるので 145px にする。
     画面が狭いときは幅に追随させる（10.6vw ＝ 1366px のときちょうど 145px） */
  font-size: min(145px, 10.6vw);
  /* ★ウェイトを変えるときは index.html の Google Fonts の wght も直すこと★ */
  font-weight: 400;
  line-height: 1.34;
  color: var(--gray-2);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.support-lead__head {
  position: relative;
  padding-top: 114px;
  text-align: center;
  color: var(--green);
}

/* 見出しの下の緑の線（Figma: Vector 22 115:296 = 102×4） */
.support-lead__head::after {
  content: "";
  display: block;
  width: 102px;
  height: 4px;
  margin: 20px auto 0;
  background: var(--green);
}

.support-lead__catch {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

.support-lead__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
}

/* 広い画面は1行。狭いときだけ「農業遺産／オフィシャルサポーター募集」で折る */
.support-lead__title br {
  display: none;
}

/* 左の文章 481px ／ 右の写真 724px。写真は右端まで届かせたいので
   右の余白は取らず、左だけ画面幅に応じて詰める */
.support-lead__body {
  position: relative;
  display: grid;
  grid-template-columns: 481fr 724fr;
  column-gap: 76px;
  align-items: start;
  margin-top: 68px;
  padding-left: clamp(var(--gutter), 6.22%, 85px);
}

/* 写真より9px下から始まる（Figma: 文章 301 / 写真 292） */
.support-lead__text {
  padding-top: 9px;
}

.support-lead__subtitle {
  margin: 0 0 15px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--green);
}

/* 2段落だが、Figmaでは1つの文章として続けて組まれているので間隔を空けない */
.support-lead__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.support-lead__action {
  margin: 33px 0 0;
}

.support-lead__photos {
  display: grid;
  grid-template-columns: 208fr 506fr;
  gap: 11px;
}

.support-lead__stack {
  display: grid;
  gap: 13px;
}

.support-lead__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 小さい2枚は縦横比で高さを決める。大きい1枚はその合計に伸びる */
.support-lead__stack .support-lead__photo {
  height: auto;
  aspect-ratio: 208 / 199;
}

.support-lead__photo--tl {
  border-top-left-radius: 40px;
}

.support-lead__photo--bl {
  border-bottom-left-radius: 40px;
}

@media (max-width: 1000px) {
  .support-lead {
    padding-bottom: 64px;
  }

  .support-lead__head {
    padding-top: 72px;
  }

  .support-lead__catch {
    font-size: 17px;
  }

  .support-lead__title {
    font-size: 30px;
  }

  /* 縦積みにすると写真を右端まで届かせる意味が無くなるので、左右とも余白を取る */
  .support-lead__body {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-top: 48px;
    padding-inline: var(--gutter);
  }

  .support-lead__text {
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  .support-lead__subtitle {
    font-size: 22px;
  }

  .support-lead__desc {
    font-size: 16px;
  }

  .btn--apply {
    width: 100%;
    min-width: 0;
    padding-inline: 20px;
  }
}

/* ---------- 3. オフィシャルサポーター制度とは（Figma: bk_midori 10:442 / y=1501） ----------
   ここだけ緑地。中に白いパネル2枚と黄色い募集バナーが乗る。
   左下だけ 60px の角丸で、MVと同じ切り方 */
.scheme {
  padding: 66px 0 92px;
  overflow: hidden;
  border-bottom-left-radius: 60px;
  background: var(--green-base);
  color: var(--white);
}

/* 見出し1（Figma: 見出し1 100:542）。左に葉のマーク 15×37 */
.scheme__title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 29px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
}

.scheme__title::before,
.heritage__title::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 15px;
  height: 37px;
  background: url("../images/icon-leaf.svg") no-repeat center / contain;
}

.scheme__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
}

/* 強調は制度の名前だけ。斜体にはしない */
.scheme__lead em {
  font-style: normal;
  font-weight: 700;
  color: var(--yellow);
}

/* 見出し2（Figma: 見出し2 8:213）。左に 4×20 の金色の縦棒 */
.scheme__head2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
}

.scheme__head2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--gold);
}

.scheme__panel + .scheme__head2 {
  margin-top: 86px;
}

.scheme__note {
  margin: 13px 0 14px;
  font-size: 18px;
  line-height: 1.6;
}

/* ---- 制度の説明と図 ---- */
.scheme__panel {
  display: grid;
  grid-template-columns: minmax(0, 375fr) minmax(0, 700fr);
  gap: 47px;
  align-items: center;
  margin-top: 26px;
  padding: 40px 32px 32px 46px;
  border-radius: 20px;
  background: var(--white);
  color: var(--black);
}

.scheme__subtitle {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.36;
  color: var(--green);
}

.scheme__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.scheme__acts-head {
  margin: 24px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: var(--green);
}

/* 「●」は中黒ではなく記号として置かれているので、リストマーカーで作る */
.scheme__acts {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--green);
}

.scheme__acts li::before {
  content: "●";
  margin-right: 2px;
}

.scheme__action {
  margin: 24px 0 0;
}

/* 文字数が多いボタンなので、この1つだけ内側の余白を詰める */
.scheme__action .btn--pill {
  padding-inline: 20px;
}

/* 広い画面は1行。狭いときだけ「〜制度の／詳細を見る」で折る */
.scheme__action .btn--pill br {
  display: none;
}

/* 図は横に長い。狭い画面では縮めず、この枠の中で横になぞってもらう */
.scheme__figure {
  overflow-x: auto;
}

.scheme__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 企業ロゴ（Figma: サポーター企業 3:120） ---- */
.logos {
  position: relative;
  padding: 22px 88px 29px;
  border-radius: 20px;
  background: var(--white);
}

/* 4枚ぶんだけ見せて、矢印で送る。指でもなぞれるように素の横スクロールにしてある */
.logos__list {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.logos__list::-webkit-scrollbar {
  display: none;
}

.logos__item {
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
}

/* カード全体をリンクにしてある。ロゴにマウスが乗っても「詳細を見る」が反応する */
.logos__link {
  display: block;
  text-decoration: none;
}

/* ロゴは縦横比も大きさもまちまちなので、枠を決めて中に収める */
.logos__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
}

/* 高さは枠（.logos__mark）から逆算する。固定値にすると、狭い画面で
     枠だけ 160px→120px に縮んだときにロゴがはみ出して切れる
     （.logos__list が overflow-x:auto なので縦もクリップされる） */
.logos__mark img {
  max-width: 210px;
  max-height: calc(100% - 20px);
  width: auto;
  height: auto;
}

.logos__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 40px;
  margin: 15px auto 0;
  border: 2px solid var(--green);
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.logos__link:hover .logos__more,
.logos__link:focus-visible .logos__more {
  background: var(--green);
  color: var(--white);
}

/* ロゴが未受領の企業は社名を出す */
.logos__link--coming {
  display: block;
  cursor: default;
}

.logos__name {
  padding: 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--black);
}

.logos__soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 40px;
  margin: 15px auto 0;
  border: 2px dashed var(--border);
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--border);
}

.logos__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.logos__arrow--prev {
  left: 24px;
}

.logos__arrow--next {
  right: 24px;
}

/* ---- 事例のカード ---- */
.case-slider {
  margin-top: 86px;
}

.scheme__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 35px;
}

.scheme__nav {
  display: flex;
  gap: 33px;
}

/* 3枚ぴったりが収まる幅にカードを決める。コンテナ（1200px）の外へは伸ばさない。
   続きがあることは矢印と下のドットで示すので、次のカードは覗かせない */
.case-list--slider {
  --slider-gap: 28px;
  display: flex;
  gap: var(--slider-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.case-list--slider::-webkit-scrollbar {
  display: none;
}

.case-list--slider .case-item {
  /* 3枚＋隙間2つ = コンテナ幅。1200px なら1枚 381.3px */
  flex: 0 0 calc((100% - var(--slider-gap) * 2) / 3);
  scroll-snap-align: start;
  /* 緑地の白文字を引き継がないよう戻す */
  color: var(--black);
}

.scheme__more {
  margin: 65px 0 0;
  text-align: center;
}

/* 緑地の上なので、枠は緑ではなく白で縁取る（Figma: ボタン 466:17040） */
.scheme__more .btn--primary {
  border-color: var(--white);
}

/* ---- 送りボタン（Figma: 左矢印 3:106 ほか = 44×44の丸） ---- */
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* 山形は画像を置かずに、正方形の2辺を回して作る */
.slider-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transition: border-color 0.2s ease;
}

.slider-arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

.slider-arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

/* 緑地の上に置くほうは白い輪郭だけ。中は後ろの緑をそのまま透かす */
.slider-arrow--ring {
  border: 2px solid var(--white);
  background: transparent;
}

.slider-arrow:hover:not(:disabled) {
  opacity: 0.8;
}

/* 白い輪郭だけのほうは、透けているので opacity では変化が分からない。
   ホバーで中を白く塗りつぶして、山形を緑に反転させる */
.slider-arrow--ring:hover:not(:disabled) {
  opacity: 1;
  background: var(--white);
}

.slider-arrow--ring:hover:not(:disabled)::before {
  border-color: var(--green);
}

.slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- 送り先の目印（ドット） ---- */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 28px;
}

/* 中身は js/top.js が作る。JSが動かないときは場所を取らせない */
.slider-dots:empty {
  display: none;
}

/* 押せる範囲は24px角を確保し、見た目の丸は ::before で10pxにする */
.slider-dots__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.slider-dots__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s ease;
}

.slider-dots__dot:hover::before {
  background: rgba(255, 255, 255, 0.7);
}

.slider-dots__dot[aria-current="true"]::before {
  background: var(--white);
}

.slider-dots__dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -2px;
}

/* ---- 募集バナー（Figma: サポーター募集 100:695 = 780×320） ---- */
.recruit {
  width: min(100%, 780px);
  margin: 70px auto 0;
  padding: 31px 31px 25px 41px;
  border-radius: 20px;
  background: var(--yellow);
  color: var(--green);
  text-align: center;
}

.recruit__title {
  margin: 0 0 15px;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
}

.recruit__lead {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 1.65;
}

.recruit__action {
  margin: 0 0 15px;
}

.recruit__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .scheme {
    padding: 48px 0 64px;
  }

  .scheme__title {
    font-size: 26px;
  }

  .scheme__title::before {
    height: 30px;
  }

  .scheme__head2 {
    font-size: 22px;
  }

  .scheme__lead,
  .scheme__note {
    font-size: 16px;
  }

  /* 図は横に長いので、文章の下に置く */
  .scheme__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 32px 24px;
  }

  .scheme__subtitle {
    font-size: 22px;
  }

  .scheme__desc {
    font-size: 16px;
  }

  .logos {
    padding: 20px 64px 24px;
  }

  /* 4枚は入らないので2枚ずつ送る */
  .logos__item {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  .logos__arrow--prev {
    left: 12px;
  }

  .logos__arrow--next {
    right: 12px;
  }

  .case-slider {
    margin-top: 56px;
  }

  /* 狭い画面はカードを固定幅にして、画面の右端まで伸ばして続きを見せる
     （3枚が入らないので、上の「3枚＋覗き」の計算は使えない） */
  .case-list--slider {
    margin-right: calc(50% - 50vw);
  }

  .case-list--slider .case-item {
    flex: 0 0 300px;
  }

  .scheme__more {
    margin-top: 48px;
  }

  .recruit {
    margin-top: 56px;
    padding: 24px 20px;
  }

  .recruit__title {
    font-size: 28px;
  }

  .recruit__lead {
    font-size: 16px;
  }

  /* 改行位置はFigmaの幅を前提にしているので、狭いときは成り行きにする */
  .recruit__lead br {
    display: none;
  }
}

@media (max-width: 600px) {
  /* 見出しが画面の端に着くので余白を入れ、2行に収まる字送りまで落とす
     （「オフィシャルサポーター募集」13文字が1行に入る大きさが上限） */
  .support-lead__head {
    padding-inline: var(--gutter);
    /* 飾りの英字は 10.6vw まで縮むのに余白が 72px のままだと文字が下に離れてしまう。
       PCの 114px / 145px と同じ比率にして、英字の下半分にキャッチを重ねる */
    padding-top: 8.3vw;
  }

  .support-lead__catch {
    font-size: 16px;
  }

  /* 見出しが2行になるぶん、キャッチとの間を空けて塊を分ける */
  .support-lead__title {
    margin-top: 20px;
    font-size: clamp(20px, 6.4vw, 26px);
  }

  /* 白いパネルの中なので使える幅が狭い。ボタンは枠いっぱいに広げ、
     「オフィシャルサポーター制度の」を1行目に収めるため余白と字送りも詰める */
  .scheme__action .btn--pill {
    display: flex;
    width: 100%;
    padding-inline: 12px;
    font-size: 15px;
  }

  .scheme {
    border-bottom-left-radius: 32px;
  }

  /* 横長のままでは文字が読めないので、縦積みに組み替えた図に差し替える。
     パネルの左右パディング（24px）の半分まで広げて表示幅を稼ぎ、
     左右には12pxだけ余白を残す */
  .scheme__figure {
    margin-inline: -12px;
  }

  .scheme__figure img {
    width: 100%;
  }

  .logos {
    padding: 20px 48px 24px;
  }

  .logos__item {
    flex: 0 0 100%;
  }

  .logos__mark {
    height: 120px;
  }

  .scheme__head-row {
    margin-bottom: 24px;
  }

  .scheme__nav {
    gap: 16px;
  }

  /* 1枚を画面の中央に置き、右に2枚目の頭を覗かせる。
     カードの左右の余白をそろえるため「隙間＋覗き幅 = 片側の余白」にしてある。
     トラックを画面幅いっぱいに広げ、padding で中央の1枚ぶんに絞る */
  .case-list--slider {
    --slider-gap: 16px;
    --slider-peek: 32px;
    --slider-side: calc(var(--slider-gap) + var(--slider-peek));
    /* はみ出しは gutter ぶん。50vw だとスクロールバーの幅だけ左右がずれる */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--slider-side);
    /* 送った先も同じ位置で止める */
    scroll-padding-inline: var(--slider-side);
  }

  /* padding を引いた残り＝中央の1枚 */
  .case-list--slider .case-item {
    flex: 0 0 100%;
    padding: 12px;
  }

  /* 隣のカードが覗いていて続きがあると分かるので、ドットは出さない */
  .slider-dots {
    display: none;
  }

  .recruit__title {
    font-size: 24px;
  }

  /* 折り返しが増えて中央揃えだと行頭がそろわないので、本文だけ左寄せにする
     （見出しは中央のまま） */
  .recruit__lead,
  .recruit__note {
    text-align: left;
  }

  /* ボタンは枠いっぱいに広げる */
  .recruit__action .btn--pill {
    display: flex;
    width: 100%;
  }

  /* 幅が足りないので1行に収めるのをやめる */
  .btn--pill {
    height: auto;
    min-height: 52px;
    padding: 12px 24px;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- 4. 農業遺産とは（Figma: Rectangle 21 115:127 / y=3783） ----------
   左に文章とボタン、右に写真2枚。大きいほうは1366pxの右端まで届き、
   小さいほうがその左下に重なる。重なりを保ちたいので写真は絶対配置にしている */
.heritage {
  padding: 76px 0 84px;
  overflow: hidden;
}

.heritage__inner {
  position: relative;
  width: min(100%, 1366px);
  /* 写真の上端から下端まで＋本文までの127px */
  min-height: 561px;
  margin-inline: auto;
  padding-left: clamp(var(--gutter), 6.08%, 83px);
}

.heritage__text {
  width: min(100%, 480px);
  padding-top: 49px;
}

.heritage__title {
  position: relative;
  margin: 0 0 26px;
  padding-left: 29px;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--black);
}

.heritage__title::before {
  height: 36px;
}

.heritage__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* 本文の ※1〜3 の注釈 */
.heritage__notes {
  counter-reset: heritage-note;
  margin: 20px 0 0;
  /* SPで .body-list に付く左右16pxを打ち消す */
  padding-inline: 0;
  font-size: 14px;
}

.heritage__notes > li {
  padding-left: 3.6em;
  line-height: 1.7;
}

/* 折り返しても1行目に留まるよう絶対配置 */
.heritage__notes > li::before {
  counter-increment: heritage-note;
  content: "（※" counter(heritage-note) "）";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.heritage__term {
  color: var(--green);
}

.heritage__ref {
  color: var(--green);
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: super;
}

.heritage__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 33px 0 0;
}

.heritage__photos {
  position: absolute;
  /* 本文の書き出しにそろえる（見出し52px＋下マージン26px） */
  top: 127px;
  right: 0;
  /* 582 / 1366 */
  width: 42.6%;
}

.heritage__photo {
  display: block;
  object-fit: cover;
}

.heritage__photo--main {
  width: 100%;
  aspect-ratio: 582 / 376;
  border-top-left-radius: 40px;
}

/* 大きい写真の左下に食い込ませる。値は大きい写真に対する割合 */
.heritage__photo--sub {
  position: absolute;
  top: 73.9%;
  left: -24.2%;
  width: 37.1%;
  aspect-ratio: 216 / 156;
  border-radius: 20px;
}

@media (max-width: 1000px) {
  .heritage {
    padding: 56px 0 64px;
  }

  /* 重ねる余裕が無くなるので、写真は文章の下に置く */
  .heritage__inner {
    min-height: 0;
    padding-inline: var(--gutter);
  }

  .heritage__text {
    width: 100%;
    padding-top: 0;
  }

  .heritage__title {
    font-size: 28px;
  }

  .heritage__title::before {
    height: 30px;
  }

  .heritage__desc {
    font-size: 16px;
  }

  /* static にすると小さい写真の位置の基準が .heritage__inner に移ってしまう */
  .heritage__photos {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 40px;
  }

  /* 重なりは残しつつ、左へのはみ出しは余白のぶんだけにする */
  .heritage__photo--sub {
    top: 62%;
    left: -12px;
    width: 42%;
  }
}

/* ---------- 5. エリアMAP（Figma: Rectangle 9 27:2128 / y=4554） ----------
   地図のエリアを押すと下のカードが入れ替わる。地図は lib/parts/area-map.svg を
   そのまま埋め込んでいるので、色も状態もCSSで持てる */
.area-map {
  position: relative;
  z-index: 1;
  padding: 68px 0 77px;
  border-bottom-left-radius: 60px;
  background: var(--white);
}

/* 地図は 1366px の中で「左から263px・幅843px」の位置。丸い見出しはその左に重なる */
.area-map__figure {
  position: relative;
  width: min(100%, 1366px);
  margin-inline: auto;
  padding-left: 19.25%;
  padding-right: 19.03%;
}

/* 九州・沖縄のラベルは viewBox の下端すれすれ（717.2 + 枠線0.5）にあり、
   既定の overflow:hidden で枠線の下側が欠ける。viewBox を3つぶん伸ばして逃がしてある */
.area-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 丸い見出し（Figma: MAP見出し 4:1726 = 171px） */
.area-map__badge {
  position: absolute;
  top: 33px;
  left: 8.64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 171px;
  height: 171px;
  margin: 0;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.52;
  color: var(--green);
  text-align: center;
}

/* SVG側のクラス（Illustratorが付けた st0〜st6 を am-0〜am-6 に改名したもの）。
   名前が短いのでページ全体に効かないよう .area-map の中だけに閉じている */
.area-map .am-0 {
  fill: none;
  stroke: #b2b2b2;
  stroke-miterlimit: 10;
}

.area-map .am-1 {
  fill: none;
  stroke: #707070;
}

.area-map .am-2 {
  fill: var(--white);
  stroke: #707070;
}

.area-map .am-3 {
  fill: var(--white);
}

.area-map .am-4 {
  isolation: isolate;
}

.area-map .am-5 {
  fill: #707070;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.area-map .am-6 {
  fill: #b2b2b2;
}

/* 北海道には認定地域が無いので押せない */
.area-map__svg [id^="area-"]:not(#area-hokkaido) {
  cursor: pointer;
}

/* 札（エリア名の枠）。線の太さは他のセクションのボタンと同じ2px。
   塗りが none のものがあり、そのままだとクリックを受け取れないので all にする */
.area-map__svg [id$="-bg"] {
  stroke-width: 2;
  pointer-events: all;
}

/* SVGの g に tabindex を付けているので、そのままだと押した瞬間に
   ブラウザ既定の黒い枠がエリア全体を囲んでしまう。枠は消して、
   キーボードで移動してきたときだけ縁を光らせる */
.area-map__svg [id^="area-"]:focus {
  outline: none;
}

.area-map__svg [id^="area-"]:focus-visible {
  filter: drop-shadow(0 0 4px rgba(0, 97, 36, 0.6));
}

.area-map__svg [id$="-bg"],
.area-map__svg [id$="-dots"] path,
.area-map__svg [id$="-text"] text {
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ホバー中。押す前でも選べると分かるように緑にする。
   選択中と見分けが付くよう、こちらは薄い緑（--green-base）にする */
.area-map__svg [id^="area-"]:hover [id$="-bg"],
.area-map__svg [id^="area-"]:focus-visible [id$="-bg"] {
  fill: var(--green-base);
  stroke: var(--green-base);
}

.area-map__svg [id^="area-"]:hover [id$="-text"] text,
.area-map__svg [id^="area-"]:focus-visible [id$="-text"] text {
  fill: var(--white);
}

.area-map__svg [id^="area-"]:hover [id$="-dots"] path,
.area-map__svg [id^="area-"]:focus-visible [id$="-dots"] path {
  fill: var(--green-base);
}

/* 選ばれているエリア。クラスは「塗る要素そのもの」に付けている（js/top.js）。
   ホバーと同じ詳細度になるので、あとに書いたこちらが勝つ */
.area-map__svg [id$="-bg"].is-on {
  fill: var(--green);
  stroke: var(--green);
}

.area-map__svg [id$="-text"] text.is-on {
  fill: var(--white);
}

.area-map__svg [id$="-dots"] path.is-on {
  fill: var(--green);
}

/* ---- 地域のカード（Figma: 関東_1 27:2098 = 210×193） ---- */
/* grid ではなく flex。エリアによって件数がばらつくので、
   1行に満たないときにカードを中央へ寄せたい（grid は空の列が残って左寄せになる）。
   1行ぶんの列数は flex-basis で決める */
.area-map__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  transition: opacity 0.16s ease, transform 0.16s ease;
  gap: 40px 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1行に収まるときだけ中央へ寄せる。複数行になるときは左詰めのまま
   （最後の行だけ中央に浮くのを避ける）。付け外しは js/top.js */
.area-map__cards.is-centered {
  justify-content: center;
}

.area-map__card {
  flex: 0 0 calc((100% - 4 * 27px) / 5);
  min-width: 0;
}

.area-map__card[hidden] {
  display: none;
}

/* エリアを切り替えている途中。薄くして少し下げ、入れ替わったことを分かるようにする */
.area-map__cards.is-switching {
  opacity: 0;
  transform: translateY(8px);
}

.area-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.area-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gray-2);
}

.area-card__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 158;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* カードの見せ方は認定地域一覧・連携事例一覧と同じ（画像が寄って地域名が緑になる） */
.area-card:hover .area-card__thumb img,
.area-card:focus-visible .area-card__thumb img {
  transform: scale(1.06);
}

.area-card__body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.area-card__pref {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--green);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

.area-card__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.area-card:hover .area-card__name,
.area-card:focus-visible .area-card__name {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.area-map__more {
  margin: 99px 0 0;
  text-align: center;
}

/* 選択中のエリアと件数。左端は js/top.js が padding-left で合わせる
   （カードは中央寄せなので、件数と列数によって一番左のカードの位置が変わる） */
.area-map__result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 40px 0 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--green);
}

.area-map__result-count {
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
}

@media (max-width: 1000px) {
  .area-map {
    padding: 48px 0 56px;
  }

  /* 丸い見出しを重ねる余地が無くなるので、地図の上に出す */
  .area-map__figure {
    padding-inline: var(--gutter);
  }

  .area-map__badge {
    position: static;
    width: 132px;
    height: 132px;
    margin: 0 auto 16px;
    font-size: 18px;
  }

  .area-map .am-5 {
    font-size: 22px;
  }

  .area-map__result {
    margin-top: 32px;
  }

  .area-map__cards {
    gap: 32px 24px;
  }

  .area-map__card {
    flex-basis: calc((100% - 2 * 24px) / 3);
  }

  .area-card__name {
    font-size: 17px;
  }

  .area-map__more {
    margin-top: 56px;
  }
}

@media (max-width: 600px) {
  /* 狭いと1行に収まらないので、決めた位置で折る */
  .support-lead__title br,
  .scheme__action .btn--pill br {
    display: inline;
  }

  .area-map__cards {
    gap: 24px 16px;
  }

  .area-map__card {
    flex-basis: calc((100% - 16px) / 2);
  }

  /* 狭いと都道府県と地域名が1行に収まらないので縦に積む */
  .area-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 地図はただの図なので、余白を取らず画面幅いっぱいに使う。
     広げたぶんだけ下の文字を小さくしても、画面上の大きさは変わらない */
  .area-map__figure {
    padding-inline: 0;
  }

  /* 26pxだと枠に収まらない（8文字の「九州・沖縄エリア」で208。枠は189.7）。
     22px に下げ、枠のほうを広げてつり合わせる */
  .area-map .am-5 {
    font-size: 22px;
  }

  /* 枠だけを中心そろえで広げる。1.14倍で文字との間が左右17・上下8.9になり、
     元の設計（20・8.6）とほぼ同じ比率に戻る。
     近畿と東海の枠が近いので、これ以上広げるとぶつかる */
  .area-map__svg [id$="-bg"] {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.14);
  }

  /* 九州・沖縄の枠は viewBox の下端に接しているため、広げるとはみ出す。
     下は次のセクションの白地なので、切らずに見せる */
  .area-map__svg {
    overflow: visible;
  }
}

/* ノートPCのように画面が低いと、地図だけで表示領域が埋まってしまい、
   下のカード（押した結果）が画面外になる。地図に高さの上限をかけ、
   余白も詰めて「地図の下端＋結果の1行目」が同時に見えるようにする。
   幅1000px以下は地図が全幅の別レイアウトなので対象外。
   高さ820px以上（デスクトップ）は Figma のまま触らない */
@media (min-width: 1001px) and (max-height: 820px) {
  .area-map {
    padding: 40px 0 48px;
  }

  /* 左右19%の余白は使わず、縮めた地図を中央に置く。
     丸い見出しは重ねずに地図の左へ並べる（重ねたままだと、
     スクロールしたときに固定ヘッダーで上半分が切れるため） */
  .area-map__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-inline: var(--gutter);
  }

  .area-map__svg {
    width: auto;
    height: min(52vh, 665px);
  }

  .area-map__badge {
    position: static;
    flex: none;
    width: 132px;
    height: 132px;
    font-size: 15px;
  }

  /* 縦に余裕が無いので、地図と見出しはくっつける */
  .area-map__result {
    margin-top: 0;
  }

  .area-map__more {
    margin-top: 56px;
  }
}

/* ---------- 6. NEWS ／ 7. LINK（Figma: 5_NEWS 100:730 ／ LINK 100:741） ----------
   2つとも緑地。エリアMAPの左下の角丸から緑が覗くよう、60pxぶん上に潜り込ませている */
.top-tail {
  position: relative;
  z-index: 0;
  margin-top: -60px;
  padding-top: 60px;
  background: var(--green-base);
  color: var(--white);
}

.news {
  padding-top: 89px;
}

/* 白い1本線で囲った箱（Figma: 100:737 = 1194×409 / 角丸30） */
.news__box {
  display: flex;
  gap: 54px;
  padding: 43px 36px 31px 47px;
  border: 1px solid var(--white);
  border-radius: 30px;
}

.news__head {
  flex: 0 0 258px;
  text-align: center;
}

.news__en {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 70px;
  font-weight: 700;
  line-height: 1.3;
}

.news__ja {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  /* letter-spacing は最後の文字の右にも入るので、その分だけ左へ寄せて中央に見せる */
  text-indent: 2px;
}

/* 3件ぶんだけ見せて、残りはスクロール。
   65px（1件）×3 ＋ 区切り（余白30＋線1＋余白30）×2 = 317px */
.news__scroll {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 317px;
  padding-right: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) rgba(255, 255, 255, 0.35);
}

.news__scroll::-webkit-scrollbar {
  width: 8px;
}

.news__scroll::-webkit-scrollbar-track {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
}

.news__scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--yellow);
}

.news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news__item + .news__item {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--white);
}

.news__body {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}

.news__date {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.news__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--green-base);
  border-radius: 14px;
  background: var(--white);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* letter-spacing は最後の文字の右にも入るので、その分だけ左へ寄せて中央に見せる */
  text-indent: 0.06em;
  color: var(--green-base);
}

/* 「新着」だけ黄色地。区分のバッジより少し狭い */
.news__tag--new {
  min-width: 60px;
  background: var(--yellow);
}

.news__title {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}

a.news__body:hover .news__title,
a.news__body:focus-visible .news__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---- 7. LINK ---- */
.link {
  padding: 66px 0 104px;
}

.link__title {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* Figmaは4枠だが、いまは素材のある2つだけ。増えても崩れないよう中央から並べる */
.link__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link__list > li {
  flex: 0 1 276px;
}

/* バナーの枠は 276×63。中身の大きさは支給された画像なりに置く */
.link__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 63px;
  border: 1px solid #b2b2b2;
  background: var(--white);
  transition: opacity 0.2s ease;
}

a.link__banner:hover {
  opacity: 0.85;
}

/* 文字で組んだバナー。薄いグレーの地に内側の細い枠、2行の金文字 */
.link__banner--text {
  flex-direction: column;
  gap: 2px;
  border-color: #d6d6d6;
  background: #f5f4f4;
  box-shadow: inset 0 0 0 3px #faf9f9, inset 0 0 0 4px #dcdbdb;
  font-family: var(--font-serif);
  font-size: 22px;
  /* ★太さを変えるときは index.html の Google Fonts の wght も直すこと★ */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/* 控えめな金のグラデーションを文字の形で切り抜く。字間の分だけ左に足して中央をそろえる */
.link__banner-line {
  display: block;
  padding-left: 0.03em;
  color: #7d6a2c;
  background: linear-gradient(180deg, #927d3a 0%, #7d6a2c 50%, #66551e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1000px) {
  .top-tail {
    margin-top: -40px;
    padding-top: 40px;
  }

  .news {
    padding-top: 56px;
  }

  /* 横に並べる余地が無いので、見出しを上に出す */
  .news__box {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .news__head {
    flex: none;
    text-align: left;
  }

  .news__en {
    font-size: 48px;
  }

  .news__scroll {
    padding-right: 8px;
  }

  .link {
    padding: 48px 0 64px;
  }

  .link__list {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .area-map {
    border-bottom-left-radius: 32px;
  }

  .news__en {
    font-size: 40px;
  }

  /* 日付とバッジが1行に収まらないので折り返す */
  .news__meta {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .news__title {
    font-size: 15px;
  }

  .link__list {
    gap: 16px;
  }
}

/* ==========================================================
   地域の課題 一覧（issues/index.html）
   Figma: 地域の課題_一覧 (661:9134) / 課題カード (669:9641)

   1200pxの中を「サイドバー320px ＋ カード2列」で分ける。
   絞り込みは js/issue-list.js が .is-hidden の付け外しでやる。
   ========================================================== */

/* ---------- タイトル下の全幅ライン（Figma: Vector 25 / 4px） ---------- */
.page-rule {
  margin: 59px 0 0;
  border: 0;
  border-top: 4px solid var(--green-base);
}

/* このページのタイトルだけ字間が開いている（Figma: 40px / 0.15em）。
   letter-spacing は最後の文字の右にも入るので、その分だけ左へ寄せて中央に見せる */
.page-title--tracked {
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

.issue-lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Figma は下線なしの緑文字。リンクだとわかるようにホバーでだけ引く
   （フッターのメニューと同じ扱い） */
.issue-lead a {
  color: var(--green);
  text-decoration: none;
}

.issue-lead a:hover {
  text-decoration: underline;
}

/* ---------- 全体の骨格 ---------- */
.issue-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 60px;
  padding-bottom: 100px;
}

/* ---------- 条件検索（サイドバー） ---------- */
.issue-search__box {
  /* 開閉は grid の行を 1fr→0fr へ送って高さを動かす。
     max-height と違って当て推量の上限がいらず、中身が増えても調整不要 */
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 18px 16px;
  border: 1px solid var(--green-base);
  border-radius: 8px;
  transition: grid-template-rows 0.3s ease;
}

.issue-search.is-closed .issue-search__box {
  grid-template-rows: auto 0fr;
}

/* 行の高さに合わせて中身を潰す入れ物。display:none だとアニメーションできない。
   閉じ切ってから visibility を切り、隠れた項目にタブで入らないようにする */
.issue-search__panel {
  overflow: hidden;
  min-height: 0;
  transition: visibility 0s;
}

.issue-search.is-closed .issue-search__panel {
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .issue-search__box,
  .issue-group__body,
  .issue-block__body,
  .issue-item {
    transition: none;
  }
}

/* 緑の帯（Figma: Frame 171 / 288×52） */
.issue-search__title {
  margin: 0;
}

.issue-search__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 8px 0 10px;
  border: 0;
  background: var(--green-base);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* 開いているときは横棒、閉じているときは＋（Figma の「−」と同じ位置） */
.issue-sign {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.issue-sign::before,
.issue-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}

/* 縦棒は閉じているときだけ出す */
.issue-sign::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.issue-search.is-closed .issue-search__toggle .issue-sign::after,
.issue-group.is-closed .issue-group__toggle .issue-sign::after,
.issue-block.is-closed .issue-block__toggle .issue-sign::after {
  opacity: 1;
}

/* ---------- 主な課題／農業遺産地域 の見出し ---------- */
.issue-group + .issue-group {
  margin-top: 8px;
}

.issue-group__title {
  margin: 0;
}

.issue-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 8px 0 10px;
  border: 0;
  /* Figma: グリーンの10%（白地に乗ると #e5efe9） */
  background: rgba(0, 97, 36, 0.1);
  color: var(--black);
  font-family: inherit;
  font-size: 16px;
  /* 上の「条件検索」と同じ太さにする。エリア（東北エリア…）は500、
     地域は400のままなので、見出し→エリア→地域の3段の差は残る */
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* 見出しとエリアの開閉。中身は grid の行で潰す（サイドバー本体と同じ作り） */
.issue-group__body,
.issue-block__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.issue-group.is-closed .issue-group__body,
.issue-block.is-closed .issue-block__body {
  grid-template-rows: 0fr;
}

.issue-group__body > *,
.issue-block__body > * {
  overflow: hidden;
  min-height: 0;
}

/* ---------- チェックボックスの行 ---------- */
.issue-checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-check {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 高さは固定せず下限だけ決める。長い項目が増えても文字がはみ出さない */
  min-height: 40px;
  padding: 0 0 0 10px;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}

/* 地域はエリアの下にぶら下がるので一段下げる（Figma: 地域ボックス 32px） */
.issue-checks--areas .issue-check {
  min-height: 32px;
  padding: 0 0 0 36px;
}

/* どこまでが1項目の押せる範囲かがわかるように、行ごと薄い緑にする。
   見出しの帯（グリーンの10%）より薄くして、見出しと同じ濃さに見えないようにしてある */
.issue-check:hover {
  background: rgba(0, 97, 36, 0.05);
}

/* サイドバーは320pxしかなく、16pxのままだと最長の項目
   （「生物多様性等の環境保全・現状把握」16字＝256px）が1行に収まらない。
   Figma も長い地域名では字間を詰めている（tracking -1.12px）ので、
   それに合わせて全項目をわずかに詰め、折り返しを起こさせない */
.issue-check__text {
  flex: 1;
  letter-spacing: -0.05em;
  /* 詰めた分が最後の文字の右にも入るので、その分だけ戻す */
  margin-right: -0.05em;
}

/* 白地・#333の1px枠。ブラウザ既定のチェックボックスは環境ごとに形も色も違うので自前で描く。
   角丸はFigmaでは1pxだが、18px角の部品に合う 4px にしている（カードの8pxを小さくした値） */
.issue-check input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--black);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
}

.issue-check input:checked,
.issue-check input:indeterminate {
  border-color: var(--green);
  background: var(--green);
}

/* レ点。45度回すと見た目の上下が中心からずれるので、0.7px 戻して枠の中央に置く */
.issue-check input:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, calc(-50% - 0.7px)) rotate(45deg);
}

/* エリアの一部だけ選ばれている状態は横棒で示す */
.issue-check input:indeterminate::before {
  content: "";
  position: absolute;
  inset: 50% 3px auto;
  height: 2px;
  background: var(--white);
  transform: translateY(-50%);
}

.issue-check input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- エリアの見出し行（チェック＋開閉） ---------- */
.issue-block__head {
  display: flex;
  align-items: center;
  height: 40px;
  padding-right: 8px;
}

.issue-block__head .issue-check {
  flex: 1;
  padding-right: 0;
  font-weight: 500;
}

/* 「−」の縦位置は、上の「条件検索」「主な課題」「農業遺産認定地域」とそろえる。
   あちらは帯の padding-right 8px の内側に16pxの印がそのまま入るが、
   こちらは押しやすさのため24pxのボタンに16pxの印を中央置きしている。
   そのままだと印だけ4px内側に寄るので、ボタンを4px外へ出して右端をそろえる */
.issue-block__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}

/* ---------- 検索ボタン／条件クリア ---------- */
.issue-search__run {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border: 0;
  /* 角丸はFigmaには無いが、真上のサイドバーの箱・右のカードと同じ8pxにそろえる */
  border-radius: 8px;
  background: var(--green);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* 件数だけ一回り大きく出す。2桁ぶんの幅を確保して、桁が変わっても幅が動かないようにする
   （連携事例一覧の .btn--search__num と同じ） */
.issue-search__run-num {
  display: inline-block;
  min-width: 2ch;
  font-size: 20px;
  text-align: center;
}

/* アイコンは #006124 の単色なので、白へ反転させて緑地に乗せる */
.issue-search__run img {
  filter: brightness(0) invert(1);
}

.issue-search__run:hover {
  background: var(--green-base);
}

.issue-search__clear {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.issue-search__clear:hover {
  text-decoration: underline;
}

/* ---------- 検索結果 ---------- */
/* 件数だけ32px・緑。単位の「件」は18px（Figma: 661:9149） */
.issue-result__count {
  display: flex;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.issue-result__num {
  margin: 0 4px 0 12px;
  font-size: 32px;
  font-weight: 700;
  color: var(--green);
}

.issue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-item.is-hidden {
  display: none;
}

/* 絞り込みの切り替え。いったん薄くして少し下げ、並べ替わってから戻す。
   入れ替わりが一瞬で起きると、どのカードが残ったのか目で追えないため
   （case/index.html の表示切替と同じ考え方。長さもそろえてある） */
.issue-item {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.issue-list.is-filtering .issue-item {
  opacity: 0;
  transform: translateY(8px);
}

/* ---------- 課題カード（Figma: 669:9641 / 400×232） ---------- */
.issue-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 232px;
  padding: 20px;
  border: 1px solid var(--green-base);
  border-radius: 8px;
  /* Figma: 色-4 */
  background: #f7faf8;
  color: var(--black);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease,
    border-color 0.2s ease;
}

/* 画像が無いカードなので、持ち上げと緑の枠で「押せる」ことを見せる。
   枠は inset の影を重ねて2px相当にする（border を太らせると中身が動く） */
.issue-card:hover {
  background: var(--white);
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--green), 0 8px 20px rgba(0, 97, 36, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .issue-card:hover {
    transform: none;
  }
}

.issue-card:hover .issue-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.issue-card__area {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.issue-card__title {
  /* 長い課題名は4行で打ち切る（Figma のカードも4行＋「…」） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-top: 12px;
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

/* 原稿未受領のカード。空でも高さが潰れないように2行分を確保する */
.issue-card__title--empty {
  min-height: 2.9em;
}

.issue-card__meta {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- 地域の課題 詳細（会員限定） ---------- */
.issue-detail__card {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: #f7faf8;
}

.issue-detail__area {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.issue-detail__title {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--green);
}

.issue-detail__meta {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.issue-detail__photo {
  margin: 40px 0 0;
  text-align: center;
}

/* 600pxに足りない写真は引き伸ばさず原寸で出す */
.issue-detail__photo img {
  max-width: min(100%, 600px);
  height: auto;
}

.issue-detail__table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
}

.issue-detail__table th,
.issue-detail__table td {
  padding: 10px 20px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.issue-detail__table .issue-detail__label {
  width: 140px;
  padding: 10px;
  background: var(--gray-2);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* 「問合せ先」だけ2列ぶんの高さを受け持つ */
.issue-detail__label--person {
  width: 140px;
}

.issue-detail__body {
  vertical-align: top;
}

.issue-detail__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

/* 原稿で字下げされた行。折り返しても行頭をそろえる */
.issue-detail__indent {
  display: block;
  padding-left: var(--indent, 2em);
}

/* 原稿（Excel）で下線が引かれていた部分 */
.issue-detail__ul {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* メールアドレスの長さが地域でまちまちなので、注記は次の行に置く */
.issue-detail__note {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

/* 分類は一覧のカードと同じ緑のバッジ */
.issue-detail__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-detail__cats li {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--green-base);
  font-size: 14px;
  line-height: 1;
  color: var(--white);
}

.issue-list__empty {
  margin: 40px 0 0;
  font-size: 16px;
}

/* ---------- レスポンシブ ---------- */
/* 表は900px以下で縦積みにする。280pxの見出し列を残すと本文が潰れるため */
@media (max-width: 900px) {
  .issue-detail__card {
    margin-top: 32px;
  }

  .issue-detail__title {
    font-size: 20px;
  }

  .issue-detail__photo {
    margin-top: 32px;
  }

  .issue-detail__table,
  .issue-detail__table tbody,
  .issue-detail__table tr,
  .issue-detail__table th,
  .issue-detail__table td {
    display: block;
    width: auto;
  }

  .issue-detail__table {
    margin-top: 32px;
    font-size: 15px;
  }

  /* 上下の枠線が二重にならないように1pxずつ重ねる */
  .issue-detail__table th,
  .issue-detail__table td {
    margin-bottom: -1px;
  }

  .issue-detail__table .issue-detail__label {
    width: auto;
    white-space: normal;
  }

  /* 子項目の親なので、見出しらしく緑の帯にして、上に間を空ける */
  .issue-detail__table .issue-detail__label--person {
    margin-top: 24px;
    background: var(--green);
    color: var(--white);
  }

  /* 縦に並ぶので、幅をそろえて中央に置く */
  .issue-detail__cats {
    justify-content: center;
  }

  .issue-detail__cats li {
    width: 100%;
    text-align: center;
  }

  .issue-detail__note {
    font-size: 13px;
  }
}

/* サイドバーを上に出す。切り替える幅はヘッダーがドロワーに変わるのと同じにした。
   2列のままこれ以下へ行くとカードが280px台まで痩せて、20pxの課題名が読みにくい。
   チェックボックスが1900px分あるので、この幅からは既定で閉じておく
   （js/issue-list.js も同じ条件で判定する） */
@media (max-width: 1199px) {
  .issue-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
  }

  .issue-search:not(.is-open) .issue-search__box {
    grid-template-rows: auto 0fr;
  }

  .issue-search:not(.is-open) .issue-search__panel {
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }

  .issue-search:not(.is-open) .issue-search__toggle .issue-sign::after {
    opacity: 1;
  }
}

@media (max-width: 840px) {
  .page-rule {
    margin-top: 32px;
  }

  .issue-layout {
    padding-bottom: 60px;
  }
}

@media (max-width: 600px) {
  .issue-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .issue-card {
    min-height: 0;
  }

  .issue-card__title {
    font-size: 18px;
  }

  .issue-result__num {
    font-size: 28px;
  }
}

/* =========================================================
   オフィシャルサポーター制度とは（about-supporter.html）
   Figma: 農水省0908 qMTlfYiotuzFzhKsQ14udS / オフィシャルサポーター 118:1384

   Figmaは1366px固定の1枚デザイン。レスポンシブの指定は無いので
   1199px / 900px / 600px の3段で組み替えている。
   図は3種類の作り方が混ざっている:
     ・実現したいことの図 … TOPと同じ images/top-scheme.svg を流用（SP版もそのまま使う）
     ・制度のイメージ図／申請フロー … 横に長くHTMLで組むと崩れるので画像で書き出した
     ・サポーターバンクの図 … 箱と矢印だけなのでHTML/CSSで組んだ
   ========================================================= */

/* ---------- MV（緑帯の中にパンくず・キャッチ・写真・制度の説明） ---------- */
/* Figma: 緑ベタ 118:1545（y100〜960）。左下だけ角丸というのがこのページの決まりで、
   右下は角のまま。中の写真も同じく左下だけ角丸にしている */
.sup-mv {
  position: relative;
  overflow: hidden;
  /* 地図（top 210px、絵の下端はSVGの648px）が入る高さ。
     これが無いと九州の南が帯の下辺で切れる */
  min-height: 858px;
  padding-bottom: 70px;
  border-radius: 0 0 0 60px;
  background: var(--green-base);
  color: var(--white);
}

/* 日本地図（Figma: MAP 118:1410）。一段濃い緑の飾りで、写真の上に重ねる */
.sup-mv__map {
  position: absolute;
  top: 210px;
  /* 右端は1200px枠の右辺に合わせ、枠より狭い画面では画面の右端まで。
     ノートPCの幅でも地図が右に見切れないようにする */
  right: max(0px, (100% - var(--container)) / 2);
  z-index: 1;
  width: min(805px, 100%);
  pointer-events: none;
}

/* 写真は右端まで抜ける。左端はFigmaの305/1366を1200px枠から見た位置
   （枠の左端＋222px）で持たせる。％で持つと画面が広いほどキャッチに
   食い込んでしまうので、枠を基準にして文字との重なり方を変えない */
.sup-mv__photo {
  position: absolute;
  top: 80px;
  right: 0;
  left: calc(max(var(--gutter), (100% - var(--container)) / 2) + 222px);
  height: 433px;
  overflow: hidden;
  border-radius: 0 0 0 60px;
}

.sup-mv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* パンくず・キャッチ・本文は写真と地図より前に出す。キャッチは写真に重なる */
.sup-mv > .breadcrumb,
.sup-mv__catch,
.sup-mv__lead {
  position: relative;
  z-index: 2;
}

/* 緑地の上に置くパンくず。文字色だけ白へ差し替える */
.breadcrumb--on-green,
.breadcrumb--on-green a,
.breadcrumb--on-green .breadcrumb__list li + li::before {
  color: var(--white);
}

.sup-mv__catch {
  margin-block: 166px 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
}

.sup-mv__lead {
  margin-top: 232px;
  padding-left: 43px;
}

/* 葉マークはTOPの見出し（.scheme__title）と同じ素材・同じ間隔 */
.sup-mv__title {
  position: relative;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
}

.sup-mv__title::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: -28px;
  width: 15px;
  height: 37px;
  background: url("../images/icon-leaf.svg") no-repeat center / contain;
}

.sup-mv__lead p {
  max-width: 726px;
  margin: 20px 0 0;
  line-height: 2.2;
}

/* ---------- セクションの見出しと白いパネル ---------- */
.sup-sec {
  margin-top: 49px;
}

.sup-sec:first-child {
  margin-top: 110px;
}

.sup-head {
  position: relative;
  margin: 0;
  padding-left: 17px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

/* 見出しが2行になる幅でもバーは1行目に合わせる（中央ぞろえだと行間に落ちる） */
.sup-head::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 4px;
  height: 20px;
  background: var(--green);
}

.sup-panel {
  margin-top: 16px;
  padding: 40px 44px;
  border-radius: 20px;
  background: var(--white);
}

.sup-panel__text p {
  margin: 0;
}

/* .sup-panel__text p の margin:0 に負けるので、クラスを2つ重ねて勝たせる */
.sup-panel__text .sup-panel__action {
  margin-top: 96px;
}

/* 左に説明・右に図。図の幅（700／717px）はFigmaの実寸 */
.sup-panel--goal,
.sup-panel__cols {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.sup-panel__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 制度のイメージの図（supporter-scheme.svg）は、図の中の「双方向の情報交換」
   （SVGの48.2px＝6.72%）を左の文章の1行目に合わせる。図の上には
   「（制度のイメージ図）」の注記があるので、そのぶん図全体を引き上げる。
   3pxは行送りぶんで、こちらは図と一緒には拡縮しない */
.sup-panel__cols .sup-panel__figure {
  margin-top: calc(3px - 6.72%);
}

/* 実現したいことの図（top-scheme.svg）は、太陽のイラストが箱の上に飛び出して
   いるぶん緑の箱が下がる。箱の上辺（SVGの12.5px＝1.79%）を左の文章の1行目に
   合わせる。3pxは行送りぶんで、こちらは図と一緒には拡縮しない */
.sup-panel--goal .sup-panel__figure {
  margin-top: calc(3px - 1.79%);
}

/* 横長の図は画面が狭くなると文字が読めなくなるので、
   縮小せずに横スクロールへ切り替える（切り替えは900px以下） */
.sup-scroll__img {
  display: block;
  width: 100%;
  height: auto;
}

.sup-subhead {
  position: relative;
  margin: 44px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.sup-subhead::before {
  content: "●";
  margin-right: 4px;
  color: var(--green);
}

.sup-flow {
  margin-top: 14px;
}

/* SP用の図に添える注記。PC用の画像には同じ文言が焼き込まれているので出さない */
.sup-flow__note {
  display: none;
}

.sup-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

.sup-note--right {
  text-align: right;
}

.sup-note--center {
  text-align: center;
}

/* 制度のイメージの図の下の注記。もとは図の中の文字だったものをHTMLに出した。
   図の中の要素の左端（SVGの27.3px＝3.8%）に頭をそろえる */
.sup-scheme-note {
  margin-top: 16px;
  padding-left: 3.8%;
}

/* ※だけ図と同じ赤にする（Figmaの #E50012） */
.sup-scheme-note__mark {
  color: #e50012;
}

/* ---------- サポーターバンクとは（説明・POINT・図の3カラム） ---------- */
.sup-bank {
  display: grid;
  grid-template-columns: 380px 222px 325px;
  justify-content: space-between;
  align-items: start;
}

.sup-bank__text p {
  margin: 0;
}

.sup-bank__text .sup-note {
  margin-top: 40px;
}

/* POINTの吹き出し。ラベルは枠線の上に重ねる（背景を白で抜く） */
.sup-point {
  position: relative;
  padding: 24px 16px 20px;
  border: 2px solid var(--green);
  border-radius: 8px;
}

.sup-point__label {
  position: absolute;
  top: -15px;
  left: 50%;
  margin: 0;
  padding: 0 10px;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.sup-point__body {
  margin: 0;
  color: var(--green);
  font-weight: 700;
  line-height: 1.9;
}

/* キャラクターは枠からはみ出して下に立つ（Figma: 117:2397） */
.sup-point__chara {
  position: absolute;
  top: 214px;
  left: 146px;
  width: 120px;
}

/* 図はFigmaから書き出した画像（images/supporter-bank.svg）。幅はFigmaの実寸 */
/* 点線の枠の上辺（SVGの18.1px＝5.54%）を左の文章の1行目に合わせる。
   枠の上に「サポーターバンク」のラベルが乗っているぶん図全体を引き上げる。
   3pxは行送りぶんで、こちらは図と一緒には拡縮しない */
.sup-bankfig {
  margin-top: calc(3px - 5.54%);
}

.sup-bankfig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- メリットと活動のイメージ（緑のブロック） ---------- */
.sup-merit {
  margin-top: 71px;
  padding: 48px 48px 56px;
  border-radius: 24px;
  background: var(--green-base);
  color: var(--white);
}

.sup-merit__head,
.sup-acts__head {
  position: relative;
  margin: 0;
  padding-left: 17px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.sup-merit__head::before,
.sup-acts__head::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 4px;
  height: 20px;
  background: var(--yellow);
}

.sup-acts__head {
  color: var(--yellow);
}

.sup-merit__lead {
  margin: 14px 0 0;
  line-height: 1.9;
}

/* バッジがカードの上辺にまたがるので、リスト側に上の余白を持たせている */
.sup-merit__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.sup-merit__item {
  position: relative;
  min-height: 180px;
  padding: 46px 18px 18px;
  border-radius: 16px;
  background: var(--white);
  color: var(--green);
}

.sup-merit__badge {
  position: absolute;
  top: -23px;
  left: 50%;
  width: 59px;
  height: 59px;
  transform: translateX(-50%);
}

.sup-merit__title {
  margin: 0;
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.sup-merit__desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.sup-merit__note {
  margin: 20px 0 0;
  font-size: 14px;
  text-align: right;
}

.sup-acts {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.sup-acts__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}

.sup-acts__lead {
  margin: 0;
}

/* 円は列幅そのままの正円にする（Figmaは211.7px＝1200-96の5等分とほぼ同じ） */
.sup-acts__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.sup-acts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  /* 下だけ余白を持たせると、中央ぞろえの中身が半分（10px）だけ上に寄る。
     説明文の最後の行が丸のふちに近づきすぎるのを避けるため */
  padding: 0 26px 20px;
  border-radius: 50%;
  background: #fffbd0;
  color: var(--green);
  text-align: center;
}

.sup-acts__item img {
  width: 64px;
  height: 64px;
}

.sup-acts__title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

/* 円の中は横幅が取れないので、字間を少し詰めて行数を抑える。
   行の頭はそろえたいので左ぞろえにし、箱そのものは中央に置く
   （align-items: center なので箱の幅は内容なりになる） */
.sup-acts__desc {
  margin: 4px 0 0;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 1.5;
  text-align: left;
  /* 丸のふちに寄りすぎるので、説明文だけ1.5文字ぶん（21px）幅を詰める。
     align-items: center が効いているので箱は中央に置かれたまま */
  max-width: calc(100% - 21px);
}

/* ---------- 申請への導線 ---------- */
.sup-cta {
  margin-top: 76px;
  padding-bottom: 80px;
}

/* 吹き出しとキャラクターを合わせた幅（613px）で中央にそろえたいので、
   吹き出し自体は左に46pxずらしている */
.sup-cta__balloon {
  position: relative;
  left: -46px;
  width: 521px;
  max-width: 100%;
  margin-inline: auto;
  padding: 20px;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: var(--white);
}

.sup-cta__balloon p {
  margin: 0;
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.sup-cta__chara {
  position: absolute;
  top: -51px;
  left: 498px;
  width: 115px;
}

.sup-cta__action {
  margin: 42px 0 0;
  text-align: center;
}

.sup-cta .sup-note--center {
  margin-top: 16px;
}

/* ---------- タブレット ---------- */
@media (max-width: 1199px) {
  .sup-mv__catch {
    margin-top: 120px;
    font-size: 28px;
  }

  .sup-mv__lead {
    margin-top: 200px;
  }

  /* 3カラムは「左＝説明とPOINT」「右＝図」の2カラムに畳む。
     置き場所を書かないと図が2段目の左（1fr）に回り込んで伸びてしまう */
  .sup-bank {
    grid-template-columns: minmax(0, 1fr) 325px;
    gap: 24px 32px;
  }

  .sup-bank__text {
    grid-area: 1 / 1;
  }

  .sup-point {
    grid-area: 2 / 1;
    max-width: 420px;
    padding-right: 140px;
  }

  .sup-bankfig {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* 枠の外に立たせる余白が無くなるので、キャラクターは枠の中へ入れる */
  .sup-point__chara {
    top: auto;
    right: 12px;
    bottom: 0;
    left: auto;
    width: 110px;
  }

  .sup-merit__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 46px 18px;
  }

  .sup-acts__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 1000px) {
  .sup-panel--goal,
  .sup-panel__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sup-panel--goal .sup-panel__figure,
  .sup-panel__cols .sup-panel__figure {
    margin-top: 0;
  }

  .sup-panel__text .sup-panel__action {
    margin-top: 48px;
  }

  .sup-bank {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sup-bank__text,
  .sup-point,
  .sup-bankfig {
    grid-column: auto;
    grid-row: auto;
  }

  .sup-point {
    max-width: none;
    padding-right: 150px;
  }

  .sup-bankfig {
    max-width: 325px;
    margin-top: 0;
  }
}

/* ---------- 横長の図を横スクロールに切り替える ---------- */
@media (max-width: 900px) {
  .sup-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sup-panel__figure .sup-scroll__img {
    width: 717px;
    max-width: none;
  }

  .sup-flow .sup-scroll__img {
    width: 1119px;
    max-width: none;
  }
}

/* ---------- SP ---------- */
@media (max-width: 600px) {
  .sup-mv {
    min-height: 0;
    padding-bottom: 40px;
    border-radius: 0 0 0 40px;
  }

  /* 地図はSPだけ説明文の背景に敷き直す。絶対配置のままだと写真に乗り上げたり
     画面の外へはみ出したりするので、contain で全体を入れて左右中央にそろえる */
  .sup-mv__map {
    display: none;
  }

  /* SPは写真を幅いっぱいの帯として見せるので角丸は付けない */
  .sup-mv__photo {
    position: static;
    height: 200px;
    margin-top: 16px;
    border-radius: 0;
  }

  /* 切り出す位置を左へ寄せて、キャッチの2行が海の上に乗るようにする
     （中央のままだと2行目が棚田の緑にかかって読みにくい） */
  .sup-mv__photo img {
    object-position: left center;
  }

  /* キャッチはPCと同じく写真に重ねる。写真の高さぶん引き上げたうえで、
     水平線（写真の上から48px）のすぐ下＝海の上に来る位置まで上げる */
  .sup-mv__catch {
    display: flex;
    align-items: flex-start;
    min-height: 200px;
    margin-top: -200px;
    padding-top: 44px;
    font-size: 24px;
  }

  .sup-mv__lead {
    margin-top: 32px;
    padding-left: 28px;
    background: url("../images/supporter-map.svg") no-repeat center / contain;
    /* padding-left のぶん右へずれるので、位置は枠の外側を基準にする */
    background-origin: border-box;
  }

  .sup-mv__title {
    font-size: 22px;
  }

  .sup-mv__title::before {
    left: -22px;
    width: 11px;
    height: 28px;
  }

  .sup-mv__lead p {
    line-height: 1.9;
  }

  .sup-sec {
    margin-top: 32px;
  }

  .sup-sec:first-child {
    margin-top: 48px;
  }

  .sup-head,
  .sup-merit__head,
  .sup-acts__head {
    font-size: 20px;
  }

  .sup-panel {
    padding: 24px 20px;
    border-radius: 12px;
  }

  /* 縦に積んだブロックどうしの間隔 */
  .sup-panel--goal,
  .sup-panel__cols,
  .sup-bank {
    gap: 48px;
  }

  /* 縦一列に並ぶので間隔を2つの値にそろえる。
     並列に置かれた要素どうしは24px、直前の要素に付く注記は12px */
  .sup-panel__text .sup-panel__action,
  .sup-subhead {
    margin-top: 24px;
  }

  /* ボタンの文字が1行に収まる幅（325px）を取れるよう、パネルの内側余白の
     外まで広げる。ページ下部の申請ボタンと同じ幅になり、折り返しもそろう */
  .sup-panel__text .sup-panel__action {
    margin-inline: -20px;
  }

  /* 実現したいことの図は太陽が箱の上に飛び出しているぶん緑の箱の上辺が下がる
     （SVGの12.457px＝3.69%）。そのぶん引き上げて、絵の始まりを24pxにそろえる。
     図と一緒に拡縮するので%で指定する */
  .sup-panel--goal .sup-panel__figure {
    margin-top: -3.69%;
  }

  /* 制度のイメージと申請フローはSP用の縦組みの図に差し替わるので、
     横スクロールをやめて幅いっぱいに出す */
  .sup-scroll {
    overflow-x: visible;
  }

  /* SP用の図はほぼ画面幅いっぱいで描かれている。パネルの内側余白の中に
     収めると絵が縮んで文字が小さくなるので、左右の余白ぶん外へ出す。
     図に付く小見出しと注記も同じ幅にそろえる */
  .sup-panel--goal .sup-panel__figure,
  .sup-panel__cols .sup-scroll,
  .sup-scheme-note,
  .sup-subhead,
  .sup-flow,
  .sup-note--right {
    margin-inline: -20px;
  }

  /* 字下げはPC版の図の中の要素に頭をそろえるためのものなので、SPでは外す */
  .sup-scheme-note {
    padding-left: 0;
  }

  .sup-panel__figure .sup-scroll__img,
  .sup-flow .sup-scroll__img {
    width: 100%;
    max-width: 100%;
  }

  /* 注記は直前の文章や図に付くものなので、間隔を詰める */
  .sup-flow,
  .sup-scheme-note,
  .sup-bank__text .sup-note {
    margin-top: 12px;
  }

  /* 申請フローはSPだと外枠と注記が画像に入っていないので、ここで組む。
     枠の内側の余白はFigmaの実寸（左右13px・上20px・下26px） */
  .sup-flow {
    padding: 20px 13px 26px;
    border: 1px solid var(--green);
    border-radius: 10px;
  }

  .sup-flow__note {
    display: block;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.8;
  }

  .sup-flow__note + .sup-flow__note {
    margin-top: 6px;
  }

  .sup-flow__note--mark {
    color: #e50012;
    font-weight: 700;
  }

  .sup-note--right {
    text-align: left;
  }

  .sup-merit {
    margin-top: 40px;
    padding: 28px 20px 32px;
    border-radius: 12px;
  }

  .sup-merit__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* 見出しと文章を白枠の天地中央に置くため、上下の余白をそろえる
     （バッジは絶対配置なので、この余白は流し込みには効かない） */
  .sup-merit__item {
    min-height: 0;
    padding: 32px 14px;
  }

  /* 1列になると天地中央のバッジが間延びして見えるので、白枠の左上角へ寄せる。
     角丸(16px)が隠れる位置まで外へ出す */
  .sup-merit__badge {
    left: -10px;
    transform: none;
  }

  .sup-merit__title {
    font-size: 16px;
  }

  /* バッジが左へ寄るぶん、カードの中身は左右中央にそろえる */
  .sup-merit__title,
  .sup-merit__desc {
    text-align: center;
  }

  /* PCで整えた改行はSPだと途中で切れて読みにくいので無効にする。
     2行目の頭をそろえるための全角スペースも、改行が無くなると
     文中の空きとして残ってしまうので一緒に消す */
  .sup-merit__desc br,
  .sup-bank__text .sup-note br,
  .sup-note__indent {
    display: none;
  }

  .sup-merit__note {
    text-align: left;
  }

  /* 円のままだと文字が入らないので、SPだけ角丸の箱にする */
  .sup-acts__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sup-acts__item {
    aspect-ratio: auto;
    padding: 20px 14px;
    border-radius: 12px;
  }

  .sup-acts__desc {
    letter-spacing: normal;
  }

  /* キャラクターは枠の下線に半分かかる位置に立ち、枠の中へ55px入る。
     下の余白をそれより大きく取らないと、文章の最終行がキャラクターに重なる
     （430px幅あたりで顕著）。上は32pxのまま */
  .sup-point {
    margin-bottom: 48px;
    padding: 32px 16px 56px;
  }

  .sup-point__chara {
    right: 50%;
    bottom: -1px;
    transform: translate(50%, 50%);
  }

  .sup-bankfig {
    margin-inline: auto;
  }

  .sup-cta {
    margin-top: 40px;
    padding-bottom: 48px;
  }

  /* POINTと同じ。キャラクターは右下で枠の中へ61px入るので、
     下の余白はそれより大きく取る（320pxや520px幅で最終行が重なる） */
  .sup-cta__balloon {
    left: 0;
    width: auto;
    margin-bottom: 84px;
    padding: 32px 16px 64px;
  }

  .sup-cta__balloon p {
    font-size: 16px;
  }

  .sup-cta__chara {
    top: auto;
    right: 16px;
    bottom: -1px;
    left: auto;
    width: 90px;
    transform: translateY(50%);
  }

  .sup-cta__action {
    margin-top: 24px;
  }
}