/* ==========================================
   レスポンシブデザイン最適化CSS
   ========================================== */

/* スマホ版画像の表示制御 (768px未満) */
@media (max-width: 767px) {
  .block.md\:hidden {
    display: block !important;
  }
  
  .hidden.md\:block {
    display: none !important;
  }
  
  /* スマホ版画像を画面幅いっぱいに表示 */
  .block.md\:hidden img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
  }
}

/* PC版画像の表示制御 (768px以上) */
@media (min-width: 768px) {
  .block.md\:hidden {
    display: none !important;
  }
  
  .hidden.md\:block {
    display: block !important;
  }
  
  /* PC版画像を中央寄せで最適化 */
  .hidden.md\:block img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
  }
  
  /* PC版コンテナの最大幅設定 */
  .md\:max-w-\[970px\] {
    max-width: 970px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 画像の基本スタイル - すべてのデバイス */
section img {
  object-fit: contain;
  display: block;
}

/* ヒーローセクションの最適化 */
.hero-mobile {
  width: 100%;
  overflow-x: hidden;
}

/* 中央寄せの確実な適用 */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 画像コンテナの幅制御 */
.w-full {
  width: 100% !important;
}

/* デバッグ用 - 必要に応じてコメントアウト解除 */
/*
@media (max-width: 767px) {
  .block.md\:hidden::before {
    content: "SP版表示中";
    display: block;
    background: red;
    color: white;
    padding: 5px;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .hidden.md\:block::before {
    content: "PC版表示中";
    display: block;
    background: blue;
    color: white;
    padding: 5px;
    text-align: center;
  }
}
*/