﻿/*------------- 基本 -------------*/
body{
width:100%;
height:100%;
margin:0;
padding:0;
min-width:250px;

color:#000;
font-family:'Quicksand',"メイリオ",Meiryo, sans-serif;
font-size:14px;

-webkit-text-size-adjust: 100%;
}









a{
text-decoration: none;
color:#000;
}

a:visited{
text-decoration: none;
color:#000;
}



li{
list-style-type: none;
}

.clear{clear:both;}



#container{

background-color:#fff;
z-index:0;
margin:0;
padding:30px 0 0 0 ;
}




/* アニメーションを追加 */
#container img,#container div,#container p, .coupon {
transition: .5s;
transition-delay: .5s;
}









/*------------- ヘッダー -------------*/

#header{
width:100%;
height:25px;
padding:15px 0;
position:fixed;
top:0;
left:0; 
background-color:#fff;
z-index:9999;
border-bottom: 1px solid #cecece;
}

#header div{
width:33.3333%;
height:100%;
float:left;
}

#header img{
width:auto;
height:100%;
}

#header .left img{
margin:0 0 0 10px ;
}


#header .right img{
margin:0 10px 0 0;
}







/*------------- タイトル帯 -------------*/

.obi_box{
margin:50px 0 10px 0;
padding:0;
color:#323232;
text-align:center;
clear:both;
}


.obi_box .obi_title{
margin:0;
padding:0;
font-family: 'Oswald', sans-serif;
font-size:180%;

}

.obi_box .obi_text{
margin:0;
padding:0;
}

.obi_box .obi_date{
margin:20px 0 0 0;
padding:0;
}



/*------------- 画面下部　クーポン -------------*/

#coupon{
width:100%;
position:fixed;
bottom:0;
z-index:200;
padding:0;
margin:0;
bottom:-5px;
opacity:0;
}

#coupon img{
width:100%;
margin:0;

}



.coupon{
width:100%;
position:fixed;
bottom:0;
z-index:200;
padding:0;
margin:0;
bottom:-5px;
opacity:0;
}

.coupon img{
width:100%;
margin:0;

}




/*------------- メインビジュアル -------------*/


.main_arrow{
width:30px;
opacity:0;
position:fixed;
bottom:10px;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}


#main_visual{
width:100%;
height:100%;
}


/**/
.main_title{
display:block;
padding:30px;
margin: 0;
background-size: 100%;
text-align: justify;
/**/
background-image:url(https://www.improves.jp/sp/sp_parts001/top_arrow.gif);
background-position:center bottom;
background-repeat: no-repeat;
background-size:30px;

}




.main_title img{
width:100%;
position:fixed;
top:0;
left:0;
padding:0;
margin: 0;
opacity:1;
z-index:-999;
/*filter: brightness(70%);*/
transition: .3s;
transition-delay: .3s;
}




.main_title .title{
display:block;
width:65%;
margin:50px 0 100px 0;
background-size: 100%;
text-align: left;
}



.first .title{
margin:150px 80px;
opacity:0;
}

.main_title:after {
clear:both;
}

.main_title:nth-child(odd) .title{
float:left;
}
.main_title:nth-child(even) .title{
float:right;
}


.main_title:last-child{
background-image:none;

}

.main_title .title p{
color:#fff;
padding:0;
margin:0;
}

.main_title .title .comment{
font-size:100%;
line-height:150% ;
}

.main_title .title .bigtxt{
font-size:400%;
font-weight:500;
text-align: justify;
font-family: 'Oswald', sans-serif;
line-height: 100% ;
}





.more_button_top{
background-color:rgba(0, 0, 0, 0.5);
border:#fff 1px solid;
clear:both;
color:#fff;
font-family: 'Oswald', sans-serif;
font-size:150%;
text-align:center;
padding:5px;
margin:10px 0px;

}














/*------------- カテゴリ -------------*/


.category_button {
border-top:#7d7d7d 1px solid;
padding:0px;
margin:0px;
}

.category_button a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #323232;
    line-height: 1;
	text-align:center;
}

