@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&display=swap');

:root {
    --shu: #3F51B5; --ha: #D32F2F; --ri: #4CAF50;
}

body { font-family: 'Noto Sans JP', sans-serif; background-color: #fdfdfd; color: #1a1a1a; margin: 0; }

/* 背景固定 */
.vision-bg-container { position: fixed; inset: 0; z-index: -1; }
.vision-bg-image { width: 100%; height: 100%; object-fit: cover; }
.vision-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.25); }

/* グリッド線 */
.grid-line-b { border-bottom: 0.5px solid #1a1a1a; }
.grid-line-r { border-right: 0.5px solid #1a1a1a; }

/* アーティストカード */
.artist-card { position: relative; overflow: hidden; transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); min-height: 400px; border-right: 0.5px solid #1a1a1a; border-bottom: 0.5px solid #1a1a1a; cursor: pointer; }
.artist-card:hover { color: white; }
.card-shu:hover { background-color: var(--shu); }
.card-ha:hover { background-color: var(--ha); }
.card-ri:hover { background-color: var(--ri); }

.artist-img-bg { position: absolute; inset: 0; opacity: 0.1; transition: 0.5s; padding: 25%; object-fit: contain; }
.artist-card:hover .artist-img-bg { opacity: 0.75; transform: scale(1.1); }

/* モバイルメニュー */
#mobile-menu { position: fixed; top: 0; right: 0; height: 100%; width: 300px; background: white; z-index: 200; transform: translateX(100%); transition: 0.4s; }
#mobile-menu.open { transform: translateX(0); }
#menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; opacity: 0; pointer-events: none; transition: 0.3s; }
#mobile-menu.open + #menu-overlay, #menu-overlay.open { opacity: 1; pointer-events: auto; }