@charset "UTF-8";

header #global{
	border:none;
}


@media(min-width:768px){
#artproject .content{
  padding-top: 3.5%!important
}
}

/*=====================================================================
loading
=====================================================================*/
#loading{
	background-color:#fff;
	color:#fff;
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	text-align:center;
	display: table;
	top:0;
}

#loading img{
	margin-bottom:20px;
}

#loadIn{
 display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#loading #loederIcon{
	margin-top:20px;
}

.spinner {
  margin: 0 auto ;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #5475cc;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@media(max-width:480px){
	#loading img{
		height:40px;
	}
}

/*=====================================================================
mainvisual
=====================================================================*/
#mainvisual li{
	text-align:center!important;
}

#mainvisual a{
	display: block;
}

#mainvisual div{
	vertical-align:bottom!important;
}

/*#mainvisual img{
	margin: 0 auto;
  margin: 0 5%;
}*/

#mainvisual .slick-center{
}

#thumbnailNav{
	display: flex;
}

#thumbnailNav > div{
	flex: 1;
}

#thumbnailNav > div:hover{
	cursor: pointer;
}

#hallnavi #SP30 a{
	display: flex;
	align-items: center;
}

#hallnavi #SP30 p{
	background: none;
	padding-left: 0;
}

#hallnavi #SP30 .pic{
	display: block;
}


@media(min-width:480px){
  #mainvisual .slick-slide {
      margin:0 40px;
  }
}


@media(max-width:600px){
	/*#mainvisual{
		margin-top:-10%;
	}

	#hallnavi{
		margin-top:-10%;
	}
	
	#mainviusal_right{
		display:none;
	}*/
}

/*@media(min-width:601px){
	#mainvisual{
		display:flex;
		display:-webkit-flex;
		justify-content:center;
	}

	#mainvisual img{
		width:100%;
	}

	#mainvisual_tower{
		width:33.333%;
	}

	#mainviusal_right{
		width:66.666%;
	}

	#mainviusal_right div:first-child img:first-child{
		width:47.032%;
	}

	#mainviusal_right div:first-child img:last-child{
		width:52.968%;
	}

	#mainviusal_right div:last-child img{
		width:50%;
	}
	
	#hallnavi #SP30 p{
		padding-left: 10px;
	}

}

@media(min-width:961px){
	#mainvisual{
		max-width:1366px;
		margin:0 auto;
	}
}*/

@media(min-width:960px){
	#thumbnailNav{
		width: 60%;
		margin: 20px auto;
	}
}

/*=====================================================================
hallnavi
=====================================================================*/
#hallnavi{
	background-color:#000;
	padding:20px 0;
	position: relative;
	background: #000;
}

#hallnavi ul{
	display: flex;
	flex-direction: column;
}

#hallnavi a{
	color:#fff;
	text-decoration:none;
}

#hallnavi li p{
	background:url(../common/images/mark.png) no-repeat left 4px;
	background-size:8px;
	padding-left:18px;
}

#hallnavi span{
	display:block;
	font-size:1.2rem;
}

@media(max-width:600px){
	#hallnavi li{
		align-items: center;
		margin-bottom:8px;
	}

	#hallnavi li a{
		display:flex;
		display:-webkit-flex;
		align-items:center;
	}

	#hallnavi li .pic{
		width:30%;
	}

	#hallnavi li p{
		width:65%;
		margin-left:5%;
		text-align:left;
	}

	#hallnavi li p img{
		height:17px;
	}

}

@media(min-width:601px){
	#hallnavi{
		padding:10px 0;
		/*margin-top:-5px;*/
	}
	
	#hallnavi ul{
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	#hallnavi li{
		display:inline-block;
	}
	
	#hallnavi li{
		margin-right: 3%;
	}

	#hallnavi li:last-child{
		margin-right: 0;
	}
	
	#hallnavi li p{
		text-align:left;
	}
	
	#hallnavi .pic{
		display:none;
	}

}

/*=====================================================================
osusume
=====================================================================*/
#osusume .PageTtl2{
	margin:15px 0;
}

#osusume .category{
	text-align:center;
	color:#fff;
	margin-bottom:20px;
}

#osusume .category a{
	color:#fff;
	display:inline-block;
}

#osusume .category span{
	font-size:85%;
}

#osusume .category .hall{
	border-bottom:solid 1px #fff;
	display:inline-block;
	font-weight:bold;
}

#osusume .block{
	background:url(../images/bg_hall.jpg) no-repeat center top;
	background-size:cover;
	padding-top:20px;
	padding-bottom:20px;
}

#osusume #hall{
	background-image:url(../images/bg_hall.jpg);
}

#osusume #theatre{
	background-image:url(../images/bg_theatre.jpg);
}

#osusume #gallery{
	background-image:url(../images/bg_gallery.jpg);
}

#osusume article{
	background-color:#fff;
	padding:3%;
}

#osusume .ttl{
	margin-bottom:5px;
}

#osusumeList{
	position:relative;
}

