@charset "UTF-8";

@media screen and (min-width: 768px) {
.ppp_box{
position: relative;
width: 500px;
}

.ppp_box .pppmap{
position: relative;
z-index: 0;
}

.ppp_box .cityname{
text-align: center;
font-size: 17px;
line-height: 1;
font-weight: 400;
color: #086DB0;
margin: 0 0 3px;
}

.ppp_box .no_box1{
width: 28px;
height: 28px;
border: 1px solid #086DB0;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
line-height: 1;
}

.ppp_box .no_box2{
width: 45px;
height: 45px;
border: 1px solid #086DB0;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}

.ppp_box .no_box3{
width:60px;
height:60px;
border: 1px solid #086DB0;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}

.ppp_box .no_box4{
width:85px;
height:85px;
border: 1px solid #086DB0;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: bold;
}

.ppp_box .toyooka{
position: absolute;
z-index: 1;
top: 85px;
right: 230px;
}

.ppp_box .shiso{
position: absolute;
z-index: 1;
top: 260px;
left: 75px;
}

.ppp_box .aioi{
position: absolute;
z-index: 1;
top: 415px;
left: 67px;
}

.ppp_box .ako{
position: absolute;
z-index: 1;
top: 425px;
left: 9px;
}

.ppp_box .himeji{
position: absolute;
z-index: 1;
top: 320px;
left: 135px;
}

.ppp_box .takasago{
position: absolute;
z-index: 1;
top: 430px;
left: 205px;
}

.ppp_box .kasai{
position: absolute;
z-index: 1;
top: 325px;
left: 240px;
}

.ppp_box .akashi{
position: absolute;
z-index: 1;
top: 480px;
left: 254px;
}

.ppp_box .miki{
position: absolute;
z-index: 1;
top: 410px;
right: 150px;
}

.ppp_box .hyogo{
position: absolute;
z-index: 1;
top: 140px;
right: 65px;
}

.ppp_box .sanda{
position: absolute;
z-index: 1;
top: 350px;
right: 80px;
}

.ppp_box .kobe{
position: absolute;
z-index: 1;
top: 485px;
right: 60px;
}


}





@media screen and (max-width: 767px) {
.ppp_box{
position: relative;
}

.ppp_box .pppmap{
position: relative;
z-index: 0;
}

.ppp_box .cityname{
text-align: center;
font-size: 4.4vw;
line-height: 1;
color: #086DB0;
margin: 0 0 5px;
}

.ppp_box .no_box1{
width: 7vw;
height: 7vw;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4vw;
font-weight: bold;
line-height: 1;
}

.ppp_box .no_box2{
width: 9vw;
height: 9vw;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw;
font-weight: bold;
}

.ppp_box .no_box3{
width: 10vw;
height: 10vw;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw;
font-weight: bold;
}

.ppp_box .no_box4{
width: 16vw;
height: 16vw;
background: #FFF;
color: #086DB0;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7vw;
font-weight: bold;
}

.ppp_box .toyooka{
position: absolute;
z-index: 1;
top: 9%;
right: 44%;
}

.ppp_box .shiso{
position: absolute;
z-index: 1;
top: 32%;
left: 14%;
}

.ppp_box .aioi{
position: absolute;
z-index: 1;
bottom: 39%;
left: 15%;
}

.ppp_box .ako{
position: absolute;
z-index: 1;
bottom: 36%;
left: -1%;
}

.ppp_box .himeji{
position: absolute;
z-index: 1;
bottom: 47%;
left: 27%;
}

.ppp_box .takasago{
position: absolute;
z-index: 1;
bottom: 37%;
right: 49%;
}

.ppp_box .kasai{
position: absolute;
z-index: 1;
bottom: 51%;
left: 47%;
}

.ppp_box .akashi{
position: absolute;
z-index: 1;
bottom: 29%;
left: 54%;
}

.ppp_box .miki{
position: absolute;
z-index: 1;
bottom: 41%;
right: 27%;
}

.ppp_box .hyogo{
position: absolute;
z-index: 1;
top: 15%;
right: 9%;
}

.ppp_box .sanda{
position: absolute;
z-index: 1;
bottom: 48%;
right: 11%;
}

.ppp_box .kobe{
position: absolute;
z-index: 1;
bottom: 32%;
right: 8%;
}


}