html, body { height: 100%; }
body {
position:relative;
  margin: 0;
  padding: 0;
  font: 12px/100% 'Acme', sans-serif;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.cover { position: relative; width: 100%; margin: 0; padding: 0; color: #fff; }

.centerBox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 70%; height: 70%; text-align: center;  }

.section1 { height: 100vh; background-size: cover; }
.section2 { height: 40%;	background:#413B47; margin:5% 0;  }
h2{
	width:100%;
	text-align:left;
}
h2 img{
width: 60%;height: auto; max-width:321px;
padding:4% 0 0 0;
}

.section3 { height: 40%; background:#C9BC9C; margin:5% 0;  }
.section4 { height: 40%; background:#C8A063; margin:5% 0; }
.section5 { height: 40%; background:#7C5779; margin:5% 0;  }
.section6 { height: 40%; background:#4B8199; margin:5% 0;  }

p.welcome{
	width:100%;
	position:absolute;
	bottom:0;
	background:#000;
	opacity:0.7;
	font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align:center;
	padding:3% 0;
	font-size:1.3em;
}
p.welcome span{
	display:block;
	font-size:2.7em;
	line-height:1.5em;
}
.box{
    cursor: pointer;
}
.box:hover{opacity:0.9;}
ul.pic{
	float:left;
	width:73%;
}
ul.pic li{
	float:left;
	width:30%;
	padding:0 0.5%;
}
ul.pic li img { width: 100%;height: auto; max-width:213px; }
h3{
	float:right;
	width:27%;
	line-height:1.5em;
font-weight:normal;
text-align:left;
}
h3 span{
font-family: Century Gothic, sans-serif;
font-size:1.8em;
display:block;
	line-height:1.8em;
	padding:2% 0 3%;
}

@media screen and (max-width: 640px) {
p.welcome{
	width:100%;
	position:absolute;
	bottom:10%;
	background:#000;
	opacity:0.7;
	font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align:center;
	padding:3% 0;
	font-size:1.3em;
}


h2 img{
	display:none;
}
h3{
	float:none;
	width:100%;
	line-height:1.5em;
font-weight:normal;
text-align:left;
margin-bottom:5%;
}

.centerBox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 5% auto 0; width: 70%; height: 70%; text-align: center;  }

.section2 { height: 50%;	background:#413B47; margin:5% 0;  }
.section3 { height:50%; background:#C9BC9C; margin:5% 0;  }
.section4 { height: 55%; background:#C8A063; margin:5% 0; }
.section5 { height: 55%; background:#7C5779; margin:5% 0;  }
.section6 { height: 40%; background:#4B8199; margin:5% 0;  }

ul.pic{
	float:none;
	width:100%;
}
ul.pic li{
	float:left;
	padding:0 1%;
}

}