@charset "UTF-8";
/* ============================================================
   Prime Partners — 共通ヘッダー／ドロワーだけを切り出したCSS

   各LP（page-valuation.php / page-new-lease.php / page-audit-*.php など）は
   本文のCSSをテンプレート内のインライン <style> に持っている。
   そこへ style.css を丸ごと読ませると .wrapper / .section / .btn などの
   共通クラス名がぶつかるため、**ヘッダーとドロワーの分だけ**をここに切り出す。

   正本は assets/group-top/css/style.css の HEADER セクション。
   あちらを直したらこのファイルにも同じ変更を入れること（重複は承知のうえ、
   LP側のCSSを壊さないことを優先している）。

   変数は各LPの :root に依存させない（:root を持たないLPもある）。
   ヘッダー・ドロワーのスコープで自前に持ち、子要素へ継承させる。
============================================================ */

.pp-header,
.global-menu {
  --white: #ffffff;
  --bg-alt: #f4f6f7;
  --bg-footer: #eef1f2;
  --ink: #1c2b33;
  --text: #333c42;
  --text-sub: #6d7a81;
  --line: #dce2e5;
  --line-strong: #aab6bb;
  --accent: #34718B;
  --accent-dark: #2a5c72;
  --dark: #14252d;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --en: "Jost", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  --dur: 0.3s;
  font-family: var(--sans);
  letter-spacing: 0.05em;
}
.pp-header *, .global-menu * { box-sizing: border-box; }
.pp-header img, .global-menu img { max-width: 100%; height: auto; display: block; }
.pp-header a, .global-menu a { color: inherit; text-decoration: none; }
.pp-header ul, .global-menu ul { list-style: none; margin: 0; padding: 0; }
.pp-header button { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* 白背景のページ用：透過時からインク配色にする（写真ヒーローのLPでは付けない） */
.header-ink .pp-header .logo-white { opacity: 0; }
.header-ink .pp-header .logo-color { opacity: 1; }
.header-ink .global-nav > ul > li > a { color: var(--ink); }
.header-ink .menu-toggle span { background: var(--ink); }
.header-ink .header-tel-num { color: var(--ink); }
.header-ink .header-tel-num:hover { color: var(--accent); }
.header-ink .header-tel-note { color: var(--text-sub); }

/* ============================================================
   HEADER
============================================================ */
/* 既定＝トップ位置：透明でヒーローに溶け込む／スクロール後＝白帯 */
.pp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pp-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex; align-items: center;
  margin: 0 auto;
  padding: 0 0 0 clamp(20px, 3vw, 40px); /* 右0＝CTAブロックを画面の右上角に接地 */
  height: 92px;
  transition: height var(--dur) var(--ease);
}
.pp-header.is-scrolled .header-inner { height: 64px; }

/* ロゴ：白版とカラー版を重ねて状態で切替 */
.header-logo { position: relative; display: block; }
.header-logo img {
  width: clamp(150px, 14vw, 190px); height: auto; display: block;
  transition: width var(--dur) var(--ease), opacity 0.45s var(--ease);
}
.header-logo .logo-white { position: absolute; inset: 0; opacity: 1; }
.header-logo .logo-color { opacity: 0; }
.pp-header.is-scrolled .logo-white, body.menu-open .logo-white { opacity: 0; }
.pp-header.is-scrolled .logo-color, body.menu-open .logo-color { opacity: 1; }
.pp-header.is-scrolled .header-logo img { width: 150px; }

/* グローバルナビ（親） */
.global-nav { margin-left: auto; }
.global-nav > ul { display: flex; gap: clamp(14px, 2vw, 30px); }
.global-nav > ul > li { position: relative; }
.global-nav > ul > li > a {
  position: relative; display: flex; align-items: center;
  padding: 34px 2px;
  font-size: 13px; letter-spacing: 0.08em; color: var(--white);
  transition: color 0.45s var(--ease), padding var(--dur) var(--ease);
}
.pp-header.is-scrolled .global-nav > ul > li > a { color: var(--ink); padding-top: 20px; padding-bottom: 20px; }
.global-nav > ul > li > a::before {
  content: ""; position: absolute; left: 0; bottom: 26px;
  width: 100%; height: 1px; background: currentColor;
  transform: scale(0, 1); transform-origin: center;
  transition: transform var(--dur) var(--ease), bottom var(--dur) var(--ease);
}
.pp-header.is-scrolled .global-nav > ul > li > a::before { bottom: 14px; }
.global-nav > ul > li > a:hover::before,
.global-nav > ul > li:focus-within > a::before { transform: scale(1, 1); }

/* 親タブの矢印 */
.nav-chevron {
  display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease); opacity: 0.75;
}
.has-sub:hover .nav-chevron, .has-sub:focus-within .nav-chevron { transform: rotate(225deg) translateY(-2px); }

/* 子タブ（ドロップダウン）
   親タブの左端起点で右へ開く。中央寄せだと長い会社名の行で画面外へ出るため。
   開閉は hover と focus-within の2つだけ＝JSに依存しない（JSが落ちても開く）。 */
