/* AI家来づくり LP — page styles
   色・フォント・余白は tokens.css の変数だけを使う。
   ブレークポイント: 768px (--bp-md) / 1024px (--bp-lg) */

/* ---------- Base ---------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-sumi);
  background: var(--color-ivory);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-navy); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
ul, ol { list-style: none; }
strong { font-weight: var(--fw-bold); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-y) 0; }
.bg-paper { background: var(--color-paper); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-only { display: inline; }
.en { font-family: var(--font-en); }

/* 未確定情報の表示 */
.todo {
  display: inline-block;
  background: var(--color-gold-tint);
  color: var(--color-navy);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-heading);
  text-decoration: none;
  text-align: center;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) ease;
}
.btn:focus-visible { outline: var(--btn-focus-ring); outline-offset: 2px; }
.btn .arrow { transition: transform var(--dur-base) ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--shadow-button); }
.btn-primary:hover { background: var(--btn-primary-hover-bg); }
.btn-navy { background: var(--btn-navy-bg); color: var(--btn-navy-fg); }
.btn-navy:hover { background: var(--color-navy-hover); }
.btn-ghost { border: 1px solid var(--btn-ghost-border); color: var(--color-on-navy); }
.btn-ghost:hover { background: var(--color-on-navy); color: var(--color-navy); }
.btn-lg { font-size: var(--btn-fs-lg); padding: var(--space-5) var(--space-7); }
.btn-block { width: 100%; }

/* ---------- Header（[P]形式：ロゴ＋サービス名＋相談ボタン） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  border-bottom: var(--header-border);
}
.hd { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-3); }
.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.logo img { height: 44px; width: auto; }
.hd .btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-caption); white-space: nowrap; box-shadow: none; }

/* ---------- Section heading（[M] マーク＋英字ラベル＋和文h2） ---------- */
.sec-head { margin-bottom: var(--section-head-gap); }
.sec-label { display: flex; align-items: center; gap: var(--sechead-mark-gap); }
.sec-label img { height: var(--sechead-mark-h); width: auto; flex-shrink: 0; }
.sec-label span {
  font-family: var(--sechead-label-font); font-weight: var(--sechead-label-weight);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sechead-label-color); line-height: 1;
}
.sec-title {
  margin-top: var(--sechead-title-mt);
  font-size: var(--fs-h2); letter-spacing: var(--ls-heading); color: var(--sechead-title-color);
}
.sec-lead { margin-top: var(--sechead-lead-mt); max-width: var(--maxw-text); color: var(--sechead-lead-color); font-size: var(--fs-lead); }
.on-navy .sec-label span { color: var(--color-gold); }
.on-navy .sec-title { color: var(--color-on-navy); }
.on-navy .sec-lead { color: var(--color-on-navy-muted); }

/* ---------- Card ---------- */
.card {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius);
  padding: var(--card-pad);
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}
.card .num { font-family: var(--font-en); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); color: var(--card-num-color); }
.card h3 { font-size: var(--fs-md); color: var(--color-navy); margin: var(--space-2) 0; }
.card p, .card li { font-size: var(--fs-ui); color: var(--color-text-muted); }
.grid { display: grid; gap: var(--space-4); }

.tag {
  display: inline-block; font-size: var(--tag-fs); font-weight: var(--fw-bold); letter-spacing: var(--ls-button);
  color: var(--tag-fg); background: var(--tag-bg); border: var(--tag-border);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); line-height: var(--lh-heading);
}

.check li, .dot li { position: relative; padding-left: var(--space-5); }
.check li + li, .dot li + li { margin-top: var(--space-2); }
.check li::before { content: "✓"; position: absolute; left: 0; color: var(--color-navy); font-weight: var(--fw-heavy); }
.dot li::before { content: ""; position: absolute; left: var(--space-1); top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold-strong); }

