@charset "UTF-8";

.mapWrap .locationInfo { background-color:#edf1f4; padding:20px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; }
.mapWrap .locationInfo > li { position:relative; padding:20px 0; padding-left:80px; }
.mapWrap .locationInfo > li:nth-child(n+2) { margin-left:50px; }
.mapWrap .locationInfo > li::before { content:""; position:absolute; width:60px; height:60px; border-radius:50%; left:0; top:50%; transform:translate(0, -43%); }
.mapWrap .locationInfo > li.loc::before { background:#007e77 url("/sites/style_guide/images/common/ic_location.png") no-repeat center; }
.mapWrap .locationInfo > li.tel::before { background:#007e77 url("/sites/style_guide/images/common/ic_call.png") no-repeat center; }
.mapWrap .locationInfo > li.fax::before { background:#007e77 url("/sites/style_guide/images/common/ic_fax.png") no-repeat center; }
.mapWrap .locationInfo > li.mail::before { background:#007e77 url("/sites/style_guide/images/common/ic_mail.png") no-repeat center; }
.mapWrap .locationInfo > li.home::before { background:#007e77 url("/sites/style_guide/images/common/ic_site.png") no-repeat center; }

.mapWrap .locationInfo > li.instagram::before, .mapWrap .locationInfo > li.facebook::before, .mapWrap .locationInfo > li.youtube::before { display:none; }
.mapWrap .locationInfo > li.instagram, .mapWrap .locationInfo > li.facebook, .mapWrap .locationInfo > li.youtube { flex-basis:60px; padding-left:0; }

.mapWrap .locationInfo > li > strong { font-family: 'Montserrat'; font-weight: 700; font-size: 16px; color: #333333; }
.mapWrap .locationInfo > li > p { font-family: 'Noto Light'; font-size: 16px; color: #333; letter-spacing:0.5px; }

.mapApi{border:1px solid #222; height:500px; box-sizing:border-box;}

@media only screen and (max-width:1200px){
	.mapWrap .locationInfo > li.loc { flex-basis:100%; }
	.mapWrap .locationInfo > li:nth-child(2) { margin-left:0; }
}
@media only screen and (max-width:600px){
	.mapWrap .locationInfo > li.tel { flex-basis:100%; }
	.mapWrap .locationInfo > li:nth-child(3) { margin-left:0; }
}

@media only screen and (max-width:1700px){
	.mapWrap{width:90%;margin:0 auto;}
}
@media only screen and (max-width:1024px){
	.mapApi{height:350px;}
}