/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #1E293B;
  line-height: 1.7;
  background: #FFFFFF;
  font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-soft: #EFF6FF;
  --accent: #F97316;
  --accent-dark: #EA580C;
  --accent-soft: #FFF7ED;
  --text: #1E293B;
  --text-sub: #64748B;
  --text-light: #94A3B8;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-mid: #F1F5F9;
  --border: #E2E8F0;
  --success: #10B981;
}

.page { max-width: 480px; margin: 0 auto; overflow: hidden; }

/* =================================================================
   Chat App — チャット型LP
   上半分：小宮さん／下半分：会話＋入力
================================================================= */
html, body { height: 100%; }
body { background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%); }

.chat-app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0,0,0,0.06);
}

/* ===== Stage（小宮 上半分） ===== */
.chat-stage {
  position: relative;
  height: 33%;
  min-height: 200px;
  max-height: 300px;
  background: linear-gradient(180deg, #FFEDD5 0%, #FED7AA 100%);
  overflow: hidden;
}
.chat-stage-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(251,146,60,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 80%, rgba(252,211,77,0.30) 0%, transparent 60%);
}
.chat-stage-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.chat-stage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: opacity 0.4s ease;
}
.chat-stage-info {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.chat-stage-badge {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.chat-stage-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.chat-stage-name strong { color: var(--accent); }

.chat-stage-progress {
  position: absolute;
  right: 12px;
  bottom: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 12px;
  width: 140px;
}
.chat-stage-progress-bar {
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.chat-stage-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #FB923C);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.chat-stage-progress-label {
  font-size: 10px;
  color: var(--text-sub);
  font-weight: 700;
  text-align: right;
}

/* リセットボタン */
.chat-stage-reset {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s ease;
}
.chat-stage-reset:hover {
  color: var(--accent);
  transform: rotate(-30deg);
}
.chat-stage-reset:active { transform: scale(0.92); }

/* ===== 会話エリア ===== */
.chat-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #FFFBF5;
}
.chat-history {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cm {
  display: flex;
  max-width: 88%;
  animation: msgIn 0.32s ease both;
}
.cm-new { animation: msgIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cm-ai { align-self: flex-start; }
.cm-user { align-self: flex-end; }
.cm-bubble {
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 14px;
  border-radius: 16px;
  word-break: break-word;
}
.cm-ai .cm-bubble {
  background: #fff;
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.04);
}
.cm-user .cm-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-bottom-right-radius: 4px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(249,115,22,0.25);
}
.cm-skip {
  color: rgba(255,255,255,0.85);
  font-style: italic;
  font-size: 12px;
}
.cm-marker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-dark);
  background: rgba(249,115,22,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* Typing dots */
.typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-items: center;
}
.typing span {
  width: 7px; height: 7px;
  background: rgba(249,115,22,0.5);
  border-radius: 50%;
  animation: typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== 入力エリア ===== */
.chat-input {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 14px 16px;
  max-height: 50%;
  overflow-y: auto;
}
.ci-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ci-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  transition: all 0.15s ease;
}
.ci-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.ci-choice:active { transform: scale(0.98); }
.ci-choice.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.ci-choice.sel::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}
.ci-emoji { font-size: 18px; }

.ci-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.ci-hint {
  font-size: 11px;
  color: var(--text-sub);
  flex: 1;
}
.ci-skip {
  flex-shrink: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}
.ci-send {
  flex: 1;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.ci-send:disabled {
  background: var(--bg-mid);
  color: var(--text-light);
  box-shadow: none;
  cursor: not-allowed;
}
.ci-text {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  color: var(--text);
  resize: none;
  min-height: 90px;
  outline: none;
}
.ci-text:focus { border-color: var(--accent); }

/* ===== Summary card (Phase 1 整理) ===== */
.summary-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 2px solid #FED7AA;
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 4px;
}
.summary-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.summary-block {
  margin-bottom: 12px;
}
.summary-block-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.summary-block ul {
  list-style: none;
  padding: 0;
}
.summary-block li {
  font-size: 13px;
  line-height: 1.7;
  padding-left: 14px;
  position: relative;
}
.summary-block li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.summary-block strong {
  color: var(--accent-dark);
  font-weight: 800;
}
.summary-conclusion {
  font-size: 13px;
  line-height: 1.8;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  margin-top: 6px;
  font-weight: 600;
}
.summary-conclusion strong { color: var(--accent); }

/* ===== ES Loading / Result ===== */
.es-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.es-loading-spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(249,115,22,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: es-spin 0.8s linear infinite;
}
@keyframes es-spin { to { transform: rotate(360deg); } }
.es-loading-text {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 700;
}

.es-card {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
}
.es-card-tab {
  position: absolute;
  top: -12px;
  left: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.es-block {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.es-block:last-of-type {
  border-bottom: 0;
}
.es-block-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.es-block-body {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text);
}
.es-meta {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.es-meta span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--bg-mid);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ===== Job cards ===== */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
}
.job-rank {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  background: var(--accent);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.job-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.job-role {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 700;
  margin-bottom: 8px;
}
.job-salary {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 8px;
}
.job-salary strong {
  color: var(--accent-dark);
  font-weight: 900;
  font-size: 14px;
}
.job-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.job-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #FED7AA;
  padding: 2px 7px;
  border-radius: 999px;
}
.job-vibe {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.6;
  background: var(--bg-soft);
  padding: 8px 10px;
  border-radius: 8px;
}

/* ===== Value preview ===== */
.value-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.value-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.value-num {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-title {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 2px;
}
.value-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-sub);
}

