@charset "UTF-8";
/* 変数の定義
--------------------------------------------------*/
/* 色の定義
--------------------------------------------------*/
/* テキストパーツ
--------------------------------------------------*/
.white {
  color: #fff;
}

.black {
  color: #1C1C1C;
}

.blue {
  color: #0069B5;
}

.l-blue {
  color: #0069B5;
}

.gray {
  color: #F8F8F8;
}

/* フォントの定義
--------------------------------------------------*/
html, body, ul, ol, dl, li, dt, dd, p, div, span, img, svg, a, table, tr, th, td, figure {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #1C1C1C;
  font-feature-settings: "halt";
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1C1C1C;
  font-feature-settings: "halt";
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "halt";
}

html {
  font-size: 62.5%;
}

p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #1C1C1C;
  letter-spacing: 0.06em;
  font-feature-settings: "halt";
}
@media screen and (min-width: 769px) {
  p {
    font-size: 1.6rem;
  }
}

/* Noto Serif JP
--------------------------------------------------*/
.serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Noto Sans JP
--------------------------------------------------*/
.sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Noto Sans
--------------------------------------------------*/
.sans_en {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Sorts Mill Goudy
--------------------------------------------------*/
.mill {
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  font-style: normal;
}

/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* サービスページ_共通
--------------------------------------------------*/
/* サービスイントロ
--------------------------------------------------*/
#services__intro {
  padding-top: 60px;
  width: calc(100% - 10.256vw);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  #services__intro {
    padding-top: 80px;
    width: calc(100% - 25.714vw);
  }
}
@media screen and (min-width: 1400px) {
  #services__intro {
    width: 1040px;
  }
}
@media screen and (min-width: 1000px) {
  #services__intro .inner-wrap-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1000px) {
  #services__intro .intro_txt_wrap {
    width: calc(100% - 24.285vw);
  }
}
@media screen and (min-width: 1400px) {
  #services__intro .intro_txt_wrap {
    width: calc(100% - 340px);
  }
}
#services__intro .intro_txt {
  margin-top: 20px;
  font-size: 1.6rem;
}
@media screen and (min-width: 769px) {
  #services__intro .intro_txt {
    font-size: 1.8rem;
  }
}
#services__intro .txt_block {
  line-height: 180%;
  font-size: 1.6rem;
}
@media screen and (min-width: 769px) {
  #services__intro .txt_block {
    font-size: 1.8rem;
  }
}
#services__intro .blue {
  font-weight: 700;
  background-color: #F2F7FB;
  font-size: 1.6rem;
}
@media screen and (min-width: 769px) {
  #services__intro .blue {
    font-size: 1.8rem;
  }
}
#services__intro .blue .txt_block {
  font-weight: 700;
  color: #0069B5;
}
#services__intro .intro_img {
  position: relative;
  overflow: visible;
  margin-top: 30px;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  #services__intro .intro_img {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: 40px;
  }
}
@media screen and (min-width: 1000px) {
  #services__intro .intro_img {
    width: 20vw;
    margin-top: 0;
    margin-right: 0;
  }
}
@media screen and (min-width: 1400px) {
  #services__intro .intro_img {
    width: 280px;
  }
}
#services__intro .intro_img::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 40px;
  width: calc(100% - 10.256vw);
  height: 100%;
  background-color: #F2F7FB;
}
@media screen and (min-width: 769px) {
  #services__intro .intro_img::before {
    width: 230px;
    height: 230px;
  }
}
@media screen and (min-width: 1000px) {
  #services__intro .intro_img::before {
    width: 17.142vw;
    height: 17.142vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__intro .intro_img::before {
    width: 240px;
    height: 240px;
  }
}
#services__intro .intro_img img {
  position: relative;
  z-index: 10;
  width: calc(100% - 10.256vw);
}
@media screen and (min-width: 769px) {
  #services__intro .intro_img img {
    width: 230px;
  }
}
@media screen and (min-width: 1000px) {
  #services__intro .intro_img img {
    width: 17.142vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__intro .intro_img img {
    width: 240px;
  }
}
#services__intro .intro_img.move {
  -webkit-animation: fade_In_img 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: fade_In_img 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

