/* 中国史人物ページ / 遠候書房スマートフォン対応試作を参照した共通スタイル v1.0 */
:root {
  --paper:#f7f3ea; --parchment:#f1e8d8; --sand:#e5d8c3;
  --sienna:#876347; --ink:#352c24; --muted:#76695d;
  --line:#d8c7b1; --dark:#493325; --gold:#b28a59;
  --surface:rgba(255,253,248,.87);
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); font-size:15px; line-height:1.75; min-width:320px; }
img { max-width:100%; display:block; }
a { color:inherit; text-underline-offset:3px; }
:focus-visible { outline:3px solid #a86e32; outline-offset:3px; }
.hp-sidebar { position:fixed; inset:0 auto 0 0; width:246px; overflow:auto; background:linear-gradient(95deg,rgba(255,255,255,.44),transparent 68%),#f0e4d1; border-right:1px solid #cfbda3; box-shadow:3px 0 16px #58422d0b; z-index:5; }
.hp-side-inner { min-height:100%; padding:38px 19px 22px; display:flex; flex-direction:column; }
.hp-site-title { text-align:center; padding:0 0 31px; border-bottom:1px solid #cbb491; }
.hp-site-title a { font-weight:700; font-size:31px; letter-spacing:.09em; text-decoration:none; }
.hp-site-title small { display:block; margin-top:8px; color:#735744; letter-spacing:.15em; font-size:12px; }
.hp-site-nav { display:grid; gap:4px; margin:26px 0 25px; }
.hp-site-nav a { padding:10px 13px; min-height:46px; text-decoration:none; font-size:17px; display:flex; gap:13px; align-items:center; border-radius:5px; }
.hp-site-nav a:hover { background:#e4d3bd; }
.hp-site-nav a[aria-current="page"] { background:#dec8ad; font-weight:700; }
.hp-side-foot { margin-top:auto; padding:10px 5px; text-align:center; color:#795b44; font-size:13px; letter-spacing:.055em; }
.hp-side-sign { display:block; font-size:16px; margin-top:18px; }
.hp-mobile-header { display:none; }
.hp-main { margin-left:246px; min-height:100vh; }
.hp-content { padding:clamp(20px,3vw,42px) clamp(20px,3.1vw,48px) 30px; max-width:1510px; margin:auto; }
.hp-page-header { padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.hp-eyebrow { display:flex; align-items:center; gap:12px; font:12px var(--sans); letter-spacing:.15em; color:#896b4c; margin:0 0 11px; }
.hp-line { flex:1; border-top:1px solid #cdbb9d; }
.hp-heading-row { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.hp-heading-row h1 { font-size:clamp(30px,2.8vw,43px); line-height:1.32; margin:0; font-weight:700; letter-spacing:.06em; }
.hp-signature { font-size:12px; color:#806b53; letter-spacing:.1em; white-space:nowrap; }
.hp-catchphrase { margin:9px 0 0; font-size:clamp(17px,1.6vw,21px); color:#614933; letter-spacing:.025em; font-weight:600; }
.hp-main-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,2.7vw,34px); align-items:start; }
.hp-visual,.hp-reading { min-width:0; }
.hp-poster { margin:0; }
.hp-poster img { width:100%; height:auto; border-radius:3px; background:#dfd3be; border:1px solid #cdbb9e; box-shadow:0 7px 21px rgba(64,45,29,.12); }
.hp-poster figcaption { margin:8px 0 0; font:11px/1.6 var(--sans); color:var(--muted); }
.hp-poster-placeholder { width:100%; aspect-ratio:3 / 2; border:1px solid #cdbb9e; border-radius:3px; background:radial-gradient(circle at 79% 26%,#d4c3a4 0,transparent 35%),linear-gradient(145deg,#f1e6d2,#c8ac87 59%,#7d5941); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:26px; gap:11px; text-align:center; color:#3f3226; }
.hp-poster-placeholder span { font:12px var(--sans); letter-spacing:.2em; }
.hp-poster-placeholder b { font-size:clamp(17px,2vw,25px); }
.hp-poster-placeholder small { font:12px var(--sans); }
.hp-panel { border-bottom:1px solid var(--line); padding:0 0 13px; margin:0 0 17px; }
.hp-panel h2 { margin:0 0 8px; font-size:19px; line-height:1.4; letter-spacing:.06em; display:flex; align-items:center; gap:10px; }
.hp-panel h2::before { content:""; width:3px; height:17px; display:inline-block; background:var(--sienna); }
.hp-profile dl { margin:0; display:grid; row-gap:3px; }
.hp-profile dl>div { display:grid; grid-template-columns:88px minmax(0,1fr); gap:8px; border-bottom:1px dotted #dfd2bf; padding:2px 0 5px; }
.hp-profile dt { font:12px/1.6 var(--sans); color:#806d58; padding-top:2px; }
.hp-profile dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.hp-review p { margin:0; font-size:15px; line-height:1.85; }
.hp-note { font:12px/1.65 var(--sans)!important; color:#756656; margin:7px 0 0!important; }
.hp-sources ul,.hp-related ul { margin:0; padding-left:19px; }
.hp-sources li { font-size:12px; line-height:1.7; margin:4px 0; overflow-wrap:anywhere; }
.hp-sources a,.hp-related a { text-decoration:underline; text-decoration-color:#b39a7d; }
.hp-source-type { color:#795d43; margin-left:5px; font-family:var(--sans); font-size:11px; }
.hp-source-note { display:block; color:#776959; font-size:11px; }
.hp-supplement { margin-top:24px; padding-top:12px; border-top:1px solid var(--line); }
.hp-supplement p { margin:0; }
.hp-related { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.hp-related .hp-panel { margin-bottom:0; }
.hp-related li { font-size:14px; }
.hp-empty { margin:0; color:var(--muted); font-size:13px; }
.hp-footer { margin-top:21px; padding:17px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font:12px var(--sans); }
@media(max-width:1150px) and (min-width:761px) { .hp-main-grid { grid-template-columns:1fr; } .hp-reading { display:grid; grid-template-columns:minmax(0,1fr); gap:0; } .hp-reading .hp-sources { grid-column:1/-1; } }
@media(max-width:760px) {
  .hp-sidebar { display:none; }
  .hp-main { margin-left:0; }
  .hp-mobile-header { position:sticky; z-index:9; top:0; display:flex; align-items:center; justify-content:space-between; min-height:57px; padding:8px 17px; background:#f0e4d1ee; backdrop-filter:blur(8px); border-bottom:1px solid #cfbda3; }
  .hp-mobile-brand { font-size:20px; font-weight:700; letter-spacing:.08em; text-decoration:none; }
  .hp-mobile-menu { font:13px var(--sans); position:relative; }
  .hp-mobile-menu summary { cursor:pointer; padding:8px 10px; border:1px solid #c9b79f; border-radius:3px; list-style:none; }
  .hp-mobile-menu summary::-webkit-details-marker { display:none; }
  .hp-mobile-menu nav { position:absolute; top:calc(100% + 8px); right:0; background:#f8f1e6; min-width:210px; border:1px solid #cfbda3; box-shadow:0 12px 20px #57412b29; padding:9px; display:grid; }
  .hp-mobile-menu nav a { display:block; padding:9px 11px; text-decoration:none; }
  .hp-content { padding:22px 16px 26px; }
  .hp-main-grid,.hp-reading,.hp-related { display:grid; grid-template-columns:1fr; gap:0; }
  .hp-page-header { margin-bottom:17px; }
  .hp-heading-row h1 { font-size:30px; }
  .hp-catchphrase { font-size:17px; }
  .hp-visual { margin-bottom:22px; }
  .hp-profile dl>div { grid-template-columns:78px minmax(0,1fr); }
  .hp-related .hp-panel { margin-bottom:15px; }
}
@media print { .hp-sidebar,.hp-mobile-header { display:none!important; } .hp-main { margin:0; } .hp-content { padding:0; } .hp-main-grid { grid-template-columns:1fr; } a { color:inherit; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.hp-brand-title{font-weight:700;font-size:31px;letter-spacing:.09em;}
[id]{scroll-margin-top:80px;}