@charset "utf-8";

/* ==========================================================
   akiya-fuchu/news.html  ／ ページ別CSS（v5でインライン<style>から抽出）
   mac_wordpress_common_rules.md §6-4 ＝ common → page別の順で読み込む
   ----------------------------------------------------------
   ※ v5 で抽出された生のスタイル。
   ※ 変数名（--ink → --text-main, --o → --brand-main 等）は
      common.css の :root エイリアス層で吸収。順次標準名に置換予定。
========================================================== */

/* ========================================================== */
/*  Category tab  */
/* ========================================================== */
.cat-tab {
  background: var(--bg-soft);
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft)
}
.cat-tab-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px
}
.cat-tab a {
  padding: 8px 18px;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  text-decoration: none;
  font-weight: 500;
  transition: .15s
}
.cat-tab a:hover,
.cat-tab a.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  text-decoration: none
}
.cat-tab .count {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-left: 4px
}
.cat-tab a:hover .count,
.cat-tab a.active .count {
  color: rgba(255, 255, 255, .85)
}

/* ========================================================== */
/*  Article grid  */
/* ========================================================== */
.agrid {
  padding: 60px 0 30px;
  background: #fff
}
.agrid-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px
}
@media(max-width:780px) {
  .agrid-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px
  }
}
@media(max-width:480px) {
  .agrid-inner {
    grid-template-columns: 1fr
  }
}
.acard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: .15s
}
.acard:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--ink)
}
.acard .ph-fig {
  aspect-ratio: 16/10;
  background: #D9DEDA url(assets/images/common/dummy.png) center/cover;
  position: relative
}
.acard .ph-fig .cat {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  letter-spacing: .04em
}
.acard .ph-fig .cat.c-akiya {
  background: var(--green)
}
.acard .ph-fig .cat.c-seminar {
  background: var(--orange)
}
.acard .ph-fig .cat.c-media {
  background: var(--red)
}
.acard .ph-fig .cat.c-gyosei {
  background: var(--blue)
}
.acard .ph-fig .cat.c-other {
  background: var(--purple)
}
.acard .body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}
.acard .date {
  font-size: 13.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 6px
}
.acard h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
  text-align: justify;
  margin: 0 0 10px
}
.acard p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
  flex: 1
}
.acard .more {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: right;
}

/* ========================================================== */
/*  Pagination  */
/* ========================================================== */
.pager {
  padding: 24px 0 60px;
  text-align: center
}
.pager-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.pager a,
.pager span {
  padding: 8px 14px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-weight: 500
}
.pager a:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  text-decoration: none
}
.pager .cur {
  background: var(--green);
  color: #fff;
  border-color: var(--green)
}
.pager .nav {
  padding: 8px 16px
}
.pager .disabled {
  color: var(--ink-3);
  background: var(--bg-soft);
  cursor: not-allowed
}


/* ==========================================================
   WordPress化 追加スタイル（2026-08-10）
   ----------------------------------------------------------
   カテゴリバッジ（.ph-fig 内オーバーレイ）を廃止し、
   .acard h3 直下に「設定した全タグ」をシンプルなハッシュタグ風で表示。
   ※ カード全体が <a> のためバッジはリンクなしの span。
========================================================== */
.acard .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px
}
.acard .tags .cat {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: .04em;
  line-height: 1.6
}
.acard .tags .cat::before {
  content: "#";
  margin-right: 1px;
  color: var(--green)
}
.acard:hover .tags .cat {
  color: var(--ink-2)
}