/* mobile overlay — desktop layout (min-width:760px) unchanged; only screens < 760px adjust */
@media (max-width: 759px) {
  body {
    padding-top: 0;
    margin-bottom: 0;
    background: #fff;
    min-width: 0;
    line-height: 1.7;
    font-size: 16px;
    box-sizing: border-box;
  }
  /* Theme defaults to content-box; on mobile, width:100% + padding causes
   * horizontal overflow on #menu / #column / #blog. Force border-box on the
   * mobile sidebar widgets so width includes their padding. */
  #menu, #column, #blog,
  #menu *, #column *, #blog *,
  main, main * {
    box-sizing: border-box;
  }

  /* hide decorative absolute-positioned bands */
  #test, #test a, #testtesttest {
    display: none !important;
  }

  /* header: bg.jpg as a banner instead of body background */
  h1 {
    position: static;
    width: 100%;
    min-width: 0;
    height: 180px;
    padding: 0;
    background: url(image/bg.jpg) center / cover no-repeat;
    display: flex;
    align-items: flex-end;
    border-bottom: 4px solid #304153;
  }

  h1 a {
    display: block;
    margin: 0;
    padding: 12px 16px;
    width: 100%;
    height: auto;
    background: rgba(255,255,255,0.85);
    text-indent: 0;
    font-size: 18px;
    font-weight: bold;
    color: #304153;
    text-decoration: none;
  }

  /* show sidebar inline (sidebar uses position:absolute on desktop) */
  #menu, #column, #blog {
    position: static;
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    background: #f6f6f6;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
  }

  /* sidebar: replace image-based menu buttons with text */
  #menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: #304153;
    border-bottom: none;
  }
  #menu li, #menu li.profile, #menu li.facebook, #menu li.twitter, #menu li.contact, #menu li.rss {
    position: static;
    top: auto; left: auto;
  }
  #menu li a {
    display: inline-block;
    overflow: visible;
    width: auto !important;
    height: auto !important;
    background: none !important;
    text-indent: 0 !important;
    color: #fff;
    font-size: 13px;
    text-decoration: underline;
  }
  /* Desktop hides anchor text via text-indent and shows an image background;
     mobile resets text-indent so the real anchor text becomes visible — no
     ::before injection needed. */

  /* sidebar #column (pages list) */
  #column {
    padding-top: 12px;
    background: #f6f6f6;
    font-size: 13px;
    font-weight: normal;
  }
  #column dt {
    position: static;
    width: auto; height: auto;
    background: none;
    text-indent: 0;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
  }
  /* "コラム" text lives in markup; desktop hides it via background image. */
  #column dd { margin: 0; padding: 0; width: auto; min-height: 0; }
  #column li { padding: 4px 0; }
  #column p { position: static; height: auto; }
  #column p a {
    display: inline-block;
    width: auto; height: auto;
    background: none;
    text-indent: 0;
    color: #304153;
    text-decoration: underline;
  }
  /* COPYRIGHT text lives in markup; desktop hides it via gate.gif background. */

  /* #blog sidebar (categories / archives / search) */
  #blog {
    position: static;
    width: auto;
    padding: 12px 16px;
  }
  #blog #caption {
    position: static;
    width: auto; height: auto;
    background: none;
    text-indent: 0;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
  }
  /* "ブログ" text lives in markup; desktop hides it via blog.gif background. */
  #blog #wrap { padding: 0; }
  #blog #wrap dt { font-size: 14px; padding-bottom: 4px; }
  #blog #wrap ul { font-size: 14px; padding-bottom: 12px; }
  #blog #wrap input.text { width: 100%; padding: 4px 6px; }

  /* main content reflow: drop left margins everywhere */
  h2 {
    margin: 0;
    padding: 8px 16px;
    line-height: 1.4em;
    font-size: 16px;
    text-indent: 0;
    white-space: normal;
  }
  a.rss { margin: 8px 16px; }
  h3 { margin: 12px 16px 0; font-size: 15px; line-height: 1.4; white-space: normal; }
  p.comment { margin: 4px 16px; text-align: right; }
  p.category { margin: 8px 16px; line-height: 1.4em; }
  div.text, div.comment { margin: 12px 16px; font-size: 15px; }
  div.text img, div.text iframe { max-width: 100%; height: auto; }
  p.btn { margin: 8px 16px; }
  ul#page { margin: 16px 16px -4px; }
  form#commentform { margin: 0 16px; top: 0; }
  form#commentform textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  #facebook, #share-button { display: none; }
  #privacy { margin: 8px 16px; text-align: left; }
}