/* =============================================================
   建設業許可DB — 共通ヘッダー / フッター
   /css/header.css
   Phase 1 / 2026-09-10
   前提: tokens.css → components.css → header.css の順で読み込む
   ポータル（静的HTML・PHP）とブログ（SWELL子テーマ）の両方で使用する
   ============================================================= */

/* -------------------------------------------------------------
   1. ヘッダー本体（追従）
   ------------------------------------------------------------- */
.km-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--km-brand);
  color: var(--km-text-invert);
  box-shadow: var(--km-shadow-1);
}

.km-header__bar {
  display: flex;
  align-items: center;
  gap: var(--km-sp-4);
  max-width: var(--km-container);
  margin-inline: auto;
  padding-inline: var(--km-gutter);
  min-height: var(--km-header-h);
}

/* --- 親ブランド + サービス名 --- */
.km-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--km-sp-3);
  min-height: var(--km-tap-min);
  padding-block: var(--km-sp-2);
  color: var(--km-text-invert);
  text-decoration: none;
  flex-shrink: 0;
}
.km-header__brand:hover { color: var(--km-text-invert); opacity: 0.92; }

.km-header__name {
  font-size: var(--km-fs-lg);
  font-weight: var(--km-fw-bold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.km-header__service {
  font-size: var(--km-fs-xs);
  font-weight: var(--km-fw-normal);
  line-height: 1.2;
  opacity: 0.82;
  white-space: nowrap;
}

/* --- ナビゲーション（PC） --- */
.km-header__nav { margin-left: auto; }
.km-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--km-sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.km-header__nav a {
  display: flex;
  align-items: center;
  min-height: var(--km-tap-min);
  padding-inline: var(--km-sp-4);
  border-radius: var(--km-radius-sm);
  color: var(--km-text-invert);
  font-size: var(--km-fs-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--km-transition);
}
@media (min-width: 901px) and (max-width: 1024px) {
  .km-header__nav a { padding-inline: var(--km-sp-2); }
}
.km-header__nav a:hover { background: rgba(255,255,255,0.12); color: var(--km-text-invert); }
.km-header__nav a[aria-current="page"] {
  /* 2026-09-25 TC-761: 暗い地の上で淡い地（不透明度 0.16）だけの強調をやめ、下線（3px）で現在地を示す */
  background: transparent;
  box-shadow: inset 0 -3px 0 currentColor;
  font-weight: var(--km-fw-bold);
}

/* --- ハンバーガー（SPのみ表示） --- */
.km-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--km-tap-min);
  height: var(--km-tap-min);
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--km-radius-sm);
  background: transparent;
  color: var(--km-text-invert);
  cursor: pointer;
}
.km-header__toggle:hover { background: rgba(255,255,255,0.12); }
.km-header__toggle-bars,
.km-header__toggle-bars::before,
.km-header__toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px; /* TC-653 2026-09-27：高さ 2px の線の丸い端（2px と見た目は同じ・決まりの値に） */
  transition: transform var(--km-transition), opacity var(--km-transition);
}
.km-header__toggle-bars { position: relative; }
.km-header__toggle-bars::before { content: ""; position: absolute; top: -7px; }
.km-header__toggle-bars::after  { content: ""; position: absolute; top:  7px; }

/* 開いている状態はバツ印にする */
.km-header__toggle[aria-expanded="true"] .km-header__toggle-bars { background: transparent; }
.km-header__toggle[aria-expanded="true"] .km-header__toggle-bars::before { top: 0; transform: rotate(45deg); }
.km-header__toggle[aria-expanded="true"] .km-header__toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* -------------------------------------------------------------
   2. スマホ表示（〜900px）
   JSが無効でも崩れないよう、hidden属性ではなくクラスで制御する
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .km-header__toggle { display: flex; }

  .km-header__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--km-brand-deep);
    border-top: 1px solid rgba(255,255,255,0.14);
    max-height: calc(100dvh - var(--km-header-h));
    overflow-y: auto;
  }
  .km-header__nav.is-open { display: block; }

  .km-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--km-sp-2) var(--km-gutter) var(--km-sp-4);
  }
  .km-header__nav li + li { border-top: 1px solid rgba(255,255,255,0.10); }
  .km-header__nav a {
    min-height: 52px;              /* SPでは余裕を持たせる */
    padding-inline: var(--km-sp-2);
    border-radius: 0;
    font-size: var(--km-fs-base);
  }

  .km-header__bar { position: relative; }
  .km-header__name { font-size: var(--km-fs-md); }
  /* SPではサービス名を1行下に落とさず、狭ければ省く */
  .km-header__brand { flex-direction: column; align-items: flex-start; gap: 0; justify-content: center; }
}

@media (max-width: 360px) {
  .km-header__service { display: none; }
}

/* -------------------------------------------------------------
   3. フッター
   ------------------------------------------------------------- */
.km-footer {
  margin-top: var(--km-sp-9);
  background: var(--km-brand-deep);
  color: rgba(255,255,255,0.86);
  font-size: var(--km-fs-sm);
  line-height: var(--km-lh-list);
}
.km-footer__inner {
  max-width: var(--km-container);
  margin-inline: auto;
  padding: var(--km-sp-7) var(--km-gutter) var(--km-sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--km-sp-6);
}
.km-footer__brand-name {
  font-size: var(--km-fs-md);
  font-weight: var(--km-fw-bold);
  color: var(--km-text-invert);
  margin: 0 0 var(--km-sp-2);
}
.km-footer h2 {
  font-size: var(--km-fs-sm);
  color: var(--km-text-invert);
  margin: 0 0 var(--km-sp-3);
  padding-bottom: var(--km-sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.km-footer ul { list-style: none; margin: 0; padding: 0; }
.km-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--km-tap-min);
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}
.km-footer a:hover { color: var(--km-text-invert); text-decoration: underline; }
.km-footer__copyright {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: var(--km-sp-4) var(--km-gutter);
  text-align: center;
  font-size: var(--km-fs-xs);
  color: rgba(255,255,255,0.66);
}

/* -------------------------------------------------------------
   4. 本文領域（ヘッダー直下）
   ------------------------------------------------------------- */
.km-main { display: block; padding-bottom: var(--km-sp-7); }

/* 追従ヘッダーがアンカー先を隠さないようにする */
[id] { scroll-margin-top: calc(var(--km-header-h) + var(--km-sp-4)); }