/* Historipedia 共通の新デザイン（2026-10）。各ページの shared.css の後に読み込んで上書きする */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

:root{
  --hp-paper:#fbfbf9;--hp-paper2:#f3f3f0;--hp-ink:#141414;--hp-sub:#5d5d5d;--hp-hair:#d6d6d2;--hp-blue:#23408e;
  /* 明るい地色の変数は各地域共通で白系に */
  --washi:#fbfbf9!important;--washi-soft:#fbfbf9!important;--washi-2:#f3f3f0!important;--washi-3:#ffffff!important;
  --washi-deep:#f1f1ee!important;--washi-line:#d6d6d2!important;--paper:#ffffff!important;
  --surface:#fbfbf9!important;--surface-card:#ffffff!important;--surface-deep:#f1f1ee!important;--line:#d6d6d2!important;
  --accent:#23408e!important;
  --font-display:"Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN",serif!important;
  --font-serif:"Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN",serif!important;
  --font-body:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif!important;
  --font-sans:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif!important;
  --radius:0px!important;
}
html:lang(zh-Hant-TW){
  --font-display:"Noto Serif TC","PingFang TC",serif!important;--font-serif:"Noto Serif TC","PingFang TC",serif!important;
  --font-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif!important;--font-sans:"Noto Sans TC","PingFang TC",sans-serif!important;
}
body{background:var(--hp-paper)!important;color:var(--hp-ink)}
html:not(:lang(zh-Hant-TW)) h1,html:not(:lang(zh-Hant-TW)) h2,html:not(:lang(zh-Hant-TW)) h3{font-family:"Zen Old Mincho","Noto Serif JP",serif}

/* 角丸と影をなくす（ボタン・丸い顔写真などは下で戻す） */
body *{border-radius:0!important;box-shadow:none!important}
.btn,.gbtn,.go-btn,.fb-go,.cn-btn,.he-b,button.he-b,a.he-b,.read-btn{border-radius:6px!important}
.tm-list img,.pin-dot,.map-pin .pin-dot,[class*="avatar"],.byline img{border-radius:50%!important}

/* 英語の小見出し・飾りの区切り・01/02の番号を出さない */
.eyebrow,.wave-divider,.star-divider,.seigaiha,.nc-head .num,.navcard .num,.concept .num{display:none!important}

