@charset "UTF-8";

html,body {
	margin: 0;
	padding: 0;
}

/* barba-container
--------------------------------------------------------------------------------*/ 

#barba-wrapper {}

.barba-container {}

.fadein {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
visibility : visible;
/**/opacity : 0;
	width: 100%;
}

.fadein main {
    animation: moveFromLeftFade2 .6s ease;
}

@keyframes moveFromLeftFade2 {
    from { transform: translateY(100px); }
}

/*
.barba-container.fadein {
    animation: moveFromLeftFade .9s ease;
}

@keyframes moveFromLeftFade {
    from {transform: translateX(10%);}
}
*/


/*
#container {
	position: relative;
}
*/

/* wrapper
-------------------------------------------------------------------------------- */

.wrapper {}

/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {
/*
.wrapper {
	padding: 70px 0 0 0;
}

#top .wrapper {
	padding: 0;
}
*/
}
/* end */


/* header
-------------------------------------------------------------------------------- */

#hwrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 90px;*/
	padding: 45px 0 25px 0;
	background: #ffffff;
	/*font-weight: 600;*/
	text-align: left;
	z-index: 1000;
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

#hwrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	padding: 0;
	z-index: 1000;
	background: #ffffff;
	border-bottom: none;
}
	
/*
#top #hwrap {
	background: none;
}
*/

}
/* end */ 


header {
	line-height: 1;
	left: 50%;
	width: 1500px;
	margin: 0 auto;
	/*
		 -webkit-transform: translateX(-50%);
  	transform: translateX(-50%);
	*/
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

header {
  width: 100%;
  height: 70px;
}

}
/* end */ 


/* logo */
#logo {
	margin-left: 45px;
	float: left;
	opacity: 1;
}

#logo .sp-l {
	display: none;
}

#logo:hover {
	opacity: .6;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

#logo {
	position: absolute;
	top: 25px;
	left: 21px;
	margin: 0;
}

#logo .pc-l {
	display: none;
}

#logo .sp-l {
	display: block;
}

#logo .sp-l img {
	height: 24px;
}
	
#logo:hover {
	opacity: 1;
}
	
}
/* end */


/* スマートフォン(480px以下) */ 
@media screen and ( max-width: 480px ) {

#logo {
	position: absolute;
	top: 25px;
	transform: none;
}

}
/* end */


/* スマートフォン(320px以下) */ 
@media screen and ( max-width:320px ) {

#logo {
	top: 25px;
}

#logo img {
	height: 20px;
}

}
/* end */


/* global-navi */
#spgnavi,
.spgnbtn {
	display: none;
}

/* タブレット(768px以下) */ 
/*メニューアイコン*/
@media screen and ( max-width:1280px ) {

.spgnbtn {
	display: block;
	position: absolute;
	top: 25px;
	right: 21px;
	width: 23px;
	height: 18px;
	text-align: center;
	cursor: pointer;
	z-index: 99999;
	-webkit-transition: all 0.4s;
	-moz-transiton: all 0.4s;
	transition: all 0.4s;
}

.spgnbtn a {
	display: block;
	width: 50px;
	height: 50px;
}

.spgnbtn img {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 18px;
	-webkit-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);	
	transform: translateY(-50%) translateX(-50%);

	-webkit-transition: all 0.6s;
	-moz-transiton: all 0.6s;
	transition: all 0.6s;
}

.spgnbtn img.opn {
	opacity: 1;
}

.spgnbtn img.cls {
	opacity: 0;
}

.spgnbtn img.opn.fade {
	opacity: 0;
}

.spgnbtn img.cls.fade {
	opacity: 1;
}

.roll {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);	
}

}
/* end */ 


header nav {
	position: relative;
	float: right;
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

header nav {
	display: none;
}

}
/* end */ 


header #gn {}

ul#gnavi {
	/**/margin-right: 45px;
	padding-top: 16px;
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

ul#gnavi {
	display: none;
}

}
/* end */ 


ul#gnavi li {
	padding-top: 6px;
    padding-bottom: 5px;
    padding-right: 30px;
    margin-right: 30px;
/*	padding-right: 36.6px;
	margin-right: 36.6px;*/
	border-right: solid 1px #000;
	font-size: 16.5px;
	font-weight: 400;
	letter-spacing: 0.53px;
	float: left;
}


ul#gnavi li:nth-last-child(2) {
	border-right: none;
}


ul#gnavi li:last-child {
	margin-right: 0;
	padding-top: 0;
    padding-bottom: 0;
	padding-right: 0;
	border-right: none;
}

