/* --------------------------------------------------

	イベントまとめ

-------------------------------------------------- */
.event {
	width: calc(100% - 40px);
	margin-inline: auto;
	color: var(--color-light);
}

.event_bnr {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.main {
	display: grid;
	grid-template-rows: 1fr auto;
}

.footer {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 1;
}


.event_video {
	margin-top: 30px;

	>*+* {
		margin-top: 20px;
	}
}

.event_video h3 {
	background-color: #000;
	padding: 2px 10px;
	font-weight: bold;
	font-size: var(--font-size-14);
}


/* 動画ブロック */

.video {
	--color-red-icon: #FE0400;
	position: relative;
	overflow: hidden;
}

.video a {
	display: block;
}

.video a img {
	width: 100%;
	height: auto;
	transition: var(--ease);
}


.icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13%;
	transform: translate(-50%, -50%);
	background: url(../img/icon_play.png) no-repeat;
	background-size: contain;
	transition: var(--ease);
	aspect-ratio: 1 / 1;
}

.icon {
	background: rgb(from var(--color-red-icon) r g b / 90%);
	width: 60px;
	height: 40px;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.icon:after {
	position: absolute;
	content: "";
	display: block;
	border-style: solid;
	border-color: transparent transparent transparent var(--color-light);
	border-width: 8px 0 8px 16px;
	margin-left: 3px;
}

@media (hover: hover) {
	.video a:hover>img {
		transform: scale(1.06);
	}

	.video a:hover .icon,
	.video a:hover .year img {
		opacity: 0.8;
	}
}