@charset "UTF-8";
/* ==========================================================================
   pages/news.css — 最新情報（一覧・記事）（p-系）（SPD-v2）
   ========================================================================== */

.p-newsTabs {
  display: flex;
  gap: 0.8rem;
  margin-block-end: 3.2rem;

  & a {
    padding: 0.8rem 2rem;
    border: 1px solid var(--cl-ln-tag);
    font-size: var(--fs-s);
    font-weight: 700;
    transition: background-color var(--ease-t), border-color var(--ease-t), color var(--ease-t);

    &.is-active {
      border-color: var(--cl-navy);
      background-color: var(--cl-navy);
      color: var(--cl-wh);
    }
  }
}

.p-newsList {
  border-block-start: 1px solid var(--cl-ln);

  /* 左にサムネイル、右に日付・カテゴリ・タイトル（サムネイルは 2026-10-07 追加） */
  & a {
    display: grid;
    grid-template-columns: 11.2rem 1fr;
    gap: 1.6rem;
    align-items: center;
    padding: 2.4rem 0.4rem;
    border-block-end: 1px solid var(--cl-ln);

    @media print, screen and (min-width: 640px) {
      grid-template-columns: 20rem 1fr;
      gap: 3.2rem;
    }
  }

  & h2 {
    font-family: var(--ff-serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: color var(--ease-t), text-decoration-color var(--ease-t);

    @media print, screen and (min-width: 1024px) { font-size: 1.8rem; }
  }
}

@media (any-hover: hover) {
  .p-newsTabs a:not(.is-active):hover {
    border-color: var(--cl-navy);
    color: var(--cl-navy);
    opacity: 1;
  }

  .p-newsList a:hover {
    opacity: 1;
  }

  .p-newsList a:hover .p-newsList-thumb:not(._noimg) img {
    transform: scale(1.04);
  }

  .p-newsList a:hover h2 {
    color: var(--cl-key);
    text-decoration-color: var(--cl-gold);
  }
}

.p-newsList-thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--cl-bggr);

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--ease-t-slow) var(--ease-out);
  }

  /* 画像の無い記事は、緑の地に白いロゴ */
  &._noimg {
    display: grid;
    place-items: center;
    background-color: var(--cl-green-dk);

    & img {
      inline-size: 64%;
      block-size: auto;
      object-fit: contain;
      opacity: 0.85;
    }
  }
}

.p-newsList-body {
  display: grid;
  gap: 0.6rem;
}

.p-newsList-meta {
  display: flex;
  align-items: center;
  gap: 1rem;

  & time {
    color: var(--cl-gr);
    font-size: var(--fs-s);
    letter-spacing: 0.06em;
  }

  & span {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--cl-ln-news);
    color: var(--cl-green);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }
}

.p-pager {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-block-start: 4.8rem;

  & :is(a, span) {
    display: grid;
    place-items: center;
    min-inline-size: 4rem;
    block-size: 4rem;
    padding-inline: 1.2rem;
    border: 1px solid var(--cl-ln-tag);
    font-size: var(--fs-s);
  }

  & span {
    border-color: var(--cl-navy);
    background-color: var(--cl-navy);
    color: var(--cl-wh);
  }

  & a {
    transition: border-color var(--ease-t), color var(--ease-t);
  }
}

@media (any-hover: hover) {
  .p-pager a:hover {
    border-color: var(--cl-navy);
    color: var(--cl-navy);
    opacity: 1;
  }
}

.p-article {
  display: grid;
  gap: 2.4rem;
}

.p-article-title {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.5;
}

.p-article-body {
  padding-block: 3.2rem;
  border-block: 1px solid var(--cl-ln);
  font-size: var(--fs-m);
  line-height: 1.9;

  & > * + * { margin-block-start: 1.6rem; }

  & h2 {
    margin-block-start: 4rem;
    padding-inline-start: 1.6rem;
    border-inline-start: 3px solid var(--cl-gold);
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
  }

  & h3 {
    margin-block-start: 3.2rem;
    color: var(--cl-key);
    font-size: var(--fs-m);
    font-weight: 700;
  }

  & ul {
    padding-inline-start: 2rem;
    list-style: disc;
  }

  & ol {
    padding-inline-start: 2.4rem;
    list-style: decimal;
  }

  & a {
    color: var(--cl-blue);
    text-decoration: underline;
    overflow-wrap: anywhere;
  }

  /* 本文の画像・動画（WordPress の画像ブロック）。縦長の画像が画面を占領しないよう高さを抑える */
  & figure { margin-block: 3.2rem; }

  & :is(img, video) {
    max-block-size: 72rem;
    inline-size: auto;
    margin-inline: auto;
  }

  & video { inline-size: 100%; background-color: var(--cl-txt); }

  & figcaption {
    margin-block-start: 0.8rem;
    color: var(--cl-gr);
    font-size: var(--fs-s);
    text-align: center;
  }

  & table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fs-s);
  }

  & :is(th, td) {
    padding: 1.2rem;
    border: 1px solid var(--cl-ln);
    text-align: start;
  }

  & th { background-color: var(--cl-bggr); }
}

.p-article-related {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 2.4rem;
  background-color: var(--cl-bggr);
}

/* 記事のカテゴリ（リンクのとき） */
.p-newsList-meta a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cl-ln-news);
  color: var(--cl-green);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* 前後の記事 */
.p-articleNav {
  display: grid;
  gap: 1.2rem;
  padding-block: 2.4rem;
  border-block: 1px solid var(--cl-ln);

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem;
  }

  & a {
    display: grid;
    gap: 0.6rem;
    font-size: var(--fs-s);
    line-height: 1.6;
    transition: color var(--ease-t);
  }

  & a span {
    color: var(--cl-gold);
    font-family: var(--ff-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
  }

  & ._prev span::before { content: "← "; }
  & ._next { text-align: end; }
  & ._next span::after { content: " →"; }
}

@media (any-hover: hover) {
  .p-articleNav a:hover {
    color: var(--cl-key);
    opacity: 1;
  }
}

.p-article-back {
  display: flex;
  justify-content: center;
}