@charset "utf-8";

.kaitori-flow {
    display: flex;
    align-items: center;
    ul.kaitori-flow_list {
        padding: 0;
        position: relative;
        &::before {
            background: var(--color-main-light);
            border-radius: 20px;
            top: 0;
            left: 120px;
            width: 16px;
            height: 100%;
            margin-left: -109px;
            position: absolute;
            display: block;
            content: "";
        }
        > li {
            list-style-type: none!important;
            position: relative;
            &:not(:last-child) {
                margin-bottom: 60px;
                @media (width <= 999px) {
                    margin-bottom: 40px;
                }
            }
            dl {
                padding-left: 70px;
                position: relative;
                @media (width <= 999px) {
                    padding-left: 40px;
                }
                &::before, &::after {
                    content: "";
                    top: 22px;
                    display: block;
                    position: absolute;
                }
                &::before {
                    background: #fff;
                    border-radius: 50%;
                    left: -4px;
                    width: 7px;
                    height: 7px;
                    margin-top: -3px;
                }
                &::after {
                    border-bottom: 1px dashed #999;
                    left: 5px;
                    width: 50px;
                    position: absolute;
                    @media (width <= 999px) {
                        width: 30px;
                    }
                }
                dt {
                    margin-bottom: 0.5em;
                    font-size: 1.4em;
                    font-weight: bold;
                    color: var(--color-main);
                    display: flex;
                    align-items: center;
                    span.kaitori-flow_list-mark {
                        background: var(--color-main);
                        border-radius: 100vh;
                        top: 2px;
                        margin-right: 0.9em;
                        padding: 4px 15px 6px 17px;
                        font-size: 0.8em;
                        line-height: 1.9;
                        text-align: center;
                        font-weight: bold;
                        color: #fff;
                        display: inline-block;
                        position: relative;
                    }
                }
                dd {
                    margin-left: 0;
                    .kaitori-flow_list-img {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 20px;
                        @media (width <= 999px) {
                            grid-template-columns: repeat(1, 1fr);
                        }
                        img {
                            vertical-align: bottom;
                        }
                    }
                }
            }
            &.recycling {
                div {
                    background: var(--color-main);
                    width: 100%;
                    padding: 30px 50px;
                    color: #fff;
                    position: relative;
                    font-size: 4rem;
                    text-align: center;
                    letter-spacing: 10px;
                    @media (width <= 999px) {
                        padding: 10px 20px;
                        font-size: 2.8rem;
                    }
                    &::before {
                        font-family: var(--fa);
                        font-weight: 900;
                        content: "\f1b8";
                        margin-right: 10px;
                        position: relative;
                        top: 2px;
                    }
                }
            }
        }
    }
}