@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.profile { margin-bottom: calc(100px - clamp(36px, calc(100vw * (49 / var(--innerContainerSize))), 49px)) }

    .profile__inner {
        display: flex;
        flex-wrap: wrap;
        column-gap: max(24px, 5%);
        row-gap: 24px;
        padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
    }

        .profile__head {
            display: flex;
            flex-wrap: wrap;
            flex-grow: 1;
            gap: 24px;
            width: max(280px, calc(100% * (424 / 1280)));
        }

            .profile__photo {
                flex-grow: 1;
                width: 120px;
            }
            .profile__photo img {
                aspect-ratio: 1 / 1;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .profile__introduction {
                flex-grow: 1;
                width: 300px;
            }

                .profile__introduction__title {
                    margin-bottom: calc(100% * (18 / 424));
                    color: var(--primaryColor-800);
                    font-family: var(--fontSub);
                    font-size: clamp(2.2rem, calc(100vw * (28 / var(--innerContainerSize))), 2.8rem);
                    font-weight: 900;
                }

                .profile__introduction__text {
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    line-height: 1.75;
                }


        .profile__body {
            flex-grow: 1;
            width: max(320px, calc(100% * (792 / 1280)));
        }

            .profile__status {
                margin-bottom: 20px;
                color: var(--primaryColor-800);
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                letter-spacing: .05em;
            }

                .profile__name {
                    margin-bottom: calc(1em * (15 / 36));
                    font-family: var(--fontEn);
                    font-size: 2.25em;
                    line-height: 1;
                }

                .profile__name-en {
                    margin-bottom: 0.625em;
                    font-family: var(--fontSub);
                    font-weight: 700;
                    line-height: 1.25;
                }

                .profile__job {
                    font-family: var(--font);
                    font-size: 1.25em;
                    line-height: 1.4;
                }


            .profile__details {
                font-family: var(--font);
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                font-weight: 500;
            }
            .profile__details + .profile__details { margin-top: 38px }

                .profile__details__title {
                    padding-block: 0.3125em;
                    padding-inline: 0.875em;
                    margin-bottom: 1.25em;
                    border-radius: 99px;
                    background-color: var(--secondaryColor-100);
                    color: var(--primaryColor-800);
                    line-height: 1.25;
                    letter-spacing: .1em;
                }

                .profile__details__text {
                    line-height: 1.875;
                    letter-spacing: .05em;
                }


            .profile__button { margin-top: 24px }

                .profile__button__link {
                    display: flex;
                    column-gap: 7px;
                    width: fit-content;
                    padding: 4px;
                    color: var(--primaryColor-800);
                    font-size: 1.4rem;
                    line-height: calc(24 / 14);
                    letter-spacing: .05em;
                }
                .profile__button__link::before,
                .profile__button__link::after {
                    content: "";
                    display: block;
                    height: calc(1em * (24 / 14));
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                }
                .profile__button__link::before {
                    width: calc(1em * (32 / 14));
                    background-image: url(../images/staff/icon-staff-button.svg);
                    background-size: cover;
                }
                .profile__button__link::after {
                    width: calc(1em * (24 / 14));
                    background-image: url(../images/common/icon-button-faq.png);
                    background-image:
                        image-set(
                            url(../images/common/icon-button-faq.png) 1x,
                            url(../images/common/icon-button-faq@2x.png) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/common/icon-button-faq.png) 1x,
                            url(../images/common/icon-button-faq@2x.png) 2x
                        );
                    background-size: contain;
                }



.profile-after { margin-bottom: clamp(96px, calc(100vw * (159 / var(--innerContainerSize))), 159px) }

    .profile-after__inner {
        position: relative;
        padding-top: clamp(24px, calc(100vw * (32 / var(--innerContainerSize))), 32px);
        padding-left: clamp(16px, calc(100vw * (50 / var(--innerContainerSize))), 50px);
        padding-bottom: clamp(28px, calc(100vw * (38 / var(--innerContainerSize))), 38px);
        border-radius: 10px;
        background-color: var(--primaryColor-100);
    }
    @media screen and (min-width: 768px) {
        .profile-after__inner { padding-right: calc(100% * (470 / var(--innerContainerSize))) }
    }
    @media screen and (max-width: 767px) {
        .profile-after__inner { padding-right: clamp(16px, calc(100vw * (50 / var(--innerContainerSize))), 50px) }
    }

        .profile-after__inner img {
            aspect-ratio: 400 / 280;
            position: absolute;
            top: 0;
            right: 3.125%;
            transform: rotate(-5.46deg);
            width: 31.25%;
            margin-top: -3.984375%;
            object-fit: contain;
        }

        .profile-after__title {
            margin-bottom: .6em;
            color: var(--primaryColor-800);
            font-family: var(--font);
            font-size: clamp(2.4rem, calc(100vw * (30 / var(--innerContainerSize))), 3.0rem);
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: .05em;
        }

        .profile-after__text {
            font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
            line-height: 1.75;
            letter-spacing: .05em;
        }