@charset "UTF-8";

/* Preserve all legacy banner and image-menu dimensions. */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: #334155;
  font-family: Meiryo, "Yu Gothic", sans-serif;
  line-height: 1.75;
}

body p,
body li,
body dt,
body dd {
  color: #334155;
  font-family: Meiryo, "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

body h1 { color: #075985; font-size: 24px; line-height: 1.45; }
body h2 { color: #087fbd; font-size: 22px; line-height: 1.5; }
body h3 { color: #087f8c; font-size: 18px; line-height: 1.55; }
body a { color: #0077b6; }

/* Keep HPB rollover behavior and add a fallback hover response. */
table a img {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

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

.hands-smile {
  color: #0077b6 !important;
  font-family: Meiryo, "Yu Gothic", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

.com-support-panel {
  box-sizing: border-box;
  width: 570px;
  max-width: calc(100% - 20px);
  margin: 18px auto 24px;
  padding: 16px 18px;
  border: 1px solid #b9dcef;
  border-radius: 6px;
  background: #f7fcff;
  color: #334155;
  font-family: Meiryo, "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-align: left;
}

.com-support-panel h2 {
  margin: 0 0 8px;
  color: #075985;
  font-size: 21px;
  text-align: center;
}

.com-support-panel p { margin: 8px 0; }
.com-support-panel .official-link { text-align: center; }
.com-support-panel .official-link a {
  display: inline-block;
  margin: 4px;
  padding: 7px 12px;
  border-radius: 4px;
  background: #0077b6;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

/* Stable desktop frame for index.html. */
.top-menu-table {
  width: 787px !important;
  min-width: 787px !important;
  max-width: 787px !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: 800px !important;
  max-width: 800px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  table-layout: fixed !important;
}

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

.left-menu-table {
  width: 167px !important;
  min-width: 167px !important;
  max-width: 167px !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;
}

.main-wrapper > tbody > tr > .main-content {
  box-sizing: border-box;
  width: 633px !important;
  min-width: 0 !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  vertical-align: top !important;
}

@media screen and (max-width: 640px) {
  html { overflow-y: auto; }
  body {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 4px !important;
    overflow-x: hidden;
  }
  body h1 { font-size: 20px; }
  body h2 { font-size: 20px; }
  body h3 { font-size: 17px; }
  img, iframe { max-width: 100%; height: auto; }
  .com-support-panel { width: auto; margin-right: 8px; margin-left: 8px; padding: 14px; }

  .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 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; }
}