@charset "utf-8";

/* =============================================================================
   レイアウト
============================================================================= */

/* =============================================================================
   PAGE
============================================================================= */
html {
    touch-action: manipulation;
}
.gallery{
	margin: 0 auto;
	padding: 3vw 0;
	width: 100%;
	max-width: 1400px;
}
.galleryCat{
	position: sticky;
	bottom: 118px;
	margin-top: 32px;
	text-align: center;
}
.galleryCatList{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 8px 24px;
	border-radius: 50vw;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
}

.galleryCat_item{
	margin-left: 2px;
	padding: 4px 8px;
	width: 100%;
	max-width: 150px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	border-bottom: solid 2px transparent;
	white-space: nowrap;
}
.galleryCat_item.is-active{
	color: #d2c7aa;
	border-bottom-color: #d2c7aa;
}
.galleryCat_item:not(.is-active){
	cursor: pointer;
}



.galleryBd{
}
.galleryCassette{
	display: flex;
	flex-wrap: wrap;
	margin: -1px 0 0 -1px;
}
.galleryCassette_item{
	position: relative;
	cursor: pointer;
	margin: 1px 0 0 1px;
	width: calc(100% / 3 - 1px);
}
/*.galleryCassette_item.is-active:focus{
	outline: 2px #d2c7aa solid;
	box-shadow: 0 0 0 2px #d2c7aa;
}*/
.galleryCassette_item:not([data-photos="1"])::before{
	position: absolute;
	right: 8px;
	top: 8px;
	display: inline-block;
	content: "\e14d";
	font-family:'Material Icons Round';
	color: #fff;
}



@media screen and (max-width:959px) {
	.galleryCat_item span{
		display: none;
	}
}

@media print, screen and (min-width:960px) {
	.galleryCat{
		bottom: 3vh;
		margin-top: 3vw;
	}
	.galleryCatList{
		padding: 12px 40px;
		border-radius: 50vw;
	}
	.galleryCat_item{
		margin-left: 2px;
		padding: 8px 16px;
		font-size: 100%;
		line-height: 1.3;
	}
	.galleryCat_item span{
		font-weight: bold;
	}
	.galleryCat_item:not(.is-active):hover{
		opacity: .6;
	}
	.galleryCassette_item{
		width: calc(100% / 5 - 1px);
	}
	.galleryCassette_item:hover{
		opacity: .6;
	}
}



.modalGallery{
}
.modalGallery_description{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 8px;
}
.modalGallery_txt{
	margin-right: 16px;
}
.modalGallery_date{
	flex: none;
	margin-left: auto;
	text-align: right;
	font-size: 1.4rem;
}
.modalGallery_date .m-ico{
	margin-right: 4px;
}
.modalGallery_prev .m-ico{
	margin-right: 4px;
}
.modalGallery_next .m-ico{
	margin-left: 4px;
}
.modalGallery_arrow{
	cursor: pointer;
	position: absolute;
	top: calc(100% + 8px);
	margin: 0;
	padding: 8px 0;
	color: #fff;
	line-height: 1;
	font-size: 2.0rem;
	font-family: "Jost", serif;
	transition: opacity .2s ease-out, visibility .2s ease-out;
}
.modalGallery_arrow[aria-disabled="true"]{
	opacity: 0;
	visibility: hidden;
}
.modalGallery_prev{
	left: 0;
}
.modalGallery_next{
	right: 0;
}

@media print, screen and (min-width:960px) {
	.modalGallery_description{
		padding: 16px 32px;
	}
	.modalGallery_txt{
		margin-right: 32px;
	}
}




#galleryModal{
	padding: 0;
	width: 700px;
	border-radius: 0;
}
#galleryModal .modal-content{
	padding: 0;
}
#galleryModal .slick-prev, #galleryModal .slick-next{
	margin-top: -28px
}