.category_button label {
	width:50%;
	font-size:100%;
	float:left;
    display: block;
    margin: 0;
    padding :10px 0;
    line-height: 1;
    color :#fff;
    cursor :pointer;
    border-bottom:#7d7d7d 1px solid;
    background-color:#b3b3b3;
    color:#fff;
    box-sizing:border-box;
	text-align:center;
}

.category_button label span{
	font-size:70%;
	margin-top:5px;
    display: block;
	text-align:center;
}


.category_button .left{/* 奇数 */
border-right:#7d7d7d 1px solid;
}



.category_button input {
    display: none;
}

.category_button ul {
	width:100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category_button ul :after{
	clear:both;
}

.category_button ul li {
	width:50%;
	height:35px;
	display:block;
    max-height: 0;
	float:left;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    box-sizing:border-box;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}


.category_button ul li:nth-child(odd){/* 奇数 */
border-right:#7d7d7d 1px solid;
}

.category_button ul li:nth-child(even){/* 偶数 */
}




#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li
{
    max-height: 46px;
    opacity: 1;
    border-bottom:#7d7d7d 1px solid;
}




.category_button ul .all{
	width:100%;
}


.category_button ul .all a{
	background-color:#cbcbcb;
}








/*------------- トレンド -------------*/


.select_button{
border-top:#7d7d7d 1px solid;
padding:0px;
margin:0px;
}


.select_button:after{
clear:both;
}

.select_button li{
width:50%;
display:block;
float:left;
padding:0;
margin:0;
border-bottom:#7d7d7d 1px solid;
background-color:#b3b3b3;
color:#fff;
box-sizing:border-box;
}


.select_button li:nth-child(odd){/* 奇数 */
border-right:#7d7d7d 1px solid;
}

.select_button li:nth-child(even){/* 偶数 */
}

.select_button li a{
width:100%;
display:block;
text-align:center;
padding:10px 0;
margin:0;
color:#fff;
}













/*------------- ジャンル -------------*/


.genre_button{
padding:0px;
margin:0px;
   -webkit-column-count: 3;
   -webkit-column-gap:   3px;
   -moz-column-count:    3;
   -moz-column-gap:      3px;
   column-count:         3;
   column-gap:           3px;
}



.genre_button li img{
width:100%;
height:auto;
}















/*------------- 検索 -------------*/

#keyword{
width:100%;
height:50px;
padding:0px;
margin:0px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
}


#keyword .search_h{
width:80%;
padding:17px 0px 17px 10px;
border:none;
margin:0px;
opacity:0.5;
filter:alpha(opacity=50); /* IE 6,7*/
-ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
-moz-opacity:0.5; /* FF , Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
}


#keyword .search_button{
height:100%;
float:right;
padding:0px;
margin:0px;
    border-radius: 0px;        /* CSS3草案 */  
    -webkit-border-radius: 0px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 0px;   /* Firefox用 */  
}





.keyword_button {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 20px;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
	background: #f0f0f0;
 	border: solid 1px #cfcfcf;
 	box-sizing: border-box;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.keyword_button:before{
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #f0f0f0;
 	z-index: 2;
}

.keyword_button:after{
	content: "";
	position: absolute;
	top: -28px;
	left: 50%;
 	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #cfcfcf;
 	z-index: 1;
}

.keyword_button li {
	float:left;
	margin:5px;
	padding:5px 10px;
	background-color:#b3b3b3;
	border:#7d7d7d 1px solid;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.keyword_button li a{
	color:#fff;
}


.keyword_button span {
	color:#fff;
	margin:5px;
	padding:5px 10px;
	background-color:#b3b3b3;
	border:#7d7d7d 1px solid;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.keyword_button span a{
	color:#fff;
}







/*------------- ピックアップ -------------*/
#pickup{

}

#pickup .list{
position:relative; 
width:100%;
height:150px;
padding:0px;
margin:0 0 5px 0;
}


