/* 観光スポット・エリアの名称を枠線上のLegendとして共通表示する。 */
.spot-card-frame{
	min-inline-size:0;
	width:100%;
	margin:0;
	padding:0;
	overflow:visible;
}
.spot-card-legend{
	max-width:calc(100% - 24px);
	margin-inline:12px;
	padding:0 8px;
	color:var(--ink,#243f55);
	font-size:20px;
	font-weight:700;
	line-height:1.6;
	white-space:normal;
	overflow-wrap:anywhere;
}
.spot-card-legend>h2,.spot-card-legend>h3{
	margin:0;
	color:inherit;
	font:inherit;
}
.spot-card-legend a{text-decoration:none}
.spot-card-frame>.card-body{padding-top:12px}
.spot-card-frame>figure{overflow:hidden;border-radius:6px}
/* 既存のエリア一覧で外していた上辺も復元し、名称の両側に枠線を見せる。 */
.guide-directory .area-card-frame{border-top:1px solid var(--line,#d6e7f2)}
.area-card-frame>.area-no-photo{border-radius:6px}
.detail.spot-card-frame{padding:0 20px 20px}
.detail.spot-card-frame>.spot-card-legend{margin-inline:0;font-size:22px}
.detail.spot-card-frame>.description{margin-top:12px}

/* 地図の一覧カードと詳細シートにも同じ枠線・見出しの関係を使う。 */
.spot-entry.spot-card-frame{padding:0;overflow:visible}
.spot-entry>.spot-card-legend{font-size:14px}
.spot-legend-button{
	display:block;
	max-width:100%;
	border:0;
	background:transparent;
	color:inherit;
	padding:2px 0;
	font:inherit;
	text-align:left;
	white-space:normal;
	cursor:pointer;
}
.spot-legend-button:hover{text-decoration:underline;text-underline-offset:3px}
.spot-entry.spot-card-frame>.spot-card{border-radius:6px}
.spot-entry.spot-card-frame>.area-card{border-radius:6px}
.spot-entry.spot-card-frame>.spot-photo{overflow:hidden;border-radius:0 0 8px 8px}
.detail-sheet-body>.spot-card-frame{
	margin:0;
	padding:0 12px 12px;
	border:1px solid #d6e7f2;
	border-radius:9px;
}
.detail-sheet-body .spot-card-legend{margin-inline:0}
.detail-sheet-body .spot-card-legend>.popup-title{margin:0;font:inherit}
@media(max-width:520px){
	.spot-card-legend{font-size:18px}
	.detail.spot-card-frame{padding:0 16px 16px}
	.detail.spot-card-frame>.spot-card-legend{font-size:20px}
}

/* No Imageも実際の写真と同じ高さにして、写真有無によるカードの縮みを防ぐ。 */
.spot-photo-placeholder,.spot-photo>.photo-missing{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:220px;
	padding:16px;
	background:#edf7fd;
	color:#526b7d;
	font-size:22px;
	font-weight:600;
	letter-spacing:.04em;
	text-align:center;
}
.card.spot-card-frame:not(.area-card-frame)>figure>figcaption{min-height:64px}
.spot-photo>.photo-missing{min-height:155px;font-size:18px}
.spot-entry .spot-photo>.photo-credit{min-height:48px}
.popup-body .spot-photo>.photo-missing{min-height:200px}
.detail-sheet-body .spot-photo>.photo-missing{min-height:180px}
@media(max-width:760px){
	.popup-body .spot-photo>.photo-missing{min-height:160px}
	.detail-sheet-body .spot-photo>.photo-missing{min-height:180px}
}