/* ===================================================================
** CSS information
** brandName	: green label relaxing
** File Name	: brand.css
=================================================================== */
/*---------------------------------------------------------------
 BrandTop
---------------------------------------------------------------*/
/* headContents
---------------------------------------------------------------*/
#headContents {
	width: 1100px;
	padding-bottom: 72px;
}

/* mainImage */
#mainImage {
	height: 588px;
	margin-top: 20px;
}

#mainImage .slider {
	white-space: nowrap;
}

#mainImage .slider > li {
	display:inline-block;
}

#mainImage .slider.slick-slider {
	white-space: normal;
}

#mainImage .sliderThumnail {
	padding-top: 25px;
}

/* information */
#information {
	margin: 46px auto 0;
	text-align:center;
}

#information ul{
	display:inline-block;
	max-width:480px
}

#information ul li {
	text-align:left;
	font-size:12px;
	margin-top:10px;
	text-indent:.5em;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#information ul li:first-child {
	margin-top: 0;
}

#information ul li a {
	margin-left: 20px;
}

#information ul li a .important {
	color: #ea4630;
}

/* leftColumn.searchArea
---------------------------------------------------------------*/
#leftColumn.search {
	margin-top: 0;
}

/* main
---------------------------------------------------------------*/
.contents {
	padding-bottom: 110px;
}

#main {
	overflow: hidden;
}

#main > div:first-child{
	margin-top:0;
}

/* ttl01 */
.ttl01 {
	height: 38px;
	padding: 2px 0 0 6px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #ededed;
}

.ttl01.noline {
	border-bottom: none;
}

.ttl01 a {
	position: relative;
	float: right;
	font-size: 12px;
	padding: 5px 22px 0 0;
}

.ttl01 a:after {
	content:"";
	position: absolute;
	right: 5px;
	top: 8px;
	display: block;
	position: absolute;
	width:7px;
	height:7px;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* banner */

#banner p + ul {
	margin-top: 26px;
}

#banner ul {
	letter-spacing: -.4em;
	text-align: center;
}

#banner ul > * {
	letter-spacing: normal;
}

#banner ul li {
	display: inline-block;
}

#banner ul li + li {
	margin-left: 26px;
}

/* news */

#news {
	margin-top: 66px;
}

#news ul li {
	clear: both;
	float: left;
	width: 415px;
	border-bottom: 1px solid #ededed;
}

#news ul li:nth-child(even) {
	clear: none;
	float: right;
}

#news ul li:nth-child(-n+2) {
	border-top: 1px solid #ededed;
}

#news ul li a {
	position:relative;
	display: block;
	width: 415px;
	height: 150px;
	padding: 9px 0;
	color: #525252;
	overflow:hidden;
}

#news ul li img {
	position: absolute;
	left: 0;
	top: 9px;
	clip: rect(0, 150px, 150px, 0);
}

#news ul li span {
	display: block;
	padding-left:180px;
	width: 235px;
}

#news ul li .summary {
	max-height:60px;
	padding-top: 8px;
	font-weight: bold;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.6;
}

#news ul li .date,
#news ul li .type {
	margin-top: 5px;
	font-size: 11px;
	color: #868686;
}

#news ul li .mark {
	display: inline;
	margin-left: 5px;
	padding-left:0;
}

#news ul li a:hover {
	text-decoration: none;
}

#news ul li a:hover .summary {
	text-decoration: underline;
}

/* ranking */
#ranking {
	margin-top: 70px;
}

#ranking ol {
	margin-top: 40px;
}

#ranking .slideList01.rank .details a {
	padding: 10px 23px 0;
}

#ranking .sliderThumnail {
	padding-top: 22px;
}

/* preorder */
#preorder {
	margin-top: 60px;
}

#preorder ul li {
	clear: both;
	float: left;
	width: 415px;
	border-bottom: 1px solid #ededed;
}

#preorder ul li:nth-child(even) {
	clear: none;
	float: right;
}

#preorder ul li:nth-child(-n+2) {
	border-top: 1px solid #ededed;
}

#preorder ul li a {
	display: block;
	width: 415px;
	height: 180px;
	padding: 9px 0;
	color: #525252;
}

#preorder ul li .image {
	float: left;
	width:150px;
	height:180px;
	overflow:hidden;
	margin-right: 30px;
}

#preorder ul li span {
	display: block;
}

#preorder ul li .name {
	width: 235px;
	padding-top: 10px;
	font-weight: bold;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.6;
}

#preorder ul li .date,
#preorder ul li .type {
	margin-top: 3px;
	font-size: 11px;
	color: #868686;
}

#preorder ul li .date > span{
	display:inline;
	margin-left:5px;
}


#preorder ul li a:hover {
	text-decoration: none;
}

#preorder ul li a:hover .name {
	text-decoration: underline;
}

#preorder ul li a:hover:not([href]) .name {
	text-decoration: none;
}

#preorder ul li a:hover:not([href]) img {
	opacity:1;
}
/* blog */
#blog {
	margin-top: 60px;
}

#blog ul li {
	clear: both;
	float: left;
	width: 415px;
	border-bottom: 1px solid #ededed;
}

#blog ul li:nth-child(even) {
	clear: none;
	float: right;
}

#blog ul li:nth-child(-n+2) {
	border-top: 1px solid #ededed;
}

#blog ul li a {
	display: block;
	width: 415px;
	padding: 9px 0;
	color: #525252;
}
#blog ul li a:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#blog ul li .image {
	float: left;
	width:140px;
	margin-right: 22px;
	vertical-align: middle;
	overflow:hidden;
}

#blog ul li span {
	display: block;
}
#blog ul li .summary {
	width: 235px;
	padding-top: 3px;
	font-weight: bold;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.6;
}
#blog ul li .summary + .category {
	margin-top:8px;
}
#blog ul li .date,
#blog ul li .category {
	margin-top: 2px;
	font-size: 11px;
	color: #aaa;
}

