@charset "utf-8";

/* =======================================
  #integrity / .mainTitle
======================================= */
.mainTitle {
  background: url("../img/integrity_mv_img.png") no-repeat center center;
  background-size: cover;
}

.bgGray .h3Tit {
  font-size: var(--font-28);
}

#integrity .h2Tit.bdr::before {
  display: none;
}


/* =======================================
  セクション区切り線（inner幅・上下余白付き）
  - section の padding-top（120px）が線の上の空白
  - inner の padding-top（80px）が線の下の空白
======================================= */
#technology > .inner,
#management > .inner,
#emergency > .inner {
  border-top: 1px solid var(--bgray);
  padding-top: 80px;
}


/* =======================================
  #promise
======================================= */
#promise .sectionHead {
  margin-bottom: 1rem;
}

.promiseLead {
  font-size: var(--font-14);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}


/* -----------------------------------------------
  .promiseList / .promiseItem
  - 画像左・テキスト右の横並びカード ×4
----------------------------------------------- */
.promiseList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.promiseItem {
  display: flex;
  align-items: center;
  background: var(--wh);
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
}

.promiseItem figure {
  width: 50%;
  flex-shrink: 0;
  height: 100%;
}

.promiseItem figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promiseTxt {
  padding: 2rem 2.5rem;
}

.promiseTitle {
  font-size: var(--font-28);
  font-weight: 700;
  margin-bottom: .6em;
}

.promiseTxt p {
  font-size: var(--font-14);
  line-height: 1.8;
}


/* =======================================
  #quality
======================================= */
#quality {
  padding-top: 80px;
}


/* -----------------------------------------------
  .qualityList / .qualityCard
  - テキスト左・画像右のカード ×2
----------------------------------------------- */
.qualityList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.qualityCard {
  background: var(--wh);
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;
}

.qualityTxt {
  flex: 1;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qualityTxt .h3Tit {
  line-height: 1.4;
}

.qualityTxt p {
  font-size: var(--font-14);
  line-height: 1.8;
}

.qualityCard figure {
  width: 55%;
  flex-shrink: 0;
}

.qualityCard figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* -----------------------------------------------
  .certRating
  - 安全性評価 3項目ボタン
----------------------------------------------- */
.certRating {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}

.certRating li {
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 10px;
  text-align: center;
  padding: .5em 1em;
  font-size: var(--font-base);
  font-weight: 500;
}


/* =======================================
  #technology
======================================= */
#technology .sectionHead {
  margin-bottom: 1rem;
}

.techLead {
  font-size: var(--font-14);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}


/* -----------------------------------------------
  .techCards / .techCard
  - 3カラム技術紹介カード
  - 白背景・角丸10px
----------------------------------------------- */
.techCards {
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  align-items: stretch;
}

.techCard {
  background: var(--wh);
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 1.5rem;
}

.techCard figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

/* タイトル全体：24px */
.techCardTitle {
  font-size: var(--font-24);
  font-weight: 700;
  text-align: center;
  margin-bottom: .75em;
  padding: 0 1.25rem;
  line-height: 1.4;
}

/* タイトル内（）部分：18px・折り返しなし */
.techCardSub {
  font-size: var(--font-18);
  font-weight: 700;
  display: inline;
  white-space: nowrap;
}

.techCard p {
  font-size: var(--font-14);
  line-height: 1.8;
  padding: 0 1.25rem;
}


/* -----------------------------------------------
  .techFactory
  - 自社整備工場（画像左・テキスト右）
----------------------------------------------- */
.techFactory {
  background: var(--wh);
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
}

.techFactory figure {
  width: 65%;
  flex-shrink: 0;
}

.techFactory figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.techFactoryTxt {
  padding: 2rem 3rem;
}

.techFactoryTxt p {
  font-size: var(--font-14);
  line-height: 1.8;
}


/* =======================================
  #management
======================================= */
#management .sectionHead {
  margin-bottom: 1rem;
}

.managementLead {
  font-size: var(--font-14);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}


/* -----------------------------------------------
  .managementList / .managementItem
  - 画像左・テキスト右のカード ×3（promiseItemと同構造）
----------------------------------------------- */
.managementList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.managementItem {
  display: flex;
  align-items: center;
  background: var(--wh);
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
}

