/* ============================================================
   ページ見出し
   ============================================================ */
.svc-head {
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--paper-line);
  background:
    linear-gradient(0deg, rgba(13,56,104,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,56,104,.05) 1px, transparent 1px),
    var(--paper);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.svc-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--steel);
}
.svc-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--correction); display: block; }
.svc-title {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 7vw, 42px); line-height: 1.5; letter-spacing: .03em;
  color: var(--ink);
}
.svc-lead { margin: 0; max-width: 42em; font-size: 15px; color: var(--steel); }

/* ============================================================
   セクション共通
   ============================================================ */
.svc-section { padding: 48px 0 8px; background: var(--paper); }
.svc-section--last { padding-bottom: 56px; }

.svc-h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(19px, 4.6vw, 23px); letter-spacing: .03em;
}
.tag {
  display: inline-block; padding: 3px 10px; border: 1px solid;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.6;
}
.tag--live  { background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
.tag--dev   { border-color: var(--blueprint); color: var(--blueprint); }
.tag--proof { border-color: #9aa8b6; color: var(--steel); }

/* 写真：サイト全体の寒色に寄せる薄い色かぶり */
.svc-media { position: relative; display: block; overflow: hidden; background: #dfe5ea; aspect-ratio: 16 / 10; }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.svc-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(8,35,71,.26), rgba(13,56,104,.08));
}

.svc-name {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 6.4vw, 34px); line-height: 1.4; letter-spacing: .02em;
}
.svc-name--sm { font-size: clamp(21px, 5vw, 25px); margin-bottom: 10px; }

/* ============================================================
   提供中：PrivateAI-Platform（大きく）
   ============================================================ */
.svc-feature { display: grid; grid-template-columns: 1fr; gap: 24px; }
.svc-feature .svc-media { aspect-ratio: 4 / 3; }

.svc-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--steel); }
.svc-feature__body p:not([class]) { margin: 0 0 6px; max-width: 34em; font-size: 15.5px; }

.svc-spec { margin: 18px 0 22px; border-top: 1px solid var(--paper-line); }
.svc-spec > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--paper-line); font-size: 14px; }
.svc-spec dt { color: var(--steel); font-weight: 700; }
.svc-spec dd { margin: 0; }

.svc-addons { margin-top: 36px; border-top: 1px solid #c7d2dd; }
.svc-addons__label { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--steel); }
.svc-addon {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 15px 0; border-top: 1px solid var(--paper-line);
  color: inherit; text-decoration: none;
}
.svc-addon strong { font-size: 16px; }
.svc-addon span { font-size: 14px; color: var(--steel); }
.svc-addon:hover strong { color: var(--blueprint); text-decoration: underline; }
.svc-addon:last-child { border-bottom: 1px solid var(--paper-line); }

/* ============================================================
   開発中・実績：一覧表のような行
   ============================================================ */
.svc-row { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid #c7d2dd; border-bottom: 1px solid #c7d2dd; }
.svc-row__body p { margin: 0 0 14px; max-width: 36em; font-size: 15px; }
.svc-note { margin: 18px 0 0; font-size: 13.5px; color: var(--steel); }

/* ============================================================
   相談への導線
   ============================================================ */
.svc-cta { text-align: center; padding: 56px 0; background: var(--blueprint-deep); color: #fff; }
.svc-cta h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(20px, 4.4vw, 26px); line-height: 1.6; }
.svc-cta p { margin: 0 0 26px; color: #cfe0f2; font-size: 14px; }

/* ============================================================
   モバイル（〜460px）
   ============================================================ */
@media screen and (max-width: 460px) {
  .svc-spec > div { grid-template-columns: 6.5em 1fr; }
}

/* ============================================================
   タブレット（461px〜1023px）
   ============================================================ */
@media screen and (min-width: 461px) and (max-width: 1023px) {
  .svc-head { padding: 56px 0 44px; }
  .svc-feature .svc-media { aspect-ratio: 16 / 9; }
  .svc-row { grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
  .svc-row .svc-media { aspect-ratio: 4 / 3; }
  .svc-addon { grid-template-columns: 15em 1fr; gap: 20px; align-items: baseline; }
}

/* ============================================================
   PC（1024px〜）
   ============================================================ */
@media screen and (min-width: 1024px) {
  .svc-head { padding: 72px 0 60px; }
  .svc-section { padding: 72px 0 8px; }
  .svc-section--last { padding-bottom: 80px; }
  .svc-h2 { margin-bottom: 32px; }

  .svc-feature { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  
  .svc-addon { grid-template-columns: 16em 1fr; gap: 28px; align-items: baseline; padding: 17px 0; }

  .svc-row { grid-template-columns: 280px 1fr; gap: 40px; padding: 30px 0; align-items: start; }
  .svc-row .svc-media { aspect-ratio: 4 / 3; }

  .svc-cta { padding: 80px 0; }
}


/* ============================================================
   写真の上のオーバーレイ（各サービスページのヒーローと同じSVG）
   写真と同じ枠・同じ切り取り（右寄せ＋slice）に敷く。サムネイルは縮むので、線・文字を --m 倍に太く・大きくする
   ============================================================ */
.svc-media { --m: 1.5; }
.svc-row .svc-media { --m: 2.7; }
.svc-media__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.svc-media__overlay svg { width: 100%; height: 100%; display: block; overflow: hidden; }

.svc-media .pa-line { stroke-width: calc(1.6px * var(--m)); }
.svc-media .pa-line--sub { stroke-width: calc(1px * var(--m)); }
.svc-media .mc-contour { stroke-width: calc(1px * var(--m)); }
.svc-media .mc-mesh { stroke-width: calc(.9px * var(--m)); }
.svc-media .mc-outline { stroke-width: calc(2px * var(--m)); }
.svc-media .mc-ping { stroke-width: calc(1.6px * var(--m)); }
.svc-media .tb-plane { stroke-width: calc(1px * var(--m)); }
.svc-media .tb-bracket { stroke-width: calc(3.6px * var(--m)); }
.svc-media .tb-link { stroke-width: calc(1.3px * var(--m)); stroke-dasharray: calc(4px * var(--m)) calc(6px * var(--m)); }
.svc-media .tb-card { stroke-width: calc(1px * var(--m)); }

/* 画面に入ってから動かす（読み込み時に一度だけ。JSが無ければ最初から動く） */
.svc-anim .svc-media:not(.is-in) svg * { animation-play-state: paused; }

/* 表題欄OCR・金型補正は静止画（動かさず、描き終えた状態で表示） */
.svc-media--static .mc-mesh, .svc-media--static .mc-outline, .svc-media--static .tb-bracket { animation: none; stroke-dashoffset: 0; }
.svc-media--static .mc-heat, .svc-media--static .tb-dot, .svc-media--static .tb-link { animation: none; }
.svc-media--static .mc-heat { opacity: .62; }
.svc-media--static .mc-ping { animation: none; opacity: 0; }
.svc-media--static .tb-plane { animation: none; opacity: 1; }

@media screen and (max-width: 460px) {
  .svc-row .svc-media { --m: 2.2; }
}
@media screen and (min-width: 461px) and (max-width: 1023px) {
  .svc-row .svc-media { --m: 3.2; }
}