.section {
  display: flex;
  width: 100vw;
  height: 100vh;
/*  gap: 20px;*/
/*  max-width: 450px;*/
  overflow-x: auto;
  scroll-snap-type: x proximity;
/*  scroll-snap-type: x mandatory;*/
/*  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);*/
/*  -webkit-overflow-scrolling: touch;*/
/*  scroll-padding: 1rem;*/
/*  padding: 1rem;*/
/*  margin: 3rem auto 0;*/
  border-radius: 0px;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
}

.section-SP {
  overflow: auto;
  scroll-snap-type: y proximity;
  height: 100%;
}

.area {
/*  scroll-snap-align: start;*/
  height: 100%;
}

.section__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
  height: 100vh;
  scroll-snap-align: start;
  background-color: #e4e9e2;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;

}

.section__item:nth-child(2n) {
/*  background: #d8ddd5;*/
background:rgba(0,0,0,0);
	z-index: -10;

}



.section__item-SP {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
/*  width: 100%;*/
  height: 100vh;
/*  height: 350px;*/
  scroll-snap-align: start;
  background-color: #e7decc;
  font-size: 1.5rem;
/*padding: 0px 0px 0px 0px;
margin: -200px 0px 0px 0px;*/
}

.section__item-SP:nth-child(2n) {
  background: #d8ddd5;
}













/* Other styles */
body {
/*  font-family: "Arial";*/
/*  padding: 1rem;*/
  background-color: #f7f7f7;
}

.bg-1 {
  background-color: #f1c2c6;
}

.bg-2 {
  background-color: #dac2f1;
}

.bg-3 {
  background-color: #ccf1c2;
}

.bg-4 {
  background-color: #c2e9f1;
}

.bg-5 {
  background-color: #f1ebc2;
}