@charset "utf-8";
/* 3案に共通する骨組み。色と書体は各テーマ（themes/a.css 等）が決める。
   ここに書くのは「どの案でも同じもの」だけにする。案ごとの見た目を
   ここへ書くと、テーマを増やしたときに効かなくなる。 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* 画面を「動かない上下」と「動く真ん中」に分ける。
   スクロールバーは真ん中の箱にだけ出る。 */
html { height: 100%; }
body {
  margin: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
.site-top { flex: none; }
.site-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { list-style: none; padding: 0; }

.inner { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.inner.narrow { max-width: 760px; }

/* ---------- ヘッダー・フッター ---------- */
/* 社名と BLOG の行は画面の上に貼り付けたままにし、その下の本文だけを
   スクロールさせる。PC・スマホとも同じ動きにする。 */
.site-top {
  z-index: 30;
  background: var(--head-bg, var(--bg));
  box-shadow: 0 1px 0 var(--rule), 0 6px 14px rgba(0, 0, 0, .05);
}
.site-head { border-bottom: 1px solid var(--rule); background: var(--head-bg, var(--bg)); }
.site-head .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 16px; padding-bottom: 16px;
}
.site-logo { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: .05em; }
.site-logo a { text-decoration: none; }
/* 見た目を選ぶバッジ。タイトルの右に小さく並べる。 */
.site-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.themepick {
  display: flex; gap: 5px; flex-wrap: wrap;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}
.themepick a {
  font-size: 10.5px; line-height: 1.5; letter-spacing: .02em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px;
}
.themepick a:hover { border-color: var(--muted); color: var(--ink); }
.site-brand .themepick { display: none; }
.themepick-row { display: flex; }
.themepick a.on {
  background: var(--logo-accent); border-color: var(--logo-accent);
  color: #fff; font-weight: 700;
}

.site-main { padding: 34px 0 60px; }

.site-foot { border-top: 1px solid var(--rule); background: var(--surface); }
.site-foot .inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  padding-top: 34px; padding-bottom: 26px;
}
.foot-h {
  font-family: var(--font-num); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.foot-arch ul { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.foot-arch a { color: var(--muted); text-decoration: none; }
.foot-arch a:hover { color: var(--ink); }
.foot-arch span { color: var(--muted); opacity: .6; margin-left: 4px; font-size: 11px; }
/* 更新をRSSで受け取るための入り口。ふだんは控えめ、指を乗せるとRSSの橙色に。 */
.foot-rss { margin-top: 14px; }
.rsslink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  transition: color .15s, border-color .15s;
}
.rsslink:hover, .rsslink:focus-visible { color: #e8760b; border-color: #e8760b; }
/* 投稿者のアイコン。日付の横に丸く小さく出す。 */
.byline-ic {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); flex: none;
}

/* 記事の日付の横に置くときは、日付より控えめに小さく、行の右端へ寄せる */
.a-meta .rsslink, .b-date .rsslink, .c-by .rsslink {
  padding: 3px 10px; font-size: 11.5px; margin-left: auto; vertical-align: middle;
}
.a-meta .rsslink svg, .b-date .rsslink svg, .c-by .rsslink svg { width: 11px; height: 11px; }
/* 万景の日付だけ並びの指定が無いので、ここで揃える（一覧のカードには効かせない） */
.b-arthead .b-date { display: flex; align-items: center; gap: 10px; }
.site-foot address { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.9; }
.site-foot address a { text-decoration: none; }
.copy {
  border-top: 1px solid var(--rule); text-align: center;
  font-size: 11px; color: var(--muted); padding: 12px 0;
}

/* 画面には出さないが、読み上げソフトと検索エンジンには伝える見出し */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 見出し・絞り込み・ページ送り ---------- */
.page-head { margin-bottom: 4px; }
.page-eyebrow {
  font-family: var(--font-num); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.page-title { font-family: var(--font-head); font-size: 28px; font-weight: 600; letter-spacing: .08em; }

.filterbar {
  display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin: 18px 0 4px;
}
.filterbar a { color: var(--muted); text-decoration: none; padding-bottom: 10px; margin-bottom: -11px; }
.filterbar a:hover { color: var(--ink); }
.filterbar .on, .filterbar span.on {
  color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink);
  padding-bottom: 10px; margin-bottom: -11px;
}

/* 絞り込みの行。ブランド・見た目のバッジ・検索を同じ大きさの丸ボタンで並べる。
   案ごとの指定より強くするため、親の並びまで書いて優先させている。 */
.site-top .inner .filterbar {
  gap: 6px; align-items: center; padding: 10px 0; margin: 0;
  font-size: 12px; border-bottom: 0;
}
.site-top .inner .filterbar > a,
.site-top .inner .filterbar > span.on {
  font-size: 12px; line-height: 1.5; font-weight: 400;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  padding: 4px 11px; margin: 0;
}
.site-top .inner .filterbar > .on {
  background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600;
}
/* 見た目のバッジと検索は右側にまとめる */
.themepick-row { margin-left: auto; }
/* 案ごとの絞り込みの指定（案Cは選択中を赤文字にする）に負けて
   赤地に赤文字になっていたので、ここで強く指定し直す。 */
.site-top .inner .themepick a {
  font-size: 10.5px; line-height: 1.5; padding: 2px 9px; margin: 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-weight: 400;
}
.site-top .inner .themepick a.on {
  background: var(--logo-accent); border-color: var(--logo-accent);
  color: #fff; font-weight: 700;
}
.site-top .inner .themepick a:hover { border-color: var(--muted); color: var(--ink); }
.site-top .inner .themepick a.on:hover { color: #fff; border-color: var(--logo-accent); }
.site-top .inner .searchbtn {
  font-size: 12px; line-height: 1.5; padding: 4px 11px; margin: 0;
}
/* 固定エリアの下端の線。ここから下がスクロールする。 */
.site-top .inner .filterbar, .site-top .c-bar { border-bottom: 1px solid var(--rule); }
.theme-b .site-top .inner .filterbar { border-bottom: 4px solid var(--accent); }
.site-top .c-bar { margin: 0; padding: 10px 0; border-bottom-color: var(--ink); }
/* 案Cは絞り込みが c-bar の中にあるので、幅いっぱいに広げて
   バッジと検索を右端まで送れるようにする */
.site-top .c-bar .filterbar { border-bottom: 0; padding: 0; flex: 1; }

/* ---------- 検索 ---------- */
.searchbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
  font-size: 12px; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 13px; margin-bottom: 8px;
}
.searchbtn:hover { border-color: var(--ink); }

.searchnote {
  font-size: 12.5px; color: var(--muted); margin: 14px 0 0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}
.searchnote b { color: var(--ink); }
.searchnote a { margin-left: 10px; }

.searchbox {
  border: 0; border-radius: 10px; padding: 0;
  width: min(28em, calc(100vw - 32px));
  background: var(--bg); color: var(--ink);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}
.searchbox::backdrop { background: rgba(15, 20, 26, .45); }
.searchbox form { padding: 20px 20px 16px; }
.searchbox-h { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
/* 見出しと入力を1行に。言葉だけ幅いっぱい、選ぶものは中身の幅にする。 */
.searchbox-f {
  display: grid; grid-template-columns: 4.5em 1fr; gap: 10px;
  align-items: center; margin-bottom: 12px;
}
.searchbox-f > span { font-size: 12px; color: var(--muted); }
.searchbox-f input, .searchbox-f select {
  padding: 9px 11px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--rule); border-radius: 6px;
  background: #fff; color: var(--ink);
}
/* キーワード欄は上下の余白を10pxにする（高さ 40px） */
.searchbox-f input { width: 100%; padding-top: 10px; padding-bottom: 10px; }
.searchbox-f select { width: auto; justify-self: start; }
.searchbox-act { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.searchbox-btn {
  font-family: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 6px; padding: 8px 14px;
  background: var(--surface); color: var(--muted);
}
.searchbox-btn:hover { border-color: var(--ink); color: var(--ink); }
.searchbox-btn.is-main {
  margin-left: auto; background: var(--logo-accent); border-color: var(--logo-accent);
  color: #fff; font-weight: 700; min-width: 96px;
}

/* ページ送りは画面の下に貼り付ける。PC・スマホとも同じ。
   アーカイブと会社情報は記事と一緒にスクロールさせたままにする。 */
.pager {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0; font-size: 13px;
  background: var(--head-bg, var(--bg));
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.pager a { color: var(--ink); text-decoration: none; border: 1px solid var(--rule); padding: 7px 18px; }
.pager a:hover { border-color: var(--ink); }
.pager-now { color: var(--muted); font-family: var(--font-num); letter-spacing: .1em; }
/* 貼り付けたぶん、スクロールする箱の下に余白を足す */
body.has-pager .site-scroll { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

.empty { color: var(--muted); padding: 40px 0; }
.notfound { padding: 60px 0; }
.notfound h1 { font-family: var(--font-head); font-size: 24px; margin-bottom: 12px; }

/* タグの目印と下書きの印は共通で持つ（案ごとに色だけ変える） */
.tagchips { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.tagchip {
  font-style: normal; font-size: 11px; letter-spacing: .08em; color: #fff;
  background: var(--tagcolor); padding: 3px 10px; border-radius: 2px;
  text-decoration: none; line-height: 1.5;
}
.tagchip:hover { background: var(--ink); }
.a-draft {
  font-style: normal; font-size: 11px; color: #fff; background: #9aa4ad;
  padding: 2px 8px; border-radius: 2px; margin-left: 8px;
}

.crumb { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.crumb a { text-decoration: none; }

.a-embed { margin-top: 14px; }
.a-embed iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

@media (max-width: 700px) {
  .site-foot .inner { grid-template-columns: 1fr; }
  .site-head .inner { align-items: flex-start; }

  /* スマホではタイトルを看板として大きく出し、
     見た目を選ぶバッジをその右下にそろえる。 */
  .site-brand { align-items: flex-end; gap: 10px; flex: 1; }
  .site-brand .themepick { display: flex; padding-bottom: 4px; margin-left: auto; }
  .themepick-row { display: none; }
  .site-head .inner { padding-top: 12px; padding-bottom: 12px; }
  .site-logo { font-size: 24px; line-height: 1.25; font-weight: 700; }

}

/* いいねと共有。アイコンだけを並べる（囲みも文字も置かない）。
   色は各サービスのもの、いいねは「あわ」のロゴに合わせて赤で固定する。 */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 40px 0 8px; padding-top: 20px;
  border-top: 1px solid var(--rule, #e4e6e8);
}
/* ボタンの文字は目には見せないが、読み上げソフトには残す */
.share-b span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.like-b, .share-b {
  --sc: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px; border: 0; border-radius: 6px;
  font-family: inherit; font-size: 13px; line-height: 1;
  color: var(--sc); background: transparent; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: transform .15s;
}
.like-b svg, .share-b svg { flex: none; width: 20px; height: 20px; }
.like-b:hover, .like-b:focus-visible,
.share-b:hover, .share-b:focus-visible { transform: scale(1.15); }

/* いいね。押すと塗りつぶす。件数は数なので消さずに残す。 */
.like-b { --sc: #c8102e; margin-right: auto; }
.like-b.is-on svg path { fill: currentColor; }
.like-n { font-variant-numeric: tabular-nums; min-width: 1ch; font-size: 12.5px; }
.like-b.is-pop svg { animation: like-pop .3s ease-out; }
@keyframes like-pop {
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.share-b.is-x { --sc: #000000; }
.share-b.is-fb { --sc: #1877f2; }
.share-b.is-line { --sc: #06c755; }
.share-b.is-share, .share-b.is-copy { --sc: var(--muted); }
/* コピーできたら、印を緑にして「コピーしました」を吹き出しで出す */
.share-b.is-copy { position: relative; }
.share-b.is-copy.is-done { --sc: #0a8f3c; transform: scale(1.15); }
.share-b.is-copy.is-done::after {
  content: "コピーしました";
  position: absolute; bottom: calc(100% + 6px); right: 0;
  padding: 4px 9px; border-radius: 4px;
  background: #0a8f3c; color: #fff;
  font-size: 11.5px; line-height: 1.5; white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .like-b.is-pop svg { animation: none; }
  .like-b:hover, .share-b:hover { transform: none; }
}

/* 一覧に並べるとき。記事ページより小さく、区切り線も置かない。 */
.share.is-compact {
  margin: 10px 0 0; padding-top: 0; border-top: none; gap: 2px;
}
.share.is-compact .like-b, .share.is-compact .share-b { padding: 5px; }
.share.is-compact .like-b { margin-right: auto; }
.share.is-compact svg { width: 17px; height: 17px; }

@media (max-width: 640px) {
  .share { margin-top: 28px; }
}

/* 2枚目以降の写真の下に置くいいね。写真の左端にそろえる。 */
.like-under { margin: 6px 0 0; text-align: left; }
.like-under .like-b { margin: 0; padding: 4px 0; }

/* 記事の下の行き先（前の記事／一覧へ戻る／次の記事）。
   角丸の囲みボタンにして、左・中央・右に振り分ける。 */
.a-foot, .c-end {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 10px;
}
.a-foot a, .c-end a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--muted); text-decoration: none; background: transparent;
  transition: color .15s, border-color .15s;
}
.a-foot a:hover, .a-foot a:focus-visible,
.c-end a:hover, .c-end a:focus-visible {
  color: var(--accent); border-color: var(--accent);
}
/* PCでは、記事の行き先を画面の下に貼り付ける。長い記事でも下まで送らずに
   前後へ移れる。アーカイブと署名はこれまでどおり記事と一緒にスクロールする。
   ふだんは色の囲み線と色文字、マウスを乗せたら塗りつぶして白抜きにする。 */
@media (min-width: 701px) {
  body .a-foot, body .c-end {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
    justify-content: center; gap: 16px; flex-wrap: nowrap;
    margin: 0; padding: 10px 14px;
    background: var(--head-bg, var(--bg));
    border-top: 1px solid var(--rule);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
  }
  /* 行き先が無いときの空きは、貼り付けた帯では場所を取らせない */
  body .a-foot > span:empty, body .c-end > span:empty { display: none; }
  /* 貼り付けたぶん、スクロールする箱の下に余白を足す */
  body.has-artnav .site-scroll { padding-bottom: 72px; }
  .a-foot a, .c-end a {
    border-color: var(--accent); color: var(--accent); font-weight: 600;
  }
  .a-foot a:hover, .a-foot a:focus-visible,
  .c-end a:hover, .c-end a:focus-visible {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
}

/* スマホは幅が狭いので、3つが1行に収まるよう小さくする。
   それでも収まらないときは折り返して中央にそろえる。 */
@media (max-width: 700px) {
  .a-foot, .c-end { gap: 6px; justify-content: center; }
  /* スマホは指で押す場所なので色を付ける。
     真ん中の「一覧へ戻る」だけ塗りつぶし、左右は枠線だけにする。 */
  .a-foot a, .c-end a {
    padding: 9px 13px; font-size: 12.5px; font-weight: 600; flex: 1 1 auto;
    background: transparent; border-color: var(--accent); color: var(--accent);
  }
  .a-foot a.is-back, .c-end a.is-back {
    background: var(--accent); color: #fff;
  }
  .a-foot span:empty, .c-end span:empty { display: none; }
}

/* 1枚目の写真の下に置くいいねと共有。区切り線は引かず、写真に添える。 */
.share-first .share { margin: 8px 0 0; padding-top: 0; border-top: none; }

/* スマホでは、いいねと共有を写真のすぐ下に置く（写真の説明はその下）。
   指で見ていく画面では、写真を見た流れでそのまま押せる方がよいため。
   PCは今までどおり、写真・説明・ボタンの順。 */
@media (max-width: 700px) {
  .a-fig, .b-fig, .c-fig { display: flex; flex-direction: column; }
  .a-fig > a, .b-fig > a, .c-fig > a { order: 1; }
  .share-first, .like-under { order: 2; }
  .a-fig figcaption, .b-fig figcaption, .c-fig figcaption { order: 3; margin-top: 8px; }
}

/* 本文の飾り。編集画面で Ctrl+B / Ctrl+U を押して付ける。
   マーカーは塗りつぶさず、蛍光ペンで下線を引いたように見せる。 */
.site-main strong { font-weight: 700; }
.site-main mark {
  background: linear-gradient(transparent 62%, #ffe680 62%);
  color: inherit; padding: 0 .08em;
}
.site-main a[rel~="nofollow"] { color: var(--accent); }

/* ---------- アーカイブ（画面の右下のボタンとポップアップ） ----------
   どのページからでも、年と月で過去の記事へ移れるようにする。
   ページ送りや記事の行き先の帯と重なる位置なので、その右端にそろえる。 */
.archbtn {
  position: fixed; right: 14px; bottom: 10px; z-index: 30;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; line-height: 1;
  color: var(--ink); background: var(--head-bg, var(--bg));
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
}
.archbtn:hover, .archbtn:focus-visible { border-color: var(--accent); color: var(--accent); }
/* ボタンで最後の行が隠れないよう、スクロールする箱の下に余白を足す */
.site-scroll { padding-bottom: 56px; }

/* タグのボタンはアーカイブの反対側（左下）に置く */
.tagbtn { left: 14px; right: auto; }

/* タグのポップアップの中身。記事の無いタグは押せないものとして淡くする。 */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.taglist li { list-style: none; }
.taglist a, .taglist .off {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 2px solid var(--accent); border-radius: 999px;
  font-size: 13px; text-decoration: none; color: var(--accent);
  transition: background-color .12s, color .12s;
}
.taglist a span { font-family: var(--font-num); font-size: 12px; opacity: .8; }
.taglist a:hover, .taglist a:focus-visible, .taglist a.on {
  background: var(--accent); color: #fff;
}
.taglist .off { opacity: .25; }

.archbox {
  border: 0; border-radius: 6px; padding: 0; max-width: 560px; width: calc(100% - 32px);
  max-height: 80vh; background: var(--bg); color: var(--ink);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .3);
}
.archbox::backdrop { background: rgba(0, 0, 0, .45); }
.archbox-h {
  font-size: 14px; font-weight: 700; padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.archbox-body { padding: 14px 18px; max-height: 56vh; overflow-y: auto; }
.archyear + .archyear { margin-top: 16px; }
.archyear h3 {
  font-family: var(--font-num); font-size: 13px; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
}
.archmonths { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.archmonths li { list-style: none; }
.archmonths a, .archmonths .off {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 0; border: 2px solid var(--accent); border-radius: 4px;
  font-family: var(--font-num); font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--accent);
  transition: background-color .12s, color .12s;
}
/* 指やマウスを乗せた月と、いま見ている月は塗りつぶす */
.archmonths a:hover, .archmonths a:focus-visible,
.archmonths a.on { background: var(--accent); color: #fff; }
/* 記事の無い月は淡くして押せないことを示す */
.archmonths .off { opacity: .2; }
/* いま見ている月は、そのデザインの色で塗って現在地を示す */
.archmonths a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 今月はいつでも赤。見ている月と重なったときも赤を優先する。
   記事がまだ無い月でも、それと分かる濃さにする。 */
.archmonths a.now { background: #c8102e; border-color: #c8102e; color: #fff; }
.archmonths .off.now { opacity: 1; border-color: #c8102e; color: #c8102e; }
.archbox-act {
  display: flex; justify-content: flex-end; padding: 12px 18px;
  border-top: 1px solid var(--rule);
}