/* Historipedia ポータルTOP（2026-10 新デザイン：郷土誌） */
:root{
  color-scheme:light;
  --paper:#fbfbf9;--ink:#141414;--sub:#5d5d5d;--hair:#cfcfcf;--blue:#23408e;
  --green-a:#2f8a5e;--green-b:#1f6145;
  --serif:"Zen Old Mincho","Noto Serif JP",serif;
  --sans:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --vt:"Noto Serif JP",serif;
  --gut:clamp(16px,4vw,48px);
}
html[lang="zh-Hant-TW"]{--serif:"Noto Serif TC",serif;--sans:"Noto Sans TC",system-ui,sans-serif;--vt:"Noto Serif TC",serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page{max-width:1240px;margin:0 auto}

/* ヘッダ */
.mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;padding:22px var(--gut) 12px;border-bottom:3px solid var(--ink)}
.logo{text-decoration:none;font-family:var(--serif);font-weight:900;font-size:clamp(28px,4vw,40px);letter-spacing:.02em;line-height:1}
.logo small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--sub);margin-top:8px}
.mast nav{display:flex;gap:6px 20px;font-size:14px;flex-wrap:wrap;align-items:center}
.mast nav>a{text-decoration:none}
.mast nav>a:hover{text-decoration:underline;text-underline-offset:4px}
.rmenu{position:relative}
.rmenu summary{cursor:pointer;list-style:none}
.rmenu summary::-webkit-details-marker{display:none}
.rmenu summary::after{content:" ▾";font-size:.8em}
.rmenu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;display:grid;grid-template-columns:repeat(3,minmax(6.5em,1fr));gap:0 1.4em;padding:12px 18px;background:#fff;border:1px solid var(--ink);white-space:nowrap}
.rmenu-panel a{padding:.45em 0;text-decoration:none;font-size:14px}
.rmenu-panel a:hover{color:var(--blue);text-decoration:underline}
.lang{display:flex;gap:2px;font-size:13px}
.lang a{text-decoration:none;padding:2px 6px}
.lang a[aria-current]{background:var(--ink);color:#fff}
.hashira{display:flex;justify-content:space-between;gap:12px;padding:6px var(--gut);font-size:12px;color:var(--sub);border-bottom:1px solid var(--hair)}

/* 表紙 */
.cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(16px,3vw,40px);padding:clamp(20px,4vw,48px) var(--gut)}
.cover figure{margin:0}
.cover img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cover figcaption,.cap{font-size:12px;color:var(--sub);margin-top:6px}
.vt{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:.35em;font-family:var(--vt);font-weight:900;font-size:clamp(28px,3.3vw,44px);line-height:1.18;justify-self:end;margin:0}
.vt>span{width:1em;word-break:break-all;text-align:center}
.vt>span:last-child{margin-top:1.2em}
.vt em,.ht em{font-style:normal;color:var(--blue)}
.ht{font-family:var(--serif);font-weight:900;font-size:clamp(26px,2.9vw,38px);line-height:1.45;margin:0;align-self:center}
.lede{grid-column:1/-1;font-family:var(--serif);font-size:17px;line-height:2;max-width:46em;margin:0}

/* 見出し */
.sec{padding:0 var(--gut) clamp(32px,4vw,52px)}
.sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0;margin:0 0 20px}
.sec-h h2{font-family:var(--serif);font-weight:900;font-size:22px;margin:0;letter-spacing:.1em}
.sec-h span{font-size:12px;color:var(--sub)}
.feat-h{align-items:center}
.feat-h h2{background:var(--blue);color:#fff;padding:4px 16px;letter-spacing:.3em}
.feat-h span{font-size:clamp(17px,1.8vw,21px);font-weight:700;color:var(--ink);letter-spacing:.12em}

/* 特集 */
.feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:start}
.feat>a{display:block}
.feat>a img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.15)}
.feat .kicker{font-size:13px;color:var(--blue);font-weight:700;letter-spacing:.1em;margin:0 0 8px}
.feat h3{font-family:var(--serif);font-weight:900;font-size:clamp(24px,3vw,34px);line-height:1.4;margin:0 0 16px}
.feat h3 a{text-decoration:none}
.feat p{line-height:1.95;font-size:15px;margin:0 0 18px}
.gbtn{display:inline-flex;align-items:center;gap:.5em;background:linear-gradient(120deg,var(--green-a),var(--green-b));color:#fff;text-decoration:none;font-weight:700;padding:.75em 1.4em;font-size:15px;border-radius:6px}
.gbtn:hover{filter:brightness(1.1)}

/* どこを読む？（写真タイル） */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:6px}
.tile{position:relative;overflow:hidden;color:#fff;text-decoration:none;grid-column:span 2;background:#222}
.tile img{width:100%;height:100%!important;object-fit:cover;transition:transform .5s}
.tile:hover img,.tile:focus-visible img,.tile.on img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65))}
.tile>span{position:absolute;left:12px;right:10px;bottom:10px;z-index:1;font-weight:900;font-size:18px;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tile small{display:block;font-weight:500;font-size:11px;opacity:.92}
.tile .nw{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--blue);padding:1px 6px;margin-left:6px;vertical-align:3px;text-shadow:none}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.big>span{font-size:26px}

