/* =============================================
   サービスページ群（/service ・ /service/digital-kantoku ・ /service/oract）
   Figma: Corporate2026 / Service_Top_Design_PC (2854:1725)
          Service_DigitalKantoku_Design2_PC (2842:1764)
          Service_Oract_Design2_PC (2943:1944)
   数値は Figma の値をそのまま使う。クラスは sv- で統一。
   ヘッダー・フッター・パンくず外のリンクカード・CTA帯は knowledge.css の
   kn-link / kn-more / kn-label / ds-cta-mid を共用する（両方読み込む）。
   ============================================= */

.sv-page {
  --sv-ink: #1a1a1a;
  --sv-sec: #5a5a5a;
  --sv-muted: #8a8a8a;
  --sv-gold: #b09253;
  --sv-blue: #5380d3;
  --sv-navy: #2b426b;
  --sv-line: #e3e5e8;
  --sv-beige: #f5f5f2;
  --sv-header: 79px; /* 固定ヘッダーの高さ（knowledge.css の .kn-page の padding-top と同じ） */
  --sv-nav: 68px; /* ページ内メニューの高さ */
}

@media (max-width: 768px) {
  .sv-page {
    --sv-header: 70px;
  }
}

/* --- 01_Title（紺グラデ＋ノイズ画像） --- */
.sv-title {
  padding: 64px 0;
  background:
    url("/img/service/title-bg.jpg") center / cover no-repeat,
    linear-gradient(to bottom, #2b426d, #1f3355);
}

/* サービス系ページは Figma で画像の露出が -0.3（ソリューションは 0）。暗くした画像に差し替える */
.sv-title.is-dark {
  background-image: url("/img/service/title-bg-dark.jpg"), linear-gradient(to bottom, #2b426d, #1f3355);
}

.sv-title .kn-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sv-title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  color: var(--sv-gold);
  white-space: nowrap;
}

.sv-title-jp {
  font-weight: 900;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.sv-title-en {
  font-family: var(--kn-en);
  font-weight: 500;
  font-size: 54px;
  line-height: 1.5; /* Figma の行高（81px）に合わせる */
}

.sv-h1 {
  font-weight: 900;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.sv-lead {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

/* --- 01b_Breadcrumb（タイトル帯の下・白） --- */
.sv-breadcrumb {
  padding: 16px 0;
  background: #fff;
}

.sv-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}

.sv-breadcrumb a {
  color: inherit;
  transition: opacity 0.3s;
}

.sv-breadcrumb a:hover {
  opacity: 0.7;
}

/* --- セクション共通 --- */
.sv-section {
  padding: 104px 0;
}

.sv-section.is-beige {
  background: var(--sv-beige);
}

.sv-section .kn-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sv-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-head .kn-label-text {
  line-height: normal;
}

.sv-h2 {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--sv-ink);
}

/* 「詳細はこちら」リンク（40pxの矢印＋文字） */
.sv-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
  white-space: nowrap;
  transition: opacity 0.3s;
}

a.sv-more:hover {
  opacity: 0.7;
}

/* --- 02_Structure（全体像の図） --- */
.sv-figure {
  padding: 32px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(43, 66, 107, 0.06);
}

.sv-diagram {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-layer1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  color: #fff;
  background: url("/img/service/layer1.jpg") center / cover no-repeat, var(--sv-navy);
}

.sv-layer-tag {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.sv-layer-line {
  display: flex;
  align-items: center;
  gap: 40px;
  font-weight: 700;
  line-height: 1.5;
}

.sv-layer-name {
  font-size: 20px;
  letter-spacing: 0.04em;
}

.sv-layer-sub {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.sv-layer-desc {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.sv-diagram-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.sv-diagram-center.is-padded {
  padding: 0 24px;
}

.sv-diagram-center img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.sv-diagram-center img.is-up {
  transform: scaleY(-1);
}

.sv-diagram-center p {
  width: 560px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--sv-muted);
}

.sv-layer2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.sv-exec-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.sv-exec-tag {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.sv-exec-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.sv-exec-desc {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.sv-layer3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  color: #fff;
  background: var(--sv-gold);
}

.sv-layer3 .sv-layer-line img {
  display: block;
  width: 120px;
  height: 33px;
}

/* --- 03_List（サービスを探す） --- */
.sv-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.sv-group-title {
  margin: 0;
  padding-bottom: 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.sv-group-title.is-sub {
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.sv-main-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sv-sub-group {
  padding-left: 104px;
}

.sv-rows {
  border-top: 1px solid var(--sv-line);
}

.sv-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sv-line);
}

.sv-row.is-top {
  align-items: flex-start;
}

.sv-row-name {
  flex-shrink: 0;
  width: 360px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.sv-row-name.is-big {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv-row-name.is-big strong {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.sv-row-name.is-big img {
  display: block;
  width: 120px;
  height: 33px;
}

.sv-row-desc {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.sv-pill {
  flex-shrink: 0;
  padding: 4px 24px;
  border-radius: 40px;
  background: #bcc2bf;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

/* --- 04_Find（課題から探す） --- */
.sv-find-list {
  border-top: 1px solid var(--sv-line);
}

.sv-find-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sv-line);
}

.sv-find-row .sv-row-name {
  width: 440px;
}

/* --- 06_Related（白背景の次に読む） --- */
.sv-next {
  padding: 104px 0;
  background: #fff;
}

.sv-next .kn-container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.sv-next .kn-link-title {
  min-height: 30px; /* 固定の height だと2行になったとき説明文に重なる */
}

/* =============================================
   Digital Kantoku（/service/digital-kantoku）
   ============================================= */
.sv-body {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.sv-title-target {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sv-title-target > span:first-child {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.sv-title-pill {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* 02_PageNav */
/* ページ内メニュー：固定ヘッダーの下に貼り付いて追従する */
.sv-pagenav {
  position: sticky;
  top: var(--sv-header);
  z-index: 90;
  background: #fff;
}

.sv-pagenav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.sv-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--sv-line);
  scrollbar-width: none;
}

.sv-tabs::-webkit-scrollbar {
  display: none;
}

.sv-tab {
  flex-shrink: 0;
  padding: 20px 24px;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
  white-space: nowrap;
  transition: color 0.3s;
}

.sv-tab:hover,
.sv-tab.is-active {
  color: var(--sv-ink);
}

.sv-tab.is-active {
  border-bottom-color: var(--sv-gold);
}

.sv-anchor {
  scroll-margin-top: calc(var(--sv-header) + var(--sv-nav) + 16px);
}

/* 03_Features */
.sv-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.sv-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.sv-num {
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.sv-feature-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.sv-feature-text {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

/* 04_Service 構成図 */
.dk-figure {
  padding: 32px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(43, 66, 107, 0.06);
}

.dk-diagram {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.dk-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dk-l1 {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
  background: url("/img/service/layer1.jpg") center / cover no-repeat, var(--sv-navy);
}

.dk-l1-t {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 260px;
}

.dk-en-tag {
  font-family: var(--kn-en);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--sv-gold);
}

.dk-l1-name {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
}

.dk-chips-w {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.dk-chip-w {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.dk-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dk-arrow img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.dk-arrow img.is-up {
  transform: rotate(180deg);
}

.dk-arrow p {
  width: 560px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--sv-sec);
}

.dk-l2 {
  display: flex;
  gap: 12px;
}

.dk-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.dk-card-tag {
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.dk-card-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.dk-card-desc {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-l3 {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 32px;
  background: var(--sv-gold);
  color: #fff;
}

.dk-l3-t {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.dk-l3-t .dk-en-tag {
  color: #fff;
}

.dk-oract-line {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dk-oract-line img {
  display: block;
  width: 150px;
  height: 42px;
}

.dk-oract-line span {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dk-l3-desc {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.dk-remain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px;
  border: 1px dashed var(--sv-gold);
}

.dk-remain-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.dk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dk-chip-s {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 20px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
  white-space: nowrap;
}

/* 構成図の下の要素リスト */
.dk-elements {
  border-top: 1px solid var(--sv-line);
}

.dk-element {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--sv-line);
}

.dk-element-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 360px;
  line-height: 1.5;
}

.dk-element-kind {
  font-weight: 500;
  font-size: 16px;
  color: var(--sv-gold);
}

.dk-element-name {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.dk-element-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dk-element-body p {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-element-head .dk-oract-line span {
  color: var(--sv-ink);
}

.dk-element-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--sv-gold);
  transition: opacity 0.3s;
}

.dk-element-link:hover {
  opacity: 0.7;
}

/* 04b_Execution */
.dk-services {
  border-top: 1px solid var(--sv-line);
}

.dk-service {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--sv-line);
}

.dk-service-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 360px;
}

.dk-service-head .sv-num {
  line-height: normal;
  letter-spacing: 0;
}

.dk-service-name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.dk-service-lead {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-service-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.dk-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dk-block.is-chips {
  gap: 8px;
}

.dk-block-label {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-navy);
}

.dk-block-text {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-chip {
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #e5e7e6;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
  white-space: nowrap;
}

/* 04c_Quality */
.dk-contrast {
  background: #fff;
}

.dk-contrast-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sv-line);
}

.dk-contrast-row.is-head {
  background: #eef0f2;
}

.dk-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 24px;
}

.dk-cell.is-axis {
  flex: 0 0 240px;
}

.dk-cell.is-ours {
  background: #fff;
  border-left: 3px solid var(--sv-gold);
}

.dk-contrast-row.is-head .dk-cell {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-contrast-row.is-head .dk-cell.is-axis,
.dk-contrast-row.is-head .dk-cell.is-ours {
  color: var(--sv-navy);
}

.dk-contrast-row.is-head .dk-cell.is-ours {
  background: transparent;
  border-left: 0;
}

.dk-contrast-row:not(.is-head) .dk-cell {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-contrast-row:not(.is-head) .dk-cell.is-axis {
  font-weight: 700;
  font-size: 16px;
  color: var(--sv-ink);
}

.dk-contrast-row:not(.is-head) .dk-cell.is-ours {
  font-weight: 500;
  color: var(--sv-ink);
}

.dk-note {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}

/* 05_HowWeWork */
.dk-sub-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.dk-phases {
  border-top: 1px solid var(--sv-line);
}

.dk-phase {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sv-line);
}

.dk-phase-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 360px;
  line-height: 1.5;
}

.dk-phase-no {
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 24px;
  color: var(--sv-gold);
}

.dk-phase-name {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.dk-phase-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.dk-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.dk-role {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--sv-gold);
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.dk-role-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--sv-navy);
}

.dk-role p:not(.dk-role-title) {
  font-size: 14px;
  color: var(--sv-sec);
}

.dk-steps {
  border-top: 1px solid var(--sv-line);
}

.dk-step {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sv-line);
}

.dk-step-no {
  flex-shrink: 0;
  width: 48px;
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: var(--sv-blue);
}

.dk-step-text {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

/* 07_CTA（導入のご相談） */
.dk-cta {
  padding: 64px 0;
  background: url("/img/service/cta-blue.jpg") 0 0 / 100% 100% no-repeat, #1f3355;
  color: #fff;
}

.dk-cta .kn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: transparent;
}

.dk-cta-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.dk-cta-text {
  width: 880px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: center;
}

.dk-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--sv-gold);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
  transition: opacity 0.3s;
}

.dk-cta-btn:hover {
  opacity: 0.85;
}

/* 10_FAQ */
.dk-faq {
  border-top: 1px solid var(--sv-line);
}

.dk-faq-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sv-line);
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.dk-faq-q {
  font-weight: 500;
  font-size: 16px;
  color: var(--sv-ink);
}

.dk-faq-a {
  font-size: 14px;
  color: var(--sv-sec);
}

/* 11_Next（ベージュ・3行タイトル） */
.sv-next.is-beige {
  background: var(--sv-beige);
}

.sv-next.is-tall .kn-link {
  min-height: 309px;
}

.sv-next.is-tall .kn-link-title {
  height: auto;
  min-height: 90px;
}

.sv-next-lead {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

/* =============================================
   Oract（/service/oract）
   ============================================= */
.sv-title-row.is-logo {
  gap: 40px;
}

.or-title-logo {
  display: block;
  width: 259px;
  height: 72px;
}

.or-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.or-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.or-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.or-card .sv-num {
  line-height: 1.5;
  letter-spacing: 0;
}

.or-card .sv-num.is-step {
  font-size: 24px;
}

.or-card-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-card-text {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

/* 03_Pain 数字 */
.or-stats {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--sv-line);
}

.or-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.or-stat-num {
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 94px;
  line-height: 1;
  color: var(--sv-ink);
}

.or-stat-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-stat-src {
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}

.or-lead-gold {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

/* 04_Why 対比図 */
.or-contrast {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fff;
}

.or-contrast-cols {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.or-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  background: var(--sv-beige);
}

.or-col.is-why {
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.or-col-tag {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-navy);
}

.or-col.is-why .or-col-tag {
  color: var(--sv-gold);
}

.or-col-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-row {
  padding: 10px 16px;
  background: #fff;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-col.is-why .or-row {
  background: var(--sv-beige);
}

.or-col-foot {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-sec);
}

.or-col.is-why .or-col-foot {
  color: var(--sv-gold);
}

.or-band {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 40px;
  background: var(--sv-gold);
}

.or-band img {
  display: block;
  flex-shrink: 0;
  width: 150px;
  height: 42px;
}

.or-band p {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* 05_What 比較 */
.or-compare {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.or-compare-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 32px;
  background: #fff;
}

.or-compare-col.is-oract {
  background: var(--sv-navy);
}

.or-compare-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.is-oract .or-compare-label {
  color: #d7c08f;
}

.or-compare-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.is-oract .or-compare-title {
  color: #fff;
}

.or-compare-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.or-compare-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.or-compare-row dt {
  font-weight: 700;
  font-size: 12px;
  color: var(--sv-muted);
}

.or-compare-row dd {
  margin: 0;
  font-size: 14px;
  color: var(--sv-ink);
}

.is-oract .or-compare-row dt {
  color: #aebbd4;
}

.is-oract .or-compare-row dd {
  font-weight: 500;
  color: #fff;
}

/* 06_Value */
.or-features {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.or-feature {
  display: flex;
  align-items: center;
  gap: 64px;
}

.or-feature-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.or-feature-no {
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--sv-blue);
}

.or-feature-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-shot {
  display: flex;
  flex-shrink: 0;
  width: 480px;
  height: 240px;
  overflow: hidden;
  background: #d9d9d9;
  box-shadow: 0 8px 24px rgba(43, 66, 107, 0.06);
}

.or-shot img {
  display: block;
  flex: none;
  max-width: none;
}

.or-shot.is-clear {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 8px 12px rgba(43, 66, 107, 0.06));
}

.or-shot.is-clear img {
  width: 560px;
  height: 240px;
}

.or-shot.is-top {
  align-items: flex-start;
}

.or-shot.is-top img {
  width: 100%;
  height: auto;
}

.or-shot.is-middle {
  align-items: center;
}

.or-shot.is-middle img {
  width: 100%;
  height: auto;
}

/* 07_Features */
.or-screen {
  background: #fff;
  border: 1px solid var(--sv-line);
  box-shadow: 0 8px 24px rgba(43, 66, 107, 0.06);
}

.or-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.or-quote {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--sv-navy);
}

.or-card-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 08_Resources */
.or-res {
  display: flex;
  align-items: center;
  gap: 64px;
}

.or-res-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.or-res-label {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.or-chip {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
  white-space: nowrap;
}

.or-res .or-shot {
  width: 520px;
  height: 300px;
}

/* 09_HowItWorks */
.or-origin {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--sv-beige);
  border-bottom: 1px solid var(--sv-gold);
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.or-origin-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12px;
  color: var(--sv-gold);
  white-space: nowrap;
}

.or-origin-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  letter-spacing: 0.03em; /* 実フォントだと Figma の幅に6px足りず2行に折れるため */
  color: var(--sv-sec);
}

.dk-step-no.is-l15 {
  line-height: 1.5;
}

/* 12_Hybrid */
.or-hybrid {
  display: flex;
  align-items: center;
  gap: 64px;
}

.or-hybrid-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.or-hybrid-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.or-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--sv-navy);
}

.or-flow-pill {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--sv-navy);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.or-flow-arrow {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
}

.or-photo {
  position: relative;
  align-self: stretch;
  flex-shrink: 0;
  width: 420px;
  min-height: 300px;
  overflow: hidden;
  background: #d9d9d9;
  border-radius: 8px;
}

.or-photo img {
  position: absolute;
  top: -17.77%;
  left: 0;
  width: 100%;
  height: 198.64%;
  max-width: none;
  object-fit: cover;
}

.sv-next.is-mid .kn-link {
  min-height: 279px;
}

.sv-next.is-mid .kn-link-title {
  height: auto;
  min-height: 60px;
}

/* =============================================
   Responsive（Figma は PC のみ。ナレッジと同じ切り方）
   ============================================= */
@media (max-width: 1024px) {
  .sv-layer2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-diagram-center p {
    width: auto;
    flex: 1;
  }

  .sv-sub-group {
    padding-left: 0;
  }

  .sv-row-name,
  .sv-find-row .sv-row-name {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .sv-next .kn-link-title,
  .sv-next.is-tall .kn-link-title,
  .sv-next.is-mid .kn-link-title {
    min-height: 0; /* 1列なので高さを揃える必要がない */
  }

  .sv-next.is-tall .kn-link,
  .sv-next.is-mid .kn-link {
    min-height: 0;
  }

  .sv-title {
    padding: 48px 0;
  }

  .sv-title-row {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .sv-title-jp {
    font-size: 18px;
  }

  .sv-title-en {
    font-size: 32px;
  }

  .sv-h1 {
    font-size: 28px;
  }

  .sv-lead {
    font-size: 16px;
  }

  .sv-section,
  .sv-next {
    padding: 64px 0;
  }

  .sv-section .kn-container {
    gap: 32px;
  }

  .sv-h2 {
    font-size: 24px;
  }

  .sv-figure {
    padding: 16px;
  }

  .sv-layer-line {
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .sv-diagram-center.is-padded {
    padding: 0;
  }

  .sv-diagram-center img {
    display: none;
  }

  .sv-diagram-center p {
    font-size: 14px;
  }

  .sv-layer2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-row,
  .sv-find-row {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .sv-row-name,
  .sv-find-row .sv-row-name {
    width: 100%;
  }

  .sv-row-desc {
    flex-basis: 100%;
  }

  .sv-group-title {
    font-size: 20px;
  }

  .sv-group-title.is-sub {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .sv-features,
  .dk-roles {
    grid-template-columns: minmax(0, 1fr);
  }

  .dk-l1,
  .dk-l3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dk-l1-t {
    width: auto;
  }

  .dk-l2 {
    flex-wrap: wrap;
  }

  .dk-card {
    flex-basis: calc(50% - 6px);
  }

  .dk-arrow p {
    width: auto;
    flex: 1;
  }

  .dk-element-head,
  .dk-service-head,
  .dk-phase-head {
    width: 240px;
  }

  .dk-cell.is-axis {
    flex-basis: 160px;
  }
}

@media (max-width: 768px) {
  .sv-title-target > span:first-child {
    width: 100%;
  }

  .dk-figure {
    padding: 16px;
  }

  .dk-card {
    flex-basis: 100%;
  }

  .dk-arrow img {
    display: none;
  }

  .dk-arrow p {
    font-size: 14px;
  }

  .dk-element,
  .dk-service,
  .dk-phase {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .dk-element-head,
  .dk-service-head,
  .dk-phase-head {
    width: auto;
  }

  .dk-contrast {
    overflow-x: auto;
  }

  .dk-contrast-row {
    min-width: 640px;
  }

  .dk-step-text {
    font-size: 18px;
  }

  .dk-step-no {
    font-size: 32px;
    width: 40px;
  }

  .dk-cta {
    padding: 48px 0;
  }

  .sv-next-lead {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .or-cols-4,
  .or-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .or-stats,
  .or-contrast-cols,
  .or-compare {
    flex-direction: column;
  }

  .or-feature,
  .or-res,
  .or-hybrid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .or-shot,
  .or-res .or-shot {
    width: 100%;
  }

  .or-shot.is-clear img {
    width: 100%;
    height: auto;
  }

  .or-photo {
    width: 100%;
    min-height: 0;
    aspect-ratio: 420 / 317;
  }
}

@media (max-width: 768px) {
  .or-cols-4,
  .or-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-title-row.is-logo {
    gap: 12px 16px;
  }

  .or-title-logo {
    width: 180px;
    height: auto;
  }

  .or-stat-num {
    font-size: 64px;
  }

  .or-lead-gold {
    font-size: 20px;
  }

  .or-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 24px;
  }

  .or-band p {
    font-size: 18px;
  }

  .or-col-foot {
    font-size: 18px;
  }

  .or-feature-title {
    font-size: 20px;
  }

  .or-origin {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .or-quote {
    font-size: 16px;
  }

  .or-hybrid-title {
    font-size: 20px;
  }
}

/* NEXT / RELATED など：ラベルの行高は 1.75（Figma の CW/H2 は高さ42） */
.sv-next .kn-label-text {
  line-height: 1.75;
}

/* 関連カード：タイトル・説明・リンクの行をカード間で揃える（3列に並ぶ幅だけ。狭い画面は普通のカード） */
@media (min-width: 1025px) {
  .sv-next.is-aligned .kn-links {
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }

  .sv-next.is-aligned .kn-link {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-height: 0;
  }

  .sv-next.is-aligned .kn-link-text {
    display: contents;
  }

  .sv-next.is-aligned .kn-link-title {
    height: auto;
    min-height: 0;
    padding-bottom: 8px;
  }

  .sv-next.is-aligned .kn-link-desc {
    padding-bottom: 32px;
  }


  /* .kn-page a { color: inherit } より強くして、リンクの文字色を金色に保つ */
  .kn-page .sv-more,
  .kn-page .dk-element-link {
    color: var(--sv-gold);
  }

  .kn-page .dk-cta-btn {
    color: #fff;
  }
}