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



/*商品詳細の余白とレイアウト*/
/*各ページごとに設定が必要*/
#undercolumn .undercolumn-inner1{
	/*padding: 10px 10px 22px 10px;*/
	padding: 0 10px 0 10px;
}
#undercolumn .undercolumn-inner2{
	/*padding: 10px 10px 22px 10px;*/
	padding: 0 0 0 0;
}
@media screen and (min-width: 960px) {
	#undercolumn .undercolumn-inner1{
		margin: 0;
		padding: 0;
		padding-bottom: 15px;
	}
}


#undercolumn2{
	padding: 25px 10px 22px 10px;
}


#undercolumn2{
	color: #fff;
	background: #1e1e1e;
}


@media screen and (min-width: 960px) {
	#undercolumn3{
		padding-top: 45px;
	}
}



/*メインビジュアル*/

@media screen and (min-width: 960px) {
	#main_visual{
		position: relative;
	}
}

@media screen and (min-width: 960px) {
	#main_visual picture{
		width: 1400px;
	}
}

@media screen and (min-width: 960px) {
	#main_visual img{
		width: 1400px;
		margin: 0 auto;
	}
}


@media screen and (min-width: 960px) {
	#main_visual .bg_b{
	}
}


@media screen and (min-width: 960px) {
	#main_visual .bg_b{
	}
}


@media screen and (min-width: 960px) {
	#main_visual .bg_w{
		background-color: #FFFFFF;
	}
}


@media screen and (min-width: 960px) {
	#main_visual .bg_b .line{
		background:url(../img/common/bg-film-white_pc.png) 0 bottom repeat-x;
		padding-bottom: 12px;
		margin-bottom: 40px;
	}
}
@media screen and (min-width: 960px) {
	#main_visual .bg_w .line{
		background:url(../img/common/bg-film-black_pc.png) 0 bottom repeat-x;
		padding-bottom: 12px;
		margin-bottom: 57px;
	}
}

/*動画エリア*/
@media screen and (max-width: 768px) {
.box1{
	width:96% !important;
float:none !important;
padding:0 4% 3% 2%;
}
.box2{
	width:96% !important;
float:none !important;

}


}
/*バナーエリア1*/
@media screen and (min-width: 640px) {
	#undercolumn ul.bn_1col,
	#undercolumn ul.bn_2col{
		width: 960px;
		margin: 0 auto;
	}
}


#undercolumn ul li{
	margin-bottom: 10px;
}
@media screen and (min-width: 960px) {
	#undercolumn ul li{
		margin-bottom: 25px;
	}
}
#undercolumn ul li img.img-border{
	border: solid 1px #ccc;
}


@media screen and (min-width: 960px) {
	#undercolumn ul.bn_2col li{
		margin-bottom: 25px;
		width: 470px;
		float: left;
	}
}


@media screen and (min-width: 960px) {
	#undercolumn ul.bn_2col li.left{
		margin-right: 20px;
	}
}



/*ベストセラー*/
@media screen and (min-width: 960px) {
	#undercolumn2{
	}
}

#undercolumn2 h2{
	width: 170px;
	margin: 0 auto 19px auto;
}
@media screen and (min-width: 960px) {
	#undercolumn2 h2{
		width: 338px;
		padding: 43px 0 39px;
		margin: 0 auto;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li{
		width: 306px;
	}
}


/*ベストセラーの並び*/
@media screen and (min-width: 960px) {
	#best_sellers_box{
		width: 960px;
		margin: 0 auto;
	}
}


#best_sellers_box li{
	display: table;
	margin-bottom: 10px;
}
@media screen and (min-width: 960px) {
	#best_sellers_box li{
		display:inherit;
		float: left;
		width: 306px;
		margin-right: 21px;
		height: 331px;
		text-align: left;
		position: relative;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(3){
		margin-right:0;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(6){
		margin-right:0;
	}
}


#best_sellers_box li .thumbnail{
	display: table-cell;
	width: 120px;
	vertical-align: top;
	padding-right: 15px;
}
@media screen and (min-width: 960px) {
	#best_sellers_box li .thumbnail{
		display:inherit;
		width: 306px;
		padding-right: 0;
	}
}

