/*
 * サービス詳細（/service/{slug}/）の presentation。
 *
 * 本文の器（.bloom-article-*）は bloom-knowledge.css、流れ（.bloom-flow）は
 * bloom-platform.css が持つ。ここはこのページ固有の並びだけ。
 */

.bloom-sd-hero { background: var(--bloom-ground-tint); }

.bloom-sd-title {
  max-width: 22em;
  margin-top: 14px;
  /* 色は .bloom-display（--bloom-title の水色）に任せる。他の下層ページと同じ。 */
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.4;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

.bloom-sd-body { background: var(--bloom-white); }
.bloom-sd-people { background: var(--bloom-ground-warm); }
.bloom-sd-kpi { background: var(--bloom-white); }
.bloom-sd-behavior { background: var(--bloom-ground-warm); }
.bloom-sd-salary { background: var(--bloom-white); }

.bloom-sd-figure {
  margin: 44px 0 0;
}

.bloom-sd-figure img {
  height: auto;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
}

.bloom-sd-figure figcaption {
  margin-top: 12px;
  color: var(--bloom-faint);
  font-size: 11px;
  line-height: 1.7;
}

/* 3つの観点 ------------------------------------------------------------------- */

.bloom-sd-dim-grid {
  display: grid;
  gap: 20px;
  margin-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bloom-sd-dim {
  --accent: var(--bloom-pastel-blue);
  position: relative;
  padding: 34px 30px 30px;
  isolation: isolate;
}

.bloom-sd-dim::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 66% 42% 64% 48% / 54% 64% 44% 58%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: rotate(-3deg);
}

.bloom-sd-dim.is-coral { --accent: var(--bloom-pastel-coral); }
.bloom-sd-dim.is-green { --accent: var(--bloom-pastel-green); }

.bloom-sd-dim .num {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
}

.bloom-sd-dim b {
  display: block;
  margin: 18px 0 10px;
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.bloom-sd-dim span:not(.num) {
  color: #5a757c;
  font-size: 13px;
  line-height: 1.85;
}

/* 経営側 / 社員側 -------------------------------------------------------------- */

.bloom-sd-value-grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bloom-sd-value {
  --accent: var(--bloom-pastel-blue);
  padding: 30px 28px 26px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
}

.bloom-sd-value.is-after { --accent: var(--bloom-pastel-green); }

.bloom-sd-value small {
  display: block;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--accent);
  color: var(--bloom-ink-deep);
  font-size: 13px;
  font-weight: 600;
}

.bloom-sd-value ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.bloom-sd-value li {
  position: relative;
  padding: 7px 0 7px 18px;
  color: #5a757c;
  font-size: 13px;
  line-height: 1.8;
}

.bloom-sd-value li::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ~900px ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bloom-sd-dim-grid,
  .bloom-sd-value-grid { grid-template-columns: minmax(0, 1fr); }
}