@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.banner
{
	display: flex;
	flex-wrap: wrap;
	margin:-0.5em;
}
.banner .banner-item
{
	margin:0.5em;
	border-radius:0.5em;
	overflow:hidden;
}
.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 .image
{
	display:block;

	float:left;

	width:50%;
	padding-top:30%;

	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	transform: translate3d(0,0,0);
}
.banner.banner-col-3 .banner-item .image
{
	width:40%;
}
.banner.banner-col-4 .banner-item .image
{
	width:30%;
}
.banner .banner-item:hover .image
{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.banner .banner-item .title
{
	display:block;
	margin-left:50%;
	padding:1em;
	padding-right:2em;

	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.banner.banner-col-3 .banner-item .title
{
	margin-left:40%;
}
.banner.banner-col-4 .banner-item .title
{
	margin-left:30%;
}
.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(0,0,0, 0.4);
	border-right:1px solid rgba(0,0,0, 0.4);

	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-weight:bold;
}
.banner .banner-item .title .sub
{
	display:block;
	font-size:0.8em;
}
.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;
}

.block-trial {
    display: block;
    width: 100%;
    margin-bottom: 3em;
    text-align: center;
}
a.block-trial:hover {
    opacity: 0.7;
}
.period {
    position: absolute;
    border-radius: 9999px;
    background-color: #FCCC00;
    top: 2em;
    left: 2em;
    width: 150px;
    height: 150px;
    text-align: center;
    color: #009FE8;
    padding: 3em 0 0 0;
    font-weight: bold;
    line-height: 1;
}
.period .month {
    display: block;
    font-size: 2.5em;
    line-height: 1;
    margin-bottom: 0.2em;
}
.period .text {
    font-size: 1.8em;
}

.footer-banner {
    padding: 0 0 3em 0;
    background-color: transparent;
}
.footer-banner a:hover {
    opacity: 0.7;
}


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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@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);
	}

	.period {
        top: -5vw;
        left: 3vw;
        width: 20vw;
        height: 20vw;
        padding: 2em 0 0 0;
    }
    .period .month {
        font-size: 5vw;
    }
    .period .text {
        font-size: 3vw;
    }
}