@charset "UTF-8";
/* CSS Document */

/***
* common_sp.css
*/

@media only print, only screen and (min-width: 18.75em){
	
.tab,
.pc,
.pcw_pc,
.pc_tab{
	display:none;
}

.sp{
	display:block;
}

a{
  -webkit-tap-highlight-color: transparent;
}

.hover:hover{
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}

sub{
	top:-1.6vw;
  left: 0.6vw;
	font-size: 2.5vw;
	letter-spacing:-0.02em;
}

/* header */

#header{
  width: 100%;
  position: fixed;
  font-size: 5.625vw;
  line-height: 1.2;
  letter-spacing: 0.02em;
  z-index: 9999;
}

#headerInnerSp{
  padding: 10px 0 14px;
  position: relative;
}

#logo{
  width: 90px;
  margin: 0 auto;
  position: relative;
  top: 10px;
/*
  position: absolute;
  margin-left: -10vw;
  left: 50%;
  z-index: 9999;
*/
}

#header ul{
  padding: 9px 20px;
}

/* btnMenu */

.btnMenu{
	display: block;
	width: 16px;
	height: 18px;
	padding:21px 18px 15px;
	color: #000;
	font-size: 1.5em;
	cursor: pointer;
	position: fixed;
	top:-8px;
	right:0;
	z-index: 6666;
}

.bars.active:before, .bars.active:after{
  background: #000;
	top: 0;
	width: 100%;
	user-select: none;
  animation: bar1 .8s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.bars.active:after{
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.bars{
	width: 100%;
	height: 2px;
	margin-top: .3em;
	background: #000;
	position: relative;
	display: block;
  -moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

.bars:before {
	top: -5px;
  display: none;
}

.bars:after {
  top: 0.5px;
}

.bars:before, .bars:after {
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	left: 0;
	content: '';
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
  animation: bar2 .8s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

@keyframes bar1 {
  from {
      transform: rotate(90deg);
  }
  to {
      transform: rotate(180deg);
  }
}

@keyframes bar2 {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(90deg);
  }
}

#closeOverlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
  left:0;
  z-index:3333;
  display: none;
  background: #fff;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#about{
  width: 100%;
  height: 100%;
	position:fixed;
  top: 0;
	z-index:3333;
  background: #fff;
	display:none;
  overflow-x: hidden;
	overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#about::-webkit-scrollbar {
  display:none;
}

#aboutInner{
  margin-top: 75px;
  padding:0 15px 40px;
  background: #ff00;
}

#aboutInner h2{
  margin-bottom: 30px;
  font-size: 5.313vw;
  line-height: 1.2;
}

#aboutInner h3{
  margin-bottom: 50px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 4.063vw;
  line-height: 1.6;
}

#aboutInner h4{
  margin-bottom: 30px;
  font-size: 5.313vw;
}

#artistList{
  margin-top: 40px;
  font-size: 4.063vw;
  line-height: 1.8;
}

#artistList li a{
  text-decoration: underline;
}

#artistList li:hover a{
  text-decoration: none;
}

.aboutCopy{
  padding-top: 40px;
  font-size: 14px;
}

@keyframes fadein{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes fadeout{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}

#exhibitionNav{
  padding: 20px 0;
}

#exhibitionNav{
  font-family:'Neue Haas Grotesk DispW0566MdI';
  font-size: 17px;
  line-height: 0.8;
  letter-spacing: 0.01em;
}

.exhibitionList{
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.exhibitionList h2{
  margin: 0 0 10px 12px;
  font-family:'Neue Haas Grotesk DispW0566MdI';
}

.exhibitionList h2::before{
  content: '●';
  font-size: 17px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.exhibitionList h4{
  font-family:'Neue Haas Grotesk DispW0566MdI';
} 

.accordion dt{
  padding: 10px 0 10px;
}

.exhibitionListDetail{
  position: relative;
}

.exhibitionListImg img{
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.accordion dt{
  padding: 0 15px 15px;
  cursor:pointer;
}

.accordion dd{
  display: block;
}

.exhibitionListDetail .btnClose{
  margin-bottom: 40px;
  padding: 15px 0 0;
  font-family:'Neue Haas Grotesk DispW0566MdI';
  font-size: 17px;
  line-height: 1.2;
  display: inline-block;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #000;
  display: none;
}

#btnPageTop{
  position: fixed;
  font-family:'Neue Haas Grotesk DispW0566MdI';
  top: 55px;
  right: 0;
  padding: 15px;
}

#btnPageTop span::after{
  content: '';
  width: calc(100% - 30px);
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

/* main */

#main{
  padding: 60px 0 80px;
}

#exhbitionImage{
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
}

#exhbitionImage li{
  width: auto;
  height: 100%;
  margin-right: 20px;
}

#exhbitionImage img{
  width: auto;
  height: 70vw;
}

#exhbitionDetail{
  max-width: 100%;
  margin: 0 auto 30px;
  padding: 0 15px 20px;
  border-bottom: 1.5px solid #000;
}

#exhbitionTtl h2{
  margin-bottom: 20px;
  font-size: 5.625vw;
}

#exhbitionTtl h3{
  margin-bottom: 20px;
  font-size: 4.688vw;
  line-height: 1.2;
  font-family:'Neue Haas Grotesk DispW0566MdI';
}

#exhbitionTtl h4{
  font-size: 4.063vw;
}

#exhbitionTtl{
  width: auto;
  float: none;
  margin-bottom: 30px;
}

#exhbitionTxt{
  width: auto;
  float: none;
  line-height: 1.6;
  text-align: left;
}

#exhbitionTxtEn{
  font-size: 3.750vw;
  padding-bottom: 0;
  border-bottom: none;
  border-bottom: 1px solid #000;
}

#exhbitionTxtJp{
  padding-top: 20px;
  font-size: 3.438vw;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
}

#exhbitionTxtEn small,
#exhbitionTxtJp small{
  margin-bottom: 20px;
  font-size: 11px;
  line-height: 1.4;
  display: block;
}

#exhbitionTxtEn span,
#exhbitionTxtJp span{
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.4;
  display: block;
}

#exhbitionSub{
  padding-top: 20px;
  font-size: 2.5vw;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
}

#galleryImg{
  width: 100%;
  overflow: hidden;
}

#galleryImg ul{
  width: calc(100% - 40px);
  margin-bottom: 20px;
  padding: 0 20px;
}

#galleryImg li{
  float: none;
  width: 100%;
  margin: 0 0 15px 0;
}

#gallery a{
  font-size: 4.063vw;
  line-height: 1.4;
  position: relative;
  left: 20px;
}

#gallery a span{
  font-family:'Neue Haas Grotesk DispW0566MdI';
}

/* footer */
.copyright{
  position: absolute;
  bottom: 25px;
  left: 15px;
  font-size: 14px;
}

.btnViewMore{
  margin-bottom: 30px;
  font-size: 12px;
  display: block;
}

}