@charset "utf-8";

/* =============================================================
   デジタル監督 LP
   Figma: EbEB558CJFd5zPTx647PhP / node 779:310（PC 1440基準）

   スケール方針：完全比例スケール
     PC (>=1000px) : 1rem = 100vw / 90  (1440pxで16px・上限16px)
     SP (<=999px)  : 1rem = 100vw / 23.4375 (375pxで16px・上限18px)
   Figmaのpx値 ÷ 16 = rem。letter-spacingは全て 0.04em。
   ============================================================= */

/* ---------- Scale root ---------- */
html {
  font-size: min(calc(100vw / 90), 16px);
}

@media (max-width: 999px) {
  html {
    font-size: min(calc(100vw / 23.4375), 18px);
  }
}

/* ---------- Reset (scoped) ---------- */
body {
  margin: 0;
}

.ds-page,
.ds-page *,
.ds-page *::before,
.ds-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ds-page {
  --gold: #b09253;
  --gold-2: #c9c88d;
  --gold-grad: linear-gradient(180deg, #b09253 0%, #c9c88d 100%);
  --ink: #1a1a1a;
  --gray: #5a5a5a;
  --blue: #5380d3;
  --blue-2: #4677c5;
  --navy: #2b426d;
  --bg-beige: #f5f5f2;
  --bg-card: #f6f7f8;
  --line: #e3e5e8;

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  line-height: 1.75;
  letter-spacing: 0.04em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.ds-page img,
.ds-page svg {
  display: block;
  max-width: 100%;
}

.ds-page a {
  color: inherit;
  text-decoration: none;
}

.ds-page ul,
.ds-page ol {
  list-style: none;
}

.ds-page button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.ds-page table {
  border-collapse: collapse;
}

/* ---------- 始め括弧のぶら下げ（Figmaのhanging punctuation相当） ----------
   Zen Kaku Gothic New の「『（ は左に約0.63emの余白を持つ全角字形のため、
   行頭に来ると他の行より右にずれて見える。その分だけ字下げして視覚的に揃える。
   text-indentはブロックの1行目にのみ効くので、
   2行目以降に括弧が来る見出しは .ds-line で行ごとにブロック化して指定する。 */
.ds-hang {
  text-indent: -0.58em;
}

.ds-line {
  display: block;
}

.br-sp {
  display: none;
}

@media (max-width: 999px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }
}

/* ---------- Section shell ---------- */
.ds-section {
  padding: 6.5rem 5rem;
}

.ds-section-inner {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.ds-beige {
  background: var(--bg-beige);
}

@media (max-width: 999px) {
  .ds-section {
    padding: 4rem 1.5rem;
  }
}

/* ---------- 共通見出し（C/H2） ---------- */
.ds-h2-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.ds-h2 {
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.45;
  color: var(--ink);
}

.ds-h2 .em {
  color: var(--gold);
}

/* 見出しの飾り（Figma書き出しSVG）
   キャンバスはノイズのにじみ分だけ実寸より広い（h2: 108×40 の絵柄に対し 112×44）。
   上端の4pxを負マージンで相殺し、Figmaと同じ位置にドットの上端を合わせる。 */
.ds-accent-bars {
  width: 7.25rem;
  height: 3rem;
  margin: -0.25rem 0 -0.25rem -0.25rem;
}

@media (max-width: 999px) {
  /* SPの見出し（C/H2）はFigmaのSPノードに合わせて全セクション共通。
     飾りのドットはSPでもPCと同寸（108×40） */
  .ds-h2 {
    font-size: 1.5rem;
    line-height: 1.45;
  }

  .ds-h2-block {
    gap: 1.5rem;
  }

  /* SPだけ折り返す語句。inline-block で語中改行を防ぎつつ、
     行頭に来た始め括弧をぶら下げる */
  .ds-hang-inline {
    display: inline-block;
    text-indent: -0.58em;
  }

  .ds-accent-bars {
    width: 7.25rem;
    height: 3rem;
    margin: -0.25rem 0 -0.25rem -0.25rem;
  }
}

/* ---------- ボタン ---------- */
.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
  padding: 0.625rem 2.5rem;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  border-radius: 2.5rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.ds-page .ds-btn-dark {
  color: #fff;
  background: var(--ink);
}

.ds-page .ds-btn-gold {
  color: #fff;
  background: var(--gold-grad);
}

.ds-btn-w {
  width: 20rem;
}

@media (hover: hover) and (pointer: fine) {
  .ds-btn:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.75rem 1.5rem rgba(26, 26, 26, 0.22);
    filter: brightness(1.06);
  }
}

/* ボタン上に乗るフキダシ。
   Figma(1611:671)は下端をボタン上端から13.5px＝自身の高さ48pxの約27%だけ
   内側に入れている。topを固定値にすると行数やフォントサイズが変わるたびに
   ずれるので、自身の高さを基準に逃がして PC/SP で同じ見え方にする */
.ds-btn-flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -73%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem 0.375rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 2.5rem;
}

/* absolute の基準はパディングボックスなので、枠線のあるボタンだけ
   フキダシが枠線ぶん下がる。他のボタンと同じ高さに揃える */
.ds-btn-outline .ds-btn-flag {
  margin-top: -2px;
}

/* =============================================================
   Header
   ============================================================= */
/* トップページ(/lp)と同じく、ヘッダー自身に mix-blend-mode を掛ける。
   position:fixed は必ずスタッキングコンテキストを作るので、
   子要素（ロゴやナビ）に掛けてもヘッダー内の透明面とブレンドされて無効になる。
   ヘッダー自身に掛ければ、ブレンド相手はページ本体になり機能する。 */
.ds-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 2.5rem;
  color: #fff;
  mix-blend-mode: difference;
  transition: padding 0.35s ease;
}

.ds-page .ds-header-brand {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  color: inherit;
}

.ds-header-logo {
  width: 3.75rem;
  height: 2.9515rem;
  color: currentColor;
}

.ds-header-name {
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.ds-header-right {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

.ds-header-nav {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.75;
  color: inherit;
  white-space: nowrap;
}

.ds-header-nav a {
  position: relative;
  transition: color 0.25s ease;
}

.ds-header-nav a::after {
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  content: "";
}

@media (hover: hover) and (pointer: fine) {
  .ds-header-nav a:hover {
    color: var(--gold);
  }

  .ds-header-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.ds-header-cta {
  height: 3.75rem;
  padding: 0.625rem 2.5rem;
  font-size: 1rem;
}

/* ゴールドのCTAだけ difference の外に出すためのレイヤー。
   ヘッダー(z-index:100)より前面に置くので、ヘッダーのブレンド相手（背後）には入らない。
   ヘッダー内には同じ幅の透明なプレースホルダを残してナビの位置を保っている。 */
.ds-header-cta-ghost {
  visibility: hidden;
}

.ds-header-cta-layer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  padding: 1rem 2.5rem;
  pointer-events: none;
  transition: padding 0.35s ease;
}

.ds-header-cta-layer > a {
  pointer-events: auto;
}

/* スクロール後の白い透過帯。
   ヘッダーは mix-blend-mode:difference なので、背景をヘッダー自身に持たせると
   帯ごと反転してしまう。ヘッダーの背後（z-index:99）に別レイヤーとして敷く。
   結果としてヘッダーの白文字は明るい地との差分で暗くなり、そのまま読める。 */
.ds-header-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 4.25rem; /* is-scrolled 時のヘッダー実測値 */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ds-header.is-scrolled ~ .ds-header-bg {
  opacity: 1;
}

/* スクロール後：少しコンパクトにする */
.ds-header.is-scrolled {
  padding: 0.625rem 2.5rem;
}

.ds-header.is-scrolled .ds-header-cta,
.ds-header.is-scrolled + .ds-header-cta-layer .ds-header-cta {
  height: 3rem;
}

.ds-header.is-scrolled + .ds-header-cta-layer {
  padding: 0.625rem 2.5rem;
}

/* SPメニュー */
.ds-menu-btn {
  position: relative;
  z-index: 2;
  display: none;
  width: 2.5rem;
  height: 2.5rem;
}

.ds-menu-btn span {
  position: absolute;
  left: 0.4375rem;
  display: block;
  width: 1.625rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}

.ds-menu-btn span:nth-child(1) {
  top: 0.8125rem;
}

.ds-menu-btn span:nth-child(2) {
  top: 1.1875rem;
}

.ds-menu-btn span:nth-child(3) {
  top: 1.5625rem;
}

.ds-menu-btn.is-open span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.ds-menu-btn.is-open span:nth-child(2) {
  opacity: 0;
}

.ds-menu-btn.is-open span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.ds-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.ds-menu-panel.is-open {
  opacity: 1;
  visibility: visible;
}

.ds-menu-panel a {
  font-weight: 700;
  font-size: 1.125rem;
}

@media (max-width: 999px) {
  .ds-header {
    padding: 0.75rem 1.25rem;
  }

  .ds-header-logo {
    width: 2.5rem;
    height: 1.9677rem;
  }

  .ds-header-name {
    font-size: 1rem;
  }

  .ds-header-nav,
  .ds-header-cta,
  .ds-header-cta-layer {
    display: none;
  }

  .ds-menu-btn {
    display: block;
  }

  .ds-header.is-scrolled {
    padding: 0.5rem 1.25rem;
  }

  /* SPは padding 0.5rem×2 + メニューボタン 2.5rem = 3.5rem */
  .ds-header-bg {
    height: 3.5rem;
  }
}

/* =============================================================
   01_Hero
   ============================================================= */
.ds-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 53.4375rem;
  padding: 6.5rem 5rem 5.875rem;
  overflow: hidden;
  background: #fff;
}

.ds-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* hero-bg.png は白地・模様・紺のオーバーレイまで合成済みの完成画（2880x1710 = 1440x855の2倍、
   不透明）。なので不透明度もオーバーレイもCSSでは重ねない。
   CTA側は自前のオーバーレイ色（紺.3 / 金.3 / 金.2）を掛けるので、
   合成前の pattern-bg.png（アルファに30%が焼き込まれた素材）を使う */
/* WebPを配信するために多くの img を <picture> で包んでいる。
   ただしレイアウト側には「img 自身が flex アイテム／通常フローの block である」
   前提の指定（align-self, margin:auto など）があり、picture が箱を作ると効かなくなる。
   既定では箱を作らせず、必要な箇所だけ下で display を戻す */
.ds-page picture {
  display: contents;
}

/* <picture> は inline なので、中の img の height:100% が効くように箱にする */
.ds-hero-bg picture,
.ds-cta-mid-bg picture,
.ds-cta-diag-bg picture,
.ds-diag-cta-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ds-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.ds-hero-inner {
  position: relative;
  width: 100%;
  max-width: 80rem;
}

.ds-hero-left,
.ds-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: flex-start;
}