.sub-menu {
  position: absolute; top: 100%; left: -14px;
  transform: translateY(10px);
  min-width: 240px; max-width: min(420px, 84vw); padding: 8px 0;
  background: var(--white); border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
/* 親タブとメニューの隙間でホバーが切れないよう、上に透明な橋を架ける */
.sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; width: 100%; height: 14px; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu ul { display: grid; }
.sub-menu li + li { border-top: 1px solid var(--line); }
.sub-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 22px; white-space: nowrap;
  font-size: 12.5px; letter-spacing: 0.06em; line-height: 1.5; color: var(--ink);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sub-menu a:hover { color: var(--accent); background: var(--bg-alt); }
.sub-menu .ext { font-size: 10px; color: var(--text-sub); }
.sub-note {
  font-size: 10px; letter-spacing: 0.1em; color: var(--text-sub);
  border: 1px solid var(--line-strong); padding: 2px 8px; white-space: nowrap;
}

/* 電話番号ブロック（CTAの左隣・1200px以上で表示）
   既定＝透明ヘッダー上は白、スクロール後はインク。白ヘッダーのページは各LPのCSSでインクに上書き */
.header-tel {
  display: none;
  margin-left: clamp(20px, 2.6vw, 36px);
  text-align: right;
  line-height: 1.3;
}
@media (min-width: 1200px) {
  .header-tel { display: block; }
}
.header-tel-num {
  display: block;
  font-family: var(--en); font-weight: 500;
  font-size: 21px; letter-spacing: 0.06em; color: var(--white);
  transition: color 0.45s var(--ease);
}
.pp-header.is-scrolled .header-tel-num { color: var(--ink); }
.header-tel-num:hover { color: var(--accent); }
.header-tel-note {
  margin-top: 1px; font-size: 10px; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.45s var(--ease);
}
.pp-header.is-scrolled .header-tel-note { color: var(--text-sub); }

/* お問い合わせ：右上に接地する全高のCTAブロック（全ページ共通の型） */
.header-contact {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: clamp(124px, 11vw, 156px);
  margin-left: clamp(16px, 2vw, 28px);
  padding: 0 10px;
  background: var(--accent);
  color: var(--white);
  text-align: center;
  transition: background-color 0.45s var(--ease);
}
.header-contact:hover { background: var(--accent-dark); color: var(--white); }
.header-contact-icon { width: 21px; height: 21px; }
.header-contact-label { font-size: 13.5px; font-weight: 500; letter-spacing: 0.14em; }
/* サブ文言：スクロール時は高さごと滑らかに畳む（display:noneだとアイコンが跳ねる） */
.header-contact-sub {
  font-size: 9.5px; letter-spacing: 0.06em; opacity: 0.78;
  max-height: 16px; margin-top: 0; overflow: hidden;
  transition: opacity 0.3s var(--ease), max-height 0.3s var(--ease), margin-top 0.3s var(--ease);
}
.pp-header.is-scrolled .header-contact-sub {
  opacity: 0; max-height: 0;
  margin-top: -5px; /* flexのgap分を打ち消して中央を保つ */
}

/* hamburger */
.menu-toggle { display: none; position: relative; z-index: 210; width: 48px; height: 48px; margin-left: 8px; }
.menu-toggle span {
  position: absolute; left: 12px; width: 24px; height: 1px; background: var(--white);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease), background-color 0.45s var(--ease);
}
.pp-header.is-scrolled .menu-toggle span, body.menu-open .menu-toggle span { background: var(--ink); }
.menu-toggle span:nth-child(1) { top: 20px; }
.menu-toggle span:nth-child(2) { top: 28px; }
body.menu-open .menu-toggle span:nth-child(1) { top: 24px; transform: rotate(20deg); }
body.menu-open .menu-toggle span:nth-child(2) { top: 24px; transform: rotate(-20deg); }

/* mobile menu */
.global-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--white);
  overflow-y: auto;
  padding: 110px 9vw 60px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
body.menu-open .global-menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
body.menu-open .pp-header {
  z-index: 300; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.menu-group {
  margin-bottom: 34px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.menu-open .menu-group { opacity: 1; transform: translateY(0); }
body.menu-open .menu-group:nth-child(1) { transition-delay: 0.1s; }
body.menu-open .menu-group:nth-child(2) { transition-delay: 0.18s; }
body.menu-open .menu-group:nth-child(3) { transition-delay: 0.26s; }
body.menu-open .menu-group:nth-child(4) { transition-delay: 0.34s; }
body.menu-open .menu-group:nth-child(5) { transition-delay: 0.42s; }
.menu-group-label {
  font-family: var(--en); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 6px;
}
.global-menu ul { display: grid; }
.global-menu a {
  display: block; padding: 11px 4px;
  font-family: var(--serif); font-size: 17px; letter-spacing: 0.08em; color: var(--ink);
}
/* ドロワー内の子項目（サービスの各LP）。ホバーが無いので最初から開いて並べる */
.menu-sub {
  margin: 2px 0 10px; padding-left: 14px;
  border-left: 1px solid var(--line);
}
.menu-sub a {
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  letter-spacing: 0.04em; line-height: 1.6; color: var(--text); padding: 8px 4px;
}
.menu-sub a:hover { color: var(--accent); }
.menu-sub .ext { font-size: 10px; margin-left: 4px; color: var(--text-sub); }

@media (max-width: 1023px) {
  .global-nav, .header-tel { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  /* モバイルもハンバーガーの右に小型の接地CTAを残す */
  .header-contact { width: 92px; margin-left: 8px; gap: 3px; }
  .header-contact-icon { width: 18px; height: 18px; }
  .header-contact-label { font-size: 11px; letter-spacing: 0.08em; }
  .header-contact-sub { display: none; }
}