/*
Theme Name: gs
*/


* {
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
a{
	word-break: break-all;
}
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

.none{
display:none !important;
}
a{
	color:inherit;
}


body{
	font-family:Helvetica, Arial,
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
	font-weight:bold;
	
     letter-spacing: 0.06em;
}

/*menu_board*/
.menu_board{
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:25%;
	background:#191919;
	cursor:pointer;
}


.menu_area{
	position:fixed;
	top:0;
	left:25%;
	height:100%;
	width:75%;
	pointer-events:none;
	z-index:100;
}
.menu_open .menu_area{
		pointer-events:auto;
}
.menu_panel{
	float:left;
	width:16.666%;
	height:100%;
border-left:solid 1px #000;
	color:#fff;
	position:relative;
	    font-size: 12px;
	background:rgba(0,0,0,0.9);
	display:block;

}

.menu_inner{
	width:100%;
	text-align:center;
	
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.menub_inner{
	
	color:#fff;

	font-size: 21px;
	
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.menu_panel.menu_close{
	background:rgba(0,0,0,0.6);
	cursor:pointer;

}

.menu_cbs{
	
	

	width:24px;
	height:1px;
	position:relative;

   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);


	
	
}


.menu_cbs div{
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.menu_cb_1{
transform: rotate(-45deg);
}
.menu_cb_2{
transform: rotate(45deg);
}




.ltr:before{
	
	
-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */

	content:".";
	color:rgba(0,0,0,0);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
	opacity:0;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d8d8d8+0,565656+100 */
background: #d8d8d8; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #d8d8d8 0%, #565656 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #d8d8d8 0%,#565656 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #d8d8d8 0%,#565656 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#565656',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
}


.ltr:hover:before{
opacity:0.3;
}

.menu_panel{
	opacity:0;
	
-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

.menu_open .menu_panel{
	opacity:1;
}
.menu_panel:nth-of-type(1){
transition-delay:0s;
}
.menu_panel:nth-of-type(2){
transition-delay:0.04s;
}
.menu_panel:nth-of-type(3){
transition-delay:0.08s;
}
.menu_panel:nth-of-type(4){
transition-delay:0.12s;
}
.menu_panel:nth-of-type(5){
transition-delay:0.16s;
}
.menu_panel:nth-of-type(6){
transition-delay:0.2s;
}
.menu_panel:nth-of-type(7){
transition-delay:0.24s;
}

/*content*/

.content_area{
position:fixed;
	top:0;
	right:0;
	width:75%;
	height:100%;
	background:#000;
	overflow:auto;
color:#fff;
}


.content_inner_index{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
}

.work_box{
	position:relative;
	width:100%;
	height:400px;
	display:block;
	background-size:cover;
	background-position:center center;
	
}
.work_box_link{
	background:rgba(0,0,0,0.8);
	position:absolute;
	top:0;
		left:0;
	width:100%;
	height:100%;
	display:block;
}
.work_box_link_in{
	text-align:center;
text-decoration:none;
	color:#fff;
	font-size:20px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
	width:80%;
}
.works_img{
	display:block;
	width:100%;
	height:auto;
}



.works_mov{
    position: relative;
    width: 100%;
}
.works_mov:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さを幅の75%に固定 */
	
}
.works_mov iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.tom .works_mov{
	pointer-events:none;
}

.works_texts{
	padding:100px;
}

.works_texts h1{
font-size:24px;
	margin-bottom:30px;
}
.works_txt{
	font-size:15px;
	line-height:180%;
}

.bio_left{
	float:left;
	width:50%;
}
.bio_wrap{
	padding:100px;
}
.bio_right{
	
	float:left;
	width:50%;
		padding-left:40px;
}
.bio_txt{
	
	font-size:15px;
	line-height:180%;
	font-weight:normal;
}
.bio_name{
		line-height:150%;

font-size:24px;
	margin-bottom:20px;
}

.media_box{
	display:block;
	position:relative;
	width:100%;
	padding:25px 100px;
	text-decoration:none;
	font-size:14px;
}
.mb_date{
	display:inline-block;
	width:100px;
}
.mb_title{
	font-weight:normal;
}
.content_inner_media{
	padding:100px 0;
}


.b_date{
	display:inline-block;
padding-right:40px;
}
.b_title{
	font-weight:normal;
}




.jpen{
	position:absolute;
	bottom:0px;
	padding:40px;
	color:#fff;
	font-size:15px;
	opacity:0.5;
	cursor:pointer;
	width:50%;
	height:140px;
}
.jpen_jp{
	left:0;
	text-align:right;
	padding-right:10px;
}
.jpen_en{
	right:0;
	text-align:left;
	padding-left:10px;
}
.jpen:hover{
	opacity:1;
}
[lng="jp"] [lngr="jp"].jpen{
	opacity:1;
}
[lng="en"] [lngr="en"].jpen{
	opacity:1;
}
[lng="jp"] [en]{
	display:none !important;
}
[lng="en"] [jp]{
	display:none !important;
}


.bio_sns a{
	display:block;
	text-decoration:none;
	font-size:13px;
	padding:15px 0;
}
.bio_sns{
	margin-top:30px;
}

.bio_sns a:hover{
opacity:0.5;
}