.ds-hero-title {
  font-weight: 900;
  font-size: 5rem;
  line-height: 1.65;
  color: #fff;
  white-space: nowrap;
}

.ds-hero-title span {
  display: block;
}

/* タグ（事業の内側から／BPO／『デジタル監督』） */
.ds-hero-tag {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-left: 1rem;
  background: #fff;
  border-radius: 0.25rem;
}

.ds-hero-tag-lead {
  padding-block: 0.25rem;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
}

.ds-hero-tag-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.25rem;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.35;
  color: #fff;
  white-space: nowrap;
  background: var(--ink);
}

.ds-hero-tag-flag {
  position: absolute;
  top: -2.0625rem;
  left: 0;
  padding: 0.25rem 1rem;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  background: var(--gold);
}

.ds-hero-ctas {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* フキダシが2行になったぶんの逃げ。Figmaはボタン枠の上に24pxを足して
   CTA帯を 314→337 / 495→519 に広げている（ヒーローは元から余裕があり据え置き） */
.ds-cta-mid .ds-hero-ctas,
.ds-final .ds-hero-ctas {
  padding-top: 1.5rem;
}

@media (max-width: 999px) {
  /* SPはFigma専用ノード（1432:409 / 375×645）に準拠。全体中央寄せ */
  .ds-hero {
    min-height: 0;
    padding: 6.5rem 1rem 2.5rem;
  }

  /* 見出し＋タグのかたまり と CTA の間隔（Figma hero-left gap:164px） */
  .ds-hero-left {
    gap: 10.25rem;
    align-items: center;
    width: 100%;
  }

  /* 見出し と タグ の間隔（Figma 1432:412 gap:40px） */
  .ds-hero-copy {
    gap: 2.5rem;
    align-items: center;
    width: 100%;
  }

  /* SPのFigmaノードは無い。3行を1行ずつ収める前提で、最長行
     「デジタルマーケティングを」(12字) が hero-inner に入る上限に合わせる */
  .ds-hero-title {
    font-size: 1.6875rem;
    line-height: 1.65;
    text-align: center;
  }

  /* 白帯を全幅にして中身を中央寄せ、黒帯も全幅にする */
  .ds-hero-tag {
    flex-direction: column;
    gap: 0;
    align-items: center;
    width: 100%;
    padding: 0.25rem 0 0;
  }

  .ds-hero-tag-lead {
    padding-block: 0.25rem;
    font-size: 1rem;
    text-align: center;
  }

  .ds-hero-tag-name {
    width: 100%;
    padding-block: 0.25rem;
    padding-inline: 0;
    font-size: 1.5rem;
  }

  /* Figmaは hero-tag(白帯の内側・pt4の下) を基準に top:-26px。
     実装では白帯そのものが基準になるので、その4px分を足して -22px にする */
  .ds-hero-tag-flag {
    top: -1.375rem;
    left: 50%;
    padding: 0.25rem 1rem;
    font-size: 1rem;
    transform: translateX(-50%);
  }

  .ds-hero-ctas {
    flex-direction: column;
    gap: 2rem;
    align-self: stretch;
  }

  /* ヒーロー(1432:409)・ミッドCTA(1434:445)・最終CTAは同じCTA行。2つ横並び・等幅 */
  .ds-hero .ds-hero-ctas,
  .ds-cta-mid .ds-hero-ctas,
  .ds-final .ds-hero-ctas {
    flex-direction: row;
    gap: 0.25rem;
    justify-content: center;
    width: 100%;
  }

  /* 高さ指定は外し、py16+文字12px×1.35 = 48px になるようにする。
     px40は等幅だと内容ボックス(89.5px)より文字(約100px)が広いが、
     中央寄せなので左右対称にはみ出してFigmaと同じ位置(左右34.75px)に収まる */
  .ds-hero .ds-hero-ctas .ds-btn,
  .ds-cta-mid .ds-hero-ctas .ds-btn,
  .ds-final .ds-hero-ctas .ds-btn {
    flex: 1 0 0;
    min-width: 0;
    height: auto;
    padding: 1rem 2.5rem;
    font-size: 0.75rem;
  }

  /* 最終CTAのアウトラインボタンは2pxの枠線分だけ外寸が大きくなり、
     隣のゴールドボタンと幅・高さがずれるのでパディングで打ち消す */
  .ds-final .ds-hero-ctas .ds-btn-outline {
    padding: calc(1rem - 2px) calc(2.5rem - 2px);
  }

  /* 位置は基底の translate に任せる（PCと同じ重なり方になる） */
  .ds-hero .ds-hero-ctas .ds-btn-flag,
  .ds-cta-mid .ds-hero-ctas .ds-btn-flag,
  .ds-final .ds-hero-ctas .ds-btn-flag {
    padding: 0.125rem 1rem;
    font-size: 0.625rem;
    line-height: 1.35;
  }

  .ds-btn-w {
    width: 100%;
  }
}

/* =============================================================
   02_Pain
   ============================================================= */
/* 導入実績（Figma 779:350 / 1440×196）
   見出しバー54 + gap10 + ロゴ行132 = 196 */
.ds-logostrip {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

/* 右端まで伸びて、左下だけ大きく丸い帯。
   半径200pxは高さ54pxに対して過大なのでブラウザ側で54に丸められる（Figmaと同じ見え方） */
.ds-logostrip-title {
  display: flex;
  align-self: flex-end;
  align-items: center;
  width: calc(100% - 5rem);
  padding: 0.25rem 4rem 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
  background: #bfc6d3;
  border-bottom-left-radius: 12.5rem;
}

.ds-logostrip-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* 行の末尾にも同じ余白を持たせることで、行幅＝1周分になる。
   トラックは同じ行を2つ並べるだけなので、-50%で必ず継ぎ目が合う */
.ds-logostrip-row {
  display: flex;
  flex: 0 0 auto;
  gap: 5em;
  align-items: center;
  padding-right: 5em;
  padding-block: 2.5em;
  /* 幅・高さ・間隔・余白をすべてemで持たせてあるので、この1行だけで
     行全体を比率どおりに拡縮できる。1rem = Figmaの実寸 */
  font-size: 1rem;
  animation: ds-logostrip-slide 60s linear infinite;
}

.ds-logostrip-row li {
  flex: 0 0 auto;
  width: var(--w);
  height: var(--h);
}

.ds-logostrip-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes ds-logostrip-slide {
  to {
    transform: translateX(-100%);
  }
}

.ds-pain-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 4rem;
}

.ds-pain-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.ds-pain-card {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 0.75rem;
}

.ds-pain-case {
  font-family: "Futura", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--blue-2);
}