/* ===== Profile form ===== */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pf-section {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.pf-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.pf-section label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.pf-section input,
.pf-section select {
  width: 100%;
  padding: 9px 10px;
  margin-top: 3px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.pf-section input:focus,
.pf-section select:focus {
  border-color: var(--accent);
}
.pf-row {
  display: grid;
  gap: 8px;
}
.pf-row-2 { grid-template-columns: 1fr 1fr; }
.pf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.pf-row-zip {
  display: flex;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.pf-row-zip label { flex: 1; margin-bottom: 0; }
.pf-zip-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}
.pf-edu-suggest {
  font-size: 11px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.5;
  margin-top: 6px;
}
.pf-edu-suggest:empty { display: none; }
.pf-radios {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-radios label {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0;
}
.pf-radios input { width: auto; margin-right: 4px; }
.pf-terms {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.pf-terms-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0;
}
.pf-terms-check input { width: auto; }
.pf-terms-check a {
  color: var(--accent-dark);
  text-decoration: underline;
}
.pf-submit {
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.pf-submit:disabled {
  background: var(--bg-mid);
  color: var(--text-light);
  box-shadow: none;
  cursor: not-allowed;
}

/* ===== Complete card ===== */
.complete-card {
  background: linear-gradient(135deg, #FFEDD5, #FED7AA);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.complete-icon {
  font-size: 36px;
  margin-bottom: 6px;
}
.complete-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.complete-id {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.complete-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.cta-btn-sub {
  background: #fff !important;
  color: var(--accent-dark) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: none !important;
  animation: none !important;
  font-weight: 800 !important;
}

/* ===== CTA ===== */
.cta-final {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cta-btn {
  width: 100%;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(249,115,22,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: cta-pulse 2s ease-in-out infinite;
}
.cta-btn .cta-arrow { font-size: 17px; }
.cta-btn:active { transform: scale(0.98); }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(249,115,22,0.4); }
  50% { box-shadow: 0 8px 30px rgba(249,115,22,0.65); }
}
.cta-checks {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cta-checks span {
  font-size: 10px;
  color: var(--text-sub);
  font-weight: 700;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.logo {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.logo span {
  color: var(--accent);
  margin: 0 2px;
}
.header-cta {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}

/* ===== FV (右下半身ピーク版) ===== */
.fv {
  position: relative;
  padding: 24px 20px 24px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(165deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
}
.fv::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251,146,60,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.fv-content {
  position: relative;
  z-index: 2;
}

/* Check chips at top */
.fv-checks-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fv-checks-top span {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(249, 115, 22, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* 右下からピーク（半身が見える配置） */
.fv {
  padding-bottom: 180px; /* 写真用スペース */
}
.fv-corner {
  position: absolute;
  bottom: -4px;
  right: -32px;
  width: 210px;
  z-index: 3;
  pointer-events: none;
}
.fv-corner img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(-4px 8px 24px rgba(249,115,22,0.30));
  transition: opacity 0.3s ease;
  -webkit-mask-image: linear-gradient(180deg, black 88%, transparent 100%);
  mask-image: linear-gradient(180deg, black 88%, transparent 100%);
}
/* ✓ checksは写真と重ならないように */
.fv-cta-checks {
  justify-content: flex-start;
  padding-right: 180px;
}
.fv-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: #DBEAFE;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.fv-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.fv-title-line1 { display: block; color: var(--text); }
.fv-title-line2 { display: block; color: var(--text); }
.fv-title-mark {
  display: inline-block;
  color: var(--accent);
  background: linear-gradient(transparent 55%, #FED7AA 55%);
  padding: 0 4px;
}
.fv-sub {
  font-size: 14px;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 18px;
  font-weight: 600;
}
.fv-sub strong {
  color: var(--accent);
  font-weight: 900;
}

/* FV target badge (N1) */
.fv-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
}
.fv-target-icon { font-size: 14px; }
.fv-target-text { letter-spacing: 0.02em; }

/* FV name card */
.fv-name-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid #FED7AA;
  border-radius: 14px;
  padding: 7px 14px 7px 7px;
  margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.18);
}
.fv-name-card-badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(249, 115, 22, 0.4);
  animation: badge-pulse 2s ease-in-out infinite;
}
.fv-name-card-text {
  text-align: left;
}
.fv-name-card-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.fv-name-card-name strong { color: var(--accent); }
.fv-name-card-role {
  font-size: 10px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

/* FV Trust badges */
.fv-trust {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  background: #fff;
  border: 2px solid #FED7AA;
  border-radius: 16px;
  padding: 16px 8px;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.12);
}
.fv-trust-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fv-trust-divider {
  width: 1px;
  background: #FED7AA;
  margin: 4px 0;
}
.fv-trust-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}
.fv-trust-num .num { font-feature-settings: "tnum"; }
.fv-trust-plus {
  font-size: 13px;
  font-weight: 800;
  margin-left: 1px;
}
.fv-trust-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.4;
}

/* FV CTA checks */
.fv-cta-checks {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.fv-check {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Chat visual */
.fv-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
  margin-bottom: 28px;
  text-align: left;
}
.chat-bubble {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  animation: fadeInUp 0.4s ease both;
}
.chat-bubble.ai { animation-delay: 0.1s; }
.chat-bubble.user { animation-delay: 0.3s; justify-content: flex-end; }
.chat-bubble.ai:nth-of-type(3) { animation-delay: 0.5s; }
.chat-bubble.result {
  animation-delay: 0.7s;
  justify-content: center;
  margin-top: 4px;
}
.chat-avatar {
  width: 28px; height: 28px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-text {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 70%;
}
.chat-bubble.ai .chat-text {
  background: var(--bg-mid);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-bubble.user .chat-text {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.result-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  background: #D1FAE5;
  padding: 8px 16px;
  border-radius: 999px;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== CTA Button ===== */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
  transition: transform 0.15s ease;
  animation: pulse 2s ease-in-out infinite;
}
.cta-primary:active { transform: scale(0.98); }
.cta-primary-lg {
  padding: 20px 24px;
  font-size: 18px;
}
.cta-arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.cta-primary:hover .cta-arrow { transform: translateX(4px); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35); }
  50% { box-shadow: 0 8px 28px rgba(249, 115, 22, 0.55); }
}
.cta-note {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 10px;
  line-height: 1.6;
}

/* ===== Section common ===== */
.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 8px;
}
.section-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

/* ===== Pain ===== */
.pain {
  padding: 48px 20px;
  background: var(--bg-soft);
}
.pain-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.pain-item {
  background: #fff;
  padding: 16px 12px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--border);
}
.pain-emoji {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}
.pain-item p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.pain-item strong {
  color: var(--accent);
  font-weight: 800;
}
.pain-cut {
  background: var(--primary);
  color: #fff;
  padding: 18px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

/* ===== Features ===== */
.features {
  padding: 48px 20px;
}
.feature-card {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 16px;
  position: relative;
}
.feature-card:last-child { margin-bottom: 0; }
.feature-num {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  margin: 8px 0 10px;
  color: var(--text);
}
.feature-card p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* ===== Flow ===== */
.flow {
  padding: 48px 20px;
  background: var(--primary-soft);
}
.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.flow-step {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.flow-step-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.flow-step-icon {
  font-size: 36px;
  margin-bottom: 4px;
}
.flow-step h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}
.flow-step p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
}
.flow-arrow {
  font-size: 20px;
  color: var(--primary);
  font-weight: 900;
}

/* ===== Stats ===== */
.stats {
  padding: 40px 20px;
  background: var(--text);
  color: #fff;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  text-align: center;
}
.stat-num {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: #FCD34D;
  letter-spacing: -0.02em;
}
.stat-unit {
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
}
.stat-label {
  font-size: 12px;
  color: #CBD5E1;
  margin-top: 6px;
}

/* ===== Compare ===== */
.compare {
  padding: 48px 20px;
}
.compare-table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  font-size: 13px;
}
.compare-row > div {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
.compare-row:last-child > div { border-bottom: 0; }
.compare-head {
  background: var(--bg-mid);
  font-weight: 800;
  font-size: 12px;
}
.compare-us {
  background: var(--primary-soft) !important;
  color: var(--primary);
  font-weight: 800;
}
.compare-head .compare-us {
  background: var(--primary) !important;
  color: #fff;
}
.compare-label {
  font-weight: 700;
  background: var(--bg-soft);
}

/* ===== CTA section ===== */
.cta-section {
  padding: 56px 20px;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%);
  text-align: center;
}
.cta-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.cta-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 24px;
  line-height: 1.7;
}

/* ===== FAQ ===== */
.faq {
  padding: 48px 20px;
  background: var(--bg-soft);
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-item summary {
  padding: 14px 44px 14px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--primary);
  font-weight: 900;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* ===== Komiya hero (大きい紹介セクション) ===== */
.komiya-hero {
  padding: 56px 20px 48px;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.komiya-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.komiya-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(249,115,22,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.komiya-hero .section-title {
  margin-bottom: 28px;
  position: relative;
}
.komiya-hero-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
}
.komiya-hero-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 6px solid #fff;
  box-shadow: 0 16px 40px rgba(249, 115, 22, 0.25);
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 2;
}
.komiya-hero-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #F97316, #FB923C, #FCD34D, #FB923C, #F97316);
  z-index: 0;
  animation: ring-rotate 8s linear infinite;
  opacity: 0.6;
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.komiya-hero-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
  z-index: 3;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.komiya-hero-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 4px;
  position: relative;
}
.komiya-hero-name strong { color: var(--accent); }
.komiya-hero-role {
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  position: relative;
}
.komiya-hero-lead {
  font-size: 14px;
  color: var(--text);
  line-height: 1.9;
  margin-bottom: 28px;
  position: relative;
}
.komiya-hero-lead strong {
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
}

/* Stats grid */
.komiya-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
}
.komiya-stat {
  background: #fff;
  border-radius: 14px;
  padding: 18px 12px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.10);
  border: 1.5px solid rgba(249, 115, 22, 0.15);
}
.komiya-stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}
.komiya-stat-num .num {
  font-feature-settings: "tnum";
}
.komiya-stat-plus {
  font-size: 18px;
  font-weight: 800;
  margin-left: 2px;
}
.komiya-stat-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.komiya-stat-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

/* Speech message */
.komiya-hero-msg {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  border: 1.5px solid rgba(249, 115, 22, 0.15);
}
.komiya-hero-msg::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
}
.komiya-hero-msg p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  font-weight: 600;
}

/* Intro screen avatar (replaces icon) */
.intro-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}
.intro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.intro-greeting {
  font-size: 13px;
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

/* Result hero avatar */
.result-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

/* Loading screen avatar (replaces spinner) */
.loading-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  border: 4px solid var(--primary-soft);
  animation: pulse-loading 1.5s ease-in-out infinite;
}
.loading-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
@keyframes pulse-loading {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0.3); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(37,99,235,0); }
}

/* ===== Footer ===== */
.site-footer {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
  background: #fff;
}

/* ===== Flow App (flow.html) ===== */
.flow-app {
  min-height: 100vh;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}
.flow-header {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.flow-progress-bar {
  height: 4px;
  background: var(--bg-mid);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.flow-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #60A5FA);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 0%;
}
.flow-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-sub);
}
.flow-progress-text span:last-child { font-weight: 700; color: var(--primary); }

.flow-body {
  flex: 1;
  padding: 24px 20px 120px;
  display: flex;
  flex-direction: column;
}

/* Question (chat style) */
.q-screen {
  animation: slideIn 0.35s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.q-ai-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.q-ai-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.q-ai-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.q-ai-bubble {
  background: #fff;
  padding: 14px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 80%;
}
.q-ai-reaction {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.q-ai-question {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}

/* Choices */
.q-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.q-choice {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: all 0.15s ease;
  color: var(--text);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.q-choice:active {
  transform: scale(0.98);
}
.q-choice:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.q-choice.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.q-choice.selected::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  margin-right: 4px;
}
.q-choice-emoji {
  font-size: 20px;
}

/* Text input */
.q-textarea {
  width: 100%;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  color: var(--text);
  resize: none;
  min-height: 100px;
  transition: border-color 0.15s ease;
}
.q-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
.q-char-count {
  font-size: 11px;
  color: var(--text-light);
  text-align: right;
  margin-top: 4px;
}
.q-hint {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 6px;
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--primary-soft);
  border-radius: 8px;
}

/* Footer buttons */
.flow-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent 0%, #fff 40%);
  display: flex;
  gap: 8px;
  align-items: center;
}
.flow-back {
  flex-shrink: 0;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}
