.trial-message-box {
  position: absolute;
  font-size: 15px;
  padding: 10px 20px;
  text-align: left;
  vertical-align: middle;
  color: blue;                 /* 文字色 */
  background-color: lightblue; /* 背景色 */
  border: 2px solid blue;      /* 枠線 */
  border-radius: 10px;         /* 角を丸く */
  padding: 10px;               /* 内側余白 */
  z-index: 999;                /* ほぼ最前面 */
}

.trial-message-rbox {
  position: absolute;
  font-size: 15px;
  padding: 10px 20px;
  text-align: left;
  vertical-align: middle;
  color: red;                  /* 文字色 */
  background-color: yellow;    /* 背景色 */
  border: 2px solid orange;       /* 枠線 */
  border-radius: 10px;         /* 角を丸く */
  padding: 10px;               /* 内側余白 */
  z-index: 999;                /* ほぼ最前面 */
}

.target-id{
  outline: 3px solid red;  
  outline-offset: 4px; 
}

.red-box01 
  {
  border: 3px solid red;   /* 枠の色と太さ */
  background-color: transparent; /* 中身を透明に */
  pointer-events: none;      /* 下の要素をクリック可能にする */
  position: absolute;
  z-index: 999;
}

.red-circle01 {
  border: 4px dotted red;   /* 点線の太さ・種類・色 */
  background-color: transparent; /* 中身を透明に */
  border-radius: 40%;         /* 円形にする */
  position: absolute;
  z-index: 999;
}