@charset "utf-8";

/*=============================================
	
	タイトル枠
	
==============================================*/
#top_title_wrap {
	text-align: center;
	color: #FFF;
	position: relative;
	margin: 0 0 0;
}
#top_title_wrap .title_img {
	position: relative;
}
#top_title_wrap .title_img:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: #000;
	opacity: 0.6;
	display:block;
}
#top_title_wrap .title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	font-size: 3.0em;
	line-height: 1;
}
#top_title_wrap p.sub {
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%);
	width: 100%;
	font-size: 1.1em;
	line-height: 1;
}

@media print, screen and (min-width: 769px) {
	#top_title_wrap {
		padding: 0 0;
		text-align: center;
		margin: 0 0 0;
		max-height: 360px;
		overflow: hidden;
	}
	#top_title_wrap .title_img {
		position: relative;
		bottom: 0;
		top: auto;
	}
	#top_title_wrap .title {
		font-size: 56px;
	}
	#top_title_wrap p.sub {
		font-size: 14px;
		top: 65%;
	}
}

/*---------------------------------------------------------
	
	    一覧
	
---------------------------------------------------------*/
.list_wrap {
	padding: 3em 0;
}
.list_wrap .container {

}
.list_wrap ul {

}
.list_wrap ul li {
	position: relative;
	background-color: #000;
	margin: 0.5em 0;
}
.list_wrap ul li a {
	display: block;
}
.list_wrap ul li .bg {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
.list_wrap ul li .bg::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
}
.list_wrap ul li .bg img {
	height: auto;
	transition: transform .6s ease; /* ゆっくり変化させる */
}
.list_wrap ul li .bg:hover img {
	transform: scale(1.1); /* 拡大 */
}
.list_wrap ul li .location_title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #FFF;
	font-size: max(1.2em, 10px);
	font-style: normal;
	text-align: center;
	width: 100%;
}
@media print, screen and (min-width: 769px) {
	.list_wrap {
		padding: 50px 0;
	}
	.list_wrap .container {
		width: 96%;
		max-width: 1600px;
		min-width: 1080px;
	}
	.list_wrap ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.list_wrap ul::after {
		content: "";
		width: 50%;
	}
	.list_wrap ul li {
		margin: 0 0;
		width: 50%;
	}
	.list_wrap ul li .location_title {
		font-size: max(1.6em, 10px);
	}
}




/*=============================================
	
	ボタン
	
==============================================*/
main .btn_list {
	width: 74%;
	margin: 0 auto 5em;
	padding: 1.5rem 8%;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;

}
main .btn_list div {
	text-align: center;
	margin: 0 0 1rem;
}
main .btn_list div:last-of-type {
	margin: 0 0 0;
}
main .btn_list div a {
	display: block;
	background-color: #887249;
	color: #FFF;
	padding: 0.5rem 0;
	font-size: 0.9em;
}
@media screen and (min-width: 768px) {
	main .btn_list {
		width: 80%;
		min-width: 720px;
		max-width: 960px;
		margin: 0 auto 90px;
		padding: 50px 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	main .btn_list div {
		margin: 0 5% 0;
		width: 40%;
	}
	main .btn_list div:last-of-type {
		margin: 0 5% 0;
	}
	main .btn_list div a {
		padding: 20px 0;
		font-size: 13px;
	}
}