@charset "UTF-8";

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

#data-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}
article {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    width: 300px;
    border-radius: 10px;
    transition: opacity 0.5s ease-in-out;
}

article.fade-out {
    opacity: 0;
}

article.fade-in {
    opacity: 1
}

article p a {
    display: inline-block;
    margin-bottom: 5px;
}
/* 
.overlay {
    position: relative;
}

.overlay img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.overlay img:hover {
    transform: scale(1.1); 
}

.overlay:hover .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: block;
}

.overlay-text {
    display: none;
} */