@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : topics.css
Description :
===================================================================== */

/* =====================================================================
*    topics
* =================================================================== */

.topics {
	padding: calc(140 / 750 * 100%) 0 calc(280 / 750 * 100%);
}

.topics_list > li {
	margin-bottom: calc(110 / 650 * 100%);
	padding: calc(50 / 650 * 100%) calc(50 / 650 * 100%) calc(120 / 650 * 100%);
	background-color: #fff;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.topics_list > li:last-child {
	margin-bottom: 0;
}

.topics_list > li::before {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco3.png) no-repeat center/contain;
	z-index: -1;
	width: calc(265 / 650 * 100%);
	padding-top: calc(143 / 650 * 100%);
	top: 0;
	right: 0;
	margin: calc(-80 / 650 * 100%) calc(-130 / 650 * 100%) 0 0;
}

.topics_list > li::after {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco4.png) no-repeat center/contain;
	z-index: -1;
	width: calc(324 / 650 * 100%);
	padding-top: calc(113 / 650 * 100%);
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-73 / 650 * 100%) calc(-100 / 650 * 100%);
}

.topics_list_ttl {
	display: block;
	font-size: 2.6rem;
	font-weight: 700;
	padding-bottom: 1.3em;
/*	border-bottom: 1px solid #b68e16;*/
}

.topics_list_date {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	color: #fff;
	display: block;
	width: calc(162 / 550 * 100%);
	font-size: 2rem;
	background: url(../images/top/bg_news_date.png) no-repeat center left/contain;
	padding: 0 0 calc(13 / 550 * 100%) calc(30 / 550 * 100%);
	margin: calc(-85 / 550 * 80%) 0 0 calc(-70 / 550 * 100%);
}

.topics_list_photo {
	/*	margin: 0 0 calc(50 / 550 * 100%);*/
}

.topics_list_photo li {
	margin: calc(40 / 550 * 100%) 0 0;
}

.topics_list_txt strong {
	display: block;
	color: #9b2814;
	font-weight: bold;
}

.topics_list_txt > *:not(:last-child) {
	margin: 0 0 calc(40 / 550 * 100%);
}

.topics_list_link {
	display: inline-block !important;
	color: #ff0c1f !important;
	border-bottom: 1px solid #ff0c1f;
}

.topics_list_txt .topics_list_btn {
	color: #fff !important;
	text-align: center;
	background-color: #000;
	padding: 1em 0 !important;
}


@media screen and (min-width: 768px) {

	.topics {
		padding: calc(120 / 1200 * 100%) 0 calc(220 / 1200 * 100%);
	}

	.topics_list > li {
		margin: 0 0 calc(80 / 1000 * 100%);
		padding: calc(55 / 1000 * 100%) calc(60 / 1000 * 100%) calc(80 / 1000 * 100%);
	}

	.topics_list > li::before {
		width: calc(265 / 1000 * 100%);
		padding-top: calc(143 / 1000 * 100%);
		margin: calc(-79 / 1000 * 100%) calc(-125 / 1000 * 100%) 0 0;
	}

	.topics_list > li::after {
		width: calc(324 / 1000 * 100%);
		padding-top: calc(113 / 1000 * 100%);
		margin: 0 0 calc(-59 / 1000 * 100%) calc(-135 / 1000 * 100%);
	}

	.topics_list_date {
		font-size: 1.5rem;
		width: calc(128 / 880 * 100%);
		padding: calc(2 / 800 * 100%) 0 calc(11 / 880 * 100%) calc(24 / 880 * 100%);
		margin: calc(-85 / 880 * 80%) 0 0 calc(-75 / 880 * 100%);
	}

	.topics_list_ttl {
		font-size: 2rem;
	}

	.topics_list_photo {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: 0 0 calc(30 / 928 * 100%);
	}

	.topics_list_photo > li {
		width: 100%;
		max-width: calc(720 / 880 * 100%);
		min-width: calc(360 / 880 * 100%);
		margin: calc(40 / 880 * 100%) calc(40 / 880 * 100%) 0;
	}

	.topics_list_photo > li:nth-child(even),
	.topics_list_photo > li:last-child {
		/*		margin-right: 0;*/
	}

	.topics_list_txt > *:not(:last-child) {
		margin: 0 0 calc(40 / 880 * 100%);
	}

	.topics_list_link:hover {
		color: #b68e16 !important;
		border-color: #b68e16;
	}

	.topics_list_btn {
		width: calc(400 / 880 * 100%);
		margin: 0 auto;
	}

	.topics_list_txt .topics_list_btn:hover {
        background-color: #fcee00;
		color: #000 !important;
	}

}

@media screen and (min-width: 1200px) {

	.topics {
		padding: 120px 0 220px;
	}

}