/* ヘッダ：明るい地に墨の線 */
header.site-header,header.site{background:var(--hp-paper)!important;color:var(--hp-ink)!important;border-bottom:3px solid var(--hp-ink)!important;backdrop-filter:none!important}
header.site-header::before,header.site-header::after,header.site::before,header.site::after{display:none!important}
header.site-header a,header.site-header summary,header.site-header button,header.site-header span,header.site-header strong,header.site-header small,
header.site a,header.site button,header.site span{color:var(--hp-ink)!important}
header.site-header svg,header.site svg{color:var(--hp-ink)}
header.site-header .lang-switch a.active,header.site-header .lang-switch a[aria-current],header.site-header .lang-switch .is-current,
header.site .current,header.site [aria-current="true"]{background:var(--hp-ink)!important;color:#fff!important;border-color:var(--hp-ink)!important}
.region-menu-panel,.nav-panel,.nav-panel-inner{background:#fff!important;border:1px solid var(--hp-ink)!important}
.mainnav{background:var(--hp-paper)!important}
.region-menu-panel a,.mainnav a,.nav-panel a{color:var(--hp-ink)!important}

/* 記事・下層ページの見出し帯：紙の地に墨の文字（地域トップの絵のヒーローはそのまま） */
body:not(.hp-index) :is(section.hero,div.hero,.hero,div.page-head,.nv-hero){background:var(--hp-paper)!important;color:var(--hp-ink)!important;border-bottom:1px solid var(--hp-ink)}
body:not(.hp-index) :is(section.hero,div.hero,.hero,div.page-head,.nv-hero)::before,
body:not(.hp-index) :is(section.hero,div.hero,.hero,div.page-head,.nv-hero)::after{display:none!important}
body:not(.hp-index) :is(.hero,div.page-head,.nv-hero) :is(h1,h2,h3,p,a,span,li,small,strong,em,time,dd,dt){color:var(--hp-ink)!important;text-shadow:none!important}
body:not(.hp-index) :is(.hero,div.page-head,.nv-hero) :is(.hero-bg,.hero-scrim){display:none!important}
body:not(.hp-index) .hero :is(.hero-art-side,[class*="art"]) *{stroke:#23408e!important}

/* フッタ：明るい地に墨の線 */
footer.site-footer,body>footer{background:var(--hp-paper)!important;color:var(--hp-sub)!important;border-top:3px solid var(--hp-ink)!important}
footer.site-footer::before,footer.site-footer::after{display:none!important}
footer.site-footer a,body>footer a,footer.site-footer p,footer.site-footer span,footer.site-footer h2,footer.site-footer h3,footer.site-footer strong,body>footer strong{color:var(--hp-ink)!important}
footer.site-footer .btn,body>footer .btn{background:linear-gradient(120deg,#2f8a5e,#1f6145)!important;color:#fff!important;border-color:#1f6145!important}

/* リンクの色 */
:is(main,article) :is(p,li,dd,td,figcaption) a:not([class]){color:var(--hp-blue)}
main h2{border-left-color:#141414!important}
/* 番号・英字ラベル */
.nav-grid .n,li>a>.no,.room .no,.key .n,.kno,.pp-n,.chapter-no,.hp-eb,.sec-h .en,.ft-pages h3,.brand .en,.nav-toggle-btn .lbl{display:none!important}
/* ボタン：主ボタンは緑、ゴーストは墨の線 */
a.btn:not(.ghost):not(.line):not(.he-b),button.btn:not(.ghost):not(.line),.btn.primary{background:linear-gradient(120deg,#2f8a5e,#1f6145)!important;color:#fff!important;border-color:#1f6145!important}
/* ハンバーガー・言語切替の線 */
.nav-toggle-btn,header .burger,header [class*="menu-btn"],header .lang-switch a,header .header-lang a{border-color:#bdbdb8!important}
.nav-toggle-btn span::before,.nav-toggle-btn span::after,.burger span,.burger::before,.burger::after,.burger i,[class*="menu-btn"] span{background-color:var(--hp-ink)!important}
.nav-toggle-btn:not([aria-expanded="true"]) span{background-color:var(--hp-ink)!important}
/* 金・朱系の差し色は群青に */
:root{--asahi:#23408e!important;--asahi-soft:#5b74b8!important;--accent-2:#23408e!important;--ochre:#23408e!important;--ochre-soft:#5b74b8!important;--kin:#23408e!important;--kin-soft:#5b74b8!important;--gold:#23408e!important;--gold-soft:#5b74b8!important;--hoshi:#23408e!important;--hoshi-soft:#5b74b8!important;--ember:#23408e!important;--ember-soft:#5b74b8!important;--inaho:#23408e!important;--inaho-soft:#5b74b8!important;--mikan:#23408e!important}
strong{background:linear-gradient(transparent 64%,rgba(35,64,142,.14) 64%)!important}
/* 「伝承」ラベルは区別のため茶色のまま */
.tag.t-legend{background:#7d5f2a!important;border-color:#7d5f2a!important;color:#fff!important}

/* 地域トップの表紙：絵をやめ、写真と見出しを並べる */
body.hp-index :is(section.hero,section.hero-full){position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);align-items:center;max-width:1200px;margin:0 auto!important;padding:clamp(24px,4vw,56px) 24px!important;min-height:0!important;height:auto!important;background:var(--hp-paper)!important;color:var(--hp-ink)!important;overflow:visible!important}
body.hp-index :is(section.hero,section.hero-full)::before,body.hp-index :is(section.hero,section.hero-full)::after{display:none!important}
body.hp-index :is(section.hero,section.hero-full)>:not(.wrap):not(.hero-copy):not(.hp-cover){display:none!important}
body.hp-index .hero :is(.hero-art,.hero-illust-img,.hero-bg,.hero-scrim,svg:not(.btn svg)){display:none!important}
body.hp-index :is(.hero,.hero-full)>:is(.wrap,.hero-copy){max-width:none!important;width:auto!important;margin:0!important;padding:0!important;position:static!important;order:1;display:block!important;grid-template-columns:none!important}
body.hp-index :is(.hero,.hero-full) .hero-grid{display:block!important}
body.hp-index .hp-cover{order:2;margin:0}
body.hp-index .hp-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
body.hp-index .hp-cover figcaption{font-size:12px;color:var(--hp-sub);margin-top:6px}
body.hp-index :is(.hero,.hero-full) :is(h1,h2,p,span,li,a:not(.btn),small,em,strong,dd,dt){color:var(--hp-ink)!important;text-shadow:none!important}
body.hp-index :is(.hero,.hero-full) h1{font-size:clamp(28px,3.2vw,44px)!important;line-height:1.35!important;margin:0 0 16px!important}
body.hp-index :is(.hero,.hero-full) p{font-size:16px!important;line-height:1.95!important;max-width:none!important}
body.hp-index :is(.hero,.hero-full) :is(.btn.ghost,.btn.line){background:transparent!important;border:1px solid var(--hp-ink)!important;color:var(--hp-ink)!important}
@media (max-width:760px){body.hp-index :is(section.hero,section.hero-full){grid-template-columns:1fr;padding:20px 16px 32px!important}body.hp-index .hp-cover{order:0}}
.hero-kicker{display:none!important}

/* ボタンの文字色を守る（見出し帯の文字色指定より優先） */
.he-top,.he-box,.he-btns{--he-accent:#23408e!important}
:is(.he-b,.btn,.btn-read,.gbtn,.cn-btn,.fb-go,button):not(#_) :is(span,b,strong,em,i,small){color:inherit!important}
.he-like[aria-pressed="true"]:not(#_),.he-like[aria-pressed="true"]:not(#_) *{color:#fff!important}
.he-like[aria-pressed="true"]{background:#23408e!important;border-color:#23408e!important}
:is(.btn-read,.gbtn,.cn-btn:not(.cn-prev),.fb-go,a.btn:not(.ghost):not(.line):not(.he-b),.btn.primary):not(#_),:is(.btn-read,.gbtn,.cn-btn:not(.cn-prev),.fb-go,a.btn:not(.ghost):not(.line):not(.he-b),.btn.primary):not(#_) *{color:#fff!important}
.cn-btn.cn-prev:not(#_),.cn-btn.cn-prev:not(#_) *{color:#1f4d36!important}
/* お問い合わせフォームの送信ボタン */
form button[type="submit"]:not(#_),.contact-form button:not(#_),form input[type="submit"]:not(#_){background:linear-gradient(120deg,#2f8a5e,#1f6145)!important;color:#fff!important;border-color:#1f6145!important}
/* フッタの小見出し */
footer.site-footer :is(h4,h5,h6,dt,li,small),body>footer :is(h4,h5,h6,dt,li,small){color:var(--hp-ink)!important}
/* スマホのメニュー（新しい地域のドロワー） */
header nav.drawer{background:var(--hp-paper)!important;border-top:1px solid var(--hp-ink)!important}
/* 暗い囲みの中の差し色は明るい青に */
:is(.callout,.callout-box) :is(b,strong),li.end :is(.y,strong),.local .lk-label,.hook .q{color:#c9d6f5!important;background:none!important}
.contact-block h5{display:none!important}
.navcard .go{color:var(--hp-blue)!important}
/* ===== ブランドロゴとキャラクター（2026-10-14） ===== */
.site-header .brand.hp-logo{display:flex!important;align-items:center;padding:4px 0!important;line-height:0!important}
.site-header .brand.hp-logo img{display:block;height:64px!important;width:auto!important;max-width:none}
@media (max-width:640px){.site-header .brand.hp-logo img{height:50px!important}}
.hp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .wrap.hp-has-ch{position:relative;padding-right:min(30%,240px)}
.hp-hero-ch{position:absolute;right:0;bottom:-20px;height:200px;width:auto;pointer-events:none}
@media (max-width:760px){.hero .wrap.hp-has-ch{padding-right:20px}.hp-hero-ch{position:static;display:block;height:130px;margin:14px 0 -8px auto}}
.hp-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0 36px}
.hp-guide{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:end;border-top:3px solid #141414;border-bottom:1px solid #141414;padding:14px 4px}
.hp-guide img{width:110px;height:auto;display:block}
.hp-guide b{display:block;font-family:"Zen Old Mincho","Noto Serif TC",serif;font-weight:900;font-size:1.25rem}
.hp-guide i{display:block;font-style:normal;font-size:.82rem;color:#23408e;font-weight:700;margin:2px 0 8px}
.hp-guide p{margin:0;font-size:.92rem;line-height:1.8}
.hp-guide q{display:block;margin-top:8px;font-size:.9rem;color:#5d5d5d;quotes:"「" "」"}
@media (max-width:640px){.hp-guides{grid-template-columns:1fr}}

.site-header .brand.hp-logo{gap:12px;text-decoration:none!important}
.hp-wm{display:flex;flex-direction:column;justify-content:center;font-family:"Zen Old Mincho","Noto Serif TC","Hiragino Mincho ProN",Georgia,serif;font-weight:900;font-size:26px;letter-spacing:.02em;line-height:1;color:var(--hp-ink,#141414)}
.hp-wm small{display:block;font-family:"Zen Kaku Gothic New","Noto Sans TC","Hiragino Sans",sans-serif;font-weight:500;font-size:11px;letter-spacing:.2em;color:#5d5d5d;margin-top:7px}
@media (max-width:640px){.hp-wm{font-size:20px}.hp-wm small{font-size:10px;margin-top:5px}}

/* Region sites: Historipedia emblem before the region brand (2026-10-14) */
:is(.site-header,header.site) :is(a.brand,a.logo):not(.hp-logo)::before{content:"";flex:none;display:block;width:47px;height:40px;margin-right:12px;padding-right:12px;border-right:1px solid #d6d6d2;background:url(https://www.historipedia.jp/img/brand/logo-ja.webp) left center/contain no-repeat;box-sizing:content-box}
html[lang^="en"] :is(.site-header,header.site) :is(a.brand,a.logo):not(.hp-logo)::before{background-image:url(https://www.historipedia.jp/img/brand/logo-en.webp)}
html[lang^="zh"] :is(.site-header,header.site) :is(a.brand,a.logo):not(.hp-logo)::before{background-image:url(https://www.historipedia.jp/img/brand/logo-zh.webp)}
header.site a.brand,.site-header a.logo:not(.hp-logo){display:grid!important;grid-template-columns:auto auto;justify-content:start;align-items:center}
header.site a.brand>*,.site-header a.logo:not(.hp-logo)>*{grid-column:2}
header.site a.brand::before,.site-header a.logo:not(.hp-logo)::before{grid-column:1;grid-row:1/span 2}
.site-header>.wrap:not(.hdr)>a.brand{position:relative}
.site-header>.wrap:not(.hdr)>a.brand::before{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:14px}
@media (max-width:1199px){.site-header>.wrap:not(.hdr)>a.brand::before{display:none}}
@media (max-width:640px){:is(.site-header,header.site) :is(a.brand,a.logo):not(.hp-logo)>svg{display:none!important}:is(.site-header,header.site) :is(a.brand,a.logo):not(.hp-logo)::before,.site-header>.wrap:not(.hdr)>a.brand::before{display:block;position:static;transform:none;width:36px;height:31px;margin-right:4px;padding-right:0;border-right:0}}

/* Contact form: thank-you illustration after a successful send */
.contact-status.ok::before,.form-status.ok::before{content:"";display:block;width:136px;height:200px;margin:14px 0 10px;background:url(https://www.historipedia.jp/img/chara/pose-letter.webp) left bottom/contain no-repeat}
@media (max-width:640px){.contact-status.ok::before,.form-status.ok::before{width:109px;height:160px}}