@charset "UTF-8";
/* ============================================================================
 * AIキャリア経験マップ 診断LP 専用スタイル
 * ----------------------------------------------------------------------------
 * 【色・角丸・影・フォントの値について】
 *   ここに書いてある色などの値は、診断ウィジェット側の aigent-career-diag.css が
 *   持っている値を書き写したものです（ウィジェットの中身は外から参照できない
 *   作りのため、二重に持っています）。値を変えるときは両方を同じ値に直してください。
 *
 * 【絶対にやってはいけないこと】
 *   #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;

  --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; }

/* --- S1 ヒーロー ----------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 96px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(220px 160px at 88% 8%, rgba(201, 162, 39, 0.20), rgba(201, 162, 39, 0) 70%),
    linear-gradient(180deg, var(--lp-navy) 0%, var(--lp-navy-light) 100%);
}
.lp-hero-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.lp-hero-sub {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 16px;
}
.lp-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.lp-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--lp-radius-sm);
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}
.lp-cta.lp-cta-hero {
  /* 隣接ブロックとのマージン相殺（大きい方だけが採用される）を避けるため、
     上下とも隣接要素（.lp-badges margin-bottom:20px / .lp-hero-note margin-top:14px）
     より明確に大きい値にしてある。中途半端に大きくしただけだと相殺されて
     見た目の余白が変わらないので注意。 */
  margin: 32px auto;
}
.lp-hero-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* --- KV下部の装飾（9タイプキャラクターのループ帯・2026-08 追加）-----------
 * 情報を持たない背景演出のため aria-hidden="true"。#diag / #aigent-career-diag-root
 * の外側（このセクションは兄弟要素）なので transform を使っても集中モードの
 * 不具合には抵触しない。
 * 9キャラクターを1枚にまとめたスプライト画像（hero-decor-sprite.webp、
 * 実寸200×2340px・9人分＋等間隔60pxを1セット分として作成）を background-image
 * で敷き、background-position だけを動かして流す。<img>を複数並べて transform
 * で動かす方式は、Chromeで一部の画像の描画が数フレームだけ抜け落ちる現象が
 * 実機（Mac / Chrome）で確認されたため採用していない。 */
.lp-hero-decor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  overflow: hidden;
  opacity: 0.7;
  pointer-events: none;
}
.lp-hero-decor-track {
  --tile-w: 748.8px; /* 2340px（スプライト1セット分の実寸幅）× (64px / 200px) */
  height: 100%;
  background-image: url("assets/types/transparent/hero-decor-sprite.webp");
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: var(--tile-w) 100%;
  animation: lp-hero-decor-scroll 28s linear infinite;
}
@keyframes lp-hero-decor-scroll {
  from { background-position-x: 0; }
  to { background-position-x: calc(-1 * var(--tile-w)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-decor-track { animation: none; }
}

/* --- 共通CTAボタン（personal/career/index.html の .btn と同じデザイン）----- */
.lp-cta {
  display: block;
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 58px;
  background: #D29C08;
  /* ★文字色を #fff にしないこと。#D29C08 との比は 2.47:1 で、通常文字の 4.5:1 は
     もちろん大きい文字の 3:1 も下回る（制作チーム 2026-08-31 納品が実際にそうだった）。
     #201a04 は取り込み前から使っていた墨色で 7.02:1。金色の面は保ったまま通る。
     診断ウィジェット側の .acd-start / .acd-next / .acd-exit-cancel も同じ理由で
     同じ色にしてある（#2454 f5f27f268）。片方だけ直すと画面内で色が割れる。 */
  color: #201a04;
  font-size: 18px;
  line-height: 58px;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .lp-cta:hover {
    background: #fff;
    color: #201a04;   /* 反転時も同じ墨色。#D29C08 on #fff は 2.47:1 */
    opacity: 1;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
  }
}
/* ★白のリングにしないこと。hover で背景が #fff に反転するので、その状態だと
   リングが下地に溶けてキーボード操作の現在位置が消える。 */
.lp-cta:focus-visible { outline: 3px solid #201a04; outline-offset: 2px; }
.lp-cta-arrow,
.lp-cta-arrow-up {
  display: none;
}
.lp-cta-bottom { margin-top: 60px; }

/* --- S2 診断ウィジェットの置き場所 ---------------------------------------- */
/* ここに transform 等を書かないこと（ファイル冒頭の注意書き参照）。 */
.lp-diagwrap {
  background: var(--lp-bg-soft);
  padding: 32px 0 36px;
  scroll-margin-top: 8px;
}
#aigent-career-diag-root {
  min-height: 560px;   /* 読み込み中に画面がガタつかないよう場所を先に確保する */
}

/* --- セクション共通 -------------------------------------------------------- */
.lp-section { padding: 36px 0; background: var(--lp-bg); }
.lp-section-soft { background: var(--lp-bg-soft); }
.lp-h2 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--lp-navy);
  margin-bottom: 16px;
}
/* 「結果は登録なしで、最後まで読めます」の見出しだけセンタリングし、
   下の余白も広げる（他セクションの見出しは左寄せのまま変えない）。 */
