/* 業務システム開発（仕様 6-5）。共通部品は site.css、ここはこのページ固有の配置だけ。 */

/* ============================== */
/*         2 よくあるお悩み         */
/* ============================== */

.p-sys-worry__note {
  margin-top: clamp(40px, 5vw, 64px);
  color: var(--color-primary-deep);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* ============================== */
/*         3 解決メッセージ         */
/* ============================== */

.p-sys-message {
  overflow: hidden;
  isolation: isolate;
}

/* 薄い抽象柄（system/message-bg の代わりにコードで描く） */
.p-sys-message__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 20%, rgba(143, 193, 82, 0.16) 0%, rgba(143, 193, 82, 0) 40%),
    radial-gradient(circle at 10% 90%, rgba(0, 122, 77, 0.45) 0%, rgba(0, 122, 77, 0) 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px);
}

.p-sys-message__inner {
  max-width: 960px;
  text-align: center;
}

.p-sys-message__en {
  color: var(--color-mint-2);
}

.is-site .p-sys-message__title {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.75;
  letter-spacing: 0.08em;
}

.p-sys-message__num {
  margin: 0 0.15em;
  color: var(--color-accent);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.p-sys-message__note {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
}

@media (max-width: 767px) {
  .p-sys-message__inner {
    text-align: left;
  }
}

/* ============================== */
/*            5 開発例             */
/* ============================== */

.p-sys-cases .l-grid > div {
  height: 100%;
}

.p-sys-cases .c-feature__text {
  color: var(--color-muted);
}

.p-sys-cases__soon {
  margin-top: clamp(40px, 5vw, 64px);
}

.p-sys-cases__soon .c-coming-soon {
  padding-block: clamp(48px, 6vw, 72px);
}

.p-sys-cases__soon .c-coming-soon__en {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}