.p-button{
  width: 10px;
  height: 10px;
  background-color: #f0f7ff;
  border: 2px solid #51a5ff;
  border-radius: 50%;
  transition: transform 0.6s, background-color 0.6s ease; /* スムーズな移動のためのトランジション 移動時間*/
}
.p-button:hover{
  background-color: #51a5ff;
  border: 2px solid #51a5ff;
  transform: scale(1.4);
}
.p-button-active{
width: 0;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 25px solid #51a5ff;
}
.element.p-button {/*カーソルがポインターに変わるよう*/
  cursor: pointer;
}

/*==========　フォントの設定　以下　==========*/
.point-A{
  position: absolute;
  top: 280px;
  left: 48%;
  transform: rotate(0deg);
  z-index: 4;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-A{
    position: absolute;
    top: 180px;
    left: 48%;
    transform: rotate(0deg);
    z-index: 3;
  }
}
.point-B{
  position: absolute;
  top: 190px;
  left: 51%;
  transform: rotate(0deg);
  z-index: 3;  
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-B{
    position: absolute;
    top: 126px;
    left: 50%;
    transform: rotate(0deg);
    z-index: 3;  
  }
}
.point-C{
  position: absolute;
  top: 125px;
  left: 48%;
  transform: rotate(0deg);
  z-index: 3;  
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-C{
    position: absolute;
    top: 85px;
    left: 48%;
    transform: rotate(0deg);
    z-index: 3;  
  }
}

.point-D{
  position: absolute;
  top: 58px;
  left: 48%;
  transform: rotate(90deg);
  z-index: 3;  
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-D{
    position: absolute;
    top: 40px;
    left: 48%;
    transform: rotate(90deg);
    z-index: 3; 
  }
}
/*==========　フォントの設定　以下　==========*/



/*==========　フォントの設定　以下　==========*/
.point-G{
  position: absolute;
  top: 50px;
  left: 66%;
  transform: rotate(180deg);
  z-index: 3;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-G{
    position: absolute;
    top: 30px;
    left: 65%;
    transform: rotate(180deg);
    z-index: 3;
  }
}
.point-H{
  position: absolute;
  top: 280px;
  left: 66%;
  transform: rotate(0deg);
  z-index: 3;  
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-H{
    position: absolute;
    top: 184px;
    left: 65%;
    transform: rotate(0deg);
    z-index: 3;  
  }
}
.point-I{
  position: absolute;
  top: 230px;
  left: 76%;
  transform: rotate(240deg);
  z-index: 3;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-I{
    position: absolute;
    top: 155px;
    left: 74%;
    transform: rotate(240deg);
    z-index: 3;
  }
}
.point-J{
  position: absolute;
  top: 105px;
  left: 58%;
  transform: rotate(325deg);
  z-index: 3;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-J{
    position: absolute;
    top: 70px;
    left: 57%;
    transform: rotate(325deg);
    z-index: 3;
  }
}
.point-K{
  position: absolute;
  top: 112px;
  left: 84%;
  transform: rotate(330deg);
  z-index: 3;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .point-K{
    position: absolute;
    top: 75px;
    left: %;
    transform: rotate(330deg);
    z-index: 3;
  }
}
/*==========　フォントの設定　以下　==========*/