@charset "UTF-8";
/* ==========================================================================
   古平・余市ウィンドファーム事業 特設サイト
   page.css ── 下層ページ共通パーツ（style.css の後に読み込む）
   --------------------------------------------------------------------------
   1. パンくず / ページヘッド
   2. セクション見出し（番号つき）
   3. カード系（step-cards / feature-cards / link-list-cards）
   4. パネル・注記・ボタン
   5. 一覧系（お知らせテーブル / タブ / ページネーション）
   6. FAQ（カテゴリー別・アンカーカード）
   7. 進捗ステッパー
   8. 関連するページ
   9. レスポンシブ
   ========================================================================== */

/* ==========================================================================
   1. パンくず / ページヘッド
   ========================================================================== */
.breadcrumb {
  padding: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-text-sub);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-top: 1.2px solid #a9b5c0;
  border-right: 1.2px solid #a9b5c0;
  transform: rotate(45deg);
}
.breadcrumb a {
  color: var(--c-blue);
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb li[aria-current] {
  font-weight: 700;
  color: var(--c-navy);
}

.page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: center;
  padding: 60px 0 17px;
}

.page-head__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.page-head__text {
  width: 390px;
}
.page-head__img {
  width: calc(100% - 420px);
  max-width: 600px;
}
.page-head__imgItem:not(:last-child) {
  margin-bottom: 10px;
}
.page-head__imgItem img {
  width: 100%;
  height: auto;
}

.page-title {
  font-size: 41px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-navy);
  letter-spacing: 0.02em;
}
.page-title .is-light {
  font-size: 0.92em;
  font-weight: 700;
}

.page-head__catch {
  margin-top: 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--c-navy);
}
.page-head__lead {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--c-text);
}

.page-head__catch + .page-head__lead {
  margin-top: 5px;
}

.page-head__illust {
  align-self: end;
  justify-self: end;
  width: 100%;
  max-width: 400px;
}

/* ==========================================================================
   2. セクション見出し（番号つき）
   ========================================================================== */
.sec {
  margin-top: 20px;
}
.sec--tight {
  margin-top: 13px;
}

/* 「1. 見出し」形式 */
.sec-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
  letter-spacing: 0.02em;
}
.sec-title__num {
  flex: none;
}
.sec-title--green {
  color: #1f7a52;
}

/* 丸番号つき見出し */
.sec-title--circle {
  gap: 12px;
  align-items: center;
}
.sec-title--circle .sec-title__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
.sec-title--circle.sec-title--green .sec-title__num {
  background: #1f7a52;
}

/* 左に縦罫の見出し */
.sec-title--bar {
  gap: 0;
  padding-left: 12px;
  border-left: 4px solid var(--c-navy);
}
.sec-title--bar.sec-title--green {
  border-left-color: #1f7a52;
}

.sec-lead {
  margin: -6px 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
}
.sec-lead__sub {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-sub);
}

/* ==========================================================================
   3. カード系
   ========================================================================== */

/* --- ステップカード（間に矢印） --- */
.step-cards {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.step-cards--4 {
  --cols: 4;
}
.step-cards--5 {
  --cols: 5;
}

.step-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.step-card--stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.step-cards--tint .step-card {
  background: var(--c-bg-tint);
}

/* 項目間の矢印 */
.step-card:not(:first-child)::before,
.step-card:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  color: #a9b5c0;
}
.step-card:not(:first-child)::before {
  left: -22px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.step-card:not(:first-child)::after {
  left: -13px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.step-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-bg-tint);
}
.step-cards--tint .step-card__icon {
  background: #fff;
}
.step-card__icon img {
  width: 40px;
  height: 40px;
}

.step-card__body {
  min-width: 0;
}

.step-card__title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.step-card__title--green {
  color: #1f7a52;
}

.step-card__text {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text);
}

/* --- 特徴カード（アイコン＋見出し＋本文＋任意リンク） --- */
.feature-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.feature-cards--2 {
  --cols: 2;
}
.feature-cards--4 {
  --cols: 4;
}
.feature-cards--5 {
  --cols: 5;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 5px 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.feature-card--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feature-card--center .feature-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  /* 本文を3行分の高さに揃え、アイコン・見出しの位置をカード間で統一（2行の場合は上下中央） */
  min-height: calc(1.85em * 3);
}
.feature-card--row {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.detail .feature-card--row {
  align-items: flex-start;
}
.detail .feature-card {
  padding: 10px 15px 9px 5px;
}
.interest .feature-card {
  padding: 10px 10px 9px 5px;
}

.feature-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
}
.feature-card--center .feature-card__icon {
  width: 54px;
  height: 54px;
}

