@charset "UTF-8";

/* パンくずリストレイアウト */
.ly_breadcrumbs {
    display: none;

    @media screen and (min-width: 768px) {
        display: block;
        left: 1.0rem;
        padding: 1.0rem 0;
        position: absolute;
        top: 33.5rem;
        width: 100%;
        z-index: 1;
    }

    .bl_breadcrumbs {
        background-color: transparent;
        display: flex;

        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        position: relative;
        white-space: nowrap;

        &::-webkit-scrollbar {
            display: none;
        }

        .bl_breadcrumbs_item {
            align-items: center;
            display: inline-flex;
            margin-right: 0.75rem;
            position: relative;

            a {
                border-bottom: 2px solid var(--recruit-color-base);
                color: var(--recruit-color-base);
                display: inline-block;
                font-size: 1.7rem;
                line-height: 1.3;
                position: relative;
                text-decoration: none;

                &:hover {
                    cursor: pointer;
                    opacity: 0.5;
                    text-decoration: none;
                    transition: 0.3s;
                }
            }

            /* 最後の要素 */
            &:last-child {
                cursor: default;
                margin-right: 0;
                pointer-events: none;

                a {
                    border-bottom: none;
                }

                &::after {
                    border-right: none;
                    border-top: none;
                }
            }

            /* 逆くの字 */
            &::after {
                border-top: 0.34rem solid var(--recruit-color-base);
                border-right: 0.34rem solid var(--recruit-color-base);
                content: "";
                display: inline-block;
                height: 0.85rem;
                margin-left: 1.0rem;
                transform: rotate(45deg) translateX(-10%) translateY(30%);
                width: 0.85rem;

                @media screen and (min-width: 768px) {
                    transform: rotate(45deg) translateX(-10%) translateY(30%);
                }
            }
        }
    }
}