@charset "UTF-8";

body{
	margin-top: -5px
}

.perfect-circle{
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background-color: #DEDBDB;
	opacity: 0.5;
	margin-left: 288px;
	background-attachment: scroll;
	position: relative;
	z-index: 1;
}

.center-circle{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #F0F0F0;
	opacity: 0.5;
	margin-left: 100px;
	margin-top: -60px;
	position: relative;
	z-index: 1;
	background-attachment: scroll;
}

.top-image-up{
	transform:rotate(-12deg);
	position: sticky;
	z-index: 2;
}

img.rogo{
	width: 40%;
	margin-left: 150px;
	margin-top: -200px;
	max-height: -40px;
	position: relative;
	z-index: 2;
}
.center-second-circle{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #D5D5D5;
	opacity: 0.6;
	margin-left: 300px;
	margin-top: -40px;
	position: relative;
	z-index: 1;
	background-attachment: scroll;
}
p1{
    font-family: 'sans-serif';
	font-size: 15px;
	margin-left: 250px;
	margin-top: -40px;
	position: absolute;
	z-index: 2;
	
}
	
p2{
	font-family: 'sans-serif';
	font-size: 15px;
	margin-top: -19px;
	margin-left: 250px;
	position: absolute;
	z-index: 2;
}

.top-image-down{
	transform: rotate(10deg);
	margin-left: 160px;
	margin-top: -80px;
	position: relative;
	z-index: 2;
}

.center-thired-circle{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #DEDBDB;
	opacity: 0.5;
	margin-left: 100px;
	margin-top: 50px;
	position: relative;
	z-index: 1;
	background-attachment: scroll;
}

.center-fourth-circle{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #D5D5D5;
	opacity: 0.6;
	margin-left: 70px;
	margin-top: -40px;
	position: relative;
	z-index: 1;
}

.center-fifth-circle{
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background-color: #C4C4C4;
	opacity: 0.6;
	margin-left: 250px;
	margin-top: -100px;
	position: relative;
	z-index: 1;
	background-attachment: scroll;
}
h1{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	margin-top: 80px;
	position: relative;
	z-index: 2;
	text-align: left;
}

p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 14px;
	z-index: 2;
	line-height: 2;	
}

img.aikon-up{
	width: 65%;
	margin-left: -30px;	
	margin-top: 100px;
}

.aikon-haikei-up{
	margin-top: -70px;
	margin-left: 180px;
	width        : 170px;
    height       : 50px;
	background-color: #D1D1D1;
	position:absolute;
	z-index: 1;
	opacity: 0.8;
	transform: rotate(-12deg);
}

.aikon-up-text{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 15px;
	margin-left: 180px;
	margin-top: -62px;
	transform:rotate(-12deg);
	position:relative;
	z-index: 3;
	
}

.aikon-text-haikeiup{
	width: 130px;
	height: 30px;
	margin-top: 10px;
	margin-left: 240px;
	background-color: #E8E9C2;
	position: absolute;
	z-index: 2;
	opacity: 0.8;
}

.view-more-up{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 15px;
	margin-top: 12px;
	margin-left: 200px;
	position:relative;
	z-index: 3;
	color: #FFFFFF;
	
}

img.aikon-down{
	width: 65%;
	margin-left: 150px;	
	margin-top: 50px;
}

.aikon-haikei-down{
	margin-top: -70px;
	margin-left: 50px;
	width        : 170px;
    height       : 50px;
	background-color: #D1D1D1;
	position:absolute;
	z-index: 1;
	opacity: 0.8;
	transform: rotate(-12deg);
}

.aikon-text-down{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 15px;
	margin-left: 60px;
	margin-top: -75px;
	transform:rotate(-12deg);
	position:relative;
	z-index: 3;
}

.aikon-text-haikeidown{
	width: 130px;
	height: 30px;
	margin-top: 28px;
	margin-left: 100px;
	background-color: #E8E9C2;
	position: absolute;
	z-index: 2;
	opacity: 0.8;
}

.view-more-down{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 15px;
	margin-top: 30px;
	margin-left: 60px;
	position:relative;
	z-index: 3;
	color: #FFFFFF;
}

.parent {
    position: relative;
    width: 414px;
    height: 100px;
    margin-top: 70px;
	background-color: #B9B9B9;
	z-index: 1;
}

.parent p3{
    position: absolute;
    top: 40%;
    left: 50%;
    webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    width: 200px;
    text-align: center;
    line-height: 2;
}

.parent p4{
    position: absolute;
    top: 60%;
    left: 50%;
    webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    width: 200px;
    text-align: center;
    line-height: 2;
}