/* 適用レイヤー */
@layer base, components, utilities;
/* ベース */
@layer base {
}
/* コンポーネント */
@layer components {
}
/* ユーティリティ */
@layer utilities {
}

#orihime2025{
    color: #086358;
}


.mv{
    position: relative;
    img{
        width: 100%;
    }
    .box-title{
        width: 43.6rem;
        position: absolute;
        bottom: -5.3rem;
        left: 50%;
        transform: translateX(-50%);
         @media (width < 768px){
            width: 24.6rem;
            bottom: -6.7rem;
        }
    }
}

.goods-list-wrap{
    background: #FDD1E4;
    background: linear-gradient(140deg, rgba(253, 209, 228, 1) 0%, rgba(150, 195, 208, 1) 50%, rgba(20, 110, 100, 1) 100%);
         @media (width < 768px){
    background: linear-gradient(108deg, rgba(253, 209, 228, 1) 0%, rgba(150, 195, 208, 1) 50%, rgba(20, 110, 100, 1) 100%);
        }
    .orihime2025-inner{
        @media (768px <= width){
            max-width: 125.6rem;
            margin-inline: auto;
            padding: 11.65rem 3rem 18rem;
            box-sizing: content-box;
        }

        @media (width < 768px){
            padding: 11.8rem 4% 10rem;
        }


    }

}

.goods-wrap{
    scroll-margin-top: 20rem;
        @media (width < 768px){
            scroll-margin-top: 8rem;
        }
    + .goods-wrap{
        margin-top: 12rem;
        @media (width < 768px){
            margin-top: 5.6rem;
        }
    }
    
}

.orihime2025-goods-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    margin-bottom: 8.2rem;
    @media (width < 768px){
           gap: 3.2rem;
           margin-bottom: 6rem;
        }
    a{
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: 0.1em;
        position: relative;
        transition: .4s;
        @media (width < 768px){
            font-size: 1.8rem;
        }
        &:before{
            content: "";
            width: 100%;
            height: 2px;
            background: #008596;
            position: absolute;
            left: 0;
            bottom: 0;
            margin: auto;
            transform-origin: center top;
            transform: scaleX(0);
            transition: transform .4s;
        }
        &:hover{
            color: #008596;
            &:before{
                transform: scale(1);
            }

        }
    }
}

.goods-title{
    width: 22.7rem;
    margin-inline: auto;
    margin-bottom: 6.4rem;
    padding: 1.4rem 0;
    background: #fff;
    box-shadow: 3.29px 3.29px 3.29px 0px #00000040;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.1em;
    @media (width < 768px){
        width: 19.8rem;
        margin-bottom: 3.2rem;
        padding: 1.2rem 0;
        font-size: 2rem;
    }
}

.goods-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28.4rem, 1fr));
    gap: 8rem 4rem;
        @media (width < 768px){
            grid-template-columns: 1fr 1fr;
            gap: 4.7rem 2rem;
        }
    }
    .item{
        background: #FDFCE5;
        a{
            transition: .4s;
            &:hover{
                opacity: 0.7;
            }
        }
        .item-text{
            padding: 2.2rem 1.8rem;
                @media (width < 768px){
                    padding: 1.2rem 1rem;
                    font-size: 1.2rem;
                }
        }
        .item-price{
            margin-top: 1.6rem;
            font-weight: bold;
            letter-spacing: 0.04em;
                @media (width < 768px){
                    margin-top: 8px;
                    font-size: 1.4rem;
                }
            small{
                font-size: 1.2rem;
                   @media (width < 768px){
                    font-size: 1rem;
                }
            }
        }
    }