@charset "utf-8";

.page #main .img {
	background-image: url("../img/sightseeing/page_header.jpg");
	background-position: center bottom;
}
.sightseeing01_list li{
	width: 25%;
}
#sightseeing_nav .page_nav01 li{
	width: calc(50% - 16px);
}
.spot_list *{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.spot_list{
	gap: 48px 32px;
}
.spot_list li{
	width: calc((100% - 64px) / 3);
}
.spot_list li.medium{
	width: calc(50% - 16px);
}
.spot_list li.large{
	width: 100%;
}
.spot_list li .distance{
	line-height: 30px;
	background-color: #333;
	width: 100%;
	text-align: center;
}
.spot_list li.large .distance{
	padding: 0 24px;
	width: auto;
}
.spot_list li:not(.large) .link a{
	width: calc(50% - 8px);
}

@media screen and (max-width: 798px){
	.sightseeing01_list li{
		width: 50%;
	}
	.sightseeing01_list li .text{
		font-size: 13px;
		text-align: center;
		padding-bottom: 16px;
	}
	#sightseeing_nav .page_nav01 li{
		width: 100%;
	}
	.spot_list li{
		width: 100% !important;
	}
	.spot_list li .image{
		aspect-ratio: 3/2;
	}
	.spot_list li .image img{
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}
	.spot_list li .distance{
		width: 100% !important;
		text-align: center;
	}
	.spot_list li .link a {
	  width: calc(50% - 8px) !important;
	}
}