/*---------------------------------
Google Font
font-family: 'Noto Sans JP', sans-serif;
-----------------------------------*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*---------------------------------
	HTML RESET
-----------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, strong, dl, dt, dd, ol, ul, li,
form, label, table, caption, tr, th, td, input, form, textarea, header, nav, section, article, aside, footer{
	margin:0;
	padding:0;
	border: 0;
	outline: 0;
	box-sizing:border-box;
}
html{ font-size: 62.5%; }
body{
	font-family:'Noto Sans JP', sans-serif;
	font-size:1rem;
	line-height:1rem;
	font-weight:100;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
}
ol, ul{
	list-style: none;
}
/*---------------------------------
	LINK
-----------------------------------*/
a:link{
	color:#FFF;
	text-decoration:underline;
}
a:visited{
	color:#FFF;
	text-decoration:underline;
}
a:hover{
	color:#FFF;
	text-decoration:none;
	opacity:0.6;
	filter: alpha(opacity=60);
	zoom: 1;
}
a:hover img{
	opacity:0.6;
	display:block;
	filter: alpha(opacity=60);
}
a:active{
	color:#FFF;
	text-decoration:underline;
}
a{
	cursor:pointer;
}
/*---------------------------------
	SET
-----------------------------------*/

.clear:after{
	content: ""; 
	display: block; 
	clear: both;
}
.f_left{
	float:left;
}
.f_right{
	float:right;
}
.a_left{
	text-align:left;
}
.a_center{
	text-align:center;
}
.a_right{
	text-align:right;
}
.a_right img{
	display:inline-block;
}

/*---------------------------------
	FLEX
-----------------------------------*/
.flx{
	display: flex;
}
/*---------------------------------
	MAIN LAYOUT
-----------------------------------*/

html,body{
height:100%;
background:#b2d9d7;
}

#wrapper{
width: 100%;
height: 100%;
z-index:0;
letter-spacing:1px;
min-width:320px;
}
h2{
font-size:5rem;
font-weight:900;
margin-bottom:50px;
word-break: break-all;
}
@media only screen and (min-width: 0px) and (max-width: 480px){
	h2{
	font-size:11vw;
	}
}
h3{
font-size:2rem;
font-weight:900;
margin-bottom:30px;
}
.strong{
font-weight:600;
}
.small{
font-size:1.1rem;
}
/*---------------------------------
	TOP
-----------------------------------*/
.top{
position: relative;
width:100%;
height:calc(100vh - 100px);
}

.logo{
position:absolute;
top:45%;
left:5%;
width:90%;
max-width:720px;
margin:0 auto;
height:auto;
z-index:1;
}

@media only screen and (min-width: 800px){
.logo{
width:720px;
left:50%;
margin-left:-360px;
}
}


#logo{
padding:2px;
}
#logo g path{
stroke:#FFF;
fill:#b2d9d7;
stroke-width:1;
}

.sun{
position:absolute;
width:10%;
height:auto;
top:5%;
left:5%;
animation: spin 35s linear infinite;
}
@media only screen and (min-width: 0px) and (max-width: 640px){
.sun{
min-width:64px;
}
}

@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}


/*---------------------------------
	main
-----------------------------------*/
.main{
position: relative;
width:100%;
overflow: hidden;
}
.gramo{
position:absolute;
width:50%;
height:auto;
max-height:;
max-width:200px;
top:50px;
left:60%;
z-index:9;
}
.blue{
position:absolute;
width:100%;
top:0;
left:0;
z-index:9;
text-align:center;
}
.blue img{
margin:0 auto;
width:80%;
height:auto;
max-height:;
max-width:300px;
}
@media only screen and (min-width: 0px) and (max-width: 640px){
	.gramo{
	right:0;
	left:auto;
	}
}
@media only screen and (min-width: 0px) and (max-width: 480px){
	.gramo{
	top:calc(50px - ((100vw - 480px) * 0.1));
	}
}
.info{
text-align:center;
position: relative;
/*position:absolute;
bottom:0;
left:0;*/
margin-top:260px;
width:100%;
z-index:10;
color:#FFF;
}
@media only screen and (min-width: 0px) and (max-width: 480px){
	.info{
	margin-top:calc(260px + ((100vw - 480px) * 0.1));
	}
}
.info img{
display:block;
}

.work{
width:100%;
min-height:70vh;
background:#7db9b6;
padding-top:50px;
line-height:1.8;
font-size:1.6rem;
}
.workpdf{
margin-top:1.8rem;
padding:0.8rem 1.4rem;
border:2px dotted #FFF;
display:inline-block;
}
/*---------------------------------
	contact
-----------------------------------*/
.contact{
position: relative;
width:100%;
background:#7db9b6;
line-height:1.5;
}
.about{/*
position:absolute;
top:0;*/
min-height:70vh;
text-align:center;
width:100%;
color:#FFF;
font-size:1.5rem;
}
.about p{
padding-bottom:20px
}
/*---------------------------------
	map
-----------------------------------*/
.map{
position: relative;
width:100%;
height:50vh;
min-height:200px;
background:#7db9b6;
}

#mapcanvas{
height:100%;
}

footer{
padding:30px 0;
text-align:center;
}




@media only screen and (max-height: 620px){
}