.regionText{
  display: inline-block;
  padding: clamp(0px, 0.78vw, 15px) clamp(0px, 1.3vw, 25px);
  box-sizing: border-box;
}

.regionText.red{
  position: absolute;
  left: clamp(0px, 76.51vw, 1469px);
  top: clamp(0px, 7.5vw, 144px);
  background-color: rgba(231, 76, 60, 0.2);
  border: 1px solid #E74C3C;
}
.regionText.orange{
position: absolute;
left: clamp(0px, 76.51vw, 1469px);
top: clamp(0px, 15.26vw, 293px);
background-color: rgba(243, 156, 18, 0.2);
border: 1px solid #F39C12;
}
.regionText.yellow{
position: absolute;
left: clamp(0px, 68.69vw, 1319px);
top: clamp(0px, 27.13vw, 521px);
background-color: rgba(255, 202, 40, 0.2);
border: 1px solid #FFCA28;
}
.regionText.green{
position: absolute;
left: clamp(0px, 68.69vw, 1319px);
top: clamp(0px, 39.01vw, 749px);
background-color: rgba(46, 204, 113, 0.15);
border: 1px solid #2ECC71;
}
.regionText.sky{
position: absolute;
left: clamp(0px, 7.76vw, 149px);
top: 0;
background-color: rgba(0, 188, 212, 0.15);
border: 1px solid #00BCD4;
}
.regionText.blue{
position: absolute;
left: clamp(0px, 7.76vw, 149px);
top: clamp(0px, 11.92vw, 229px);
background-color: rgba(54, 126, 214, 0.15);
border: 1px solid #367ED6;
}
.regionText.violet{
position: absolute;
left: clamp(0px, 24.94vw, 479px);
top: clamp(0px, 11.92vw, 229px);
background-color: rgba(155, 89, 182, 0.15);
border: 1px solid #9B59B6;
}
.regionText.pink{
position: absolute;
left: clamp(0px, 7.76vw, 149px);
top: clamp(0px, 23.85vw, 458px);
background-color: rgba(236, 64, 122, 0.15);
border: 1px solid #EC407A;
}

.regionText.red,
.regionText.orange,
.regionText.blue,
.regionText.violet{
width: 15.62vw;
max-width: 300px;
}

.regionText.red .content-container .content,
.regionText.orange .content-container .content,
.regionText.blue .content-container .content,
.regionText.violet .content-container .content{
width: 45%;
}

.regionText.yellow,
.regionText.green,
.regionText.sky,
.regionText.pink{
width: 23.43vw;
max-width: 450px;
}

.regionText .content-container .content{
display: inline-block;
width: 30%;
}

.regionText .title{
  display: flex;
  align-items: center;
  font-size: clamp(0px, 1.64vw, 31.5px);
  line-height: normal;
  font-weight: bold;
}

.regionText .title::before{
  content: "";
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin-right: clamp(0px, 0.36vw, 7px);
}

.regionText.red .title::before{
background-color: rgba(231, 76, 60);
}
.regionText.orange .title::before{
background-color: rgba(243, 156, 18);
}
.regionText.yellow .title::before{
background-color: rgba(255, 202, 40);
}
.regionText.green .title::before{
background-color: rgba(46, 204, 113);
}
.regionText.sky .title::before{
background-color: rgba(0, 188, 212);
}
.regionText.blue .title::before{
background-color: rgba(54, 126, 214);
}
.regionText.violet .title::before{
background-color: rgba(155, 89, 182);
}
.regionText.pink .title::before{
background-color: rgba(236, 64, 122);
}

.regionText .content{
  font-size: clamp(0px, 1.25vw, 24px);
  line-height: clamp(0px, 2.03vw, 39px);
}

.regionText .content:hover{
  text-decoration: underline;
  cursor: pointer;
}

.region-container{
width: 84.37%;
max-width: 1920px;
margin: 0 auto clamp(0px, 4.94vw, 95px);
}

