/* ベース設定 */
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: opacity 0.3s; }
a:hover { opacity: 0.7; }

/* ヘッダー */
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;     /* 文字の太さ */
}

/* 配信リンクボタン */
.artist-streaming { margin-bottom: 80px; }
.streaming-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.btn-stream { display: block; padding: 18px 0; text-align: center; border: 1px solid #333; border-radius: 30px; font-weight: bold; letter-spacing: 1px; transition: 0.3s; background-color: #111; }
.btn-stream:hover { background-color: #222; border-color: #fff; transform: translateY(-3px); }

/* 戻るボタン */
.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; }
    .streaming-grid { grid-template-columns: 1fr; }
}