/* ===========================================
   生物多様性ページ CSS
   biodiversity.css
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --bio-green:           #4a8c5a;
  --bio-green-dark:      #2d5f3a;
  --bio-green-mid:       #5a9a6a;
  --bio-green-light:     #d8f0e0;
  --bio-green-banner:    #5a9a6a;
  --bio-orange:          #e07030;
  --bio-yellow-bg:       #f5f0d5;
  --bio-hero-bg:         #c8e8cc;
  --bio-white:           #ffffff;
  --bio-text:            #333333;
  --bio-text-light:      #555555;
  --bio-card-mori:       #5a8c50;
  --bio-card-harappa:    #cc66b2;
  --bio-card-mizube:     #3399cc;
  --bio-card-tatemon:    #b89050;
  --bio-navy:            #4a90b8;
  --bio-content-width:   1000px;
  --bio-bg-bright:       #fffedd;
  --bio-bg-muted:        #eeead0;
  --bio-bg-green:        #cde6a5;
}

main.biodiversity {
  /*background-color: #ebf5f0;*/
  font-family: "Noto Sans JP", sans-serif;
}

main.what-is-biodiversity {
  /*background-color: var(--bio-bg-bright);*/
}

main.biodiversity .bnr-list {
  display: none;
}

/* ユーティリティ */
@media (min-width: 768px) {
  .bio-br-sp { display: none; }
}

/* ===========================================
   KV ヒーロー
=========================================== */
.bio-kv {
  position: relative;
  overflow: hidden;
  background-color: #cde6a5;
  background-image: -webkit-image-set(url('../images/top_hero_mobile.webp') 1x, url('../images/top_hero_mobile@2x.webp') 2x);
  background-image: image-set(url('../images/top_hero_mobile.webp') 1x, url('../images/top_hero_mobile@2x.webp') 2x);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* イラスト背景エリア */
.bio-kv__hero {
  position: relative;
  /*min-height: 48rem;*/
  padding: 0 1.6rem 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

/* タイトル：左上に配置 */
.bio-kv__title-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--bio-content-width);
  margin-top: 2rem;
}

.bio-kv__title {
  margin-bottom: 0.8rem;
  margin-top: 4rem;
}

.bio-kv__title-img {
  display: block;
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

.bio-kv__subtitle-pill {
  display: inline-block;
  background-color: var(--bio-green);
  color: var(--bio-white);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.3em 1.25em;
  border-radius: 2em;
}

/* メニューボタン */
.bio-hero-menu {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bio-hero-menu.is-fixed {
  position: fixed;
  right: 1.6rem;
  z-index: 9998;
}

@media (min-width: 1000px) {
  .bio-hero-menu.is-fixed {
    right: 1.6rem;
  }
}

.bio-hero-menu.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1rem);
}

.bio-hero-menu img {
  width: 5rem;
  height: 5rem;
  display: block;
}

/* 4つのレンズリンク（画像版） */
.bio-kv__lenz {
  position: absolute;
  z-index: 3;
  text-decoration: none;
  transition: transform 0.15s;
}

.bio-kv__lenz:hover {
  transform: scale(2.1);
}

.bio-kv__lenz:hover .bio-kv__lenz-img {
  animation-play-state: paused;
}

.bio-kv__lenz-img {
  display: block;
  width: 9rem;
  height: auto;
  animation-name: bio-kv-updown;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bio-kv__lenz--tl {
  top: clamp(22rem, -4.292rem + 67.416vw, 28rem);
  left: clamp(2.73rem, -6.297rem + 23.146vw, 4.79rem);
}
.bio-kv__lenz--tr {
  top: clamp(24rem, -2.292rem + 67.416vw, 30rem);
  right: 13%;
}
.bio-kv__lenz--bl {
  top: clamp(30rem, -0.674rem + 78.652vw, 37rem);
  left: 19%;
}
.bio-kv__lenz--br {
  top: clamp(32rem, -3.056rem + 89.888vw, 40rem);
  right: 2%;
}
.bio-kv__lenz--tl .bio-kv__lenz-img { animation-delay: 0s; }
.bio-kv__lenz--tr .bio-kv__lenz-img { animation-delay: 0.5s; }
.bio-kv__lenz--bl .bio-kv__lenz-img { animation-delay: 1s; }
.bio-kv__lenz--br .bio-kv__lenz-img { animation-delay: 1.5s; }

@keyframes bio-kv-updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}



/* スライダー */
.bio-kv__slider-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(27rem, 0.708rem + 67.416vw, 33rem);
  padding-top: 2rem;
  width: 100%;
  max-width: 42rem;
}

.bio-kv__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
}

.bio-kv__slider-track {
  position: relative;
  width: 100%;
}

.bio-kv__slide {
  display: none;
}

.bio-kv__slide--active {
  display: block;
}

.bio-kv__slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* スライダー矢印 */
.bio-kv__slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 2px solid var(--bio-green);
  background-color: rgba(255,255,255,0.8);
  color: var(--bio-green);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
  z-index: 5;
  padding: 0;
  font-size: 0;
}

.bio-kv__slider-arrow .material-icons {
  font-size: 2.4rem;
  line-height: 1;
}

.bio-kv__slider-arrow:hover {
  background-color: var(--bio-green-light);
}

/* ページネーションドット */
.bio-kv__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  position: relative;
  z-index: 2;
}

.bio-kv__dot {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bio-kv__dot--active {
  background-color: var(--bio-green-dark);
  width: 1.2rem;
  height: 1.2rem;
}

/* CTA カード */
.bio-kv__pnav-wrap {
  padding: 1.6rem 1.6rem;
  position: relative;
  z-index: 2;
}

.bio-kv__pnav-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.bio-kv__pnav-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bio-white);
  border-radius: 4.8rem;
  padding: 1.6rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  gap: 0.4rem;
  /*min-height: 8.4rem;*/
  transition: box-shadow 0.2s;

}

.bio-kv__pnav-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.bio-kv__pnav-thumb {
  display: none;
  width: 6.8rem;
  height: 6.8rem;
  flex-shrink: 0;
}

.bio-kv__pnav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bio-kv__pnav-text {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  justify-content: center;
}

.bio-kv__pnav-row1 {
  font-size: clamp(1.7rem, 1.323rem + 0.877vw, 2.2rem);
  font-weight: 700;
  color: var(--bio-text);
  line-height: 1.3;
}

.bio-kv__pnav-em {
  font-size: clamp(2.2rem, 1.747rem + 1.053vw, 2.8rem);
  font-weight: 700;
}

