@charset "utf-8";
/* スマホ・タブレット(幅860px以下)向けの表示。PC表示には一切影響しない。
   旧サイトの固定幅(840px)レイアウトを、縦一列に並べ替える。
   ページ内の <style> が !important を多用しているため、"html body" を付けて優先度を上げている。 */
@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html body { min-width: 0 !important; }
  html body #container { width: auto !important; max-width: 100% !important; overflow-x: clip; }
  html body #container *, html body #container *:before, html body #container *:after { box-sizing: border-box; }

  /* ヘッダー:ロゴ → 電話番号 → リンクの順に中央そろえ */
  html body #header {
    height: auto !important; padding: 14px 12px 10px !important;
    background: #4a2f1d; background: linear-gradient(180deg, #5e3d26, #4a2f1d);
  }
  html body #header #logo { float: none !important; width: auto !important; height: auto !important; text-align: center; }
  html body #header #logo img { max-width: 100% !important; height: auto !important; }
  html body #header .sub { float: none !important; width: auto !important; margin: 8px 0 0 !important; text-align: center !important; }
  html body #header #top_text, html body #header #top_text * { font-size: 13px !important; text-align: center !important; }
  html body #header #link { margin-top: 6px !important; }
  html body #header #link ul { text-align: center !important; }
  html body #header #link ul li { display: inline-block !important; margin: 4px 0 0 10px !important; padding-left: 10px !important; }
  html body #header #link ul li:first-child { margin-left: 0 !important; padding-left: 0 !important; }
  html body #header > br { display: none; }

  /* メニュー:2行の格子状に */
  html body #navigation { height: auto !important; margin-bottom: 0 !important; }
  html body #navigation ul { display: grid !important; grid-template-columns: repeat(4, 1fr); }
  html body #navigation li { float: none !important; display: block; border-top: 1px solid rgba(255,255,255,.18); }
  html body #navigation li a:link, html body #navigation li a:visited {
    display: flex !important; align-items: center; justify-content: center; height: 100%;
    padding: 11px 2px !important; text-align: center; line-height: 1.35; font-size: 12px !important;
  }
  html body #navigation li:nth-child(4n+1) a { border-left: 0 !important; }
  html body #navigation li a:after { left: 10px !important; right: 10px !important; bottom: 5px !important; }
  html body #navigation .sub_menu_list { display: none !important; }

  /* トップの画像:画面幅に合わせて縮小 */
  html body #container #visual {
    width: 100% !important; height: auto !important; aspect-ratio: 4 / 1; margin-top: 0;
    background-size: 100% 100% !important;
  }
  html body #container #visual > div { display: none !important; }

  /* 本文 → サイドメニューの順に縦一列 */
  html body #main { padding: 18px 12px 0 !important; }
  html body #w_right, html body #w_left { float: none !important; width: auto !important; }
  html body #w_left { margin-top: 24px; }
  html body #container .text, html body #container .article { margin-left: 0 !important; }
  html body #page_title { margin-bottom: 16px !important; }
  html body #page_title, html body #page_title * { font-size: 17px !important; }

  /* はみ出しやすい要素 */
  html body #container img { max-width: 100% !important; height: auto !important; }
  html body #container img.article[src*='greeting_portrait'] { width: 38% !important; margin: 4px 0 10px 14px !important; }
  html body #container iframe { max-width: 100% !important; }
  html body #container table { width: 100% !important; max-width: 100% !important; }
  html body #container th, html body #container td { overflow-wrap: anywhere; }
  html body #container pre { white-space: pre-wrap; }
  html body #container [style*="width"] { max-width: 100%; }

  /* お問い合わせフォーム */
  html body #contents form.inquiry dt { margin-left: 0 !important; }
  html body #contents form.inquiry dd { padding-left: 0 !important; }
  html body #contents form.inquiry dd input:not([type=checkbox]):not([type=radio]),
  html body #contents form.inquiry dd textarea, html body #contents form.inquiry dd select { width: 100% !important; font-size: 16px !important; padding: 8px !important; }
  html body #contents form.inquiry input[type=submit], html body #contents form.inquiry button {
    padding: 10px 36px !important; font-size: 16px !important; }

  /* フッター */
  html body #footer ul { padding: 12px 8px !important; line-height: 2; }
  html body #footer li { display: inline-block !important; margin: 0 6px !important; }
}