@charset "UTF-8";
/* ===================================================================
CSS information

file name  : sdgs.css
uthor     : Ability Consultant
style info : サステナビリティ
=================================================================== */
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}
.con_movie, .layout_primary {
  max-width: 1280px;
  margin: auto;
  width: 95%;
}

/*Animate */
/* -----------------------------------------------------------
	.con_pgtitle
----------------------------------------------------------- */
@media only screen and (min-width: 1025px) {
  .con_pgtitle h2 .jp {
    font-size: 160% !important;
  }
}
@media print {
  .con_pgtitle h2 .jp {
    font-size: 160% !important;
  }
}
.ie8 .con_pgtitle h2 .jp {
  font-size: 160% !important;
}

/* -----------------------------------------------------------
	.con_movie
----------------------------------------------------------- */
.con_movie {
  position: relative;
  padding: 20px 0;
  margin-bottom: 10%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_movie {
    width: 100%;
    padding: 5% 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_movie {
    padding: 5% 0 15%;
  }
}
.con_movie .box_movie {
  width: 90%;
  max-width: 960px;
  position: relative;
  z-index: 1;
  margin: 5em auto 0;
}
@media only screen and (max-width: 767px) {
  .con_movie .box_movie {
    margin: 3em auto 0;
  }
}
.con_movie .box_movie video {
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
.con_movie .box_movie .img {
  position: relative;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.con_movie .box_movie .img::after {
  width: 80px;
  height: 80px;
  font-size: 200%;
  background: rgba(28, 28, 28, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  border-radius: 50%;
  z-index: 1;
  -webkit-transition: .5s opacity;
  transition: .5s opacity;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_movie .box_movie .img::after {
    width: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .con_movie .box_movie .img::after {
    width: 3em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_movie .box_movie .img::after {
    height: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .con_movie .box_movie .img::after {
    height: 3em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_movie .box_movie .img::after {
    font-size: 188%;
  }
}
@media only screen and (max-width: 767px) {
  .con_movie .box_movie .img::after {
    font-size: 138%;
  }
}
.con_movie .box_movie .img:hover::after {
  -webkit-transition: .5s opacity;
  transition: .5s opacity;
  opacity: .8;
}

#pop_movie {
  margin-inline: auto;
  position: relative;
  vertical-align: middle;
  text-align: center;
  max-width: 1300px;
  height: 100%;
  width: 100%;
}
@media only screen and (max-height: 900px) {
  #pop_movie {
    padding-inline: 2em;
  }
}
#pop_movie .box_movie video {
  width: 100%;
  height: auto;
}

.mfp-close-btn-in .mfp-close {
  color: #fff;
  font-size: 40px;
  right: -1em;
  top: -1em;
}
@media only screen and (max-height: 900px) {
  .mfp-close-btn-in .mfp-close {
    right: 0;
  }
}

/* -----------------------------------------------------------
	.layout_primary
----------------------------------------------------------- */
.layout_primary .st_basic {
  margin-bottom: 2em;
}
.layout_primary .flex, .layout_primary.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .layout_primary .flex, .layout_primary.flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.layout_primary .flex .box_text,
.layout_primary .flex .box_img,
.layout_primary .flex .img, .layout_primary.flex .box_text,
.layout_primary.flex .box_img,
.layout_primary.flex .img {
  max-width: 49%;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .layout_primary .flex .box_text,
  .layout_primary .flex .box_img,
  .layout_primary .flex .img, .layout_primary.flex .box_text,
  .layout_primary.flex .box_img,
  .layout_primary.flex .img {
    max-width: 100%;
  }
}
.layout_primary .box_text * {
  word-break: break-all;
}
.layout_primary .box_text .text {
  margin-bottom: 3em;
}
.layout_primary .box_text .text_small {
  font-size: 66% !important;
}
.layout_primary .box_img.flex {
  margin-block: 3em;
}
.layout_primary .box_img .img {
  max-width: 100%;
}
.layout_primary .box_img .img2 {
  max-width: 70%;
}
@media only screen and (max-width: 1024px) {
  .layout_primary .box_img.sp-col2 {
    margin-block: 2em;
  }
}
.layout_primary .box_img.sp-col2 .img {
  max-width: 49%;
}
@media only screen and (max-width: 1024px) {
  .layout_primary .box_img .img.sp-col13 .img {
    max-width: 80%;
    margin-top: 2.0em;
  }
}
.layout_primary .box_btn {
  text-align: center;
}
.layout_primary .box_btn .st_basic {
  color: #5ea4bf;
  margin-bottom: 1.5em;
}

.layout_box_flex2 {
  margin-top: 5.0em;
  width: 100%;
}

/* -----------------------------------------------------------
.con_xxx
----------------------------------------------------------- */
section {
  margin-bottom: 8em !important;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  section {
    margin-bottom: 4em !important;
  }
}
@media only screen and (max-width: 767px) {
  section {
    margin-bottom: 4em !important;
  }
}

/* -----------------------------------------------------------
.con_intro
----------------------------------------------------------- */
.con_intro .box_video {
  margin: 4em auto 6em;
}

/* -----------------------------------------------------------
.con_mission
----------------------------------------------------------- */
.con_mission {
  background-color: #eff6f8;
  padding-block: 5em;
}
.con_mission .box_mission {
  margin-bottom: 5em;
}
.con_mission .box_mission:last-of-type {
  margin-bottom: 0;
}

.box_detail {
  margin-top: 4em;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_detail {
    margin-top: 2em;
  }
}
@media only screen and (max-width: 767px) {
  .box_detail {
    margin-top: 2em;
  }
}

/* -----------------------------------------------------------
.con_slideitem
----------------------------------------------------------- */
.con_slideitem {
  position: relative;
  margin-bottom: 5%;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .con_slideitem {
    margin: 15% auto;
  }
}
.con_slideitem .box_slide .slide_detail .slick-list {
  overflow: visible;
  padding: 0 !important;
}
.con_slideitem .box_slide .slide_detail .slide {
  position: relative;
}
@media only screen and (min-width: 1025px) {
  .con_slideitem .box_slide .slide_detail .slide .box_img {
    padding-left: 3%;
  }
}
@media print {
  .con_slideitem .box_slide .slide_detail .slide .box_img {
    padding-left: 3%;
  }
}
.ie8 .con_slideitem .box_slide .slide_detail .slide .box_img {
  padding-left: 3%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slide .box_img {
    padding: 0 2%;
  }
}
.con_slideitem .box_slide .slide_detail .slide .box_text {
  padding-right: 3%;
}
@media only screen and (min-width: 1025px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text {
    width: 35%;
    position: absolute;
    left: 66.5%;
    top: 10%;
    max-width: 550px;
    padding-right: 3%;
  }
}
@media print {
  .con_slideitem .box_slide .slide_detail .slide .box_text {
    width: 35%;
    position: absolute;
    left: 66.5%;
    top: 10%;
    max-width: 550px;
    padding-right: 3%;
  }
}
.ie8 .con_slideitem .box_slide .slide_detail .slide .box_text {
  width: 35%;
  position: absolute;
  left: 66.5%;
  top: 10%;
  max-width: 550px;
  padding-right: 3%;
}
@media only screen and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text {
    width: 90%;
    margin: 5% auto;
    padding: 0 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text {
    width: 95%;
    margin: 5% auto 0;
  }
}
.con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
  font-size: 225%;
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
    font-size: 3.1vw;
    letter-spacing: .08em;
  }
}
@media print {
  .con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
    font-size: 3.1vw;
    letter-spacing: .08em;
  }
}
.ie8 .con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
  font-size: 3.1vw;
  letter-spacing: .08em;
}
@media only screen and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic {
    font-size: 150%;
  }
}
.con_slideitem .box_slide .slide_detail .slide .box_text .tl_basic span {
  padding-left: 0;
}
.con_slideitem .box_slide .slide_detail .slide .box_text .btn_more {
  padding-left: 0;
}
@media only screen and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slide .box_text .btn_more {
    width: 50%;
  }
}
.con_slideitem .box_slide .slide_detail .slick-arrow {
  position: absolute;
  display: inline-block;
  z-index: 10;
  top: 50%;
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow {
    top: 45%;
  }
}
.con_slideitem .box_slide .slide_detail .slick-arrow:after {
  content: '';
  width: 3em;
  height: 3em;
  border: 0px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  position: absolute;
  top: calc(50% - 1.5em);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    width: 1.5em;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    width: 1em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    height: 1.5em;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    height: 1em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    top: calc(50% - .5em);
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow:after {
    top: 0;
  }
}
.con_slideitem .box_slide .slide_detail .slick-arrow.slick-prev {
  left: 2%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow.slick-prev {
    left: 2%;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow.slick-prev {
    left: 3%;
  }
}
.con_slideitem .box_slide .slide_detail .slick-arrow.slick-prev:after {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  left: 0;
}
.con_slideitem .box_slide .slide_detail .slick-arrow.slick-next {
  right: 2%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow.slick-next {
    right: 2%;
  }
}
@media only screen and (max-width: 767px) {
  .con_slideitem .box_slide .slide_detail .slick-arrow.slick-next {
    right: 3%;
  }
}
.con_slideitem .box_slide .slide_detail .slick-arrow.slick-next:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  right: 0;
}