@charset "UTF-8";

/* ==========================================================================
   🗺️ 交通アクセス（access.php）専用スタイルシート
   ========================================================================== */

/* --- 基本のカードとマップ周り --- */
.access_route_group {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 40px 0;
}
.access_card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 4px solid #005588;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.01);
}
.access_card h3 {
	font-size: 1.25rem;
	color: #005588;
	margin: 0 0 20px 0;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.access_direction_block {
	margin-bottom: 24px;
}
.access_direction_block:last-child {
	margin-bottom: 0;
}
.access_card h4 {
	font-size: 1rem;
	color: #007bc2;
	margin: 0 0 12px 0;
	font-weight: 700;
	background: #f0f7ff;
	padding: 6px 12px;
	border-radius: 4px;
	display: inline-block;
}
.access_card p {
	font-size: 0.95rem;
	color: #4a5568;
	line-height: 1.7;
	margin: 0 0 12px 0;
}
.access_card p:last-child {
	margin-bottom: 0;
}

/* --- マップ枠 --- */
.access_map_wrapper {
	margin: 40px 0 20px 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.access_map_wrapper iframe {
	width: 100%;
	height: 450px;
	border: none;
	display: block;
}

/* ==========================================================================
   🚌 バスの経路ステップ（綺麗な囲み枠 ＋ はっきりした太矢印）
   ========================================================================== */
.access_route_diagram {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 35px; /* 矢印が入るスペース */
	margin: 20px 0 35px 0;
}

.route_col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	flex: 1;
}

/* 🚉 駅名の綺麗な囲み枠 */
.route_box {
	background: #f8fafc;
	border: 1px solid #dcdfe6;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 1rem;
	font-weight: bold;
	color: #333;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* ➔ はっきりした太めの青い矢印 */
.route_col:not(:last-child)::after {
	content: "\279C"; /* ➜ くっきりした太矢印 */
	position: absolute;
	right: -26px; /* ボックス間の余白の中央 */
	top: 22px; /* ボックスの縦中央 */
	transform: translateY(-50%);
	color: #007bc2;
	font-size: 1.6rem;
	font-weight: bold;
	z-index: 10;
}

/* 🚌 下部のバス路線説明テキスト */
.route_note {
	font-size: 0.85rem;
	color: #4a5568;
	line-height: 1.6;
}

/* 📱 スマホ対応（縦並びにして、矢印を下向きに） */
@media screen and (max-width: 767px) {
	.access_route_diagram {
		flex-direction: column;
		gap: 30px;
	}
	.route_col {
		width: 100%;
	}
	.route_box {
		max-width: 260px;
		margin: 0 auto 10px auto;
	}
	.route_col:not(:last-child)::after {
		right: 50%;
		top: auto;
		bottom: -28px;
		transform: translateX(50%) rotate(90deg); /* 矢印を90度回転して下向きに */
	}
}