/* ===== ナチュラル・アースカラー ボックスデザイン ===== */

/* 共通ベース */
.natural-box {
  position: relative;
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border-radius: 10px;
  font-size: 0.95em;
  line-height: 1.9;
}
.natural-box p:last-child { margin-bottom: 0; }

/* 1. シンプル囲みボックス（サンドベージュ） */
.natural-box.beige {
  background: #f6f1e7;
  border: 1px solid #ddcfb5;
  color: #5b5344;
}

/* 2. 見出し付きPOINTボックス（オリーブグリーン） */
.natural-box.point {
  background: #f3f5ec;
  border: 1px solid #c3cda3;
  padding-top: 2.4em;
  color: #4d5237;
}
.natural-box.point::before {
  content: "POINT";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25em 1em;
  background: #8a9a5b;
  color: #fff;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  border-radius: 10px 0 10px 0;
}

/* 3. 引用・体験談ボックス（テラコッタ） */
.natural-box.story {
  background: #faf1ec;
  border-left: 5px solid #c17c5e;
  border-radius: 0 10px 10px 0;
  color: #6b4c3d;
  font-style: normal;
}

/* 4. 注意・メモボックス（スモーキーブラウン） */
.natural-box.note {
  background: #f4efe8;
  border: 1px dashed #b89b7c;
  padding-top: 2.4em;
  color: #5c4a37;
}
.natural-box.note::before {
  content: "MEMO";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25em 1em;
  background: #a68a6d;
  color: #fff;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  border-radius: 10px 0 10px 0;
}