/* タイトル箇所 */
.page_top {
  background: url(../img/page_heading_bg.webp) no-repeat center / cover;
}

/* コンテンツ */
.examples {
  background: var(--light-blue);
  padding: var(--space-45);
  margin-top: var(--space-65);
  @media screen and (max-width: 767px) {
    .cmn_container {
      width: 100%;
    }
  }
}
.examples_first {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: end;
  min-height: 200px;
  @media screen and (max-width: 767px) {
    padding-inline: 10px;
  }
}
.examples_first--txt {
  font-size: var(--font-32);
  letter-spacing: var(--letter-10);
  margin: auto 10px;
  span {
    color: var(--main-color);
    font-weight: 900;
  }
  @media screen and (max-width: 767px) {
    font-size: 1.8rem;
  }
}
/* 事例一覧 */
.examples_block {
  display: flex;
  gap: var(--space-20);
  flex-wrap: wrap;
  counter-reset: num;
  .more_btn a {
    width: 100%;
    max-width: initial;
    display: flex;
    justify-content: center;
    position: relative;
    img {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
    }
    @media screen and (max-width: 767px) {
      justify-content: flex-start;
      img {
      right: 7px;
      }
    }
  }
}
.examples_item {
  width: calc((100% - 40px) / 3);
  text-align: center;
  padding: 10px;
  border: 1px solid var(--main-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  @media screen and (max-width: 767px) {
    width: calc((100% - 15px) / 2);
  }
}
.examples_item--title {
  color: var(--main-color);
  background: var(--sub-color);
  font-size: var(--font-32);
  font-weight: 900;
  letter-spacing: var(--letter-48);
  padding: 10px;
  &::after {
    counter-increment: num 1;
    content: counter(num, decimal-leading-zero) ' ';
    color: var(--main-color);
    font-weight: 900;
  }
}
.examples_item--txt {
  font-weight: 900;
  letter-spacing: var(--letter-32); 
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 767px) {
    font-size: 1.6rem;
    letter-spacing: 0;
  }
}