@charset "UTF-8";

/*================================================
 * service
 ================================================*/
/* 背景 */
#service::before {
  position: absolute;
  z-index: -2;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-white);
  top: 0;
  right: 0px;
}
#service::after {
  z-index: -1;
  position: absolute;
  content: "";
  width: 87%;
  height: 93%;
  background: var(--color-base);
  top: 10rem;
  right: 0px;
  border-radius: 40px 0 0 40px;
}


#service .s_Area .s_left {
  width: 17%;
}
#service .s_Area .s_left h2 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.3em;
}

#service .s_Area .s_right {
  width: 83%;
}


#service .flex.s_item {
  padding: 0 0 8rem;
  position: relative;
}
#service .flex.s_item h3 {
  position: relative;
}
#service .flex.s_item h3::before {
  position: absolute;
  content: "";
  width: 160px;
  height: 2px;
  border-radius: 5px;
  top: 50%;
  background: var(--color-white);
}
#service .flex.s_item.item01 h3::before {
  left: -50%;
}
#service .flex.s_item.item02 h3::before {
  right: -50%;
}

#service  .s_img {
  width: 57%;
}

#service .s_txt {
  width: 43%;
  position: absolute;
  bottom: 8%;
  background: var(--color-white);
  padding: 55px 50px 40px;
  border-radius: 5px;
}
#service .item01 .s_txt {
  right: 0;
}
#service .item02 .s_txt {
  left: 0;
}
#service .s_txt img.icon {
  width: 90px;
  position: absolute;
  top: -35px;
}
#service .s_txt img.icon.wide {
  width: 100px;
}
#service .item01 .s_txt img.icon {
  right: 120px;
}
#service .item02 .s_txt img.icon {
  left: 30px;
}


@media screen and (max-width:767px) {
  #service::after {
    width: 97%;
  }
  #service .s_Area .s_left {
    width: 100%;
  }
  #service .s_Area .s_right {
    width: 100%;
  }
  #service .flex.s_item {
    padding: 0 0 3rem;
  }
  #service .s_img {
    width: 97%;
    margin-right: 3%;
  }
  #service .s_txt {
    width: 97%;
    position: unset;
    padding: 20px 20px 30px;
    margin: -20px 0 0 3%;
  }
  #service .s_txt h3 {
    margin-bottom: 10px;
  }
  #service .s_txt p {
    font-size: 0.85rem;
  }
  #service .flex.s_item::before {
    width: 60px;
    top: 50%;
    transform: rotate(45deg);
  }
  #service .flex.s_item.item01::before,
  #service .flex.s_item.item02::before {
    left: 23%;
    right: 0;
  }
  #service .flex.s_item h3::before {
    width: 80px;
    top: -100%;
    transform: rotate(55deg);
  }
  #service .flex.s_item.item01 h3::before,
  #service .flex.s_item.item02 h3::before {
    left: auto;
    right: 10%;
  }
  #service .s_txt img.icon,
  #service .s_txt img.icon.wide {
    width: 85px;
    top: auto;
    bottom: 20px;
    z-index: 0;
  }
  #service .item01 .s_txt img.icon,
  #service .item02 .s_txt img.icon {
    right: 0px;
    left: auto;
  }
}


/*================================================
 * flow
 ================================================*/
#flow ul {
  display: grid;
  gap: 50px 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
  padding: 20px 0 40px;
}
#flow ul li {
  padding: 0 20px 20px;
  background: var(--color-base);
  border-radius: 5px;
}
#flow ul li img {
  margin-top: -20px;
}
#flow ul li p {
  line-height: 1.5;
}

@media screen and (max-width:767px) {
  #flow ul {
    gap: 40px 20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
  }
  #flow ul li {
    padding: 0 5px 15px;
  }
}