/* ----------講座紹介---------- */

.course-main {
    margin: 0 1rem;
    display: flex;
    flex-direction: column; /* 縦方向の配置 */
    align-items: center; /* 子要素を中央揃えに */
}

.illust-pc2 {
    display: none;
}

.illust-sp2 {
    display: block; /* 必要なら `block` に変更 */
}

.course-main h1 {
    text-align: center !important;
    font-size: 1.5rem;
    margin: 1.3rem 0;
}

.font-small {
    margin: .5rem 0;
}

.course-main h2 {
    text-align: center;
}

.text-center2 {
    text-align: center;
}

.main-container {
    text-align: center;
}

.main-flex {
    margin: 1rem auto;
}

.main-flex p {
    text-align: left;
}

.back-rectangle {
    background-color: #418dff;
    color: #fff;
    padding: 1rem;
    margin-right: 1rem;
    margin-bottom: 1.3rem;
}

.text-sp1 h1 {
    display: flex; /* 受講料と料金を横並びに */
    align-items: center; /* 縦方向の中央揃え */
    gap: 1rem; /* 受講料と料金の間にスペース */
}

.price-container {
    display: flex;
    flex-direction: column; /* 料金の部分を縦に並べる */
    align-items: flex-start; /* 左揃え（中央揃えならcenterに変更） */
    margin-bottom: 1.3rem;
}

.price {
    font-size: 1.5rem; /* 金額のフォントサイズ */
    font-weight: bold; /* 強調 */
    color: #2b2b2b;
}

.price-note {
    font-size: 1rem; /* （テキスト代込）のフォントサイズ */
    color: #2b2b2b;
}

.main-flex h2,
.main-flex h3,
.main-flex p {
    margin: .3rem auto;
}

/*----------デスクトップ----------*/
@media (min-width:800px) {

    /* ----------講座紹介---------- */

    .illust-pc2 {
        display: block;
    }

    .illust-sp2 {
        display: none;
    }

    .main-container {
        display: flex; /* 横並びにする */
        gap: 1rem; /* 隙間を追加 */
        justify-content: space-between; /* 均等に配置 */
        align-items: flex-start; /* 上揃え */
    }

    .main-flex {
        display: flex;
        flex-direction: column; /* 縦に並べる */
        flex: 1; /* 各要素を均等に広げる */
        padding: 2rem;
        box-sizing: border-box;
        text-align: center;
        margin: 1.5rem auto;
    }

    .main-flex p {
        text-align: left;
    }

    .font-small {
        margin: .7rem auto;
    }

    .course-main h1 {
        margin: 2rem auto;
    }

    .tuitionFee {
        margin-top: -2rem;
        margin-bottom: 1rem;
    }
}