@charset "utf-8";

section{
    margin-bottom: 70px;
}

h2{
    text-align: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 2em;
}

h2 > span{
    display: block;
    font-size: .3em;
    color: #49494c;
    font-family: YuGothic, 'Yu Gothic', serif;
}
@media screen and (max-width:700px) {
    section{
        margin-bottom: 50px;
    }

        #top_news,#top_banner,.item_category,.item_all,#search,#history{
            padding:2%;
        }
}

/********************* 
    top_news
*********************/
    #top_news .news_container a:hover{
        opacity: 0.6;
    }

    #top_news .news_container{
        margin: 0 auto;
        max-width: 600px;
        border: 1px solid #c9c9c9;
        padding:20px;
    }

    #top_news .news_container > h3 {
        text-align: center;
        display: block;
        margin-bottom :10px;
        font-family: 'Shippori Mincho', serif;
    }

    #top_news .news_container > dl{
        display: grid;
        grid-template-columns: 15% 80%;
        gap: 10px;
        width: 80%;
        margin: 0 auto;
        font-size: 0.9em;
    }

    #top_news .news_container > dl dt{
        text-align: center;
    }
    #top_news .news_container > dl dd{

    }
    
    #top_news .news_container>dl dd a{
        color:#49494c;
    }

    @media screen and (max-width:700px) {
        #top_news .news_container {
                margin: 0 auto;
                width: 100%;
                border: 1px solid #c9c9c9;
                padding: 3%;
            }

        #top_news .news_container>dl {
            font-size: 0.8em;
            width:90%;
        }
    }


/********************* 
    top_banner
*********************/

    #top_banner .banner_grid a:hover {
         opacity: 0.6;
     }

    #top_banner .banner_grid{
        max-width: 810px;
        display: grid;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 45px;
    }

    #top_banner .banner_grid .banner_item{
        max-width: 238px;
    }

    #top_banner .banner_grid .banner_item li:nth-child(1){

    }


    #top_banner .banner_grid .banner_item li:nth-child(2){/* タイトル */
        text-align: center;
        font-weight: 800;
        padding: 5px ;
    }

    #top_banner .banner_grid .banner_item li:nth-child(2)::after{/* 間の線 */
        content: "";
        display: block;
        margin: 0px auto;
        width: 100%;
        height: 1px;
        max-width: 100px;
        border-bottom: #c9c9c9 solid 1px;
    }

    #top_banner .banner_grid .banner_item li:nth-child(3){/* テキスト */
        font-size: 0.8em;
    }

    
        @media screen and (max-width:700px) {
        #top_banner .banner_grid {
                width: 100%;
                display: grid;
                margin: 0 auto;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 10px;
            }

        #top_banner .banner_grid .banner_item li:nth-child(2) {
            /* タイトル */
            font-weight: 800;
            padding: 5px;
            font-size: 0.7em;
        }

        #top_banner .banner_grid .banner_item li:nth-child(3) {
            /* テキスト */
            font-size: 0.5em;
            padding-bottom: 20px;
        }
    }

    

/********************* 
    item_category
*********************/
    .item_category .category_grid a:hover {
         opacity: 0.6;
     }
     
    .item_category .category_grid{
        max-width: 600px;
        display: grid;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 5px;
    }

