@charset "UTF-8";
body{
	font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
	padding: 0px;
	margin: 0px;
}

.header{
	z-index: 9998;
	position: relative;
	position: fixed;
	
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 80px;
	background-color: rgba(0,30,67,0.8)
	
}

img.productlogo{
	position: fixed;
	z-index: 9999;
	width: 40%;
	background-color: transparent;
	top: 10px;
	left: 100px;
	margin: 0;
}
h1{color: transparent;
  font-size: 0
}
a{ 
	text-decoration: none;
	color:white
}
ul{ position: absolute;
	left: -56px;
	list-style: none;
	width: 100%;
	margin: 0;
	display: flex;
	background: covor;
}
li{
	margin: 35px 0 0 25px;
	font-size: 20px;
	background: covor;
	
}
nav{
	padding: 10px;
	right: 10px;
}
div.top{
	position: relative;
	margin:  0px;
	padding: 0px;
}
h2#top{
	position: absolute;
	top: 150px;
	left: 50px;
	color: white;
	font-size: 30px;
	}

div.morning{
	position: relative;
	margin:  0px;
	padding: 0px;
}
p.morning1{
	position: absolute;
	color: white;
	font-size: 25px;
	top: 40px;
	left: 27px;
}
p.morning2{
	text-align: justify;
	position: absolute;
	top: 530px;
	left: 60px;
	height: 300px;
	width: 290px;
	color: white;
	font-size: 18px;
}
div.classwork{position: relative;}
p.classwork1{
	position: absolute;
	color: white;
	font-size: 25px;
	top: 40px;
	left: 27px;
}
p.classwork2{
	text-align: justify;
	position: absolute;
	top: 490px;
	left: 60px;
	height: 300px;
	width: 290px;
	color: midnightblue;
	font-size: 18px;
}
div.park{position: relative;}
p.park1{
	position: absolute;
	top: 40px;
	left: 27px;
	color: white;
	font-size: 25px;
}
p.park2{
text-align: justify;
	position: absolute;
	top: 550px;
	left: 60px;
	height: 300px;
	width: 290px;
	color: white;
	font-size: 18px;
}
div.task{position: relative;}
p.task1{
	position: absolute;
	color: white;
	font-size: 25px;
	top: 40px;
	left: 27px;
}
p.task2{
text-align: justify;
	position: absolute;
	top: 490px;
	left: 60px;
	height: 300px;
	width: 290px;
	color: white;
	font-size: 18px;
}
div.bed{position: relative;}
p.bed1{
	position: absolute;
	color: white;
	font-size: 25px;
	top: 40px;
	left: 27px;
}
p.bed2{
	text-align: justify;
	position: absolute;
	top: 490px;
	left: 60px;
	height: 300px;
	width: 290px;
	color: white;
	font-size: 18px;
}
div.concept{position: relative;}
img.nitizyou{
	vertical-align:bottom;
}
img{
	width:100%;
}
p.concept1{
	text-align: center;
	position: absolute;
	color: white;
	font-size: 25px;
	top: 120px;
	left: 40px;
	height: 300px;
	width: 300px;
}
p.concept2{
	text-align: center;
	position: absolute;
	color: white;
	font-size: 25px;
	top: 300px;
	left: 40px;
	height: 300px;
	width: 300px;
}
h2{
	color: midnightblue;
	font-size: 30px;
	text-align: center;
	padding:30px;
    }
h3{
	color: midnightblue;
	font-size: 25px;
	text-align: center;
    }
p.cap{color: midnightblue;
	font-size: 18px;
	text-align: center;
	
}
div.design{
	position: relative;	
}
h4.design1{
	position: absolute;
	color: midnightblue;
	font-size: 18px;
	top: 210px;
	left: 20px;
}
p.design2{
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	top: 250px;
	left: 120px;
	width: 160px;
}
p.design3{
	position: absolute;
	color: midnightblue;
	width: 165px;
	font-size: 15px;
	top: 400px;
	left: 20px;
}
h4.design4{
	position: absolute;
	color: midnightblue;
	font-size: 20px;
	top: 470px;
	left: 245px;
}
p.design5{
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	top: 520px;
	left: 245px;
	width: 120px;
}
h4.design6{
	position: absolute;
	color: midnightblue;
	font-size: 20px;
	top: 620px;
	left: 150px;
}
p.design7{
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	top: 670px;
	left: 150px;
	width: 150px;
}
div.ink{position: relative;}
h4.ink1{
	position: absolute;
	color: midnightblue;
	font-size: 18px;
	top: 100px;
	left: 20px;
}
h4.ink2{
	position: absolute;
	color: midnightblue;
	font-size: 18px;
	top: 400px;
	left: 20px;
}
p.ink1{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 150px;
	top: 150px;
	left: 20px;
}
p.ink2{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 150px;
	top: 300px;
	left: 215px;
}
p.ink3{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 150px;
	top: 450px;
	left: 20px;
}
p.ink4{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 18px;
	height: 300px;
	width: 150px;
	top: 625px;
	left: 180px;
}
p.ink5{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 180px;
	top: 660px;
	left: 180px;
}
p.ink6{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 18px;
	top: 750px;
	left: 20px;
}
p.ink7{
	text-align: justify;
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 170px;
	top: 785px;
	left: 20px;	
}
div.color{position: relative}
img.ball1{
	position: absolute;
    width:20%;
    top: 100px;
    left: 20px;}
img.ball2{
	position: absolute;
    width:15%;
    top: 125px;
    left: 110px;}

