body {
	background-color: #fbf5e5;  
  background-image: url(/de/gift/img/back.jpg);  
}

/*
img,
video {width: 100%; vertical-align: bottom;}
*/

#featureHeader {padding: 20px; position: relative; display: block;}
#featureHeader h1 {z-index: 10; width: 35%; max-width: 400px; margin: 40px;}
#featureHeader h1 img {height: auto; width: 100%;}
#featureHeader ul {list-style: none; position: absolute; top: 20px; right: 20px; margin: 0; padding: 0;}
#featureHeader ul li {display: inline-block; font-size: 14px; margin-left: 20px; display: none;}
#featureHeader li.home {margin-left: 80px; display: block;}
#featureHeader .topImage {position: absolute; width: 50%; height: auto; top: 60px; left: 45%; z-index: -1; max-width: 630px;}
#featureHeader .topImage img {width: 100%;}

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

.wrapper {display: block; overflow: hidden; width: 80%; margin: 0 auto; box-sizing: border-box; max-width: 1024px; padding: 40px 0;}
.wrapper .wrapper {margin: 0 auto; padding: 20px 0 0; width: 100%;}

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

#container {
	width: 100%;
	height: auto;
 	height: inherit;
 	margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 0 40px 3%;

}

#container:after {
  content: '';
  display: block;
  clear: both;
}

.item {
/* 	display: inline-block; */
	width: 30%;
	margin: 0 2% 2% 0;
	height: auto; 
  background: #fff;
  border-radius: 4px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  box-sizing: border-box;
}

.item img { width: 100%; display: block;}
.item a {display: block;}
.item a .name {text-decoration: underline;}
.item a:hover {color: #111;}
.item p.detail {font-size: 14px; margin: 5px 0 10px;}

.misc p.detail,
.misc p.more {margin: 0; padding: 0; display: block; font-size: 13px;}
.misc p.more a {text-decoration: underline; font-size: small; margin-top: 10px;}
.misc p.sns {text-align: right;position: absolute; right: 20px; bottom: 0;}
.item .sns a {padding: 5px 5px 0; display: inline-block;} 
.sns img {width: 15px; height: auto;}
.sns .tw img {width: 18px;}

.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;}


/* header {position: fixed; height: 70px; top: 0; transition: top 0.2s ease-in-out; width: 100%; background: #fff;} */
#featureHeader {height: auto;}



@media screen and (min-width: 321px) and (max-width: 800px) {
	#featureHeader h1 {margin: 40px 0 0 0;}
	#container {padding: 2% 0 2% 3%;}
	.item {width: 45%;}
	#featureHeader li.home {margin-left: 40px;}
}

@media screen and (max-width: 320px){
	#featureHeader h1 {margin: 40px 0 0 0;}
	#container {padding: 2% 0 2% 3%;}
	.item {width: 93%; margin: 0 2.5% 2.5% 0;}
	#featureHeader li.home {margin-left: 40px;}
}