@charset "utf-8";

/*
************************************************************************
* テーブル
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.banner
{
	display: flex;
	flex-wrap: wrap;
	margin:-0.5em;
}
.banner .banner-item
{
	margin:0.5em;
	overflow:hidden;
}
.banner .banner-item:before
{
	content:"";
	display:block;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	height:100%;
}
.banner .banner-item .banner-item-bg
{
	width:100%;
}
.banner-col-1 .banner-item
{
	width:calc(100% - 1.0em);
}
.banner-col-2 .banner-item
{
	width:calc(50% - 1.0em);
}
.banner-col-3 .banner-item
{
	width:calc(33.333333% - 1.0em);
}
.banner-col-4 .banner-item
{
	width:calc(25% - 1.0em);
}
.banner .banner-item .title
{
	display:block;
	padding:2em;
	
	width:100%;
}
.banner .banner-item:after
{
	content:"";
	
	display:block;
	
	position:absolute;
	
	top:50%;
	right:0.8em;
	
	width:0.5em;
	height:0.5em;
	
	border:0px solid transparent;
	border-top:1px solid rgba(255,255,255, 1.0);
	border-right:1px solid rgba(255,255,255, 1.0);
	
	transform:translateY(-50%) rotate(45deg);
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.banner .banner-item:hover:after
{
	right:0.5em;
}
.banner .banner-item .title .main
{
	display:block;
	font-size:2.0em;
	
	padding-bottom:0.25em;
	border-bottom:1px solid #FFFFFF;
}
.banner .banner-item .title .sub
{
	display:block;
	font-size:1.2em;
	margin-top:0.5em;
}
.banner.banner-col-3 .banner-item .title .main,
.banner.banner-col-4 .banner-item .title .main
{
	font-size:1.8em;
}
.banner.banner-col-3 .banner-item .title .sub,
.banner.banner-col-4 .banner-item .title .sub
{
	font-size:1.0em;
}

.banner.banner-col-4 .banner-item .title
{
	font-size:0.8em;
}

.big-banner
{
	text-align:center;
}
.big-banner a
{
	display:block;
	
	padding:1.5em;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.big-banner a:hover
{
	text-decoration:none;
}
.big-banner .copy
{
	display:block;
	font-size:0.8em;
}
.big-banner .title
{
	display:block;
	font-size:1.3em;
	font-weight:bold;
}



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

	
}

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