.news-title, .news-container, section {
  width: 80%;
  margin: 0 auto;
}

.news-title {
  color: #b7282e; 
  padding-top: 100px;
  padding-bottom: 30px;
  text-align: center;
}

.news-title h1 {
  position: relative;
  padding-bottom: 20px;
  color: #b7282e;
  font-size: clamp(22.4px, calc(18.04px + 0.7273vw), 32px);
  line-height: 1.2;
}

.news-title h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #b7282e 0%, #c41e3a 50%, #b7282e 100%);
  border-radius: 2px;
}

.news-container {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  margin: 50px auto;
  padding: 40px;
  margin-top: -20px;
}

.news-item {
  display: flex;
  justify-content: space-between; /* 日付と内容を左右に配置 */
  margin-bottom: 10px;
}

.news-date {
  display: block;
  margin-right: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-content {
  flex-grow: 1; /* 残りのスペースを埋める */
}

.content-title {
  color: #b7282e; 
  padding-top: 30px; /* 全体的なパディングを設定 */
  padding-bottom: 20px;
  text-align: center;
}

.content-title h1 {
  position: relative;
  padding-bottom: 20px;
  color: #b7282e;
  font-size: clamp(22.4px, calc(18.04px + 0.7273vw), 32px);
  line-height: 1.2;
}

.content-title h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #b7282e 0%, #c41e3a 50%, #b7282e 100%);
  border-radius: 2px;
}

/* index.php 用のセクションスタイル */
section {
  color: #444;
  margin: 20px auto; /* 上下,左右のマージンを設定 */
  padding: 20px 30px; /* 上下,左右のパディングを設定 */
  border-bottom: 1px solid #ccc; /* 下線のみを引く */
  background-color: transparent; /* 背景色を透明に */
  box-shadow: none; /* 影を削除 */
}

section h2{
  color: #b7282e;
  margin-bottom: 15px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.2;
  font-weight: 700;
}

section p,
.news-container {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.6;
}

/* セクション内のリンクの色と下線のスタイル */
section h2 a {
  color: #b7282e !important; /* リンクの色を #b7282e に設定 */
  text-decoration: none !important; /* 下線を削除 */
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 768px) {
  .news-title, .news-container, section {
    width: 95%;
  }

  .news-container {
    padding: 20px 10px;
  }

  .news-title {
    padding-top: 60px;
    padding-bottom: 20px;
  }
}