/* forest-article-styles.css */
/* ----------------------------------------------------------------
  Styles for "Forest Theme" Article - Incorporating Glassmorphism
-----------------------------------------------------------------*/

/* --- Base --- */
.forest-article {
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.85;
  color: #38423B; /* 濃い森のような緑 */
  background-color: #f8fbf6; /* ごく薄い緑がかったオフホワイト */
  padding: 2.5em 2em;
  margin: 2.5em auto;
  max-width: 860px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(50, 80, 60, 0.1);
}

/* --- Headings --- */
.forest-article h1 {
  font-size: 2.4em;
  color: #2A7C54;
  text-align: center;
  margin-bottom: 1.2em;
  font-weight: 700;
  line-height: 1.4;
}

.forest-article h2 {
  font-size: 1.9em;
  font-weight: 600;
  color: #3a6b4b;
  border-bottom: 3px solid rgba(74, 147, 111, 0.5);
  padding-bottom: 0.5em;
  margin-top: 2.2em;
  margin-bottom: 1.2em;
}

.forest-article h3 {
  font-size: 1.55em;
  font-weight: 600;
  color: #4a7c59;
  margin-top: 2em;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}

.forest-article h3 .fa-icon {
  margin-right: 0.6em;
  color: #4A936F; /* H2カラー */
  font-size: 0.9em;
  flex-shrink: 0;
}

.forest-article h4 {
  font-size: 1.4em;
  color: #38423B; /* 基本テキストカラー */
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 1em;
}

/* --- Paragraphs & Links --- */
.forest-article p {
  margin-bottom: 1.5em;
  font-size: 1.1em;
  line-height: 2;
}

.forest-article a {
  color: #5D8C7A; /* 青みがかった緑 */
  text-decoration: none;
  border-bottom: 1px dashed #5D8C7A;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  word-break: break-all;
}

.forest-article a:hover,
.forest-article a:focus {
  color: #4A7867; /* 少し濃いアクセントカラー */
  border-bottom-style: solid;
}

/* --- Lists --- */
.forest-article ul,
.forest-article ol {
  margin-bottom: 1.6em;
  padding-left: 2.2em;
}

.forest-article li {
  margin-bottom: 0.8em;
  line-height: 1.9;
}

/* Icon list (similar to birthday CSS) */
.forest-article ul.icon-list {
  list-style-type: none;
  padding-left: 0.5em;
}

.forest-article ul.icon-list li {
  position: relative;
  padding-left: 2.8em; /* Increased padding for larger icons if needed */
}

.forest-article ul.icon-list li .fa-li-icon {
  position: absolute;
  left: 0.2em;
  top: 0.05em; /* Adjust for alignment */
  width: 2em;
  text-align: center;
  color: #4A936F; /* H2カラー */
  font-size: 1.1em;
}

/* --- Emphasis & Strong --- */
.forest-article strong, .forest-article b {
  font-weight: 700;
  color: #2A7C54; /* H1カラー (落ち着いた緑) for emphasis */
}

.forest-article em, .forest-article i:not([class*="fa-"]) {
  font-style: italic;
  color: #485a50; /* やや落ち着いた緑 */
}

/* --- Superscript for references --- */
.forest-article sup {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 2px;
  line-height: 0;
}
.forest-article sup a {
  border-bottom: none;
  padding: 0.1em 0.25em;
}

/* --- Horizontal Rule --- */
.forest-article .references-separator {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(74,147,111,0), rgba(74,147,111,0.5), rgba(74,147,111,0)); /* H2カラーのグラデーション */
  margin: 4.5em 0;
}

/* --- References List --- */
.forest-article .references-list {
  padding-left: 1em;
  font-size: 0.9em;
  color: #485a50; /* やや落ち着いた緑 */
  line-height: 1.8;
}

.forest-article .references-list li {
  margin-bottom: 1.1em;
  word-break: break-all;
  overflow-wrap: break-word;
  padding-left: 0;
}

.forest-article .references-list li a {
  font-weight: normal;
  color: #5D8C7A; /* アクセントカラー */
  border-bottom: 1px dotted #5D8C7A;
}

