diff --git a/assets/css/style.css b/assets/css/style.css
index b71ae8c..639f2e6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,6 +1,6 @@
 /* コンテナ全体のスタイル */
 .container {
-  display: block;
+  display: block; /* フレックスレイアウトを解除 */
   height: auto;
   overflow: visible;
 }
@@ -11,14 +11,42 @@
   padding: 20px;
 }
 
+/* 記事アイテムのスタイル */
+.article-item {
+  text-align: center; /* コンテンツを中央揃えにする（任意） */
+  margin-bottom: 20px;
+}
+
 /* サムネイル画像のスタイル */
 .thumbnail {
   width: 100%;             /* 親要素の幅に合わせる */
-  max-width: 180px !important; /* 最大幅を180pxに設定（必要に応じて調整） */
-  height: auto;             /* アスペクト比を維持して高さを自動設定 */
-  display: block;
-  margin: 10px auto;        /* 上下に10pxのマージンを設定し、中央揃え */
-  border-radius: 5px;
+  max-width: 180px;        /* サムネイルの最大幅を180pxに設定 */
+  height: auto;            /* アスペクト比を維持して高さを自動設定 */
+  display: block;          /* ブロック要素として扱い、他の要素と独立させる */
+  margin: 10px auto;       /* 上下に10pxのマージンを設定し、中央揃え */
+  border-radius: 5px;      /* 角を丸くする（任意） */
+}
+
+/* 公開日のスタイル */
+.published-date {
+  font-size: 0.9em;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+/* レスポンシブ対応 */
+@media (max-width: 768px) {
+  /* サムネイルの最大幅を調整 */
+  .thumbnail {
+    max-width: 150px;
+  }
+}
+
+@media (max-width: 600px) {
+  /* サムネイルがさらに狭くなる場合 */
+  .thumbnail {
+    max-width: 120px;
+  }
 }
 
 /* その他の基本スタイル */