/* snsframeのレスポンシブ対応CSS */
.snsframe {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.snsframe iframe {
    width: 100%;
    height: 800px; /* PCなどでの初期表示の高さ（必要に応じて変更してください） */
    max-height: 90vh; /* 画面の高さを超えないように制限 */
    border: none;
    display: block;
}

/* タブレット・スマートフォン端末での表示最適化 */
@media screen and (max-width: 768px) {
    .snsframe iframe {
        height: 75vh; /* スマホ画面の高さに合わせる */
    }
}


/* ==========================================
   スマホ表示（画面幅768px以下）のレイアウト調整
   ========================================== */
@media screen and (max-width: 768px) {

  /* 1. フッターなどのナビゲーションやリスト要素のはみ出し防止 */
  .footer-nav__list,
  nav ul {
    padding-left: 0;
    list-style: none;
    box-sizing: border-box;
  }

  /* 2. 各種カード・フォーム案内エリアのパディング調整と幅制限 */
  div[style*="background:var(--color-primary-l)"],
  .form-card {
    padding: 24px 16px !important; /* スマホ画面に合わせて余白を縮小 */
    margin-left: 12px;
    margin-right: 12px;
    box-sizing: border-box;
    word-break: break-all; /* 長いURLやテキストのはみ出し防止 */
  }

  /* 3. ボタン要素が画面からはみ出さないように幅を調整 */
  .btn,
  a.btn--lg {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    white-space: normal; /* テキストが長い場合に折り返す */
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }

  /* 4. 見出しのフォントサイズ縮小（必要に応じて） */
  .section-title {
    font-size: 1.5rem !important;
    word-break: break-all;
  }
}