/* A Modern CSS Reset */
.wrap{
	width:100%;
}
.inner{
	margin: 0 auto;
	width:95%;
	max-width:1000px
}
hr{
	width:100%;
	height:1px;
	background-color:#666666;
}

/* TIMESALバナー*/
#timesale_info{
	width:100%;
	background-color:#c20b09;
	text-align:center;
}
#timesale_info a{
	text-decoration:none;
	color:#ffffff;
}
#timesale_info a .time span{
	background-color:#ffffff;
	color:#c20b09;
}


/* SPECIAL FEATURE*/
#future_slider a,
#insta_slider a,
.reco_box a,
.sf_box a,
.cat_box a,
#new_slider a,
.box a{
	text-decoration:none;
	color:#000000;
}

.box a,
#sp_footer .serch .serch_pick a{
	display:block;
	height:100%;
	width:100%;
}
/* title*/
.title{
	text-align:center;
	margin-bottom:5%;
}
.title span{
	position:relative;
	padding-bottom:2%;
}
.title span:after{
	display:inline-block;
	position:absolute;
	content:"";
	width:27%;
	height:1px;
	background-color:#000000;
	bottom:0;
    left: 0;
    right: 0;
    margin: auto;
}

.title2{
	text-align:center;
	margin-bottom:5%;
}
.title2 span{
	position:relative;
	padding-bottom:2%;
}
.title3{
	text-align:center;
}
.title3 div{
	position:relative;
	z-index:2;
}
.title3 span{
    background-color: #ffffff;
}
.title3 span:before{
    display: inline-block;
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000000;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
	 z-index:-1;
}


/* more */

.more{
	text-align: center;
}
.more a span{
	text-align:center;
	position:relative;
	
	border: 1px solid #000000;
    background-color: #ffffff;
    border-radius: 0;
    color: #000000;
    text-align: center;
    margin: 0 auto;
}
/*
.more a span:after{
		position: absolute;
		content: "";
		border: 1px solid #ffffff;
		border-width: 0 1px 1px 0;
		display: inline-block;
		padding: 5px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		right: 12px;
		top: 27px;
	
}
*/
.more a{
	text-decoration:none;
	color:#ffffff !important;
}
@media only screen and (max-width:640px) {
	.more a span{
		display: block;
	}
}


/* layout */

.two_con{
	width:100%;
	font-size:0;
	text-align:left;
}
.two_con .box{
	font-size:1rem;
	display:inline-block;
	width:calc(98% / 2);
	margin-right:2%;
}
.two_con .box:nth-child(2n){
	margin-right:0;
}
.three_con{
	width:100%;
	font-size:0;
	text-align:left;
}
.three_con .box{
	font-size:1rem;
	display:inline-block;
	width:calc(96% / 3);
	margin-right:2%;
	vertical-align:top;
}
.three_con .box:nth-child(3n){
	margin-right:0;
}
.four_con{
	width:100%;
	font-size:0;
	text-align:left;
}
.four_con .box{
	font-size:1rem;
	display:inline-block;
	width:calc(94% / 4);
	margin-right:2%;
	vertical-align:top;
}
.four_con .box:nth-child(4n){
	margin-right:0;
}
.five_con{
	width:100%;
	font-size:0;
	text-align:left;
}
.five_con .box{
	font-size:1rem;
	display:inline-block;
	width:calc(92% / 5);
	margin-right:2%;
}
.five_con .box:nth-child(5n){
	margin-right:0;
}
@media only screen and (max-width:640px) {
	.two_con .box{
		width:100%;
		margin-right:0;
	}
	.two_con .box:nth-child(2n){
		margin-right:0;
	}
	.three_con .box,
	.four_con .box,
	.five_con .box{
		width:calc(96% / 2);
		margin-right:2%;
	}
	.three_con .box:nth-child(3n){
		margin-right:2%;
	}
	.four_con .box:nth-child(4n){
		margin-right:2%;
	}
	.five_con .box:nth-child(5n){
		margin-right:2%;
	}
	.three_con .box:nth-child(2n),
	.four_con .box:nth-child(2n),
	.five_con .box:nth-child(2n){
		margin-right:0;
	}
}

/* ranking recommend 共通 */

 .box_wrap .box{
	text-align:center;
	vertical-align:top;
}

/* ranking */
.rank_box{
	font-size:0;
}

.rank_box .box_wrap{
	font-size:1rem;
	display:inline-block;
		width:100%;
}
.rank_box .box{
	margin-bottom:5%;
	vertical-align:top;
}
.rank_box .no{
	height:30px;
	margin-bottom:10px;
	font-size:20px;
}
/* recommend */
.reco_box a .souryou{
	background-color:#ff0000;
	color:#ffffff;
}


.sf_box .box{
	margin-bottom:2%;
}
.sf_box .box:nth-child(2n){
	margin-right:0;
}
.sf_box .box .image{
	font-size:1rem;
	display:inline-block;
	width:30%;
	margin-right:2%;
	vertical-align:middle;
}
.sf_box .box .text{
	font-size:1rem;
	display:inline-block;
	text-align:left;
	vertical-align:middle;

}




.cat_box{
	width:100%;
	font-size:0;
}
.cat_box .box{
	border-bottom:2px dotted #898989;
	position:relative;
	text-align:left;
}
.cat_box .box:after{
		position: absolute;
		content: "";
		border: 1px solid #737372;
		border-width: 0 1px 1px 0;
		display: inline-block;
		padding: 5px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		right: 12px;
		top: 27px;
		line-height: 50px;
}

.cat_box .box .image{
	font-size:1rem;
	display:inline-block;
	width:40px;
	height:40px;
	margin:10px auto;
	margin-right:2%;
	vertical-align:middle;
}
.cat_box .box .text{
	font-size:1rem;
	display:inline-block;
	text-align:left;
	vertical-align:middle;
	height:50px;
	line-height:50px;

}



#new_slider .swiper-button-next{
    border: none;
    background-image: none;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    top: calc( 50% - 40px );
}


#new_slider .swiper-button-prev{
    border: none;
    background-image: none;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);
    top: calc( 50% - 40px );
}



@media only screen and (max-width:640px) {
	.cat_box .box{
		width:100%;
		margin-right:0;
	}
	

#new_slider .swiper-button-next{
    width: 20px;
    height: 20px;
    top: calc( 50% - 60px );
	right: -4px;
}


#new_slider .swiper-button-prev{
    width: 20px;
    height: 20px;
    top: calc( 50% - 60px );
	left: -4px;
}

	
	
	
}