@charset "UTF-8";
/*--------------------------------------------
	お楽しみ Section
	画像(7:3)を4つ表示させ、ホバーした画像を拡大
--------------------------------------------*/
.record ul {
	list-style-type: none;
	margin: 0;
	padding: 0
}

@media (min-width: 600px) {
	.record ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between
	}
}

.record .banner li {
	width: 50%;
	aspect-ratio: 7 / 3
}

@media not all and (min-width: 600px) {
	.record .banner li {
		width: 100%
	}
}

.record li a {
	background-color: rgba(0, 0, 0, 0.5);
	transition: background-color 0.6s ease;
	text-decoration: none;
	color: var(--base-color);
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}

.record li a:hover {
	background-color: transparent
}

.record li a:hover {
	opacity: 0;
	transition: opacity 0.7s ease
}

/*横を100%にしているので、写真の繰り返しを防ぐため、縦を少しoverさせた写真を使う。*/
.record .banner li {
	background-size: auto 100%;
	background-position: center center;
	transition: background-size 0.3s ease, background-position 0.3s ease
}

.record .banner li:hover {
	background-size: auto 105%;
	background-position: center center
}

.record .banner li.record_1 {
	background-image: url(/batosupi/img/soft/first-hand_sp.jpg);
}

.record .banner li.record_2 {
	background-image: url(/batosupi/img/soft/oracle_sp.jpg);
}
/*
.record .banner li.record_3 {
	background-image: url(../img/home/HowToEnjoy/record_3.jpg);
}

.record .banner li.record_4 {
	background-image: url(../img/home/HowToEnjoy/record_4.jpg);
}*/

.record li {
	font-family: var(--font-family-sub);
	font-size: 3em
}