#pickup .list img{
width:100%;
height:150px;
object-fit: cover; 
top:50px;
}




#pickup .list div{
color:#fff;
width:100%;
position:absolute; 
padding:3px 0 3px 0;
margin:0;
bottom:0;
background:rgba(0, 0, 0, 0.5);
}

#pickup .list p{
padding:0 20px;
margin:0;
font-size:150%;
font-weight:500;
line-height: 100% ;
}

#pickup .list .comment{
font-size:100%;
line-height:150% ;
}















/*------------- コーディネート -------------*/


#coordinate li{
margin-bottom:20px;
}


#coordinate .cood_img{
width:50%;
float:left;
box-sizing:border-box;
padding-left:20px;
}


#coordinate .desc{
width:50%;
float:left;
box-sizing:border-box;
padding-left:15px;
}


.coordinate_phrase{
width:100%;
margin:0px;
padding:0px 0 10px 0;
font-size:120%;
font-weight:600;
text-align:center;
clear:both;
}



#coordinate div img{
width:100%;
height:300px;
object-fit: cover;
}

#coordinate .desc{
padding-right:20px;
}


#coordinate .desc .item{
padding:0 0 2px 0;
margin:0 0 5px 0;
border-bottom:#323232 1px solid;
font-size:80%;
font-weight:400;
}

#coordinate .desc .name{
font-size:80%;
padding:0;
margin:0 0 2px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

#coordinate .desc .price{
text-align:right;
font-size:60%;
padding:0;
margin:0 0 7px 0;
}


#coordinate .desc .price span{
font-size:150%;
font-weight:400;
}

#coordinate .desc a{
line-height:120%;
}














/*------------- ランキング -------------*/


#ranking{
width:100%;
padding:0px;
margin:0px;
position:relative;
}


#ranking br{
display:none;
}



#ranking .index_all_ranking{
width:100%;
padding:0px;
margin:0px;
position:relative;
overflow-x:scroll;
}




#ranking .index_all_ranking .scroll{
	width:812px;
    display:block;
	position:relative;
	padding:0 20px;
}


#ranking .index_all_ranking .scroll .rank_img{
    display:block;
    margin-right:3px;
    width:160px;
	float:left;
	position:relative;
}


#ranking .index_all_ranking .scroll .rank_img:last-child{
    
    margin-right:0;
}











#ranking .arrow_left,#ranking .arrow_right{
width:20px;
height:100%;
display:block;
position:absolute;
color:#999;
background-color:rgba(255, 255, 255, 0.7);
text-align: center;
z-index:10;
font-family: 'Oswald', sans-serif;
font-weight:900;
font-size:150%;
margin:0;
padding:0;
}





#ranking .arrow_left span,#ranking .arrow_right span{
width:20px;
    font-size: 10px;
    position:absolute;
text-align:center;
}

#ranking .arrow_left span{
top:40%;
left:0;
}

#ranking .arrow_right span{
top:40%;
right:0;
}


#ranking .arrow_left{
top:0;
left:0;
}

#ranking .arrow_right{
top:0;
right:0;
}



#ranking img{
width:100%;
height:auto;
}

.rank_img{
position:relative; 
}

.rank_img .rank_number{
	color:#fff;
	font-weight:400;
	position: absolute;
	top: 2px;
	left: 7px;
	margin:0;
	padding:0;
	z-index:100;
}

.rank_img:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-right: 40px solid transparent;
	border-top: 40px solid #999999; 
	content: "";
}

.no1:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-right: 40px solid transparent;
	border-top: 40px solid #343e7c; 
	content: "";
}





.mask_desc{
width:100%;
/*position:absolute;*/
background-color:rgba(255, 255, 255, 0.8);
bottom:0px;
padding:5px 0;
margin:0;
font-size:70%;
box-sizing:border-box;
}

.mask_desc div{
width:20%;
background-color:#999;
color:#fff;
float:left;
padding:9px 0;
margin:0 10px 0 5px;
text-align:center;
}

