/* ペルコモ LP — デザイントークンはモックアップ(Main.dc.html の :root)どおり */
:root {
  --surface: #ffffff;
  --surface-quiet: #f3f5f8;
  --chosen-bg: #eff4fb;
  --paper: #fbfaf6;
  --line-soft: #e9edf2;
  --line: #cfd5dd;
  --line-strong: #70757f;
  --text: #14161a;
  --text-muted: #5b646d;
  --text-faint: #70757f;
  --fill: #16305c;
  --fill-hover: #244b83;
  --on-fill: #ffffff;
  --fill-text: #285fbb;
  --mark: #c3352b;
  --logo-ink: #182d4b;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-float: 0 6px 24px #14161a1a;
  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', sans-serif;
  --font-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'palt' 1;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

.mincho {
  font-family: var(--font-serif);
  font-weight: 500;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--fill-text);
}
a:hover {
  color: var(--fill);
}
a:focus-visible {
  outline: 2px solid var(--fill-text);
  outline-offset: 3px;
}

/* 共通レイアウト */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(16px, 4%);
  box-sizing: border-box;
}

.section {
  padding: 96px 0;
  border-top: 1px solid var(--line-soft);
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.lead {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.9;
  max-width: 40rem;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-control);
  text-decoration: none;
  font-size: 16px;
}
.btn-primary {
  background: var(--fill);
  color: #ffffff;
}
.btn-primary:hover {
  color: #ffffff;
  background: var(--fill-hover);
}
.btn-light {
  background: #ffffff;
  color: var(--fill);
}

@media (max-width: 760px) {
  .nav-links {
    display: none !important;
  }
}

/* ヘッダー */
.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: #ffffff;
}
.site-header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand-divider {
  width: 1px;
  height: 24px;
  background: var(--logo-ink);
  opacity: 0.35;
  margin: 0 4px;
}
.brand-sub {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--logo-ink);
  white-space: nowrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
}
.nav-link {
  color: var(--text);
  text-decoration: none;
}
.btn-sm {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* ファーストビュー */
.hero {
  padding: 72px 0 96px;
}
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-end;
  justify-content: space-between;
}
.hero-main {
  flex: 1 1 560px;
  min-width: 0;
}
.release-note {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.hero-title {
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.32;
  letter-spacing: 0.04em;
  color: var(--text);
}
.hero-lead {
  margin: 32px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.9;
  max-width: 34em;
}
.hero-side {
  flex: 0 1 400px;
  min-width: 0;
}
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 15px;
}
.flow li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--fill);
  color: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.hero-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.hero-sub-link {
  font-size: 15px;
}
.hero-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.hero-figure {
  margin: 56px 0 0;
}
.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  background: #ffffff;
}
.shot-bar {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--surface-quiet);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-muted);
}
.steps-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 32px;
}
.step-item {
  display: flex;
  gap: 12px;
}
.step-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}
.step-badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fill);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.figure-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.strong {
  font-weight: 600;
}

