a {text-decoration: none; color: #666;}
.pcOnly {display: block;}
.mobileOnly {display: none;}
*, *:before, *:after {box-sizing: border-box;}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto; /*IE8*/
	border: 0;
	vertical-align: middle;
}

ul {list-style: none; padding: 0;}
ul:after,
section:after {content: ''; clear: both; display: block;}

#main section {width: 100%; margin-bottom: 40px; padding: 0;}

.wrap {
	width: 90%;
	overflow: hidden;
	max-width: 1024px;
	margin: 0 auto;
	-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.shopWrap {
  width: 90%;
  max-width: 1024px;
  margin: 0 auto;
  -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
  position: relative;
}

#main h1 {font-size: 18px; margin: 0 auto 1em; line-height: 1; color: #333; width: 90%; max-width: 1024px;}
.more {font-size: 14px; position: relative; padding-right: 20px; text-align: right; width: 90%; max-width: 1024px; margin: -38px auto 1em;}
.more a:after {
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
margin: -5px -5px 0 0;
border-top: solid 1px #7f7f7f;
border-right: solid 1px #7f7f7f;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
#mainCampaign .more {margin-top: 0;}

#main ul {
	margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 15px;}

.ua-ie-8 #main ul,
.ua-ie-9 #main ul {margin-right: -20px; letter-spacing: -.40em;}
.ua-ie-8 #main li,
.ua-ie-9 #main li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top;}

#main img {width: 100%;}

.price {margin-top: 5px; display: block; color: #000; font-size: 11px;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px; font-family: "Helvetica","Lucida Grande", sans-serif;}

#mainCampaign ul li {margin-bottom: 20px; position: relative; box-sizing: border-box; margin: 20px 2% 0 0;}
#mainCampaign .mainPanel,
#mainCampaign .mainPanel img {width: 100%; display: block; max-width: 1024px; height: auto; font-size: 21px; position: relative;}

#mainCampaign .fourPanels li {width: 23.5%; max-width: 245px; height: auto;}
#mainCampaign .threePanels li {width: 32%; max-width: 327px; height: auto;}
#mainCampaign .twoPanels li {width: 49%; max-width: 501px; height: auto;}
#mainCampaign ul li:last-child,
#mainCampaign ul li:nth-child(4n) {margin-right: 0;}

.ua-ie-8 #mainCampaign ul,
.ua-ie-9 #mainCampaign ul {margin-top: 20px;}

#main #product ul {border-bottom: 1px solid #eee; padding-bottom: 10px;}
#main #product ul#product_other {border: 0;}
#main #product li {
  margin: 0 2% 5px 0; width: 15%; box-sizing: border-box; border-radius: 4px; font-size: 12px; padding-right: 2px;
  background-color: #fff; background-size: auto 40px; background-repeat: no-repeat; background-position: 8px center;
}
#main #product li:nth-child(6n) {margin-right: 0;}
#main #product li a {display: block; padding: 0 2px 0 55px; min-height: 60px; position: relative;}
#main #product li span {position: absolute; top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}

.ua-ie-8 #product .title,
.ua-ie-9 #product .title {display: inline-block; padding-top: 20px;}

#main #sale h1 {display: none;}
#main #sale ul {padding: 10px; border: 1px solid #eee; border-radius: 5px;}
#main #sale a {display: block;}

#event li,
#houseVision li,
#lab li {width: 32%; height: auto; margin-right: 2%; position: relative; box-sizing: border-box;}

#event li:nth-child(3n),
#houseVision li:nth-child(3n),
#lab li:nth-child(3n) {margin-right: 0;}

#sale li {width: 33.33%; height: auto; border-right: 1px solid #eee; font-size: 12px; padding: 0 10px 0 20px; box-sizing: border-box;}
#sale img {width: 80px; vertical-align: middle; margin-right: 10px;}
#sale span.desc {width: 60%;   display: inline-block; vertical-align: middle;}

#sale li:last-child,
#event li:last-child,
#houseVision li:last-child,
#lab li:last-child {margin-right: 0;}
#sale li:last-child {border: 0;}

#mainCampaign .title,
#sale li .title,
#event li .title,
#houseVision li .title,
#lab li .title {position: absolute; bottom: 10px; left: 10px; z-index: 2; text-shadow: 1px 1px 3px rgba(0,0,0,.5); font-weight: bold; width: 90%; color: #fff;}

.ua-ie-8 #sale ul,
.ua-ie-9 #sale ul {margin-right: 0; }
.ua-ie-8 #sale li,
.ua-ie-9 #sale li {font-size: 11px; width: 32%;}


#mainCampaign li:before,
#event li:before,
#houseVision li:before,
#lab li:before {
	content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.2) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.04)), color-stop(100%,rgba(0,0,0,0.2)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 );
  z-index: 1;
}