.feature-card__title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
}
.feature-card__title--green {
  color: #1f7a52;
}
.feature-card__title--orange {
  color: #c86a1e;
}
.feature-card__title--purple {
  color: #6b51ae;
}

.feature-card__text {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--c-text);
}
.feature-card__body {
  min-width: 0;
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-blue);
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.feature-card__link:hover {
  opacity: 0.7;
}

/* --- 箇条書きカード --- */
.list-card {
  padding: 9px 18px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.list-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  text-align: center;
}
.list-card__head img {
  width: 50px;
  height: 50px;
}
.list-card__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  /* 2行分の高さに揃え、1行の場合は上下中央（区切り線・本文の位置をカード間で統一） */
  min-height: calc(1.5em * 2);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.list-card__title--green {
  color: #1f7a52;
}
.list-card__title--orange {
  color: #c86a1e;
}

.bullets {
  padding-top: 6px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  line-height: 1.9;
}
.bullets li {
  position: relative;
  padding-left: 12px;
}
.bullets li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a9b5c0;
}

/* --- 関心アイコン（小） --- */
.topic-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 8px;
}
.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 7px 4px 6px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.topic-card img {
  width: 42px;
  height: 42px;
}
.topic-card__label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text);
}

/* ==========================================================================
   4. パネル・注記・ボタン
   ========================================================================== */
.box {
  padding: 13px 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.box--tint {
  background: var(--c-bg-tint);
  border-color: var(--c-blue-line);
}
.box--green {
  background: #f1f8f4;
  border-color: var(--c-green-line);
}
.box--blue {
  background: var(--c-blue-pale);
  border-color: var(--c-blue-line);
}
.box--cream {
  background: #fbf7ef;
  border-color: #eadfc9;
}
.box--plain {
  background: #fff;
  border-color: var(--c-border);
}

.box__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy);
}
.box__title--green {
  color: #1f7a52;
}
.box__title--lg {
  font-size: 22px;
}
.box__text {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
}

/* 注記 */
.note {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-text-sub);
}
/* 事業についてページ：※の後ろで字下げ */
.business .note {
  padding-left: 1em;
  text-indent: -1em;
}
.note--em {
  color: var(--c-red);
  font-weight: 700;
}

