@charset "UTF-8";
/* ------------------------------------ */
/* -------- page-service.php --------- */
/* ----------------------------------- */
.cover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(../images/services/services--cover.jpg);
  background-position: left;
}
.cover:before {
  content: "";
  display: block;
}
.cover__text--container {
  margin-top: 32px;
  margin-left: 80px;
}
.cover__container h1 {
  margin-bottom: 40px;
}
.cover__text {
  line-height: 1.7;
}
.services__wrapper {
  background-color: rgba(255, 255, 255, 0.48);
  display: flex;
  position: relative;
}
.services__wrapper:before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  width: calc(100% + (var(--vw) * 50 - 50%) * 2);
  z-index: 1;
  background-color: rgba(155, 145, 145, 0.32);
}
.services__copy {
  margin: 56px 133px 56px 110px;
}
.services__container {
  display: flex;
  flex-direction: column;
  width: 50%;
  z-index: 2;
}
.services__container.sv__container--02 {
  flex-direction: row;
  flex-wrap: wrap;
}
.services__boxes--wrap {
  display: flex;
}
.services__box {
  border: solid var(--base-white);
}
a.services__box--alink {
  align-items: flex-end;
  background-color: rgba(155, 145, 145, 0.4);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.services__box.box--a {
  border-width: 0.5px 0.25px 0.25px 0.5px;
}
.services__box.box--b {
  border-width: 0.5px 0.25px 0.25px 0.25px;
}
.services__box.box--c {
  border-width: 0.25px 0.25px 0.5px 0.5px;
}
.services__box.box--d {
  border-width: 0.25px 0.25px 0.5px 0.25px;
}
.services__box.box--e {
  border-width: 0.5px 0.25px 0.25px 0.25px;
}
.services__box.box--f {
  border-width: 0.5px 0.5px 0.5px 0.25px;
}
.services__box.box--g {
  border-width: 0.25px 0.25px 0.5px 0.25px;
}
.services__box.box--a,
.services__box.box--d {
  width: 47.44%;
}
.services__box.box--b,
.services__box.box--c,
.services__box.box--f {
  width: 52.56%;
}
.services__boxes--wrap.flex__column {
  width: 47.44%;
}
.services__box.box--e,
.services__box.box--g {
  height: 100%;
}
.box__padding--upper {
  padding-top: 72px;
  padding-bottom: 40px;
}
.box__padding--lower {
  padding-top: 40px;
  padding-bottom: 72px;
}
.services__box.box--b a,
.services__box.box--d a,
.services__box.box--f a {
  align-items: flex-start;
}
.services__box.box--f a {
  justify-content: center;
}
.services__box.box--f {
  display: flex;
}
.display__minmax {
  display: block;
  line-height: 1.5;
}
.services__name {
  border-bottom: 0.75px solid var(--base-white);
  display: flex;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 40px;
}
.box--a .services__name,
.box--b .services__name {
  margin-bottom: 0;
}
.box--a .customer__needs,
.box--b .customer__needs {
  margin-bottom: 40px;
}
.box--b .services__name,
.box--c .services__name,
.box--e .services__name,
.box--g .services__name {
  border-bottom: 0.75px solid rgba(41, 36, 36, 0.72);
}
.box--b .services__name::before,
.box--d .services__name::before,
.box--f .services__name::before {
  content: "";
  background-color: rgba(41, 36, 36, 0.72);
  display: block;
  margin-right: 8px;
  width: 16px;
}
.box--a .services__name::after,
.box--c .services__name::after,
.box--e .services__name::after,
.box--g .services__name::after {
  content: "";
  background-color: rgba(41, 36, 36, 0.72);
  display: block;
  margin-left: 8px;
  width: 16px;
}
.box--a .services__name::after,
.box--d .services__name::before,
.box--f .services__name::before {
  background-color: var(--base-white);
}
.box--a .customer__needs,
.box--c .customer__needs,
.box--e .customer__needs,
.box--g .customer__needs {
  padding-right: 16px;
}
.box--b .customer__needs,
.box--d .customer__needs,
.box--f .customer__needs {
  padding-left: 16px;
}
.box--a > .services__box--alink:hover,
.box--d > .services__box--alink:hover,
.box--f > .services__box--alink:hover {
  background-color: rgba(217, 0, 0, 0.72);
  color: var(--base-white);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.box--b > .services__box--alink:hover,
.box--g > .services__box--alink:hover {
  background-color: rgba(254, 254, 254, 0.72);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.box--c > .services__box--alink:hover,
.box--e > .services__box--alink:hover {
  background-color: rgba(41, 36, 36, 0.5);
  color: var(--base-white);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.box--a > .services__box--alink:hover .customer__needs,
.box--c > .services__box--alink:hover .customer__needs,
.box--e > .services__box--alink:hover .customer__needs,
.box--g > .services__box--alink:hover .customer__needs {
  padding-right: 24px;
  transition-property: padding 0.3s ease-in-out;
}
.box--b > .services__box--alink:hover .customer__needs,
.box--d > .services__box--alink:hover .customer__needs,
.box--f > .services__box--alink:hover .customer__needs {
  padding-left: 24px;
  transition-property: padding 0.3s ease-in-out;
}
.box--a a p,
.box--c a p,
.box--e a p,
.box--g a p {
  text-align: end;
}
.customer__needs span {
  display: inline-block;
}
.display__o1025 {
  display: flex;
}
.display__u1024 {
  display: none;
}

/* section.services__contents */
.p-service__container {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
  width: calc(var(--vw) * 100);
  max-width: 1600px;
  padding: 160px 0 0;
  margin: 0 auto;
}
.p-service__container.service__02,
.p-service__container.service__04,
.p-service__container.service__06 {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.p-service__box {
  width: 54%;
}
.p-service__name::before {
  content: "";
  background-color: var(--base-gray);
  display: inline-block;
  height: 1px;
  margin-right: 0.8vw;
  width: 9.6vw;
  position: absolute;
  top: 16%;
}
.p-service__name {
  position: relative;
  z-index: 2;
}
.p-service__name--name {
  margin-left: 11vw;
}
.p-service__name::after {
  content: "";
  display: block;
  padding-top: 40px;
}
.p-service__name--bg {
  color: var(--base-gray);
  font-size: clamp(3rem, 2.839rem + 0.33vw, 3.375rem);
  font-weight: 600;
  position: absolute;
  left: 11vw;
  opacity: 0.16;
  top: 0;
  z-index: 1;
  line-height: 0.9;
}
.p-service__name--bg span {
  color: var(--corporate-red);
}
.p-service__name::after::first-letter {
  color: var(--corporate-red);
}
.p-service__textbox {
  margin-left: calc(9.6vw + 24px);
}
.p-service__textbox p {
  margin: 48px 0;
}
.p-service__container .customers__needs {
  letter-spacing: 0.1em;
}
.marker {
  background: linear-gradient(transparent 50%, rgb(217, 0, 0, 0.16) 50%); /* マーカーを引く */
  display: inline;
  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;
  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;
  /* マーカーが引かれる速度を指定 */
  transition: background-size 1.5s;
}
/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}
.p-service__description p {
  line-height: 1.7;
  margin: 0 0 24px;
}
.p-service__words {
  color: var(--base-gray);
}
.link__cases.link__arrow span,
.link__cases.link__arrow span::before,
.link__cases.link__arrow span::after {
  background-color: var(--corporate-red);
}
.link__cases {
  color: var(--base-gray);
  letter-spacing: 0.1em;
  margin-top: var(--px-40);
}
.p-service__textbox .flex__column {
  margin-top: var(--px-40);
}
.flex__column .link__cases {
  margin-top: var(--px-8);
}
a:visited.link__cases {
  color: var(--base-gray);
}
.p-service__img::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.p-service__img {
  background-image: url(../images/services/service__01.jpg);
  background-position: center;
  background-size: cover;
  width: 38.2%;
}
.service__02 .p-service__img {
  background-image: url(../images/services/service__02.jpg);
}
.service__03 .p-service__img {
  background-image: url(../images/services/service__03.jpg);
}
.service__04 .p-service__img {
  background-image: url(../images/services/service__04.jpg);
}
.service__05 .p-service__img {
  background-image: url(../images/services/service__05.jpg);
}
.service__06 .p-service__img {
  background-image: url(../images/services/service__06.jpg);
}
.service__07 .p-service__img {
  background-image: url(../images/services/service__07.jpg);
}
/* overft__wrapper */
.overft__wrapper {
  margin-top: var(--px-160);
}
.p__services .overft__nav--box.overft__nav--prev {
  background-image: url(../images/common/overft__nav--bg02.jpg);
  background-position: bottom;
}
.p__services .overft__nav--box.overft__nav--next {
  background-image: url(../images/common/overft__nav--bg03.jpg);
  background-position: bottom;
}
/* --------------------------------------- */
/* ------------ メディアクエリ ------------ */
/* --------------------------------------- */
/* min */
@media screen and (width > 1024px) {
  .p-service__container {
    min-height: 780px;
  }
}
@media screen and (width > 1695px) {
  .display__o1025 {
    max-width: 1600px;
    margin: 0 auto;
    width: calc(var(--vw) * 100);
  }
  .p__services .overft__nav--box.overft__nav--prev,
  .p__services .overft__nav--box.overft__nav--next {
    background-position: center;
  }
}
/* ---- max ---- */
@media screen and (width <= 1280px) {
  .box--a .customer__needs,
  .box--c .customer__needs,
  .box--e .customer__needs,
  .box--g .customer__needs {
    padding-right: 4px;
  }
  .box--b .customer__needs,
  .box--d .customer__needs,
  .box--f .customer__needs {
    padding-left: 8px;
  }
  .box--a > .services__box--alink:hover .customer__needs,
  .box--c > .services__box--alink:hover .customer__needs,
  .box--e > .services__box--alink:hover .customer__needs,
  .box--g > .services__box--alink:hover .customer__needs {
    padding-right: 8px;
    transition-property: padding 0.3s ease-in-out;
  }
  .box--b > .services__box--alink:hover .customer__needs,
  .box--d > .services__box--alink:hover .customer__needs,
  .box--f > .services__box--alink:hover .customer__needs {
    padding-left: 16px;
    transition-property: padding 0.3s ease-in-out;
  }
}
@media screen and (width <= 1148px) {
  .display__minmax {
    display: none;
  }
}

@media screen and (width <= 1024px) {
  .display__o1025 {
    display: none;
  }
  .display__u1024 {
    display: block;
  }
  .display__minmax {
    display: block;
  }
  .cover {
    background-position: center;
  }
  .services__wrapper {
    background-size: auto;
    background-position: top right;
    flex-direction: column;
  }
  .services__wrapper:before {
    display: none;
  }
  .services__container {
    width: calc(var(--vw) * 100);
  }
  .services__copy {
    margin: 56px clamp(1.25rem, -0.4rem + calc(var(--vw) * 10.8), 6rem);
  }
  .p-service__textbox {
    margin-left: calc(9.6vw + 16px);
  }
  .box__padding--upper {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .box__padding--lower {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .box--a .customer__needs,
  .box--b .customer__needs {
    margin-bottom: 16px;
  }
  .box--c .services__name,
  .box--d .services__name,
  .box--e .services__name,
  .box--f .services__name,
  .box--g .services__name {
    margin-bottom: 16px;
  }
  .p-service__container,
  .p-service__container.service__02,
  .p-service__container.service__04,
  .p-service__container.service__06 {
    flex-direction: column;
  }
  .p-service__box {
    width: 90%;
  }
  .p-service__img {
    align-self: flex-end;
    width: 64%;
    margin-top: 40px;
  }
  .service__02 .p-service__img,
  .service__04 .p-service__img,
  .service__06 .p-service__img {
    align-self: flex-start;
  }
}
@media screen and (width <= 768px) {
  .display__minmax {
    display: block;
    line-height: 1.2;
  }
  .cover__text--container {
    margin-top: 0;
    margin-left: 0;
  }
  /* .p-service__container {
    margin: 80px 0;
  } */
  .p-service__name--bg {
    font-size: clamp(2.5rem, 2.143rem + 1.79vw, 3rem);
    line-height: 0.9;
    top: var(--px-16);
  }
}
@media screen and (width <= 500px) {
  .display__minmax {
    display: none;
  }
  .services__box.box--a,
  .services__box.box--d,
  .services__box.box--b,
  .services__box.box--c,
  .services__box.box--f,
  .services__boxes--wrap.flex__column {
    width: 50%;
  }
  .p-service__container .customers__needs {
    font-size: 1.125rem;
  }
}
@media screen and (width <= 390px) {
  .p-service__name::before {
    width: 8vw;
  }
}