/* ページタイトル */
    .page-title { 
      font-size: 1.8rem; 
      margin: 20px 0 10px; 
      color: #f5f5f5; 
    }

    /* 注意書き（オレンジ枠） */
    .note {
      background: #fdf2e9;         /* 薄いオレンジ背景 */
      color: #d35400;              /* 濃いオレンジ文字 */
      padding: 12px 16px; 
      border-left: 4px solid #e67e22;   /* 左の太線 */
      border-radius: 0 4px 4px 0; 
      margin: 20px 0; 
      font-size: 0.95rem; 
      font-weight: 500;            /* 少し太字 */
    }

    /* === 検索エリア === */
    .search-area {
      background: #f8f9fa;         /* 薄いグレー背景 */
      padding: 18px; 
      border-radius: 8px; 
      margin: 20px 0; 
      box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 軽い影 */
    }

    /* 検索ボックス */
    .search-input {
      width: 100%; 
      max-width: 500px;            /* 横幅制限 */
      padding: 10px 14px; 
      font-size: 1rem; 
      border: 1px solid #ccc; 
      border-radius: 6px; 
      outline: none;               /* デフォルトの青枠消す */
    }
    .search-input:focus {
      border-color: #3498db;       /* フォーカス時青 */
      box-shadow: 0 0 0 3px rgba(52,152,219,0.2); /* 青い光 */
    }

    /* タグフィルターボタン */
    .tag-filters {
      margin-top: 12px; 
      display: flex; 
      flex-wrap: wrap;             /* 折り返し */
      gap: 8px;                    /* ボタン間隔 */
    }
    .tag-btn {
      padding: 6px 12px; 
      background: #e9ecef; 
      border: none; 
      border-radius: 20px;         /* 丸角 */
      font-size: 0.85rem; 
      cursor: pointer; 
      transition: all 0.2s; 
    }
    .tag-btn.active {
      background: #3498db;         /* 選択中は青 */
      color: white; 
    }
    .tag-btn:hover:not(.active) {
      background: #dee2e6;         /* ホバー時少し濃く */
    }

    /* === バックナンバーグリッド === */
    .newsletter-grid {
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 自動調整 */
      gap: 16px; 
      margin: 25px 0; 
      min-height: 100px;           /* 空でも高さ確保 */
    }

    /* 各号のカード */
    .newsletter-item {
      position: relative;        
      padding: 14px 10px; 
      background: #f8fbff; 
      border: 1px solid #d0e4ff; 
      border-radius: 8px; 
      text-decoration: none; 
      color: #2c3e50; 
      font-weight: 600; 
      text-align: center; 
      transition: all 0.2s ease; 
      box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
      flex-direction: column;
      justify-content: flex-start;
      min-height: 120px; /* 見出しが入る分確保 */
    }
    .newsletter-item:hover {
      background: #e3f2fd; 
      transform: translateY(-3px); /* 浮き上がる */
      box-shadow: 0 4px 10px rgba(0,100,200,0.15); 
      border-color: #3498db; 
    }
    .newsletter-item small { 
      display: block; 
      margin: 4px; 
      color: #7f8c8d; 
      font-size: 0.85rem; 
    }
    .pdf-icon { 
      margin-left: 4px; 
      font-size: 0.9em; 
      align-self: center;
    }

   /* 見出しリスト（カード内） */
    .headlines-list {
     margin: 8px 0 0;
     padding: 0;
     list-style: none;
     font-size: 0.75rem;
     color: #555;
     text-align: left;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
    }

   .headlines-list li {
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px dotted #ddd;
   }

  .headlines-list li:last-child {
   border-bottom: none;
   }

    /* 結果なしメッセージ */
    .no-results {
      text-align: center; 
      color: #777; 
      font-style: italic; 
      padding: 30px; 
      display: none;               /* 初期は非表示 */
    }

    /* スマホ対応 */
    @media (max-width: 480px) {
      .newsletter-grid { 
        grid-template-columns: repeat(2, 1fr); /* 2列 */
      }
      .page-title { font-size: 1.5rem; }
      .search-input { max-width: 100%; }
    }