/* 仮文言バッジ */
.temp-note {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 12px 3px calc(12px + 1em);
  text-indent: -1em; /* ※の後ろで字下げ */
  border: 1px solid #d8dfe6;
  border-radius: 4px;
  background: #f7f9fb;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* ⓘ 付き注記 */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 7px;
  padding: 6px 16px;
  border-radius: 6px;
  background: #f4f7fa;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text);
}
.callout img {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.callout--bare {
  background: none;
  padding: 3px 0;
}

/* 未支給文言のプレースホルダー */
.is-placeholder {
  padding: 5px 14px;
  border-left: 3px solid #d8dfe6;
  background: #f7f9fb;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* 外部リンク（テキスト） */
.link-ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-ext:hover {
  text-decoration: none;
}
.link-ext img {
  width: 14px;
  height: 14px;
}

/* ボタン追加バリエーション */
.btn--outline-green {
  color: #1f7a52;
  background: #fff;
  border: 1px solid var(--c-green);
}
.btn--outline-green:hover {
  color: #fff;
  background: var(--c-green);
}

.btn--fill-green {
  gap: 16px;
  color: #fff;
  background: #1f7a52;
  border: 1px solid #1f7a52;
}
.btn--fill-green:hover {
  background: #196242;
}
.btn--fill-green img {
  width: 30px;
  height: 30px;
}

.btn--fill-blue {
  color: #fff;
  background: var(--c-blue);
  border: 1px solid var(--c-blue);
}
.btn--fill-blue:hover {
  background: var(--c-blue-dark);
}

.btn-center {
  margin-top: 10px;
  text-align: center;
}
.btn-center .btn {
  min-width: 320px;
}

/* カード内に置く場合は幅いっぱいに */
.feature-card .btn-center,
.list-card .btn-center {
  margin-top: 8px;
}
.feature-card .btn-center .btn,
.list-card .btn-center .btn {
  min-width: 0;
  width: 100%;
  padding-inline: 14px;
  gap: 10px;
}

/* ==========================================================================
   5. 一覧系（お知らせ）
   ========================================================================== */

/* --- カテゴリータブ --- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 22px;
}
.filter__btn {
  min-height: 38px;
  padding: 4px 22px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter__btn:hover {
  border-color: var(--c-green);
  color: #1f7a52;
}
.filter__btn[aria-pressed="true"] {
  background: #1f7a52;
  border-color: #1f7a52;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(31, 122, 82, 0.35);
}

/* --- お知らせテーブル --- */
.news-table {
  border-top: 1px solid var(--c-border);
}
.news-table__head {
  display: grid;
  grid-template-columns: 128px 132px minmax(0, 1fr) 32px;
  gap: 16px;
  padding: 5px 12px;
  background: var(--c-bg-tint);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-navy);
}
.news-table__row {
  display: grid;
  grid-template-columns: 128px 132px minmax(0, 1fr) 32px;
  gap: 16px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.news-table__row[hidden] {
  display: none;
}
.news-table__row:hover {
  background: #fafcfe;
}

.news-table__row:hover .news-table__title {
  color: var(--c-blue);
  text-decoration: underline;
}

.news-table__row.no-link:hover .news-table__title {
  text-decoration: none;
}

.news-table__date {
  font-size: 13.5px;
  color: var(--c-text-sub);
}
.news-table__title {
  font-size: 14.5px;
  line-height: 1.65;
}
.news-table__arrow {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--c-blue);
  border-right: 1.5px solid var(--c-blue);
  transform: rotate(45deg);
}
/* 別タブで開く行は矢印の代わりに外部リンクアイコンを置く */
.news-table__ext {
  justify-self: end;
}
/* SP用：タイトル文字の後ろに付ける外部リンクアイコン（PCでは非表示） */
.news-table__ext-sp {
  display: none;
}

/* カテゴリーラベル */
.cat {
  display: inline-block;
  justify-self: start;
  min-width: 104px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}
.cat--assessment {
  color: #1f7a52;
}
.cat--meeting {
  color: #c86a1e;
}
.cat--business {
  color: var(--c-blue);
}
.cat--community {
  color: #6b51ae;
}

.news-empty {
  padding: 17px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-text-sub);
  text-align: center;
}

/* --- ページネーション --- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
}
.pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  color: var(--c-text);
}
.pager__item:hover {
  border-color: var(--c-green);
  color: #1f7a52;
}
.pager__item[aria-current="page"] {
  background: #1f7a52;
  border-color: #1f7a52;
  color: #fff;
  font-weight: 700;
}
.pager__item[aria-disabled="true"] {
  color: #b7c1ca;
  pointer-events: none;
}
.pager__num {
  padding: 0;
  border: 0;
  background: none;
}

/* ==========================================================================
   6. FAQ
   ========================================================================== */

/* --- 気になることから探す（アンカーカード） --- */
.anchor-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.anchor-cards li {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.anchor-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  justify-items: center;
  align-items: start;
  gap: 10px;
  padding: 11px 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.anchor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-card);
}
.anchor-card img {
  width: 50px;
  height: 50px;
}
.anchor-card__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.anchor-card__title--green {
  color: #1f7a52;
}
.anchor-card__title--orange {
  color: #c86a1e;
}
.anchor-card__title--purple {
  color: #6b51ae;
}
.anchor-card__text {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--c-text-sub);
}
.anchor-card__mark {
  width: 8px;
  height: 8px;
  margin-top: 1px;
  border-bottom: 1.6px solid var(--c-blue);
  border-right: 1.6px solid var(--c-blue);
  transform: rotate(45deg);
}

/* --- カテゴリー別FAQ --- */
.faq-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: flex-start;
}
.faq-col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.faq-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--c-bg-tint);
  border-bottom: 1px solid var(--c-border);
}
.faq-col__head img {
  flex: none;
  width: 34px;
  height: 34px;
}
.faq-col__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.faq-col__title--green {
  color: #1f7a52;
}
.faq-col__title--orange {
  color: #c86a1e;
}
.faq-col__title--purple {
  color: #6b51ae;
}

