/* =========================================================
  Archive Column (unBIAS)
========================================================= */

.column-archive{
  background:#F6F9FB;
  padding: 0 0 80px;
}

/* 全体コンテンツ幅：1160px */
.column-archive__inner{
  max-width:1160px;
  margin:0 auto;
  padding: 0 20px;
}

/* visually hidden */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================================================
  Breadcrumb
  - 外側（全幅）に上下ボーダー
  - 内側（nav）は1160px
========================================================= */

/* 外側：全幅のバー */
.column-breadcrumbbar{
  width:100%;
  border-top:1px solid #E6EDF2;
  border-bottom:1px solid #E6EDF2;
  background:transparent;
}

/* 内側：1160pxのナビ */
.column-breadcrumb{
  max-width:1160px;
  margin:0 auto;                 /* ここで中央寄せ */
  padding:14px 20px;             /* 内側の余白 */
  display:flex;
  align-items:center;
  gap:10px;

  font-size:12px;
  color:#8A8A8A;

  /* ここは不要なので必ず0 */
  border:none;
}

/* HOMEリンク（家アイコン） */
.column-breadcrumb__link{
  color:#8A8A8A;
  text-decoration:none;
}
.column-breadcrumb__link:hover{
  opacity:.85;
}

.column-breadcrumb__home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:0 0 auto;
}

.column-breadcrumb__homeicon{
  width:18px;
  height:18px;
  display:block;
  fill:#8A8A8A;
}

.column-breadcrumb__sep{
  color:#B9B9B9;
}

.column-breadcrumb__current{
  color:#8A8A8A;
}

/* ===== Head（余白を増やす） ===== */
.column-head{
  text-align:center;
  padding: 26px 0 40px;
}

.column-head__title{
  margin:0;
  font-size:30px;
  font-weight:700;
  letter-spacing:0.06em;
  color:#222;
}

.column-head__cats{
  margin-top: 22px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.column-cat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #D6DEE5;
  background:#fff;
  color:#777;
  text-decoration:none;
  font-size:12px;
  line-height:1;
  transition: opacity .15s ease, transform .15s ease;
}
.column-cat:hover{
  opacity:.9;
  transform: translateY(-1px);
}
.column-cat.is-active{
  background:#0093E9;
  border-color:#0093E9;
  color:#fff;
}

/* ===== Layout ===== */
.column-layout{
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin-top: 6px;
}

.column-main{
  flex:1;
  min-width:0;
}

.column-sidebar{
  width:320px;
}

/* ===== Grid ===== */
.column-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
}

/* ===== Card ===== */
.col-card{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.col-card__link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.col-card__thumb{
  position:relative;
  aspect-ratio: 4 / 3;
  background:#E9EEF2;
  overflow:hidden;
}
.col-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.col-card__noimg{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9aa6af;
  font-size:12px;
}
.col-card__term{
  position:absolute;
  top:10px;
  left:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  padding:0 8px;
  border-radius:4px;
  background: var(--term-color, #51AAB7);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.col-card__body{
  padding: 12px 14px 14px;
}
.col-card__date{
  display:block;
  font-size:12px;
  color:#888;
  margin-bottom: 6px;
}
.col-card__title{
  margin:0;
  font-size:13px;
  color:#222;
  line-height:1.55;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Pagination ===== */
.column-pagination{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}
.column-pagination__list{
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}
.column-pagination__item .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#CFCFCF;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  line-height:1;
}
.column-pagination__item .page-numbers:hover{
  opacity:.85;
}
.column-pagination__item .page-numbers.current{
  background:#0093E9;
}

/* ===== Sidebar: Banner（ウィジェット想定） ===== */
.sb-banner{
  width:100%;
}
.sb-banner__placeholder{
  width:100%;
  aspect-ratio: 300 / 250;
  border-radius:8px;
  background:#E9EEF2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9aa6af;
  font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
/* ウィジェット由来の画像も同じ見た目にする */
.sb-banner a{ display:block; text-decoration:none; }
.sb-banner img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* ===== Sidebar: Boxes ===== */
.sb-box{
  margin-top: 16px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  background:#fff;
}
.sb-box__title{
  margin:0;
  padding: 10px 14px;
  background:#0093E9;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
}
.sb-box__body{
  padding: 12px 12px;
}

/* Category list */
.sb-catlist{
  list-style:none;
  margin:0;
  padding:0;
}
.sb-catlist__item{
  border-bottom:1px solid #EEF2F4;
}
.sb-catlist__item:last-child{
  border-bottom:none;
}
.sb-catlist__item a{
  display:block;
  padding: 10px 6px;
  color:#222;
  text-decoration:none;
  font-size:13px;
}
.sb-catlist__item a:hover{
  opacity:.85;
}

/* Sidebar posts list */
.sb-posts{
  list-style:none;
  margin:0;
  padding:0;
}
.sb-posts__item{
  border-bottom:1px solid #EEF2F4;
}
.sb-posts__item:last-child{
  border-bottom:none;
}
.sb-posts__link{
  display:flex;
  gap:10px;
  padding: 10px 0;
  text-decoration:none;
  color:inherit;
}
.sb-posts__thumb{
  width:72px;
  aspect-ratio: 1 / 1;
  border-radius:6px;
  overflow:hidden;
  background:#E9EEF2;
  flex:0 0 auto;
}
.sb-posts__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sb-posts__noimg{
  width:100%;
  height:100%;
}
.sb-posts__meta{
  min-width:0;
  flex:1;
}
.sb-posts__date{
  display:block;
  font-size:11px;
  color:#888;
  margin-bottom: 4px;
}
.sb-posts__title{
  margin:0;
  font-size:12px;
  color:#222;
  line-height:1.5;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sb-posts__term{
  margin-top: 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--term-color, #888);
  color: var(--term-color, #888);
  font-size:10px;
  font-weight:700;
  background:#fff;
}

.sb-empty,
.column-empty{
  margin: 10px 0 0;
  color:#777;
  font-size:13px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .column-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .column-sidebar{
    width:300px;
  }
}

@media (max-width: 900px){
  .column-layout{
    flex-direction:column;
  }
  .column-sidebar{
    width:100%;
  }
}

@media (max-width: 560px){
  .column-archive__inner{
    padding: 0 14px;
  }

  .column-head{
    padding: 22px 0 32px;
  }
  .column-head__cats{
    margin-top: 18px;
  }
  .column-layout{
    margin-top: 8px;
  }

  .column-grid{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .col-card__body{
    padding: 12px 12px 14px;
  }

  /* SP時：パンくずの左右余白を詰める */
  .column-breadcrumb{
    padding-left:14px;
    padding-right:14px;
  }

  .column-head__title{
  font-size:20px;
}
}