@charset "utf-8";

.page-planning {
  --_clr-services-100: var(--clr-blue-100);
  --_clr-services-200: var(--clr-blue-200);
  --_clr-services-400: var(--clr-pink-400);
}

.page-development {
  --_clr-services-100: var(--clr-green-100);
  --_clr-services-200: var(--clr-green-300);
  --_clr-services-400: var(--clr-purple-400);
}

.page-operation {
  --_clr-services-100: var(--clr-green-200);
  --_clr-services-200: var(--clr-green-500);
  --_clr-services-400: var(--clr-blue-400);
}

.page-production {
  --_clr-services-100: var(--clr-purple-100);
  --_clr-services-200: var(--clr-purple-200);
  --_clr-services-400: var(--clr-cyan-400);
}

.page-ec {
  --_clr-services-100: var(--clr-cyan-100);
  --_clr-services-200: var(--clr-cyan-200);
  --_clr-services-400: var(--clr-green-400);
}

.sec-support {
  background-color: var(--_clr-services-400);
}

.sec-support .support-box {
  position: relative;
  padding: 22px 0 25px 30px;
  column-gap: 34px;
  row-gap: 40px;
}

.support-box svg {
  filter: brightness(0) invert(1);
}

.sec-support .support-box .icon-planning {
  width: 61px;
  height: 75px;
}

.sec-support .support-box .icon-development {
  width: 91px;
  height: 58px;
}

.sec-support .support-box .icon-operation {
  width: 72px;
  height: 65.51px;
}

.sec-support .support-box .icon-production {
  width: 68px;
  height: 65px;
}

.sec-support .support-box .icon-ec {
  width: 74px;
  height: 59px;
}

.sec-support .sec-ttl {
  position: initial;
}

.sec-support .sec-ttl em {
  font-size: 120px;
  right: 20px;
  bottom: 0;
  line-height: 0.8;
  top: unset;
  left: unset;
  transform: unset;
  color: rgb(255, 255, 255, 0.2);
}

.sec-ttl em br {
  display: none;
}

.sec-solve-problem .all-solve-problem {
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.sec-solve-problem .solve-problem {
  flex-direction: column;
  position: relative;
}

.sec-solve-problem .solve-problem-box {
  --b: 2em;
  --h: 1.7em;
  --p: 50%;
  --r: 1.2em;
  --c: var(--_clr-services-100);
  width: 100%;
  height: 157px;
  padding: 1.2em 1.8em;
  border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b)/2) min(var(--r), var(--p) - var(--b)/2)/var(--r);
  background: var(--c);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%,
      min(100%, var(--p) + var(--b)/2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%, var(--p) - var(--b)/2) 100%);
  border-image: conic-gradient(var(--c) 0 0) fill 0/ var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/ 0 0 var(--h) 0;
}

.sec-solve-problem .solve-problem .problem-visual {
  position: absolute;
  bottom: 58px;
  right: 0;
}

.sec-solve-problem .production .solve-problem .problem-visual {
  right: 17px;
}

.sec-solve-problem .solve-problem-box p {
  line-height: 1.5;
}

.sec-support-detail.detail-box {
  position: relative;
  width: 100%;
}

.sec-support-detail {
  padding-block: 90px 145px;
}

.sec-support-detail.detail-one {
  padding-bottom: 230px;
}

.sec-support-detail.detail-two {
  --_background: #F2F2F2;
  z-index: 4;
  margin-top: -110px;
}

.sec-support-detail.detail-three {
  padding-bottom: 125px;
}

.sec-support-detail:before,
.sec-support-detail:after {
  position: absolute;
  content: '';
  top: 0;
  width: 100%;
  height: 104%;
  z-index: -1;
}

.sec-support-detail.detail-two:after {
  height: auto;
}

.sec-support-detail.detail-one:after,
.sec-support-detail.detail-three:after {
  background: rgba(255, 255, 255, 0.88);
}

.sec-support-detail.planning-detail-one:before {
  background: url(../img/planning/bg_planning_detail_one.jpg) center right 60% / cover no-repeat;
}

.sec-support-detail.development-detail-one:before {
  background: url(../img/development/bg_development_detail_one.jpg) center right 60% / cover no-repeat;
}

.sec-support-detail.operation-detail-one:before {
  background: url(../img/operation/bg_operation_detail_one.jpg) center right 85% / cover no-repeat;
}

.sec-support-detail.production-detail-one:before {
  background: url(../img/production/bg_production_detail_one.jpg) center right 35% / cover no-repeat;
}

.sec-support-detail.ec-detail-one:before {
  background: url(../img/ec/bg_ec_detail_one.jpg) center right 58% / cover no-repeat;
}

.sec-support-detail.detail-three:before,
.sec-support-detail.detail-three:after {
  height: 120%;
  top: -160px;
}

.sec-support-detail.planning-detail-three:before {
  background: url(../img/planning/bg_planning_detail_three.jpg) center right 62% / cover no-repeat;
}

