/* レスポンシブ対応のカスタムCSS */

/* 画像のレスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
}

/* コードブロックの横スクロール対応 */
pre {
  overflow-x: auto;
  max-width: 100%;
}

pre code {
  white-space: pre;
  word-wrap: normal;
}

/* タブレット以下 (768px未満) */
@media (max-width: 767px) {
  /* コンテンツの余白調整 */
  body {
    padding: 1rem;
  }

  main {
    padding: 0;
  }

  /* フォントサイズの微調整 */
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* モバイル (480px未満) */
@media (max-width: 479px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  body {
    padding: 0.5rem;
  }
}

/* テーブルのレスポンシブ対応 */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}