@charset "UTF-8";
/* 都道府県別 路線図目次（リニューアル版） */
.mokuji {
	--mk-accent: #F08A00;
	--mk-accent-soft: #FFF4E0;
	--mk-rail: #1F6FB2;
	--mk-rail-soft: #E6F0FA;
	--mk-bus: #2E8B57;
	--mk-bus-soft: #E6F4EC;
	--mk-border: #E2E2E2;
	--mk-text: #222222;
	--mk-muted: #666666;
	--mk-city: #FFF6CC;
	--mk-choson: #E3F5E1;
	--mk-kencho: #DDF3FA;
	max-width: 1100px;
	color: var(--mk-text);
	line-height: 1.6;
}
.mokuji a {
	text-decoration: none;
}
.mokuji a:hover {
	text-decoration: underline;
}
/* 見出し */
.mokuji h3 {
	border: none;
	border-left: 6px solid var(--mk-accent);
	background: none;
	padding: 2px 0 2px 12px;
	margin: 40px 0 16px;
	font-size: 1.4rem;
	font-weight: bold;
	scroll-margin-top: 10px;
}
.mokuji h3 i {
	color: var(--mk-accent);
	margin-right: 6px;
}
.mokuji h4 {
	border: none;
	font-size: 1.1rem;
	font-weight: bold;
	margin: 24px 0 10px;
	color: var(--mk-muted);
}
/* 上部メニュー（カード） */
.mk-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 20px 0 10px;
}
.mk-menu-group {
	flex: 1 1 100%;
}
@media (min-width: 1000px) {
	.mk-rail {
		flex: 4 1 0;
	}
	.mk-bus {
		flex: 5 1 0;
	}
	.mk-menu ul {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}
}
.mk-menu-label {
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--mk-muted);
	margin-bottom: 8px;
}
.mk-menu ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
.mk-menu a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 104px;
	padding: 12px 6px;
	border: 1px solid var(--mk-border);
	border-radius: 12px;
	background-color: #FFFFFF;
	color: var(--mk-text);
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: transform 0.15s, box-shadow 0.15s;
}
.mk-menu a:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.mk-menu a i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 1.4rem;
}
.mk-rail a i {
	background-color: var(--mk-rail-soft);
	color: var(--mk-rail);
}
.mk-bus a i {
	background-color: var(--mk-bus-soft);
	color: var(--mk-bus);
}
/* 地図で探す */
.mk-map {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.mk-map-image {
	flex: 0 0 auto;
	max-width: 100%;
	overflow-x: auto;
}
.mk-map-lists {
	flex: 1 1 400px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}
.mk-card {
	border: 1px solid var(--mk-border);
	border-radius: 12px;
	background-color: #FFFFFF;
	padding: 12px 14px;
}
.mk-card-title {
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--mk-accent);
	margin-bottom: 6px;
}
.mk-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}
.mk-card li a::before {
	content: "\203A";
	color: var(--mk-accent);
	font-weight: bold;
	margin-right: 6px;
}
/* 市町村名で探す */
.mk-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.85rem;
	color: var(--mk-muted);
	margin-bottom: 12px;
}
.mk-legend span::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid #CCCCCC;
	margin-right: 4px;
	vertical-align: -2px;
}
.mk-legend .mk-kencho::before { background-color: var(--mk-kencho); }
.mk-legend .mk-city::before { background-color: var(--mk-city); }
.mk-legend .mk-choson::before { background-color: var(--mk-choson); }
.mk-kana {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--mk-border);
}
.mk-kana-head {
	flex: 0 0 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--mk-accent);
	color: #FFFFFF;
	font-weight: bold;
}
.mk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
.mk-chips a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	color: var(--mk-text);
	background-color: #F5F5F5;
}
.mk-chips a:hover {
	text-decoration: none;
	border-color: var(--mk-accent);
	color: var(--mk-accent);
}
.mk-chips .mk-kencho a { background-color: var(--mk-kencho); font-weight: bold; }
.mk-chips .mk-city a { background-color: var(--mk-city); }
.mk-chips .mk-choson a { background-color: var(--mk-choson); }
/* 一覧（バス会社・コミュニティバス） */
.mk-list {
	border: 1px solid var(--mk-border);
	border-radius: 12px;
	overflow: hidden;
	background-color: #FFFFFF;
}
.mk-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 12px 16px;
	border-top: 1px solid var(--mk-border);
}
.mk-row:first-child {
	border-top: none;
}
.mk-row:nth-child(even) {
	background-color: #FAFAFA;
}
.mk-row-name {
	flex: 0 0 220px;
	font-weight: bold;
}
.mk-row-body {
	flex: 1 1 300px;
}
.mk-row-body .mk-chips a {
	padding: 4px 12px;
	font-size: 0.9rem;
	background-color: var(--mk-bus-soft);
}
.mk-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	line-height: 1.6;
}
.mk-links .fa-arrow-up-right-from-square {
	font-size: 0.75em;
	margin-left: 4px;
	color: var(--mk-muted);
}
.mk-notes {
	font-size: 0.9rem;
	color: var(--mk-muted);
	padding-left: 1.2em;
	line-height: 1.6;
}
/* スマホ */
@media (max-width: 600px) {
	.mk-row-name {
		flex-basis: 100%;
	}
	.mokuji h3 {
		font-size: 1.2rem;
	}
}
/* 五十音ボタン */
.mk-kana-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	line-height: 1;
}
.mk-kana-nav a,
.mk-kana-nav span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1.1rem;
}
.mk-kana-nav a {
	background-color: var(--mk-accent);
	color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.mokuji .mk-kana-nav a:hover {
	text-decoration: none;
	opacity: 0.85;
}
.mk-kana-nav span {
	background-color: #EEEEEE;
	color: #BBBBBB;
}
.mokuji .mk-row-kana {
	background-color: var(--mk-accent-soft);
	color: var(--mk-accent);
	font-weight: bold;
	padding: 6px 16px;
	scroll-margin-top: 10px;
}
/* 独自SVGアイコン・事業者カラー */
.mk-menu a i svg {
	width: 1.45em;
	height: 1.45em;
	fill: currentColor;
}
.mk-rail .mk-jr a i {
	background-color: #FFF1E0;
	color: #E8740C;
}
.mk-rail .mk-meitetsu a i {
	background-color: #FDE8E8;
	color: #D6001C;
}
.mokuji h3 .mk-svg svg {
	width: 1.3em;
	height: 1.3em;
	fill: currentColor;
	vertical-align: -0.25em;
}
/* 地区カード内のチップ（名古屋市の区など） */
.mk-card-wide {
	grid-column: 1 / -1;
}
.mk-card .mk-chips a::before {
	content: none;
}