/* -------------------------------------------------------------------------- */

/*	Clearfix
/* -------------------------------------------------------------------------- */

.cf:before,
.cf:after {
	display: table;
	content: " ";
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}


/* -------------------------------------------------------------------------- */

/*	Layout Class
/* -------------------------------------------------------------------------- */

/*  Column-Size
----------------------------------------*/

.column1120 {
	max-width: calc( 1180px + 2em );
	margin-right: auto;
	margin-left: auto;
	padding: 0 1em;
}
.column1080 {
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
}
.column980 {
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
}


/*  Column-Grid
----------------------------------------*/

.column-grid .list a {
	display: block;
}
.column-grid .list .img img {
	max-width: none;
	width: 100%;
}
.column-grid .list .overlay {
	position: relative;
}
.column-grid .list .overlay .sub-img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	opacity: 0;
}
.column-grid .list .overlay:hover .sub-img {
	opacity: 1;
}
.column-grid .list .overlay > img {
	opacity: 1;
}
.column-grid .list .overlay > img:hover {
	opacity: 0;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.column-grid .list .info {
	margin: 10px 5px 0;
}
.column-grid .list h2 {
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
}
.column-grid .list .price {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'sans-serif';
	font-size: 12px;
	margin-top: 4px;
}
.column-grid .list .tax_inc_block {
	font-size: 11px;	
}
.column-grid .list .tax_inc_block em {
	margin-right: 3px;
	font-size: 11px;	
}


/* -------- .column-grid -------- */

.column-grid {
	display: flex;
	flex-wrap: wrap;
}
.column-grid .list {
	margin-right: 9px;
	width: calc( 50% - 4.5px );
}
.column-grid .list:nth-child( even ) {
	margin-right: 0;
}
.column-grid .list:nth-child( n+3 ) {
	margin-top: 28px;
}

/* -------- .column-grid1 -------- */

.column-grid1 {
	margin: 0 auto !important;
	max-width: 50%;
	justify-content: center;
}
.column-grid1 .list {
	margin: 0 0 24px;
	width: 100%;
}
.column-grid1 .list:last-child {
	margin-bottom: 0;
}
.column-grid1 .list:nth-child( n+3 ) {
	margin-top: 0;
}


/*  B. Layout-Module
 *  特集 + 投稿記事一覧レイアウト
----------------------------------------*/

/* -------- .layout-list -------- */

.layout-list .list {
	margin-bottom: 20px;
}
.layout-list .list:last-child {
	margin-bottom: 0;
}
.layout-list .list a {
	display: block;
}
.layout-list .list .in {
	display: flex;
	flex-wrap: wrap;
}
.layout-list .list h2 {
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
}
.layout-list .list h2 + p {
	margin-top: 10px;
}
.layout-list .list p {
	font-size: 12px;
	line-height: 1.4;
}
.layout-list .list .img {
	position: relative;
	margin-right: 18px;
}
.layout-list .list .data {
	margin-top: 6px;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'sans-serif';
	font-size: 10px;
	letter-spacing: .5px;
	opacity: .7;
}
/* -- not-thumbnail -- */
.not-thumbnail .list {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px dotted #ccc;
}
.not-thumbnail .list:first-child {
	padding-top: 16px;
	border-top: 1px dotted #ccc;	
}
.not-thumbnail .list .data {
	margin: -2px 0 6px;
}

/* ---- .layout-list1 ---- */

.layout-list1 {
	margin-top: -5px;
}
.layout-list1 .list .img {
	width: calc( 50% - 13.5px );
}
.layout-list1 .list .bg-img {
	background-size: cover;
	background-position: center;
	padding: 32.5% 0 0;
}
.layout-list1 .list .img + .info {
	margin-top: 4px;
	width: calc( 50% - 4.5px );
}

/* ---- .layout-list2 ---- */

.layout-list2 .list .img {
	width: 100px;
}
.layout-list2 .list .bg-img {
	background-size: cover;
	background-position: center;
	height: 100px;
}
.layout-list2 .list .img + .info {
	width: calc( 100% - 118px );
}


/* -------- .layout-grid -------- */

.layout-grid .list {
	margin-bottom: 20px;
}
.layout-grid .list:last-child {
	margin-bottom: 0;
}
.layout-grid .list .img {
	position: relative;
	margin-bottom: 12px;
}
.layout-grid .list .bg-img {
	background-size: cover;
	background-position: center;
	margin-right: -1em;
	margin-left: -1em;
	padding: 65% 0 0;
}
.layout-grid .list .bg-img.no-img {
	background-size: contain;
	background-repeat: no-repeat;
}
.layout-grid .list h2 {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}
.layout-grid .list .data {
	margin-top: 4px;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'sans-serif';
	font-size: 10px;
	letter-spacing: .5px;
	opacity: .7;
}
.layout-grid .list p {
	font-size: 12px;
	line-height: 1.4;
}

/* -------- other -------- */

/* ---- .tag ---- */
.layout-grid .list .tag,
.layout-list .list .tag {
	margin-bottom: 2px;
	font-size: 10px;
	width: 100%;
	opacity: .7;
}
.layout-grid .list .tag span {
	margin-right: 12px;
	letter-spacing: -.5px;
}
.layout-grid .list .tag span:last-child {
	margin-right: 0;
}
.layout-list .list .tag {
	margin-bottom: 12px;
}
.layout-list .list .tag span {
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.layout-list .list .img .tag {
	position: absolute;
	bottom: 12px;
	left: 0;
	margin: 0;
	letter-spacing: -.5px;
}
.layout-grid .list .img .tag span,
.layout-list .list .img .tag span {
	background: rgba( 255, 255, 255, .4 );
	border-radius: 0;
	border: none;
}

/* ---- .data, excerpt ---- */
.layout-grid .list .list p,
.layout-list.list .list .data {
	font-size: 12px;
}

/* ------ produt_tag ------ */
.list .img {
	position: relative;
	overflow: hidden;
}
.opt-tag {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	z-index: 1;
	flex-wrap: wrap;
}
.secondary .opt-tag {
	display: none;
}
.opt-tag li {
	padding: 4px 8px;
	font-size: 10px;
	line-height: 1.2;
	color: #fff;
}
.campaign_message {
	color: #fff;
	display: inline-block;
	font-size: 10px;
	line-height: 1.2;
	padding: 4px 8px;
	margin-bottom: 8px;
	border-radius: 30px;
}
.add-to-cart .opt-tag {
	position: inherit;
	margin-bottom: 15px;
}
.add-to-cart .opt-tag li {
	margin: 0 5px 5px 0;
	font-size: 12px;
}
/* brand label */
.product-brand-tag {
	display: flex;
	flex-wrap: wrap;
	font-size: 10px;
	line-height: 1.4;
	margin-bottom: 5px;
	opacity: .7;
}
.product-brand-tag span:not(:last-child):after {
	content: ', ';
}
.add-to-cart .product-brand-tag {
	font-size: 90%;
}
/* Soldout */
.itemsoldout {
	margin-top: -1px;
}
.secondary .itemsoldout {
	margin-top: 4px;
	font-size: 12px;
}

.secondary .campaign_message {
	margin-bottom: 4px;
}


/**
 * 16.1 Mobile Large 620px
 */
@media screen and (min-width: 38.75em) {


	/* -------- .column-grid -------- */

	/*.column-grid3 .list:nth-child( even ),*/
	.column-grid4 .list:nth-child( even ),
	.column-grid5 .list:nth-child( even ),
	.column-grid6 .list:nth-child( even ) {
		margin-right: 9px;
	}

	/* -------- .column-grid3 -------- */

	.column-grid3 .list {
		width: calc( 33.333% - 6px );
	}
	.column-grid3 .list:nth-child( even ) {
		margin-right: 9px;
	}
	.column-grid3 .list:nth-child( 3n ) {
		margin-right: 0;
	}
	.column-grid3 .list:nth-child( n+3 ) {
		margin-top: 0;
	}
	.column-grid3 .list:nth-child( n+4 ) {
		margin-top: 36px;
	}

	/* -------- .column-grid4・6 -------- */

	.column-grid4 .list,
	.column-grid6 .list {
		width: calc( 25% - 6.75px );
	}
	.column-grid4 .list:nth-child( 4n ),
	.column-grid6 .list:nth-child( 4n ) {
		margin-right: 0;
	}
	.column-grid4 .list:nth-child( n+3 ),
	.column-grid6 .list:nth-child( n+3 ) {
		margin-top: 0;
	}
	.column-grid4 .list:nth-child( n+5 ),
	.column-grid6 .list:nth-child( n+5 ) {
		margin-top: 36px;
	}

	/* -------- .column-grid5 -------- */

	.column-grid5 .list {
		width: calc( 20% - 7.2px );
	}
	.column-grid5 .list:nth-child( even ) {
		margin-right: 9px;
	}
	.column-grid5 .list:nth-child( 5n ) {
		margin-right: 0;
	}
	.column-grid5 .list:nth-child( n+3 ) {
		margin-top: 0;
	}
	.column-grid5 .list:nth-child( n+6 ) {
		margin-top: 36px;
	}

	/* -------- .column-grid5 for Slider -------- */

	.coordinates-column-slide.column-grid5 .list {
		width: inherit;
	}
	.coordinates-column-slide.column-grid5 .list:nth-child( even ) {
		margin-right: 0;
	}
	.coordinates-column-slide.column-grid5 .list:nth-child( n+6 ) {
		margin-top: 0;
	}


	/*  Layout-Module
	----------------------------------------*/

	.layout-list .list {
		margin-bottom: 36px;
	}
	/* -------- .layout-list-column -------- */

	.layout-list-column2 {
		display: flex;
		flex-wrap: wrap;
	}
	.layout-list-column2 .list {
		margin-right: 24px;
		margin-bottom: 0;
		width: calc( 50% - 18px );
	}
	.layout-list-column2 .list:nth-child( even ) {
		margin-right: 0;
	}
	.layout-list-column2 .list:nth-child( n + 3 ) {
		margin-top: 36px;
	}

	/* -- not-thumbnail -- */
	.layout-list-column2.not-thumbnail .list {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.layout-list-column2.not-thumbnail .list:first-child {
		padding-top: 0;
		border-top: none;	
	}

	/* -------- .layout-grid -------- */

	.layout-grid .list .bg-img {
		margin-right: 0;
		margin-left: 0;
	}
	.layout-grid .info {
		padding: 0 5px;
	}
	.layout-grid-column2:not(.slide),
	.layout-grid-column3:not(.slide) {
		display: flex;
		flex-wrap: wrap;
	}
	
	/* -------- .layout-grid-column2 -------- */

	.layout-grid-column2 .list {
		margin-right: 12px;
		width: calc( 50% - 6px );
	}
	.layout-grid-column2:not(.slide) .list:nth-child(even) {
		margin-right: 0;
	}
	.layout-grid-column2:not(.slide) .list:nth-child( n + 3 ) {
		margin-top: 36px;
	}


	/* -------- .layout-grid-column3 -------- */

	.layout-grid-column3 .list {
		margin-right: 12px;
		width: calc( 33.333% - 8px );
	}
	.layout-grid-column3:not(.slide) .list:nth-child(3n) {
		margin-right: 0;
	}
	.layout-grid-column3:not(.slide) .list:nth-child( n + 4 ) {
		margin-top: 36px;
	}

}


/**
 * 16.3 Tablet Large 880px
 */
@media screen and (min-width: 55em) {


	/*  Column-Size
	----------------------------------------*/

	.column1120 {
		max-width: calc( 1120px + 4em );
		padding: 0 2em;
	}

	.layout-grid .list .bg-img:hover,
	.layout-list .list .bg-img:hover {
		opacity: .7;
		-webkit-transition-duration: .5s;
		-moz-transition-duration: .5s;
		transition-duration: .5s;
	}

	/*  Column-Grid
	----------------------------------------*/

	/* -------- .column-grid -------- */

	.column-grid  {
		margin: 0;
	}
	.column-grid .list h2 {
		margin: 0;
		font-size: 13px;
	}
	.column-grid .list .price {
		font-size: 13px;
	}
	
	.column-grid6 .list:nth-child( even ) {
		margin-right: 9px;
	}

	/* -------- .column-grid6 -------- */

	.column-grid6 .list {
		width: calc( 16.666% - 7.5px );
	}
	.column-grid6 .list:nth-child( 4n ) {
		margin-right: 9px;
	}
	.column-grid6 .list:nth-child( 6n ) {
		margin-right: 0;
	}
	.column-grid6 .list:nth-child( n+5 ) {
		margin-top: 0;
	}
	.column-grid6 .list:nth-child( n+7 ) {
		margin-top: 36px;
	}


	/*  Layout-Module
	----------------------------------------*/

	.layout-list .list p {
		font-size: 13px;
	}

	/* -------- .layout-list1 -------- */

	.layout-list1 .list .img {
		margin-right: 24px;
		width: calc( 50% - 17.5px );
	}
	.layout-list1 .list .img + .info {
		width: calc( 50% - 6.5px );
	}

	/* ---- .layout-list2 ---- */

	.layout-list2 .list .img {
		margin-right: 24px;
		width: 120px;
	}
	.layout-list-column1.layout-list2 .list .bg-img {
		margin-right: 24px;
		width: 120px;
		height: 120px;
	}
	.layout-list2 .list .img + .info {
		width: calc( 100% - 144px );
	}

	.section-home .not-thumbnail {
		margin: 0 auto;
		max-width: 880px;
	}
	.not-thumbnail .list {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
	.not-thumbnail .list:first-child {
		padding-top: 30px;
	}
	.not-thumbnail .data {
		float: left;
	}
	.not-thumbnail h2.title,
	.not-thumbnail p {
		margin-left: 100px;
		width: calc( 100% - 100px );
	}
	.not-thumbnail .list h2 + p {
		margin-top: 12px;
	}
	.not-thumbnail .list .data {
		margin-top: -3px;
		font-size: 14px;
	}

	/* -------- .layout-list-column -------- */

	.layout-list .list .data {
		font-size: 12px;
	}
	.layout-list .list h2 {
		font-size: 14px;
	}
	.layout-list-column2 {
		display: flex;
		flex-wrap: wrap;
	}
	.layout-list-column1 .list .bg-img {
		padding: 0;
		width: 254px;
		height: 174px;
	}
	.layout-list-column1 .list .img + .info {
		width: calc( 100% - 278px );
	}
	.layout-list-column2 .list {
		margin-right: 72px;
		width: calc( 50% - 36px );
	}
	.layout-list-column2 .list:nth-child( even ) {
		margin-right: 0;
	}
	.layout-list-column2 .list:nth-child( n + 3 ) {
		margin-top: 24px;
	}


	/* -------- .layout-grid -------- */

	.layout-grid .list h2 {
		margin-bottom: 8px;
		font-size: 15px;
	}
	.layout-grid .info {
		padding: 0 5px;
	}
	.layout-grid .list .tag,
	.layout-list .list .tag {
		margin-bottom: 10px;
		font-size: 11px;
	}
	.layout-grid .list .data {
		margin-top: 12px;
		font-size: 12px;
	}
	.layout-grid-column2:not(.slide),
	.layout-grid-column3:not(.slide) {
		display: flex;
		flex-wrap: wrap;
	}
	
	/* -------- .layout-grid-column2 -------- */

	.layout-grid-column2 .list {
		margin-right: 18px;
		margin-bottom: 0;
		width: calc( 50% - 9px );
	}
	.layout-grid-column2:not(.slide) .list:nth-child(even) {
		margin-right: 0;
	}
	.layout-grid-column2:not(.slide) .list:nth-child( n + 3 ) {
		margin-top: 36px;
	}

	/* -------- .layout-grid-column3 -------- */

	.layout-grid-column3 .list {
		margin-right: 18px;
		margin-bottom: 0;
		width: calc( 33.333% - 12px );
	}
	.layout-grid-column3:not(.slide) .list:nth-child(3n) {
		margin-right: 0;
	}
	.layout-grid-column3:not(.slide) .list:nth-child( n + 4 ) {
		margin-top: 24px;
	}

	/* ------ produt_tag ------ */
	.opt-tag li,
	.campaign_message {
		font-size: 11px;
	}

}