ul#gnavi li a {
	/*position: relative;*/
	display: block;
}
/*
ul#gnavi li a::after {
	position: absolute;
	left: 0;
	bottom: -3px;
	content:'';
	width: 100%;
	height: 1px;
	background: #FF5A5A;
	transform: scale(0,1);
	transform-origin: left top;
	transition: transform .3s;
}

ul#gnavi li a:hover::after {
	transform: scale(1,1);
}

ul#gnavi li.fb a:hover::after {
	transform: scale(0,1);
}

#news li.nws a::after,
#works li.wrk a::after,
#shop li.shp a::after,
#about li.abt a::after {
	transform: scale(1,1);
}
*/

ul#gnavi li.inf a,
ul#gnavi li.wrk a,
ul#gnavi li.exb a,
ul#gnavi li.vdo a,
ul#gnavi li.prs a,
ul#gnavi li.prf a,
ul#gnavi li.cnt a {
    color: #CCC;
}

#top ul#gnavi li a,
#info ul#gnavi li.inf a,
#works ul#gnavi li.wrk a,
#exhibition ul#gnavi li.exb a,
#video ul#gnavi li.vdo a,
#press ul#gnavi li.prs a,
#profile ul#gnavi li.prf a,
#contact ul#gnavi li.cnt a,
ul#gnavi li.igm a{
	color: #000;
}

#gnavi li.igm a {
	position: relative;
display: inline-block;
  width: 27px;
  height: 27px;
	/*
 border-radius: 50%;
	border: solid 1px #000;
	*/
	text-align:center;
}


.igm span {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
 /* width :80px;*/
  text-align:center;
	margin-left: 0.3px;
}

#top .igm span {
	margin-left: 0;
}
/*
#gnavi li.lng .en,
#gnavi li.lng .jp
{cursor: pointer;}

#gnavi li.lng .or {
	font-size: 0.85em;
	margin: 0 2px;
	vertical-align: top;
}

#container.jp #gnavi li.lng .en,
#container.en #gnavi li.lng .jp
{color: #CCC;}
*/


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

#spgnavi {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	margin-top: 70px;
	color: #000000;
	background-color: rgba(62, 58, 57, .8);
	z-index: 99998;
	font-size: 22px;
}

#spgnavi .spnin {
	position: absolute;
    left: 50%;
    top: calc(100vh * 0.5 - 70px);
	transform: translate(-50%,-50%);
}
	
#spgnavi .spnin ul li {
	margin-bottom: 1.5em;
	text-align: center;
}

#spgnavi .spnin ul li:last-child {
	margin-bottom: 0;
}
	
#spgnavi .spnin ul li.lng .or {
	margin: 0 0.5em;
	vertical-align: top;
    font-size: 0.9em;
}

#spgnavi .spnin ul li.lng .en,
#spgnavi .spnin ul li.lng .jp
{cursor: pointer;}

#spgnavi .spnin ul li.lng .or {
	font-size: 0.85em;
	margin: 0 2px;
	vertical-align: top;
}

#container.jp #spgnavi .spnin ul li.lng .en,
#container.en #spgnavi .spnin ul li.lng .jp
{color: #999;}
	
#spgnavi .spnin ul li.icn span {
	font-size: 1.5em;
	margin: 0 0.3em;
}

	
/*スマホインスタロゴ*/
#spgnavi li.igm a {
	position: relative;
display: inline-block;
  width: 33px;
  height: 33px;
	/*
  border-radius: 50%;
	border: solid 1px #FFF;
	*/
	color: #FFF;
	
}
	
#spgnavi .igm span {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width :80px;
  text-align:center;
}
	
	
/*ナビ_現在地*/
#spgnavi a {
	display: inline-block;
	/*position: relative;*/
	color: #898989;
}
/*	
#spgnavi a::after {
	position: absolute;
	left: 0;
	bottom: -3px;
	content:'';
	width: 100%;
	height: 1px;
	background: #000;
	transform: scale(0,1);
	transform-origin: left top;
	transition: transform .3s;
}

#spgnavi a:hover::after {
	transform: scale(1,1);
}
	
#news #spgnavi li.nws a::after,
#works #spgnavi li.wrk a::after,
#shop #spgnavi li.shp a::after,
#about #spgnavi li.abt a::after {
	transform: scale(1,1);
}

	
#news #spgnavi li.nws a,
#works #spgnavi li.wrk a,
#shop #spgnavi li.shp a,
#about #spgnavi li.abt a {
	color: #FFF;
}
	
ul#spgnavi li.inf a,
ul#spgnavi li.wrk a,
ul#spgnavi li.exb a,
ul#spgnavi li.prs a,
ul#spgnavi li.prf a,
ul#spgnavi li.cnt a {
    color: #CCC;
}
*/
#top #spgnavi .spnin li a,
#info #spgnavi .spnin li.inf a,
#works #spgnavi .spnin li.wrk a,
#exhibition #spgnavi .spnin li.exb a,
#exhibition #spgnavi .spnin li.vdo a,
#press #spgnavi .spnin li.prs a,
#profile #spgnavi .spnin li.prf a,
#contact #spgnavi .spnin li.cnt a,
#spgnavi .spnin li.igm a{
	color: #FFF;
}
	
}
/* end */