#osusume .triangleCover{
	position:absolute;
	top: 0;
	width:100%;
}

#osusume .triangle{
	width: 0;
	height:0;
	border-top: 15px solid #fff;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	margin:0 auto;
}

@media(min-width:481px){
	#osusume .PageTtl2 .ja{
		font-size:2.6rem;
	}
}

@media(max-width:767px){
	#osusume .category .hall{
		font-size:1.8rem;
	}

	#osusume h3{
		font-weight:bold;
	}
	
	#osusume .catch{
		font-size:1.2rem;
	}
}

@media(min-width:768px){
	#osusume .category .hall{
		font-size:3.0rem;
		white-space:nowrap;
	}

	#osusume article .pic{
		width:50%;
	}

	/*

	#osusume .block{
		padding:5%;
		display:flex;
		display:-webkit-flex;
		align-items:center;
	}
	
	
	#osusume .category{
		margin-right:5%;
	}
	
	#osusume #theatre{
		flex-direction : row-reverse;
	}

	#osusume #theatre .category{
		margin-right:0;
		margin-left:5%;
	}*/

}


/*=====================================================================
todays
=====================================================================*/
#todays{
	background-color:#5475cc;
	color:#fff;
	padding-top:20px;
	padding-bottom:20px;
}

#todays h2{
	text-align:center;
	font-size:2.0rem;
	margin-bottom:5px;
	font-weight: bold;
}

#todays h2 span{
	color:#c9d3ef;
}

#todays h3{
	text-align:center;
	font-size:120%;
	white-space:nowrap;
}

#todays #kaikan{
	text-align:center;
	font-weight: bold;
	font-size: 2.0rem;
	white-space: nowrap;
}

#todays #kaikan span{
	font-size:80%;
}

#todays a{
	color:#fff;
	text-decoration:none;
}

#todays dl{
	margin-bottom:10px;
}

#todays dl li{
	text-indent:-1em;
	padding-left:1em;
	margin-left:5px;
}

#todays dl li:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f105';
  margin-right:5px;
}

#todays dl li.nonlink{
	text-indent:inherit;
	padding-left:0;
	margin-left:0;
}

#todays dl li.nonlink:before{
  content: '';
}

#todays dl li span{
	display:none;
}

#todays dl li.crit span{
	display:inline;
}

#todays dl li.crit span:after{
	content:"　";
}

#todays dl li .promenade{
	display:inline;
}

#todays .label{
	background-color:#c9d3ef;
	color:#5475cc;
	margin-bottom:5px;
}

#todays .btn a{
	background-color:#fff;
	color:#5475cc;
}

#todays #kaikan span{
	display:block;
}

#todays .slick-dots li.slick-active button:before{
	color:#fff;
}

#todays .slick-dots li button::before{
	color:#fff;
}

	
.close #kaikan{
	margin-bottom:0!important;
}

@media(min-width:481px){
	#todays #kaikan span{
		margin-left:5px;
	}
}

@media(max-width:767px){
	#todays #kaikan{
		margin-bottom:10px;
	}
}

@media(min-width:768px){
	#todays > .content{
		display:flex;
		display:-webkit-flex;
		justify-content:center;
		max-width:1200px;
		flex-shrink:0;
	}

	#todays #day{
		border:solid 1px #fff;
		padding:15px;
		margin-right:3%;
		display:flex;
		display:-webkit-flex;
		align-items:center;
	}

	#todays #day > div{
		margin:0 auto;
	}

	#todays #day h2{
		white-space:nowrap;
	}

	#todays #todaysDL{
		width:80%;
	}
	
	#todays #todaysDL dl{
		float:left;
		width:48%;
		margin-right:2%;
	}

	#todays #todaysDL dl:nth-child(even){
		float:right;
	}

	.close > .content{
		display:block!important;
		text-align:center!important;
	}
	
	.close #day{
		padding:0!important;
		border:none!important;
		margin-right:0!important;
	}

}

/*=====================================================================
news
=====================================================================*/
#news{
	border:solid 1px #ddd;
	padding-bottom:20px;
	margin-top:20px;
	border:none;
}

#news dl:nth-of-type(n+3){
	display:none;
}

#news h2{
	text-align:center;
	margin-bottom:20px;
	font-size:2.0rem;
}

#news h2 span{
	color:#DA0003;
}

#news dl{
	margin-bottom:10px;
	/*border-bottom:solid 1px #ddd;
	padding-bottom:10px;*/
}

#news dt span{
	margin-right:5px;
	font-weight:bold;
}

#news .btn span{
	padding-top:0;
	padding-bottom:0;
}

#news .labelBlock{
	display:inline-block;
}

@media(max-width:767px){
	#news h2{
		margin-bottom:0;
	}
	
	#news .m-t-10{
		margin-top:0;
	}

	#news #newslist{
		border-top:solid 1px #ddd;
		padding-top:20px;
		margin-top:20px;
	}
}

