/* 株式会社BOND — スマートフォン表示調整
   注意：Reactはインラインスタイルを「prop: value」形式（コロン後に半角スペース）で
   出力するため、属性セレクタはスペースありの形で書くこと。 */
@media (max-width: 1279px) {
  html, body { min-width: 0 !important; }

  /* PC固定幅の解除 */
  [style*="min-width: 1280px"],
  [style*="min-width:1280px"],
  [data-sp-root],
  [data-sp~="root"] { min-width: 0 !important; }

  /* 内側の余白と最大幅 */
  [data-sp~="pad"] {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-sp~="padbox"] { padding: 24px 20px !important; }

  /* グリッドは原則1カラム */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-sp~="grid2"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* 下層ページのヘッダー帯 */
  [data-sp~="hero"] {
    height: 200px !important;
    min-height: 0 !important;
    max-height: 200px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  [data-sp~="hero"] [data-sp~="pad"] { height: 100% !important; }
  [data-sp~="h1"] { font-size: 26px !important; line-height: 1.6 !important; }

  /* 見出し・本文 */
  h1 { font-size: 30px !important; line-height: 1.5 !important; }
  h2 { font-size: 24px !important; line-height: 1.6 !important; }

  /* セクション余白の圧縮 */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* 巨大英字 */
  [data-sp~="bigtext"] { padding: 28px 20px 4px !important; }
  [data-sp~="bigtext"] > div { font-size: 20px !important; letter-spacing: 0.3em !important; }

  /* 画像は枠の高さを尊重する */
  image-slot, [data-sp~="cardimg"] img, [data-sp~="aboutcell"] img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  iframe { min-height: 280px !important; }

  /* カード内の画像枠を少し高く */
  [data-sp~="cardimg"],
  [style*="height: 118px"], [style*="height: 130px"], [style*="height: 150px"],
  [style*="height: 180px"] { height: 200px !important; }

  /* トップのメインビジュアル（下層ページのヘッダー帯とは別扱い） */
  [data-sp~="homehero"] {
    height: auto !important;
    min-height: 460px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  [data-sp~="homehero"] > [data-sp~="pad"] {
    width: 100% !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    justify-content: center !important;
  }
  [data-sp~="homehero"] h1 { font-size: 30px !important; line-height: 1.45 !important; }
  [data-sp~="homehero"] h1 br { display: none; }
  [data-sp~="homehero"] p { font-size: 14px !important; line-height: 1.95 !important; }
  [data-sp~="herocta"] { flex-direction: column !important; gap: 12px !important; margin-top: 28px !important; }
  [data-sp~="herocta"] a { width: 100% !important; box-sizing: border-box !important; min-height: 54px !important; }

  /* ABOUT の画像帯 */
  [data-sp~="aboutstrip"] { height: auto !important; gap: 8px !important; }
  [data-sp~="aboutcell"] { height: 180px !important; }

  /* 全幅バナー */
  [data-sp~="band"] { height: auto !important; min-height: 360px !important; }
  [data-sp~="bandtext"] { font-size: 22px !important; line-height: 1.85 !important; }

  /* スタッフ紹介カードは2カラムを維持 */
  [data-sp~="staffcard"] {
    grid-template-columns: 104px 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  [data-sp~="staffcard"] > div:last-child { padding: 18px !important; }

  /* ボタンはタップしやすく全幅に */
  section a[style*="padding: 16px"], section a[style*="padding: 17px"],
  section a[style*="padding: 15px"], section a[style*="padding: 14px"],
  section a[style*="padding: 13px"], section button[style*="padding: 17px"],
  [data-sp~="cta"] {
    justify-content: space-between !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 54px !important;
  }
  header a, header button { width: auto !important; }

  /* フッターをSPでは簡潔に */
  [data-sp~="fcol"] { display: none !important; }
  [data-sp~="fsp"] { display: flex !important; }
  [data-sp~="fbottom"] { margin-top: 28px !important; }

  /* フォーム */
  input, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
}

@media (max-width: 520px) {
  [data-sp~="grid2"] { grid-template-columns: 1fr !important; }
  h1 { font-size: 26px !important; }
  [data-sp~="h1"] { font-size: 22px !important; }
  [data-sp~="bandtext"] { font-size: 20px !important; }
  [data-sp~="staffcard"] { grid-template-columns: 92px 1fr !important; }
}