@charset "utf-8";

/*
「*（全称セレクター）」を利用して、marginとpaddingを「0」に設定します。すべての要素のmarginとpaddingがリセットされます。
*/
* {
	margin: 0;
	padding: 0
}

/*
a要素の下線。
*/
a {
	text-decoration : none
}

/*
ul、ol要素の「・」をオフに指定します。
*/
ul, ol {
	list-style : none
}

img {
	vertical-align : middle;
	max-width : 100%
}

/*
タイポグラフィ（文字周り）
*/
html {
	font-family : verdana, sans-serif;
	line-height : 1.5
	
	max-width : 96%
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom : 6px
}

h1 {
	font-size: 24px; 
	line-height: 1
	
	color: #ffffff; /* 文字の色 */
	padding-left: 10px; /* 左の余白 */
	background-color: #99bbff;
} /* 48px */

h2 {
	font-size : 18px;
	line-height : 1.3333
	
	color: #000099; /* 文字の色 */
	padding-left: 10px; /* 左の余白 */
	border-width: 0px 0px 2px 15px; /* 枠の幅 */
	border-style: solid; /* 枠の種類 */
	border-color: #9999ff; /* 枠の色 */

} /* 48px */

h3 {
	font-size : 18px;
	line-height : 1
} /* 24px */

header {
    text-align:center;
    padding:10px;
    background-image: -moz-linear-gradient(top, #99bbff, #0000FF);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #99bbff), color-stop(1.0, #0000FF));
    color:#fff;
    text-shadow: 0px 0px 4px #000000;
}

header h1 {
	background-color: transparent;
}

nav h1 {
	font-size : 14px;
	text-align:center;
}

nav {
	margin-bottom : 12px;
	background-color: #99bbff;
}

nav ul {
	overflow : hidden
}

nav ul li {
	margin-left:1%;
	width : 24%;
	float : left
}

nav ul li a {
	display : block;
	color : #ffffff;
	padding : 12px 0
}

nav ul li a:hover {
	color : white;
	background-color : #0000ff
}

section {
	overflow: hidden;
	width : 90%;
	margin : 0 auto;
	text-align : center
}

section p { 
	margin-bottom : 24px;
	text-align : left
}

section img { 
	margin-bottom : 24px; 
	box-shadow : 0 0 12px #000
}

section ul
{
	overflow : hidden
	width:90%;
}

section ul li
{
	float:left;
	margin-left:10px;
	margin-bottom:10px;
	background-color:#99bbff;
	width:240px;
	height:100px;
}

section ul li a {
	display : block;
	color : #ffffff;
	padding : 12px 0
}

section ul li a:hover {
	color : white;
	background-color : #0000ff;
	width:100%;
	height:100%;
}

footer {
	color : black;
	text-align : center;
}
	/* background : url(../images/footer_bg.png) */

/*768px*/
@media screen and (min-width : 768px) {
	#contents {
		text-align : left
	}
}

/* 1024px */
@media screen and (min-width : 1024px) {
	html {
		font-size : 16px
	}
	/* @group nav */
	nav ul {
		width : 100%; /* 960/1024 */
		margin : 0 auto
	}
	/* @end */
	
	/* @group #contents */
	section {
		overflow : hidden;
		width : 93.75%
	} /* 960/1024 */
	
	section #main,
	section #sub { 
		float : left;
		margin : 0 1.0416667%
	} /*10/960*/ 
	
	section #main {
		width : 64.5833333%
	} /*620/960*/
	
	section #sub {
		width : 31.25%
	} /*300/960*/
	/* @end */
	
	/* @group footer */
	footer {
		//width : 91.796875%; /*940/1024*/
		padding : 24px 0;
		margin : 0 auto
	}
	/* @end */
}