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


.award-tile
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap ;
    justify-content:center ;
    align-items:stretch;
    align-content:stretch;
    
    text-align:center;
	margin:-1em;
	margin-bottom:1em;

}
.award-tile.award-tile-1st .award-tile-item
{
	margin:1em;
	width:calc(70% - 2em);
	flex:0 0 calc(70% - 2em);
}
.award-tile.award-tile-2nd .award-tile-item
{
	margin:1em;
	width:calc(50% - 2em);
	flex:0 0 calc(50% - 2em);
}
.award-tile.award-tile-3rd .award-tile-item
{
	margin:1em;
	width:calc(33.333333% - 2em);
	flex:0 0 calc(33.333333% - 2em);
}
.award-tile.award-tile-4th .award-tile-item
{
	margin:1em;
	width:calc(20.0% - 2em);
	flex:0 0 calc(20.0% - 2em);
}
.award-tile .award-tile-item .award-title
{
	display:inline-block;
	
	background-color:#e60012;
	color:#FFFFFF;
	
	font-size:1.2em;
	font-weight:bold;
	line-height:1;
	
	padding:0.25em 2.5em;
	margin-bottom:0.5em;
}
.award-tile .award-tile-item .award-title:before
{
	content:"";
	display:block;
	position:absolute;
	
	left:0;
	top:50%;
	transform:translateY(-50%);
	
	width:0;
	height:0;
	
	border:1.0em solid transparent;
	border-left:1.0em solid #FFFFFF;
}
.award-tile .award-tile-item .award-title:after
{
	content:"";
	display:block;
	position:absolute;
	
	right:0;
	top:50%;
	transform:translateY(-50%);
	
	width:0;
	height:0;
	
	border:1.0em solid transparent;
	border-right:1.0em solid #FFFFFF;
}
.award-tile .award-tile-item .award-title-sub
{
	display:inline-block;
	
	color:#e60012;
	
	font-size:1.0em;
	font-weight:bold;
	line-height:1;
	
	margin-bottom:0.5em;
}
.award-tile .award-tile-item .category
{
	display:inline-block;
	
	background-color:#ffe100;
	color:#FFFFFF;
	
	font-size:1.0em;
	font-weight:bold;
	line-height:1;
	
	text-shadow:1px 1px 1px  #00000044,
	            -1px -1px 1px #00000044,
	            1px 0px 1px #00000044,
	            0px 1px 1px #00000044;
	
	border-radius:0.5em;
	
	padding:0.5em 0.4em;
	margin-bottom:0.5em;
}
.award-tile .award-tile-item .picture
{
	display:block;
	width:100%;
	padding-top:100%;
	
	border:1px solid #CCCCCC;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.award-tile .award-tile-item .group
{
	display:block;
	font-weight:bold;
	line-height:1.3;
	
	font-size:0.8em;
	margin-bottom:0.25em;

}
.award-tile .award-tile-item .name
{
	display:block;
	font-weight:bold;
	line-height:1.3;
	font-size:0.8em;
}
.award-tile .award-tile-item .opus
{
	display:block;
	font-size:0.8em;
}


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

	
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@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);}
	
	.award-tile.award-tile-1st .award-tile-item
	{
		margin:1em;
		width:calc(90% - 2em);
		flex:0 0 calc(90% - 2em);
	}
	.award-tile.award-tile-2nd .award-tile-item
	{
		margin:1em;
		width:calc(90% - 2em);
		flex:0 0 calc(90% - 2em);
	}
	.award-tile.award-tile-3rd .award-tile-item
	{
		margin:1em;
		width:calc(50.0% - 2em);
		flex:0 0 calc(50.0% - 2em);
	}
	.award-tile.award-tile-4th .award-tile-item
	{
		margin:1em;
		width:calc(50.0% - 2em);
		flex:0 0 calc(50.0% - 2em);
	}
	
}