@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
}

body {
	color: #000000;
	background-color: #FFFFFF;
}

h1 {
	height: 0px;
	width: 0px;
	overflow: hidden;
}

h2 {
	font-size: xx-large;
	color: #FFFFFF;
	font-family: Arial,Helvetica Black;
}

div.section {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
}

div.section-body {
	margin: 5%;
	line-height: 1.6;
	color: #FFFFFF;
}

div.section-body a {
	color: #FFFFFF;
}

div.section-body a:hover {
	text-decoration: none;
}

div#section1 {
	top: 0;
	left: 0;
	background-color: #66CC99;
  background-image: url("./img/bg.gif"); /* 全体の背景画像 */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: right bottom        /* 背景画像の位置は右下 */
}

div#section2 {
	top: 0;
	left: 100%;
	background-color: #66CCCC;
}

div#section3 {
	top: 0;
	left: 200%;
	background-color: #99CCCC;
}

div#section4 {
	top: 100%;
	left: 0;
	background-color: #CCCCFF;
}

div#section5 {
	top: 100%;
	left: 100%;
	background-color: #FFCC99;
}

div#section6 {
	top: 100%;
	left: 200%;
	background-color: #FF99CC;
}

div#section7 {
	top: 200%;
	left: 0;
	background-color: #9999FF;
}

div#section8 {
	top: 200%;
	left: 100%;
	background-color: #00CCCC;
}

div#section9 {
	top: 200%;
	left: 200%;
	background-color: #CC99CC;
}

table#navi caption {
caption-side: top;
}

div#navi {
	position: fixed;
	_position: relative;
	right: 5%;
	bottom: 5%;
	border: 4px solid #999999;
font-size:20px;
font-weight:bold;
}

div#navi table {
	border-collapse: collapse;
}

div#navi table td {
}

div#navi table td#navi1 {
	background-color: #66CC99;
}

div#navi table td#navi2 {
	background-color: #66CCCC;
}

div#navi table td#navi3 {
	background-color: #99CCCC;
}

div#navi table td#navi4 {
	background-color: #CCCCFF;
}

div#navi table td#navi5 {
	background-color: #FFCC99;
}

div#navi table td#navi6 {
	background-color: #FF99CC;
}

div#navi table td#navi7 {
	background-color: #9999FF;
}

div#navi table td#navi8 {
	background-color: #00CCCC;
}

div#navi table td#navi9 {
	background-color: #CC99CC;
}

div#navi table td a {
	display: block;
	width: 3em;
	height: 2em;
	color: #FFFFFF;
	text-decoration: none;
}

div#navi table td a:hover {
	background-color: #FF00FF;
}