@charset "utf-8";

/* ==========================================================================
   1. ベース設定＆リセット（他の表示との干渉を防ぐ）
   ========================================================================== */
.u-bg,
.p-category-content,
.u-grid-main__main {
  box-sizing: border-box;
}

.u-bg *,
.p-category-content *,
.u-grid-main__main * {
  box-sizing: inherit;
}

/* ==========================================================================
   2. レイアウト構造（PC・スマホ共通）
   ========================================================================== */
/* コンテンツ全体を包む背景・余白設定 */
.p-category-content {
  width: 100%;
  padding: 50px 24px; /* PC向け：上下に広めの余白 */
  background-color: #ffffff; /* 必要に応じて背景色を変更してください */
}

/* メインコンテンツの横幅を制限して読みやすく中央寄せ */
.u-grid-main__main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   3. 各パーツのデザイン（タイトル・日付・本文）
   ========================================================================== */
/* 【条件1】ニュースタイトル */
.news_title {
  display: block;
  font-size: 22px;          /* PCでは少し大きめの22px */
  font-weight: 700;         /* しっかりとした太文字 */
  line-height: 1.4;
  text-align: center;       /* 中央配置 */
  color: #333333;           /* 視認性の高いダークグレー */
  margin: 0 0 16px 0;       /* 下方向（日付側）への余白 */
  padding: 0;
}

/* 【条件2】ニュース日付（右端配置・デフォルトサイズ） */
.news_date {
  display: block;
  font-size: 1rem;          /* ブラウザの標準（デフォルト）サイズ */
  text-align: right;        /* 右寄せ */
  color: #666666;           /* やや薄めのグレーで上品に */
  margin: 0 0 32px 0;       /* 下方向（本文側）への広めの余白 */
  padding: 0;
}

/* 本文テキスト */
.u-grid-main__main p {
  font-size: 16px;
  line-height: 1.85;        /* 長文でも疲れにくい、少し広めの行間 */
  color: #444444;           /* 目に優しいチャコールグレー */
  margin: 0 0 1.5em 0;      /* 段落ごとの余白 */
}

/* 本文内の最後の段落は下マージンをリセット */
.u-grid-main__main p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   4. スマートフォン向け最適化（画面幅が 768px 以下の時）
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* スマホの狭い画面に合わせて、全体の上下余白をコンパクトに */
  .p-category-content {
    padding: 32px 16px;
  }

  /* タイトルがスマホで大きすぎないように 20px に自動縮小 */
  .news_title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  /* 日付と本文の間の余白をスマホ用に少し詰める */
  .news_date {
    margin-bottom: 24px;
  }

  /* スマホでの文字の大きさと読みやすさを調整 */
  .u-grid-main__main p {
    font-size: 15px;
    line-height: 1.75;
  }
}