@charset "utf-8";


.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	transition: 0.15s;
	animation: open 0.15s;
}
@keyframes open {
	from {
		opacity: 0;
		pointer-events: none;
	}
	to {
		opacity: 1;
		pointer-events: auto;
	}
}

.modal.is-close {
	opacity: 0;
	pointer-events: none;
}

.modal.is-active {
	opacity: 1;
	pointer-events: auto;

}
.modal .close{
	position: absolute;
	top: 3vw;
	right: 3vw;
	z-index: 1;
	border: none;
	background-color: transparent;
	cursor: pointer;
}
.modal .close::before {
	content: '×';
	font-size: 5rem;
	color: #000;
}
.modal .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	border: none;
	background-color: #000;
	opacity: 0.7;
	cursor: pointer;
}
.modal .modal-body {
	width: 80%;
	height: 80%;
	background-color: #000;
	z-index: 11;
	padding: 40px;
	text-align: center;
}
.modal .modal-body .splide {
	width: 100%;
	height: 100%;
}
.modal .modal-body .splide__track {
	width: 100%;
	height: 100%;
}
.modal .modal-body .splide__slide {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.modal .modal-body .splide__slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
}
.modal .modal-body .splide__slide p {
	position: absolute;
	bottom: 10px;
	left: 50%;
	padding-left: 5px;
	padding-right: 5px;
	background: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	transform: translate(-50%);
}
@media screen and (max-width: 650px){
	.modal .modal-body .splide__slide p {
		width: 80%;
	}
}
.wrap {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-flow: row dense;
	gap: 10px 10px;
}
.item-g img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumbnails .thumbnail {
	overflow: hidden;
	cursor: pointer;
}
.thumbnails .thumbnail:hover {
	transform: translateY(-20px);
	transition: 0.5s;
	box-shadow: 0 3px 10px 0 #333;
	cursor: pointer;
}
body.modal-active:hover {
	pointer-events: none;
}
body.modal-active .is-active {
	pointer-events: auto;
}
.gallery h3 {
	font-size: 26px; font-size: 2.6rem;
	text-align: center;
	margin-top: 20px;
}
.gallery h3 span {
	font-size: 14px; font-size: 1.4rem;
	color: #3B3838;
	display: block;
}

.gallery h3 span.hd-en-01 {
	font-family: "Oswald";
	font-size: 3rem;
	line-height: 0.9;
}

.gallery h3 span.hd-jp-01 {
	font-family: "Noto Sans JP";
	font-size: 1.2rem;
}
.gallery-s-1 {
	margin-bottom: 20px;
}
h3.gallery-title {
	display: block;
	border: 1px solid #BFBFBF;
	margin: 1em 0 0.5em 0;
	padding: 30px 0 30px;
}
footer {
	position: relative;
}

@media (max-width: 520px) {
	.top h3 { padding-bottom: 10px; }
}

.item-c1r1 {grid-column-end: span 1; grid-row-end: span 1;}
.item-c2r1 {grid-column-end: span 2; grid-row-end: span 1;}
.item-c3r1 {grid-column-end: span 3; grid-row-end: span 1;}
.item-c4r1 {grid-column-end: span 4; grid-row-end: span 1;}
.item-c5r1 {grid-column-end: span 5; grid-row-end: span 1;}
.item-c6r1 {grid-column-end: span 6; grid-row-end: span 1;}
.item-c7r1 {grid-column-end: span 7; grid-row-end: span 1;}
.item-c8r1 {grid-column-end: span 8; grid-row-end: span 1;}
.item-c9r1 {grid-column-end: span 9; grid-row-end: span 1;}
.item-c10r1 {grid-column-end: span 10; grid-row-end: span 1;}
.item-c11r1 {grid-column-end: span 11; grid-row-end: span 1;}
.item-c12r1 {grid-column-end: span 12; grid-row-end: span 1;}

.item-c1r2 {grid-column-end: span 1; grid-row-end: span 2;}
.item-c2r2 {grid-column-end: span 2; grid-row-end: span 2;}
.item-c3r2 {grid-column-end: span 3; grid-row-end: span 2;}
.item-c4r2 {grid-column-end: span 4; grid-row-end: span 2;}
.item-c5r2 {grid-column-end: span 5; grid-row-end: span 2;}
.item-c6r2 {grid-column-end: span 6; grid-row-end: span 2;}
.item-c7r2 {grid-column-end: span 7; grid-row-end: span 2;}
.item-c8r2 {grid-column-end: span 8; grid-row-end: span 2;}
.item-c9r2 {grid-column-end: span 9; grid-row-end: span 2;}
.item-c10r2 {grid-column-end: span 10; grid-row-end: span 2;}
.item-c11r2 {grid-column-end: span 11; grid-row-end: span 2;}
.item-c12r2 {grid-column-end: span 12; grid-row-end: span 2;}

@media screen and (min-width: 768px;){
	.item-c1r1-md {grid-column-end: span 1; grid-row-end: span 1;}
	.item-c2r1-md {grid-column-end: span 2; grid-row-end: span 1;}
	.item-c3r1-md {grid-column-end: span 3; grid-row-end: span 1;}
	.item-c4r1-md {grid-column-end: span 4; grid-row-end: span 1;}
	.item-c5r1-md {grid-column-end: span 5; grid-row-end: span 1;}
	.item-c6r1-md {grid-column-end: span 6; grid-row-end: span 1;}
	.item-c7r1-md {grid-column-end: span 7; grid-row-end: span 1;}
	.item-c8r1-md {grid-column-end: span 8; grid-row-end: span 1;}
	.item-c9r1-md {grid-column-end: span 9; grid-row-end: span 1;}
	.item-c10r1-md {grid-column-end: span 10; grid-row-end: span 1;}
	.item-c11r1-md {grid-column-end: span 11; grid-row-end: span 1;}
	.item-c12r1-md {grid-column-end: span 12; grid-row-end: span 1;}

	.item-c1r2-md {grid-column-end: span 1; grid-row-end: span 2;}
	.item-c2r2-md {grid-column-end: span 2; grid-row-end: span 2;}
	.item-c3r2-md {grid-column-end: span 3; grid-row-end: span 2;}
	.item-c4r2-md {grid-column-end: span 4; grid-row-end: span 2;}
	.item-c5r2-md {grid-column-end: span 5; grid-row-end: span 2;}
	.item-c6r2-md {grid-column-end: span 6; grid-row-end: span 2;}
	.item-c7r2-md {grid-column-end: span 7; grid-row-end: span 2;}
	.item-c8r2-md {grid-column-end: span 8; grid-row-end: span 2;}
	.item-c9r2-md {grid-column-end: span 9; grid-row-end: span 2;}
	.item-c10r2-md {grid-column-end: span 10; grid-row-end: span 2;}
	.item-c11r2-md {grid-column-end: span 11; grid-row-end: span 2;}
	.item-c12r2-md {grid-column-end: span 12; grid-row-end: span 2;}
}