* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

body {background-color: #fbf5e5;}

.mobileOnly {display: none;}
.pcOnry {display: block;}

#globalHeader {position: relative;}
#globalHeader .image00 {position: absolute; height: auto; top: -10px; left: -10px; z-index: -1; width: 30%; max-width: 430px;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
#globalHeader .image00 img {width: 100%;}
.leadSection h1 {font-size: 1.5em;}
@media (max-width: 480px) {
	#globalHeader .image00 {width: 60%;}
}

#featureHeader {position: relative; display: block;}
#featureHeader h1 {z-index: 10; width: 25%; max-width: 400px; display: inline-block;}
#featureHeader h1 img {height: auto; width: 100%;}
#featureHeader .mainimg {max-width: 1024px; width: 100%; margin: 0 auto;}
#featureHeader img {width: 100%;}

.outsideWrap {display: block; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.annotation {font-size: 12px;}

.wrapper {width: 90%; margin: 0 auto; overflow: hidden; box-sizing: border-box; max-width: 1024px; padding: 40px 0;}

aside#news {width: 100%; max-width: 600px; margin: 0 auto; padding: 15px; background-color: rgba(255,255,255,.5); border-radius: 5px; font-size: 13px; color: #333;}
aside#news dl {margin: 0;}
aside#news dt {display: inline-block; float: left;}
aside#news dd {padding-left: 50px;}
aside#news dd a {text-decoration: underline; color: #333;}
@media (max-width: 600px) {
	aside#news {width: 90%; max-width: 580px;}
}

aside.share {text-align: center; color: #999; font-size: 12px; margin: 0 auto 40px;}
aside.share a {width: 22px; height: auto; display: inline-block; margin: 0 0 0 10px;}
aside.share a img {width: 100%; vertical-align: middle; opacity: .6;}
aside.share a img.fbBtn {width: 85%;}

.leadSection {text-align: center; padding: 0; width: 80%; margin: 20px auto;}
.leadSection h1 {font-size: 1.5em;}
@media (max-width: 480px) {
	.leadSection {font-size: 12px;}
	.leadSection h1 {font-size: 1.2em;}
}

.pagetop {display: block; text-align: right; padding: 20px;}
.pagetop a {padding-left: 20px; background: url(/img/common/arrow_top.png) no-repeat left center; font-size: 12px;}

.price {font-size: 12px; margin-left: 10px; display: inline-block;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px; font-family: "Helvetica","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6","ＭＳ Ｐゴシック" ,sans-serif;}

#featureHeader {height: auto;}
figure.col2_1 {margin: 0;}

.relatedLink {display: block; text-align: right; margin-top: 20px;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ccc; padding: 10px 20px 10px 35px; text-decoration: none;}
.relatedLink a:hover {border: 1px solid #191919;}

.imageArea {position: relative;}
.imageArea img {position: absolute;}

aside:after {content: ""; clear: both; display: block;}

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
	position: relative;
	overflow: hidden;
}

.item {
	display: inline-block;
	background: #FEFEFE;
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	border-radius: 4px;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.ua-ie-8 .item,
.ua-ie-9 .item {max-width:30%;}

.item img {width: 100%; margin-bottom: 5px;}
.item .detail {font: 12px/18px sans-serif; color: #333; margin: 0;}
.item .itemDetail {margin: 10px 0 0 0; font: 12px/18px sans-serif;}
.item a {display: block;}
.item a + a {margin-top: 5px;}
.item a .name {text-decoration: underline;}

@media (max-width: 767px) {
	.item {padding: 10px;}
	.item .detail {font-size: 11px;}
}

#sort {list-style: none; margin: 20px 0 30px; padding: 0; text-align: center;}
#sort li {display: inline-block; margin: 0 0 10px 10px; cursor: pointer; padding: 5px 10px; background-color: #dfc684; border-radius: 4px; color: #fff;}
#sort li:first-child {border: 0; margin-left: 0;}
#sort li:hover {background-color: #e6d6ac;}
#sort li.active {font-weight: bold; background-color: #e6d6ac;}


@media (min-width: 768px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}

@media (max-width: 767px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

@media (max-width: 480px) {
	#columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

#columns:hover .item:not(:hover) {
	opacity: 0.8;
}