.ds-pain-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--ink);
}

.ds-pain-text {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gray);
}

/* 手書き風フキダシ（Figmaから書き出した画像） */
.ds-blob {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.ds-pain-card:nth-child(1) .ds-blob {
  top: -0.522rem;
  left: 17.94rem;
  width: 11.44rem;
}

.ds-pain-card:nth-child(2) .ds-blob {
  top: -0.375rem;
  left: 21.68rem;
  width: 13.04rem;
}

.ds-pain-row:nth-child(2) .ds-pain-card:nth-child(1) .ds-blob {
  top: 0.3125rem;
  left: 26.44rem;
  width: 11.59rem;
}

.ds-pain-row:nth-child(2) .ds-pain-card:nth-child(2) .ds-blob {
  top: -0.473rem;
  left: 27.1rem;
  width: 11.43rem;
}

.ds-pain-conclusion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 2.5rem;
  margin-top: 6.5rem;
  /* Figma: radialGradient cx0 cy0 r10 / matrix(64 0 0 7.5 640 75) を 1280×150 に適用
     → 中心 50% 50%、半径は幅・高さそれぞれの50%。
     縦半径を50%にしないと白が上下の辺で切れて帯に見えるので注意 */
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 1) 67.308%,
    rgba(255, 255, 255, 0) 100%
  );
}

.ds-pain-conclusion p {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.75;
  color: var(--gold);
  text-align: center;
}

/* 大きい「?」 */
.ds-pain-q {
  top: -0.3125rem;
  left: 57.24rem;
  width: 20.73rem;
}

@media (max-width: 999px) {
  /* SPノードは無い。emで組んであるので行のfont-sizeだけで全体を縮める */
  .ds-logostrip-title {
    width: calc(100% - 1.5rem);
    padding: 0.25rem 1.5rem 0.5rem;
    font-size: 1rem;
    border-bottom-left-radius: 6.25rem;
  }

  .ds-logostrip-row {
    font-size: 0.7rem;
  }

  /* 02_Pain のSPはFigma専用ノード（1435:508 / 375×1938）に準拠 */
  #pain {
    /* 「?」がセクション上端から46pxはみ出す。Figmaはフレームで切れているので合わせる */
    padding: 6.5rem 1.5rem;
    overflow: hidden;
  }

  .ds-pain-grid {
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .ds-pain-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .ds-pain-card {
    gap: 1rem;
    padding: 2rem;
  }

  .ds-pain-case {
    font-size: 1.5rem;
  }

  .ds-pain-title {
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .ds-pain-text {
    font-size: 0.875rem;
  }

  /* フキダシはカード内の絶対位置。PC比 68.34% の縮小サイズをFigma実測値で指定 */
  .ds-pain-card:nth-child(1) .ds-blob {
    top: -0.5219rem;
    left: 12.8125rem;
    width: 7.8188rem;
  }

  .ds-pain-card:nth-child(2) .ds-blob {
    top: -0.5rem;
    left: 10.625rem;
    width: 8.612rem;
  }

  .ds-pain-row:nth-child(2) .ds-pain-card:nth-child(1) .ds-blob {
    top: 0;
    left: 11.5625rem;
    width: 7.6892rem;
  }

  .ds-pain-row:nth-child(2) .ds-pain-card:nth-child(2) .ds-blob {
    top: -0.5rem;
    left: 10.4375rem;
    width: 8.1781rem;
  }

  .ds-pain-conclusion {
    padding-block: 2.5rem;
    margin-top: 2rem;
  }

  .ds-pain-conclusion p {
    font-size: 1.25rem;
  }

  /* 大きい「?」はSPでは見出しの下・右寄せに置く（Figmaは見出しの上） */
  .ds-page .ds-pain-q {
    position: static;
    width: 10.9838rem;
    /* 絵柄の上端を飾りのドットの上端にそろえて、見出しからカードまでを詰める。
       ドットは x24〜134、吹き出しは揺れの端でも x199 までしか寄らないので重ならない。
       右の -1.075rem は画像が絵柄の右に持っている透明な余白の打ち消し */
    margin: -3.719rem -1.075rem 0 auto;
  }
}

/* =============================================================
   02c_WhyCantOrder
   ============================================================= */
.ds-why {
  padding: 5rem;
  background: #fff;
}

.ds-why .ds-section-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

.ds-why-blob {
  top: -1.0625rem;
  left: 54.94rem;
  width: 20.73rem;
}

.ds-why-lead {
  width: 100%;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #4d4d4d;
}

.ds-pillars {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ds-pillar {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  /* 白カードと黒帯の間はFigma上16px。space-betweenだけだと
     中身がちょうど収まったとき0pxになって両者が接してしまうので明示する。
     space-betweenは残し、左右で高さが違っても黒帯の下端を揃える */
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
  padding: 2.5rem;
  overflow: hidden;
  background: center / cover no-repeat;
  border-radius: 0.5rem;
}

.ds-pillar.is-business {
  background-image: url("/img/ds/bg_pillar-business.png");
  background-image: image-set(url("/img/ds/bg_pillar-business.webp") type("image/webp"),
                              url("/img/ds/bg_pillar-business.png") type("image/png"));
}

.ds-pillar.is-digital {
  background-image: url("/img/ds/bg_pillar-digital.png");
  background-image: image-set(url("/img/ds/bg_pillar-digital.webp") type("image/webp"),
                              url("/img/ds/bg_pillar-digital.png") type("image/png"));
}

.ds-pillar-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}

.ds-pillar-letter {
  font-family: "Futura", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 7.5rem;
  line-height: 1;
  color: #fff;
  user-select: none;
}

.ds-pillar-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
  padding: 1.5rem 2.5rem;
  color: var(--ink);
  background: #fff;
  border-radius: 0.25rem;
}

.ds-pillar-card h3 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.45;
}

.ds-pillar-card ul {
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.75;
}

/* ---------- カード内リストの中黒ぶら下げ ----------
   Figma実測：本文の左端は見出し・段落と同じ位置に揃い、中黒だけが外に出る。
   中黒の字面中心は本文左端から -0.78em（14pxリストで-11px / 20pxリストで-15.6px）。
   「・」は送り1emで字面が0.415〜0.585emにあるため、
   margin-left:-1.28em で字面中心を-0.78emに置き、margin-right:0.28emで本文を0に戻す。 */
.ds-pillar-card li {
  padding-left: 0;
}

.ds-pillar-card li::before {
  margin-right: 0.28em;
  margin-left: -1.28em;
  content: "・";
}

.ds-pillar-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  background: var(--ink);
}

.ds-multiply {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 10rem;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: #2b426e;
  text-align: center;
}

.ds-core {
  display: flex;
  gap: 7.75rem;
  align-items: flex-start;
  width: 100%;
  padding: 2rem 2.5rem;
  overflow: hidden;
  background: url("/img/ds/bg_core-problem.png") center / cover no-repeat;
  background-image: image-set(url("/img/ds/bg_core-problem.webp") type("image/webp"),
                              url("/img/ds/bg_core-problem.png") type("image/png"));
  /* Figmaは tl/bl 6px・tr/br 300px。300pxは高さの半分(206px=12.875rem)で頭打ちになるので
     その値で直接指定する。18.75remのままだと上記の一律縮小で tl/bl が 4.1px に痩せる */
  border-radius: 0.375rem 12.875rem 12.875rem 0.375rem;
}

.ds-core-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding-bottom: 1.5rem;
  background: #fff;
  border-radius: 0.375rem;
}

.ds-core-head {
  padding: 0.875rem 1.5rem;
  background: var(--ink);
}

.ds-core-head p {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.75;
  color: #fff;
}

