/* 製造者：平野 */
@charset "utf-8";

/* 全体共通 */
.client_work_main {
  background-color: #EAECEF;
  font-family: var(--NotoSans);
  font-weight: 400;
  color: #1B1B1B;
}

.request_process_sec,
.achievements_sec {
  width: 100%;
  border: #000000 0.1rem solid;
  border-radius: 0 5.0rem 0 0;
}

/* 下からフェードイン共通処理 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10.0rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* お仕事の依頼内容 */
.request_details_sec {
  height: fit-content;
  width: fit-content;
  margin-inline: auto;
  padding-top: 10.0rem;
  padding-bottom: 17.5rem;
}

.request_details_space {
  width: 88.0rem;
  margin-inline: auto;
  background-color: #FFFFFF;
  border: #000000 0.1rem solid;
  border-radius: 2.0rem;
  padding-block: 5.0rem 4.5rem;
  padding-inline: auto;
  /* 下からフェードインのための準備 */
  opacity: 0;
  transform: translateY(10.0rem);

  &.slide-under {
    animation: 0.3s fadeIn ease-out forwards;
  }
}


.request_title {
  width: fit-content;
  font-family: var(--ZenOldMincho);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.175rem;
  line-height: calc(51 / 35);
  margin-inline: auto;
  margin-bottom: 2.0rem;
}

.request_text {
  width: fit-content;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  line-height: calc(32 / 16);
  margin-inline: auto;
  text-align: center;
}

/* ご依頼・ご相談の流れ */
.request_process_sec {
  background-color: #D9EAF2;
  border-bottom: none;
  padding-block: 10.0rem 15.0rem;
}

.process_title {
  width: fit-content;
  font-weight: 500;
  font-size: 3.5rem;
  letter-spacing: 0.175rem;
  line-height: calc(51 / 35);
  margin-inline: auto;
}

.process_space {
  width: 108.0rem;
  background-color: #FFFFFF;
  margin-top: 3.0rem;
  margin-inline: auto;
  padding-block: 5.0rem;
  padding-inline: auto;
  border: #707070 0.1rem solid;
  border-radius: 2.0rem;
}

.process_list {
  display: grid;
  grid-template-columns: 60.1rem;
  row-gap: 2.5rem;
  width: fit-content;
  margin-inline: auto;
}

.process_list_block {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 2.5rem;
  /* 下からフェードインのための準備 */
  opacity: 0;
  transform: translateY(10.0rem);

  &.slide-under {
    animation: 0.3s fadeIn ease-out forwards;
  }
}

.process_info {
  display: grid;
  grid-template-columns: 10.5rem auto;
  column-gap: 1.1rem;
}

.process_info_step {
  color: #F5BB1B;
  font-family: var(--Alegreya);
}

.process_step {
  width: fit-content;
  font-size: 4.0rem;
  line-height: calc(40 / 40);
  margin-inline: auto;
}

.process_num {
  width: fit-content;
  font-size: 10.7rem;
  line-height: calc(107 / 107);
  margin-inline: auto;
  margin-top: -2.2rem;
}

.process_info_space {
  width: stretch;
}

.process_info_title {
  font-weight: 700;
  font-size: 2.0rem;
  letter-spacing: 0.1rem;
  line-height: calc(29 / 20);
  padding-bottom: 0.7rem;
  border-bottom: #F5BB1B 0.1rem solid;
  margin-bottom: 0.3rem;
}

.process_info_text {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  line-height: calc(32 / 16);
}

.contact_link {
  display: block;
  width: fit-content;
  padding-inline: 5.0rem;
  margin-top: 2.7rem;
  margin-inline: 12.0rem auto;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  line-height: calc(43 / 16);
  background-color: #F5BB1B;
  border: #000000 0.1rem solid;
  border-radius: 100vh;
}

.process_triangle {
  position: relative;
  width: 3.3rem;
  aspect-ratio: 1 / cos(30deg);
  background-color: #000000;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  margin-inline: auto;

  &::before {
    position: absolute;
    content: '';
    top: 0.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(3.3rem - calc(2 * 0.1rem * sqrt(3)));
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    aspect-ratio: 1 / cos(30deg);
    background-color: #F5BB1B;
  }
}

/* 実績 */
.achievements_sec {
  position: relative;
  left: 0;
  bottom: 0;
  background-color: #4B7DBF;
  padding-block: 9.8rem 20.323rem;
  padding-left: 10.0rem;
  color: #FFFFFF;
}

.achievements_title_group {
  margin-bottom: 1.8rem;
}

.achievements_title_en {
  font-family: var(--Alegreya);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: 0.038rem;
  line-height: calc(30 / 25);
}

.achievements_title_jp {
  font-family: var(--ZenOldMincho);
  font-weight: 900;
  font-size: 3.5rem;
  line-height: calc(45 / 35);
}

.achievements_text {
  font-size: 1.5rem;
  letter-spacing: 0.075rem;
  line-height: calc(30 / 15);
}

.swiper_outer {
  width: stretch;
  height: fit-content;
  position: relative;
  margin-top: 3.5rem;
}

.swiper_inner {
  width: stretch;
  height: fit-content;
  overflow: hidden;
}

