@charset "utf-8";

/* =========================================================
   LP専用のヘッダーとメニュー（サポートAI™の業種別ページ）

   コーポレートサイトのヘッダー（.site-header / .site-nav）とは
   クラス名を分けた別物です。片方を直しても、もう片方には影響しません。
     ・コーポレート … css/style.css の .site-header / .site-nav
     ・LP           … このファイルの .lp-header / .lp-nav

   高さ・ロゴの大きさ・三本線ボタンの見た目は、並べたときに違和感が
   出ないようコーポレート側と同じ値にそろえています。
   違うのは、メニューを開いたときの地の色です。表示中の業種の
   テーマカラーに合わせて切り替わります（士業＝紺、建設業＝黄色）。

   最終更新: 2026-09-01
   ========================================================= */

/* ---------- ヘッダー ---------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line, #e2e7ec);
  backdrop-filter: blur(8px);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.lp-brand {
  display: flex;
  align-items: center;
  flex: none;
}

.lp-brand-logo {
  display: block;
  width: auto;
  height: 38px;
}

/* ---------- 三本線ボタン ---------- */

.lp-nav-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line, #e2e7ec);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.lp-nav-toggle:hover {
  background: var(--bg-soft, #f4f7f9);
}

.lp-nav-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.lp-nav-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ink, #1c2530);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lp-nav-bars i:nth-child(1) { top: 0; }
.lp-nav-bars i:nth-child(2) { top: 6.2px; }
.lp-nav-bars i:nth-child(3) { top: 12.4px; }

.lp-nav-toggle[aria-expanded="true"] .lp-nav-bars i:nth-child(1) {
  transform: translateY(6.2px) rotate(45deg);
}

.lp-nav-toggle[aria-expanded="true"] .lp-nav-bars i:nth-child(2) {
  opacity: 0;
}

.lp-nav-toggle[aria-expanded="true"] .lp-nav-bars i:nth-child(3) {
  transform: translateY(-6.2px) rotate(-45deg);
}

/* ---------- ドロワー ---------- */

/* パネルは全業種とも白で固定です。
   業種テーマの色は、地全体ではなく次の2か所のアクセントにだけ使います。
     ・表示中の業種を示す印（左の●と左端の帯、うっすらした地）
     ・項目にカーソルを載せたときの、ごく薄い地
   こうしておくと、業種が増えても区切り線や項目の境目の見え方が変わりません。

   --lpnav-accent は業種のテーマカラーです。theme を持たない業種（士業版）では、
   サイト共通の青（--accent）を使います。 */
.lp-nav {
  --lpnav-accent: var(--accent, #17509e);
  --lpnav-accent-rgb: 23, 80, 158;
  --lpnav-text: #1A1A1A;
  --lpnav-line: #e8ecf1;
  --lpnav-hover: rgba(var(--lpnav-accent-rgb), 0.08);

  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 業種の項目名が「建設業向けAI開発サービス」と長いので、
     コーポレート側の240pxより広くとっています。 */
  width: min(304px, 86vw);
  padding: 6px;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  box-shadow: 0 18px 34px rgba(10, 36, 56, 0.16), 0 2px 6px rgba(10, 36, 56, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.lp-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ドロワーの基準になる箱。ヘッダーの内側に絶対配置します。 */
.lp-header-inner {
  position: relative;
}

.lp-nav a {
  display: block;
  padding: 8px 10px;
  border-bottom: 1px solid var(--lpnav-line);
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--lpnav-text);
  text-decoration: none;
}

.lp-nav a:hover {
  background: var(--lpnav-hover);
  color: var(--lpnav-text);
  text-decoration: none;
}

.lp-nav > a:last-child,
.lp-nav > *:last-child a:last-child {
  border-bottom: 0;
}

/* ---------- 業種の一覧 ---------- */

/* 中身は js/lp-nav.js が js/industry-data.js の一覧から作ります。
   業種を1つ足せば、全業種ページのメニューに自動で増えます。

   業種はひとまとまりとして、下の項目（商品プラン・お申し込みなど）と
   視覚的に分けています。
     ・下に少し太い区切り線と余白を置く
     ・項目名が長いので、文字を一回り小さくして1行に収める */
/* 2026-09-01：下に続く項目が「コーポレートサイトへ」（枠付きのボタン）だけに
   なったので、太い区切り線はやめました。余白だけで十分に分かれて見えます。 */
.lp-nav-industries {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 2px;
}

/* 2026-09-01：9項目すべての先頭に、その業種の色の丸印を出します。
   色は js/lp-nav.js が --lpnav-dot として1項目ずつ渡します
   （値の出どころは js/industry-data.js の theme.fill／士業版は navDot）。
   丸印だけでは現在地が示せなくなるため、表示中の業種は
   「うっすらした地＋左端の帯＋太字」で区別します（下の指定）。 */
.lp-nav-industries a {
  position: relative;
  /* 丸印（左8px・直径6px）のぶんだけ本文を右へ寄せます。 */
  padding-left: 22px;
  padding-right: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.lp-nav-industries a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  /* 色が取れなかったときだけ、そのページのアクセント色にします。 */
  background: var(--lpnav-dot, var(--lpnav-accent));
}

/* まとまりの中の最後の項目は、下の区切り線と重ならないよう線を消します。 */
.lp-nav-industries a:last-child {
  border-bottom: 0;
}

/* 表示中の業種。白いパネルの中で目立つよう、
   ・左端に業種テーマカラーの帯
   ・左に小さな●
   ・うっすらとテーマカラーを敷く
   の3つで示します。文字は黒のままなので、テーマカラーが明るくても読めます。 */
/* 表示中の業種。丸印は9項目すべてに付くようになったので、
   ・左端に業種テーマカラーの帯
   ・うっすらとテーマカラーを敷く
   ・文字を太くする（700 → 800）
   の3つで示します。文字は黒のままなので、テーマカラーが明るくても読めます。
   帯（3px）を足すぶん padding-left を 22px → 19px に減らして、
   丸印と文字の位置が他の項目とそろうようにしています。 */
.lp-nav-industries a[aria-current="page"] {
  padding-left: 19px;
  border-left: 3px solid var(--lpnav-accent);
  border-radius: 6px 0 0 6px;
  background: rgba(var(--lpnav-accent-rgb), 0.16);
  font-weight: 800;
}

/* 帯のぶんだけ内側にずれるので、丸印の位置を戻します（8px − 3px）。 */
.lp-nav-industries a[aria-current="page"]::before {
  left: 5px;
}

/* ---------- コーポレートサイトへ ---------- */

/* 最後の項目だけ、行き先が別サイト側であることが分かるようにします。 */
.lp-nav a.lp-nav-corp {
  margin-top: 6px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  text-align: center;
  font-size: 12.5px;
}

.lp-nav a.lp-nav-corp:hover {
  background: var(--lpnav-hover);
}

/* ---------- 業種テーマに合わせた地の色 ---------- */

/* .has-ind-theme が付く業種（建設業版など）では、アクセントの色だけを
   その業種のテーマカラーに差し替えます。パネルの地は白のままです。
   業種を増やしても、ここを触る必要はありません
   （色は js/industry-data.js の theme から来ます）。 */
.has-ind-theme .lp-nav {
  --lpnav-accent: var(--ind-fill);
  --lpnav-accent-rgb: var(--ind-fill-rgb);
}

/* ---------- 動きを減らす設定への対応 ---------- */

@media (prefers-reduced-motion: reduce) {
  .lp-nav,
  .lp-nav-bars i {
    transition: none;
  }
}