/* smart.css */

/* まずこれを全体に効かせる（padding等ではみ出さない） */
*, *::before, *::after {
  box-sizing: border-box;
}

/* スマホ用（必要なら 640 は 768 にしてもOK） */
@media screen and (max-width: 640px) {

  div {
    font-size: 20px;
    width: 100%;
  }

  span {
    display: inline-block;
  }

  /* 画像がはみ出さない */
  img {
    max-width: 100%;
    height: auto;
  }
  img#title {
    width: 100%;
  }

  /* 「816px固定」のテーブルをスマホでは100%にする */
  table#resT1 {
    width: 100% !important;
    display: block;
  }

  /* もし表が崩れてもいいなら（横スクロール防止の保険） */
  table {
    max-width: 100%;
  }

  /* 動画・地図はそのまま（あなたの既存のを残すならここに） */
  .video {
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
  }
  .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  .ggmap iframe,
  .ggmap object,
  .ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* ボタン（あなたの既存があるならサイズだけ） */
  .apply-btn {
    font-size: 16px;
    padding: 12px 20px;
  }
}