@charset "UTF-8";

/* ============================================================ */
/*                      高速道路一覧表示用                      */
/* ============================================================ */
/* --- フッター --- */
.footer {
	padding-top: 10px;				/* ボックスのパディング（上） */
	padding-bottom: 10px;				/* ボックスのパディング（下） */
	background-color: #8fcf00;
	border-top: 1px #002800 solid;		/*上枠線_(太さ、色、スタイル)*/
	color: #000000;
}

.footer li
{
	font-size: 16px;
}

.footer a
{
	color: #0000ff;
	text-decoration: none;
}

.footer a:hover
{
	color: #ff0000;
	text-decoration: underline;
}

/* --- セクションボックス --- */
.section {
	width: 1000px;			/* ボックスの幅 */
	margin: 0 auto;			/* ボックスのマージン（上下、左右） */
	background-color: #ffffcc;	/* ボックスの背景色 */
	border: 1px #c0c0c0 solid;	/* ボックスの境界線 */
	margin-bottom: 20px;
}

.section:last-child {
	margin-bottom: 0;

}

.section div.title {
	width: 700px; /* 見出しエリアの幅 */
	margin: 0 auto;
}

/* --- 見出しタイトル --- */
.section div.title h2 {
	font-size: 100%;
	line-height: 100%;
	text-align: center;
  color: #3780b1;
  text-align: center;
  padding: 0.5rem;
	margin: 10px auto;
  border: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/* --- メニューエリア --- */
.section h3 {
	margin: 0 10px 5px;		/* メニューのマージン（上、左右、下） */
	text-align: left;
	padding: 2px 0 2px 10px;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #ffe1cf;/*背景色*/
	border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

.section ul.menu {
	display: flex;
	flex-wrap: wrap;
	width: 930px;			/* メニューの幅 */
	margin: 2px auto 10px;	/* メニューのマージン（上、左右、下） */
	padding: 0;
	list-style-type: none;
}

/* --- メニュー項目 --- */
.section ul.menu li {
	width: 20%;						/* 項目の幅 - 横の個数に影響 */
	padding-bottom: 2px;					/* 項目の下パディング */
	float: left;
	line-height: 1.2;
}

/* --- リンク --- */
.section ul.menu li a {
	margin-left: 5px;		/* リンクエリアの左マージン */
	text-decoration: none;	/* テキストの下線（なし） */
	text-align: center;	 	/*1段目は文字を中央合わせに*/
	display: block;
}

/* --- ホバー時の設定 --- */
.section ul.menu li a:hover {
	background-color: #ffddff;
}