/* =========================================
   responsive.css — 全ページ共通レスポンシブ基盤
   typography.css の後に読み込むこと
   ========================================= */

/* ── グローバル安全策 ── */
html { overflow-x: hidden; }
img, picture, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
/* iframe の height:auto は object-fit 系で上書き可 */
iframe { height: auto; }

/* ── タブレット（≤1024px） ── */
@media (max-width: 1024px) {
  .site-nav { padding: 0 24px; }
}

/* ── スマホ主調整（≤768px） ── */
@media (max-width: 768px) {
  .nav-links { display: none; }

  /* セクション余白の縮小 */
  .section, .si, .lp-section {
    padding-top:  clamp(48px, 10vh, 80px);
    padding-bottom: clamp(48px, 10vh, 80px);
    padding-left:  24px;
    padding-right: 24px;
  }
}

/* ── 小型スマホ微調整（≤480px） ── */
@media (max-width: 480px) {
  .site-nav { padding: 0 16px; }
}