.managementItem figure {
  width: 50%;
  flex-shrink: 0;
  height: 100%;
}

.managementItem figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.managementTxt {
  padding: 2rem 2.5rem;
}

.managementTitle {
  font-size: var(--font-28);
  font-weight: 700;
  margin-bottom: .6em;
}

.managementTxt p {
  font-size: var(--font-14);
  line-height: 1.8;
}


/* =======================================
  #emergency
======================================= */
#emergency {
  padding-bottom: 0;
}

#emergency .sectionHead {
  margin-bottom: 1.5rem;
}


/* -----------------------------------------------
  .emergencyContent
  - テキスト左・画像右のフレックスレイアウト
----------------------------------------------- */
.emergencyContent {
  gap: 5rem;
  align-items: flex-start;
}

.emergencyTxt {
  flex: 1;
}

.emergencyTxt p {
  font-size: var(--font-14);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.emergencyImg {
  width: 40%;
  flex-shrink: 0;
  margin: 0;
}

.emergencyImg img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}


/* -----------------------------------------------
  .emergencyFlow
  - 対応フロー ボックス
----------------------------------------------- */
.emergencyFlow {
  background: var(--wh);
  border-radius: 10px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
}

.emergencyFlowTitle {
  font-size: var(--font-24);
  font-weight: 700;
  margin-bottom: 1em;
}

.emergencyFlowList {
  list-style: none;
}

.emergencyFlowList li {
  display: flex;
  align-items: baseline;
  gap: .75em;
  margin-bottom: 1em;
  font-size: var(--font-18);
  line-height: 1.6;
}

.emergencyFlowList li:last-child {
  margin-bottom: 0;
}

.emergencyFlowNum {
  font-size: var(--font-18);
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}


/* =======================================
  SP対応
======================================= */
@media screen and (min-width: 769px) {
  .techCard {
    width: calc((100% - 3rem) / 3);
  }
}

@media screen and (max-width: 768px) {

  /* 区切り線下の余白をSPに合わせて縮小 */
  #technology > .inner,
  #management > .inner,
  #emergency > .inner {
    padding-top: 40px;
  }

  /* promise */
  .promiseItem {
    flex-direction: column;
    height: auto;
  }

  .promiseItem figure {
    width: 100%;
    height: auto;
  }

  .promiseItem figure img {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .promiseTxt {
    padding: 1.5rem;
  }

  .promiseTitle {
    font-size: var(--font-20);
  }

  /* quality
   - pcFlex はSPで display:flex を付与しないため
     ここで display:flex + column-reverse で画像を上に
  ------------------------------------------------ */
  #quality {
    padding-top: 2rem;
  }

  .qualityCard {
    display: flex;
    flex-direction: column-reverse;
  }

  .qualityCard figure {
    width: 100%;
  }

  .qualityTxt {
    padding: 1.5rem;
  }
.qualityTxt .h3Tit {
    line-height: 1.4;
    font-size: var(--font-20);
}
  .certRating li {
    font-size: var(--font-14);
  }

  /* technology */
  .techLead {
    margin-bottom: 1.5rem;
  }

  .techCards {
margin-bottom: 2rem;
  }

  .techCard {
    width: 100%;
   margin-bottom: 2rem;
  }

  .techFactory {
    flex-direction: column;
  }

  .techFactory figure {
    width: 100%;
  }

  .techFactoryTxt {
    padding: 1.5rem;
  }
.techFactoryTxt .h3Tit {
    font-size: var(--font-20);
}
  /* management */
  .managementItem {
    flex-direction: column;
    height: auto;
  }

  .managementItem figure {
    width: 100%;
    height: auto;
  }

  .managementItem figure img {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .managementTxt {
    padding: 1.5rem;
  }
.managementTxt .h3Tit {
    font-size: var(--font-20);
}
  .managementTitle {
    font-size: var(--font-20);
  }
  .emergencyFlowTitle {
    font-size: var(--font-20);
}
.emergencyFlowList li {
    font-size: var(--font-14);
}
  /* emergency */

  .emergencyContent {
    flex-direction: column;
    gap: 2rem;
  }

  .emergencyImg {
    width: 100%;
  }

  .emergencyFlow {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
}