@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600;700;900&display=swap');

:root {
	--primary-color: #323232;
	--sub-color: #008000;
	--border-color: #cccccc;
	--third-color: #ccffcc;

	padding: 0;
}

@keyframes header {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}


* {
	box-sizing: border-box;
	font-size: 14pt;
	font-family: 'Noto sans JP', sans-serif;
	margin: 0;
	padding: 0.5rem;
	line-height: 1.2em;
}

body {
	width: calc(100vw - 2rem);
	margin: 0 auto;
	padding: 0;
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	min-height: 100vh;
	position: relative;
}

a, b, span, i, s, stroke, em, strong, ul, ol, li {
	padding: 0;
	font-size: inherit;
}

img {
	padding: 0;
	display: block;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 900;
	margin: 0.5rem;
	padding: 0;
}

h1 {
	font-size: 2.5rem;
	margin: 0;
}

h2 {
	font-size: 2rem;
	color: var(--primary-color);
	border-bottom: 4px solid var(--primary-color);
}

h3 {
	font-size: 1.75rem;
	color: var(--sub-color);
	border: 2px solid var(--sub-color);
	border-left: 0.5rem solid var(--sub-color);
	padding: 0.5rem;
	border-radius: 0.5rem;
}

h4 {
	font-size: 1.5rem;
	color: white;
	border-bottom: 2px solid var(--primary-color);
	border-left: 10px solid var(--border-color);
	border-right: none;
	background-image: linear-gradient(90deg, var(--primary-color) 0%, white 50%);
	font-weight: 700;
	padding-left: 0.25rem;
}

p {
	text-indent: 1em;
	margin: 0.5rem 0;
}

p.no-indent {
	text-indent: 0;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	padding-left: 0;
	margin-left: 2rem;
}

div {
	width: 100%;
}

table {
	border-collapse: collapse;
	padding: 0;
	flex-shrink: 0;
	table-layout: fixed;
	width: 100%;
}

table.diagram * {
	font-size: 1.5rem;
}

tr {
	padding: 0;
}

tr:nth-child(odd) {
	background-color: var(--third-color);
}

td {
	padding: 0;
}

table.diagram td {
	display: flex;
	justify-content: left;
}

th {
	padding: 0;
	background-color: var(--border-color);
}

td.map {
	width: 105px;
	height: 148.5px;
	position: relative;
	background-color: var(--border-color);
}

div.map {
	font-size: 1.4rem;
	position: absolute;
	width: 105px;
	padding: 0;
	top: calc(50% - 1em);
	left: 0;
	text-align: center;
	vertical-align: middle;
	font-weight: 900;
	color: blue;
}

div.map.new {
	color: red;
}

div.map.semi-new {
	color: brown;
}

div.sea {
	background-color: #80aaff;
	width: 105px;
	height: 148.5px;
	position: absolute;
	top: 0;
	left: 0;
}

div.dia-show {
	width: 5rem;
	border: none;
}

div.dia-show span {
	font-size: 0.75em;
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
}

div.dia-show p {
	text-indent: 0;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
}



.border {
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
}

div.flex {
	display: flex;
}

.three > div {
	flex-basis: 33%;
	flex-shrink: 0;
}

select {
	padding: 0;
}

header {
	background-image: linear-gradient(90deg, var(--primary-color), var(--sub-color), var(--primary-color));
	padding: 0 0.5rem;
	margin: 0;
	position: sticky;
	top: 0;
	left: 0;
	color: white;
	animation: header 0.5s both;
	z-index: 10;
}

header > div {
	display: flex;
}

header p {
	text-indent: 0;
	margin: 0;
	text-overflow: ellipsis;
	width: 100%;
}

nav {
	transition: all 0.1s;
	height: 0;
	padding: 0;
	margin-bottom: 0.25rem;
	overflow-y: hidden;
}

nav.open {
	height: 2rem;
}

nav > ul {
	display: flex;
	list-style-type: none;
	
}

nav > ul > li {
	width: 100%;
	font-size: 1.5rem;
	font-weight: 900;
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: 0.25rem;
	color: black;
	background-color: rgba(255, 255, 255, 0.8);
	transition: all 0.1s;
}

nav > ul > li > a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	color: inherit;
	transition: all 0.1s;
}

nav > ul > li:hover {
	background-color: white;
}

nav > ul > li > a:hover {
	color: blue;
}

div#container {
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row-reverse;
	padding-bottom: 4rem;
}

main {
	width: 80%;
	padding: 0.5rem;
}

div#side {
	width: 20%;
	padding: 0.5rem;
	flex-shrink: 0;
	border-right: 2px solid var(--border-color);
}

footer {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--primary-color));
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

section {
	border: 1px solid var(--border-color);
	border-radius: 0.25rem;
	background-color: whitesmoke;
}

section > h2 {
	font-size: 1.5rem;
	text-align: center;
}

span.railmark {
	display: inline-block;
	padding: 0.15rem;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
	color: var(--primary-color);
	margin: 0 0.5rem;
	font-weight: 900;
	background-color: white;
}

li:has(span.railmark) {
	margin: 0.25rem 0 0.25rem 3rem;
}

td:has(span.railmark) {
	padding: 0.15rem;
}

span.roadmark {
	display: inline-block;
	color: white;
	font-family: 'Helvetica', sans-serif;
	font-weight: bold;
	width: 1.5rem;
	margin: 0.25rem 1rem 0.25rem 0.25rem;
	position: relative;
	z-index: 2;
	text-align: center;
	
}

span.roadmark::before {
	content: '';
	display: block;
	width: 1.5rem;
	padding: 0.1rem;
	height: 1.5rem;
	position: absolute;
	top: -15%;
	left: -5%;
	z-index: -1;
}

span.roadmark.letter3 {
	transform: scaleX(0.8);
	margin: 0.25rem 1rem 0.25rem calc(0.2rem * 0.8);
}

span.roadmark.letter3::before {
	width: calc(1.5rem / 0.8);
	left: -12%;
}

td:has(span.roadmark) {
	height: 2.4rem;
}

span.roadmark.route::before {
	background-image: url("/imgroad/Core/image/route.png");
	background-size: 100% 100%;
}

span.roadmark.pref-route::before {
	background-image: url("/imgroad/Core/image/pref_route.png");
	background-size: 100% 100%;
}

/* 時刻表とか鉄道関連 */
td.railway {
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
}

td.railway > div {
	flex-basis: 4rem;
	cursor: pointer;
}

td.railway > div:hover {
	opacity: 0.75;
}

td.railway > div > p {
	margin: 0;
	padding: 0;
	text-indent: 0;
	text-align: center;
}

td.railway > div > p:first-child {
	font-size: 0.75rem;
}

td.railway > div > p:nth-child(2) {
	font-size: 2rem;
	font-weight: bold;
}

div.train-type {
	border: 1px solid black;
	padding: 0rem;
	display: flex;
	justify-content: left;
}

div.train-type > p {
}



@media screen and (max-width: 800px) {
	h1 {
		text-align: center;
		padding: 0.5rem;
	}

	header {
		position: relative;
	}

	header p {
		display: none;
	}

	nav > ul {
		display: block;
	}

	nav > ul > li {
		margin: 0.25rem 0;
	}

	nav.open {
		height: auto;
	}

	div#container {
		display: block;
	}

	main {
		width: 100%;
	}

	div#side {
		width: 100%;
		border: none;
	}

	div.flex {
		display: block;
	}

	.three > div {
		flex-basis: auto;
	}
}

div#menu {
	width: 3rem;
	padding: 0;
	position: relative;
	margin-right: 1rem;
}

div#menu > i {
	font-size: 3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}