* {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      min-height: 100vh;
      margin: 0;
      padding: 20px;

      background-color: #008080;
      background-image:
        linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.025) 25%,
          transparent 25%,
          transparent 75%,
          rgba(255, 255, 255, 0.025) 75%
        );

      color: #222;
    }
    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }
    /*
     * メインウィンドウ
     */
    .blog-window {
      width: min(1120px, 100%);
      margin: 0 auto;
    }

    .title-bar-text {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /*
     * メニューバー
     */
    .menu-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      margin: 0;
      padding: 3px 6px;
      list-style: none;
      background: silver;
      border-bottom: 1px solid #808080;
    }

    .menu-bar a {
      display: block;
      padding: 4px 9px;
      color: #000;
      text-decoration: none;
    }

    .menu-bar a:hover,
    .menu-bar a:focus {
      color: #fff;
      background: navy;
      outline: none;
    }

    .menu-bar a::first-letter {
      text-decoration: underline;
    }

    /*
     * ツールバー
     */
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      padding: 5px 7px;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #808080;
      background: silver;
    }

    .toolbar-separator {
      width: 2px;
      height: 24px;
      margin: 0 3px;
      border-left: 1px solid #808080;
      border-right: 1px solid #fff;
    }

    /*
     * 左右のレイアウト
     */
    .blog-layout {
      display: grid;
      grid-template-columns: 255px minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
      background: silver;
    }

    /*
     * 左サイドバー
     */
    .sidebar {
      min-width: 0;
    }

    .sidebar .title-bar {
      cursor: default;
    }

    .sidebar .window-body {
      margin: 8px;
    }

    .sidebar-section + .sidebar-section {
      margin-top: 12px;
    }

    .sidebar-section h2 {
      margin: 0 0 7px;
      font-size: 12px;
    }

    .sidebar label {
      display: block;
      margin-bottom: 4px;
    }

    .sidebar input[type="search"],
    .sidebar select {
      width: 100%;
    }

    .search-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 7px;
    }

    .search-buttons button {
      min-width: 0;
    }

    /*
     * 時計
     */
    .clock-panel {
      padding: 10px;
      text-align: center;
      background:
        radial-gradient(circle at center, #ffffff 0 47%, #d6d6d6 48% 50%, #808080 51% 52%, #c0c0c0 53%);
    }

    .clock {
      position: relative;
      width: 112px;
      height: 112px;
      margin: 0 auto 8px;
      border: 4px ridge #dfdfdf;
      border-radius: 50%;
      background: #fff;
    }

    .clock-number {
      position: absolute;
      font-weight: bold;
      font-size: 11px;
    }

    .clock-number.n12 {
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
    }

    .clock-number.n3 {
      top: 50%;
      right: 7px;
      transform: translateY(-50%);
    }

    .clock-number.n6 {
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
    }

    .clock-number.n9 {
      top: 50%;
      left: 7px;
      transform: translateY(-50%);
    }

    .clock-hand {
      position: absolute;
      left: 50%;
      bottom: 50%;
      width: 2px;
      background: #111;
      transform-origin: bottom center;
    }

    .clock-hand.hour {
      height: 25px;
      transform: translateX(-50%) rotate(35deg);
    }

    .clock-hand.minute {
      height: 36px;
      transform: translateX(-50%) rotate(125deg);
    }

    .clock-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: navy;
      transform: translate(-50%, -50%);
    }

    #current-date {
      margin: 0;
      font-weight: bold;
    }

    /*
     * カテゴリー
     */
    .category-list {
      display: grid;
      gap: 5px;
    }

    .category-list button {
      width: 100%;
      min-height: 27px;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .category-list button.active {
      color: #fff;
      background: navy;
      box-shadow:
        inset -1px -1px #fff,
        inset 1px 1px #0a0a0a,
        inset -2px -2px #dfdfdf,
        inset 2px 2px grey;
    }

    /*
     * 右側の記事領域
     */
    .content-area {
      min-width: 0;
    }

    .content-header {
      margin-bottom: 10px;
    }

    .content-header .window-body {
      margin: 12px;
    }

    .content-header h1 {
      margin: 0 0 6px;
      font-size: 17px;
    }

    .content-header p {
      margin: 0;
      line-height: 1.6;
    }

    /*
     * 記事カード
     */
    .article-list {
      display: grid;
      gap: 10px;
    }

    .article-window .window-body {
      margin: 12px;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      margin-bottom: 9px;
      padding-bottom: 7px;
      border-bottom: 1px dotted #808080;
      color: #444;
      font-size: 11px;
    }

    .article-body {
      line-height: 1.75;
      font-family:
        "MS PGothic",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
      font-size: 14px;
    }

    .article-body h2 {
      margin: 15px 0 7px;
      font-size: 15px;
    }

    .article-body p {
      margin: 0 0 12px;
    }

    .article-body a {
      color: navy;
    }

    .article-body a:visited {
      color: purple;
    }

    .article-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 12px;
      padding-top: 9px;
      border-top: 1px solid #808080;
      box-shadow: inset 0 1px #fff;
    }

    /*
     * 空の検索結果
     */
    .empty-message {
      display: none;
      padding: 22px;
      text-align: center;
    }

    /*
     * ページ送り
     */
    .pagination {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-top: 12px;
    }

    /*
     * ステータスバー
     */
    .status-bar {
      margin: 0 5px 5px;
    }

    .status-bar-field:first-child {
      flex-grow: 1;
    }

    /*
     * スマートフォン表示
     */
    @media (max-width: 720px) {
      body {
        padding: 8px;
      }

      .blog-layout {
        grid-template-columns: 1fr;
      }

      .sidebar {
        width: 100%;
      }

      .category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .toolbar-separator {
        display: none;
      }
    }

    @media (max-width: 420px) {
      .category-list,
      .search-buttons {
        grid-template-columns: 1fr;
      }

      .article-meta {
        display: grid;
        gap: 3px;
      }
    }