.carousel-container {
	position:	relative;
	box-sizing:	border-box;
	width:		100%;
/*	max-width:	800px;*/
	margin:		0 auto;
	padding:	0 20px;
	transition:	padding 0.3s;
}

.carousel-container.no-arrows {
	padding:	0;
}

.carousel-container.no-arrows .prev-btn,
.carousel-container.no-arrows .next-btn {
	display:	none;
}

.carousel-wrapper {
	overflow:	hidden;
	width:		100%;
}

.carousel-slides {
	display:	flex;
	width:		100%;
	transition:	transform 1s ease-in-out;
}

.slide {
	display:			flex;
	justify-content:	center;
/*	align-items:		center;*/
	box-sizing:			border-box;
/*	height:				200px;*/
/*	border:				1px solid #fff;*/
	margin:0 0rem 1rem;
}

#p-exhibition .slide,
.top_event .slide,
#exhi_default .slide,
#exhi_pt01 .slide,
#exhi_pt02 .slide,
#exhi_pt03 .slide,
#exhi_pt04 .slide,
#exhi_pt05 .slide,
#exhi_pt06 .slide,
#exhi_pt07 .slide,
#exhi_pt08 .slide,
#exhi_pt09 .slide,
#exhi_pt10 .slide{
	transform: scale(0.9);
}

.prev-btn, .next-btn {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	position:			absolute;
	top:				50%;
	width:				40px;
	height:				40px;
	padding:			0;
	transform:			translateY(-100%);
	z-index:			10;
	cursor:				pointer;
	border:				none;
	background:			transparent;
	color:				#333;
	font-size:			2rem;
}
.prev-btn {
	left:	-14px;
}
.next-btn {
	right:	-14px;
}

.controls-bottom {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	gap:				15px;
	margin:				10px 0;
}

/* ページネーション */
.dotsarea {
	display:			block;
	margin-right: 0rem;
}

.dot {
	width:				10px;
	height:				10px;
	padding:			0;
	background-color:	var(--gray2);
	border:				none;
	cursor:				pointer;
	transition:			background-color 0.3s;
	margin-right: 1rem;
}

.dot.active {
	background-color:	var(--main);
}
.dot:focus-visible {
	outline:			2px solid #555;
	outline-offset:		2px;
}
.dot:focus:not(:focus-visible) {
	outline:			none;
}

.play-pause-btn {
	background:		none;
	cursor:			pointer;
	line-height:	100%;
}
.play-pause-btn img {
	width:			14px;
	height:			14px;
}

.no-transition {	/* 瞬時に移動するためのクラス（アニメーションなし） */
	transition:		none !important;
}

/* data-scale="true" がついている中央拡大 */
.carousel-container[data-scale="true"] .slide {
	transition:		transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	transform:		scale(0.85);
	opacity:		0.6;
	z-index:		1;
}

/* data-scale="true" がついている中央拡大、中央の設定 */
.carousel-container[data-scale="true"] .slide.is-active {
	transform:		scale(1);
	opacity:		1;
	z-index:		2;
}

/* --- フェードモード用のスタイル --- */
/* フェードモードのコンテナ */
.carousel-container.fade-mode .carousel-slides,
.carousel-container[data-animation="fade"] .carousel-slides {	/* 横並び(flex)を解除し、要素を重ね合わせる */
	display:				grid;
	grid-template-areas:	"stack";
	position:				relative;
	width:					100%;
	height:					auto;
	transform:				none !important;
	transition:				none !important;
}


.carousel-container.fade-mode #main_visual.carousel-slides {
	height:		auto;
}

.carousel-container.fade-mode #main_visual.carousel-slides img{
/*
	width: auto;
	max-width: auto;
*/
	width: 100%;
	height: auto;
	display: block;
}
/* フェードモードのスライド個別の設定 */
.carousel-container.fade-mode .slide,
.carousel-container[data-animation="fade"] .slide {
	position:	static;
	grid-area:	stack;
	width:		100% !important;
	min-width:	100% !important;
	height:		auto;
	opacity:	0;
	z-index:	1;
	transition:	opacity 0.8s ease-in-out;
}

/* アクティブなスライドだけ不透明にする */
.carousel-container.fade-mode .slide.is-active,
.carousel-container[data-animation="fade"] .slide.is-active {
	opacity: 1;
	z-index: 2;
}

/* JSが読み込まれるまでの間、最初の1枚目だけを表示 */
.carousel-container[data-animation="fade"] .slide:first-child:not(.clone) {
	opacity:			1;
	z-index:			2;
}

/* クローンはフェードモードでは邪魔なので完全に隠す */
.carousel-container.fade-mode .slide.clone,
.carousel-container[data-animation="fade"] .slide.clone {
/*	display: none;*/
}

/* サムネイル */
.carousel-thumb {
	display:		flex;
	flex-wrap:		wrap;
	justify-content:center;
	gap:			10px;
	margin-top:		20px;
}

/* 各サムネイルボタン */
.thumb-item {
	width:			100px;
	height:			auto;
	padding:		0;
	border:			3px solid transparent;
	transition:		border-color 0.3s, opacity 0.3s;
	opacity:		0.6;
	cursor:			pointer;
}

/* 表示中のスライドと一致した時 */
.thumb-item.is-active {
	border-color:	#911A00;
	opacity:		1;
	outline:		none;
}
.thumb-item img {
	display:		block;
	width:			100%;
	height:			auto;
	object-fit:		cover;
}

/* 指定枚数以下対策 */
.carousel-container.is-static .prev-btn,
.carousel-container.is-static .next-btn,
.carousel-container.is-static .dotsarea,
.carousel-container.is-static .play-pause-btn {
	display: none !important;
}
/* スライドコンテナの位置調整 */
.carousel-container.is-static .carousel-slides {
	justify-content: center;
	transform: none !important;
}


.carousel-slides .slide {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: min(300px, 100%); /* 画面幅が狭い場合は100%に追従 */
}

.carousel-slides .slide img {
    /* 1. 上限の設定 */
/*    max-width: min(800px, 90vw);*/
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: bottom
}