/* hands-e.com：既存画像・カテゴリー完全維持＋文字統一 */
:root {
  --hands-frame: 800px;
  --hands-header: 787px;
  --hands-left: 167px;
  --hands-main: 633px;
  --hands-h1: #075985;
  --hands-h2: #087fbd;
  --hands-h3: #087f8c;
  --hands-text: #334155;
  --hands-muted: #64748b;
  --hands-link: #0077b6;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  width: var(--hands-frame) !important;
  max-width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
}

#header {
  box-sizing: border-box;
  width: var(--hands-header) !important;
  height: 58px !important;
  margin: 0 auto !important;
  overflow: hidden;
}

#header .page-title {
  box-sizing: border-box;
  width: var(--hands-header) !important;
  height: 38px !important;
  margin: 10px auto !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--hands-h1) !important;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 38px !important;
  text-align: center;
  white-space: nowrap;
}

body > .top-menu-table,
.top-menu-table {
  width: var(--hands-header) !important;
  min-width: var(--hands-header) !important;
  max-width: var(--hands-header) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  border-collapse: collapse;
  table-layout: fixed !important;
}

.top-menu-table td,
.left-menu-table td {
  padding: 0 !important;
}

.top-menu-table img,
.left-menu-table img {
  display: block;
}

.main-wrapper {
  width: var(--hands-frame) !important;
  max-width: var(--hands-frame) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  table-layout: fixed !important;
}

.main-wrapper > tbody > tr > .left-menu {
  box-sizing: border-box;
  width: var(--hands-left) !important;
  min-width: var(--hands-left) !important;
  padding: 0 !important;
  vertical-align: top !important;
}

.left-menu-table {
  width: var(--hands-left) !important;
  min-width: var(--hands-left) !important;
  max-width: var(--hands-left) !important;
  margin: 0 !important;
  border-collapse: collapse;
}

.left-menu-table img[width="165"] {
  width: 165px !important;
  min-width: 165px !important;
  max-width: 165px !important;
  height: auto !important;
}

/* 左画像カテゴリーにもカーソル反応を付ける。上部のHPB18ロールオーバーJSは変更しない。 */
.left-menu-table a img {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.left-menu-table a:hover img,
.left-menu-table a:focus img {
  filter: brightness(1.12) contrast(1.08);
  opacity: 0.94;
}

.main-wrapper > tbody > tr > .main-content {
  box-sizing: border-box;
  width: var(--hands-main) !important;
  min-width: 0 !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  color: var(--hands-text) !important;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  vertical-align: top !important;
}

.main-content p,
.main-content li,
.main-content td:not([nowrap]),
.main-content div {
  color: var(--hands-text) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.main-content font {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.main-content h1 {
  color: var(--hands-h1) !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
}

.main-content h2 {
  color: var(--hands-h2) !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
}

.main-content h3 {
  color: var(--hands-h3) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.main-content a {
  color: var(--hands-link) !important;
}

.main-content small,
.main-content .note,
.main-content .caption {
  color: var(--hands-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

@media screen and (max-width: 640px) {
  html {
    overflow-y: auto;
  }

  body {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    overflow-x: hidden;
  }

  #header {
    width: 100% !important;
    height: auto !important;
    min-height: 52px;
  }

  #header .page-title {
    width: 100% !important;
    height: auto !important;
    min-height: 32px;
    margin: 8px auto !important;
    padding: 0 6px !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    white-space: normal;
  }

  body > .top-menu-table,
  .top-menu-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 看板と下線を残し、上部の小型カテゴリーだけ左画像カテゴリーへ差し替える。 */
  .top-menu-table > tbody > tr:nth-child(2),
  .top-menu-table > tbody > tr:nth-child(3),
  .top-menu-table > tbody > tr:nth-child(4) {
    display: none !important;
  }

  .top-menu-table > tbody > tr:first-child img,
  .top-menu-table > tbody > tr:last-child img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .main-wrapper,
  .main-wrapper > tbody,
  .main-wrapper > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-wrapper > tbody > tr > .left-menu,
  .left-menu {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px auto 14px !important;
    padding: 8px 0 !important;
  }

  .left-menu-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .left-menu-table > tbody {
    display: grid !important;
    grid-template-columns: repeat(2, 165px);
    justify-content: center;
    gap: 4px 8px;
  }

  .left-menu-table > tbody > tr,
  .left-menu-table > tbody > tr > td {
    display: block !important;
    width: 165px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .left-menu-table > tbody > tr:not(:has(a)) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .left-menu-table > tbody > tr:has(td:empty) {
    display: none !important;
  }

  .main-wrapper > tbody > tr > .main-content,
  .main-content {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  .main-content-table,
  .main-content table,
  .main-content img,
  .main-content iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 380px) {
  .left-menu-table > tbody {
    grid-template-columns: 165px;
  }
}