/* ============================================================
   お知らせ詳細 (news-detail.html) — screen-specific styles
   共通トークン・共通コンポーネント(service-nav/header/footer/
   page-heading/breadcrumb/cta/btn)は css/style.css を参照。
   ============================================================ */
.article {
  width: 1440px;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.article__title {
  width: 1000px;
  max-width: 100%;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}

.article__meta {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.article__date {
  font-family: var(--font-helv);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--text-primary);
}

.article__body {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  text-align: justify;
  color: var(--text-primary);
}
.article__body p:not(:last-child) { margin-bottom: 0; }

.article__img {
  width: min(100%, 480px);
  height: auto;
  margin-top: 16px;
  border: 1px solid var(--border-default);
}

.article__link {
  color: var(--primary-main);
  text-decoration: underline;
  word-break: break-all;
}
.article__link:hover { opacity: .8; }
.article__link img { 
  display: inline-block;
  transform: translateX(5px) translateY(4px);
  filter: var(--filter-icon-primary);
}

.article__table caption { text-align: left; margin: 16px 0 8px; }
.article__table th { font-weight: 400; min-width: 160px; padding-right: 24px; vertical-align: top; text-align: left; }
.article__table a { color: var(--primary-main); text-decoration: underline; }

.article__back { display: flex; }

@media (max-width: 1040px) {
  .article__title,
  .article__meta { width: 100%; padding-inline: 24px; }
}

/* ============================================================
   SP layout (max-width: 768px)
   Figma (node 929:24320) では Breadcrumb が Page heading 直後ではなく
   本文(plan/article)の後・CTAの前に配置されている（デスクトップは
   Page heading 直後のまま = 895:19559 で確認済み、変更なし）。
   .breadcrumb 自体のクラス・構造は変更せず、body を flex 化して
   order で視覚的な表示位置のみを調整する（DOM 順は変更しない）。
   ============================================================ */
@media (max-width: 768px) {
  body { display: flex; flex-direction: column; }
  .breadcrumb { order: 1; }
  .cta { order: 2; }
  .footer { order: 3; }

  .article {
    padding: 64px 0;
    gap: 40px;
  }
  .article__title { font-size: 24px; padding-inline: clamp(16px, 3.4vw, 24px); }
  .article__meta { padding-inline: clamp(16px, 3.4vw, 24px); }
  .article__date { font-size: 15px; }
  .article__body { font-size: 15px; }
  .article__back { margin-top: 48px; }
}