@charset "utf-8";
html{
  scroll-behavior: smooth;
}
/* Top margin for PageTop  */
div.anchor{
	display: block;
	padding-top: 120px;
	margin-top: -120px;
}
.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
div.note-images{
	border-bottom: 1px solid #dfdfdf;
}
#note-article{
	max-width: 960px;
}

.note-images li.quater{
	width: 25%;
	height: 240px;
	margin-bottom: 0;
	overflow: hidden;
}
.note-images li.quater img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery-caption{
	display: block;
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.gallery-caption dt {
	text-align: left;
	margin-bottom: 1rem;
}
.gallery-caption dd {
	text-align: left;
}
.slick-slider {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.slick-slide{
	width: 100%;
	max-width: 960px;
	height: 100%;
}
  .slidebox div{
	width: 100%;
	height: 100%;
  }
.slidebox div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-video{
	width: 100%;
	height: 100%;
	text-align: center;
}
.gallery-video video{
	width: 100%;
	height: 100%;
}
.slick-prev {
	left: 0;
}
.slick-next {
	right: 0;
}
.slick-prev,.slick-next {
	top:105%;
	z-index: 1;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
	color: #998;
	opacity:0.7;
}

.slick-prev:before,.slick-next:before{
	color: #999;
	opacity:1;
}
/* .slidebox .note-txt{
	position: relative;
	margin-top: 8rem;
	z-index: 100;
} */
.slick-dots{
	bottom: -30px;
}
.slick-dots li button:before{
	font-size: 0.4rem;
}
.slide-caption-box{
	top: 20px;
	margin-bottom: 6rem;
}

/* Sllick Lazysizes F.I */
.gallery-item img {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.gallery-item.lazyloaded img.lazyloaded {
  opacity: 1;
}
#note-title{
	margin-bottom: 3rem;
}
.note-txt{
	/* margin-top: 1rem; */
	/* margin-bottom: 6rem; */
	color: #666;
	opacity:1;
}
/* back to page top button */
#page-top{
	place-self:end;
	position:fixed;
	left: calc(100vw - 7em);
	bottom:360px;
	width: 50px;
	height: 50px;
	background: #999;
	border-radius: 50%;
	opacity: 0;
 }
#page-top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page-top a .angleup{
	width: 25px;
	height: 25px;
	filter: brightness(0) saturate(100%) invert(1) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
	position: absolute;
	top: -5px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

		h2{
			/* font-family: 'Noto Sans JP'; */
			font-size: 1.2em;
			font-weight:500;
			letter-spacing: 0.1em;
			line-height: 2.44em;
			margin-top: 0.3em;
			margin-bottom: 0.3em;
		}
		h3{
			/* font-family: 'Noto Sans JP'; */
			font-size: 0.89em;
			font-weight:400;
			letter-spacing: 0.11em;
			line-height: 2.44em;
			margin-top: 0.3em;
			margin-bottom: 0.3em;

		}
		.txt-blank {
			margin-top: 8rem;
		}
		a.archive-link {
			display: flex;
		    justify-content: flex-end;
		    margin-bottom: 3rem;
			font-weight: 500;
			color:black;
		}
		a:hover.archive-link {
			color:silver;
		}

		/* gallery Index Panel*/
		.gallery-index {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			width: 100%;
			max-width: 960px;
			margin-left: auto;
			margin-right:auto;
		}
		.gallery-index li{
			width: 100%;
			aspect-ratio: 2/ 1;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		/* safari hack */
		/* _:lang(x)+_:-webkit-full-screen-document, .gallery-index li {
		  aspect-ratio: 960 / 496;
		} */

		.gallery-index .rectangle{
			grid-column: span 2;
			grid-row: span 1;
		}
		.gallery-index .rectangle2{
			grid-column: span 4;
			grid-row: span 2;
		}
		.gallery-index .cube{
			aspect-ratio: 1 / 1;
			grid-column: span 1;
			grid-row: span 1;
		}
		.gallery-index .cube2{
			aspect-ratio: 1 / 1;
			grid-column: span 2;
			grid-row: span 2;
		}
		.gallery-index li img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		/* Submenu for SVB Archive */
		#submenu{
			position: fixed;
			bottom:0;
			background-color:rgba(255,255,255,0.9);
			width: 100%;
			z-index: 2;
			transition: 0.5s;
		}
		#submenu ul{
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			width: 100%;
			max-width: 960px;
			margin: 0.2em auto 1em;
		}
		#submenu li{
			margin:10px;
		}
		#submenu img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		/* current page setting of submenu*/
		.submenu_hover img{
			filter: brightness(0) drop-shadow(3px 3px 2px #333) ;
			transform: scale(1.1,1.1) translateY(-3px);
		}
		/* submenu animation */
		.image_mouseover_1 img {
			display: block;
			transition-duration: 0.5s;
			opacity: 0.4;
		}
		.image_mouseover_1 img:hover {
			transform: scale(1.2,1.2) translateY(-5px);
			transition-duration: 0.5s;
			opacity: 1;
		}

		/*---------- fancybox css ----------*/
		/* fancybox の inline要素の背景色 */
		.fancybox-black .fancybox-content{
		    background: #000;
		}
		/* fancybox モーダルの背景色 */
		.fancybox-black .fancybox-bg{
		    background: #300;
		}
		.gallery-2column{
			display: block;
			align-content: center;


		}
		.gallery-inlin-wrap{
			display: grid;
			grid-template-columns:1fr 2fr;
		}
		.gallery-inlin-wrap div{
			display: block;
			width: auto;
			max-width: 960px;
			height: 100%;
		}
		.gallery-leftcolumn{
			padding-right:4rem;
			background: #fff;
		}
		.gallery-rightcolumn{
			overflow: hidden;
		}
		.gallery-inlin-wrap div img{
		  display: block;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}
	/* サムネイルのキャプションを非表示 */
		.item-content{
			position: relative;
		}
		.item-content .small-caption{
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			 width: 100%;
			 color: white;
			font-size: 2.0rem;
			line-height: 1.5em;
			text-align: center;
			opacity: 0;
			-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
			text-indent: 0;
		}
		.item-content:hover .small-caption{
			opacity: 1;
		}
		.item-content:hover {
			background-color: black;
		}
		.item-content:hover img{
			opacity: 0.5;
		}
		/* Creative Piece Bunner */
		div.creative_piece{
			position:relative;
			display: block;
			width:100%;
			height:100%;
			max-width: 960px;
			overflow: hidden;
			margin-bottom: 2rem;
		}
		div.creative_piece img{
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
		div.creative_piece_caption h2{
			display: block;
			position: absolute;
			top: 0%;
			left: 1%;
			color: white;
			text-align: left;
			font-size: 3rem;
			/* transform: translate(2%,-50%); */
		}

/* for Narrow Height Note PC  */
@media only screen
		and (max-height: 870px) {
		div.anchor{
			display: block;
			padding-top: 40px;
			margin-top: -40px;
		}

		div.pagetop{
			display: block;
			padding-top: 120px;
			margin-top: -120px;
		}

		#submenu.hide {
		  transform:translateY(150px);
		}
		#menu{
			transition: 0.5s;
		}
		#menu.hide{
			transform:translateY(-150px);
		}

}
/*  Slide Position for Slick  */
@media only screen
	and (min-width: 990px) {
	#note-title{
		width: 100%;
		max-width: 960px;
	}

	.note-txt{
		padding-left: 0;
	}
}