.bio-kv__pnav-em--kouen { color: #5eae88; }
.bio-kv__pnav-em--tokyo { color: #82b829; }

.bio-kv__pnav-row2 {
  font-size: clamp(1.7rem, 1.323rem + 0.877vw, 2.2rem);
  font-weight: 700;
  color: var(--bio-text);
  line-height: 1.3;
}

.bio-kv__pnav-arrow {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  margin-left: 0.4rem;
}

.bio-kv__pnav-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.8rem;
  height: 2px;
  background-color: #5eae88;
  transform: translateY(-50%);
}

.bio-kv__pnav-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 2px solid #5eae88;
  border-right: 2px solid #5eae88;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

.bio-kv__pnav-arrow--tokyo::before {
  background-color: #82b829;
}

.bio-kv__pnav-arrow--tokyo::after {
  border-top-color: #82b829;
  border-right-color: #82b829;
}

.bio-quicknav::before {
  content: "";
  display: none;
  position: absolute;
  right: max(4.8rem, calc((100% - var(--bio-content-width)) / 2 + 3.2rem));
  top: 2.8rem;
  width: 11rem;
  height: 7rem;
  background-image: url("../images/img_tulip.webp");
  background-image: image-set(
    url("../images/img_tulip.webp") 1x,
    url("../images/img_tulip@2x.webp") 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (min-width: 480px) {
  .bio-kv {
    background-color: #cde6a5;
    background-image: -webkit-image-set(url('../images/top_hero_w1000.webp') 1x, url('../images/top_hero_w1000@2x.webp') 2x);
    background-image: image-set(url('../images/top_hero_w1000.webp') 1x, url('../images/top_hero_w1000@2x.webp') 2x);
    background-size: 100% auto;
    background-position: center top clamp(-12rem, -0.451rem - 11.561vw, -6rem);
    /*padding-bottom: 3rem;*/
  }

  .bio-kv__title-wrap {
    margin-top: 0;
    width: 80%;
  }

  .bio-kv__title {
    margin-bottom: 0.8rem;
    margin-top: 0;
  }

  .bio-kv__hero {
    /*min-height: 56rem;*/
    /*padding: 0 2.4rem 4rem;*/
    padding: 1.6rem 3.2rem 0.8rem;
  }

  .bio-kv__title-img {
    width: 100%;
  }

  .bio-kv__lenz-img {
    width: 9rem;
  }

  .bio-kv__lenz--tl {
    top: clamp(11rem, -2.873rem + 28.902vw, 26rem);
    left: clamp(6.24rem, -4.62rem + 22.624vw, 17.982rem);
  }
  .bio-kv__lenz--tr {
    top: clamp(11rem, -4.723rem + 32.756vw, 28rem);
    right: clamp(2.4rem, -4.62rem + 14.624vw, 9.99rem);
  }
  .bio-kv__lenz--bl {
    top: clamp(19rem, -0.422rem + 40.462vw, 40rem);
    left: clamp(9.6rem, -7.392rem + 35.399vw, 27.972rem);
  }
  .bio-kv__lenz--br {
    top: clamp(20rem, -0.347rem + 42.389vw, 42rem);
    right: 6%;
  }

  .bio-kv__slider-wrap {
    margin-top: clamp(16rem, -1.538rem + 36.538vw, 35rem);
  }

}

@media (min-width: 768px) {
  .bio-kv__pnav-inner {
    flex-direction: row;
    gap: clamp(1.2rem, -3.726rem + 11.462vw, 5.6rem);
  }

  .bio-kv__pnav-card {
    flex: 1;
    justify-content: flex-start;
    padding: 0.8rem 1.6rem 0.8rem 0.8rem;
    gap: 1.2rem;
  }

  .bio-kv__pnav-text {
    flex-direction: column;
    gap: 0.2rem;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .bio-kv__pnav-thumb {
    display: block;
  }
}

@media (min-width: 1000px) {
  .bio-kv {
    /*background-color: #fffedd;*/
    background-image: -webkit-image-set(url('../images/top_hero.webp') 1x, url('../images/top_hero@2x.webp') 2x);
    background-image: image-set(url('../images/top_hero.webp') 1x, url('../images/top_hero@2x.webp') 2x);
    background-size: auto;
    background-position: center top;
    padding-bottom: 0;
  }

  .bio-kv__hero {
    /*min-height: 64rem;*/
    padding: 1.6rem 3.2rem;
  }
  .bio-kv__title{
    margin-top: 0;
    margin-bottom: 34rem;
  }

  .bio-kv__title-img {
  }

  .bio-kv__lenz-img {
    width: 9rem;
  }

  .bio-kv__lenz--tl { top: 26rem; left: 18%; }
  .bio-kv__lenz--tr { top: 28rem; right: 10%; }
  .bio-kv__lenz--bl { top: 40rem; left: 28%; }
  .bio-kv__lenz--br { top: 42rem; right: 6%; }

  .bio-kv__slider-wrap {
    margin-top: auto;
    max-width: 50rem;
  }

  .bio-kv__slider-arrow {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2.4rem;
  }

  .bio-kv__pnav-text {
    margin-left: 1rem;
    letter-spacing: 0.2rem;
  }
}

/* ===========================================
   クイックナビ
=========================================== */
.bio-quicknav {
  position: relative;
  background-color: var(--bio-bg-bright);
  background-image: -webkit-image-set(url('../images/quicknav_bg_sp.webp') 1x, url('../images/quicknav_bg_sp@2x.webp') 2x);
  background-image: image-set(url('../images/quicknav_bg_sp.webp') 1x, url('../images/quicknav_bg_sp@2x.webp') 2x);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 3.4rem 1.6rem 2.4rem;
}

.bio-quicknav__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.bio-quicknav__row {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
}

.bio-quicknav__btn[href="#bio-features"] {
  position: relative;
  overflow: visible;
}

/*トップページのセルフガイドへのボタンが非表示の場合の代替画像*/
/*.bio-quicknav__btn[href="#bio-features"]::after {*/
/*  content: none;*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  top: calc(100% + 4rem);*/
/*  transform: translateX(-50%);*/
/*  width: 6rem;*/
/*  height: 6rem;*/
/*  background-image: url("../images/img_bird.webp");*/
/*  background-image: image-set(*/
/*    url("../images/img_bird.webp") 1x,*/
/*    url("../images/img_bird@2x.webp") 2x*/
/*  );*/
/*  background-size: contain;*/
/*  background-repeat: no-repeat;*/
/*  pointer-events: none;*/
/*}*/

.bio-quicknav__row--single {
  /* 1ボタン：左寄せ、最大半分幅 */
}

.bio-quicknav__btn {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: #6b9480;
  color: var(--bio-white);
  text-decoration: none;
  border-radius: 1.8rem;
  overflow: hidden;
  gap: 0;
  min-height: 6.4rem;
  transition: opacity 0.2s;
}

.bio-quicknav__btn:hover {
  opacity: 0.85;
}

.bio-quicknav__row--single .bio-quicknav__btn {
  background-color: #7ebea0;
}

.bio-quicknav__placeholder {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.bio-quicknav__placeholder img {
  max-width: 100%;
  height: auto;
}

.bio-quicknav__thumb {
  display: none;
  width: 9rem;
  height: 6.4rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1.4rem;
  margin: 0.8rem 0 0.8rem 0.8rem;
  border: solid 1px #fff;
}

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

.bio-quicknav__text {
  flex: 1;
  padding: 0 1.2rem 0 clamp(1.2rem, -1.063rem + 5.263vw, 3.0rem);
  font-size: clamp(1.7rem, 1.474rem + 0.526vw, 2.0rem);
  font-weight: 700;
}

.bio-quicknav__arrow {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  margin-right: 1.6rem;
}

.bio-quicknav__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.8rem;
  height: 2px;
  background-color: var(--bio-white);
  transform: translateY(-50%);
}

.bio-quicknav__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 2px solid var(--bio-white);
  border-right: 2px solid var(--bio-white);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

@media (min-width: 1000px) {
  .bio-quicknav {
    padding: 14.6rem 1.6rem 1.0rem;
  }
}

/* ===========================================
   公園協会の取組と生きものたち
=========================================== */
.bio-kouen {
  background-color: var(--bio-bg-bright);
  padding: 4rem 0 4.8rem;
}

.bio-kouen__body {
  background-color: var(--bio-bg-muted);
  background-image: url("../images/paper.webp");
  background-size: cover;
  background-position: center;
  border-radius: 2.4rem 0 0 2.4rem;
  margin-left: 3%;
  overflow: hidden;
}

.bio-kouen__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  padding: 4.8rem 1.6rem;
}

/* 見出し */
.bio-kouen__heading {
  font-size: clamp(2.0rem, 1.095rem + 2.105vw, 3.2rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 3rem;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background-image: url('../images/top_h3_bg_r.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
  /*padding: 1.2rem clamp(1.0rem, -7.298rem + 19.298vw, 12.0rem);*/
  padding: 1.2rem 0 1.2rem 6rem;
  min-height: 2rem;
}

/* ツリーアイコン非表示（背景画像で代替） */
.bio-kouen__tree-icons,
.bio-tokyo__tree-icons {
  display: none;
}

.bio-kouen__heading-em {
  color: #5eae88;
  font-size: clamp(2.6rem, 1.393rem + 2.807vw, 4.2rem);
}

.bio-tokyo__heading-em {
  color: #95c349;
  font-size: clamp(2.6rem, 1.393rem + 2.807vw, 4.2rem);
}

.bio-kouen__text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.8;
  margin-bottom: 3.2rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.bio-kouen__area-intro {
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  color: #5a8c50;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 3.2rem;
}

.bio-kouen__text::after {
  content: "";
  position: absolute;
  right: -14rem;
  bottom: 1rem;
  width: 9rem;
  height: 7rem;
  background-image: url("../images/img_frog.webp");
  background-image: image-set(
    url("../images/img_frog.webp") 1x,
    url("../images/img_frog@2x.webp") 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 3×2 写真グリッド */
.bio-kouen__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.bio-kouen__photo {
  border-radius: 1.6rem;
  border: 2px solid #fff;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.bio-kouen__photo:nth-child(n+3) {
  display: none;
}

.bio-kouen__photos + .bio-kouen__photos {
  display: none;
}

/* もっとみるボタン（公園協会の取組） */
.bio-kouen__photos-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin: 1.6rem auto 4.8rem;
  padding: 1.6rem 2.4rem;
  border: none;
  border-radius: 1.2rem;
  background-color: #4a8c5a;
  color: #fff;
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
}

.bio-kouen__photos-more.is-open {
  display: none;
}

.bio-kouen__photos.is-open .bio-kouen__photo:nth-child(n+3) {
  display: block;
}

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

/* エリア別紹介ラベル */
.bio-kouen__area-label {
  color: var(--bio-white);
  text-align: center;
  font-size: 2.0rem;
  font-weight: 700;
  padding: 1rem 3rem 0.2rem;
  margin-bottom: 3.2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bio-kouen__area-label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5rem;
  background-image: url('../images/line_deep_green.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

.bio-kouen__area-label span {
  position: relative;
  z-index: 1;
  background-image: url('../images/tab_deep_green.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 1rem 2rem 1rem;
  display: inline-block;
  margin-bottom: -0.1rem;
  /*width: 70%;*/
}

/* 4エリアカード (2×2) */
.bio-kouen__area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

.bio-kouen__area-card {
  display: block;
  position: relative;
  border-radius: 1.2rem;
  padding: 2rem 2rem 6rem;
  min-height: 18rem;
  background-color: var(--bio-white);
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-position: left bottom;
  color: inherit;
  text-decoration: none;
}

.bio-kouen__area-card--mori {
  border: 2px solid var(--bio-card-mori);
  background-image: url('../images/forest_bg.webp');
}
.bio-kouen__area-card--harappa {
  border: 2px solid var(--bio-card-harappa);
  background-image: url('../images/harappa_bg.webp');
}
.bio-kouen__area-card--mizube {
  border: 2px solid var(--bio-card-mizube);
  background-image: url('../images/water_bg.webp');
}
.bio-kouen__area-card--tatemon {
  border: 2px solid var(--bio-card-tatemon);
  background-image: url('../images/archi_bd.webp');
}

.bio-kouen__area-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bio-text);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

.bio-kouen__area-title-em {
  font-size: 2.4rem;
  font-weight: 700;
}

.bio-kouen__area-card--mori .bio-kouen__area-title-em    { color: var(--bio-card-mori);    }
.bio-kouen__area-card--harappa .bio-kouen__area-title-em { color: var(--bio-card-harappa); }
.bio-kouen__area-card--mizube .bio-kouen__area-title-em  { color: var(--bio-card-mizube);  }
.bio-kouen__area-card--tatemon .bio-kouen__area-title-em { color: var(--bio-card-tatemon); }

.bio-kouen__area-text {
  font-size: 1.3rem;
  color: var(--bio-text);
  line-height: 1.7;
  max-width: 70%;
  margin-left: auto;
}

.bio-kouen__area-lenz {
  position: absolute;
  bottom: -4rem;
  right: 1.6rem;
}

.bio-kouen__area-lenz img {
  width: 8rem;
  height: auto;
  transition: transform 0.2s;
}

.bio-kouen__area-card:hover .bio-kouen__area-lenz img {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .bio-quicknav::before {
    display: block;
  }

  .bio-quicknav__btn[href="#bio-features"]::after {
    content: "";
  }

  .bio-quicknav {
    background-image: -webkit-image-set(url('../images/quicknav_bg_w1000.webp') 1x, url('../images/quicknav_bg_w1000@2x.webp') 2x);
    background-image: image-set(url('../images/quicknav_bg_w1000.webp') 1x, url('../images/quicknav_bg_w1000@2x.webp') 2x);
    padding-top: 13rem;
  }
}

@media (min-width: 1000px) {
  .bio-quicknav {
    background-image: -webkit-image-set(url('../images/quicknav_bg.webp') 1x, url('../images/quicknav_bg@2x.webp') 2x);
    background-image: image-set(url('../images/quicknav_bg.webp') 1x, url('../images/quicknav_bg@2x.webp') 2x);
    background-size: auto;
    background-position: top center;
    padding-top: 13rem;
  }
}

@media (min-width: 768px) {
  .bio-quicknav__row {
    flex-direction: row;
    gap: clamp(1.2rem, -3.726rem + 11.462vw, 5.6rem);
  }

  .bio-quicknav__row--single .bio-quicknav__btn {
    flex: 0 0 calc(50% - clamp(0.6rem, -1.863rem + 5.731vw, 2.8rem));
  }

  .bio-quicknav__placeholder {
    display: flex;
  }

  .bio-quicknav__btn[href="./self-guided/"] + .bio-quicknav__placeholder {
    display: none;
  }

  .bio-quicknav__thumb {
    display: block;
  }

  .bio-quicknav__inner {
    gap: 3.0rem;
  }
}

@media (min-width: 768px) {
  .bio-kouen__area-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bio-kouen__area-title {
    font-size: 1.6rem;
  }

  .bio-kouen__area-title-em {
    font-size: 2.8rem;
  }

  .bio-kouen__area-text {
    font-size: 1.3rem;
  }

  .bio-kouen__area-lenz img {
    width: 10rem;
  }

}

@media (min-width: 768px) {
  .bio-kouen__photos {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 7.2rem;
  }

  .bio-kouen__photo {
    border-radius: 3.2rem;
  }

  .bio-kouen__photo:nth-child(n+3) {
    display: block;
  }

  .bio-kouen__photos + .bio-kouen__photos {
    display: grid;
  }

  .bio-kouen__photos-more {
    display: none;
  }
}

@media (min-width: 1000px) {
  .bio-kouen {
    padding: 4.8rem 0 6.4rem;
  }

  .bio-kouen__body {
    margin-left: 4%;
    border-radius: 3.2rem 0 0 3.2rem;
  }

  .bio-kouen__area-card {
    padding: 2rem 2rem 6.4rem;
    min-height: 16rem;
  }
}

/* ===========================================
   東京都の生物多様性への取組
=========================================== */
.bio-tokyo {
  background-color: var(--bio-bg-bright);
  padding: 4rem 0 4.8rem;
}

.bio-tokyo__body {
  background-color: var(--bio-bg-muted);
  background-image: url("../images/paper.webp");
  background-size: cover;
  background-position: center;
  border-radius: 0 2.4rem 2.4rem 0;
  margin-right: 3%;
  overflow: hidden;
}

.bio-tokyo__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  padding: 4.8rem 1.6rem 0;
}

.bio-tokyo__heading {
  font-size: clamp(2.0rem, 1.095rem + 2.105vw, 3.2rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 3rem;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background-image: url('../images/top_h3_bg_l.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: right center;
  background-size: auto 100%, auto 100%;
  /*padding: 1.2rem clamp(1.0rem, -7.298rem + 19.298vw, 12.0rem);*/
  padding: 1.2rem 7rem 1.2rem 0;
  min-height: 4px;

}

.bio-tokyo__sub {
  margin-bottom: 6.2rem;
}

/* サブセクションバナー */
.bio-tokyo__banner {
  font-size: clamp(2.0rem, 1.698rem + 0.702vw, 2.4rem);
  font-weight: 700;
  color: var(--bio-white);
  padding: 1rem 2rem;
  border-radius: 2.4rem;
  margin-bottom: 1.6rem;
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.bio-tokyo__banner--green { background-color: #95c349; }
.bio-tokyo__banner--navy  { background-color: #52a8d4; }

.bio-tokyo__text-wrap {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.bio-tokyo__text-wrap--fish {
  flex-direction: row;
}

.bio-tokyo__text {
  position: relative;
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.8;
  flex: 1;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

/* カワセミイラスト */
.bio-tokyo__text--kawasemi::before {
  content: "";
  position: absolute;
  left: -12rem;
  top: 3rem;
  width: 7.2rem;
  height: 7.2rem;
  background-image: url("../images/illust_kawasemi.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.bio-tokyo__bird-placeholder {
  width: 5.6rem;
  height: 8rem;
  background: linear-gradient(135deg, #4a9acc 40%, #3a7aa8 100%);
  border-radius: 50% 50% 50% 30%;
  position: relative;
  opacity: 0.6;
}

/* 魚イラスト */
.bio-tokyo__text--fish::after {
  content: "";
  position: absolute;
  right: -16rem;
  top: 4rem;
  width: 13.2rem;
  height: 13.2rem;
  background-image: url("../images/illust_two_fish.svg");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.bio-tokyo__fish-placeholder {
  width: 7.2rem;
  height: 4.8rem;
  background: linear-gradient(90deg, #888 30%, #aaa 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  clip-path: polygon(0 50%, 20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%);
  opacity: 0.5;
}

/* 写真グリッド ラッパー */
.bio-tokyo__photos-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.bio-tokyo__photos-wrap .bio-tokyo__photos {
  display: contents;
}

.bio-tokyo__photo {
  border-radius: 1.6rem;
  border: 2px solid #fff;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.bio-tokyo__photo:nth-child(n+3) {
  display: none;
}

.bio-tokyo__photos-wrap .bio-tokyo__photos:nth-child(2) {
  display: none;
}

/* もっとみるボタン（写真グリッド・モバイルのみ） */
.bio-tokyo__photos-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin: 1.6rem auto;
  padding: 1.6rem 2.4rem;
  border: none;
  border-radius: 1.2rem;
  background-color: #4a8c5a;
  color: #fff;
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
}

.bio-tokyo__photos-more--green {
  background-color: #95c349;
}

.bio-tokyo__photos-more--navy {
  background-color: #52a8d4;
}

.bio-tokyo__photos-more.is-open {
  display: none;
}

.bio-tokyo__sub.is-open .bio-tokyo__photo:nth-child(n+3) {
  display: block;
}

.bio-tokyo__sub.is-open .bio-tokyo__photos-wrap .bio-tokyo__photos:nth-child(2) {
  display: contents;
}

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

/* 詳しくみるボタン */
.bio-tokyo__more {
  text-align: center;
  margin-top: 2rem;
}

.bio-tokyo__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.2rem 7rem 1.2rem 5.2rem;
  min-width: 22rem;
  border: 2px solid #95c349;
  color: #95c349;
  text-decoration: none;
  border-radius: 3.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: var(--bio-white);
  transition: background-color 0.2s, color 0.2s;
}

.bio-tokyo__more-btn:hover {
  background-color: #95c349;
  color: var(--bio-white);
}

.bio-tokyo__more-btn:hover .bio-tokyo__more-arrow::before {
  background-color: var(--bio-white);
}

.bio-tokyo__more-btn:hover .bio-tokyo__more-arrow::after {
  border-color: var(--bio-white);
}

.bio-tokyo__more-btn--navy {
  border-color: #52a8d4;
  color: #52a8d4;
}

.bio-tokyo__more-btn--navy:hover {
  background-color: #52a8d4;
}

.bio-tokyo__more-btn--navy .bio-tokyo__more-arrow::before {
  background-color: #52a8d4;
}

.bio-tokyo__more-btn--navy .bio-tokyo__more-arrow::after {
  border-color: #52a8d4;
}

.bio-tokyo__more-arrow {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.bio-tokyo__more-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.8rem;
  height: 2px;
  background-color: #95c349;
  transform: translateY(-50%);
}

.bio-tokyo__more-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 2px solid #95c349;
  border-right: 2px solid #95c349;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

@media (min-width: 768px) {
  .bio-tokyo__photos-wrap {
    display: block;
  }

  .bio-tokyo__photos-wrap .bio-tokyo__photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
  }

  .bio-tokyo__photo {
    border-radius: 3.2rem;
  }

  .bio-tokyo__photo:nth-child(n+3) {
    display: block;
  }

  .bio-tokyo__photos-wrap .bio-tokyo__photos:nth-child(2) {
    display: grid;
  }

  .bio-tokyo__photos-more {
    display: none;
  }
}

@media (min-width: 1000px) {
  .bio-tokyo {
    padding: 4.8rem 0 6.4rem;
  }

  .bio-tokyo__body {
    margin-right: 4%;
    border-radius: 0 3.2rem 3.2rem 0;
  }
}

/* ===========================================
   生物多様性とは？
=========================================== */
.bio-what {
  background-color: #cde6a5;
  background-image: url("../images/top_w_wave_green_top_w1000.webp");
  background-image: image-set(
    url("../images/top_w_wave_green_top_w1000.webp") 1x,
    url("../images/top_w_wave_green_top_w1000@2x.webp") 2x
  );
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 4rem 0 4rem;
}

.bio-what__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  padding: 4.8rem 1.6rem 0;
}

/* 2カラムレイアウト（左：ラベル、右：テキスト） */
.bio-what__intro {
  display: flex;
  gap: 2.4rem;
  align-items: flex-start;
  margin-bottom: 2.4rem;
  flex-direction: column;
}

.bio-what__intro-label {
  flex-shrink: 0;
}

.bio-what__label {
  display: block;
  background-color: var(--bio-green);
  color: var(--bio-white);
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1.4rem 5rem 1.4rem 2.4rem;
  border-radius: 1.4rem 2.4rem 2.4rem 0;
  white-space: nowrap;
}

.bio-what__text {
  position: relative;
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.8;
  flex: 1;
}

/* タンポポイラスト */
.bio-what__text::after {
  content: "";
  position: absolute;
  right: 0;
  top: -7rem;
  width: 7rem;
  height: 7rem;
  background-image: url("../images/tanpopo.webp");
  background-image: image-set(
    url("../images/tanpopo.webp") 1x,
    url("../images/tanpopo@2x.webp") 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (min-width: 768px) {
  .bio-what__text::after {
    right: auto;
    top: auto;
    left: -10rem;
    bottom: 0;
  }

  .bio-what__intro {
    flex-direction: row;
    align-items: flex-start;
  }

  .bio-what__label {
    font-size: 2.8rem;
  }
}

/* 生態系ダイアグラム */
.bio-what__diagram {
  margin-bottom: 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
}

.bio-what__diagram-img {
  display: block;
  width: 100%;
  height: auto;
}


.bio-what__more {
  text-align: center;
}

.bio-what__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.2rem 7rem 1.2rem 5.2rem;
  min-width: 22rem;
  border: 2px solid var(--bio-green-dark);
  color: var(--bio-green-dark);
  text-decoration: none;
  border-radius: 3.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: var(--bio-white);
  transition: background-color 0.2s, color 0.2s;
}

.bio-what__more-btn:hover {
  background-color: var(--bio-green-dark);
  color: var(--bio-white);
}

.bio-what__more-btn:hover .bio-what__more-arrow::before {
  background-color: var(--bio-white);
}

.bio-what__more-btn:hover .bio-what__more-arrow::after {
  border-color: var(--bio-white);
}

.bio-what__more-arrow {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.bio-what__more-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.8rem;
  height: 2px;
  background-color: var(--bio-green-dark);
  transform: translateY(-50%);
}

.bio-what__more-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 2px solid var(--bio-green-dark);
  border-right: 2px solid var(--bio-green-dark);
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 1000px) {
  .bio-what {
    background-image: url("../images/top_w_wave_green_top.webp");
    background-image: image-set(
      url("../images/top_w_wave_green_top.webp") 1x,
      url("../images/top_w_wave_green_top@2x.webp") 2x
    );
    background-size: auto;
    padding: 4rem 0 4rem;
  }
}


/* ===========================================
   公園協会の特長
=========================================== */
.bio-features {
  background-color: var(--bio-white);
  background-image: url("../images/top_w_wave_green_bottom_w1000.webp");
  background-image: image-set(
    url("../images/top_w_wave_green_bottom_w1000.webp") 1x,
    url("../images/top_w_wave_green_bottom_w1000@2x.webp") 2x
  );
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 4rem 0 4rem;
}

.bio-features__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  padding: 4rem 1.6rem;
}

.bio-features__label {
  color: var(--bio-white);
  text-align: center;
  font-size: clamp(2.2rem, 1.596rem + 1.404vw, 3.0rem);
  font-weight: 700;
  padding: 0.2rem 2rem 0.8rem;
  margin-bottom: 3.2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

}

.bio-features__label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5rem;
  background-image: url('../images/big_tab_line_deep_green.webp');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

.bio-features__label span {
  position: relative;
  z-index: 1;
  background-image: url('../images/big_tab_deep_green.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 1.2rem clamp(5.0rem, 3.491rem + 3.509vw, 7.0rem) 1.2rem;
  display: inline-block;
}

.bio-features__text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.8;
  margin-bottom: 3.2rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

/* 施設カード */
.bio-features__facility-cards {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-bottom: 3.2rem;
}

.bio-features__facility-card {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.bio-features__facility-img {
  border-radius: 2.4rem;
  overflow: hidden;
  border: 1px solid #5f8b76;
}

.bio-features__facility-img img {
  width: 100%;
  height: auto;
  display: block;
}

.bio-features__facility-body {
  padding: 1.6rem 5rem 0 0;
  position: relative;
}

.bio-features__facility-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bio-green-dark);
  margin-bottom: 1.2rem;
}

.bio-features__facility-text {
  font-size: 1.4rem;
  color: var(--bio-text);
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

.bio-features__facility-link {
  position: absolute;
  right: 0;
  bottom: 0;
  text-decoration: none;
}

.bio-features__facility-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.2rem, 2.596rem + 1.404vw, 4.0rem);
  height: clamp(3.2rem, 2.596rem + 1.404vw, 4.0rem);
  border: 2px solid var(--bio-green-dark);
  border-radius: 50%;
  font-size: 2rem;
  background-color: var(--bio-green-dark);
  color: var(--bio-white);
  transition: background-color 0.2s, color 0.2s;
}

.bio-features__facility-card:hover .bio-features__facility-arrow {
  background-color: transparent;
  color: var(--bio-green-dark);
}

/* リンクカード */
.bio-features__link-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.bio-features__link-card {
  display: block;
  text-decoration: none;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 2px solid var(--bio-green-light);
}

.bio-features__link-card-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.bio-features__link-card--text .bio-features__link-card-img img {
  object-fit: contain;
  background-color: var(--bio-white);
  padding: 1.6rem;
}

@media (min-width: 768px) {
  .bio-features__facility-cards {
    flex-direction: row;
  }

  .bio-features__facility-card {
    flex: 1;
  }
}

@media (min-width: 1000px) {
  .bio-features {
    background-image: url("../images/top_w_wave_green_bottom.webp");
    background-image: image-set(
      url("../images/top_w_wave_green_bottom.webp") 1x,
      url("../images/top_w_wave_green_bottom@2x.webp") 2x
    );
    background-size: auto;
    padding: 8rem 0 4rem;
  }
}

/* ===========================================
   多摩丘陵・自然公園 テキストカード
=========================================== */
.bio-places {
  background-color: var(--bio-bg-green);
  padding: 3.2rem 0 4.8rem;
}

.bio-places__inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  padding: 4rem 1.6rem;
}

.bio-places__cards {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.bio-places__card {
  flex: 1;
}

.bio-places__card-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bio-green-dark);
  margin-bottom: 0.8rem;
}

.bio-places__card-text {
  font-size: 1.4rem;
  color: var(--bio-text-light);
  line-height: 1.8;
}

@media (min-width: 431px) {
  .bio-places__cards {
    flex-direction: row;
  }
}

/* ===========================================
   森や雑木林 サブページ (bio-fw)
   ※ 1rem = 10px (html font-size:62.5%)
=========================================== */

.bio-fw {
  background-image: url("../images/bg_wave_grren.webp");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center top;
}

.meadow .bio-fw {
  background-image: url("../images/bg_wave_pink.webp");
}

.waterfront .bio-fw {
  background-image: url("../images/bg_wave_blue.webp");
}

.indoor .bio-fw {
  background-image: url("../images/bg_wave_brown.webp");
}


/* --- ヒーロー --- */
.bio-fw__hero {
  position: relative;
  overflow: hidden;
}

/* モバイル: 画像横幅100%、高さは画像に追従 */
.bio-fw__hero-bg {
  display: block;
  width: 100%;
  height: auto;
}

.bio-fw__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 2.4rem;
}

.bio-fw__hero-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  width: 100%;
}

.bio-fw__hero-title {
  margin: 0;
}

.bio-fw__hero-title-img {
  display: block;
  height: auto;
  max-width: 30%;
}

@media (min-width: 481px) {
  .bio-fw__hero-title-img {
    max-width: 20%;
  }
}

@media (min-width: 1000px) {
  .bio-fw__hero-title-img {
    max-width: 100%;
  }
}

/* デスクトップ: 高さ固定300px、背景画像を実寸・中央揃え */
@media (min-width: 1000px) {
  .bio-fw__hero {
    height: 30rem;
    background-image: url('../images/subpage_hero.webp');
    background-image: image-set(
      url('../images/subpage_hero.webp') 1x,
      url('../images/subpage_hero@2x.webp') 2x
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
  }

  .bio-fw__hero-bg {
    display: none;
  }
}

/* --- サブタイトル --- */
.bio-fw__subtitle {
  /*background-color: var(--bio-bg-muted);*/
  padding: 2.4rem 1.6rem;
  /*border-bottom: 1px solid #ddd;*/
}

.bio-fw__subtitle-heading {
  font-size: clamp(1.8rem, 1.197rem + 1.404vw, 2.6rem);
  font-weight: 700;
  color: #333;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background-image: url('../images/top_h3_bg_r.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
  /*padding: 1.2rem clamp(1.0rem, -7.298rem + 19.298vw, 12.0rem);*/
  padding: 0 0 0.8rem 5rem;
  min-height: 2rem;
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .bio-fw__subtitle-heading {
    padding: 1.2rem 0 1.4rem 5rem;
  }
}

.bio-fw__subtitle-em {
  color: #5eae88;
  font-size: 4.2rem;
}

/* --- 第二階層サブタイトル --- */
.bio-fw__subtitle-heading_2 {
  font-size: clamp(1.8rem, 1.197rem + 1.404vw, 2.6rem);
  background-image: url('../images/bg_heading_green_tree_bg_l_2.webp');
  background-image: image-set(
          url('../images/bg_heading_green_tree_bg_l_2.webp') 1x,
          url('../images/bg_heading_green_tree_bg_l_2@2x.webp') 2x
  );
  color: #6eb694;
}

.bio-fw__subtitle-heading_2 .bio-fw__subtitle-em {
  font-size: clamp(2.0rem, 1.397rem + 1.404vw, 2.8rem);
  color: var(--bio-white);
  background-image: url('../images/bg_4beans_green.webp');
  background-image: image-set(
          url('../images/bg_4beans_green.webp') 1x,
          url('../images/bg_4beans_green@2x.webp') 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: clamp(0.6rem, 0.298rem + 0.702vw, 1.0rem) clamp(1.0rem, -0.056rem + 2.456vw, 2.4rem) clamp(1.0rem, 0.698rem + 0.702vw, 1.4rem);
}


/* --- タイトルブロック --- */
.bio-fw__title-block {
  background-color: var(--bio-card-mori);
  border-radius: 1.2rem;
  padding: 1.6rem 2.4rem;
}

.bio-fw__area-badge {
  display: inline-block;
  background-color: var(--bio-white);
  color: var(--bio-card-mori);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.3em 1em;
  border-radius: 0.4rem;
  margin-bottom: 0.8rem;
}

.bio-fw__title {
  color: var(--bio-white);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.bio-fw__title-em {
  font-size: 3.6rem;
}

/* --- イントロ --- */
.bio-fw__intro {
  padding: 1rem 1.6rem 3.8rem;
}

.bio-fw__intro-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

/* h3 見出し */
.bio-fw__intro-heading {
  margin-bottom: 2.4rem;
  position: relative;
  padding-left: 2rem;
}

.bio-fw__intro-heading-frag {
  position: absolute;
  left: 0;
  top: 0;
  width: 12rem;
  height: auto;
}

.bio-fw__intro-heading-text {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--bio-text);
  line-height: 1.4;
  padding-top: 2.4rem;
}

.bio-fw__intro-heading-em {
  font-size: clamp(2.8rem, 1.744rem + 2.456vw, 4.2rem);
  color: var(--bio-card-mori);
}

.meadow .bio-fw__intro-heading-em{
  color: #cc66b2;
}

.waterfront .bio-fw__intro-heading-em{
  color: #3399cc;
}

.indoor .bio-fw__intro-heading-em{
  color: #99661e;
}

/* 2カラムレイアウト */
.bio-fw__intro-layout {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.bio-fw__intro-left {
  flex: 1;
  order: 2;
}

.bio-fw__intro-text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
  margin-bottom: 2.4rem;
}

.bio-fw__intro-right {
  flex: 1;
  order: 1;
}

.bio-fw__intro-photo {
  border-radius: 2.4rem;
  overflow: hidden;
  border: 3px solid #fff;
}


.bio-fw__intro-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 装飾: img_forest + lenz */
.bio-fw__intro-deco {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: relative;
}

.bio-fw__intro-deco-img {
  display: block;
  width: 24rem;
  height: auto;
}

.bio-fw__intro-lenz-img {
  display: block;
  width: 10rem;
  height: auto;
  margin-left: 0;
  transition: transform 0.3s ease;
}

.bio-fw__intro-lenz-img:hover {
  transform: scale(1.15);
}

@media (min-width: 431px) {
  .bio-fw__intro-heading-text {
    font-size: 2.8rem;
  }
}

@media (min-width: 768px) {
  .bio-fw__intro-layout {
    flex-direction: row;
    gap: 4rem;
  }

  .bio-fw__intro-left {
    flex: 1;
    order: unset;
  }

  .bio-fw__intro-right {
    flex: 2;
    order: unset;
  }

  .bio-fw__intro-deco {
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
  }

  .bio-fw__intro-lenz-img {
    margin-left: -2rem;
  }

  .bio-fw__intro-heading-text {
    font-size: 3.2rem;
  }
}

/* --- 共通セクション --- */
.bio-fw__section {
  /*background-color: var(--bio-white);*/
  padding: 3.2rem 1.6rem;
  margin-bottom: 4rem;
}

.bio-fw__section-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

/* --- バナー見出し --- */
.bio-fw__banner {
  background-color: #5cad85;
  color: var(--bio-white);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 0 0.8rem 0.8rem 0;
  border-left: 15px solid #339966;
  margin-bottom: 2.4rem;
}

.meadow .bio-fw__banner {
  background-color: #d685c1;
  border-left: 15px solid #cc66b2;
}

.waterfront .bio-fw__banner {
  background-color: #5cadd6;
  border-color: #3399cc;
}

.indoor .bio-fw__banner {
  background-color: #ad854b;
  border-color: #99661e;
}

h3.bio-fw__banner[id] {
  position: relative;
  z-index: 1;
  scroll-margin-top: 8rem;
}

.bio-fw__banner-em {
  font-size: clamp(2.0rem, 1.698rem + 0.702vw, 2.4rem);
  font-weight: 700;
}

/* --- 不揃いグリッド --- */
.bio-fw__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

.bio-fw__grid-left {
  display: contents;
}

.bio-fw__grid-photo--a {
  order: 1;
}

.bio-fw__grid-text {
  order: 4;
}

.bio-fw__grid-right {
  display: none;
  flex-direction: row;
  gap: 2rem;
  order: 3;
}

.bio-fw__grid-right.is-open {
  display: flex;
}

/* もっとみるボタン（モバイルのみ） */
.bio-fw__grid-more {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.6rem 2.4rem;
  border: none;
  border-radius: 1.2rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  background-color: #4a8c5a;
  color: #fff;
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
}

.bio-fw__grid-more.is-open {
  display: none;
}

.meadow .bio-fw__grid-more {
  background-color: #d685c1;
}

.waterfront .bio-fw__grid-more {
  background-color: #5cadd6;
}

.indoor .bio-fw__grid-more {
  background-color: #ad854b;
}

.bio-fw__grid-more-arrow {
  position: absolute;
  right: 2.4rem;
  width: 1rem;
  height: 1rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.bio-fw__grid-photo {
  border-radius: 1.6rem;
  overflow: hidden;
}

.bio-fw__grid-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio-fw__grid-photo-img {
  border-radius: 1.6rem;
  overflow: hidden;
}

.bio-fw__grid-photo--a {
  /*aspect-ratio: 4/5;*/
}

.bio-fw__grid-photo--b {
  /*aspect-ratio: 4/3;*/
}

.bio-fw__grid-photo--c {
  /*aspect-ratio: 4/3;*/
}

.bio-fw__grid-text {
  position: relative;
}

.bio-fw__text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
}

.bio-fw__grid-illust {
  display: none;
  max-width: 100%;
  height: auto;
  margin-top: 1.6rem;
  margin-left: auto;
  margin-right: auto;
}

/* イラスト（モバイル用クローン） */
.bio-fw__grid-illust--mobile {
  order: 5;
  display: block;
  max-width: 100px;
  height: auto;
  margin: 0 auto;
}

/* イベントリンクボタン */
.bio-fw__event-btn {
  display: block;
  width: fit-content;
  margin: 2.4rem auto 0;
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  font-weight: 400;
  color: #339966;
  background-color: var(--bio-white);
  border: 2px solid #339966;
  border-radius: 4.8rem;
  padding: 1.2rem 3.2rem;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.bio-fw__event-btn:hover {
  background-color: #339966;
  color: var(--bio-white);
}

.indoor .bio-fw__event-btn {
  color: #99661e;
  border-color: #99661e;
}

.indoor .bio-fw__event-btn:hover {
  background-color: #99661e;
  color: var(--bio-white);
}

.meadow .bio-fw__event-btn {
  color: #cc66b2;
  border-color: #cc66b2;
}

.meadow .bio-fw__event-btn:hover {
  background-color: #cc66b2;
  color: var(--bio-white);
}

.waterfront .bio-fw__event-btn {
  color: #3399cc;
  border-color: #3399cc;
}

.waterfront .bio-fw__event-btn:hover {
  background-color: #3399cc;
  color: var(--bio-white);
}

.waterfront .bio-fw__event-btn--filled {
  background-color: #3399cc;
  color: var(--bio-white);
}

.waterfront .bio-fw__event-btn--filled:hover {
  background-color: var(--bio-white);
  color: #3399cc;
}

/* デスクトップ: 左右2カラムで不揃い配置 */
@media (min-width: 768px) {
  .bio-fw__grid {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
    align-items: flex-start;
  }

  .bio-fw__grid-left {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .bio-fw__grid-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding-top: 0;
    order: unset;
  }

  .bio-fw__grid-photo--a,
  .bio-fw__grid-text {
    order: unset;
  }

  .bio-fw__grid-more {
    display: none;
  }

  .bio-fw__grid-illust {
    display: block;
  }

  .bio-fw__grid-illust--mobile {
    display: none;
  }

  .bio-fw__grid-photo--a {
    /*aspect-ratio: 3/4;*/
  }

  .bio-fw__grid-photo--b,
  .bio-fw__grid-photo--c {
    /*aspect-ratio: 4/3;*/
  }
}

/* --- 他の取組ナビ --- */
.bio-fw__nav-section {
  background-color: var(--bio-white);
  padding: 3.2rem 1.6rem;
}

.bio-fw__nav-section-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 2px dashed #99ccaa;
  border-radius: 1.6rem;
  padding: 2.4rem;
}

.bio-fw__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  gap: 1.2rem;
  flex: 1;
}

.bio-fw__nav-item-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bio-card-mori);
}

.bio-fw__nav-item-label::before {
  content: "◆";
  margin-right: 0.4rem;
}

.bio-fw__nav-item-img {
  display: block;
  width: 12rem;
  height: auto;
  margin-top: auto;
}

@media (min-width: 431px) {
  .bio-fw__nav-section-inner {
    flex-direction: row;
    justify-content: space-around;
  }
}

/* --- ピックアップ --- */
.bio-fw__pickup {
  background-color: var(--bio-white);
  padding: 3.2rem 1.6rem;
}

.bio-fw__pickup-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  position: relative;
}

.bio-fw__pickup-badge {
  position: absolute;
  z-index: 2;
  left: 6rem;
  top: -4rem;
}

.bio-fw__pickup-icon {
  width: 10rem;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .bio-fw__pickup-icon {
    width: 18vw;
  }

  .bio-fw__pickup-badge {
    left: 3rem;
  }
}

.bio-fw__pickup-card {
  background-color: #fcfee6;
  border: 4px dotted #1b5a3c;
  border-radius: 2.4rem;
  padding: 3.0rem 2.4rem 2.4rem;
  box-shadow: 5px 5px 0 #ded7a1;
}

.bio-fw__pickup-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #5f8b76;
  text-align: center;
  margin-bottom: 2rem;
  background-color: var(--bio-white);
  border: 2px solid #ded7a1;
  border-radius: 4rem;
  padding: 1.2rem 3.2rem;
}

/*.meadow .bio-fw__pickup-card {*/
/*  border-color: #cc66b2;*/
/*}*/

.meadow .bio-fw__pickup-title {
  color: #cc66b2;
}

/*.waterfront .bio-fw__pickup-card {*/
/*  border-color: #3399cc;*/
/*}*/

.waterfront .bio-fw__pickup-title {
  color: #3399cc;
}

/*.indoor .bio-fw__pickup-card {*/
/*  border-color: #99661e;*/
/*}*/

.indoor .bio-fw__pickup-title {
  color: #99661e;
}

.bio-fw__pickup-body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: flex-start;
}

.bio-fw__pickup-photos {
  display: flex;
  gap: 1.2rem;
  flex-shrink: 0;
  width: 100%;
  align-items: stretch;
}

.bio-fw__pickup-photo {
  border-radius: 1.2rem;
  overflow: hidden;
}

.bio-fw__pickup-photo:first-child {
  flex: 4;
}

.bio-fw__pickup-photo:last-child {
  flex: 3;
}

.bio-fw__pickup-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio-fw__pickup-text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
  flex: 1;
}

@media (min-width: 768px) {
  .bio-fw__pickup-body {
    flex-direction: row;
  }

  .bio-fw__pickup-photos {
    width: 50%;
  }
}

/* --- 生きもの図鑑 --- */
.bio-fw__species {
  background-color: #f2ede1;
  padding: 3.2rem 1.6rem 4.8rem;
  margin-bottom: 8rem;
}

.bio-fw__species-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

.bio-fw__species-heading {
  font-size: clamp(2.2rem, 1.747rem + 1.053vw, 2.8rem);
  font-weight: 700;
  color: #339966;
  text-align: center;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid #fff;
  line-height: 1.4;
}

.bio-fw__species-heading--decorated {
  background-image: url('../images/bg_heading_green_mt_bg_l.webp');
  background-image: image-set(
          url('../images/bg_heading_green_mt_bg_l.webp') 1x,
          url('../images/bg_heading_green_mt_bg_l@2x.webp') 2x
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-bottom: none;
}

.meadow .bio-fw__species-heading {
  color: #cc66b2;
}

.waterfront .bio-fw__species-heading {
  color: #3399cc;
}

.indoor .bio-fw__species-heading {
  color: #99661e
}

/* タブ */
.bio-fw__tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0;
  border-bottom: 3px solid #339966;
}

.bio-fw__tab {
  flex: 1;
  padding: 1.2rem;
  font-size: clamp(1.6rem, 1.449rem + 0.351vw, 1.8rem);
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  background-color: #aaa;
  color: var(--bio-white);
  border-radius: 0.8rem 0.8rem 0 0;
  transition: background-color 0.2s;
}

.meadow .bio-fw__tabs{
  border-color: #cc66b2;
}

.waterfront .bio-fw__tabs {
  border-color: #3399cc;
}

.indoor .bio-fw__tabs {
  border-color: #99661e;
}

.bio-fw__tab:hover {
  background-color: #339966;
  color: var(--bio-white);
}


.bio-fw__tab--active {
  background-color: #339966;
  color: var(--bio-white);
}

.meadow .bio-fw__tab:hover {
  background-color: #cc66b2;
}

.meadow .bio-fw__tab--active {
  background-color: #cc66b2;
}

.waterfront .bio-fw__tab:hover {
  background-color: #3399cc;
}

.waterfront .bio-fw__tab--active {
  background-color: #3399cc;
}

.indoor .bio-fw__tab:hover {
  background-color: #99661e;
}

.indoor .bio-fw__tab--active {
  background-color: #99661e;
}





/* 種グリッド */
.bio-fw__species-content {
  background-color: var(--bio-white);
  padding: 2.4rem;
  border-radius: 0 0 1.2rem 1.2rem;
}

.bio-fw__species-caution {
  font-size: 1.4rem;
  line-height: 1.8;
  padding: 0.8rem 1.6rem;
  color: var(--bio-text);
}

.bio-fw__species-source {
  font-size: 1.3rem;
  color: #666;
  text-align: right;
  margin-top: 0.8rem;
}

.bio-fw__species-grid {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

@media (min-width: 481px) {
  .bio-fw__species-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bio-fw__species-grid--active {
  display: grid;
}

.bio-fw__species-item {
  text-align: center;
}

.bio-fw__species-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 0.8rem;
  transition: opacity 0.2s;
}

.bio-fw__species-item img:hover {
  opacity: 0.8;
}

.bio-fw__species-grid--no-lightbox .bio-fw__species-item img {
  cursor: default;
  transition: none;
}

.bio-fw__species-grid--no-lightbox .bio-fw__species-item img:hover {
  opacity: 1;
}

.bio-fw__species-item span {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bio-text);
}

@media (min-width: 768px) {
  .bio-fw__species-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- デスクトップ調整 --- */
@media (min-width: 1000px) {
  .bio-fw__title {
    font-size: 3.6rem;
  }

  .bio-fw__title-em {
    font-size: 4.8rem;
  }

  .bio-fw__intro {
    padding: 0 2rem 4rem;
  }

  .bio-fw__section {
    padding: 4rem 2rem;
  }

  .bio-fw__intro-lenz img {
    width: 12rem;
  }

  .bio-fw__pickup {
    padding: 4rem 2rem;
    margin-bottom: 4rem;
  }

  .bio-fw__species {
    padding: 4rem 2rem 8rem;
  }

  .bio-fw__species-heading {
    font-size: 3.2rem;
  }
}

/* ===========================================
   Lightbox
=========================================== */
.bio-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.bio-lightbox--active {
  display: flex;
}

.bio-lightbox__img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0.8rem;
}

.bio-lightbox__caption {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 1.6rem;
  text-align: center;
}

.bio-lightbox__close {
  position: absolute;
  top: 1.6rem;
  right: 2.4rem;
  color: #fff;
  font-size: 3.6rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.bio-fw__species-item img {
  cursor: pointer;
}

/* ===========================================
   生物多様性とは ページ
=========================================== */

.bio-fw--biodiversity {
  background-image: url("../images/biodiversity/bg_wave_light_green.webp");
  background-image: image-set(
    url("../images/biodiversity/bg_wave_light_green.webp") 1x,
    url("../images/biodiversity/bg_wave_light_green@2x.webp") 2x
  );
}

.bio-fw--biodiversity .bio-fw__grid-photo {
  border-radius: 0;
  overflow: visible;
}

.bio-fw--biodiversity .bio-fw__section {
  margin-bottom: 0;
}

/* h2サブタイトルはkaiboriと同じスタイルを適用 */
.bio-fw--biodiversity .bio-fw__subtitle-heading {
  background-image: url('../images/kaibori/bg_heading_green_tree_bg_l.webp');
  background-image: image-set(
    url('../images/kaibori/bg_heading_green_tree_bg_l.webp') 1x,
    url('../images/kaibori/bg_heading_green_tree_bg_l@2x.webp') 2x
  );
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
  color: #82b829;
}

.bio-fw--biodiversity .bio-fw__subtitle-em {
  font-size: clamp(2.0rem, 1.397rem + 1.404vw, 2.8rem);
  color: var(--bio-white);
  background-image: url('../images/kaibori/bg_beans_green.webp');
  background-image: image-set(
    url('../images/kaibori/bg_beans_green.webp') 1x,
    url('../images/kaibori/bg_beans_green@2x.webp') 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: clamp(0.6rem, 0.298rem + 0.702vw, 1.0rem) clamp(1.0rem, -0.056rem + 2.456vw, 2.4rem) clamp(1.0rem, 0.698rem + 0.702vw, 1.4rem);
  border-radius: 0.4rem;
}

.bio-fw--what-is .bio-fw__subtitle-heading {
  color: #1b5a3c;
  background-image: url('../images/bg_heading_green_bird_bg_l.webp');
  background-image: image-set(
          url('../images/bg_heading_green_bird_bg_l.webp') 1x,
          url('../images/bg_heading_green_bird_bg_l@2x.webp') 2x
  );
}

.bio-fw--what-is .bio-fw__subtitle-em {
  color: var(--bio-white);
  background-image: url('../images/bg_5beans_green.webp');
  background-image: image-set(
    url('../images/bg_5beans_green.webp') 1x,
    url('../images/bg_5beans_green@2x.webp') 2x
  );
}

.bio-fw--biodiversity .bio-kb__heading-pill {
  color: var(--bio-white);
  background-color: #82b829;
  box-shadow: 6px 6px 0 #dbe9c4;
}

.bio-fw--biodiversity .bio-fw__banner {
  background-color: #9bc654;
  border-left-color: #82b829;
}

.bio-fw--biodiversity .bio-fw__species-heading {
  color: #82b829;
}

.bio-fw--biodiversity .bio-fw__tab--active,
.bio-fw--biodiversity .bio-fw__tab:hover {
  background-color: #82b829;
}

.bio-fw--biodiversity .bio-fw__tabs {
  border-bottom-color: #82b829;
}

.bio-fw--biodiversity .bio-kb__purpose-photo {
  width: auto;
  flex: 1;
}

.bio-fw--biodiversity .bio-kb__purpose-body {
  flex: 1;
}

.bio-fw--biodiversity .bio-kb__purpose-list {
  padding: 0;
}

.bio-fw--biodiversity .bio-kb__about-illust img {
  width: 20rem;
  /*transform: scaleX(-1);*/
}

.bio-kb__about-text--large {
  font-size: 2rem;
}

.bio-kb__about-text--mx-auto {
  max-width: 60rem;
  margin: 0 auto;
}

/* ===========================================
   セルフガイド ページ
=========================================== */

.bio-fw--self-guided {
  background-image: url("../images/biodiversity/bg_wave_light_green.webp");
  background-image: image-set(
    url("../images/biodiversity/bg_wave_light_green.webp") 1x,
    url("../images/biodiversity/bg_wave_light_green@2x.webp") 2x
  );
}

.bio-fw--self-guided .bio-fw__subtitle-heading {
  background-image: url('../images/kaibori/bg_heading_green_tree_bg_l.webp');
  background-image: image-set(
    url('../images/kaibori/bg_heading_green_tree_bg_l.webp') 1x,
    url('../images/kaibori/bg_heading_green_tree_bg_l@2x.webp') 2x
  );
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
  color: #82b829;
}

.bio-fw--self-guided .bio-fw__subtitle-em {
  font-size: clamp(2.0rem, 1.397rem + 1.404vw, 2.8rem);
  color: var(--bio-white);
  background-image: url('../images/bg_6beans_green.webp');
  background-image: image-set(
    url('../images/bg_6beans_green.webp') 1x,
    url('../images/bg_6beans_green@2x.webp') 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: clamp(0.6rem, 0.298rem + 0.702vw, 1.0rem) clamp(1.0rem, -0.056rem + 2.456vw, 2.4rem) clamp(1.0rem, 0.698rem + 0.702vw, 1.4rem);
  border-radius: 0.4rem;
}

.bio-sg__heading-pill {
  background-color: #82b829;
  border-radius: 4rem;
  padding: 2.4rem 3.2rem;
  text-align: center;
  margin-bottom: 4rem;
  box-shadow: 6px 6px 0 #dbe9c4;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--bio-white);
}

.bio-sg__text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
}

.bio-sg__text--mx-auto {
  max-width: 60rem;
  margin: 0 auto;
}

/* --- セルフガイド ボタングリッド --- */
.bio-sg__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 3rem 0;
  max-width: var(--bio-content-width);
  margin-inline: auto;
}

.bio-sg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.4rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #82b829;
  background-color: var(--bio-white);
  border: 2px solid #82b829;
  border-radius: 0.8rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  transition: background-color 0.2s, color 0.2s;
}

.bio-sg__btn::after {
  content: "chevron_right";
  font-family: "Material Icons";
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
}

.bio-sg__btn:hover {
  background-color: #82b829;
  color: var(--bio-white);
}

@media (min-width: 480px) {
  .bio-sg__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .bio-sg__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .bio-sg__btn {
    font-size: 1.5rem;
    padding: 1.6rem 1.2rem;
  }
}

/* --- セルフガイド モーダル --- */
.bio-sg__modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.bio-sg__modal--active {
  display: flex;
}

.bio-sg__modal-inner {
  background-color: var(--bio-white);
  border-radius: 1.6rem;
  padding: 3.2rem 2.4rem 2.4rem;
  max-width: 48rem;
  width: calc(100% - 3.2rem);
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.bio-sg__modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-size: 3.2rem;
  line-height: 1;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bio-sg__modal-close:hover {
  color: var(--bio-text);
}

.bio-sg__modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #82b829;
  margin-bottom: 2rem;
  padding-right: 3.2rem;
}

.bio-sg__modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 1.2rem;
}

.bio-sg__modal-list--active {
  display: flex;
}

.bio-sg__modal-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bio-text);
  background-color: #f2f8ea;
  border-radius: 0.8rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.bio-sg__modal-list a::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2382b829'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.bio-sg__modal-list a:hover {
  background-color: #dbe9c4;
}

