@charset "UTF-8";

/*==========================================
MAIN BNR BLOCK
==========================================*/
div.contsArea-center .mainBnr_block{
    margin: 0 auto;
    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;
    margin: 0 0;
}

div.contsArea-center ul li a{
    width: 100%;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.contsArea-center .mainBnr_block .mainBox{
    width: 100%
}
div.contsArea-center .mainBnr_block .subBox{
    width: 100%;
}
div.contsArea-center .mainBnr_block .subBox ul{
    margin: 40px 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-center .mainBnr_block .subBox li{
    width: 48.5%;
    margin: 0 auto;
}

div.contsArea-center .mainBnr_block a{
    width: 100%;
}
div.contsArea-center .mainBnr_block img{
    width: 100%;
}
div.contsArea-right .Bnr_block .roundBtn {
    margin: 40px 0 0;
}
div.contsArea-right .Bnr_block .roundBtn a{
    padding: 20px 100px;
}

@media screen and ( min-width: 1025px) {
    div.contsArea-center .mainBnr_block .subBox ul{
        margin: 0 auto;
    }
    div.contsArea-center .mainBnr_block .mainBox{
        width: 66.65%
    }
    div.contsArea-center .mainBnr_block .subBox{
        width: 32%;
    }
    div.contsArea-center .mainBnr_block .subBox li{
        margin: 0 auto 5%;
        width: 100%;
    }
    div.contsArea-center .mainBnr_block .subBox .thumb-item{
/*        overflow: hidden;*/
    }
}

@media screen and ( min-width: 1401px) {
/*
div.contsArea-center .mainBnr_block .mainBox {
    width: 68.5%;
}
*/
}

/*==========================================
NAVI BLOCK
==========================================*/
.contsArea-left .searchBrands {
    margin: 40px auto;
}
.contsArea-left .searchBrands h1 {
    padding: 0 0 0 20px;
    line-height: 3.2em;
    background: #eaedef;
    display: block;
    width: 100%;
    letter-spacing: -0.01em;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.contsArea-left .searchBrands h1 span{
    display: inline-block;
    padding-left: 20px;
}
.contsArea-left .searchBrands h2 {
    padding: 20px 0px 20px 20px;
    line-height: 1.2em;
    background: #eaedef;
    display: block;
    width: 100%;
    letter-spacing: -0.01em;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.contsArea-left .searchBrands h2 span{
    display: inline-block;
    padding-left: 20px;
}
.contsArea-left .searchBrands .slideBnr{
    display: none;
}
.contsArea-left .searchBrands .brandNavi{
    width: 100%;
    margin: 0 auto 0;
}
.contsArea-left .searchBrands .brandNavi li {
    margin-top: 15px;
}
.contsArea-left .searchBrands .brandNavi img{
    width: 100%;
    height: auto;
}
@media screen and (min-width: 641px) and (max-width: 1401px) {
    .contsArea-left .searchBrands .brandNavi{
        display: none;
    }

    .contsArea-left .searchBrands .slideBnr{
        width: calc(100% - 30px);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 auto 0;
        display: block;
    }
    .contsArea-left .searchBrands .slideBnr img{
        width: 100%;
    }
    .contsArea-left .searchBrands .slideBnr .slick-arrow {
        position: absolute;
        line-height: 0;
        font-size: 0;
        width: 30px;
        height: 30px;
        background: #EAE6DF;
        border-radius: 100%;
        top: 50%;
        outline: none;
        z-index: 10;
        cursor: pointer;
        -webkit-transform: translate(0 , -50%);
        transform: translate(0 , -50%);
    }
    .contsArea-left .searchBrands .slideBnr .slick-slide{
        margin: 0 5px;
    }
    .contsArea-left .searchBrands .slideBnr .slick-prev {
        left: 0;
    }
    .contsArea-left .searchBrands .slideBnr .slick-next {
        right: 0;
    }
    .contsArea-left .searchBrands .slideBnr .slick-arrow::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .contsArea-left .searchBrands .slideBnr .slick-prev::after {
        border-left: 2px solid #666666;
        border-bottom: 2px solid #666666;
        -webkit-transform: translate(-40%, -50%) rotate(45deg);
        transform: translate(-40%, -50%) rotate(45deg);
    }
    .contsArea-left .searchBrands .slideBnr .slick-next::after {
        border-right: 2px solid #666666;
        border-bottom: 2px solid #666666;
        -webkit-transform: translate(-60%, -50%) rotate(-45deg);
        transform: translate(-60%, -50%) rotate(-45deg);
    }


}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
    .contsArea-left .searchBrands h2 {
        text-align: center;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 1024px) {
    .ttl-sp {
        font-size: 2.2rem;
    }
    .text-sp-left {
        text-align: left;
        padding: 0 15px;
    }
}

@media screen and ( min-width: 1401px) {
    .contsArea-left .searchBrands .slideBnr{
        display: none;
    }
    .contsArea-left .searchBrands{
        margin: 0;
    }
    .contsArea-left .searchBrands .slideBnr div{
        margin: 0 0 20px;
        width: 100%;
    }
    .contsArea-left .searchBrands .brandNavi{
        margin: 0 auto;
        border-top: 1px solid #EAE6DF;
        border-bottom: 1px solid #EAE6DF;
        padding: 0px 0;
    }
    .contsArea-left .searchBrands .brandNavi li{
        margin: 20px 0;
        /*        width: 18%;*/
    }
}

/*==========================================
BNR BLOCK
==========================================*/
.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: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.Bnr_block ul li{
    width: 48%;
    margin: 0 1% 30px;
}
 .Bnr_block ul li img{
    width: 100%;
    height: auto;
}

@media screen and ( min-width: 1025px) {
    .Bnr_block ul {
        margin: 0px auto 0;
        padding: 0 0 0 20px;
    }
     .Bnr_block ul li{
        width: 32%;
        margin: 0 0.5% 60px;
    }
}

/*==========================================
conts BLOCK
==========================================*/
figure.topconts_block .Bnr_block .moreBtn a{
    background: #eaedef;
}
figure.topconts_block{
    position: relative;
}
figure.topconts_block figcaption{
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 10px;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
figure.topconts_block figcaption .partsTxt {
    text-align: left;
    line-height: 1.5;
    margin: 0 0 5px;
}

figure.topconts_block figcaption .volDate{
    display: inline-block;
    text-align: left;
    padding-right: 10px;
}

figure.topconts_block figcaption .categoryTag{
    display: inline-block;
    padding-right: 10px;
    line-height: 1.3;
}
figure.topconts_block figcaption .categoryTag:last-child{
    padding-right: 0;
}

figure.topconts_block .contsLabel {
    position: absolute;
    left: 0;
    top: -20px;
    background: #354c61;
    padding: 2px 10px;
}

@media screen and ( max-width: 640px) {
.Bnr_block ul li.conts_L{
    width: 90%;
    margin: 0 auto 60px;
}
}


@media screen and ( min-width: 1025px) {
figure.topconts_block figcaption{
    position: relative;
    bottom: 0;
    width: calc(100% - 40px);
    background: #ffffff;
    padding: 10px;
}
.mainBnr_block figure.topconts_block figcaption{
        position: absolute;
    }

figure.topconts_block figcaption .volDate{
    display: inline-block;
}

figure.topconts_block .contsLabel {
    top: 0;
    padding: 2px 10px;
}
}

@media screen and ( min-width: 1401px) {
figure.topconts_block figcaption{
    position: absolute;
    bottom: 0;
    width: calc(100% - 40px);
    background: #ffffff;
    padding: 10px;
}
}

/*==========================================
RANKING BLOCK
==========================================*/

div.contsArea-right div.item_ranking {
    margin: 40px auto 0;
    padding: 0;
    border-top: 1px solid #EAE6DF;
}

div.contsArea-right div.item_ranking h1 {
    padding: 0 0 0 20px;
    line-height: 3.2em;
    background: #eaedef;
    display: block;
    width: 100%;
    letter-spacing: -0.01em;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	
}
div.contsArea-right div.item_ranking h1 span{
    display: inline-block;
    padding-left: 20px;
}
div.contsArea-right div.item_ranking h2 {
    padding: 0 0 0 20px;
    line-height: 3.2em;
    background: #eaedef;
    display: block;
    width: 100%;
    letter-spacing: -0.01em;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	font-size: 3rem;
}
div.contsArea-right div.item_ranking h2 span{
    display: inline-block;
    padding-left: 20px;
}

div.contsArea-right div.item_ranking ul li .itemBtnArea{
    margin-top: auto;
}
div.contsArea-right div.item_ranking ul li figure img {
    width: 100%;
    height: auto;
}

div.contsArea-right div.item_ranking ul li figure figcaption {
    margin: 10px auto 0;
}


div.contsArea-right div.item_ranking ul li div.btnLine,
div.contsArea-right div.item_ranking ul li div.btnBeta {
    width: 100%;
    margin: 15px 0 0;
    letter-spacing: -0.01em;
}

div.contsArea-right div.item_ranking ul li div.btnLine figure figcaption,
div.contsArea-right div.item_ranking ul li div.btnBeta figure figcaption {
    margin: 0;
}

div.contsArea-right div.item_ranking ul li .rankNum{
    position: absolute;
    left: 6%;
    top: -3%;
    line-height: 1;
    font-style: italic;
    z-index: 10;
}

@media screen and ( min-width: 1025px) {
    div.contsArea-right div.item_ranking h1 span{
        display: block;
        margin: 20px auto 0;
        padding: 0;
    }
	    div.contsArea-right div.item_ranking h2 span{
        display: block;
        margin: 20px auto 0;
        padding: 0;
    }

    div.contsArea-right div.item_ranking {
        margin: 60px auto 0;
        padding: 60px 0 0;
    }

    div.contsArea-right div.item_ranking h1 {
        padding: 0 ;
        line-height: 1;
        background: none;
        letter-spacing: 0em;
        margin: 0 auto 40px;
        text-align: center;
    }
	    div.contsArea-right div.item_ranking h2 {
        padding: 0 ;
        line-height: 1;
        background: none;
        letter-spacing: 0em;
        margin: 0 auto 40px;
        text-align: center;
    }
	
    div.contsArea-right div.item_ranking ul {
        margin: 20px auto 0;
        width: 100%;
    }
    div.contsArea-right div.item_ranking ul li {
        width: 22%;
        margin: 0 1% 60px;
    }
    div.contsArea-right div.item_ranking ul li:first-child{
        margin: 0 1% 60px 0;
    }
    div.contsArea-right div.item_ranking ul li:nth-child(5n){
        margin: 0 1% 60px 0;
    }
    div.contsArea-right div.item_ranking ul li:nth-child(4n+4){
        margin: 0 0 60px 1%;
    }

    div.contsArea-right div.item_ranking ul li div.btnLine,
    div.contsArea-right div.item_ranking ul li div.btnBeta {
        width: 86%;
        margin: 15px 0 0;
    }
/*
    div.contsArea-right div.item_ranking ul li:nth-child(n + 5){
        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.mt-0 {
    margin-top: 0;
}

div.contsArea-right div.item_category.mb-40 {
    margin-bottom: 40px;
}

div.contsArea-right div.item_category h1 {
    padding: 20px;
    line-height: 1.2em;
    background: #eaedef;
    display: block;
    width: 100%;
    letter-spacing: -0.01em;
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 20px;
}
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.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 ( 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;
        font-size: 2.4rem;
    }
    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 auto 0;
    }

}

@media screen and ( min-width: 1401px) {
    div.contsArea-right div.item_category ul li>figure figcaption p{
        line-height: 1.5;
    }
}