.sustainability{
  .page-info{
    margin-bottom: 32px;
  }
}

.sustainability-black{
  background: #000;
  padding-bottom: 100px;
  figure{
    img{
      vertical-align: bottom;
    }
  }
  .contents-block{
    padding-top: 100px;
    @media screen and (max-width: 767px){
      padding-top: 50px;
    }
  }
  .contents-title{
    color: #fff;
    border-bottom: 2px solid #CECECE;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    &:first-child{
      margin-top: 0;
    }
    &:after{
      background: #CECECE;
    }
    .btn-revers{
      padding: 4px 32px 4px 40px;
      @media screen and (max-width: 767px){
        padding: 4px 12px 3px 24px;
        span{
          font-size: 14px;
        }
      }
    }
  }
  .sustainability-img{
    margin-top: 24px;
  }
}
.sustainability-lists{
  margin-top: 24px;
  li{
    font-size: 14px;
    margin-bottom: 8px;
    color: #fff;
    display: flex;
    &:last-child{
      margin-bottom: 0;
    }
    &:before{
      content: "ー";
      display: block;
      color: #fff;
      padding-right: 20px;
    }
  }
}

.sustainability-gray{
  padding: 100px 0 80px;
  @media screen and (max-width: 767px){
    padding: 40px 0;
  }
  .sustainability-lists{
    @media screen and (max-width: 767px){
      margin-top: 0;
      margin-bottom: 24px;
    }
  }
  li{
    color: #000;
    &::before{
      color: #000;
    }
  }
}
.video-content{
  @media screen and (max-width: 767px){
    position: relative;
    height: 200px;
    overflow: hidden;
  }
  video{
    width: 100%;
    @media screen and (max-width: 767px){
      height: 210px;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}