/* ============================================================
   SITE — 全ページ共通のヘッダー / フッター
   TOP と下層で同一の型を使う。ページ固有の CSS からは触らない。
   ============================================================ */

/* ---------- HEADER:背景に応じて2状態を切り替える ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gut);
  color: var(--white);
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.hdr.is-solid{ background: var(--off-white); color: var(--ink); box-shadow:0 1px 0 var(--hair); }
.hdr a{ color: inherit; }
.hdr .tlink{ border-bottom-color: currentColor; opacity:.85; }
.hdr .tlink:hover{ opacity:1; }
.hdr__mark{ font-family: var(--ff-display); font-weight:300; font-size:19px; letter-spacing:.16em; text-transform:none; }
.hdr__nav{ display:flex; gap:28px; font-family: var(--ff-display); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform:uppercase; }
.hdr__nav a{ position:relative; padding-bottom:3px; }
.hdr__nav a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition: transform var(--dur-micro) var(--ease); }
.hdr__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width: 899px){ .hdr__nav{ display:none; } .hdr{ padding:16px var(--gut); } }

/* ---------- 13. FOOTER ---------- */
.ftr{ background: var(--ink); color: var(--white); position:relative; padding-block: 96px 40px; }
.ftr__grid{ display:grid; gap:36px; padding-bottom:56px; border-bottom:1px solid var(--hair-light); }
@media (min-width: 900px) and (max-width: 1180px){
  .ftr__grid{ grid-template-columns: 1fr 1fr 1fr; column-gap:28px; }
  .ftr__grid > *:first-child{ grid-column: 1 / -1; margin-bottom:8px; }
}
@media (min-width: 1181px){ .ftr__grid{ grid-template-columns: 1fr 190px 190px 190px; } }
.ftr__grid a{ color: var(--white-70); }
.ftr__grid a:hover{ color: var(--white); }
.ftr__mark{ font-family: var(--ff-display); font-weight:200; font-size: clamp(40px, 7vw, 92px);
  letter-spacing:.14em; margin-top:64px; text-align:center; color: var(--white-45); }
.ftr__end{ display:flex; justify-content:space-between; gap:16px; margin-top:40px;
  font-size: var(--fs-label); color: var(--white-45); flex-wrap:wrap; }