@charset "UTF-8";
/* ============================================================================
 * AIキャリア経験マップ 診断LP 専用スタイル
 * ----------------------------------------------------------------------------
 * 【色・角丸・影・フォントの値について】
 *   ここに書いてある色などの値は、診断ウィジェット側の aigent-career-diag.css が
 *   持っている値を書き写したものです（ウィジェットの中身は外から参照できない
 *   作りのため、二重に持っています）。値を変えるときは両方を同じ値に直してください。
 *
 * 【2026-10 見た目の刷新】
 *   Figma「AIgent診断ツール_Design」初稿 Aパターンに合わせた（伊澤氏 2026-10-06
 *   「見た目だけFigmaで」）。文言は承認済みのまま変えていない。Figma の値は
 *   下の --lp-f-* にまとめてある（名前は Figma 側の変数名に揃えた）。
 *
 * 【絶対にやってはいけないこと】
 *   #diag と #aigent-career-diag-root、およびその親要素に
 *       transform / filter / backdrop-filter / perspective / will-change / contain
 *   を付けないでください（スクロールに合わせて動かす演出も含みます）。
 *   付けると、診断が始まったときの全画面表示が画面全体を覆えなくなり、
 *   背後のボタンを誤タップできてしまう不具合が再発します。
 * ========================================================================== */

/* --- 既存サイトと同じ日本語約物フォント（句読点・かっこの詰め）------------- */
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2");
}

:root {
  --lp-accent: #c9a227;
  --lp-accent-dark: #a9860f;
  --lp-navy: #16233f;
  --lp-navy-light: #2c3f66;
  --lp-ink: #1c2230;
  --lp-muted: #6b7280;
  --lp-border: #d8dbe2;
  --lp-bg: #ffffff;
  --lp-bg-soft: #f6f7f9;
  --lp-radius-sm: 8px;
  --lp-radius: 12px;
  --lp-radius-lg: 20px;
  --lp-shadow-card: 0 2px 10px rgba(20, 25, 40, 0.07);

  --lp-c-creators: #7c3aed;
  --lp-c-openers: #ea580c;
  --lp-c-readers: #2563eb;
  --lp-c-movers: #16a34a;
  --lp-c-creators-soft: #f3ecfd;
  --lp-c-openers-soft: #fdf1e7;
  --lp-c-readers-soft: #eaf1fd;
  --lp-c-movers-soft: #eaf7ee;

  /* Figma の値（2026-10） */
  --lp-f-blue: #2670d2;
  --lp-f-blue-20: #ebf4ff;
  --lp-f-blue-40: #cbe8ff;
  --lp-f-gold: #d29c09;
  --lp-f-gold-text: #8c6400;   /* 金の文字。#d29c09 のままだと淡い青の上で 2.3:1 しかない */
  --lp-f-ink: #07132d;
  --lp-f-ink-2: #193162;
  --lp-f-muted: #5f6779;   /* Figma は #767e90。白で4.07:1しかないので濃くした */
  --lp-f-yellow-top: #fff45a;
  --lp-f-yellow-bottom: #ffe31a;
  --lp-f-hero-top: #1aa0f5;
  --lp-f-hero-bottom: #1673ee;

  --lp-font: "YakuHanJP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
             "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}

/* --- リセット（このページに必要な分だけ）---------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.lp-diag {
  font-family: var(--lp-font);
  color: var(--lp-ink);
  background: var(--lp-bg);
  font-size: 15px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
/* ここの初期化は「要素名だけ」で書く。
   `body.lp-diag h1` のようにクラスを足して書くと、下の各セクションの指定より
   強くなってしまい、余白や画像サイズの指定が効かなくなる（実際に一度そうなった）。 */
h1, h2, p, ul, li, figure, figcaption { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.lp-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}
/* 診断ウィジェットは開始した瞬間に幅480pxの表示へ切り替わるので、
   置き場所の幅もそれに近づけて、幅が急に変わって見えないようにする。 */
.lp-inner-diag { max-width: 560px; }

/* --- S0 ミニヘッダー ------------------------------------------------------- */
.lp-header {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--lp-bg);
  border-bottom: 1px solid var(--lp-border);
}
.lp-header-logo { height: 22px; width: auto; }
/* 診断LPだけ Figma のヘッダー（44px・下線なし）。登録ページ（.lp-entry）も
   この lp.css を読むので、共通の指定は変えずにここで上書きする。 */
