@font-face {
	  		font-family: "GTWalsheimRegular";
	  		src: url("./font/GTWalsheimRegular.eot?") format('eot'),
	      		 url("./font/GTWalsheimRegular.woff2") format('woff2'),
	       		 url("./font/GTWalsheimRegular.woff") format('woff');
}

@font-face {
	 		font-family: "GTWalsheimMedium";
	  		src: url("./font/GTWalsheimMedium.eot?") format('eot'),
	      		 url("./font/GTWalsheimMedium.woff2") format('woff2'),
	       		 url("./font/GTWalsheimMedium.woff") format('woff');
}

 @font-face {
     font-family: 'Noto Sans JP';
     font-style: normal;
     font-weight: 400;
     src: local("Noto Sans CJK JP"),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

html,ul,body,header,button,p{
	margin: 0;
	padding: 0;
	font-size:100%;
}

button{
	border:none;
	background:none;
	-webkit-appearance:none;
}

button:focus{
	outline: 0;
}

body{
	position: relative;
	font-family: 'GTWalsheimRegular','Noto Sans JP', sans-serif;
	color: #333;
}

#logo{
	margin-left: 10px;
	height: 12px;
}

header{
	position: fixed;
	margin-top: 30px;
	overflow:hidden;
	z-index: 999;
	width: 900px;
}

#centered{
	width: 900px;
	margin: 0 auto;
}

h1{
	margin: 0;
	padding: 0;
	letter-spacing: 0.07em;
	font-size: 18px;
	float: left;
	font-family: 'GTWalsheimMedium','Noto Sans JP', sans-serif;
	font-weight: normal;
}

a{
	text-decoration: none;
	color: #bbb;
	font-weight: normal;
	transition-property: all;
  	transition: 0.2s linear;
}

a:hover, a:active{
	color: #333;
}

h1 a{
	text-decoration: none;
	color: #333;
	font-weight: normal;
	transition-property: all;
  	transition: 0.2s linear;
}

li{
	list-style: none;
	display: inline-block;
	margin-left: 12px;
	letter-spacing: 0.05em;
}

nav{
	overflow:hidden;
}

#mobile{
	display: none;
}

#main-nav{
	margin-left: 50px;
	font-size: 13px;
	line-height: 1.8em;
}

#category-nav{
	margin-top: 2px;
	margin-left: 50px;
}

#category-nav button{
	border-style: none;
	background-color: transparent;
	font-family: 'GTWalsheimRegular','Noto Sans JP', sans-serif;;
	color: #bbb;
	line-height: 1.8em;
	font-size: 11px;
    -webkit-transition: .3s;
    transition: .2s;
}

#category-nav button:hover{
	cursor: pointer; 
	color: #333;
}


.wrapper{
	padding-top: 130px;
	width: 900px;
	overflow: hidden;
}

.work{
	position: relative;
	width: 160px;
	height: 90px;
	margin: 10px 10px 10px 10px;
	float: left;
}

.work-img{
	width: 160px;
	height: 90px;
	background-color: #eee;
}

figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.work:hover figcaption{
  opacity: 1;
}

.work-name{
	position: absolute;
	color: #fff;
	width: 160px;
	text-align: center;
	top: 50%;
  	left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
  	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.work-category{
	position: absolute;
	color: rgba(122,122,122,.5);
	left: 8px;
	top: 48px;
	margin: 0;
	padding: 0;
	font-size: 9px;
}

#profile{
	margin-left: 10px;
	width: 800px;
}

#profile-name{
	font-size: 20px;
}

#profile-img{
	width: 60%;
}

#profile-role{
	margin-top: 3px;
	font-size: 12px;
	color: #bbb;
}

#profile-description{
	line-height: 1.6em;
	margin-top: 30px;
}

.profile-credit{
	font-size: 12px;
	color: #bbb;
	margin-top: 30px;
	margin-bottom: 5px;
}

.profile-year{
	font-size: 16px;
	margin-right: 10px;
	display: inline;
}

.profile-history-detail{
	font-size: 16px;
	display: inline;
}

.profile-url{
	font-size: 14px;
	display: inline;
}

#single-work-imgs{
	width: 520px;
	margin-left: 10px;
	margin-right: 40px;
	float: left;
}

.single-work-img{
	width: 520px;
	margin-bottom: 10px;
	background-color: #eee;
	vertical-align: bottom;
}

.single-work-img-connect{
	width: 520px;
	background-color: #eee;
	vertical-align: bottom;
}

.single-work-img-connect-last{
	width: 520px;
	margin-bottom: 10px;
	background-color: #eee;
	vertical-align: bottom;
}

.single-work-movie{
	width: 520px;
	height: calc(520px / 16 * 9);
	margin-bottom: 10px;
	background-color: #eee;
	vertical-align: bottom;
}

#single-work-caption{
	margin-right: 10px;
}

#single-work-title{
	font-size: 20px;
}

#single-work-year{
	margin-top: 3px;
	font-size: 12px;
	color: #bbb;
}

#single-work-category{
	font-size: 12px;
	color: #bbb;
}

#single-work-description{
	line-height: 1.6em;
	margin-top: 30px;
}

.single-work-credit-title{
	font-size: 12px;
	color: #bbb;
	margin-top: 30px;
	margin-bottom: 5px;
}

.single-work-credit-role{
	font-size: 12px;
	margin-right: 10px;
	display: inline;
}

.single-work-credit-name{
	font-size: 16px;
	display: inline;
}

.single-work-credit-url{
	font-size: 14px;
	display: inline;
}

.lazyload, .lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
}

footer{
	height: 50px;
}