/* 地図 */
.mapsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.jmap{position:relative;aspect-ratio:800/784;width:100%;max-width:600px;justify-self:center}
.jmap>img{position:absolute;inset:0;width:100%;height:100%!important}
.pin{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;color:var(--ink)}
.pin::before{content:"";position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #fff;transition:transform .2s}
.pin span{display:none;position:absolute;left:21px;top:50%;transform:translateY(-50%);line-height:1.5;padding:0 4px;background:var(--blue);color:#fff}
.pin.l span{left:auto;right:21px}
.pin:hover,.pin:focus-visible,.pin.on,.pin.is-active{z-index:3}
.pin:hover span,.pin:focus-visible span,.pin.on span,.pin.is-active span{display:block}
.pin:hover::before,.pin.on::before,.pin.is-active::before{transform:scale(1.5)}
.ex p{font-family:var(--serif);font-size:16px;line-height:2;margin:0 0 18px}
.ex{min-width:0}
.ex dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;font-size:14px;border-top:1px solid var(--hair);padding-top:14px}
.ex dt{font-weight:700;color:var(--sub);font-size:12px;letter-spacing:.06em;padding-top:2px}
.ex dd{margin:0;line-height:1.8}
.ex dd a{display:inline-block;text-decoration:none;margin-right:.9em;white-space:nowrap}
.ex dd a:hover,.ex dd a.on{color:var(--blue);text-decoration:underline}

/* 新しい地域から */
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.news a{text-decoration:none;display:grid;gap:8px;align-content:start}
.news img{aspect-ratio:3/2;object-fit:cover;width:100%}
.news .reg{font-size:12px;color:var(--blue);font-weight:700}
.news h3{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.5;margin:0}
.news a:hover h3{text-decoration:underline;text-underline-offset:4px}

/* フッタ */
.foot{border-top:3px solid var(--ink);padding:18px var(--gut) 28px;font-size:13px;color:var(--sub);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .copy{margin-left:auto}

@media (max-width:760px){
  .mast{align-items:flex-start}
  .rmenu-panel{right:auto;left:-60px;grid-template-columns:repeat(2,minmax(6.5em,1fr))}
  .cover,.feat,.mapsec{grid-template-columns:1fr}
  .vt{display:block;justify-self:start;font-size:26px;line-height:1.5}
  .vt>span{display:block;width:auto;text-align:left}
  .vt>span:last-child{margin-top:0}
  .ht{font-size:24px}
  .news{grid-template-columns:1fr}
  .ex dl{grid-template-columns:1fr;gap:2px}
  .ex dd{margin-bottom:8px}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:130px}
  .tile{grid-column:span 1}
  .tile.big{grid-column:span 2;grid-row:span 2}
  .foot .copy{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.tile img,.pin::before{transition:none}}
/* 特集を2本並べる（2026-10-14） */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px);align-items:start}
.feats .feat{grid-template-columns:1fr;gap:14px}
.feats .feat h3{font-size:clamp(22px,2.4vw,28px)}
@media (max-width:760px){.feats{grid-template-columns:1fr}}
/* 表紙下の紹介文を中央に（2026-10-14、スマホは左寄せ） */
.cover .lede{margin:0 auto;text-align:center}
@media (max-width:760px){.cover .lede{text-align:left}}
/* ロゴとキャラクター（2026-10-14） */
.logo.hp-logo{display:block;line-height:0}
.logo.hp-logo img{display:block;height:clamp(76px,9vw,104px);width:auto}
.hp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-map{margin:22px 0 0;display:flex;align-items:center;gap:14px}
.ch-map img{width:clamp(150px,18vw,210px);height:auto;flex:none}
.ch-map figcaption{font-size:14px;line-height:1.8;color:var(--sub);border-left:3px solid var(--blue);padding-left:12px}
.foot .foot-ch{height:56px;width:auto;margin-right:4px}

.logo.hp-logo{display:flex;align-items:center;gap:18px;line-height:1}
.logo.hp-logo .hp-wm{font-family:var(--serif);font-size:clamp(28px,4vw,40px)}
.logo.hp-logo .hp-wm small{font-family:var(--sans);font-size:12px;margin-top:8px}
@media (max-width:640px){.logo.hp-logo{gap:12px}.logo.hp-logo img{height:68px}}

.sec-h{position:relative}
.sec-h .sec-ch{position:absolute;right:4px;bottom:calc(100% + 3px);height:72px;width:auto;pointer-events:none}
@media (max-width:640px){.sec-h .sec-ch{height:54px}.sec-h:has(.sec-ch){margin-top:60px}}