/* ===== NEWS Archive (Yamaguchi-like) ===== */
.news-hero{
  position: relative;
  min-height: 240px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.news-hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    url("/wp-content/themes/DAISY01/assets/images/news-hero.jpg") center/cover no-repeat;
  transform: scale(1.02);
}
.news-hero__inner{
  position:relative;
  width:min(1120px, 92vw);
  margin:0 auto;
  padding: 44px 0;
  color:#fff;
}
.news-hero__title{
  margin:0;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height:1.1;
}
.news-hero__title span{
  margin-left: 10px;
  font-size: 16px;
  font-weight: 700;
  opacity:.9;
}

.news-archive{
  padding: 60px 0 90px;
}
.news-archive .container{
  width:min(1120px, 92vw);
  margin:0 auto;
}
.news-archive__inner{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items:start;
}

.news-side__box{
  border:1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow:hidden;
  background:#fff;
  margin-bottom: 18px;
}
.news-side__head{
  background:#0b2a7a;
  color:#fff;
  font-weight:800;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing:.08em;
  text-transform:none;
}
.news-side__list{
  list-style:none;
  margin:0;
  padding: 10px 12px;
  font-size: 12px;
}
.news-side__list a{
  display:block;
  padding: 10px 10px;
  border-radius: 8px;
  color: rgba(0,0,0,.82);
  text-decoration:none;
  font-weight:700;
}
.news-side__list a:hover{ background: rgba(11,42,122,.06); }
.news-side__list a.is-active{
  background: rgba(11,42,122,.10);
  color:#0b2a7a;
}

/* ===== list ===== */
.news-a-list{ list-style:none; margin:0; padding:0; }
.news-a-item{ border-bottom:1px solid rgba(0,0,0,.12); }

.news-a-link{
  display:grid;
  grid-template-columns: 140px 120px 1fr auto;
  gap: 18px;
  align-items:center;
  padding: 18px 10px;
  text-decoration:none;
  color: inherit;
}

.news-a-date{
  color: rgba(0,0,0,.55);
  font-weight:700;
  letter-spacing:.02em;
}

/* タグ：PCは現状維持 */
.news-a-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border:2px solid #d40000;
  border-radius: 999px;
  color:#d40000;
  font-weight:800;
  font-size: 10px;        /* ← ここだけに統一 */
  line-height:1;
  white-space:nowrap;
}

.news-a-title{
  font-weight:800;
  color: rgba(0,0,0,.88);
}

.news-a-new{
  margin-left: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,230,0,.9);
  font-weight:900;
  font-size: 12px;
}

.news-a-arrow{
  font-size: 24px;
  color: rgba(0,0,0,.35);
  margin-left: 8px;
}
.news-a-link:hover .news-a-arrow{ color: rgba(11,42,122,.9); }

.news-pager{
  margin-top: 22px;
}
.news-pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  margin: 0 4px 6px 0;
  border:1px solid rgba(0,0,0,.16);
  border-radius: 10px;
  text-decoration:none;
  color: rgba(0,0,0,.8);
  font-weight:800;
}
.news-pager .page-numbers.current{
  background:#0b2a7a;
  color:#fff;
  border-color:#0b2a7a;
}

/* =========================
   Tablet / Mobile
========================= */
@media (max-width: 900px){
  .news-archive__inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* 1列にして “日付+タグ” を同じ行に */
  .news-a-link{
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title";
    gap: 8px;
    padding: 14px 6px;
  }

  /* Grid要素をエリア指定 */
  .news-a-date{
    grid-area: meta;
    display:inline-block;
  }
  .news-a-tag{
    grid-area: meta;
  }
  .news-a-title{
    grid-area: title;
  }

  /* meta行をflex化（HTML触らずに同じ行へ） */
  .news-a-date{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  /* date要素の中にtagを“同居”させるためのトリック：
     date行をflexにし、tagを同じ行で表示 */
  .news-a-tag{
    width: fit-content;     /* ← 伸びない（最重要） */
    justify-self: start;
    align-self: center;
    padding: 5px 9px;       /* 少しコンパクト */
    font-size:8px;        /* スマホ時だけ小さく */
    border-width: 1px;      /* 太さも軽く */
    margin-left: 0;
  }

  /* dateのflexの中で tag を右に並べる */
  .news-a-date + .news-a-tag{
    margin-top: -2px; /* 行間の見え方調整（不要なら消してOK） */
  }

  /* 矢印は非表示 */
  .news-a-arrow{ display:none; }
}

/* さらに狭いスマホは微調整 */
@media (max-width: 520px){
  .news-a-link{ gap: 6px; padding: 12px 4px; }
  .news-a-tag{ font-size: 10.5px; padding: 5px 8px; }
}


/* =========================
   FIX: mobile meta overlap + NEW compact
========================= */
@media (max-width: 900px){

  /* 1) 日付とカテゴリタグを2カラムにして重なり解消 */
  .news-a-link{
    display:grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date tag"
      "title title";
    gap: 8px 10px;
    align-items: center;
  }

  .news-a-date{
    grid-area: date;
    display:block;          /* flex/変な指定を殺す */
    line-height: 1.2;
  }

  .news-a-tag{
    grid-area: tag;
    position: static;       /* 念のため */
    width: fit-content;     /* 伸びない */
    justify-self: start;    /* 左寄せ */
    align-self: center;
    margin: 0;              /* 変なズレ防止 */
    padding: 4px 8px;       /* コンパクト */
    font-size: 11px;
    border-width: 1px;
  }

  .news-a-title{
    grid-area: title;
  }

  /* 2) NEWをもっとコンパクト（横長バー化を防止） */
  .news-a-new{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;     /* 横に伸びない */
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    margin-left: 6px;
  }
  .news-side__list{
  font-size: 10px;
}
}

/* さらに狭い時はもっと詰める */
@media (max-width: 520px){
  .news-a-link{ gap: 6px 8px; }
  .news-a-tag{ font-size: 10px; padding: 3px 7px; }
  .news-a-new{ font-size: 10px; padding: 3px 6px; }
}