/*
 * page-tuition.css — 学費サポートTOP ページ固有調整
 * 共通パーツ: c-page-hero / c-section-box / c-section-heading-sub / c-text-card / c-faq
 * ここでは SUPPORT 4ハブカード と FAQ 列挙のみ。
 */

.page-tuition {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

.page-tuition__hub-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}
.page-tuition__hub-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
    text-align: center;
}
.page-tuition__hub-card:hover {
    transform: translateY(-2px);
    color: inherit;
}

/* SUPPORT ハブカード: タイトル青 24px センター, 本文センター (Figma 849:13837 準拠) */
.page-tuition__hub-card.c-text-card .c-text-card__title {
    font-size: 24px;
    color: var(--ytc-text-link, #439fff);
    text-align: center;
}
.page-tuition__hub-card.c-text-card .c-text-card__body {
    text-align: center;
}
.page-tuition__hub-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--ytc-bg-brand, #439fff);
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 14px;
}
/* CTA の › 文字を SVG 風の矢印に見せる (parts-arrow-right 相当) */
.page-tuition__hub-cta span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.page-tuition__faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .page-tuition { gap: 30px; padding: 20px 0 0; }
    .page-tuition__hub-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   2026-10-19 Figma 準拠レイアウト調整 (07_学費サポート pc/sp)
   ========================================================================== */
/* セクション間: Figma は箱と箱の間 80px (= gap 30 + c-section-box margin-top 50) */
.page-tuition:has(> .page-tuition__support) { gap: 30px; }

/* SUPPORT カード: Info Card / PC = pad 20, text gap 10, text→リンク 20 */
.page-tuition .c-text-card.c-text-card.page-tuition__hub-card {
    gap: 20px;
    padding: 20px;
    justify-content: flex-start;
}
.page-tuition .page-tuition__hub-card.c-text-card .c-text-card__title {
    font-size: 24px;
    line-height: 1.5;
}
.page-tuition .page-tuition__hub-card.c-text-card .c-text-card__body {
    margin-top: -10px; /* title→sub は 10px */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
/* 詳しくみる: アイコン(12px 青丸) を文字の左に */
.page-tuition .page-tuition__hub-cta {
    flex-direction: row-reverse;
    margin-top: auto;
    padding-top: 0;
    font-size: 14px;
    line-height: 1;
}
.page-tuition .page-tuition__hub-cta span[aria-hidden] {
    width: 12px;
    height: 12px;
    font-size: 9px;
}

/* FAQ: PC は濃水色 (#6bd0ff) の箱、項目間 20px */
.page-tuition .c-section-box.c-section-box.page-tuition__faq {
    background: var(--ytc-bg-brand-soft, #6bd0ff);
}
.page-tuition .page-tuition__faq-list { gap: 20px; }

@media screen and (max-width: 768px) {
    .page-tuition:has(> .page-tuition__support) { gap: 0; }
    /* SP: SUPPORT は箱なし (カードを直接並べる)、カード間 20px */
    .page-tuition .c-section-box.c-section-box.page-tuition__support {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 30px 5px;
        margin-top: 0;
    }
    .page-tuition .page-tuition__hub-grid { gap: 20px; }
    .page-tuition .c-text-card.c-text-card.page-tuition__hub-card {
        gap: 15px;
        padding: 16px;
        border-radius: 5px;
        text-align: left;
    }
    .page-tuition .page-tuition__hub-card.c-text-card .c-text-card__title {
        font-size: 20px;
        text-align: left;
    }
    .page-tuition .page-tuition__hub-card.c-text-card .c-text-card__body {
        margin-top: -9px; /* 6px */
        font-size: 18px;
        text-align: left;
    }
    .page-tuition .page-tuition__hub-cta { align-self: flex-end; }
    /* SP: FAQ は薄水色 (#d7f2ff) の箱 */
    .page-tuition .c-section-box.c-section-box.page-tuition__faq {
        background: var(--ytc-bg-section, #d7f2ff);
        margin-top: 30px;
        border-radius: 10px;
    }
}