@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Bg

//////////////////////////////////////////////////////////////////////////////// */
#mainBg {
  background-image: linear-gradient(45deg, rgba(234,85,32,1) 10%, rgba(227,148,61,1) 40%, rgba(0,134,205,1) 60%, rgba(0,78,162,1) 80%);
  position: fixed;
  background-size: 200% 200%;
  background-position: 0% 100%;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  animation: mainBg 6s linear 0s alternate infinite;
  z-index: -1;
}
@keyframes mainBg {
  0%   { background-position: 0% 100%;}
  100% { background-position: 100% 0%;}
}
#mainBg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/noise.png") repeat center center;
  background-size: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.triangle {
  position: absolute;
  aspect-ratio: 1 / 1;
}
.triangle01 {
  top: 0;
  left: 0;
  width: 28vw;
  background-image: linear-gradient(45deg, rgba(0,91,172,1) 0%, rgba(237,109,31,1) 10%, rgba(0,150,217,1) 30%, rgba(0,91,172,1) 50%, rgba(237,109,31,1) 60%, rgba(0,150,217,1) 80%, rgba(0,91,172,1) 100%);
  background-size: 200% 200%;
  background-position: 0% 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  z-index: 10;
  
  animation: triangle01 8s linear 0s infinite;
}
@keyframes triangle01 {
  0%   { background-position: 0% 100%;}
  100% { background-position: 100% 0%;}
}
@keyframes triangle02 {
  0%   { background-position: 100% 0%;}
  100% { background-position: 0% 100%;}
}
@keyframes triangle03 {
  0%   { background-position: 0% 100%;}
  100% { background-position: 0% 0%;}
}
.triangle02 {
  top: 0;
  left: 0;
  width: 56vw;
/*  background-image: linear-gradient(220deg, rgba(237,109,25,1) 25%, rgba(237,165,136,1) 36%, rgba(0,172,235,1) 46%, rgba(44,65,152,1) 80%);*/
  
  background-image: linear-gradient(225deg,
    rgba(44,65,152,1) 0%,
    rgba(237,109,25,1) 10%,
    rgba(237,165,136,1) 20%,
    rgba(0,172,235,1) 40%,
    rgba(44,65,152,1) 50%,
    rgba(237,109,25,1) 60%,
    rgba(237,165,136,1) 70%,
    rgba(0,172,235,1) 90%,
    rgba(44,65,152,1) 100%);
  background-size: 200% 200%;
  background-position: 0% 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  z-index: 2;
  
  animation: triangle01 5s linear 0s infinite;
}

.triangle03 {
  top: 22vw;
  left: 0;
  width: 34vw;
/*  background-image: linear-gradient(220deg, rgba(240,131,0,1) 50%, rgba(243,165,139,1) 60%, rgba(0,121,195,1) 80%);*/
  
  background-image: linear-gradient(225deg, rgba(0,121,195,1) 0%, rgba(240,131,0,1) 10%, rgba(243,165,139,1) 30%, rgba(0,121,195,1) 50%, rgba(240,131,0,1) 60%, rgba(243,165,139,1) 80%, rgba(0,121,195,1) 100%);
  background-size: 200% 200%;
  background-position: 100% 0%;
  clip-path: polygon(0 0, 0% 100%, 50% 50%);
  z-index: 3;
  
  animation: triangle02 5s linear 0s infinite;
}

.triangle04 {
  top: 5vw;
  right: 0;
  width: 100vw;
  aspect-ratio: 1 / 2;
/*  background-image: linear-gradient(0deg, rgba(240,131,0,1) 20%, rgba(0,146,216,1) 64%, rgba(0,91,172,1) 80%); */
  
  background-image: linear-gradient(0deg, rgba(0,91,172,1) 0%, rgba(240,131,0,1) 10%, rgba(0,146,216,1) 30%, rgba(0,91,172,1) 50%, rgba(240,131,0,1) 60%, rgba(0,146,216,1) 80%, rgba(0,91,172,1) 100%);
  background-size: 100% 200%;
  background-position: 0% 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  mix-blend-mode: overlay;
  
  animation: triangle03 5s linear 0s infinite;
}

.triangle05 {
  top: 55vw;
  right: 0vw;
  width: 100vw;
/*  background-image: linear-gradient(0deg, rgba(237,109,31,1) 15%, rgba(0,175,236,1) 30%, rgba(29,80,162,1) 45%); */
  
  background-image: linear-gradient(0deg, rgba(29,80,162,1) 0%, rgba(237,109,31,1) 10%, rgba(0,175,236,1) 30%, rgba(29,80,162,1) 50%, rgba(237,109,31,1) 60%, rgba(0,175,236,1) 80%, rgba(29,80,162,1) 100%);
  background-size: 100% 200%;
  background-position: 0% 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: triangle03 8s linear 0s infinite;
}



.sphere {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}
.sphere::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
}

