/* ===== カラーパレット ===== */
:root {
  --green-dark:  #16233f;
  --green-mid:   #1a6fa8;
  --green-light: #d8f3dc;
  --blue-light:  #dde9f2; /* --green-midの薄いtint(白85%+#1a6fa8を15%)。タグクラウード用(2026-08-08) */
  --bg:          #f4f7f5;
  --text:        #333;
}

/* ===== 全体フォント ===== */
html, body, * {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}

/* ===== 見出し系のみ明朝体(2026-08-19、タイポグラフィ刷新) =====
   本文・見出しが全てHiragino Sansで統一されており「量産型テンプレート」の
   印象を与えるという指摘(taste-skill診断)を受け、見出し要素にのみ
   Shippori Mincho(Google Fonts、hugo.tomlのgoogleFontsLinkで読み込み)を充てる。
   本文(.post__content本体)・ナビ・ボタン・タグ・メタ情報は従来通りゴシックのまま維持。
   クラスセレクタ(specificity 0,1,0,0)は上のuniversal selector `*`(specificity 0)より
   常に勝つため、!important同士でも問題なく上書きできる。
   フォントサイズ・行間・余白は一切変更しない(書体とウェイトのみ変更) */
.logo__title,
.post__title,
.list__title,
.post__content h2,
.widget__title {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif !important;
}

/* ===== 全体背景・本文フォントサイズ ===== */
/* テーマ本体(themes/mainroad/assets/css/style.css)のbodyは14px固定。
   可読性向上のためサイト側で16pxに上書きする */
body {
  background-color: var(--bg) !important;
  font-size: 16px !important;
}

/* ===== ヘッダー ===== */
.header {
  background: #fff !important;
  border-bottom: 1px solid var(--green-light) !important;
  box-shadow: 0 2px 10px rgba(45,106,79,.07) !important;
  padding: 20px 0 0 !important;
}

/* ロゴ全体の余白 */
.logo {
  padding: 8px 0 16px !important;
}

/* サイトタイトル
   2026-08-08: WCAG対応でトップ/一覧/カテゴリページではdiv→h1に変更(記事ページはdivのまま、
   layouts/partials/logo.html参照)。テーマ本体のh1汎用ルール(margin:0 0 20px)が
   効いて見た目がズレないよう、margin:0を明示して従来のdiv時と同じ見た目を維持する */
