/* 記事タイトル */
.main-article h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* サブタイトル */
.main-article h2 {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* 段落 */
.main-article p {
  margin-bottom: 1.5rem;
}

/* リスト */
.main-article ul,
.main-articlev ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

/* リストアイテム */
.main-article li {
  margin-bottom: 0.5rem;
}

/* 引用 */
.main-article blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
}

/* 画像 */
.main-article img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

/* リンク */
.main-article a {
  color: #0073aa;
  text-decoration: none;
}

.main-article a:hover {
  color: #005177;
  text-decoration: underline;
}

/* 共通のスタイル */
.main-article code.language-css {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ライトモードのスタイル */
.main-article code.language-css {
  background-color: #f1f1f1;
  color: #333; /* CSSコードの文字色 */
}

/* ダークモードのスタイル */
@media (prefers-color-scheme: dark) {
  .main-article code.language-css {
    background-color: #2d2d2d; /* ダークモード用の背景色 */
    color: #e0e0e0; /* ダークモード用の文字色 */
  }
}