/* =========================================================
    1. Modern Reset & Base
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased; 
    font-family: 'M PLUS Rounded 1c', sans-serif; 
    color: #333;
    background-color: #f0f0f0;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap;
}

/* =========================================================
    2. Layout Container
========================================================= */
.wrapper {
    max-width: 1280px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

section { padding: 60px 0; }

h2.section-title {
    text-align: center;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

/* =========================================================
    3. Sections
========================================================= */
/* --- Header --- */
header { position: relative; }

.seo-h1 {
    position: absolute;
    top: 15px;
    left: 5%;
    font-family: 'WDXL Lubrifont JP N', 'M PLUS Rounded 1c', sans-serif;
    font-size: clamp(10px, 1.5vw, 15px);
    color: rgba(200, 200, 200, 0.7);
    z-index: 10;
}

.header-sns {
    position: absolute;
    top: 20px;
    right: 5%;
    display: flex;
    gap: 20px;
    z-index: 10;
}
.header-sns img { 
    width: 50px; 
    height: 50px; 
    max-width: 50px; 
}

.main-visual { 
    width: 100%; 
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* --- Wanna-Be (About) --- */
.wanna-be { text-align: center; }

.sp-sns { display: none; }
.wanna-be-heading-wrapper h2.section-title { margin-bottom: 20px; }

/* .wanna-be-sub {
    display: block;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 5px;
} */

.about-img { margin: 30px auto; }
.about-img img { margin: 0 auto; }

.more-info-accordion {
    margin-top: 5px;
    text-align: center;
}
.more-info-accordion summary {
    cursor: pointer;
    font-weight: 700;
    display: inline-block;
    list-style: none;
    font-size: 1rem;
}
.more-info-accordion summary::-webkit-details-marker { display: none; }
.more-info-accordion summary::after {
    content: " ▼"; font-size: 0.8em;
}
.more-info-accordion[open] summary::after { content: " ▲"; }
.more-info-content { 
    margin-top: 15px; 
    font-size: 0.75rem; 
    padding: 0 15%; 
}

/* --- W-Single --- */
.w-single {
    background: linear-gradient(135deg, rgba(255,192,203,0.3) 0%, rgba(224,255,255,0.3) 100%);
}
.single-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 0 5%;
}
.single-info { 
    flex: 1; 
    max-width: 400px; 
    padding-left: 20px; 
}

.release-date {
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-style: italic; 
}
.track-list {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    font-size: 1.2rem; 
    margin-bottom: 30px;
}
.track-list li {
    display: flex;
    justify-content: flex-start;
    gap: 20px; 
    margin-bottom: 10px;
}
.track-title { min-width: 180px; } 

.btn-buy {
    display: inline-block;
    background-color: #e54c86;
    color: #fff;
    padding: 18px 50px; 
    border-radius: 40px;
    font-weight: 700;
    font-size: 1.1rem; 
    text-align: center;
    transition: opacity 0.3s;
}
.btn-buy:hover { opacity: 0.8; }

.single-img { flex: 1; max-width: 400px; }

/* --- News --- */
.news-list {
    width: 80%;
    margin: 0 auto;
    padding: 0 10%;
}
.news-item {
    display: flex;
    gap: 30px;
    padding: 20px 0;
    border-bottom: 2px dotted #ccc;
    align-items: flex-start;
}
.news-date {
    font-family: 'Fjalla One', sans-serif;
    min-width: 100px;
}
.news-content { flex: 1; }

/* --- Members --- */
.members { background-color: #F3A6C8; }
.members-container { padding: 0 5%; }

.member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
}
.member-card { text-align: center; }
.member-name {
    font-weight: 700;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem); 
    text-align: left;
    margin-bottom: 10px;
    color: #333;
}
.member-img-wrapper {
    /* aspect-ratio: 3 / 4; */
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 15px;
}
.member-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.member-desc {
    font-weight: 700; 
    font-size: clamp(1rem, 1.3vw, 1rem); 
    color: #333;
}

/* --- Contact --- */
.contact-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 0 5%;
}
.contact-logo {
    display: block;
    width: 100%;
    max-width: 400px; 
}
.contact-logo img { 
    width: 100%;
    max-width: 80%; 
    margin: 0 auto;
}
.contact-text { flex: 1; font-size: 1rem; }
.contact-text a { color: #0066cc; text-decoration: underline; }

/* --- Footer --- */
footer {
    background-color: #5a606c;
    color: #fff;
    padding: 40px 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}
.footer-sns {
    display: flex;
    gap: 30px; /* PC: アイコンの間隔をさらに少し開ける */
}
.footer-sns img { width: 30px; height: 30px; }
.copyright { font-size: 0.8rem; margin: 0; }

/* =========================================================
    4. Responsive (Media Queries)
========================================================= */

/* Members: 1000px ～ 1280px は 3列 */
@media (max-width: 1280px) {
    .member-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Members: 769px ～ 999px は 2列 */
@media (max-width: 999px) {
    .member-grid { grid-template-columns: repeat(2, 1fr); }
}

/* SP (768px以下) */
@media (max-width: 768px) {
    .wrapper { border-radius: 0; }
    section { padding: 40px 0; }
    h2.section-title { font-size: 2rem; }

    /* メイン画像：高さを指定して左右をトリミング */
    .main-visual { 
        width: 100%;
        height: 110vw; /* 画面幅の1.1倍の高さ（やや縦長）。数値を変えると切り取り具合が変わります */
        object-fit: cover;
        object-position: center;
    }

   /* PC版の画像上のSNSアイコンは確実に消す */
    .header-sns { display: none !important; }
    
    /* SP版のWANNA-BE横のSNSアイコン */
    .sp-sns {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    .sp-sns img { width: 35px; height: 35px; }

    .wanna-be { padding-top: 25px; }
    
    .wanna-be-heading-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;
        transform: translateX(-10px); 
    }
    .wanna-be-heading-wrapper h2.section-title { margin-bottom: 0; }

    .single-container { flex-direction: column-reverse; text-align: center; }
    .single-info { padding-left: 0; }
    .track-list li { justify-content: center; }
    
    .news-list { width: 100%; padding: 0 5%; }
    .news-item { flex-direction: column; gap: 10px; }
    
    .member-grid { grid-template-columns: 1fr; gap: 40px; }
    /* .member-img-wrapper { aspect-ratio: 4 / 5; } */
    .member-name { text-align: left; }
    
    .contact-container { flex-direction: column; text-align: center; }
    
    /* SP版 Footerレイアウトの修正 */
    .footer-inner {
        flex-direction: column-reverse; /* HTMLの順序（コピーライト→SNS）を反転させSNSを上部に */
        justify-content: center;
        gap: 20px; /* SNSアイコンとコピーライトの縦の間隔 */
        text-align: center;
    }
    .footer-sns {
        justify-content: center;
        gap: 20px; /* SP版でのアイコン同士の間隔 */
        width: 100%;
    }
}