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

	}

	

}