#main span.label {background: #000; padding: 3px; font-size: 12px; color: #fff; position: absolute; top: 10px; left: 10px;}
#main #lab .ideaPark {background: url(/img/idea-park_bak.jpg);}
#main #lab .ideaPark span.desc {position: absolute; top: 13px; left: 90px; font-size: 12px;}

blockquote:before {color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;}

#lab .ideaPark .title {color: #333; text-shadow: none; left: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#lab .ideaPark .text {
	quotes: "\201C""\201D""\2018""\2019";
	overflow: hidden;
	display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  position: absolute;
  max-width: 100%;
  top: 50px;
  padding: 20px 0;
  margin: 20px;
  max-height: 80px;
}

#houseVision .desc {display: inline-block; background: #fff; opacity: .6; font-size: 11px; color: #333; text-shadow: none; padding: 2px 3px;}

#mainCampaign li a, #event li a, #houseVision li a, #lab li a {
  display: block;
  padding: 0;
  min-height: 60px;
  position: relative;
  z-index: 1000;
}

#map {width: 100%; height: 250px;}
#mapMask {display: block; position: absolute; z-index: 1001; width: 100%; height: 250px; bottom: 0; right: 0;}
#mapMask.getGeolocation {width: 50%;}
#mapMask.draggable {display: none;}
.nearbyTitle {display: none; font-size: 14px; color: #999; margin-top: 10px;}
#shop #overlimit {font-size: 13px;}
#shoplist .shopid {display: none;}
#shoplist ul.shops {max-height: 220px;}
#shoplist li.entry {font-size: 12px; border-top: 1px solid #eee; width: 100%; padding: 10px 0;}
#shoplist .shopname {font-weight: bold; font-size: 14px;}
#search_combobox {position: absolute; top: -33px; left: 100px;}
#shoplist {width: 50%; float: left; display: none;}
#shoplist ul.shops {height: 280px; overflow: auto;}
#shoplist.getGeolocation {display: block;}
#map.getGeolocation {width: 50%;}
#shoplist.getGeolocation .nearbyTitle {display: block;}
#shoplist ul.shops li.entry {border-top: 1px solid #e9e9e9; padding: 10px 0; width: 90%; height: auto; font-size: 12px; float: none;}

aside#misc .content {width: 90%; margin: 0 auto; max-width: 1024px;}

#main #newItem li,
#main #topicItem li {width: 15%; margin-right: 2%;}
#main #newItem li:last-child,
#main #topicItem li:last-child {margin-right: 0;}
#main #newItem img,
#main #topicItem img {width: 100%; height: auto;}
#main #newItem span.name,
#main #topicItem span.name {display: block; margin-top: 5px; font-size: 12px;}
#main #topicItem .more span {padding-left: 20px;}
#main #newItem span.thumb,
#main #topicItem span.thumb {display: inline-block; padding: 15px;}

#information li {display: none; width: 100%; margin-bottom: 10px;}
#information li:first-child,
#information li:nth-child(2),
#information li:nth-child(3) {display: block;}


#misc {padding: 15px 0; background: #ebebeb;}
#misc:after,
#misc ul:after {content: ''; display: block; clear: both;}
#misc ul {float: left; margin: 0; padding: 0; list-style: none;}
#misc li {float: left; margin-right: 10px;}
#misc a {display: block;}
#misc a img {height: 25px; width: auto;}
#misc .passport {float: right;}
#misc .passport a img {height: 25px; padding-left: 10px; width: auto;}
#misc .youtube a img {height: 21px; margin-top: 2px;}

#main #information h1 {font-size: 15px;}
#information {margin: 0; width: 90%; clear: both;}
#information .date {display: block; margin-bottom: 5px; font-size: small; color: #999;}


@media screen and (max-width: 920px) {
	#mainCampaign .fourPanels li,
	#mainCampaign .twoPanels li {width: 49%; max-width: 501px; height: auto;}
	#mainCampaign .fourPanels li:nth-child(2n),
	#mainCampaign .twoPanels li:nth-child(2n) {margin-right: 0;}

  #main #product {background: #f7f7f7; padding: 20px 0 0;}
  #main #product li {width: 23.5%; height: auto; border-bottom: 1px solid #eee;}
  #main #product li:nth-child(6n) {margin-right: 2%;}
  #main #product li:nth-child(4n) {margin-right: 0;}
  #sale li {text-align: center;}
  #sale img {float: none; margin-right: 0;}
  #sale span.desc {display: block; width: 100%;}
}


@media screen and (min-width: 768px) and (max-width: 825px) {
	#lab .ideaPark .text {max-height: 60px;}
}

@media screen and (min-width: 768px) {
	#lab .ideaPark .title {top: 42px;}
}

@media screen and (max-width: 658px) {
	#lab .ideaPark .text {max-height: 250px;}
}


@media screen and (max-width: 767px) {
	#siteName img {width: 140px;}
	#event li,
	#houseVision li,
	#lab li {width: 100%; height: auto; margin: 0 0 20px 0; position: relative; box-sizing: border-box;}

	#newItem li:nth-child(4),
  #newItem li:nth-child(5),
  #newItem li:nth-child(6),
  #topicItem li:nth-child(4),
  #topicItem li:nth-child(5),
  #topicItem li:nth-child(6) {display: none;}
  #main #newItem li,
  #main #topicItem li {width: 32%;}
  #main #newItem li:nth-child(3),
  #main #topicItem li:nth-child(3) {margin-right: 0;}

  #lab li.ideaPark .title,
  blockquote {font-size: 16px;}
  #lab .ideaPark .title {top: 45px;}
	blockquote {height: 90px; top: 100px;}
  #lab .ideaPark .title {font-size: 18px;}
  #lab .ideaPark .text {top: 100px;}
}

@media screen and (min-width: 481px) {
	#mainCampaign .mainPanel img.pc {display: block;}
	#mainCampaign .mainPanel img.mobile {display: none;}
}

@media screen and (max-width: 480px){
	#mainCampaign .mainPanel img.pc {display: none;}
	#mainCampaign .mainPanel img.mobile {display: block;}
	#mainCampaign .fourPanels li,
	#mainCampaign .threePanels li,
	#mainCampaign .twoPanels li {width: 100%; height: auto; margin-right: 0; max-width: 100%;}
  #main #product li {width: 32%; height: auto; margin-bottom: 5px;}
  #main #product li:nth-child(4n) {margin-right: 2%;}
  #main #product li:nth-child(3n) {margin-right: 0;}
  #main #lab .title,
  #main #houseVision .title {font-size: 16px;}
  blockquote  {top: 60px;}
	#main #event li:nth-child(2),
	#main #event li:nth-child(3) {display: none;}
	#mainCampaign .wrap,
	#event .wrap,
	#lab .wrap,
	#houseVision .wrap,
	.shopWrap {width: 100%;}
	#mainCampaign ul li,
	#lab ul li,
	#houseVision ul li {margin: 3px 0 0 0;}
	#sale li {padding: 0 10px;}
	.more {padding-right: 25px;}
	.more a:after {margin: -5px 0 0 0;}
	#main #newItem span.thumb,
	#main #topicItem span.thumb {padding: 10px;}
	#lab .ideaPark .text {top: 80px;}

  #map {width: 100%; height: 162px;}
  #mapMask {height: 162px;}
  #mapMask.getGeolocation {width: 100%;}
  #shoplist ul.shops {max-height: 250px;}
  #search_combobox {top: 0; left: 0; margin-bottom: 10px; padding-left: 5%;}
  #shoplist {width: 90%; float: none; margin: 0 auto; display: none;}
  #map.getGeolocation {width: 100%;}
  #shoplist ul.shops li.entry {padding: 10px 0; width: 100%; font-size: 12px; float: none;}
  #misc .youtube a img {height: 20px; margin-top: 0;}
}


@media screen and (max-width: 360px){
	#main #sale ul {padding: 10px 0;}
	#main #sale li {padding: 0 5px;}
	#main #product li {width: 49%; margin-right: 2%;}
	#main #product li:nth-child(3n) {margin-right: 2%;}
  #main #product li:nth-child(2n) {margin-right: 0;}
  #misc a img {height: 20px; width: auto;}
	#misc .passport a img {height: 20px; padding-left: 10px; width: auto;}
	.more {margin:-38px 25px 1em;}
	#houseVision h1 {font-size: 17px;}
	.more a:after {margin-top: -3px;}

}