@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* セクション共通 */
.page-section {
  margin-bottom: 6rem;
}

.page-section:last-child {
  margin-bottom: 0;
}

/* セクションタイトル */
.section-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-left: 2.2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 8px;
  block-size: calc(100% - 0.25em);
  background: var(--sharp-red);
}

.section-title-en {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
}

.section-title-en__light {
  font-weight: 400;
}

.section-title-ja {
  flex-basis: 100%;
  font-size: 1.2rem;
}

/* 事業ドメインのアウトライン */
.outline {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 2rem;
}

.outline__img img {
  width: 100%;
  height: auto;
  display: block;
}

.outline__lead {
  font-weight: 400;
}

.outline__title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;

}

.outline__text {
  font-size: 1.4rem;
  font-weight: 400;
}

/* 主な事業内容 */
.business__title {
  background-color: var(--white-gray);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
}

.business__list {
  display: grid;
}

.grid2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.grid1 {
  grid-template-columns: repeat(1, 1fr);
  gap: 3.2rem;
}

.business__item img {
  width: 100%;
  height: auto;
  display: block;
}

.business__text {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	480px以上専用スタイル
==================================== */
@media screen and (width >=480px) {}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {

  /* ページヘッダー */
  .page-header--padding {
    padding-bottom: 3rem;
  }
}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {

  .philosophy-title {
    max-inline-size: 36rem;
    margin-bottom: 3rem;
  }

  .philosophy-img {
    max-inline-size: 62rem;
  }

  .philosophy-img2 {
    max-inline-size: 66rem;
  }

  .line-gray {
    margin-top: 12rem;
    margin-bottom: 1rem;
  }

  /* セクションタイトル */
  .section-title {
    /* flex-wrap: nowrap; */
    /* gap: 2rem; */
    padding-left: 1.2em;
  }

  .section-title-en {
    font-size: 3.2rem;
  }

  .section-title::before {
    /* block-size: 1lh; */
  }

  .section-title-ja {
    /* flex-basis: auto; */
    font-size: 1.6rem;
  }

  /* 事業ドメインのアウトライン */
  .outline {
    flex-direction: row;
    align-items: flex-start;
    gap: 8rem;
    margin-bottom: 2.8rem;
  }

  .outline__img,
  .outline__lead {
    flex: 1;
  }

  .outline__lead {
    padding: 0;
  }

  .outline__title {
    font-size: 2rem;
    margin-bottom: 1.8rem;
  }

  .outline__text {
    font-size: 1.6rem;
  }

  /* 主な事業内容 */
  .business__list {
    gap: 5rem;
  }

  .grid2 {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5rem;
    row-gap: 3rem;
  }

  .grid1 {
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
  }

  .business__title {
    text-align: left;
    font-size: 1.8rem;
    background-color: unset;
    margin-bottom: 2rem;
    padding: 0;
  }

  .business__text {
    font-size: 1.5rem;
  }
}

/* ====================================
	1200px以上専用スタイル
==================================== */
@media screen and (1200px <=width) {}

/* ====================================
	1280px未満専用スタイル
==================================== */
@media screen and (width <1280px) {}