.ds-core-body {
  padding-inline: 1.5rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-core-body p + p {
  margin-top: 1.75em;
}

.ds-core-circle {
  position: relative;
  flex-shrink: 0;
  width: 21.5rem;
  height: 21.5rem;
}

.ds-core-circle img {
  position: absolute;
  inset: -6.98%;
  width: 113.96%;
  max-width: none;
  height: 113.96%;
}

@media (max-width: 999px) {
  .ds-why {
    padding: 4rem 1.5rem;
  }

  .ds-why .ds-section-inner {
    gap: 2rem;
  }

  /* 「『わかる人』とは？」も同じく、絵柄の上端を飾りのドットの上端にそろえる。
     こちらは揺れの端でも x161 までなので、やはりドット(〜x134)とは重ならない */
  .ds-why-blob {
    position: static;
    align-self: flex-end;
    width: 11rem;
    margin-block: -4.625rem 1rem;
  }

  .ds-why-lead {
    font-size: 0.875rem;
  }

  .ds-pillars {
    flex-direction: column;
  }

  .ds-pillar {
    padding: 1.25rem;
  }

  .ds-pillar-top {
    gap: 0.75rem;
  }

  .ds-pillar-letter {
    font-size: 3.5rem;
  }

  .ds-pillar-card {
    padding: 1.25rem 1rem;
  }

  .ds-pillar-card h3 {
    font-size: 1.25rem;
  }

  .ds-pillar-card ul {
    font-size: 0.8125rem;
  }

  .ds-pillar-note {
    font-size: 0.9375rem;
    padding-block: 0.5rem;
  }

  .ds-multiply {
    width: 100%;
    padding-block: 1rem;
    font-size: 2rem;
  }

  .ds-core {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.375rem;
  }

  .ds-core-head p {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .ds-core-body {
    font-size: 0.875rem;
  }

  .ds-core-circle {
    display: none;
  }
}

/* =============================================================
   05_Solutions
   ============================================================= */
.ds-value-grid {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-value-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
}

.ds-value-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.ds-value-num {
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 500;
  font-size: 7.75rem;
  font-stretch: condensed;
  line-height: 1;
  color: var(--blue);
}

/* 丸はFigma書き出しSVG（絵柄80×80に対しキャンバス88×88＝四辺に4pxのにじみ余白）。
   背景は border-box で切られるため、要素をキャンバスと同じ88pxにして
   はみ出すノイズまで描画し、負マージンでレイアウト上の占有を80pxに戻す。
   （要素を80pxのままにすると外周4pxが切り落とされ、円の縁が平らになる） */
.ds-value-badge {
  --size: 5rem;

  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) * 1.1);
  height: calc(var(--size) * 1.1);
  margin: calc(var(--size) * -0.05);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
  background: url("/img/ds/value-circle.svg") center / 100% 100% no-repeat;
}

.ds-value-title {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-value-text {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-value-text em {
  font-weight: 700;
  font-style: normal;
  color: var(--blue-2);
}

@media (max-width: 999px) {
  .ds-value-grid {
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .ds-value-card {
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }

  .ds-value-head {
    flex-direction: row;
    gap: 1rem;
    align-self: stretch;
  }

  .ds-value-num {
    font-size: 4rem;
  }

  .ds-value-badge {
    --size: 3.75rem;

    font-size: 0.75rem;
  }

  .ds-value-title {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .ds-value-text {
    font-size: 0.875rem;
  }
}

/* =============================================================
   03_Comparison
   ============================================================= */
.ds-comp-lead {
  width: 100%;
  margin-top: 4rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.ds-comp-grid {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-comp-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem 1.5rem;
  background: var(--bg-beige);
  border: 2px dashed #707070;
  border-radius: 0.75rem;
}

.ds-comp-card.is-strong {
  background: #fff;
  border: 4px solid var(--blue);
}

.ds-comp-choices {
  width: 100%;
  font-family: "Futura", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #707070;
}

.ds-comp-card.is-strong .ds-comp-choices {
  color: #5480d4;
}

.ds-comp-name {
  width: 100%;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
  color: #707070;
}

.ds-comp-card.is-strong .ds-comp-name {
  color: #5480d4;
}

.ds-comp-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
  background: #707070;
  /* Figmaは tl40 / tr2 / br20 / bl40。ただしCSSは「1辺の半径合計が辺長を超えると
     全ての角丸を同じ係数で一律に縮小する」仕様のため、tl+bl=80px > 高さ32.5px となり
     br まで 8px に縮んでしまう（Figmaは角ごとに短辺の半分で頭打ちにするだけ）。
     同じ結果になるよう、各角をあらかじめ min() で個別にクランプして指定する。 */
  --cap: calc((0.875rem * 1.75 + 0.5rem) / 2);

  border-radius: min(2.5rem, var(--cap)) 0.125rem min(1.25rem, var(--cap))
    min(2.5rem, var(--cap));
}

.ds-comp-card.is-strong .ds-comp-tag {
  background: #5480d4;
}

.ds-comp-rule {
  width: 100%;
  height: 0;
  border-top: 2px dashed #707070;
}

.ds-comp-card.is-strong .ds-comp-rule {
  border-top-color: var(--blue);
}

.ds-comp-text {
  width: 100%;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink);
}

.ds-comp-band {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2.5rem;
  margin-top: 4rem;
  background: var(--ink);
}

.ds-comp-band p {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.75;
  color: #fff;
  text-align: center;
}

@media (max-width: 999px) {
  .ds-comp-lead {
    margin-top: 2rem;
    font-size: 0.875rem;
  }

  .ds-comp-grid {
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .ds-comp-card {
    padding: 1.5rem 1.25rem;
  }

  .ds-comp-choices {
    font-size: 1.125rem;
  }

  .ds-comp-name {
    font-size: 1.375rem;
  }

  .ds-comp-tag {
    /* SPはフォントとpaddingが変わるので、頭打ちの値も高さに合わせ直す */
    --cap: calc((0.75rem * 1.75 + 0.5rem) / 2);

    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    white-space: normal;
  }

  .ds-comp-text {
    font-size: 0.875rem;
  }

  .ds-comp-band {
    padding: 1.75rem 1.25rem;
    margin-top: 2.5rem;
  }

  .ds-comp-band p {
    font-size: 1.125rem;
    line-height: 1.7;
  }
}

/* =============================================================
   04_ServiceWhat（ダークセクション）
   ============================================================= */
.ds-dark {
  color: #fff;
  background: var(--ink);
}

.ds-dark .ds-h2 {
  color: #fff;
}

.ds-concept-row {
  display: flex;
  gap: 4rem;
  align-items: center;
  width: 100%;
  margin-top: 4rem;
}

.ds-concept-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 1.75;
  color: #fff;
}

.ds-concept-text p + p {
  margin-top: 1.75em;
}

.ds-concept-visual {
  flex: 1 0 0;
  min-width: 0;
  height: 26.9375rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.ds-concept-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-points-row {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-point-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d9dee3;
  border-radius: 0.75rem;
}

.ds-point-num {
  width: 100%;
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 500;
  font-size: 6.5rem;
  font-stretch: condensed;
  line-height: 1;
}

.ds-point-title {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-point-text {
  width: 100%;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.75;
}

@media (max-width: 999px) {
  .ds-concept-row {
    flex-direction: column-reverse;
    gap: 2rem;
    margin-top: 2.5rem;
  }

  .ds-concept-text {
    width: 100%;
    font-size: 1rem;
  }

  /* SPは箱がPCより横長になるぶん object-fit:cover が上下を削り、
     画像の下端にある「事業会社」「支援会社」のラベルが切れていた。
     高さを固定せず画像の比率（840×576）のまま出す */
  .ds-concept-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 576;
  }

  .ds-points-row {
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .ds-point-card {
    padding: 1.5rem 1.25rem;
  }

  .ds-point-num {
    font-size: 3.5rem;
  }

  .ds-point-title {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .ds-point-text {
    font-size: 0.8125rem;
  }
}

/* =============================================================
   04b_Roles
   ============================================================= */
.ds-role-grid {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 2.5rem;
  overflow: hidden;
}

.ds-role {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  min-width: 0;
  padding: 4rem 1.5rem 8.75rem;
  background: #fff;
}

.ds-role:nth-child(odd) {
  background: var(--bg-beige);
}

.ds-role-label {
  font-family: "Futura", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.75;
  color: var(--blue);
  white-space: nowrap;
}

.ds-role:nth-child(odd) .ds-role-label,
.ds-role:nth-child(odd) .ds-role-term {
  color: #3262ae;
}

.ds-role-term {
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  font-stretch: condensed;
  line-height: 1.75;
  color: var(--blue);
  white-space: nowrap;
}

.ds-role-term small {
  font-size: 1.5rem;
}

.ds-role-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  color: var(--ink);
}

.ds-role-title {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
  text-align: center;
}

.ds-role-text {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
}

/* BPO体制 */
.ds-bpo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  width: 100%;
  margin-top: 6.5rem;
}

.ds-bpo-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

/* h3の飾り。絵柄24×40に対しキャンバス32×48（四辺に4pxのにじみ余白） */
.ds-bpo-dots {
  flex-shrink: 0;
  width: 2rem;
  height: 3rem;
  margin: -0.25rem;
}

.ds-bpo-head h3 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
}

.ds-bpo-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.ds-bpo-item {
  width: 100%;
  padding: 1rem 2.5rem;
  background: #9fa6b3;
  border-radius: 3.75rem;
  transition: transform 0.35s ease;
}

.ds-bpo-item h4 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
  color: #fff;
}

.ds-bpo-item p {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .ds-bpo-item:hover {
    transform: translateX(0.5rem);
  }
}

@media (max-width: 999px) {
  .ds-role-grid {
    flex-wrap: wrap;
    margin-top: 2rem;
  }

  .ds-role {
    flex: 1 0 50%;
    gap: 1rem;
    padding: 2rem 1.25rem 2.5rem;
  }

  .ds-role:nth-child(1),
  .ds-role:nth-child(4) {
    background: var(--bg-beige);
  }

  .ds-role:nth-child(2),
  .ds-role:nth-child(3) {
    background: #fff;
  }

  .ds-role:nth-child(3) .ds-role-label,
  .ds-role:nth-child(3) .ds-role-term {
    color: var(--blue);
  }

  .ds-role:nth-child(4) .ds-role-label,
  .ds-role:nth-child(4) .ds-role-term {
    color: #3262ae;
  }

  .ds-role-label {
    font-size: 1.375rem;
  }

  .ds-role-term {
    font-size: 1.5rem;
  }

  .ds-role-term small {
    font-size: 0.9375rem;
  }

  .ds-role-body {
    gap: 0.75rem;
  }

  .ds-role-title {
    font-size: 1.0625rem;
  }

  .ds-role-text {
    font-size: 0.8125rem;
  }

  .ds-bpo {
    margin-top: 3rem;
  }

  .ds-bpo-head h3 {
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .ds-bpo-dots {
    width: 1.3333rem;
    height: 2rem;
    margin: -0.1667rem;
  }

  .ds-bpo-item {
    padding: 1.125rem 1.5rem;
    border-radius: 1.25rem;
  }

  .ds-bpo-item h4 {
    font-size: 1rem;
    line-height: 1.6;
  }

  .ds-bpo-item p {
    font-size: 0.8125rem;
  }
}

/* =============================================================
   04c_Diagnosis
   ============================================================= */
.ds-diagnosis {
  padding: 6rem 5rem 5rem;
}

.ds-diag-lead {
  width: 100%;
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.ds-hexagon {
  width: 100%;
  margin-top: 2.5rem;
}

.ds-hex-list {
  display: none;
}

/* 診断CTA */
.ds-diag-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2.5rem 5rem;
  margin-top: 2.5rem;
  overflow: hidden;
  background: #fff;
}

.ds-diag-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ds-diag-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-diag-cta-bg::after {
  position: absolute;
  inset: 0;
  background: rgba(176, 146, 83, 0.2);
  content: "";
}

.ds-diag-cta-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.ds-diag-cta-title {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.75;
  text-align: center;
}

.ds-diag-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem 2.5rem;
  background: #fff;
  border-radius: 0.75rem;
}

.ds-diag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.75;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: 0.375rem;
}

.ds-diag-list {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--gold);
}

