@charset "UTF-8";

aside {
    .banner {
        padding: 20px;
        background-color: #f2f2f2;
        border-bottom: 1px solid #333;

        img {
            display: block;
        }
    }

    section {
        border-bottom: 1px solid #333;

        &:last-child {
            border-bottom: none;
        }

        .wrapper {
            padding: 0 20px;

            .lead_text {
                padding-bottom: 20px;
                text-align: right;
            }
        }
    }
}


@media (max-width: 900px) {
    aside {
        min-width: 350px;
        
        .banner {
            text-align: center;
    
            img {
                display: inline;
            }
        }
    }
    
}


/* ****************************************
category_list
***************************************** */
aside {
    .category_list {
        padding-bottom: 20px;
    
        li {
            margin-top: 10px;
    
            &:first-child {
                margin-top: 20px;
            }
    
            a {
                display: grid;
                grid-template-columns: 50px auto;
                align-items: center;
                gap: 10px;
                text-decoration: none;
                color: #333;
    
                img {
                    display: block;
                    width: 100%;
                    padding: 5px;
                    background-color: #fff;
                    border: 1px solid #fff;
                    transition: border 0.2s;
                }
    
                p {
                    font-size: 1.6rem;
                }
    
                &:hover img {
                    border: 1px solid #999;
                }
    
                &:hover p {
                    text-decoration: underline;
                }
            }
    
        }
    }
    
    @media (max-width: 900px) {
        .category_list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 20px;
    
            li {
                margin-top: initial;
    
                &:first-child {
                    margin-top: initial;
                }
            }
        }
    }

    @media (max-width: 750px) {
        .category_list {
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
    }
    
    @media (max-width: 600px) {
        .category_list {
            grid-template-columns: repeat(2, 1fr);
    
        }
    }
}

/* ****************************************
new_arrivals_list
***************************************** */
aside {
    .new_arrivals_list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin: 20px 0px 10px 0;

        li {
            position: relative;
            background-color: #fff;
            border: 1px solid #fff;
            transition: padding 0.2s, border 0.2s;
            aspect-ratio: 1 / 1;

            &:hover {
                border: 1px solid #999;
            }
            
            img {
                display: block;
                width: 100%;
                height: auto;
                position: absolute; /* absolute positioningを利用 */
                top: 50%; /* 親要素の中央に移動 */
                left: 50%; /* 親要素の中央に移動 */
                transform: translate(-50%, -50%); /* 中央に配置 */
                padding: 5px;
            }
        }
    }

    @media (max-width: 900px) {
        .new_arrivals_list {
            display: block;

            li {
                margin: 10px 10px 0 0;
                padding: 5px;
                display: inline-block;
                width: 50px;
                transition: none;

            }
    
        }
    }
}

/* ****************************************
tag_list
***************************************** */
aside {
    .tag_list {
        margin: 10px 0;
        
        li {
            display: inline-block;
            margin: 10px 10px 0 0;

            a {
                display: inline-block;
                padding: 0 10px;
                background-color: #fff;
                border-radius: 20px;

            }
        }
    }
}


/* ****************************************
tips_list
***************************************** */
aside {
    .tips_list {
        margin: 20px 0 10px 10px;

        li {
            margin-top: 10px;
            list-style: disc;

        }
    }
}