/* 弊社の強みとサービスの特徴
--------------------------------------------------*/
#services__features {
  margin-top: 100px;
}
@media screen and (min-width: 769px) {
  #services__features {
    margin-top: 76px;
  }
}
#services__features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
}
@media screen and (min-width: 769px) {
  #services__features::before {
    width: calc(100% - 2.857vw);
  }
}
@media screen and (min-width: 1400px) {
  #services__features::before {
    width: calc(100% - 40px);
  }
}
#services__features .features_box_wrap {
  padding: 60px 0;
}
@media screen and (min-width: 769px) {
  #services__features .features_box_wrap {
    padding: 80px 0;
  }
}
#services__features .features_box {
  margin-top: 30px;
}
@media screen and (min-width: 1000px) {
  #services__features .features_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 40px;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .features_li {
    width: calc(100% - 33vw - 6.035vw);
  }
}
@media screen and (min-width: 1400px) {
  #services__features .features_li {
    width: calc(100% - 545px);
  }
}
#services__features .features {
  margin-top: 20px;
}
@media screen and (min-width: 1000px) {
  #services__features .features {
    margin-top: 30px;
  }
}
#services__features .features:first-child {
  margin-top: 0;
}
#services__features .features_ttl {
  position: relative;
  font-size: 2.2rem;
  margin-bottom: 10px;
  padding-left: 25px;
}
@media screen and (min-width: 769px) {
  #services__features .features_ttl {
    font-size: 2.4rem;
  }
}
#services__features .features_ttl::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background-color: #0069B5;
}
#services__features .features_note {
  position: relative;
  margin-top: 4px;
  padding-left: 24px;
  font-weight: 500;
  line-height: 180%;
}
#services__features .features_note::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 16px;
  height: 1px;
  border-bottom: 1px solid #0069B5;
}
#services__features .features_note .word {
  font-size: 1.6rem;
}
#services__features .features_txt {
  padding-left: 24px;
  font-weight: 500;
  line-height: 180%;
}
#services__features .services_image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media screen and (min-width: 1000px) {
  #services__features .services_image {
    width: 33vw;
    margin-top: 0;
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image {
    width: 462px;
  }
}
#services__features .services_image_li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46.875vw;
  height: 46.875vw;
  border-radius: 50%;
}
@media screen and (min-width: 370px) {
  #services__features .services_image_li {
    width: 170px;
    height: 170px;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li {
    width: 17.564vw;
    height: 17.574vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image_li {
    width: 245.9px;
    height: 245.9px;
  }
}
#services__features .services_image_li::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 46.875vw;
  height: 46.875vw;
  border-radius: 50%;
  outline: 1px solid rgb(164, 204, 232);
  outline-offset: -1px;
  pointer-events: none;
}
@media screen and (min-width: 370px) {
  #services__features .services_image_li::before {
    width: 170px;
    height: 170px;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li::before {
    width: 17.571vw;
    height: 17.571vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image_li::before {
    width: 246px;
    height: 246px;
  }
}
#services__features .services_image_li::after {
  content: "";
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 46.875vw;
  height: 46.875vw;
  border-radius: 50%;
  background-color: #F8FBFD;
  box-shadow: inset 0px 0px 50px 0px rgba(2, 70, 172, 0.8);
  pointer-events: none;
  opacity: 0.7;
}
@media screen and (min-width: 370px) {
  #services__features .services_image_li::after {
    width: 170px;
    height: 170px;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li::after {
    width: 17.571vw;
    height: 17.571vw;
    box-shadow: inset 0px 0px 5.714vw 0px rgba(2, 70, 172, 0.8);
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image_li::after {
    width: 246px;
    height: 246px;
    box-shadow: inset 0px 0px 80px 0px rgba(2, 70, 172, 0.8);
  }
}
#services__features .services_image_li:first-child {
  margin: 0 12.794vw;
}
@media screen and (min-width: 370px) {
  #services__features .services_image_li:first-child {
    margin: 0 21.794vw;
  }
}
@media screen and (min-width: 769px) {
  #services__features .services_image_li:first-child {
    margin: 0 25.794vw;
  }
}
@media screen and (min-width: 700px) {
  #services__features .services_image_li:first-child {
    margin: 0 26.794vw;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li:first-child {
    margin: 0;
  }
}
#services__features .services_image_li:nth-child(2) {
  margin-top: -45px;
  margin-right: -10px;
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li:nth-child(2) {
    margin-top: -4.857vw;
    margin-right: -1.071vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image_li:nth-child(2) {
    margin-top: -68px;
    margin-right: -15px;
  }
}
#services__features .services_image_li:last-child {
  margin-top: -45px;
  margin-left: -10px;
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_li:last-child {
    margin-top: -4.857vw;
    margin-left: -1.071vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__features .services_image_li:last-child {
    margin-top: -68px;
    margin-left: -15px;
  }
}
#services__features .services_image_txt {
  position: relative;
  z-index: 12;
  text-align: center;
  display: inline-block;
  font-size: clamp(1.4rem, 4.054vw, 1.5rem);
  color: #0069B5;
  font-weight: 700;
}
@media screen and (min-width: 370px) {
  #services__features .services_image_txt {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  #services__features .services_image_txt {
    font-size: clamp(1.6rem, 1.428vw, 2rem);
  }
}
#services__features .features_attention {
  margin-top: 30px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 180%;
  color: #767676;
}
@media screen and (min-width: 769px) {
  #services__features .features_attention {
    margin-top: 40px;
    font-size: 1.4rem;
  }
}

