/* ==========================================================
   components.css … どのページでも使う共通の部品
   （見出し・タブ・記事カード・ラベル・ボタン・ページ送り など）
   ========================================================== */

/* ---------- ページの見出し（英字ラベル＋日本語） ---------- */
.an-pagehead { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 4px; }
.an-pagehead__title { font-size: 28px; }
.an-pagehead__desc { font-size: 13px; line-height: 1.85; color: var(--ink-2); max-width: 760px; }
@media (min-width: 1024px) {
  .an-pagehead { gap: 10px; padding-top: 28px; }
  .an-pagehead__title { font-size: 38px; }
  .an-pagehead__desc { font-size: 15px; line-height: 1.9; }
}

/* セクション見出し */
.an-sechead { margin-bottom: 16px; }
.an-sechead__title { font-size: 18px; margin-top: 2px; }
@media (min-width: 1024px) { .an-sechead { margin-bottom: 24px; } .an-sechead__title { font-size: 24px; } }
.an-sechead--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

/* ---------- タブ（文字＋下線） ---------- */
.an-tabs { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs a {
  display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; padding: 0 2px;
  font-size: 14px; font-weight: 700; color: #8A857F; border-bottom: 3px solid transparent;
}
.an-tabs a.is-active { color: var(--ink); border-bottom-color: var(--ac); }
@media (min-width: 1024px) { .an-tabs { gap: 28px; } .an-tabs a { font-size: 15px; min-height: 48px; } }

/* 文字リンクの絞り込み（エリア：すべて 赤坂宿周辺 …） */
.an-textfilter { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; padding: 14px 0 0; }
.an-textfilter b { font-weight: 900; }
.an-textfilter a.is-active { color: var(--ac); font-weight: 700; text-decoration: underline; }
@media (min-width: 1024px) { .an-textfilter { font-size: 13px; } }

/* 件数と並び順 */
.an-countbar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 14px 0 0; }
.an-countbar b { font-size: 15px; }
.an-countbar a.is-active { color: var(--ac); font-weight: 700; }
.an-countbar a:not(.is-active) { color: var(--mute); }

/* ---------- 画像の入れ物 ---------- */
.an-thumb { position: relative; overflow: hidden; border-radius: 10px; background: var(--ph); aspect-ratio: 4 / 3; }
.an-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-thumb--wide { aspect-ratio: 16 / 9; }
.an-thumb--full { border-radius: 0; }

/* 写真の上のカテゴリラベル */
.an-badge {
  position: absolute; top: 8px; left: 8px; background: var(--ac); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px;
}
@media (min-width: 1024px) { .an-badge { font-size: 11px; top: 10px; left: 10px; } }

/* 「赤坂宿周辺 ／ カフェ」などの色文字 */
.an-pin { font-size: 10px; font-weight: 700; color: var(--ac); }
@media (min-width: 1024px) { .an-pin { font-size: 12px; } }

