@charset "utf-8";
/* CSS Document */

/*PC550px、SP95%*/
.js-container{
	width:95%;
	max-width:980px;
	margin:auto;
}


/*------------------------------
1.today_new　エリア用（javaScript連動）
------------------------------*/

#today_new_items .item-wrapper,
#today_re_items .item-wrapper{
	margin-bottom: 2em;
}

/*リンクエリア：フレックスボックス*/
#today_new_items .item-box,
#today_re_items .item-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;
	align-items: flex-start;
	
	text-align: left;
}
#today_new_items .item-box > div,
#today_re_items .item-box > div{
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 40px ) / 5 );
	margin-right: 10px;
}
/*右端のマージンをゼロ設定*/
#today_new_items .item-box > div:nth-child( 5n ),
#today_re_items .item-box > div:nth-child( 5n ){
	margin-right: 0;
}
#today_new_items .item-cell,
#today_re_items .item-cell{
	padding-bottom:30px;
	font-size:1em;
}
#today_new_items .item-cell img,
#today_re_items .item-cell img{
	width:100%;
}
#today_new_items .item-price.sale,
#today_re_items .item-price.sale{
    color:red;
}
#today_new_items .tax-included,
#today_re_items .tax-included{
    font-size:0.6em;
}
@media (max-width: 768px) {
	#today_new_items .item-wrapper,
	#today_re_items .item-wrapper{
		margin: 0 3vw;
	}
	#today_new_items .item-box > div,
	#today_re_items .item-box > div {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 1vw ) / 2 );
		margin-right: 1vw;
	}
	#today_new_items .item-box > div:nth-child( 5n ),
	#today_re_items .item-box > div:nth-child( 5n ){
		margin-right: 1vw;
	}
	#today_new_items .item-box > div:nth-child( 2n ),
	#today_re_items .item-box > div:nth-child( 2n ){
		margin-right: 0;
	}
}

/*title部分*/
#today_new_items .item-boxtitle,
#today_re_items .item-boxtitle{
	font-size:1.25em;
	margin-bottom:0.5em;
	font-weight: bold;
}
#today_new_items .item-boxtitle span,
#today_re_items .item-boxtitle span{
	font-size:1.5em;
}

/*表示制御*/
.displaynone{/*非表示*/
	display: none;
}
.displayblock{/*表示*/
	display: block;
}


/*------------------------------
2.順番入れ替え（javaScript連動）
------------------------------*/
/*
utm_term=reitem　の場合

script_changeorder.js　で
#today_new_wrapperのあるdivに
.today_new_wrapperのclassを付与し
orderで順番変更
*/
.today_new_wrapper{
	display: grid;
	grid-template-columns : 1fr;
}
.today_new_wrapper > #today_new_items{
	width: 100%;
	order: 2;
}
.today_new_wrapper > #today_re_items{
	width: 100%;
	order: 1;
}