/* =========================================================
   お知らせ (News) — no Claude Design mock; a quiet ruled list
   in the same style as the price table. Each item expands.
   ========================================================= */

.news {
  padding: 0 var(--page-gutter) clamp(64px, 9vw, 140px);
}
.news__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-text-on-light);
}
.news-item { border-bottom: 1px solid var(--color-border-light); }
.news-item details { scroll-margin-top: 24px; }

.news-item__head {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 32px;
  padding: 28px 0;
}
.news-item__head::-webkit-details-marker { display: none; }
.news-item__head:hover .news-item__title { color: var(--color-secondary-on-light); }

.news-item__date {
  font: 400 13px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--color-text-muted-on-light);
}
.news-item__cat {
  justify-self: start;
  min-width: 80px;
  text-align: center;
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 6px 14px;
  font: 400 11px/1 var(--font-mincho);
  letter-spacing: .1em;
}
.news-item__title {
  font: 400 17px/1.6 var(--font-mincho);
  letter-spacing: .06em;
  transition: color .3s;
}
.news-item__icon {
  position: relative;
  width: 14px;
  height: 14px;
}
.news-item__icon::before,
.news-item__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.news-item__icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.news-item__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; }
details[open] .news-item__icon::after { transform: scaleY(0); }

.news-item__body {
  padding: 0 0 32px;
  max-width: 760px;
  font: 400 15px/1.9 var(--font-sans);
  color: var(--color-text-sub-on-light);
}
.news-item__body p { margin: 0 0 12px; }
.news-item__body p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  .news-item__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .news-item__title { grid-column: 1 / 3; }
  .news-item__icon { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}