/*ブラウザ幅が480px以下の時にスタイルが適用*/
@media screen and (max-width: 480px) {
	div.block1 {
		margin-top: 10%;
		margin-left: 20px;
		float: left;
		height: auto;
		width: auto;
		/*以下はfloatがどこまで効いているかの確認用*/
		/*background:gold;*/
	}

	div.block2 {
		margin-top: 5%;
		text-align: center;
	}

	.vertical {
		width: 150px;
		max-width: 100%;
		height: auto;
	}

	.horizontal {
		width: 250px;
		max-width: 100%;
		height: auto;
	}

	p.yajirushi {
		margin-top: 20px;
	}
	
	/*フォントサイズ変更*/
	div.block1 p { font-size: 8px; }
	div.block2 p { font-size: 8px; }
	div.footer p { font-size: 6px; }
	
}

/*ブラウザ幅が481px以上、667px以下の時にスタイルが適用*/
@media screen and (min-width: 481px) and (max-width: 667px) {
	div.block1 {
		margin-top: 10%;
		margin-left: 20px;
		float: left;
		height: 400px;
		width: auto;
		/*以下はfloatがどこまで効いているかの確認用*/
		/*background:gold;*/
	}

	div.block2 {
		margin-top: 5%;
		text-align: center;
	}

	.vertical {
		width: 200px;
		max-width: 100%;
		height: auto;
	}

	.horizontal {
		width: 290px;
		max-width: 100%;
		height: auto;
	}

	p.yajirushi {
		margin-top: 20px;
	}

	/*フォントサイズ変更*/
	div.block1 p { font-size: 10px; }
	div.block2 p { font-size: 10px; }
	div.footer p { font-size: 8px; }
}

/*ブラウザ幅が668px以上、1024px以下の時にスタイルが適用*/
@media screen and (min-width: 668px) and (max-width: 1024px) {
	div.block1 {
		margin-top: 10%;
		margin-left: 20px;
		float: left;
		height: 500px;
		width: auto;
		/*以下はfloatがどこまで効いているかの確認用*/
		/*background:gold;*/
	}

	div.block2 {
		margin-top: 5%;
		text-align: center;
	}

	.vertical {
		width: 250px;
		max-width: 100%;
		height: auto;
	}

	.horizontal {
		width: 480px;
		max-width: 100%;
		height: auto;
	}

	p.yajirushi {
		margin-top: 20px;
	}

	/*フォントサイズ変更*/
	div.block1 p { font-size: 10px; }
	div.block2 p { font-size: 10px; }
	div.footer p { font-size: 8px; }
}

/*ブラウザ幅が1025px以上、1440px以下の時にスタイルが適用*/
@media screen and (min-width: 1025px) and (max-width: 1440px) {
	div.block1 {
		margin-top: 10%;
		margin-left: 20px;
		float: left;
		height: 600px;
		width: auto;
		/*以下はfloatがどこまで効いているかの確認用*/
		/*background:gold;*/
	}

	div.block2 {
		margin-top: 5%;
		text-align: center;
	}

	.vertical {
		width: 300px;
		max-width: 100%;
		height: auto;
	}

	.horizontal {
		width: 800px;
		max-width: 100%;
		height: auto;
	}

	p.yajirushi {
		margin-top: 20px;
	}

	/*フォントサイズ変更*/
	div.block1 p { font-size: 10px; }
	div.block2 p { font-size: 10px; }
	div.footer p { font-size: 8px; }
}

/*ブラウザ幅が1441x以上の時にスタイルが適用*/
@media screen and (min-width:1441px) {
	div.block1 {
		margin-top: 10%;
		margin-left: 20px;
		float: left;
		height: 650px;
		width: auto;
		/*以下はfloatがどこまで効いているかの確認用*/
		/*background:gold;*/
	}

	div.block2 {
		margin-top: 5%;
		text-align: center;
	}

	.vertical {
		width: 360px;
		max-width: 100%;
		height: auto;
	}

	.horizontal {
		width: 960px;
		max-width: 100%;
		height: auto;
	}

	p.yajirushi {
		margin-top: 20px;
	}

	/*フォントサイズ変更*/
	div.block1 p { font-size: 12px; }
	div.block2 p { font-size: 12px; }
	div.footer p { font-size: 10px; }
}

/*最下部に文字固定要素*/
html {
	position: relative;
	min-height: 100%;
}

/*最下部に文字固定要素*/
div.footer {
	position: absolute;
	bottom: 0px;
	margin-left: 20px;
}

/*リンクの色を黒、リンクの下線を非表示*/
a:link { color: black; text-decoration: none; }

/*訪問済みリンクのフォントカラーが黒*/
a:visited { color: black; }

/*リンクにカーソルを合わすとフォントカラーがグレー*/
a:hover { color: gray; }

/*文字にアンダーライン*/
p.underline { text-decoration: underline; }

/*文字の上にマージン*/
p.margin { margin-top:3em; }

/*Pタグのフォントは全て明朝体*/
p { font-family: serif; }