#arch-map {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  margin: 100px auto 90px;
}

/* 全体表示 */
.arch-map--all {
    height: 100vw;
}

/* 個別表示 */
.arch-map--single {
    aspect-ratio: 4 / 3;
    width: 59.184vw;
    height: auto;
}

/* 「地図をズームするには…」のセンター寄せ */
.gm-style-mot {
    width: 100% !important;
    text-align: center !important;
    left: 0 !important;
    transform: none !important;
}

/* ピンのスタイル */
.arch-map-pin {
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #007B99;
    border: 1.5px solid #fff;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.2); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* モーダルのスタイル */
.arch-map-pin span {
    transform: rotate(45deg);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}
.arch-map-modal {
    padding: 10px 5px 10px 10px;
    width: 220px;
    max-width: 220px;
    font-family: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif !important;
}
.arch-map-modal__name {
    display: block;
    margin-bottom: .5em;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
}
.arch-map-modal__address,
.arch-map-modal__architect,
.arch-map-modal__link {
    display: block;
    margin-bottom: 1.5em;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
}
a.arch-map-modal__link {
    color: #007B99;
}
.arch-map-modal__photo-wrapper {
    aspect-ratio: 3 / 2;
    width: 100%;
    overflow: hidden;
}
.arch-map-modal__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
  #arch-map {
    margin: 50px auto 45px;
  }
  .arch-map--all {
    aspect-ratio: 3 / 4;
    height: auto;
  }
	.arch-map--single {
    aspect-ratio: 3 / 4;
    width: 100%;
  }
}