@charset "UTF-8";

#contents{animation-name: fadeInUp;}

.map_img{border: 1px solid #999;}

.gmap_btn{display: block;width: 15em;margin: 1.5em auto 0;text-align: center;padding: 0.4em 0;border: 1px solid var(--main_color);}
.gmap_btn::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: var(--main_color);transition: 0.3s all;}
.gmap_btn span{line-height: 1;color: #fff;font-size: 0.8em;transition: 0.3s all;}
.gmap_btn span::before{content: "";display: inline-block;width: 1em;height: 1.5em;background: url("../img/pin_w.svg") center center/cover;margin-right: 1em;vertical-align: -0.3em;transition: 0.3s all;}


@media screen and (min-width: 769px) {
.gmap_btn:hover::before{transform: scaleX(0);}
.gmap_btn:hover span{color: var(--main_color);}
.gmap_btn:hover span::before{background: url("../img/pin_r.svg") center center/cover;}
}


@media screen and (max-width: 768px) {
#contents{}

.gmap_btn{margin: 4vw auto 0;width: 60vw;}
.gmap_btn span{font-size: 3.5vw;}
}