.ds-diag-list li {
  padding-left: 0;
}

.ds-diag-list li::before {
  margin-right: 0.28em;
  margin-left: -1.28em;
  content: "・";
}

.ds-diag-cta .ds-btn,
.ds-diag-note {
  position: relative;
}

/* 他のCTA帯と同じく、2行になったフキダシのぶんボタンの上に24pxを足す。
   Figmaは 04c_Diagnosis を 1936→1960、内側のCTA枠を 566→590 にしている */
.ds-diag-cta .ds-btn {
  margin-top: 1.5rem;
}

.ds-diag-note {
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 999px) {
  .ds-diagnosis {
    padding: 4rem 1.5rem;
  }

  .ds-diag-lead {
    margin-top: 2rem;
    font-size: 0.875rem;
  }

  /* SPでは六角図の代わりに6カテゴリをカードで並べる */
  .ds-page .ds-hexagon {
    display: none;
  }

  /* 左列に六角図の上半分（集客力・接客力・育客力）、右列に下半分
     （運用力・商品力・基盤力）を左→右の順で入れるので、列方向に流す */
  .ds-hex-list {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    margin-top: 2rem;
  }

  .ds-hex-item {
    padding: 1rem 0.75rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--gold);
    border-radius: 0.375rem;
  }

  .ds-hex-item .en {
    font-family: "Futura", "Poppins", sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 1.6;
    color: var(--gold);
  }

  .ds-hex-item .ja {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .ds-hex-item .desc {
    margin-top: 0.375rem;
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: #666;
  }

  .ds-diag-cta {
    gap: 1.75rem;
    padding: 2rem 1.25rem;
  }

  /* PCのままだと nowrap のボタンが箱から左右11pxずつはみ出すので、
     横いっぱいにして文字とパディングを詰める */
  .ds-diag-cta .ds-btn {
    width: 100%;
    height: auto;
    padding: 1rem;
    font-size: 0.875rem;
  }

  .ds-diag-cta .ds-btn-flag {
    padding: 0.1875rem 1rem 0.25rem;
    font-size: 0.6875rem;
  }

  .ds-diag-cta-title {
    font-size: 1.25rem;
  }

  .ds-diag-panel {
    align-self: stretch;
    padding: 1.25rem 1rem;
  }

  .ds-diag-badge {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .ds-diag-list {
    font-size: 0.875rem;
  }

  /* SPはカードの内側の余白が狭く、ぶら下げた中黒がカードの縁まで4〜5px
     （まとめ枠では3pxはみ出す）まで迫って窮屈だった。
     リストごと中黒の字面分（0.865em）右に寄せて、中黒が本文の左端に、
     本文がその内側に来るようにする。ぶら下げ自体（折り返しが1文字目に
     そろう）は維持。PCは余白が広いのでFigmaどおりのまま。 */
  .ds-pillar-card ul,
  .ds-diag-list,
  .ds-cta-diag-list,
  .ds-path-block ul {
    padding-left: 0.865em;
  }

  .ds-diag-note {
    font-size: 0.75rem;
  }
}

/* =============================================================
   05b_Feasibility
   ============================================================= */
.ds-feas-lead {
  width: 100%;
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.ds-path-rows {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-top: 2.5rem;
}

.ds-path-card {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  width: 100%;
  padding: 2rem 1.5rem 1rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.75rem;
}

.ds-path-head {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1.5rem;
  align-items: flex-start;
  width: 18.75rem;
}

.ds-path-choices {
  width: 100%;
  font-family: "Futura", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75;
}

.ds-path-name {
  width: 100%;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
}

/* 2×2グリッド。Figmaは上段2ブロックの高さを167pxに固定して
   「見極めのポイント」と「まとめ」の見出しを同じ高さ(y=183)に揃えている。
   flexの2カラムだと上段の項目数の差（4件と3件）がそのまま下段のズレになるため、
   グリッドの行で高さを揃える。 */
.ds-path-cols {
  display: grid;
  flex: 1 0 0;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-width: 0;
}

.ds-path-block {
  width: 100%;
}

.ds-path-block.is-cond {
  grid-area: 1 / 1;
}

.ds-path-block.is-check {
  grid-area: 2 / 1;
}

.ds-path-block.is-fit {
  grid-area: 1 / 2;
}

.ds-path-block.is-sum {
  grid-area: 2 / 2;
}

.ds-path-block > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.25rem;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  border-radius: 2.5rem;
}

.ds-path-block.is-cond > h4 {
  background: var(--blue-2);
}

.ds-path-block.is-check > h4 {
  background: var(--gold);
}

.ds-path-block.is-fit > h4 {
  background: #66718a;
}

.ds-path-block.is-sum > h4 {
  background: var(--ink);
}

.ds-path-block > div {
  padding: 0.5rem 1rem 1rem;
}

.ds-path-block ul {
  font-size: 0.875rem;
  line-height: 1.75;
}

.ds-path-block li {
  padding-left: 0;
}

.ds-path-block li::before {
  margin-right: 0.28em;
  margin-left: -1.28em;
  content: "・";
}

.ds-path-block.is-sum p {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75;
}

/* 年間コストの目安 */
.ds-cost-row {
  display: flex;
  gap: 2.5rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-cost-deco {
  flex: 1 0 0;
  min-width: 0;
  /* ドット柄はFigma書き出し（569×346の3倍）。隣の年間コストボックスに合わせて
     縦に伸びるぶん元の比率と合わないので、円が真円のまま入る cover で敷く */
  background: url("/img/ds/bg-cost.png") center / cover no-repeat;
  background-image: image-set(url("/img/ds/bg-cost.webp") type("image/webp"),
                              url("/img/ds/bg-cost.png") type("image/png"));
  /* 同上。12.5rem(200px)は高さの半分(189px=11.8125rem)で頭打ちになる */
  border-radius: 0.75rem 11.8125rem 11.8125rem 11.8125rem;
}

.ds-cost-box {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1rem;
  align-items: flex-start;
  width: 41.9375rem;
  padding: 2rem 2.5rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0.75rem;
}

.ds-cost-box h3 {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-cost-box .body {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-cost-box .body p + p {
  margin-top: 1.75em;
}

@media (max-width: 999px) {
  .ds-feas-lead {
    margin-top: 2rem;
    font-size: 0.875rem;
  }

  .ds-path-rows {
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .ds-path-card {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .ds-path-head {
    gap: 0.5rem;
    width: 100%;
  }

  .ds-path-choices {
    font-size: 1rem;
  }

  .ds-path-name {
    font-size: 1.375rem;
  }

  .ds-path-cols {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
  }

  /* SPはDOM順（条件→見極め→向いている→まとめ）にそのまま縦積みする */
  .ds-path-block.is-cond,
  .ds-path-block.is-check,
  .ds-path-block.is-fit,
  .ds-path-block.is-sum {
    grid-area: auto;
  }

  .ds-path-block > h4 {
    font-size: 0.9375rem;
  }

  .ds-path-block > div {
    padding: 0.5rem 0.5rem 0.75rem;
  }

  .ds-path-block ul {
    font-size: 0.8125rem;
  }

  .ds-path-block.is-sum p {
    font-size: 0.875rem;
  }

  .ds-cost-row {
    margin-top: 2.5rem;
  }

  .ds-cost-deco {
    display: none;
  }

  .ds-cost-box {
    width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .ds-cost-box h3 {
    font-size: 1.125rem;
  }

  .ds-cost-box .body {
    font-size: 0.8125rem;
  }
}

/* =============================================================
   06_HowItWorks
   ============================================================= */
.ds-timeline {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-step {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem 1.5rem;
  background: var(--bg-card);
  border-radius: 0.75rem;
}

.ds-step-num {
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  font-stretch: condensed;
  line-height: 1.75;
  color: var(--blue);
  white-space: nowrap;
}

.ds-step-title {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-step-text {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.75;
}

/* =============================================================
   06b_InhouseRoadmap
   ============================================================= */
.ds-roadmap {
  padding: 5rem;
}

.ds-roadmap .ds-section-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-start;
}

.ds-phases {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

.ds-phase {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem;
  color: #fff;
  background: var(--blue);
}

.ds-phase.is-2 {
  color: var(--ink);
  background: #fff;
}

.ds-phase.is-3 {
  background: #2b426d;
}

.ds-phase-num {
  width: 100%;
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  font-stretch: condensed;
  line-height: normal;
}

.ds-phase-tag {
  width: 100%;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: normal;
}

.ds-phase-title {
  width: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-phase-meta {
  width: 100%;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: normal;
}

.ds-phase-text {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
  color: #d9e0ed;
}

.ds-phase.is-2 .ds-phase-text {
  color: var(--ink);
}

.ds-roadmap-note {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.75;
}

@media (max-width: 999px) {
  .ds-timeline {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
  }

  .ds-step {
    flex: 1 0 calc(50% - 0.375rem);
    gap: 0.625rem;
    padding: 1.25rem 1rem;
  }

  .ds-step-num {
    font-size: 1.125rem;
  }

  .ds-step-title {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .ds-step-text {
    font-size: 0.8125rem;
  }

  .ds-roadmap {
    padding: 4rem 1.5rem;
  }

  .ds-roadmap .ds-section-inner {
    gap: 2rem;
  }

  .ds-phases {
    flex-direction: column;
    border-radius: 0.5rem;
  }

  .ds-phase {
    gap: 0.625rem;
    padding: 1.5rem 1.25rem;
  }

  .ds-phase-title {
    font-size: 1.25rem;
  }

  .ds-phase-text {
    font-size: 0.875rem;
  }

  .ds-roadmap-note {
    font-size: 0.75rem;
  }
}

/* =============================================================
   08_Cases
   ============================================================= */
.ds-case-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-top: 2.5rem;
}

.ds-case-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.ds-case {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  min-width: 0;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--blue-2);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ds-case:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0 0.75rem 2rem rgba(70, 119, 197, 0.16);
  }
}

.ds-case-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.ds-case-meta {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.75;
  color: #666;
}

.ds-case-title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
}

.ds-case-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.ds-case-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  width: 100%;
}

.ds-case-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
  background: var(--ink);
}

.ds-case-block.is-after .ds-case-label {
  justify-content: center;
  width: 5.1875rem;
  background: var(--blue);
}

.ds-case-before {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-case-after {
  width: 100%;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--blue);
}

@media (max-width: 999px) {
  .ds-case-grid {
    gap: 1rem;
    margin-top: 2rem;
  }

  .ds-case-row {
    flex-direction: column;
    gap: 1rem;
  }

  .ds-case {
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .ds-case-head {
    gap: 0.5rem;
  }

  /* 事例1の「Webからの有効問い合わせ数が」が20pxだとカード内寸287pxと同値で
     折り返してしまうので1px下げる（19pxで273px） */
  .ds-case-title {
    font-size: 1.1875rem;
    line-height: 1.6;
  }

  .ds-case-body {
    gap: 1rem;
  }

  .ds-case-label {
    font-size: 0.8125rem;
  }

  .ds-case-before {
    font-size: 0.8125rem;
  }

  .ds-case-after {
    font-size: 1rem;
  }
}

/* =============================================================
   09_Pricing
   ============================================================= */
.ds-plan-grid {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  margin-top: 4rem;
}

.ds-plan {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
  min-width: 0;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 0.75rem;
}

.ds-plan.is-main {
  border-width: 2px;
}

.ds-plan-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}

.ds-plan-name {
  width: 100%;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
  color: var(--gold);
}

/* Figmaは3枚とも価格の箱を165px（＝94px×1.75）に固定して中央に置いている。
   「無料」だけ字が小さいので、箱を固定しないと下の説明文の開始位置がずれる */
.ds-plan-price {
  height: 10.3125rem;
  font-weight: 700;
  font-size: 5.875rem;
  /* 箱と同じ長さを行の高さにすると、flexにしなくても中の1行が上下中央に来る。
     数字と「万円〜」を同じ行に置いたままなのでベースラインで揃う（下揃え） */
  line-height: 10.3125rem;
  white-space: nowrap;
}

.ds-plan-price small {
  font-size: 2.5rem;
}

/* 数字ではなく語（無料）のときはFigmaでは64px */
.ds-plan-price.is-word {
  font-size: 4rem;
}

.ds-plan-desc {
  width: 100%;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray);
}

.ds-plan-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}

.ds-plan-term {
  width: 100%;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: normal;
}

.ds-plan-btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.75;
  white-space: nowrap;
  border-radius: 2.5rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ds-page .ds-plan-btn {
  color: #fff;
  background: var(--ink);
}

.ds-page .ds-plan-btn.is-gold {
  background: var(--gold-grad);
}

.ds-plan-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ds-plan-btn:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.625rem 1.25rem rgba(26, 26, 26, 0.2);
  }

  .ds-plan-btn:hover svg {
    transform: translateX(0.25rem);
  }
}

.ds-plan-note {
  width: 100%;
  margin-top: 4rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #8a8a8a;
}

@media (max-width: 999px) {
  .ds-plan-grid {
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .ds-plan {
    padding: 1.5rem 1.25rem;
  }

  .ds-plan-name {
    font-size: 1.375rem;
  }

  .ds-plan-price {
    height: 5.6875rem;
    font-size: 3.25rem;
    line-height: 5.6875rem;
  }

  .ds-plan-price small {
    font-size: 1.375rem;
  }

  /* PCの 64/94 と同じ比率 */
  .ds-plan-price.is-word {
    font-size: 2.1875rem;
  }

  .ds-plan-desc {
    font-size: 0.8125rem;
  }

  .ds-plan-btn {
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }

  .ds-plan-note {
    margin-top: 2rem;
    font-size: 0.75rem;
  }
}

/* =============================================================
   10_FAQ
   ============================================================= */
/* Figmaは罫線区切りのリストではなく、ベージュの地に白いカードを24px間隔で並べる */
.ds-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-top: 4rem;
}

.ds-faq-item {
  background: #fff;
}

.ds-faq-q {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1.5rem 2rem;
  text-align: left;
  transition: padding-bottom 0.4s ease;
}

/* 開いているときは質問行の下の余白を詰めて、質問と回答の間隔を
   Figmaのgapと同じ16pxにする（下の余白はカード側＝回答のpaddingが持つ） */
.ds-faq-item.is-open .ds-faq-q {
  padding-bottom: 1rem;
}

/* 書体はFigmaの本文書体ではなくFutura（サイト共通の欧文の扱い） */
.ds-faq-q .mark {
  flex-shrink: 0;
  font-family: "Futura", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--gold);
}