body.lp-diag:not(.lp-entry) .lp-header { height: 44px; border-bottom: 0; }
body.lp-diag:not(.lp-entry) .lp-header-logo { height: 20px; }
.lp-header-title {
  min-width: 0;
  margin-left: 14px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.6;
  color: var(--lp-f-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-header-logo { flex: 0 0 auto; }
/* 幅の狭い端末（〜359px）では、ロゴと診断名が横にはみ出すので診断名を出さない。 */
@media (max-width: 359px) {
  .lp-header-title { display: none; }
}
/* PC幅でだけ効かせる改行（Figma の PC 版の改行位置） */
.lp-br-pc { display: none; }

/* --- S1 ヒーロー ----------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0 40px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(3px 3px at 12% 70%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(3px 3px at 86% 64%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(2px 2px at 30% 88%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(2px 2px at 72% 90%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(900px 260px at 50% 78%, rgba(120, 220, 255, 0.28), transparent 70%),
    linear-gradient(180deg, var(--lp-f-hero-top) 0%, var(--lp-f-hero-bottom) 100%);
}

/* キービジュアル: 七角形のレーダー図＋9タイプの窓＋H1。
 * 窓と図形の位置は Figma の img_main（410×361）の座標を百分率にしたもの。
 * 文字の大きさは KV の幅に比例させる（cqw）。KV は #diag の祖先ではないので
 * container-type（＝contain）を付けてよい（冒頭の注意書きは #diag の祖先の話）。 */
.lp-kv {
  position: relative;
  width: min(410px, calc(100% + 32px));
  margin: 0 auto;
  aspect-ratio: 410 / 361;
  container-type: inline-size;
}
.lp-kv-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lp-kv-shape-outer {
  fill: rgba(255, 255, 255, 0.10);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.2;
}
.lp-kv-shape-inner {
  stroke: #7ff3ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(127, 243, 255, 0.9));
}
.lp-kv-shape-web {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}
.lp-kv-windows { position: absolute; inset: 0; }
.lp-kv-win {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border-top: 5px solid #2b7fe0;
  box-shadow: 3px 3px 0 #6ee7ff;
}
.lp-kv-win::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 14px;
  height: 3px;
  background:
    radial-gradient(circle, #2b7fe0 1.3px, transparent 1.6px) 0 50% / 5px 3px repeat-x;
}
.lp-kv-win img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 80%;
  padding: 6% 4% 0;
}
.lp-kv-win-t4 { left: 0.5%;  top: 10.5%; width: 14.5%; height: 15%; transform: rotate(2deg); }
.lp-kv-win-t1 { left: 13.4%; top: 2%;    width: 17.3%; height: 17%; transform: rotate(1deg); }
.lp-kv-win-t7 { left: 62.4%; top: 1%;    width: 15.8%; height: 16%; transform: rotate(-2deg); }
.lp-kv-win-t6 { left: 75.6%; top: 6.6%;  width: 18.5%; height: 17%; transform: rotate(-1deg); }
.lp-kv-win-t9 { left: 83.9%; top: 20.5%; width: 14.6%; height: 14.5%; transform: rotate(1.5deg); }
.lp-kv-win-t2 { left: 1.2%;  top: 74.2%; width: 17%;   height: 17.7%; transform: rotate(-1deg); }
.lp-kv-win-t8 { left: 15.6%; top: 85%;   width: 12.4%; height: 13.3%; transform: rotate(-1.5deg); }
.lp-kv-win-t5 { left: 82%;   top: 70.4%; width: 16.6%; height: 16.6%; transform: rotate(1.5deg); }
.lp-kv-win-t3 { left: 72.7%; top: 81.7%; width: 14.4%; height: 15.8%; transform: rotate(1.5deg); }

/* H1。白抜き文字に紺の縁取り（text-shadow を8方向に重ねて作る）、「AI」だけ黄色。 */
.lp-hero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.01em;
  --lp-edge: #0b2a66;
}
/* 「13の質問で」の吹き出し（Figma: 白い吹き出しに金の数字と紺の文字）。
 * KV の左上、前置き2行の左に重ねる。 */
