@charset "UTF-8";

/* ============================================================ */
/*										 	トンネル一覧表示用											 */
/* ============================================================ */
.wrapper {
	overflow: visible;
}

#kaisetsu {
	width: 620px;
	margin: 1rem auto;
	border: 1px #000000 solid;
	padding: 0;
	text-align: left;
}

#kaisetsu h4, #kaisetsu dl, p {
	margin: 0.5rem;
}

dl {
	padding: 0;
}

/*--------------------------------------------------------*/
/*											 検索欄装飾											 */
/*--------------------------------------------------------*/

/* ----- 検索欄 ----- */
.live_filter_table p {
	text-align: center;
}

input {
	margin-right: 10px;
}

input:last-child {
	margin-right: 0;
}

.form-text {
	height: 2.4em;
	width: 20rem;
	padding: 0 16px;
	border-radius: 4px;
	border: none;
	box-shadow: 0 0 0 1px #ccc inset;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.form-text:focus {
	outline: 0;
	box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.form-text:hover {
	outline: 0;
	box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

/* buttonタグ　バージョン */
.form-button {
		border: 0;
		width: 100px;
		height: 2rem;
/*		padding: 0 20px;*/
		font-size: 0.8rem;
		text-align: center;
		color: #fff;
		text-shadow: 1px 1px 1px #000;
		border-radius: 4px;
		background-color: rgb(33, 150, 243) ;
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}
	
.form-button:hover {
	background-color: rgba(0, 0, 255, 1);
}
	
.form-button:active {
	box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, 0.6),
		inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/*--------------------------------------------------------*/
/*											 表全体装飾											 */
/*--------------------------------------------------------*/
table {
	border: 1px #000000 solid;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
}

thead, tfoot {
	border: 1px #000000 solid;
	text-align: center;
	font-size: 10pt;
}

/* ----- 表の行 ----- */
tr {
	height: 32px;
}

/* ----- 表の各欄 ----- */
td ,th {
	border: 1px #000000 solid;
	padding: 2px;
	font-size : 10pt;
}

td {
	line-height: 1.25em;
}

/* ----- 表の見出し欄 ----- */
th {
	text-align: center;
	position: sticky;
	top: -1px;
	background-color: #00d0d0;
	background-clip: padding-box;
}

/* ----- トンネル名 ----- */
td.name, th.name {
	border-top: none;
	width: 200px;
	height: 32px;
}

td.name {
	text-align: left;
}

/* ----- 長さ ----- */
td.extend, th.extend {
	width: 50px;
}

td.extend {
	text-align : right;
}

/* ----- 供用年 ----- */
td.year, th.year {
	width: 50px;
}

td.year {
	text-align: center;
}

/* ----- 路線道路名 ----- */
td.road, th.road {
	width: 190px;
}

td.road {
	text-align: left;
}

/* ----- 所在地 ----- */
td.location, th.location {
	width: 280px;
}

td.location {
	text-align: left;
}

/* ----- 備考 ----- */
td.remarks, th.remarks {
	width: 250px;
}

td.remarks {
	text-align : left;
}

/*--------------------------------------------------------*/
/*												 行の装飾												 */
/*--------------------------------------------------------*/

/* ----- 建設中のトンネル ----- */
tr.construction {
	color : red;
}

/* ----- 一般車通行禁止のトンネル ----- */
tr.traffic-ban {
	color : blue;
}

/* ----- 危険物積載車両通行禁止のトンネル ----- */
tr.kiken {
	background-color: #fdd;/*azure;*/
}

/* ----- 名称変更等されたトンネル ----- */
tr.change {
	background-color: lightgrey;
}

/* ------------------------------------ */

dl, p {
	font-size: 11pt;
}

dt {
	font-weight: bold;
}

dd {
	margin-left: 2ex;
	margin-bottom: 0.5ex;
}

.moji_red {
	color: red;
	border: solid 1px transparent;
}

.moji_blue {
	color: blue;
	border: solid 1px transparent;
}

.moji_kiken {
	color: #fdd; /*azure;*/
	background-color: #fdd; /*azure;*/
	border: solid 1px black;
}

.moji_rename {
	color: lightgrey;
	background-color: lightgrey;
	border: inset 1px black;
}


@media print {
	thead {
		display: table-header-group;
	}

	th {
		text-align: center;
		position: static;
		top: 0;
		background-color: #dd0;
	}
}