/* スライドショーコンテナ */
.slideshow-wrapper {
	position: relative;
	width: 100%;
	/* 横幅いっぱい */
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	height: 650px;
	/* スライドショー全体の高さ */
	display: flex;
	align-items: center;
	justify-content: center;
/*	background-color: #f0f0f0*/;
	/* 背景色 */
}

.slideshow-inner {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 20px;
	/* ★ここを有効化 (デスクトップ時のアイテム間隔) */
	/* transitionはJSで制御しているので、CSSには記述しない */
}

.slide-item {
	position: relative;
	height: 70%;
	/* デフォルトの画像の高さ */
	/* margin: 0 10px; */
	/* ★ここを削除またはコメントアウト */
	overflow: hidden;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: all 0.5s ease-in-out;
	flex-shrink: 0;
	/* 縮まないように */
	pointer-events: auto;
	/* イベントを有効にする */
	will-change: height, width, transform, margin;
	/* width: 150px; */
	/* 必要であればデフォルトの幅を設定 */
}



/* スライドショーの端のクローン要素はクリック不可にする */
.slide-item.clone {
	pointer-events: none;
}


.slide-item.active {
	height: 100%;
	/* アクティブ時の画像の高さ */
	width: 500px;
	/* アクティブ時の画像の幅を固定 (デスクトップ向け) */
	/* margin: 0 20px; */
	/* ★ここを削除またはコメントアウト */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.slide-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 画像が縦長でもフィットするように */
	display: block;
}

/* 縦書きテキスト */
.vertical-text {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 100px;
	writing-mode: vertical-rl;
	/* 縦書き */
	text-orientation: upright;
	/* 文字の向き */
	color: #fff;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 10px 5px;
	border-radius: 5px;
/*	font-size: 1.1em;*/
	font-size: 1.4em;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	z-index: 10;
}

.slide-item.active .vertical-text {
	opacity: 1;
	transition-delay: 0.5s;
	/* フェードインの遅延 */
}

/* 吹き出しテキスト */
.speech-bubble {
	position: absolute;
	width:100%;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
/*	background-color: rgba(255, 255, 255, 0.9); */
	background-color: #174ea2;
	color: #fff;
	padding: 15px 20px;
	border-radius: 10px;
/*	font-size: 0.95em;*/
	font-size: 1.2em;
	text-align: center;
/*	max-width: 80%;*/
	max-width: 95%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	z-index: 10;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 横, 縦, ぼかし, 色 */
}

.speech-bubble:before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 20px;
	height: 20px;
/*	background-color: rgba(255, 255, 255, 0.9); */
	background-color: #174ea2;
	border-radius: 3px;
}

.slide-item.active .speech-bubble {
	opacity: 1;
	transition-delay: 0.8s;
	/* フェードインの遅延 */
}


.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	/* padding: 10px 15px; */
	/* これを削除またはコメントアウト */
	font-size: 2em;
	cursor: pointer;
	z-index: 20;
	border-radius: 50%;
	transition: background-color 0.3s ease;

	/* 追加・修正箇所 */
	width: 50px;
	/* 幅を固定 */
	height: 50px;
	/* 高さを固定 */
	display: flex;
	/* Flexboxを使って内容を中央寄せ */
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	box-sizing: border-box;
	/* paddingやborderを含めて幅・高さを計算 */
}

.nav-button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.nav-button.prev {
	left: 20px;
}

.nav-button.next {
	right: 20px;
}

/* 追加: ドットインジケーター */
/*
.slideshow-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 20;
}
*/
.slideshow-dots {
	display:none;
}

.dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	border: 1px solid rgba(0, 0, 0, 0.2);
	/* ドットの境界線を追加 */
}

.dot.active {
	background-color: #007bff;
	/* アクティブなドットの色 */
	transform: scale(1.2);
	border-color: #007bff;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.nav-button {
		/* padding: 5px 10px; */
		/* これも削除またはコメントアウト */
		font-size: 1.5em;
		width: 40px;
		/* モバイル用の幅 */
		height: 40px;
		/* モバイル用の高さ */
	}

	.dot {
		width: 10px;
		height: 10px;
	}
	.slideshow-wrapper {
		height: 350px;
		/* スマホでのスライドショーの高さ */
	}

	.slideshow-inner {
		gap: 10px;
		/* ★モバイル時のアイテム間隔を調整 */
	}

	.slide-item {
		height: 60%;
		/* margin: 0 5px; */
		/* ★ここを削除またはコメントアウト */
		/*        width: 150px; /* 小さく表示 */
		width: 60%;
		/* 小さく表示 */
		flex-shrink: 0;
		/* 縮まないように */
	}

	.slide-item.active {
		height: 90%;
		width: 60%;
		*/
		/* この行をコメントアウトまたは削除 */
		/*width: 300px; /* ★試してみる固定値 (例: 280px, 300px などで調整) */
		/* margin: 0 10px; */
		/* ★ここを削除またはコメントアウト */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
		flex-shrink: 0;
		/* 縮まないように */

	}

	.vertical-text {
		font-size: 0.9em;
		padding: 5px 3px;
		right: 10px;
		top: 10px;
		bottom:60px;
	}

	.speech-bubble {
		font-size: 0.8em;
		padding: 10px 15px;
		bottom: 10px;
	}
}




.floating-circles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.floating-circles .circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  mix-blend-mode: screen;
  transition: transform 3s ease-in-out, opacity 3s ease-in-out;
}

.floating-circles .circle:nth-child(1) {
  background: #cceeff;
  width: 80px;
  height: 80px;
}
.floating-circles .circle:nth-child(2) {
  background: #ffccff;
  width: 100px;
  height: 100px;
}
.floating-circles .circle:nth-child(3) {
  background: #ccffcc;
  width: 60px;
  height: 60px;
}
.floating-circles .circle:nth-child(4) {
  background: #ffeebb;
  width: 90px;
  height: 90px;
}
.floating-circles .circle:nth-child(5) {
  background: #e0ccff;
  width: 110px;
  height: 110px;
}

.floating-circles .circle:hover {
  transform: scale(1.5) !important;
  transition: transform 0.3s ease;
  z-index: 1;
}

.floating-marus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.floating-marus .maru {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  mix-blend-mode: screen;
  transition: transform 3s ease-in-out, opacity 3s ease-in-out;
}

.floating-marus .maru:nth-child(1) {
  background: #cceeff;
  width: 80px;
  height: 80px;
}
.floating-marus .maru:nth-child(2) {
  background: #ffccff;
  width: 100px;
  height: 100px;
}
.floating-marus .maru:nth-child(3) {
  background: #ccffcc;
  width: 60px;
  height: 60px;
}
.floating-marus .maru:nth-child(4) {
  background: #ffeebb;
  width: 90px;
  height: 90px;
}
.floating-marus .maru:nth-child(5) {
  background: #e0ccff;
  width: 110px;
  height: 110px;
}

.floating-marus .maru:hover {
  transform: scale(1.5) !important;
  transition: transform 0.3s ease;
  z-index: 1;
}