.forest-article .references-list li a:hover,
.forest-article .references-list li a:focus {
  color: #4A7867; /* 少し濃いアクセントカラー */
  border-bottom-color: #4A7867;
}

/* --- Glassmorphism Content Blocks (Base) --- */
.forest-article .info-box,
.forest-article .warning-box,
.forest-article .tips-box,
.forest-article .key-points-box,
.forest-article .content-card {
  padding: 2em;
  margin-bottom: 2.2em;
  border-radius: 18px; /* More pronounced radius for glass effect */
  background: rgba(230, 240, 228, 0.65); /* 半透明の薄い緑 - 修正 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35); /* Slightly more visible border - 修正 */
  box-shadow: 0 8px 35px 0 rgba(50, 80, 60, 0.17); /* Softer, more spread shadow - 修正 */
}

.forest-article .info-box {
  border-left: 7px solid #6BB28A; /* 明るめの緑 */
  background: rgba(215, 230, 220, 0.7); /* さらに薄い緑のティント */
}

.forest-article .warning-box {
  background: rgba(240, 225, 220, 0.7); /* 薄い赤系のティント */
}

.forest-article .tips-box {
  border-left: 7px solid #77ab59; /* 明るいヒント用の緑 */
  background: rgba(220, 235, 215, 0.7); /* 薄い緑系のティント */
}

.forest-article .info-box h4,
.forest-article .warning-box h4,
.forest-article .tips-box h4,
.forest-article .key-points-box h4,
.forest-article .content-card h4 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.5em;
  display: flex;
  align-items: center;
}

.forest-article .info-box h4 .fa-icon,
.forest-article .warning-box h4 .fa-icon,
.forest-article .tips-box h4 .fa-icon,
.forest-article .key-points-box h4 .fa-icon,
.forest-article .content-card h4 .fa-icon {
  margin-right: 0.8em;
  font-size: 1em; 
  flex-shrink: 0;
}

