#pref-map {
	width: 90%;
	height: 480px;
	border: #ccc solid 1px;
	margin: 2rem auto; 
	border-radius: 8px;
}

.slider-container {
	/* スライドショーのサイズとスクロールの設定 */
	width: 30vw;
	max-width: 240px;
	margin: 0 auto;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
}

.slider {
	/* 画像を横に並べるためのFlexbox設定 */
	display: flex;
	flex-wrap: nowrap;
	gap: 10px; /* 画像間の隙間 */
}

.slider img {
	/* 画像のサイズとスクロールの制御 */
	width: 100%;
	flex-shrink: 0; /* 画像が縮まないようにする */
	scroll-snap-align: center; /* スクロールが中央で止まるようにする */
	object-fit: cover; /* 画像の縦横比を維持しながら要素を埋める */
}

/* 100% */
.carousel-container {
	width: 90%;
	margin: 2rem auto;
	overflow-x: auto; /* 横スクロールを可能にする */
	box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.image-wrapper {
	display: flex;
	gap: 12px; /* 画像間の間隔 */
}

.image-wrapper img {
	width: 30vw; /* 画像の幅を画面幅の30%に設定 */
	max-width: 240px;
	height: auto;
	flex-shrink: 0; /* 画像が縮まないようにする */
	aspect-ratio: 4/3;
	border-radius: 8px;
	filter: grayscale(1);
	opacity:0.5;
	transition:0.5s;
}

.image-wrapper img.active-image {
	/* 縁取りのスタイル */
	border: 4px solid #D94F6522;
	transition: border-color 0.3s ease-in-out; /* オプション: 縁取りの色変更にアニメーションを追加 */
	filter: grayscale(0);
	opacity:1;
	transition:0.5s;
}

.marker-button {
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.marker-button p {
	padding: 0.2rem 0.5rem;
	margin: 0;
	white-space: nowrap;
	position: absolute;
	right: 5px;
	bottom: 5px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.6rem;
	border-radius: 3px;
	line-height: 1rem;
}
.marker-button img {
	display: block;
}

.marker-button.osusume::before {
  content: "認定店舗";
  position: absolute;
  top: 5px;
  left: 5px;
  background: #d94f65; /* 赤背景 */
  color: #fff;         /* 白文字 */
	font-size: 0.6rem;
	padding: 0.2rem 0.5rem;
  border-radius: 3px;
  z-index: 2;
}

.custom-infowindow {
	position: relative; /* 子要素の配置基準 */
	padding: 1rem;
	background-color: #fff;
	width:100%;
	max-width:320px;
}

.custom-infowindow .close-button { 
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 24px;
	font-weight: bold;
	color: #999;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 10;
}

.custom-infowindow .title {
	font-size: 18px;
	font-weight: bold;
	margin: 0 auto 0.5rem;
	color: var(--main-color);
	display: block;
}

.custom-infowindow .content-wrapper {
	display: flex; /* Flexboxで子要素を横並びにする */
	align-items: flex-start; /* アイテムを上揃えにする */
	gap: 0.5rem; /* 要素間の隙間 */
	margin-bottom: 0.5rem;

}
.custom-infowindow .thumbnail-container {
	flex-shrink: 0; /* 縮小しないように設定 */
}

.custom-infowindow .thumbnail-image {
	width: 100px;
	height: 100px;
	object-fit: cover; /* 画像をトリミングして表示 */
	border-radius: 4px;
}

.custom-infowindow .description {
	font-size: 14px;
	line-height: 1.5;
	color: #555;
}

.custom-infowindow .description p {
	line-height: 1.4;
	padding: 0;
	margin: 0;
}

.custom-infowindow .link-button {
	display: block; /* リンクをブロック要素にして幅を広げる */
	text-align: center;
	padding: 8px 15px;
	background-color: #007bff;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
}

.custom-infowindow .link-button:hover {
	opacity:.8
}

.custom-infowindow .link-button {
	display: block;
	width: 90%;
	max-width:200px;
	text-align: center;
	background-color: var(--main-color);
	border-radius: 20px;
	font-size: 80%;
	margin: 0.5rem auto;
	box-sizing:border-box;
	border:2px solid #0001;
	border-bottom-width:3px;
}
@media screen and (max-width:768px) {
	.custom-infowindow .content-wrapper{flex-wrap:wrap;}
	.custom-infowindow .thumbnail-container{width:100%;}
	.custom-infowindow .thumbnail-image{width:100%;height:100%;}
}
/* googleマップのデフォルトを変更 */
/* デフォルトの閉じるボタンを非表示にする */
.gm-ui-hover-effect {
	display: none !important; 
}
.gm-style-iw-ch {
	padding-top: 0;
}
.gm-style-iw {
	border: 1px solid #ccc;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	outline: none;
}