/* お知らせ（news）ページと TOP の PICK UP。仕様は spec/40-news.md。
   Figma に該当フレームが無いので、値は TOP の既存部品（about の本文幅、
   その他費用の罫線、contact の囲み）からそろえている。デザインが届いたら Figma を正にする。
   mobile 起点。1024px〜が desktop で、style.css と同じ境目。 */

/* ---------- PICK UP（TOP のヒーロー直下） ---------- */

#pickup .inner {
  max-width: 760px;
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pickup-title {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-324);
  line-height: var(--lh-26);
}

.pickup-card {
  display: block;
  transition: opacity var(--dur-menu-icon) var(--ease-menu);
}

.pickup-card:hover {
  opacity: 0.7;
}

.pickup-card:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

/* サムネ画像そのものをバナーにする。支給画像は白地で白いページに溶けるので、
   contact の囲みと同じ罫線で縁取る。 */
.pickup-card img,
.news-thumb img {
  width: 100%;
  height: auto;
  border: var(--stroke) solid var(--color-line-box);
}

/* ---------- お知らせページ ---------- */

/* ヘッダーが fixed の 100px なので、その下から始める */
.news-article {
  padding: 140px var(--pad-mobile) 96px;
}

.news-article .inner {
  max-width: 760px;
}

.news-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 28px;
  border-bottom: var(--stroke) solid var(--color-line);
}

.news-date {
  font-size: var(--fs-12);
  color: var(--color-grey-40);
  letter-spacing: var(--ls-136);
  line-height: 18px;
}

.news-title {
  font-size: var(--fs-21);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: var(--gap-36);
}

.news-thumb {
  margin-top: 36px;
}

.news-body {
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.news-body p {
  line-height: var(--lh-30);
}

/* 開催概要。罫線は［その他費用］と同じ色。mobile は項目名の下に内容を落とす。 */
.news-facts {
  margin-top: 36px;
  border-bottom: var(--stroke) solid var(--color-line);
}

.news-fact {
  border-top: var(--stroke) solid var(--color-line);
  padding: 16px 0 15px;
  display: grid;
  gap: 4px;
}

.news-fact dt {
  font-size: var(--fs-12);
  color: var(--color-grey-40);
  letter-spacing: var(--ls-2);
  line-height: 20px;
}

.news-fact dd {
  letter-spacing: var(--ls-06);
  line-height: var(--lh-28);
}

.news-note {
  padding-top: 16px;
  font-size: var(--fs-12);
  color: var(--color-grey-40);
  line-height: var(--lh-26);
}

.news-actions {
  padding-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* TOP の申し込みボタン（.btn-apply）と同じ黒地白文字 */
.btn-news-contact {
  width: 100%;
  max-width: 300px;
  height: 60px;
  background: var(--color-black);
  color: var(--color-bg);
}

.news-back {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-2);
  line-height: 18px;
  border-bottom: var(--stroke) solid currentColor;
}

@media (min-width: 1024px) {

  #pickup .inner {
    padding-top: 120px;
  }

  .news-article {
    padding: 180px 32px 120px;
  }

  .news-title {
    letter-spacing: var(--ls-324);
  }

  /* desktop は項目名と内容の2列 */
  .news-fact {
    grid-template-columns: 160px 1fr;
    gap: 0;
    padding: 17px 8px 16px;
  }

  .news-fact dt {
    font-size: var(--fs-15);
    color: var(--color-ink);
    line-height: var(--lh-28);
  }

  .news-note {
    padding-left: 8px;
  }
}