@charset "utf-8";
/* CSS Document */

/* SHOP INFO マップ */
.guide {background-color: #000;}
.guide-map {
	position: relative;
	width: 100%;
	max-width: 434px;
	aspect-ratio: 217 / 251;
	background: url("../images/shopinfo/map.png") no-repeat center / contain;
}

.map-btn {
	position: absolute;
	transform: translate(-50%,-50%);
	width: 35px;height: 35px;background: none;border: none;
	color:transparent;cursor:pointer;
}
/* 実測％座標 */
.btn-A{top:77.39%; left:51.32%;}
.btn-B{top:58.72%; left:90.84%;}
.btn-C{top:20.37%; left:46.26%;}
.btn-D{top:45.27%; left:33.93%;}
.btn-E{top:45.07%; left:53.97%;}
.btn-F{top:77.64%; left:86.12%;}

.guide-panels {
	width: 100%;
	color: #fff;
	position: relative;
	aspect-ratio: 1 / 1;
}
.panel{
	width: 100%;
    padding: 1rem clamp(1rem, 4vw, 3rem);
	position: absolute;
    top: 50%;left: 50%;transform: translate(-50%, -50%);
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .4s ease, visibility 0s .4s;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
}
.panel.active{
	opacity:1;visibility:visible;pointer-events:auto;
	transition:opacity .4s ease;
}

.panel h3 {font-size: clamp(18px,2vw,20px);line-height: 1.2em;margin-bottom: 1rem;}
.panel h3 span:not([class]) {
	display: inline-flex;
    width: 20px;height: 20px;aspect-ratio: 1 / 1;
    justify-content: center;align-items: center;
	background-color: #fff;
	color: #000;
	font-size: .9em;
	margin-right: .3rem;
}
.font-small {font-size: .8em;}

.carousel-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
	font-size: 20px;
	z-index: 1;
}