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


/*
 *	一般設定
 */
.wrapper{
	background: #20043d;
}
ul.navi a:hover{
    color: #dbb400;
}
a{
    text-decoration: none;
}
.f_left{
    float:left;
}
.f_right{
    float:right;
}
.diagonal_big{
    position: absolute;
    top: 0;
    left: 0;
}
.contents{
    width: 100%;
    margin: 0 auto;
	max-width:1180px;
	min-width:640px;
}
#header{
    text-align: center;
    padding-top: 27px;
	position:relative;
	background:linear-gradient(#020003,#220440);
	background:-webkit-linear-gradient(#020003,#220440);
}
#header .logo{
    margin: 0 auto;
}
#logo{
	display:block;
	margin:0 auto;
	width:110px;
}
/*-------------------バナー記述---------------------*/
a.bnr{
	display: block;
	width: 980px;
	height: 500px;
	background: url(../../starfire/images/common/HP_banner.png) no-repeat;
	margin: 30px auto 0;
}
a.bnr:hover{
	opacity: 0.8;
}
/*-------------------バナー記述---------------------*/


/*----------------------------------------navi-----*/
ul.navi{
	float:right;
	margin-top:-180px;
	margin-right:20px;
}
ul.navi a{
    font-size: 12px;
    color: #fff;
}
ul.navi .l_border{
    border-left: #808080 solid 1px;
    padding: 0 5px;
}
ul.navi .pr20{
    padding-right: 5px;
}
ul.navi .mr5{
	margin-right:5px;
}

/*----------------------------------------gnavi-----*/
ul.gnavi li a{
	color:#fff;
	font-weight:bold;
}
ul.gnavi li:hover a{
    color: #dbb400;
}
ul.gnavi{
    margin-top: 40px;
	position: relative;
    z-index: 50;
	letter-spacing: 4px;
	margin-bottom: -1px;
}
ul.gnavi li{
    border-left: solid #090111 1px;
    border-bottom: solid 6px transparent;
    text-align: center;
    width: 25%;
}
ul.gnavi li:hover{
    border-bottom: #dbb400 solid 6px;
}
ul.gnavi li a{
    font-size: 18px;
    line-height: 14px;
    color: #fff;
    text-decoration: none;
	width:100%;
	padding-top: 8px;
	display:inline-block;
	text-align:center;

}

ul.gnavi li a span.small{
    font-size: 10px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 5px
    display: block;
    text-align: center;
}

#header ul.gnavi li.r_border{
    border-right: solid #090111 1px;
}

.title_band {
    border-top: 6px solid #090111;
    margin-top: -6px;
    background: url(../images/top_bg.jpg) no-repeat;
	background-size:cover;
    width: 100%;
    padding: 14px 0 0 0;
    position:relative;
	z-index:10;
}
.title_band h3{
    font-size: 40px;
    color: #fff;
}
.title_band .inner{
    text-align: center;
}
.title_band  .diagonal02{
    bottom:-17px;
    right: 2%;
    position: absolute;
	z-index:100;
}


/*------------------------------------------item_box-*/
.item_box a{
	color:#000;
	text-decoration:none;
}
.item_list .item{
    width:216px;
	border:none;
	background-image:url(../images/item_top_bg.png),url(../images/item_bottom_bg.png);
	background-position:top,bottom;
	background-repeat:no-repeat,no-repeat;
	position:relative;
	padding:0;
	margin-right:20px;
	padding-top:18px;
	padding-bottom:18px;
    margin-bottom: 50px;
	transition: opacity 0.2s ease-out;
}
.item:hover{
    opacity: 0.8;
}
.item_list .item a {
	display:block;
	background:url(../images/item_bg.jpg) repeat-x;
}

.item_list .item a .item_inner img.new{
	position:absolute;
}
.item_list .item a .item_inner img.new{
	top:-10px;
	right:-10px;
}
.item_list .item .text{
	padding: 0 17px;
}
.item_list .box{
    padding-top: 50px;
}

