/* slider */
#top-slide {
    margin-bottom: 12rem;
}
#top-slide img {
    width: 100%;
    height: auto;
}
.thumbnail {
    width: 50rem;
    margin: 3.2rem auto 0;
}
.thumbnail .slick-slide {
    margin: 0 2.5px;
    cursor: pointer;
}
.thumbnail .slick-prev,
.thumbnail .slick-next {
    width: 4rem;
    height: 4rem;
    background-position: 0;
    background-size: contain;
    background-repeat: no-repeat;
}
.thumbnail .slick-prev {
    left: -9rem;
    background-image: url(https://kknaruto.itembox.design/item/img/common/icon-prev.svg);
}
.thumbnail .slick-next {
    right: -9rem;
    background-image: url(https://kknaruto.itembox.design/item/img/common/icon-next.svg);
}
.thumbnail .slick-prev:before,
.thumbnail .slick-next:before {
    content: none;
}
.thumbnail .slick-prev:hover, 
.thumbnail .slick-prev:focus {
    background: url(https://kknaruto.itembox.design/item/img/common/icon-prev.svg) 0 / contain no-repeat;
}
.thumbnail .slick-next:hover, 
.thumbnail .slick-next:focus {
    background: url(https://kknaruto.itembox.design/item/img/common/icon-next.svg) 0 / contain no-repeat;;
}
@media only screen and (min-width: 900px) {
    #top-slide {
        margin-bottom: 14.5rem;
    }
    .thumbnail {
        width: 23.2%;
        margin: 3rem auto 0;
    }
    .thumbnail .slick-prev,
    .thumbnail .slick-next {
        width: 3rem;
        height: 3rem;
    }
    .thumbnail .slick-prev {
        left: -63%;
    }
    .thumbnail .slick-next {
        right: -63%;
    }
}

/* brand list */
#brand {
    background-color: #F5F6F7;
    width: 72rem;
    margin: 0 auto 14rem;
    padding: 14rem 4rem;
}
#brand .underline-ttl {
    margin-bottom: 8rem;
}
#brand .brand-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 2rem;
    row-gap: 6rem;
    margin: 0 0 10rem;
}
#brand .brand-list a {
    text-align: center;
}
#brand .brand-list img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
#brand .brand-list .brand-name {
    margin: 0;
    font-size: 2.8rem;
    line-height: 2;
}
#brand .btn-more {
    width: 56rem;
    margin: auto;
}
@media only screen and (min-width: 900px) {
    #brand {
        width: 100%;
        padding: 7rem 7%;
        margin-bottom: 10rem;
    }
    #brand .underline-ttl {
        margin-bottom: 7rem;
    }
    #brand .brand-list {
        grid-template-columns: repeat(4,1fr);
        column-gap: 4%;
        row-gap: 5rem;
    }
    #brand .brand-list .brand-name {
        font-size: 1.4rem;
    }
    #brand .btn-more {
        max-width: 35rem;
    }
}

/* about */
#about {
    width: 71.4rem;
    margin: 0 auto;
}
#about img {
    width: 100%;
    height: auto;
}
#about .txt {
    font-size: 3.2rem;
    line-height: 2.1;
    width: 89.6%;
    margin: 4rem auto 8rem;
}
#about .btn-more {
    width: 56rem;
    margin: auto;
}
@media only screen and (min-width: 900px) {
    #about {
        width: 100%;
    }
    #about .txt {
        font-size: 1.6rem;
        text-align: center;
        width: 92%;
        margin: 4rem auto 6rem;
    }
    #about .btn-more {
        width: 35rem;
    }
}