@charset "UTF-8";
/* CSS Document */
.archiveControl,
.pankuzu,
#main > article > div{
	margin-left: 0.98%;
	margin-right: 0.98%;
}
.pankuzu,
#main > article {
	margin-bottom: 2%;
}


/******************
一覧ページ
******************/

.archiveControl {
	overflow: hidden;
	clear: both;
	margin-bottom: 2%;
}
.displayArea {
	margin-bottom: 2%;
	overflow: hidden;
}
.displayDesc {
	float: left;
}
.displayDesc span {
	font-size: 1.5em;
}
.displayVol {
	float: right;
}
.displayVol select {
	margin-left: 5px;
}
.pager {
	clear: both;
	overflow: hidden;
}
.pager ul {
	text-align: right;
}
.pager ul li {
	display: inline;
}
.pager ul li span,
.pager ul li a {
	font-size: 1.167em;
	margin-left: 5px;
	padding: 3px;
}
.pager ul li a {
	font-weight: bold;
}

/******************
詳細ページ
******************/

.photoArea {
	width: 48%;
	float: left;
	margin: 0 4% 2% 0;
}
.photoArea figure {
	width: 100%;
	line-height: 0;
	margin-bottom: 2%;
}
.photoArea figure img {
	max-width: 100%;
	height: auto;
}
.photoArea ul {
	background-color: #eee;
	overflow: hidden;
	clear: both;
}
.photoArea ul li {
	width: 25%;
	padding: 1%;
	float: left;
	line-height: 0;
	cursor: pointer;
}
.photoArea ul li img {
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

.itemInfo {
	width: 48%;
	float: right;
}
.itemInfo .lead {
	margin-bottom: 3%;
	font-size: 1.166em;	
}
.itemExplain {
	margin-bottom: 3%;
}
.itemPrice {
	margin-bottom: 3%;
	padding: 2% 0;
	text-align: right;
	font-size: 1.5em;
}
.itemPrice strong {
	font-size: 1.6em;
}

/*
購入ボタン周り
*/

.cartArea {
	background-color: #eee;
	padding: 3%;
	margin-bottom: 3%;	
}
.itemSkuSelect {
	margin-bottom: 3%;
	font-size: 1.166em;
}
.itemSkuSelect li {
	margin-bottom: 2%;
}
.itemSkuSelect li:last-child {
	margin-bottom: 0;
}
.handleBuyArea {
	background-color: #fff;
	padding: 3%;
	margin-bottom: 3%;
}
.selectQuantity {
	font-size: 1.166em;
}
.selectQuantity select {
	vertical-align: top;
	margin-left: 5px;
	min-width: 50px;
}
.btnCartIn,
.btnFavorite {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 50px;
	position: relative;
	color: #fff;
	padding: 5px 0;
	margin-top: 3%;
}
.btnCartIn {
	background-color: #4CAF50;
}
.btnCartIn i,
.btnFavorite i {
	vertical-align: middle;
	margin-right: 10px;
}
.btnFavorite {
	background-color: #F06292;
}
.btnCartIn:hover,
.btnFavorite:hover {
	text-decoration: none;
}

/*
オプションみたいな？
*/

.itemTypeSelect li {
	border-top: 1px solid #ccc;
	padding: 0 0 0 5px;
	font-size: 1.167em;
}
.itemTypeSelect li input[type=radio] {
	margin-right: 10px;
}
.itemTypeSelect li label{
	display: table;
	width: 100%;
	cursor: pointer;
}
.itemTypeSelect li div {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	padding: 10px 0;
}
.itemTypeSelect li:last-child div {
	padding: 10px 0 0 0;
}
.itemTypeSelect li div.price {
	text-align: right;
	font-size: 0.857em;
}
.itemTypeSelect li div.price span {
	font-size: 2em;
}

/*
付加商品
*/

.optionContent > section {
	margin-bottom: 2%;
	background-color: #eee;
	padding: 2%;
}
.optionContent > section:last-child {
	margin-bottom: 0;
}

.optionContent h3 {
	font-size: 1.3333em;
	margin-bottom: 2%;
	background-color: #999;
	padding: 1%;
	color: #fff;
}
.optionContent ul {
	margin-left: 1em;
}
.optionContent ul li {
	margin-bottom: 2%;
	overflow: hidden;
	clear: both;
}
.optionContent ul li:last-child {
	margin-bottom: 0;
}
.optionContent ul li figure {
	float: right;
	width: 200px;
	overflow: hidden;
	height: auto;
}
.optionContent ul li figure img {
	width: 100%;
	height: auto;
}
.optionDetail {
	margin-right: 220px;
}
.imgNone .optionDetail {
	margin-right: 0;
}
.optionDetail h4 {
	font-size: 1.333em;
	margin-bottom: 1%;
}
.optionDetail input {
	margin-right: 1em;
}
.optionDetail p {
	margin-left: 2em;
}
.optionDetail .price {
	margin-bottom: 1%;
}
.optionDetail .price span {
	font-size: 1.5em;
	font-weight: bold;
}

/*レビューエリア*/

.reviewArea > div{
	font-size: 1.166em;	
}

.reviewContent ul {
	margin-bottom: 2%;
}
.reviewContent li {
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	padding: 2%;
	margin-bottom: 2%;
}
.reviewContent li:last-child {
	margin-bottom: 0;
}
.reviewContent li:after {
	clear: both;
	content:"";
    display:table;
}
.rateArea {
	float: left;
	width: 20%;
}
.rateArea .starbox{
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
}
.rateArea p {
	font-size: 0.857em;
}
.rateText {
	margin-left: 25%;
}
.rateText h3 {
	margin-bottom: 1%;
}
.reviewWriteForm dl{
	width: 80%;
	margin: 0 auto;
	border: 1px solid #ddd;
	padding: 2%;
}
.reviewWriteForm dt {
	float: left;
	clear: left;
	padding: 2% 0;
}
.reviewWriteForm dd {
	padding: 2% 0 2% 10em;
	border-top: 1px dotted #ccc;
}
.reviewWriteForm dd:last-child{
	border-bottom: 1px dotted #ccc;
}
.reviewWriteForm dd input[type=text],
.reviewWriteForm dd textarea{
	width: 100%;
	padding: 1%;
}
.recommendArea .itemList li {
	width: 20%;
}
.reviewAverage strong {
	font-size: 1.333em;	
}
.reviewAverage .starbox {
	margin-bottom: 3%;
}
/*jstarbox用cssここから*/

.positioner {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.starbox {
	cursor: pointer;
}
.starbox.unchangeable 
{
	cursor: default;
}
.starbox .colorbar,
.starbox .ghost {
	z-index: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}
.starbox .stars {
	display: inline-block;
}

.starbox .stars .star_holder {
	position: relative;
	z-index: 1;
}

.starbox .stars .star_holder .star {
	display: inline-block;
	vertical-align: baseline;
	background-repeat: no-repeat;
}

.starbox .stars .star_holder .star {
	background-image: url('../images/5-large.png');
	width: 33px;
	height: 33px;
}
.starbox.small .stars .star_holder .star {
  width: 17px;
  height: 17px;
  -webkit-background-size: 100% 100%;
       -o-background-size: 100% 100%;
          background-size: 100% 100%;
}

.starbox .stars { background: #cccccc; }
.starbox .rated .stars { background: #dcdcdc; }
.starbox .rated.hover .stars { background: #cccccc; }
.starbox .colorbar { background: #ffcc1c; }
.starbox .hover .colorbar { background: #1e90ff; }
.starbox .rated .colorbar { background: #ffd851; }
.starbox .rated.hover .colorbar { background: #1e90ff; }
.starbox .rated.hover:active .colorbar { background: #ffd851; }
.starbox .ghost { background: #a1a1a1; }

/*jstarbox用cssここまで*/
