.carousel {
    overflow: hidden;
    height: auto;
    margin: 32px auto;
    
	/* カルーセルの上部（ボタンと画像） */
	.carousel_top {
	  display: flex; /* 横並びにする */
	  align-items: center; /* 縦中央揃え */
	  position: relative; /* ボタンの位置基準 */
	  justify-content: center; /* 中央揃え */
	}
	
	.container {
    	width: 600px;
	    font-size: 40px;
	    overflow: hidden;
	    margin-bottom: 10px;
	 
	}
	
	ul {
	    display: flex;
	    list-style: none;
	    height: 100%;
	    transition-duration: .6s;
	    padding: 0px 0px 0px 0px !important;
	    margin-top: 0px !important;
	    margin-bottom: 0px !important;
	}
	li {
	    height: 100%;
	    min-width: 100%;
	}
	img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
	.button-box {
	    text-align: right;
	}
	button {
	    border: none;
	    padding: 8px 8px;
	    font-size: 20px;
	    cursor: pointer;;
	}
	button:hover {
	    background-color: black;
	    color: white;
	}
	.nav {
	    text-align: center;
	}
	.nav button {
	    width: 20px;
	    height: 20px;
	    background-color: #ddd;
	    border-radius: 50%;
	}
	.nav button + button {
	    margin-left: 8px;
	}
	.nav button.current {
	    background-color: black;
	}

	/* 左右ボタンの共通スタイル */
	.prev,
	.next {
	  background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
	  color: white;
	  border: none;
	  padding: 10px 15px;
	  cursor: pointer;
	  font-size: 18px;
	  z-index: 10; /* 画像より手前 */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	/* 左ボタン（画像の左側） */
	.prev {
	  margin-right: 10px; /* 画像との間隔 */
	}

	/* 右ボタン（画像の右側） */
	.next {
	  margin-left: 10px; /* 画像との間隔 */
	}

	/* ホバーエフェクト */
	.prev:hover,
	.next:hover {
	  background: rgba(0, 0, 0, 0.8);
	}

	/* ナビゲーション */
	.carousel_bottom {
	  display: flex;
	  justify-content: center; /* 中央揃え */
	  margin-top: 10px; /* 画像との間隔 */
	}
}