/* スマートフォン(768px未満) */ 
@media screen and ( max-width:768px ) {

}
/* end */


/* スマートフォン(768px未満) */ 
@media screen and ( max-width:480px ) {

}
/* end */

/* スマートフォン(320px以下) */ 
@media screen and ( max-width:320px ) {

#spgnavi .spnin ul li {
	margin-bottom: 1.8em;
}

}
/* end */



/*★横位置★*/
/* タブレット(768px以下) */ 
@media only screen and ( orientation:landscape ) {
/*
#spgnavi {
	position: fixed;
	display: none;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	 margin-top: 70px;
	background-color: rgba(239, 239, 239, .8);
	z-index: 99998;
}
*/

}
/* end */


@media only screen and ( orientation:landscape ) {}
/* end */

@media only screen and ( max-height:420px ) and ( orientation:landscape ) {

#spgnavi .spnin {
	position: relative;
	margin-top: 0;
	width: auto;	 
}

#spgnavi .spnin ul li {
    margin-bottom: 43.5px;
}
	
li.ab {}
	
li.ne {}

#spgnavi .spnin ul {
	width: 75%;
	margin: 0 auto;
	text-align: center;
}
	
#spgnavi .spnin ul li {
	display: inline-block;
}	
	
#spgnavi .spnin ul li {
	float: none;
	/*margin-right: 58px;*/
	margin-left: 1em;
	margin-right: 1em;
}

#spgnavi .spnin ul li.abt {
	margin-right: 0;
}
/*
#spgnavi .spnin ul li:last-child {
	margin-right: 0;
}
*/	
#spgnavi .spnin ul li.igm {
	display: block;
	
}
	
}
/* end */

@media only screen and ( max-height:320px ) and ( orientation:landscape ) {
#spgnavi .spnin {
	top: calc(100vh * 0.5 - 50px);
}
	
#spgnavi .spnin ul {
	width: 80%;
}
	
}
/* end */


/*★横位置★*/

/* content
-------------------------------------------------------------------------------- */

#content {
	position: relative;
	/*margin-top: 90px;*/
	width: 1500px;
	margin: 0 auto;
	padding-top: 113px;
	/*letter-spacing: 0.6px;*/
}

/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

#content {
	padding-top: 70px;
	width: auto;
}

}
/* end */ 

/*ページトップへ戻るボタン*/
#gotop {
	position: fixed;
	bottom: 167px;
	left: 217px;
}

/* タブレット(768px以下) */ 
@media screen and ( max-width:768px ) {

#gotop {
	left: 132px;
}

}
/* end */

/* 1440 */
@media screen and (max-width:1499px) and (min-width:1440px) and (orientation:landscape) {
header {
	width: 1440px !important;
}
	
#content {
	width: 1440px !important;
}

}
/* end */
	
/* 1366 */
@media screen and (max-width:1439px) and (min-width:1366px) and (orientation:landscape) {
header {
	width: 1366px !important;
}
	
#content {
	width: 1366px !important;
}

}
/* end */

/* 1280 */
@media screen and (max-width:1365px) and (min-width:1281px) and (orientation:landscape) {
header {
	width: 1280px !important;
}

	#logo .pc-l img {width: 270px;}	
	
ul#gnavi {padding-top: 12px;}	
	
#content {
	width: 1280px !important;
}

}
/* end */


/* 11 */ 
@media screen and (min-height:400px) and (max-height:768px) and (min-width:1152px) and (max-width:1366px) and (orientation:landscape) {

#hwrap {}

#logo {}

#logo img {}

header nav {}

ul#gnavi li {}

#gotop {
	left: 165px;
	bottom: 95px;
}

#gotop img {
	height: 18px;
}
	
}
/* end */


/* footer
-------------------------------------------------------------------------------- */

footer {
/**/
	position: absolute;
	left: 45px;
	bottom: 45px;
	z-index: 1000;

	font-size: 11px;
}

footer small {
	color: #9E9E9E;
}


/* タブレット(768px以下) */ 
@media screen and ( max-width:1280px ) {

footer {
/**/
	left: 21px;
	bottom: 21px;
	font-size: 10px;
}
	
}
/* end */