.title{
    margin-bottom: 30px;
}

.line{
  height: 3px;
  width: 100vw;
  max-width: 900px;
  background: linear-gradient(to right, rgb(0,255,255), rgb(0,255,0));
}


.contents1{
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    display: flex;
  align-items: center;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.text{
   width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
}

.contents1 .text{
  width: 40vw;
  max-width: 360px;
    float: left;
}


.contents1 img{
  height: 60vw;
  max-height: 540px;
  width:60vw;
  max-width: 540px;
  float: right;
}

.text .strong{
   font-size: 21px;
   font-family: sans-serif;
}


.contents2{
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    display: flex;
    align-items: center;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  }

.contents2 .text{
  width: 40vw;
  max-width: 360px;
    float: right;
}

.contents2 img{
  height: 60vw;
  max-height: 540px;
  width:60vw;
  max-width: 540px;
  float: left;
}

.not_float{
  margin-left: auto;
  margin-right: auto;
  height:60vw;
  max-height: 540px;
  width: 100vw;
  max-width: 900px;
}

.left{
  height:40vw;
  max-height: 360px;
  width: 40vw;
  max-width: 360px;
  margin-bottom: 30px;
  float: left;
}

.right{
  height:60vw;
  max-height: 540px;
  width: 60vw;
  max-width: 540px;
  float: right;
}

.right img{
  height: 100%;
  width:100%;
}

.contents3, .contents4{
  display: flex;
  align-items: center;
  text-align: center;
  height:30vw;
  max-height: 270px;
  width: 40vw;
  max-width: 360px;
  color: #fff;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.contents3{
  background: linear-gradient(#fff 0%, #EB6400 50%, #fff 100%);
}

.contents4{
  background: linear-gradient(#fff 0%, #009BAF 50%, #fff 100%);
}