.memberSection {
    background-color: var(--background-color-lightgrey);
    padding: 80px 5% 64px;
}

.memberSection .accordion {
    margin-top: 96px;
}

.memberSection .accordion--titleBox {
    background-color: var(--primary-bland-color);
    padding-top: 24px;
    padding-left: 340px;
    padding-bottom: 48px;
    position: relative;
}

.memberSection .accordion--img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.memberSection .accordion--titleBox::after {
    background-image: url(/img/icon_line-triangle-bottom.png);
    width: 32px;
    height: 32px;
}

.memberSection .accordion--class {
    display: inline-block;
    color: var(--white);
    font-size: 1.8rem;
    font-weight: bold;
    background-color: var(--secondary-bland-color);
    padding: 8px 12px;
}

.memberSection .accordion--name {
    margin-top: 16px;
    font-size: 3rem;
    color: var(--font-color-black);
}

.memberSection .accordion--name-en {
    color: var(--font-color-grey);
    font-size: 1.8rem;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .memberSection {
        padding-top: 40px;
    }

    .memberSection .accordion {
        margin-top: 64px;
    }

    .memberSection .accordion--titleBox {
        padding-top: 24px;
        padding-left: 300px;
    }

    .memberSection .accordion--img {
        width: 300px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .memberSection {
        padding-top: 32px;
    }

    .memberSection .accordion {
        margin-top: 48px;
    }
    
    .memberSection .accordion--titleBox {
        padding: 8px 8px 9px 100px;
    }

    .memberSection .accordion--img {
        width: 100px;
    }

    .memberSection .accordion--class {
        font-size: 1rem;
    }
    
    .memberSection .accordion--name {
        margin-top: 8px;
        font-size: 1.6rem;
        color: var(--font-color-black);
    }
    
    .memberSection .accordion--name-en {
        font-size: 1rem;
    }

    .memberSection .accordion--titleBox::after {
        /* right: 32px; */
        width: 24px;
        height: 24px;
    }
}

.memberSection .accordion--body .profile {
    background-color: var(--white);
    padding: 24px 48px;
}

.memberSection .accordion--body .profile .flex-col2 {
    margin-top: 24px;
}

.memberSection .accordion--body .profile .content--title {
    background-color: var(--white);
    font-size: 1.6rem;
}

.memberSection .accordion--body .profile .horizontalTable--header {
    /* min-width: 200px; */
    color: var(--secondary-bland-color);
    background-color: var(--white);
    border-bottom: 0;
}

.memberSection .accordion--body .profile .horizontalTable--text {
    border-bottom: 0;
    line-height: 1.5;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .memberSection .accordion--body .profile .flex-col2 {
        flex-direction: column;
    }

    .memberSection .accordion--body .profile .horizontalTable--header {
        min-width: 250px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .memberSection .accordion--body .profile {
        padding: 24px 16px;
    }

    .memberSection .accordion--body .profile .horizontalTable--body {
        display: block;
    }

    .memberSection .accordion--body .profile .horizontalTable--bodyRow {
        display: block;
    }
    
    .memberSection .accordion--body .profile .horizontalTable--header {
        min-width: 0;
    }

}

.memberSection .photo .grid-col2 {
    gap: 0;
}

.memberSection .memberMessage {
    background-color: var(--secondary-bland-color);
    padding: 64px 64px 40px;
}

.memberSection .memberMessage .content--titleBox {
    transform: skewX(-25deg);
    border: 2px solid var(--white);
    padding: 16px 24px;
    width: calc(100% - 15px - 15px);
    max-width: 440px;
    margin: 0 auto;
    justify-content: center;
}

.memberSection .memberMessage .content--title {
    transform: skewX(25deg);
    color: var(--white);
}

.memberSection .memberMessage .content--textBox {
    margin-top: 40px;
}

.memberSection .memberMessage .content--text {
    color: var(--white);
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 2rem;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .memberSection .memberMessage {
        padding: 32px;
    }

    .memberSection .memberMessage .content--textBox {
        margin-top: 24px;
    }

    .memberSection .memberMessage .content--titleBox {
        width: calc(100% - 50px);
    }
}

.factory {
    background-color: var(--background-color-lightgrey);
    padding: 88px 5% 56px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .factory {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}