/* =========================================================
   smalabo-rev.css  — 2026-09 コピー改訂で追加した共通部品
   styles.css の後に読み込む。既存トークン（--c-*）を利用する。
   ========================================================= */

/* ---------- kicker / eyebrow ---------- */
.rev-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-red-2);
  margin-bottom: 10px;
}
.section--dark .rev-kicker,
.section--dark-2 .rev-kicker,
.hero .rev-kicker { color: #FCA5A5; }

.hero__eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FCA5A5;
  margin-bottom: 14px;
}

/* ---------- hero chips ---------- */
.rev-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.rev-chips li {
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #F9FAFB;
}

/* ---------- CORE model ---------- */
.rev-core__head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.rev-core__title {
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 14px;
  text-wrap: balance;
}
.rev-core__lead { color: var(--c-text-sub); margin: 0; }

.rev-core__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 960px) { .rev-core__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rev-core__grid { grid-template-columns: 1fr; } }

.rev-core__item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-core__letter {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--c-red-2);
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.rev-core__en {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  text-transform: uppercase;
}
.rev-core__ja { font-size: 1.125rem; font-weight: 700; margin: 0; }
.rev-core__desc { font-size: 0.9375rem; color: var(--c-text-sub); margin: 0; line-height: 1.75; }
.rev-core__how {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border-dark);
  font-size: 0.8125rem;
  color: var(--c-text-sub);
  line-height: 1.7;
}
.rev-core__note { text-align: center; font-size: 0.875rem; color: var(--c-text-muted); margin: 24px auto 0; max-width: 760px; }

/* ---------- compare (請負 / ラボ / CORE) ---------- */
.rev-compare { overflow-x: auto; margin-top: 32px; }
.rev-compare table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; font-size: 0.9375rem; }
.rev-compare th, .rev-compare td { border: 1px solid var(--c-border); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.7; }
.rev-compare thead th { background: var(--c-light-2); font-weight: 700; }
.rev-compare .is-core { background: var(--c-red-bg); font-weight: 700; }

/* ---------- people ---------- */
.rev-people__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 860px) { .rev-people__grid { grid-template-columns: 1fr; } }

.rev-person {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.rev-person--lead { grid-template-columns: 160px minmax(0, 1fr); padding: 28px; }
@media (max-width: 560px) {
  .rev-person, .rev-person--lead { grid-template-columns: 1fr; }
}
.rev-person__photo {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-light-2);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  text-align: center;
}
.rev-person__role { font-size: 0.8125rem; color: var(--c-text-muted); margin: 0 0 2px; line-height: 1.6; }
.rev-person__name { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; }
.rev-person__quote { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; margin: 0 0 10px; }
.rev-person__body { font-size: 0.9375rem; color: var(--c-text-sub); line-height: 1.85; margin: 0 0 10px; }
.rev-person__body:last-child { margin-bottom: 0; }

.rev-people__side { display: grid; gap: 16px; align-content: start; }

/* ---------- offer box (AIリバース等) ---------- */
.rev-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: center;
  background: #fff;
  border: 2px solid var(--c-red-2);
  border-radius: var(--radius);
  padding: 28px 32px;
}
@media (max-width: 760px) { .rev-offer { grid-template-columns: 1fr; padding: 24px; } }
.rev-offer__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--c-red-2);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.rev-offer__title { font-size: 1.375rem; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
.rev-offer__desc { color: var(--c-text-sub); margin: 0; line-height: 1.8; }

/* ---------- three CTAs ---------- */
.rev-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 860px) { .rev-paths { grid-template-columns: 1fr; } }
.rev-path {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.rev-path__who { font-size: 0.8125rem; color: var(--c-text-light-sub); margin: 0; }
.rev-path__title { font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0; }
.rev-path__desc { font-size: 0.875rem; color: var(--c-text-light-sub); margin: 0 0 8px; line-height: 1.75; }
.rev-path .btn { margin-top: auto; align-self: flex-start; }

/* ---------- document points ---------- */
.rev-docpoints {
  background: var(--c-light);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 24px;
}
.rev-docpoints__title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.rev-docpoints ul { margin: 0; padding-left: 1.2em; }
.rev-docpoints li { margin-bottom: 6px; line-height: 1.7; font-size: 0.9375rem; }
.rev-docpoints li:last-child { margin-bottom: 0; }

/* ---------- entry paths (入口別) ---------- */
.rev-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) { .rev-entries { grid-template-columns: 1fr; } }
.rev-entry {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-entry__q { font-size: 0.875rem; color: var(--c-red-2); font-weight: 700; margin: 0; }
.rev-entry__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.5; margin: 0; }
.rev-entry__desc { font-size: 0.9375rem; color: var(--c-text-sub); margin: 0 0 6px; line-height: 1.8; }
.rev-entry__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; }