.faq-col__list {
  flex: 1 1 auto;
  padding: 2px 14px;
}
.faq-col__item + .faq-col__item {
  border-top: 1px solid var(--c-border);
}
.faq-col__q {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: 6px 0;
  text-align: left;
}
.faq-col__q:hover {
  color: var(--c-blue);
}
.faq-col__q .qa-list__mark {
  font-size: 13px;
}
.faq-col__q .qa-list__text {
  font-size: 13px;
  line-height: 1.65;
}
.faq-col__toggle {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
}
.faq-col__toggle::before,
.faq-col__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: var(--c-blue);
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
}
.faq-col__toggle::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq-col__q[aria-expanded="true"] .faq-col__toggle::after {
  opacity: 0;
}

.faq-col__a {
  padding: 0 0 7px 19px;
  font-size: 12.5px;
  line-height: 1.85;
}
.faq-col__a .qa-more {
  font-size: 12.5px;
}
.faq-col__a[hidden] {
  display: none;
}

.faq-col__more {
  padding: 5px 14px 7px;
  text-align: right;
}
.faq-col__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-blue);
}
.faq-col__more a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   7. 進捗ステッパー
   ========================================================================== */
.stepper-wrap {
  overflow-x: auto;
  padding: 40px 0 2px;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
  min-width: 820px;
}

.stepper__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}

/* 上部の状態マーク */
.stepper__state {
  position: absolute;
  top: -11px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1.6px solid #c3d2df;
  transform: translateX(-50%);
}
.stepper__item--done .stepper__state {
  border-color: var(--c-blue);
}
.stepper__item--done .stepper__state::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 1.8px solid var(--c-blue);
  border-bottom: 1.8px solid var(--c-blue);
  transform: rotate(-45deg) translateY(-1px);
}
.stepper__item--current {
  border: 2px solid #1f7a52;
}
.stepper__item--current .stepper__state {
  border-color: #1f7a52;
  background: #1f7a52;
}
.stepper__item--current .stepper__state::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* 「現在」バッジ */
.stepper__now {
  position: absolute;
  top: -40px;
  left: 50%;
  padding: 2px 18px;
  border-radius: 14px;
  background: #1f7a52;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.stepper__now::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #1f7a52;
  transform: translateX(-50%);
}

/* 項目間の矢印 */
.stepper__item:not(:first-child)::before,
.stepper__item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  color: #a9b5c0;
}
.stepper__item:not(:first-child)::before {
  left: -22px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.stepper__item:not(:first-child)::after {
  left: -13px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.stepper__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 46px;
}
.stepper__stage {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.stepper__name {
  margin-top: 1px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
}
.stepper__item--current .stepper__name {
  font-size: 16px;
  color: #1f7a52;
}
.stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 10px 0 8px;
}
.stepper__icon img {
  width: 42px;
  height: 42px;
}
.stepper__date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
}
.stepper__desc {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-sub);
}
.stepper__item--current .stepper__desc {
  font-weight: 700;
  color: #1f7a52;
}

/* ==========================================================================
   8. 関連するページ
   ========================================================================== */
.related {
  margin-top: 22px;
  padding: 12px 26px;
  border-radius: var(--radius-lg);
  background: var(--c-bg-tint);
}
.related--plain {
  background: none;
  padding: 0;
}

.related__title {
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 4px solid var(--c-navy);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-navy);
}

.related__list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 14px;
}
.related__list--5 {
  --cols: 5;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.related-card:hover {
  border-color: var(--c-blue);
  box-shadow: var(--c-shadow);
}
.related-card img {
  flex: none;
  width: 40px;
  height: 40px;
}
.related-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.related-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.related-card__text {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-sub);
}
.related-card .arrow {
  color: var(--c-blue);
}

/* ==========================================================================
   9. レスポンシブ
   ========================================================================== */

