/* ============================================================
 * Colourest — header.css  (共通ヘッダー / 全ページ共通の土台)
 * _header.html を include する全ページで読み込むこと
 * ※ design 固有ルール(.clr-main / .clr-stage-wrap / .clr-prod-name)は
 *    design.css に残す
 * ============================================================ */
:root {
  --clr-bg: #ffffff;
  --clr-bd: #e5e3de;
  --clr-bd2: #d4d1ca;
  --clr-tx: #1a1916;
  --clr-tx2: #5a5750;
  --clr-tx3: #9a9590;
  --clr-ac: #1a1916;
  --clr-hh: 56px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--clr-bg);
  color: var(--clr-tx);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 14px;
}
body { padding-top: var(--clr-hh); }

.clr-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--clr-hh); padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--clr-bd,#e0ddd6);
}
.clr-logo{
  font-size:18px; font-weight:300; letter-spacing:.35em;
  text-decoration:none; color:var(--clr-tx);
}
.clr-nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.clr-nav a{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; line-height:1;
  text-decoration:none; color:#6a675f; border-radius:2px;
}
.clr-nav a:hover{ color:#1a1916; background:#f4f2ee; }
.clr-nav a svg{ width:21px; height:21px; display:block; }
.clr-nav-on{
  position:absolute; top:8px; right:8px;
  width:6px; height:6px; border-radius:50%;
  background:#1a7a3a; font-size:0; line-height:0;
}
.clr-badge{
  position:absolute; top:4px; right:3px;
  min-width:16px; height:16px; padding:0 4px;
  background:#c0392b; color:#fff; font-size:10px; line-height:16px;
  text-align:center; border-radius:8px;
  font-family:system-ui,sans-serif; letter-spacing:0;
}
.clr-badge[hidden]{ display:none; }

@media (max-width:600px){
  :root{ --clr-hh:48px; }
  .clr-header{ padding:0 10px; }
  .clr-logo{ font-size:15px; letter-spacing:.2em; }
  .clr-nav a{ width:38px; height:38px; }
  .clr-nav a svg{ width:20px; height:20px; }
}

/* ---------- footer (全ページ共通) ---------- */
.clr-footer{border-top:1px solid #e5e3de;padding:36px 24px 44px;
  background:#fff;text-align:center}
.clr-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 22px;margin:0 0 20px}
.clr-footer-nav a{color:#5a5750;font-size:12px;letter-spacing:.06em;
  text-decoration:none}
.clr-footer-nav a:hover{color:#1a1916;text-decoration:underline;
  text-underline-offset:3px}
.clr-footer-info{color:#9a9590;font-size:11px;line-height:1.9;
  margin:0 0 14px;letter-spacing:.03em}
.clr-footer-info b{color:#5a5750;font-weight:600}
.clr-footer-copy{color:#9a9590;font-size:11px;letter-spacing:.14em;margin:0}