@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);

body,h1,h2,h3,h4,h5,h6,ul,p,form,input,ul,ol,li,dl,dd,dt,section,header,nav,article,aside,hgroup,header,footer,figure,figcaption,summary {
	margin: 0;
	padding: 0;
}
section,header,nav,article,aside,hgroup,header,footer,figure,figcaption,summary {
	display: block;
}
html {
	overflow: scroll;
	overflow: -moz-scrollbars-vertical; 
}

table {
	border-collapse: collapse;
}

/* For IE7 hasLayout issue */
*:first-child+html * {
	letter-spacing: 0; 
}


sup {
	vertical-align: 1.0;
}
sub {
	vertical-align: 0.01em;
}


body {
	text-align: center;
	font-family: "Roboto",Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	color: #333;
	line-height: 1.5;
	font-size: 14px;
	background: url(../images/graphy_2.png);
}
img {
	border: none;
}	
.pc {
	display: block;
}
.sp {
	display: none;
}


a:link,
a:visited {
	color: #333;
	text-decoration: underline;
}
@font-face {
	font-family: zurich;
	src: url("../images/zu960.eot");
}
@font-face {
	font-family: zurich;
	src: url("../images/zu960.ttf") format("truetype");
}

a:hover {
	color: #333;
	text-decoration: none;
}
.loadingmask {
	background: #FFF;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100000;
}
#loading {
	width: 32px;
	height: 32px;
	margin: 150px auto 0;
	background: url(../images/loading.gif) no-repeat center center;
	opacity: 0.4; /* 0.0～1.0 */
	filter: alpha(opacity=40); /* 0～100 */
}

header {
	height: 90px;
	background: url(../images/body_bg.png) repeat-x 0px 0px;
}
header #inner {
	width: 920px;
	height: 90px;
	margin: 0 auto;
	position: relative;
}


header #inner h1 {
	position: absolute;
	top: 25px;
	left: 18px;
}
header #inner h1 img {
	width: 172px;
	height: 40px;
}

header h2 {
	font-size: 10px;
	font-weight: normal;
	position: absolute;
	top: 30px;
	left: 380px;
	color: #F5F5F5;
}


header nav {
	position: absolute;
	top: 30px;
	right: 0;
	height: 30px;
}

nav {
	height: 60px;
}
nav li {
	float: left;
	list-style: none;
	text-align: center;
	font-family: zurich;
	font-size: 20px;
	margin-right: 30px;
  text-shadow: 1px 1px 0px rgb(0, 0, 0);
}
nav a {
	padding: 0px 2px 5px;
	display: block;
}
nav li a:link,
nav li a:visited,
nav li a:hover {
	color: #F5F5F5;
	text-decoration: none;
}
#toppage li#menu1 a,
#works li#menu2 a,
#profile li#menu3 a,
#concept li#menu3 a,
#contact li#menu4 a {
	border-bottom: 1px dotted #EDEDED;
	color: #EDEDED;
}
 

nav a:hover {
	border-bottom: 1px dotted #EDEDED;
	color: #FFF;
}
#topimg {
	height: 440px;
	background: url(../images/body_bg.png) repeat-x 0px 0px;
}


#toppage #contents {
	width: 900px;
	margin: 0 auto;
	text-align: left;
	padding: 50px 10px;
}

#wrapper {
	width: 880px;
	margin: 0 auto;
	text-align: left;
	padding: 30px 0 0;
}
#wrapper #sidebar {
	width: 130px;
	float: right;
}

#sidebar ul {
	width: 130px;
	border: 1px solid #DDDDDD;
	padding: 1px 1px 0;
	background: #FFF;
}

#sidebar li {
	list-style: none;
	font-size: 14px;
	font-family: 'Oswald';
	font-weight: 400;
}
#sidebar li a {
	padding: 8px 16px;
	text-decoration: none;
	background: #FFF;
	display: block;
	border-bottom: 1px solid #E8E8E8;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}


#sidebar li.end a {
	border-bottom: none;
}

#sidebar li a:hover {
	background: #E8E8E8;
}


#sidebar li#current a,
.works1 li.sidemenu1 a,
.works2 li.sidemenu2 a,
.works3 li.sidemenu3 a,
.works4 li.sidemenu4 a,
.works5 li.sidemenu5 a,
.works6 li.sidemenu6 a,
.works7 li.sidemenu7 a,
.works8 li.sidemenu8 a,
.works9 li.sidemenu9 a,
.works10 li.sidemenu10 a,
.works11 li.sidemenu11 a,
.works12 li.sidemenu12 a,
.works13 li.sidemenu13 a,
.works14 li.sidemenu14 a,
.works15 li.sidemenu15 a,
.works16 li.sidemenu16 a {
	background: url(../images/body_bg.png) repeat-x 0px -50px!important;
	color: #F5F5F5;
}


#wrapper #contents {
	float: left;
	width: 700px;
	padding: 30px 0px 50px 0px;
	min-height: 400px;
}