div.vivid{position: relative;

}
img.vivid{
	position: absolute;
	width: 250px;
	margin: 0px;
	top: 0px;
	left: 125px;
	z-index: 10;
}
h4.vivid{
	position: absolute;
	font-size: 18px;
	color: midnightblue;
    top: 130px;
    left:230px;
    z-index: 20;
}
p.vivid{
	position: absolute;
	text-align: justify;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 140px;
    top: 170px;
    left:225px;
	z-index: 30;
}

div.vintage{
	position: relative;	
}
img.vintage{
	position: absolute;
	width: 250px;
	margin: 0px;
	top: 550px;
	z-index: 10;
	left: 10px;
}
h4.vintage{
	position: absolute;
	font-size: 18px;
	color: midnightblue;
    top: 660px;
    z-index: 20;
	left: 10px;
	
}
p.vintage{
	position: absolute;
	text-align: justify;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 155px;
    top: 700px;
	left: 10px;
	z-index: 30;
}
div.retoro{position: relative;}
img.retoro{position: absolute;
	width: 250px;
	margin: 0px;
	top: 1100px;
	left: 125px;
	z-index: 10;}
h4.retoro{position: absolute;
	font-size: 18px;
	color: midnightblue;
    top: 1230px;
    left:225px;
    z-index: 20;}
p.retoro{position: absolute;
	text-align: justify;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 145px;
    top: 1270px;
    left:225px;
	z-index: 30;}
div.nature{position: relative;}
img.nature{position: absolute;
	width: 250px;
	margin: 0px;
	top: 1650px;
	z-index: 10;
    left: 10px;}
h4.nature{position: absolute;
	font-size: 18px;
	color: midnightblue;
    top: 1790px;
    z-index: 20;
    left: 10px;}
p.nature{position: absolute;
	text-align: justify;
	color: midnightblue;
	font-size: 15px;
	height: 300px;
	width: 150px;
    top: 1830px;
	z-index: 30;
	left: 10px;
}
div.price{
	position: relative;
	top : 2250px;
}
h2.price{color: midnightblue;
	font-size: 30px;
	text-align: center;
	padding:5px;}
p.price1{
	maegin: 0;
    padding: 0;}
.box{
	position: relative;
	border:solid 3px midnightblue;
    padding: 0.5em 1em;
    margin: 2em 0;
    color:midnightblue;
    background:#fff;
	width: 80px;
	height: 20px;
    left: 135px;
	top: 0px;
	border-radius: 20px;
	
	
}
.box p {
	position: absolute;
    margin: 0; 
    padding: 0;
	left: 20px;
}
p.price1{
	position: absolute;
	color: midnightblue;
	font-size: 50px;
	text-align: center;
	padding:5px;
	top: 220px;
	left: 80px;
}
p.price2{
	position: absolute;
	color: midnightblue;
	font-size: 25px;
	text-align: center;
	padding:5px;
    top: 280px;
    left: 220px;}
.box2{
	position: relative;
	border:solid 3px midnightblue;
    padding: 0.5em 1em;
    margin: 2em 0;
    color:midnightblue;
    background:#fff;
	width: 80px;
	height: 20px;
    left: 135px;
	top: 240px;
	border-radius: 20px;
}
.box2 p {
	position: absolute;
    margin: 0; 
    padding: 0;
	left: 35px;
}
p.price3{
	position: absolute;
	color: midnightblue;
	font-size: 50px;
	text-align: center;
	padding:5px;
	top: 540px;
	left: 85px;
}
p.price4{
	position: absolute;
	color: midnightblue;
	font-size: 25px;
	text-align: center;
	padding:5px;
    top: 600px;
    left: 205px;}
p.price5{
	position: absolute;
	color: midnightblue;
	font-size: 20px;
	text-align: center;
	padding:5px;
    top: 210px;
    left: 60px;}
p.price6{
	position: absolute;
	color: midnightblue;
	font-size: 20px;
	text-align: center;
	padding:5px;
    top: 530px;
    left: 60px;
}
img.ball3{
	position: absolute;
    width:30%;
    top: 700px;
    left: 20px;}
img.ball4{
	position: absolute;
    width:30%;
    top: 750px;
    left: 20px;
}
img.ball5{
	position: absolute;
    width:30%;
    top: 800px;
    left: 20px;
}
p.price7{
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	text-align: center;
	padding:5px;
    top: 690px;
    left: 150px;
}
p.price8{
	position: absolute;
	color: midnightblue;
	font-size: 15px;

	padding:5px;
    top: 730px;
    left: 150px;
	width: 200px;
}
p.price9{
	position: absolute;
	color: midnightblue;
	font-size: 15px;
	text-align: center;
	padding:5px;
    top: 788px;
    left: 150px;
}
.box3{
	position: relative;
    padding: 1em 1em;
    margin:  0;
    color: #fff;
    background: midnightblue;
	width: 290px;
    left: 32px;
	border-radius: 30px;
	top: 600px;
	
}
.box3 p {
    margin: 0;
    padding: 0;
	top: 450px;
	font-size: 26px;
}
div.sns{position: relative;	}

img.twitter{
	position: absolute;
	width: 20%;
	margin: 0px;
	top: 50px;
	left: 60px;
	z-index: 9999;
}
img.insta{
	position: absolute;
	width: 20%;
	margin: 0px;
	top: 50px;
	left: 240px;
	z-index: 9999;
}
footer{position: absolute;
	top: 10250px;
	width:100%;
	height: 350px;
	background-color: midnightblue;
	color: #fff;
	text-align: center;
}
p.copy{
	text-align: center;
	position: absolute;
	font-size: 10px;
    color: #fff;
    left: 45px;
top: 290px;}