#blog ul li .comment {
	display: block;
	display: -webkit-box;
	overflow: hidden;
	padding-top: 8px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
	color: #525252;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
}

#blog ul li .date > span{
	display:inline;
	margin-left:5px;
}

#blog ul li a:hover {
	text-decoration: none;
}

#blog ul li a:hover .summary {
	text-decoration: underline;
}

#blog ul li a:hover:not([href]) .summary {
	text-decoration: none;
}

#blog ul li a:hover:not([href]) img {
	opacity:1;
}
/* recommend */
#recommend {
	margin-top: 73px;
}

#recommend > ul {
	margin-top: 40px;
}

#recommend ul li span {
	display: block;
	font-size: 11px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#recommend ul li .name {
	padding-top: 7px;
	display: block;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.6;
}

#recommend ul li .price {
	margin-top: 2px;
}

#recommend ul li a:hover {
	text-decoration: none;
}

#recommend ul li a:hover .name {
	text-decoration: underline;
}

#recommend .sliderThumnail {
	padding-top: 17px;
}

/* styling */

#styling {
	margin-top: 60px;
}

#styling .noSelect{
	height:0px;
	overflow:hidden;
}

#styling .viewSwich {
	position: relative;
	width: 259px;
	margin: 25px auto 0;
	text-align: center;
	letter-spacing: -.35em;
	white-space:nowrap;
}

#styling .viewSwich > * {
	letter-spacing: normal;
}

#styling .viewSwich li {
	display: inline-block;
	width: 128px;
	height: 26px;
	margin:-1px 0;
	line-height: 26px;
	text-align: center;
	border: 1px solid #bababa;
}

#styling .viewSwich li.styleRanking,
#styling .viewSwich li.styleRanking,
#styling .viewSwich li.styleRanking:not(.active):hover {
	border-right: 1px solid #000;
}

#styling .viewSwich li:last-child {
	border-left:0;
}

#styling .viewSwich li.active {
	position:relative;
	border-color:#000;
}

#styling .viewSwich li.active a {
	color: #000;
	cursor: default;
}

#styling .viewSwich li a {
	display: block;
	width: 128px;
	height: 26px;
	color: #bababa;
	cursor: pointer;
}

#styling .viewSwich li:not(.active):hover {
	color:rgba(186,186,186,0.7);
	border-color:rgba(186,186,186,0.7);
}

#styling .viewSwich li a:hover,
#styling .viewSwich li:hover,
#styling .viewSwich li:hover a {
	text-decoration: none;
}

#styling > div > ul,
#styling > div > ol {
	margin-top: 40px;
}

#styling .viewSwich + .styleRanking > ol,
#styling .viewSwich + .styleRanking + .styleNew > ul{
	margin-top: 17px;
}

#styling .details {
	display: block;
	font-size: 11px;
	text-align: center;
	display: block;
	line-height: 1.6;
}

#styling .slideList01 .details{
	width:205px;
}

#styling .styleNew .slideList01 .details {
	width:215px;
}

#styling .slideList01.rank .details{
	min-height:auto;
	width:215px;
}

#styling .slideList01 a .details {
	min-height:34px;
	padding: 11px 5px 0;
}

#styling .slideList01 .details a {
	min-height:34px;
	padding: 11px 33px 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#styling li:hover a {
	text-decoration: underline;
}

#styling .slideList01.rank .details:before{
	top:9px;
}

/* newArrival */
#newArrival {
	margin-top: 52px;
}

#newArrival > ul {
	margin-top: 40px;
}

#newArrival ul li span {
	display: block;
	font-size: 11px;
	text-align: center;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#newArrival ul li .name {
	padding-top: 11px;
}

#newArrival ul li .category,
#newArrival ul li .price {
	margin-top: 2px;
}

#newArrival ul li a:hover {
	text-decoration: none;
}

#newArrival ul li a:hover .name {
	text-decoration: underline;
}

#newArrival .sliderThumnail {
	padding-top: 17px;
}

/* history */
#history {
	overflow: hidden;
	margin-top: 60px;
}

#history .slideList01.rightColumn {
	width: 873px;
	margin-top: 38px;
}

#history .sliderThumnail {
	padding-top: 20px;
}

/* feature */
#feature {
	overflow: hidden;
	margin-top: 63px;
}

#feature .slideList01.rightColumn {
	width: 883px;
	margin-top: 39px;
}

#feature ul li a {
	position:relative;
	display: block;
	width: 270px;
	height:238px;
	text-align: center;
	background:#fafafa;
}

#feature ul li span {
	display: block;
	width: 100%;
}

#feature ul li .image {
	height:157px;
	overflow:hidden;
}

#feature ul li .date {
	margin-top: 10px;
	font-size: 11px;
	color: #868686;
}

#feature ul li .summary {
	margin-top: 5px;
	max-height:60px;
	font-size: 12px;
	color: #525252;
	font-weight: bold;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.6;
}

#feature ul li:hover .summary{
	text-decoration:underline;
}

#feature .sliderThumnail {
	padding-top: 33px;
}

/* bottomBanner */
#bottomBanner {
	margin-top: 59px;
}

#bottomBanner ul li {
	float: left;
	width: 420px;
	margin-top: 20px;
}

#bottomBanner ul li:nth-child(even) {
	margin-left: 20px;
}

#bottomBanner ul li:nth-child(-n+2) {
	margin-top: 0;
}

/* slickslider */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	@media {
		#ranking .slick-slider,
		#recommend .slick-slider,
		#styling .slick-slider,
		#newArrival .slick-slider {
			margin-left:-1px;
		}
	}
}