html,
html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}


body {
  max-width:900px;
  width: 100%;	
  margin: 0 auto;
			background: #fff;

}


header {	
	  max-width:900px;

	position: fixed;
margin-top: 0;
  background: #fff;
	width: 100%;
	z-index: 200;
		padding: 1em 0 0em;
		text-align: center;

	}
.site-nav {

padding-top: 0em;
	display: block;
	padding: 1em 0em 0em 0em;
			font-weight: 300;
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic', "sans-serif";
		background: #fff;
	

}


.site-nav ul {
	
	list-style-type: none;
	text-align: center;
				background: #fff;

}
.site-nav ul li {
	display: inline-block;
	margin-bottom: 0em;
	margin-left: 1.5em;
	margin-right: 1.5em;

}
.site-nav ul li a {
	font-size: 1.2em;
	text-decoration: none;
	letter-spacing: 0em;		
	-webkit-transition: color .3s;
	transition: color .3s;
				background: #fff;

}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 0px solid white;
}


.rogo img {
	
	max-width:150px;
background: #fff;

}


main {
	padding: 6em 0em 0em 0em;
				background: #fff;
}	
.mainimg img {
padding: 0em;
position: relative;
max-width: 100%;
  overflow: hidden;
	  text-align: center;

}

h1 {
font-family: 'Avenir','Helvetica Neue','Helvetica', "sans-serif";
color: #333;
	font-size: 1.1em;
	letter-spacing: 0em;
		font-weight: 500;
	line-height: 0.2;
	margin-top: 4em;
	margin-bottom: 0.8em;
	margin-left: 0.9em;

	}

	
	
h2 {
	font-weight: 300;
	font-size: 0.9em;
	margin-top: 1.5em;
		margin-bottom: 0em;
	margin-left: 0.9em;

}

h3 {
		
	text-align:center;
	background: #fff;
}

h4 {
font-family: 'Avenir','Helvetica Neue','Helvetica', "sans-serif";
color: #333;
	font-size: 1.1em;
	letter-spacing: 0em;
		font-weight: 500;
	line-height: 0.2;
	margin-top: 4em;
	margin-bottom: 0.8em;
	margin-left: 0.9em;

	}


p.workp{margin-left: 3em;
	margin-bottom: 1.5em;

}

p.mailp{margin-left: 1em;
	margin-bottom: 1.5em;
		max-width: 40em;



}

p.introp{margin-top: 1.7em;

}
p {

font-family:'Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic' , 
 "sans-serif";
	color: #343144;
	text-align:justify;
	font-size: 0.78em;
	line-height: 1.8em;
	letter-spacing: 0.0em;	
	margin-left: 1.3em;

}




#intro {
	padding: 1em 3em 20em 3em;
 	position: relative;
	background: #fff;
}



#work {
	padding: 3em 0em 3em 0em;
	  	position: relative;
	background: #fff;
}
#gallery {
	padding: 3em 0em 6em 0em;
	 	position: relative;

	background: #fff;
}

#mail{
	padding: 3em 0em 0em 0em;
	 	position: relative;

	background: #fff;
}




a, a:visited {
	color: inherit;
}



footer {
	margin-top: 0em;
	background:#fff;
	
}
.footer-content {
	margin: 0 auto;
	padding:1em;
}
.footer {
text-align:center;
	font-size: 0.78em;
	letter-spacing: 0.0em;	
}



@media screen and (max-width: 600px) {
	.rogo img {
	
	max-width:150px;
background: #fff;

}

.site-nav ul li {
	display: inline-block;
	margin-bottom: 0em;
	margin-left: 1.5em;
	margin-right: 1.5em;


.site-nav ul li a {
	font-size: 1em;
	text-decoration: none;
	letter-spacing: 0em;		
	-webkit-transition: color .3s;
	transition: color .3s;
				background: #fff;

}


@media screen and (max-width: 500px) {
p.mailp{
		max-width: 30em;

}
@media screen and (max-width: 480px) {
	
	header {	
	  max-width:960px;

	position: fixed;
margin-top: 0;
	  margin: 0em auto;
  background: #fff;
	width: 100%;
	z-index: 200;
		padding: 0px 0px 0px;
		text-align: center;

	}
	
	.rogo img {
	
	max-width:100px;
background: #fff;

}

.site-nav ul li {
	display: inline-block;
	margin-bottom: 0em;
	margin-left: 0.5em;
	margin-right: 0.5em;

}

.site-nav ul li a {
	font-size: 0.6em;
	text-decoration: none;
	letter-spacing: 0em;		
	-webkit-transition: color .3s;
	transition: color .3s;
				background: #fff;

}

main {
	padding: 4em 0em 0em 0em;
}	

h1 {

	margin-top: 3em;
	
	}
p.mailp{
		max-width: 25em;



}
#mail{
	padding: 0em 0em 0em 0em;

}



  }