@charset "utf-8";

#header{
	/*border: #ff0000 solid 2px;*/
	/*position: fixed; スクロール固定 */
	margin: 0;
	width: 100%;
	height: 30px;
	background-color: lavenderblush;
}

div.headerTitle{
	/*border: #ff0000 solid 2px;*/
	margin: 0px auto;
	width: 24em;
	color: #333366;
}

/*
div.logoAcademyK12Program{
	margin: 20px auto;
	font-weight: bold;
	font-size: 1.3em;
	width: 20em;
}
*/

#footer{
	/*border: #ff0000 solid 2px;*/
	margin: 0;
	width: 100%;
	height: 60px;
	background-color: lavenderblush;
}

button.buttonFull{
	width: 100%;
	height: 1.8em;
	font-size: 1.2em;
	color: #ffffff;
}

button.buttonFull.application{background-color: #339966;}

div.overViewNarrow{
	border: #66cc66 solid 1px;
	margin: 0px auto;
	width: 90%;
	padding: 10px;
	font-size: 0.7em;
}

div.overViewWide{
	border: #66cc66 solid 1px;
	margin: 50px auto 50px auto;
	width: 70%;
	padding: 30px;
	font-size: 0.9em;
}

div.titleNarrow{
	font-weight: bold;
	font-size: 1.1em;
	text-align: center;
}

div.titleWide{
	font-weight: bold;
	font-size: 1.5em;
	/*color: #333399;*/
}

div.subTitleNarrow{
	font-weight: bold;
	font-size: 0.9em;
	text-align: center;
}

div.subTitleWide{
	font-weight: bold;
	font-size: 1.1em;
}

div.remark{
	font-weight: bold;
	font-size: 1.2em;
	color: red;
}

div.imgCenter{
	margin: 0px auto;
	width: 610px;
	padding: 10px;
	text-align: center;
}

div.mainArticle{
	color: #333399;
}

.red{
	color: red;
}


@media screen and (min-width: 320px){
	body{
		margin: 0;
	}
	img{
		max-width: 100%;
		height: auto;
	}
	#mainPanel{
		width: 100%;
		height: auto;
		margin: 0px auto;
		background-color: #ffffff;
	}
	#logo{
		width: 100%;
		height: auto;
		background-color: #ffffff;
		margin: 0 auto;
		text-align: center;
		font-size: small;
	}
	#sidebar{
		/*border: #ff0000 solid 1px;*/
		width: 100%;
		height: auto;
		background-color: #ffffff;
	}
	#upper{
		width: 100%;
		height: auto;
		background-color: #ffffff;
	}
	#lower{
		width: 100%;
		height: auto;
		background-color: #ffffff;
	}
	#main{
		clear: both;
		width: 100%;
		height: auto;
		background-color: #ffffff;
		margin: 10px 2%;
	}
	div.chararea{
		/*border: #ff0000 solid 1px;*/
		width: 96%;
		margin: 15px auto;
		background-color: #ffffff;
		color: #003300;
	}
}

@media screen and (min-width: 920px){
	body{
		margin: 0;
		background-color: lavenderblush;
	}
	#imgHelloWorld{
		max-width: 610px;
		height: 460px;
	}
	#baShirabegakushu{
		border: #cccccc solid 1px;
		width: 300px;
		height: 87px;
	}
	#mainPanel{
		/*border: #00ff00 solid 2px;*/
		width: 936px;
		height: auto;
		margin: 0 auto;
		background-color: #ffffff;
	}
	#logo{
		border: #ffffff solid 4px;
		float: left;
		max-width: 606px;
		height: 491px;
		background-color: #ffffff;
		margin: 0 auto;
		text-align: center;
		font-size: small;
	}
	#sidebar{
		/*border: #ff0000 solid 2px;*/
		float: right;
		width: 322px;
		height: 396px;
		background-color: #ffffff;
	}
	#upper{
		border: #ffffff solid 4px;
		width: 314px;
		height: 396px;
		background-color: #ffffff;
	}
	#lower{
		border: #ffffff solid 4px;
		width: 314px;
		height: 87px;
		background-color: #ffffff;
	}
	#main{
		/*border: #0000ff solid 2px;*/
		clear: both;
		width: 936px;
		height: auto;
		background-color: #ffffff;
		margin: 0 auto;
	}
	div.chararea{
		/*border: #ff0000 solid 2px;*/
		width: 700px;
		margin: 20px auto;
		font-size: 0.9em;
		background-color: #ffffff;
		color: #003300;
	}
}

/*
@media screen and (min-width: 480px){
}
@media screen and (min-width: 768px){
}
@media screen and (min-width: 920px){
}
*/