/*------------------------------------*/
#contents:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
#contents { display: inline-block; }
/* exlude MacIE5 \*/
* html #contents { height: 1% }
#contents {display:block;}
/* end MacIE5 */  
/*------------------------------------*/

footer {
	clear: both;
	padding: 30px 0;
	height: 300px;
	zoom: 1;
	text-align: left;
	border-top: 1px solid #DDDDDD;
	background: #FFF;
}
footer .wrap {
	width: 860px;
	margin: 0 auto;
	height: 100px;
}
#toppage footer .wrap {
	height: 140px;
}

footer h2 {
	float: left;
	width: 160px;
	height: 60px;
}

footer h3 {
	margin-bottom: 5px;
}
footer p {
	font: normal 14px Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
}

footer .pagetop {
	float: right;
}
footer .footer_caption {
	float: left;
	width: 790px;
}

footer .pagetop a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
footer .extra {
	width: 700px;
	background: #CCC;
	height: 70px;
}

footer .bnr {
	clear: both;
	zoom: 1;
}

#copyright {
	clear: both;
	font: 10px Arial, Helvetica, sans-serif;
	text-align: center;
}
#back-top {
	text-indent: -9999px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none;
	opacity: 1.0; /* 0.0～1.0 */
	filter: alpha(opacity=100); /* 0～100 */
}

#back-top a {
	width: 72px;
	height: 72px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: #333 url(../images/pagetop_bg.png) no-repeat center center;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	opacity: 0.7; /* 0.0～1.0 */
	filter: alpha(opacity=70); /* 0～100 */
}


#back-top a:hover {
    color: #FFF;
	background: #666 url(../images/pagetop_bg.png) no-repeat center center;
	opacity: 0.7; /* 0.0～1.0 */
	filter: alpha(opacity=70); /* 0～100 */
}




















@media screen and (max-width: 768px) {
* {
	box-sizing:border-box;
}
	
.pc {
	display: none;
}
.sp {
	display: block;
}

body {
	font-size: 14px;
}

header {
	height: auto;
	padding: 5px 10px;
}
header #inner {
	width: auto;
	height: auto;
	margin: 0 auto;
}


header #inner h1 {
	position: static;
	float: none;
	width: 172px;
	margin: 10px auto 0;
	text-align: center;
}

header h1 img {
	width: 172px;
	height: auto;
}
header nav {
	position: static;
	float: none;
	clear: both;
}
nav {
	height: auto;
}
nav ul {
	text-align: center;
}
nav li {
	float: none;
	display: inline;
	font-size: 20px;
	margin: 0 15px;
}
nav a {
	padding: 0px 2px 2px;
	display: inline;
}

nav a:hover {
	border-bottom: 1px dotted #EDEDED;
	color: #FFF;
}
#topimg {
	height: auto;
	background: url(../images/body_bg.png) repeat-x 0px 0px;
}


#toppage #contents {
	width: auto;
	margin: 0 auto;
	padding: 20px 10px;
}

#wrapper {
	width: auto;
	margin: 0 10px;
}
#wrapper #sidebar,
#sidebar ul {
	width: auto;
	float: none;
}
#wrapper #sidebar {
	margin-bottom: 10px;
}
#works #sidebar {
	margin-bottom: 10px;
}

/*------------------------------------*/
#works #sidebar:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
/*------------------------------------*/

#sidebar ul,
#sidebar li,
#sidebar li a {
	box-sizing: border-box;
	border: none;
}

#sidebar li a {
	padding: 6px 0;
	text-align: center;
	border: 1px solid #DDD;
}
#works #sidebar li {
	float: left;
	width: 25%;
	font-size: 13px;
	margin: 0 -1px -1px 0;
}

#works #sidebar li.sidemenu1{
	border-bottom: 1px solid #DDD!important;
	
}
#sidebar li.end a {
	border-bottom: 1px solid #DDD!important;
}



#wrapper #contents {
	float: none;
	width: auto;
	padding: 0px 0px 20px;
}


footer {
	clear: both;
	padding: 20px 20px 120px;
	height: auto;
}
footer .wrap {
	width: auto;
	margin: 0 auto;
	height: auto;
}
#toppage footer .wrap {
	height: auto;
}

footer h2 {
	float: none;
	width: auto;
	height: auto;
}

footer h3 {
	margin-bottom: 5px;
}


footer .pagetop {
	float: none;
}
footer .footer_caption {
	float: none;
	width: auto;
}
footer .footer_caption p {
	margin-bottom: 10px;
}

footer .pagetop a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
footer .extra {
	width: auto;
	background: #CCC;
	height: auto;
}

}

@media screen and (max-width: 640px) {
	
header #inner h1 {
	width: 130px!important;
}

header h1 img {
	width: 130px!important;
	height: auto!important;
}	
	
nav li {
	font-size: 16px;
	margin: 0 5px;
}


#back-top {
	bottom: 10px;
	right: 10px;
}

#back-top a {
	-webkit-transform: scale(0.7);  
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}


}