.bio-fw--self-guided .bio-fw__banner {
  background-color: #9bc654;
  border-left-color: #82b829;
}

.bio-fw--self-guided .bio-fw__species-heading {
  color: #82b829;
}

.bio-fw--self-guided .bio-fw__tab--active,
.bio-fw--self-guided .bio-fw__tab:hover {
  background-color: #82b829;
}

.bio-fw--self-guided .bio-fw__tabs {
  border-bottom-color: #82b829;
}

.bio-fw--self-guided .bio-kb__purpose-photo {
  width: auto;
  flex: 1;
}

.bio-fw--self-guided .bio-kb__purpose-body {
  flex: 1;
}

.bio-fw--self-guided .bio-kb__purpose-list {
  padding: 0;
}

.bio-fw--self-guided .bio-kb__about-illust img {
  width: 12rem;
  transform: scaleX(-1);
}

/* ===========================================
   生物多様性 イントロブロック
=========================================== */

.bio-bd__intro-block {
  display: flex;
  flex-direction: column;
}

.bio-bd__intro-block .bio-kb__about-text {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bio-kb__about-text--max800 {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bio-kb__about-text--mb40 {
  margin-bottom: 4rem;
}

/* --- 生物多様性とは ページ専用テキスト --- */
.bio-wib__text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
}

.bio-bd__intro-block .bio-wib__text {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bio-wib__text--max800 {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bio-wib__text--mb40 {
  margin-bottom: 4rem;
}

.bio-fw--biodiversity .bio-fw__species-grid {
  row-gap: 4rem;
}

.bio-fw__species--no-mb {
  margin-bottom: 0;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .bio-fw__species--no-mb {
    padding-bottom: 4rem;
  }
}



.bio-fw__species--park-role {
  position: relative;
  padding-bottom: 22rem;
}

@media (min-width: 768px) {
  .bio-fw__species--park-role {
    padding-bottom: 28rem;
  }
}

.bio-fw__species--park-role::after {
  content: "";
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../images/what-is-biodiversity/illust_bio-fw__species_bottom.webp");
  background-image: -webkit-image-set(
    url("../images/what-is-biodiversity/illust_bio-fw__species_bottom.webp") 1x,
    url("../images/what-is-biodiversity/illust_bio-fw__species_bottom@2x.webp") 2x
  );
  background-image: image-set(
    url("../images/what-is-biodiversity/illust_bio-fw__species_bottom.webp") 1x,
    url("../images/what-is-biodiversity/illust_bio-fw__species_bottom@2x.webp") 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 416px;
  width: 100%;
  height: 183px;
}

.bio-fw--what-is{
  background-color: var(--bio-bg-bright);
}

.bio-fw--what-is .bio-fw__species-heading {
  font-size: clamp(1.8rem, 1.046rem + 1.754vw, 2.8rem);
}

.bio-fw--what-is .bio-fw__species-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .bio-fw--what-is .bio-fw__species-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.bio-fw--what-is .bio-fw__section {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .bio-fw--what-is .bio-fw__section {
    margin-bottom: 4rem;
  }
}

/* 生態系サービス 2x2カードグリッド */
.bio-bd__service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .bio-bd__service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bio-bd__service-card {
  /*background-color: var(--bio-white);*/
}

.bio-bd__service-photo {
  border-radius: 2.4rem;
  overflow: hidden;
  border: 1px solid #008000;
  margin-bottom: 1rem;
}

/*.bio-bd__service-card--adjustment .bio-bd__service-photo{*/
/*  border-color: #008000;*/
/*}*/

/*.bio-bd__service-card--culture .bio-bd__service-photo {*/
/*  border-color: #008000;*/
/*}*/

/*.bio-bd__service-card--foundation .bio-bd__service-photo {*/
/*  border-color: #008000;*/
/*}*/

.bio-bd__service-photo img {
  display: block;
  width: 100%;
  height: auto;
  /*aspect-ratio: 4/3;*/
  /*object-fit: cover;*/
}

.bio-bd__service-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #008000;
  margin-top: 0;
  padding: 0 0 1.6rem;
}

.bio-bd__service-card--adjustment .bio-bd__service-title{
  color: #008000;
}

.bio-bd__service-card--culture .bio-bd__service-title {
  color: #008000;
}

.bio-bd__service-card--foundation .bio-bd__service-title {
  color: #008000;
}

.bio-bd__service-text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--bio-text);
  padding: 0 0 1.6rem;
}

.bio-bd__intro-img {
  margin-top: 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
}

.bio-bd__intro-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 環境整備が行われた都立公園ギャラリー --- */
.bio-bd__park-gallery {
  background-color: #f2ede1;
  padding: 4rem 1.6rem 4.8rem;
  margin-bottom: 6rem;
}

.bio-bd__park-gallery-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

.bio-bd__park-gallery-heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #82b829;
  text-align: center;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid #fff;
}

