/* ==========================================================================
   「事業・活動紹介」ページ固有スタイル
   共通パーツ（ヘッダー／フッター／ボタン／パンくず／ヒーロー／CTA）は
   style.css と about.css を再利用し、ここでは活動紹介ページ専用の部分のみを定義する
   ========================================================================== */

section[class^="act-"] {
  padding: var(--section-gap-sp) 0;
  scroll-margin-top: 110px;
}

@media (min-width: 900px) {
  section[class^="act-"] {
    padding: var(--section-gap-pc) 0;
  }
}

.act-section--alt {
  background-color: var(--color-bg-natural-alt);
}

/* --- ヒーロー：人物が写真の左にいるため、文字は右寄せの配置にする（PC） ---- */
@media (min-width: 900px) {
  .act-hero__text {
    margin-left: auto;
    max-width: 520px;
  }
}

/* --- ページ内ナビゲーション ------------------------------------------ */
.act-jump {
  margin-top: 40px;
}

.act-jump__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.act-jump__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--color-green-deep);
  font-weight: 700;
  line-height: 1.5;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.act-jump__list a:hover {
  background-color: #fff;
  border-color: var(--color-green-soft);
}

.act-jump__num {
  font-family: var(--font-serif);
  color: var(--color-accent-gold-dark);
  letter-spacing: 0.08em;
}

@media (min-width: 640px) {
  .act-jump__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .act-jump__list {
    grid-template-columns: repeat(5, 1fr);
  }
  .act-jump__list a {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 96px;
  }
}

/* --- 事業セクション ---------------------------------------------------- */
.act-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-accent-gold-dark);
  margin-bottom: 6px;
}

.act-feature {
  display: grid;
  gap: 32px;
}

.act-media {
  display: grid;
  gap: 12px;
  align-content: start;
}

.act-media figure,
.act-res__media figure,
.act-flow figure {
  margin: 0;
}

.act-media__main,
.act-media__sub,
.act-flow__image {
  width: 100%;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.act-media__main { aspect-ratio: 4 / 3; }
.act-media__sub { aspect-ratio: 16 / 9; }
.act-media__sub--43 { aspect-ratio: 4 / 3; }
.act-flow__image { aspect-ratio: 3 / 2; }

.act-list__title {
  margin: 28px 0 10px;
  font-size: 1rem;
  color: var(--color-green-deep);
  letter-spacing: 0.1em;
}

.act-list {
  display: grid;
  gap: 8px;
}

.act-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.7;
}

.act-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-green-soft);
}

@media (min-width: 900px) {
  .act-feature {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .act-feature--reverse .act-media {
    order: -1;
  }
}

/* --- 森の資源：現在行っていること／構想段階 ------------------------- */
.act-res {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.act-res__now,
.act-res__next {
  padding: 28px 24px;
  border-radius: var(--radius-m);
}

.act-res__now {
  background-color: #fff;
  border: 1px solid var(--color-border);
}

.act-res__next {
  border: 2px dashed var(--color-green-soft);
  background-color: rgba(255, 255, 255, 0.35);
}

.act-res__title {
  margin-bottom: 16px;
  font-size: 1.25rem;
  color: var(--color-green-deep);
}

.act-res__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.act-res__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.act-res__now .ab-prose,
.act-res__next .ab-prose {
  margin-top: 18px;
}

@media (min-width: 900px) {
  .act-res {
    grid-template-columns: 3fr 2fr;
    gap: 32px;
    align-items: start;
  }
  .act-res__now,
  .act-res__next {
    padding: 36px 32px;
  }
}

/* --- 活動のつながり ---------------------------------------------------- */
.act-flow {
  display: grid;
  gap: 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.act-flow__step {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--color-accent-gold-dark);
}

.act-flow__item h3 {
  margin: 2px 0 8px;
  font-size: 1.3rem;
  color: var(--color-green-deep);
}

@media (min-width: 900px) {
  .act-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* --- 詳しい活動記録 ---------------------------------------------------- */
.act-record__inner {
  max-width: 820px;
}

.act-record__btn {
  margin-top: 28px;
}

.act-ext {
  margin-left: 8px;
  font-size: 1.1em;
}

/* --- 改行の調整：意味のまとまり（.nb）を保護。長文全体には nowrap を使わない -------- */
.nb { white-space: nowrap; }

.section-title {
  text-wrap: balance;
  word-break: auto-phrase;
}

.act-jump__list a {
  text-wrap: balance;
  word-break: auto-phrase;
}

.ab-prose p,
.act-list li,
.act-res__title,
.act-flow__item p {
  text-wrap: pretty;
  word-break: auto-phrase;
}

.act-jump__label { text-wrap: balance; word-break: auto-phrase; }

/* ヒーロー導入文：文節単位で折り返し、末尾に1〜3文字だけ残さない */
.ab-hero__lead p {
  text-wrap: pretty;
  word-break: auto-phrase;
}