/*
 * page-about-girls-talk.css — 女子トーク ページ固有調整 (暫定)
 * Figma `274:3315` は現時点で空フレーム。
 * 既存コンテンツ (INTERVIEWS 4 + FEATURES 3) をピンクテーマで配信。
 */

.page-about-girls-talk {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 2026-10-19: 他の学校案内ページと揃え、.c-section-box の margin-top 50px と合わせ箱間 80px */
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

/* ピンクテーマ: ヒーロー青パネルをピンクに上書き */
.page-about-girls-talk .c-page-hero__panel {
    background: #d1417a;
}
.page-about-girls-talk .c-page-hero__wordmark-shadow {
    color: #d1417a;
}
.page-about-girls-talk .c-page-hero__en {
    color: #ffd6e3;
}
.page-about-girls-talk .c-breadcrumb {
    background: #a63060;
}
.page-about-girls-talk .c-breadcrumb__sep {
    border-left-color: #ffd6e3;
}

/* 2026-10-19 SP: ヒーローの地 (画像の周り) と床の斜め帯も青→ピンクに揃える
   (旧: パネル部分だけピンクで、上下が青のまま) */
@media screen and (max-width: 768px) {
    .page-about-girls-talk .c-page-hero.c-page-hero {
        background: #d1417a;
    }
    /* 床の斜め帯: 元の青い hero-floor.png を #d1417a に色変換した別画像 (元画像は共通のまま) */
    .page-about-girls-talk .c-page-hero.c-page-hero::before {
        background-image: url('./images/figma-20261002/hero-floor-pink.png?v=1');
    }
}

/* ------------------------------------------------------------------
 * INTERVIEWS 4件
 * ------------------------------------------------------------------ */
.page-about-girls-talk__interview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}
.page-about-girls-talk__interview {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    box-sizing: border-box;
}
.page-about-girls-talk__interview-photo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ytc-bg-section, #d7f2ff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 50%;
    overflow: hidden;
}
.page-about-girls-talk__interview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-about-girls-talk__interview-body {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-about-girls-talk__interview-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.page-about-girls-talk__interview-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #d1417a;
    color: #fff;
    border-radius: 999px;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.page-about-girls-talk__interview-name {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--ytc-text-primary, #000);
}
.page-about-girls-talk__interview-course {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 13px;
    color: var(--ytc-text-secondary, #787878);
}
.page-about-girls-talk__interview-quote {
    margin: 0;
    padding: 12px 16px;
    background: #fff0f5;
    border-left: 3px solid #d1417a;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ytc-text-primary, #000);
}
.page-about-girls-talk__interview-desc {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ytc-text-primary, #000);
}

/* ------------------------------------------------------------------
 * FEATURES 3件
 * ------------------------------------------------------------------ */
.page-about-girls-talk__feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.page-about-girls-talk__feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    box-sizing: border-box;
}
.page-about-girls-talk__feature-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #d1417a;
    color: #fff;
    border-radius: 999px;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
}
.page-about-girls-talk__feature-title {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 18px;
    color: var(--ytc-text-primary, #000);
}
.page-about-girls-talk__feature-desc {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ytc-text-primary, #000);
}

/* ------------------------------------------------------------------
 * SP (<=768px)
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    .page-about-girls-talk { gap: 30px; padding: 20px 0 0; }

    .page-about-girls-talk__interview-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .page-about-girls-talk__interview {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
    }
    /* SP アバター: 円形 120x120 固定 (旧 100%×160px の楕円崩れ修正 2026-10-13 Batch B v2 P1) */
    .page-about-girls-talk__interview-photo {
        width: 120px;
        height: 120px;
        align-self: center;
    }
    /* 2026-10-19 SP バグ修正: 本文ブロックが flex:1 0 0 のまま縦並びで高さ 0 に潰れ、
       名前・コメント・本文がすべて見えていなかった */
    .page-about-girls-talk__interview-body {
        flex: none;
        width: 100%;
    }

    .page-about-girls-talk__feature-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}