@charset "utf-8";

/* 記事CSS */
/* --- 投稿ページ全体のコンテナ調整 --- */
.single-post-article {
  max-width: 800px; /* 読みやすいように文章の横幅を制限 */
  width: 95%;
  margin: 0 auto; /* 記事全体を画面中央に配置 */
  text-align: left; /* 文章の頭は左寄せ（読みやすさ最優先） */
  padding: 40px 0;
}

/* --- 記事タイトルと日付 --- */
.post-header {
  text-align: center; /* タイトルブロック自体は中央寄せにすると綺麗です */
  margin-bottom: 30px;
}

.post-date {
  font-size: 0.9rem;
  color: #666;
  display: block;
  margin-bottom: 10px;
}

.post-title {
  display: inline-block; /* 文字の長さだけに下線を引く */
  border-bottom: 2px solid #005bac; /* テーマカラーの青 */
  padding-bottom: 10px;
  font-size: clamp(1.4rem, 3vw, 2.2rem); /* レスポンシブサイズ（最大約35px） */
  color: #333;
  line-height: 1.4;
}

/* --- アイキャッチ画像 --- */
.post-thumbnail {
  margin-bottom: 30px;
  text-align: center;
}

.post-thumbnail img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 角を少し丸く */
}

/* --- 本文エリア --- */
.post-content {
  font-size: clamp(
    0.95rem,
    1vw + 0.5rem,
    1.05rem
  ); /* スマホとPCで最適な本文サイズ */
  line-height: 1.8;
  color: #333;
}

/* 本文内の見出しや画像の間隔調整（ブロックエディタ用） */
.post-content p {
  margin-bottom: 1.5em;
}

.post-content h2 {
  display: block; /* 本文内のh2は横いっぱいのブロックにするのが一般的 */
  border-left: 5px solid #005bac; /* 左側に青い縦線のアクセント */
  padding: 5px 0 5px 15px;
  margin: 40px 0 20px 0;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  text-align: left;
}

/* --- 前後の記事へのリンク --- */
.post-footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.post-navigation a {
  color: #005bac;
  text-decoration: none;
  font-size: 0.95rem;
}

.post-navigation a:hover {
  text-decoration: underline;
}