/* 基本コンテナ：ここが中央揃えの肝です */
.news_contents, 
.articles, 
.achievements_contents {
    max-width: 1000px;
    width: 92%;
    margin: 0 auto; /* 左右中央寄せ */
    text-align: left; /* 中身のテキストは左詰め */
}

/* リストアイテム共通 */
.content {
    display: flex;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px dotted #ccc;
    width: 100%;
}

/* 実績紹介(group02)内の装飾 */
.group02 .content {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.4);
}

.content dt.date {
    flex: 0 0 160px;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 実績紹介のカラム（工事名と場所）を横に並べる */
.articles .title, 
.achievements_contents .title {
    flex: 1;
    display: flex;
    gap: 20px;
}

/* 実績紹介のヘッダー行（工期・工事名・場所）だけを太字にする */
.achi-header dt, 
.achi-header .name-label, 
.achi-header .place-label {
    font-weight: bold !important;
}

/* 実績紹介：データ行（令和〜などの値）の太字を解除する */
.articles .content:not(.achi-header) dt.date {
    font-weight: normal;
}

.name-val, .name-label { flex: 1; font-size: 1.5rem; }
.place-val, .place-label { flex: 0 0 180px; font-size: 1.5rem; white-space: nowrap; }

/* ニュース本文 */
.news_contents .title { 
    font-size: 1.5rem; 
    flex: 1; 
    line-height: 1.4; 
}

/* ボタンラッパー（右寄せ） */
.button-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
    width: 100%;
    margin: 2rem 0;
}

.button-wrapper button,
.button-wrapper a {
    background: transparent;
    padding: 8px 30px;
    min-width: 150px;
    font-size: 1.3rem;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;    /* flexを適用して中身を操作 */
    align-items: center;     /* 上下中央揃え */
    justify-content: center;  /* 左右中央揃え */
    text-align: center;      /* 念のためテキストも中央 */
}

/* 実績紹介内のボタン色 */
.group02 .button-wrapper button,
.group02 .button-wrapper a {
    border: 1px solid #ffffff;
    color: #ffffff;
}

/* ホバー時の演出（任意：背景が反転します） */
.group02 .button-wrapper button:hover,
.group02 .button-wrapper a:hover {
    background-color: #ffffff;
    color: #808080;
}

/* ニュース内のボタン色：セレクタを修正 */
#news-section .button-wrapper button,
#news-section .button-wrapper a {
    border: 1px solid #808080; /* 枠線を表示 */
    color: #808080;           /* 文字色を枠線に合わせる */
    background-color: transparent;
    display: inline-flex;  /* 中央揃えを確実に適用 */
    align-items: center;
    justify-content: center;
}

/* ホバー時の演出（任意：背景が反転します） */
#news-section .button-wrapper button:hover,
#news-section .button-wrapper a:hover {
    background-color: #808080;
    color: #fff;
}
/* 重要アイコン */
.category-icon {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    vertical-align: middle;
}
.category-icon.important { background-color: #d9534f; color: #fff; }
.category-icon.normal { border: 1px solid #ccc; color: #666; }

/* レスポンシブ対応　------------------------------*/
@media screen and (max-width: 768px) {
  .news_contents, 
  .articles, 
  .achievements_contents {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  .content {
    flex-direction: column;
    align-items: flex-start; /* 左揃えに固定 */
    gap: 0.5rem;
    padding: 1rem 0;
  }

  .content dt.date {
    flex: none;
    width: auto;
    font-size: 1.2rem;
    color: #666; /* スマホでは少し控えめな色に */
  }

  .group02 .content dt.date {
    color: #eee;
  }

  .news_contents .title,
  .articles .title, 
  .achievements_contents .title {
    font-size: 1.4rem;
    line-height: 1.5;
    flex: none;
    width: 100%;
    display: block; /* 実績紹介の横並びを縦にする */
  }

  .category-icon {
    font-size: 1rem;
    margin-left: 5px;
  }

  .button-wrapper {
    margin: 1.5rem 0;
    gap: 15px;
  }
  
  .articles .achi-header {
    display: none;
  }
  
   /* 実績紹介の場所（place-val）の前にコロンを追加 */
  .articles .place-val::before {
    content: " ： ";
  }
 
  /* 工事名と場所を少し見やすく調整 */
  .articles .name-val,
  .articles .place-val {
    display: inline; /* 横に並べてコロンを繋げる */
    font-size: 1.4rem;
  }
}