/* for iPhone */
@media only screen
	and (max-width: 767px) {

/* Sub menu  for iPhone */
	#submenu{
		transition: 0.5s;	
	} 
	#submenu ul{
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		margin: 1rem 0 1.5rem;
	}
	#submenu li{
		margin:0;
		text-align: center;
	}

	#submenu a{
		display: block;
		width: 100%;
		font-size: 0.7em;
		padding-top: 0.4em;
		padding-bottom: 0.5em;
		color: white;
		background-color: #aaa;
		border: 1px solid white;
		border-radius: 1px;
	}
	#submenu a:before{
		content: attr(data-menu);
	}
	#submenu a:hover{
		background-color: #666;
	}
	#submenu img{
		display: none;
	}
	#submenu .submenu_hover  a{
		background-color: #333;
	}

	#submenu.hide {
	  transform:translateY(150px);
	}
	/* back to pagetop button for iPhone */
	#page-top{
		left: calc(100vw - 3.5em);
		bottom: 20px;
		width: 40px;
		height: 40px;
		transition: 0.5s;	
	}
	#page-top a{
		width: 40px;
		height: 40px;
	}
	#page-top a::before{
		font-size: 20px;
		width: 20px;
		height: 20px;
		top: -4px;
	}
	#page-top.hide{
		transform:translateY(-120px);
	}
	a.archive-link {
		font-size: 0.67em;
		margin-right:0.89em;
	}
	/* iPhone時の各Indexのキャプション*/
	.item-content .small-caption{
		top:auto;
		bottom:0;
		transform: translate(-50%,0%);
		font-size: 0.7em;
		opacity:1;
		background-color: rgba(0,0,0,0.4);
	}
	/* iPhone時はデバイス幅から Slick表示のアクセプト比を算出する */
	.slidebox {
		  max-width: 767px;
		  /* max-height: calc(100vw / 2); */
	}
	
	/* Slick スライドのナビゲーションボタン */
	.slick-prev {
  		left: 10px;
	}
	.slick-next {
  		right: 10px;
	}
	.slick-dots{
  		bottom: calc( 100% - 115% );
	}
	.slick-dots li {
		width:10px;
	}
	.slick-prev,.slick-next {
		top: 110%;
	}
	.slide-caption-box{
		margin-left:auto;
		margin-right: auto;
		width: 95%;
	}
	div.creative_piece{
		margin-bottom: 1rem;
	}

	div.creative_piece_caption h2{
		font-size: 1.7rem;
		line-height: 2rem;
		margin:0;
	}

}

/* for iPhone Landscape */
@media screen and (max-width:767px) and (orientation: landscape){
	#submenu ul{
		grid-template-columns: repeat(6, 1fr);
		width: 100%;
		margin: 1rem 0 1.5rem;
	}

	#submenu a{
		font-size: 0.7em;
		border-radius: 2px;
	}
	.slidebox video {
		  max-width: 480px;
	}

	.slick-dots{
		 bottom: calc( 100% - 110% );
	}
	.slick-prev,.slick-next {
		top: 108%;
	}
}