/**
 * subpage.css（①で使用している範囲のみ抽出）
 */

/* --- スクロール位置の調整（アンカーリンク用） --- */
.subpage-content section[id] {
  scroll-margin-top: 100px;
}

/* ==========================================
 * 1. 共通基本スタイル (PC/共通)
 * ========================================== */
.subpage-content h1 {
  font-size: 53px !important;
  line-height: 1.2 !important;
  margin-bottom: 48px !important;
}

/* 中見出し：左にブランドカラーの太線 */
.subpage-content h2 {
  font-size: 42px !important;
  line-height: 1.2 !important;
  margin-bottom: 40px !important;
  border-left: 8px solid #ec4899 !important;
  padding-left: 20px !important;
  border-bottom: none !important;
}

/* 小見出し：グレーのサイドライン */
.subpage-content h3 {
  font-size: 22px !important;
  line-height: 1.6 !important;
  color: #1a1a1a !important;
  margin-bottom: 30px !important;
  font-weight: 700 !important;
  border-left: 3px solid #d1d5db !important;
  padding-left: 15px !important;
}

/* リストスタイル（下線区切り・事業の柱） */
.subpage-content .pillar-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  border-top: 1px solid #eeeeee !important;
}

.subpage-content .pillar-list li {
  position: relative !important;
  padding: 15px 10px !important;
  border-bottom: 1px solid #eeeeee !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #111827 !important;
}

/* 本文テキスト */
.subpage-content p {
  font-size: 16px !important;
  line-height: 2.0 !important;
  color: #4b5563 !important;
}

/* 標準リンク */
.subpage-content a {
  color: #ec4899 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: opacity 0.2s !important;
}

.subpage-content a:hover {
  opacity: 0.7 !important;
}

/* ==========================================
 * 4. PCレイアウト調整 (769px以上)
 * ========================================== */
@media (min-width: 769px) {
  /* コンテンツ幅とカラム間の余白設定 */
  .subpage-content .container > div {
    gap: 80px !important;
  }

  /* 2カラムの標準幅設定 */
  .subpage-content .tw\:w-1\/2 {
    width: calc(50% - 40px) !important;
    flex-shrink: 0 !important;
  }

  /* 文章を左、画像を右に配置するセクション設定 */
  #about-business .tw\:max-w-\[1100px\] {
    flex-direction: row-reverse !important;
  }

  /* 画像を左、文章を右に配置するセクション設定 */
  #about-philosophy .tw\:max-w-\[1100px\] {
    flex-direction: row !important;
  }

  /* 安全衛生方針（画像なし）の調整 */
  #about-safety {
    margin-top: 60px !important;
  }
  #about-safety .tw\:max-w-\[1100px\],
  #about-safety .tw\:w-1\/2 {
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 800px !important;
  }
}

/* ==========================================
 * 5. スマホサイズ (768px以下)
 * ========================================== */
@media (max-width: 768px) {
  .subpage-content h1 {
    font-size: 32px !important;
    text-align: center !important;
  }

  /* 見出しを中央揃え、左線を解除 */
  .subpage-content h2 {
    font-size: 28px !important;
    text-align: center !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 30px !important;
  }

  .subpage-content h3 {
    font-size: 18px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
  }

  /* 表示順序の制御 (Flexbox order) */
  .subpage-content .container > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* contentsプロパティでラッパーを無視し、直接 order 制御 */
  .subpage-content .container > div > .tw\:w-1\/2 {
    display: contents !important;
  }

  .subpage-content .tw\:mb-\[40px\] { order: 1 !important; } /* H2 */
  .subpage-content .tw\:pillar-wrapper { order: 2 !important; width: 100% !important; } /* リスト */
  .subpage-content .tw\:relative { order: 3 !important; margin: 20px 0 30px !important; } /* 画像 */
  .subpage-content .tw\:text-wrapper { order: 4 !important; } /* 本文 */

  /* 特定セクションのリスト順序一括指定 */
  #about-business .tw\:pillar-wrapper {
    order: 2 !important;
  }

  #about-safety {
    margin-top: 40px !important;
  }



  @media (max-width: 768px) {
  /* 企業理念だけ：H2 -> 画像 -> 本文 の順にする */
  #about-philosophy .about-philosophy__image {
    order: 2 !important;
  }
  #about-philosophy .about-philosophy__body {
    order: 3 !important;
  }
}

}