/* 小さな枠つきラベル（わんこOK・駐車場あり など） */
.an-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.an-flags span { font-size: 10px; font-weight: 700; color: var(--ac); border: 1px solid var(--soft); border-radius: 3px; padding: 1px 6px; }
.an-flags span.is-no { color: #9A9590; border-color: var(--line-2); }
@media (min-width: 1024px) { .an-flags span { font-size: 11px; } }

/* 日付・注釈 */
.an-meta { font-size: 11px; color: var(--mute); }

/* ---------- 記事カード ---------- */
.an-card { display: flex; flex-direction: column; gap: 8px; }
.an-card__title { font-size: 14px; font-weight: 700; line-height: 1.55; }
@media (min-width: 1024px) { .an-card__title { font-size: 16px; } }

.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
@media (min-width: 1024px) {
  .an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
  .an-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* 横並び（スマホの一覧で使う） */
.an-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.an-row .an-thumb { width: 120px; flex-shrink: 0; aspect-ratio: 4 / 3; }
.an-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* 一覧の1件目（大きく） */
.an-feature { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 18px; border-bottom: 1px solid var(--line); }
.an-feature__title { font-size: 17px; font-weight: 900; line-height: 1.5; }
.an-feature__excerpt { display: none; }
@media (min-width: 1024px) {
  .an-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 0 0 28px; }
  .an-feature__title { font-size: 23px; }
  .an-feature__excerpt { display: block; font-size: 14px; color: #555; line-height: 1.8; }
  .an-feature__body { display: flex; flex-direction: column; gap: 10px; }
}

/* スマホは横並びリスト、PCはカードの格子 にする切り替え */
.an-list .an-card { display: none; }
@media (min-width: 1024px) {
  .an-list .an-row { display: none; }
  .an-list .an-card { display: flex; }
  .an-list__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
}

/* ---------- ボタン ---------- */
.an-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  min-height: 50px; padding: 0 32px; border-radius: 8px;
  background: var(--ac); color: #fff; font-size: 14px; font-weight: 700; border: 0; cursor: pointer; font-family: inherit;
}
.an-btn--outline { background: #fff; color: var(--ac); border: 1.5px solid var(--ac); }
.an-btn--block { display: flex; width: 100%; }
.an-more { display: flex; justify-content: center; margin-top: 28px; }

/* 文字の「→」リンク */
.an-arrow { font-size: 12px; font-weight: 700; color: var(--ac); }
@media (min-width: 1024px) { .an-arrow { font-size: 14px; } }

/* 線で区切ったリンクの一覧（ほかのカテゴリ など） */
.an-lnk { list-style: none; margin: 0; padding: 0; }
.an-lnk a, .an-lnk span {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 50px; border-bottom: 1px solid #E5E1DC; font-size: 14px; font-weight: 700;
}
.an-lnk a::after { content: "→"; color: var(--ac); }
.an-lnk .is-soon { color: #9A9590; font-weight: 500; }
@media (min-width: 1024px) { .an-lnk a, .an-lnk span { font-size: 15px; min-height: 52px; } }

.an-2links { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) { .an-2links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }

/* タグ（# 赤坂宿 など） */
.an-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.an-tags a { font-size: 11px; font-weight: 700; color: var(--ac); border: 1.5px solid var(--ac); border-radius: 4px; padding: 4px 10px; }

/* ---------- ページ送り（WordPress標準の出力に合わせています） ---------- */
.an-pager { padding: 24px 0 8px; }
.an-pager .nav-links { display: flex; justify-content: center; align-items: center; gap: 6px; }
.an-pager .page-numbers {
  min-width: 38px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 700; font-size: 15px; color: #555; border-bottom: 3px solid transparent;
}
.an-pager .page-numbers.current { color: var(--ink); border-bottom-color: var(--ac); }
.an-pager .next, .an-pager .prev { font-family: var(--font); font-size: 13px; color: var(--ac); padding: 0 6px; }

/* ---------- ゆかのひとこと（カテゴリ・エリアの冒頭） ---------- */
.an-voice { display: flex; gap: 12px; align-items: flex-start; }
.an-voice__icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--ac); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.an-voice__icon img { width: 100%; height: 100%; object-fit: cover; }
.an-voice__text { flex: 1; background: var(--tint); border-radius: 16px; padding: 12px 14px; font-size: 13px; font-weight: 700; line-height: 1.8; }
@media (min-width: 1024px) {
  .an-voice__icon { width: 60px; height: 60px; }
  .an-voice__text { padding: 14px 18px; font-size: 14px; }
}

/* 注意書き */
.an-note { padding: 12px 14px; background: var(--paper); border-radius: 8px; font-size: 11px; line-height: 1.8; color: #555; }
@media (min-width: 1024px) { .an-note { font-size: 12px; } }

/* 点線の囲み（時刻メモ・募集など） */
.an-dashed { border: 2px dashed var(--soft); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.an-dashed__title { font-size: 13px; font-weight: 900; color: var(--ac); }

/* サイドバーの箱 */
.an-sidebox { border: 1px solid #ECE8E4; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.an-sidebox__title { font-size: 16px; font-weight: 900; }
.an-mini { display: flex; gap: 12px; align-items: center; }
.an-mini .an-thumb { width: 72px; flex-shrink: 0; border-radius: 8px; }
.an-mini span { font-size: 13px; font-weight: 700; line-height: 1.5; }

/* 画像がないとき */
.an-noimage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--mute); font-size: 11px; }