/* こびっと 公開ページ共通（2026-11 改善）
   ヘッダーを全公開ページで1種類にそろえる。既存の marketing.css と衝突しないよう kb- 接頭辞を使う。 */
:root {
  --kb-ink: #352822;
  --kb-muted: #6f5b52;
  --kb-brand: #f1785b;
  /* 白文字を載せるボタン用。白との対比 4.6:1（WCAG AA） */
  --kb-action: #c4502f;
  --kb-action-hover: #a9411f;
  --kb-line: #eadfd7;
  --kb-paper: #fffaf6;
}

.kb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 249, .95);
  border-bottom: 1px solid var(--kb-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
.kb-header-inner {
  box-sizing: border-box;
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.kb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kb-ink);
  text-decoration: none;
  line-height: 1;
  flex: 0 0 auto;
}
.kb-brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
}
.kb-brand strong {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.kb-brand small {
  display: block;
  margin-top: 5px;
  color: var(--kb-muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: 0;
}
.kb-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: .85rem;
  font-weight: 600;
}
.kb-nav a,
.kb-login {
  color: var(--kb-ink);
  text-decoration: none;
  white-space: nowrap;
}
.kb-nav a:hover,
.kb-login:hover { color: var(--kb-action); }
.kb-nav a[aria-current="page"] { color: var(--kb-action); }
.kb-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.kb-login { font-size: .85rem; font-weight: 700; }
.kb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--kb-action);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}
.kb-cta:hover { background: var(--kb-action-hover); color: #fff; }
.kb-menu { display: none; position: relative; }
.kb-menu > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kb-line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
}
.kb-menu > summary::-webkit-details-marker { display: none; }
.kb-menu > summary::before {
  content: "";
  display: block;
  width: 18px;
  height: 12px;
  background:
    linear-gradient(var(--kb-ink), var(--kb-ink)) top / 100% 2px no-repeat,
    linear-gradient(var(--kb-ink), var(--kb-ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--kb-ink), var(--kb-ink)) bottom / 100% 2px no-repeat;
}
.kb-menu[open] > summary::before {
  background:
    linear-gradient(45deg, transparent 45%, var(--kb-ink) 45%, var(--kb-ink) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--kb-ink) 45%, var(--kb-ink) 55%, transparent 55%);
  height: 18px;
}
.kb-menu nav {
  position: absolute;
  right: 0;
  top: 48px;
  min-width: 200px;
  display: grid;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--kb-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(80, 52, 36, .16);
}
.kb-menu nav a {
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--kb-ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.kb-menu nav a:hover { background: #fff4ed; }

@media (max-width: 860px) {
  .kb-nav, .kb-login { display: none; }
  .kb-actions { margin-left: auto; gap: 10px; }
  .kb-menu { display: block; }
}
@media (max-width: 420px) {
  .kb-header-inner { min-height: 58px; gap: 10px; }
  .kb-brand small { display: none; }
  .kb-cta { padding: 0 14px; }
}

/* 個人情報の注意を1行にまとめた帯 */
.kb-privacy-line {
  box-sizing: border-box;
  width: min(100% - 32px, 1180px);
  margin: 24px auto;
  padding: 12px 16px;
  border: 1px solid #d8e3dc;
  border-radius: 10px;
  background: #f4f8f5;
  color: #3f4b45;
  font-size: .86rem;
  line-height: 1.7;
}
.kb-privacy-line a { color: #126b62; font-weight: 700; }