/* =========================================================
   全ページ共通: ポータルヘッダー/フッター + ベース
   portal.css から移動（index.php 専用ではなく全ページ共通部品）。
   partials/portal-header.php / partials/portal-footer.php と対応。
   ========================================================= */

:root{
  --brand:#f04e4b;
  --brand-dark:#d43c39;
  --ink:#222;
  --ink-soft:#555;
  --ink-faint:#888;
  --line:#e3e3e3;
  --line-soft:#ececec;
  --paper:#ffffff;
  --paper-tint:#faf9f8;
  --paper-deep:#f4f3f2;
  --radius:6px;
  --maxw:1160px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:var(--paper-tint);
  font-size:13px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
.mono{font-family:"JetBrains Mono",monospace;}

/* ================= HEADER ================= */
/* ヘッダー/フッターはどのページに置かれても同じ見た目になるよう、
   文字設定をページ側(bodyの上書き)から独立させて固定する */
.site-header,.site-footer{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:13px;
  line-height:1.7;
  font-feature-settings:normal;
  letter-spacing:normal;
}
.site-header{
  height:56px;
  border-bottom:1px solid #e3e3e3;
  background:#fff;
}
.site-header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  gap:16px;
}
.brand{
  display:flex;align-items:center;gap:8px;
  flex:0 0 auto;
}
.brand img{height:26px;width:auto;}
.brand-fallback{
  display:none;
  width:26px;height:26px;border-radius:5px;
  background:var(--brand);color:#fff;
  align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:"JetBrains Mono",monospace;
}
.site-catch{
  flex:1 1 auto;
  text-align:center;
  font-size:12px;
  color:#555;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.site-catch strong{color:var(--brand);font-weight:500;}
.header-actions{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
}
.btn-h{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  border:1px solid #e3e3e3;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-h.ghost{
  color:#222;
  background:#fff;
}
.btn-h.ghost:hover{border-color:var(--brand);color:var(--brand);}
.btn-h.solid{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-h.solid:hover{background:var(--brand-dark);border-color:var(--brand-dark);}

/* ================= FOOTER（ポータル用） ================= */
.site-footer{
  border-top:1px solid #e3e3e3;
  background:#fff;
  padding:16px 0;
  margin-top:8px;
}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 20px;
  font-size:11.5px;color:#888;
}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 14px;}
.footer-links a:hover{color:var(--brand);}
.footer-copy{font-family:"JetBrains Mono",monospace;font-size:11px;}

/* ================= RESPONSIVE ================= */
@media (max-width:760px){
  .site-catch{display:none;}
  .site-header-inner{padding:0 10px;gap:8px;}
  .header-actions{gap:5px;}
  .btn-h{padding:5px 9px;font-size:10.5px;gap:3px;}
}