/* ============================================================
   journey.css — 「テーマ別モデルコース」ページ専用CSS
   heritage_journey.php のみで読み込む。style.css には影響しない。
   共通クラス(card/card-header/btn等)は上書きしない方針。
   ============================================================ */

/* ---- ヒーロー ---- */
.journey-hero {
	position: relative;
	width: 100%;
	height: 40vh;
	min-height: 220px;
	max-height: 420px;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
}
.journey-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px 18px;
	background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
}
/* .content h3 の共通カード風スタイル(白背景・角丸・左の青バー)を打ち消し、
   オーバーレイに直接乗る白文字見出しに戻す */
.content .journey-hero__title {
	color: #fff;
	margin: 0 0 6px;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	font-family: inherit;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.content .journey-hero__title::after {
	display: none;
}
.journey-hero__catch {
	color: #f0f0f0;
	margin: 0;
	font-size: 1.05rem;
}
.journey-hero__credit {
	position: absolute;
	right: 8px;
	bottom: 4px;
	font-size: 0.68rem;
	color: rgba(255,255,255,0.75);
	background: rgba(0,0,0,0.35);
	padding: 1px 6px;
	border-radius: 3px;
}

/* ---- テーマ導入 ---- */
.journey-intro {
	font-size: 1.02rem;
	line-height: 1.9;
}

/* ---- モデル行程(タイムライン) ---- */
.journey-timeline {
	position: relative;
	padding-left: 6px;
}
.journey-day {
	position: relative;
	padding-left: 30px;
	margin-bottom: 18px;
	border-left: 3px solid #0085B2;
}
.journey-day:last-of-type {
	border-left-color: transparent;
}
.journey-day__marker {
	position: absolute;
	left: -19px;
	top: 0;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	background: #0085B2;
	color: #fff;
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: bold;
	box-shadow: 0 0 0 3px #fff;
}
.journey-day__body {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-left: 14px;
	padding-top: 4px;
}
.journey-spot-card {
	display: flex;
	flex-direction: column;
	width: 260px;
	max-width: 100%;
	background: #fafafa;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.journey-spot-card__img {
	height: 140px;
	background-size: cover;
	background-position: center;
	background-color: #ddd;
}
.journey-spot-card__body {
	padding: 10px 12px 12px;
}
.journey-spot-card__body h5 {
	font-size: 1rem;
	margin: 0 0 6px;
	color: #036;
}
.journey-spot-card__body p {
	font-size: 0.86rem;
	line-height: 1.6;
	margin: 0 0 6px;
	color: #333;
}

/* ---- 宿泊エリア提案 ---- */
.journey-lodging-block {
	margin-top: 8px;
	padding: 14px;
	background: #fff7ef;
	border: 1px dashed #d9a066;
	border-radius: 6px;
}
.journey-lodging-block__title {
	margin: 0 0 10px;
	color: #036;
}
.journey-lodging-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}
.journey-lodging-card {
	flex: 1 1 240px;
	background: #fff;
	border: 1px solid #eadbc8;
	border-radius: 6px;
	padding: 12px 14px;
}
.journey-lodging-card h6 {
	color: #036;
	margin: 0 0 6px;
}
.journey-lodging-card p {
	font-size: 0.85rem;
	line-height: 1.6;
	color: #333;
	margin: 0 0 10px;
}
.journey-btn-accent {
	display: inline-block;
	background-color: #c0562e;
	color: #fff;
	border: none;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 0.85rem;
	text-decoration: none;
}
.journey-btn-accent:hover {
	background-color: #a4451f;
	color: #fff;
	text-decoration: none;
}

/* ---- 位置関係マップ ---- */
.journey-map {
	width: 100%;
	height: 380px;
	border-radius: 6px;
}

/* ---- 費用目安テーブル ----
   4列(項目/目安/現地目安/備考)化で幅が増えたため、テーブルだけを
   横スクロール可能なラッパーで囲み、ページ全体の横スクロールを防ぐ */
.journey-cost-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.journey-cost-table {
	min-width: 640px;
}
.journey-cost-table th {
	background-color: #f0f6f8;
	color: #036;
	white-space: nowrap;
}
.journey-cost-table td:nth-child(1),
.journey-cost-table td:nth-child(2),
.journey-cost-table td:nth-child(3) {
	white-space: nowrap;
}

/* ---- レスポンシブ ---- */
@media (max-width: 767px) {
	.journey-hero {
		height: 30vh;
		min-height: 160px;
	}
	.journey-day__body {
		flex-direction: column;
	}
	.journey-spot-card {
		width: 100%;
	}
	.journey-cost-table {
		min-width: 560px;
	}
}