/* 現地情報 一覧（/spot/・/spot_cat/*） — 2026-10-03 blanc / 加藤様の見本「現地情報.png」の型 */
.jr-spot {
	--jr-navy: #183a68;
	--jr-gold: #c49a45;
	--jr-ink: #1f2a37;
	--jr-sub: #5b6573;
	--jr-line: #e3e6ea;
	--jr-beige: #efe4cf;
	--jr-beige-ink: #7a5a28;
	--jr-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	color: var(--jr-ink);
	background: #fff;
}
.jr-spot *,
.jr-spot *::before,
.jr-spot *::after { box-sizing: border-box; }
.jr-spot a { text-decoration: none; }

/* ヒーロー */
.jr-spot-hero {
	position: relative;
	min-height: 330px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center 40%;
}
.jr-spot-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 33, 62, .78) 0%, rgba(14, 33, 62, .45) 38%, rgba(14, 33, 62, 0) 70%);
}
.jr-spot-hero__inner {
	position: relative;
	width: min(1140px, 100% - 48px);
	margin: 0 auto;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.jr-spot-hero__title {
	margin: 0;
	font-family: var(--jr-serif);
	font-weight: 700;
	font-size: 52px;
	letter-spacing: .14em;
	line-height: 1.2;
	color: #fff;
	border: 0;
	padding: 0;
	background: none;
}
.jr-spot-hero__en {
	margin: 12px 0 0;
	font-size: 15px;
	letter-spacing: .24em;
	font-weight: 500;
}
.jr-spot-hero__lead {
	margin: 22px 0 0;
	font-size: 19px;
	line-height: 1.75;
	letter-spacing: .06em;
}

.jr-spot__inner {
	width: min(1140px, 100% - 48px);
	margin: 0 auto;
	padding: 18px 0 56px;
}

/* カテゴリタブ */
.jr-spot-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 22px;
}
.jr-spot-tabs__item {
	min-width: 140px;
	padding: 8px 22px;
	border: 1px solid #d8dce2;
	border-radius: 999px;
	background: #f1f3f5;
	color: #3d4653;
	font-size: 14px;
	text-align: center;
	letter-spacing: .06em;
	transition: background .2s, color .2s;
}
.jr-spot-tabs__item:hover { background: #e4e8ed; }
.jr-spot-tabs__item.is-active {
	background: var(--jr-navy);
	border-color: var(--jr-navy);
	color: #fff;
	font-weight: 600;
}

/* カード共通 */
.jr-spot-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--jr-line);
	box-shadow: 0 2px 10px rgba(20, 40, 70, .07);
}
.jr-spot-card__img {
	display: block;
	aspect-ratio: 2.85 / 1;
	overflow: hidden;
	background: #e9edf2;
}
.jr-spot-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.jr-spot-card:hover .jr-spot-card__img img { transform: scale(1.04); }
.jr-spot-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 20px 14px;
}
.jr-spot-card__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	color: var(--jr-sub);
}
.jr-spot-card__cat {
	padding: 2px 12px;
	border-radius: 3px;
	background: var(--jr-beige);
	color: var(--jr-beige-ink);
	font-weight: 600;
}
.jr-spot-card__title {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--jr-serif);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.55;
	letter-spacing: .03em;
}
.jr-spot-card__title::before,
.jr-spot-card__title::after { content: none; }
.jr-spot-card__title a { color: var(--jr-ink); }
.jr-spot-card__title a:hover { color: var(--jr-navy); }
.jr-spot-card__text {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--jr-sub);
}
.jr-spot-card__more {
	align-self: flex-end;
	margin-top: auto;
	padding: 10px 0 2px;
	border-bottom: 1px solid var(--jr-navy);
	color: var(--jr-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
}
.jr-spot-card__more span { margin-left: 14px; }

/* 注目記事（先頭1件） */
.jr-spot-card--featured {
	flex-direction: row;
	align-items: stretch;
	padding: 8px;
	margin-bottom: 16px;
}
.jr-spot-card--featured .jr-spot-card__img {
	flex: 0 0 48%;
	aspect-ratio: 2.2 / 1;
}
.jr-spot-card--featured .jr-spot-card__body { padding: 8px 18px 6px 26px; }
.jr-spot-card--featured .jr-spot-card__title { font-size: 22px; line-height: 1.6; margin-top: 16px; }
.jr-spot-card--featured .jr-spot-card__text { font-size: 14px; line-height: 1.85; margin-top: 14px; }

/* 3列 */
.jr-spot-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.jr-spot__empty { text-align: center; padding: 40px 0; }

/* お問い合わせ帯 */
.jr-spot-cta {
	position: relative;
	background-size: cover;
	background-position: center 30%;
}
.jr-spot-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(253, 248, 240, .9), rgba(253, 248, 240, .82));
}
.jr-spot-cta__inner {
	position: relative;
	width: min(1140px, 100% - 48px);
	margin: 0 auto;
	padding: 22px 0 30px;
	text-align: center;
}
.jr-spot-cta__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: .06em;
}
.jr-spot-cta__title {
	margin: 8px 0 0;
	font-family: var(--jr-serif);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: .1em;
	color: var(--jr-ink);
}
.jr-spot-cta__btns {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
}
.jr-spot-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 280px;
	padding: 15px 28px;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	box-shadow: 0 4px 12px rgba(20, 40, 70, .18);
	transition: opacity .2s;
}
.jr-spot-cta__btn:hover { opacity: .88; color: #fff; }
.jr-spot-cta__btn span { margin-left: 6px; }
.jr-spot-cta__btn--gold { background: var(--jr-gold); }
.jr-spot-cta__btn--navy { background: var(--jr-navy); }
.jr-spot-cta__badge {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--jr-line);
	box-shadow: 0 2px 10px rgba(20, 40, 70, .1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--jr-ink);
}

/* タブレット */
@media (max-width: 1024px) {
	.jr-spot-grid { grid-template-columns: repeat(2, 1fr); }
	.jr-spot-cta__badge { display: none; }
}

/* スマートフォン */
@media (max-width: 599px) {
	.jr-spot-hero { min-height: 230px; }
	.jr-spot-hero__inner,
	.jr-spot__inner,
	.jr-spot-cta__inner { width: calc(100% - 32px); }
	.jr-spot-hero__title { font-size: 34px; }
	.jr-spot-hero__en { font-size: 12px; margin-top: 8px; }
	.jr-spot-hero__lead { font-size: 15px; margin-top: 14px; }
	.jr-spot-tabs { gap: 8px; justify-content: flex-start; }
	.jr-spot-tabs__item { min-width: 0; flex: 1 1 calc(33.333% - 8px); padding: 7px 8px; font-size: 13px; }
	.jr-spot-card--featured { flex-direction: column; padding: 0; }
	.jr-spot-card--featured .jr-spot-card__img { flex: none; aspect-ratio: 2.2 / 1; }
	.jr-spot-card--featured .jr-spot-card__body { padding: 14px 16px; }
	.jr-spot-card--featured .jr-spot-card__title { font-size: 18px; margin-top: 12px; }
	.jr-spot-grid { grid-template-columns: 1fr; gap: 14px; }
	.jr-spot-card__body { padding: 14px 16px; }
	.jr-spot-cta__title { font-size: 20px; letter-spacing: .04em; }
	.jr-spot-cta__btns { flex-direction: column; align-items: stretch; gap: 12px; }
	.jr-spot-cta__btn { min-width: 0; }
}