@charset "UTF-8";

/* ============================================================
   NEWS（新着情報）一覧ページ固有
   ============================================================ */
.news-archive { margin: 0px auto 0px auto; }
.news-archive__item { border-bottom: 1px solid #c8c8d6; }
.news-archive__item:first-child { border-top: 1px solid #c8c8d6; }
.news-archive__link { color: inherit; transition: opacity 0.3s ease; }
.news-archive__link:hover { opacity: 0.6; }
.news-archive__cat { display: inline-flex; align-items: center; font-family: "Cinzel", serif; letter-spacing: 0.06em; color: #8a90a0; }
.news-archive__cat--release { color: #24abff; }
.news-archive__date { font-family: "Cinzel", serif; color: #11192f; }
.news-archive__title { color: #11192f; line-height: 1.7; }

/* 時差フェードイン */
.news-archive__item.fade-in { transition-duration: 0.55s; }
.news-archive__item.fade-in:nth-child(2) { transition-delay: 0.05s; }
.news-archive__item.fade-in:nth-child(3) { transition-delay: 0.10s; }
.news-archive__item.fade-in:nth-child(4) { transition-delay: 0.15s; }
.news-archive__item.fade-in:nth-child(5) { transition-delay: 0.20s; }
.news-archive__item.fade-in:nth-child(6) { transition-delay: 0.25s; }
.news-archive__item.fade-in:nth-child(7) { transition-delay: 0.30s; }
.news-archive__item.fade-in:nth-child(8) { transition-delay: 0.35s; }
.news-archive__item.fade-in:nth-child(9) { transition-delay: 0.40s; }
.news-archive__item.fade-in:nth-child(10) { transition-delay: 0.45s; }

/* ------------------------------------------------------------
   記事詳細ページ
   ------------------------------------------------------------ */
.news-detail { margin: 0px auto 0px auto; }
.news-detail__meta { display: flex; align-items: center; }
.news-detail__date { font-family: "Cinzel", serif; color: #11192f; }
.news-detail__cat { display: inline-flex; align-items: center; font-family: "Cinzel", serif; letter-spacing: 0.06em; color: #8a90a0; }
/* 記事の発行元表示。和文なので Cinzel は当てない。 */
.news-detail__author { display: inline-flex; align-items: center; color: #8a90a0; }
.news-detail__title { font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; }
.news-detail__body h2 { font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; }
.news-detail__body h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #11192f; }
.news-detail__body p { color: #444b5e; }
.news-detail__contact { border-top: 1px solid #dfe1ec; color: #8a90a0; }
.news-detail__contact a { color: #5985d1; transition: color 0.3s ease; }
.news-detail__contact a:hover { color: #24abff; }
.news-back { display: flex; justify-content: center; }

/* ============================================================
   PC（min-width: 768px）
   ============================================================ */
@media (min-width: 768px) {
  .news-archive { max-width: 1000px; padding: 16px 40px 120px 40px; }

  .news-detail { max-width: 880px; padding: 16px 40px 112px 40px; }
  .news-detail__meta { gap: 0px 20px; margin: 0px 0px 20px 0px; }
  .news-detail__date { font-size: 15px; }
  .news-detail__cat { font-size: 12px; }
  .news-detail__author { font-size: 12px; }
  .news-detail__title { font-size: 30px; line-height: 1.6; margin: 0px 0px 48px 0px; }
  .news-detail__body h2 { font-size: 22px; line-height: 1.6; margin: 48px 0px 20px 0px; }
  .news-detail__body h3 { font-size: 17px; line-height: 1.6; margin: 32px 0px 12px 0px; }
  .news-detail__body p { font-size: 15px; line-height: 2.1; margin: 0px 0px 20px 0px; }
  .news-detail__contact { font-size: 14px; line-height: 1.9; margin: 56px 0px 0px 0px; padding: 24px 0px 0px 0px; }
  .news-back { margin: 56px 0px 0px 0px; }
  .news-back .btn-more { padding: 16px 40px 16px 40px; font-size: 12px; }
  .news-archive__link { display: grid; grid-template-columns: 132px 148px 1fr; gap: 0px 32px; align-items: baseline; padding: 28px 0px 28px 0px; }
  .news-archive__date { font-size: 14px; }
  .news-archive__cat { font-size: 11px; }
  .news-archive__title { font-size: 15px; }
}

/* ============================================================
   SP（max-width: 767px）
   ============================================================ */
@media (max-width: 767px) {
  .news-archive { padding: 8px 24px 72px 24px; }
  .news-archive__link { display: block; padding: 20px 0px 24px 0px; }
  .news-archive__date { display: inline-block; font-size: 13px; margin: 0px 16px 0px 0px; }
  .news-archive__cat { font-size: 10px; margin: 0px 0px 0px 0px; }
  .news-archive__title { font-size: 14px; margin: 12px 0px 0px 0px; }

  .news-detail { padding: 8px 24px 72px 24px; }
  .news-detail__meta { gap: 0px 14px; margin: 0px 0px 16px 0px; }
  .news-detail__date { font-size: 14px; }
  .news-detail__cat { font-size: 11px; }
  .news-detail__author { font-size: 11px; }
  .news-detail__title { font-size: 21px; line-height: 1.6; margin: 0px 0px 32px 0px; }
  .news-detail__body h2 { font-size: 18px; line-height: 1.6; margin: 36px 0px 16px 0px; }
  .news-detail__body h3 { font-size: 15px; line-height: 1.6; margin: 24px 0px 10px 0px; }
  .news-detail__body p { font-size: 14px; line-height: 1.95; margin: 0px 0px 16px 0px; }
  .news-detail__contact { font-size: 13px; line-height: 1.85; margin: 40px 0px 0px 0px; padding: 20px 0px 0px 0px; }
  .news-back { margin: 40px 0px 0px 0px; }
  .news-back .btn-more { padding: 14px 32px 14px 32px; font-size: 11px; }
}

/* page-hero: グラデ／色合いはそのまま、news-hero画像を薄く重ねる */
.page-hero::after { content: ""; position: absolute; inset: 0px; z-index: 0; background-image: url("../images/news-hero.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.20; pointer-events: none; }

/* news を company と同じ「帯あり」構成に：
   breadcrumb を #f3f1fa 全幅帯（テキストは news 同位置=中央1200px）にし、
   一覧(news-archive)を #f3f1fa の無地帯(news-band)で囲んで連続させる */
.news-band { background: #f3f1fa; }
.breadcrumb { background: #f3f1fa; max-width: none; padding: 0px 0px 0px 0px; }
/* news-detail（記事）ページ: breadcrumb 帯の無地が about.css の body::before のグラデ環境光を隠し
   記事(透明)と色が分かれていたため透明に戻し、さらに記事(.news-detail＝880px中央)と幅・中央寄せを
   合わせて「TOP › NEWS › 記事」の文字頭を記事と揃える。このページ限定スコープ。 */
.news-detail-page .breadcrumb { background: transparent; max-width: 880px; margin: 0px auto 0px auto; }
.breadcrumb__inner { max-width: 1200px; margin: 0px auto 0px auto; }
@media (min-width: 768px) {
  .breadcrumb__inner { padding: 72px 40px 24px 40px; }
}
@media (max-width: 767px) {
  .breadcrumb__inner { padding: 24px 24px 16px 24px; }
}