@charset "UTF-8";

#footer
{
	background-color: rgb(240, 240, 240);
}
body:after
{
	background-color: rgb(240, 240, 240);
}

/**********************************************************************/
/******************************* Map **********************************/
/**********************************************************************/

#map_canvas
{
	width: 100%;
	height: min(calc(100vh - 10rem), calc(100vw * 2 / 3));
}

.gm-style-mot
{
	text-align: center;
}

#map_canvas .map_link
{
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
}

#map_canvas .location
{
	font-size: .9em;
	color: rgb(100, 100, 100);
}

#map_canvas .mImg
{
	width: 200px;
	overflow: hidden;
	aspect-ratio: 5 / 3;
	margin-bottom: .5rem;
}
#map_canvas .mImg img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}

/**********************************************************************/
/****************************** Models *********************************/
/**********************************************************************/

#models
{
	margin: 0 auto;
}

#models > div
{
	width: calc(100%);
	display:flex;
	padding: 2rem 1rem;
	flex-wrap: wrap;
}

#models .tile
{
	display:flex;
	flex-direction: column;
	width: calc(100% / 5);
	padding: 1rem 1rem 1.5rem;
}

#models .tile:hover
{
	background-color: rgb(240, 240, 240);
}

#models .tile figure
{
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 1em;
}
#models .tile figure > img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}

#models .tile .period
{
	font-family: R-R, GG-R, sans-serif;
	font-size: .8em;
	margin-bottom: .5em;
	color: rgb(100, 100, 100);
}

#models .tile h3
{
	font-size: clamp(1rem, 3vw, 1.1rem);
	display: flex;
	flex-direction:column;
}

#models .tile h3 span:nth-of-type(2)
{
	font-size: .8em;
	color: rgb(100, 100, 100);
}


/*#models .tile h3 span:nth-of-type(2):before
{
	content: "［";
}
#models .tile h3 span:nth-of-type(2):after
{
	content: "］";
}*/

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

@media screen and (min-width: 1500px)
{
	#models .tile
	{
		width: calc(100% / 6);
	}
}

@media screen and (max-width: 1200px)
{
	#models .tile
	{
		width: calc(100% / 4);
	}
}
	
@media screen and (max-width: 900px)
{
	#models .tile
	{
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 600px)
{
	#models > div
	{
		padding: 2rem .5rem;
	}
	#models .tile
	{
		width: calc(100% / 2);
		padding: 1rem .5rem 1.5rem;
	}
	
	#map_canvas
	{
		height: calc(100vh - 10rem);
	}
}