@charset "utf-8";





.sec_common>div{
  position: relative;
}
.sec_common .box{
  position: relative;
}
.sec_common .txt_area{
  width: 60%;
  background: rgba(255, 255, 255, .8);
  padding: 4em 4.5em;
}


#sec_01 .txt_area,
#sec_03 .txt_area{
  margin-left: auto;
}
#sec_01 .img_area{
  position: absolute;
  top: 3em;
  left: 2em;
  width: 40%;
  max-width: 580px;
  z-index: -1;
}

#sec_02 .txt_area li{
  margin-bottom: .75em;
}
#sec_02 .img_area li{
  position: absolute;
  width: 25%;
  max-width: 400px;
}
#sec_02 .img_area li:nth-of-type(1){
  bottom: -1em;
  right: 18%;
  z-index: -2;
}
#sec_02 .img_area li:nth-of-type(2){
  top: -1em;
  right: 0;
  z-index: -1;
}

.icon_check{
  position: relative;
  padding-left: 1.5em;
}
.icon_check::before{
  color: #00D26A;
  font-size: 120%;
  position: absolute;
  top: 0;
  left: 0;
}


.ba_list li{
  width: calc(100% / 3 - 1em);
}



#sec_03 .img_area li{
  position: absolute;
  width: 25%;
  max-width: 400px;
}
#sec_03 .img_area li:nth-of-type(1){
  top: 0;
  left: 0;
  z-index: -2;
  width: 30%;
  max-width: 500px;
}
#sec_03 .img_area li:nth-of-type(2){
  top: 30%;
  left: 17%;
  z-index: -1;
  width: 25%;
  max-width: 430px;
}




#sec_04 .img_area li{
  position: absolute;
  width: 25%;
  max-width: 400px;
}
#sec_04 .img_area li:nth-of-type(1){
  top: -1em;
  right: 0;
  z-index: -2;
  width: 35%;
  max-width: 390px;
}
#sec_04 .img_area li:nth-of-type(2){
  top: 240px;
  right: 15%;
  z-index: -1;
  width: 29%;
  max-width: 355px;
}





@media (max-width: 899px){

.sec_common .box{
  background: #fff;
  padding: 2em 2.5em;
}

.sec_common .txt_area{
  width: 100%;
  background: none;
  padding: 0;
  margin-bottom: 2em;
}

#sec_01 .img_area{
  position: static;
  width: 70%;
  margin: auto;
}

#sec_02 .img_area{
  width: 80%;
  margin: auto;
}
#sec_02 .img_area li{
  display: inline-block;
  vertical-align: top;
  position: static;
  width: 49%;
}
#sec_02 .img_area li:nth-of-type(1){
  margin-top: 4em;
}


#sec_03 .img_area li{
  position: static;
}
#sec_03 .img_area li:nth-of-type(1){

  width: 70%;
  max-width: 540px;
}
#sec_03 .img_area li:nth-of-type(2){
  width: 50%;
  margin-top: -2em;
  margin-left: auto;
}

#sec_04 .img_area li{
  position: static;
}
#sec_04 .img_area li:nth-of-type(1){
  width: 70%;
  max-width: 540px;
  margin-left: auto;
}
#sec_04 .img_area li:nth-of-type(2){
  width: 50%;
  margin-top: -2em;
}



}



@media(max-width:799px){


.ba_list li{
  width: 100%;
  margin: .5em 0;
}

}