.ds-faq-q .txt {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75;
  transition: color 0.25s ease;
}

.ds-faq-q .chev {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gray);
  transition: transform 0.35s ease;
}

.ds-faq-item.is-open .ds-faq-q .chev {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .ds-faq-q:hover .txt {
    color: var(--gold);
  }
}

.ds-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.ds-faq-item.is-open .ds-faq-a {
  grid-template-rows: 1fr;
}

.ds-faq-a > div {
  overflow: hidden;
}

.ds-faq-a p {
  padding: 0 2rem 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #4d4d4d;
}

/* =============================================================
   11_FinalCTA
   ============================================================= */
.ds-final {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 6.5rem 5rem;
  background: var(--ink);
}

.ds-final-title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
  color: #fff;
  text-align: center;
}

.ds-final-text {
  font-size: 1.25rem;
  line-height: 1.75;
  color: #fff;
  text-align: center;
}

.ds-page .ds-btn-outline {
  color: #dfd5a9;
  background: var(--ink);
  border: 2px solid var(--gold);
}

/* =============================================================
   12_Footer
   ============================================================= */
.ds-footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem 2rem;
  /* ロゴと社名(.ds-header-brand)は自前の色を持たず、ヘッダーでは .ds-header の
     白を継いでいる。フッターでも継げるように白を置く（置かないと
     .ds-page a { color: inherit } 経由で --ink になり地に沈む） */
  color: #fff;
  background: #111;
}