.bio-bd__park-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

@media (min-width: 481px) {
  .bio-bd__park-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

a.bio-bd__park-gallery-item {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--bio-text);
}

a.bio-bd__park-gallery-item:hover img {
  opacity: 0.8;
}

.bio-bd__park-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0.8rem;
}

.bio-bd__park-gallery-item span {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bio-text);
  margin-top: 0.4rem;
}

.bio-bd__park-gallery-caution {
  font-size: 1.4rem;
  line-height: 1.8;
  padding: 0.8rem 1.6rem;
  color: var(--bio-text);
  margin-top: 2.4rem;
}

@media (min-width: 768px) {
  .bio-bd__park-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1000px) {
  .bio-bd__park-gallery {
    padding: 4rem 2rem 4rem;
  }

  .bio-bd__park-gallery-heading {
    font-size: 3.2rem;
  }
}

/* ===========================================
   生物多様性 共通写真レイアウト
=========================================== */

.bio-bd__photo-caption {
  display: block;
  font-size: 1.3rem;
  color: var(--bio-text);
  margin-top: 0.8rem;
  margin-bottom: 2.4rem;
}

.bio-fw--biodiversity .bio-bd__photo-caption {
  margin-bottom: 0;
}

.bio-bd__photos-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

.bio-bd__photo-item {
  text-align: left;
}