/* ---------- 1. Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--color-navy-deep) 0%, var(--color-navy) 60%);
  color: var(--color-on-navy);
  padding: var(--space-8) 0 0;
  overflow: hidden;
}
.hero-grid { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }
.hero .eyebrow { font-family: var(--font-en); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); color: var(--color-gold); margin-bottom: var(--space-5); }
.hero .svc-name { margin-bottom: var(--space-4); }
.hero .svc-name img { height: 64px; width: auto; max-width: 100%; }
.hero h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); margin-bottom: var(--space-5); }
.hero h1 em { font-style: normal; color: var(--color-gold); }
.hero .lead { color: var(--color-on-navy-muted); margin-bottom: var(--space-6); max-width: var(--maxw-text); font-size: var(--fs-lead); }
.hero-cta { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-on-navy-muted); }
.keep {
  background: var(--color-paper); color: var(--color-sumi);
  border-radius: var(--card-radius); padding: var(--card-pad); box-shadow: var(--shadow-float);
}
.keep .k-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--ls-button); color: var(--color-navy); margin-bottom: var(--space-3); }
.keep li { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-top: 1px dashed var(--color-line); }
.keep li:first-child { border-top: 0; }
.keep .n { font-family: var(--font-en); font-weight: var(--fw-heavy); color: var(--color-gold-strong); font-size: var(--fs-sm); }
.keep b { color: var(--color-navy); font-family: var(--font-display); font-size: var(--fs-md); }
.keep small { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }
.trust { background: var(--color-on-navy-faint); border-top: 1px solid var(--color-line-on-navy); }
.trust .wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust-item { padding: var(--space-4) var(--space-3); border-right: 1px solid var(--color-line-on-navy); border-bottom: 1px solid var(--color-line-on-navy); }
.trust-item:nth-child(2n) { border-right: 0; }
.trust-item .n { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-stat); color: var(--color-gold); line-height: 1.2; }
.trust-item .n small { font-family: var(--font-jp); font-size: var(--fs-sm); margin-left: 2px; }
.trust-item .t { font-size: var(--fs-sm); color: var(--color-on-navy-muted); line-height: var(--lh-heading); margin-top: var(--space-1); }

/* ---------- 2. Symptoms ---------- */

/* ---------- 3. Cause ---------- */
.cause-list { counter-reset: c; }
.cause-list .card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.cause-list .big { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-price); color: var(--color-gold-strong); line-height: 1; }
.cause-list .card.main { border: var(--price-reco-border); }

/* ---------- 4. Concept + comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); background: var(--color-paper); border: var(--table-border); border-radius: var(--card-radius); overflow: hidden; }
.compare th, .compare td { padding: var(--space-4); text-align: left; vertical-align: top; line-height: 1.8; }
.compare thead th { background: var(--table-head-bg); color: var(--table-head-fg); font-family: var(--font-display); font-size: var(--fs-ui); }
.compare thead th.ours { background: var(--color-gold); color: var(--color-navy); }
.compare tbody th { color: var(--color-navy); font-family: var(--font-display); white-space: nowrap; }
.compare tbody td { color: var(--color-text-muted); }
.compare tbody td.ours { color: var(--color-sumi); font-weight: var(--fw-medium); background: var(--color-gold-tint); }
.compare tbody tr + tr > * { border-top: var(--table-border); }
@media (max-width: 767px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { display: flex; flex-direction: column; padding: var(--space-4); }
  .compare tbody tr + tr > * { border-top: 0; }
  .compare tbody tr + tr { border-top: var(--table-border); }
  .compare th, .compare td { padding: 0; }
  .compare tbody th { font-size: var(--fs-caption); letter-spacing: var(--ls-button); }
  .compare td.ours { order: 1; background: none; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-navy); margin-top: var(--space-1); line-height: 1.6; }
  .compare td:not(.ours) { order: 2; font-size: var(--fs-sm); color: var(--color-text-subtle); margin-top: var(--space-1); line-height: 1.6; }
  .compare td:not(.ours)::before { content: "よくあるAI顧問・研修："; }
  .photo { max-width: 200px; }
  .plan { padding: var(--space-5); }
  .plan .for { margin-bottom: var(--space-2); }
  .fstep { padding: var(--space-4); gap: var(--space-3); }
  .flow { gap: var(--space-2); }
  .case-stats > div { padding: var(--space-4) var(--space-5); gap: 0; }
  .case-stats .v { font-size: var(--fs-stat); }
}

/* ---------- 5. Principles ---------- */

