h1 { color: #b5a494; margin-bottom: 40px; font-weight: normal; }
.container {
width: 100%;
max-width: 800px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
/* 自動生成されるカードのスタイル */
.card {
background: #ffffff;
border-radius: 24px;
padding: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.03);
border: 1px solid #eeebe6;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tag {
font-size: 0.8rem;
background: #e5eaf5;
color: #7d8cc4;
padding: 4px 12px;
border-radius: 12px;
align-self: flex-start;
margin-bottom: 12px;
}
.title { font-weight: bold; margin-bottom: 15px; color: #5a5a5a; }
.preview-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 15px;
margin-bottom: 15px;
background-color: #f0f0f0;
}
audio { width: 100%; margin-bottom: 15px; height: 35px; }
.download-link {
display: block;
background-color: #ffb4a2; /* 優しいコーラルピンク */
color: white;
text-decoration: none;
padding: 12px;
border-radius: 15px;
text-align: center;
font-weight: bold;
transition: all 0.3s ease;
}
.download-link:hover {
background-color: #e5989b;
transform: scale(1.02);
}
🌿 Material Library 🌿