/* ¥¤¥ó¥¿¥Ó¥å©`¼¯ Ò»ÓE */
#mainCompartment {
    & .listEyeCatchSection {
        position: relative;
        background-color: #fee700;
        background-image: url(https://www.kanazawa-it.ac.jp/tokyo/t1s/images/contents/im/interview_list_eyecatch_base.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        @media screen and (max-width: 767px) {
            background-size: 689px auto;
            background-position: 50% 0;
            height: auto;
        }

        & .listEyeCatchSectionTitle {
            text-align: center;
            height: 210px;
            position: relative;
            @media screen and (max-width: 767px) {
                height: 108px;
            }
            & .enSubTitle {
                color: #fff;
                font-size: 54px;
                text-align: center;
                line-height: 1.4;
                /*font-family: 'Cinzel',serif;*/
                position: absolute;
                top: 36px;
                left: 0;
                right: 0;
                z-index: 1;
                & .word:nth-child(1) {
                    letter-spacing: 0.19em;
                }
                & .word:nth-child(3) {
                    display: inline-block;
                    letter-spacing: 0.145em;
                    padding-left: 4px;
                }
                @media screen and (max-width: 767px) {
                    font-size: 29px;
                    top: 13px;
                }
            }
        }
        & .listEyeCatchSectionContent {
            padding: 0 20px;
            @media screen and (max-width: 767px) {
                padding: 0 15px;
            }
        }
        & .listEyeCatchSectionSignature {
            text-align: right;
            /*font-family: 'Yuji Syuku', serif;*/
            font-size: 17px;
            right: 0;
            padding: 30px 20px 35px;
            letter-spacing: 0.04em;
            @media screen and (max-width: 767px) {
                padding: 0 15px 30px;
                font-size: 14px;
                bottom: 20px;
            }
        }
    }
    & .teachersSection {
        @media (width <= 767px) {
            padding-bottom: 20px;
        }
        & .teachers {
            & .teacher {
                margin-top: 20px;
                display: flex;
                text-decoration: none;
                color: inherit;
                @media screen and (max-width: 767px) {
                    border-top: 1px dotted #e3e3e3;
                    padding-top: 10px;
                    margin-top: 10px;
                }
                & .imageCell {
                    margin: 0;
                    position: relative;
                    & img {
                        @media screen and (max-width: 767px) {
                            width: 100px;
                            height: auto;
                        }
                    }
                    & figcaption {
                        position: absolute;
                        top: 16px;
                        left: 10px;
                        color: #fff;
                        font-family: 'Suranna', serif;
                        font-size: 13px;
                        letter-spacing: 0.11em;
                        writing-mode: vertical-rl;
                        line-height: 1;
                        @media screen and (max-width: 767px) {
                            font-size: 10px;
                            top: 8px;
                            left: 4px;
                            letter-spacing: 0.01em;
                        }
                    }
                }
                & .textCell {
                    flex-grow: 2;
                    padding-left: 23px;
                    display: flex;
                    align-items: center;
                    @media screen and (max-width: 767px) {
                        padding-left: 10px;
                    }
                    & .textCellInner {
                        width: 100%;
                        & .name {
                            padding-bottom: 17px;
                            border-bottom: 1px solid #b4281c;
                            background-image: url(https://www.kanazawa-it.ac.jp/tokyo/t1s/images/common/icons_bullets/arrow_black_r.png);
                            background-repeat: no-repeat;
                            background-position: right 20px top 6px;
                            @media screen and (max-width: 767px) {
                                padding-bottom: 5px;
                                background-size: 7px 10px;
                                background-position: right 10px top 3px;
                                background-image: url(https://www.kanazawa-it.ac.jp/tokyo/t1s/images/common/icons_bullets/arrow_black_r_sp.png);
                            }
                            & .ja {
                                font-size: 20px;
                                font-weight: bold;
                                @media (width <= 767px) {
                                    font-size: 15px;
                                }
                            }
                            & .position {
                                font-size: 16px;
                                padding-left: 28px;
                                @media screen and (max-width: 767px) {
                                    font-size: 0.8rem;
                                    padding-left: 0;
                                    display: block;
                                    padding-top: 1px;
                                }
                            }
                        }
                        & .profile {
                            font-size: 18px;
                            line-height: 1.8;
                            padding-top: 17px;
                            @media screen and (max-width: 767px) {
                                font-size: 1rem;
                                line-height: 1.4;
                                color: #005ea1;
                                padding-top: 7px;
                            }
                            & .p:not(:first-child) {
                                display: block;
                                @media screen and (max-width: 767px) {
                                    display: inline;
                                    padding-left: 1em;
                                }
                            }
                        }
                    }
                }
            }
            & .teacher:first-child {
                margin-top: 0;
                @media screen and (max-width: 767px) {
                    padding-top: 0;
                    border-top: none;
                }
            }
            & .teacher.mba .textCell .textCellInner .name {
                border-bottom-color: #b4281c;
            }
            & .teacher.ipm .textCell .textCellInner .name {
                border-bottom-color: #4d4ba9;
            }
            & .teacher.mea .textCell .textCellInner .name {
                border-bottom-color: #878787;
            }
        }
    }

}

/* ¥¤¥ó¥¿¥Ó¥å©`¼¯ ‚€„e */
#mainCompartment {
    --old-pc-width-rate: calc(100% / var(--old-pc-content-width-int));
    & .teacherSection {
        position: relative;
        container-type: inline-size;
        @media screen and (max-width: 767px) {
            margin-top: -7px !important;
        }
        & .name {
            z-index: 2;
            position: absolute;
            background-color: #fedd00;
            width: calc(200 * var(--old-pc-width-rate));
            aspect-ratio: 1;
            box-sizing: border-box;
            text-align: center;
            top: 0;
            left: 0;
            padding-top: calc(20 / 200 * 100%);
            font-weight: bold;
            container-type: size;
            @media screen and (max-width: 767px) {
                width: 115px;
                padding-top: 30px;
            }
            &::after {
                display: block;
                content: "";
                width: calc(34 / 200 * 100%);
                aspect-ratio: 1;
                background: #eecf00;
                position: absolute;
                left: calc(10 / 200 * 100%);
                top: calc(10 / 200 * 100%);
                clip-path: polygon(0 0, 0 100%, 100% 0);
            }
            @media screen and (max-width: 767px) {
                &::after {
                    width: 17px;
                    left: 7px;
                    top: 7px;
                }
            }
            & .jaName {
                font-size: calc(24 / 200 * 100 * 1cqw);
                @media screen and (max-width: 767px) {
                    font-size: 16px;
                }
            }
            & .enName {
                font-size: calc(10 / 200 * 100 * 1cqw);
                padding-top: calc(14 / 200 * 100 * 1cqw);
                @media screen and (max-width: 767px) {
                    font-size: 6px;
                    padding-top: 11px;
                    font-family: serif;
                }
            }
            & .position {
                font-size: calc(12 / 200 * 100 * 1cqw);
                line-height: 1.4;
                padding-top: calc(15 / 200 * 100%);
                @media screen and (max-width: 767px) {
                    font-size: 8px;
                    padding-top: 9px;
                    font-family: serif;
                }
            }
        }
        & .message {
            position: absolute;
            z-index: 2;
            top: calc(320 / 520 * 100%);
            left: 0;
            color: #fff;
            background-color: rgba(0,0,0,0.85);
            font-size: calc(20 / var(--old-pc-content-width-int) * 100 * 1cqw);
            line-height: 1.5;
            right: calc(38 * var(--old-pc-width-rate));
            padding-left: 40px;
            padding-top: 16px;
            padding-bottom: 16px;
            @media screen and (min-width: 768px) {
                font-family: serif;
            }
            @media screen and (max-width: 767px) {
                top: 163px;
                right: 15px;
                font-size: 15px;
                line-height: 1.4;
                padding: 6px 18px 7px;
            }
        }
        & .image {
            z-index: 1;
            padding-top: calc(20 / var(--old-pc-content-width-int) * 100 * 1cqw);;
            padding-left: calc(20 / var(--old-pc-content-width-int) * 100 * 1cqw);;
            @media screen and (max-width: 767px) {
                padding-left: 10px;
                padding-top: 10px;
            }
            & img {
                width: 100%;
                height: auto;
                @media screen and (max-width: 767px) {
                    width: 100%;
                    height: 250px;
                    object-fit: cover;
                }
            }
        }
    }
    & .interviewSection {
        & .interviewImagePCR {
            float: right;
            margin-left: 15px;
            margin-bottom: 15px;
            width: 320px;
            height: auto;
            padding-top: 4px;
            @media screen and (max-width: 767px) {
                width: 100%;
                height: auto;
                margin-left: 0;
                padding-top: 0;
                margin-bottom: 15px;
            }
        }
        & .interviewImage {
            margin-top: 23px;
            width: 100%;
            height: auto;
            @media screen and (max-width: 767px) {
                margin-top: 5px;
                margin-bottom: 15px;
            }
        }
    }
    & .goBackListSection {
        border-top: 1px solid #d6d6d6;
        text-align: center;
        padding-top: 19px;
        padding-bottom: 19px;
        @media screen and (max-width: 767px) {
            padding-top: 13px;
            padding-bottom: 13px;
        }
    }
}