/* =========================================================
   見つける君 UI  -  mk-shell.css（共通シェル：公開ヘッダ/フッター）
   ---------------------------------------------------------
   旧共通ヘッダ（/common/template/head.html）を使う既存ページでも、
   新デザインの公開ヘッダ/フッター（.pg-header / .pg-footer）を
   新ページ（head_mk）と同じ見た目で表示するためのスタイル。

   方針：
   - layout.css は強リセット/既存クラス衝突があり全ページには読み込めないため、
     公開ヘッダ/フッターに必要な分だけを切り出してここに収録（layout.css と等価）。
   - 汎用名（.logo / .link）は誤爆防止のため .pg-header / .pg-footer 配下にスコープ。
   - 併用前提：tokens.css（変数）＋ components.css（.mk-btn 等）。
   ========================================================= */

:root{
  --mk-maru: "Zen Maru Gothic", var(--mk-font);
  --mk-kaku: "Zen Kaku Gothic New", var(--mk-font);
}

/* ---- 公開ヘッダー ---- */
/* 旧 style.css の `header{height:100px;width:100vw;padding:0 30px;display:flex}` 等の
   “要素セレクタ”が新マークアップにも当たるため、ここで明示的に無効化して新デザインに統一する。 */
.pg-header{position:sticky;top:0;z-index:50;background:var(--mk-white);
  border-bottom:2px solid var(--mk-black);
  height:auto;width:auto;padding:0;display:block;transition:none}
.pg-header__in{max-width:1240px;margin:0 auto;height:72px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.pg-header__nav{display:flex;align-items:center;gap:12px}

/* ロゴ（ヘッダ/フッター配下のみ） */
.pg-header .logo, .pg-footer .logo{font-family:var(--mk-maru);font-weight:700;font-size:22px;
  display:inline-flex;align-items:center;gap:8px;border:2px solid var(--mk-black);
  border-radius:24px;padding:4px 18px;background:var(--mk-white);color:var(--mk-black);
  text-decoration:none}
.pg-header .logo::before, .pg-footer .logo::before{content:"";width:18px;height:18px;
  border-radius:50%;background:var(--mk-logo-blue);border:2px solid var(--mk-black)}

/* ヘッダ内テキストリンク（スコープ） */
.pg-header__nav .link{color:var(--mk-blue);font-size:14px;text-decoration:underline}

/* ---- 公開フッター ---- */
/* 旧 style.css の `footer{width:100%;padding:50px 0 0;border-top:...}` を無効化して統一。 */
.pg-footer{background:var(--mk-ivory);border-top:2px solid var(--mk-black);margin-top:80px;
  width:auto;padding:0}
.pg-footer__in{max-width:1240px;margin:0 auto;padding:32px 24px;display:flex;
  flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.pg-footer__links{display:flex;flex-wrap:wrap;gap:16px 24px;font-size:14px}
.pg-footer__links a{color:var(--mk-black);text-decoration:none}
.pg-footer__links a:hover{text-decoration:underline}
.pg-footer small{color:var(--mk-gray);font-size:12px}