@charset "utf-8";

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

/*
************************************************************************
* タイル並べ(隙間小)
************************************************************************
*/
.tile-01
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
}
.tile-01 > .tile-item
{
	width:calc(33.33333% - 2px);
	margin:1px;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	.tile-01 > .tile-item
	{
		width:calc(50% - 2px);
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
}

/*
************************************************************************
* タイル並べ(隙間大)
************************************************************************
*/
.tile-02
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	margin:-1em;
}
.tile-02 > .tile-item
{
	width:calc(25% - 2em);
	margin:1em;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	.tile-02 > .tile-item
	{
		width:calc(50% - 2em);
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.tile-02
	{
		margin:-0.75em;
	}
	.tile-02 > .tile-item
	{
		width:calc(50% - 1.5em);
		margin:0.75em;
	}
}

/*
************************************************************************
* タイル並べ(アイテム幅固定)
************************************************************************
*/
.tile-03
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
}
.tile-03 > .tile-item
{
	width:290px;
	margin:1.5em 0em;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1200px) {
	.tile-03 > .tile-item
	{
		
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.tile-03
	{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		margin:-1em;
	}
	.tile-03 > .tile-item
	{
		width:calc(50% - 2em);
		margin:1.0em;
	}
}