@charset "utf-8";

/*
1.白
2.オレンジ
3.オレンジ
4.紫
5.紫
6.白->グレー
7.グレー
8.白



*/


.content01 {
  height: 150px;
  width: 100%;
  background-color: #ffffff;  /* 白 */
}
.content02 {
  height: auto;
  width: 100%;
  background-color: #e9b829;  /* オレンジ */ 
}


.content03 {
  height: 300px;
  width: 100%;
  background-color: #e9b829;  /* オレンジ */ 
}
.content04 {
  height: auto;
  width: 100%;
  background-color: #310f29;  /* 紫 */ 
}


.content05 {
  height: 300px;
  width: 100%;
  background-color:  #310f29;  /* 紫 */  
}

.content06 {
  height: auto;
  width: 100%;
  background-color:  #F1E9DA;  /* グレー */  
}
.content07 {
  height: 300px;
  width: 100%;
  background-color:  #F1E9DA;  /* グレー */  
}
.content08 {
  height: auto;
  width: 100%;
  background-color:  #ffffff;  /* 白 */  
}




.content {
  overflow: hidden; /* はみ出た部分は表示しない */
}
.content01{
  position: relative;
  height: 150px;
  width: 100%;
  background-color: #ffffff;  /* 白 */
}
.content01::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #e9b829;  /* オレンジ */ 
  border-bottom: 60px solid #e9b829;  /* オレンジ */ 
}


.content03{
  position: relative;
	margin-top: -100px;
  height: 200px;
  width: 100%;
  background-color: #e9b829;  /* オレンジ */
}
.content03::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #310f29;  /* 紫 */ 
  border-bottom: 60px solid #310f29;  /* 紫 */ 
}


.content05{
  position: relative;
	margin-top: -100px;
  height: 200px;
  width: 100%;
  background-color: #310f29;  /* 紫 */ 
}
.content05::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #F1E9DA;  /* グレー */ 
  border-bottom: 60px solid #F1E9DA;  /* グレー */ 
}


.content07{
  position: relative;
	margin-top: -100px;
  height: 200px;
  width: 100%;
  background-color: #F1E9DA;  /* グレー */ 
}
.content07::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #ffffff;  /* 白 */ 
  border-bottom: 60px solid #ffffff;  /* 白 */ 
}