.lp-hero-title-bubble {
  position: absolute;
  left: 12%;
  top: -1cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 19cqw;
  height: 16cqw;
  border: 0.5cqw solid #0b2a66;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: #fff;
  color: #0b2a66;
  font-size: 3.4cqw;
  line-height: 1.2;
  transform: rotate(-8deg);
  text-shadow: none;
}
.lp-hero-title-num {
  color: #d29c09;
  font-size: 1.7em;
  line-height: 1;
}
.lp-hero-title-lead {
  font-size: 5.2cqw;
  line-height: 1.35;
  margin: 0 0 1.6cqw 14cqw;
  color: #0b2a66;
  text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 2px #fff;
}
.lp-hero-title-main {
  font-size: 9.6cqw;
  color: #fff;
  text-shadow:
    0.35cqw 0 0 var(--lp-edge), -0.35cqw 0 0 var(--lp-edge),
    0 0.35cqw 0 var(--lp-edge), 0 -0.35cqw 0 var(--lp-edge),
    0.25cqw 0.25cqw 0 var(--lp-edge), -0.25cqw 0.25cqw 0 var(--lp-edge),
    0.25cqw -0.25cqw 0 var(--lp-edge), -0.25cqw -0.25cqw 0 var(--lp-edge),
    0 0.9cqw 1.2cqw rgba(7, 19, 45, 0.35);
}
.lp-hero-title-ai {
  color: #ffe600;
  font-size: 1.12em;
  margin-right: 0.04em;
}

.lp-hero-sub {
  max-width: 560px;
  text-wrap: balance;
  margin: 18px auto 14px;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 700;
  color: #fff;
}
.lp-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lp-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
}
.lp-cta.lp-cta-hero {
  margin: 8px auto 0;
}

/* --- 共通CTAボタン（Figma の btn_start: 黄色の面・紺の文字と縁）------------ */
.lp-cta {
  display: block;
  width: 336px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--lp-f-ink-2);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--lp-f-yellow-top) 0%, var(--lp-f-yellow-bottom) 100%);
  box-shadow: 0 4px 0 rgba(7, 19, 45, 0.55);
  color: var(--lp-f-ink-2);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 70px;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, transform .1s ease, box-shadow .1s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  /* Figma のホバー版は金地に白文字だが、#d29c09 と白は 2.47:1 で読めない。
     ★文字を白にしないこと。面だけ金にして、文字は紺のまま（7.6:1）。
     診断ウィジェット側の黄色のボタン（aigent-career-diag.css 21節）も同じ扱い。 */
  .lp-cta:hover {
    background: var(--lp-f-gold);
    color: var(--lp-f-ink);
  }
}
.lp-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(7, 19, 45, 0.55); }
.lp-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--lp-f-ink-2); }
.lp-cta-arrow,
.lp-cta-arrow-up {
  display: none;
}
.lp-cta-bottom { margin-top: 10px; }

/* 「\ 登録不要・無料 /」の飾り見出し（下部CTAの直上） */
.lp-cta-catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 44px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffe600;
  text-shadow:
    1.5px 0 0 var(--lp-f-ink-2), -1.5px 0 0 var(--lp-f-ink-2),
    0 1.5px 0 var(--lp-f-ink-2), 0 -1.5px 0 var(--lp-f-ink-2),
    1px 1px 0 var(--lp-f-ink-2), -1px 1px 0 var(--lp-f-ink-2),
    1px -1px 0 var(--lp-f-ink-2), -1px -1px 0 var(--lp-f-ink-2);
}
.lp-cta-catch::before,
.lp-cta-catch::after {
  content: "";
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--lp-f-ink-2);
  transform: rotate(-24deg);
}
.lp-cta-catch::after { transform: rotate(24deg); }

