@charset "UTF-8";
/* 2026-09-12 今どき対応（asura / Claude）
   1) フッターの著作権表記：画像に描かれていた「2008」を文字にして「2008-2026」へ
   2) スマホ幅（720px以下）のときだけ読みやすく並べ替える。パソコンの見た目は変えない */
.footer { background-image: none !important; background-color: #FF91AB; position: relative; }
.footer::after {
  content: "Copyright (C) 2008-2026 MediaPiggy";
  position: absolute; right: 24px; bottom: 7px;
  color: #E74C50; font-size: 10px; line-height: 1; letter-spacing: .02em;
  font-family: Osaka, "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
/* 本文中の「文字だけのリンク」が白（元CSSの a:link が #FFFFFF）で見えなくなるのを防ぐ。
   問い合わせ完了ページ（thank.html）の「戻る」が消えていた。
   #menu / #header / #footer / #company / #map のリンクは元の色指定が優先されるので変化しない */
.main_body a:link, .main_body a:visited { color: #E74C50; }
.main_body a:hover { color: #FF6B70; }

/* パソコンでも横に5%はみ出していた（元のCSSの .bg が 幅100%＋左5%）のを解消。見た目は変わらない */
.bg { width: auto; }
@media screen and (max-width: 720px) {
  body { -webkit-text-size-adjust: 100%; }
  /* 元のCSSの「左に5%ずらす」を解除（スマホで横にはみ出す原因） */
  .bg { margin-left: 0 !important; width: auto !important; }
  .main_body { margin-right: 0 !important; }
  .titile, .menuber, .main, .footer { width: auto !important; }
  .titile { background-size: cover; background-position: center; height: 64px; }
  .menuber { height: auto !important; line-height: 2; padding: 4px 8px; font-size: 13px; }
  #header a:link, #header a:visited { font-size: 13px; }
  .main { display: flex; flex-direction: column; padding: 0 12px; box-sizing: border-box; }
  .main_body { order: 1; float: none; width: auto; font-size: 15px; line-height: 1.7; }
  .main_menu { order: 2; float: none; width: auto; height: auto !important; margin: 20px 0 8px; }
  .main_body img, .main_menu img { max-width: 100%; height: auto; }
  /* 左右 20px の余白付き画像（hspace）も画面に収める */
  .main_body img[hspace] { max-width: calc(100% - 40px); }
  .main_body table { width: 100% !important; }
  table.company, table.news2, .news, .news2_brown, .map, table.servise { font-size: 14px; height: auto; }
  #menu a:link, #menu a:visited { font-size: 15px; line-height: 2.2; }
  .footer { float: none; height: auto !important; padding: 10px 8px 12px; font-size: 12px; line-height: 2.2; box-sizing: border-box; }
  #footer a:link, #footer a:visited { font-size: 12px; }
  .footer::after { position: static; display: block; text-align: center; margin-top: 6px; font-size: 11px; }
  /* 余白用の透明画像（specer.gif）は縦に伸ばさない */
  .main_body img[src*="specer"], .main_menu img[src*="specer"] { height: 8px !important; }
  /* お問い合わせフォーム：項目名と入力欄を縦に並べる */
  .main_body form table, .main_body form tbody, .main_body form tr, .main_body form th, .main_body form td { display: block; width: auto !important; }
  .main_body form th, .main_body form td { padding: 4px 0; text-align: left !important; }
  .main_body form td[style*="background-color"] { display: none; }
  .main_body form tr { margin-bottom: 10px; }
  .main_body form input[type="text"], .main_body form input[type="email"], .main_body form input[type="tel"] { width: 100% !important; box-sizing: border-box; font-size: 16px; }
  .main_body form select { max-width: 100%; box-sizing: border-box; font-size: 16px; }
  .main_body form textarea { width: 100% !important; box-sizing: border-box; font-size: 16px; }
}

/* 2026-09-14 電話番号をタップで発信できるリンクにした。見た目は元の文字のまま（色・文字サイズ・行の高さを変えない・下線なし） */
a[href^="tel:"], a[href^="tel:"]:link, a[href^="tel:"]:visited, a[href^="tel:"]:hover, a[href^="tel:"]:active { color: inherit !important; font-size: inherit !important; line-height: inherit !important; text-decoration: none !important; }