/* 全体のリセット */
body, h1, h2, h3, p { margin: 0; padding: 0; }
body { background-color: black; color: white; font-family: 'Helvetica Neue', Arial, sans-serif; overflow-x: hidden; line-height: 1.6; }

.section-title { font-size: 2.5rem; letter-spacing: 0.4em; margin-bottom: 60px; text-align: center; }

/* ① ヒーロー */
.hero { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('live.jpg'); background-size: cover; background-position: center; background-attachment: fixed; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
.logo-img { width: 450px; max-width: 90%; height: auto; margin-bottom: 20px; filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.3)); }
.hero-sub { font-size: 1.5rem; letter-spacing: 0.5em; margin-bottom: 40px; }
.hero-sns { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.hero-sns-link { color: white; text-decoration: none; border: 1px solid white; padding: 12px 20px; font-size: 13px; font-weight: bold; letter-spacing: 2px; transition: 0.3s; min-width: 130px; }
.hero-sns-link:hover { background-color: white; color: black; transform: translateY(-5px); }

/* ② 紹介 */
.about-section { padding: 120px 0; }
.about-content { width: 90%; max-width: 1000px; margin: 0 auto; text-align: center; }
.full-member-img { width: 100%; height: auto; margin-bottom: 60px; filter: grayscale(20%); }
.desc-text { font-size: 1.3rem; line-height: 2.2; letter-spacing: 0.1em; }

/* ③ メンバー個別（BIOGRAPHY） */
.member-section { padding: 100px 0; background-color: #050505; }
.member-container { width: 90%; max-width: 900px; margin: 0 auto; }
.member-card { display: flex; align-items: center; gap: 50px; margin-bottom: 100px; }
.member-card:nth-child(even) { flex-direction: row-reverse; } /* 偶数番目のカードは左右反転 */
.member-photo { width: 350px; height: 450px; object-fit: cover; border: 1px solid #333; }
.member-info { text-align: left; flex: 1; }
.member-card:nth-child(even) .member-info { text-align: right; }
.member-name { font-size: 2.8rem; letter-spacing: 0.1em; margin-bottom: 10px; }
.member-role { font-size: 1.1rem; color: #aaa; margin-bottom: 30px; letter-spacing: 0.2em; }
.member-insta { color: white; text-decoration: none; border: 1px solid white; padding: 10px 25px; font-size: 0.8rem; letter-spacing: 2px; transition: 0.3s; }
.member-insta:hover { background-color: white; color: black; }

/* ④ TikTok */
.video-section { padding: 100px 0; }
.tiktok-wrapper { display: flex; justify-content: center; }

/* ⑤ グッズ */
.goods-section { padding: 120px 0; background-color: #0a0a0a; }
.goods-container { width: 90%; max-width: 800px; margin: 0 auto; text-align: center; }
.goods-img { width: 100%; height: auto; border: 1px solid #333; margin-bottom: 30px; }
.goods-status { font-size: 0.9rem; color: #ff3b3b; letter-spacing: 0.3em; margin-bottom: 10px; font-weight: bold; }
.goods-text { font-size: 1.8rem; letter-spacing: 0.2em; font-weight: bold; }

/* ⑥ フッター */
footer { padding: 80px 0; text-align: center; font-size: 0.8rem; opacity: 0.5; border-top: 1px solid #222; }

/* --- ⑦ レスポンシブ対応（スマホで見やすくする） --- */
@media screen and (max-width: 768px) {
    .member-card, .member-card:nth-child(even) { flex-direction: column; text-align: center; gap: 30px; }
    .member-card:nth-child(even) .member-info { text-align: center; }
    .member-photo { width: 100%; height: auto; max-width: 300px; }
    .member-name { font-size: 2rem; }
}