.mask_desc .new{
background-color:#343e7c;
}


.mask_desc p{
padding:0 0;
margin:0px 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}



.mask_desc .price span{
font-size:150%;
font-weight:400;
}





/*-----------------ランキングページ　sp_ranking.html-----------------*/

.ranking_list{
padding: 0 20px;
}

.ranking_list .rank_img img{
margin-bottom:20px;

}

.ranking_list .rank_img img{
width:50%;
float:left;
}

.ranking_list .rank_img .mask_desc{
font-size:100%;
position:static;
text-align:justify;
width:50%;
float:left;
padding:0;
}


.ranking_list .rank_img .mask_desc p{
white-space:normal;
margin-left:15px;
margin-right:0;
}


.ranking_list .rank_img .mask_desc .name{
border-bottom:1px solid #000;
padding-bottom:5px;
margin-bottom:5px;
}


.ranking_list .rank_img .mask_desc .price{
text-align:right;}



.category_list{
width:100%;
display:block;
padding:10px 0;

border:#323232 1px solid;
clear:both;
color:#323232;
font-family: 'Oswald', sans-serif;
text-align:center;


}






/*------------- 最新入荷アイテム -------------*/

.item img{
width:100%;
margin:0;
}


.item .desc{
padding:0;
margin:0px 20px;
text-align: justify;

}

.item .desc .name{
padding:0 0 5px 0 ;
border-bottom:#323232 1px solid;
}

.item .desc .phrase{
margin:5px 0px;
font-size:120%;
font-weight:800;
}


.column_two{
   -webkit-column-count: 2;
   -webkit-column-gap:   5px;
   -moz-column-count:    2;
   -moz-column-gap:      5px;
   column-count:         2;
   column-gap:           5px;
}







/*------------- 入荷 & 再入荷アイテム -------------*/

#new_re_arrival{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin:0;
}


#new_re_arrival li {
margin:0;
display:block;
width: 33%;
}



#new_re_arrival li img{
width:100%;
margin:0;
display:block;
}



#new_re_arrival li .img_fld{
        position: relative;
        }
#new_re_arrival li .img_fld .pickup_cap{
        width:100%;
        padding:5px 0;
        text-align:center;
        position: absolute;
        bottom: 0;
        left:0;
    }

.pickup_cap{
    color:#FFF;
    background-color:rgba(255, 0, 0, 0.7);
}


#new_re_arrival li .img_fld .soldout {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.3);
 position: absolute;
 top:0;
 left:0;
}

#new_re_arrival li .img_fld .soldout p {
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    border: 2px solid #ff0000;
    color: #ff0000;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    transform: translate(-50%,-50%)rotate(-10deg);
    position: absolute;
    top: 50%;
    left: 50%;
}

#new_re_arrival li br {
    display:none;
}


/*------------- オススメアイテム -------------*/

#recommend_item{
width:100%;
margin:0;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}


#recommend_item li {
margin:0;
display:block;
width:49.5%;
margin-bottom:3px;
}


#recommend_item li img{
width:100%;
margin:0;
display:block;
}




#recommend_item li .img_fld .pickup_cap{
        width:100%;
        padding:5px 0;
        text-align:center;
        position: absolute;
        bottom: 0;
        left:0;
    }

.pickup_cap{
    color:#FFF;
    background-color:rgba(255, 0, 0, 0.7);
}


#recommend_item li .img_fld .soldout {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.3);
 position: absolute;
 top:0;
 left:0;
}

#recommend_item li .img_fld .soldout p {
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    border: 2px solid #ff0000;
    color: #ff0000;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    transform: translate(-50%,-50%)rotate(-10deg);
    position: absolute;
    top: 50%;
    left: 50%;
}







/*------------- MORE -------------*/


.more_button{
border:#323232 1px solid;
clear:both;

color:#323232;
font-family: 'Oswald', sans-serif;
font-size:150%;
text-align:center;

padding:5px;
margin:10px 20px;

}






