* {
	float: none;
	position: static;
}

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

* {
  margin: 0;
  padding: 0;
}

main {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}


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


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

}



.yellow {
	height: 260px;
	background-color: #ffff00;
}
.blue {
	height: 15vh;
	background-color: #0000ff;
}
.red {
	height: 26vh;
	background-color: #ff0000;
}
.purple {
	height: 1050px;
	background-color: #c800ff;
}
.green {
	height: 865px;
	background-color: #00ff00;
}

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


.top {/*親div*/
  position: relative;/*相対配置*/
  }

.top p {
  position: absolute;/*絶対配置*/
  top: 11.5em;
  left: 1.2em;
  color: #0000ff;
  font-size:14px;
  }

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


.top2 {/*親div*/
  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(375 / 667 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
  
}
 
.iframe-wrap iframe {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 1.8vw;
  top: 1.4vh;
  }



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



.top3 {
  /*親div*/
  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: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 {/*親div*/
  position: relative;/*相対配置*/
  }

.top p {
  position: absolute;/*絶対配置*/
  top: 7.5em;
  left: 1.2em;
  color: #0000ff;
  font-size:14px;
  }

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


.top2 {/*親div*/
  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;

}



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



.top3 {
  /*親div*/
  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%;
	-webkit-overflow-scrolling: touch;
}

.yellow {
	height: 35vh;
	background-color: #ffff00;
}
.blue {
	height: 250px;
	background-color: #0000ff;
}
.red {
	height: 35vh;
	background-color: #ff0000;
}
.purple {
	height: 137vh;
	background-color: #c800ff;
}
.green {
	height: 137vh;
	background-color: #00ff00;
}

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


.top {/*親div*/
  position: relative;/*相対配置*/
  }

.top p {
  position: absolute;/*絶対配置*/
  top: 20.5vh;
  left: 2em;
  color: #0000ff;
  font-size:22px;
  }

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


.top2 {/*親div*/
  position: relative;/*相対配置*/
  }

.top2 p {
  position: absolute;/*絶対配置*/
  color: #0000ff;
  margin: 0 0 0 auto;
  top: 2em;
  left: 4em;
  width:90%;
  height: 90%;
  }
  
.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(768 / 1024 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
}
 
.iframe-wrap iframe {
  position: absolute;
  top: 3.3vh;
  left: 4.1vw;
  width: 90%;
  height: 90%;

}


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



.top3 {
  /*親div*/
  position: relative;/*相対配置*/
  }

.top3 p {
  position: absolute;
  top: 2.1vh;
  left: 7vw;
  color: #ff0000;
  font-size:200%;
  }

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


.grid {
  grid-template-columns: 1fr;
  position: relative;/*相対配置*/
  width: 100%;
  
 }

.main {
  position: absolute;/*絶対配置*/
  top: 2.5vh;
  left: 4.7vw;
  padding: 0%;
  width: 100%;
  margin: 0 0 0 auto;
 
}

.side {

  position: absolute;/*絶対配置*/
  top: 53vh;
  left: 4.5vw;
  padding: 30px 15px 0px 0px;
  width: 90%;
  color: #ffffff;
  font-size:18px;
}

.side h1 {

 font-size:200%;
  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%);
}



}










@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (orientation:landscape) {


main {
width: 100%;
overflow-x: hidden;
}

.yellow {
	height: 48vw;
	background-color: #ffff00;
}
.blue {
	height: 40vw;
	background-color: #0000ff;
	
}
.red {
	height: 45vw;
	background-color: #ff0000;
}
.purple {
	height: 210vw;
	background-color: #c800ff;
}
.green {
	height: 195vw;
	background-color: #00ff00;
}

.red2 {
	height: 167vw;
	background-color: #ff0000;
}
.yellow2 {
	height: 167vw;
	background-color: #ffff00;
}


.top {/*?ediv*/
  position: relative;/*???Δz?u*/
  }

.top p {
  position: absolute;/*??Δz?u*/
  top: 50vh;
  left: 2em;
  color: #0000ff;
  font-size:20px;
  }

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


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

.top2 p {
  position: absolute;/*??Δz?u*/
  color: #0000ff;
  margin: 0 0 0 auto;
  top: 5.5em;
  left: 20em;
  width:85%;
  }

.iframe-wrap {
  position: relative;
}
 
.iframe-wrap iframe {
 position: absolute;/*??Δz?u*/
 height: 300px;
 width: 95%;
 left: -20.5vw;
 top: 8vh;
}




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

.top3 p {
  position: absolute;/*??Δz?u*/
  top: 4.3vh;
  left: 2.9em;
  color: #ff0000;
  font-size:20px;
  }


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



.grid {
  grid-template-columns: 1fr;
  position: relative;/*相対配置*/
  width: 100%;
  
 }

.main {
  position: absolute;/*絶対配置*/
  top: 5.5vh;
  left: 4.7vw;
  padding: 0%;
  width: 100%;
  margin: 0 0 0 auto;
 
}

.side {

  position: absolute;/*絶対配置*/
  top: 120vh;
  left: 4.5vw;
  padding: 30px 15px 0px 0px;
  width: 90%;
  color: #ffffff;
  font-size:18px;
}

.side h1 {

 font-size:100%;
  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%); /* Safari?p */
  transform: translateY(15%);
}


}