#best_sellers_box li .text1{
	display: table-cell;
	vertical-align: top;
}


/*ベストセラーのフォントサイズ*/
#best_sellers_box li p.name{
	font-size: 1.1rem;
}
@media screen and (min-width: 960px) {
	#best_sellers_box li p.name{
		font-size: 1.4rem;
		margin-top: 10px;
		margin-bottom: 5px;
		line-height: 1.28;
	}
}


#best_sellers_box li p.description{
	font-size: 1.2rem;
	color: #b3b3b3;
}


/*クラウンをつける*/
	#best_sellers_box li::after {
		content: "";
		display: block;
		height: 42px;
		left: 12px;
		position: absolute;
		/*top: 12px;*/
		width: 46px;
	}

	#best_sellers_box li:nth-child(1)::after{
    	background:url(../img/idx/icon-crown-1.png) left top no-repeat;
    	background-size: 60%
	}

	#best_sellers_box li:nth-child(2)::after{
    	background:url(../img/idx/icon-crown-2.png) left top no-repeat;
    	background-size: 60%
	}

	#best_sellers_box li:nth-child(3)::after{
    	background:url(../img/idx/icon-crown-3.png) left top no-repeat;
    	background-size: 60%
	}

	#best_sellers_box li:nth-child(4)::after{
    	background:url(../img/idx/icon-crown-4.png) left top no-repeat;
    	background-size: 60%
	}

	#best_sellers_box li:nth-child(5)::after{
    	background:url(../img/idx/icon-crown-5.png) left top no-repeat;
    	background-size: 60%
	}

	#best_sellers_box li:nth-child(6)::after{
    	background:url(../img/idx/icon-crown-6.png) left top no-repeat;
    	background-size: 60%
	}


@media screen and (min-width: 960px) {
	#best_sellers_box li::after {
		content: "";
		display: block;
		height: 42px;
		left: 12px;
		position: absolute;
		top: 12px;
		width: 46px;
	}
}
@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(1)::after{
    	background:url(../img/idx/icon-crown-1.png) left top no-repeat;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(2)::after{
    	background:url(../img/idx/icon-crown-2.png) left top no-repeat;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(3)::after{
    	background:url(../img/idx/icon-crown-3.png) left top no-repeat;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(4)::after{
    	background:url(../img/idx/icon-crown-4.png) left top no-repeat;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(5)::after{
    	background:url(../img/idx/icon-crown-5.png) left top no-repeat;
	}
}


@media screen and (min-width: 960px) {
	#best_sellers_box li:nth-child(6)::after{
    	background:url(../img/idx/icon-crown-6.png) left top no-repeat;
	}
}




/*カテゴリー＊*/
.category_box{
	text-align: center;
	font-size: 1.1rem;
}
@media screen and (min-width: 960px) {
	.category_box{
		width: 960px;
		margin: 0 auto;
	}
}


.category_box li{
	padding: 5px 0;
}
@media screen and (min-width: 960px) {
	.category_box li{
		float: left;
		margin: 0 14px;
	}
}


@media screen and (min-width: 960px) {
	#ct1{
		width: 804px;
		margin: 0 auto 13px auto;
	}
}


@media screen and (min-width: 960px) {
	#ct2{
		width: 633px;
		margin: 0 auto;
	}
}