.bio-bd__photo-img {
  border-radius: 1.2rem;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

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

.bio-bd__photo-item .bio-bd__photo-caption {
  margin-bottom: 0;
}

@media (min-width: 431px) {
  .bio-bd__photos-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================
   かいぼり (Kaibori) ページ
=========================================== */

.bio-fw--kaibori {
  background-image: url("../images/kaibori/bg_kaibori_wave.webp");
  background-image: image-set(
    url("../images/kaibori/bg_kaibori_wave.webp") 1x,
    url("../images/kaibori/bg_kaibori_wave@2x.webp") 2x
  );
}

/* --- かいぼりサブタイトル --- */
.bio-fw--kaibori .bio-fw__subtitle-heading {
  /*font-size: 2.6rem;*/
  background-image: url('../images/kaibori/bg_heading_green_tree_bg_l.webp');
  background-image: image-set(
    url('../images/kaibori/bg_heading_green_tree_bg_l.webp') 1x,
    url('../images/kaibori/bg_heading_green_tree_bg_l@2x.webp') 2x
  );
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
  color: #82b829;
}

.bio-fw--kaibori .bio-fw__subtitle-em {
  font-size: clamp(2.0rem, 1.397rem + 1.404vw, 2.8rem);
  color: var(--bio-white);
  background-image: url('../images/kaibori/bg_beans_green.webp');
  background-image: image-set(
    url('../images/kaibori/bg_beans_green.webp') 1x,
    url('../images/kaibori/bg_beans_green@2x.webp') 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: clamp(0.6rem, 0.298rem + 0.702vw, 1.0rem) clamp(1.0rem, -0.056rem + 2.456vw, 2.4rem) clamp(1.0rem, 0.698rem + 0.702vw, 1.4rem);
  border-radius: 0.4rem;
}

/* --- かいぼり見出しピル --- */
.bio-kb__heading-pill {
  background-color: #3399cc;
  border-radius: 4rem;
  padding: 1.0rem 3.2rem;
  text-align: center;
  margin-bottom: 4rem;
  box-shadow: 6px 6px 0 #e4eef3;
  font-size: clamp(2.6rem, 2.147rem + 1.053vw, 3.2rem);
  font-weight: 700;
  color: var(--bio-white);
  line-height: 1.2;
}


/* --- お知らせ --- */
.bio-kb__news {
  padding: 0 1.6rem 0;
}

@media (min-width: 768px) {
  .bio-kb__news {
    padding-top: 3.2rem;
  }
}

.bio-kb__news-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
  background-color: var(--bio-white);
  border-radius: 1.2rem;
  padding: 2rem;
  border: 1px solid #d0e6f0;
}

.bio-kb__news-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #3399cc;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid #3399cc;
}

.bio-kb__news-lead {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--bio-text);
  margin-bottom: 2.4rem;
}

