/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

.top-lists {
    padding-bottom: 5.625rem;
    position: relative;
}

.top-lists-inner {
    margin: 0 auto;
    max-width: 950px;
}

@media (max-width:767px) {
    .top-lists {
        padding-bottom: 3.125rem;
    }

    .top-lists-inner {
        padding: 0 1rem;
    }
}

.top-lists a {
    color: #000;
}

.top-lists-box {
    position: absolute;
    top: -5.125rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 1rem 1.625rem;
    max-width: 950px;
    border: 1px solid #999;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 1
}



@media (min-width: 768px) {
    .top-lists-box {
        top: -5.625rem;
    }

}

@media (min-width: 992px) {
    .top-lists-box {
        top: -6.125rem;
    }

}

@media (min-width: 1200px) {
    .top-lists-box {
        top: -6.625rem;
    }

}

.ds-row {
    display: flex;
}


.top-lists .is-style-ds-text-ml {
    margin-bottom: 0;
    font-size: 1.4375rem;
    letter-spacing: .1em;
}

.top-lists-box .ds-row {
    width: 100%;
    column-gap: 1.6rem;
    align-items: center;
}

.top-lists-box .ds-row .ds-col:first-child {
    text-align: center;
    width: 29%;
}


.top-lists-box .ds-row .ds-col:last-child {
    width: 71%
}

.top-lists-box .list-page-link {
    position: relative;
    display: inline-block;
    margin-top: .5rem;
}

.top-lists-box .list-page-link:after {
    content: "";
    position: absolute;
    right: -26px;
    top: 50%;
    width: 24px;
    height: 1px;
    background: #000;
}

.top-lists-box .list-page-link:before {
    content: "";
    position: absolute;
    right: -26px;
    top: 8px;
    width: 8px;
    height: 1px;
    background: #000;
    transform: rotate(45deg);
}

.top-lists-box ul {
    margin: 0;
    padding: 0;
}

.top-lists-box ul li {
    display: flex;
    margin: 0;
    padding: .5rem .6rem;
    border-top: 1px solid #000;
    font-size: .81rem;
    align-items: center;
}

.top-lists-box ul li span {
    display: inline-block;
}

.top-lists-box ul li:first-child {
    border-top: 0;
}

.top-lists-box ul li:last-child {
    display: none;
}

.top-lists .bx-btn-wrap {
    margin: 0 .5rem;
}

.top-lists .ds-list-button {
    display: inline-flex;
    padding-bottom: .1rem;
    min-width: 144px;
    min-height: 21px;
    text-align: center;
    background-color: #007d2c;
    color: #fff;
    font-size: .95rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    transition: all .3s ease-in;
}


.bx-post-title {
    width: calc(100% - 283px);
    margin-left: .25rem
}

@media (hover: hover) {
    .top-lists .ds-list-button:hover {
        background-color: #f7b82d;
    }

    .top-lists .bx-post-title a:hover {
        color: #367b37;
    }
}

@media (max-width:767px) {
    .top-lists .top-lists-box {
        display: none;
    }
}

.txt-logo {
    text-align: center;
    padding: 3rem 0 1.5rem;
}

.txt-logo img {
    max-width: 400px;
}

@media (min-width: 768px) {
    .txt-logo {
        padding-top: 6rem;
    }

}

@media (min-width: 992px) {
    .txt-logo {
        padding-top: 5rem;
    }

}

@media (min-width: 1200px) {
    .txt-logo {
        padding-top: 4rem;
    }

}

@media (max-width:767px) {
    .txt-logo {
        padding: 0;
    }

    .txt-logo img {
        max-width: 64%;
    }
}

.top-lists-card-row {
    margin-left: 2.6rem;
    display: flex;
    column-gap: .75rem;
}

.top-lists-card-row .top-lists-card {
    width: 25%;
}


.top-lists-card a {
    transition: all .3s ease-in;
}

.detail-btn-wrap {
    margin-top: 1.75rem;
    text-align: center;
}

.detail-button {
    position: relative;
    display: inline-flex;
    min-width: 284px;
    min-height: 62px;
    border: 1px solid #040000;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in;
}

.detail-button:after {
    content: "";
    position: absolute;
    right: -30px;
    top: 50%;
    width: 85px;
    height: 1px;
    background: #000;
}

.detail-button:before {
    content: "";
    position: absolute;
    right: -31px;
    top: calc(50% - 4px);
    width: 10px;
    height: 1px;
    background: #000;
    transform: rotate(45deg);
}


@media (hover: hover) {
    .detail-button:hover {
        background-color: #367b37;
        border-color: #367b37;
        color: #fff;
    }
    
    .top-lists-card a:hover {
        opacity: .7;
    }
}

@media (max-width:767px) {
    .top-lists-card-row {
        margin-top: .75rem;
        margin-left: 0;
        flex-wrap: wrap;
        gap: .5rem;
    }


    .top-lists-card-row .top-lists-card {
        width: calc(50% - .25rem);
    }

    .top-lists-card-row .top-lists-card img {
        vertical-align: middle;
    }

    .detail-btn-wrap {
        margin-top: 1.4rem;
    }

    .detail-button {
        min-width: 218px;
        min-height: 47px;
    }

    .detail-button:after {
        width: 65px;
        right: -22px;
    }

    .detail-button:before {
        right: -23px
    }
}