/* --- S2 診断ウィジェットの置き場所 ---------------------------------------- */
/* ここに transform 等を書かないこと（ファイル冒頭の注意書き参照）。 */
/* ★2026-10 から、この置き場所は画面に出さない（Figma では CTA から全画面の設問へ
 *   直接進む）。intro カードは高さ0の箱の中に残し、lp.js が CTA のクリックで
 *   その「はじめる」を押す（HTMLElement.click() は見えない要素にも効く）。
 * ★display:none にしないこと。集中モードの全画面表示はこの箱の**子孫**
 *   （position:fixed）なので、display:none だと設問画面ごと消える。
 *   overflow:hidden は fixed の子孫を切り取らないので使ってよい。
 * ★visibility は lp.js が集中モードの間だけ .lp-diagwrap-active で戻す。
 *   隠したままだと全画面表示まで見えなくなる（visibility は shadow DOM の中まで継承する）。
 * ★ウィジェットの読み込みに失敗したとき（.acd-js-failed）は、その旨の表示が
 *   見えるように箱を開く。CTA から3秒待っても「はじめる」が現れなかったとき
 *   （lp.js が .lp-diagwrap-fallback を付ける）も、intro カードを押せるように開く。 */
.lp-diagwrap {
  height: 0;
  overflow: hidden;
  padding: 0;
  visibility: hidden;
}
.lp-diagwrap.lp-diagwrap-active { visibility: visible; }
.lp-diagwrap.lp-diagwrap-fallback,
.lp-diagwrap:has(.acd-js-failed) {
  height: auto;
  padding: 32px 0;
  visibility: visible;
}

/* --- セクション共通 -------------------------------------------------------- */
.lp-section { padding: 36px 0; background: var(--lp-bg); }
.lp-section-soft { background: var(--lp-bg-soft); }
.lp-section-types,
.lp-section-about { background: var(--lp-f-blue-20); }
.lp-section-types { padding-bottom: 8px; }
.lp-h2 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--lp-navy);
  margin-bottom: 16px;
}
/* 「9つのAIキャリアタイプ」の見出しだけセンタリング（他セクションの見出しは左寄せのまま変えない） */
#lp-types .lp-h2 {
  text-align: center;
}
/* 「9つの／AI／キャリアタイプ」の飾り見出し（Figma の ttl_9type）。 */
.lp-h2-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 28px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
  --lp-edge: var(--lp-f-ink-2);
}
.lp-h2-bubble {
  padding: 2px 10px;
  border: 2px solid var(--lp-f-ink-2);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-f-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.lp-h2-ai,
.lp-h2-outline {
  text-shadow:
    1.5px 0 0 var(--lp-edge), -1.5px 0 0 var(--lp-edge),
    0 1.5px 0 var(--lp-edge), 0 -1.5px 0 var(--lp-edge),
    1px 1px 0 var(--lp-edge), -1px 1px 0 var(--lp-edge),
    1px -1px 0 var(--lp-edge), -1px -1px 0 var(--lp-edge);
}
.lp-h2-ai { color: #ffe600; font-size: 1.2em; }
.lp-h2-outline { color: #fff; }
.lp-list { margin: 16px 0 0; }
.lp-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.9;
}
.lp-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lp-accent);
}
.lp-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--lp-muted);
}
.lp-note-save { font-weight: 700; color: var(--lp-navy-light); }

/* --- S4 9タイプ一覧（Figma: 白い枠に絵・金の名前・紺の一言）--------------- */
.lp-typegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
}
.lp-type-card { text-align: center; }
/* 2列のとき、9枚目（余りの1枚）は Figma のスマホ版どおり中央に置く。 */
.lp-type-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px);
}
.lp-type-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 192 / 154;
  margin-bottom: 10px;
  border: 1px solid var(--lp-f-gold);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 3px var(--lp-f-blue-40);
}
.lp-type-visual img { width: 70%; height: auto; max-width: 132px; }
.lp-type-name { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--lp-f-gold-text); }
.lp-type-tag { font-size: 12px; line-height: 1.65; color: var(--lp-f-ink); margin-top: 2px; }
.lp-types-lead {
  margin: -12px 0 24px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--lp-f-ink);
}

