.cityArea{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto ;
    text-align: center;
    margin-bottom: 5px;
}
.cityArea.active .bottomtriangle{
    transform: rotate(180deg);
}
.cityArea:nth-last-child(2){
    margin-bottom: 70px;
}
.bottomtriangle{
    transition: 0.25s ease-in-out;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 7.5px 0 7.5px;
    border-color: #73d5f5 transparent transparent transparent;
    line-height: 0px;
    _border-color: #73d5f5 #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.cityName{
    padding: 10px 0;
    font-weight: 900;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.cityName::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    width: 31%;
    height: 1px;
    background-color: #000;
}
.cityName::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 2.5%;
    width: 31%;
    height: 1px;
    background-color: #000;
}
.cityArea:nth-child(6){
    margin-bottom: 100px;
}
.storeInfo{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.storeInfo  p{
    text-align: left;
    width: 75%;
    background-color: #f5f5f5;
    padding: 4% 12px;
    border-radius: 7px;
    margin-right: 1.5%;
    line-height: 1.25;
    letter-spacing: 1.5px;
}
.storeInfo p span{
    font-size: 15px;
    padding-left: 10px;
    display: inline-block;
    text-decoration: none;
}
.storeInfo a{
    display: block;
    width: 10%;
    margin-right: 1.5%;
    cursor: pointer;
}


#map{
    display: none;
    max-width: 1200px;
    width: 90%;
    height: 450px;
    overflow: hidden;
    margin:0 auto;
    margin-bottom: 75px;
}

/*--------------------rwd-------------------*/
@media screen and (min-width: 0px){

.storeInfo p,
.storeInfo a:nth-child(2),
.storeInfo a:nth-child(3)  {
    float: left;
    margin-bottom: 5px;
}


}

@media screen and (min-width: 435px){

.storeInfo p {
    padding: 6% 12px;
}

}

@media screen and (min-width: 535px){

.storeInfo p {
    padding: 7% 12px;
}

}



@media screen and (min-width: 650px){

.cityArea {
    display: flex;
    flex-wrap: wrap;
}
.cityName {
    width: 100%;
}
.storeInfo {
    margin:0 2.5%;
    margin-bottom: 5px;
    width: 45%;
    display: flex;
}
.storeInfo .telphone{
    display: none;
}

.storeInfo p {
    width: 82.5%;
    margin-right: 2.5%;
    float: left;
    padding: 6% 12px;
}
.storeInfo a {
    width: 12.5%;
    pointer-events: none;
    float: right;
}
.storeInfo{
    cursor: pointer;
}

.cityArea:nth-child(n+4) .storeInfo{
    display: none;
}
.cityArea:nth-child(n+4) .bottomtriangle{
    transform: rotate(180deg);
}
.cityArea.active:nth-child(n+4) .bottomtriangle{
    transform: rotate(0deg);
}

#map {
    display: block;
}

.locationImg{
    /*opacity: 0.5;*/
}
.locationImg.active{
    /*opacity: 1;*/
}

.cityArea:nth-child(6){
    margin-bottom: 20px;
}

.cityName::before,
.cityName::after {
    width: 40%;
}

.cityName::after{
    right: 0%;
}


}

@media screen and (min-width: 768px){

.storeInfo p {
    padding: 12.5px 12px;
    width: 70%;
}
.storeInfo a {
    width: 70px;
}
.locationImg {
    /*opacity: 0.45;*/
}



}    

@media screen and (min-width: 1024px){

.storeInfo {
    margin:5px 1.25% ;
    width: 30.83%;
}
.storeInfo p {
    padding: 3px 15px;
    width: 77.5%;
}
.storeInfo a {
    width: 50px;
}

}