@charset "utf-8";

/* ブレイクポイントを指定 */

/* @mixin sp {
    @media (max-width:600px){
        @content;
    } 
}
@mixin tb {
    @media (max-width:850px) {
        @content;
    }
} */


/* =========================================================================
#NEWS 
=========================================================================*/

.newslist a {
    display: flex;
    @media (max-width: 965px) {
        flex-direction: column;
    }
}

.newslist a:hover {
    opacity: 0.7;
}

.newslist dl {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    line-height: 1.5;
    border-top: 1px solid #dcdcdc;
    @media (max-width: 965px) {
        padding: 10px 0 15px 0;
        width: 100%;
    }
    @media (max-width: 375px) {
        font-size: 14px;
    }
}


.newslist dl:last-child {
    border-bottom: 1px solid #dcdcdc;
}

.newslist dl dt {
    padding: 0 20px;
    @media (max-width: 965px) {
        padding: 5px 0;
    }
}

/*========================================================================
#RECOMMEND
=========================================================================*/


.reco__itemBox {
    text-align: center;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.reco__item__title {
    font-size: 18px;
    @media (max-width:600px){
        font-size: 14px;
    }
}

.reco__item__price {
    font-size: 17px;
    margin-top: 0.5rem;
}

.item__tax {
    font-size: 12px;
    margin-left: 0.3rem;
}

/* スライダー */
.recommend__slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    max-width: 1080px;
    width: 94%;
    margin:0 auto;
    display: none; /*読み込み時は非表示*/
}


.bx-viewport .recommend__slider li {
    display: block !important; /*JSが読み込まれたら表示*/
}


.recommend__slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
 
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.recommend__slider .slick-slide {
    margin:0 10px;
}
 
/*矢印の設定*/
 
/*戻る、次へ矢印の位置*/
.slick-reco-prev, 
.slick-reco-next {
    position: absolute;/*絶対配置にする*/
    top: 32%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
    @media (max-width:1360px){
        top: 28%;
    }
     @media (max-width:1080px){
        top: 25%;
     }
     @media (max-width:880px){
        top: 23%;
    }

    @media (max-width:678px){
        top: 28%;
    }
    @media (max-width:550px){
        top: 25%;
    }
    @media (max-width:414px){
        top: 30%;
    }
}

.slick-reco-prev {/*戻る矢印の位置と形状*/
     left: -1.5%;
     transform: rotate(-135deg);
     @media (max-width:1200px){
        left: -3.5%;
     }
}
 
.slick-reco-next {/*次へ矢印の位置と形状*/
     right: -1.5%;
     transform: rotate(45deg);
     @media (max-width:1200px){
        right: -3.5%;
     }
}
 
 
/*========================================================================
#CATEGORY
=========================================================================*/

.category__box {
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    column-gap: 5px;
    row-gap: 2em;
    @media (max-width: 672px) {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        column-gap: 25px;
        row-gap: 1em;
    }
}

.img__box {
    margin: 0 auto;
}
.img__box:hover {
    opacity: .75;
}

.category__nameBox {
    text-align: center;
}


.category__title {
    text-align: center;
        @media (max-width: 900px) {
            font-size: 14px;
    }
}