/********************* 
    item_all
*********************/

    .item_all h3{
        margin: 30px;
    }

    .item_all h3 img{
        margin: 0 auto;
    }

    
    .item_all .item_grid{
        max-width: 1000px;
        display: grid;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }
    
    .item_all .item_grid .item_box{
        margin-bottom: 50px;
        border: 1px solid #ddd;
    }

    /* button */
    .item_all .item_grid .item_box .item_link_button a{
        position: relative;
        background-color: #000;
        color: #fff;
        text-align: center;
        padding:10px;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: YuGothic,'Yu Gothic',serif;
        margin-top: 8px;
        font-size: 1.1em;
        border-radius: 5px;
        overflow: hidden;
        transition: 0.2s;
        margin:5px auto;
        /* リボン */
        /* path fill="％２３000" 000部分がカラーコード */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23AF9232" d="M50,0L27.53 0 0 27.53 0 50 .16 50 50 .16 50 0z" /></svg>');
        background-position: top left;
        background-repeat: no-repeat;
        background-size: auto 90%;
        /* https: //jajaaan.co.jp/web-production/frontend/svg-background-image/ */
        /* https: //www.creamu.co.jp/blog/technology/2019/12/svg_polygon_polyline_path.html */
    }




    
    
    .item_all .item_grid .item_box .item_link_button a::after{/* 矢印 */
        content: "";
        width: 0.3em;
        height: 0.3em;
        display: inline-block;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        margin-left: 10px;
    }

    .item_all .item_grid .item_box .item_link_button a:hover {
        opacity: 0.8;
    }
    /* button end */

    .item_all .item_grid .item_box .item_box_info{
        width: 90%;
        margin: 12px auto;
    }

    .item_all .item_grid .item_box .item_box_info .item_box_text01{/* 商品名 */
        font-family: 'Shippori Mincho', serif;
    }

    .item_all .item_grid .item_box .item_box_info .item_box_text02{/* クーポンで */
        display: inline-block;
        color:#AF9232 ;
        font-size: 0.8em;
        font-weight: 800;
    }


    .item_all .item_grid .item_box .item_box_info .item_box_text03{/* 元値 */
        display: inline-block;
        font-weight: 500;
        font-size: 0.8em;
    }

    .item_all .item_grid .item_box .item_box_info .item_box_text03::after {
        content: "円";
        font-size: 0.8em;
    }

    .item_all .item_grid .item_box .item_box_info p.item_box_text03 + .item_box_text04::before {
        content: " ▶";
        font-size: 0.3em;
        vertical-align: middle;
        margin-right: 5px ;
        color: #000;
    }

    .item_all .item_grid .item_box .item_box_info .item_box_text04{/* セール価格 */
        display: inline-block;
        color: #AF9232;
        font-weight: 800;
        font-size: 1.4em;

    }

    .item_all .item_grid .item_box .item_box_info .item_box_text04::after{
        content: "円";
        font-size: 0.8em;
    }




    .item_all .item_grid .item_box .item_box_info ul{
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
    }

    .item_all .item_grid .item_box .item_box_info ul li{
        margin:2px;
        height:21px ;
    }

    .item_all .item_grid .item_box .item_box_info ul li img{
        height:100%;
    }

    .item_all .view_all{
        text-align: center;
        margin:10px auto 100px;
    }
    
    .item_all .view_all a{
        display: inline-block;
    }
    
    .item_all .view_all a:hover{
        opacity: 0.6;
    }

    @media screen and (max-width:700px) {
        .item_all .item_grid {
            width: 100%;
            display: grid;
            margin: 0 auto;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .item_all .item_grid .item_box {
            margin-bottom: 30px;

        }
        
        .item_all h3 {
            margin: 30px 0px;
        }

        .item_all .item_grid .item_box .item_link_button a {
            font-size: 0.9em;
        }

        .item_all .view_all {
            width: 80%;
        }

        .item_all .item_grid .item_box .item_box_info .item_box_text02{
            display: block;
            text-align: bottom;
        }

        .item_all .item_grid .item_box .item_box_info .item_box_text04{
            line-height: 1em;
        }

        .item_all .item_grid .item_box .item_box_info ul li {
            margin: 2px;
            height: 4vw;
        }
        }
    }


/********************* 
    search
*********************/
    #search  a:hover {
         opacity: 0.6;
     }
     
    #search ul{
        display: flex;
        justify-content: center;
        margin: 20px 0 60px;
    }

    #search ul li{
        margin: 5px;
    }

    @media screen and (max-width:700px) {
        #search{
            margin-top: 100px;
        }
    }

/********************* 
        history
*********************/

    #history div{
        box-shadow:16px 16px 18px #a8a8a8;
        display: block;
        max-width: 1000px;
        margin: 20px auto;
    }

    #history .sp{
        display: none;
    }

    @media screen and (max-width:700px) {
    #history div {
        max-width: 600px;
        width: 85%;
    }

        #history .pc{
            display: none;
        }

        #history .sp {
            display: block;
        }
    }