.logo__title {
  /* 2026-08-19: Shippori Minchoに900は無いため700に調整(合成太字による
     滲みを避けるため)。フォントサイズ・余白・行間は変更しない */
  font-weight: 700 !important;
  color: #16233f !important;
  font-size: 1.9rem !important;
  letter-spacing: .03em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* ① サブタイトルの大文字を解除・スタイル改善 */
.logo__tagline {
  text-transform: none !important;
  color: #7aab92 !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  border-top: 1px solid var(--green-light) !important;
  margin-top: 6px !important;
  padding-top: 5px !important;
}

/* ===== ナビゲーション ===== */
.menu, .menu__list, .menu__item, .menu__link, .menu__text, .menu__btn, .menu__btn-title {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}

.menu__list {
  background: var(--green-dark) !important;
}

.menu__btn {
  background: var(--green-dark) !important;
  color: #fff !important;
}

.menu__link {
  color: rgba(255,255,255,.92) !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  padding: 12px 18px !important;
}

/* ===== カテゴリバッジ ===== */
.post-cat-badges {
  margin-bottom: 8px !important;
}

.post-cat-badge {
  display: inline-block !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: #888 !important;
  margin-right: 4px !important;
}

/* 資産形成：オレンジ(2026-08-08、WCAG AA未達のためコントラスト調整。
   色相38.4°・彩度100%は維持し明度のみ下げた。白文字とのコントラスト比 約5.12:1、実測値) */
.post-cat-badge--asset {
  background: #996200 !important;
  color: #fff !important;
}

/* 介護：緑 */
.post-cat-badge--care {
  background: #2e7d32 !important;
  color: #fff !important;
}

/* 釣り：青 */
.post-cat-badge--fishing {
  background: #1565c0 !important;
  color: #fff !important;
}

/* AI活用：紫 */
.post-cat-badge--ai {
  background: #5e35b1 !important;
  color: #fff !important;
}

/* 雑感：グレー */
.post-cat-badge--zakkan {
  background: #546e7a !important;
  color: #fff !important;
}

/* ===== 記事一覧のアイキャッチ ===== */
/* 実写真が無い記事は、カテゴリ色のグラデーションバナー(scripts/og_banners/で生成した
   PNG。og:image/twitter:imageとしても使われる実画像)、またはCSSのみのプレースホルダーで表示する */
/* カード内での占有面積を減らすため、元画像(1200x630、og:image/twitter:image用の
   実ファイルはそのまま)よりも横長の比率でクロップ表示する
   (2026-08-08、間延びして見えるというフィードバックを受けて変更)
   さらに2/3程度に再縮小(2026-08-08)。380→253相当だが、きりのいい数字として250に丸めた。
   PNG内のテキスト(タイトル+タグライン)は実測でy=263〜406px(1200x630中)にあり、
   center基準coverクロップで高さ250(=クロップ範囲y=190〜440)にしても
   上下34px以上の余白が残るため、テキストの見切れは発生しない(6枚全て確認済み) */
.list__thumbnail {
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: -28px -32px 20px !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 1200 / 250 !important;
}

.list__thumbnail .thumbnail__link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.list__thumbnail img.thumbnail__image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===== 記事詳細ページのアイキャッチ ===== */
/* 記事詳細ページ単体(post_thumbnail.htmlで class="post"指定時)は figure.post__thumbnail
   というlist__thumbnailとは別クラスで、テーマ本体(style.css)には`.post__thumbnail img{width:100%}`
   しか無く高さ制約が無いため、元画像(1200x630)そのままの比率(実測522x274px≒1.9:1)で
   表示され「本文の半分くらいを占めて大きすぎる」というフィードバックを受けた(2026-08-08)。
   list__thumbnailと同じaspect-ratio(1200/250)・object-fit:coverでクロップし、高さを揃える。
   aspect-ratioは表示幅に依存せず元画像に対する相対クロップ範囲なので、list__thumbnailで
   確認済みのテキスト見切れ判定(y=190〜440、余白34px以上)がそのまま適用できる */
.post__thumbnail {
  overflow: hidden !important;
  border-radius: 10px !important;
  aspect-ratio: 1200 / 250 !important;
}

.post__thumbnail img.thumbnail__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 画像未設定時のCSSグラデーションのプレースホルダー(将来imagesを設定すれば自動的に実画像へ切り替わる) */
.thumbnail--placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.thumbnail--placeholder .thumbnail__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

.thumbnail__placeholder-label {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: .06em !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}

/* imagesフロントマター未設定時のみ使われるプレースホルダー(通常は使われない。
   全記事にimagesを設定しているため)。2026-08-12、scripts/og_banners/generate_og_banners.py
   のカテゴリ別配色(post-cat-badge--*のバッジ色を終端とする)と揃えて、実画像が
   無い場合でも見た目がズレないようにする */
.thumbnail--asset {
  background: linear-gradient(135deg, #634000, #c98a2e) !important;
}
.thumbnail--care {
  background: linear-gradient(135deg, #102c12, #2e7d32) !important;
}
.thumbnail--fishing {
  background: linear-gradient(135deg, #072343, #1565c0) !important;
}
.thumbnail--ai {
  background: linear-gradient(135deg, #241143, #5e35b1) !important;
}
.thumbnail--zakkan {
  background: linear-gradient(135deg, #1d262b, #546e7a) !important;
}
.thumbnail--default {
  background: linear-gradient(135deg, #16233f, #1a6fa8) !important;
}

/* ===== メインコンテンツ ===== */
.wrapper {
  background: transparent !important;
}

/* 記事カード */
.post {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(45,106,79,.07) !important;
  margin-bottom: 20px !important;
  padding: 28px 32px !important;
  border: none !important;
}

/* 記事タイトル(2026-08-19: 明朝体は細いと読みにくいため700を明示。サイズ・行間は変更なし) */
.post__title {
  font-size: 1.15rem !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

.post__title a {
  color: #16233f !important;
}

.post__title a:hover {
  color: var(--green-mid) !important;
  text-decoration: none !important;
}

/* メタ情報 */
.post__meta {
  color: #999 !important;
  font-size: .8rem !important;
  margin: 6px 0 12px !important;
}

.post__meta a {
  color: var(--green-dark) !important;
}

/* 記事本文(約16.8px。テーマ標準の.93rem[約14.9px]から拡大) */
.post__content {
  color: #444 !important;
  line-height: 1.85 !important;
  font-size: 1.05rem !important;
}

/* 続きを読むボタン */
.btn {
  background: var(--green-dark) !important;
  border-radius: 5px !important;
}

.btn:hover {
  background: var(--green-mid) !important;
}

.post__footer .btn {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: .85rem !important;
  padding: 8px 20px !important;
  transition: background .2s !important;
}

.post__footer .btn:hover {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
}

/* ===== サイドバー ===== */
.widget {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(45,106,79,.07) !important;
  margin-bottom: 20px !important;
  padding: 18px 20px !important;
}

.widget__title {
  color: var(--green-dark) !important;
  border-bottom: 2px solid var(--green-light) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}

/* ② 空のコメントウィジェット非表示 */
.widget--recent-comments {
  display: none !important;
}

/* 検索ボタン */
.search-form__submit {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* カテゴリ・リンク */
.widget__list a,
.widget a {
  color: var(--green-dark) !important;
  font-size: .88rem !important;
}

.widget__list a:hover,
.widget a:hover {
  color: var(--green-mid) !important;
}

/* タグバッジ
   自由記述で数十種類に増えうるタグは、カテゴリバッジ(意図的に多色)とは異なり
   統一感を優先。テーマ初期値由来の薄緑(--green-light)が紺基調から浮いていたため、
   --green-mid(#1a6fa8)の薄いtintである--blue-lightに変更し、紺/青トーンに統一する
   (2026-08-08) */
.widget-taglist__link {
  background: var(--blue-light) !important;
  color: var(--green-dark) !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  margin: 3px !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.widget-taglist__link:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}

/* ===== 記事個別ページ ===== */
.post__content a {
  color: var(--green-dark) !important;
}

.post__content a:hover {
  color: var(--green-mid) !important;
}

.post__content table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.post__content table th,
.post__content table td {
  border: 1px solid #ababab !important;
  padding: 8px 12px !important;
  background: transparent !important;
  color: inherit !important;
}

.post__content table th {
  background: #ececec !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.post__content table tr:nth-child(even) {
  background: transparent !important;
}

/* ===== ③ フッター強化 ===== */
.footer {
  background: #16233f !important;
  color: rgba(255,255,255,.7) !important;
  border-top: none !important;
  padding: 36px 0 20px !important;
  margin-top: 40px !important;
}

.footer__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* フッターリンク文字色
   紺背景(--green-dark)に--green-mid(#1a6fa8)を乗せるとコントラスト比約2.88:1で
   WCAG AA(4.5:1)未達のため、ヘッダーメニュー(.menu__link)と同じ白92%不透明度に統一
   (2026-08-08、直也さんからの「青背景に青字は見にくい」というフィードバックを受けて変更) */
.footer a {
  color: rgba(255,255,255,.92) !important;
}

.footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* フッターコピーライト */
.copyright {
  color: rgba(255,255,255,.5) !important;
  font-size: .78rem !important;
  text-align: center !important;
  margin-top: 12px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  width: 100% !important;
}

/* ===== ページネーション ===== */
.pagination__item--current,
.pagination__item:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}

/* ===== 記事本文の画像クリック拡大(lightbox) ===== */
/* js/lightbox.js が .post__content 内のimgにクリックイベントを付与する。
   クリックできることが分かるよう、ホバー時にカーソルを変える */
.post__content img {
  cursor: zoom-in !important;
}

.lightbox-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(20, 24, 33, .88) !important;
  padding: 24px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .2s ease !important;
}

.lightbox-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.lightbox-overlay__img {
  max-width: 92vw !important;
  max-height: 88vh !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5) !important;
  cursor: zoom-out !important;
}

.lightbox-overlay__close {
  position: absolute !important;
  top: 18px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.lightbox-overlay__close:hover {
  background: rgba(255,255,255,.3) !important;
}