* {
	float: none;
	position: static;
}

img {
	max-width: 100%;
	height: auto;
}

* {
  margin: 0;
  padding: 0;
}

	html,main {
	display: inline-block;
	vertical-align: top;
	width:100vw;;
	}






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

.yellow {
	width:100vw;
	height: 140vh;
	background-color: #ffff00;
}
.blue {
	width:100vw;
	height: 125vh;
	background-color: #0000ff;
	
}
.red {
	width:100vw;
	height: 90vh;
	background-color: #ff0000;
}
.purple {
	width:100vw;
	height: 170vh;
	background-color: #c800ff;
}
.green {
	width:100vw;
	height: 160vh;
	background-color: #00ff00;
}

.red2 {
	width:100vw;
	height: 130vh;
	background-color: #ff0000;
}
.yellow2 {
	width:100vw;
	height: 130vh;
	background-color: #ffff00;
}


.top {/*?ediv*/
  position: relative;/*?e??e??hz?fu*/
  }

.top p {
  position: absolute;/*???e??hz?fu*/
  top: 7.5em;
  left: 2em;
  color: #0000ff;
  font-size:50px;
  }

.top img {
  width: 88.5%;
  margin-top: 12em;
  }



.top2 {/*?ediv*/
  position: relative;/*?e??e??hz?fu*/
  }

.top2 p {
  position: absolute;/*???e??hz?fu*/
  color: #0000ff;
  margin: 0 0 0 auto;
  width:100vw;
  }

.iframe-wrap {
  position: relative;
  width: 100vw;
  
}
 
.iframe-wrap iframe {
  height: 70vh;
  width: 70vw;
    position: absolute;
    top: 25vh;
    left: 39vw;
    transform: translate(-50vh, 2vw);
    -webkit-transform: translate(-50vh, 2vw);
    -ms-transform: translate(-50vh, 2vw);
}






.top3 {/*?ediv*/
  position: relative;/*?e??e??hz?fu*/
  }

.top3 p {
  position: absolute;/*???e??hz?fu*/
  top: 2.95em;
  left: 5.8em;
  color: #ff0000;
  font-size:38px;
  }

.top3 img {
  width: 88%;
  margin: auto;
  }



.grid {
  position: relative;/*?e??e??hz?fu*/
  display: grid;
  gap: 15vw;
  width:100vw;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}
.main {
  padding: 5%;
  margin: 17em 0 0 8em;
  width:55vw;
}

.side {
  padding: 5%;
  margin: 13em 0 0 5em;
  color: #ffffff;
  font-size:13px;
  width:30vw;

}


.side p {

  size:12;
}


.side h1 {

 font-size:180%;
}


.btn,--white
a.btn--white {
  color: #0000ff !important;
  background-color: #ffffff !important;
  width:250px;
  
}
.btn--white:hover,
a.btn--white:hover {
  color: #ffffff !important;
  background: #0000ff !important;
}

a.btn p {
  font-size:30px;
  position: relative;
  top: -15%;
  -webkit-transform: translateY(15%); /* Safari?p */
  transform: translateY(15%);
}


}









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

main {
	max-width: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.yellow {
	height: 200px;
	background-color: #ffff00;
}
.blue {
	height: 220px;
	background-color: #0000ff;
}
.red {
	height: 26vh;
	background-color: #ff0000;
}
.purple {
	height: 1020px;
	background-color: #c800ff;
}
.green {
	height: 965px;
	background-color: #00ff00;
}

.red2 {
	height: 800px;
	background-color: #ff0000;
}
.yellow2 {
	height: 800px;
	background-color: #ffff00;
}


.top {/*?ediv*/
  position: relative;/*�e?�e?�hz�fu*/
  }

.top p {
  position: absolute;/*??�e?�hz�fu*/
  top: 7.5em;
  left: 1.2em;
  color: #0000ff;
  font-size:14px;
  }

.top img {
  width: 90%;
  margin-top: 2em;
  }


.top2 {/*?ediv*/
  position: relative;
  }

.top2 p {
  position: absolute;
  color: #0000ff;
  margin: 0 0 0 auto;
  top: 1em;
  left: 2.35em;
  width:90%;
  height: 90%;
  }
  
.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(480 / 860 * 100%) 0 0; 
  
}
 
