@charset "utf-8";

html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

body {
	background: url('../img/bg-works.jpg') 0 center fixed #000000;
	background-size: inherit;
	width: 100%;
	overflow-x: hidden;
}

#container {
	width: 100%;
	text-align: center;
}

#container div {
	margin: 4px;
	/* float: left; */
	display: inline-block;
	float: left;
}

#container div a {
    display: block;
	
    width: 180px;
    height: 100%;
}

#container div img {
	width:180px;
	display: block;
	height: auto;
	opacity: 0.6;
	
	-webkit-filter: saturate(25%);
	
	z-index: 0;
	position: relative;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

video#bg_movie {
  display:block;
  position: fixed; 
  right: 0;
  bottom: 0;
  min-width: 940px;
  min-height: 480px;
  z-index:-100;
}

#filters {
	clear:both;
	float: none!important;
	width: 100%;
	text-align: center;
	padding: 16px 0 0;
	z-index: 100;
	position: relative;
	max-width: 1300px;
	margin: 0 auto!important;
}

.item {
	position:relative;
	/* float:left; */
}

/* button */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #000;
  border: none;
  border-radius: 7px;
  /* background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); */
  color: #FFF;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px rgb(107, 107, 107);
  cursor: pointer;
  z-index: 200;
  position: relative;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: none;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }


#header {
/* position: fixed; */
top:0;
width:100%;
background:rgba(0,0,0,0.6);
height: 76px;
border-bottom:solid 1px #444444;
z-index: 1000;
top:0;
}

h1#logo {font-size: 0;color: #FFFFFF;margin: 6px 0 0 -475px;position: absolute;z-index: 600;/* top: 0; */left: 50%;}

h1#logo:before {content:"";position: absolute;width: 1200px;background: #FFFFFF;display: inline-block;height: 76px;/* top: -6px; */right: -136px;margin: -6px 99px 0 0;transform: skew(-45deg);-o-transform: skew(-45deg);-moz-transform: skew(-45deg);-webkit-transform: skew(-45deg);padding: 0;}

h1#logo a {background: url(../img/jiyuro-logo.png) no-repeat top right;display: block;width: 357px;height: 60px;}

#header ul {
float: right;
display: block;
width: 100%;
text-align: right;
}
#header li {display: inline-block;width: 9%;text-align: center;font-size: 18px;}

#header a {
z-index:600;
display: block;
position: relative;
width: 90px;
height: 100%;
}

#header li a {
color: #FFFFFF;
text-decoration: none;
padding: 40px 0 0;
margin: 0 auto;
}

#header li a:hover {

}

#header li a span {
display: none;
font-size: 13px;
padding: 3px 0 0;
color: #8A8A8A;
}

#header li a:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 75px solid rgba(255,255,255,0.0);
border-right: 75px solid transparent;
border-left: 75px solid transparent;
margin: -45px 0 0 -75px;
left: 50%;
z-index:-10;
}

#header li a:hover:before {
margin: -12px 0 0 -75px;
border-top: 75px solid rgba(255,255,255,0.2);
transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-webkit-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-moz-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-o-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
z-index:100;
}

.isotope {
	width: 94%;
	margin: 0 2% 0 4%!important;
	/* min-height: 100%; */
	text-align: center;
}

#container div img:hover {
	opacity:1;
	 
	width: 220px; 
	-webkit-filter: saturate(100%);
	margin: -20px 0 0 -20px;
	z-index: 200;
}

.isotope .labeling {
	position:absolute;
	bottom: 0;
	right: 0;
	font-size: 12px;
	list-style: none;
}

.isotope li{
	z-index: 210;
	padding: 1px 10px;
	list-style: none;
	position: relative;
}


.isotope li.label-make {
	background: rgba(158, 57, 57, 0.4);
	color: #FFFFFF
}

.isotope li.label-modeling {
	background: rgba(57, 102, 158, 0.4);
	color: #FFFFFF;
}

.isotope li.label-costume {
	background: rgba(158, 151, 57, 0.4);
	color: #FFFFFF;
}

.isotope li.label-design {
	background: rgba(62, 158, 57, 0.4);
	color: #FFFFFF;
}

.isotope li.label-digital_prototype {
	background: rgba(158, 57, 145, 0.4);
	color: #FFFFFF;
}

.isotope li.label-direction {
	background: rgba(158, 114, 57, 0.4);
	color: #FFFFFF;
}

#about {
	color:#ffffff;
	width:920px;
	margin: 0 auto!important;
	display: block!important;
	float: none!important;
}

#about h2 {
border-bottom:solid 1px #999999;
}

#about h2 span {
	font-size: 80%;
	padding:0 0 0 24px;
	font-weight: normal;
}

#about p {
	text-align:left;
	margin: 12px 0;
	font-size: 95%;
}

#about_jiro {
	float:right;
	width:300px;
	margin: 0 0 12px 12px;
}

.offices {
	width: 48%;
	display: inline-block;
	padding: 1em 0 2em;
	margin: 0 0 0 1%;
}

.offices h3 {
	margin: 12px 0 0;
}

#about .offices p {
	margin:0;
}

#contact-form {
	text-align: center;
}

#contact-form iframe {
	margin: 0 auto;
	display: block;
}

#container div.button-group {
	text-align: left;
	padding: 0px 0 16px 28px;
	/* border-bottom: dotted #313131 1px; */
	width: 100%;
}

@media (min-width: 1200px){
	#header li {width:8%;}
	h1#logo {margin: 6px 0 0 -590px;}
}

@media (max-width: 980px){
	body{width:830px;overflow:hidden;}
	#header li {width: 9%;font-size: 15px;}
	h1#logo {margin: 6px 0 0 -406px;/* overflow: hidden; */}
	.isotope {width:800px;}
	h1#logo a {width: 286px;}
	#header {width:830px;overflow-x:hidden;}
}