@media screen and (min-width: 960px) {
	.category_box li a{
		display: block;
		padding: 7px 0;
		border: solid 1px #fff;
		text-align: center;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_set{
		width: 122px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_basemake{
		width: 122px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_color_item{
		width: 213px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_makeup_tool{
		width: 235px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_skincare{
		width: 122px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_minimum{
		width: 122px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_mens{
		width: 122px;
	}
}


@media screen and (min-width: 960px) {
	.category_box li#ct_all{
		width: 155px;
	}
}



/*新着*/
#news_box{
	background-color: #FFFFFF;
	color:#000000;
	font-size: 0.9rem;
}

#newslist_link {text-align: right; margin-right: 10px; clear: both;}

.newslist_mark {display: block; float: left; width: 3%;}
.newslist_text {display: block; float: left; width: 94%; margin-bottom: 5px;}

#news_box ul li {clear: both;}

@media screen and (min-width: 960px) {
	#news_box{
		width: 960px;
		margin: 0 auto 10px auto;
		background-color: #FFFFFF;
		color:#000000;
		font-size: 1.4rem;
	}
}


#news_box h2{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}
@media screen and (min-width: 960px) {
	#news_box h2{
		padding-top: 18px;
		padding-bottom: 10px;
		border-bottom: 3px solid #000;
		margin-bottom: 28px;
	}
}


#news_box h2 img{
	width: 82px;
}
@media screen and (min-width: 960px) {
	#news_box h2 img{
		width: 163px;
	}
}


#news_box ul{
	padding: 11px 17px 7px 17px;
}
@media screen and (min-width: 960px) {
	#news_box ul{
		margin-left: 35px;
		padding: 0 0 20px 0;
	}
}


@media screen and (min-width: 960px) {
	#news_box ul li{
		margin-bottom: 5px;
	}
}


#news_box a{
	color: #000;
}

/*告知エリア new*/
.text-news-new{
	color: #ffffff;
	text-align: center;
	margin-bottom: 1%;
 }


/*動画エリア*/
.movie_area{
	background: #555555 url(../img/idx/youtube-movie-bg.gif) repeat fixed top;
	width:100%;
	padding:3% 0 3% 0;
	overflow: hidden;
}
.responsive{
max-width: 960px;
margin: auto;
}
.box1{
	width:48%;
	margin-right:2%;
float:left;

}
.box2{
	width:48%;
	margin-left:2%;
float:left;

}
.youtube-movie{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube-movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.movie-title{
	text-align: center;
	margin-top: 1%;
	color: #b3b3b3;
}

/*コンテンツバナー*/
#contents_box{
	padding: 26px 10px 13px;
	font-size: 1.1rem;
	border-top: solid 4px #000;
	margin-top: 4px;
}
@media screen and (min-width: 960px) {
	#contents_box{
		width: 960px;
		margin: 0 auto;
		font-size: 1.4rem;
		padding: 45px 0 0 0;
	}
}


#contents_box li{
	border: 1px solid #000;
	margin-bottom: 10px;
	display: table;
	width: 100%;
}
@media screen and (min-width: 960px) {
	#contents_box li{
		width: 224px;
		float: left;
		margin-bottom: 20px;
		margin-right: 21px;
		text-align: center;
		border:none;
		display:block;
		height: 246px;
	}
}


@media screen and (min-width: 960px) {
	#contents_box li:nth-child(4){
		margin-right: 0;
	}
}


@media screen and (min-width: 960px) {
	#contents_box li:nth-child(8){
		margin-right: 0;
	}
}


#contents_box li p.photo{
	width: 58px;
	border-right: solid 1px #fff;
	display: table-cell;
}
@media screen and (min-width: 960px) {
	#contents_box li p.photo{
		margin-bottom: 8px;
		width: 224px;
		border-right: none;
		display: block;
	}
}


#contents_box li p.text1{
	display: table-cell;
	vertical-align: middle;
	padding-left: 19px;
}
@media screen and (min-width: 960px) {
	#contents_box li p.text1{
		display:inherit;
		padding-left: 0;
	}
}

#contents_box li p.text1 a{
	display: block;
	color: #000;
}

/*特別新着情報*/
.sp_info{
	background-color: #ffffff;
	color: #000000;
	padding: 8px;
	font-size: 0.9rem;
	margin-bottom: 5px;
}
@media screen and (min-width: 960px) {
	.sp_info{
		text-align: center;
		background-color: #ffffff;
		color: #000000;
		padding: 8px;
		width: 942px;
		margin: 0 auto 12px auto;
		font-size: 1.4rem;
	}
}


.sp_info a:link,
.sp_info a:visited{
	color: #FF0004;
}
@media screen and (min-width: 960px) {
	.sp_info a:link,
	.sp_info a:visited{
		color: #FF0004;
	}
}

@media screen and (min-width: 960px) {
	.sp_info a:hover{
		text-decoration: underline;
	}
}