@charset "UTF-8";

body {
    font-family:   'M PLUS Rounded 1c', "Noto Sans JP", serifsans-serif;
}

/* header {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 10px 0;
} */

.filters {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.filters label {
    margin-right: 10px;
}
.filters select {
    /* padding: 5px; */
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none; /* デフォルトのプルダウンスタイルを保持 */
    -moz-appearance: none;
    -webkit-appearance: none; 
    background: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="none" stroke="%23333" stroke-width="2" d="M1 4l5 5 5-5"/></svg>') no-repeat right 5px center; 
    background-size: 1rem; 

    padding: 0 30px 0 10px;
    background-color: white; /* 背景色を追加 */
}

#post-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

article {
        display: flex;
        flex-direction: column;
    background-color: #f9f9f9;  /* 淡い色で塗る */
    border: 1px solid #ccc;
    border-radius: 15px;  /* 枠の角を丸める */
    margin: 10px;
    padding: 10px;
    width: 300px;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out;  /* フェードイン・アウトと拡大効果のためのトランジション */
}

article.fade-out {
    opacity: 0;  /* フェードアウト */
}

article.fade-in {
    opacity: 1;  /* フェードイン */
}

article p a {
    display: inline-block;
    margin-bottom: 5px;
}

h3 {
     margin: 5px;
}

article img {
    width: 100%;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

/* article img:hover {
    transform: scale(1.5);
} */



.pagination {
    display: flex;
    justify-content: center;
    align-items: center;  /* 中央揃えのために追加 */
    margin: 20px 0;
    flex-wrap: wrap;  /* 2行表示のために追加 */
}

.pagination button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 65px;
    line-height: 60px;
    border-radius: 80% 80% 80% 80% / 100% 100% 65% 65%;
    border: 1px solid #252424;
    box-shadow: 0 5px 8px -2px rgba(0, 0, 0, .1), 0 3px 6px -4px rgba(0, 0, 0, .5);
    margin: 5px 10px;  /* 上下のスペースを追加 */
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease-in-out;  /* ホバー時の回転効果 */
}

.pagination span {
    margin: 0 10px;  /* スペースのために追加 */
    font-size: 24px;  /* 同じ高さに表示 */
}

.pagination button:hover {
    background-color: #c2bfbf;
    transform: rotate(35deg);
}

.pagination button.active {
    background-color: #eb4700c1;
    color: #ffffff;
    border-color: #007bff;
}

.pagination button:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    article {
        width: 100%;
    }
    article img:hover {
    transform: none;  /* ホバー時に拡大を辞める */
    }
    .pagination {
        flex-wrap: wrap;  /* 2行表示のために維持 */
    }
    .pagination button {
        width: 40px;  /* ボタンのサイズを縮小 */
        height: 50px;
        line-height: 50px;
    }

}