@charset "utf-8";
/* ============================================================
   viewgrant.net スマホ対応用 上書きCSS（/css/sp.css）
   ・画面幅768px以下のときだけ効きます。PC表示は変わりません。
   ・default.css / index.css は触らず、ここで上書きします。
   ・全ページ共通。各ページの <head> で default.css の後に読み込みます。
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ---------- 全体 ---------- */
  html, body {
    min-width: 0 !important;
    width: auto !important;
    -webkit-text-size-adjust: 100%;
  }
  body {
    overflow-x: hidden;
    background: #ffffff !important;   /* PC用のヘッダー帯画像を外す */
  }
  img, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* fadeover.js がマウスオーバー用に重ねる画像（_over）はスマホでは不要なので非表示
     （これが拡大されて巨大なボタンに見えていた） */
  img[style*="absolute"],
  img[src*="_over."] { display: none !important; }

  /* 固定幅の枠を画面幅に合わせる */
  #container, #header, #contents, #main, #sidenavi,
  #main_image, .footInner, .pageTop {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  #contents { padding: 0 12px; }

  /* ---------- ヘッダー ---------- */
  h1 {
    padding: 6px 12px 0 !important;
    color: #888888 !important;        /* 白文字→灰色（背景帯がないため） */
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #header dl { margin: 0 0 10px !important; }
  #header dt {
    float: none !important;
    display: block !important;
    margin: 8px 12px 10px !important;
  }
  #header dt img { width: 220px !important; }

  /* 4つの画像メニューを横4列に並べる */
  #header dd {
    float: left !important;
    width: 25% !important;
    margin: 0 !important;
    text-align: center;
    box-sizing: border-box;
    padding: 0 2px;
  }
  #header dd img { width: 100% !important; }

  /* トップの大きい画像 */
  #main_image { margin-bottom: 16px !important; }
  #main_image img { width: 100% !important; }

  /* パンくず */
  #topicpath { margin: 0 12px 16px !important; font-size: 12px; }

  /* ---------- 本文 ---------- */
  #main {
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;          /* 長いURLを折り返す */
  }
  #main p { margin-left: 0 !important; }
  h2, h3 { margin-bottom: 14px !important; }

  .withimg p, .withimg div {
    float: none !important;
    width: auto !important;
  }

  /* 申込み・問合せの画像ボタンは縦に並べる */
  .btns { padding: 10px !important; }
  .btns li {
    float: none !important;
    padding: 0 0 10px 0 !important;
    text-align: center;
  }
  .btns li:last-child { padding-bottom: 0 !important; }

  /* 表：画面幅を超える場合は表だけ横スクロール */
  #main table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #main td, #main th { word-break: break-word; }

  /* フォーム入力欄 */
  #main input[type="text"],
  #main input[type="email"],
  #main input[type="tel"],
  #main select,
  #main textarea {
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;       /* iPhoneで入力時に拡大されるのを防ぐ */
  }

  /* ---------- サイドメニュー（本文の下に表示） ---------- */
  #sidenavi { margin-top: 24px !important; }
  #sidenavi ul li { text-align: center; }
  #sidenavi dd a { margin: 0 !important; padding: 12px 0 12px 24px !important; font-size: 15px; border-bottom: 1px solid #eeeeee; }
  #sidenavi dd { background-position: 10px 16px !important; }
  #sidenavi > div { text-align: center; }

  /* 提供終了したTwitterウィジェット・サイトシールは非表示 */
  #sidenavi table { display: none !important; }

  .pageTop { margin: 30px 12px 0 !important; }

  /* ---------- フッター ---------- */
  .footInner { padding: 0 12px; }
  .heightLineParent > * { height: auto !important; }
  dl.ftSiteInfo, dl.ftMnuBox, dl.ftLastMnuBox {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
  }
  dl.ftMnuBox { background: none !important; border-top: 1px dotted #666666; }
  dl.ftMnuBox dt { padding: 12px 0 10px !important; }
  dl.ftMnuBox dd { padding-left: 0 !important; }
  dl.ftMnuBox li { padding: 6px 0 6px 15px !important; font-size: 14px; }
  .footArea .copyright { text-align: center; margin-top: 10px !important; }
  .footArea .copyright a {
    float: none !important;
    display: block;
    margin-top: 6px;
  }
}