/* サイト全体の見た目（docs\仕様\12_デザイン仕様書.md）
   変換のときに /assets/site.css にそのままコピーされる（119-A） */

/* ===== 色・文字の大きさ（12_デザイン仕様書 2・4） ===== */
:root {
  --fs-h1: 24px; --fs-h2: 22px; --fs-h3: 20px; --fs-h4: 18px;
  --fs-body: 18px; --lh-body: 1.8; --fs-catch: 34px; --fs-code: 16px;
  --c-main: #01c5c4; --c-main-dark: #019b9b; --c-text: #333; --c-heading: #111; --c-sub: #777;
  --c-line: #e5e5e5; --c-bg-soft: #f7f7f7;
  --content-width: 760px; --header-width: 1100px;
}
@media (max-width: 768px) {
  :root {
    --fs-h1: 24px; --fs-h2: 21px; --fs-h3: 18px; --fs-h4: 16px;
    --fs-body: 16px; --fs-catch: 24px; --fs-code: 14px;
  }
}

/* ===== 基本（12_デザイン仕様書 3） ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--c-text); background: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
a { color: var(--c-main-dark); }
a:hover { color: var(--c-main); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; color: var(--c-heading); }
h1 { font-size: var(--fs-h1); margin: 0 0 .4em; }
h2 { font-size: var(--fs-h2); margin: 2.2em 0 .8em; }  /* 下線は付けない（02_検討記録 3.3） */
h3 { font-size: var(--fs-h3); margin: 1.8em 0 .6em; }  /* 左の線は付けない（02_検討記録 3.3） */
h4 { font-size: var(--fs-h4); margin: 1.6em 0 .5em; }
strong { font-weight: 700; }

/* ===== ヘッダー（12_デザイン仕様書 5・6.1） ===== */
.site-header { border-bottom: 1px solid var(--c-line); background: #fff; position: relative; z-index: 10; }
.header-inner { max-width: var(--header-width); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { display: block; width: 213px; height: auto; }  /* ロゴ（426×116px）を半分の大きさで表示する（高解像度の画面でもきれいに見えるように） */
.menu-button { display: none; background: none; border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 10px; cursor: pointer; color: var(--c-text); }
.menu-button span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; gap: 4px; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 8px 12px; font-size: 15px; text-decoration: none; color: var(--c-text); white-space: nowrap; }  /* メニューは 15px（質問155-B） */
.main-nav a:hover { color: var(--c-main-dark); }
.main-nav li ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 4px 12px rgba(0,0,0,.08); min-width: 220px; }
.main-nav li:hover > ul, .main-nav li:focus-within > ul { display: block; }
.has-sub > a::after { content: " ▾"; font-size: .8em; }

@media (max-width: 768px) {
  .menu-button { display: block; }
  .site-logo img { width: 170px; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--c-line); }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; gap: 0; }
  .main-nav a { padding: 12px 16px; border-top: 1px solid var(--c-line); white-space: normal; }
  .main-nav li ul { display: block; position: static; border: 0; box-shadow: none; }
  .main-nav li ul a { padding-left: 32px; }
  .has-sub > a::after { content: ""; }
}

