/* ============================================================
   全ページ共通版：上部メニュー＋スマホ下部メニュー
   functions-global-header.php とセットで使用
   （tp-toppage.css の代わりにこちらを読み込む）
   ============================================================ */

/* 全体の本文サイズ */
body{ font-size:15px; }

:root{
  --tp-fg:#111; --tp-line:#e5e5e5; --tp-muted:#888;
  --tp-header-h:64px; --tp-bottom-h:60px;
}

/* ===== 上部メニュー ===== */
.tp-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--tp-line);
}
.tp-header__inner{
  max-width:1200px; margin:0 auto; height:var(--tp-header-h);
  padding:0 24px; display:flex; align-items:center; justify-content:space-between;
}
.tp-logo{ padding-top: 12px; font-size:18px; font-weight:700; color:var(--tp-fg); text-decoration:none; letter-spacing:.08em; }
.tp-logo img{ max-height:32px; width:auto; }

.tp-gnav__list{ display:flex; align-items:center; gap:32px; margin:0; padding:0; list-style:none; }
.tp-gnav__list a{ color:var(--tp-fg); text-decoration:none; font-size:14px; letter-spacing:.06em; padding:6px 0; position:relative; }
.tp-gnav__list a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--tp-fg); transform:scaleX(0); transform-origin:right; transition:transform .3s ease; }
.tp-gnav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ===== スマホ下部固定メニュー ===== */
.tp-bottomnav{ display:none; }
.tp-bottomnav__list{ display:flex; margin:0; padding:0; list-style:none; }
.tp-bottomnav__list li{ flex:1; text-align:center; }
.tp-bottomnav__list a{
  display:flex; align-items:center; justify-content:center; height:var(--tp-bottom-h);
  color:var(--tp-fg); text-decoration:none; font-size:12px; letter-spacing:.04em;
  border-left:1px solid var(--tp-line);
}
.tp-bottomnav__list li:first-child a{ border-left:none; }
.tp-bottomnav__list a:active{ background:#f2f2f2; }

/* ===== レスポンシブ ===== */
@media (max-width:768px){
  .tp-gnav{ display:none; }
  .tp-header__inner{ justify-content:center; padding:0 16px; }
  /* スマホではヘッダーの固定表示を解除 */
  .tp-header{ position:static; }

  .tp-bottomnav{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(8px);
    border-top:1px solid var(--tp-line);
  }
  /* 下部メニューぶんの余白（全ページ） */
  body{ padding-bottom:var(--tp-bottom-h); }
}