@charset "UTF-8";
#title {  background-image: url("images/title-bg.jpg");}

#layout h2 { display: block; width: 100%; max-width:1080px; padding:80px 0 0 0; margin:0 auto; text-align:left; font-size: 25px;}

.inner { max-width:1020px;}

.art { padding:10px 0 40px 0; text-align: left;}
	.art h3 { display: block; padding:10px 0; font-size:18px; text-align: left; border-bottom: 1px solid #FFF;}
	.arttext {padding: 10px 0; font-size:16px;}
	.artphoto {padding:20px 0; font-size:16px; text-align: center;}

#details { padding:40px 0; width: 100%; text-align: center;}
	#details .inner { width: 100%; max-width:960px;}
	#details h1 { display: block; padding:30px 0 10px 0; font-size:18px; text-align: left; border-bottom: 1px solid #FFF;}
	.arttext { padding: 10px 0; font-size:16px; text-align: left;}

	ul.main {width: 100%; max-width: 700px; margin: 0 auto; padding: 30px 0;}
		.mainphoto { width: 100%; height:calc(75vw - 40px); max-height: 525px; display: flex; justify-content: center; align-items: center;}
			.mainphoto img { max-width:100%; max-height: 100%; width:auto; height: auto; }
		.maintext { display: block; text-align: left; padding: 10px 0; font-size: 16px;}

	ul.thumbs { padding:0 0 30px 0;}
		ul.thumbs .slick-track { width: 100% !important; display: flex; justify-content: center; flex-wrap: wrap;}
		ul.thumbs .slick-active img { border: 1px solid rgba(255,255,255,0);}
		ul.thumbs .slick-current img { border: 1px solid rgba(255,255,255,1);}
		ul.thumbs .slick-slide { width: 100px !important;}
		ul.thumbs .slick-slide div { width: 100px !important;}
		ul.thumbs li { display: block; width: 100%; height:0; padding-top: 100%; overflow: hidden; position: relative;}
		ul.thumbs li img { width: 90%; height: 90%; object-fit: cover; cursor: pointer; position: absolute; top: 5%; left: 5%;}

	.moviedata { width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 0;}
		.youtube { width: 100%; padding-top:56.25%; position: relative;}
			.youtube iframe { width: 100%; height: 100%; position: absolute; top:0; left: 0;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	ul.main .slick-prev {left: -20px;}
	ul.main .slick-next {right: -20px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	ul.main .slick-prev {left: -40px;}
	ul.main .slick-next {right: -40px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}