/* =========================================================
		route common
========================================================= */
.spots-page{ background: #fff;}
.spot_content{
	background: url(../images/nami_bg.svg) top/contain repeat;
	position: relative;
	z-index: 0;
}

.spot_content .inner{ background: rgba(255,255,255,0.4);}
.spot_content .ttl_main{color: var( --main-color);}
.spot_content .desc{text-align: center;}
.spot_link{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 3%;
}

.spot_link a{width: 180px; margin: 0;}
.spot_link .more_btn::after{ transform: rotate(135deg);}

.spot_link .more_btn.spot1{background-color: var(--spot1); }
.spot_link .more_btn.spot2{background-color: var(--spot2); }
.spot_link .more_btn.spot3{background-color: var(--spot3); }
.spot_link .more_btn.spot4{background-color: var(--spot4); }
.spot_link .more_btn.spot5{background-color: var(--spot5); }


.spot_list{margin-top: 4%;}
.spot_list_ttl {
	margin: 60px 0 30px;
	padding: 1.5% 0;
	color: #fff;
	font-size: var(--font-22);
	text-align: center;
}


#spot1 .spot_list_ttl { background: var(--spot1);}
#spot2 .spot_list_ttl { background: var(--spot2);}
#spot3 .spot_list_ttl { background: var(--spot3); }
#spot4 .spot_list_ttl { background: var(--spot4);}
#spot5 .spot_list_ttl { background: var(--spot5);}







.spot_list > ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spot_list_item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 5% 4%;
	border-radius: 8px;
	background: var(--spot_bg);
}

.kanko.spot_list_item{
	background: var(--kanko_bg);
}

.spot_list_item_img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.spot_list_item_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spot_list_item_ttl {
	margin: 14px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.onsen .spot_list_item_ttl{ color: var(--sky_color);}
.kanko .spot_list_item_ttl{ color: var(--main-color);}

.spot_list_item_desc {
	margin: 4px 0 12px;
	font-size: 14px;
	line-height: 1.7;
}

.spot_list_item_info {
	margin-bottom: auto;
	padding: 5% 4%;
	border-radius: 4px;
	background: #fff;
}

.spot_list_item_info dl { display: grid; gap: 6px; margin: 0;}
.spot_list_item_info dl > div {
	display: grid;
	grid-template-columns:80px minmax(0, 1fr);
	align-items: stretch;
	gap: 10px;
}

.spot_list_item_info dt {
	margin: 0;
	padding: 5px 10px;
	background: var(--spot_bg);
	color: var(--sky_color);
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kanko .spot_list_item_info dt{
	background: var(--kanko_bg);
	color: var(--main-color);
}

.spot_list_item_info dd {
	min-width: 0;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	overflow-wrap: anywhere;
	display: flex;
	align-items: center;
}

.spot_list_item_btn {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 5%;
}

.spot_list_item_btn .more_btn {
	border: 1px solid var(--sky_color);
	border-radius: 100px;
	background: var(--sky_color);
	color: #fff;
	font-size: 1rem;
	width: 48%;
	padding: 6px 26px 6px 16px;
	box-sizing: border-box;
	font-weight: 500;
	margin-top: 0;
}

.spot_list_item_btn a.map {
	background: #fff;
	color: var(--sky_color);
}

.kanko .spot_list_item_btn .more_btn {
	border: 1px solid var(--main-color);
	background: var(--main-color);
}

.kanko .spot_list_item_btn a.map {
	background: #fff;
	color: var(--main-color);
}


@media screen and (max-width: 767px) {
	.spot_link{ gap: 10px; justify-content: left;}
	.spot_list{ margin-top:30px;}
	.spot_link a{ font-size: var(--font-14); width: 150px; padding: 0px 12px 0px 8px;}
	.spot_link .more_btn::after{ right: 18px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;}
	.spot_list_ttl { margin: 40px auto 20px; font-size: var(--font-18);}
	.spot_list > ul { grid-template-columns: 1fr; gap: 20px;}
	.spot_list_item_info { padding: 15px;}
	.spot_list_item_info dd { font-size: 12px;}
	.spot_list_item_btn .more_btn { font-size: var(--font-14);}
	.spot_list_item_btn{gap: 5px;}
	.spots-page .more_btn::after{ border-width: 1px;}
}