/* --- タブレット横 --- */
@media (max-width: 1080px) {
  .page-head {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .page-title {
    font-size: 35px;
  }

  .step-cards--4 {
    --cols: 2;
  }
  .step-cards--5 {
    --cols: 3;
  }
  .feature-cards--4,
  .feature-cards--5 {
    --cols: 2;
  }
  .anchor-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .faq-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related__list,
  .related__list--5 {
    --cols: 2;
  }
  .btn-center .btn {
    min-width: 0;
  }
}

@media (max-width: 1050px) {
  .stepper__item03 .stepper__desc br {
    display: none;
  }
}

/* --- タブレット縦 --- */
@media (max-width: 900px) {
  .page-head {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 13px;
  }
  .business .page-head__lead br {
    display: none;
  }
  .page-head__illust {
    justify-self: stretch;
    max-width: none;
  }

  .page-head__flex {
    flex-direction: column;
  }
  .page-head__text {
    width: 100%;
  }
  .page-head__img {
    width: 100%;
    max-width: 100%;
  }
  .feature-cards {
    --cols: 1;
  }

  .split-2 .feature-cards {
    max-width: 336px;
    margin: 0 auto;
  }
  .list-card {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .list-card__head {
    width: 120px;
  }
  .list-card__title {
    min-height: 0;
  }
  .bullets {
    width: calc(100% - 135px);
    padding-top: 0;
    border-top: none;
  }

  .news-table__head {
    display: none;
  }
  .news-table__row {
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    padding: 7px 4px;
  }
  .news-table__title {
    grid-column: 1 / -1;
  }
  .news-table__arrow {
    display: none;
  }
  /* 矢印列がなくなるので、外部リンクアイコンは日付・カテゴリーの行の右端に置く */
  .news-table__ext {
    grid-row: 1;
    grid-column: 2;
  }

  br.pc {
    display: none;
  }
}

/* --- スマートフォン --- */
@media (max-width: 640px) {
  /* SPでは外部リンクアイコンをタイトル文字の後ろに出す */
  .news-table__ext {
    display: none;
  }
  .news-table__ext-sp {
    display: inline;
  }
  .breadcrumb {
    padding-top: 8px;
    font-size: 11.5px;
  }
  .page-head {
    padding: 8px 0 22px;
  }
  .page-title {
    font-size: 28px;
  }
  .page-head__catch {
    font-size: 15.5px;
  }
  .page-head__catch br,
  .page-head__lead br,
  .box__text br,
  .sec-lead br {
    display: none;
  }

  .sec-lead br.br-click {
    display: block;
  }

  .sec {
    margin-top: 16px;
  }
  .sec-title {
    font-size: 17.5px;
  }

  .box {
    padding: 10px 18px;
  }
  .box__title--lg {
    font-size: 19px;
  }

  .anchor-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq-cols {
    grid-template-columns: 1fr;
  }
  .topic-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
  }
  .topic-card {
    width: calc((100% - 16px) / 3);
  }
  .related {
    padding: 10px 18px;
  }
  .related__list,
  .related__list--5 {
    --cols: 1;
  }

  .filter {
    gap: 8px;
    margin: 20px 0 18px;
  }
  .filter__btn {
    padding: 3px 14px;
    font-size: 13px;
  }

  .qa-list__a {
    padding-left: 18px;
  }

  .step-cards {
    --cols: 1;
    gap: 26px;
  }

  /* 矢印を縦向きに */
  .step-card:not(:first-child)::before {
    top: -20px;
    left: 50%;
    width: 1.5px;
    height: 12px;
    transform: translateX(-50%);
  }
  .step-card:not(:first-child)::after {
    top: -13px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .step-card__inner {
    width: calc(100% - 79px);
    max-width: 100%;
  }
  .step-card__title,
  .step-card__text {
    text-align: left;
  }
}

@media (max-width: 375px) {
  .list-card__head {
    width: 80px;
  }
  .bullets {
    width: calc(100% - 95px);
  }
}

/* ==========================================================================
   10. ページ固有 ── 事業について（business.html）
   ========================================================================== */
.area-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
}
.area-map {
  width: 553px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f1f4f7;
}
.area-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area-map__zoom {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.area-map__zoom:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: -3px;
}

/* 拡大できることを示す注記（画像の下） */
.zoom-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--c-border);
  background: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-sub);
}
.zoom-hint::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("../img/icon-magnifier-b.svg") no-repeat center / contain;
}
.area-map__zoom:hover .zoom-hint {
  color: var(--c-blue);
}