.sphere01 {
  background-image: linear-gradient(45deg, rgba(234,85,32,1) 10%, rgba(227,148,61,1) 40%, rgba(0,134,205,1) 60%, rgba(0,78,162,1) 80%);
  top: 23vw;
  right: -5vw;
  width: 52vw;
  height: 52vw;
  z-index: 5;
}
.sphere01::after {
  background: url("../images/bg_sphere01.svg") no-repeat center center;
  background-size: cover;
}
.sphere02 {
  background-image: linear-gradient(135deg, rgba(234,85,32,1) 10%, rgba(227,148,61,1) 40%, rgba(0,134,205,1) 60%, rgba(0,78,162,1) 80%);
  top: 22vw;
  left: 2vw;
  width: 30vw;
  height: 30vw;
  z-index: 24;
}
.sphere02::after {
  background: url("../images/bg_sphere02.svg") no-repeat center center;
  background-size: cover;
}

.sphere03 {
  background-image: linear-gradient(135deg, rgba(244,166,136,1) 0%, rgba(0,185,239,1) 100%);
  top: -5vw;
  left: 29vw;
  width: 11vw;
  height: 11vw;
  z-index: 10;
  opacity: 0.5;
}


.ellipse {
  position: absolute;
}
.ellipse > div {
  aspect-ratio: 1 / 1;
  clip-path: ellipse(16% 50% at 50% 50%);
}
.ellipse01 {
  top: 1vw;
  left: 25vw;
  z-index: 20;
}
.ellipse01 > div {
  width: 30vw;
  transform: rotate(70deg);
}
.ellipse01 > div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(240,131,0,1) 30%, rgba(243,165,139,1) 50%, rgba(0,121,195,1) 70%);
  
  animation: sun 20s linear 0s infinite;
}
.ellipse02 {
  top: 9vw;
  left: 31vw;
  z-index: 19;
}
.ellipse02 > div {
  width: 23vw;
  transform: rotate(70deg);
}
.ellipse02 > div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(240,131,0,1) 30%, rgba(243,165,139,1) 50%, rgba(0,121,195,1) 70%);
  
  animation: sun 20s linear 0s infinite;
}


.sun {
  position: absolute;
  top: 4vw;
  right: 20vw;
  z-index: 10;
}
.sun > div {
  width: 14vw;
  aspect-ratio: 1 / 1;
  background: url("../images/bg_sun.svg") no-repeat center center;
  background-size: contain;
  animation: sun 20s linear 0s infinite;
}
@keyframes sun {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

.star {
  position: absolute;
  background: url("../images/bg_star.svg") no-repeat center center;
  background-size: contain;
  aspect-ratio: 1 / 1;
}
.star01 {
  top: 4vw;
  left: 45vw;
  width: 3vw;
  z-index: 12;
}
.star02 {
  top: 10vw;
  left: 3vw;
  width: 2vw;
  z-index: 12;
}


.moon {
  position: absolute;
  background: url("../images/bg_moon.svg") no-repeat center center;
  background-size: contain;
  aspect-ratio: 1 / 1;
  top: 14vw;
  left: 3vw;
  width: 8vw;
  z-index: 12;
}


.cloud {
  position: absolute;
  z-index: 10;
}
.cloud01 {
  top: 26vw;
  right: 25vw;
  width: 24vw;
  aspect-ratio: 100/18.67;
  background: url("../images/bg_cloud01.svg") no-repeat center center;
  z-index: 20;
}
.cloud02 {
  top: 46vw;
  left: -5vw;
  width: 40vw;
  aspect-ratio: 100/18.67;
  background: url("../images/bg_cloud02.svg") no-repeat center center;
  z-index: 25;
}

@media screen and (min-width: 821px) {
	

	
}
@media screen and (max-width: 820px) {

  .triangle01 { width: 64vw;}
  .triangle02 { width: 116vw;}
  .triangle03 { top: 42vw; width: 74vw;}
	.triangle04 { top: 95vw;}
  .triangle05 {
    top: 145vw; 
    right: -20vw;
    width: 140vw;
  }
  .sphere01 { top: 120vw; right: -25vw; width: 82vw; height: 82vw;}
  .sphere02 { top: 72vw; left: 6vw; width: 44vw; height: 44vw;}
  .sphere03 { top: -4vw; left: 27vw; width: 18vw; height: 18vw;}
  
  .ellipse01 {
    top: 20vw;
    left: 16vw;
  }
  .ellipse01 > div {
    width: 42vw;
  }
  .ellipse02 {
    top: 35vw;
    left: 26vw;
  }
  .ellipse02 > div {
    width: 28vw;
  }
  
  .sun {
    top: 26vw;
    right: 10vw;
  }
  .sun > div {
    width: 26vw;
  }
  
  .star01 {
    top: 6vw;
    left: 61vw;
    width: 7vw;
  }
  .star02 {
    top: 10vw;
    left: 5vw;
    width: 5vw;
  }
  
  .moon {
    top: 20vw;
    left: 8vw;
    width: 13vw;
  }
  
  .cloud01 {
    top: 56vw;
    right: 6vw;
    width: 34vw;
  }
  .cloud02 {
    top: 110vw;
    left: -5vw;
    width: 60vw;
  }
  .cloud03 {
    top: 196vw;
    right: -35vw;
    width: 100vw;
  }
  
}