.bio-kb__news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.bio-kb__news-date {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bio-text);
  padding: 1.2rem 2rem 1.2rem 0;
  padding-bottom: 0;
  border-top: 1px solid #e0e0e0;
  white-space: nowrap;
}

.bio-kb__news-body {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--bio-text);
  padding: 1.2rem 0;
  padding-top: 0.4rem;
  border-top: none;
}

.bio-kb__news-link {
  color: #0071bb;
  text-decoration: underline;
}

.bio-kb__news-link:hover {
  text-decoration: none;
}

.bio-kb__news a.with-other::after,
.bio-kb__news a.with-pdf::after,
.bio-kb__news a::after {
  content: none;
  display: none;
}

.bio-kb__about-layout--top {
  align-items: flex-start;
}

.bio-kb__news-note {
  color: #cc0000;
  font-size: 1.3rem;
}

/* --- 「かいぼり」とは --- */
.bio-kb__about {
  padding: 3.2rem 1.6rem 4rem;
}

.bio-kb__about-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

.bio-kb__about-layout {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
}

.bio-kb__about-layout.bio-kb__about-layout--top {
  align-items: flex-start;
}

.bio-kb__about-content {
  flex-basis: auto;
  padding-left: 0;
}

.bio-kb__about-text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
}

.bio-kb__about-illust {
  width: 10rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .bio-kb__about-layout {
    flex-direction: row;
  }

  .bio-kb__about-content {
    flex: 3;
    /*padding-left: 3rem;*/
  }

  .bio-kb__about-illust {
    flex: 2;
    width: auto;
    margin: 0;
  }
}