.forest-article .info-box h4 { color: #4a7867; } 
.forest-article .warning-box h4 { color: #a15a50; } 
.forest-article .tips-box h4 { color: #588a3e; }
.forest-article .key-points-box h4 { color: #2A7C54; }
.forest-article .content-card h4 { color: #3a6b4b; }

.forest-article .info-box h4 .fa-icon { color: #6BB28A; }
.forest-article .warning-box h4 .fa-icon { color: #c07065; }
.forest-article .tips-box h4 .fa-icon { color: #77ab59; }
.forest-article .key-points-box h4 .fa-icon { color: #4A936F; }
.forest-article .content-card h4 .fa-icon { color: #55826A; }

/* --- Card structure (inspired by 魚.html) --- */
.forest-article .card {
  background: rgba(255, 255, 255, 0.1); /* More subtle background for the main card container */
  border-radius: 20px;
  margin-bottom: 2.5em;
  /* box-shadow: 0 5px 20px rgba(50, 80, 60, 0.08); */ /* Lighter shadow or remove if nested cards have enough */
  /* Glassmorphism for .card itself can be too much if content inside is also glassmorphic */
  /* We'll apply glassmorphism to inner boxes primarily */
   border: 1px solid rgba(255, 255, 255, 0.18);
}

.forest-article .card-content {
  padding: 2em; /* Default padding, can be adjusted */
}

/* --- Info Block (replaces accordion content directly under h2) --- */
.forest-article .info-block {
  padding: 1.8em 1.5em;
  margin-bottom: 2em;
  border-radius: 15px;
  background: rgba(235, 245, 238, 0.7); /* Light green tint, slightly more opaque */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 25px rgba(50, 80, 60, 0.12);
}

.forest-article .info-block h3 {
  font-size: 1.55em;
  color: #3a6b4b; /* H2 color */
  margin-top: 0;
  margin-bottom: 1em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid rgba(74, 147, 111, 0.25);
}
.forest-article .info-block h3 .fa-icon {
   color: #4A936F; /* H2 color */
}

.forest-article .info-block p,
.forest-article .info-block ul {
  font-size: 1.05em;
  line-height: 1.9;
}

/* --- Research Summary Card (for individual studies/points) --- */
.forest-article .research-summary-card {
  padding: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 12px;
  background: rgba(220, 235, 225, 0.75); /* Slightly different tint for nesting */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 18px rgba(50, 80, 60, 0.1);
}

.forest-article .research-summary-card h4 {
  font-size: 1.25em;
  color: #2A7C54; /* Main heading color for emphasis */
  margin-top: 0;
  margin-bottom: 0.7em;
}
.forest-article .research-summary-card h4 .fa-icon {
  color: #4A936F;
  font-size: 0.9em;
}

.forest-article .research-summary-card p {
  font-size: 1em;
  line-height: 1.8;
  margin-bottom: 0.5em;
}

/* --- Additional Info Paragraphs --- */
.forest-article .additional-info {
  font-size: 0.95em !important; /* ensure it's smaller */
  line-height: 1.7 !important;
  color: #485a50; /* Softer text color */
  margin-top: 1.5em;
  padding: 0.8em 1em;
  background-color: rgba(220, 235, 225, 0.4); /* very subtle background */
  border-left: 4px solid #77ab59; /* tips-box green */
  border-radius: 0 8px 8px 0;
}
.forest-article .additional-info .fa-icon {
  margin-right: 0.5em;
  color: #77ab59;
}

/* Adjustments for key-points-box if inside .info-block */
.forest-article .info-block .key-points-grid {
  margin-top: 1em;
  margin-bottom: 1em;
}
.forest-article .info-block .key-points-box {
  background: rgba(220, 235, 225, 0.7); /* Match research-summary-card if nested */
  padding: 1.3em;
}
.forest-article .info-block .key-points-box h5 {
  font-size: 1.15em;
  color: #3a6b4b;
  margin-bottom: 0.6em;
}
.forest-article .info-block .key-points-box h5 .fa-icon {
  color: #55826A;
  font-size: 0.9em;
}
.forest-article .info-block .key-points-box p {
  font-size: 0.95em;
}

/* --- Table Styling --- */
.forest-article .styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5em 0;
  font-size: 1em;
  box-shadow: 0 3px 18px rgba(50, 80, 60, 0.12);
  border-radius: 10px;
  overflow: hidden; 
}

.forest-article .styled-table th,
.forest-article .styled-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(74, 147, 111, 0.15); /* H2カラーの非常に薄い版 */
}

.forest-article .styled-table caption {
  caption-side: top; /* or bottom */
  text-align: left;
  font-size: 1.1em;
  font-weight: 600;
  color: #3a6b4b; /* H2 color */
  padding: 0.8em 0.5em;
  margin-bottom: 0.5em; /* Space between caption and table */
  border-bottom: 2px solid rgba(74, 147, 111, 0.2);
}

.forest-article .styled-table caption .fa-icon {
  margin-right: 0.5em;
  color: #4A936F;
}

.forest-article .styled-table th {
  background-color: #4A936F; /* H2カラー */
  color: #ffffff;
  font-weight: 600;
}

.forest-article .styled-table tr:nth-of-type(even) {
  background-color: rgba(230, 240, 228, 0.3); /* グラスモーフィズム背景のさらに薄い版 */
}

.forest-article .styled-table tr:last-of-type td {
  border-bottom: none;
}

.forest-article .styled-table tr:hover {
  background-color: rgba(74, 147, 111, 0.1); /* H2カラーの薄いティント */
}

/* --- Section Specific & Content Organization --- */
.forest-article .content-section {
  margin-bottom: 2em;
  padding-top: 1em; /* Add some space if sections are directly one after another */
}

.forest-article .intro-highlight {
  /* background-color: rgba(74, 147, 111, 0.1); */ /* 背景色を削除 */
  padding: 1.5em; /* パディングを少し調整 */
  margin-top: 1.5em;
  margin-bottom: 2em;
  border-left: 3px solid #a0c4ae; /* ボーダーを薄く */
  border-radius: 8px;
}

.forest-article .intro-highlight p {
  font-size: 1.1em; /* 本文と合わせる */
  color: #38423B;
  line-height: 1.9;
}

.forest-article .key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
    margin: 1.5em 0;
}

.forest-article .content-section h2:first-child {
  margin-top: 0;
}

.forest-article .card .card-content h2:first-child {
    margin-top: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 800px) {
  .forest-article {
    padding: 2em 1.5em;
    margin: 2em auto;
  }
  .forest-article h1 {
    font-size: 2.2em;
  }
  .forest-article h2 {
    font-size: 1.9em;
  }
  .forest-article h3 {
    font-size: 1.6em;
  }
  .forest-article p {
    font-size: 1.05em;
  }
  .forest-article .key-points-grid {
    grid-template-columns: 1fr;
  }
  .forest-article .styled-table {
    font-size: 0.9em;
  }
}

@media (max-width: 500px) {
  .forest-article {
    padding: 1.5em 0.5em; /* Side padding for the main article container */
    margin: 1.5em auto;
  }
   .forest-article h1 {
    font-size: 1.7em; /* Adjusted for very small screens */
  }
  .forest-article h2 {
    font-size: 1.45em; /* Adjusted for very small screens */
    margin-top: 1.8em;
    margin-bottom: 1em;
  }
  .forest-article h3 {
    font-size: 1.25em; /* Adjusted for very small screens */
    word-break: break-word; /* Allow breaking long words to prevent overflow */
    line-height: 1.5; /* Adjust line height for better readability */
  }
  .forest-article h3 .fa-icon {
    font-size: 0.85em; /* Slightly smaller icon */
    margin-right: 0.4em; /* Reduced margin */
  }
  .forest-article p {
    font-size: 1em;
  }
  .forest-article ul.icon-list li {
    padding-left: 2.5em;
  }
  .forest-article ul.icon-list li .fa-li-icon {
    font-size: 1em;
  }
  .forest-article .styled-table {
    display: block; 
    overflow-x: auto;
    white-space: nowrap; 
  }
  .forest-article .styled-table th,
  .forest-article .styled-table td {
    padding: 8px 10px; /* モバイルではテーブルのパディングを小さく */
  }
  .forest-article .info-box,
  .forest-article .warning-box,
  .forest-article .tips-box,
  .forest-article .key-points-box,
  .forest-article .content-card {
    padding: 1em; /* モバイルではカードのパディングを小さく */
    margin-left: 0; /* カードの左右マージンを0に */
    margin-right: 0;
    /* border-radius: 0; */ /* 必要であれば角丸も調整 */
  }
  .forest-article .card-content {
    padding-left: 10px; /* カード内コンテンツの左右パディングを最小限に */
    padding-right: 10px;
  }
  .forest-article .intro-highlight {
    padding: 1em;
  }
  .forest-article .final-conclusion {
    border-left: none; /* モバイルでは縦線を削除 */
    padding-left: 1em; /* パディングで調整 */
    padding-right: 1em;
  }
  .forest-article .article-intro-lead {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Specific class for the main title if needed */
.forest-article .main-title {
    /* Custom styles for the very first H1 if it needs to be distinct */
}

.forest-article .article-intro-lead {
  font-size: 1.1em; /* 通常のpタグと合わせる */
  /* font-style: italic; 斜体を削除 */
  color: #38423B; /* 基本テキストカラー */
  line-height: 2;
  margin-bottom: 1.5em; /* 他のpタグとの間隔を調整 */
}

/* --- Question Bubble Style (inspired by 魚.html .bubble) --- */
.forest-article .question-bubble {
  /* background-color: rgba(220, 235, 215, 0.7); */ /* 背景色を削除 */
  border: 1px solid #dce9d5; /* 薄い枠線に変更 */
  padding: 1em 1.2em; /* パディングを少し縮小 */
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 10px; /* 角丸を少し調整 */
  position: relative;
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */ /* 影を削除 */
  /* Glassmorphism effect with subtle white background */
  /* background: rgba(255, 255, 255, 0.3); */
  /* backdrop-filter: blur(5px); */
  /* -webkit-backdrop-filter: blur(5px); */
}

.forest-article .question-bubble p {
  font-size: 1.15em; /* 少し小さく */
  color: #4a7c59;   /* 少し落ち着いた色に */
  margin-bottom: 0;
  font-weight: 500; /* 少し太く */
  text-align: center;
}

.forest-article .question-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px; /* しっぽの位置調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #dce9d5; /* 枠線の色に合わせる */
  /* border-top-color: rgba(220, 235, 215, 0.7); */ /* 背景色に合わせていたのを変更 */
}

.forest-article .question-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px; /* しっぽの内側の位置調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f8fbf6; /*記事全体の背景色に合わせる */
  /* background-colorで背景色を指定していた場合、記事全体の背景色に合わせる */
}

/* --- Key Benefits Summary (Intro Section) --- */
.forest-article .key-benefits-summary {
  /* background-color: rgba(220, 235, 215, 0.6); */ /* 背景色を削除 */
  /* backdrop-filter: blur(8px); */ /* ブラー効果も削除、または弱める */
  /* -webkit-backdrop-filter: blur(8px); */
  /* border: 1px solid rgba(255, 255, 255, 0.2); */ /* ボーダーを削除または変更 */
  border: 1px solid #e0eade; /* より薄いボーダー */
  padding: 1.5em; /* パディングを少し縮小 */
  margin-bottom: 2em;
  border-radius: 10px; /* 角丸を少し調整 */
  /* box-shadow: 0 5px 20px rgba(50, 80, 60, 0.08); */ /* 影を削除 */
}

.forest-article .key-benefits-summary .summary-title {
  font-size: 1.3em; /* 少し小さく */
  color: #3a6b4b;   /* H2に近い落ち着いた色に */
  margin-bottom: 1em;
  text-align: left; /* 中央揃えを解除 */
  font-weight: 600;
  border-bottom: none; /* 下線を削除 */
  padding-bottom: 0; /* パディングを削除 */
}

.forest-article .key-benefits-summary .summary-title .fa-seedling {
  font-size: 0.9em; /* アイコンサイズ調整 */
  margin-right: 0.5em;
  color: #4a7c59;
}

.forest-article .key-benefits-summary ul.icon-list {
  margin-bottom: 1em; /* 下マージン調整 */
}

.forest-article .key-benefits-summary ul.icon-list li {
  font-size: 1.05em; /* 少し小さく */
  padding-left: 2.5em; /* アイコンとのスペース調整 */
  margin-bottom: 0.6em; /* リストアイテム間のマージン調整 */
}

.forest-article .key-benefits-summary ul.icon-list li .fa-li-icon {
  font-size: 1em; /* アイコンサイズ調整 */
  color: #5D8C7A;   /* 少し落ち着いたアイコン色 */
  top: 0.1em;
}
.forest-article .key-benefits-summary ul.icon-list li strong {
  color: #38423B; /* 基本テキストカラーに */
  font-weight: 600; /* 太字は維持、または500に */
}

.forest-article .key-benefits-summary .summary-cta {
  font-size: 1em; /* 本文に合わせて調整 */
  color: #485a50;   /* 少し落ち着いた色に */
  /* background-color: rgba(255, 255, 255, 0.4); */ /* 背景色を削除 */
  padding: 0.5em 0; /* パディング調整 */
  margin-top: 1em;
  text-align: left; /* 中央揃えを解除 */
  border-radius: 0; /* 角丸削除 */
  border-top: 1px solid #e0eade; /* 上に区切り線を追加 */
}

/* --- Accordion (Removed from HTML, kept for reference or future use if needed) --- */
/*
.forest-article .accordion-item {
    margin-bottom: 1em;
}

.forest-article .accordion-title {
    background-color: rgba(230, 240, 228, 0.8); 
    color: #2A7C54;
    padding: 1em 1.5em;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.2em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease;
}

.forest-article .accordion-title:hover {
    background-color: rgba(215, 230, 220, 0.9);
}

.forest-article .accordion-title .fa-icon {
    transition: transform 0.3s ease;
}

.forest-article .accordion-content {
    padding: 1.5em;
    border: 1px solid rgba(220, 230, 225, 0.7);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: rgba(250, 252, 248, 0.9);
    font-size: 0.95em;
}

.forest-article .accordion-item input[type="checkbox"] {
    display: none; 
}

.forest-article .accordion-item input[type="checkbox"]:checked ~ .accordion-content {
    display: block; 
}

.forest-article .accordion-item input[type="checkbox"]:checked ~ .accordion-title .fa-icon.fa-plus::before {
    content: "\f068"; 
}
*/

/* --- Final Conclusion Section Specific Styles --- */
.forest-article .final-conclusion {
    background: #f0f7f2;
    padding: 2.5em 2em;
    margin-top: 3em;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(50, 80, 60, 0.08);
}

.forest-article .final-conclusion h2 {
    color: #2A7C54;
    border-bottom: none;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 0.8em;
}

.forest-article .final-conclusion p {
    color: #38423B;
    font-size: 1.1em;
    line-height: 1.9;
    margin-bottom: 1.2em;
}

.forest-article .final-conclusion p strong {
    color: #2A7C54;
    font-weight: 600;
}

.forest-article .final-conclusion .fa-tree,
.forest-article .final-conclusion .fa-campground,
.forest-article .final-conclusion .fa-person-hiking {
    color: #2A7C54;
    margin: 0 0.2em;
}

/* Style for equal height cards in a grid */
.forest-article .key-points-grid.equal-height-cards {
    align-items: stretch; /* Default is stretch, but good to be explicit */
}

.forest-article .key-points-grid.equal-height-cards .key-points-box {
    display: flex;
    flex-direction: column;
    height: 100%; /* Make card take full height of grid item */
}

.forest-article .key-points-grid.equal-height-cards .key-points-box h5 {
    margin-bottom: 0.8em;
}

.forest-article .key-points-grid.equal-height-cards .key-points-box p {
    flex-grow: 1; /* Allow p to take remaining space */
    margin-bottom: 0; /* Remove bottom margin if it is the last element */
    /* 上記の.forest-article .key-points-box p とスタイルが競合・重複する可能性があるので注意 */
    /* こちらは equal-height-cards のコンテキストなので、汎用的なスタイルは上に書く */
}

/* ↓↓↓↓↓ 新しく追加または修正するスタイル ↓↓↓↓↓ */
.forest-article .key-points-box h5 {
  /* font-size は existing code... の下にある .key-points-grid.equal-height-cards .key-points-box h5 で指定されているため、ここでは重複を避ける */
  /* margin-bottom も同様 */
  color: #2A7C54; /* 親の .key-points-box h4 からコピー */
  font-weight: 600; /* Font weight追加 */
  display: flex; /* 既に指定されているが、確認のため記述 */
  align-items: center; /* 既に指定されているが、確認のため記述 */
  margin-top: 0; /* h5がboxの最初の要素なのでmargin-topを0に */
}

.forest-article .key-points-box h5 .fa-icon {
  margin-right: 0.7em; /* アイコンとテキストの間隔を調整 */
  color: #4A936F; /* 親の .key-points-box h4 .fa-icon からコピー */
  font-size: 1em;   /* h5に対しての相対サイズ */
  flex-shrink: 0;
}

.forest-article .key-points-box p {
  font-size: 1.05em; /* 少しフォントサイズを調整 */
  line-height: 1.85; /* 行間を調整 */
  color: #38423B; /* 基本のテキストカラー */
  /* width: auto; や max-width: 100%; は通常デフォルトなので、問題があれば明示的に指定 */
  /* word-break: break-word; を追加して、長い単語がはみ出すのを防ぐ */
  word-break: break-word;
  margin-top: 0.8em; /* h5との間隔 */
}
/* ↑↑↑↑↑ 新しく追加または修正するスタイル ↑↑↑↑↑ */