/* こんな場面で */
.cards-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.scene-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-tag {
  font-size: 13px;
  color: var(--text-muted);
}
.card-title {
  font-size: 17px;
  font-weight: 600;
}
.card-quote {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}
.card-foot {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.example-tags {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.example-tags-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 8px;
}
.tag-pill {
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 13px;
}

/* 使い方 */
.how-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px 32px;
}
.how-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.how-shot {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 240px;
}
.how-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.how-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.how-num {
  font-size: 29px;
  color: var(--fill);
}
.how-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.how-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}
.fine-note {
  margin: 32px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* 3,000人のこと */
.face-wall {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.face-wall img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-quiet);
}
.stats-bar {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.stat-num {
  font-size: 40px;
  line-height: 1.2;
  color: var(--fill);
}
.stat-unit {
  font-size: 21px;
  margin-left: 4px;
}
.stat-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.profile-grid {
  margin-top: 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.profile-text {
  flex: 1 1 320px;
  min-width: 0;
}
.profile-h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.profile-p {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.9;
}
.profile-card {
  flex: 1.4 1 480px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
}
.profile-head {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.profile-head img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.profile-name {
  font-size: 21px;
  letter-spacing: 0.04em;
}
.profile-meta {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.profile-dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 24px;
}
.dl-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.dl-row:nth-last-child(-n + 2) {
  border-bottom: none;
}
.dl-row dt {
  font-size: 13px;
  color: var(--text-muted);
}
.dl-row dd {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.8;
}
.compare-block {
  margin-top: 96px;
}
.compare-h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.compare-p {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.9;
  max-width: 44rem;
}
.compare-figure {
  margin-top: 40px;
  max-width: 1040px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 24px;
  box-sizing: border-box;
}
.compare-source {
  margin: 32px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 44rem;
}

/* なぜ、いま */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
}
.why-text {
  flex: 1 1 380px;
  min-width: 0;
}
.why-p {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.9;
}
.why-strong {
  font-size: 17px;
  font-weight: 600;
}
.why-cards {
  flex: 1 1 460px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-content: start;
}
.why-num {
  margin-top: 12px;
  font-size: 48px;
  line-height: 1;
  color: var(--fill);
}
.why-card-p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.8;
}
.why-note {
  margin: 0;
  grid-column: 1 / -1;
}

/* 対話の例 */
.section-quiet {
  background: var(--surface-quiet);
}
.case-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.case-step {
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-step-accent {
  border: 1px solid var(--fill);
}
.case-tag-accent {
  color: var(--fill);
}
.case-step-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}
.case-step-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.case-step-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.quote-figure {
  margin: 64px auto 0;
  max-width: 820px;
}
.case-quote {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.9;
}
.quote-caption {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.quote-caption img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.case-conditions {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.case-condition {
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 24px;
}
.condition-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.condition-p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.9;
}
.case-figures {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.case-shot {
  margin: 0;
}
.shot-fill {
  height: 300px;
}
.shot-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-shot .figure-note {
  margin-top: 8px;
}
.case-summary {
  margin: 64px 0 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  max-width: 46rem;
}
.case-disclaimer {
  margin: 32px 0 0;
  max-width: 54rem;
  line-height: 1.6;
}

/* 使いながら、学ぶ */
.learn {
  border-top: none;
}
.learn-flow {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.learn-q {
  margin: 0;
  font-size: 17px;
  color: var(--text-muted);
}
.learn-arrow {
  font-size: 21px;
  color: var(--text-faint);
}
.learn-a {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.learn-a-line {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.jobs-head {
  margin-top: 48px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.jobs-tag {
  font-size: 12px;
  color: var(--text-faint);
}
.jobs-grid {
  margin-top: 16px;
}
.job-card {
  padding: 24px;
}
.job-q {
  margin: 8px 0 0;
  font-size: 21px;
  letter-spacing: 0.04em;
}
.learn-note {
  margin: 24px 0 0;
  max-width: 54rem;
  line-height: 1.75;
}

/* 実際の顧客で確かめる */
.research-note {
  flex: 1 1 340px;
  min-width: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
  align-self: flex-start;
}

/* ブランド帯 */
.brand-band {
  background: var(--fill);
  color: #ffffff;
}
.brand-band-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.strip {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.strip img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
}
.brand-h2 {
  margin: 40px 0 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #ffffff;
}
.brand-lead {
  margin: 24px 0 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.brand-p {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #ffffff;
  max-width: 32rem;
}
.brand-band .btn {
  margin-top: 40px;
}
.cm {
  margin: 40px 0 0;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border: 1px solid #ffffff33;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.cm iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.brand-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: #ffffff;
}

/* 料金 */
.price {
  border-top: none;
}
.price-grid {
  margin-top: 48px;
}
.price-num {
  margin-top: 16px;
  font-size: 29px;
  color: var(--fill);
}
.price-tax {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}
.price-accent {
  border-color: var(--fill);
}
.price .fine-note {
  margin: 16px 0 0;
}

/* パートナー */
.partner-grid {
  margin-top: 48px;
}
.partner-cta {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-control);
  border: 1px solid var(--line-strong);
  color: var(--fill);
  text-decoration: none;
  font-size: 14px;
}

/* 開発者 */
.dev-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
}
.dev-text {
  flex: 1 1 420px;
  min-width: 0;
}
.dev-name {
  margin: 0;
  font-size: 29px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.dev-role {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.dev-books {
  flex: 1 1 420px;
  min-width: 0;
}
.books-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.book {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.book img {
  width: 64px;
  height: 92px;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}
.book-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 3em;
}
.book-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* FAQ */
.faq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}
.faq-head {
  flex: 1 1 260px;
  min-width: 0;
}
.faq-h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 29px);
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.faq-list {
  flex: 2.4 1 560px;
  min-width: 0;
  margin: 0;
}
.faq-item {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.faq-item-last {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  font-size: 17px;
  font-weight: 600;
}
.faq-a {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.9;
}

/* 出典 */
.sources {
  padding: 64px 0;
  background: #ffffff;
}
.sources-h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.sources-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 48px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}
.source-item {
  margin: 0;
}

/* フッター */
.site-footer {
  border-top: 1px solid var(--line);
}
.footer-inner {
  padding-top: 32px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 13px;
}
.footer-link {
  color: var(--text);
  text-decoration: none;
}
.footer-copy {
  color: var(--text-muted);
  font-size: 12px;
}