.iframe-wrap iframe {
  position: absolute;
  width: 90%;
  height: 95%;
  left: 3.1vw;
  top:1vh;

}



.top3 {
  /*?ediv*/
  position: relative;
  }

.top3 p {
  position: absolute;
  top: 1em;
  left: 3em;
  color: #ff0000;
  }

.top3 img {
  width: 90%;
  margin: auto;
  }


.grid {
  grid-template-columns: 1fr;
  position: relative;
  width: 100%;

 }

.main {
  position: absolute;
  top: 3.5vh;
  left: 6.9vw;
  padding: 0%;
  width: 95%;
  margin: 0 0 0 auto;
 
}

.side {

  position: absolute;
  top: 24em;
  left: 6.9vw;
  padding: 30px 15px 0px 0px;
  width: 90%;
  color: #ffffff;
  font-size:12px;
}


.side h1 {

 font-size:160%;
  margin: 0 0 0 auto;
}






.btn,--white
a.btn--white {
  color: #0000ff !important;
  background-color: #ffffff !important;
  width:250px;
  
}
.btn--white:hover,
a.btn--white:hover {
  color: #ffffff !important;
  background: #0000ff !important;
}

a.btn p {
	font-size: 25px;
    position: relative;
    top: -20%;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
}


}



@media screen and (max-width: 1024px) and (min-width: 421px) {

main {
	max-width: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.yellow {
    width: 100vw;
	height: 100vh;
	background-color: #ffff00;
}
.blue {
	height: 100vh;
	background-color: #0000ff;
}
.red {
	height: 300vh;
	background-color: #ff0000;
}
.purple {
	height: 300vh;
	background-color: #c800ff;
}
.green {
	height: 300vh;
	background-color: #00ff00;
}

.red2 {
	height: 300vh;
	background-color: #ff0000;
}
.yellow2 {
	height: 300vh;
	background-color: #ffff00;
}


.top p {
  position: absolute;/*??�e?�hz�fu*/
  top: 7.5em;
  left: 1.2em;
  color: #0000ff;
  font-size:14px;
  }

.top img {
  width: 90%;
  margin-top: 2em;
  }


.top2 {/*?ediv*/
  position: relative;/*�e?�e?�hz�fu*/
  }

.top2 p {
  position: absolute;/*??�e?�hz�fu*/
  color: #0000ff;
  margin: 0 0 0 auto;
  top: 2em;
  left: 4em;
  width:90%;
  height: 90%;
  }


.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(421 / 1024 * 100%) 0 0; /* ??????��??????�h??????�fP????�g??????????B */
  
}

.iframe-wrap iframe {
  position: absolute;
  width: 90%;
  height: 95%;
  left: 3.1vw;
  top:1vh;

}





.top3 {
  /*?ediv*/
  position: relative;/*�e?�e?�hz�fu*/
  }

.top3 p {
  position: absolute;
  top: 1em;
  left: 3em;
  color: #ff0000;
  }

.top3 img {
  width: 90%;
  margin: auto;
  }


.grid {
  grid-template-columns: 1fr;
  position: relative;/*�e?�e?�hz�fu*/
  width: 100%;

 }

.main {
  position: absolute;
  top: 4.5vh;
  left: 6.9vw;
  padding: 0%;
  width: 95%;
  margin: 0 0 0 auto;
 
}

.side {

  position: absolute;
  top: 28em;
  left: 6.9vw;
  padding: 30px 15px 0px 0px;
  width: 90%;
  color: #ffffff;
  font-size:12px;
}


.side h1 {

 font-size:160%;
  margin: 0 0 0 auto;
}






.btn,--white
a.btn--white {
  color: #0000ff !important;
  background-color: #ffffff !important;
  width:250px;
  
}
.btn--white:hover,
a.btn--white:hover {
  color: #ffffff !important;
  background: #0000ff !important;
}

a.btn p {
	font-size: 30px;
    position: relative;
    top: -15%;
    -webkit-transform: translateY(15%);
    transform: translateY(15%);
}



}