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

/*---------------------------------------------------------
	共通項目
----------------------------------------------------------- */

p.other a:before{
	content:"";
	background:url(../img/othe_btn_01.png);
	background-size:contain;
	position:absolute;
	width:50px;
	height:50px;
	margin-top:-3%;
	top:50%;
	left:30%;
}

p.other a:after{
	content:"";
	background:url(../img/othe_btn_02.png);
	background-size:contain;
	position:absolute;
	width:50px;
	height:50px;
	margin-top:-3%;
	top:50%;
	right:30%;
}

/*---------------------------------------------------------
	switchBtn
----------------------------------------------------------- */

.switchBtn{
	display:none;
}

/*---------------------------------------------------------
	side_banner
----------------------------------------------------------- */

#side_banner{
	position:absolute;
	top:50px;
	right:0;
	position:fixed;
	z-index:200;
}

#side_banner ul li{
	background-image:url(../img/contents_bg.jpg);
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

#side_banner ul li a{
	display:block;
	text-align:center;
	padding:35px 15px 20px 15px;
	margin-bottom:10px;
	border:2px #3873A3 solid;
	border-right:none;
	font-weight:900;
	line-height:1.0;
	border-bottom-width:20px;
	border-top-width:5px;
}

#side_banner ul li a span{
	font-size:11px;
}

.arrow{
    position: relative;
}

.arrow::before{
    content:'';
    width:14px;
    height:14px;
    background:#fff;
    border-radius:50%;
    position:absolute;
    bottom:-17px;
    right:50%;
	margin-right:-6px;
}
.arrow::after{
    content:'';
    width:0;
    height:0;
    border:solid 3px transparent;
    border-left:solid 5px #3873A3;
    position:absolute;
    bottom:-13px;
    right:50%;
	margin-right:-6px;
}


/*---------------------------------------------------------
	MEDIA QUERIES
----------------------------------------------------------- */

#item-list > ul.cols-2 > li{
	margin-top:15%;
}

#item-list > ul.cols-3 > li{
	margin-top:10%;
}

#item-list > ul.cols-4 > li{
	margin-top:8%;
}

#item-list > ul.cols-2 > li > .inner{
	padding:15px;
	border-radius:15px;
}

#item-list > ul.cols-3 > li > .inner{
	padding:10px;
	border-radius:10px;
}

#item-list > ul.cols-4 > li > .inner{
	padding:4px;
	border-radius:4px;
}

/*---------------------------------------------------------
	header
----------------------------------------------------------- */

#header{
	background-attachment:fixed;
}

/*---------------------------------------------------------
	head_img
----------------------------------------------------------- */

.cols-2 .head_img{
	top:-13%;
}

.cols-3 .head_img{
	top:-12%;
}

.cols-4 .head_img{
	top:-10%;
}

/*---------------------------------------------------------
	sale_period
----------------------------------------------------------- */

.cols-2 .sale_period span {
	font-size:16px;
	line-height:1.3em;
}

.cols-3 .sale_period span {
	font-size:13px;
}

.cols-4 .sale_period span {

}

/*---------------------------------------------------------
	contents
----------------------------------------------------------- */

.cols-2 .contents{
	padding:15px;
}

.cols-3 .contents{
	padding:10px;
}

.cols-4 .contents{
	padding:5px;
}

/*---------------------------------------------------------
	item_img
----------------------------------------------------------- */

.cols-4 .item_img .mask {
	width:70%;
	left:15%;
}

/*---------------------------------------------------------
	icon
----------------------------------------------------------- */

.cols-4 #icon ul li span{
	font-size:11px;
}

/*---------------------------------------------------------
	cut_price
----------------------------------------------------------- */

.cols-2 .cut_price{
	padding:11%;
}

.cols-2 .cut_price span{
	font-size:40px;
}

.cols-3 .cut_price span{
	font-size:25px;
}

.cols-4 .cut_price span{
	font-size:20px;
}

/*---------------------------------------------------------
	menu
----------------------------------------------------------- */

.cols-2 .menu li a:after {
	margin-top:-3%;
	width:25px;
	height:25px;
}

.cols-3 .menu li a:after {
	margin-top:-2%;
	width:15px;
	height:15px;
}

.cols-4 .menu li a:after {
	margin-top:-3%;
	width:15px;
	height:15px;
}

.cols-2 .menu a:before{
	margin-top:-3%;
	width:25px;
	height:25px;
}

.cols-3 .menu a:before{
	margin-top:-4%;
	width:20px;
	height:20px;
}

