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

.st-pagelink{
	overflow:hidden;
	height:0;
	font-size:0;
	}

#infscr-loading{
	overflow:hidden;
	height:0;
	font-size:0;
	}
#infscr-loading.off{
	display:none!important;
	}
#infscr-loading img{
	display:none;
	}
		
@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.0; }
}

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.0; } 
}

#infscr-loading::after{
  position:fixed;
  content:"";
  left:50%;
  top:50%;
  margin-top:-15px;
  margin-left:-17px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  border: 2px solid #fff;
  -webkit-animation: ball-scale-ripple 1.5s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
          animation: ball-scale-ripple 1.5s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  }

	
#cboxClose{
	opacity:0;
	transition:500ms;
	-webkit-transition:500ms;
	}
#cboxClose.on{ 
	opacity:1;
	transition:800ms;
	-webkit-transition:800ms;
	}
/*header,
footer,
#contents {
	transition:filter 600ms;
	-webkit-transition:filter 600ms;
	}
header.filter,
footer.filter,
#contents.filter{
	-webkit-filter: blur(9px);
	-moz-filter: blur(9px);
	-ms-filter: blur(9px);
	filter: blur(9px);
	transition: 600ms;
	-webkit-transition: 600ms;
	}*/
	
#contents{
	background-color:#707070;
	}
	


.scrollin {
    opacity : 0;
    }	
 
.scrollin.on {
    opacity : 1;
    transition :  opacity 1200ms;
    -webkit-transition : opacity 1200ms;
    }

.grid .item:nth-child(-n+12){
    opacity : 1;
	}
	
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
	
	.item-content img{
		width:100%;
		}

footer{
	margin:0;
	}
	
	
.grid .item{
	float:left;
	padding:1px;
	box-sizing:border-box;
	}
/*
.grid .item1,
.grid .item7{
	width:100%;
	}
.grid .item2,
.grid .item3,
.grid .item8,
.grid .item9{
	width:50%;
	}
.grid .item4,
.grid .item5,
.grid .item6,
.grid .item10,
.grid .item11,
.grid .item12{
	width:33.333333%;
	}
*/

.grid .item:first-child{
	width:100%;
	}
.grid .item:nth-of-type(2),
.grid .item:nth-of-type(3){
	width:50%;
	}
	
.grid .item:nth-child(n + 4) {
	width:33.333333%;
	}
	
.grid .item img{
	width:100%;
	}

/* pc */
@media screen and (min-width: 801px),screen and (orientation: landscape), print {

	
#contents {
	margin-top: 93px;
	}
	#movie .pc > a{
		display:block;
		width:50%;
		height:690px;
		color:#fff;
		line-height:1.4em;
		float:left;
		display: flex;
		text-align:center;
		justify-content: center;
		align-items: center;
		}
	#movie .pc > a{
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center;
		outline:none;
		}
	#movie .pc > a:nth-of-type(1){
		background-image:url(../../images/gallery/movie1.jpg);
		}
	#movie .pc > a:nth-of-type(2){
		background-image:url(../../images/gallery/movie2.jpg);
		}
	#movie .pc > a p:nth-of-type(1){
		position: relative;
		display: inline-block;
		padding: 55px 0;
		box-sizing: border-box;
		}
		#movie .pc > a p:nth-of-type(1)::before,
		#movie .pc > a p:nth-of-type(1)::after{
			content: "";
			position: absolute;
			width: 1px;
			height: 30px;
			/*-webkit-transform: scaleY(0);*/
			background: rgba(255,255,255,0.5);
			left: 50%;
			margin-left: -1px;
			}
		#movie .pc > a p:nth-of-type(1)::before{
			top:0;
			}
		#movie .pc > a p:nth-of-type(1)::after{
			bottom:0;
			}
	#movie .pc > a p:nth-of-type(2){
		margin-top:45px;
		}
#movie_full video,
#movie_full2 video{
	width:100%;
	height: 100%;
	}
	

	
	
}

/* sp =============================================================================================*/
@media only screen and (max-width: 800px) and (orientation: portrait) {

	
#contents {
	overflow:hidden;
	}
	
	
	#movie .sp > a{
		display:block;
		width:100%;
		height:40vh;
		color:#fff;
		line-height:1.4em;
		display: flex;
		text-align:center;
		justify-content: center;
		align-items: center;
		}
	#movie .sp > a{
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center;
		outline:none;
		}
	#movie .sp > a:nth-of-type(1){
		background-image:url(../../images/gallery/movie1.jpg);
		}
	#movie .sp > a:nth-of-type(2){
		background-image:url(../../images/gallery/movie2.jpg);
		}
		#movie .sp > a div{
			position:relative;
			}
		#movie .sp > a div::after{
			position:absolute;
			content:"";
			width:30px;
			height:30px;
			background-image:url(../../images/gallery/movie_play_btn_sp.png);
			background-size:cover;
			left:50%;
			margin-left:-15px;
			top:100%;
			margin-top:20px;
			}
		#movie .sp > a p{
			position: relative;
			display: inline-block;
			padding: 15px 30px;
			box-sizing: border-box;
			}
			#movie .sp > a p::before,
			#movie .sp > a p::after{
				content: "";
				position: absolute;
				width: 1px;
				height: 100%;
				background: rgba(255,255,255,0.5);
				top: 0;
				}
			#movie .sp > a p::before{
				left: 0;
				}
			#movie .sp > a p::after{
				right: 0;
				}	
		
}