﻿@charset "UTF-8";



div.contsArea-right .categoryBnr_block a{
    width: 100%;
}
div.contsArea-right .categoryBnr_block img{
    width: 100%;
}

@media screen and ( min-width: 1025px) {

}
div.contsArea-right h1{
    line-height: 1.2;
}

/*==========================================
BNR BLOCK
==========================================*/
div.contsArea-right .Bnr_block ul{
    margin: 20px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

div.contsArea-right .Bnr_block ul li{
    width: 48%;
    margin: 0 auto;
}

div.contsArea-right .Bnr_block ul li figure figcaption{
    margin: 15px auto 0;
}

div.contsArea-right .Bnr_block ul li img{
    width: 100%;
    height: auto;
}

div.contsArea-right .Bnr_block ul li p.contsLabel {
    position: absolute;
    left: 0;
    top: 0;
    background: #354c61;

    padding: 2px 10px;


}
div.contsArea-right .Bnr_block ul li p.partsTxt {
    text-align: left;
}
div.contsArea-right .Bnr_block ul li p.volDate {
    text-align: left;
}

div.contsArea-right .Bnr_block .moreBtn a{
    background: #eaedef;

}


@media screen and ( min-width: 1025px) {
    div.contsArea-right .Bnr_block ul{
        margin: 0 auto;
    }
    div.contsArea-right .Bnr_block ul li{
        width: calc(100%/3.1);
        margin: 0;
    }

}
/*==========================================
CATEGORY BLOCK
==========================================*/

div.contsArea-right div.item_category {
    margin: 40px auto 0;
    padding: 0;
    border-top: 1px solid #EAE6DF;
}

div.contsArea-right div.item_category h1 {
    padding: 0 0 0 20px;
    line-height: 3.2em;
    background: #eaedef;
    display: block;
    /* width: 100%; */
    letter-spacing: -0.01em;
    text-align: left;

}
div.contsArea-right div.item_category h1 span{
    display: inline-block;
    padding-left: 20px;
}

div.contsArea-right div.item_category ul {
    margin: 40px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: calc(100% - 20px);
}

div.contsArea-right div.item_category ul li {
    width: 46%;
    text-align: center;
    margin: 0 2% 60px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

div.contsArea-right div.item_category ul li figure img {
    width: 100%;
    height: auto;
}

div.contsArea-right ul li>figure figcaption {
    margin: 10px auto 0;
    text-align: left;
    width: 84%;
}
div.contsArea-right ul li>figure figcaption p{
    line-height: 1.2;
}
div.contsArea-right ul li>figure figcaption p.price{
    margin: 10px 0 0;
}
div.contsArea-right div.item_category ul li>figure figcaption p{
    margin: 10px auto 5px;
    line-height: 1.5;
}
div.contsArea-right div.item_category ul li>figure figcaption p.price{
    margin: 8px 0 0;
}

div.contsArea-right div.item_category ul li div.btnLine,
div.contsArea-right div.item_category ul li div.btnBeta {
    width: 100%;
    margin: 10px 0 0;
    letter-spacing: -0.01em;
}

div.contsArea-right div.item_category ul li div.btnLine figure figcaption,
div.contsArea-right div.item_category ul li div.btnBeta figure figcaption {
    margin: 0;
}

div.contsArea-right div.item_category ul li .rankNum{
    position: absolute;
    left: 6%;
    top: -3%;
    line-height: 1;
    font-style: italic;
}

div.contsArea-right div.item_category ul li .itemBtnArea{
    margin-top: auto;
}

div.contsArea-right div.item_category ul li figure{
    height: 100%;
}
div.contsArea-right .Category_ttl {
    margin: 0 0 30px;
}
div.contsArea-right .Category_content {
    margin: 30px 0;
}

@media screen and ( min-width: 1025px) {
    div.contsArea-right div.item_category h1 span{
        display: block;
        margin: 20px auto 0;
    }

    div.contsArea-right div.item_category {
        margin: 60px auto 0;
        padding: 60px 0 0;
    }

    div.contsArea-right div.item_category h1 {
        padding: 0 ;
        line-height: 1;
        background: none;
        letter-spacing: 0em;
        margin: 0 auto 40px;
        text-align: center;
    }
    div.contsArea-right div.item_category ul {
        margin: 20px auto 0;
        width: 100%;
    }
    div.contsArea-right div.item_category ul li {
        width: 17%;
        margin: 0 1.5% 60px;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p{
        line-height: 1.3;
    }
    div.contsArea-right div.item_category ul li div.btnLine,
    div.contsArea-right div.item_category ul li div.btnBeta {
        width: 86%;
        margin: 15px 0 0;
    }

}

.categoryBnr_block_img {
    width: 100%;
    text-align: center;
}

@media screen and ( min-width: 1401px) {
    div.contsArea-right div.item_category ul li>figure figcaption p{
        line-height: 1.5;
    }
    .categoryBnr_block_img {
        width: 1000px;
        text-align: center;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1025px){
    div.contsArea-right div.item_category ul.cown li::before,
    div.contsArea-right div.item_category ul.cown li::after {
        position: absolute;
        left: 0px;
        width: 0px;
        height: 0px;
        content: "";
        z-index: 99;
    }
    div.contsArea-right div.item_category ul.cown li::before {
        top: -21.5px;
        border: 15px solid transparent;
        border-bottom: 20px solid gray;
    }
    div.contsArea-right div.item_category ul.cown li::after {
        top: -.5px;
        border: 7px solid transparent;
        border-left: 15px solid gray;
        border-right: 15px solid gray;
    }
    div.contsArea-right div.item_category ul.cown li:nth-of-type(1):before {
        border-bottom: 20px solid #dbb400;
    }

    div.contsArea-right div.item_category ul.cown li:nth-of-type(1):after {
        border-left: 15px solid #dbb400;
        border-right: 15px solid #dbb400;
    }

    div.contsArea-right div.item_category ul.cown li:nth-of-type(2):before {
        border-bottom: 20px solid rgb(192, 192, 192);
    }

    div.contsArea-right div.item_category ul.cown li:nth-of-type(2):after {
        border-left: 15px solid rgb(192, 192, 192);
        border-right: 15px solid rgb(192, 192, 192);
    }

    div.contsArea-right div.item_category ul.cown li:nth-of-type(3):before {
        border-bottom: 20px solid #c47022;
    }

    div.contsArea-right div.item_category ul.cown li:nth-of-type(3):after {
        border-left: 15px solid #c47022;
        border-right: 15px solid #c47022;
    }

    div.contsArea-right div.item_category ul.cown {
        counter-reset: section;
    }

    div.contsArea-right div.item_category ul.cown li figure:before {
        counter-increment: section;
        content: counter(section) "位";
        color: gray;
        width: 100%;
        display: inline-block;
        padding-left: 35px;
        text-align: left;
        box-sizing: border-box;
        font-size: 1.6rem;
        margin-top: -1rem;
    }

    div.contsArea-right div.item_category ul.cown li:nth-child(1) figure:before {
        color:#dbb400;
    }

    div.contsArea-right div.item_category ul.cown li:nth-child(2) figure:before {
        color:rgb(192, 192, 192);
    }

    div.contsArea-right div.item_category ul.cown li:nth-child(3) figure:before {
        color:#c47022;
    }

    div.contsArea-right div.item_category ul li figure img {
        width: 100%;
        height: auto;
    }

    div.contsArea-right div.item_category ul li>figure figcaption {
        margin: 10px auto 0;
        text-align: left;
        width: 84%;
    }
    div.contsArea-right div.item_category ul li>figure figcaption p{
        line-height: 1.2;
    }
    div.contsArea-right div.item_category ul li>figure figcaption p.price{
        margin: 10px 0 0;
    }
    div.contsArea-right div.item_category ul li>figure figcaption p{
        margin: 10px auto 5px;
        line-height: 1.5;
    }
    div.contsArea-right div.item_category ul li>figure figcaption p.price{
        margin: 8px 0 0;
    }

    div.contsArea-right div.item_category ul li div.btnLine,
    div.contsArea-right div.item_category ul li div.btnBeta {
        width: 100%;
        margin: 10px auto 0;
        letter-spacing: -0.01em;
    }

    div.contsArea-right div.item_category ul li div.btnLine figure figcaption,
    div.contsArea-right div.item_category ul li div.btnBeta figure figcaption {
        margin: 0;
    }

    div.contsArea-right div.item_category ul li .rankNum{
        position: absolute;
        left: 6%;
        top: -3%;
        line-height: 1;
        font-style: italic;
    }

    div.contsArea-right div.item_category ul li .itemBtnArea{
        margin-top: auto;
    }

    div.contsArea-right div.item_category ul li figure{
        height: 100%;
    }
}

@media screen and (max-width: 1024px){
    .ttl-sp {
        font-size: 2.2rem;
    }
}
