/* ================================================
   bcm.css  ―  BCMプロジェクトページ専用スタイル
   対象ページ: /bousai/bcm.html
================================================ */


/* --------------------------------
   1. HERO（メインビジュアル）
-------------------------------- */
.bcm-hero {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.bcm-hero-img {
  width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------
   2. タイトル・イントロ
-------------------------------- */
.bcm-intro {
  padding: 60px 20px 40px;
  background: #fff;
}
.bcm-intro02 {
  padding: 0px 20px 40px;
  background: #fff;
}

.bcm-intro .inner,.bcm-intro02 .inner {
  max-width: 860px;
  margin: 0 auto;
}

/* タイトルブロック（ラベル画像＋タイトル画像 中央配置） */
.bcm-title-block {
  text-align: center;
  margin-bottom: 32px;
}

/* ラベル画像 */
.bcm-label-img {
  display: block;
  height: auto;
  width: auto;
  margin: 0 auto 16px;
}

/* タイトル画像 */
.bcm-title-img {
  display: block;
  height: auto;
  max-width: 560px;
  width: 80%;
  margin: 0 auto;
}

/* 本文テキスト */
.bcm-body {
  font-size: 18px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 0;
}


/* --------------------------------
   3. BCMとは（説明画像エリア）
-------------------------------- */
.bcm-about {
  padding: 40px 20px;
  background: #fafafa;
}

.bcm-about .inner {
  max-width: 860px;
  margin: 0 auto;
}

.bcm-about-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* --------------------------------
   4. 本文②（BCM説明テキスト）
-------------------------------- */
.bcm-description {
  padding: 40px 20px;
  background: #fff;
}

.bcm-description .inner {
  max-width: 860px;
  margin: 0 auto;
}


/* --------------------------------
   5. BCMダイアグラム（円形図解）
-------------------------------- */
.bcm-diagram {
  padding: 48px 20px 64px;
  background: #fff;
}

.bcm-diagram .inner {
  max-width: 860px;
  margin: 0 auto;
}

.bcm-diagram-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* ================================
   レスポンシブ（SP: ≤768px）
================================ */
@media (max-width: 768px) {

  .bcm-intro {
    padding: 40px 16px 32px;
  }
  .bcm-intro02 {
    padding: 0px 16px 32px;
  }

  /* ラベル画像 SP縮小 */
  .bcm-label-img {
    max-width: 160px;
  }

  /* タイトル画像 SP縮小 */
  .bcm-title-img {
    max-width: 100%;
    width: 90%;
  }

  .bcm-body {
    font-size: 18px;
  }

  .bcm-about {
    padding: 28px 16px;
  }

  .bcm-description {
    padding: 28px 16px;
  }

  .bcm-diagram {
    padding: 32px 16px 48px;
  }
}
.bcm-title {
  font-size: 32px;    /* SP: 20px */
  font-weight: 900;
  color: #111;
  line-height: 1.4;
  margin: 16px auto;
}
/* 画像配置後に非表示にするクラス */
.bcm-title--hidden { display: none; }