@media screen and (min-width: 700px) {
  .menu-trigger {
    display: none;
  }
  .title-menu header .menu {
    display: flex;
    position: absolute;
    top: 20px;
    right: 0;
  }
  .title-menu header {
    position: relative;
  }
  .title-menu {
    max-width: var(--pc-width);
    margin: 0 auto;
  }
  .menu li ul {
    display: none;
  }
  .menu li:hover ul {
    display: block;
  }
  .sidebar-on {
    display: flex;
  }
  .sidebar-on aside {
    min-width: 300px;
    flex-shrink: 0;
  }
  .sidebar-on .sidebar-left {
    width: 100%;
  }
  .article-wrap > article {
    display: flex;
    flex-wrap: no-wrap;
    padding: 16px;
  }
  .sidebar-on {
    max-width: var(--pc-width);
    margin: 0 auto;
  }
  .text-area {
    padding-left: 2rem;
  }
  .subcontents {
    width: 200px;
  }
  .subcontents h1 {
    margin-bottom: 12px;
  }
  .subcontents section {
    margin-bottom: 32px;
  }
}