/* --- S5 この診断について（Figma: 白いカード）-------------------------------- */
.lp-section-about { padding-top: 24px; text-align: center; }
.lp-about-card {
  padding: 16px 20px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(177, 185, 203, 0.6);
  text-align: left;
}
.lp-about-card .lp-h2 {
  font-size: 15px;
  color: var(--lp-f-ink);
  margin-bottom: 4px;
}
/* 設問／所要時間／結果 の表（Figma: 左に青い項目名・右に本文） */
.lp-about-table { margin: 10px 0 4px; }
.lp-about-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
}
.lp-about-row dt { margin: 0; font-weight: 700; color: var(--lp-f-blue); }
.lp-about-row dd { margin: 0; color: var(--lp-f-ink-2); }
.lp-about-privacy {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--lp-f-muted);
  text-align: left;
}
.lp-checklist { margin-top: 4px; }
.lp-checklist li {
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.85;
}
.lp-checklist li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--lp-muted);
}
/* ★「診断で分かること／分からないこと」の対（2026-08-24 伊澤氏指摘）は、
   ✓ と ✗ の記号と、緑／赤の色でしか画面上で区別できない。
   ★セレクタを `.lp-check-yes::before` だけにしないこと。すぐ上の
   `.lp-checklist li::before` は詳細度 (0,1,2) で、クラス1つの
   `.lp-check-yes::before` (0,1,1) に**勝つ**。実際、制作チームの 2026-08-31 納品を
   当てた直後は content こそ ✓/✗ になったのに color だけ上に負けて、
   両方 var(--lp-muted) の灰色になっていた（実ブラウザで計測して気付いた）。
   `.lp-checklist` を前置して (0,2,1) にしてある。
   ★同様に、`.lp-checklist li::before` へ content を足すのも禁止。足すと
   記号の側も一律になる。 */
.lp-checklist .lp-check-yes::before { content: "✓"; color: #16a34a; }
.lp-checklist .lp-check-no::before { content: "✗"; color: #c0392b; }

/* --- S6 フッター ----------------------------------------------------------- */
.lp-footer {
  background: #07132D;
  color: rgba(255, 255, 255, 0.82);
  padding: 28px 0 96px; /* 追従ボタンに隠れないよう下に余白を取る */
  font-size: 12.5px;
  line-height: 1.9;
}
.lp-footer-company { font-weight: 700; color: #fff; }
.lp-nowrap { white-space: nowrap; }
.lp-footer-fee { margin-top: 6px; }
.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 14px;
}
.lp-footer-links a { text-decoration: underline; }
.lp-footer-link-pending { color: rgba(255, 255, 255, 0.45); }
.lp-footer-copy { margin-top: 14px; color: #999; text-align: center; }

/* --- 追従ボタン ------------------------------------------------------------ */
.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--lp-bg);        /* 半透明にしないこと */
  border-top: 1px solid var(--lp-border);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
}
.lp-sticky[hidden] { display: none; }
.lp-cta-sticky {
  font-size: 16px;
  line-height: 50px;
  box-shadow: 0 3px 0 rgba(7, 19, 45, 0.55);
}

/* --- タブレット・PC -------------------------------------------------------- */
@media (min-width: 768px) {
  body.lp-diag { font-size: 16px; }
  .lp-header { height: 56px; }
  .lp-br-pc { display: inline; }
  .lp-header-logo { height: 26px; }
  .lp-hero { padding: 10px 0 56px; }
  .lp-hero-sub { font-size: 15px; }
  .lp-cta.lp-cta-hero { width: 314px; }
  .lp-h2 { font-size: 24px; }
  .lp-h2-deco { font-size: 30px; }
  .lp-section { padding: 52px 0; }
  .lp-section-types { padding-bottom: 8px; }
  .lp-section-about { padding-top: 32px; }
  .lp-typegrid { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
  .lp-type-card:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
  .lp-footer { padding-bottom: 40px; }
  .lp-sticky { display: none; }   /* PCはファーストビューの導線で足りる */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}