/* =========================================
   ペライチ安全版：レイアウト崩れ・色崩れ修正CSS
========================================= */

/* --- トップ見出し（元section-3） --- */
[data-structure="b-heading-heading"] h2,
[data-structure="b-heading-heading"] h2 * {
  font-size: 36px !important; 
  line-height: 1.6 !important;
  color: #1b55a8 !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* --- 画像＋ボタンブロック（元section-6） --- */
[data-structure="b-article"] h2,
[data-structure="b-article"] h2 * {
  color: #475a78 !important;   
  font-weight: bold !important; 
  font-size: 28px !important; 
  line-height: 1.6 !important;
  text-align: center !important;
}
[data-structure="b-article"] .btn-custom,
[data-structure="b-article"] a.pera1-editable {
  background-color: #4258d8 !important; 
  color: #ffffff !important;            
  font-size: 18px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 16px 40px !important;        
  border-radius: 6px !important;        
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
}

/* =========================================
   section-4 & 7 共通：見出しの崩れ修正とカード統一
========================================= */

/* 1. 見出しが3行に潰れるのを防ぐ（横幅100%・中央揃え） */
#section-4 .c-heading,
#section-7 .c-heading {
  width: 100% !important;
  margin: 0 auto 32px auto !important;
  text-align: center !important;
}
#section-4 .c-heading h2, #section-4 .c-heading h2 *,
#section-7 .c-heading h2, #section-7 .c-heading h2 * {
  color: #1b55a8 !important;   
  font-weight: bold !important; 
  font-size: 32px !important; 
  line-height: 1.5 !important;
  text-align: center !important;
}
/* section-4の見出し色は専用カラーに上書き */
#section-4 .c-heading h2, #section-4 .c-heading h2 * {
  color: #475a78 !important;
}

/* 2. カードを並べる親要素（Gridによる見出し圧縮を回避し、Flexboxで安全に3等分） */
#section-4 .row,
#section-7 .c-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
/* section-7の左右の余白確保 */
#section-7 .c-wrapper {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* 3. 各カードの外枠（PCで33.3%） */
#section-4 .p-cards-numbers--big__item,
#section-7 .p-cards-numbers--big__item {
  width: 33.333% !important;
  display: flex !important;
  padding: 0 12px !important; /* カード同士の隙間 */
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* 4. カードの実体（枠線の太さ・色・高さを完全に統一） */
#section-4 .p-cards-numbers--big__item--box,
#section-7 .p-cards-numbers--big__item--box {
  width: 100% !important;
  flex: 1 1 auto !important; /* これで隣のカードと自動的に高さが揃います */
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 2px solid #1b55a8 !important; /* 2pxの青枠で統一 */
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* =========================================
   画像とテキストの調整
========================================= */

/* --- section-4：画像と説明文（グレー化＆下揃え） --- */
#section-4 .p-cards-numbers--big__inner--img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 16px !important;
}
#section-4 .p-cards-numbers--big__inner--text {
  margin-top: auto !important; /* テキストを一番下に押し下げる */
  width: 100% !important;
}
#section-4 .p-cards-numbers--big__inner--text,
#section-4 .p-cards-numbers--big__inner--text * {
  color: #666666 !important; /* グレーに変更 */
  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: normal !important; 
  text-align: center !important;
  margin: 0 !important;
}

/* --- section-7：青い見出しと本文 --- */
/* まず本文（説明文）をネイビー・標準の太さに設定 */
#section-7 .p-cards-numbers--big__item--box,
#section-7 .p-cards-numbers--big__item--box > div,
#section-7 .p-cards-numbers--big__item--box > div * {
  color: #475a71 !important;   
  font-size: 15px !important; 
  line-height: 1.8 !important;
  font-weight: normal !important; 
  text-align: center !important;
}
/* その後、カード内の見出し（h2, h3）だけを青く太字に強制上書き */
#section-7 .p-cards-numbers--big__item--box h2,
#section-7 .p-cards-numbers--big__item--box h2 *,
#section-7 .p-cards-numbers--big__item--box h3,
#section-7 .p-cards-numbers--big__item--box h3 * {
  color: #1b55a8 !important; /* 青色に戻す */
  font-weight: bold !important; 
  font-size: 22px !important; 
  line-height: 1.5 !important;
  text-align: center !important;
  margin-bottom: 16px !important; 
}

/* =========================================
   スマホ対応（1列縦並び）
========================================= */
@media screen and (max-width: 768px) {
  /* スマホ見出しサイズ縮小 */
  [data-structure="b-heading-heading"] h2, [data-structure="b-heading-heading"] h2 * { font-size: 24px !important; }
  #section-4 .c-heading h2, #section-4 .c-heading h2 * { font-size: 24px !important; }
  #section-7 .c-heading h2, #section-7 .c-heading h2 * { font-size: 24px !important; }
  [data-structure="b-article"] h2, [data-structure="b-article"] h2 * { font-size: 20px !important; }

  /* カードをスマホでは1列（縦並び横幅100%）に変更 */
  #section-4 .p-cards-numbers--big__item,
  #section-7 .p-cards-numbers--big__item {
    width: 100% !important;
    padding: 0 !important;
  }
}