.sec-support-detail.development-detail-three:before {
  background: url(../img/development/bg_development_detail_three.jpg) center right 85% / cover no-repeat;
}

.sec-support-detail.operation-detail-three:before {
  background: url(../img/operation/bg_operation_detail_three.jpg) center right 75% / cover no-repeat;
}

.sec-support-detail.production-detail-three:before {
  background: url(../img/production/bg_production_detail_three.jpg) center right 48% / cover no-repeat;
}

.sec-support-detail.ec-detail-three:before {
  background: url(../img/ec/bg_ec_detail_three.jpg) center right 48% / cover no-repeat;
}

.sec-support-detail.detail-two .support-detail-box {
  flex-direction: row-reverse;
}

.sec-support-detail .line-ttl {
  position: relative;
  width: fit-content;
  color: var(--_clr-services-400);
  margin-inline: auto;
}

.sec-support-detail .line-ttl:after {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: -25px;
  width: 153px;
  height: 3px;
  content: '';
  background-color: var(--_clr-services-400);
}

.sec-support-detail .support-detail-image {
  position: relative;
  min-width: 492px;
  z-index: 1;
  flex-shrink: 1;
  padding-inline: 20px;
}

.sec-support-detail .support-detail-image:before,
.sec-support-detail .support-detail-image::after {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  max-width: 370px;
  height: 100%;
  max-height: 246px;
  content: '';
  z-index: -1;
  background-color: var(--_clr-services-400);
}

.sec-support-detail .support-detail-image::after {
  top: unset;
  right: 0;
  bottom: -18px;
  left: unset;
}

.sec-support-detail .support-detail-box p {
  max-width: 480px;
}

.sec-support-detail h4 {
  max-width: 495px;
  padding: 8px;
  background-color: var(--_clr-services-200);
  margin-inline: auto;
}

.sec-support-detail .situation-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.sec-support-detail .situation-box > * {
  flex: 0 1 330px;
  min-height: 145px;
  height: 100%;
  line-height: 1.5;
  padding: 28px 15px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--clr-neutral-100);
}

.sec-support-detail .situation-txt {
  padding-inline: 65px;
}

.btn.btn-blue {
  --btn-bg-clr: var(--_clr-services-200);
  --btn-border-clr: var(--_clr-services-200);
  --btn-font-clr: var(--clr-neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 307px;
  padding: 10px 0;
}

.info-box {
  max-width: 850px;
  margin: auto;
  margin-top: 65px;
  align-items: end;
  justify-content: center;
  gap: 30px;
  padding: 15px 40px 25px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--clr-neutral-100);
}

.info-box .info-img {
  width: 310px;
}

.info-box .info-img img {
  margin-inline: auto;
}

.info-box .info-content-wrap {
  width: 454px;
}

.btn-info {
  display: block;
  padding: 6px 20px;
  max-width: 455px;
  margin-inline: auto;
  background-color: #01A0E9;
  transition: opacity 0.7s;
}

.btn-info:hover {
  opacity: 0.7;
}

.btn {
  font-weight: 700;
}

.bg-black {
  background-color: var(--clr-neutral-1000);
}

/** Works*/
.post-type-archive-works .sec-support,
.single-works .sec-support{
  background-color: var(--clr-blue-400);
}

.post-type-archive-works .sec-support .support-box,
.single-works .sec-support .support-box {
  position: relative;
  padding: 38px 0 38px 145px;
  column-gap: 106px;
  row-gap: 40px;
}

.post-type-archive-works .sec-support .sec-ttl em,
.single-works .sec-support .sec-ttl em {
  right: 10px;
}

/** Column*/
.post-type-archive-column .sec-support,
.single-column .sec-support,
.tax-category-column .sec-support {
  background-color: #BDCCD4;
  margin-block: 15px 15px;
}

.post-type-archive-column .sec-support .support-box,
.single-column .sec-support .support-box,
.tax-category-column .sec-support .support-box {
  position: relative;
  padding: 28px 0 28px 100px;
  column-gap: 200px;
  row-gap: 40px;
}