/* 画像拡大モーダル */
.img-modal {
  max-width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  overflow: visible;
}
.img-modal::backdrop {
  background: rgba(10, 25, 40, 0.75);
}
.img-modal__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
}
.img-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy);
  cursor: pointer;
}
/* 共通の button:focus-visible（角丸4px）で四角くならないように */
/* 開いた時の自動フォーカスによる青枠を出さない */
.img-modal__close:focus,
.img-modal__close:focus-visible {
  border-radius: 50%;
  outline: none;
}
.img-modal__close::before,
.img-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.img-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.area-grid .feature-cards {
  --cols: 2;
  width: calc(100% - 571px);
}

.outline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.outline-grid .sec {
  margin-top: 20px;
}

.spec-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.spec-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  padding: 7px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.spec-box__label {
  /* 見出しが2行のボックスがあっても数値の位置が揃うよう、
     見出しは2行分の高さを確保して上下中央揃え */
  display: flex;
  align-items: center;
  min-height: 3em;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}
.spec-box__value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--c-green);
  line-height: 1.1;
}
.spec-box__value img {
  width: 44px;
}
.spec-box__value em {
  font-size: 27px;
  font-weight: 700;
  font-style: normal;
}
.spec-box__unit {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
}
/* 3つ目（環境影響評価）も左2つと同じ構成：
   上＝見出し／下左＝アイコン／下右＝テキスト */
.spec-box--flat {
  background: var(--c-bg-tint);
}
.spec-box__status {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-green);
}

.size-figure {
  padding: 5px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}
.size-figure img {
  width: auto;
  max-width: 100%;
  max-height: 280px;
}
.size-figure figcaption {
  padding-top: 3px;
  font-size: 12px;
  color: var(--c-text-sub);
}

.status-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}
.status-box__icon {
  width: 54px;
  align-self: center;
}
.status-box__action {
  text-align: center;
  align-self: center;
}
.status-box__action .btn {
  min-width: 190px;
}

/* ==========================================================================
   11. ページ固有 ── 地域との共生（community.html）
   ========================================================================== */
.pact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 28px;
}
.pact__title {
  padding-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  color: #1f7a52;
}
.pact__title::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 5px;
  background: #1f7a52;
}
.pact__text {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.9;
}
.pact__logos {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.pact__logos img {
  width: 100%;
  max-width: 152px;
  height: auto;
}
.pact__cross {
  flex: none;
  font-size: 16px;
  color: #a9b5c0;
}
.pact__date {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 20px;
  border: 1px solid var(--c-green-line);
  border-radius: 4px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-navy);
}

@media (max-width: 450px) {
  .pact__date {
    width: 180px;
    display: block;
    margin: 9px auto 0;
  }
}

.pillars-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-navy);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 7px;
  background: #fff;
  border: 1px solid var(--c-green-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillars li {
  padding: 10px 14px 9px;
  text-align: center;
}
.pillars li + li {
  border-left: 1px solid var(--c-green-line);
}
.pillars img {
  width: 52px;
  height: 52px;
}
.pillars__title {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.pillars__title--green {
  color: #1f7a52;
}
.pillars__title--navy {
  color: var(--c-navy);
}
.pillars__title--orange {
  color: #c86a1e;
}
.pillars__text {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--c-text-sub);
}
.pillars-link {
  margin-top: 8px;
  text-align: center;
}

.relation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 24px;
  align-items: start;
}
.relation__box {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  overflow-x: hidden;
}
.relation__figure {
  overflow-x: auto;
  width: 74%;
}
.relation__figure svg {
  display: block;
  min-width: 560px;
  width: 100%;
  height: auto;
}
.relation__body {
  width: 24%;
}
.relation__text {
  font-size: 13.5px;
  line-height: 1.9;
}
.relation__note {
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: 6px;
  background: var(--c-bg-tint);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-text-sub);
}

.contact-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.contact-box .btn {
  min-width: 280px;
}

/* ==========================================================================
   12. ページ固有 ── 環境影響評価（environment.html）／進捗（progress.html）
   ========================================================================== */
.split-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.status-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.status-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
}
.status-panel__icon img {
  width: 44px;
  height: 44px;
}
.status-panel__label {
  font-size: 14px;
  font-weight: 700;
  color: #1f7a52;
}
.status-panel__label span {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--c-text-sub);
}

