/* ===== お知らせアーカイブ固有スタイル ===== */

.hero-osirasebacknumber {
  background-image: url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=1200&q=70');
}

    .archive-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 48px;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* 年フィルター */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }
    .filter-label {
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    .filter-btn {
      padding: 5px 16px;
      border: 1.5px solid var(--color-border);
      border-radius: 100px;
      background: white;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-text-light);
      cursor: pointer;
      transition: var(--transition);
    }
    .filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .filter-btn.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: white;
    }

    /* お知らせリスト */
    .notice-list {
      background: white;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      overflow: hidden;
    }
    .notice-item {
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: start;
      padding: 18px 24px;
      border-bottom: 1px solid var(--color-border-light);
      transition: var(--transition);
      gap: 20px;
    }
    .notice-item:last-child { border-bottom: none; }
    .notice-item:hover { background: var(--color-bg-light); }
    .notice-date {
      font-family: var(--font-en);
      font-size: 13px;
      font-weight: 600;
      color: var(--color-primary);
      letter-spacing: 0.04em;
      padding-top: 2px;
    }
    .notice-content-area {}
    .notice-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text);
      line-height: 1.7;
      margin-bottom: 4px;
      transition: var(--transition);
    }
    .notice-item:hover .notice-title { color: var(--color-primary); }
    .notice-title a { transition: var(--transition); }
    .notice-title a:hover { color: var(--color-primary); text-decoration: underline; }
    .notice-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .notice-tag {
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .notice-tag-event { background: rgba(26,122,106,0.1); color: var(--color-teal); }
    .notice-tag-media { background: rgba(184,150,62,0.12); color: #8a6f2a; }
    .notice-tag-seminar { background: rgba(196,26,26,0.08); color: var(--color-accent); }
    .notice-tag-info { background: rgba(26,42,74,0.08); color: var(--color-primary); }
    .notice-tag-recruit { background: rgba(100,60,120,0.1); color: #6a3c8a; }

    /* 年度グループ見出し */
    .year-group-heading {
      background: var(--color-bg-light);
      padding: 10px 24px;
      font-family: var(--font-en);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--color-primary);
      text-transform: uppercase;
      border-bottom: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .year-group-heading::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }

    /* サイドバーウィジェット */
    .sidebar-widget {
      background: white;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      overflow: hidden;
      margin-bottom: 20px;
    }
    .widget-header {
      background: var(--color-primary);
      color: white;
      padding: 12px 18px;
      font-family: var(--font-serif);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .widget-body { padding: 18px; }

    /* LINE ウィジェット */
    .line-widget {
      background: var(--color-line);
      border-radius: var(--radius-md);
      padding: 20px;
      text-align: center;
      margin-bottom: 20px;
    }
    .line-widget-icon { font-size: 36px; margin-bottom: 8px; }
    .line-widget-text {
      font-size: 13px;
      color: white;
      margin-bottom: 14px;
      font-weight: 500;
    }
    .line-widget-btn {
      display: block;
      background: white;
      color: var(--color-line);
      padding: 10px 20px;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 14px;
      transition: var(--transition);
    }
    .line-widget-btn:hover { background: #f0fff4; }

    /* 事務所情報ウィジェット */
    .office-info-item {
      display: flex;
      gap: 10px;
      font-size: 13px;
      padding: 8px 0;
      border-bottom: 1px solid var(--color-border-light);
      align-items: flex-start;
    }
    .office-info-item:last-child { border-bottom: none; }
    .office-info-icon { font-size: 14px; flex-shrink: 0; padding-top: 1px; }
    .office-info-text { color: var(--color-text-light); line-height: 1.7; }

    /* サービスバナー */
    .service-banner {
      display: block;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      color: white;
      padding: 20px;
      border-radius: var(--radius-md);
      margin-bottom: 20px;
      transition: var(--transition);
      text-align: center;
    }
    .service-banner:hover { opacity: 0.9; transform: translateY(-2px); }
    .service-banner-icon { font-size: 32px; margin-bottom: 8px; }
    .service-banner-title {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .service-banner-desc { font-size: 12px; opacity: 0.8; }

    /* フィルター非表示 */
    .notice-year-group { display: none; }
    .notice-year-group.active { display: block; }

    /* 年カード（.notice-list）同士の間隔 — 元 HTML（osirasebacknumber.html）の 2 年目以降 margin-top:16px に合わせる */
    .notice-year-group + .notice-year-group {
      margin-top: 16px;
    }

    @media (max-width: 900px) {
      .archive-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .archive-layout { padding: 24px 16px; }
    }