body {
    counter-reset: section-counter;
}

.wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.wrapper-min {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}



.course-wrap {
    width: 72%;
    max-width: 1037px;
    margin: 0 auto;
}

@media (max-width: 1000px) {
    .course-wrap {
        width: 80%;
        max-width: 1000px;
        margin: 0 auto;
    }
}



.sub-title1 {
    font-weight: bold;
}

/* セクションタイトル */
.title {
    font-size: 34px;
    font-weight: bold;
    /* レビュー追加：最初に追加 */
    line-height: 1.3;
    display: flex;
    align-items: center;
    counter-increment: section-counter;
    color: #333333;
}

.small-title,
.sub-title {
    font-size: 24px;
}



.title::before {
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    content: counter(section-counter, decimal-leading-zero);
    color: #fff;
    border-radius: 50%;
    background: #2ebbd3;
}

.course-inner {
    display: block;
    width: 94%;
    margin-left: 8%;

}

.course-section03 {
    margin-bottom: 180px;
}

.contact_section {
    height: 500px;
}

.sub-title::before {
    content: "#";
    color: #2ebbd3;
    font-size: 1.2em;
    margin-right: 0.3em;
    font-weight: bold;
}


/* フォントの調整 */
.sub-title {
    font-size: 24px;
    font-weight: bold;
}

.course-hour-title {
    font-size: 18px;
}

.course-inner-text,
.introduction-caption {
    font-size: 20px;
}

.course-hour-text {
    font-size: 16px;
}

.caption {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}


.introduction-caption1,
.introduction-caption2 {
    display: block;
    color: #fff;
    font-weight: bold;
    background-color: #2ebbd3;
}

.introduction-caption1 {
    padding: 17px 0px 17px 8%;
}

.introduction-caption2 {
    padding: 26px 0px 31px 8%;
}

.course-photo {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* セクショ1左上円の調整 */

.introduction-image {
    position: relative;
    display: inline-block;
    transition: transform 0.5s ease;
}


.introduction-image:hover {
    transform: scale(1.02);
}


.image-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: #2ebbd3;
    color: #fff;
    width: 61px;
    height: 61px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.introduction-caption1,
.introduction-caption2 {
    position: relative;
}

/* セクショ1右下円と矢印の調整 */



.arrow-circle {
    position: absolute;
    top: 50%;
    right: 23px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #2ebbd3;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}



/* 矢印の本体（横線） */
.arrow-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #2ebbd3;
    transform: translate(-50%, -50%);
}

/* 羽（上） */
.arrow-circle::after {
    content: "";
    position: absolute;
    left: 56%;
    width: 6px;
    height: 2px;
    background-color: #2ebbd3;
    transform: translate(-50%, -50%) rotate(45deg);
    top: 42%;
}

/* 羽（下） */
.feather-bottom {
    position: absolute;
    top: 58%;
    left: 56%;
    width: 6px;
    height: 2px;
    background-color: #2ebbd3;
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
}




.course-hour-box {
    background-color: rgba(46, 187, 211, 0.2);
    padding: 16px 30px;
}

.introduction-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 330px;
    gap: 50px;
}

@media (max-width: 1000px) {

    .introduction-inner,
    .course-image-box {
        flex-direction: column;
    }
}


.lead {
    display: inline-block;
    padding: 8px 0px;
    border: 1px solid #333333;
    border-radius: 10px;
    margin-left: 30px;
    min-width: 100px;
    text-align: center;
}

.course-name01,
.course-name02,
.course-name03 {
    display: flex;
    align-items: center;
}

.course-name01 {
    margin-top: 200px;
    margin-bottom: 45px;
}

.course-name02 {
    margin-top: 135px;
    margin-bottom: 40px;
}

.course-name03 {
    margin-top: 126px;
    margin-bottom: 40px;
}


@media (max-width: 1000px) {

    .course-image img {
        display: block;
        margin: 0 auto;
    }
}


/* セクション01,02の画像ヨコ並び */

.course-image-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.course-image-box {
    display: flex;
    justify-content: center;
    gap: 53px;
    margin-top: 110px;
    margin-bottom: 30px;
}






@media (max-width: 1200px) {
    .title {
        font-size: 26px;
    }

    .small-title,
    .sub-title {
        font-size: 18px;
    }


}



@media (max-width: 570px) {
    .title {
        flex-direction: column;
        gap: 20px;
    }
}

.course-text {
    margin-bottom: 30px;
}

@media (max-width: 570px) {

    .course-inner {
        align-items: center;
        flex-direction: column;
    }

    .course-text {
        width: 100%;
        text-align: left;
    }

}

/* 合格実績の背景色 */
.achievement-inner {
    padding: 30px;
    border-radius: 20px;
    background-color: #2ebbd333;
}

/* 合格実績の横並び */
.achievement-inner {
    display: flex;
    flex-wrap: wrap;

    gap: 2rem;
    /* ブロック間の余白 */
}

.achievement-inner>div {
    flex: 1;
    min-width: 300px;
    /* モバイル対応用 */
}

.hair-text {
    margin-bottom: 20px;
}