.flow-skip {
  flex-shrink: 0;
  padding: 12px 14px;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}

/* Section banner (before text questions) */
.q-section-banner {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #78350F;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
  animation: slideIn 0.3s ease;
}
.q-section-banner-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  margin-top: 4px;
}
.flow-next {
  flex: 1;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.flow-next:disabled {
  background: var(--bg-mid);
  color: var(--text-light);
  box-shadow: none;
  cursor: not-allowed;
}

/* Loading */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.loading-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.loading-sub {
  font-size: 13px;
  color: var(--text-sub);
}

/* ===== ES Result ===== */
.result-screen {
  padding: 24px 16px 40px;
}
.result-hero {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border-radius: 16px;
  margin-bottom: 20px;
}
.result-check {
  width: 56px; height: 56px;
  background: var(--success);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  margin: 0 auto 12px;
  animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}
.result-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.result-sub {
  font-size: 13px;
  color: var(--text-sub);
}

.es-doc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.es-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--border);
}
.es-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.es-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.es-content {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  white-space: pre-wrap;
}
.es-profile-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--bg-mid);
}
.es-profile-row:last-child { border-bottom: 0; }
.es-profile-key { color: var(--text-sub); }
.es-profile-val { font-weight: 700; }

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.result-hint {
  font-size: 12px;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.7;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px dashed var(--border);
}
.result-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  width: 100%;
}

/* ===== Score card ===== */
.score-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.score-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.score-num {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.score-max {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-light);
  margin-left: 2px;
}
.score-status {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
}
.score-bar {
  height: 8px;
  background: var(--bg-mid);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: scoreFill 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes scoreFill {
  from { width: 0 !important; }
}
.score-hint {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
}

/* ===== Feedback ===== */
.feedback-section {
  margin-bottom: 24px;
}
.feedback-heading {
  text-align: center;
  margin-bottom: 16px;
  padding: 16px 12px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border-radius: 12px;
}
.feedback-heading h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
  margin-bottom: 4px;
}
.feedback-heading p {
  font-size: 13px;
  color: var(--primary);
  font-weight: 700;
}
.feedback-empty {
  text-align: center;
  padding: 24px;
  background: #D1FAE5;
  border-radius: 12px;
  font-weight: 800;
  color: #065F46;
}
.feedback-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 12px;
  position: relative;
}
.feedback-high { border-left: 4px solid #EF4444; }
.feedback-mid { border-left: 4px solid #F59E0B; }
.feedback-low { border-left: 4px solid var(--primary); }

.feedback-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.feedback-high .feedback-badge { background: #FEE2E2; color: #991B1B; }
.feedback-mid .feedback-badge { background: #FEF3C7; color: #92400E; }
.feedback-low .feedback-badge { background: #DBEAFE; color: #1E40AF; }

.feedback-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--text);
}
.feedback-desc {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 12px;
}
.feedback-compare {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.feedback-sub-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.feedback-text-current {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  padding: 6px 0;
  font-style: italic;
  text-decoration: line-through;
  text-decoration-color: var(--text-light);
}
.feedback-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--primary);
  font-weight: 900;
  margin: 4px 0;
}
.feedback-example {
  padding-top: 6px;
}
.feedback-text-example {
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  padding: 8px 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px dashed var(--primary);
}
.feedback-hint {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
  background: var(--primary-soft);
  padding: 8px 10px;
  border-radius: 8px;
}

/* ===== Result CTA ===== */
.es-doc-head {
  padding: 8px 0 12px;
  border-top: 2px solid var(--border);
  margin-top: 24px;
  padding-top: 20px;
}
.es-doc-head h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-sub);
}
.result-cta-main {
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  border: 2px solid #FED7AA;
}
.result-cta-copy { margin-bottom: 16px; }
.result-cta-strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.result-cta-sub {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* ===== Intro screen ===== */
.intro-screen {
  padding: 40px 20px;
  text-align: center;
}
.intro-icon {
  font-size: 56px;
  margin-bottom: 16px;
}
.intro-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.intro-sub {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.8;
  margin-bottom: 24px;
}
.intro-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 28px;
}
.intro-fact {
  text-align: center;
}
.intro-fact-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
}
.intro-fact-label {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 2px;
}

/* Responsive tiny */
@media (max-width: 340px) {
  .fv-title { font-size: 26px; }
  .section-title { font-size: 22px; }
}

/* ===== Edu confirm card ===== */
.edu-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 2px solid #FED7AA;
  border-radius: 14px;
  padding: 14px 16px;
}
.edu-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
  margin-bottom: 10px;
  line-height: 1.5;
}
.edu-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(249,115,22,0.2);
}
.edu-card-row:last-of-type { border-bottom: 0; }
.edu-card-row span:first-child {
  color: var(--text-sub);
  font-weight: 700;
}
.edu-card-row span:last-child {
  color: var(--text);
  font-weight: 800;
}
.edu-card-note {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 8px;
  text-align: center;
}

/* ===== Branch (直接応募 or 面談) ===== */
.branch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.branch-option {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.branch-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.branch-option:active { transform: scale(0.98); }
.branch-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.branch-body { flex: 1; }
.branch-title {
  font-size: 14.5px;
  font-weight: 900;
  margin-bottom: 4px;
  color: var(--text);
}
.branch-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 6px;
}
.branch-meta {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
}

/* ===== Schedule form ===== */
.schedule-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schedule-row label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.schedule-inputs {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.schedule-inputs input,
.schedule-inputs select {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  flex: 1;
  outline: none;
}
.schedule-inputs input:focus,
.schedule-inputs select:focus { border-color: var(--accent); }
.complete-note {
  font-size: 11.5px;
  color: var(--text-sub);
  text-align: center;
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-soft);
  border-radius: 8px;
  line-height: 1.6;
}
.complete-note strong { color: var(--accent-dark); }

/* ===== Work history form ===== */
.wh-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wh-row {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 10px 12px;
}
.wh-row-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-dark);
  margin-bottom: 6px;
}
.wh-name {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  background: #fff;
  outline: none;
  margin-bottom: 6px;
}
.wh-name:focus { border-color: var(--accent); }
.wh-dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wh-dates input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  background: #fff;
  outline: none;
  font-family: inherit;
}
.wh-dates input:focus { border-color: var(--accent); }
.wh-dates span { color: var(--text-sub); font-weight: 700; font-size: 13px; }

