style.css

/* Google Fontsの適用 */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* スクロールバーを隠すユーティリティ */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 画像のアスペクト比を維持するカード */
.card-image-wrapper {
    position: relative;
    padding-top: 150%;
    /* 2:3 aspect ratio */
    overflow: hidden;
}

.card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* カードホバー時のエフェクト */
.voice-card:hover img {
    transform: scale(1.05);
}

.voice-card {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.voice-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 選択状態のボーダー */
.voice-card.selected {
    border-color: #6366f1;
    /* Indigo-500 */
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}