/*-----------------------------------------
    search-area (葬儀場を探す)
-----------------------------------------*/
.mf-search-area {
  padding: calc(var(--vw, 1vw) * 110 / 768 * 100) calc(var(--vw, 1vw) * 80 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area {
    padding: min(var(--vw, 1vw) * 70 / 1300 * 100, 70px) 0;
    width: min(var(--vw, 1vw) * 1000 / 1300 * 100, 1000px);
    margin: 0 auto;
  }
}

.mf-search-area .en-ttl {
  text-align: center;
  font-size: calc(var(--vw, 1vw) * 81.92 / 768 * 100);
  color: #F5F1E9;
  line-height: 1;
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  .mf-search-area .en-ttl {
    font-size: min(var(--vw, 1vw) * 64 / 1300 * 100, 64px);
  }
}

.mf-search-area .ttl {
  text-align: center;
  font-size: calc(var(--vw, 1vw) * 49.152 / 768 * 100);
  font-weight: 700;
  color: #514327;
  margin-bottom: calc(var(--vw, 1vw) * 70 / 768 * 100);
  letter-spacing: 0.15rem;
}

@media screen and (min-width: 768px) {
  .mf-search-area .ttl {
    font-size: min(var(--vw, 1vw) * 28 / 1300 * 100, 28px);
    margin-bottom: min(var(--vw, 1vw) * 40 / 1300 * 100, 40px);
    line-height: 1;
  }
}

.mf-search-area .txt {
  font-size: calc(var(--vw, 1vw) * 28.672 / 768 * 100);
  text-align: center;
  margin-bottom: calc(var(--vw, 1vw) * 65 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .txt {
    font-size: clamp(14px, min(var(--vw, 1vw) * 16 / 1300 * 100, 16px), min(var(--vw, 1vw) * 16 / 1300 * 100, 16px));
    margin-bottom: min(var(--vw, 1vw) * 40 / 1300 * 100, 40px);
  }
}

.mf-search-area .map {
  background: url(/funeral/images/search-area/seach-img.webp) no-repeat center;
  background-size: calc(var(--vw, 1vw) * 560 / 768 * 100);
  height: calc(var(--vw, 1vw) * 700 / 768 * 100);
  position: relative;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .mf-search-area .map {
    width: min(var(--vw, 1vw) * 448 / 1300 * 100, 448px);
    background-size: 100%;
    height: min(var(--vw, 1vw) * 537 / 1300 * 100, 537px);
  }
}

.mf-search-area .map-btn {
  position: relative;
  width: calc(var(--vw, 1vw) * 333.824 / 768 * 100);
  height: calc(var(--vw, 1vw) * 114.688 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn {
    width: min(var(--vw, 1vw) * 190 / 1300 * 100, 190px);
    height: min(min(var(--vw, 1vw), 1svh) * 65 / 375 * 100, 65px);
  }
}

.mf-search-area .map-btn a {
  text-decoration: none;
  box-shadow: calc(var(--vw, 1vw) * 4 / 768 * 100) calc(var(--vw, 1vw) * 4 / 768 * 100) calc(var(--vw, 1vw) * 10 / 768 * 100) calc(var(--vw, 1vw) * -5 / 768 * 100) rgba(0, 0, 0, 0.6);
  color: #4C3501;
  font-size: calc(var(--vw, 1vw) * 40.96 / 768 * 100);
  display: grid;
  place-content: center;
  height: 100%;
  background: #fff;
  border-radius: calc(var(--vw, 1vw) * 32.768 / 768 * 100);
  border: #E1E1E1 1px solid;
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn a {
    box-shadow: min(var(--vw, 1vw) * 4 / 1300 * 100, 4px) min(var(--vw, 1vw) * 4 / 1300 * 100, 4px) min(var(--vw, 1vw) * 10 / 1300 * 100, 10px) calc(min(var(--vw, 1vw) * 5 / 1300 * 100, 5px) * -1) rgba(0, 0, 0, 0.6);
    font-size: clamp(16px, min(var(--vw, 1vw) * 20 / 1300 * 100, 20px), min(var(--vw, 1vw) * 20 / 1300 * 100, 20px));
    border-radius: min(var(--vw, 1vw) * 16 / 1300 * 100, 16px);
    padding-right: min(var(--vw, 1vw) * 5 / 1300 * 100, 5px);
  }

  .mf-search-area .map-btn a:hover {
    background: #ccc;
  }

  .mf-search-area .map-btn a:hover::before {
    right: min(var(--vw, 1vw) * 10 / 1300 * 100, 10px);
  }
}

.mf-search-area .map-btn a::before {
  content: "";
  position: absolute;
  right: calc(var(--vw, 1vw) * 33 / 768 * 100);
  top: 50%;
  transform: translateY(-50%);
  background: url(/funeral/images/search-area/ico_btn.png) no-repeat;
  background-size: contain;
  width: calc(var(--vw, 1vw) * 36 / 768 * 100);
  height: calc(var(--vw, 1vw) * 36 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn a::before {
    transition: 0.3s;
    right: min(var(--vw, 1vw) * 15 / 1300 * 100, 15px);
    width: min(var(--vw, 1vw) * 17 / 1300 * 100, 17px);
    height: min(var(--vw, 1vw) * 17 / 1300 * 100, 17px);
  }
}

.mf-search-area .map-btn.gunma {
  position: absolute;
  top: calc(var(--vw, 1vw) * 170 / 768 * 100);
  left: calc(var(--vw, 1vw) * 50 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn.gunma {
    top: min(var(--vw, 1vw) * 160 / 1300 * 100, 160px);
    left: min(var(--vw, 1vw) * 60 / 1300 * 100, 60px);
  }
}

.mf-search-area .map-btn.saitama {
  position: absolute;
  top: calc(var(--vw, 1vw) * 410 / 768 * 100);
  right: calc(var(--vw, 1vw) * 10 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn.saitama {
    top: min(var(--vw, 1vw) * 327 / 1300 * 100, 327px);
    left: min(var(--vw, 1vw) * 200 / 1300 * 100, 200px);
  }
}

.mf-search-area .map-btn.tokyo {
  position: absolute;
  bottom: 0;
  right: calc(var(--vw, 1vw) * 10 / 768 * 100);
}

@media screen and (min-width: 768px) {
  .mf-search-area .map-btn.tokyo {
    bottom: 0;
    right: min(var(--vw, 1vw) * 60 / 1300 * 100, 60px);
  }
}

.mf-search-area .search-btn {
  margin-top: calc(var(--vw, 1vw) * 50 / 768 * 100);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .mf-search-area .search-btn {
    width: min(var(--vw, 1vw) * 500 / 1300 * 100, 500px);
    margin: min(var(--vw, 1vw) * 68 / 1300 * 100, 68px) auto min(var(--vw, 1vw) * 180 / 1300 * 100, 180px);
  }
}

.mf-search-area .search-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--vw, 1vw) * 20 / 768 * 100);
  height: calc(var(--vw, 1vw) * 131.072 / 768 * 100);
  padding: 0 calc(var(--vw, 1vw) * 30 / 768 * 100);
  font-size: calc(var(--vw, 1vw) * 36.864 / 768 * 100);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #154B2D;
  border: #E1E1E1 1px solid;
  border-radius: calc(var(--vw, 1vw) * 32.768 / 768 * 100);
  box-shadow: calc(var(--vw, 1vw) * 14 / 768 * 100) calc(var(--vw, 1vw) * 10 / 768 * 100) 0px calc(var(--vw, 1vw) * 4 / 768 * 100) #E6E6E6;
}

@media screen and (min-width: 768px) {
  .mf-search-area .search-btn a {
    gap: min(var(--vw, 1vw) * 10 / 1300 * 100, 10px);
    height: min(var(--vw, 1vw) * 96 / 1300 * 100, 96px);
    padding: 0 min(var(--vw, 1vw) * 30 / 1300 * 100, 30px);
    font-size: clamp(20px, min(var(--vw, 1vw) * 24 / 1300 * 100, 24px), min(var(--vw, 1vw) * 24 / 1300 * 100, 24px));
    border-radius: min(var(--vw, 1vw) * 16 / 1300 * 100, 16px);
    box-shadow: min(var(--vw, 1vw) * 7 / 1300 * 100, 7px) min(var(--vw, 1vw) * 5 / 1300 * 100, 5px) 0px min(var(--vw, 1vw) * 2 / 1300 * 100, 2px) #E6E6E6;
  }

  .mf-search-area .search-btn a:hover {
    opacity: 0.7;
  }

  .mf-search-area .search-btn a:hover svg {
    transform: translateX(5px);
  }
}

.mf-search-area .search-btn a svg {
  width: calc(var(--vw, 1vw) * 40 / 768 * 100);
  height: calc(var(--vw, 1vw) * 40 / 768 * 100);
  background: #b98f2d;
  padding: calc(var(--vw, 1vw) * 8 / 768 * 100);
  border-radius: 50%;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .mf-search-area .search-btn a svg {
    width: min(var(--vw, 1vw) * 36 / 1300 * 100, 36px);
    height: min(var(--vw, 1vw) * 36 / 1300 * 100, 36px);
    padding: min(var(--vw, 1vw) * 8 / 1300 * 100, 8px);
    transition: transform 0.3s;
  }
}