/* サービス別ページ（/services/system/・/services/ai-agent/）の共通スタイル。
   トップの SERVICE セクションと同じ配色（緑 #8FC31F、文字 #212529・#3f4751）にそろえる。
   文字に使う色は、背景との明暗比 4.5:1 以上にする。明るい緑 #8FC31F と灰色 #8a949e は
   文字には足りないので、文字には濃い緑 #4f7a0a・灰色 #646e78・青紫 #5f53c4（薄紫の地の上）を使う。
   トップのスタイルは #service 配下に閉じているので、ここは .svcp 配下に閉じる。 */

.svcp {
  color: #212529;
  line-height: 1.9; }
  .svcp p {
    /* テーマの p { text-align: justify } は、短い行で字間が開くので打ち消す */
    text-align: left;
    color: #3f4751; }
  .svcp a {
    color: #4f7a0a; }
  .svcp p a,
  .svcp dd a {
    /* 本文中のリンクは色だけだと周りの文字と見分けにくいので、下線を付ける */
    text-decoration: underline;
    text-underline-offset: .2em; }
  .svcp-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px; }

/* パンくず */
.svcp-crumb {
  margin: 0;
  padding: 18px 0 0;
  font-size: .8125rem; }
  .svcp-crumb ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #646e78; }
  .svcp-crumb li + li::before {
    content: "/";
    margin: 0 .6em; }
  .svcp-crumb a {
    color: #646e78; }

/* 冒頭 */
.svcp-hero {
  padding: 56px 0 64px;
  text-align: center; }
  .svcp-eyebrow {
    margin: 0 0 .7rem;
    font-family: "Montserrat", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-indent: .22em;
    text-align: center !important;
    color: #646e78 !important; }
  .svcp-hero h1 {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.5; }
  .svcp-hero .svcp-catch {
    margin: 1.1rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    color: #212529; }
  .svcp-lead {
    max-width: 720px;
    margin: 1.8rem auto 0;
    font-size: 1rem; }
  .svcp-hero .svcp-actions {
    margin-top: 2.2rem; }
  .svcp-hero--agent {
    background-image: linear-gradient(155deg, #e6e2fb 0%, #eef3fb 55%, #dceaf9 100%); }
  .svcp-hero--system {
    background-color: #f4f6f7; }

/* 本文の節 */
.svcp-section {
  padding: 72px 0; }
  .svcp-section + .svcp-section {
    border-top: 1px solid #e9ecef; }
  .svcp-section--tint {
    background-color: #f8faf5; }
  .svcp-section h2 {
    position: relative;
    margin: 0 0 1.6rem;
    padding-top: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5; }
    .svcp-section h2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background-color: #8FC31F; }
  .svcp-section h3 {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6; }
  .svcp-section > .svcp-wrap > p {
    margin-bottom: 1.2rem; }

/* 向いている課題の一覧 */
.svcp-checks {
  margin: 0;
  padding: 0;
  list-style: none; }
  .svcp-checks li {
    position: relative;
    margin: 0 0 .9rem;
    padding-left: 1.9rem;
    color: #3f4751; }
    .svcp-checks li::before {
      content: "";
      position: absolute;
      top: .55em;
      left: .2rem;
      width: .95rem;
      height: .55rem;
      border-left: 3px solid #8FC31F;
      border-bottom: 3px solid #8FC31F;
      transform: rotate(-45deg); }

/* カード */
.svcp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; }
  .svcp-cards--3 {
    grid-template-columns: repeat(3, 1fr); }
  .svcp-card {
    padding: 26px 26px 24px;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background-color: #fff; }
    .svcp-card p {
      margin: 0;
      font-size: .95rem; }
    .svcp-card ul {
      margin: .8rem 0 0;
      padding-left: 1.2rem;
      font-size: .95rem;
      color: #3f4751; }
  .svcp-card-no {
    display: block;
    margin: 0 0 .6rem;
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: #4f7a0a; }

/* 進め方 */
.svcp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step; }
  .svcp-steps li {
    position: relative;
    margin: 0;
    padding: 0 0 28px 64px;
    counter-increment: step; }
    .svcp-steps li::before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      top: 0;
      left: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: #eef5e0;
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      line-height: 44px;
      text-align: center;
      color: #4f7a0a; }
    .svcp-steps li::after {
      content: "";
      position: absolute;
      top: 50px;
      bottom: 6px;
      left: 21px;
      width: 2px;
      background-color: #e3ecd1; }
    .svcp-steps li:last-child {
      padding-bottom: 0; }
      .svcp-steps li:last-child::after {
        display: none; }
  .svcp-steps h3 {
    padding-top: 9px; }
  .svcp-steps p {
    margin: 0; }

/* 技術のタグ */
.svcp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none; }
  .svcp-tags li {
    padding: .45rem 1rem;
    border: 1px solid #dfe5d2;
    border-radius: 999px;
    background-color: #fff;
    font-size: .9rem;
    color: #3f4751; }

/* よくある質問 */
.svcp-faq {
  margin: 0; }
  .svcp-faq dt {
    position: relative;
    margin: 0;
    padding: 18px 0 0 2.2rem;
    font-weight: 700;
    line-height: 1.7; }
    .svcp-faq dt::before {
      content: "Q";
      position: absolute;
      top: 18px;
      left: 0;
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      color: #4f7a0a; }
  .svcp-faq dd {
    margin: .5rem 0 0;
    padding: 0 0 18px 2.2rem;
    border-bottom: 1px solid #e9ecef;
    color: #3f4751; }

/* 関連ページ */
.svcp-related {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background-color: #fff;
  color: #212529 !important;
  text-decoration: none !important;
  transition: border-color .2s ease-in-out; }
  .svcp-related:hover, .svcp-related:focus {
    border-color: #8FC31F; }
  .svcp-related small {
    display: block;
    font-size: .8rem;
    color: #646e78; }
  .svcp-related strong {
    font-size: 1.05rem; }
  .svcp-related::after {
    content: "\2192";
    font-size: 1.2rem;
    color: #4f7a0a; }

/* ボタン。トップのお問い合わせボタンと同じ見た目 */
.svcp-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 2.6rem 1rem;
  border-radius: 999px;
  background-color: #8FC31F;
  color: #16202c !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(143, 195, 31, 0.32);
  transition: background-color .45s ease-out, box-shadow .45s ease-out, transform .45s ease-out; }
  .svcp-btn:hover, .svcp-btn:focus {
    background-color: #9ed42a;
    box-shadow: 0 12px 30px rgba(143, 195, 31, 0.5);
    transform: translateY(-1px); }
  .svcp-btn svg {
    flex-shrink: 0; }

/* 末尾の相談カード */
.svcp-contact {
  padding: 80px 0 96px; }
  .svcp-contact-card {
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 40px 60px;
    border-radius: 20px;
    background-image: linear-gradient(180deg, #f5f9ec 0%, #e8f2d6 100%);
    text-align: center; }
    .svcp-contact-card h2 {
      margin: 0 0 1rem;
      font-size: 1.45rem;
      font-weight: 700;
      line-height: 1.6; }
    .svcp-contact-card p {
      max-width: 680px;
      margin: 0 auto;
      text-align: center; }
    .svcp-contact-card .svcp-btn {
      margin-top: 2.2rem; }

/* 刷新の節の「移行の作業にもAIを使います」。3 枚のカードの下に、横幅いっぱいで置く */
.svcp-renewal-ai {
  margin-top: 24px; }
  .svcp-renewal-ai .svcp-checks {
    margin-top: 1rem; }
    .svcp-renewal-ai .svcp-checks li {
      margin-bottom: .6rem;
      font-size: .95rem; }

/* カードの見出しが語の途中で折り返さないよう、文節で折り返す */
.svcp-card h3 {
  word-break: auto-phrase;
  text-wrap: balance; }

/* 事例のカード。種別のラベル、結果の一文、関連ページへのリンクを置く */
.svcp-case {
  display: flex;
  flex-direction: column;
  word-break: auto-phrase; }
  .svcp-case .svcp-case-tag {
    align-self: flex-start;
    margin: 0 0 .8rem;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: #efedfc;
    font-size: .75rem;
    font-weight: 700;
    color: #5f53c4; }
  .svcp-case p + p {
    margin-top: .8rem; }
  .svcp-case .svcp-case-result {
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 8px;
    background-color: #f5f9ec;
    font-weight: 700;
    color: #212529; }
  .svcp-case p:has(+ .svcp-case-result),
  .svcp-case ul:has(+ .svcp-case-result) {
    /* 結果の一文は下端に寄せるので、すぐ上の段落との最低限の間をここで取る */
    margin-bottom: 1rem; }
  .svcp-case .svcp-case-link {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .9rem; }

/* 人が担っていた作業 → AIが担う形 の対応表。右の列を青紫にして、比較図と色をそろえる */
.svcp-shift {
  margin: 2rem 0 0;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background-color: #fff;
  overflow: hidden; }
  .svcp-shift-head,
  .svcp-shift-row {
    display: grid;
    grid-template-columns: 1fr 1fr; }
  .svcp-shift-head span {
    padding: 12px 20px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #646e78; }
    .svcp-shift-head span + span {
      background-color: #efedfc;
      color: #5f53c4; }
  .svcp-shift-row {
    border-top: 1px solid #e9ecef; }
    .svcp-shift-row span {
      padding: 14px 20px;
      font-size: .95rem;
      line-height: 1.7;
      color: #3f4751; }
    .svcp-shift-row span + span {
      position: relative;
      padding-left: 28px;
      background-color: #faf9ff;
      font-weight: 700;
      color: #212529; }
      .svcp-shift-row span + span::before {
        /* 左から右への置き換えを示す矢印。列の境目に置く */
        content: "→";
        position: absolute;
        top: 50%;
        left: -12px;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        border-radius: 50%;
        background-color: #6b5fd0;
        font-size: .8rem;
        font-weight: 700;
        color: #fff; }
.svcp-shift,
.svcp-shift-how {
  /* 見出しや短い行が語の途中で折り返さないよう、文節で折り返す */
  word-break: auto-phrase;
  text-wrap: pretty; }
.svcp-shift-how {
  margin-top: 2rem; }

/* チャットボットと AIエージェントの比較図。左右の段の高さをそろえ、同じ段どうしを横に読めるようにする。
   AIエージェント側はヒーローと同じ青紫、チャットボット側は灰色にする。 */
.svcp-compare {
  /* 行は「名前・受け取るもの・中でやること・結果・補足」の 5 つ。左右の列が subgrid で同じ行を使う */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  column-gap: 24px;
  margin: 2.4rem 0 0;
  /* 狭い幅で「る」だけが次の行に落ちないよう、文節で折り返す（対応していないブラウザは従来どおり） */
  word-break: auto-phrase;
  text-wrap: pretty; }
  .svcp-compare-col {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 24px 22px 22px;
    border-radius: 14px; }
  .svcp-compare-col--bot {
    background-color: #f4f6f7; }
  .svcp-compare-col--agent {
    background-image: linear-gradient(155deg, #e6e2fb 0%, #eef3fb 55%, #dceaf9 100%); }
  .svcp-compare .svcp-compare-name {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    text-align: center; }
  .svcp-compare .svcp-compare-note {
    margin: 1rem 0 0;
    font-size: .88rem;
    line-height: 1.7; }

.svcp-flow {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none; }
  .svcp-flow-box {
    position: relative;
    padding: 14px 16px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background-color: #fff;
    font-size: .95rem;
    line-height: 1.7;
    color: #212529; }
    .svcp-flow-box + .svcp-flow-box {
      margin-top: 30px; }
    .svcp-flow-box + .svcp-flow-box::before {
      /* 段と段のあいだの下向きの矢印 */
      content: "";
      position: absolute;
      top: -22px;
      left: 50%;
      width: 10px;
      height: 10px;
      margin-left: -5px;
      border-right: 2px solid #8a949e;
      border-bottom: 2px solid #8a949e;
      transform: rotate(45deg); }
  .svcp-compare-col--agent .svcp-flow-box {
    border-color: #d5d0f3; }
    .svcp-compare-col--agent .svcp-flow-box + .svcp-flow-box::before {
      border-color: #6b5fd0; }
  .svcp-flow-box--out {
    font-weight: 700; }
  .svcp-flow-tag {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #646e78; }
  .svcp-compare-col--agent .svcp-flow-tag {
    color: #6b5fd0; }
  .svcp-flow-eg {
    font-size: .85rem;
    color: #3f4751; }
  .svcp-trace {
    /* 中でやることの手順。番号の丸を縦の線でつなぐ。AIエージェント側は手数と分岐が増える */
    display: grid;
    gap: 12px;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: trace; }
    .svcp-trace > li {
      position: relative;
      padding-left: 30px;
      font-size: .85rem;
      line-height: 1.6;
      color: #3f4751;
      counter-increment: trace; }
      .svcp-trace > li::before {
        content: counter(trace);
        position: absolute;
        top: 1px;
        left: 0;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #e9ecef;
        font-family: "Montserrat", sans-serif;
        font-size: .7rem;
        font-weight: 700;
        line-height: 1;
        color: #3f4751; }
      .svcp-trace > li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 24px;
        bottom: -10px;
        left: 9.5px;
        width: 1px;
        background-color: #d5d9de; }
    .svcp-trace b {
      display: block;
      font-weight: 700;
      color: #212529; }
  .svcp-compare-col--agent .svcp-trace > li::before {
    background-color: #6b5fd0;
    color: #fff; }
  .svcp-compare-col--agent .svcp-trace > li:not(:last-child)::after {
    background-color: #c9c2f2; }
  .svcp-trace-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: #efedfc;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.7;
    color: #5f53c4;
    vertical-align: 1px; }
  .svcp-flow-box--work {
    /* 人に残る作業の枠を、箱の下端（AIエージェント側の後半の手順と同じ高さ）に寄せる */
    display: flex;
    flex-direction: column; }
    .svcp-flow-box--work .svcp-trace {
      margin-bottom: 16px; }
  .svcp-compare .svcp-trace-handoff {
    margin: auto 0 0;
    padding: 10px 12px;
    border: 1px dashed #b8bfc6;
    border-radius: 8px;
    font-size: .82rem;
    line-height: 1.6;
    color: #646e78; }
    .svcp-trace-handoff b {
      display: block;
      color: #3f4751; }
  .svcp-trace-branch {
    display: grid;
    gap: 6px;
    margin-top: 6px; }
    .svcp-trace-branch span {
      padding: 4px 10px;
      border: 1px solid #d5d0f3;
      border-radius: 6px;
      background-color: #faf9ff; }

@media (max-width: 767.98px) {
  .svcp-shift-head {
    display: none; }
  .svcp-shift-row {
    grid-template-columns: 1fr; }
    .svcp-shift-row + .svcp-shift-row {
      /* 縦に並ぶと組の切れ目が見えにくいので、組と組のあいだに地の色の帯を入れる */
      border-top: 8px solid #f8faf5; }
    .svcp-shift-row span {
      padding: 12px 16px; }
    .svcp-shift-row span + span {
      padding: 18px 16px 12px;
      border-top: 1px solid #e9ecef; }
      .svcp-shift-row span + span::before {
        /* 縦に並ぶので、上の行（人）と下の行（AI）の境目の線の上に、下向きの矢印を置く */
        content: "↓";
        top: 0;
        left: 50%;
        margin-top: -12px;
        margin-left: -12px; }
  .svcp-compare {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 16px; }
    .svcp-compare-col,
    .svcp-flow {
      display: block;
      grid-row: auto; }
  .svcp-hero {
    padding: 40px 0 48px; }
    .svcp-hero h1 {
      font-size: 1.6rem; }
    .svcp-hero .svcp-catch {
      font-size: 1.02rem; }
  .svcp-section {
    padding: 52px 0; }
    .svcp-section h2 {
      font-size: 1.28rem; }
  .svcp-cards,
  .svcp-cards--3 {
    grid-template-columns: 1fr;
    gap: 16px; }
  .svcp-steps li {
    padding-left: 56px; }
  .svcp-btn {
    width: 100%;
    justify-content: center;
    padding-left: 1.2rem;
    padding-right: 1.2rem; }
  .svcp-contact {
    padding: 56px 0 64px; }
    .svcp-contact-card {
      padding: 40px 22px 44px; }
      .svcp-contact-card h2 {
        font-size: 1.2rem; } }