/* =========================================
  /news アーカイブ（archive-news.php）
  - PC：4列 * 3（12件）
  - SP：2列 * 5（10件）
  - ページネーション：current #FC744B / other #FFE58E
  Breakpoints：1201px / 750px
========================================= */

.news-archive{
  background:#fff;
  padding: 0px 0 70px;
}

.news-archive__inner{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* 見出し（top-bookhead）周辺の余白だけここで調整 */
.news-archive .top-bookhead{
  margin: 18px auto 34px;
}

/* =========================
  GRID
========================= */
.news-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 52px;
  row-gap: 70px;
  align-items: start;
}

/* Tablet（751〜1200px）：3列にして崩れを防止 */
@media (min-width:751px) and (max-width:1200px){
  .news-grid{
    grid-template-columns: repeat(3, 1fr);
    column-gap: 42px;
    row-gap: 62px;
  }
}

/* SP（〜750px）：2列 * 5 */
@media (max-width:750px){
  .news-archive{
    padding: 0px 0 55px;
  }

  .news-archive .top-bookhead{
    margin: 0px auto 30px;
  }

  .news-grid{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 22px;
    row-gap: 40px;
  }
}

/* =========================
  CARD
========================= */
.news-card{
  min-width: 0;
}

.news-card__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネ：ほぼ正方形 */
.news-card__thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
}

.news-card__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* 画像がない場合 */
.news-card__thumb-ph{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.08));
}

/* NEWバッジ（カンプの丸） */
.news-card__badge{
  position: absolute;
  left: 10px;
  bottom: -12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  background: #fff;
  color: #222;
  border: 2px solid #222;
}

/* 日付 */
.news-card__date{
  display: block;
  margin-top: 18px;
  font-size: 12px;
  color: #333;
}

/* タイトル */
.news-card__title{
  margin: 6px 0 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  color: #111;
}

/* カテゴリ（ピル） */
.news-card__terms{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-card__term{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

/* 2色（カンプのピンク/黄っぽさ寄せ） */
.news-card__term:nth-child(odd){
  background: #F3A3A8; /* ピンク系 */
}
.news-card__term:nth-child(even){
  background: #F5C64D; /* 黄系 */
}

/* hover（控えめ） */
.news-card__link:hover .news-card__title{
  text-decoration: underline;
}

/* =========================
  Pagination
========================= */
.news-pagination{
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

.news-pagination__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* paginate_links の .page-numbers に合わせる */
.news-pagination .page-numbers{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  background: #FFE58E; /* 非アクティブ */
  color: #111;
}

.news-pagination .page-numbers.current{
  background: #FC744B; /* アーカイブ時（現在ページ） */
  color: #fff;
}

.news-pagination .page-numbers:hover{
  filter: brightness(0.97);
}

/* SP余白 */
@media (max-width:750px){
  .news-pagination{
    margin-top: 46px;
  }
}

/* 空表示 */
.news-empty{
  margin: 40px 0 0;
  color: #444;
  font-size: 14px;
}

/* =========================================
  /news 見出し（top-bookhead）補正
  ※ TOP側のCSS（top.css）を /news でも再現する
========================================= */
.news-archive .top-bookhead{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(1000px, 92%);
  margin: 18px auto 34px;
}

.news-archive .top-bookhead__line{
  flex: 1 1 280px;
  max-width: 420px;
  height: auto;
  display: block;
}

.news-archive .top-bookhead__bookwrap{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-archive .top-bookhead__book{
  width: 220px;        /* ← ここでSVGの暴れを止める */
  height: auto;
  display: block;
}

.news-archive .top-bookhead__label{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%); /* 少し上寄せ（カンプ寄せ） */
  white-space: nowrap;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1;
}

/* SP */
@media (max-width:750px){
  .news-archive .top-bookhead{
    gap: 7px;
    margin: 10px auto 22px;
  }

  .news-archive .top-bookhead__line{
    flex-basis: 140px;
    max-width: 120px;
  }

  .news-archive .top-bookhead__book{
    width: 100px;
  }

  .news-archive .top-bookhead__label{
    font-size: 16px;
    transform: translate(-50%, -44%);
  }
}

@font-face{
  font-family: "VivaTegakiZatsu";
  src: url("../fonts/851tegaki_zatsu_normal_0883.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.news-archive .top-bookhead__label{
  font-family: "VivaTegakiZatsu", cursive;
}

/* =========================================
  single-news.php 追加分
========================================= */

/* 見出し（top-bookhead）を single でも正しく表示 */
.news-single .top-bookhead{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(1000px, 92%);
  margin: 40px auto 28px;
}

.news-single .top-bookhead__line{
  flex: 1 1 280px;
  max-width: 420px;
  height: auto;
  display: block;
}

.news-single .top-bookhead__bookwrap{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-single .top-bookhead__book{
  width: 220px;
  height: auto;
  display: block;
}

.news-single .top-bookhead__label{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  white-space: nowrap;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1;

  /* 手書きフォント（style.css の @font-face + .viva-hand で読み込み済み想定） */
  font-family: "VivaTegakiZatsu", cursive;
}

/* =========================
  Single Layout
========================= */
.news-single{
  background: #fff;
  padding: 30px 0 80px;
}

.news-single__inner{
  width: min(1000px, 92%);
  margin: 0 auto;
}

/* 上部2カラム */
.news-single__top{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

/* 左：アイキャッチ */
.news-single__thumb{
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 16 / 9;
}

.news-single__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.news-single__thumb-ph{
  width: 100%;
  height: 100%;
  background: #dcdcdc;
}

/* 右：メタ＋タイトル */
.news-single__meta{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #777;
  margin-top: 6px;
}

.news-single__meta-sep{
  width: 18px;
  height: 1px;
  background: #cfcfcf;
  display: inline-block;
}

.news-single__title{
  margin: 16px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.45;
  color: #222;
}

/* 区切りの短い線（カンプの中央線） */
.news-single__divider{
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #1b2a63;
  margin: 34px auto 26px;
}

/* 本文 */
.news-single__content{
  font-size: 15px;
  line-height: 2.0;
  color: #1a1a1a;
}

/* 画像・埋め込みが大きくなりすぎないように */
.news-single__content img{
  max-width: 100%;
  height: auto;
}

/* =========================
  Related
========================= */
.news-related{
  margin-top: 80px;
}

.news-related__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 52px;
  row-gap: 52px;
  align-items: start;
}

/* =========================
  SP（〜750px）
  要件：パンくず → アイキャッチ → タイトル → コンテンツ
  ※ breadcrumb.php は上に出る想定なので、ここは縦積みだけ行う
========================= */
@media (max-width:750px){
  .news-single{
    padding: 20px 0 60px;
  }

  .news-single__top{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-single__thumb{
    border-radius: 14px;
    aspect-ratio: 16 / 10;
  }

  .news-single__title{
    margin-top: 10px;
    font-size: 18px;
  }

  .news-single__divider{
    margin: 22px auto 18px;
  }

  /* 関連記事：2列*2（4件） */
  .news-related__grid{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 22px;
    row-gap: 40px;
  }

  /* 見出し bookhead もSP調整 */
  .news-single .top-bookhead{
    gap: 12px;
    margin: 30px auto 18px;
  }
  .news-single .top-bookhead__line{
    flex-basis: 140px;
    max-width: 220px;
  }
  .news-single .top-bookhead__book{
    width: 160px;
  }
  .news-single .top-bookhead__label{
    font-size: 18px;
    transform: translate(-50%, -44%);
  }
}