/* reset.css: body{line-height:1} を、このコンテンツ領域だけ戻す */
    #main-container,
    #main-container * {
      line-height: 1.5;
    }

    /* コンテナの制限を解除し、フッタと同じ最大960pxに合わせる */
    #main-container .content-wrap {
      max-width: 960px;
      width: 100%;
      margin-left: 0;
    }

    /* content-inner の左右パディングを0にし、
       中にある「見出し」だけ元の位置(28px)にパディングで戻す。
       これで fieldset と結果エリアはパディングに縛られず100%幅になる。
    */
    #main-container .content-inner {
      padding-left: 0;
      padding-right: 0;
    }

    /* 検索フォームと結果エリア：横幅いっぱい。ネガティブマージンを使わず安全に。 */
    #main-container fieldset,
    #main-container #resultArea {
      width: 100%;
      box-sizing: border-box;
      padding-left: 28px;
      padding-right: 28px;
    }

    /* フォームの内側の枠線（fieldset本来の枠） */
    #main-container fieldset {
      border: 1px solid #ccc;
      padding: 16px 28px;
      margin-bottom: 20px;
      border-radius: 8px;
      background: #fff;
    }

    #main-container legend {
      font-weight: bold;
      padding: 0 8px;
    }

    #main-container label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 8px 12px 8px 0;
      font-size: 1.4rem;
    }

    /* フォーム要素の縦ズレ対策 */
    #main-container select,
    #main-container input[type="text"],
    #main-container button {
      font: inherit;
      line-height: 1.2;
    }

    #main-container select,
    #main-container input[type="text"] {
      padding: 6px 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    /* 行レイアウト */
    #main-container .row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    /* 検索条件の改行（行間調整） */
    #main-container .search-row {
      margin-bottom: 8px;
    }

    /* 作品名/作者名の入力は少し広めに */
    #main-container input[type="text"] {
      min-width: 360px;
    }

    #main-container .muted {
      color: #666;
      font-size: 1.2rem;
      margin-top: 8px;
    }

    /* ボタン（common.css寄り） */
    #main-container #searchBtn,
    #main-container #resetBtn {
      border-radius: 4px;
      cursor: pointer;
    }

    #main-container #searchBtn {
      background: #C8161D;
      color: #fff;
      border: 1px solid #C8161D;
      padding: 7px 18px;
    }

    #main-container #searchBtn:hover {
      opacity: 0.85;
    }

    #main-container #resetBtn {
      background: #fff;
      border: 1px solid #ccc;
      padding: 6px 15px;
    }

    #main-container #resetBtn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    /* テーブル */
    #main-container .table-container {
      width: 100%;
      overflow-x: auto;
      margin-top: 12px;
      border: 1px solid #ddd;
      background: #fff;
    }

    #tableWrap table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px; /* 横スクロールを許容 */
    }

    #tableWrap th,
    #tableWrap td {
      border-bottom: 1px solid #ddd;
      padding: 10px 12px;
      text-align: left;
      font-size: 1.3rem;
      vertical-align: top;
      line-height: 1.4;
      word-break: break-word;
    }

    #tableWrap th {
      background: #f8f9fa;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    #tableWrap tr:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    /* ページング */
    #main-container .pager {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin: 15px 0;
    }

    #main-container .pager button {
      padding: 6px 14px;
      cursor: pointer;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    #main-container .pager button:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.06);
    }

    #main-container .pager button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    #main-container .page-info {
      font-weight: bold;
      color: #444;
    }

    /* その他 */
    #main-container .count {
      margin-top: 12px;
      font-weight: bold;
    }

    #main-container .hidden {
      display: none;
    }