.bio-kb__more-illust {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-kb__more-illust img {
  display: block;
  width: 22rem;
  height: auto;
}

.bio-kb__about-illust:has(.bio-kb__about-photo) {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.bio-kb__about-photo {
  width: 100%;
  height: auto;
}

.bio-kb__about-caption {
  display: block;
  font-size: 1.3rem;
  color: #666;
  text-align: left;
  margin-top: 0.8rem;
  line-height: 1.4;
}

/* --- 事業の目的 --- */
.bio-kb__purpose {
  padding: 3.2rem 1.6rem 3rem;
}

.bio-kb__purpose-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

.bio-kb__purpose-heading {
  background-color: #5cadd6;
  color: var(--bio-white);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.0rem 2rem;
  border-radius: 0 0.8rem 0.8rem 0;
  border-left: 15px solid #3399cc;
  margin-bottom: 4rem;
}

.bio-kb__purpose-heading-em {
  font-size: clamp(2.0rem, 1.698rem + 0.702vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
}

.bio-kb__purpose-list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 0;
}

.bio-kb__purpose-item {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: flex-start;
}

.bio-kb__purpose-photo {
  order: 2;
}

.bio-kb__purpose-body {
  order: 1;
}

.bio-kb__purpose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .bio-kb__purpose-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bio-kb__purpose-panel {
  background-color: var(--bio-white);
  border-radius: 1.2rem;
  overflow: hidden;
}

.bio-kb__purpose-panel .bio-kb__purpose-photo {
  width: 100%;
}

.bio-kb__purpose-panel .bio-kb__purpose-title,
.bio-kb__purpose-panel .bio-kb__purpose-text {
  padding: 0;
}

.bio-kb__purpose-panel .bio-kb__purpose-title {
  padding-top: 1.6rem;
  margin-top: 0;
}

.bio-kb__purpose-panel .bio-kb__purpose-text {
  padding-bottom: 2rem;
}

.bio-kb__purpose-photo {
  flex-shrink: 0;
  width: 100%;
}

.bio-kb__purpose-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}

.bio-kb__purpose-body {
  flex: 0 1 50rem;
}

.bio-kb__purpose-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #3399cc;
  margin-bottom: 1.2rem;
}

