@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.banner
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	margin:-1em;
}
.banner-item
{
	display:block;
	width:calc(33.33333% - 2em);
	margin:1em;
	overflow:hidden;
}
.banner-item.banner-item-1
{
	display:block;
	width:calc(100% - 2em);
	margin:1em;
}
.banner-item.banner-item-2
{
	display:block;
	width:calc(50% - 2em);
	margin:1em;
}
.banner-item.banner-item-3
{
	display:block;
	width:calc(33.33333% - 2em);
	margin:1em;
}
.banner-item.banner-item-4
{
	display:block;
	width:calc(25% - 2em);
	margin:1em;
}
.banner-item:hover
{
	text-decoration:none;
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;

	opacity: 0.7;
}
.banner-item .thumbnail
{
	display:block;
	overflow: hidden;
	width:100%;
	text-align:center;
}

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

	
}

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