/* Responsive overrides for legacy MM Office design */

.mobile-side-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  #headertop,
  #header,
  #content,
  #footer {
    width: 100%;
    max-width: 100%;
  }

  #header {
    height: auto;
    min-height: 0;
    aspect-ratio: 1000 / 155;
    background-size: 100% 100%;
    background-position: center top;
    position: relative;
    overflow: visible;
  }

  #header_subtitle {
    float: none;
    width: auto;
    height: auto;
    padding: 4px 12px;
  }

  #headertop h1 {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }

  #topmenu {
    margin: 0;
    float: none;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    top: -15px;
  }

  #topmenu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    justify-content: center;
  }

  #topmenu li {
    float: none;
    flex: 0 1 auto;
  }

  #topmenu li {
    display: none;
  }

  #topmenu li.topmenu-home {
    display: block;
  }

  #topmenu img {
    width: min(28vw, 160px);
    height: auto;
  }

  #topmenu li.topmenu-home img {
    width: min(42vw, 240px);
  }

  #content {
    box-sizing: border-box;
    padding: 0 5px;
    background: #FFF url("../images/main_bg.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
  }

  #topboard {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1000 / 454;
    background-size: 100% 100%;
    background-position: center top;
    position: relative;
    overflow: visible;
  }

  #blogfusen {
    float: none;
    padding: 0;
    text-align: right;
    position: absolute;
    right: 10px;
    bottom: -26px;
    top: auto;
    z-index: 2;
  }

  #blogfusen img {
    width: clamp(104px, 27vw, 136px);
    height: auto;
  }

  #footer {
    height: auto;
    min-height: 0;
    aspect-ratio: 1000 / 168;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }

  #onegai > div,
  #onegai2 > div {
    max-width: 100%;
  }

  #onegai img,
  #onegai2 img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .mobile-side-toggle {
    display: block;
    margin: 12px 12px 0;
  }

  #content_left.collapse:not(.show) {
    display: none;
  }

  #content_left.collapse.show {
    display: block;
  }

  #content_left,
  #content_right {
    float: none;
    width: 100%;
  }

  #newsblock,
  #newsblock_main,
  #newsblock_all,
  .newsline,
  .newslineall {
    width: 100% !important;
    max-width: 100%;
  }

  #newsblock_main ul,
  #newsblock_all ul {
    padding-left: 0;
  }

  .newsline,
  .newslineall {
    table-layout: fixed;
  }

  .newslineall th,
  .newslineall td,
  .newsline th,
  .newsline td {
    display: block;
    width: auto !important;
    max-width: 100%;
    padding-left: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .newslineall th img,
  .newslineall td img,
  .newsline th img,
  .newsline td img {
    max-width: 100%;
    height: auto;
  }

  .news_books {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  #sideblock {
    margin: 0 12px 8px;
  }

  #commonblock,
  #newsblock_all,
  .workstbl,
  .kugiri,
  .profiletbl th,
  .profiletbl td,
  .infomationtbl td,
  .newslineall td,
  .contactline td {
    width: 100% !important;
  }

  #commonblock {
    margin: 0;
    background-size: cover;
  }

  #content_full {
    padding: 16px;
  }

  #content_full h1 {
    margin: 0 0 16px;
    font-size: 34px;
  }

  #content_full h2 {
    margin: 4px 0 10px;
    font-size: 26px;
  }

  .note_full {
    margin: 0;
    width: auto;
    padding: 8px;
  }

  .kugiri_full {
    width: 100%;
    margin: 8px 0;
  }

  .contactline textarea {
    width: 100% !important;
    max-width: 100%;
  }

  #footer {
    height: auto;
    min-height: 120px;
  }

  .copyright {
    padding: 18px 12px;
    font-size: 12px;
  }
}