@media(min-width:768px){
	#news{
		display:flex;
		display:-webkit-flex;
		justify-content:center;
		align-items:center;
	}

	#news h2{
		margin-bottom:0;
		white-space: nowrap;
	}

	#newslist{
		margin-left:3%;
		padding-left:3%;
		border-left:solid 1px #ddd;
	}

}

/*=====================================================================
bannerBlock
=====================================================================*/
#bannerBlock{
	background-color:#FFECC7;
	padding:20px 0;
}

#bannerBlock .content > div:last-child > div:last-child{
	margin-bottom: 0;
}

#bannerBlock2{
	background-color:#edf1f4;
	padding:20px 0;
}

#bnr_archive:hover{
  cursor: pointer;
  opacity: 70%;
}


@media(min-width:481px){
	#bannerBlock{
		padding:3.5% 0;
	}
}

/*=====================================================================
sankaBlock
=====================================================================*/
#sankaBlock{
	margin-bottom:20px;
}

#sankaBlock .mainvisual img{
	vertical-align: top;
}

#sankaBlock .labelBlock{
	display:none;
}

#sankaBlock a{
	text-decoration:none;
}

#sankaBlock a:hover{
	text-decoration:underline;
}

#sankaBlock > div{
	position:relative;
}

#sankaBlock .block{
	padding:15px 5% 5% 5%;
}

#sankaBlock .block > ul > li a{
	text-indent:-1em;
	padding-left:1em;
	margin-left:5px;
}

#sankaBlock .block > ul > li:last-child{
	margin-bottom:2em;
}

#sankaBlock .block > ul > li a{
	display:block;
}

#sankaBlock ul li > a:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f105';
	position:absolute;
}


#sankaBlock .block > ul > li span{
	font-size:70%;
	line-height:1.6;
	/*margin-left:1.5em;*/
}

#sankaBlock .block > ul > li span:after{
	content:"\A";
	white-space:pre;
}

#sankaBlock .btnMore{
	text-align:center;
	position:absolute;
	bottom:0;
	width:100%;
	padding:5px 0;
	font-weight:bold;
}

#sankaBlock #play{
	background-color:#fffaf1;
}

#sankaBlock #local{
	background-color:#fef9e0;
}

#sankaBlock #play .btnMore{
	background-color:#e8e0d1;
}

#sankaBlock #local .btnMore{
	background-color:#fff3b2;
}


@media(max-width:600px){
	#sankaBlock #play{
		margin-bottom:20px;
	}
}

@media(min-width:601px){
	#sankaBlock{
		display:flex;
		display:-webkit-flex;
	}

	#sankaBlock > div{
		width:50%;
	}
}

/*=====================================================================
bnrBlock
=====================================================================*/
@media(max-width:601px){
	#bnrBlock li,
	#bnrBlock2 li{
		margin-bottom:10px;
	}
	#bnrBlock2 li:nth-child(n+1){
		width: 48%;
		display: inline-block;
	}
	#bnrBlock2 li:nth-child(n+1):nth-child(odd){
		margin-right: 2%;
	}
}

@media(min-width:601px){
	#bnrBlock,
	#bnrBlock2{
		display:flex;
		display:-webkit-flex;
		/*justify-content:center;*/
	}

	#bnrBlock li{
		flex:1
	}

	#bnrBlock2{
		flex-wrap: wrap;
		margin-left: -1%;
		margin-right: -1%;
	}
	
	#bnrBlock2 li{
		width: 23%;
		margin-bottom: 2%;
	}

	
	#bnrBlock li{
		margin-bottom:2%;
		max-width:50%;
	}
	
	#bnrBlock li:nth-child(2){
		margin-left:2%;
	}
	
	#bnrBlock2 li{
		margin-right:1%;
		margin-left:1%;
	}
}

/*=====================================================================
OS movieBlock
=====================================================================*/
#movieBlock{
  background-color: #d9eaf7;
  padding: 3.5% 0;
}

#movieBlock .column4 >div .pic{
  position: relative;
}

#movieBlock .column4 >div .pic .cover{
	position:absolute;
	opacity:0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#movieBlock .column4 >div .pic .cover img{
  display: block;
}

.featherlight-iframe .featherlight-content{
  max-width: none;
  background: none;
  margin: 0;
  padding: 0;
}

.featherlight-iframe .featherlight-inner{
  display:block;
  border:none;
  width:100vw;
  height:56vw;
}

@media(min-width:768px){
  .featherlight-iframe .featherlight-inner{
    width:70vw;
    height:39vw;
  }
}

/*=====================================================================
OS sponsorfooter
=====================================================================*/
#sponsorfooter{
	margin-top:40px;
	text-align:center;
	/*max-width: 162px;*/

}

#sponsorfooter ul{
	margin:0 auto;
  margin-bottom: 10px;
}

#sponsorfooter img{
	max-height: 50px;
}

.slick-slide img{
  display: inline-block;
}

.PageTtl2{
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}

.PageTtl2:before, .PageTtl2:after{
  display: none;
}
  

.artproject_bnr {
	width: 50%;
	margin: 0 auto 8.5%;
}