/* 白文字部分のスタイル */

.course-top-content .text-content {
    max-width: 100%;
}

.course-top-content .small-text {
    font-size: 14px;
    margin-bottom: 10px;
}

.course-top-content .large-text {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0;
}


/* リストのスタイル */

.course-top-content .course-top-list {
    font-size: 0.7em;
    list-style: none;
    padding-left: 0;
}

.course-top-content .course-top-list li {
    margin-bottom: 5px;
}


/* 右上の「＃０１」スタイル */

.course-top-content .course-top-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
}


/* スマホ表示用のスタイル */

@media screen and (max-width: 600px) {
    /* course-top-sectionの余白を小さく */
    .course-top-section {
        padding: 20px 10px;
    }
    /* course-top-contentのスタイルを修正 */
    .course-top-content {
        aspect-ratio: 1 / 1;
        /* 正方形に近い比率にする */
        padding: 20px;
    }
    /* 数字の位置調整 */
    .course-top-content .course-top-number {
        font-size: 36px;
        /* フォントサイズを縮小 */
        top: 10px;
        /* 上部からの距離を調整 */
        right: 10px;
        /* 右側からの距離を調整 */
    }
    /* text-contentのマージンを調整 */
    .course-top-content .text-content {
        margin-top: 50px;
        /* 数字とコンテンツが重ならないように余白を追加 */
    }
}