/* ===========================
   ニュース一覧（/category/news/）
   =========================== */

/* ===== News Archive ===== */
.news-archive { padding: clamp(2.5rem, 3vw, 4rem) 0; }

.news-archive-list { margin: 0; padding: 0; list-style: none; }
.news-archive-item { border-top: 1px solid var(--color-gray-lighter); }
.news-archive-item:last-child { border-bottom: 1px solid var(--color-gray-lighter); ; }

.news-archive-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 0;
}

.news-archive-date {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: .9rem;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: .02em;
}

.news-archive-title {
  margin: 0 0 .35rem;
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(1rem, .6vw + .95rem, 1.125rem);
}

.news-archive-excerpt {
  margin: 0;
  color: #4a4a4a;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-archive-link:hover .news-archive-title { text-decoration: underline; }

/* Pager */
.news-archive-pager { margin-top: 6.5rem; text-align: center; }
.news-archive-pager ul { display: inline-flex; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.news-archive-pager .page-numbers {
  display: inline-flex;
  gap: .5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
}

/* 丸ボタン */
.news-archive-pager .page-numbers a,
.news-archive-pager .page-numbers span{
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  font-weight: 700;
  line-height: 1;
  color: #333;
  text-decoration: none;
}

/* 矢印ボタン */
/* 矢印は丸を解除（画像だけ表示） */
.news-archive-pager .page-numbers .prev,
.news-archive-pager .page-numbers .next{
  border: 0; background: none; border-radius: 0;
  width: auto; height: auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.news-archive-pager .page-numbers .prev img,
.news-archive-pager .page-numbers .next img{
  width: 1rem; height: auto; display: block;
}
/* 並び＆間隔 */
.news-archive-pager .page-numbers{ display:inline-flex; gap:1rem; padding:0; margin:0; list-style:none; }
.news-archive-pager .page-numbers li{   display: flex; align-items: center;   }

/*ホバー */
.news-archive-pager .page-numbers a:not(.prev):not(.next):hover{ border-color: var(--color-primary); }
.news-archive-pager .page-numbers .prev:hover img,
.news-archive-pager .page-numbers .next:hover img{ opacity:.85; }

/* 他の数字ボタンと矢印の間隔 */
.news-archive-pager ul {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.news-archive-pager .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ホバー/矢印 */
.news-archive-pager .page-numbers a:hover{ border-color: var(--color-primary); }
.news-archive-pager .prev, .news-archive-pager .next{ font-size: 1.1rem; }
.news-archive-pager .page-numbers:hover { border-color: var(--color-primary); }

@media (max-width: 768px){
  .news-archive-pager .page-numbers a,
  .news-archive-pager .page-numbers span{ width: 30px; height: 30px; }
}

/* ===== News Single ===== */
.news-single { padding: clamp(2.5rem, 3vw, 4rem) 0; }

.news-single-date {
  display:block; font-size:.9rem; color:var(--color-primary); font-weight:700;
  margin-bottom:.5rem;
}
.news-single-title {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  font-weight: 700; line-height: 1.5; margin: 0 0 1.25rem;
}
.news-single-divider {
  border: 0; height: 1px; background: #e8e8e8; margin: 1.5rem 0 2rem;
}
.news-single-content { line-height: 1.9; }
.news-single-content img { max-width:100%; height:auto; display:block; margin: 1rem 0; }
.news-single-content table { width:100%; overflow:auto; display:block; }

/* ===== Related ===== */
.news-related { margin-top: clamp(2.5rem, 3vw, 4rem); }
.news-related-title { font-size: 0; height: 0; overflow: hidden; } /* 見出しは視覚非表示でOK（デザインに見出し無し） */

.news-related-outer {
  position: relative;
  margin-top: 1rem;
}
.news-related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.news-related-nav { display: none; } /* ← PCでは出さない */

.news-related-item {
  background:#fff; border:1px solid #eee; padding: 0;
}
.news-related-link {
  color: inherit;
  text-decoration: none;
  display:block;
}
.news-related-thumb {
  aspect-ratio: 14 / 8;
  background:#f2f2f2;
  margin:0 0 .75rem;
  overflow:hidden;
}
.news-related-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-related-thumb .noimg {
  display:block;
  width:100%;
  height:100%;
  background:#e9e9e9;
}
.single-news-body{padding: 1rem; }
.news-related-date {
  display:block;
  font-size:1rem;
  color:var(--color-primary);
  font-weight:700;
  margin-bottom:.25rem;
}
.news-related-heading {
  font-size:1rem;
  font-weight:700;
  line-height:1.5;
  margin:0 0 .4rem;
}
.news-related-excerpt {
  color:#555; margin:0;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* SP：横スクロール＋矢印 */
@media (max-width: 768px){
  .news-related-list{
    display: flex;
    overflow: hidden;              /* スクロール領域を隠す */
    gap: 16px;
    scroll-behavior: smooth;
  }
  .news-related-item{ flex: 0 0 100%; } /* 1画面=1枚 */


  .news-related-nav{
    all: unset;
    display: block;
    cursor: pointer;
    position: absolute;
    top:50%; transform:translateY(-50%);
    width:36px; height:36px;
    z-index:10;
    cursor:pointer;

    /* 円形＋影 */
    background-color:#fff;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);

    /* 矢印画像 */
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 18px !important;
  }
  .news-related-nav.prev{
    left: -16px;
    background-image: url('../../assets/images/cn_icon_arrow_left.webp');
   }
  .news-related-nav.next{
    right: -16px;
    background-image: url('../../assets/images/cn_icon_arrow_right.webp');
  }

  /* disabled見た目 */
  .news-related-nav[disabled]{ opacity: .35; pointer-events: none; }
}

/* 戻る */
.news-single-bottom{ margin-top: 2.5rem; text-align: right; }
.news-single-back{ color: var(--color-primary); font-weight:700; text-decoration:none; }
.news-single-back:hover{ text-decoration: underline; }