@charset "UTF-8";

/**********************************************************/
/********************** Cassette *************************/
/**********************************************************/

#cassette
{
	background-color:rgb(255, 255, 255);
	padding: max(5vw, 5rem) 0;
}

#cassette._b
{
	padding-top: max(7vw, 7rem);
}

#cassette h1,
#cassette h2
{
	display: inline-block;
	font-family: 'FS-R';
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	line-height: 1;
	padding-bottom: .25em;
	
	margin-bottom: 2em;
	border-bottom: 1px solid;
}

.cassette_wrapper
{
	display: flex;
	flex-wrap: wrap;
	margin: -1rem;
	width: calc(100% + 2rem);
}

.cassette
{
	width: calc(100% / 5 - 2rem);
	margin: 1rem;
}

.cassette h3
{
	font-family: 'FS-R';
	line-height: 1.3;
	font-size: clamp(.9rem, 1vw, 1rem);
}

.cassette figure
{
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow:hidden;
	margin-bottom: .5rem;
	border-radius: 1rem;
}

.cassette img
{
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
	transition: all 1.5s ease;
}

.cassette .num
{
	font-family: 'FS-R';
	position: absolute;
	font-size: clamp(1rem, 3.5vw, 2.5rem);
	line-height: 1;
	top: .5rem;
	right: .5rem;
	color: rgb(255, 255, 255);
	border-bottom: clamp(2px, .4vw, 4px) solid;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,.9));
}

.cassette .num:before
{
	content: "Highlights";
	font-size: max(.3em, .7rem);
	margin-right: .5em;
}

body:not(.touch) a.cassette:hover img
{
	transform:scale(1.1);
}


/*//////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 900px)
{
	.cassette
	{
		width: calc(100% / 3 - 2rem);
	}
}

@media screen and (max-width: 500px)
{
	.cassette
	{
		width: calc(100% / 2 - 2rem);
	}
}