@charset "utf-8";

/*
************************************************************************
* CAMPAIGN & INFO
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* CAMPAIGNブロック
************************************************************************
*/
.banner-list
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    /*margin: -1em;*/
}
.banner-list .campaign-item
{
    width:calc(33.3333% - 2em);
    margin:1em;
    display: block;
}
.banner-list .campaign-item .image
{
    margin-bottom: 15px;
}
.banner-list .campaign-item .image img
{
    border-radius:0.5em;
    width:100%;
}
.banner-list .campaign-item > .image > .title
{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);


    font-size:2.4rem;
    font-weight:bold;
    color:#FFFFFF;
}
.banner-list .campaign-item > .text
{
    font-size: 1.4rem;
    line-height: 1.5;
}

/*2307 リニューアル追記箇所*/
.banner-list ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.banner-list ul.list-bottom{
		margin-top: 35px;
	}
.banner-list ul li.banner-contents{
	margin-left: 0;
	margin-bottom: 30px;
}
.banner-contents p {
	color:#333;
	font-size: 0.95em;
	letter-spacing: -0.05px;
	line-height: 1.5;
	margin-top: 10px;
}
.banner-list ul .banner-contents a .image{
	border-radius:8px;
	overflow: hidden;
}
.banner-list ul .banner-contents a .image.tag-link:after,
.banner-list ul .banner-contents a .image.tag-inst:after{
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
}
.banner-list ul .banner-contents a .image.tag-link:after{
	background-image: url("../../../_img/icon/banner_link.svg");
	background-size: 16px;
}
.banner-list ul .banner-contents a .image.tag-inst:after{
	background-image: url("../../../_img/icon/banner_inst.svg");
	background-size: 16px;
}
.banner-list ul.list-upper{
	/*border-bottom: 1px solid #eee;*/
}
.banner-list ul.list-upper li.banner-contents{
	width: calc(98.5% / 2);
}
.banner-list ul.list-bottom li.banner-contents{
	width:calc(95% / 4);
}
/* end */

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
    .banner-list .campaign-item
    {
        width:calc(50% - 2em);
    }
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
    .banner-list
    {
        display:block;
        margin: 0;
    }
    .banner-list .campaign-item
    {
        width:100%;
        margin-left:0vw;
        margin-right:0vw;
        margin-bottom: 5vw;
    }
    .banner-list .campaign-item .image
    {
        margin-bottom: 3vw;
    }
    .banner-list .campaign-item .image img
    {
        width:100%;
    }
    .banner-list .campaign-item > .image > .title
    {
        position:absolute;

        top:50%;
        left:50%;

        transform:translate(-50%, -50%);


        font-size:2.4rem;
        font-weight:bold;
        color:#FFFFFF;
    }
    .banner-list .campaign-item > .text
    {
        font-size: 2.4rem;
    }
	/*2307 リニューアル追記箇所*/
	.banner-list ul.list-upper{
		margin: 0;
	}
	.banner-list ul.list-bottom{
		margin: 25px 0 0;
	}
	.banner-list ul li.banner-contents{
		margin-left: 0;
		margin-bottom: 20px;
	}
	.banner-list ul.list-upper {
		display: block;
	}
	.banner-list ul.list-upper li.banner-contents{
		width:100%;
	}
	.banner-list ul.list-bottom li.banner-contents{
		width: calc(96.5% / 2);
	}

	/* end */
}

/*2412 リニューアル追記*/
#top-banner-s .list-bottom{
		margin-top: 0;
	}