@charset "UTF-8";
/* CSS Document */

section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary {
	display: block;
}

body{
	height: 10000px;
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

#block_1, #block_2, #block_3, #block_4 {
	position: fixed;
	width: 100%;
	height: 1000px;
	overflow: hidden;
}


#block_1 {
	z-index: -100;
}
#block_2 {
	background: #fff;
	z-index: -200;
}
#block_3 {
	background: #fff;
	z-index: -300;
}
#block_4 {
	background: #fff;
	z-index: -400;
}

h1 {
	font-size: 20px;
}

.text {
	position: absolute;
	display: block;
	width: 400px;
	padding: 30px;
}


#block_1 .bg {
	position: absolute;
	width: 100%;
	height: 1000px;
	top: 0;
	left: 0;left top;
	background: #000;
}

#block_1 .logo {
	position: absolute;
	top: 100px;
}

#block_1 section {
	position: absolute;
	width: 600px;
	top: 350px;
	left: 100px;
	color: #FFF;
}
#block_1 span {
       	position: absolute;
       	width: 1000px;
       	top:100px;
       	left: 650px; 
       	color: #FFF;
       	}
.top1,.top2,.top3,.top4,.top5,.top6{
	 border-radius: 100px;   
	 z-index: -100;
	 }
#block_1 ul{
	list-style: none;
	}
#block_1 li{
	float:left;
	margin: 5px;
	}
#block_2 .bg,
#block_3 .bg,
#block_4 .bg {
	position: absolute;
	min-width: 1600px;
	min-height: 100%;
	width: 100%;
	height: auto;
	left: 0;
}
@media screen and (max-width: 1600px){
  #block_2 .bg,
  #block_3 .bg,
  #block_4 .bg {
  left: 50%;
  margin-left: -800px; }
}

#block_2 .text {
	right: 50px;
}

#block_3 .text {
	left: 50px;
}

#block_4 .text {
	right: 50px;
}

@media screen and (max-width: 1600px){
#block_1 span{
	width: 700px;
	}
.top1,.top2,.top3,.top4,.top5,.top6{
	width: 200px;
	height: 200px;
	margin: 0;
	padding: 0;
	}
}
@media screen and (max-width: 1200px){
#block_1 span{
	width: 400px;
	position: absolute;
	left: 570px;
	}
.top1,.top2,.top3,.top4,.top5,.top6{
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	}
}

@media screen and (max-width: 900px){
#block_1 span{
	width: 300px;
	
	}
.top1,.top2,.top3,.top4,.top5,.top6{
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	}
}

@media screen and (max-width: 769px){
#block_1 span{
	width: 400px;
	position: absolute;
	top: 670px;
	left: 70px;
	}
.top1,.top2,.top3,.top4,.top5,.top6{
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	}