@charset "UTF-8";

.ly_recruitTopPageCeoMessage {
    background-color: rgba(var(--recruit-color-accent006-rgb), 0.075);

    .bl_recruitTopPageCeoMessage_list {
        display: flex;
        flex-wrap: wrap;
        gap: 3.0rem;
        justify-content: center;
        padding: 0 2.0rem;

        .bl_recruitTopPageCeoMessage_item {
            aspect-ratio: 1 / 1;
            height: auto;
            max-width: 50.0rem;
            width: 100%;

            @media screen and (min-width: 768px) {
                aspect-ratio: auto;
                max-width: var(--recruit-container-max-width);
            }

            .bl_recruitTopPageCeoMessage_link {
                border: 6px solid rgba(var(--recruit-color-accent006-rgb), 0.95);
                border-radius: 1.6rem;
                color: inherit;
                display: block;
                height: 100%;
                overflow: hidden;
                position: relative;
                text-decoration: none;

                .el_recruitTopPageCeoMessage_bg {
                    background-image: var(--recruit-img-bg-topPage-ceoMessage);
                    background-position: center;
                    background-size: cover;
                    height: 100%;
                    width: 100%;

                    @media screen and (min-width: 768px) {
                        height: 30.0rem;
                    }
                }

                .el_recruitTopPageCeoMessage_bgOverlay {
                    background-color: rgba(var(--recruit-color-accent006-rgb), 0.75);
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 1;
                }

                .bl_recruitTopPageCeoMessage_text {
                    color: var(--recruit-color-base);
                    left: 50%;

                    padding: 3.0rem;
                    position: absolute;
                    text-align: center;
                    text-shadow: var(--recruit-color-text-shadow-rgba);
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    z-index: 2;

                    @media screen and (min-width: 768px) {
                        left: 0rem;
                        text-align: left;
                        transform: translateY(-50%);
                    }

                    .el_recruitTopPageCeoMessage_title {
                        margin-bottom: 1rem;
                        margin-inline: auto;
                        font-size: 3.2rem;
                        font-weight: var(--font-weight-bold);
                        text-align: center;

                        @media screen and (min-width: 768px) {
                            margin-inline: 0;
                            text-align: left;
                        }
                    }

                    .el_recruitTopPageCeoMessage_dots {
                        font-size: 1.6rem;
                        margin-inline: auto;
                        text-align: center;

                        @media screen and (min-width: 768px) {
                            font-size: 1.8rem;
                            margin-inline: 0;
                            text-align: left;
                        }
                    }

                    .el_recruitTopPageCeoMessage_button_more {
                        background-color: var(--recruit-color-accent006);
                        border: 3px solid var(--recruit-color-base);
                        border-radius: 999rem;
                        color: var(--recruit-color-base);
                        cursor: pointer;
                        display: block;
                        font-size: 1.6rem;
                        font-weight: var(--font-weight-bold);
                        margin-left: auto;
                        margin-top: 2.0rem;
                        margin-right: auto;
                        padding: 0.6rem 3.6rem 0.8rem 3.9rem;
                        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
                        width: fit-content;

                        @media screen and (min-width: 768px) {
                            margin-left: 0;
                            margin-right: 0;
                        }

                        &:hover,
                        &:focus-visible {
                            background-color: var(--recruit-color-base);
                            border-color: var(--recruit-color-accent006);
                            color: var(--recruit-color-accent006);
                            outline: none;
                        }

                        .el_entryBtn_arrow {
                            display: inline-block;
                            font-size: 1.2em;
                            margin-left: 0.5em;
                            transform: translateY(0px);
                            transition: transform 0.3s ease;
                        }

                        &:hover .el_entryBtn_arrow,
                        &:focus-visible .el_entryBtn_arrow {
                            transform: translateY(-2px);
                        }
                    }
                }
            }
        }
    }
}