@charset "UTF-8";

/* ABOUT */
.about-container1 {
    display: inline-flex;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.about-title{
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
}

.about-txt{
    line-height: 1.8rem;
}

.about-container2{
    display: flex;
    padding-top: 90px;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url(../img/about.JPG);
    background-size: cover;      /* 画像を枠いっぱいに広げる */
    background-position: center; /* 中央を表示 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
}

.gradient-white{
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: linear-gradient(359deg, rgba(255, 252, 248, 0.90) 0.98%, rgba(255, 255, 255, 0.90) 39.2%, rgba(255, 255, 255, 0.72) 84.01%, rgba(255, 255, 255, 0.00) 99.11%);
    border-radius: 4px;
    gap: 15px;
    padding: 60px 0 60px 28px;
}
.about-subtitle{
    color: var(--primary-orange);
    font-size: 1.8rem;
    font-weight: 600;
}

.line{
    width: 68px;
    height: 1px;
    background-color: var(--primary-orange);
}

.about-list{
    display: flex;
    padding-bottom: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.about-item{
    line-height: 1.3  !important;     /* 反映されない*/
    position: relative;
    /* 背景色を白にする */
    background-color: var(--primary-white);
    /* レイアウト設定 */
    display: flex;
    align-items: center;
    /* 重要：左側にアイコン＋余白分のスペースを確保 */
    padding: 6px 6px 6px 40px; 
    margin-bottom: 8px; /* 項目ごとの隙間 */
    border-radius: 2px; /* 少し角を丸くすると上品です */
}

.about-item::before {
    content: "";
    position: absolute;
    /* 箱の左端から12pxの位置に配置（背景色の上に乗る） */
    left: 12px; 
    top: 50%;
    transform: translateY(-50%);
    /* 画像の設定 */
    width: 15px;
    height: 15px;
    background-image: url("../img/check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (min-width: 768px) {
    .about-container1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about-title{
        text-align: center;
        font-size: 2.4rem;
    }

    .spBr{
        display: none;
    }

    .about-txt{
        text-align: center;
    }

    .about-container2 {
        display: flex;
        /* 横並びにして、中身を右端（flex-end）に寄せる */
        flex-direction: row;
        justify-content: flex-end; 
        align-items: center; /* 上下中央に配置 */   
        padding: 0; /* スマホ用の上下パディングをリセット */
        background-image: url(../img/about.JPG);
        background-size: 100%;
        background-position: top; /* 中央を表示 */
        background-repeat: no-repeat; /* 繰り返しを防ぐ */
    }

    .gradient-white {
        /* 横幅を制限して、右側だけに箱がある状態にする */
        width: 45%; 
        max-width: 550px;
        /* スマホ用の左パディングなどをPC用に調整 */
        padding: 80px 60px;
        box-sizing: border-box; /* パディングを含めた幅計算 */
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.90) 0.02%, rgba(255, 255, 255, 0.90) 39.55%, rgba(255, 255, 255, 0.90) 72%, rgba(255, 255, 255, 0.00) 99.98%);
    }
}

.message{
    display: flex;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--gradient-orange);
}

.message img{
    width: 100%;
    max-width: 200px;
    height: 250px; /* ★トリミング後の「高さ」を指定します。好きな数値でOK */
    object-fit: cover; /* 画像を枠いっぱいに広げて、はみ出しをカット */
    object-position: center top; /* もし顔が上にあるなら、上基準で合わせる */
}
.teacher-name{
    font-size: 1.6rem;
    font-weight: 600;
}

.message-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.message1, .message2, .message3, .message4{
    line-height: 1.8;
}

@media screen and (min-width: 768px) {

.message{
    padding: 60px 24px;
}

.message img{ 
    width: 100%;
    max-width: 380px;
    height: 350px; /* ★トリミング後の「高さ」を指定します。好きな数値でOK */
    object-fit: cover;
    object-position: center center;
    
    }

.teacher-name{
    font-size: 2rem;
    }

.message1, .message2 ,.message3 ,.message4{
    font-size: 1.8rem;

    }
}