.ds-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 80rem;
}

.ds-footer-nav {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
}

.ds-footer-nav a {
  transition: color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ds-footer-nav a:hover {
    color: var(--gold);
  }
}

.ds-footer-divider {
  width: 100%;
  max-width: 80rem;
  height: 1px;
  background: #4d4d4d;
}

/* 罫線の下のサイト全体メニュー。上段のナビと右端を揃え、文字は一段控えめにする */
.ds-footer-sitenav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 80rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #c4c4c4;
}

.ds-footer-sitenav a {
  transition: color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ds-footer-sitenav a:hover {
    color: var(--gold);
  }
}

.ds-footer-copy {
  font-size: 0.75rem;
  line-height: 1.75;
  color: #8a8a8a;
  text-align: center;
}

@media (max-width: 999px) {
  .ds-faq-list {
    margin-top: 2rem;
  }

  .ds-faq-q {
    gap: 0.625rem;
    padding: 1.125rem 1.25rem;
  }

  .ds-faq-q .mark {
    font-size: 1.25rem;
  }

  .ds-faq-q .txt {
    font-size: 0.9375rem;
  }

  .ds-faq-q .chev {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ds-faq-item.is-open .ds-faq-q {
    padding-bottom: 0.75rem;
  }

  .ds-faq-a p {
    padding: 0 1.25rem 1.125rem;
    font-size: 0.875rem;
  }

  /* CTA行をミッドCTAと同じ幅(343px)にするため、左右も1remにする */
  .ds-final {
    gap: 1.75rem;
    padding: 3.5rem 1rem;
  }

  .ds-final-title {
    font-size: 1.25rem;
  }

  .ds-final-text {
    font-size: 0.875rem;
  }

  .ds-footer {
    gap: 1.5rem;
    padding: 2.5rem 1.5rem 1.5rem;
  }

  .ds-footer-top {
    flex-direction: column;
    gap: 1.5rem;
  }

  .ds-footer-nav {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: center;
    font-size: 0.875rem;
  }

  /* SPは上段が縦積み中央寄せになるので、こちらも中央に戻す */
  .ds-footer-sitenav {
    gap: 0.75rem 1.25rem;
    justify-content: center;
  }

  .ds-footer-copy {
    font-size: 0.625rem;
  }
}

/* =============================================================
   07_CTA_Mid（ページ内に繰り返し登場）
   ============================================================= */
.ds-cta-mid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
  overflow: hidden;
  background: #fff;
}

.ds-cta-mid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ds-cta-mid-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-cta-mid-bg::after {
  position: absolute;
  inset: 0;
  background: rgba(43, 66, 109, 0.3);
  content: "";
}

.ds-cta-mid-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  color: #fff;
  text-align: center;
}

.ds-cta-mid-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-cta-mid-text {
  font-size: 1rem;
  line-height: 1.75;
}

.ds-cta-mid .ds-hero-ctas {
  position: relative;
}

/* =============================================================
   07_CTA_Mid（診断特化・02_Painの直後） Figma node 1454:1746
   セクション名は同じだが、通常のミッドCTA(.ds-cta-mid)とも
   診断セクションのCTA(.ds-diag-cta)とも数値が違うので別クラスにする。
   ============================================================= */
/* オーバーレイの色がミッドCTA（紺 .3）とも診断セクション（金 .2）とも違う */
.ds-cta-diag-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ds-cta-diag-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-cta-diag-bg::after {
  position: absolute;
  inset: 0;
  background: rgba(176, 146, 83, 0.3);
  content: "";
}

.ds-cta-diag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 5rem;
  overflow: hidden;
  background: #fff;
}

.ds-cta-diag-row {
  position: relative;
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.ds-cta-diag-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
  font-weight: 900;
  white-space: nowrap;
}

.ds-cta-diag-lead {
  font-size: 1.5rem;
  line-height: 1.75;
}

.ds-cta-diag-title {
  font-size: 2.5rem;
  line-height: 1.75;
  text-align: center;
}

/* 「デジタル監督診断（無料）」の白フチ。診断セクション側の見出しと共有する。
   Figmaの実画像から外側3px（40px時）＝0.075em。text-strokeは中心揃えなので
   倍の0.15emを指定し、paint-orderで塗りを上に描いて内側を潰す。
   角は丸（既定のmiterだと鋭角が尖って飛び出す）。
   emなのでSPでも、字の大きさが違う診断セクション側でも比率が変わらない */
.ds-cta-diag-title,
.ds-diag-cta-title {
  -webkit-text-stroke: 0.15em #fff;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

.ds-cta-diag-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 0.375rem;
}

.ds-cta-diag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.75;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: 0.375rem;
}

.ds-cta-diag-list {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gold);
  white-space: nowrap;
}

/* 記号はFigmaの書き出しでは list-disc だが、ページ内の他のリストに合わせて中黒 */
.ds-cta-diag-list li {
  padding-left: 0;
}

.ds-cta-diag-list li::before {
  margin-right: 0.28em;
  margin-left: -1.28em;
  content: "・";
}

