/* ----------現地の声---------- */

.illust-pc4 {
    display: none;
}

.illust-sp4 {
    position: absolute;
    margin-top: 1.2rem;
    margin-right: 1rem;
    display: flex;
    justify-content: flex-end;
    width: 100%; /* 親要素をページ幅に広げる */
}

.illust-sp4 img {
    width: auto;
}

.illust-sp5 {
    position: absolute; /* 必要であればそのまま残す */
    right: 0; /* 要素全体を右端に固定 */
    margin-top: -4rem;
    display: flex;
    justify-content: flex-end; /* 子要素を右寄せ */
    width: 100%; /* 親要素幅を確保 */
}

.right1, .right2, .left1, .left2 {
    padding: 0;
    margin: 0; /* 不要な余白を削除 */
}

.left1 {
    margin-top: -2rem;
}

.localVoices-background1,
.localVoices-background2,
.localVoices-background3,
.localVoices-background4 {
    display: none;
}

.web-main-teacher {
    display: none;
}

.mobile-main-teacher {
    display: block;
}

.localVoices-main {
    width: 100%;
}

.localVoices-main h1 {
    text-align: center;
    font-size: 1.5rem;
    margin: 2rem;
}

.background-blue1 {
    background-color: #418dff;
    padding: 2rem;
    margin: 1rem;
}

.background-blue2 {
    background-color: rgba(65, 141, 254, .7);
    padding: 2rem;
    margin: 1rem;
}

.background-blue3 {
    background-color: rgba(65, 141, 254, .5);
    padding: 2rem;
    margin: 1rem;
}

.background-blue4 {
    background-color: rgba(65, 141, 254, .3);
    padding: 2rem;
    margin: .5rem 1rem;
}

.illust-sp2 img {
    margin-bottom: -2.5rem;
    margin-left: 1.5rem;
}

.mobile-2content {
    background-color: #418dff;
    margin: 2.5rem 1rem;
}

.mobile-2content h2 {
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

.text-center3 p {
    color: #2b2b2b;
    padding: 1rem;
}

.teacher-container-sp {
    display: flex; /* 横並びに配置 */
    align-items: center; /* 縦方向の中央揃え */
    gap: 20px; /* 要素間の余白 */
    padding: 0 2rem 1rem;
}

.teacher-photo-sp img {
    width: 80px; /* 写真の幅 */
    height: auto; /* 縦横比を維持 */
}

.teacher-info-sp {
    font-size: 1em; /* テキストサイズ */
    line-height: 1.5; /* 行間 */
}

.teacher-info-sp h3 {
    color: #fff;
    font-size: 1.3rem;
}

.teacher-info-sp p {
    font-size: .7rem;
}

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

    /* ----------現地の声---------- */

    .header-bar-pc {
        display: block;
        width: 100%;
    }
    
    .header-bar {
        display: none;
    }

    .illust-sp2 {
        display: none;
    }

    .illust-pc4 {
        display: block;
    }

    .illust-sp4 {
        display: none;
    }

    .illust-sp5 {
        display: none;
    }

    .position-right {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .position-right img {
        margin-top: 3.5rem;
    }

    .localVoices-main h1 {
        margin: 3rem auto;
    }

    .background-pc {
        display: block;
    }

    .background-text-pc p {
        display: block;
    }

    .web-main-teacher {
        display: block;
    }

    .left1 p,
    .right1 p,
    .left2 p,
    .right2 p{
        text-align: center;
        padding: 1rem auto;
    }

    .localVoices-background1 img,
    .localVoices-background2 img,
    .localVoices-background3 img,
    .localVoices-background4 img {
        margin-bottom: -6rem;
    }

    .left1 {
        margin-top: -4rem;
    }

    .right1, .right2 {
        margin-left: auto; /* 左側の余白を自動で埋める */
        margin-right: 0; /* 右側の余白をゼロに設定 */
        text-align: right; /* テキストも右寄せ */
    }

    .right1 img,
    .right2 img {
        display: flex;
        justify-content: flex-start;
    }
    
    .mobile-main-teacher {
        display: none !important;
    }

    .background-pc {
        position: relative; /* 子要素の基準位置を設定 */
        width: 100%; /* 必要に応じてサイズを調整 */
        display: inline-block; /* 他の要素と共存可能 */
    }
    
    .web-2content {
        background-color: #418dff;
        margin: 3rem;
    }

    .web-2content h2 {
        font-size: 2rem;
        color: #fff;
        text-align: center;
        padding: 1.5rem 0;
    }

    .text-center4 {
        padding: 1.5rem 2rem;
    }

    .teacher-container-pc {
        display: flex; /* 横並びに配置 */
        align-items: center; /* 縦方向の中央揃え */
        gap: 20px; /* 要素間の余白 */
        justify-content: flex-end;
        padding: 1.5rem;
    }
    
    .teacher-photo-pc img {
        height: auto; /* 縦横比を維持 */
    }
    
    .teacher-info-pc {
        font-size: 1em; /* テキストサイズ */
        line-height: 1.5; /* 行間 */
    }

    .teacher-info-pc h3 {
        color: #fff;
        font-size: 2rem;
    }

    .localVoices-background1,
    .localVoices-background2,
    .localVoices-background3,
    .localVoices-background4 {
        display: block;
        width: 90%;
    }

    .illust-pc4 {
        position: absolute;
        margin-top: -8rem;
    }
}