.announcement-detail-shell {
  color: #414141;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
}

.announcement-detail-page {
  width: min(1200px, calc(100% - 48px));
  flex: 1 0 auto;
  margin: 0 auto;
  padding: 17px 0 80px;
}

.announcement-detail-page .public-breadcrumb {
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
}

.announcement-detail-page .public-breadcrumb span[aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-detail-article {
  width: 800px;
  max-width: 100%;
  margin-top: 42px;
  margin-left:auto;
  margin-right:auto;
}

.announcement-detail-heading h1 {
  margin: 0;
  color: #414141;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
}

.announcement-detail-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0 0;
  color: #7c7c7c;
  font-size: 14px;
  line-height: 1.6;
}

.announcement-detail-author :is(span, a) {
  color: #414141;
  font-weight: 700;
}

.announcement-detail-author a {
  color: var(--color-brand);
  text-decoration: none;
}

.announcement-detail-author a:hover {
  text-decoration: underline;
}

.announcement-detail-author small {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  border-radius: 3px;
  background: #f1f1f1;
  color: #414141;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
}

.announcement-detail-taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

/* 本文の共通スタイルは common.css の .public-rich-text。ここでは幅と上の余白だけを指定する */
.announcement-detail-content {
  width: 800px;
  max-width: 100%;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .announcement-detail-page {
    width: min(800px, calc(100% - 32px));
  }
}

@media (max-width: 600px) {
  .announcement-detail-page {
    width: 100%;
    padding: 0 15px 44px;
  }

  .announcement-detail-page .public-breadcrumb {
    height: 46px;
    margin: 0 -15px;
    padding: 0 15px;
  }

  .announcement-detail-article {
    margin-top: 18px;
  }

  .announcement-detail-heading h1 {
    font-size: 22px;
    line-height: 1.6;
  }

  .announcement-detail-author {
    gap: 3px 10px;
    font-size: 12px;
  }

  .announcement-detail-author small {
    min-height: 16px;
    font-size: 9px;
  }

  .announcement-detail-taxonomy {
    gap: 4px;
    margin-top: 10px;
  }

  .announcement-detail-taxonomy .tag-pill {
    background-position: 6px center;
    background-size: 8px 10px;
    font-size: 10px;
    line-height: 13px;
    padding: 2px 6px 2px 18px;
  }

  .announcement-detail-content {
    margin-top: 28px;
  }
}