/* ---------- 6. Service ---------- */

/* ---------- 7. Case ---------- */

/* ---------- 8. Pricing ---------- */
.plan-grid { display: grid; gap: var(--space-5); }
.plan {
  background: var(--price-bg); border: var(--price-border); border-radius: var(--card-radius);
  padding: var(--card-pad); display: flex; flex-direction: column; position: relative;
}
.plan.reco { border: var(--price-reco-border); }
.plan.reco::before {
  content: "おすすめ"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--price-reco-badge-bg); color: var(--price-reco-badge-fg);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4); line-height: var(--lh-heading); white-space: nowrap;
}
.plan .badge { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); color: var(--card-num-color); }
.plan h3 { font-size: var(--fs-md); color: var(--color-navy); }
.plan .for { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.plan .p { border-top: var(--price-border); padding-top: var(--space-3); margin-top: auto; }
.plan .p .v { font-family: var(--price-amount-font); font-weight: var(--fw-heavy); font-size: var(--fs-price); color: var(--price-amount-color); line-height: 1.3; }
.plan .p .v small { font-family: var(--font-jp); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--price-unit-color); }
.plan .p .v .pre { font-size: var(--fs-sm); }
.plan .pay { font-size: var(--fs-caption); color: var(--color-text-muted); }
.plan .save { display: inline-block; margin-top: var(--space-1); }
.price-cta { margin-top: var(--space-7); text-align: center; }
.price-cta p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.fine { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: var(--space-5); line-height: 1.9; }

/* ---------- 9. Flow ---------- */
.flow { display: grid; gap: var(--space-3); counter-reset: f; }
.fstep { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--space-5); }
.fstep .n {
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-navy); color: var(--color-on-navy);
  font-family: var(--font-en); font-weight: var(--fw-heavy); display: flex; align-items: center; justify-content: center;
}
.fstep h3 { font-size: var(--fs-base); color: var(--color-navy); }
.fstep p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.8; }
.fstep.hl { border: var(--price-reco-border); }

/* ---------- 10. Profile ---------- */
.profile { display: grid; gap: var(--space-6); align-items: start; }
.photo { display: block; max-width: 280px; width: 100%; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--card-radius); background: var(--color-tint); }
.profile .role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.profile h3 { font-size: var(--fs-h2); color: var(--color-sumi); line-height: 1.3; }
.profile h3 .en { display: block; font-size: var(--fs-sm); letter-spacing: var(--ls-eyebrow); color: var(--color-navy); font-weight: var(--fw-bold); margin-top: var(--space-1); }
.profile blockquote {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-gold); background: var(--color-paper);
  font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-navy); line-height: 1.8;
}
.profile .dot li { font-size: var(--fs-ui); }
/* ---------- 11. FAQ（[P] details/summary） ---------- */
.faq-list details { background: var(--faq-bg); border: var(--faq-border); border-radius: var(--faq-radius); overflow: hidden; }
.faq-list details + details { margin-top: var(--space-3); }
.faq-list summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--space-4) calc(var(--space-7) + var(--space-1)) var(--space-4) var(--space-5);
  font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--faq-q-color); line-height: 1.7;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q."; font-family: var(--font-en); font-weight: var(--fw-heavy); color: var(--color-gold-strong); margin-right: var(--space-2); }