.cols-4 .menu a:before{
	margin-top:-3%;
	width:15px;
	height:15px;
}

/*---------------------------------------------------------
	item_name
----------------------------------------------------------- */

.cols-2 .item_name{
	margin:2% auto;
	padding:2%;
	font-size:15px;
}

.cols-3 .item_name{
	margin:5% auto;
	padding:3%;
	font-size:13px;
}

.cols-4 .item_name{
	margin:5% auto;
	padding:2%;
	font-size:12px;
}

/*---------------------------------------------------------
	point_price
----------------------------------------------------------- */

.cols-2 .point_price{
	font-size:25px;
}

.cols-3 .point_price{
	font-size:16px;
}

.cols-4 .point_price{
	font-size:15px;
}

.cols-2 .point_price:before{
	font-size:18px;
	font-weight:bold;
}

.cols-4 .point_price:before{
	content:"▼　";
}

.cols-2 .point_price:after{
	font-size:18px;
	font-weight:bold;
}

.cols-4 .point_price:after{
	content:"ポイントGET　▼";
}


/*---------------------------------------------------------
	nomal_price
----------------------------------------------------------- */

.cols-2 .nomal_price{
	font-size:25px;
}

.cols-3 .nomal_price{
	font-size:16px;
}

.cols-4 .nomal_price{
	font-size:15px;
}

.cols-2 .nomal_price:before{
	font-size:18px;
	font-weight:bold;
}

.cols-4 .nomal_price:before{
	content:"▼　通常価格：";
}

.cols-2 .nomal_price:after{
	font-size:18px;
	font-weight:bold;
}

.cols-4 .nomal_price:after{
	content:"円(税込)　▼";
}


/*---------------------------------------------------------
	point_nomal_price
----------------------------------------------------------- */

.cols-2 .point_nomal_price{
	font-size:45px;
}

.cols-3 .point_nomal_price{
	font-size:25px;
}

.cols-4 .point_nomal_price{
	font-size:20px;
}

.cols-2 .point_nomal_price:before{
	font-size:15px;
}

.cols-3 .point_nomal_price:before{
	font-size:11px;
}

.cols-4 .point_nomal_price:before{
	font-size:10px;
}

.cols-2 .point_nomal_price:after{
	font-size:18px;
}

.cols-3 point_nomal_price:after{
	font-size:12px;
}

.cols-4 .point_nomal_price:after{
	font-size:10px;
}


/*---------------------------------------------------------
	sale_price
----------------------------------------------------------- */

.cols-2 .sale_price{
	font-size:45px;
}

.cols-3 .sale_price{
	font-size:25px;
}

.cols-4 .sale_price{
	font-size:20px;
}

.cols-2 .sale_price:before{
	font-size:15px;
}

.cols-3 .sale_price:before{
	font-size:11px;
}

.cols-4 .sale_price:before{
	font-size:10px;
}

.cols-2 .sale_price:after{
	font-size:18px;
}

.cols-3 .sale_price:after{
	font-size:12px;
}

.cols-4 .sale_price:after{
	font-size:10px;
}

/*---------------------------------------------------------
	cart_btn
----------------------------------------------------------- */

.cols-2 .cart_btn a{
	font-size:15px;
	margin-top:15px;
}

.cols-3 .cart_btn a{
	margin-top:10px;
}

.cols-4 .cart_btn a{
	font-size:11px;
	margin-top:4px;
	padding:5% 0 8% 0;
}


/*---------------------------------------------------------
	top_wrapper
----------------------------------------------------------- */

#top_wrapper{
	background-attachment:fixed;
}

#top_wrapper > ul >li{
	display:inline-block;
	vertical-align:middle;
}


/*---------------------------------------------------------
	top_page_01
----------------------------------------------------------- */

.top_page_01{
	width:38%;
	margin-left:2%;
}

.top_page_01 img{
	padding:6% 0;
}

.top_page_01 p{
	border:1px #fff solid;
	font-size:14px;
	padding:3%;
}

/*---------------------------------------------------------
	top_page_02
----------------------------------------------------------- */

.top_page_02{
	width:60%;
	padding:2%;
}


/*---------------------------------------------------------
	top_page_03
----------------------------------------------------------- */


/*---------------------------------------------------------
	tabs
----------------------------------------------------------- */


/*---------------------------------------------------------
	content
----------------------------------------------------------- */



/*---------------------------------------------------------
	mediabox
----------------------------------------------------------- */

.top_page_03 .mediabox{
	width:20%;
}


/*---------------------------------------------------------
	ribon
----------------------------------------------------------- */