@charset "utf-8";

/*
************************************************************************
* タイル
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.tile
{
	display: flex;
	flex-wrap: wrap;
	margin:-1em;
}
.tile-item
{
	display:block;
	width:calc(33.33333% - 2em);
	margin:1em;
}
.tile-item.tile-item-2
{
	display:block;
	width:calc(50% - 2em);
	margin:1em;
}
.tile-item.tile-item-3
{
	display:block;
	width:calc(33.33333% - 2em);
	margin:1em;
}
.tile-item.tile-item-4
{
	display:block;
	width:calc(25% - 2em);
	margin:1em;
}
.tile-item .title
{
	display:block;
	padding:0.5em;
}
.tile-item .price
{
	display:block;
	padding:0.5em;
	padding-top:0.0em;
	
	text-align:right;
}
.tile-item .caption
{
	display:block;
	padding:0.5em;
	padding-top:0.0em;
	font-size:0.8em;
}
.tile-item:hover
{
	text-decoration:none;
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.tile-item .thumbnail
{
	display:block;
	overflow: hidden;
	width:100%;
	text-align:center;
}
.tile-item .thumbnail
{
}
.tile-item .thumbnail.thumbnail-169
{
	width:100%;
}
.tile-item .thumbnail .img
{
	display:block;
	width:100%;
	
	margin:0 auto;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.tile-item .thumbnail .img.img-small
{
	width:60%;
}
.tile-item .thumbnail.thumbnail-43 .img
{
	padding-top:75%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.tile-item .thumbnail.thumbnail-169 .img
{
	padding-top:56.25%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.tile-item:hover .thumbnail .img
{
	transform: scale(1.2);
}

/* 階段状に並べる */
.tile.tile-step .tile-item.tile-item-2:nth-child(2n+1){transform:translateY(0em);}
.tile.tile-step .tile-item.tile-item-2:nth-child(2n+2){transform:translateY(1em);}

.tile.tile-step .tile-item.tile-item-3:nth-child(3n+1){transform:translateY(0em);}
.tile.tile-step .tile-item.tile-item-3:nth-child(3n+2){transform:translateY(1em);}
.tile.tile-step .tile-item.tile-item-3:nth-child(3n+3){transform:translateY(2em);}

.tile.tile-step .tile-item.tile-item-4:nth-child(4n+1){transform:translateY(0em);}
.tile.tile-step .tile-item.tile-item-4:nth-child(4n+2){transform:translateY(1em);}
.tile.tile-step .tile-item.tile-item-4:nth-child(4n+3){transform:translateY(2em);}
.tile.tile-step .tile-item.tile-item-4:nth-child(4n+4){transform:translateY(3em);}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {

	
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.tile-item,
	.tile-item.tile-item-2,
	.tile-item.tile-item-3,
	.tile-item.tile-item-4
	{
		width:calc(50% - 2em);
	}
	
	.tile-item.sp-fill
	{
		width:calc(100% - 2em);
	}
	
	.tile.tile-step .tile-item.tile-item-2:nth-child(2n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-2:nth-child(2n+2){transform:translateY(0em);}

	.tile.tile-step .tile-item.tile-item-3:nth-child(3n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-3:nth-child(3n+2){transform:translateY(1em);}
	.tile.tile-step .tile-item.tile-item-3:nth-child(3n+3){transform:translateY(0em);}

	.tile.tile-step .tile-item.tile-item-4:nth-child(4n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-4:nth-child(4n+2){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-4:nth-child(4n+3){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-4:nth-child(4n+4){transform:translateY(0em);}
	
	.tile.tile-step .tile-item.tile-item-2:nth-child(2n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-2:nth-child(2n+2){transform:translateY(1em);}

	.tile.tile-step .tile-item.tile-item-3:nth-child(2n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-3:nth-child(2n+2){transform:translateY(1em);}

	.tile.tile-step .tile-item.tile-item-4:nth-child(2n+1){transform:translateY(0em);}
	.tile.tile-step .tile-item.tile-item-4:nth-child(2n+2){transform:translateY(1em);}
}