html, body {
  text-color: #111111;
  font-family: 'Raleway', 'Noto Sans JP', sans-serif;
}

.colorful1 {
  padding-bottom: 100px;
  height: 900px;
  background-image: url('images/colorful1.png');
  background-repeat: no-repeat;
  background-size: 1000px auto;
  background-position: top right;
}

@media screen and (max-width: 639px) {
	.colorful1 {
    margin-bottom: 100px;
    height: 550px;
    background-size: 650px auto;
    background-position: top center;
  }
}

.colorful2 {
  padding: 100px 0;
  background-image: url('images/colorful2.png');
  background-repeat: no-repeat;
  background-size: 600px auto;
  background-position: center left;
}

@media screen and (max-width: 639px) {
	.colorful2 {
    background-position: top center;
  }
}

.colorful3 {
  padding: 100px 0;
  background-image: url('images/colorful3.png');
  background-repeat: no-repeat;
  background-size: 700px auto;
  background-position: center right;
}

@media screen and (max-width: 639px) {
	.colorful3 {
    background-position: top center;
  }
}

.colorful4 {
  padding: 100px 0;
  background-image: url('images/colorful4.png');
  background-repeat: no-repeat;
  background-size: 600px auto;
  background-position: center left;
}

@media screen and (max-width: 639px) {
	.colorful4 {
    padding: 180px 0 0 0;
    background-position: top center;
  }
}

.colorful5 {
  background-image: url('images/colorful5.png');
  background-repeat: no-repeat;
  background-size: 1200px auto;
  background-position: center left;
}

body {
  background-image: url('images/colorful6.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}

@media screen and (max-width: 639px) {
	body {
    background-size: 1200px auto;
  }
}