/* ===== Job category badges ===== */
.jobs-section-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 8px 12px;
  border-radius: 10px;
  margin: 6px 0 6px;
  letter-spacing: 0.02em;
}
.job-tag-fit, .job-tag-challenge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.job-tag-fit {
  background: #DCFCE7;
  color: #166534;
}
.job-tag-challenge {
  background: #FEE2E2;
  color: #991B1B;
}
.job-card.job-challenge { border-left: 3px solid #EF4444; }
.job-card.job-fit { border-left: 3px solid #16A34A; }

/* ============================================================
   マーケLP（index.html）
============================================================ */
.lp-body { background: #fff; font-size: 14px; line-height: 1.75; -webkit-text-size-adjust: 100%; }

.lp-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.lp-header-inner { max-width: 480px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; }
.lp-logo strong { font-size: 16px; font-weight: 900; color: var(--accent); letter-spacing: -0.02em; display: block; }
.lp-logo span { font-size: 9px; color: var(--text-sub); font-weight: 700; letter-spacing: 0.05em; }
.lp-header-cta { font-size: 12px; font-weight: 800; padding: 8px 14px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-radius: 999px; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3); text-decoration: none; }

.lp-section-eyebrow { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.1em; text-align: center; margin-bottom: 6px; }
.lp-section-title { font-size: 24px; font-weight: 900; line-height: 1.45; text-align: center; margin-bottom: 24px; letter-spacing: -0.02em; }

/* FV */
.lp-fv { max-width: 480px; margin: 0 auto; padding: 28px 20px 36px; background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%); text-align: center; }
.lp-fv-target { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 7px 14px 7px 12px; border-radius: 999px; margin-bottom: 18px; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25); }
.lp-fv-target-icon { font-size: 14px; }
.lp-fv-title { font-size: 32px; font-weight: 900; line-height: 1.35; letter-spacing: -0.02em; margin-bottom: 16px; }
.lp-fv-title-line1, .lp-fv-title-line2 { display: block; color: var(--text); }
.lp-fv-title-mark { display: inline-block; color: var(--accent); background: linear-gradient(transparent 55%, #FED7AA 55%); padding: 0 4px; }
.lp-fv-sub { font-size: 14px; color: var(--text); line-height: 1.85; margin-bottom: 28px; }
.lp-fv-sub strong { color: var(--accent); font-weight: 900; }

/* チャットプレビュー */
.lp-fv-chat { background: #fff; border-radius: 16px; padding: 14px 14px 16px; margin-bottom: 24px; box-shadow: 0 12px 28px rgba(249, 115, 22, 0.15); text-align: left; border: 1px solid #FED7AA; }
.lp-chat-header { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.lp-chat-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.lp-chat-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.lp-chat-meta { flex: 1; }
.lp-chat-name { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; }
.lp-chat-name strong { color: var(--accent); }
.lp-chat-role { font-size: 10px; color: var(--accent); font-weight: 800; letter-spacing: 0.05em; }
.lp-chat-status { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #16A34A; font-weight: 700; }
.lp-chat-status .dot { width: 6px; height: 6px; background: #16A34A; border-radius: 50%; animation: lp-blink 1.6s ease-in-out infinite; }
@keyframes lp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lp-chat-bubble { font-size: 13.5px; line-height: 1.7; padding: 10px 14px; border-radius: 14px; margin-bottom: 6px; max-width: 84%; opacity: 0; animation: lp-bubbleIn 0.4s ease forwards; }
.lp-chat-bubble.ai { background: var(--bg-soft); color: var(--text); border-bottom-left-radius: 4px; }
.lp-chat-bubble.user { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-bottom-right-radius: 4px; margin-left: auto; font-weight: 600; }
.lp-chat-bubble.result { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: auto; text-align: center; border-radius: 999px; padding: 8px 14px; }
.lp-chat-result-icon { font-size: 14px; }
.delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.6s; } .delay-3 { animation-delay: 1.0s; } .delay-4 { animation-delay: 1.4s; } .delay-5 { animation-delay: 1.8s; }
@keyframes lp-bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* CTA */
.lp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 360px; padding: 16px 22px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 16px; font-weight: 900; border-radius: 999px; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35); animation: lp-pulse 2s ease-in-out infinite; text-decoration: none; }
.lp-cta-lg { padding: 18px 24px; font-size: 16.5px; }
.lp-cta-xl { padding: 20px 24px; font-size: 17px; }
.lp-cta:active { transform: scale(0.98); }
.lp-cta-arrow { font-size: 18px; transition: transform 0.2s ease; }
.lp-cta:hover .lp-cta-arrow { transform: translateX(4px); }
@keyframes lp-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35); } 50% { box-shadow: 0 8px 28px rgba(249, 115, 22, 0.55); } }

.lp-fv-checks { display: flex; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.lp-fv-check { font-size: 11px; font-weight: 700; color: var(--text-sub); }

.lp-fv-trust { display: flex; align-items: stretch; background: #fff; border: 2px solid #FED7AA; border-radius: 14px; padding: 14px 8px; margin-top: 24px; box-shadow: 0 6px 16px rgba(249, 115, 22, 0.12); }
.lp-fv-trust-item { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.lp-fv-trust-divider { width: 1px; background: #FED7AA; margin: 4px 0; }
.lp-fv-trust-num { font-size: 22px; font-weight: 900; color: var(--accent); letter-spacing: -0.02em; line-height: 1.1; }
.lp-fv-trust-num span { font-size: 13px; font-weight: 800; margin: 0 1px; }
.lp-fv-trust-label { font-size: 10px; font-weight: 700; color: var(--text-sub); margin-top: 4px; line-height: 1.4; }

/* Pain */
.lp-pain { max-width: 480px; margin: 0 auto; padding: 40px 0; background: #0F1F3D; color: #fff; position: relative; overflow: hidden; }
.lp-pain-hero { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; position: relative; margin-bottom: 24px; }
.lp-pain-hero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.88) contrast(0.95); }
.lp-pain-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 31, 61, 0.10) 0%, rgba(15, 31, 61, 0) 30%, rgba(15, 31, 61, 0) 70%, #0F1F3D 100%); pointer-events: none; }
.lp-pain .lp-section-title { color: #fff; margin: 0 20px 20px; padding: 0; }
.lp-pain-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 20px 24px; }
.lp-pain-item { background: rgba(255, 255, 255, 0.06); padding: 16px 18px; border-radius: 12px; text-align: left; border: 1px solid rgba(255, 255, 255, 0.10); position: relative; }
.lp-pain-emoji { display: none; }
.lp-pain-item p { font-size: 14px; line-height: 1.55; color: #E2E8F0; margin: 0; padding-left: 22px; position: relative; }
.lp-pain-item p::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px; background: var(--accent); border-radius: 2px; }
.lp-pain-item strong { color: #fff; font-weight: 900; }
.lp-pain-cut { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; padding: 18px 16px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 900; line-height: 1.6; letter-spacing: -0.01em; box-shadow: 0 8px 22px rgba(249, 115, 22, 0.35); margin: 0 20px; }

/* Bridge（ペイン→解決への橋渡し） */
.lp-bridge { max-width: 480px; margin: 0 auto; padding: 56px 20px 64px; background: linear-gradient(180deg, #FFFDF9 0%, #FFF4E6 100%); text-align: center; position: relative; }
.lp-bridge::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 22px;
  height: 22px;
  background: #0F1F3D;
  border-radius: 4px;
}
.lp-bridge-inner { position: relative; }
.lp-bridge-lead { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.12em; margin: 0 0 10px; }
.lp-bridge-title { font-size: 28px; font-weight: 900; line-height: 1.45; color: var(--text); letter-spacing: -0.02em; margin: 0; }
.lp-bridge-title u { text-decoration: underline wavy; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lp-bridge-strong { color: var(--accent); }

/* キャリコミ紹介 */
.lp-intro { max-width: 480px; margin: 0 auto; padding: 48px 20px 56px; background: #fff; text-align: center; position: relative; overflow: hidden; }
.lp-intro::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, rgba(249, 115, 22, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.lp-intro::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 191, 122, 0.18) 0%, rgba(255, 191, 122, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.lp-intro > * { position: relative; z-index: 1; }
.lp-intro .lp-section-eyebrow { color: var(--accent); margin-bottom: 8px; }
.lp-intro-brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; margin-bottom: 14px; }
.lp-intro-brand-main { font-size: 38px; font-weight: 950; color: var(--accent); letter-spacing: 0.01em; }
.lp-intro-brand-sub { margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--text-sub); letter-spacing: 0.28em; text-transform: uppercase; }
.lp-intro-tagline { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.65; margin: 0 0 26px; }
.lp-intro-tagline strong { color: var(--accent); font-weight: 900; }

.lp-intro-komiya-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, #FFF6EE 0%, #FFE9D6 100%);
  border: 1.5px solid #FFD1A8;
  border-radius: 18px;
  padding: 16px 16px 16px 14px;
  margin-bottom: 22px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.10);
}
.lp-intro-komiya-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(23, 35, 58, 0.14);
  overflow: hidden;
}
.lp-intro-komiya-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-intro-komiya-name { font-size: 14px; font-weight: 900; color: var(--text); margin: 0; line-height: 1.2; }
.lp-intro-komiya-role { font-size: 11px; font-weight: 800; color: var(--accent); margin: 2px 0 8px; letter-spacing: 0.02em; }
.lp-intro-komiya-msg { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.6; margin: 0; }
.lp-intro-komiya-msg strong { color: var(--accent); font-weight: 900; }

.lp-intro-points { display: grid; gap: 10px; }
.lp-intro-point {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  box-shadow: 0 3px 10px rgba(23, 35, 58, 0.04);
}
.lp-intro-point-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.30);
}
.lp-intro-point-title { font-size: 16px; font-weight: 900; color: var(--text); margin: 0; line-height: 1.25; }
.lp-intro-point-desc { font-size: 12px; font-weight: 700; color: var(--text-sub); margin: 3px 0 0; line-height: 1.45; }

/* 中間CTA */
.lp-midcta { max-width: 480px; margin: 0 auto; padding: 28px 20px 32px; background: linear-gradient(180deg, #FFF7ED 0%, #FFE9D6 100%); text-align: center; }
.lp-midcta-limited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 10px;
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
  background: #fff;
  border: 1.5px solid #FFB58C;
  border-radius: 999px;
  letter-spacing: 0.02em;
  width: fit-content;
}
.lp-midcta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
}
.lp-midcta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 60px;
  font-size: 17px;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.32);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  animation: btnPulse 2.4s ease-in-out infinite;
}
.lp-midcta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-midcta-btn { animation: none; }
  .lp-midcta-btn::before { display: none; }
}
.lp-midcta-note { font-size: 12px; font-weight: 700; color: var(--text-sub); margin: 10px 0 0; }