.ds-cta-diag-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.ds-cta-diag-note {
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 999px) {
  /* SPはFigma専用ノード（1434:445 / 375×226）に準拠 */
  .ds-cta-mid {
    gap: 2.5rem;
    padding: 2.5rem 1rem;
  }

  .ds-cta-mid-copy {
    gap: 0.5rem;
    width: 100%;
  }

  .ds-cta-mid-title {
    font-size: 1.125rem;
  }

  .ds-cta-mid-text {
    font-size: 0.625rem;
    line-height: 1.75;
  }

  /* 診断特化CTAはSPノードが無いので、承認済みの診断セクションCTAに倣って
     横2カラムを縦積みにし、パネルとボタンを全幅にする */
  .ds-cta-diag {
    gap: 2rem;
    padding: 2rem 1rem;
  }

  .ds-cta-diag-row {
    flex-direction: column;
    gap: 1.5rem;
    align-self: stretch;
  }

  .ds-cta-diag-copy {
    align-items: center;
    align-self: stretch;
    white-space: normal;
    text-align: center;
  }

  .ds-cta-diag-lead {
    font-size: 1rem;
  }

  .ds-cta-diag-title {
    font-size: 1.5rem;
  }

  .ds-cta-diag-panel {
    align-self: stretch;
    padding: 1.25rem 1rem;
  }

  /* 13pxだと最長の項目がパネル内寸(311px)にぎりぎり収まらず
     「ト」だけの行が出るので12pxにする */
  .ds-cta-diag-list {
    font-size: 0.75rem;
    white-space: normal;
  }

  .ds-cta-diag-foot {
    align-self: stretch;
  }

  .ds-cta-diag .ds-btn {
    width: 100%;
    height: auto;
    padding: 1rem;
    font-size: 0.875rem;
  }

  .ds-cta-diag .ds-btn-flag {
    padding: 0.1875rem 1rem 0.25rem;
    font-size: 0.6875rem;
  }

  .ds-cta-diag-note {
    font-size: 0.6875rem;
  }
}

/* =============================================================
   スクロールアニメーション
   ============================================================= */
.ds-reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.ds-reveal.from-left {
  transform: translate3d(-2rem, 0, 0);
}

.ds-reveal.from-right {
  transform: translate3d(2rem, 0, 0);
}

.ds-reveal.zoom {
  transform: scale(0.94);
}

.ds-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* フキダシのポップイン */
.ds-blob {
  opacity: 0;
  transform: scale(0.4) rotate(-18deg);
  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0.15s);
}

.ds-blob.is-in {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Figmaのフキダシは2秒・ブーメランで揺れ続ける
   （02_Pain 782:980 / 02c_WhyCantOrder 779:372 の Group 11）。
   Figmaは常時 scale 1.12 もかけているが、これは書き出した画像に
   焼き込まれているので rotate と translate だけを再現する。
   個別プロパティ(rotate/translate)を使うので、上のポップイン(transform)とは
   干渉しない。ポップインが終わってからループを始める。 */
@keyframes ds-blob-tilt {
  from {
    rotate: 0deg;
  }

  to {
    rotate: -2.005deg; /* -0.035rad */
  }
}

@keyframes ds-blob-float {
  0% {
    translate: 0 0;
  }

  96.295% {
    translate: -0.875rem 1.5625rem; /* -14px / +25px */
  }

  100% {
    translate: -0.875rem 1.5625rem;
  }
}

/* 一括指定にすると、下の2つで animation-delay が 0 に戻ってしまうので
   個別プロパティで書く */
.ds-blob.is-in {
  animation-name: ds-blob-tilt;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: calc(var(--d, 0.15s) + 0.65s);
}

/* 大きい「?」は傾きに加えてゆっくり流れる */
.ds-blob.ds-pain-q.is-in {
  animation-name: ds-blob-tilt, ds-blob-float;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear;
}

/* 「『わかる人』とは？」は傾かず、流れるだけ */
.ds-blob.ds-why-blob.is-in {
  animation-name: ds-blob-float;
  animation-timing-function: cubic-bezier(0.058, 0.002, 0.856, 0.684);
}

/* ヒーローの初期表示 */
.ds-hero-anim {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  animation: ds-hero-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes ds-hero-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-page *,
  .ds-page *::before,
  .ds-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .ds-logostrip-row {
    animation: none;
  }

  .ds-logostrip-track {
    overflow-x: auto;
  }

  .ds-reveal,
  .ds-blob,
  .ds-hero-anim {
    opacity: 1;
    transform: none;
    rotate: none;
    translate: none;
  }

  .ds-blob.is-in {
    animation: none;
  }
}

/* SVGフィルタ定義用（非表示） */
.ds-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =============================================================
   SP: 横並び→縦積みになるカードの flex-basis リセット
   （flex:1 0 0 のままだと縦方向の basis が 0 になり潰れる）
   ============================================================= */
@media (max-width: 999px) {
  .ds-pain-card,
  .ds-value-card,
  .ds-comp-card,
  .ds-point-card,
  .ds-case,
  .ds-plan,
  .ds-pillar,
  .ds-phase,
  .ds-path-cols,
  .ds-path-block,
  .ds-concept-text,
  .ds-concept-visual,
  .ds-core-card {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* =============================================================
   個別相談フォーム（/service/digital-kantoku/contact）
   LPと同じトークンで組む。専用CSSは作らずここに置く
   ============================================================= */
.ds-header.is-solid {
  position: static;
  mix-blend-mode: normal;
  color: var(--ink);
  background: #fff;
}

.ds-formpage {
  padding: 4rem 5rem 6.5rem;
  background: var(--bg-beige);
}

.ds-formpage-inner {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

.ds-formpage-lead {
  margin-top: 2.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #4d4d4d;
}

.ds-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  padding: 3rem;
  background: #fff;
  border-radius: 0.375rem;
}

.ds-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 診断から来た人に出す引き継ぎ内容の確認パネル */
.ds-form-handoff {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-beige);
  border-radius: 0.375rem;
}

.ds-form-handoff-badge {
  align-self: flex-start;
  padding: 0.25rem 0.875rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.75;
  color: #fff;
  background: var(--gold);
  border-radius: 2.5rem;
}

.ds-form-handoff-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.75;
}

.ds-form-handoff-list > div {
  display: flex;
  gap: 1rem;
}

.ds-form-handoff-list dt {
  flex: 0 0 6rem;
  color: var(--gray);
}

.ds-form-handoff-list dd {
  font-weight: 700;
}

.ds-form-handoff-note {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--gray);
}

@media (max-width: 999px) {
  .ds-form-handoff {
    padding: 1.25rem;
  }

  .ds-form-handoff-list > div {
    flex-direction: column;
    gap: 0.125rem;
  }

  .ds-form-handoff-list dt {
    flex: none;
    font-size: 0.8125rem;
  }
}

.ds-form-label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-form-req,
.ds-form-opt {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  border-radius: 0.125rem;
}

.ds-form-req {
  background: #c0574f;
}

.ds-form-opt {
  color: #666;
  background: var(--line);
}

.ds-form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ds-form-input::placeholder {
  color: #a8adb5;
}

.ds-form-input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 146, 83, 0.18);
}

.ds-form-textarea {
  resize: vertical;
  min-height: 11rem;
}

/* ボットよけ。人間には見せない（display:noneだと埋めてくるボットがいるので画面外に出す） */
.ds-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ds-form-consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.75;
  cursor: pointer;
}

.ds-form-consent input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3125rem;
  accent-color: var(--gold);
}

.ds-form-consent .ds-form-req {
  margin-left: 0.5rem;
}

.ds-form-error {
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #a4322a;
  background: #fdf1f1;
  border: 1px solid #f2c7c7;
  border-radius: 0.25rem;
}

.ds-page .ds-form-submit {
  align-self: center;
  width: 100%;
  max-width: 20rem;
}

.ds-page .ds-form-submit:disabled {
  cursor: default;
  opacity: 0.6;
}

.ds-form-note {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #8a8a8a;
  text-align: center;
}

.ds-page .ds-form-note a {
  text-decoration: underline;
}

@media (max-width: 999px) {
  .ds-formpage {
    padding: 2.5rem 1.5rem 4rem;
  }

  .ds-formpage-lead {
    margin-top: 2rem;
    font-size: 0.875rem;
  }

  .ds-form {
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem 1.25rem;
  }

  .ds-form-label {
    font-size: 0.9375rem;
  }

  .ds-form-input {
    padding: 0.75rem 0.875rem;
    /* 16px未満だとiOSがフォーカス時に拡大するので下げない */
    font-size: 1rem;
  }

  .ds-form-consent {
    font-size: 0.875rem;
  }
}

.ds-thanks {
  gap: 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
}

.ds-thanks strong {
  font-weight: 700;
  color: var(--gold);
}

.ds-thanks-note {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: #666;
  background: var(--bg-beige);
  border-radius: 0.25rem;
}