/* ポータル（/）。地図画面と違い単体ページなので、色は他のCSSに頼らずここで定義する。 */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --surface2:#e9edf3; --ink:#1d2530; --muted:#5c6878;
  --line:#d7dde6; --accent:#33569b;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;}

.pt-head{background:var(--surface);border-bottom:1px solid var(--line);}
.pt-head-inner{max-width:1040px;margin:0 auto;padding:20px 18px;}
.pt-head h1{font-size:20px;margin:0;}
.pt-head p{margin:6px 0 0;font-size:12.5px;color:var(--muted);}

.pt-main{max-width:1040px;margin:0 auto;padding:24px 18px 48px;}
.pt-group{margin-bottom:28px;}
.pt-group h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:14px;margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line);}
.pt-group-note{font-weight:400;font-size:11.5px;color:var(--muted);}

/* 1行に詰め込みすぎると説明文が読めなくなるので、最低幅を決めて折り返させる。 */
.pt-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));}
.pt-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:15px 17px;}
.pt-card a{color:var(--accent);font-size:15px;font-weight:600;text-decoration:none;}
.pt-card a:hover{text-decoration:underline;}
.pt-card-name{font-size:15px;font-weight:600;color:var(--muted);}
.pt-desc{margin:8px 0 0;font-size:12.5px;line-height:1.7;}

/* 別タブで開くリンクの目印。記号だけでは伝わらないので、読み上げ用の文言も添える。 */
.pt-ext{margin-left:5px;font-size:11px;font-weight:400;}
.pt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;}

/* この鯖に配信されていない画面。リンクが無いことが見て分かるように落とす。 */
.pt-card.is-off{background:var(--surface2);border-style:dashed;}
.pt-off-note{margin:8px 0 0;font-size:11px;color:var(--muted);}