html {
  -webkit-overflow-scrolling: touch;
    max-width: 1100px;
    margin: 0 auto;

}



body{
  margin: 0;
  padding: 0;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic Pro', "Meiryo UI", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
  text-decoration: none;
  color: inherit;
  font-feature-settings: "palt";
  background-color:#fff;

}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }}

.main{width:100%;}

img{
width:100%;
margin: 0px;
padding: 0px; 
vertical-align: bottom;
}
.yellow{
  background-color: #fff100;
  padding:0 0 30px 0;
}
.white{
  background-color: #fff;
  padding:30px 0;
}
  * {
 margin: 0;
 padding: 0; 
}
.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

#point0{
  background-color: #00afec;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#point1{
  background-color: #84ccc9;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

#point2{
  background-color: #d4ecea;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#point3{
  background-color: #fff356;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

#point1 p{
  font-size: clamp(1rem, 3.5vw, 37px);
  line-height: 1.75;
  padding: 20px 100px;
  text-align: center;
  color: #fff;
}
@media (max-width:750px){
  #point1 p{
    padding: 1vw 3vw 3vw 3vw;
  }
}
#point2 p{
  font-size: clamp(1rem, 3.5vw, 37px);
  line-height: 1.75;
  padding: 20px 100px 100px;
  text-align: center;
  color: #008186;
}
@media (max-width:750px){
  #point2 p{
    padding: 1vw 3vw 8vw 3vw;
  }
}
#point3 p{
  font-size: clamp(1rem, 3.5vw, 37px);
  line-height: 1.75;
  padding: 20px 100px 150px 100px;
  text-align: center;
  color: #00afec;
  font-weight: bold;
}
@media (max-width:750px){
  #point3 p{
    padding: 1vw 3vw 10vw 3vw;
  }
}
h3{
  font-size: clamp(1rem, 3.5vw, 37px);
  line-height: 1.75;
  padding: 20px 100px 70px;
  text-align: center;
  color: #008186;
  font-weight: normal;
}
@media (max-width:750px){
  h3{
    padding: 2vw 3vw 5vw 3vw;
  }
}
#point2 .pointwaku p{
  font-size: clamp(1rem, 4vw, 37px);
  line-height: 1.75;
  padding: 20px 100px;
  color: #008186;
  text-align: left;
}
@media (max-width:750px){
  #point2 .pointwaku p{
    padding: 2vw 3vw 3vw 8vw;
  }
}
.pointwaku{
  position: relative;
  display: inline-block;
}
.po{
  position: absolute;
  top: 41%;
  left: 0;
}
.po2{
  position: absolute;
  top: 35%;
  left: 0;
}
.po3{
  position: absolute;
  top: 29%;
  left: 0;
}

@media (min-width: 751px) and (max-width: 1000px) {

#point2 .pointwaku p{
  padding:20px 0px 20px 50px;
}

}