/* キャリコミで理想の求人に出会える理由 */
.lp-reasons {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px 64px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 248, 240, 0.92) 100%),
    url("images/tenshoku AI.png") center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.lp-reasons::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.lp-reasons > * { position: relative; }
.lp-reasons .lp-section-eyebrow { color: var(--accent); }
.lp-reasons .lp-section-title { margin-bottom: 28px; }

.lp-reason {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px 20px;
  margin-bottom: 14px;
  position: relative;
  box-shadow: 0 4px 14px rgba(23, 35, 58, 0.06);
}
.lp-reason:last-child { margin-bottom: 0; }
.lp-reason-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.lp-reason-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.30);
}
.lp-reason-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}
.lp-reason-big {
  color: var(--accent);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.03em;
}
.lp-reason-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-sub);
  margin: 0;
}
.lp-reason-body strong { color: var(--accent); font-weight: 900; }

.lp-reason--compare { padding: 22px 16px 20px; }
.lp-reason--compare .lp-compare-table { margin-top: 4px; }

/* 転職成功率ドーナツチャート */
.lp-success-donut {
  position: relative;
  margin: 20px auto 4px;
  width: min(260px, 100%);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-donut-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.lp-donut-progress {
  animation: lpDonutDraw 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lp-donut-shine {
  animation: lpDonutDraw 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lpDonutDraw {
  from { stroke-dasharray: 0 100; }
  to { stroke-dasharray: 95 100; }
}
.lp-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.lp-donut-label {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-sub);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.lp-donut-value {
  font-size: 56px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--accent);
}
.lp-donut-value small {
  font-size: 22px;
  font-weight: 950;
  margin-left: 2px;
  letter-spacing: -0.04em;
}
.lp-donut-caption {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .lp-donut-progress, .lp-donut-shine { animation: none; stroke-dasharray: 95 100; }
}

/* 非公開求人 モザイク横スクロール（自動） */
.lp-jobs-scroll {
  margin: 16px -16px 0;
  overflow: hidden;
  padding: 4px 0 12px;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.lp-jobs-scroll-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: lpJobsScroll 30s linear infinite;
  will-change: transform;
}
.lp-jobs-scroll-track:hover { animation-play-state: paused; }
@keyframes lpJobsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 5px)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-jobs-scroll-track { animation: none; }
}
.lp-job-mock {
  flex: 0 0 168px;
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px 14px;
  position: relative;
  box-shadow: 0 4px 12px rgba(23, 35, 58, 0.06);
}
.lp-job-mock-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFE9D6, #FFD1A8);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.lp-job-mock-title { display: block; margin-bottom: 8px; }
.lp-job-mock-title .mask {
  display: block;
  height: 12px;
  width: 80%;
  border-radius: 4px;
  background: linear-gradient(90deg, #E2E8F0 0%, #CBD5E1 60%, #E2E8F0 100%);
  filter: blur(2px);
}
.lp-job-mock-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.lp-job-mock-tags span {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent-dark);
  background: #FFF6EE;
  border: 1px solid #FFD1A8;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-job-mock-salary { font-size: 11px; color: var(--text-sub); font-weight: 700; margin-bottom: 8px; }
.lp-job-mock-salary strong { color: var(--text); font-weight: 900; font-size: 12.5px; }
.lp-job-mock-body { display: grid; gap: 4px; }
.lp-job-mock-body .mask {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, #E2E8F0 0%, #CBD5E1 60%, #E2E8F0 100%);
  filter: blur(1.5px);
}
.lp-job-mock-body .mask:nth-child(1) { width: 100%; }
.lp-job-mock-body .mask:nth-child(2) { width: 88%; }
.lp-job-mock-body .mask:nth-child(3) { width: 72%; }
.lp-job-mock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.30);
  animation: badgePulse 2s ease-in-out infinite;
}
.lp-job-mock:nth-child(2n) .lp-job-mock-badge { animation-delay: 0.35s; }
.lp-job-mock:nth-child(3n) .lp-job-mock-badge { animation-delay: 0.7s; }
@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.30), 0 0 0 0 rgba(249, 115, 22, 0.45);
  }
  50% {
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.34), 0 0 0 6px rgba(249, 115, 22, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-job-mock-badge { animation: none; }
}

/* セクション見出しのスクロールフェードイン */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.lp-section-eyebrow.reveal { transition-delay: 0s; }
.lp-section-title.reveal { transition-delay: 0.08s; }
.lp-bridge-lead.reveal { transition-delay: 0s; }
.lp-bridge-title.reveal { transition-delay: 0.10s; }
.lp-intro-brand.reveal { transition-delay: 0.04s; }
.lp-intro-tagline.reveal { transition-delay: 0.12s; }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.lp-jobs-scroll-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin: 4px 0 0;
}

