@charset "utf-8";
body{ background-color: white; }
#ser_navi   {
	border-bottom-width: 0.25rem;
	border-bottom-style: solid;
	border-bottom-color: #f67e79;
	position: fixed;
	left: 0;
	top: 3rem;
	width: 100%;
	height:2.2rem;
	z-index:200;
	list-style:none;
}
#ser_navi > li  {
	font-size: 1rem;
	background-color: #fdf0e2;
	float: left;
	width: 25%;
	letter-spacing: 0.05rem;
	text-align: center;
	padding-top: 0.5rem;
	cursor:pointer;
	height:1.2rem;
	padding-bottom:0.5rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.class_navi {
	position: fixed;
	width: 100%;
	overflow: hidden;
	top: 5.2rem;
	left: 0;
    padding: 1%;
	/*padding-top: 1%;
    padding-bottom: 1%;*/
    /*background-color: rgba(255, 255, 255, 0.9);*/
	background-color:#FFF;
	border-bottom-width: 0.25rem;
	border-bottom-style: solid;
	border-bottom-color: #f67e79;
	z-index:100;
	display:none;
}

.box { 
	width: 25%; 
	overflow: hidden; 
	z-index:201; 
	background-color:#fdf0e2;
	border-bottom-width: 0.25rem;
	border-bottom-style: solid;
	border-bottom-color: #f67e79;
	display:none;
}
.box p { 
	display:block; margin:0.5rem; padding:5%; 
	text-align:center; font-size: 1.2rem;
	cursor:pointer;
}
.c { background-color:#FF0; border-radius:50%; }
.yearBox {	
    position:fixed; 
	left:0; top:5.1rem;
}
.sortBox{ 
    position:fixed; 
	right:0; top:5.1rem;
}

/*.class_navi a { color:#FC0; }*/
.a { background-color:#fde4e2; }
.rad { border-radius:50%; }
.rad2 { border-radius:10%; }
.navi_boxF{
	width: 31.5%;
	padding: 2% 0.5%;
	float:left;
	font-size: 1.2rem;
	text-align:center;
	cursor:pointer;
	display:inline-block;
	margin: 3% 0;
}

.navi_boxB{
	width: 18.5%;
	height: auto;
	padding: 2% 0.5%;
	float:left;
/*	padding-top: 10px;	
	font-size: 0.9em;*/
    cursor:pointer;
}
/*#ser_navi li img {
	vertical-align: middle;
}
*/
.b {
	display:inline-block;
	font-size: 1.2rem;
	text-align:center;
	margin-top: 2%;
}


@media screen and (max-width: 350px) {
	#ser_navi > li  {
		font-size: 0.8rem;
		padding-top: 0.7rem;
		padding-bottom: 0.3rem;
	}
	.navi_boxF{		
		font-size: 0.9rem;
    }
	.navi_boxB{		
		font-size: 0.9rem;
    }
	.box{
		font-size: 0.8rem;
}
	section {
		margin: 2%;
		width: 95%;
    }
}
@media screen and (min-width: 350px) and (max-width: 550px) {
	section {
	  margin: 2% 1.3%;
	  width: 46%;
	}
}


/*@media screen and (min-width: 851px) {
	#ser_navi > li  {
		font-size: 1.2rem;
	}
	section {
		margin: 3% 1%;
		width: 22%;
    }	
}*/

section { 
	height: auto;
	position:relative; z-index:1; 
	background-color:#fdf0e2;
	float: left;
	border: 2px solid #fdf0e2;
	border-top-left-radius: 1rem; border-top-right-radius: 1rem;
	border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
    box-shadow:0 0 10px rgba(20%,20%,40%,0.5);

	/*box-sizing:border-box;
	-webkit-box-shadow:0 0 10px -3px rgba(20%,20%,40%,0.5);
	box-shadow:0 0 10px -3px rgba(20%,20%,40%,0.5);*/
    padding: 0.3rem 0;

}
figure { position:relative; background-color: white; }
#mainImg { width:95%; height:auto; display:block; padding:2.5%; z-index:1; }
h2 { font-size:1.2rem; text-align:center; }
h3 { font-size:1rem; color:#41070d; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toyTitle { padding:0.3rem; height:2.6rem; }
p { margin-left:7%; }
.cartlogo, .heart{ width: 36%; color:#d12027; cursor:pointer; padding:0.3rem 3%; float: left; font-size: 0.8rem; margin: 0.5rem 4% 0 4%; 
	text-align: center; background-color:rgba(255, 255, 255, 0.5); border-radius: 1rem; box-shadow:0 0 5px -3px rgba(20%,20%,40%,0.5); }
.fafont { font-size:1.8rem; vertical-align:middle; }
#unavailable { position: absolute; left:0; top:0; width:100%; height:auto; display:block; z-index:3; }
#brand { position: absolute; left:3%; top:3%; width:25%; height:auto; display:block; z-index:2; }
.R1 { position: absolute; right:3%; top:0; width:20%; height:auto; display:block; z-index:2; }
.R2 { position: absolute; right:25%; top:3%; width:20%; height:auto; display:block; z-index:2; }

#pageNum { padding-top:1rem; padding-bottom:1rem; font-size:1rem; text-align:center; }
#pageNum a { display:inline-block; width:1rem; height:1rem; padding:0.5rem; color:#d83332; }
.current { display:inline-block; width:1rem; height:1rem; padding:0.5rem; border-radius:50%; background-color:#d83332; color:#FFF; }
#mask2 { position:fixed; top:0;
        left:0; z-index:100; 
		background-color: rgba(60, 60, 60, 0.7); 
		width:100%; height:100%; display:none; 
}
.year { font-size: 0.8rem; color: white; border-radius:0.5rem; display:inline-block; padding:0.2rem; margin:0.3rem 0 0.3rem 2%; cursor: pointer; }
.yellow { background-color: #ffb84d; }
.orange { background-color: #F60; }
.green { background-color: #6C0; }
.brandlogo { display: inline-block; width: 2.8rem; vertical-align:middle; height: auto; margin-left: 2%; cursor: pointer; }

#mask3 { position:fixed; top:0;
        left:0; z-index:100; 
    background-color: rgba(60, 60, 60, 0.7); 
    width:100%; height:100%; 
}
.box2 { 
  width: 25%; 
  overflow: hidden; 
  z-index:201; 
  background-color:#fdf0e2;
  border-bottom-width: 0.25rem;
  border-bottom-style: solid;
  border-bottom-color: #f67e79;
}
.box2 p { 
  display:block; margin:0.5rem; padding:5%; 
  text-align:center; font-size: 1.2rem;
  cursor:pointer;
}