@charset "utf-8";

#main_img {
  width: 100%;
}

.slick-slide {
  width: 100%;
}

.slick-slide img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.slick-prev,
.slick-next {
  z-index: 1;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

.slick-prev:before,
.slick-next:before {
  color: #0094d8;
}
.slick-dots {
  bottom: 15px;
}
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
  color: #fedc00;
  opacity: 0.8;
}

.section_wrap {
  width: 100%;
  display: block;
  margin: 50px 0;
}

.section_wrap section {
  position: relative;
  width: 100%;
  margin-bottom: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.section_wrap section:nth-of-type(odd) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.section_wrap section:nth-of-type(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.section_wrap section .img_area {
  width: 50%;
}

.section_wrap section .txt_area {
  position: absolute;
  width: 55%;
  color: #fff;
  background-color: #0094d8;
  padding: 30px;
  bottom: -30px;
}
.section_wrap section:nth-of-type(odd) .txt_area {
  right: 0;
}
.section_wrap section:nth-of-type(even) .txt_area {
  left: 0;
}

.section_wrap section .txt_area h2 {
  font-size: 2.4rem;
  font-weight: bold;
  display: block;
  margin-bottom: 20px;
}

.section_wrap section .txt_area p {
  font-size: 1.4rem;
  line-height: 1.5;
}

.section_wrap section .txt_area p:not(:last-of-type) {
  margin-bottom: 20px;
}


/*ウィンドウサイズが960px以下の場合*/
@media screen and (max-width:1200px) { 
  
  .slick-prev {
    left: 10px;
  }
  
  .slick-next {
    right: 10px;
  }

}

/*ウィンドウサイズが600px以下の場合*/
@media screen and (max-width:600px) {
  
  .section_wrap section:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .section_wrap section .img_area,
  .section_wrap section .txt_area {
    width: 100%;
  }
  
  .section_wrap section .txt_area {
    position: unset;
    margin-top: -5px;
  }
  
  .section_wrap section .img_area img {
    width: 100%;
  }
  
}