/*
 * page-tuition-installment.css — 分納制度 ページ固有調整
 * 共通: page-tuition.css + figma-components.css
 */

.page-tuition-installment__about-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
}

.page-tuition-installment__example {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
}
.page-tuition-installment__example th,
.page-tuition-installment__example td {
    padding: 14px 20px;
    border: 1px solid #d9d9d9;
    text-align: left;
    font-size: 15px;
}
.page-tuition-installment__example th {
    background: var(--ytc-bg-section, #d7f2ff);
    font-weight: 700;
}
.page-tuition-installment__example td {
    background: #fff;
}
.page-tuition-installment__note {
    margin: 15px 0 0;
    width: 100%;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 13px;
    color: var(--ytc-text-secondary, #787878);
    line-height: 1.6;
}

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

@media screen and (max-width: 768px) {
    .page-tuition-installment__example { font-size: 13px; }
    .page-tuition-installment__example th,
    .page-tuition-installment__example td { padding: 10px; font-size: 13px; }
}

/* ============================================================================
 * EXAMPLE 支払い例 2テーブル横並び (Figma 準拠 2026-10-08)
 * ========================================================================== */
.page-tuition-installment__example-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}
.page-tuition-installment__example-col {
    min-width: 0;
}
.page-tuition-installment__example-year {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #fff4c3;
    border-radius: 8px;
    text-align: center;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--ytc-text-primary, #000);
}
.page-tuition-installment__example {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 12px;
}
.page-tuition-installment__example th,
.page-tuition-installment__example td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}
.page-tuition-installment__example th { background: #eaf6ff; font-weight: 700; }
.page-tuition-installment__example .t-right { text-align: right; }
.page-tuition-installment__example tr.is-total td {
    background: #d7f2ff;
    font-weight: 700;
}
.page-tuition-installment__example tr:last-child td { border-bottom: none; }

@media screen and (max-width: 768px) {
    .page-tuition-installment__example-wrap { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   2026-10-19 Figma 準拠レイアウト調整 (学費分納制度 pc/sp)
   ========================================================================== */
.page-tuition.page-tuition-installment { gap: 30px; }
/* 2026-10-19 [common] 共通 .c-section-box がリード付き見出しで上 150 (Figma) になったので削除 */

/* ABOUT 本文カード: pad 20, 見出し 24px → 本文 15px/24px (gap 10) */
.page-tuition-installment .page-tuition-installment__about-grid .c-text-card.c-text-card {
    gap: 10px;
    padding: 20px;
}
.page-tuition-installment .page-tuition-installment__about-grid .c-text-card__title.c-text-card__title {
    font-size: 24px;
    line-height: 1.2;
}
.page-tuition-installment .page-tuition-installment__about-grid .c-text-card__body.c-text-card__body {
    font-size: 15px;
    line-height: 1.6;
}
.page-tuition-installment .page-tuition-installment__about .page-tuition-installment__note {
    font-size: 14px;
    color: var(--ytc-text-primary, #000);
}

/* HOW TO: Figma = STEP カード 3 列横並び + 間に 16px の点線 (高校生ページ NEXT STEP と同じ) */
/* 2026-10-19 [common] 共通 .c-section-box が Figma 値 (110/40/40・リード付き150・gap30) になったので削除 */
.page-tuition-installment .page-tuition-installment__howto.page-tuition-installment__howto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-tuition-installment .page-tuition-installment__howto > .c-step-row.c-step-row {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 20px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
}
.page-tuition-installment .page-tuition-installment__howto > .c-step-row:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    left: auto;
    right: -27px;
    top: 50%;
    bottom: auto;
    width: 16px;
    height: 0;
    border: 0;
    border-top: 1px dashed var(--ytc-border-strong, #39364e);
    transform: none;
}
.page-tuition-installment .page-tuition-installment__howto .c-step-row__no.c-step-row__no {
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--ytc-bg-brand, #439fff);
}
.page-tuition-installment .page-tuition-installment__howto .c-step-row__body.c-step-row__body {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.page-tuition-installment .page-tuition-installment__howto .c-step-row__title.c-step-row__title { font-size: 20px; line-height: 1.5; }
.page-tuition-installment .page-tuition-installment__howto .c-step-row__desc.c-step-row__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ytc-text-secondary, #787878);
}

@media screen and (max-width: 768px) {
    .page-tuition.page-tuition-installment { gap: 0; }
    .page-tuition-installment .c-section-box.c-section-box.page-tuition-installment__about { padding-top: 30px; }
    .page-tuition-installment .page-tuition-installment__about-grid .c-text-card.c-text-card { padding: 16px; }
    .page-tuition-installment .page-tuition-installment__about-grid .c-text-card__title.c-text-card__title { font-size: 18px; line-height: 1.5; }
    .page-tuition-installment .page-tuition-installment__about-grid .c-text-card__body.c-text-card__body { font-size: 14px; }
    .page-tuition-installment .c-section-box.c-section-box--success { padding: 30px 20px; }
    .page-tuition-installment .page-tuition-installment__howto.page-tuition-installment__howto {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .page-tuition-installment .page-tuition-installment__howto > .c-step-row.c-step-row {
        gap: 6px;
        padding: 14px 16px 16px;
        border-radius: 5px;
    }
    .page-tuition-installment .page-tuition-installment__howto > .c-step-row:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -22px;
        width: 0;
        height: 16px;
        border-top: 0;
        border-left: 1px dashed var(--ytc-border-strong, #39364e);
    }
    .page-tuition-installment .page-tuition-installment__howto .c-step-row__no.c-step-row__no { font-size: 11px; }
    .page-tuition-installment .page-tuition-installment__howto .c-step-row__desc.c-step-row__desc { font-size: 14px; }
}

@media screen and (max-width: 768px) {
    /* SP の STEP カードは左寄せ (Figma SP) */
    .page-tuition-installment .page-tuition-installment__howto > .c-step-row.c-step-row,
    .page-tuition-installment .page-tuition-installment__howto .c-step-row__body.c-step-row__body { align-items: flex-start; text-align: left; }
    .page-tuition-installment .page-tuition-installment__howto .c-step-row__title.c-step-row__title,
    .page-tuition-installment .page-tuition-installment__howto .c-step-row__desc.c-step-row__desc { text-align: left; }
}
@media screen and (max-width: 768px) {
    /* SP: ABOUT / EXAMPLE は箱なし (Figma SP) */
    .page-tuition-installment .c-section-box.c-section-box.page-tuition-installment__about,
    .page-tuition-installment .c-section-box.c-section-box:has(.page-tuition-installment__years) {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 30px 5px 0;
        margin-top: 0;
    }
}