#lp-preview .lp-h2 {
  text-align: center;
  margin-bottom: 24px;
}

/* 「9つのAIキャリアタイプ」の見出しだけセンタリング（他セクションの見出しは左寄せのまま変えない） */
#lp-types .lp-h2 {
  text-align: center;
}
.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); }

/* --- S3 プレビュー内訳リスト：カード型グリッド表示 -------------------------- */
.lp-preview-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  justify-items: center;
}
.lp-preview-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--lp-border);
  box-shadow: none;
  padding: 16px;
  box-sizing: border-box;
}
.lp-preview-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--lp-navy);
  flex-shrink: 0;
}
.lp-preview-feature-icon svg { display: block; width: 100%; height: 100%; }
.lp-preview-feature-text {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--lp-navy);
}

/* --- S3 結果プレビュー ----------------------------------------------------- */
.lp-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* 結果イメージは画像1枚で出す（伊澤氏 2026-08-19「モックベースで、LPに画像として
   出しましょう」）。制作チームの 2026-08-31 納品はこれ以前の HTMLモック版
   （.lp-mockcard / .lp-mockspec）を土台にしていたため、その分だけ現行へ戻してある。
   画像側に枠・角丸・「表示例」ラベルまで描き込んであるので、ここでは配置と
   可変幅の面倒だけ見る。 */
.lp-mock-figure {
  margin: 0 0 16px;
}
.lp-mock-figure:last-child {
  margin-bottom: 0;
}
.lp-mock-img {
  display: block;
  width: 100%;
  height: auto;           /* width/height 属性と併せて、読み込み前も高さが確保される */
  border-radius: 12px;
}
/* figcaption は使っていない（説明文が画像に焼き込まれているため）。
   デザイナー版で焼き込みが無くなったら、ここにキャプションの体裁を足す。 */

.lp-charstrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 18px;
  opacity: 0.9;
}
.lp-charstrip img { width: 34px; height: 34px; }

/* --- S4 9タイプ一覧 -------------------------------------------------------- */
.lp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.lp-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--lp-muted);
}
.lp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lp-legend-item[data-lp-cluster="creators"] .lp-dot { background: var(--lp-c-creators); }
.lp-legend-item[data-lp-cluster="openers"]  .lp-dot { background: var(--lp-c-openers); }
.lp-legend-item[data-lp-cluster="readers"]  .lp-dot { background: var(--lp-c-readers); }
.lp-legend-item[data-lp-cluster="movers"]   .lp-dot { background: var(--lp-c-movers); }

.lp-typegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lp-type-card {
  background: var(--lp-bg);
  border: 1px solid var(--lp-border);
  border-left-width: 4px;
  border-radius: var(--lp-radius);
  padding: 12px 10px 14px;
  text-align: center;
}
.lp-type-card img { width: 112px; height: 112px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; }
.lp-type-name { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--lp-navy); }
.lp-type-tag { font-size: 12px; line-height: 1.6; color: var(--lp-muted); margin-top: 4px; }
.lp-type-card[data-lp-cluster="creators"] { border-left-color: var(--lp-c-creators); background: linear-gradient(180deg, var(--lp-c-creators-soft), #fff 60%); }
.lp-type-card[data-lp-cluster="openers"]  { border-left-color: var(--lp-c-openers);  background: linear-gradient(180deg, var(--lp-c-openers-soft), #fff 60%); }
.lp-type-card[data-lp-cluster="readers"]  { border-left-color: var(--lp-c-readers);  background: linear-gradient(180deg, var(--lp-c-readers-soft), #fff 60%); }
.lp-type-card[data-lp-cluster="movers"]   { border-left-color: var(--lp-c-movers);   background: linear-gradient(180deg, var(--lp-c-movers-soft), #fff 60%); }

/* --- S5 この診断について --------------------------------------------------- */
.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: 52px;
}

/* --- タブレット・PC -------------------------------------------------------- */
@media (min-width: 768px) {
  body.lp-diag { font-size: 16px; }
  .lp-header { height: 56px; }
  .lp-header-logo { height: 26px; }
  .lp-hero { padding: 44px 0 136px; }
  .lp-hero-title { font-size: 38px; white-space: nowrap; }
  .lp-hero-sub { font-size: 16px; }
  .lp-hero-decor { height: 88px; }
  .lp-hero-decor-track { --tile-w: 1029.6px; } /* 2340px × (88px / 200px) */
  .lp-h2 { font-size: 24px; }
  .lp-section { padding: 52px 0; }
  .lp-diagwrap { padding: 44px 0 48px; }
  .lp-preview-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lp-typegrid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lp-preview-features { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .lp-charstrip img { width: 48px; height: 48px; }
  .lp-footer { padding-bottom: 40px; }
  .lp-sticky { display: none; }   /* PCはファーストビューの導線で足りる */
}

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