@charset "utf-8";



/*

************************************************************************

* タイル

* @copyright Revolme Inc.

************************************************************************

*/



/* ################################################################################################ */

/* ## PC                         ################################################################## */

/* ################################################################################################ */

.tile

{

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	

	margin:-1em;

}

.tile-item

{

	display:block;

	width:calc(33.33333% - 2em);

	margin:1em;

	/*

	border-radius:var(--border-radius);

	border:1px solid var(--body-border-color);

	overflow:hidden;

	*/

}

.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 calc(0.3em + var(--border-radius) / 4);

	*/

	padding: 0.8em 0.0em 0.25em 0.0em;

}

.tile-item .price

{

	display:block;

	padding:0.5em calc(0.3em + var(--border-radius) / 4);

	padding-top:0.0em;

	

	text-align:right;

}

.tile-item .caption

{

	display:block;

	font-size:0.8em;

	padding: 0.5em 0.0em;

	/*

	padding: calc(0.5em + var(--border-radius) / 4);

	padding-top:0.0em;

	padding-bottom:calc(var(--border-radius) / 2);

	*/

}

.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

{

	border-radius:var(--border-radius);

	overflow: hidden;

	line-height:0;

}

.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);}

}