/* efforts.css - 品質・環境への取り組みページ用スタイル */

/* ---------------------------------------------
   メインコンテナのスタイル（中央寄せ＋基本レイアウト）
---------------------------------------------- */
.environment-container {
  max-width: 100%;                 /* スマホは画面幅いっぱい */
  margin: 0 auto;                  /* 横中央に配置 */
  padding: 40px 16px;              /* スマホでは少しコンパクトな余白 */
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 読みやすい日本語フォント */
  background-color: #fff;          /* 背景は白で清潔感 */
  padding-top: 0;                  /* ページ上部との距離調整 */
}

/* ---------------------------------------------
   セクション見出し（大見出し）
---------------------------------------------- */
.environment-container h2 {
  text-align: center;              /* 文字を中央に揃える */
  font-size: 1.6rem;               /* スマホに合う少し小さめのサイズ */
  margin-bottom: 30px;             /* 見出しの下に余白 */
  color: #2d5936;                  /* 深緑色で強調 */
}

/* ---------------------------------------------
   ポリシーボックス（各取り組みを囲む枠）
---------------------------------------------- */
.policy-box {
  background-color: #f8f8f8;       /* 薄いグレー背景で区切る */
  border-radius: 12px;             /* 角を丸くして柔らかい印象 */
  padding: 24px 20px;              /* 内側の余白 */
  margin-bottom: 30px;             /* ボックス間の余白 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 軽い影で立体感 */
}

/* ---------------------------------------------
   ボックス内の小見出し（取り組みタイトル）
---------------------------------------------- */
.policy-box h3 {
  font-size: 1.2rem;               /* スマホ向け少し小さめ */
  margin-bottom: 8px;              /* 下に少し余白 */
  color: #1a3d2f;                  /* 濃い緑色 */
  border-left: 5px solid #4caf50; /* 左に緑の縦線 */
  padding-left: 10px;              /* 線と文字の間に余白 */
}

/* ---------------------------------------------
   ポリシーの本文（説明文）
---------------------------------------------- */
.policy-box p {
  font-size: 0.95rem;              /* 読みやすい少し小さめの文字 */
  color: #444;                    /* やや薄めの黒 */
  line-height: 1.8;               /* 行間を広めに */
  margin-bottom: 14px;            /* 段落の下に余白 */
}

/* ---------------------------------------------
   箇条書き（方針の列挙など）
---------------------------------------------- */
.policy-box ul {
  padding-left: 1.2em;             /* リストの左余白 */
  margin: 0;                      /* デフォルトマージンをリセット */
}

.policy-box li {
  margin-bottom: 6px;             /* リスト項目の間隔 */
  line-height: 1.6;               /* 行間少し広め */
  color: #333;                   /* 少し濃いめの文字色 */
  list-style-type: disc;         /* ●マーカー */
}

/* ---------------------------------------------
   注記・補足（ボックスの下など）
---------------------------------------------- */
.note {
  font-size: 0.9rem;              /* 少し小さめの文字 */
  color: #555;                   /* 薄めのグレー */
  text-align: center;            /* 中央寄せ */
  margin-top: 30px;              /* 上に余白 */
  font-style: italic;            /* 斜体で柔らかく */
}

/* ---------------------------------------------
   PC向けスタイル（画面幅901px以上）
---------------------------------------------- */
@media (min-width: 901px) {
  .environment-container {
    max-width: 1100px;            /* PCは最大幅1000pxに */
    padding: 60px 40px 80px;           /* 余白を広く */
    /*padding-top: 0;*/
    
    padding: 60px 40px 80px;
  }

  .environment-container h2 {
    font-size: 2rem;              /* 大きめタイトル */
    margin-bottom: 40px;
  }

  .policy-box {
    padding: 30px 24px;           /* ボックス内余白も増やす */
    margin: 0 auto 40px;
    width: 80%;
  }

  .policy-box h3 {
    font-size: 1.4rem;            /* 小見出し大きく */
    margin-bottom: 10px;
  }

  .policy-box p {
    font-size: 1rem;              /* 標準サイズに */
    margin-bottom: 16px;
  }

  .policy-box li {
    margin-bottom: 8px;
    font-size: 1rem;
  }

  .note {
    font-size: 0.95rem;
    margin-top: 40px;
  }
}