.item_list.item_box .item p.new{
    position: absolute;
    top: -15px;
    right: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: #e4007f;
    width: 41px;
    height: 41px;
    border-radius: 50%;
}
.item_list.item_box .item p.new span{
    line-height: 4.2;
    padding-left: 21%;
}
.item_list.item_box .cos_name{
    font-size: 14px;
    background:url(../images/text_border.png) no-repeat;
	background-position:top;
	padding-top:20px;
	margin-top:0;
    color: #333;
	line-height:16px;
}
.item_list.item_box .price{
    font-weight: bold;
    font-size: 14px;
	padding-bottom:5px;
}
.item_list.item_box p.heart{
    font-size: 12px;
    line-height: 1.5;
    color: #333;
	padding-bottom:10px;
	padding-left:0;
}
.item_list.item_box p.heart:before{
    content: url(../images/heart.png);
    position: relative;
    vertical-align: middle;
}
.item_list.item_box p.heart{
    border-top: dotted 1px #bbb;
	padding-top:5px;
}
/*------------------------------------------recommended-*/
#recommended{
    width: 100%;
    position: relative;
    border-top: 3px solid #16022c;
    margin-top: 80px;
    padding-bottom: 40px;
	background:#1a0233;
}
#recommended .diagonal02{
    position: absolute;
    top: -1.33%;
    left: 2.5%;
}
#recommended .inner{
    margin-top: 40px;
}
#recommended .rec_logo{
    float: left;
    margin-right:15px;
}
#recommended h3{
    font-size: 26px;
    color: #fff;
    line-height: 1;
}
#recommended p.jp{
    font-size: 12px;
    color: #fff;
    line-height: 1;
    margin-left: 51px;
    margin-bottom: 35px;
}




#recommended .item_box a{
	color:#000;
	text-decoration:none;
}
#recommended .item{
    height: 283px;
    width: 236px;
    padding: 0 10px 0 10px;
    margin-bottom: 50px;
}
#recommended .item_box a{
	color:#000;
	text-decoration:none;
}
#recommended .item{
    width:216px;
	height:326px;
	border:none;
	position:relative;
	padding:0;
	margin-right:20px;
	padding-top:18px;
	padding-bottom:18px;
}
#recommended .item a {
	display:block;
	background:#fff;
}

#recommended .item a .item_inner img.new{
	position:absolute;
}
#recommended .item a .item_inner img.new{
	top:0;
	right:0;
}
#recommended .item .text{
	padding: 0 17px;
	background:#f5f5f5;
}
#recommended .box{
    padding-top: 50px;
}

#recommended .item_box .item p.new{
    position: absolute;
    top: -15px;
    right: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: #e4007f;
    width: 41px;
    height: 41px;
    border-radius: 50%;
}
#recommended .item_box .item p.new span{
    line-height: 4.2;
    padding-left: 21%;
}
#recommended .item_box .cos_name{
    font-size: 14px;
	padding-top:10px;
	margin-top:0;
    color: #333;
}
#recommended .item_box .price{
    font-weight: bold;
    font-size: 14px;
	padding-bottom:5px;
}
#recommended .item_box p.heart{
    font-size: 12px;
    line-height: 1.5;
    color: #333;
	padding-bottom:10px;
	padding-left:0;
}
#recommended .item_box p.heart:before{
    content: url(../images/heart.png);
    position: relative;
    vertical-align: middle;
}
#recommended .item p.heart{
    border-top: dotted 1px #bbb;
	padding-top:5px;
}
#more {
    margin-top: 30px;
    text-align: center;
}
#more a{
    color: #fff;
    padding: 10px 230px;
    border: 2px solid #fff;
    background: #e93399;
    border-radius: 8px;
}
#more a:hover{
    color: #e93399;
    padding: 10px 230px;
    border: none;
    background: #fff;
    border-radius: 8px;
}
p.copy{
    font-size: 12px;
    text-align: center;
    color: #79688b;
    padding:40px 0;
}



