@charset "utf-8";
/* タイトル箇所 */
.page_top {
  background: url(../img/page_heading_bg.webp) no-repeat center / cover;
}

/* コンテンツ */
.solution {
  background: var(--main-color);
  margin-block: var(--space-65);
  .solution_topTxt {
    color: #fff;
    padding-bottom: var(--space-30);
  }
}
.solution_box {
  background: #fff;
  padding-top: var(--space-65);
  margin: 0 auto -656px;
  position: relative;
  .page_heading {
    color: var(--main-color);
    padding-inline: 20px;
  }
}
/* 分野から見る熱マネジメントソリューションのご紹介 */
.sol_box--inner {
  background: url(../img/sol_box_bg.webp) no-repeat center / cover;
}
.sol_block {
  display: flex;
  justify-content: center;
  gap: var(--space-65) var(--space-20);
  flex-wrap: wrap;
  padding: 0 88px var(--space-45);
  @media screen and (max-width: 767px) {
    padding: 0 20px var(--space-45);
    gap: 30px var(--space-20);
  }
}
.sol_item {
  width: calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  @media screen and (max-width: 767px) {
    width: calc((100% - 15px) / 2);
  }
}
.sol_img {
  position: relative;
  margin-bottom: 10px;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    font-size: var(--font-42);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #1374A9;
    text-align: center;
  }
}
.more_btn a {
  width: 100%;
  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;
    }
  }
}
.sol_bg {
  width: 100%;
  height: 717px;
  background: #fff;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}