@charset "utf-8";


/*============================
#add custom normalize setting
============================*/

html, body {
	height: 100%;
}

/*body {
	background: url(images/jyougi.png) no-repeat top left;
}*/

h1, h2, h3, h4, h5, h6 { color: #444; }
p { margin: 0; line-height: 170%; color: #444;  }

ul {
	margin: 0;
	padding: 0;
}

li { 
	list-style-type: none; 
	list-style-position: outside;
}


/*============================
#container
============================*/
#container {
width: 100%;
}

/*============================
#sidebar
============================*/

#sidebar {
	margin: 0;
	padding: 0 ;
	width: 100%;
}

#sidebar h1 {
	display: block;
	margin: 10px auto 10px auto;
	width: 100%;
	text-align: center;
}

#sidebar h1 img {
	display: block;
	margin: auto;
	width: 50%;
}

nav {
	border-top: 1px solid #eee;
}


nav li { 
display:block;
border-bottom: 1px solid #555;
background-color: #444;
}

nav ul li:last-child {
	border: none;
}

nav li a {
	display: block;
	padding: 13px 3%;
	width: 94%;
	text-decoration: none;
	color: #fff;
	background: url(images/arrow.png) no-repeat 97% 50%;
	
	-moz-background-size: auto 22%;
	background-size: auto 22%;
	
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity:0.6;
}


.js #nav {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav.opened {
  max-height: 9999px;
}


#nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 5%;
  left: 3%;
  width: 40px;
  height: 40px;
  float: left;
  text-indent: -9999px;
  overflow: hidden;
  background: #fff url("images/hamburger.png") no-repeat 50% 50%;
  -moz-background-size: 50% 50%;
  background-size: 50% 50%;
}



/*  .js #nav {
    position: relative;
  }*/
  
  
  .js #nav.closed {
    max-height: none;
  }




/*============================
#contents
============================*/


#top-contents {
	margin: 0 3%;
	width: 97%;
	background: url(images/top_visual_sp.png) no-repeat top center;
	-moz-background-size: 100% auto;
	background-size: 100% auto; 
}

@media screen and (max-width: 980px) {
#top-contents { 	height: 1160px; }
}
@media screen and (max-width: 760px) {
#top-contents { 	height: 700px; }
}

@media screen and (max-width: 480px) {
#top-contents { 	height: 460px; }
}

@media screen and (max-width: 320px) {
#top-contents { 	height: 100%; }
}



#contents {
width: 100%;
}


#contents h2 {
	display: block;
	margin: 10px auto;
	padding-top: 10px;
	width: 100%;
	text-align: center;
	border-top: 1px solid #eee;
	font-size: 100%;
	font-weight: normal;
	color: #777;
}


#contents h2 img {
	display: none;
}

#contents h2 span {
	display: block;
}


.visual {
	display: block;
	margin: 0 0 12px 0;
	width: 100%;
	height: 50px;
}

.v-bg-company { background: url(images/v_company.png) no-repeat top left; }
.v-bg-staff { background: url(images/v_staff.png) no-repeat top left; }
.v-bg-works { background: url(images/v_works.png) no-repeat top left; }
.v-bg-presentation { background: url(images/v_presentation.png) no-repeat top left; }
.v-bg-idea { background: url(images/v_idea.png) no-repeat top left; }

.v-bg-company,
.v-bg-staff,
.v-bg-works,
.v-bg-presentation,
.v-bg-idea {
-moz-background-size: 100% auto;
background-size: 100% auto;
}



/*============================
.post
============================*/

.post {
	padding: 0 3%;
	width: 94%;
}

.post p { font-size:116%; }

.post table th,
.post table td {	
	text-align: left;
	vertical-align: top;
	padding: 10px 30px 10px 0;
	font-size:108%;
	border-bottom: 1px solid #eee; 
}


.post table th { width: 35%; font-weight: normal; }
.post table td { width: 65%; }





/*============================
PAGE company
============================*/



.dvd-100 {
	margin: 0 0 30px 0;
}

#company h3 {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px #eee solid ;
}

.copy{
	display: block;
	margin: 0 0 10px 0;
	font-size: 108%;

}

#map { display: none; }

#run-map { 
margin: 30px auto ;
width: 80%;
}

#run-map a { 
display: block;
padding: 15px 0;
width: 100%;
text-align: center;
color: #FFF;
text-decoration: none;
background-color: #444;
}

hr {
	border: 0;
    border-bottom: 1px dotted #e7e7e7;
    background: #fff;
}

/*============================
PAGE staff
============================*/

.prof-wrap { 
margin: 0 0 30px 0;
padding: 0 0 20px 0;
width: 100%;
border-bottom: 1px #eee solid ;
}


.prof-photo {
	display: block;
	margin: 0 0 10px 0;
	width: 100%;
}


.prof-txt {}

.prof-txt h4 { margin: 0;   font-weight: bold; } /* このページ独自 */


.job-title,
p.born-year  {
  display: block;
  font-weight: normal;
/*  font-size:77%;*/
 }
 
 .job-title { margin-bottom: 10px; }
 
 p.born-year { margin: 0 0 10px 0; }

.name { 
display: block;
margin: 10px 0 10px 0;
font-size:153.9%; 
 }



/*============================
PAGE (wg as) works, gallery  
============================*/

.wg-wrap {
display: block;
margin: 0 0 0 0;
padding: 12px 0;
width: 100%;
text-decoration: none;
border-bottom: 1px solid #eee;
background: url(images/arrow.png) no-repeat center right;
-moz-background-size: auto 22%;
background-size: auto 22%;
}

/*div.wg-wrap:nth-child(2n) {
margin: 0 0 20px 0;
background-color:#C63;
}*/


.wg-thumbnail {
	float: left;
	display: block;
	margin: 0 3% 0 0;
	width: 27%;
}

.wg-txt {
	float: left;
	width: 70%;
}

.wg-txt h3 {
	display: block;
	margin: 0 0 5px 0;
}

.wg-txt p {  font-size:93%;}

/*============================
PAGE (wg as)  sub
============================*/

.wg-title h3 {
	display: block;
	margin: 0;
}

.wg-title p { margin: 0 0 10px 0;   }

.wg-wrap-s {
margin: 0 0 25px 0;
padding: 0 0 15px 0;
width: 100%;
border-bottom: 1px dotted #e7e7e7;
}



.wg-photo-s {
	display: block;
	margin: 0 0 10px 0;
	width: 100%;
}

/*============================
WP-Pagenavi
============================*/

.wp-pagenavi {
	display: block;
	padding: 20px 3%;
	text-align: center;
	font-size:108%;
}

.wp-pagenavi a { border: none; padding: 1em 1.5em;}
span.pages {	display: none; }
span.current { border: none; }