@charset "UTF-8";

@media all {
	.main-section-ttl {
		text-align: center;
	}
	.gallery-lead {
		font-family: var(--yakuhan);
		font-weight: bold;
		line-height: 2.3333;
		text-align: center;
	}
	p.date-ttl {
		margin: 2em 0 1em;
		font-weight: bold;
		text-align: center;
	}
	.gallery-box {
		display: flex;
		flex-wrap: wrap;
	}
	.gallery-box li {
		aspect-ratio: 1 / 1;
	}

	/* sp & tab */
	@media screen and (max-width: 1024px) {}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-section-ttl {
			margin-left: -12rem;
			width: calc(100% + 16rem);
		}
		.gallery-lead {
			margin-top: 50rem;
			padding: 0;
		}
		.gallery-box {
			margin-top: 40rem;
			padding: 0 20rem;
			gap: 10rem;
		}
		.gallery-box li {
			width: calc(33.3% - 7.5rem);
			border-radius: 5rem;
		}
		.youtube-box {
			position: relative;
			margin-top: 80rem;
			padding-left: 20rem;
			width: 100%;
		}
		.youtube {
			width: 340rem;
		}
		.youtube-fig {
			position: absolute;
			top: -83rem;
			right: -3rem;
			display: block;
			width: 142.5rem;
		}


	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.gallery-lead {
			margin: 50rem auto 0;
			width: 490rem;
			width: 600rem;
		}
		.date-ttl {font-size: 24rem;}

		.gallery-box {
			margin: 50rem auto 0;
			width: calc(100% - 20rem);
			max-width: 1000rem;
			gap: min(2vw, 20rem) 2%;
		}
		.gallery-box li {
			width: 23.5%;
		}

		.youtube-box {margin: 30rem auto 0;}
		.youtube {
			width: 608rem;
		}
		.youtube-fig {
			display: block;
			width: 285rem;
		}

		
		/* tab */
		@media only screen and (min-width: 768px) and (max-width: 1024px) {
			.youtube-box {width: 608rem;}
			.youtube-fig {
				margin: 30rem -90rem 0 auto;
			}
		}

		/* pc */
		@media print, (min-width: 1025px) {
			.youtube-box {
				position: relative;
				width: 1000rem;
			}
			.youtube-fig {
				position: absolute;
				top: 100rem;
				left: 675rem;
			}
		}

		/* wide */
		@media (min-width: 1600px) {}
	}

}


#fancybox-title {font-size: 15rem;}


/* carousel */
@media all {
		.carousel {
			width: 100%;
			background: left bottom / cover repeat-x url(../img/gallery/carousel.jpg?v0530);
			animation: 75s linear infinite;
		}

	/* sp */
	@media (max-width: 767px) {
		.carousel {
			margin-top: 75rem;
			height: 198rem;
			animation-name: carousel-sp;
		}
		@keyframes carousel-sp {
			0% {background-position-x: 1242rem;}
			100% {background-position-x: 0rem;}
		}
		.site-footer {margin-top: 100rem;}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.carousel {
			margin-top: 150rem;
			height: 396rem;
			animation-name: carousel-pc;
		}
		@keyframes carousel-pc {
			0% {background-position-x: 2484rem;}
			100% {background-position-x: 0rem;}
		}

		.site-footer {margin-top: 200rem;}
		
		/* tab */
		@media (max-width: 1024px) {}
		
		/* pc */
		@media (min-width: 1025px) {}
	}
	
}