/* 3ステップ ビジュアル */
.lp-step-visual { margin-top: 14px; padding: 0; }
.lp-step-visual--chat {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.lp-step-chat-head { display: flex; gap: 4px; margin-bottom: 8px; }
.lp-step-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; }
.lp-step-chat-body { display: grid; gap: 5px; }
.lp-step-bubble {
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
  max-width: 80%;
  line-height: 1.4;
}
.lp-step-bubble--ai { background: #fff; border: 1px solid var(--border); align-self: flex-start; color: var(--text); justify-self: start; }
.lp-step-bubble--user { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; align-self: flex-end; justify-self: end; }

.lp-step-visual--es {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.lp-es-mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  box-shadow: 0 3px 8px rgba(23, 35, 58, 0.06);
}
.lp-es-mock-tab {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.lp-es-mock-tab--alt { background: linear-gradient(135deg, #475569, #1E293B); }
.lp-es-mock-row { display: grid; gap: 3px; margin-bottom: 6px; }
.lp-es-mock-label { font-size: 9px; font-weight: 800; color: var(--text-sub); letter-spacing: 0.04em; }
.lp-es-mock-line { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #E2E8F0, #CBD5E1, #E2E8F0); filter: blur(0.8px); }
.lp-es-mock-line.w1 { width: 100%; }
.lp-es-mock-line.w2 { width: 78%; }
.lp-es-mock-line.w3 { width: 60%; }
.lp-es-mock-stamp {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 8.5px;
  font-weight: 900;
  color: #16A34A;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
}
.lp-es-mock-job { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.lp-es-mock-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #FFE9D6, #FFD1A8);
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-es-mock-name { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #E2E8F0, #CBD5E1); filter: blur(0.8px); flex: 1; }
.lp-es-mock-name.w1 { max-width: 100%; }
.lp-es-mock-name.w2 { max-width: 80%; }
.lp-es-mock-name.w3 { max-width: 64%; }

.lp-step-visual--apply { display: grid; gap: 8px; }
.lp-apply-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 900;
  border-radius: 10px;
  border: 0;
  cursor: default;
}
.lp-apply-btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.32);
}
.lp-apply-btn--secondary {
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--accent);
}
.lp-apply-arrow { font-size: 16px; font-weight: 950; }

/* 利用者の声 リニューアル */
.lp-voice-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.lp-voice-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #F1F5F9;
  box-shadow: 0 4px 12px rgba(23, 35, 58, 0.08);
}
.lp-voice-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-voice-info { min-width: 0; }
.lp-voice-salary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  background: linear-gradient(135deg, #FFF6EE 0%, #FFE9D6 100%);
  border: 1px solid #FFD1A8;
  border-radius: 10px;
  padding: 10px 8px;
  margin-bottom: 12px;
  position: relative;
}
.lp-voice-salary-item {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.lp-voice-salary-label {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--text-sub);
  letter-spacing: 0.08em;
}
.lp-voice-salary-value {
  font-size: 18px;
  font-weight: 950;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.lp-voice-salary-value small { font-size: 10px; font-weight: 900; margin-left: 1px; }
.lp-voice-salary-item--after .lp-voice-salary-value { color: var(--accent); }
.lp-voice-salary-arrow {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
}
.lp-voice-salary-diff {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.30);
}
.lp-voice-text { font-size: 13px; line-height: 1.75; color: var(--text); margin: 0; }

/* Features */
.lp-features { max-width: 480px; margin: 0 auto; padding: 48px 20px; }
.lp-feature-card { background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 24px 20px; margin-bottom: 16px; position: relative; }
.lp-feature-card:last-child { margin-bottom: 0; }
.lp-feature-num { position: absolute; top: -12px; left: 20px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.05em; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3); }
.lp-feature-card h3 { font-size: 17px; font-weight: 900; line-height: 1.45; margin: 8px 0 10px; }
.lp-feature-card p { font-size: 13px; line-height: 1.85; color: var(--text-sub); }

/* Compare（他サービスとの違い） */
.lp-compare { max-width: 480px; margin: 0 auto; padding: 48px 20px; }
.lp-compare-table {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(23, 35, 58, 0.06);
}
.lp-compare-row {
  display: contents;
}
.lp-compare-cell {
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-compare-row:first-child .lp-compare-cell { border-top: 0; }
.lp-compare-cell--label {
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  background: #FAFBFC;
  border-right: 1px solid var(--border);
}
.lp-compare-cell--us {
  color: var(--accent);
  background: #FFF6EE;
  font-weight: 900;
  border-right: 1px solid var(--border);
  position: relative;
}
.lp-compare-cell--us strong {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.lp-compare-cell--them {
  color: var(--text-sub);
  background: #fff;
}
.lp-compare-head .lp-compare-cell {
  padding: 16px 6px;
  font-size: 13px;
  font-weight: 900;
  background: var(--text);
  color: #fff;
}
.lp-compare-head .lp-compare-cell--label { background: var(--text); }
.lp-compare-head .lp-compare-cell--us {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 15px;
}
.lp-compare-head .lp-compare-cell--them {
  background: #475569;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
}

/* Steps */
.lp-steps { max-width: 480px; margin: 0 auto; padding: 48px 20px; background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%); }
.lp-steps-list { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-step { background: #fff; border-radius: 16px; padding: 20px 16px; width: 100%; max-width: 320px; text-align: center; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.12); }
.lp-step-num { font-size: 11px; font-weight: 900; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 4px; }
.lp-step-icon { display: none; }
.lp-step h3 { font-size: 17px; font-weight: 900; margin-bottom: 6px; }
.lp-step p { font-size: 12.5px; color: var(--text-sub); line-height: 1.65; }
.lp-step-arrow { font-size: 20px; color: var(--accent); font-weight: 900; }

/* Stats */
.lp-stats { max-width: 480px; margin: 0 auto; padding: 48px 20px; background: var(--text); color: #fff; }
.lp-stats .lp-section-eyebrow { color: #FCD34D; margin-bottom: 24px; font-size: 13px; }
.lp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; text-align: center; }
.lp-stat-num { font-size: 30px; font-weight: 900; line-height: 1; color: #FCD34D; letter-spacing: -0.02em; }
.lp-stat-unit { font-size: 14px; font-weight: 700; margin-left: 2px; }
.lp-stat-label { font-size: 12px; color: #CBD5E1; margin-top: 6px; }

/* Komiya */
.lp-komiya { max-width: 480px; margin: 0 auto; padding: 56px 20px 48px; background: #fff; }
.lp-komiya-card { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 2px solid #FED7AA; border-radius: 20px; padding: 28px 20px; text-align: center; }
.lp-komiya-photo { width: 200px; height: 200px; margin: 0 auto 16px; position: relative; }
.lp-komiya-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 6px solid #fff; box-shadow: 0 12px 28px rgba(249, 115, 22, 0.2); }
.lp-komiya-badge { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 13px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); z-index: 2; }
.lp-komiya-name { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.lp-komiya-name strong { color: var(--accent); }
.lp-komiya-role { font-size: 11px; color: var(--accent); font-weight: 800; letter-spacing: 0.08em; margin-bottom: 16px; }
.lp-komiya-msg { font-size: 13.5px; line-height: 1.85; color: var(--text); background: #fff; padding: 14px 18px; border-radius: 14px; position: relative; margin-bottom: 14px; text-align: left; }
.lp-komiya-msg::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; }
.lp-komiya-tasks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lp-komiya-tasks span { font-size: 11px; font-weight: 800; color: var(--accent-dark); background: #fff; border: 1.5px solid #FED7AA; padding: 4px 10px; border-radius: 999px; }

/* FAQ */
.lp-faq { max-width: 480px; margin: 0 auto; padding: 48px 20px; }
.lp-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.lp-faq-item summary { padding: 14px 44px 14px 16px; font-size: 14px; font-weight: 800; cursor: pointer; position: relative; list-style: none; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--accent); font-weight: 900; }
.lp-faq-item[open] summary::after { content: "−"; }
.lp-faq-item p { padding: 0 16px 16px; font-size: 13px; color: var(--text-sub); line-height: 1.85; }

/* Final CTA */
.lp-final-cta { max-width: 480px; margin: 0 auto; padding: 56px 20px; background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%); text-align: center; }
.lp-final-cta-title { font-size: 26px; font-weight: 900; line-height: 1.4; margin-bottom: 12px; letter-spacing: -0.02em; }
.lp-final-cta-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 24px; line-height: 1.85; }

/* Footer */
.lp-footer { max-width: 480px; margin: 0 auto; padding: 40px 20px 28px; background: var(--text); color: #CBD5E1; }
.lp-footer-info { margin-bottom: 20px; }
.lp-footer-brand { font-size: 14px; font-weight: 900; color: #fff; margin-bottom: 8px; }
.lp-footer-company { font-size: 11px; color: #94A3B8; line-height: 1.85; }
.lp-footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid #334155; }
.lp-footer-links a { font-size: 12px; color: #CBD5E1; text-decoration: none; }
.lp-footer-copyright { font-size: 10px; color: #64748B; text-align: center; padding-top: 12px; border-top: 1px solid #334155; }

/* Floating CTA */
.lp-floating-cta { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(120%); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 14px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 14px; font-weight: 900; border-radius: 999px; box-shadow: 0 10px 24px rgba(249, 115, 22, 0.45); text-decoration: none; transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); white-space: nowrap; }
.lp-floating-cta.show { transform: translateX(-50%) translateY(0); }
.lp-floating-arrow { font-size: 16px; }

/* ================== 5万件バッジ（FV内） ================== */
.lp-fv-jobs-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 12px 18px;
  margin: 0 auto 24px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.18);
}
.lp-jobs-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-jobs-text {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--text);
  border-left: 1px solid var(--border);
  padding-left: 14px;
}

/* ================== 🎁 プレゼント特典 ================== */
.lp-gift {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px 48px;
  background: linear-gradient(180deg, #FFE4E1 0%, #FFEDD5 50%, #FFFBEB 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-gift::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.lp-gift::after {
  content: "";
  position: absolute;
  bottom: 40px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(251, 113, 133, 0.3) 0%, transparent 60%);
  pointer-events: none;
}
.lp-gift-ribbon {
  display: inline-block;
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 20px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.lp-gift-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.lp-gift-title-strong {
  color: var(--accent-dark);
  background: linear-gradient(transparent 60%, #FEF3C7 60%);
  padding: 0 6px;
}
.lp-gift-sub {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.85;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.lp-gift-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.lp-gift-card {
  background: #fff;
  border: 2px solid #FED7AA;
  border-radius: 16px;
  padding: 22px 18px 18px;
  position: relative;
  text-align: center;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.12);
}
.lp-gift-card.highlighted {
  border-color: #EC4899;
  background: linear-gradient(135deg, #FFF1F2 0%, #FFFFFF 100%);
  box-shadow: 0 10px 24px rgba(236, 72, 153, 0.18);
}
.lp-gift-num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3);
}
.lp-gift-new {
  position: absolute;
  top: -10px;
  right: 14px;
  background: linear-gradient(135deg, #F472B6, #EC4899);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  box-shadow: 0 3px 8px rgba(236, 72, 153, 0.4);
  transform: rotate(8deg);
}
.lp-gift-card h3 {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  margin: 24px 0 8px;
}
.lp-gift-card p {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-sub);
}
.lp-gift-note {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.lp-gift-note strong {
  color: var(--accent-dark);
  font-weight: 900;
}

/* ================== Pain強化 ================== */
.lp-pain-priority {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(249, 115, 22, 0.10)) !important;
  border: 1.5px solid var(--accent) !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.20) !important;
}
.lp-pain-priority::after {
  content: "多い悩み";
  position: absolute;
  top: -9px;
  left: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.lp-pain-cut {
  font-size: 18px !important;
}
.lp-pain-cut u {
  text-decoration: underline wavy;
  text-decoration-color: #FCD34D;
  text-underline-offset: 4px;
}

/* ================== Features強化 ================== */
.lp-feature-card { box-shadow: 0 6px 16px rgba(0,0,0,0.05); }
.lp-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.lp-feature-tags span {
  font-size: 11px;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #FED7AA;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ================== 5万件 求人データベース ================== */
.lp-database {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px 48px;
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-database::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.25) 0%, transparent 60%);
}
.lp-database .lp-section-eyebrow {
  color: #FCD34D;
}
.lp-database .lp-section-title {
  color: #fff;
}
.lp-db-big {
  display: inline-block;
  font-size: 56px;
  font-weight: 900;
  color: #FCD34D;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 16px rgba(252, 211, 77, 0.35);
  position: relative;
  z-index: 1;
}
.lp-db-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0 24px;
  position: relative;
  z-index: 1;
}
.lp-db-stat {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 8px;
}
.lp-db-stat-num {
  font-size: 22px;
  font-weight: 900;
  color: #FCD34D;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-db-stat-label {
  font-size: 10.5px;
  color: #CBD5E1;
  margin-top: 4px;
  font-weight: 700;
}
.lp-db-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.lp-db-tags span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 10px;
  border-radius: 999px;
}
.lp-db-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
}
.lp-db-bubble p {
  font-size: 12.5px;
  line-height: 1.7;
  color: #fff;
  font-weight: 600;
}
.lp-db-bubble strong { font-weight: 900; }

/* ================== 体験談 ================== */
.lp-voices {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px 48px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}
.lp-voice-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-voice-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  position: relative;
}
.lp-voice-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.lp-voice-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-voice-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
  letter-spacing: 0;
}
.lp-voice-name {
  font-size: 12.5px;
  font-weight: 800;
}
.lp-voice-tag {
  font-size: 11px;
  color: var(--accent-dark);
  font-weight: 700;
  margin-top: 2px;
}

/* ================== Final CTA強化 ================== */
.lp-final-cta-strong {
  color: var(--accent-dark);
  background: linear-gradient(transparent 60%, #FEF3C7 60%);
  padding: 0 6px;
}

/* ============================================================
   新FV v2（kyarikomi-lp-firstview-v2.html 反映）
============================================================ */
:root {
  --orange: #ff5a00;
  --orange-2: #ff7a1a;
  --navy: #17233a;
  --blue: #0967ff;
  --green: #16a34a;
  --text: #17233a;
  --muted: #6b7280;
  --line: #edf0f4;
  --cream: #fff8ee;
  --white: #ffffff;
  --shadow: 0 14px 34px rgba(23, 35, 58, 0.12);
  --soft-shadow: 0 8px 24px rgba(23, 35, 58, 0.08);
  --radius-lg: 24px;
  --radius-md: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.fv {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  background:
    radial-gradient(circle at 92% 17%, rgba(255, 122, 26, 0.17), transparent 25%),
    radial-gradient(circle at 82% 36%, rgba(9, 103, 255, 0.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fffaf2 70%, #ffffff 100%);
}
.fv::before {
  content: "";
  position: absolute;
  top: 96px;
  right: -96px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 122, 26, 0.045), rgba(255, 122, 26, 0.045) 1px, transparent 1px, transparent 10px);
  opacity: 0.5;
  pointer-events: none;
}
.fv::after {
  content: "";
  position: absolute;
  top: 180px;
  right: -45px;
  width: 220px;
  height: 380px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 226, 187, 0.35), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
  pointer-events: none;
}
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 88px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(229, 232, 238, 0.95);
  backdrop-filter: blur(14px);
}
.logo { display: inline-grid; gap: 1px; line-height: 1.08; }
.logo__main { color: var(--orange); font-size: 28px; font-weight: 950; letter-spacing: 0.01em; }
.logo__sub { color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.header__right { display: flex; align-items: center; gap: 12px; }
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 56px;
  padding: 0 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  box-shadow: 0 12px 24px rgba(255, 90, 0, 0.24);
}
.menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; }
.menu-btn__lines { display: grid; gap: 7px; width: 32px; }
.menu-btn__lines span { display: block; height: 3px; border-radius: 999px; background: var(--navy); }
.container {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 28px 18px 18px;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  box-shadow: 0 12px 24px rgba(255, 90, 0, 0.24);
}
.hero { position: relative; min-height: 610px; padding-top: 22px; }
.hero__copy { position: relative; z-index: 5; width: 60%; min-width: 220px; }
.hero-title {
  margin: 0;
  color: var(--navy);
  font-size: clamp(40px, 11vw, 54px);
  font-weight: 950;
  line-height: 1.17;
  letter-spacing: -0.055em;
}
.hero-title .orange { color: var(--orange); }
.lead { margin: 19px 0 0; color: var(--navy); font-size: 17px; font-weight: 780; line-height: 1.78; letter-spacing: -0.02em; }
.person-area {
  position: absolute;
  z-index: 2;
  top: -1px;
  right: -63px;
  width: 67%;
  min-width: 260px;
  pointer-events: none;
}
.person-area::before {
  content: "";
  position: absolute;
  inset: 40px 4px auto auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(255, 205, 139, 0.22);
  filter: blur(1px);
  z-index: -1;
}
.person { width: 100%; margin-left: auto; filter: drop-shadow(0 18px 26px rgba(23, 35, 58, 0.13)); }
.ui-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(237, 240, 244, 0.96);
  border-radius: 17px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
}
.ui-card--match { top: 52px; right: 0; width: 125px; }
.ui-card--pass { top: 160px; right: -6px; width: 135px; }
.ui-card--interview { top: 292px; right: 14px; width: 176px; padding: 16px; }
.ui-card__label { display: flex; align-items: center; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 950; line-height: 1.2; }
.ui-card__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; }
.ui-card__icon--blue { color: var(--blue); background: #eef5ff; }
.ui-card__icon--green { color: var(--green); background: #edf9f1; }
.ui-card__value { font-size: 29px; font-weight: 950; line-height: 1; }
.ui-card__value--blue { color: var(--blue); }
.ui-card__value--green { color: var(--green); }
.bar { overflow: hidden; width: 100%; height: 7px; border-radius: 999px; background: #e8edf4; }
.bar span { display: block; height: 100%; border-radius: inherit; }
.bar--blue span { width: 78%; background: var(--blue); }
.bar--green span { width: 70%; background: var(--green); }
.checklist { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--navy); font-size: 13px; font-weight: 850; line-height: 1.35; }
.checklist li { display: flex; align-items: center; gap: 7px; }
.checklist li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
  background: var(--green);
}
.actions { position: relative; z-index: 8; display: grid; gap: 12px; width: min(100%, 300px); margin-top: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; height: 64px; font-size: 20px; font-weight: 950; letter-spacing: 0.01em; border-radius: 999px; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 13px 26px rgba(255, 90, 0, 0.30); animation: btnPulse 2.4s ease-in-out infinite; }
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 13px 26px rgba(255, 90, 0, 0.30), 0 0 0 0 rgba(255, 90, 0, 0.45); }
  50% { box-shadow: 0 13px 28px rgba(255, 90, 0, 0.34), 0 0 0 10px rgba(255, 90, 0, 0); }
}
@keyframes btnShine {
  0% { left: -100%; }
  60% { left: 140%; }
  100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary { animation: none; }
  .btn--primary::before { animation: none; display: none; }
}
.btn--outline { color: var(--navy); background: rgba(255, 255, 255, 0.88); border: 2px solid var(--orange); }
.chips { position: relative; z-index: 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: -8px; }
.chip { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 10px 8px; color: var(--navy); font-size: 13px; font-weight: 950; white-space: nowrap; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--soft-shadow); }
.chip__icon { font-size: 19px; line-height: 1; }
.chat-card { position: relative; z-index: 10; margin-top: 12px; padding: 18px 14px 16px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(237, 240, 244, 0.96); border-radius: var(--radius-lg); box-shadow: var(--soft-shadow); backdrop-filter: blur(12px); }
.agent { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.agent__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agent__avatar { width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 6px 15px rgba(23, 35, 58, 0.14); }
.agent__name { color: var(--navy); font-size: 20px; font-weight: 950; line-height: 1.15; }
.agent__role { margin-top: 2px; color: var(--orange); font-size: 12px; font-weight: 900; line-height: 1.2; }
.online { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; font-weight: 950; white-space: nowrap; }
.online::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.messages { display: grid; gap: 12px; }
.bubble { width: fit-content; max-width: 82%; padding: 10px 14px; color: var(--navy); font-size: 13.5px; font-weight: 780; line-height: 1.55; border-radius: 17px; box-shadow: 0 5px 16px rgba(23, 35, 58, 0.06); }
.bubble--ai { background: #fff; border: 1px solid var(--line); }
.bubble--user { justify-self: end; min-width: 138px; color: #fff; font-weight: 950; text-align: center; background: linear-gradient(135deg, var(--orange), var(--orange-2)); border-bottom-right-radius: 5px; }
.bubble--search { display: inline-flex; align-items: center; gap: 10px; min-width: 235px; color: var(--navy); background: #eef5ff; box-shadow: none; }
.bubble__sparkle { color: var(--blue); font-weight: 950; }
/* 旧FV .job-card は削除済み（チャット内 .job-card と衝突するため） */
.stats { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(237, 240, 244, 0.96); border-radius: 18px; box-shadow: var(--soft-shadow); }
.stat { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 133px; padding: 18px 8px 14px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__icon { display: grid; place-items: center; width: 50px; height: 50px; color: var(--orange); font-size: 25px; border-radius: 50%; background: rgba(255, 90, 0, 0.10); }
.stat__label { color: var(--navy); font-size: 12px; font-weight: 900; }
.stat__value { color: var(--orange); font-size: 29px; font-weight: 950; line-height: 1.1; letter-spacing: -0.04em; }
.stat__value small { display: block; margin-top: 2px; font-size: 17px; letter-spacing: 0; }
.note { position: relative; z-index: 10; margin: 10px 0 0; color: #8b95a7; font-size: 12px; font-weight: 750; text-align: center; }
@media (max-width: 390px) {
  .header { height: 82px; padding-inline: 16px; }
  .logo__main { font-size: 25px; }
  .header-cta { min-width: 132px; height: 50px; font-size: 16px; }
  .container { padding-inline: 15px; }
  .badge { min-height: 44px; padding-inline: 16px; font-size: 15px; }
  .hero { min-height: 575px; }
  .hero-title { font-size: 40px; }
  .lead { font-size: 15.5px; }
  .person-area { right: -75px; width: 69%; }
  .ui-card--match { width: 112px; right: 6px; }
  .ui-card--pass { width: 122px; right: 2px; }
  .ui-card--interview { top: 278px; right: 7px; width: 157px; }
  .chip { font-size: 12px; }
  .job-card { gap: 10px; }
  .job-card__num { font-size: 40px; }
  .job-card__text { font-size: 14px; }
}

/* ============================================================
   v2 FV スマホ修正パッチ（実写写真対応・はみ出し防止）
============================================================ */
.fv {
  overflow-x: hidden;
  padding: 0 !important;
}

.header {
  height: 64px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
}
.logo { white-space: nowrap; }
.logo__main { font-size: 20px !important; }
.logo__sub { font-size: 10px !important; }
.header-cta {
  min-width: auto !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}
.menu-btn { width: 36px !important; height: 36px !important; }
.menu-btn__lines { width: 26px; gap: 5px; }
.menu-btn__lines span { height: 2.5px; }

.container {
  width: 100% !important;
  max-width: 480px !important;
  padding: 18px 16px 16px !important;
}
.badge {
  min-height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

.hero {
  min-height: 380px !important;
  padding-top: 14px !important;
  padding-bottom: 8px;
}
.fv { min-height: auto !important; }
.hero__copy {
  width: 58% !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 5;
}
.hero-title {
  font-size: clamp(30px, 8.6vw, 40px) !important;
  letter-spacing: -0.05em !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  margin: 0;
}
.lead {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  margin-top: 12px !important;
  width: 100%;
}

.fact-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 -16px;
  padding: 20px 16px 22px;
  width: calc(100% + 32px);
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, #FFD9B0 0%, #FFE9CC 100%);
  border-top: 2px solid var(--orange);
}
.fact-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 16px 8px;
  background: #fff;
  border: 1.5px solid var(--orange);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(255, 90, 0, 0.12);
  min-height: 92px;
}
.fact-badge__label {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: 0;
}
.fact-badge__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-size: clamp(17px, 5.6vw, 24px);
  font-weight: 900;
  color: var(--orange);
  letter-spacing: -0.07em;
  line-height: 1.05;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.fact-badge__value small {
  font-size: clamp(9px, 2.9vw, 12px);
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 1px;
}

.limited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 8px !important;
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--orange);
  background: #FFF1E6;
  border: 1.5px solid #FFB58C;
  border-radius: 999px;
  letter-spacing: 0.02em;
  width: fit-content;
}
.limited-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
}

.person-area {
  width: 82% !important;
  min-width: 0 !important;
  right: -36px !important;
  top: 0 !important;
  height: 380px;
  z-index: 1;
}
.person {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 100%;
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: drop-shadow(0 18px 26px rgba(23, 35, 58, 0.13));
}

.ui-card {
  padding: 6px 9px !important;
  border-radius: 11px !important;
}
/* AIマッチ度・書類通過率は半サイズ */
.ui-card--match {
  width: 96px !important;
  right: 8px !important;
  top: 8px !important;
  gap: 3px !important;
}
.ui-card--pass {
  width: 102px !important;
  right: 4px !important;
  top: 96px !important;
  gap: 3px !important;
}
.ui-card--match .ui-card__label,
.ui-card--pass .ui-card__label {
  white-space: nowrap;
}
/* 面接対策は変更なしのコンパクト版 */
.ui-card--interview {
  width: 138px !important;
  right: 10px !important;
  top: 178px !important;
  padding: 9px 11px !important;
  gap: 4px !important;
}
.ui-card--match .ui-card__label,
.ui-card--pass .ui-card__label {
  font-size: 9.5px !important;
  gap: 4px !important;
}
.ui-card--interview .ui-card__label { font-size: 11px !important; }
.ui-card--match .ui-card__icon,
.ui-card--pass .ui-card__icon {
  width: 16px !important;
  height: 16px !important;
}
.ui-card--match .ui-card__icon svg,
.ui-card--pass .ui-card__icon svg {
  width: 10px !important;
  height: 10px !important;
}
.ui-card__icon--blue { color: var(--blue); background: #EEF5FF; }
.ui-card__icon--green { color: var(--green); background: #EDF9F1; }
.ui-card--match .ui-card__value,
.ui-card--pass .ui-card__value {
  font-size: 17px !important;
  line-height: 1;
}
.ui-card--match .bar,
.ui-card--pass .bar {
  height: 4px !important;
}
.checklist { font-size: 11px !important; gap: 5px; }
.checklist li::before { width: 14px; height: 14px; flex: 0 0 14px; font-size: 9px; }

.actions {
  width: 100% !important;
  max-width: none !important;
  margin-top: 16px !important;
  gap: 4px !important;
  justify-items: center !important;
}
.btn {
  height: 56px !important;
  font-size: 16px !important;
  gap: 10px !important;
  width: 100%;
}

.chips {
  margin-top: 14px !important;
  gap: 8px !important;
}
.chip {
  font-size: 12px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  gap: 6px !important;
}
.chip__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #FFF5EC;
  color: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0 !important;
}

.chat-card { padding: 14px 12px !important; margin-top: 12px !important; }
.agent { margin-bottom: 12px !important; }
.agent__avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
.agent__name { font-size: 16px !important; }
.agent__role { font-size: 11px !important; }
.online { font-size: 11px !important; }
.bubble { font-size: 12.5px !important; padding: 8px 12px !important; }
.bubble--user { min-width: 110px !important; }

/* ミニチャット（FV写真にオーバーレイ） */
.chat-card--mini {
  position: absolute !important;
  left: 0 !important;
  bottom: 4px !important;
  width: 64% !important;
  margin-top: 0 !important;
  padding: 10px 10px 9px !important;
  z-index: 6 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(23, 35, 58, 0.14) !important;
  background: rgba(255, 255, 255, 0.97) !important;
}
.chat-card--mini .agent { margin-bottom: 8px !important; gap: 6px !important; align-items: center !important; flex-wrap: nowrap !important; }
.chat-card--mini .agent__left { gap: 6px !important; flex: 1 1 auto !important; min-width: 0 !important; }
.chat-card--mini .agent__avatar { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-width: 1.5px !important; }
.chat-card--mini .agent__name { font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; }
.chat-card--mini .agent__role { display: none !important; }
.chat-card--mini .online { font-size: 0 !important; gap: 0 !important; flex: 0 0 auto !important; }
.chat-card--mini .online::before { width: 8px !important; height: 8px !important; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18) !important; }
.chat-card--mini .messages { gap: 5px !important; }
.chat-card--mini .messages--stream {
  height: 100px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  gap: 5px !important;
  position: relative !important;
}
.chat-card--mini .messages--stream .bubble {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  animation: bubblePop 0.35s ease-out forwards;
  flex-shrink: 0;
}
.chat-card--mini .messages--stream .bubble--ai { align-self: flex-start !important; }
.chat-card--mini .messages--stream .bubble--user { align-self: flex-end !important; }
.chat-card--mini .messages--stream .bubble--search { align-self: flex-start !important; }
@keyframes bubblePop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-card--mini .bubble {
  font-size: 9.5px !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  line-height: 1.35 !important;
  max-width: 92% !important;
}
.chat-card--mini .bubble--user { min-width: 0 !important; padding: 5px 10px !important; }
.chat-card--mini .bubble--search { min-width: 0 !important; gap: 5px !important; }

/* 旧FV .job-card モバイル調整も削除済み */

.stats { margin-top: 10px !important; }
.stat {
  min-height: 0 !important;
  padding: 6px 6px 8px !important;
  gap: 3px !important;
  align-content: center !important;
}
.stat__icon {
  width: 34px !important;
  height: 34px !important;
  background: rgba(255, 90, 0, 0.10);
  color: var(--orange);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.stat__label { font-size: 11.5px !important; }
.stat__value {
  font-size: 21px !important;
  white-space: nowrap;
  letter-spacing: -0.03em !important;
}
.stat__value small { font-size: 11px !important; white-space: normal; margin-top: 0 !important; }
.note { margin-top: 8px !important; }
.note { font-size: 11px !important; }

body.lp-body { background: #fff; line-height: 1.6; }