/* サービス一覧
--------------------------------------------------*/
#services__wrapper {
  overflow: visible !important;
}

#services__bottom {
  margin-bottom: 100px;
}
@media screen and (min-width: 769px) {
  #services__bottom {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 1000px) {
  #services__bottom .inner-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: auto;
  }
}
#services__bottom .under_ttl_wrap {
  display: block;
}
@media screen and (min-width: 769px) {
  #services__bottom .under_ttl_wrap {
    display: flex;
  }
}
#services__bottom .under_ttl_wrap .main_ttl {
  line-height: 130%;
}
@media screen and (min-width: 769px) {
  #services__bottom .under_ttl_wrap .main_ttl {
    line-height: 180%;
  }
}
#services__bottom .under_ttl_wrap .main_ttl::before {
  top: 6.5px;
}
@media screen and (min-width: 769px) {
  #services__bottom .under_ttl_wrap .main_ttl::before {
    top: 10.5px;
  }
}
#services__bottom .under_ttl_wrap .sub_en_ttl {
  margin-left: 22px;
  margin-top: 5px;
}
@media screen and (min-width: 769px) {
  #services__bottom .under_ttl_wrap .sub_en_ttl {
    margin-left: 0;
    margin-top: 0;
  }
}
#services__bottom .services_bottom_nav {
  padding-top: 80px;
}
@media screen and (min-width: 1000px) {
  #services__bottom .services_bottom_nav {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 70px;
    width: 230px;
    padding-top: 100px;
  }
}
#services__bottom .services_bottom_nav_txt {
  font-weight: 500;
}
#services__bottom .page_navlink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 180%;
  padding-bottom: 8px;
  margin-top: 10px;
  width: 100%;
  color: #0069B5;
  border-bottom: 1px solid #0069B5;
}
@media screen and (min-width: 1000px) {
  #services__bottom .page_navlink {
    margin-top: 20px;
    color: #959595;
    border-bottom: 1px solid #959595;
  }
}
#services__bottom .page_navlink::after {
  content: "";
  position: relative;
  width: 17.14px;
  height: 10px;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.07474H17.1375M17.1375 5.07474C15.784 4.53701 13.0769 2.76923 13.0769 0M17.1375 5.07474C15.784 5.56265 13.0769 7.23077 13.0769 10' stroke='%230069B5'/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.07474H17.1375M17.1375 5.07474C15.784 4.53701 13.0769 2.76923 13.0769 0M17.1375 5.07474C15.784 5.56265 13.0769 7.23077 13.0769 10' stroke='%230069B5'/%3E%3C/svg%3E%0A");
  background-color: #0069B5;
  transform: rotate(90deg);
}
@media screen and (min-width: 1000px) {
  #services__bottom .page_navlink::after {
    background-color: #959595;
    transform: rotate(0deg);
  }
}
#services__bottom .is-current {
  color: #0069B5;
  border-bottom: 1px solid #0069B5;
}
#services__bottom .is-current::after {
  background-color: #0069B5;
}
#services__bottom .services_sec_li {
  position: relative;
  padding-top: 20px;
}
@media screen and (min-width: 1000px) {
  #services__bottom .services_sec_li {
    width: calc(100% - 230px - 7.142vw);
    height: 100%;
  }
}
@media screen and (min-width: 1400px) {
  #services__bottom .services_sec_li {
    width: calc(100% - 330px);
  }
}
#services__bottom .services_sec {
  padding-top: 60px;
}
@media screen and (min-width: 769px) {
  #services__bottom .services_sec {
    padding-top: 80px;
  }
}
#services__bottom .check_list {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  -moz-column-gap: 5.128vw;
       column-gap: 5.128vw;
}
@media screen and (min-width: 1000px) {
  #services__bottom .check_list {
    margin-top: 30px;
    -moz-column-gap: 2.857vw;
         column-gap: 2.857vw;
  }
}
#services__bottom .check_txt {
  position: relative;
  margin-top: 4px;
  padding-left: 24px;
  font-size: 1.6rem;
  line-height: 180%;
}
@media screen and (min-width: 769px) {
  #services__bottom .check_txt {
    font-size: 1.8rem;
  }
}
#services__bottom .check_txt::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%230069B5' stroke='%230069B5'/%3E%3Cpath d='M7.05588 11.2943L3.76465 8.17138L4.58746 7.39066L7.05588 9.73284L12.3536 4.70605L13.1764 5.48678L7.05588 11.2943Z' fill='white'/%3E%3C/svg%3E%0A");
}
@media screen and (min-width: 769px) {
  #services__bottom .check_txt::before {
    top: 9px;
  }
}
#services__bottom .check_txt.wide {
  width: 100%;
}
#services__bottom .check_txt.middle {
  width: 406px;
}
#services__bottom .check_txt.middle:nth-child(even) {
  width: 238px;
}
#services__bottom .check_txt.short {
  width: 310px;
}
#services__bottom .case_wrap {
  margin-top: 25px;
}
@media screen and (min-width: 1000px) {
  #services__bottom .case_wrap {
    margin-top: 36px;
  }
}
#services__bottom .case_ttl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 180%;
  color: white;
  background-color: #0069B5;
}
@media screen and (min-width: 769px) {
  #services__bottom .case_ttl {
    font-size: 1.8rem;
  }
}
#services__bottom .tag {
  display: inline-block;
  padding: 4px 16px;
  margin-left: 8px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 110%;
  color: #0069B5;
  background-color: white;
}
@media screen and (min-width: 769px) {
  #services__bottom .tag {
    font-size: 1.4rem;
  }
}
#services__bottom .case_list {
  padding: 20px 5.128vw;
  background-color: #F2F7FB;
}
@media screen and (min-width: 1000px) {
  #services__bottom .case_list {
    padding: 30px 2.142vw;
  }
}
@media screen and (min-width: 1400px) {
  #services__bottom .case_list {
    padding: 30px;
  }
}
#services__bottom .case {
  position: relative;
  padding-left: 16.5px;
  margin-top: 4px;
  font-weight: 400;
  line-height: 180%;
  font-size: 1.6rem;
}
#services__bottom .case .txt_block {
  font-weight: 400;
  line-height: 180%;
}
#services__bottom .case::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background-color: #0069B5;
}
@media screen and (min-width: 769px) {
  #services__bottom .case::before {
    top: 12px;
  }
}
#services__bottom .case .tag {
  border: 1px solid #0069B5;
  background-color: #F2F7FB;
  margin-left: 3px;
  padding: 1px 16px;
}
#services__bottom .case_note {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 180%;
  color: #767676;
}
@media screen and (min-width: 769px) {
  #services__bottom .case_note {
    font-size: 1.4rem;
  }
}
/*# sourceMappingURL=service.css.map */