*{
	padding: 0;
	margin: 0;
}
html{
	font-size: 62.5%;
	height: 100%;
	width: 100%;
	font-family: "游ゴシック", YuGothic, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
a::selection,
h1::selection,
h2::selection,
h3::selection,
p::selection,
span::selection,
li::selection,
img::selection,
br::selection {
	background: #000;
	color: white;
}
a::-moz-selection,
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
p::-moz-selection,
span::-moz-selection,
li::-moz-selection,
img::-moz-selection,
br::-moz-selection  {
	background: #000;
	color: white;
}
body{
	background-color: #fff;
	position: relative;
	height: 100%;
	text-rendering: optimizeLegibility;
	width: 100%;
}
a{
	cursor: pointer;
	color: inherit;
	text-decoration: underline;
}
a:hover{
	text-decoration: none;
}
li{
	list-style-type: none;
}

@media(min-width: 761px){
	/*---------------------
		header
	---------------------*/
	header{
		height: auto;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	.header--bg{
		background-color: #fff;
		height: 59px;
		width: 100%;
	}

	/*---------------------
		gnav
	---------------------*/
	.gnav{
		height: 32px;
		position: absolute;
		left: 60px;
		top: 32px;
		width: 162px;
	}
	.gnav--home{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		-webkit-transition: background-color .2s;
		-o-transition: background-color .2s;
		transition: background-color .2s;
	}
	.gnav--content{
		background-color: rgba(0,0,0,.9);
		display: none;
		height: 238px;
		left: 0;
		padding-top: 16px;
		position: relative;
		top: 32px;
		width: 100%;
	}
	.gnav--content--item{
		border-top: 1px solid rgba(255,255,255,.5);
		color: white;
		font-size: 14px;
		line-height:20px;
	  letter-spacing: .15em;
	  opacity: 0;
	  position: relative;
	  width: 90%;
		-webkit-transition: opacity 1s, width 1s;
		-o-transition: opacity 1s, width 1s;
		transition: opacity 1s, width 1s;  
	}
	.gnav-works{
		height: 160px;
	}
	.gnav-works--content{
		margin-top: 30px;
		float: right;
		height: 100%;
		width: 70px;
	}
	.gnav-works--content--item{
		border-top: 1px solid rgba(255,255,255,.5);
		font-size: 12px;
		height: 40px;
		position: relative;
		text-align: left;
		width: 100%;
	}
	.gnav-link-container{
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.gnav-profile{
		height: 80px;
	}
	.gnav-link-effect{
		-webkit-transition: width .2s, opacity 1s;
		-o-transition: width .2s, opacity 1s;
		transition: width .2s, opacity 1s;
	}
	.gnav-link-effect:hover{
		width: 80%;
	}

	/*---------------------
		logo
	---------------------*/
	.black-line--before{
		border-top: 2px solid black;
		position: absolute;		
		left: 0;
		top: 37px;
		width: 0;
		-webkit-transition: width 1s;
		-o-transition: width 1s;
		transition: width 1s;
	}
	.black-line--after{
		position: absolute;				
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 222px;
		top: 58px;
		width: 0;
		-webkit-transition: width 1s 1.5s;
		-o-transition: width 1s 1.5s;
		transition: width 1s 1.5s;
	}
	.black-line--after--item{
		border-top: 2px solid black;
	}
	.logo{
		height: auto;
		left: 60px;
		position: absolute;
		top: 32px;
		width: 162px;
	}
	.logo--black-box{
		fill: white;
		-webkit-transition: fill 1s 1s;
		-o-transition: fill 1s 1s;
		transition: fill 1s 1s;
	}
	.logo--line{
		stroke-dasharray: 500px;
		stroke-dashoffset: 500px;
		opacity: .2;
		-webkit-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	.logo--line.line-num1{
		-webkit-transition: all 1s 1s;
		-o-transition: all 1s 1s;
		transition: all 1s 1s;	
	}
	.logo--line.line-num2{
		-webkit-transition: all 1s 1.2s;
		-o-transition: all 1s 1.2s;
		transition: all 1s 1.2s;	
	}
	.logo--line.line-num3{
		-webkit-transition: all 1s 1.15s;
		-o-transition: all 1s 1.15s;
		transition: all 1s 1.15s;	
	}
	.logo--line.line-num4{
		-webkit-transition: all 1s 1.2s;
		-o-transition: all 1s 1.2s;
		transition: all 1s 1.2s;	
	}
	.logo--line.line-num5{
		-webkit-transition: all 1s 1.25s;
		-o-transition: all 1s 1.25s;
		transition: all 1s 1.25s;	
	}
	.logo--line.line-num6{
		-webkit-transition: all 1s 1.3s;
		-o-transition: all 1s 1.3s;
		transition: all 1s 1.3s;	
	}
	.logo--line.line-num7{
		-webkit-transition: all 1s 1.35s;
		-o-transition: all 1s 1.35s;
		transition: all 1s 1.35s;	
	}
	.logo--line.line-num8{
		-webkit-transition: all 1s 1.4s;
		-o-transition: all 1s 1.4s;
		transition: all 1s 1.4s;	
	}
	.logo--line.line-num9{
		-webkit-transition: all 1s 1.45s;
		-o-transition: all 1s 1.45s;
		transition: all 1s 1.45s;	
	}
	.logo--line.line-num10{
		-webkit-transition: all 1s 1.5s;
		-o-transition: all 1s 1.5s;
		transition: all 1s 1.5s;	
	}
	.logo--line.line-num11{
		-webkit-transition: all 1s 1.55s;
		-o-transition: all 1s 1.55s;
		transition: all 1s 1.55s;	
	}
	.logo--line.line-num12{
		-webkit-transition: all 1s 1.6s;
		-o-transition: all 1s 1.6s;
		transition: all 1s 1.6s;	
	}
	.logo--line.line-num13{
		-webkit-transition: all .6s 1.8s ease-out;
		-o-transition: all .6s 1.8s ease-out;
		transition: all .6s 1.8s ease-out;
		stroke-dasharray: 5000px;
		stroke-dashoffset: 5000px;
	}

	/*---------------------
		main
	---------------------*/
	.main{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
		padding: 80px 40px;
		width: 100%;
	}

	/*---------------------
		list
	---------------------*/
	.works-list{
		height: auto;
		margin-bottom: 60px;
		overflow: auto;
		width: 100%;
	}
	.works-list-item{
		background-color: #000;
		float: left;
		height: auto;
		margin:0px 20px 40px;
		position: relative;
		width: 22%;
	}
	.works-image{
		height: 100%;
		width: 100%;
		-webkit-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.works-list-item:hover .works-image{
		opacity: .3;
	}
	.works-title{
		bottom: 16px;
		color: white;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: normal;
		left: 0;
		letter-spacing: .15em;
		line-height: 20px;
		opacity: 0;
		position: absolute;
		-webkit-transform: scaleX(.9);
		-ms-transform: scaleX(.9);
		-o-transform: scaleX(.9);
		transform: scaleX(.9);
		-webkit-transform-origin: left;
		-ms-transform-origin: left;
		-o-transform-origin: left;
		transform-origin: left;
		-webkit-transition: opacity .3s, left .3s;
		-o-transition: opacity .3s, left .3s;
		transition: opacity .3s, left .3s;	
	}
	.works-list-item:hover .works-title{
		opacity: 1;
		left: 10px;
	}
	.multi-photos-icon{
		height: auto;
		left: 0;
		opacity: 0;
		position: absolute;
		width: 24px;
		top: 10px;
		-webkit-transition: opacity .3s, left .3s;
		-o-transition: opacity .3s, left .3s;
		transition: opacity .3s, left .3s;		
	}
	.works-list-item:hover .multi-photos-icon{
		opacity: 1;
		left: 10px;
	}
	.multi-photos-length{
		color: white;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 12px;
		-webkit-transition: opacity .3s, left .5s;
		-o-transition: opacity .3s, left .5s;
		transition: opacity .3s, left .5s;		
	}
	.works-list-item:hover .multi-photos-length{
		opacity: 1;
		left: 14px;
	}	

	/*---------------------
		profile
	---------------------*/
	.profile{
		height: 100%;
		margin-top: -20px;
		width: 100%;
	}
	.profile--collumns{
		float: left;
		margin:0 10px;
	}
	.collumn-profile{
		width: 220px;
	}
	.collumn-studio{
		width: 380px;
	}
	.collumn-profile{
		width: 220px;
	}
	.profile-title{
		background-color: black;
		color: white;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1em;
		padding-top: 8px;
		margin-bottom: 20px;
		width: 60px;
	}
	.profile-text{
		margin-bottom: 20px;
		font-size: 12px;
		font-size: 1.2rem;
		letter-spacing: .025em;
		line-height: 20px;
		-webkit-transform: scaleX(.95);
		-ms-transform: scaleX(.95);
		-o-transform: scaleX(.95);
		transform: scaleX(.95);		
		-webkit-transform-origin: left;
		-ms-transform-origin: left;
		-o-transform-origin: left;
		transform-origin: left;	
	}
	.text-studio{
		height: 160px;
	}
	.studio-image-photo{
		height: 220px;
		margin-bottom: 20px;
		width: 100%;
	}
	.studio-floor-plan{
		height: auto;
	}
	.map{
		height: 540px;
		width: 300px;
	}

	/*---------------------
		footer
	---------------------*/
	footer{
		background-color: #fff;
		/*border-top: 2px solid #000;*/
		bottom: 0;
		height: 60px;
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 100;
	}
	.footer--line{
		border-top: 2px solid #000;
		float: right;
		height: 0;
		opacity: 0;
		width: 0%;
		-webkit-transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		-o-transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		z-index: 100;	
	}
	.footer--copy{
		display: inline-block;
		height: auto;
		opacity: 0;
		padding-top: 20px;
		padding-left: 60px;
		position: absolute;
		width: auto;
		-webkit-transition: opacity 1s 3.4s;
		-o-transition: opacity 1s 3.4s;
		transition: opacity 1s 3.4s;
	}
}







@media(max-width: 760px){
	/*---------------------
		header
	---------------------*/
	header{
		height: auto;
		left: 0;
		position: fixed;
		top: -22px;
		width: 100%;
		z-index: 100;
	}
	.header--bg{
		background-color: #fff;
		height: 60px;
		width: 100%;
	}

	/*---------------------
		gnav
	---------------------*/
	.gnav{
		height: 32px;
		position: absolute;
		left: 20px;
		top: 32px;
		width: 162px;
	}
	.gnav--home{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		-webkit-transition: background-color .2s;
		-o-transition: background-color .2s;
		transition: background-color .2s;
	}
	.gnav--content{
		background-color: rgba(0,0,0,.9);
		display: none;
		height: 238px;
		left: 0;
		padding-top: 16px;
		position: relative;
		top: 32px;
		width: 100%;
	}
	.gnav--content--item{
		border-top: 1px solid rgba(255,255,255,.5);
		color: white;
		font-size: 14px;
		line-height:20px;
	  letter-spacing: .15em;
	  opacity: 0;
	  position: relative;
	  width: 90%;
		-webkit-transition: opacity 1s, width 1s;
		-o-transition: opacity 1s, width 1s;
		transition: opacity 1s, width 1s;  
	}
	.gnav-works{
		height: 160px;
	}
	.gnav-works--content{
		margin-top: 30px;
		float: right;
		height: 100%;
		width: 70px;
	}
	.gnav-works--content--item{
		border-top: 1px solid rgba(255,255,255,.5);
		font-size: 12px;
		height: 40px;
		position: relative;
		text-align: left;
		width: 100%;
	}
	.gnav-link-container{
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.gnav-profile{
		height: 80px;
	}
	.gnav-link-effect{
		-webkit-transition: width .2s, opacity 1s;
		-o-transition: width .2s, opacity 1s;
		transition: width .2s, opacity 1s;
	}
	.gnav-link-effect:hover{
		width: 80%;
	}

	/*---------------------
		logo
	---------------------*/
	.black-line--before{
		border-top: 2px solid black;
		position: absolute;		
		left: 0;
		top: 37px;
		width: 0;
		-webkit-transition: width 1s;
		-o-transition: width 1s;
		transition: width 1s;
	}
	.black-line--after{
		position: absolute;				
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 182px;
		top: 58px;
		width: 0;
		-webkit-transition: width 1s 1.5s;
		-o-transition: width 1s 1.5s;
		transition: width 1s 1.5s;
	}
	.black-line--after--item{
		border-top: 2px solid black;
	}	
	.logo{
		height: auto;
		left: 20px;
		position: absolute;
		top: 32px;
		width: 162px;
	}
	.logo--black-box{
		fill: white;
		-webkit-transition: fill 1s 1s;
		-o-transition: fill 1s 1s;
		transition: fill 1s 1s;
	}
	.logo--line{
		stroke-dasharray: 500px;
		stroke-dashoffset: 500px;
		opacity: .2;
		-webkit-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	.logo--line.line-num1{
		-webkit-transition: all 1s 1s;
		-o-transition: all 1s 1s;
		transition: all 1s 1s;	
	}
	.logo--line.line-num2{
		-webkit-transition: all 1s 1.2s;
		-o-transition: all 1s 1.2s;
		transition: all 1s 1.2s;	
	}
	.logo--line.line-num3{
		-webkit-transition: all 1s 1.15s;
		-o-transition: all 1s 1.15s;
		transition: all 1s 1.15s;	
	}
	.logo--line.line-num4{
		-webkit-transition: all 1s 1.2s;
		-o-transition: all 1s 1.2s;
		transition: all 1s 1.2s;	
	}
	.logo--line.line-num5{
		-webkit-transition: all 1s 1.25s;
		-o-transition: all 1s 1.25s;
		transition: all 1s 1.25s;	
	}
	.logo--line.line-num6{
		-webkit-transition: all 1s 1.3s;
		-o-transition: all 1s 1.3s;
		transition: all 1s 1.3s;	
	}
	.logo--line.line-num7{
		-webkit-transition: all 1s 1.35s;
		-o-transition: all 1s 1.35s;
		transition: all 1s 1.35s;	
	}
	.logo--line.line-num8{
		-webkit-transition: all 1s 1.4s;
		-o-transition: all 1s 1.4s;
		transition: all 1s 1.4s;	
	}
	.logo--line.line-num9{
		-webkit-transition: all 1s 1.45s;
		-o-transition: all 1s 1.45s;
		transition: all 1s 1.45s;	
	}
	.logo--line.line-num10{
		-webkit-transition: all 1s 1.5s;
		-o-transition: all 1s 1.5s;
		transition: all 1s 1.5s;	
	}
	.logo--line.line-num11{
		-webkit-transition: all 1s 1.55s;
		-o-transition: all 1s 1.55s;
		transition: all 1s 1.55s;	
	}
	.logo--line.line-num12{
		-webkit-transition: all 1s 1.6s;
		-o-transition: all 1s 1.6s;
		transition: all 1s 1.6s;	
	}
	.logo--line.line-num13{
		-webkit-transition: all .6s 1.8s ease-out;
		-o-transition: all .6s 1.8s ease-out;
		transition: all .6s 1.8s ease-out;
		stroke-dasharray: 5000px;
		stroke-dashoffset: 5000px;
	}

	/*---------------------
		main
	---------------------*/
	.main{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
		padding: 80px 20px;
		width: 100%;
	}

	/*---------------------
		list
	---------------------*/
	.works-list{
		height: auto;
		padding-bottom: 60px;
		overflow: auto;
		width: 100%;
	}
	.works-list-item{
		background-color: #000;
		float: left;
		height: auto;
		margin:0 0 40px;
		position: relative;
		width: 22%;
	}
	.works-image{
		height: 100%;
		width: 100%;
		-webkit-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.works-list-item:hover .works-image{
		opacity: .3;
	}
	.works-title{
		bottom: 16px;
		color: white;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: normal;
		left: 0;
		letter-spacing: .15em;
		line-height: 20px;
		opacity: 0;
		position: absolute;
		-webkit-transform: scaleX(.9);
		-ms-transform: scaleX(.9);
		-o-transform: scaleX(.9);
		transform: scaleX(.9);
		-webkit-transform-origin: left;
		-ms-transform-origin: left;
		-o-transform-origin: left;
		transform-origin: left;
		-webkit-transition: opacity .3s, left .3s;
		-o-transition: opacity .3s, left .3s;
		transition: opacity .3s, left .3s;	
	}
	.works-list-item:hover .works-title{
		opacity: 1;
		left: 10px;
	}
	.multi-photos-icon{
		height: auto;
		left: 0;
		opacity: 0;
		position: absolute;
		width: 24px;
		top: 10px;
		-webkit-transition: opacity .3s, left .3s;
		-o-transition: opacity .3s, left .3s;
		transition: opacity .3s, left .3s;		
	}
	.works-list-item:hover .multi-photos-icon{
		opacity: 1;
		left: 10px;
	}
	.multi-photos-length{
		color: white;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 12px;
		-webkit-transition: opacity .3s, left .5s;
		-o-transition: opacity .3s, left .5s;
		transition: opacity .3s, left .5s;		
	}
	.works-list-item:hover .multi-photos-length{
		opacity: 1;
		left: 14px;
	}	

	/*---------------------
		profile
	---------------------*/
	.profile{
		height: 100%;
		margin-top: -60px;
		padding-bottom: 60px;
		width: 100%;
	}
	.profile--collumns{
		margin:0 0 60px;
		width: 100%;
	}
	.profile-title{
		background-color: black;
		color: white;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1em;
		padding-top: 8px;
		margin-bottom: 20px;
		width: 60px;
	}
	.profile-text{
		margin-bottom: 20px;
		font-size: 12px;
		font-size: 1.2rem;
		letter-spacing: .025em;
		line-height: 20px;
		-webkit-transform: scaleX(.95);
		-ms-transform: scaleX(.95);
		-o-transform: scaleX(.95);
		transform: scaleX(.95);		
		-webkit-transform-origin: left;
		-ms-transform-origin: left;
		-o-transform-origin: left;
		transform-origin: left;	
	}
	.text-studio{
		height: auto;
	}
	.studio-image-photo{
		height: auto;
		margin-bottom: 20px;
		width: 100%;
	}
	.studio-floor-plan{
		height: auto
		margin-bottom: 20px;
		width: 100%;	
	}
	.collumn-map{
		padding-bottom: 60px;
	}
	.map{
		height: 300px;
		width: 100%;
	}

	/*---------------------
		footer
	---------------------*/
	footer{
		background-color: #fff;
		bottom: 0;
		height: 40px;
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 100;
	}
	.footer--line{
		border-top: 2px solid #000;
		float: right;
		height: 0;
		opacity: 0;
		width: 0%;
		-webkit-transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		-o-transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		transition: width 1.2s 2.4s ease-out, opacity 1s 2.4s;
		z-index: 100;	
	}
	.footer--copy{
		display: inline-block;
		height: auto;
		opacity: 0;
		padding-top: 10px;
		padding-left: 20px;
		position: absolute;
		width: auto;
		-webkit-transition: opacity 1s 3.4s;
		-o-transition: opacity 1s 3.4s;
		transition: opacity 1s 3.4s;
	}
}
/*-----/sp-------*/


/*---------------------
	js
---------------------*/
.js-slide-open-effect.on{
	opacity: 1;
	width: 100%;
}
.gnav-link-effect:hover{
	width: 80%;
}
.js-fade-array{
	opacity: 0;
	position: relative;
	top: 0;
	-webkit-transition: opacity 1s, top 1s;
	-o-transition: opacity 1s, top 1s;
	transition: opacity 1s, top 1s;
}



.underconstruction{
	color: white;
	font-size: 20px;
}