@media screen and (min-width:971px) and (max-width:1230px){/*item04col*/
    .recommend_title,h3{
		padding-left:5%;
	}
	.item_box{
        width: 944px;
        margin: 0 auto;
    }
	.item:nth-child(5n){
        border-right: none;
    }

    #recommended .item:nth-child(4n){
        border-right:none;
    }
	/*-------------------バナー記述---------------------*/
	a.bnr{
		width: 851px;
		height: 315px;
		background-image: url(../../starfire/images/common/Facebook_banner.png);
		margin-top: 50px;
	}
	/*-------------------バナー記述---------------------*/
}
@media screen and (min-width:731px) and (max-width:970px){/*item03col*/
    .recommend_title,h3{
		padding-left:5%;
	}
	.item_box{
        width: 708px;
        margin: 0 auto;
    }
    ul.gnavi li a span.small{
        margin-top: 1px;
    }
	.item:nth-child(5n){
        border-right: none;
    }
    .item:nth-child(4n){
        border-right: none;
    }

    #recommended .item:nth-child(3n){
        border-right:none;
    }
	/*-------------------バナー記述---------------------*/
	a.bnr{
		background-image: url(../../starfire/images/common/Facebook_banner.png);
		margin-top: 50px;
		background-size: contain;
		width: 640px;
		height: 240px;
	}
	/*-------------------バナー記述---------------------*/
}

@media screen and (min-width:642px) and (max-width:730px){/*item02col*/
    .recommend_title,h3{
		padding-left:5%;
	}
	.item_box{
        width: 473px;
        margin: 0 auto;
    }
	.item:nth-child(5n){
        border-right: none;
    }
    .item:nth-child(4n){
        border-right: none;
    }
    .item:nth-child(3n){
        border-right: none;
    }

    #recommended .item:nth-child(2n){
        border-right:none;
    }
    .item{
        margin-bottom: 12%;
    }

    .item_box p.heart:before{
        content:"";
        position: relative;
        vertical-align: middle;
        background: url(../images/heart.png) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 15px;
        height: 11px;
    }
	/*-------------------バナー記述---------------------*/
	a.bnr{
		background-image: url(../../starfire/images/common/Facebook_banner.png);
		margin-top: 50px;
		background-size: contain;
		width: 500px;
		height: 190px;
	}
	/*-------------------バナー記述---------------------*/
}
@media screen and (max-width:641px){/*iphon6Plus以下*/
	.contents{
		width:100%;
	}
	ul.gnavi li a span.small{
        margin-bottom: 1px;
    }
    .recommend_title,h3{
		padding-left:5%;
	}
	.item_box{
        width: 90%;
        margin: 0 auto;
    }
	.item_box .item{
		width:47%;
		margin-right:0;
		background-size:contain;
		padding-top:3.6%;
        background-position: top,0 100.8%;
	}
	.item_list .item a {
		background-size:contain;
	}
	.item_list.item_box .cos_name{
		background-size:contain;
		padding-top:12%;
	}
    .item_box .item img{
		width:100%;
	}
	.item_box .item img.new{
		width:36%;
	}
    div.item:nth-child(2n){
		margin-left:6%;
    }

    #recommended .item:nth-child(2n){
        border-right:none;
		margin-left:6%
    }
	#recommended .item_box{
        width: 90%;
        margin: 0 auto;
    }
	#recommended .item{
		width:47%;
		margin-right:0;
		height:330px;
	}

	#recommended .item img{
		width:100%;
	}
	#recommended .item_box .item img.new{
		width:36%;
	}
	#recommended .item .text{
		padding:0 8%;
	}
	li.item{
		margin-left:0;
	}
	/*-------------------バナー記述---------------------*/
	a.bnr{
		width: 400px;
		height: 300px;
		background-image: url(../../starfire/images/common/ClubCittaHP_banner.png);
		margin-top: 50px;
		background-size: cover;
	}
	/*-------------------バナー記述---------------------*/
}