/* ブログ専用スタイル */

/* 記事一覧のカードスタイル */
.blog-card {
    @apply bg-white rounded-lg shadow-md border border-gray-200 transition-transform transform hover:scale-105 duration-300;
}

.blog-card:hover {
    @apply shadow-lg;
}

/* 記事本文のproseスタイル拡張 */
.prose {
    @apply text-gray-700;
    line-height: 1.8;
}

.prose h1 {
    @apply text-3xl font-bold text-gray-900 mb-6;
}

.prose h2 {
    @apply mb-4 pb-2 border-b;
    color: #4f8bc2;
    border-bottom-color: #4f8bc2;
    font-size: 2rem;
    font-weight: 800;
    margin-top: 3rem;
}

.prose h3 {
    @apply text-xl font-bold text-gray-900 mt-6 mb-3;
}

.prose h4 {
    @apply text-lg font-bold text-gray-900 mt-4 mb-2;
}

.prose p {
    @apply mb-4;
}

.prose .lead {
    @apply text-xl text-gray-600 font-light mb-6;
    line-height: 1.7;
}

.prose ul, .prose ol {
    @apply mb-4 pl-6;
}

.prose li {
    @apply mb-2;
}

.prose blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 bg-gray-50 py-2 my-4;
}

/* コードブロックスタイル */
.prose pre {
    @apply bg-gray-900 text-white rounded-lg p-4 overflow-x-auto mb-4;
}

.prose code {
    @apply bg-gray-100 text-pink-600 px-2 py-1 rounded text-sm;
}

.prose pre code {
    @apply bg-transparent text-white px-0 py-0;
}

/* テーブルスタイル */
.prose table {
    @apply w-full border-collapse border border-gray-300 my-4;
}

.prose th, .prose td {
    @apply border border-gray-300 px-4 py-2 text-left;
}

.prose th {
    @apply bg-gray-100 font-bold;
}

/* タグスタイル */
.blog-tag {
    @apply inline-block bg-[#4f8bc2] text-white px-3 py-1 rounded-full text-sm mr-2;
}

.blog-tag.secondary {
    @apply bg-gray-500;
}

/* パンくずナビ */
.breadcrumb a {
    @apply text-[#4f8bc2] hover:underline;
}

.breadcrumb span {
    @apply text-gray-400;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .prose h1 {
        @apply text-2xl;
    }
    
    .prose h2 {
        @apply text-xl;
    }
    
    .prose h3 {
        @apply text-lg;
    }
}

/* 動的生成記事カードのスタイル */
.blog-title-link {
    color: #374151; /* text-gray-700 相当 */
}

.blog-title-link:hover {
    color: #4f8bc2; /* ブランドカラー */
}

.blog-read-more {
    color: #4f8bc2; /* ブランドカラー */
}

/* 記事ナビゲーション */
.article-nav {
    @apply flex justify-between items-center py-8 border-t border-gray-200;
    margin-top: 2rem;
}

.article-nav a {
    color: #4f8bc2;
}

.article-nav a:hover {
    text-decoration: underline;
}

/* 目次スタイル */
.toc {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-6 mb-8;
}

.toc ul {
    @apply list-none pl-0;
}

.toc li {
    @apply mb-2;
}

.toc a {
    @apply text-[#4f8bc2] hover:underline;
}