@charset "UTF-8";
.common_mv {
  background: url("../../images/projectstory/projrctstory.jpg")no-repeat center bottom 10% / cover;
  padding: 100px 10px 50px 0;
  display: block;
}
.common_mv .contTtl {
  border: 2px solid #fff;
  border-left: none;
  padding: 55px 10px 55px 30px;
  max-width: 1200px;
  margin-left: 0;
  width: 100%;
  color: #fff;
}
.contents {
  padding: 80px 15px 50px;
}
.mvBtmtxt {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 50px;
}
.projectListWrap li {
  margin-bottom: 50px;
  width: 100%;
}
.projectListWrap li a {
  padding: 40px 10px 50px;
  display: block;
  z-index: 0;
  position: relative;
}
.projectListWrap li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  z-index: -1;
  left: 0;
  top: 0;
  transition: all 2s;
}
.projectListWrap li a:hover {
  color: #fff;
}
.projectListWrap li a:hover::after {
  background-color: rgba(0, 0, 0, 0.6);
}
.projectListWrap li:nth-child(1) a {
  background: url("../../images/projectstory/project01.jpg")no-repeat center center/cover;
}
.projectListWrap li:nth-child(2) a {
  background: url("../../images/projectstory/project02.jpg")no-repeat center center/cover;
}
.projectListWrap li:nth-child(3) a {
  background: url("../../images/projectstory/project03.jpg")no-repeat center center/cover;
}
.projectListWrap li a .en {
  font-style: italic;
  font-size: 20px;
  margin-bottom: 25px;
}
.projectListWrap li a .ttl {
  font-size: 20px;
  margin-bottom: 15px;
}
.projectListWrap li a .inrTxt {
  max-width: 430px;
  margin: auto;
}
/*projectstory*/
.projectstory01 .common_mv {
  background: url("../../images/projectstory/project01_inrmv.jpg")no-repeat center bottom 10% / cover;
}
.projectstory01 .listWrap .list01 .contImg {
  background: url("../../images/projectstory/project01/project01_overview.jpg")no-repeat center center/cover;
}
.projectstory01 .listWrap .list02 .contImg {
  background: url("../../images/projectstory/project01/project01_difficulty.jpg")no-repeat center center/contain;
}
.projectstory01 .listWrap .list03 .contImg {
  background: url("../../images/projectstory/project01/project01_feature.jpg")no-repeat center center/contain;
}
.projectstory01 .projectLeader {
  background: url("../../images/projectstory/project01/project01_interview_mv.jpg")no-repeat top center/cover;
}
.projectstory01 .listWrap.interview .list01 .contImg {
  background: url("../../images/projectstory/project01/project01_interview01.jpg")no-repeat center center/cover;
}
.projectstory01 .listWrap.interview .list02 .contImg {
  background: url("../../images/projectstory/project01/project01_interview02.jpg")no-repeat center center/cover;
}
/*projectstory*/
.projectstory02 .common_mv {
  background: url("../../images/projectstory/project02_inrmv.jpg")no-repeat center 35%/cover;
}
.projectstory02 .listWrap .list01 .contImg {
  background: url("../../images/projectstory/project02/project02_overview.jpg")no-repeat center center/cover;
}
.projectstory02 .listWrap .list02 .contImg {
  background: url("../../images/projectstory/project02/project02_difficulty.jpg")no-repeat center center/cover;
}
.projectstory02 .listWrap .list03 .contImg {
  background: url("../../images/projectstory/project02/project02_feature.jpg")no-repeat center center/cover;
}
.projectstory02 .projectLeader {
  background: url("../../images/projectstory/project02/project02_interview_mv.jpg")no-repeat top center/cover;
}
.projectstory02 .listWrap.interview .list01 .contImg {
  background: url("../../images/projectstory/project02/project02_interview01.jpg")no-repeat center center/cover;
}
.projectstory02 .listWrap.interview .list02 .contImg {
  background: url("../../images/projectstory/project02/project02_interview02.jpg")no-repeat center center/cover;
}
/*projectstory*/
.projectstory03 .common_mv {
  background: url("../../images/projectstory/project03_inrmv.jpg")no-repeat center center/cover;
}
.projectstory03 .listWrap .list01 .contImg {
  background: url("../../images/projectstory/project03/project03_overview.jpg")no-repeat center top/cover;
}
.projectstory03 .listWrap .list02 .contImg {
  background: url("../../images/projectstory/project03/project03_difficulty.jpg")no-repeat center center/contain;
}
.projectstory03 .listWrap .list03 .contImg {
  background: url("../../images/projectstory/project03/project03_feature.jpg")no-repeat center center/contain;
}
.projectstory03 .projectLeader {
  background: url("../../images/projectstory/project03/project03_interview_mv.jpg")no-repeat top center/cover;
}
.projectstory03 .listWrap.interview .list01 .contImg {
  background: url("../../images/projectstory/project03/project03_interview01.jpg")no-repeat center center/cover;
}
.projectstory03 .listWrap.interview .list02 .contImg {
  background: url("../../images/projectstory/project03/project03_interview02.jpg")no-repeat center center/cover;
}
.projectstory .common_mv .contTtl, .projectLink .contTtl {
  background: rgba(142, 142, 142, 0.58);
  max-width: 1000px;
  margin: auto;
  padding: 50px 10px;
  color: #fff;
  border: none;
}
.projectstory .listWrap .ttl {
  margin-bottom: 20px;
  font-size: 18px;
}
.projectstory .listWrap.project .txt {
  padding-left: 10px;
  border-left: 1px solid #ddd;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}
.listWrap {
  margin-bottom: 100px;
}
.listWrap li {
  margin-bottom: 50px;
}
.listWrap .list02 {
  flex-direction: column-reverse;
}
.listWrap .txtWrap {
  padding: 30px 15px;
}
.listWrap .txtWrap .txt, .listWrap .txtWrap .contTtl {
  margin-bottom: 30px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}
.listWrap .txtWrap, .listWrap .contImg {
  width: 100%;
}
.listWrap .contImg, .listWrap.interview .list02 .contImg {
  height: 200px;
}
.listWrap .list03 .contImg, .listWrap .list02 .contImg {
  height: 400px;
}
/* .listWrap .list01 .contImg {
  background: url("../../images/index/service_01.jpg")no-repeat center center/cover;
}
.listWrap .list02 .contImg {
  background: url("../../images/index/service_02.jpg")no-repeat center center/cover;
}
.listWrap .list03 .contImg {
  background: url("../../images/index/service_03.jpg")no-repeat center center/cover;
}
.listWrap .list04 .contImg {
  background: url("../../images/index/service_04.jpg")no-repeat center center/cover;
} */
.projectLeader {
  height: 190px;
  margin-bottom: 80px;
  position: relative;
}
.projectLeader .name {
  font-size: 16px;
  max-width: 170px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px 17px 17px;
  /* margin-left: 30px; */
}
.projectLeader .name span {
  font-size: 14px;
  display: block;
  border-bottom: 1px solid #333;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.projectLink li .contTtl {
  font-size: 20px;
  color: #fff;
  height: 100%;
}
.projectLink li {
  width: 100%;
}
.projectLink li a {
  display: block;
  padding: 30px 15px;
  position: relative;
  z-index: 0;
  height: 100%;
}
.projectLink li a::before {
  position: absolute;
  content: "";
  background-color: rgba(0, 0, 0, 0.83);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 0.5s;
}
.projectLink li a:hover::before {
  background-color: rgba(0, 0, 0, 0.3);
}
.projectLink li.project01 a {
  background: url("../../images/projectstory/project01.jpg")no-repeat center center/cover;
}
.projectLink li.project02 a {
  background: url("../../images/projectstory/project02.jpg")no-repeat center center/cover;
}
.projectLink li.project03 a {
  background: url("../../images/projectstory/project03.jpg")no-repeat center center/cover;
}
@media only screen and (min-width:769px) {
  .contents {
    padding: 130px 30px 80px;
  }
  .common_mv {
    padding: 200px 30px 100px 0;
  }
  .projectListWrap li a {
    padding: 80px 30px;
  }
  .projectListWrap li a .ttl {
    font-size: 30px;
    margin-bottom: 25px;
  }
  .mvBtmtxt {
    margin: 0 auto 100px;
  }
  .projectstory .listWrap .ttl {
    margin-bottom: 20px;
    font-size: 22px;
  }
  .projectstory .listWrap.project .txt {
    padding-left: 30px;
  }
  .projectstory01 .listWrap.project .list02 .contImg {
    height: 600px;
  }
  .projectstory01 .listWrap.project .list03 .contImg {
    height: 600px;
  }
  .listWrap li, .service_cont .serviceTxt {
    align-items: center;
    margin-bottom: 100px;
    justify-content: space-between;
  }
  .listWrap .list02 {
    flex-direction: row-reverse;
  }
  .listWrap .txtWrap, .listWrap .contImg, .service_cont .serviceTxt .bgImg, .service_cont .serviceTxt .txt {
    width: 49%;
  }
  .listWrap .txtWrap {
    padding: 0 30px;
  }
  .listWrap .txtWrap .contTtl {
    font-size: 35px;
    margin-bottom: 50px;
  }
  .listWrap .txtWrap .txt {
    margin-bottom: 60px;
  }
  .listWrap .contImg, .listWrap.interview .list02 .contImg {
    height: 400px;
  }
  .projectLeader {
    height: 400px;
  }
  /* .projectLeader {
    padding: 200px 30px 100px 0;
  } */
  .projectLeader .name {
    font-size: 20px;
    max-width: 300px;
    padding: 40px 17px 17px;
  }
  .projectLeader .name span {
    font-size: 18px;
  }
  .projectLink li {
    width: 50%;
  }
}
@media only screen and (min-width:1000px) {
  .common_mv {
    padding: 180px 30px 120px 0;
  }
  .common_mv .contTtl {
    padding: 55px 15px 55px 200px;
  }
}
@media only screen and (max-width:768px) {
  .common_mv .contTtl {
    font-size: 20px;
  }
}