@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-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;
}
.tile-item .thumbnail img
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.tile-item:hover .thumbnail img
{
	transform: scale(1.2);
}

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

	
}

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