.faq-list summary::after { content: "＋"; position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%); color: var(--faq-icon-color); font-weight: var(--fw-heavy); }
.faq-list details[open] summary::after { content: "－"; }
.faq-list summary:focus-visible { outline: var(--btn-focus-ring); outline-offset: -3px; }
.faq-list .a { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-ui); color: var(--faq-a-color); }

/* ---------- 12. Contact CTA ---------- */
.cta { background: linear-gradient(160deg, var(--color-navy-deep), var(--color-navy)); color: var(--color-on-navy); text-align: center; }
.cta .sec-label { justify-content: center; }
.cta .sec-lead { margin-left: auto; margin-right: auto; }
.cta .points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-6); }
.cta .points li { font-size: var(--fs-sm); border: 1px solid var(--btn-ghost-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); }
.cta .sub { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-on-navy-muted); }

/* ---------- Footer（[P]形式＋[M]配色） ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); font-size: var(--footer-fs); line-height: 2; }
.site-footer .ft { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-7); }
.site-footer .ft-svc-logo { display: block; height: auto; width: 100%; max-width: 420px; margin-bottom: var(--space-5); }
.site-footer strong { color: var(--footer-strong); font-family: var(--font-display); }
.site-footer a { color: var(--footer-strong); text-decoration: none; border-bottom: 1px solid var(--color-line-on-navy); }
.site-footer a:hover { color: var(--footer-link-hover); }
.site-footer .ft-label { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); color: var(--color-on-navy-subtle); margin-bottom: var(--space-2); }
.site-footer .bottom { border-top: 1px solid var(--color-line-on-navy); }
.site-footer .bottom .wrap { padding-top: var(--space-5); padding-bottom: var(--space-5); font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--ls-button); color: var(--color-on-navy-subtle); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

/* ---------- ≥768px ---------- */
@media (min-width: 768px) {
  .wrap { padding: 0 var(--gutter-lg); }
  .sp-only { display: none; }
  .hd .btn { padding: var(--space-2) var(--space-5); font-size: var(--fs-sm); }
  .logo img { height: 52px; }
  .hero { padding-top: var(--space-8); }
  .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .trust .wrap { grid-template-columns: repeat(4, 1fr); }
  .trust-item { border-bottom: 0; padding: var(--space-5); }
  .trust-item:nth-child(2n) { border-right: 1px solid var(--color-line-on-navy); }
  .trust-item:last-child { border-right: 0; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .card { padding: var(--card-pad-lg); }
  .card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-line-navy); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .profile { grid-template-columns: 280px 1fr; gap: var(--space-8); }
  .site-footer .ft { grid-template-columns: 1.4fr 1fr; }
}

/* ---------- ≥1024px ---------- */
@media (min-width: 1024px) {
  .sec-label img { height: calc(var(--sechead-mark-h) + 8px); }
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: var(--space-8); padding-bottom: var(--space-8); }
  .plan-grid { grid-template-columns: repeat(4, 1fr); }
  .plan { padding: var(--card-pad); }
  .flow { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn .arrow, .card { transition: none; }
}

/* ---------- 和文の改行（文節で折り返す） ---------- */
h1, h2, h3, h4, summary, .symptoms li, .btn, .keep b, .compare th, .plan .for, .chips li, .case-stats .k { word-break: auto-phrase; text-wrap: balance; }
@media (max-width: 767px) {
  .btn-lg { width: 100%; padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ---------- イメージキャラクター「AI家来」と吹き出し ---------- */
.kerai { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.kerai picture { flex-shrink: 0; }
.kerai img { height: var(--kerai-h); width: auto; }
.kerai--hero    { --kerai-h: var(--kerai-hero-h-sp); }
.kerai--komari  { --kerai-h: var(--kerai-komari-h-sp); }
.kerai--aisatsu { --kerai-h: var(--kerai-aisatsu-h-sp); }

.bubble {
  position: relative;
  max-width: var(--bubble-maxw);
  padding: var(--bubble-pad-y) var(--bubble-pad-x);
  background: var(--bubble-bg);
  color: var(--bubble-fg);
  border: var(--bubble-border);
  border-radius: var(--bubble-radius);
  font-family: var(--font-body);
  font-size: var(--bubble-fs);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  text-align: left;
  word-break: auto-phrase;
}
/* しっぽ：右側（キャラクターの方向）に小さな三角 */
.bubble--to-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--bubble-tail) / -2 - 1px);
  width: var(--bubble-tail);
  height: var(--bubble-tail);
  background: var(--bubble-bg);
  border-top: var(--bubble-border);
  border-right: var(--bubble-border);
  transform: translateY(-50%) rotate(45deg);
}