/* ---------- form: 代表面談希望 ---------- */
.rev-form-optin {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--c-light);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.rev-form-optin input { margin-top: 5px; }
.rev-form-optin small { display: block; color: var(--c-text-muted); font-size: 0.8125rem; }

/* 課題ページで、その課題に効く条件を強調する */
.rev-core__item--focus { border: 2px solid var(--c-red-2); }

/* ---------- スマホ幅で、長いボタン文言や1列グリッドがはみ出さないようにする ---------- */
.rev-paths > *, .rev-entries > *, .rev-core__grid > *, .rev-people__grid > *, .rev-offer > * { min-width: 0; }
@media (max-width: 860px) {
  .rev-paths, .rev-entries, .rev-people__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .rev-offer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .rev-core__grid { grid-template-columns: minmax(0, 1fr); }
  main .btn { white-space: normal; max-width: 100%; text-align: center; }
}
/* 資料ダウンロード系ページ：keep-all のままだと長い日本語の見出しが折り返せない */
@media (max-width: 860px) {
  .doc-dl { grid-template-columns: minmax(0, 1fr); }
  .doc-dl__title, .doc-dl__subtitle, .doc-dl__lead { word-break: normal; overflow-wrap: anywhere; }
}

/* フォームの任意項目 */
.form-optional { font-size: 0.8125rem; font-weight: 400; color: var(--c-text-muted); margin-left: 4px; }

/* ---------- トップのファーストビュー：左に文言、右に写真 ---------- */
.hero__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  text-align: left;
}
.hero__inner--split .hero__title { text-wrap: balance; }
.hero__inner--split .btn-group,
.hero__inner--split .rev-chips { justify-content: flex-start; }
.hero__photo { margin: 0; position: relative; }
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.hero__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(17, 24, 39, 0.78);
  color: #F9FAFB;
  font-size: 0.8125rem;
  padding: 6px 12px;
  border-radius: 999px;
}
@media (max-width: 960px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__photo { max-width: 560px; }
}

/* ---------- PEOPLE：代表と開発フロアの写真 ---------- */
img.rev-person__photo { display: block; height: auto; }
.rev-people__photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rev-people__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.rev-people__photo figcaption { font-size: 0.875rem; color: var(--c-text-sub); line-height: 1.7; }

/* ---------- トップのファーストビュー：体制図 ---------- */
.hero__diagram { margin: 0; }
.hero__diagram img { display: block; width: 100%; height: auto; max-width: 560px; margin-left: auto; }
@media (max-width: 960px) { .hero__diagram img { margin: 0; } }

/* ---------- PEOPLE：会社の実績 ---------- */
.rev-facts {
  background: var(--c-dark);
  color: var(--c-text-light);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rev-facts__title { font-weight: 700; font-size: 1.0625rem; margin: 0; }
.rev-facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; }
.rev-facts__list div { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 10px; }
.rev-facts__list dt { font-size: 0.8125rem; color: var(--c-text-light-sub); }
.rev-facts__list dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rev-facts__list dd small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--c-text-light-sub); }
.rev-facts__badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rev-facts__badges li { font-size: 0.75rem; padding: 5px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; }

/* ---------- 資料カード：4冊・表紙画像つき ---------- */
.doc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; }
@media (max-width: 1080px) { .doc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 600px) { .doc-grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }
.doc-grid--4 .doc-card__thumb > img { object-fit: cover; }
.doc-card__kind { font-size: 0.75rem; font-weight: 700; color: var(--c-red-2); margin: 14px 20px 0; letter-spacing: 0.04em; }
.doc-grid--4 .doc-card__title { margin-top: 4px; }

.download-card--cover { align-items: flex-start; }
.download-card__cover { flex: 0 0 240px; display: block; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--c-border); }
.download-card__cover img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .download-card--cover { flex-direction: column; }
  .download-card__cover { flex-basis: auto; width: 100%; max-width: 420px; }
}
/* 表紙つきカードは横幅を取るので、資料一覧は1列で並べる */
.download-grid:has(.download-card--cover) { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; }

/* 資料ダウンロードページ：左の列に表紙を置く */
.doc-dl__cover-img { display: block; width: 100%; max-width: 520px; height: auto; border: 1px solid var(--c-border); border-radius: var(--radius); margin: 8px 0 20px; }