/* カテゴリー一覧の見出しスタイル */
.archive-index {
    margin: 20px auto;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 3px solid #008b8b;
    color: #333;
}

/* 記事カードのスタイル */
.archive-post {
    margin: 20px auto;
    padding: 15px;
    border: solid 2px #ddd;
    border-radius: 10px;
    background: #f9f9f9;
    max-width: 80%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.archive-post:hover {
    transform: scale(1.02);
}

/* 記事タイトルのスタイル */
.post-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    transition: color 0.3s;
}

.post-title a {
    text-decoration: none;
    color: inherit;
}

.post-title a:hover {
    color: #008b8b;
}

/* 記事の概要フォント */
.post-font {
    font-size: 16px;
    color: #666;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) and (max-height: 1366px),
screen and (min-width: 431px) and (max-width: 960px) {
    .archive-index {
        font-size: 32px;
    }

    .archive-post {
        margin: 15px auto;
        padding: 10px;
    }
}

@media screen and (max-width: 430px) {
    .archive-index {
        font-size: 28px;
    }

    .archive-post {
        margin: 10px auto;
        padding: 8px;
    }

    .post-title {
        font-size: 18px;
    }

    .post-font {
        font-size: 14px;
    }
}