*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	color: #89867e;
	color: #000;
	background: #fff;
}


a {
	color: #333;
	text-decoration: none;
}

a:hover,
a:active {
	color: #333;
	text-decoration: underline;
}


/* Header Style */
.main,
.container > header {
	margin: 0 auto;
	padding: 2em;
}

.container > header {
	text-align: center;
}

.container > header h1 {
	font-size: 1.8em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container {
	height: 100%;
	position: relative;
}


/* General button style (reset) */

@media screen and (min-width:300px) { 
	.container > section {
		margin: 0 auto;
		padding: 1em 3em;
		text-align: center;
		color: #fff;
	}
}

@media screen and (min-width:480px) { 
	.container > section {
		margin: 0 auto;
		padding: 2em 3em;
		text-align: center;
		color: #fff;
	}
}

@media screen and (min-width:768px) {
	.container > section {
		margin: 0 auto;
		padding: 3em 3em;
		text-align: center;
		color: #fff;
	}
}

.container > section p {
	position: relative;
	margin: 0;
	padding: 0.5em;
	z-index: 1;
}

.container > section p.text { font-size: 1.4em; }

.color-1 { background: #005bac; }
.color-2 { background: #EEEFEF; }
.color-3 { background: #0068B6; }