@media (max-width: 1100px) {
  .sec-support {
    position: relative;
  }

  .sec-support .support-box {
    flex-direction: column;
    align-items: flex-start;
    position: revert;
    column-gap: 50px;
    padding: 15px 0 15px 30px;
  }

  .sec-support .support-box::after {
    top: unset;
    bottom: 0;
  }

  .sec-support .sec-ttl em {
    right: revert;
    top: 0;
    left: 0;
    text-align: left;
    font-size: 85px;
  }

  .sec-ttl em br {
    display: block;
  }

  .sec-solve-problem .all-solve-problem {
    justify-content: center;
  }

  .sec-support-detail .support-detail-box {
    flex-wrap: wrap;
  }

  .sec-support-detail.detail-two .support-detail-box {
    flex-direction: unset;
  }

  .sec-support-detail .support-detail-image {
    min-width: unset;
    margin-inline: auto;
  }

  .sec-support-detail .support-detail-box p {
    max-width: 100%;
  }

  .sec-support-detail .situation-box {
    justify-content: center;
    flex-wrap: wrap;
  }

  .sec-support-detail .situation-txt {
    padding-inline: 0px;
  }

  .info-box {
    flex-direction: column;
    align-items: center;
    padding: 25px 27px 38px;
  }

  /** Works */
  .post-type-archive-works .sec-support .support-box,
  .single-works .sec-support .support-box{
    position: relative;
    padding: 77px 0;
    row-gap: 20px;
    position: revert;
    align-items: center;
  }

  /**Column*/
  .post-type-archive-column .sec-support .support-box,
  .single-column .sec-support .support-box,
  .tax-category-column .sec-support .support-box {
    position: relative;
    padding: 67px 0;
    row-gap: 40px;
    position: revert;
    align-items: center;
  }

  .post-type-archive-column .sec-support,
  .single-column .sec-support,
  .tax-category-column .sec-support {
    margin-block: 0;
  }
}

@media (max-width: 768px) {
  .sec-support .sec-wrap,
  .sec-solve-problem .sec-wrap {
    --padding: 55px;
    max-width: 292px;
  }

  .sec-solve-problem .solve-problem {
    width: 100%;
    row-gap: 45px;
  }

  .sec-solve-problem .solve-problem-box {
    width: 100%;
    max-width: 100%;
    height: 126px;
  }

  .sec-support-detail .support-detail-image img {
    max-width: 287px;
    width: 100%;
  }

  .sec-support-detail .support-detail-image:before,
  .sec-support-detail .support-detail-image::after {
    max-width: 230px;
    height: 153px;
  }

  .sec-support-detail .support-detail-image:before {
    left: 10px;
    top: -10px;
  }

  .sec-support-detail .support-detail-image:after {
    right: 10px;
    bottom: -10px;
  }

  .btn.btn-blue {
    max-width: 307px;
    width: 100%;
  }

  .sec-solve-problem .all-solve-problem {
    gap: 50px;
  }

  .sec-support .support-box .icon-development {
    width: 58px;
    height: 37px;
  }

  .sec-support .support-box .icon-planning {
    width: 38.82px;
    height: 47px;
  }

  .sec-support .support-box .icon-operation {
    width: 49.93px;
    height: 45.61px;
  }

  .sec-support .support-box .icon-production {
    width: 54.3px;
    height: 52px;
  }

  .sec-support .support-box .icon-ec {
    width: 52.28px;
    height: 41.72px;
  }

  .sec-support .support-box {
    row-gap: 25px;
    padding: 46px 0 51px;
  }

  .sec-support .support-box div {
    column-gap: 10px;
  }

  .sec-support-detail {
    padding-block: 40px 140px;
  }

  .sec-support-detail.detail-one {
    padding-bottom: 195px;
  }

  .sec-support-detail.detail-two:after {
    height: 99%;
  }

  .sec-support-detail.planning-detail-one:before {
    background-position: center right 69%;
  }

  .sec-support-detail.development-detail-one:before {
    background-position: center right 52%;
  }

  .sec-support-detail.operation-detail-one:before {
    background-position: center right 44%;
  }

  .sec-support-detail.production-detail-one:before {
    background-position: center right 50%;
  }

  .sec-support-detail.ec-detail-one:before {
    background-position: center right 59%;
  }

  .sec-support-detail.planning-detail-three:before {
    background-position: center right 56%;
  }

  .sec-support-detail.development-detail-three:before {
    background-position: center right 59%;
  }

  .sec-support-detail.operation-detail-three:before {
    background-position: center right 74%;
  }

  .sec-support-detail.production-detail-three:before {
    background-position: center right 41%;
  }

  .sec-support-detail.ec-detail-three:before {
    background-position: center right 42%;
  }

  .sec-solve-problem .solve-problem .problem-visual {
    width: 90px;
    height: 114px;
    right: 10px;
  }

  .sec-support-detail .sec-wrap {
    max-width: 310.5px;
  }

  .sec-support-detail .btn-info {
    padding: 13px;
  }

  .support-detail-box.d-flex {
    row-gap: 30px;
    margin-bottom: 65px;
  }

  .sec-support-detail h4 {
    padding: 3px;
  }

  .sec-support-detail .line-ttl:after {
    bottom: -20px;
    width: 120px;
    height: 2px;
  }

  .sec-support-detail .situation-box {
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px auto 70px;
    gap: 40px;
    max-width: 270px;
  }

  .sec-support-detail .situation-box>* {
    min-height: 115.27px;
  }

  .info-box .info-img {
    width: auto;
  }

  .info-box .info-content-wrap {
    width: auto;
  }
}

@media (max-width: 390px) {
  .sec-support .sec-ttl em {
    font-size: 20vw;
  }
}