.current-grid__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.current-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--c-blue-line);
  background: #fff;
}
.current-grid__icon img {
  width: 40px;
  height: 40px;
}
.current-grid__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.current-grid__content .box__title,
.current-grid__content .box__text {
  grid-column: 1;
}
.current-grid__text {
  width: calc(100% - 290px);
}
.current-grid__aside {
  text-align: center;
  width: 260px;
}
.current-grid__aside p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text);
}
.current-grid__aside .btn {
  margin-top: 6px;
  min-width: 220px;
}

.environment .page-head__text {
  width: 420px;
}
.page-head__img {
  width: calc(100% - 450px);
}

@media (max-width: 900px) {
  .environment .page-head__text {
    width: 100%;
  }
  .page-head__img {
    width: 100%;
  }
}

/* ==========================================================================
   13. ページ固有 ── レスポンシブ
   ========================================================================== */
@media (max-width: 1080px) {
  .outline-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .spec-boxes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .pact {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .relation {
    grid-template-columns: 1fr;
  }
  .split-2 {
    grid-template-columns: 1fr;
  }
  .contact-box {
    grid-template-columns: 1fr;
  }
  .box__btn {
    text-align: center;
  }
  .contact-box .btn {
    min-width: 0;
    /* width: 100%; */
  }

  .pact__text br {
    display: none;
  }
}

@media (max-width: 1015px) {
  .spec-boxes {
    max-width: 580px;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .area-map {
    width: 413px;
  }
  .area-grid .feature-cards {
    width: calc(100% - 431px);
  }
}

@media (max-width: 900px) {
  .status-box {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .status-box__action {
    grid-column: 1 / -1;
  }

  .relation--wide {
    grid-template-columns: 0;
  }
}

@media (max-width: 850px) {
  .area-grid {
    flex-direction: column;
  }
  .area-map {
    width: 100%;
    max-width: 413px;
    margin: 0 auto;
  }
  .area-grid .feature-cards {
    width: 100%;
    max-width: 413px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .spec-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
  .spec-box {
    min-height: 0;
  }
  .spec-box__label {
    min-height: 0;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillars li + li {
    border-left: 0;
    border-top: 1px solid var(--c-green-line);
  }
  .status-box {
    gap: 14px;
  }
  .current-grid__main {
    gap: 12px;
  }
  .current-grid__content {
    flex-direction: column;
    gap: 10px;
  }
  .current-grid__text {
    width: 100%;
  }
  .current-grid__aside {
    width: 100%;
    text-align: left;
  }
  .current-grid__aside p {
    text-align: left;
  }
  .current-grid__aside p br {
    display: none;
  }
  .status-panel {
    /* grid-template-columns: 1fr; */
    gap: 14px;
  }
  .current-grid__aside .btn {
    min-width: 0;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .status-panel {
    /* grid-template-columns: 1fr; */
  }
}
@media (max-width: 430px) {
  .spec-boxes {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    max-width: 193px;
  }
}

/* ==========================================================================
   14. ページ固有 ── お知らせ（news.html）
   ========================================================================== */
.status-panel--sm {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.status-panel--sm img {
  width: 34px;
  margin-top: 1px;
}

/* 5枚並びの関連カードは少し詰める */
.related__list--5 .related-card {
  gap: 10px;
  padding: 7px 12px;
}
.related__list--5 .related-card img {
  width: 36px;
  height: 36px;
}
.related__list--5 .related-card__title {
  font-size: 13px;
}
.related__list--5 .related-card__text {
  font-size: 11.5px;
}

/* 事業スキーム図（横長）：図を全幅に置き、説明文はその下に */
.relation--wide {
  grid-template-columns: 1fr;
  gap: 18px;
}
.relation--wide .relation__figure svg {
  min-width: 760px;
}

.relation--wide .relation__note {
  margin-top: 0;
}

@media (max-width: 900px) {
  .relation--wide .relation__body {
    width: 100%;
  }
  .relation--wide .relation__note {
    margin-top: 4px;
  }
}

/* 横スクロールの案内（狭い画面のみ表示） */
.scroll-hint {
  display: none;
}
@media (max-width: 900px) {
  .scroll-hint {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--c-text-sub);
  }
  .relation--wide .relation__figure {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat, linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(15, 63, 107, 0.14), transparent) left / 12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(15, 63, 107, 0.14), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .relation__box {
    flex-direction: column;
  }
}

/* ==========================================================================
   事業について：計画地の地図まわり
   - 補足説明は画像内ではなく画像の下にHTMLで記載
   ========================================================================== */
.area-grid {
  align-items: flex-start;
}
.area-map img {
  height: auto;
  object-fit: fill;
}
.map-notes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  margin-top: 16px;
}
.map-notes dt {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-navy);
  white-space: nowrap;
}
.map-notes dd {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--c-text);
}
.map-notes + .note {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .map-notes {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .map-notes dd + dt {
    margin-top: 10px;
  }
}

/* 風力発電機の外形図：寸法文字が「発電所出力」と同じ大きさで読めるよう、	/* 風力発電機の外形図：寸法文字が「発電所出力」と同じ大きさで読めるよう、
右カラムの幅いっぱいに表示する */
.size-figure img {
  width: 100%;
  max-width: 314px;
  max-height: none;
  height: auto;
}
@media (max-width: 1080px) {
  .size-figure img {
    max-width: 592px;
  }
}
@media (max-width: 430px) {
  .size-figure img {
    max-width: 290px;
  }
}

/* ==========================================================================
   環境影響評価：②どんなことを調査しているの？ ／ ③皆さまから寄せられる〜
   左右のパネルの上下を揃える
   ========================================================================== */
.split-2 {
  align-items: stretch;
}
.split-2 > .sec {
  display: flex;
  flex-direction: column;
}
.split-2 > .sec > .box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* ボタンはパネル下端に寄せる */
.split-2 .btn-center {
  margin-top: auto;
  padding-top: 14px;
}

/* ==========================================================================
   環境影響評価：④現在の状況
   ボタンをパネル全体の上下中央に配置する
   ========================================================================== */
.current-box {
  display: flex;
  align-items: center;
  gap: 30px;
}
.current-box__body {
  flex: 1 1 auto;
  min-width: 0;
}
.current-box__aside {
  flex: none;
  width: 260px;
}
.current-box .current-grid__text {
  width: 100%;
}
.current-box .current-grid__aside .btn {
  margin-top: 0;
}

@media (max-width: 900px) {
  .current-box {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .current-box__aside {
    width: 100%;
  }
}

/* ==========================================================================
   地域との共生：3. 地域とこの事業との関わり
   事業スキーム図を画像に差し替え
   ========================================================================== */
.relation__figure {
  overflow-x: visible;
}
.relation__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.relation__zoom img {
  display: block;
  width: 100%;
  height: auto;
}
.relation__zoom:hover img {
  opacity: 0.88;
}

@media (max-width: 900px) {
  /* 図が細かいため、スマートフォンでは全幅で表示する */
  .relation--wide .relation__box {
    flex-direction: column;
  }
  .relation--wide .relation__figure,
  .relation--wide .relation__body {
    width: 100%;
  }
}

/* ==========================================================================
   地域との共生：包括連携協定のロゴ
   正式ロゴに差し替え。白地のタイルに載せ、高さを揃えて並べる
   ========================================================================== */
.pact__logos {
  gap: 16px;
}
.pact__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  height: 76px;
  padding: 10px 16px;
  border: 1px solid var(--c-green-line);
  border-radius: 6px;
  background: #fff;
}
.pact__logos img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .pact__logo {
    height: 64px;
    padding: 8px 12px;
  }
}

/* 計画地の地図と、右のカード群の高さを揃える */
.area-grid {
  align-items: stretch;
}
.area-grid .feature-cards {
  grid-auto-rows: 1fr;
}

@media (max-width: 900px) {
  .area-grid {
    align-items: flex-start;
  }
  .area-grid .feature-cards {
    grid-auto-rows: auto;
  }
}

/* 地図の補足説明・注記：PCはカード群の下、スマホ（縦積み時）は地図の直下に表示 */
.map-notes-wrap--sp {
  display: none;
}
@media (max-width: 850px) {
  .map-notes-wrap--sp {
    display: block;
    width: 100%;
    max-width: 413px;
    margin: 0 auto;
  }
  /* スマホ用は縦積み時から1カラム（640px以下と同じ形） */
  .map-notes-wrap--sp .map-notes {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 0;
  }
  .map-notes-wrap--sp .map-notes dd + dt {
    margin-top: 10px;
  }
  .map-notes-wrap--pc {
    display: none;
  }
}