/* Ported from hitorinomi-web pages/maps.vue's <style scoped> block.
   It lived inside the single-file component, so it was never part of
   static/shared/css and did not come across with the rest of the theme —
   which left every .rstmap-* / .content-map / #gg-map rule undefined and
   the page rendering as unstyled blocks. Loaded only by maps.blade.php,
   which is the same scope Vue gave it. */
#container .maps #gg-map .vue-map div {
  position: unset;
}
#container .maps #gg-map {
  overflow: hidden;
  height: 100%;
}
#container .maps #gg-map .vue-map {
  display: block;
  width: 100%;
  height: 100%;
}
#map .content-map {
  display: flex;
  width: 100%;
  padding: 0 0 40px;
  overflow: hidden;
}

.content-map .left-list {
  padding: 8px;
  border: solid 1px #e9e9e9;
  min-width: 325px;
  max-width: 380px;
  height: 600px;
  box-sizing: border-box;
  overflow: scroll;
  overflow-x: hidden;
  background-color: #fff;
  flex: 0 0 28%;
  overflow-wrap: break-word;
  display: block;
}

.content-map .map-view {
  width: 100%;
  margin-left: 8px;
  background-color: #fff;
}

.header-list-map {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 24px;
}

.c-page-count {
  display: inline-block;
}

.c-page-count__num {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  color: #fff;
}

.view-select-limit {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: #fff;
}

.option-limit {
  padding: 8px 16px;
}

.select-limit {
  margin: 0px 8px;
  width: 70px;
  padding: 4px;
  border: 2px solid #ff9600;
}

@media screen and (max-width: 976px) {
  .content-map .left-list {
    display: none;
  }
}

/* list restaurant */
.rstmap-ex-list {
  display: flex;
  flex-wrap: wrap;
}

.rstmap-ex-list ol,
ul {
  list-style: none;
}

.name {
  color: black;
}

.rstmap-ex-list__item {
  position: relative;
  width: 100%;
  border-radius: 4px;
}

.rstmap-ex-list__item :hover {
  background-color: #f8e7c8;
  opacity: 1;
}

.rstmap-ex-list__target {
  display: flex;
  padding: 18px 8px;
  border-bottom: dotted 1px #e0dccc;
  color: #06c;
  text-decoration: none;
  cursor: pointer;
  align-items: flex-start;
}

.rstmap-ex-list__target :hover {
  color: #ff9600;
}

/* common.css underlines every a:hover, and that beats the plain
   text-decoration above on specificity. */
.rstmap-ex-list__target:hover,
.rstmap-ex-list__target:hover * {
  text-decoration: none;
}

.rstmap-ex-list__photo {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: solid 1px rgba(0, 0, 0, 0);
}

.rstmap-avatar-restaurant {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.rstmap-ex-list__info {
  padding-left: 16px;
  width: calc(100% - 78px);
}

.rstmap-ex-list__mname {
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: -3px;
}

.rstmap-ex-list__mname-dtl {
  vertical-align: middle;
  font-size: 16px;
}

.rstmap-ex-list__area-catg {
  font-weight: normal;
  font-size: 10px;
  line-height: 1.5;
}

.u-text-indirect {
  color: #949499;
}

.next-view {
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.text-button-next {
  color: #06c;
  text-decoration: none;
}

.view-rating {
  margin-top: 4px;
}
.rating .vue-star-rating {
  float: left;
  /* margin-top: 2px; */
  margin-right: 3px;
}
.rating .rating-count {
  color: #e10000;
  font-weight: bold;
  float: left;
}
.review {
  /* margin-top: 2px; */
  float: left;
  margin-left: 10px;
}
.review i {
  color: #bcb08a;
}
.review .review-count {
  font-weight: 400;
  font-size: 12px;
  color: #858596;
}
.marker img {
  width: 31px;
}
.marker-focused {
  width: 47px;
  height: 70px;
}
.next-view {
  display: block;
}
.next-view ul {
  color: #06c;
}
.next-view ul > :first-child {
  float: left;
}
.next-view ul > :last-child {
  float: right;
}
.left-list .next-view ul > :not(:first-child):not(:last-child) {
  display: none !important;
}
.map-view .search-again {
  border: none;
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  color: #fff;
  background-color: #9c0;
  position: absolute;
  /* top: 14px; */
  left: 65%;
  z-index: 1;
  transform: translateX(-50%);
  cursor: pointer;
  outline: none;
  border-radius: 3px;
  box-sizing: border-box;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: normal;
  padding: 0.4em;
  margin-top: 12px;
}
.map-view .vue-map-container .vue-map .gmnoprint .gm-style-mtc button {
  min-width: 0;
  width: 116px !important;
  border-radius: unset;
}
.icon-marker .icon-list {
  display: flex;
  width: 100%;
  padding: 10px 0 12px;
  box-sizing: border-box;
  justify-content: flex-end;
}
.icon-marker .icon-item {
  display: flex;
  min-height: 24px;
  padding-left: 24px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 20px 24px;
  align-items: center;
  margin-left: 10px;
}
.icon-marker .rating45 {
  background-image: url(../img/maps/red.svg);
}
.icon-marker .rating35 {
  background-image: url(../img/maps/orange.svg);
}
.icon-marker .rating25 {
  background-image: url(../img/maps/yellow.svg);
}
.icon-marker .rating00 {
  background-image: url(../img/maps/grey.svg);
}
/* The info window lives inside Google's .gm-style subtree, whose own link
   rules underline the shop name that the list itself leaves plain. */
.gm-style .rstmap-ex-list__target,
.gm-style .rstmap-ex-list__target:link,
.gm-style .rstmap-ex-list__target:visited,
.gm-style .rstmap-ex-list__target:hover,
.gm-style .rstmap-ex-list__mname,
.gm-style .rstmap-ex-list__mname-dtl {
  text-decoration: none;
}

/* The score and the stars float, and in the info window nothing below them
   clears the float, so the block has to contain it or it spills out. */
.gm-style .view-rating {
  overflow: hidden;
}

@media screen and (max-width: 460px) {
  .content-map .map-view .search-again {
    left: 50%;
    margin-top: 51px;
    font-size: 85%;
  }
}