body {
    width: 100%;
    margin: 0 auto;
    width: 65%;
    max-width: 800px;
    margin-bottom: 30px;
}

img {
    width: 100%;
    vertical-align: bottom;

}

.pc {
    position: relative;
}
.d1 {
    position: absolute;
    width: 30%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 7.5%;
}
.d2 {
    position: absolute;
    width: 30%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 7.5%;
}
.d3 {
    position: absolute;
    width: 30%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top:9.8%;
}
.d4 {
    position: absolute;
    width: 30%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:9.8%;
}
.d5 {
    position: absolute;
    width: 68%;
    left: 22.5%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 21.5%;
}
.d6 {
    position: absolute;
    width: 65%;
    left: 67%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 21.5%;
}
.d7 {
    position: absolute;
    width: 55%;
    left: 85%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 26.7%
}
.d8 {
    position: absolute;
    width: 65%;
    left: 35%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 26.2%;
}
.d9 {
    position: absolute;
    width: 60%;
    left: 22%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 31%
}
.d10 {
    position: absolute;
    width: 55%;
    left: 70%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 31%;
}
.d11 {
    position: absolute;
    width: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 37.4%;
}
.d12 {
    position: absolute;
    width: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 63.2%;
}
.d13 {
    position: absolute;
    width:40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 93%;
}
.d14 {
    position: absolute;
    width: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 95.5%;
}


.phone {
    position: relative;
}
.d21 {
    position: absolute;
    width: 30%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 5.9%;
}
.d22 {
    position: absolute;
    width: 30%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 5.9%;
}
.d23 {
    position: absolute;
    width: 30%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top:7.3%;
}
.d24 {
    position: absolute;
    width: 30%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:7.3%;
}
.d31 {
    position: absolute;
    width: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 35%;
}
.d32 {
    position: absolute;
    width: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 59.5%;
}
.d33 {
    position: absolute;
    width:40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 95.6%;
}
.d34 {
    position: absolute;
    width: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 97%;
}



@media screen and (max-width:1080px){
    body{
        width: 100%;
    }
    
    img{
        width: 100%;
    }
    .pc{
        display: none;
    }
}
    

@media screen and (min-width:1081px){
    body{
        width: 100%;
    }

    img{
        width: 100%;
    }
    .phone{
        display: none;   
    }
}