@charset "UTF-8";

.edit-area {
    &.staff {
        padding: 6rem 0 12rem;

        @media screen and (max-width: 767px) {
            padding: 4rem 0 8rem;
        }

        .common-list.staff {
            display: flex;
            flex-wrap: wrap;
            gap: 4.5rem 3.2rem;
            list-style: none;
            margin: 0 0 8rem;
            padding: 0;

            @media screen and (max-width: 767px) {
                flex-direction: column;
                gap: 3.2rem;
                margin-bottom: 5rem;
            }

            .staff-card {
                flex: 0 0 calc((100% - 6.4rem) / 3);
                width: calc((100% - 6.4rem) / 3);

                @media screen and (max-width: 767px) {
                    flex: none;
                    width: 100%;
                }

                & a {
                    display: block;
                    color: inherit;
                    transition: opacity 0.25s ease;

                    @media (hover: hover) and (pointer: fine) {
                        &:hover {
                            opacity: 0.85;

                            .staff-card-media img {
                                transform: scale(1.03);
                            }
                        }
                    }
                }

                .staff-card-media {
                    overflow: hidden;
                    border-radius: 1.2rem;
                    margin-bottom: 3.3rem;
                    height: 49.7rem;
                    width: 45rem;
                    background-color: #ffffff;
                    @media screen and (max-width: 767px) {
                        margin-bottom: 1.6rem;
                        border-radius: 1rem;
                        width: 100%;
                        height: 26.671rem;
                    }

                    & img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.4s ease;
                    }
                }

                .staff-card-catch {
                    font-family: "Noto Sans JP", sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2.8rem;
                    line-height: 1.47;
                    letter-spacing: 0.2em;
                    color: #000;
                    margin: 0 0 2rem;

                    @media screen and (max-width: 767px) {
                        font-size: 1.8rem;
                        margin-bottom: 1rem;
                    }
                }

                .staff-card-meta {
                    font-family: "Noto Sans JP", sans-serif;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 1.4rem;
                    line-height: 1.5;
                    letter-spacing: 0.05em;
                    color: #000;
                    margin: 0 0 2rem;

                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                    }
                }

                .staff-card-name {
                    font-family: "Montserrat", sans-serif;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 3.1rem;
                    line-height: 1.11;
                    letter-spacing: -0.01em;
                    color: #006acd;
                    margin: 0;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}