/* Smartphone layout (screen width up to 767px). PC display is not affected. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  BODY {
    margin: 0 !important;
    padding: 0 10px 32px !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: normal;
  
  font-size : 10px;
  font-family : メイリオ;
}

  /* Fixed-width tables and cells shrink to the screen */
  table { width: auto !important; max-width: 100% !important; height: auto !important; }
  TD, TH { height: auto !important; 
  font-size : 10pt;
  font-family : メイリオ;
}
  body * { white-space: normal !important; }
  pre, pre *, textarea { white-space: pre-wrap !important; }
  td[width], th[width], col[width] { width: auto !important; }
  div, p, span, font, center, form, blockquote { max-width: 100% !important; box-sizing: border-box; }
  img { max-width: min(100%, calc(100vw - 20px)) !important; height: auto !important; }
  iframe, video, embed, object, input, textarea, select { max-width: 100% !important; }
  hr { width: 100% !important; }
  marquee { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; }
  p { margin-left: 0 !important; margin-right: 0 !important; }
  [style*="position: absolute"], [style*="position:absolute"],
  [style*="position : absolute"] { position: static !important; }

  /* Layout tables (decided by sp.js) are stacked vertically */
  table.sp-stack,
  table.sp-stack > tbody, table.sp-stack > thead, table.sp-stack > tfoot,
  table.sp-stack > tr, table.sp-stack > * > tr
  table.sp-stack > tr > td table.sp-stack > tr > th,
  table.sp-stack > * > tr > td table.sp-stack > * > tr > th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  table.sp-stack { border-spacing: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  table.sp-stack > * > tr > td, table.sp-stack > tr > td { padding: 2px 0 !important; }

  /* Data tables that are still too wide scroll sideways */
  .sp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 8px 0; }
  .sp-scroll > table { max-width: none !important; }

  /* Header bar with menu button */
  #sp-bar {
    position: sticky; top: 0; z-index: 9998;
    display: flex; align-items: center; gap: 8px;
    margin: 0 -10px 10px; padding: 8px 10px;
    background: #3366cc; color: #fff;
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
  }
  #sp-bar a.sp-home {
    flex: 1; min-width: 0; color: #fff !important; text-decoration: none;
    font-size: 15px !important; font-weight: bold; line-height: 1.3;
  }
  #sp-bar a.sp-tel, #sp-bar button {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px; border-radius: 6px;
    font-size: 16px !important; font-weight: bold; line-height: 1;
    color: #3366cc !important; background: #fff; border: 0; text-decoration: none;
    cursor: pointer; font-family: inherit;
  }
  #sp-drawer {
    position: fixed; inset: 0; z-index: 9999;
    display: none; flex-direction: column; background: #3366cc;
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
  }
  #sp-drawer.open { display: flex; }
  #sp-drawer .sp-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; color: #fff; font-size: 18px; font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,.4);
  }
  #sp-drawer .sp-drawer-head button {
    min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px;
    background: #fff; color: #3366cc; font-size: 16px; font-weight: bold; font-family: inherit;
  }
  #sp-drawer iframe { flex: 1; width: 100% !important; border: 0; background: #3366cc; }
  #sp-drawer .sp-drawer-foot { padding: 10px; text-align: center; border-top: 1px solid rgba(255,255,255,.4); }
  #sp-drawer .sp-drawer-foot a { color: #fff !important; font-size: 14px !important; }
  html.sp-lock, html.sp-lock body { overflow: hidden !important; }
}