/* ファーストビュー：右列＝キャラクター＋「手元に残るもの」カード */
.hero-side { display: grid; gap: var(--space-5); }

/* 原因：見出しの右（スマホでは下）にキャラクター */
.sec-head-row { display: grid; gap: var(--space-5); margin-bottom: var(--section-head-gap); }
.sec-head-row .sec-head { margin-bottom: 0; }

/* 末尾CTA：相談ボタンの横（スマホでは上）にキャラクター */
.cta-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

@media (min-width: 768px) {
  .kerai--komari  { --kerai-h: var(--kerai-komari-h); }
  .kerai--aisatsu { --kerai-h: var(--kerai-aisatsu-h); }
  .sec-head-row { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-7); }
  .cta-row { flex-direction: row; justify-content: center; gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .kerai--hero { --kerai-h: var(--kerai-hero-h); }
}

/* ---------- 見出しの強調（蛍光ペン風マーカー） ---------- */
.marker { background: linear-gradient(transparent 62%, var(--color-gold-marker) 62%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 767px) {
  .hero .eyebrow { letter-spacing: 0.18em; font-size: var(--fs-caption); }
}

/* ---------- 2. こんな社長へ：一言のチェックリスト＋対象 ---------- */
.symptoms { display: grid; gap: var(--space-3); }
.symptoms li {
  position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-6));
  background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-navy); line-height: var(--lh-heading);
}
.symptoms li::before {
  content: "✓"; position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 2px solid var(--color-gold-strong);
  color: var(--color-gold-strong); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center;
}
.fit-box { margin-top: var(--space-6); padding: var(--card-pad); background: var(--color-tint); border-radius: var(--card-radius); }
.fit-label { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-navy); margin-bottom: var(--space-3); }
.fit-other { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.8; }

/* タグ型の一覧（対象・任せている仕事） */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li {
  background: var(--color-paper); border: 1px solid var(--color-line-navy); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--color-sumi); line-height: 1.5;
}

/* ---------- 5. 原則：番号つき一覧 ---------- */
.principles { display: grid; border-top: var(--table-border); }
.principles li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--table-border); }
.principles .num { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-lg); color: var(--color-gold-strong); line-height: 1.3; min-width: 1.6em; }
.principles h3 { font-size: var(--fs-md); color: var(--color-navy); }
.principles p { font-size: var(--fs-ui); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- 6. サービス内容 ---------- */
.svc-flow { display: grid; gap: var(--space-4); }
.svc-step .head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.svc-step .badge { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); color: var(--color-navy); }
.svc-step h3 { font-size: var(--fs-lg); margin: var(--space-2) 0; }
.svc-step.core { border: var(--price-reco-border); }
.svc-load { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); background: var(--color-tint); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-sumi); }
.svc-load b { color: var(--color-navy); margin-right: var(--space-2); }
.svc-step .check li { font-size: var(--fs-ui); }
.svc-terms { margin-top: var(--space-5); display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px dashed var(--color-line-navy); border-radius: var(--card-radius); }
.svc-terms h3 { font-size: var(--fs-ui); color: var(--color-navy); }
.svc-terms p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-1); line-height: 1.8; }

