@charset "UTF-8";

/* ベース設定 */
body { margin: 0; padding: 0; background-color: #050505; color: #ffffff; font-family: 'Helvetica Neue', Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height: 1.8; }
a { color: #fff; text-decoration: none; transition: all 0.3s ease; }
a:hover { opacity: 0.8; }

/* ヘッダー */
header { padding: 30px 50px; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; }
.header-logo img { height: 65px; display: block; }
@media (max-width: 1024px) { header { padding: 20px 30px; } .header-logo img { height: 50px; } }
@media (max-width: 768px) { header { display: flex; justify-content: center; } .header-logo img { height: 45px; } }

/* メインコンテンツ */
.artist-container { max-width: 800px; margin: 150px auto 0; padding: 0 20px; }
.artist-title { text-align: center; font-size: 3.5rem; letter-spacing: 0.15em; margin-bottom: 40px; font-weight: normal; }
.artist-visual img { width: 100%; height: auto; border: 1px solid #222; border-radius: 4px; }
.artist-bio { margin: 60px 0; }
.artist-bio p { font-size: 1.05rem; line-height: 2.2; color: #ccc; text-align: left; }
.section-title { text-align: center; font-size: 1.5rem; letter-spacing: 0.15em; margin-bottom: 40px; color: #666; }

/* YouTube動画 */
.artist-works { margin-bottom: 80px; }
.video-item { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; border: 1px solid #222; }
.video-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-title {
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-top: 20px;
    color: #fff;
    font-weight: normal;
}

/* =========================================
   配信リンク・SNSボタン（ブランドアイコンカラー対応）
========================================= */
.artist-streaming { margin-bottom: 80px; }
/* PCサイズでは数が多いため3列に変更してすっきり見せます */
.streaming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* ボタンの共通スタイル（元のカッコいい黒ボタン） */
.btn-stream { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    padding: 14px 10px; 
    border-radius: 30px; 
    font-weight: bold; 
    letter-spacing: 0.5px; 
    transition: 0.3s; 
    background-color: #111; 
    border: 1px solid #333; 
    color: #fff;
    font-size: 0.95rem; /* 文字が長いものがあるので少し縮小 */
    text-align: center;
}

.btn-stream i {
    font-size: 1.3rem;
    transition: 0.3s;
}

/* ホバー時の共通アクション */
.btn-stream:hover { 
    transform: translateY(-3px); 
    background-color: #000;
}

/* ▼ 各ブランドの公式カラー設定 ▼ */

/* SOCIAL */
.btn-tiktok i { color: #fff; }
.btn-tiktok:hover { border-color: #fff; box-shadow: -3px 0 10px rgba(0, 242, 254, 0.4), 3px 0 10px rgba(254, 44, 85, 0.4); }

.btn-instagram i {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-instagram:hover { border-color: #dc2743; box-shadow: 0 0 15px rgba(220, 39, 67, 0.3); }

.btn-youtube i { color: #FF0000; }
.btn-youtube:hover { border-color: #FF0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); }

.btn-x i { color: #fff; }
.btn-x:hover { border-color: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); }

/* STREAMING & DOWNLOAD */
.btn-apple i { color: #FA243C; }
.btn-apple:hover { border-color: #FA243C; box-shadow: 0 0 15px rgba(250, 36, 60, 0.3); }

.btn-spotify i { color: #1DB954; }
.btn-spotify:hover { border-color: #1DB954; box-shadow: 0 0 15px rgba(29, 185, 84, 0.3); }

.btn-amazon i { color: #00A8E1; }
.btn-amazon:hover { border-color: #00A8E1; box-shadow: 0 0 15px rgba(0, 168, 225, 0.3); }

.btn-linemusic i { color: #00C300; }
.btn-linemusic:hover { border-color: #00C300; box-shadow: 0 0 15px rgba(0, 195, 0, 0.3); }

.btn-awa i { color: #FF7B00; }
.btn-awa:hover { border-color: #FF7B00; box-shadow: 0 0 15px rgba(255, 123, 0, 0.3); }

.btn-kkbox i { color: #00B4D5; }
.btn-kkbox:hover { border-color: #00B4D5; box-shadow: 0 0 15px rgba(0, 180, 213, 0.3); }

.btn-dhits i { color: #E60012; }
.btn-dhits:hover { border-color: #E60012; box-shadow: 0 0 15px rgba(230, 0, 18, 0.3); }

.btn-utapass i { color: #F39800; }
.btn-utapass:hover { border-color: #F39800; box-shadow: 0 0 15px rgba(243, 152, 0, 0.3); }

.btn-smartusen i { color: #E60012; }
.btn-smartusen:hover { border-color: #E60012; box-shadow: 0 0 15px rgba(230, 0, 18, 0.3); }

.btn-rakuten i { color: #BF0000; }
.btn-rakuten:hover { border-color: #BF0000; box-shadow: 0 0 15px rgba(191, 0, 0, 0.3); }

.btn-netease i { color: #E60026; }
.btn-netease:hover { border-color: #E60026; box-shadow: 0 0 15px rgba(230, 0, 38, 0.3); }

.btn-tencent i { color: #00A4FF; }
.btn-tencent:hover { border-color: #00A4FF; box-shadow: 0 0 15px rgba(0, 164, 255, 0.3); }

.btn-itunes i { color: #EA4CC0; }
.btn-itunes:hover { border-color: #EA4CC0; box-shadow: 0 0 15px rgba(234, 76, 192, 0.3); }

.btn-recochoku i { color: #E60012; }
.btn-recochoku:hover { border-color: #E60012; box-shadow: 0 0 15px rgba(230, 0, 18, 0.3); }

.btn-mora i { color: #005BAC; }
.btn-mora:hover { border-color: #005BAC; box-shadow: 0 0 15px rgba(0, 91, 172, 0.3); }

.btn-musicjp i { color: #D80C18; }
.btn-musicjp:hover { border-color: #D80C18; box-shadow: 0 0 15px rgba(216, 12, 24, 0.3); }

.btn-mumo i { color: #E60012; }
.btn-mumo:hover { border-color: #E60012; box-shadow: 0 0 15px rgba(230, 0, 18, 0.3); }

.btn-dwango i { color: #00A0E9; }
.btn-dwango:hover { border-color: #00A0E9; box-shadow: 0 0 15px rgba(0, 160, 233, 0.3); }

.btn-mysound i { color: #8FC31F; }
.btn-mysound:hover { border-color: #8FC31F; box-shadow: 0 0 15px rgba(143, 195, 31, 0.3); }

.btn-gigamusic i { color: #00A0E9; }
.btn-gigamusic:hover { border-color: #00A0E9; box-shadow: 0 0 15px rgba(0, 160, 233, 0.3); }

.btn-happy i { color: #F39800; }
.btn-happy:hover { border-color: #F39800; box-shadow: 0 0 15px rgba(243, 152, 0, 0.3); }

.btn-tsutaya i { color: #003399; }
.btn-tsutaya:hover { border-color: #003399; box-shadow: 0 0 15px rgba(0, 51, 153, 0.3); }

.btn-oricon i { color: #005BAC; }
.btn-oricon:hover { border-color: #005BAC; box-shadow: 0 0 15px rgba(0, 91, 172, 0.3); }

.btn-ototoy i { color: #FFFFFF; }
.btn-ototoy:hover { border-color: #FFFFFF; box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }

/* 戻るボタン */
.back-link { text-align: center; margin-top: 80px; }
.btn-back { display: inline-block; padding: 15px 50px; background-color: #fff; color: #000; font-weight: bold; border-radius: 30px; transition: 0.3s; }
.btn-back:hover { background-color: #ccc; letter-spacing: 2px; }

/* フッター */
footer { text-align: center; padding: 80px 20px; border-top: 1px solid #111; font-size: 0.7rem; color: #333; margin-top: 100px; letter-spacing: 2px; }

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .artist-title { font-size: 2.5rem; }
    .artist-bio p { text-align: justify; text-justify: inter-ideograph; }
    
    /* スマホ画面では2列にして見やすくします */
    .streaming-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    
    .btn-stream {
        font-size: 0.85rem;
        padding: 12px 5px;
    }
}