.region{
  font-size: clamp(0px, 2.5vw, 48px);
  font-weight: bold;
  line-height: normal;
  padding: clamp(0px, 1.04vw, 20px) 0;
  box-sizing: border-box;
  border-bottom: 2px solid #D9D9D9;
  margin: clamp(0px, 8.85vw, 170px) auto 0;
}
.flex-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
}
.store-info{
  width: 50%;
}
.store-info .prefecture{
  width: 10.98vw;
  max-width: 211px;
  height: 2.08vw;
  max-height: 40px;
  font-size: clamp(0px, 1.25vw, 24px);
  text-align: center;
  line-height: clamp(0px, 2.08vw, 40px);
  color: #fff;
  border-radius: clamp(0px, 1.56vw, 30px);
  margin-top: clamp(0px, 2.6vw, 50px);
}
.flex-box.red .prefecture{
  background-color: #E74C3C;
}
.flex-box.orange .prefecture{
  background-color: #F39C12;
}
.flex-box.yellow .prefecture{
  background-color: #FFCA28;
}
.flex-box.green .prefecture{
  background-color: #2ECC71;
}
.flex-box.sky .prefecture{
  background-color: #00BCD4;
}
.flex-box.blue .prefecture{
  background-color: #367ED6;
}
.flex-box.violet .prefecture{
  background-color: #9B59B6;
}
.flex-box.pink .prefecture{
  background-color: #EC407A;
}
.store-info .store-name{
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0px, 2.08vw, 40px);
  font-weight: bold;
  color: #367ED6;
  line-height: normal;
  margin-top: clamp(0px, 0.83vw, 16px);
  height: clamp(0px, 6.04vw, 116px);
}
.store-info .zip-code{
  font-size: clamp(0px, 1.25vw, 24px);
  margin-top: clamp(0px, 1.04vw, 20px);
  line-height: normal;
}
.store-info .address{
  font-size: clamp(0px, 1.25vw, 24px);
  margin-top: clamp(0px, 0.41vw, 8px);
  line-height: normal;
  height: clamp(0px, 3.54vw, 68px);
}
.store-info .btn-container{
  display: flex;
  flex-direction: row;
  margin-top: clamp(0px, 1.04vw, 20px);
}
.store-info .tel{
  font-family: "Roboto", sans-serif;
  width: 13.02vw;
  max-width: 250px;
  height: 2.6vw;
  max-height: 50px;
  font-size: clamp(0px, 1.25vw, 24px);
  border-radius: clamp(0px, 0.5vw, 10px);
  background-color: #367ED6;
  color: #fff !important;
  border: 1px solid #367ED6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: clamp(0px, 0.83vw, 16px);
}
.store-info .tel img{
  width: 1.04vw;
  max-width: 20px;
  margin-right: clamp(0px, 0.2vw, 4px);
}
.store-info .map-link{
  width: 13.02vw;
  max-width: 250px;
  height: 2.6vw;
  max-height: 50px;
  font-size: clamp(0px, 1.25vw, 24px);
  border-radius: clamp(0px, 0.5vw, 10px);
  background-color: #fff;
  color: #367ED6 !important;
  border: 1px solid #367ED6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.store-info .map-link img{
  width: 1.14vw;
  max-width: 22px;
  margin-right: clamp(0px, 0.2vw, 4px);
}
.store-info .store-info-inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(0px, 1.3vw, 25px);
  box-sizing: border-box;
  width: 39.06vw;
  max-width: 750px;
  height: 6.71vw;
  max-height: 129px;
  background-color: #F7F9FA;
  margin-top: clamp(0px, 1.04vw, 20px);
}
.store-info .store-info-inner .handling-title{
  font-size: clamp(0px, 1.25vw, 24px);
  font-weight: bold;
  color: #367ED6;
  margin-bottom: clamp(0px, 0.5vw, 10px);
}
.store-info .store-info-inner .products{
  font-size: clamp(0px, 1.25vw, 24px);
  line-height: normal;
}
.store-info .store-info-inner .note{
  font-size: clamp(0px, 1.25vw, 24px);
  line-height: normal;
}
.map{
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: clamp(0px, 58.17vw, 1117px);
  margin: clamp(0px, 4.94vw, 95px) auto 0;
}
svg {
  position: absolute;
  width: clamp(0px, 57.5vw, 1105px); 
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
svg g{
  opacity: 0.7;
}
.interactive-g {
  transition: transform 1s ease-out;
  cursor: pointer;
}
.interactive-g:hover {
  opacity: 1;
}

@media screen and (max-width: 750px){
  .map{
    height: auto;
    margin: 0;
  }
  svg {
    position: relative;
    width: 87%;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  .store-info{
    width: 100%;
  }
  .store-info:nth-child(1) .prefecture{
    margin-top: 3.2vw;
  }
  .regionText{
    margin: 2.6vw auto 0;
    padding: 5.06vw 8.8vw;
  }
  .regionText.red,
  .regionText.orange,
  .regionText.yellow,
  .regionText.green,
  .regionText.sky,
  .regionText.blue,
  .regionText.violet,
  .regionText.pink{
    position: initial;
    display: flex;
    flex-direction: column;
    width: 87%;
    max-width: none;
  }
  .regionText .title{
    font-size: 5.33vw;
  }
  .regionText .content{
    font-size: 4.8vw;
    line-height: normal;
  }
  .regionText .title::before{
    width: 4.53vw;
    height: 4.53vw;
  }
  .region{
    font-size: 6.4vw;
    border-bottom: 1px solid #D9D9D9;
  }
  .store-info .prefecture{
    width: 33.33vw;
    height: 8vw;
    font-size: 4.8vw;
    line-height: 8vw;
    border-radius: 4vw;
    margin-top: 10.66vw;
  }
  .store-info .store-name{
    height: 15vw;
    font-size: 5.33vw;
    margin-top: 3.2vw;
  }
  .store-info .zip-code{
    font-size: 4.26vw;
    margin-top: 3.2vw;
  }
  .store-info .address{
    font-size: 4.26vw;
    margin-top: 1.86vw;
    height: auto;
  }
  .store-info .btn-container{
    margin-top: 3.2vw;
  }
  .store-info .tel{
    flex-direction: column;
    width: 42.66vw;
    max-width: none;
    height: 16.26vw;
    max-height: none;
    font-size: 4.26vw;
    border-radius: 2.66vw;
  }
  .store-info .tel img{
    width: 5.86vw;
    margin-right: 0;
    margin-bottom: 0.8vw;
  }
  .store-info .map-link{
    flex-direction: column;
    width: 42.66vw;
    max-width: none;
    height: 16.26vw;
    max-height: none;
    font-size: 4.26vw;
    border-radius: 2.66vw;
  }
  .store-info .map-link img{
    width: 5.86vw;
    margin-right: 0;
    margin-bottom: 0.8vw;
  }
  .store-info .store-info-inner{
    padding: 0 3.2vw;
    width: 100%;
    max-width: none;
    height: 28.26vw;
    max-height: none;
    margin-top: 3.2vw;
  }
  .store-info .store-info-inner .handling-title{
    font-size: 4.26vw;
  }
  .store-info .store-info-inner .products{
    font-size: 4.26vw;
  }
  .store-info .store-info-inner .note{
    font-size: 4.26vw;
  }
}