/* ===== トップの大きな画像（12_デザイン仕様書 6.2） ===== */
.hero { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #333; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero-content { position: relative; z-index: 1; color: #fff; padding: 40px 16px; }
.hero-catch { font-size: var(--fs-catch); font-weight: 700; line-height: 1.5; margin: 0 0 24px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.hero-button { display: inline-block; padding: 12px 32px; border: 2px solid #fff; color: #fff; text-decoration: none; border-radius: 999px; }
.hero-button:hover { background: #fff; color: var(--c-main-dark); }
@media (max-width: 768px) { .hero { min-height: 260px; } }
/* 固定ページのタイトルの帯（title_image を書いたページだけ。依頼 20261111-01 の質問220-A・221-A） */
.title-band { position: relative; min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #333; }
.title-band-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title-band::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.title-band-title { position: relative; z-index: 1; color: #fff; margin: 0; padding: 24px 16px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
@media (max-width: 768px) { .title-band { min-height: 160px; } }

/* ===== 本文（12_デザイン仕様書 7） ===== */
main { max-width: var(--content-width); margin: 0 auto; padding: 40px 16px 64px; }
.entry-meta { font-size: 14px; color: var(--c-sub); margin: 0 0 2em; }
.entry-image { display: block; width: 100%; height: auto; margin: 0 0 2em; border-radius: 4px; }
p { margin: 0 0 1.2em; }
main ul, main ol { padding-left: 1.5em; margin: 0 0 1.2em; }
main li > ul, main li > ol { margin-bottom: 0; }
blockquote { margin: 0 0 1.2em; padding: .8em 1.2em; border-left: 4px solid var(--c-line); background: var(--c-bg-soft); color: #555; }
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5em 0; }
main img, main video { max-width: 100%; height: auto; }
figure { margin: 0 0 1.5em; }
figure img { display: block; margin: 0 auto; border-radius: 4px; }
figcaption { font-size: 14px; color: var(--c-sub); text-align: center; margin-top: .4em; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: .95em; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--c-line); padding: .5em .8em; text-align: left; }
th { background: var(--c-bg-soft); }

/* 本文で使える文字色・サイズ（12_デザイン仕様書 2.2） */
.red { color: #d32f2f; } .blue { color: #1565c0; } .green { color: #2e7d32; } .orange { color: #e65100; } .gray { color: #757575; }
.small { font-size: 85%; } .large { font-size: 125%; } .xlarge { font-size: 150%; }

/* 本文で使える寄せ（12_デザイン仕様書 2.2。依頼 20261111-01 の質問211-A） */
.right { text-align: right; } .center { text-align: center; }

/* ボタン（114-A）。左右を丸くする（質問155-B） */
a.button { display: inline-block; padding: 10px 32px; background: var(--c-main); color: #fff; text-decoration: none; border-radius: 999px; font-weight: 700; }
a.button:hover { background: var(--c-main-dark); color: #fff; }

/* ===== コード（DR-012） ===== */
/* 字体は英字・数字も日本語も BIZ UDゴシック（質問172-B） */
:root { --ff-code: "BIZ UDGothic", "BIZ UDゴシック", "MS Gothic", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace; }
code { font-family: var(--ff-code); font-size: var(--fs-code); }
:not(pre) > code { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 3px; padding: .1em .35em; }
/* 白い背景・行番号付き・行の間 1.2（質問171） */
.code { position: relative; margin: 0 0 1.5em; border: 1px solid #d0d7de; border-radius: 6px; overflow: hidden; background: #fff; }
.code-file { padding: 6px 16px; font-size: 13px; color: #333; background: #f3f3f3; border-bottom: 1px solid #d0d7de; font-family: var(--ff-code); }
.code pre { margin: 0; padding: 16px 16px 16px 0; overflow-x: auto; line-height: 1.2; background: #fff; color: #000; counter-reset: line; }
/* 行番号は CSS で付ける。コピーのボタンにも、選んだ文字にも入らない */
.code pre .line { counter-increment: line; }
.code pre .line::before { content: counter(line); display: inline-block; width: 3.5em; padding-right: 1em; margin-right: 1em; text-align: right; color: #999; border-right: 1px solid #e5e5e5; user-select: none; }
.code-copy { position: absolute; top: 6px; right: 8px; padding: 2px 10px; font-size: 12px; color: #333; background: #f3f3f3; border: 1px solid #d0d7de; border-radius: 4px; cursor: pointer; }
.code-copy:hover { background: #e5e5e5; }

/* ===== 地図・動画の枠とボタン（108-C、12_デザイン仕様書 6.3） ===== */
.embed { position: relative; width: 100%; max-width: 100%; margin: 0 0 1.5em; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.embed-note { margin: 0; font-size: 14px; color: var(--c-sub); }
.embed-button { padding: 10px 32px; font-size: 16px; color: #fff; background: var(--c-main); border: 0; border-radius: 999px; cursor: pointer; }
.embed-button:hover { background: var(--c-main-dark); }
.embed.loaded { padding: 0; border: 0; background: none; }
.embed iframe { width: 100%; height: 100%; border: 0; }

/* ===== 新着記事・分類一覧 ===== */
.news h2 { margin-top: 2.5em; }
.news-list { list-style: none; padding: 0; margin: 0 0 1.5em; }
.news-list li { display: flex; gap: 16px; padding: .7em 0; border-bottom: 1px solid var(--c-line); }
.news-list time { color: var(--c-sub); font-size: 14px; white-space: nowrap; padding-top: .15em; }
@media (max-width: 768px) { .news-list li { flex-direction: column; gap: 0; } }

.post-list { list-style: none; padding: 0; margin: 0 0 2em; }
.post-list li { padding: 1em 0; border-bottom: 1px solid var(--c-line); }
.post-title { font-weight: 700; text-decoration: none; }
.post-list time { display: block; color: var(--c-sub); font-size: 14px; }
.post-list p { margin: .3em 0 0; font-size: .9em; color: #555; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.pager a, .pager span { padding: 4px 12px; border: 1px solid var(--c-line); border-radius: 4px; text-decoration: none; }
.pager-current { background: var(--c-main); border-color: var(--c-main) !important; color: #fff; }

/* ===== フッター ===== */
.site-footer { background: #F7F4F4; color: #666; padding: 32px 16px; text-align: center; font-size: 14px; }
.site-footer a { color: #666; text-decoration: none; }
.site-footer a:hover { color: #555; text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; list-style: none; padding: 0; margin: 0 0 16px; }
.copyright { margin: 0; }

/* ===== コードの色分け（WordPress の Code Block Pro「light-plus」の色に合わせた。質問171、12_デザイン仕様書 2.1） ===== */
.code pre .c, .code pre .ch, .code pre .cm, .code pre .c1, .code pre .cs, .code pre .cpf { color: #008000 }
.code pre .cp { color: #0000FF }
.code pre .k, .code pre .kn, .code pre .kr { color: #AF00DB }
.code pre .kd, .code pre .kt, .code pre .kc, .code pre .kp, .code pre .ow { color: #0000FF }
.code pre .s, .code pre .s1, .code pre .s2, .code pre .sb, .code pre .sc, .code pre .sd, .code pre .sh, .code pre .sx, .code pre .sa, .code pre .dl { color: #A31515 }
.code pre .se { color: #EE0000 }
.code pre .sr, .code pre .si { color: #811F3F }
.code pre .m, .code pre .mf, .code pre .mi, .code pre .mh, .code pre .mo, .code pre .mb, .code pre .il { color: #098658 }
.code pre .n, .code pre .nx, .code pre .nv, .code pre .vc, .code pre .vg, .code pre .vi, .code pre .py, .code pre .na { color: #001080 }
.code pre .nf, .code pre .fm { color: #795E26 }
.code pre .nb, .code pre .nc, .code pre .bp { color: #267F99 }
.code pre .no { color: #0070C1 }
.code pre .nt { color: #800000 }