/* 講師紹介セクションのスタイル */

.instructor-section {
    margin-top: 250px;
}

.instructor-contents {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #BD0013;
    margin-bottom: 20px;
}


/* 画像ブロックのスタイル */

.instructor-contents .image-block {
    width: 45%;
}

.instructor-contents .image-block img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* 詳細ブロックのスタイル */

.instructor-contents .details-block {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 左上揃えにする */
    gap: 20px;
}


/* 役職のスタイル */

.instructor-contents .position {
    background-color: #BD0013;
    color: white;
    border-radius: 5px;
    font-size: 16px;
    max-width: fit-content;
    padding: 3px 20px;
}


/* キャッチコピーのスタイル */

.instructor-contents .catchphrase {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}


/* 名前のスタイル */

.instructor-contents .name {
    font-size: 32px;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: left;
}

.instructor-contents .name-kanji {
    font-size: 28px;
    font-weight: bold;
}

.instructor-contents .name-english {
    font-size: 24px;
    color: #555;
}


/* 自己紹介文のスタイル */

.instructor-contents .bio {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}


/*1200px以下の場合*/

@media (max-width: 1200px) {
    /*文字サイズの調整*/
    .instructor-contents .catchphrase {
        font-size: 24px;
    }
    .instructor-contents .name {
        font-size: 28px;
    }
    .instructor-contents .name-kanji {
        font-size: 24px;
    }
    .instructor-contents .name-english {
        font-size: 20px;
    }
    .instructor-contents .bio {
        font-size: 16px;
    }
}


/* レスポンシブ対応: 画面が小さい場合は縦に並べる */

@media (max-width: 768px) {

.instructor-section {
    margin-top: 20px;
}
    .details-block {
        margin: 25px 0;
    }
    .instructor-contents {
        flex-direction: column;
        text-align: left;
    }
    .instructor-contents .image-block,
    .instructor-contents .details-block {
        width: 100%;
    }
    .instructor-contents .details-block {
        align-items: left;
        /* 小さい画面では中央揃えに */
    }
    .instructor-contents .name {
        flex-direction: column;
        align-items: left;
    }
}