/* ---------- 7. 事例：数字＋任せている仕事 ---------- */
.case-stats { display: grid; gap: var(--space-3); }
.case-stats > div { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--space-5); display: grid; gap: var(--space-1); }
.case-stats .v { font-family: var(--font-en); font-weight: var(--fw-heavy); font-size: var(--fs-price); color: var(--color-navy); line-height: 1.1; }
.case-stats .v small { font-family: var(--font-jp); font-size: var(--fs-md); margin-left: 2px; }
.case-stats .k { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.7; }
.case-sub { font-size: var(--fs-lg); color: var(--color-navy); margin: var(--space-7) 0 var(--space-4); }
.ai-work { display: grid; gap: var(--space-3); }
.work-group { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--space-5); }
.work-group .num { font-family: var(--font-en); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); color: var(--card-num-color); }
.work-group h4 { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-navy); margin: var(--space-1) 0 var(--space-3); }
.work-group--think { border: var(--price-reco-border); }
.case-note { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--color-text-muted); }

@media (max-width: 767px) {
  :root { --card-pad: 22px; }
}
@media (min-width: 768px) {
  .fit-box .chips li { font-size: var(--fs-ui); }
  .svc-terms { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .case-stats { grid-template-columns: repeat(3, 1fr); }
  .ai-work { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .symptoms { grid-template-columns: repeat(3, 1fr); }
  .symptoms li { display: flex; align-items: center; min-height: 100%; }
  .principles { grid-template-columns: repeat(5, 1fr); border-top: 0; gap: var(--space-5); }
  .principles li { grid-template-columns: 1fr; align-content: start; gap: var(--space-2); border-bottom: 0; border-top: 3px solid var(--color-navy); padding-top: var(--space-4); }
  .svc-flow { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .ai-work { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4. 名前の意味を家来が説明 ---------- */
.name-explain { margin: 0 0 var(--space-7); display: grid; gap: var(--space-4); justify-items: center; }
.name-explain img { height: var(--kerai-aisatsu-h); width: auto; }
.bubble--lg { max-width: 40rem; width: 100%; padding: var(--space-5); font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--color-sumi); line-height: 1.85; }
.bubble--lg p + p { margin-top: var(--space-3); }
.bubble--lg b { color: var(--color-navy); }
.bubble--lg .who { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--color-navy); }
.roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.roles li { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-tint); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-navy); }
.roles li span { background: var(--color-navy); color: var(--color-on-navy); border-radius: var(--radius-pill); padding: 0 var(--space-3); font-size: var(--fs-caption); }
/* スマホ：しっぽは上（キャラクターの方向） */
.bubble--to-left::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--bubble-tail) / -2 - 1px);
  width: var(--bubble-tail); height: var(--bubble-tail); background: var(--bubble-bg);
  border-top: var(--bubble-border); border-left: var(--bubble-border);
  transform: translateX(-50%) rotate(45deg);
}
/* 家来のチーム図（絵の地色が四角く見えるので、カードとして見せる） */
.team { margin: 0 0 var(--space-7); display: grid; gap: var(--space-5); justify-items: center; }
.team img { width: 100%; max-width: 520px; height: auto; border-radius: var(--radius-card); border: var(--card-border); }
/* 家来のセリフ。しっぽは図の方へ（スマホ：下／PC：右） */
.team .bubble::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--bubble-tail) / -2 - 1px);
  width: var(--bubble-tail); height: var(--bubble-tail); background: var(--bubble-bg);
  border-right: var(--bubble-border); border-bottom: var(--bubble-border);
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 768px) {
  .team { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--space-6); }
  .team .bubble::after { left: auto; right: calc(var(--bubble-tail) / -2 - 1px); bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .name-explain { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: var(--space-6); }
  .name-explain img { height: 260px; }
  .bubble--to-left::after { left: calc(var(--bubble-tail) / -2 - 1px); top: 50%; transform: translateY(-50%) rotate(-45deg); }
}

@media (max-width: 767px) {
  .logo img { height: 40px; }
}
@media (min-width: 1024px) {
  .hero .svc-name img { height: 84px; }
}