.loc{padding:var(--sp-7) 0}

.loc__mapbox{display:flex; flex-direction:column}
.loc__map{position:relative; width:100%; min-height:320px; background:var(--c-surface-2); box-shadow:var(--sh-1)}
.loc__map img{display:block; width:100%; height:100%; min-height:320px; object-fit:cover}
.loc__mapnote{margin-top:.6rem; color:var(--c-fg-3); font-size:var(--fs-xs)}
.loc__mapnote a{color:var(--c-accent-deep); text-decoration:underline}

.loc__mapoff{
	position:absolute; inset:0;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
	padding:1.5rem; color:var(--c-fg-3); font-size:var(--fs-sm); text-align:center; line-height:1.7;
}
.loc__mapoff i{font-size:1.8rem; color:var(--c-fg-3)}

.loc__pin{
	position:relative;
	padding:.55rem .85rem;
	background:var(--c-surface);
	box-shadow:var(--sh-2);
	color:var(--c-fg);
	font-size:.8rem;
	font-weight:700;
	white-space:nowrap;
}
.loc__pin::after{
	position:absolute;
	top:100%;
	left:50%;
	width:0;
	height:0;
	border-top:8px solid var(--c-surface);
	border-right:7px solid transparent;
	border-left:7px solid transparent;
	content:'';
	transform:translateX(-50%);
}

.loc__side{display:grid; gap:var(--sp-4); margin-top:var(--sp-4)}
.loc__addr, .loc__hours{background:var(--c-surface); box-shadow:var(--sh-1); padding:1.5rem 1.4rem}
.loc__addr{display:flex; flex-direction:column}
.loc__hours h2{font-size:var(--fs-h3)}
.loc__hours dl{display:grid; gap:.7rem; margin-top:1rem}
.loc__hours div{display:flex; gap:.9rem; align-items:baseline}
.loc__hours dt{flex:none; width:5.5rem; color:var(--c-fg-3); font-size:var(--fs-xs); font-weight:700}
.loc__hours dd{flex:1; min-width:0; margin:0; color:var(--c-fg); font-size:var(--fs-sm); line-height:1.7}
.loc__hours dd em{display:block; font-style:normal; color:var(--c-fg-3); font-size:var(--fs-xs)}

.loc__off{margin-top:1rem; padding:.75rem .9rem; background:var(--c-surface-2); color:var(--c-fg-2); font-size:var(--fs-xs); line-height:1.7}
.loc__addr dl{display:grid; gap:.85rem}
.loc__addr div{display:flex; gap:.9rem; align-items:baseline}
.loc__addr dt{flex:none; width:5.5rem; color:var(--c-fg-3); font-size:var(--fs-xs); font-weight:700}
.loc__addr dd{flex:1; min-width:0; margin:0; color:var(--c-fg); font-size:var(--fs-sm); line-height:1.7}
.loc__addr dd a:hover{color:var(--c-accent-deep); text-decoration:underline}
.loc__empty{color:var(--c-fg-3)}
.loc__acts{align-items:center; gap:.5rem; margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--c-line)}
.loc__acts .btn{min-height:42px; padding:.5rem 1rem}
.loc__addr .loc__acts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.loc__addr .loc__acts .btn{width:100%; min-width:0; justify-content:center}

.loc__ways{padding:var(--sp-6) 0; background:var(--c-surface-2)}
.loc__ways ul{display:grid; gap:1rem; grid-template-columns:1fr}
.loc__ways > .wrap > ul > li{background:var(--c-surface); box-shadow:var(--sh-1); padding:1.5rem 1.4rem}
.loc__ico{
	width:44px; height:44px; display:flex; align-items:center; justify-content:center;
	background:var(--c-accent-soft); color:var(--c-accent-deep); font-size:1.2rem;
}
.loc__ways h3{margin:.9rem 0 .7rem; font-size:var(--fs-h3)}
.loc__ways p{color:var(--c-fg-2); font-size:var(--fs-sm); line-height:1.75}
.loc__ways p + p{margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--c-line-soft)}
.loc__ways p b{color:var(--c-fg)}

.loc__route{display:grid; gap:.5rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--c-line-soft)}
.loc__route li{display:flex; gap:.7rem; align-items:baseline; color:var(--c-fg-2); font-size:var(--fs-xs); line-height:1.7}
.loc__route b{
	flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
	background:var(--c-surface-3); color:var(--c-fg); font-size:.7rem; font-weight:800;
}

.loc__line{
	display:inline-block; margin-right:.3rem; padding:.05rem .45rem;
	background:var(--c-surface-3); color:var(--c-fg); font-size:var(--fs-xs); font-weight:700;
}

@media (min-width:768px){
	.loc__map{min-height:440px}
	.loc__map img{min-height:440px}
	.loc__side{grid-template-columns:1fr 1fr}
	.loc__addr dl{grid-template-columns:1fr 1fr; gap:.85rem 2rem}
	.loc__addr div.is-wide{grid-column:span 2}
	.loc__ways ul{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
	.loc{padding:var(--sp-8) 0}
	.loc__map{min-height:520px}
	.loc__map img{min-height:520px}
	.loc__acts{margin-top:auto}
}