.achievements_list {
  display: flex;

  li {
    width: 41.0rem;
    padding-bottom: 2.6rem;
  }
}

.swiper-wrapper {
  transition-timing-function: ease-out;
}

.achievement_img {
  aspect-ratio: 410 / 229;
  width: 41.0rem;
  height: 22.9rem;
  border: #000000 0.1rem solid;
  border-radius: 1.0rem;
}

.achievement_title {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.024rem;
  line-height: calc(24 / 16);
  padding-block: 1.0rem 2.0rem;
  /* 社名は1行表示にする */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement_info_text {
  font-size: 1.5rem;
  letter-spacing: 0.023rem;
  line-height: calc(30 / 15);
  /* 説明は2行表示にする */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

/* スクロールバー */
.swiper-scrollbar {
  height: 0.4rem;
  width: 84.5rem;
  background-color: #EAECEF;
  border-radius: 100vh;

  & .swiper-scrollbar-drag {
    background-color: #000000;
    height: 0.4rem;
    border-radius: 100vh;
  }
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 4.9rem;
  width: 4.9rem;
  position: absolute;
  bottom: -2.0rem;
  cursor: pointer;

  &.swiper-button-disabled {
    cursor: auto;
    opacity: 0.5;
  }
}

.swiper-button-prev {
  left: 88.3rem;
}

.swiper-button-next {
  left: 96.7rem;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  margin: auto;
  height: 4.9rem;
  width: 4.9rem;
}

/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(../img/about_inte_btn1.png);
}

/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(../img/about_inte_btn2.png);
}


.work_link {
  display: block;
  margin-top: 4.2rem;
  margin-left: calc(96.8rem - 10.0rem);
  font-family: var(--ZenOldMincho);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  line-height: calc(42 / 16);
  border: #000000 0.1rem solid;
  border-radius: 100vh;
  color: #000000;
  background-color: #FFFFFF;
  width: fit-content;
  padding-inline: 2.0rem;
}

@media (width <=699.98px) {

  /* 全体共通 */
  .request_process_sec,
  .achievements_sec {
    width: 100%;
    border: #000000 0.1rem solid;
    border-radius: 0 5.0rem 0 0;
  }


  /* お仕事の依頼内容 */
  .request_details_sec {
    padding-top: 8.0rem;
    padding-bottom: 18.0rem;
  }

  .request_details_space {
    width: 35.5rem;
    padding-block: 4.0rem 3.4rem;
    padding-inline: 1.0rem;
  }

  .request_title {
    font-weight: 900;
    font-size: 2.0rem;
    letter-spacing: 0.1rem;
    line-height: calc(29 / 20);
    margin-bottom: 1.1rem;
  }

  .request_text {
    width: stretch;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.075rem;
    line-height: calc(30 / 15);
    text-align: left;
  }

  /* ご依頼・ご相談の流れ */

  .request_process_sec {
    padding-block: 6.0rem 15.0rem;
    border-bottom: none;
  }

  .process_title {
    font-size: 2.5rem;
    letter-spacing: 0.125rem;
    line-height: calc(36 / 25);
  }

  .process_space {
    width: 35.5rem;
    margin-top: 6.0rem;
    padding-block: 4.0rem;
    padding-inline: 0.9rem;
  }

  .process_list {
    grid-template-columns: 33.7rem;
    row-gap: 3.5rem;

    li {
      grid-template-columns: 100%;
      row-gap: 3.5rem;
    }
  }

  .process_info {
    grid-template-columns: 100%;
  }

  .process_info_space {
    margin-top: 0.3rem;
  }

  .process_info_title {
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
    line-height: calc(32 / 18);
    padding-bottom: 0.2rem;
    margin-bottom: -0.1rem;
    text-align: center;
  }

  .process_info_text {
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: calc(32 / 14);
  }

  .contact_link {
    padding-inline: 3.6rem;
    margin-top: 2.0rem;
    margin-inline: auto;
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    line-height: calc(35 / 14);
  }

  /* 実績 */
  .achievements_sec {
    padding-block: 6.0rem 15.0rem;
    padding-inline: 1.9rem;
  }

  .achievements_title_group {
    margin-bottom: 1.2rem;
  }

  .achievements_title_en {
    font-size: 1.8rem;
    letter-spacing: 0.027rem;
    line-height: calc(18 / 18);
  }

  .achievements_title_jp {
    font-size: 2.5rem;
    line-height: calc(36 / 25);
  }

  .swiper_outer {
    width: fit-content;
    margin-top: 1.0rem;
    position: static;
  }

  .swiper_inner {
    width: fit-content;
  }

  .achievements_list {
    display: flex;
    flex-direction: column;
    width: 33.7rem;
    column-gap: 0;
    row-gap: 4.0rem;
    margin-inline: auto;

    li {
      width: 33.7rem;
      padding-bottom: 0;
    }
  }

  .achievement_img {
    aspect-ratio: 337 / 188;
    width: 33.7rem;
    height: 18.8rem;
  }

  .achievement_title {
    padding-block: 0.5rem 0;
  }

  .achievement_info_text {
    -webkit-line-clamp: 3;
  }


  .work_link {
    margin-top: 5.5rem;
    margin-inline: auto;
    line-height: calc(44 / 16);
  }
}