/* 新磯公民館トップページ（index.htm）専用 */
@media screen and (max-width: 768px) {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    min-width: 0 !important;
    margin: 0;
    overflow-x: hidden;
  }

  body>center,
  body>.wrap {
    display: block;
    width: 100% !important;
  }

  /* ヘッダー：固定1230pxの表構造をスマホでは解除 */
  body>center>table.site-header,
  body>.wrap>table.site-header,
  body>center>table.site-header>tbody,
  body>.wrap>table.site-header>tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  body>center>table.site-header tr,
  body>.wrap>table.site-header tr,
  body>center>table.site-header td,
  body>.wrap>table.site-header td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 3px 8px;
    text-align: center !important;
  }

  body>center>table.site-header td#top,
  body>.wrap>table.site-header td#top {
    padding: 0 !important;
  }

  body>center>table.site-header picture,
  body>.wrap>table.site-header picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body>center>table.site-header img,
  body>.wrap>table.site-header img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  body>center>table.site-header td.header strong,
  body>.wrap>table.site-header td.header strong {
    display: block;
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    line-height: 1.5;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* PCの3列を、スマホでは 中央 → 左 → 右 に並べる */
  body>center>table.top-layout,
  body>.wrap>table.top-layout {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-spacing: 0;
  }

  body>center>table.top-layout>tbody,
  body>.wrap>table.top-layout>tbody,
  body>center>table.top-layout>tbody>tr,
  body>.wrap>table.top-layout>tbody>tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
  }

  body>center>table.top-layout>tbody>tr>td,
  body>.wrap>table.top-layout>tbody>tr>td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  /* 中央本文 */
  body>center>table.top-layout td.main,
  body>.wrap>table.top-layout td.main {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 8px 4px;
  }

  /* 左右メニュー */
  body>center>table.top-layout td.side,
  body>.wrap>table.top-layout td.side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    order: 2;
    padding: 8px !important;
  }

  body>center>table.top-layout td.side>div:first-child,
  body>.wrap>table.top-layout td.side>div:first-child {
    grid-column: 1 / -1;
  }

  body>center>table.top-layout td.side>div,
  body>.wrap>table.top-layout td.side>div {
    width: auto !important;
    margin: 0 !important;
    text-align: center;
  }

  body>center>table.top-layout td.side hr,
  body>.wrap>table.top-layout td.side hr {
    display: none;
  }

  /* 中央列直下の固定幅要素を画面幅に収める */
  body>center>table.top-layout td.main>img,
  body>.wrap>table.top-layout td.main>img,
  body>center>table.top-layout td.main>table,
  body>.wrap>table.top-layout td.main>table,
  body>center>table.top-layout td.main>div,
  body>.wrap>table.top-layout td.main>div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body>center>table.top-layout td.main table,
  body>.wrap>table.top-layout td.main table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body>center>table.top-layout td.main td,
  body>.wrap>table.top-layout td.main td {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-wrap: anywhere;
  }

  body>center>table.top-layout td.main img,
  body>.wrap>table.top-layout td.main img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 見出し文字 */
  td.main span[style*="font-size:300%"] {
    font-size: 1.65rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  td.main span[style*="font-size:240%"] {
    font-size: 1.4rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  td.main span[style*="font-size:200%"] {
    font-size: clamp(1.15rem, 5.5vw, 1.45rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* 毎月更新する中央見出しが右へはみ出さないようにする */
  #main-feature>tbody>tr:nth-child(1)>td,
  #main-feature>tbody>tr:nth-child(3)>td,
  #main-feature>tbody>tr:nth-child(1)>td span,
  #main-feature>tbody>tr:nth-child(3)>td span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 毎月更新する紹介枠：スマホでも3列を維持して全体を縮小 */
  #main-feature {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-spacing: 0;
  }

  #main-feature>tbody {
    display: table-row-group !important;
  }

  #main-feature>tbody>tr {
    display: table-row !important;
  }

  #main-feature>tbody>tr>td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* チラシ・中央メッセージ・チラシの3列 */
  #main-feature>tbody>tr:nth-child(4)>td:nth-child(1),
  #main-feature>tbody>tr:nth-child(4)>td:nth-child(3) {
    width: 42% !important;
  }

  #main-feature>tbody>tr:nth-child(4)>td:nth-child(2) {
    width: 16% !important;
    font-size: clamp(0.7rem, 3vw, 1.1rem) !important;
    letter-spacing: 0 !important;
  }

  #main-feature>tbody>tr:nth-child(4)>td:nth-child(1)>img,
  #main-feature>tbody>tr:nth-child(4)>td:nth-child(3)>img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* 「利用サークル・団体の皆さんへ」を横一列に保つ */
  td.circle-users-heading {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100% !important;
    min-width: 0 !important;
  }

  td.circle-users-heading img[src$="a_blt020.gif"] {
    flex: 0 0 24px;
    width: 24px !important;
    max-width: 24px !important;
    height: auto !important;
  }

  td.circle-users-heading img[src$="logo211112111.gif"] {
    flex: 1 1 auto;
    width: calc(100% - 56px) !important;
    max-width: calc(100% - 56px) !important;
    min-width: 0;
    height: auto !important;
  }

  /* コピーライト */
  body>center>table.top-layout td.main .copy,
  body>.wrap>table.top-layout td.main .copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}

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

  body>center>table.top-layout td.side,
  body>.wrap>table.top-layout td.side {
    gap: 5px;
    padding: 5px !important;
  }

  body>center>table.top-layout td.main,
  body>.wrap>table.top-layout td.main {
    padding: 6px 2px;
  }

  td.main span[style*="font-size:300%"] {
    font-size: 1.4rem !important;
  }

  td.main span[style*="font-size:240%"] {
    font-size: 1.2rem !important;
  }
}

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

  body>center>table.top-layout td.side,
  body>.wrap>table.top-layout td.side {
    grid-template-columns: 1fr;
  }
}