/* ==========================================================
   ブログ専用 CSS (blog/index.php と blog/post.php だけが読む)
   共有の css/style.css の後に読み込む。数値は Wix 版を 1280 幅で実測した
   layout ダンプ (ブログ.json / post__….json) に合わせてある。
   ========================================================== */

:root {
  --font-post: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", var(--font-sans);   /* Wix の記事本文はメイリオ */
  --blog-line: rgba(204, 204, 204, .75);                                           /* カードの枠 (Wix 実測) */
}

/* ---------- 一覧: ヒーロー (Wix: 高さ 548、横線 y=272、見出し y=297/350) ---------- */
.bhero { height: 548px; background: var(--teal) center / cover no-repeat; position: relative; }
.bhero .wrap { padding-top: 67px; }
.bhero .rule { width: 40px; margin: 0 0 23px 34px; }
.bhero__title { margin-left: 34px; font-family: var(--font-head); font-weight: 700; font-size: 44px; line-height: 52.8px; color: #000; }
.bhero__title span { display: block; }

/* ---------- 一覧: 記事カード (Wix: 980x360、写真 480、本文 x=674 幅 410) ---------- */
.blist { padding-bottom: 21px; }
.bcards { width: 980px; margin: -274px auto 0; position: relative; z-index: 1; }
.bcard { display: flex; height: 360px; background: #fff; border: 1px solid var(--blog-line); }
.bcard + .bcard { margin-top: 20px; }
.bcard__img { flex: 0 0 480px; margin: -1px 0 -1px -1px; }
.bcard__img img { width: 480px; height: 360px; object-fit: cover; }
.bcard__body { flex: 1; min-width: 0; padding: 44px 45px 0; }
.bcard__meta { font-family: var(--font-mincho); font-size: 12px; line-height: 12px; white-space: nowrap; }
.bcard__title { margin-top: 15px; font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 56px; max-height: 112px; overflow: hidden; }
.bcard__title a:hover { color: var(--teal-deep); }   /* 記事の題名は他ページと同じ扱い (Wix のブログは 404 で比較できない) */
.bcard__excerpt { margin-top: 12px; font-family: var(--font-mincho); font-size: 16px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__foot { margin-top: 33px; border-top: 1px solid #ccc; }
.blist__empty { width: 980px; margin: 40px auto; }

/* ---------- 一覧: ページ送り (Wix: 36px 角、y=1235、中央) ---------- */
.bpager { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.bpager a, .bpager span { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; font-family: var(--font-mincho); font-size: 14px; }
.bpager a:hover { color: var(--teal-deep); }
.bpager .is-current { color: var(--teal-deep); }
.bpager .is-disabled { color: #bbb; }
.bpager svg { width: 14px; height: 14px; display: block; }

/* ---------- 記事: 外枠 (Wix: 幅 940、x=175) ---------- */
.bwrap { width: 950px; padding-left: 10px; margin: 0 auto; }
.bnav { display: flex; gap: 40px; padding: 29px 0 30px; font-family: var(--font-mincho); font-size: 15px; line-height: 21px; }
.bnav a:hover { text-decoration: underline; }

/* ---------- 記事: 本体カード (Wix: 940x1517、中身 x=275 幅 740) ---------- */
.bpost { margin-top: 20px; background: #fff; border: 1px solid var(--blog-line); padding: 60px 100px 100px; font-family: var(--font-post); }
.bpost__meta { font-size: 14px; line-height: 32px; }
.bpost__title { margin-top: 18px; font-family: var(--font-post); font-weight: 400; font-size: 40px; line-height: 50px; }
.bpost__updated { margin-top: 18px; font-size: 14px; line-height: 21px; }
.bpost__body { margin-top: 34px; font-size: 18px; line-height: 27px; }
.bpost__body > * + * { margin-top: 27px; }
.bpost__body h2 { font-weight: 700; font-size: 28px; line-height: 35px; margin-bottom: 28px; }
.bpost__body h3 { font-weight: 700; font-size: 22px; line-height: 33px; margin-bottom: 20px; }
.bpost__body img { max-width: 100%; height: auto; }
.bpost__body ul { list-style: disc; padding-left: 1.5em; }
.bpost__body a { text-decoration: underline; }
.bpost__tags { margin-top: 74px; }
.bpost__tags a { display: inline-block; border: 1px solid #ccc; padding: 6px 12px; margin-right: 8px; font-family: var(--font-mincho); font-size: 14px; line-height: 19.6px; }
.bpost__tags a:hover { border-color: #000; }
.bpost__cats { margin-top: 19px; padding: 5px 4px 0; font-size: 14px; line-height: 21px; }
.bpost__body + .bpost__cats { margin-top: 74px; }   /* タグ枠が無い記事でも本文との間隔は同じ */
.bpost__cats a { text-decoration: underline; }
.bpost__share { margin-top: 24px; height: 66px; border-top: 1px solid #ccc; padding-top: 24px; display: flex; gap: 30px; }
.bpost__share a, .bpost__share button { display: block; width: 19px; height: 19px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.bpost__share svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.bpost__share a:hover, .bpost__share button:hover { color: var(--teal-deep); }
.bpost--missing { text-align: center; }
.bpost--missing p + p { margin-top: 1em; }

/* ---------- 記事: 最新記事 (Wix: 見出し y=1852、カード 291x314 ×3、隙間 34) ---------- */
.brelated { margin: 30px 0 20px; font-family: var(--font-post); }
.brelated__head { display: flex; justify-content: space-between; align-items: stretch; }
.brelated__head h2 { font-weight: 400; font-size: 18px; line-height: 27px; }
.brelated__all { font-size: 14px; line-height: 27px; }
.brelated__all:hover { text-decoration: underline; }
.brelated__cards { display: grid; grid-template-columns: repeat(3, 291px); gap: 34px; margin-top: 20px; }
.brcard { display: block; background: #fff; border: 1px solid var(--blog-line); padding-bottom: 24px; }
.brcard img { width: 289px; height: 162px; object-fit: cover; }
.brcard__title { margin: 25px 24px 0; height: 54px; overflow: hidden; font-size: 18px; line-height: 27px; }
.brcard:hover .brcard__title { color: var(--teal-deep); }
.brcard__foot { margin: 13px 24px 0; height: 34px; border-top: 1px solid #ccc; }

/* ---------- スマホ / タブレット (1000px 未満、共有 CSS と同じ境目) ---------- */
@media (max-width: 999px) {
  .bhero { height: 236px; min-height: 0; }
  .bhero .wrap { padding-top: 49px; }
  .bhero .rule { margin-left: 0; }
  .bhero__title { margin-left: 0; font-size: 30.5px; line-height: 36.6px; }
  .blist { padding-bottom: 39px; }
  .bcards { width: auto; margin: 25px 24px 0; }
  .bcard { display: block; height: auto; }
  .bcard + .bcard { margin-top: 39px; }
  .bcard__img { margin: 0; }
  .bcard__img img { width: 100%; height: auto; aspect-ratio: 341 / 256; }
  .bcard__body { padding: 59px 30px 0; min-height: 427px; box-sizing: border-box; }
  .bcard__meta { font-size: 14.6px; line-height: 15px; }
  /* Wix の見出し書体 (rodin-demi-bold) は字送りが広く、同じ幅でも 1 行あたりの文字数が少ない。
     字間を少し空けて折り返し位置を合わせる (1 枚目が 3 行、2 枚目が 2 行になる) */
  .bcard__title { margin-top: 15px; font-size: 26.8px; line-height: 55px; letter-spacing: .5px; max-height: none; }
  .bcard__excerpt { margin-top: 12px; font-size: 19.5px; line-height: 29.3px; }
  .bcard__foot { display: none; }
  .blist__empty { width: auto; margin: 24px 16px; }
  .bpager { margin-top: 24px; gap: 4px; }
  .bpager a, .bpager span { width: 24px; height: 24px; font-size: 17.1px; }
  .bpager svg { width: 12px; height: 12px; }
  /* 記事ページ: カードは画面幅いっぱい、中身は左右 22px (Wix 実測) */
  .bwrap { width: auto; padding: 0; }
  /* Wix のスマホ版はカテゴリの並びを出さず、いま見ているカテゴリ (All Posts) だけを出す */
  .bnav { display: block; gap: 0; padding: 80px 22px 0; font-size: 18.3px; line-height: 26px; }
  .bnav a + a { display: none; }
  .bpost { margin-top: 16px; padding: 60px 22px 24px; }
  .bpost__meta { font-size: 14.6px; line-height: 22px; }
  .bpost__title { margin-top: 10px; font-size: 31.7px; line-height: 44px; }
  .bpost__updated { margin-top: 11px; font-size: 17.1px; line-height: 26px; }
  .bpost__body { margin-top: 41px; font-size: 19.5px; line-height: 29.3px; }
  .bpost__body > * + * { margin-top: 28px; }
  .bpost__body h2 { font-size: 29.3px; line-height: 43px; margin-bottom: 29px; }
  .bpost__body h3 { font-size: 24px; line-height: 36px; margin-bottom: 22px; }
  .bpost__tags { margin-top: 83px; }
  .bpost__tags a { padding: 8.5px 18px; font-size: 17.1px; line-height: 24px; }
  /* Wix のスマホ版はカテゴリを 1 行ずつ縦に並べる (「・」の区切りは消す) */
  .bpost__cats { margin-top: 25px; padding: 0; font-size: 0; line-height: 0; }
  .bpost__body + .bpost__cats { margin-top: 25px; }
  .bpost__cats a { display: block; font-size: 17.1px; line-height: 26px; }
  .bpost__cats a + a { margin-top: 8px; }
  .bpost__share { margin-top: 100px; height: auto; padding: 28px 0 16px; }
  .bpost__share a, .bpost__share button, .bpost__share svg { width: 23px; height: 23px; }
  /* Wix のスマホ版は「最新記事」を 1 枚だけ見せる横送りにしている。
     こちらは横送りを持たないので、Wix の見えている 1 枚と同じ配置にする */
  .brelated { margin: 37px 0 51px; padding: 0 22px; }
  .brelated__head h2 { font-size: 21.9px; line-height: 33px; }
  .brelated__all { font-size: 17.1px; line-height: 33px; }
  .brelated__cards { grid-template-columns: 302px; justify-content: center; gap: 15px; margin-top: 24px; }
  .brcard { padding-bottom: 30px; }
  .brcard + .brcard { display: none; }
  .brcard img { width: 100%; height: auto; aspect-ratio: 302 / 171; }
  .brcard__title { margin: 29px 29px 0; height: auto; font-size: 21.9px; line-height: 33px; }
  .brcard__foot { display: block; margin: 22px 29px 0; height: 33px; }
}