/* problems.css — 運用の困りごと（/problems/）
   2026.9.24 new
   2026.9.25 mod: 記事の見た目を /knowledges/ に揃えた。
                  下の「knowledges と同じ」ブロックは knowledges の各ページが <head> 内に直書きしている
                  <style> 3つ（段落・見出し／目次・.layout／.main-content のリンク・hero）の写し。
                  knowledges では body 全体に効くルール（p・h3・ul など）は、ここでは .pb-page の中だけに絞った。
                  将来 knowledges 側を外部CSSに出したら、このブロックは消してそれを読むだけにする */

/* ===== knowledges と同じ：本文（knowledges の1つめの<style>） ===== */
.pb-page { font-size: 14px; line-height: 1.5; }	/* knowledges の .pz-has-side-menu と同じ基準サイズ */
.pb-page p { margin-top: 0.5em; margin-bottom: 1em; line-height: 1.8em; }
.pb-page .layout h2 {
	font-size: 1.6em; margin-top: 1em; border-bottom: 1px solid #ccc;
	padding: 10px 10px 10px 0px; font-weight: 500; color: #000;
}
.pb-page .main-content > h2:first-child { margin-top: 0; }
.pb-page h3 { font-size: 1.2em; color: #d45600; font-weight: 500; }
.pb-page h4 { font-size: 1.1em; margin-top: 1.2em; margin-bottom: 0.6em; border-bottom: 2px solid #2CB2DF; padding-bottom: 5px; }
.pb-page ul, .pb-page ol { padding-left: 2em; margin-bottom: 1.2em; }
.pb-page ul li:last-child, .pb-page ol li:last-child { margin-bottom: 1.2em; }
.pb-page li:has(br) { margin-bottom: 0.5em; }
.pb-page blockquote { margin: 14px 0; padding: 8px 14px; border-left: 3px solid #9ca3af; background: #f6f7f8; color: #4b5563; font-size: 15px; }
.pb-page blockquote p { margin: 0 !important; }

/* ===== knowledges と同じ：目次と2カラム（knowledges の2つめの<style>） ===== */
.beyond-mr-page-index {
	background-color: #fffaf2; border: 1px solid #e67e22; border-radius: 8px;
	padding: 16px; margin-bottom: 24px; font-size: 13px;
	position: sticky; top: 80px; width: 250px; flex-shrink: 0;
}
.beyond-mr-page-index h3 { margin-top: 0 !important; }
.beyond-mr-page-index ul { list-style: none; padding-left: 0; margin: 0; }
.beyond-mr-page-index li { font-size: 13px; line-height: 1.6; }
.beyond-mr-page-index li:last-child { margin-bottom: 0; }
.beyond-mr-page-index a { color: #e67e22; text-decoration: none; font-size: 13px; line-height: 1.4; letter-spacing: 0.03em; }	/* 後ろ3つは knowledges がJSで付けているもの */
.beyond-mr-page-index a:hover { text-decoration: underline; color: #cf5f00; }
.beyond-mr-page-index a.active { font-weight: bold; text-decoration: underline; color: #b84e00; }

.layout { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 30px; }
.main-content { flex-grow: 1; min-width: 0; }
.layout .main-content ol { font-size: 14px; line-height: 1.8; }
.layout .main-content ol li,
.layout .main-content ol li a,
.layout .main-content ol li strong,
.layout .main-content ol li em,
.layout .main-content ol li::marker { font-size: inherit; }

@media (max-width: 768px) {
	.layout { display: block; }
	.beyond-mr-page-index { width: auto; margin-bottom: 24px; position: static; }
}

/* ===== knowledges と同じ：hero とリンク色（knowledges の本文内<style>） ===== */
.hero-flex { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.hero-body { flex: 1 1 auto; min-width: 0; }
.pb-page .pz-headline-l00 h1 { font-size: 30px; line-height: 1.4em; }
.hero-flex .pz-headline, .hero-flex .pz-headline-l00 { margin-top: 0; padding-top: 0; }
.hero-body-h1-sub a { color: inherit; }
@media (max-width: 979.98px) { .pb-page h1 { font-size: clamp(22px, 4.2vw, 28px) !important; } }
@media (max-width: 640px) { .intros { font-size: 1rem; } }

.main-content a { color: #005BBB; font-weight: 600; text-decoration: none; }
.main-content a:hover { text-decoration: underline; }
.main-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 表：knowledges では共通CSSがコメントアウトされているため、ここだけ独自（003 に表があるので必要） */
.main-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
.main-content th, .main-content td { border: 1px solid #ccc; padding: 0.5em 0.8em; text-align: left; vertical-align: top; }
.main-content th { background-color: #f5f5f5; }
.main-content table th:first-child, .main-content table td:first-child { min-width: 7em; }

/* ===== problems だけのもの ===== */
/* writeWiredでは：一般論との境目を線で示す（knowledges にはない区切り。要らなければこの2行を消す） */
.pb-solution { border-top: 2px solid #e67e22; margin-top: 2.5em; padding-top: 0.5em; }
.pb-page .pb-solution h2 { border-bottom: 0; }
.pb-refs-label { color: #888; margin-bottom: 4px !important; }
.pb-back { margin-top: 2em; }

/* ===== トップ ===== */
/* 2026.9.25 mod: rem をやめて px に（このサイトは Bootstrap 3 で html の font-size が 10px のため、rem だと小さく出る） */
.pb-top { margin-bottom: 60px; }
.pb-toc ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-toc a { display: inline-block; border: 1px solid #ccc; padding: 4px 12px; font-size: 14px; color: #333; }
.pb-shelf h2 { font-size: 20px; font-weight: 700; margin: 40px 0 12px; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.pb-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pb-card a { display: block; border: 1px solid #e5e5e5; padding: 16px 18px; height: 100%; color: #333; }
.pb-card a:hover { border-color: #e67e22; text-decoration: none; }
.pb-card h3 { font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0 0 6px; color: #222; }
.pb-card p { font-size: 13px; line-height: 1.7; color: #666; margin: 0; }
.pb-exits { margin-top: 48px; font-size: 14px; }
.pb-exits ul { padding-left: 1.2em; }

