/* ── グローバルヘッダー（白背景・比較サイト系レイアウト）─────── */
.c-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--color-bg-header);
  height: var(--header-h);
  box-shadow: var(--shadow-card);
  border-bottom: 1px solid var(--color-border);
}
.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  height: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-side);
}
@media (min-width: 768px) {
  .c-header__inner { gap: var(--spacing-lg); }
}

/* ロゴ（白背景に馴染むためブランドカラーそのまま） */
.c-header__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.c-header__logo img {
  height: 26px;
  width: auto;
}
@media (min-width: 768px) {
  .c-header__logo img { height: 36px; }
}

/* 業者を探すボタン（スマホ）：ロゴとハンバーガーの間に収める必要があるので
   375pxで窮屈にならないよう文字・余白を絞る */
.c-header__tel-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  background: var(--color-cta);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: 10px var(--spacing-md);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta-sm);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter var(--transition-base);
}
.c-header__tel-btn:hover { filter: brightness(0.9); text-decoration: none; color: #fff; }

/* 375px 級の端末ではロゴ・CTA・ハンバーガーが1行に詰まる。
   ロゴを2px下げ、CTAの左右paddingとgapを詰めて、どれも潰さずに収める
   （CTAの文言は変えない。ここを削ると導線の意味が変わる）*/
@media (max-width: 389px) {
  .c-header__inner { gap: var(--spacing-xs); }
  .c-header__logo img { height: 24px; }
  .c-header__tel-btn { padding: 10px var(--spacing-sm); }
}

/* ── ハンバーガー ──────────────────────────────────
   3本線は擬似要素で描く（span 3つを並べるより DOM が軽い）。
   タップ領域は 44x44 を確保する */
.c-header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--transition-base);
}
.c-header__menu-toggle:hover { background: var(--color-bg-light); }
.c-header__menu-bars,
.c-header__menu-bars::before,
.c-header__menu-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.c-header__menu-bars {
  position: relative;
}
.c-header__menu-bars::before,
.c-header__menu-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.c-header__menu-bars::before { top: -7px; }
.c-header__menu-bars::after  { top: 7px; }
/* 開いているあいだは×に変形（閉じるボタンがドロワー内にもあるが、
   ヘッダー側のトグルでも閉じられることを形で示す） */
.c-header__menu-toggle[aria-expanded="true"] .c-header__menu-bars { background: transparent; }
.c-header__menu-toggle[aria-expanded="true"] .c-header__menu-bars::before { transform: translateY(7px) rotate(45deg); }
.c-header__menu-toggle[aria-expanded="true"] .c-header__menu-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* PCナビ：右寄せ配置
   切り替えは 900px から。768px で切り替えると5項目がヘッダーに収まらず、
   「業者ランキ／ング」「運営者情／報」のように全項目が語の途中で折り返す
   （2026-09-06 に本番の 768px で実測）。タブレット縦の幅では
   ハンバーガーと電話ボタンを残すほうが破綻しない。 */
.c-header__nav { display: none; }
@media (min-width: 900px) {
  .c-header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-left: auto;
    /* ロゴ画像はテキストより下寄りに視覚重心があるため、ナビ文字を少し下げて視覚的な中心を揃える */
    transform: translateY(4px);
  }
  .c-header__nav a {
    color: var(--color-text-primary);
    font-size: var(--fs-meta);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base), color var(--transition-base);
    /* 項目名を語の途中で割らない。収まらなくなったら上の閾値を上げる */
    white-space: nowrap;
  }
  .c-header__nav a:hover,
  .c-header__nav a:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
  }
  /* PCではハンバーガーとスマホ用CTAを出さない
     （utility の hide-desktop は display:block を強制してしまい、
       スマホでの flex 配置が壊れるのでメディアクエリで持つ）*/
  .c-header__menu-toggle,
  .c-header__tel-btn { display: none; }
}

/* ── ドロワー ──────────────────────────────────────
   閉じている状態は visibility:hidden で保持する。
   display:none と違ってスライドのアニメーションが効き、
   かつ子孫がタブ順から外れるのでフォーカスが迷子にならない。 */
.c-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: var(--drawer-w);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform var(--transition-drawer), visibility var(--transition-drawer);
}
.c-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.c-drawer__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: var(--header-h);
  padding: 0 var(--spacing-sm) 0 var(--spacing-md);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
}
.c-drawer__title {
  font-size: var(--fs-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}
.c-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--transition-base);
}
.c-drawer__close:hover { background: var(--color-bg-light); }
.c-drawer__close-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
.c-drawer__close-icon::before,
.c-drawer__close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
}
.c-drawer__close-icon::before { transform: rotate(45deg); }
.c-drawer__close-icon::after  { transform: rotate(-45deg); }

.c-drawer__body {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
}
.c-drawer__list { display: flex; flex-direction: column; }
.c-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 52px;
  padding: var(--spacing-sm) var(--spacing-sm);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
}
.c-drawer__link:hover,
.c-drawer__link:focus-visible {
  background: var(--color-primary-pale);
  color: var(--color-primary);
  text-decoration: none;
}
.c-drawer__link-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.c-drawer__group-title {
  margin: var(--spacing-lg) 0 var(--spacing-xs);
  padding: 0 var(--spacing-sm);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* サービス一覧（<details>）。JSを切っていても開ける素のHTMLで作る */
.c-drawer__services-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 52px;
  padding: var(--spacing-sm);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-base), color var(--transition-base);
}
/* 既定の三角マーカーを消す（Safari は ::-webkit-details-marker が要る） */
.c-drawer__services-summary::-webkit-details-marker { display: none; }
.c-drawer__services-summary:hover,
.c-drawer__services-summary:focus-visible {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}
/* ＋／− は擬似要素で描く（アイコンSVGを1つ増やさない） */
.c-drawer__services-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.c-drawer__services-icon::before,
.c-drawer__services-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base);
}
.c-drawer__services-icon::after { transform: rotate(90deg); }
.c-drawer__services[open] .c-drawer__services-icon::after { transform: rotate(0deg); }
.c-drawer__services .c-drawer__list--sub { padding-left: var(--spacing-sm); }
.c-drawer__link--sub {
  min-height: var(--tap-min);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.c-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* 背景オーバーレイ */
.c-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-drawer), visibility var(--transition-drawer);
}
.c-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ドロワーを開いているあいだ背面をスクロールさせない */
body.is-drawer-open {
  overflow: hidden;
}

/* PCではドロワーを完全に無効化する（リサイズで開いたまま残らないよう
   JS 側でも閉じるが、CSS でも取り除いて二重に守る）
   ★ 閾値はハンバーガーを隠す幅と必ず一致させること ★
   ここだけ 768px に残すと、768〜899px でハンバーガーは見えているのに
   ドロワーが display:none になり、押しても何も出ない状態になる。 */
@media (min-width: 900px) {
  .c-drawer,
  .c-drawer-backdrop { display: none; }
}