.bio-kb__purpose-text {
  font-size: 1.5rem;
  color: var(--bio-text);
  line-height: 1.9;
}

@media (min-width: 768px) {
  .bio-kb__purpose-list {
    padding: 0 6rem;
  }

  .bio-kb__purpose-item {
    flex-direction: row;
  }

  .bio-kb__purpose-photo {
    width: 34rem;
    order: unset;
  }

  .bio-kb__purpose-body {
    order: unset;
  }
}

/* --- 波セパレーター --- */
.bio-kb__wave {
  background-image: url('../images/kaibori/bg_kaibori_wave.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  height: 4rem;
}

/* --- かいぼりの流れ --- */
.bio-kb__flow {
  padding: 3.2rem 1.6rem 4rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .bio-kb__flow {
    margin-bottom: 4rem;
  }
}

.bio-kb__flow-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}

.bio-kb__flow-heading {
  background-color: #5cad85;
  color: var(--bio-white);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 0 0.8rem 0.8rem 0;
  border-left: 15px solid #339966;
  margin-bottom: 2.4rem;
}

.bio-kb__flow-heading-em {
  font-size: 2.4rem;
  font-weight: 700;
}

.bio-kb__flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem 4.8rem;
}

@media (min-width: 481px) {
  .bio-kb__flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .bio-kb__flow-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bio-kb__flow-item {
}

.bio-kb__flow-photo {
  border-radius: 1.6rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

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

.bio-kb__flow-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #3399cc;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.bio-kb__flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 2px solid #3399cc;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 0.2rem;
  color: #3399cc;
  flex-shrink: 0;
}

.bio-kb__flow-text {
  font-size: 1.4rem;
  color: var(--bio-text);
  line-height: 1.7;
  padding-left: 4rem;
}

/* --- かいぼり実施池一覧テーブル --- */
.bio-kb__table-section {
  padding: 3.2rem 1.6rem 4rem;
  margin-bottom: 6rem;
}

.bio-kb__table-inner {
  max-width: var(--bio-content-width);
  margin: 0 auto;
}


.bio-kb__table-wrap {
  max-height: 40rem;
  overflow-y: scroll;
  border: 1px solid #5cadd6;
  border-radius: 0.8rem;
}

.bio-kb__table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--bio-text);
}

.bio-kb__table-caption {
  font-size: 2.0rem;
  font-weight: 700;
  color: #3399cc;
  padding: 0 1.2rem;
  border-left: 4px solid #3399cc;
  margin-bottom: 1.8rem;
}

.bio-kb__table-wrap tr.head th {
  background-color: #5cadd6;
  color: var(--bio-white);
  font-weight: 700;
  padding: 1rem 1.6rem;
  text-align: left;
  border: 1px solid #4a9cc5;
  position: sticky;
  top: 0;
  z-index: 1;
}

.bio-kb__table-wrap table,
.bio-kb__table-wrap tbody,
.bio-kb__table-wrap tr,
.bio-kb__table-wrap th,
.bio-kb__table-wrap td {
  display: block;
  width: 100%;
}

.bio-kb__table-wrap tr.head {
  display: none;
}

.bio-kb__table-wrap th.th_2 {
  background-color: #5cadd6;
  color: var(--bio-white);
  font-weight: 700;
  padding: 1rem 1.6rem;
  border: none;
  text-align: left;
  font-size: 1.5rem;
}

.bio-kb__table-wrap th.th_2::before {
  content: "公園名";
  display: inline-block;
  background-color: var(--bio-white);
  color: #5cadd6;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.2rem 0.8rem;
  border-radius: 0.4rem;
  margin-right: 0.8rem;
  vertical-align: middle;
}

.bio-kb__table-wrap td {
  padding: 0.8rem 1.6rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
}

.bio-kb__table-wrap td::before {
  content: attr(data-label);
  display: inline-block;
  font-size: 1.2rem;
  color: #888;
  margin-right: 1.2rem;
  min-width: 8rem;
}

.bio-kb__table-wrap tr:hover td,
.bio-kb__table-wrap tr:hover th.th_2 {
  background-color: #eef6fb;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .bio-kb__table-wrap {
    border: 1px solid #d0e6f0;
    border-radius: 0.8rem;
  }

  .bio-kb__table-wrap table {
    display: table;
    width: 100%;
  }

  .bio-kb__table-wrap tbody {
    display: table-row-group;
  }

  .bio-kb__table-wrap tr,
  .bio-kb__table-wrap tr.head {
    display: table-row;
    width: auto;
  }

  .bio-kb__table-wrap th,
  .bio-kb__table-wrap td {
    display: table-cell;
    width: auto;
  }

  .bio-kb__table-wrap th.th_2 {
    background-color: #f5f9fc;
    color: inherit;
    border: 1px solid #d0e6f0;
    font-size: inherit;
  }

  .bio-kb__table-wrap th.th_2::before {
    display: none;
  }

  .bio-kb__table-wrap td {
    padding: 1rem 1.6rem;
    border: 1px solid #d0e6f0;
    border-bottom: none;
  }

  .bio-kb__table-wrap td::before {
    display: none;
  }

  .bio-kb__news-inner {
    padding: 3.2rem;
  }

  .bio-kb__news-list {
    grid-template-columns: auto 1fr;
  }

  .bio-kb__news-date {
    padding-bottom: 1.2rem;
  }

  .bio-kb__news-body {
    padding-top: 1.2rem;
    border-top: 1px solid #e0e0e0;
  }
}

/* デスクトップ */
@media (min-width: 1000px) {
  .bio-kb__about {
    padding: 4rem 2rem;
  }

  .bio-kb__purpose {
    padding: 4rem 2rem;
  }

  .bio-kb__purpose-heading-em {
    font-size: 2.4rem;
  }

  .bio-kb__flow {
    padding: 4rem 2rem;
  }

  .bio-kb__flow-heading-em {
    font-size: 2.8rem;
  }
}

/* ==========================================================================
   Local Menu Overlay
   ========================================================================== */

.bio-local-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #f2ede1;
  color: #00984a;
  overflow-y: auto;
  font-family: "Noto Sans JP", sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bio-local-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.bio-local-menu__inner {
  max-width: 100rem;
  margin: 0 auto;
  padding: 10rem 2rem 4rem;
}

.bio-local-menu__close {
  position: fixed;
  right: 1.6rem;
  z-index: 10000;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.bio-local-menu__close img {
  width: 5rem;
  height: 5rem;
  display: block;
}

.bio-local-menu__title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 3.2rem;
}

.bio-local-menu__heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
}

.bio-local-menu__link {
  display: block;
  color: #00984a;
  text-decoration: none;
  font-size: 1.6rem;
  padding: 0.6rem 0;
}

.bio-local-menu__link:hover {
  text-decoration: underline;
}

.bio-local-menu__link.bio-local-menu__heading {
  font-size: 1.8rem;
  padding: 0;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
}

.bio-local-menu__sublist {
  padding-left: 1.6rem;
}

.bio-local-menu__sublink {
  display: block;
  color: #00984a;
  text-decoration: none;
  font-size: 1.4rem;
  padding: 0.6rem 0;
  line-height: 2;
}

.bio-local-menu__sublink:hover {
  text-decoration: underline;
}

@media (min-width: 1000px) {
  .bio-local-menu__close {
    right: 1.6rem;
  }

  .bio-local-menu__inner {
    padding: 14rem 4rem 6rem;
  }

  .bio-local-menu__title {
    font-size: 3.2rem;
  }

  .bio-local-menu__heading {
    font-size: 2.2rem;
  }

  .bio-local-menu__columns {
    display: flex;
    gap: 6rem;
  }

  .bio-local-menu__link {
    font-size: 1.8rem;
  }

  .bio-local-menu__link.bio-local-menu__heading {
    font-size: 2.2rem;
  }

  .bio-local-menu__sublink {
    font-size: 1.6rem;
  }
}