/*背景の装飾レイアウトコンテナ*/
.custom-circlebg-surface{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;  
  z-index: 0;
}
/*右上背景の装飾1*/
.custom-circlebg-surface-right{
  position: absolute;
  width: 600px;
  height: 600px;
  z-index: 0;
  background-color: rgba(105,129,164, 0.1);
  border-radius:54% 46% 53% 47% / 55% 43% 65% 50%    ; /*卵型*/ 
  display: block;
  right: -100px;
  top:-200px;
  animation: fluffy1 10s ease infinite;  
}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  33% { transform:translateY(-20px) }
  66% { transform:translateY(20px) }
  100% { transform:translateY(0) }
}
/*右背景の装飾2*/
.custom-circlebg-surface-right2{
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 0;
  background-color: rgba(105,164,129, 0.2);
  border-radius: 52% 68% 65% 63% /  55% 43% 56% 68%  ; /*卵型*/ 
  display: block;
  right: -50px;
  top:300px;
  animation: fluffy2 15s ease infinite;    
}
@keyframes fluffy2 {
  0% { transform:translateY(0) }
  33% { transform:translateY(-20px) }
  66% { transform:translateY(20px) }
  100% { transform:translateY(0) }
}
/*左上背景の装飾2*/
.custom-circlebg-surface-left{
  position: absolute;
  width: 500px;
  height: 500px;
  z-index: 0;
  background-color: rgba(105,164,129, 0.1);
  border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
  display: block;
  left: -150px;
  top:-200px;
  animation: fluffy3 20s ease infinite;    
}
@keyframes fluffy3 {
  0% { transform:translateY(0) }
  33% { transform:translateY(-50px)}
  66% { transform:translateY(50px) }
  100% { transform:translateY(0)}
}
/*左下背景の装飾2*/
.custom-circlebg-surface-left2{
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 0;
  background-color: rgba(105,129,164, 0.2);
  border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
  display: block;
  left: -50px;
  top:500px;
  animation: fluffy4 20s ease infinite;    
}
@keyframes fluffy4 {
  0% { transform:translateY(0) }
  33% { transform:translateY(-15px)}
  66% { transform:translateY(15px) }
  100% { transform:translateY(0)}
}


/*1023px以下*/
@media screen and (max-width: 1023px){
    /*右背景の装飾1*/
    .custom-circlebg-surface-right{
      width: 400px;
      height: 400px;
      background-color: rgba(105,129,164, 0.1);
      border-radius:54% 46% 53% 47% / 55% 43% 65% 50%    ; /*卵型*/ 
      right: -100px;
      top:-100px;
    }
    /*右背景の装飾2*/
    .custom-circlebg-surface-right2{
      width: 200px;
      height: 200px;
      background-color: rgba(105,164,129, 0.1);
      border-radius: 52% 68% 65% 63% /  55% 43% 56% 68%  ; /*卵型*/ 
      right: -50px;
      top:300px;
    }
    /*左上背景の装飾2*/
    .custom-circlebg-surface-left{
      width: 400px;
      height: 400px;
      background-color: rgba(105,164,129, 0.1);
      border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
      left: -150px;
      top:-100px;
    }
    /*左下背景の装飾2*/
    .custom-circlebg-surface-right3{
      width: 100px;
      height: 100px;
      background-color: rgba(105,164,129, 0.2);
      border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
      left: -50px;
      top:600px;
    }
}

/*834px以下*/
@media screen and (max-width: 834px){
    /*右背景の装飾1*/
    .custom-circlebg-surface-right{
      width: 350px;
      height: 350px;
      background-color: rgba(105,129,164, 0.1);
      border-radius:54% 46% 53% 47% / 55% 43% 65% 50%    ; /*卵型*/ 
      right: -100px;
      top:-100px;
    }
    /*右背景の装飾2*/
    .custom-circlebg-surface-right2{
      width: 200px;
      height: 200px;
      background-color: rgba(105,164,129, 0.1);
      border-radius: 52% 68% 65% 63% /  55% 43% 56% 68%  ; /*卵型*/ 
      right: -50px;
      top:300px;
    }
    /*左上背景の装飾2*/
    .custom-circlebg-surface-left{
      width: 400px;
      height: 400px;
      background-color: rgba(105,164,129, 0.1);
      border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
      left: -150px;
      top:-100px;
    }
    /*左下背景の装飾2*/
    .custom-circlebg-surface-right3{
        width: 100px;
        height: 100px;
        background-color: rgba(105,164,129, 0.2);
        border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
        left: -50px;
        top:600px;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
    /*右背景の装飾1*/
    .custom-circlebg-surface-right{
        width: 250px;
        height: 250px;
        background-color: rgba(105,129,164, 0.1);
        border-radius:54% 46% 53% 47% / 55% 43% 65% 50%    ; /*卵型*/ 
        right: -100px;
        top:-100px;
    }
    /*右背景の装飾2*/
    .custom-circlebg-surface-right2{
        width: 150px;
        height: 150px;
        background-color: rgba(105,164,129, 0.1);
        border-radius: 52% 68% 65% 63% /  55% 43% 56% 68%  ; /*卵型*/ 
        right: -50px;
        top:300px;
    }
    /*左上背景の装飾2*/
    .custom-circlebg-surface-left{
      width: 300px;
      height: 300px;
      background-color: rgba(105,164,129, 0.1);
      border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
      left: -150px;
      top:-100px;
    }
    /*左下背景の装飾2*/
    .custom-circlebg-surface-right3{
        width: 100px;
        height: 100px;
        background-color: rgba(105,164,129, 0.2);
        border-radius: 52% 68% 65% 63% /  55% 72% 56% 68%  ; /*卵型*/ 
        left: -50px;
        top:500px;
    }
}