@charset "UTF-8";

:root {
  --dservice1-blue: #0055ff;
  --dservice1-orange: #ff4d00;
  --dservice1-ink: #111;
  --dservice1-muted: #3a3e48;
  --dservice1-surface: #fbfbfb;
  --dservice1-radius: 30px;
  --dservice1-shadow: inset 0 4px 20px 3px rgb(0 0 0 / 11%);
}

.dservice1-page {
  overflow-x: clip;
  color: var(--dservice1-ink);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.dservice1-page main {
  overflow: clip;
}

/* カンプは最背面にFVレイヤーがあり、その上にヘッダーが載っている。
   フローに置くとFVがヘッダーの高さ分だけ下がるので、重ねて置く。
   position: absolute ではなく、body を1セルのGridにして
   header と main を同じセルへ入れる（Gridで重ねる手法）。
   .skip-link と .site-drawer は position: fixed なのでGridアイテムに
   ならず、行は増えない。

   768px以上に限っているのは、767px以下だとFVがSPレイアウトになり、
   コピーが上端24pxから始まってヘッダー（68.8px）と34px重なるため。
   768px以上はFVがPCレイアウトで、上の余白が118.8px以上あるので干渉しない。 */
@media (min-width: 768px) {
  .dservice1-page {
    display: grid;
    /* 列を明示しないと、ヘッダーの width: min(100%, 1920px) の
       max-content 寄与で列が1920pxに膨らみ、1920px未満でヘッダーがずれる */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack";
  }

  .dservice1-page > .site-header,
  .dservice1-page > #main-content {
    grid-area: stack;
  }

  .dservice1-header {
    z-index: 1;
    align-self: start;
  }
}

.dservice1-header {
  /* 上下の1pxラインを重ねるための1セルGrid。position は使わない */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stack";
  width: 100%;
  height: min(15.999vw, 68.796875px);
  color: var(--dservice1-blue);
  /* style.css の .site-header は background: var(--color-brand)（紺）。
     このページのヘッダーはFVに重なるので透明にする。
     767px以下の積み上げ時も、白は下の .dservice1-page が出す。 */
  background: transparent;
}

.dservice1-header::before,
.dservice1-header::after {
  z-index: 1;
  grid-area: stack;
  height: 1px;
  background: rgb(255 255 255 / 30%);
  content: "";
  pointer-events: none;
}

.dservice1-header::before {
  align-self: start;
}
.dservice1-header::after {
  align-self: end;
}

/* ロゴ | ハンバーガー の2カラム。__actions は display: contents なので
   nav（SPでは display: none）とボタンが直接このGridの要素になる。
   縦位置は padding で決め、座標は打たない。

   セレクタを .site-header.dservice1-header（0,3,0）にしているのは、
   style.css の .site-header:not(.site-header--top)（0,3,0）が
   768–1023 で min-height: 88px / width: 168px / 88px を押し込むため。
   同点にして読み込み順で勝たせる。 */
.site-header.dservice1-header .site-header__inner {
  z-index: 1;
  grid-area: stack;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: min(3.023vw, 13px) min(1.628vw, 7px) 0 min(3.953vw, 17px);
  border: 0;
}

/* カンプの上端20.859375pxから inner の padding-top 13px を引いた差分 */
.site-header.dservice1-header .site-header__brand {
  display: block;
  width: min(25.586vw, 110.0215px);
  height: min(6.203vw, 26.671875px);
  margin-top: min(1.828vw, 7.859375px);
}

.dservice1-header .site-header__brand-lockup {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.dservice1-header .site-header__brand-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20.246%;
  height: 100%;
}

.dservice1-header .site-header__brand-wordmark {
  position: absolute;
  top: 18.016%;
  right: 0;
  width: 72.933%;
  height: 63.974%;
  margin: 0;
}

.dservice1-header .site-header__nav {
  display: none;
}

.dservice1-header .site-header__actions {
  display: contents;
}

/* 右端は justify-self: end。position: relative は ::before（縦の区切り線）と
   アイコンの基準としてだけ残す */
.site-header.dservice1-header .site-header__menu-button {
  position: relative;
  justify-self: end;
  display: block;
  width: min(12.093vw, 52px);
  height: min(10.465vw, 45px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--dservice1-blue);
  background: transparent;
}

.dservice1-header .site-header__menu-button::before {
  position: absolute;
  top: max(-3.023vw, -13px);
  left: max(-2.515vw, -10.8125px);
  width: 1px;
  height: min(15.767vw, 67.796875px);
  background: rgb(255 255 255 / 30%);
  content: "";
}

.dservice1-header .site-header__menu-icon {
  position: absolute;
  top: min(4.851vw, 20.859375px);
  left: min(2.558vw, 11px);
  display: block;
  width: min(6.977vw, 30px);
  height: 2px;
  background: currentColor;
}

.dservice1-header .site-header__menu-icon::before,
.dservice1-header .site-header__menu-icon::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  content: "";
}

.dservice1-header .site-header__menu-icon::before {
  top: -10px;
}
.dservice1-header .site-header__menu-icon::after {
  top: 11px;
}

@media (min-width: 1024px) {
  .dservice1-header {
    z-index: 1;
    align-self: start;
    width: min(100%, 1920px);
    height: min(6.927vw, 133px);
    margin-inline: auto;
  }

  /* 参考: Zenn「CSS Grid Layoutの実践的な使い方10選」1. 横並びのメニュー
     ロゴを auto、ナビ側を 1fr の2カラム。ナビ項目は grid-auto-columns: 1fr の均等幅。
     セレクタを .site-header.dservice1-header（0,3,0）にしているのは、
     style.css の .site-header:not(.site-header--top)（0,3,0）が
     1024–1279 で min-height: 104px と width を押し込んでくるため。
     同点にして読み込み順で勝たせる。 */
  .site-header.dservice1-header .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: min(2.083vw, 40px);
    /* カンプは3つとも縦位置が違う（ロゴ y50 / ナビ y62 / ハンバーガー y44）。
       いちばん上のハンバーガー44pxを padding-top の基準にし、
       残り2つは margin-top の差分で下げる。座標は打たない */
    align-items: start;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: min(2.292vw, 44px) min(2.396vw, 46px) 0 min(2.083vw, 40px);
    border: 0;
  }

  .dservice1-header::before {
    display: none;
  }
  .dservice1-header::after {
    top: min(6.891vw, 132.3125px);
    bottom: auto;
  }

  .site-header.dservice1-header .site-header__brand {
    /* カンプ y=50。padding-top 44px との差 */
    margin-top: min(0.313vw, 6px);
    width: min(12.031vw, 231px);
    height: min(2.969vw, 57px);
  }

  .site-header.dservice1-header .site-header__brand-lockup {
    top: min(0.045vw, 0.859375px);
    height: min(2.917vw, 56px);
  }

  /* ナビとハンバーガー。ナビが 1fr、ボタンは中身の幅 */
  .site-header.dservice1-header .site-header__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: min(2.708vw, 52px);
    /* 縦位置は inner の padding-top と各要素の margin-top で決めるので、
       ここで中央寄せしない（するとハンバーガーが 44 → 66 へ落ちる） */
    align-items: start;
    justify-self: end;
    width: 100%;
    height: auto;
  }

  .site-header.dservice1-header .site-header__nav {
    /* カンプのテキスト箱は y=59〜95（行送り36px）。padding-top 44px との差 */
    display: block;
    width: 100%;
    height: auto;
    margin: min(0.781vw, 15px) 0 0;
  }

  /* 6項目を均等幅で横並び。max-width はカンプのナビ幅 */
  .site-header.dservice1-header .site-header__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* style.css の gap: clamp(20px, 2.4vw, 46px) を打ち消す。
       46px × 5 = 230px が余白を使い切ってしまい、1fr に配る分が
       残らず、列が内容幅のままになる */
    column-gap: 0;
    /* 幅は中身に決めさせる。1fr の列は最も広い項目に揃うので、
       fit-content は「最大項目 × 6」になり、どの幅でも均等が保たれる。
       カンプ由来の max-width: 752px を持たせると、1100px以下で
       箱が足りず均等が崩れていた（62/70/62/62/62/84 になる） */
    width: fit-content;
    margin-left: auto;
    height: auto;
    color: var(--dservice1-blue);
    font-family: "Noto Sans", sans-serif;
    /* 1024pxで 0.938vw = 9.6px になるため下限14px。上限はカンプの18px */
    font-size: clamp(14px, 0.938vw, 18px);
    font-weight: 400;
    /* カンプの行送り36px ÷ 文字18px */
    line-height: 2;
  }

  .site-header.dservice1-header .site-header__list li {
    height: auto;
    overflow: visible;
  }

  .site-header.dservice1-header .site-header__link {
    display: grid;
    justify-content: center;
    height: auto;
    padding: 0;
    transform: none;
    white-space: nowrap;
  }

  .site-header.dservice1-header .site-header__menu-button {
    width: min(2.708vw, 52px);
    min-width: 0;
    min-height: 0;
    height: min(2.344vw, 45px);
  }

  .site-header.dservice1-header .site-header__menu-button::before {
    top: max(-2.292vw, -44px);
    left: max(-1.893vw, -36.34375px);
    height: min(6.891vw, 132.3125px);
  }

  /* 3本まとめて指定する。style.css は
     .site-header:not(.site-header--top) .site-header__menu-icon（と疑似要素）に
     width: 38px / top: ±13px を当ててくるので、同じ詳細度(0,3,0)で受ける。
     中央だけ上書きすると上下が38pxのまま残り、ボタンから右へはみ出す */
  .site-header.dservice1-header .site-header__menu-icon,
  .site-header.dservice1-header .site-header__menu-icon::before,
  .site-header.dservice1-header .site-header__menu-icon::after {
    width: min(2.63vw, 50.5px);
    height: 3px;
  }

  .site-header.dservice1-header .site-header__menu-icon {
    top: min(1.061vw, 20.359375px);
    left: 1px;
  }

  .site-header.dservice1-header .site-header__menu-icon::before {
    top: max(-0.938vw, -18px);
  }
  .site-header.dservice1-header .site-header__menu-icon::after {
    top: min(0.938vw, 18px);
  }
}

/* 開いている間は3本線がXになる。素のCSSの
   .site-header__menu-button[aria-expanded=true] .site-header__menu-icon::before（0,3,0）が
   top: 0 で2本を中央へ寄せるが、上の 1024〜 の指定が同じ詳細度で後から読まれるため、
   ±18px のまま45度回転して「〉」の形になっていた。1段濃いセレクタで受け直す */
.site-header.dservice1-header
  .site-header__menu-button[aria-expanded="true"]
  .site-header__menu-icon::before,
.site-header.dservice1-header
  .site-header__menu-button[aria-expanded="true"]
  .site-header__menu-icon::after {
  top: 0;
}

.dservice1-container {
  width: min(73.7vw, 1415px);
  margin-inline: auto;
}

.dservice1-section-label {
  color: var(--dservice1-blue);
  font-family: "Inter", sans-serif;
  font-size: clamp(14px, 1.875vw, 36px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.dservice1-section-label--light {
  color: rgb(255 255 255 / 35%);
  text-align: center;
}

.dservice1-heading {
  display: grid;
  gap: clamp(10px, 1.15vw, 22px);
  text-align: center;
}

.dservice1-heading h2 {
  font-size: clamp(28px, 3.125vw, 60px);
  line-height: 1.35;
}

.dservice1-heading > p:last-child {
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2;
}

/* ==========================================================================
   FV（ファーストビュー） — Figma 367:1478 / PC 1920 x 1160

   ・カンプ1920pxを100%として比例縮小（PC下限 1280px。1024–1279は末尾で逃がす）
   ・横位置は __inner（width: min(100%, 1920px)）に対する % で持つため、
     1920pxで自動的に頭打ちになる（＝ガイドライン4-2 方式B：背景は全幅、内容は中央キャンバス追従）
   ・背景アートとノートPCはFigma内で合成済みのPC/SP別画像
   ・チェック・矢印アイコンは同ノードからの書き出し
     （assets/images/dservice1/。旧版 digital-service1.html 側の素材とは共用しない）
   ========================================================================== */
.dservice1-hero {
  position: relative;
  isolation: isolate;
  /* カンプ1160pxを768pxまで比例縮小する（下限 = 1160 × 768/1920）。
     以下このセクションの clamp 下限はすべて 768px 基準。 */
  min-height: clamp(464px, 60.417vw, 1160px);
  background: #fff;
}

/* PC: Figma 367:1478 / SP: Figma 430:1876 の背景＋ノートPC合成画像 */
.dservice1-hero__art {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.dservice1-hero__art img {
  width: 100%;
  max-width: none; /* reset の max-width:100% を打ち消す */
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dservice1-hero__transition-mark {
  display: none;
}

.dservice1-hero__inner {
  width: min(100%, 1920px);
  min-height: inherit;
  margin-inline: auto;
  padding-block: clamp(118.8px, 15.469vw, 297px) clamp(86px, 11.198vw, 215px); /* カンプ top 297 / bottom 215 */
}

/* position / z-index は持たない。背景アート __art は z-index: -2 なので、
   そもそも通常フローのこの要素より下に描かれる。前面へ出す保険が要らない。 */
.dservice1-hero__copy {
  width: 37.708%; /* カンプ 724 / 1920 */
  margin-left: 12.552%; /* カンプ 241 / 1920 */
}

/* --- バッジ（カンプ: アイコン40px／文字28px・行送り36px／間隔11px） --- */
.dservice1-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4.4px, 0.573vw, 11px);
}

.dservice1-hero__badge {
  display: flex;
  align-items: center;
  gap: clamp(4.4px, 0.573vw, 11px);
  color: var(--dservice1-blue);
  font-size: clamp(14px, 1.458vw, 28px);
  font-weight: 700;
  line-height: 1.286; /* 36 / 28 */
  white-space: nowrap;
}

.dservice1-hero__badge-icon {
  flex: 0 0 auto;
  width: clamp(26.7px, 2.083vw, 40px);
  height: auto;
}

/* --- 見出し（カンプ: 80px／助詞64px／1行目72px・行送り100px・字送り-2px） --- */
.dservice1-hero__title {
  margin-top: clamp(16px, 2.083vw, 40px); /* カンプ 40px */
  color: #000;
  font-size: clamp(32px, 4.167vw, 80px); /* カンプ 80px を基準にする */
  font-weight: 700;
  /* em で持つと計算値（px）が子スパンへ継承されるので、級数が違っても行送りが揃う */
  --dservice1-title-leading: 1.25em; /* カンプ 行送り100px / 80px */
  line-height: var(--dservice1-title-leading);
  letter-spacing: -0.025em; /* カンプ -2px / 80px */
}

/* 1行の中に級数違い（80/72/64px）が混ざると、半行間の差で行ボックスが
   line-height より高くなる。行の高さを実寸で固定してカンプの行送り100pxに揃える */
.dservice1-hero__title-line {
  display: block;
  height: var(--dservice1-title-leading);
  white-space: nowrap; /* カンプの改行位置を固定する */
}

.dservice1-hero__title-md {
  font-size: 0.9em; /* カンプ 72px */
}

.dservice1-hero__title-sm {
  font-size: 0.8em; /* カンプ 64px（助詞だけ級数を落とす） */
}

.dservice1-hero__title-accent {
  color: var(--dservice1-blue);
}

/* --- リード（カンプ: 20px・行送り36px） --- */
.dservice1-hero__lead {
  margin-top: clamp(16px, 2.083vw, 40px); /* カンプ 40px */
  color: #000;
  font-size: clamp(14px, 1.042vw, 20px); /* 本文の下限は14px */
  font-weight: 500;
  line-height: 1.8; /* 36 / 20 */
}

.dservice1-hero__lead-line {
  display: block;
}

/* カンプは2・3行目に約1字分の字下げが入っていて、1行目の「 の食い込みと頭が揃う */
.dservice1-hero__lead-line--indent {
  padding-left: 0.75em;
}

/* --- ボタン（カンプ: 354x60・R30／文字20px・字送り1px／アイコン40px・右11px） --- */
.dservice1-hero__actions {
  display: flex;
  /* カンプは 354 + 16 + 354 = 724 でコピー幅とちょうど同値。
     wrap のままだと端数の丸めで2つ目が折り返すため nowrap で固定する */
  flex-wrap: nowrap;
  gap: clamp(6.4px, 0.833vw, 16px); /* カンプ 16px */
  margin-top: clamp(25.2px, 3.281vw, 63px); /* カンプ 63px */
}

.dservice1-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* ラベルはボタン全体の中央。アイコンは絶対配置で外す */
  flex: 0 0 auto; /* コピー幅より広くなってもボタンは縮めない（ノートPCに重なってよい） */
  width: clamp(236px, 18.438vw, 354px);
  min-height: clamp(48px, 3.125vw, 60px); /* 下限はタップ領域を確保して48px */
  padding-inline: clamp(22px, 2.865vw, 55px);
  border: 1px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em; /* カンプ 1px / 20px */
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.dservice1-button--cta {
  border-color: var(--dservice1-orange);
  background: var(--dservice1-orange);
  color: #fff;
}

.dservice1-button__icon {
  position: absolute;
  top: 50%;
  right: clamp(7.3px, 0.573vw, 11px); /* カンプ 11px */
  width: clamp(26.7px, 2.083vw, 40px);
  height: auto;
  transform: translateY(-50%);
}

/* ==========================================================================
   ISSUE — Figma PC 406:2379 / SP 430:2080
   PC / SPともFigmaから書き出した背景画像を使用する。
   ========================================================================== */
.dservice1-issue {
  position: relative;
  /* 背景画像と接続マークを持つのでz-indexをセクション内で完結させる（ガイドライン7章） */
  isolation: isolate;
  min-height: min(88.802vw, 1705px);
  padding-top: min(8.125vw, 156px);
  padding-bottom: min(4.063vw, 78px);
  overflow: hidden;
  background: #fff url("../images/dservice1/isuue_background-image.jpg") top
    center / min(100vw, 1920px) auto no-repeat;
  color: #fff;
}

/* position / z-index は持たない。接続マーク（絶対配置・z-index: 1）が本文へ
   乗らないようにする保険だったが、全幅で交わらないため効いていなかった
   （マーク下端 28〜82px に対し、コンテナ上端は padding-top ぶんの 45〜156px）。
   余裕がいちばん少ないのは551pxの10.8px。セクションの padding-top を詰めるか
   マークを大きくするときは、ここで重なりを測り直すこと。 */
.dservice1-issue > .dservice1-container {
  width: min(83.281vw, 1599px);
}

.dservice1-issue__transition-mark {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - min(27.448vw, 527px));
  width: min(8.333vw, 160px);
  height: min(4.271vw, 82px);
  overflow: hidden;
}

/* 中の img の基準は、picture を絶対配置にしてもしなくても同じ箱になる
   （マーク自身が inset: 0 の絶対配置）。箱としての役割が無いので畳む。
   SP（〜550）側も同じ扱いにしてある。 */
.dservice1-issue__transition-mark picture {
  display: contents;
}

.dservice1-issue__transition-mark img {
  position: absolute;
  top: max(-4.271vw, -82px);
  display: block;
  width: min(5.152vw, 98.9107px);
  max-width: none;
  height: min(8.562vw, 164.393px);
  mix-blend-mode: screen;
}

.dservice1-issue__transition-mark .dservice1-transition-mark__right {
  right: max(-0.008vw, -0.144px);
  left: auto;
}
.dservice1-issue__transition-mark .dservice1-transition-mark__left {
  left: 0;
}

/* FV画像内の上半分と、ISSUE側の下半分を同じ拡大率で接続する。
   PCカンプの基準は1920×1160、上側406:2266 / 下側406:2374。
   768–1279ではFV画像が横幅ではなく高さ基準のcoverになるため、
   下側VectorもFVの実表示倍率へ合わせる。 */
@media (min-width: 551px) and (max-width: 1023px) {
  .dservice1-issue {
    background-image: url("../images/dservice1/isuue_background-image-tb.jpg");
    background-position: center bottom;
    background-size: cover;
  }

  .dservice1-issue__transition-mark {
    left: calc(50% - 290.7586px); /* 527 × (640 / 1160) */
    width: 88.2759px; /* 160 × (640 / 1160) */
    height: 45.2414px; /* 82 × (640 / 1160) */
  }

  .dservice1-issue__transition-mark img {
    top: -45.2414px;
    width: 54.5714px;
    height: 90.6996px;
  }

  .dservice1-issue__transition-mark .dservice1-transition-mark__right {
    right: -0.0794px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .dservice1-issue__transition-mark {
    left: calc(50% - clamp(317.9655px, 30.8897vw, 395.5603px));
    width: clamp(96.5517px, 9.3793vw, 120px);
    height: clamp(49.4828px, 4.8069vw, 61.5px);
  }

  .dservice1-issue__transition-mark img {
    top: calc(-1 * clamp(49.4828px, 4.8069vw, 61.5px));
    width: clamp(59.6875px, 5.7982vw, 74.183px);
    height: clamp(99.2027px, 9.6382vw, 123.2948px);
  }

  .dservice1-issue__transition-mark .dservice1-transition-mark__right {
    right: calc(-1 * clamp(0.0869px, 0.0084vw, 0.108px));
  }
}

/* 1280px以上は本文量でFVがカンプ比率より伸びないよう、高さを確定する。 */
@media (min-width: 1280px) {
  .dservice1-hero {
    height: clamp(773.3333px, 60.4167vw, 1160px);
    min-height: 0;
    overflow: hidden;
  }

  .dservice1-hero__inner {
    height: 100%;
    min-height: 0;
  }
}

/* 1920pxを超えてもFigmaの1920×1160キャンバスを中央に固定し、
   ISSUE側Vector（160×82px）と同時に拡大を止める。 */
@media (min-width: 1920px) {
  .dservice1-hero__art img {
    position: absolute;
    left: 50%;
    width: 1920px;
    height: 1160px;
    object-fit: fill;
    transform: translateX(-50%);
  }
}

.dservice1-issue .dservice1-section-label {
  color: #568eff;
  font-size: clamp(20px, 1.875vw, 36px);
  line-height: min(2.5vw, 48px);
}

.dservice1-issue__title {
  margin-top: min(2.24vw, 43px);
  font-size: clamp(36px, 3.125vw, 60px);
  line-height: 1.333;
  text-align: center;
}

.dservice1-issue__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: min(23.125vw, 444px);
  margin-top: min(7.917vw, 152px);
}

.dservice1-issue__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-inline: min(3.385vw, 65px);
  text-align: center;
}

.dservice1-issue__item + .dservice1-issue__item {
  border-left: 1px solid #fff;
}
.dservice1-issue__icon {
  display: block;
  width: min(13.281vw, 255px);
  height: min(13.281vw, 255px);
}
.dservice1-issue__icon-pc {
  display: block;
  width: 100%;
  height: 100%;
}
.dservice1-issue__icon-sp {
  display: none;
}
.dservice1-issue__item h3 {
  margin-top: min(3.021vw, 58px);
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.333;
}
/* 日本語の折り返しを文節単位にする。未対応ブラウザでは normal に落ちるだけ */
.dservice1-issue__item p {
  margin-top: min(0.573vw, 11px);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
  word-break: auto-phrase;
}

/* カンプの <br> は1440px以上でしか成立しない。1279px以下では箱が狭く、
   「新しいシステムを入れたのに、デ／ータ移行や／…してい／る。」のように
   1〜2文字の行ができる。この範囲では <br> を無効にして自動折り返しに任せる
   （ガイドライン10章「<br> は意図的な改行のみ」）。 */
@media (max-width: 1279px) {
  .dservice1-issue__item p br {
    display: none;
  }
}
.dservice1-issue__conclusion {
  margin-top: min(7.917vw, 152px);
  font-size: clamp(30px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
.dservice1-issue__resolve {
  margin-top: min(8.75vw, 168px);
  color: #000;
  font-size: clamp(38px, 3.125vw, 60px);
  font-weight: 700;
  line-height: 1.333;
  text-align: center;
}
.dservice1-issue__resolve strong {
  color: var(--dservice1-blue);
}
.dservice1-sp-only {
  display: none;
}
.dservice1-pc-only {
  display: inline;
}

/* ==========================================================================
   2STEP — Figma PC 406:2557 / SP 431:2179
   ========================================================================== */
.dservice1-step {
  overflow: hidden;
  padding-bottom: min(3.49vw, 67px);
  background: #fff;
}

/* 見出し帯。帯そのものは背景で描くので、専用の要素は持たない。
   バッジと見出しは1本のflexに並べ、高さはバッジ（269px）が決める。 */
.dservice1-step__header {
  background-image: linear-gradient(90deg, #fff, #0055ff 46.154%, #fff);
  background-repeat: no-repeat;
  background-position: 0 min(3.542vw, 68px); /* カンプ1920: 帯の上端 68px */
  background-size: 100% min(6.094vw, 117px); /* カンプ1920: 帯の高さ 117px */
  color: #fff;
}
/* 内枠はカードと同じ幅。バッジの左位置はこの枠からの padding で決める */
.dservice1-step__header-inner {
  display: flex;
  align-items: center;
  gap: min(3.021vw, 58px);
  width: min(74.115vw, 1423px);
  margin-inline: auto;
  padding-left: min(4.297vw, 82.5px);
}
/* margin-top は帯の中心へ合わせるための寄せ。flex の中央寄せは margin box が基準なので、
   下げたい量の2倍を margin-top に入れる（バッジは帯より下へはみ出す設計で、中心が元から一致しない）。 */
.dservice1-step__header h2 {
  margin: min(0.208vw, 4px) 0 0;
  font-weight: 700;
  line-height: min(4.167vw, 80px);
  white-space: nowrap;
}
.dservice1-step__title-prefix {
  font-size: min(3.125vw, 60px);
}
.dservice1-step__title-main {
  font-size: min(3.646vw, 70px);
}
.dservice1-step__title-number {
  font-family: "Roboto", sans-serif;
  font-size: min(4.167vw, 80px);
}

/* バッジは画像1枚（2step_fukidasi.png / 444×404）。
   内訳は 円 404×404 ＋ 右へ出るしっぽ 40px。
   箱は円の直径（カンプ1920: 269px）で持ち、しっぽは右へはみ出させる
   （旧実装のしっぽも箱からはみ出していたので、見出しとの間隔は変わらない）。
   444 ÷ 404 = 109.901% */
.dservice1-step__badge {
  flex: 0 0 auto;
  width: min(14.01vw, 269px);
  height: min(14.01vw, 269px);
}
/* picture は箱として要らない。img を直接この箱の子として扱う */
.dservice1-step__badge picture {
  display: contents;
}
.dservice1-step__badge img {
  display: block;
  width: 109.901%;
  max-width: none;
  height: 100%;
}

/* 幅を決めるのはコンテナだけ。カードは 1fr で残りを二等分する。 */
.dservice1-step > .dservice1-container {
  width: min(74.115vw, 1423px);
}
.dservice1-step__list {
  display: grid;
  grid-template-columns: 1fr min(9.115vw, 175px) 1fr;
  margin-top: min(3.49vw, 67px);
  padding: 0;
}

/* カードは縦積みのflex。高さはグリッドのstretchで2枚そろう。 */
.dservice1-step__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: min(2.76vw, 53px) min(3.802vw, 73px) min(2.031vw, 39px);
  border-radius: min(1.563vw, 30px);
  background: rgb(255 255 255 / 20%);
  box-shadow: inset 0 min(0.208vw, 4px) min(1.042vw, 20px) min(0.156vw, 3px)
    rgb(0 0 0 / 10%);
}

/* 番号は角に乗せるバッジなのでフローから外す */
.dservice1-step__number {
  position: absolute;
  z-index: 2;
  top: min(1.563vw, 30px);
  left: min(1.198vw, 23px);
  display: block;
  width: min(3.542vw, 68px);
  height: min(3.542vw, 68px);
}
.dservice1-step__number picture,
.dservice1-step__number img {
  display: block;
  width: 100%;
  height: 100%;
}
.dservice1-step__number b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: min(2.5vw, 48px);
  font-weight: 700;
  line-height: 1;
}

/* 画像の箱はカンプの比率、元画像は別比率なので cover で合わせる */
.dservice1-step__visual {
  display: block;
}
.dservice1-step__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dservice1-step__visual--one {
  width: min(22.708vw, 436px);
  height: min(12.344vw, 237px);
}
.dservice1-step__visual--two {
  width: min(21.771vw, 418px);
  height: min(11.875vw, 228px);
}

.dservice1-step__text {
  width: 100%;
  margin-top: min(1.354vw, 26px);
}
/* 1024-1279 でも読めるよう下限を持たせる（1920 での値は従来どおり） */
.dservice1-step__text h3 {
  color: var(--dservice1-blue);
  font-size: clamp(20px, 1.875vw, 36px);
  line-height: clamp(28px, 2.5vw, 48px);
}
.dservice1-step__text p {
  margin-top: min(1.354vw, 26px);
  color: #000;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: clamp(24px, 1.875vw, 36px);
}

.dservice1-step__arrow {
  display: grid;
  align-self: center;
  width: min(9.115vw, 175px);
  height: min(9.948vw, 191px);
  place-items: center;
}
.dservice1-step__arrow picture,
.dservice1-step__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   SOLUTION — Figma PC 419:2589 / SP 435:2523
   ========================================================================== */
/* 高さはコンテンツが決める。セクションの間隔は padding-block で持つ。 */
.dservice1-solution {
  padding-block: min(4.115vw, 79px) min(11.719vw, 225px);
}
.dservice1-solution > .dservice1-container {
  width: min(73.854vw, 1418px);
} /* 一番広いカード列に合わせる */

.dservice1-solution .dservice1-heading {
  width: min(59.844vw, 1149px);
  margin-inline: auto;
  gap: min(1.146vw, 22px);
}
/* min-height はカンプの文字ボックスが行送りより少し高いぶん。原稿が伸びれば伸びる。 */
.dservice1-solution .dservice1-section-label {
  min-height: min(2.969vw, 57px);
  font-size: min(1.875vw, 36px);
  line-height: min(2.5vw, 48px);
}
.dservice1-solution .dservice1-heading h2 {
  min-height: min(4.219vw, 81px);
  font-size: min(3.125vw, 60px);
  line-height: min(4.167vw, 80px);
}
.dservice1-solution .dservice1-heading > p:last-child {
  min-height: min(1.875vw, 36px);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: min(1.875vw, 36px);
}

.dservice1-solution__consulting {
  width: min(73.698vw, 1415px);
  margin: min(4.792vw, 92px) auto 0;
  padding: min(2.552vw, 49px) 0 min(3.385vw, 65px);
  border-radius: min(1.563vw, 30px);
  background: linear-gradient(
    96.18deg,
    #5796fb 1.0268%,
    #0055ff 50.513%,
    #add7f6 100%
  );
  box-shadow: 0 min(0.208vw, 4px) min(1.042vw, 20px) rgb(0 0 0 / 25%);
  color: #fff;
  text-align: center;
}
.dservice1-solution__consulting h3 {
  max-width: min(59.688vw, 1146px);
  margin-inline: auto;
  font-size: min(2.5vw, 48px);
  line-height: min(4.167vw, 80px);
}
.dservice1-solution__consulting p {
  max-width: min(48.073vw, 923px);
  margin: min(0.417vw, 8px) auto 0;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: min(1.875vw, 36px);
}

/* カードは4列。幅はコンテナが決める。高さは min-height で下限だけ持たせる。 */
.dservice1-solution__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.563vw, 30px);
  margin: min(4.74vw, 91px) 0 0;
  padding: 0;
}
.dservice1-solution__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: min(17.604vw, 338px);
  padding: min(4.896vw, 94px) 0 min(1.719vw, 33px);
  border-radius: min(1.563vw, 30px);
  background: #fff;
  box-shadow: inset 0 min(0.208vw, 4px) min(1.042vw, 20px) min(0.156vw, 3px)
    rgb(0 0 0 / 11%);
  text-align: center;
}
.dservice1-solution__list img {
  display: block;
  max-width: none;
  object-fit: cover;
}
.dservice1-solution__list li:nth-child(1) img {
  width: min(10.417vw, 200px);
  height: min(3.125vw, 60px);
}
.dservice1-solution__list li:nth-child(2) img {
  width: min(13.021vw, 250px);
  height: min(3.333vw, 64px);
}
.dservice1-solution__list li:nth-child(3) img {
  width: min(14.896vw, 286px);
  height: min(2.24vw, 43px);
}
.dservice1-solution__list li:nth-child(4) img {
  width: min(13.958vw, 268px);
  height: min(3.49vw, 67px);
}
/* 文字はカードの下端へ寄せる（ロゴの高さが違っても足並みがそろう） */
.dservice1-solution__list li > div {
  display: flex;
  flex-direction: column;
  gap: min(0.313vw, 6px);
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-inline: min(1.771vw, 34px) min(1.302vw, 25px);
}
.dservice1-solution__list h3 {
  min-height: min(3.75vw, 72px);
  margin: 0;
  color: var(--dservice1-blue);
  font-size: clamp(18px, 1.458vw, 28px);
  line-height: min(1.875vw, 36px);
}
.dservice1-solution__list li:nth-child(2) h3 {
  padding-top: min(1.875vw, 36px);
}
/* 1280pxで「システム／化」「解／消」のように1文字だけ残るのを防ぐ */
.dservice1-solution__list p {
  margin: 0;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: min(1.875vw, 36px);
  word-break: auto-phrase;
}

/* PARTNER — Figma 423:1604（PC） / 435:2521（SP）
   フレーム高さ（1827px）と絶対配置をやめ、通常フローで積む（ガイドライン4-3 / 13章）。
   縦の間隔はカンプ1920pxの実測差を margin として持つ（座標ではなく積み上げ）。
   線入り見出しは 1fr auto 1fr のGridにして、文字数に応じて線が伸縮するようにした。
   旧実装は左右の線幅を849.5px直打ちし、文字数の差を left: -17px / -1.25px で手当てしていた。 */
.dservice1-partner {
  padding-block: min(6.042vw, 116px) min(7.135vw, 137px);
  background: var(--dservice1-surface);
}
.dservice1-partner > .dservice1-container {
  width: min(100%, 1920px);
  padding: 0;
}

/* 見出し: ラベル→h2 が31px、h2→リード が22px（カンプ実測）。共有の gap ではなく margin で持つ */
.dservice1-partner .dservice1-heading {
  gap: 0;
  width: min(59.844vw, 1149px);
  margin-inline: auto;
}
.dservice1-partner .dservice1-section-label {
  margin-bottom: min(1.615vw, 31px);
  line-height: 1.333;
}
.dservice1-partner .dservice1-heading h2 {
  margin-bottom: min(1.146vw, 22px);
}
.dservice1-partner__intro-pc {
  margin: 0;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
}
.dservice1-partner__intro-sp {
  display: none;
}

/* 線入り見出し: 中央の文字は auto、左右の線は 1fr で残りを分け合う */
.dservice1-partner__group-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: min(2.083vw, 40px);
  align-items: center;
  width: 100%;
  margin: min(5.104vw, 98px) 0 0;
  color: var(--dservice1-blue);
  font-family: "Roboto", sans-serif;
  font-size: clamp(16px, 1.458vw, 28px);
  font-weight: 500;
  line-height: 1.286;
  text-align: center;
}
.dservice1-partner__group-title::before,
.dservice1-partner__group-title::after {
  height: 1px;
  background: var(--dservice1-blue);
  content: "";
}
.dservice1-partner__group-title span {
  white-space: nowrap;
}
.dservice1-partner__group-title:last-of-type {
  margin-top: min(4.688vw, 90px);
}

.dservice1-partner__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.667vw, 32px) min(1.875vw, 36px);
  width: min(73.594vw, 1413px);
  margin: min(3.646vw, 70px) auto 0;
  padding: 0;
  list-style: none;
}
.dservice1-partner__list--other {
  grid-template-columns: min(23.281vw, 447px);
  margin-top: min(3.177vw, 61px);
}
.dservice1-partner__list li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: min(10.625vw, 204px);
  padding: min(2.344vw, 45px) min(1.823vw, 35px) min(1.198vw, 23px)
    min(2.083vw, 40px);
  border-radius: min(1.563vw, 30px);
  background: #fff;
  box-shadow: inset 0 min(0.208vw, 4px) min(1.042vw, 20px) min(0.156vw, 3px)
    rgb(0 0 0 / 20%);
}
.dservice1-partner__list--other li {
  min-height: min(10.469vw, 201px);
}
.dservice1-partner__list .dservice1-partner__company-name {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  color: var(--dservice1-blue);
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.5;
  white-space: nowrap;
}
.dservice1-partner__description {
  grid-row: 2;
  grid-column: 1;
  margin: min(0.729vw, 14px) 0 0;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 1.333;
}
/* 矢印は説明文〜余白の領域へ重ねて置き、align-self / justify-self で右下へ寄せる。
   行を専有しないのでカードの高さを押し上げない（カンプでも矢印は説明文と2px重なっている）。
   カンプは本文の右余白が35pxなのに対し矢印だけ右20pxと外側にあるため、右へ15pxぶん戻す。 */
.dservice1-partner__arrow {
  grid-row: 2 / -1;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  display: block;
  width: min(2.083vw, 40px);
  height: min(2.083vw, 40px);
  margin-right: max(-0.781vw, -15px);
}
.dservice1-partner__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ロゴ帯: 旧実装は width: 1924px 固定で、1920pxのとき右へ4pxはみ出していた。
   min(100%, 1920px) + margin-inline: auto にしたので、1920px超の中央寄せ用メディアクエリも不要になった */
.dservice1-partner__logos {
  --dservice1-logo-loop-distance: max(-98.594vw, -1893px);
  width: min(100%, 1920px);
  margin: min(7.083vw, 136px) auto 0;
  padding: min(2.135vw, 41px) 0 min(1.979vw, 38px) min(3.75vw, 72px);
  overflow: hidden;
  background: #fff;
}
.dservice1-partner__logos-track {
  display: flex;
  gap: min(2.135vw, 41px);
  align-items: center;
  width: max-content;
  height: min(3.802vw, 73px);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dservice1-partner-logo-marquee 30s linear infinite;
}
.dservice1-partner__logos li {
  flex: 0 0 auto;
}
.dservice1-partner__logos img {
  display: block;
  max-width: none;
  object-fit: cover;
}
.dservice1-partner__logos li:nth-child(6n + 1) img {
  width: min(13.021vw, 250px);
  height: min(3.333vw, 64px);
}
.dservice1-partner__logos li:nth-child(6n + 2) img {
  width: min(10.417vw, 200px);
  height: min(3.125vw, 60px);
}
.dservice1-partner__logos li:nth-child(6n + 3) img {
  width: min(14.896vw, 286px);
  height: min(2.24vw, 43px);
}
.dservice1-partner__logos li:nth-child(6n + 4) img {
  width: min(13.958vw, 268px);
  height: min(3.49vw, 67px);
}
.dservice1-partner__logos li:nth-child(6n + 5) img {
  width: min(17.969vw, 345px);
  height: min(3.333vw, 64px);
}
.dservice1-partner__logos li:nth-child(6n) img {
  width: min(15.521vw, 298px);
  height: min(3.802vw, 73px);
}

/* CONTACT / FORM — Figma（PC 1920 / SP 430）
   フレーム高さ（PC 2080px / SP 1513px）と絶対配置をやめ、通常フローで積む。
   背景パターンは Grid の同じセルへ ::before を重ねて置く（position を使わない）。
   フォームは入力欄の高さがブラウザのUIで変わるため、固定高さとの相性が最も悪い。 */
.dservice1-contact {
  display: grid;
  grid-template-areas: "stack";
  isolation: isolate;
  width: min(100%, 1920px);
  margin-inline: auto;
  overflow: hidden;
  background: linear-gradient(to bottom, #0055ff, #fff);
}
.dservice1-contact::before {
  z-index: 0;
  grid-area: stack;
  background: url("../images/dservice1/contact-background-pattern-pc.svg")
    center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.4;
  content: "";
  pointer-events: none;
}
.dservice1-contact .dservice1-container {
  z-index: 1;
  grid-area: stack;
  width: 100%;
  padding-inline: 0;
  padding-block: min(12.5vw, 240px) min(16.302vw, 313px);
}

.dservice1-contact > div > h2 {
  width: min(74.948vw, 1439px);
  margin: 0 auto;
  color: #fff;
  font-size: clamp(28px, 3.125vw, 60px);
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

/* カード: 上下100px・左右50pxの余白を padding で持つ。中身が伸びれば高さも伸びる */
.dservice1-contact__card {
  width: min(71.094vw, 1365px);
  margin: min(7.135vw, 137px) auto 0;
  padding: min(5.208vw, 100px) min(2.604vw, 50px);
  border-radius: min(1.563vw, 30px);
  background: #fff;
}
.dservice1-contact__card header {
  width: min(38.333vw, 736px);
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
}
.dservice1-contact__card h3 {
  margin: 0;
  font-size: clamp(28px, 3.125vw, 60px);
  line-height: 1;
}
.dservice1-contact__card header p {
  width: min(26.354vw, 506px);
  margin: min(1.042vw, 20px) auto 0;
  color: var(--dservice1-muted);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 0.729vw, 14px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* フォームは縦のFlex。行間20pxは gap が持つ（旧実装は各項目に top を打っていた） */
.dservice1-form {
  display: flex;
  flex-direction: column;
  gap: min(1.042vw, 20px);
  width: 100%;
  margin: min(1.563vw, 30px) 0 0;
}
/* ラベルは block。Flex にすると「*」の <span> が独立したアイテムになって行が増える */
.dservice1-form > label:not(.dservice1-form__agree) {
  display: block;
  color: var(--dservice1-muted);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.dservice1-form label > span[aria-hidden="true"] {
  color: var(--dservice1-orange);
}
.dservice1-form input:not([type="checkbox"]),
.dservice1-form textarea {
  display: block;
  width: 100%;
  height: clamp(40px, 2.292vw, 44px);
  margin-top: min(0.271vw, 5.2px);
  padding: min(0.521vw, 10px) min(1.042vw, 20px);
  border: 1px solid #808080;
  border-radius: min(0.26vw, 5px);
  background: #fcfcfc;
  color: #808080;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.dservice1-form textarea {
  height: clamp(200px, 15.625vw, 300px);
  min-height: 0;
  padding: min(1.042vw, 20px);
  resize: none;
}
/* 同意行とボタンは gap 20px に 10px 足して 30px 空ける。中央寄せは align-self */
.dservice1-form__agree {
  display: flex;
  gap: min(0.521vw, 10px);
  align-items: center;
  align-self: center;
  width: clamp(210px, 13.021vw, 250px);
  min-width: max-content;
  margin-top: min(0.521vw, 10px);
  color: #222;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 0.729vw, 14px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dservice1-form__agree input {
  flex: 0 0 auto;
  width: min(1.042vw, 20px);
  height: min(1.042vw, 20px);
  margin: 0;
  border: 1px solid #92999c;
  border-radius: min(0.208vw, 4px);
  accent-color: var(--dservice1-orange);
}
/* ボタンの高さはPC1920でもSP430でも40px。比例縮小させると1280pxで27pxまで落ちるため固定する */
.dservice1-form button {
  align-self: center;
  width: clamp(180px, 10.417vw, 200px);
  min-width: max-content;
  height: 40px;
  min-height: 0;
  margin-top: min(0.521vw, 10px);
  padding: min(0.521vw, 10px) min(1.563vw, 30px);
  border: 0;
  border-radius: min(0.26vw, 5px);
  background: var(--dservice1-orange);
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 0.729vw, 14px);
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  transform: translateY(0);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms ease-out;
}

@media (max-width: 1023px) {
  .dservice1-container {
    width: min(90vw, 920px);
  }
}

/* SOLUTION: 1279以下は4列だと1枚が狭すぎて本文が入らない。2列にして文字に下限を持たせる。
   ロゴの寸法は 1280px を基準にした比率へ置き換える。 */
@media (min-width: 551px) and (max-width: 1279px) {
  .dservice1-solution {
    padding-block: clamp(40px, 5vw, 79px) clamp(56px, 8vw, 225px);
  }
  .dservice1-solution > .dservice1-container {
    width: min(90vw, 920px);
  }
  .dservice1-solution .dservice1-heading {
    width: 100%;
    gap: clamp(12px, 1.6vw, 22px);
  }
  .dservice1-solution .dservice1-section-label {
    min-height: 0;
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1.4;
  }
  .dservice1-solution .dservice1-heading h2 {
    min-height: 0;
    font-size: clamp(26px, 3.4vw, 60px);
    line-height: 1.35;
  }
  .dservice1-solution .dservice1-heading > p:last-child {
    min-height: 0;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.8;
  }

  .dservice1-solution__consulting {
    width: 100%;
    margin-top: clamp(32px, 5vw, 92px);
    padding: clamp(28px, 4vw, 49px) clamp(24px, 4vw, 60px);
  }
  .dservice1-solution__consulting h3 {
    max-width: none;
    font-size: clamp(22px, 3vw, 48px);
    line-height: 1.5;
  }
  .dservice1-solution__consulting p {
    max-width: none;
    margin-top: clamp(12px, 1.5vw, 20px);
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.9;
  }

  .dservice1-solution__list {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 30px);
    margin-top: clamp(32px, 5vw, 91px);
  }
  .dservice1-solution__list li {
    min-height: 0;
    padding: clamp(32px, 5vw, 94px) 0 clamp(24px, 3vw, 33px);
  }
  .dservice1-solution__list li:nth-child(1) img {
    width: min(15.625vw, 200px);
    height: min(4.688vw, 60px);
  }
  .dservice1-solution__list li:nth-child(2) img {
    width: min(19.531vw, 250px);
    height: min(5vw, 64px);
  }
  .dservice1-solution__list li:nth-child(3) img {
    width: min(22.344vw, 286px);
    height: min(3.359vw, 43px);
  }
  .dservice1-solution__list li:nth-child(4) img {
    width: min(20.938vw, 268px);
    height: min(5.234vw, 67px);
  }
  .dservice1-solution__list li > div {
    margin-top: clamp(20px, 3vw, 40px);
    padding-inline: clamp(12px, 2vw, 34px);
  }
  .dservice1-solution__list h3 {
    min-height: 0;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.4;
  }
  .dservice1-solution__list li:nth-child(2) h3 {
    padding-top: 0;
  }
  .dservice1-solution__list p {
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.8;
  }
}

/* PARTNER: 1279以下は3列だとカード1枚が300px弱まで細り、社名が入らない。2列にして文字に下限を持たせる。
   旧実装はPCレイアウトをそのまま比例縮小していたため、768pxで本文が7px台になっていた。 */
@media (min-width: 551px) and (max-width: 1279px) {
  .dservice1-partner {
    padding-block: clamp(40px, 6vw, 116px) clamp(48px, 7vw, 137px);
  }
  /* 線入り見出しの線はカンプどおり全幅にする。コンテナを狭めると線まで
     内側に寄ってしまうので、コンテナは全幅のままにして、見出しとカードの側で
     幅を持つ（1280以上・550以下と同じ組み立て）。 */
  .dservice1-partner > .dservice1-container {
    width: 100%;
  }
  .dservice1-partner .dservice1-heading {
    width: min(90vw, 920px);
  }
  .dservice1-partner .dservice1-section-label {
    margin-bottom: clamp(14px, 1.9vw, 31px);
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1.4;
  }
  .dservice1-partner .dservice1-heading h2 {
    margin-bottom: clamp(12px, 1.4vw, 22px);
    font-size: clamp(26px, 3.4vw, 60px);
    line-height: 1.35;
  }
  .dservice1-partner__intro-pc {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.8;
  }

  .dservice1-partner__group-title {
    gap: clamp(16px, 2.6vw, 40px);
    margin-top: clamp(40px, 6vw, 98px);
    font-size: clamp(16px, 1.9vw, 28px);
    line-height: 1.4;
  }
  .dservice1-partner__group-title:last-of-type {
    margin-top: clamp(36px, 5.5vw, 90px);
  }

  .dservice1-partner__list {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
    width: min(90vw, 920px);
    margin-top: clamp(24px, 4vw, 70px);
  }
  .dservice1-partner__list--other {
    grid-template-columns: repeat(2, 1fr);
    margin-top: clamp(20px, 3.5vw, 61px);
  }
  .dservice1-partner__list li {
    min-height: 0;
    padding: clamp(20px, 3vw, 45px) clamp(18px, 2.4vw, 35px)
      clamp(16px, 2vw, 23px) clamp(20px, 2.8vw, 40px);
    border-radius: 30px;
  }
  .dservice1-partner__list--other li {
    min-height: 0;
  }
  .dservice1-partner__list .dservice1-partner__company-name {
    font-size: clamp(15px, 1.7vw, 24px);
    line-height: 1.5;
    white-space: normal;
  }
  .dservice1-partner__description {
    margin-top: clamp(8px, 1.1vw, 14px);
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.8;
  }
  /* この範囲はカードの高さが本文で決まる（min-height: 0）ため、重ねると本文の最終行に被る。
     3行目へ独立して置く。上マージンが本文との最小間隔になり、隣のカードに合わせて
     背が伸びたぶんは align-self: end が吸収して矢印は下端に留まる。 */
  .dservice1-partner__arrow {
    grid-row: 3;
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
    margin: clamp(10px, 1.5vw, 16px) 0 0;
  }

  .dservice1-partner__logos {
    width: 100%;
    margin-top: clamp(40px, 6vw, 136px);
    padding: clamp(20px, 3vw, 41px) 0 clamp(18px, 2.8vw, 38px)
      clamp(20px, 4vw, 72px);
  }
}

/* CONTACT: 旧実装はこの範囲に何も持たず、PCレイアウトを比例縮小するだけだった。
   768pxで入力欄のラベルが6.4px、1280pxでも10.7pxになっていた。clamp で下限を入れる。 */
@media (min-width: 551px) and (max-width: 1279px) {
  .dservice1-contact .dservice1-container {
    padding-block: clamp(60px, 9vw, 240px) clamp(72px, 11vw, 313px);
  }
  .dservice1-contact > div > h2 {
    width: min(90vw, 920px);
    font-size: clamp(24px, 3.4vw, 60px);
    line-height: 1.4;
    white-space: normal;
  }

  .dservice1-contact__card {
    width: min(90vw, 920px);
    margin-top: clamp(32px, 5vw, 137px);
    padding: clamp(32px, 5vw, 100px) clamp(20px, 3.5vw, 50px);
    border-radius: 30px;
  }
  .dservice1-contact__card header {
    width: 100%;
    white-space: normal;
  }
  .dservice1-contact__card h3 {
    font-size: clamp(22px, 3vw, 60px);
    line-height: 1.3;
  }
  .dservice1-contact__card header p {
    width: 100%;
    margin-top: clamp(12px, 1.6vw, 20px);
    font-size: 14px;
  }

  .dservice1-form {
    gap: clamp(14px, 2vw, 20px);
    margin-top: clamp(20px, 3vw, 30px);
  }
  .dservice1-form > label:not(.dservice1-form__agree) {
    font-size: clamp(14px, 1.4vw, 16px);
  }
  .dservice1-form input:not([type="checkbox"]),
  .dservice1-form textarea {
    height: clamp(40px, 3.6vw, 44px);
    margin-top: clamp(4px, 0.5vw, 5.2px);
    padding: clamp(8px, 0.9vw, 10px) clamp(12px, 1.6vw, 20px);
    font-size: clamp(14px, 1.4vw, 16px);
  }
  .dservice1-form textarea {
    height: clamp(180px, 24vw, 300px);
    padding: clamp(12px, 1.6vw, 20px);
  }
  .dservice1-form__agree {
    width: auto;
    margin-top: clamp(6px, 0.8vw, 10px);
    gap: clamp(8px, 0.9vw, 10px);
    font-size: 14px;
  }
  .dservice1-form__agree input {
    width: clamp(18px, 1.6vw, 20px);
    height: clamp(18px, 1.6vw, 20px);
  }
  /* ボタンの高さはPC 1920でもSP 430でも40px。比例縮小させると26pxまで落ちるので40pxで固定する */
  .dservice1-form button {
    width: clamp(180px, 10.417vw, 200px);
    height: 40px;
    margin-top: clamp(6px, 0.8vw, 10px);
    padding-inline: clamp(20px, 2.4vw, 30px);
    font-size: 14px;
  }
}

/* ISSUE: 1023px以下は3列のまま縮むと1枚が213px（551pxでは153px）になり、
   見出しが「二重入力の発／生」と語中で折れる。左右のpaddingを詰めて文字に下限を持たせる。
   1024px以上は1枚284px以上あり、カンプどおりの3列で収まる。 */
@media (min-width: 551px) and (max-width: 1023px) {
  .dservice1-issue {
    padding-top: clamp(56px, 9vw, 156px);
    padding-bottom: clamp(40px, 6vw, 78px);
  }
  .dservice1-issue > .dservice1-container {
    width: min(92vw, 940px);
  }
  .dservice1-issue .dservice1-section-label {
    font-size: clamp(18px, 2.4vw, 36px);
    line-height: 1.4;
  }
  .dservice1-issue__title {
    margin-top: clamp(12px, 1.8vw, 43px);
    font-size: clamp(24px, 3.4vw, 60px);
  }
  .dservice1-issue__list {
    min-height: 0;
    margin-top: clamp(32px, 5vw, 152px);
  }
  .dservice1-issue__item {
    padding-inline: clamp(8px, 1.4vw, 65px);
  }
  .dservice1-issue__icon {
    width: clamp(88px, 14vw, 255px);
    height: clamp(88px, 14vw, 255px);
  }
  .dservice1-issue__item h3 {
    margin-top: clamp(16px, 2.6vw, 58px);
    font-size: clamp(18px, 2.4vw, 36px);
    line-height: 1.4;
  }
  .dservice1-issue__item p {
    margin-top: clamp(8px, 1.2vw, 11px);
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.9;
  }
  .dservice1-issue__conclusion {
    margin-top: clamp(32px, 5vw, 152px);
    font-size: clamp(22px, 3vw, 48px);
    line-height: 1.6;
  }
  .dservice1-issue__resolve {
    margin-top: clamp(40px, 6vw, 168px);
    font-size: clamp(26px, 3.6vw, 60px);
    line-height: 1.4;
  }
}
/* 2STEP: 551-1023 は横並びのまま縮めると本文が 7px まで小さくなって読めない。
   縦積みに切り替え、文字は clamp で下限を持たせる。 */
@media (min-width: 551px) and (max-width: 1023px) {
  .dservice1-step__header {
    background-position: 0 clamp(30px, 4.5vw, 68px);
    background-size: 100% clamp(52px, 8vw, 117px);
  }
  .dservice1-step__header-inner {
    width: min(90vw, 920px);
    gap: clamp(16px, 3vw, 58px);
    padding-left: clamp(16px, 4vw, 82px);
  }
  .dservice1-step__header h2 {
    line-height: clamp(44px, 6vw, 80px);
  }
  .dservice1-step__badge {
    width: clamp(120px, 16vw, 269px);
    height: clamp(120px, 16vw, 269px);
  }
  .dservice1-step__title-prefix {
    font-size: clamp(24px, 3.6vw, 60px);
  }
  .dservice1-step__title-main {
    font-size: clamp(28px, 4.2vw, 70px);
  }
  .dservice1-step__title-number {
    font-size: clamp(32px, 4.8vw, 80px);
  }

  .dservice1-step > .dservice1-container {
    width: min(90vw, 560px);
  }
  .dservice1-step__list {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .dservice1-step__card {
    padding: clamp(24px, 4vw, 53px) clamp(20px, 4vw, 73px)
      clamp(20px, 3vw, 39px);
    border-radius: 30px;
  }
  .dservice1-step__number {
    top: clamp(14px, 2.4vw, 30px);
    left: clamp(10px, 1.8vw, 23px);
    width: clamp(44px, 5.4vw, 68px);
    height: clamp(44px, 5.4vw, 68px);
  }
  .dservice1-step__number b {
    font-size: clamp(26px, 3.8vw, 48px);
  }
  .dservice1-step__visual img {
    height: auto;
  }
  .dservice1-step__visual--one,
  .dservice1-step__visual--two {
    width: 100%;
    height: auto;
  }
  .dservice1-step__text {
    margin-top: clamp(16px, 2.4vw, 26px);
  }
  .dservice1-step__text h3 {
    font-size: clamp(20px, 2.8vw, 36px);
    line-height: 1.4;
  }
  .dservice1-step__text p {
    margin-top: clamp(12px, 1.8vw, 26px);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 2;
  }
  .dservice1-step__arrow {
    width: clamp(80px, 12vw, 117px);
    height: auto;
  }
  .dservice1-step__arrow picture {
    width: clamp(70px, 11vw, 107px);
    height: clamp(80px, 12vw, 117px);
    transform: rotate(90deg);
  }
}

@media (min-width: 551px) and (max-width: 767px) {
  .dservice1-issue__title .dservice1-sp-only {
    display: inline;
  }
}

/* FV: SPレイアウトを767pxまで伸ばす。768pxからPC（画像の切り替えは
   digital-service.html の <source media="(max-width: 767px)"> 側）。
   他セクションのSP境界は 550px のままなので、FVだけ別ブロックに分けている。 */
@media (max-width: 767px) {
  .dservice1-hero {
    width: 100%;
    min-height: min(183.023vw, 787px);
  }
  .dservice1-hero__art {
    width: 100%;
    height: 100%;
  }
  .dservice1-hero__art img {
    object-fit: cover;
  }
  /* 左右のガターは __inner の padding が持つ（ガイドライン4-1「SPは全幅＋ガター」）。
     カンプ430pxの余白21.5px＝5vw。__copy に width を持たせると幅が固定され、
     431px以上でリキッドが止まってしまう。 */
  .dservice1-hero__inner {
    display: block;
    min-height: inherit;
    padding: 0 min(21.5px, 5vw);
  }
  .dservice1-hero__copy {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding-top: min(24px, 5.581vw);
  }
  .dservice1-hero__badges {
    flex-wrap: nowrap;
    gap: min(2.941px, 0.684vw);
  }
  .dservice1-hero__badge {
    gap: min(4.902px, 1.14vw);
    font-size: min(19.606px, 4.56vw);
    line-height: 1.2;
  }
  .dservice1-hero__badge-icon {
    width: min(25.913px, 6.026vw);
  }
  .dservice1-hero__title {
    --dservice1-title-leading: 1.429em;
    margin-top: min(15.26px, 3.549vw);
    font-size: min(41.173px, 9.575vw);
    letter-spacing: -0.0476em;
  }
  .dservice1-hero__title-line {
    height: var(--dservice1-title-leading);
    white-space: nowrap;
  }
  .dservice1-hero__title-md {
    font-size: 1em;
  }
  .dservice1-hero__title-sm {
    font-size: 0.857em;
  }
  .dservice1-hero__lead {
    margin-top: min(287px, 66.744vw);
    font-size: min(14px, 3.256vw);
    line-height: 1.714;
  }
  .dservice1-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: min(12px, 2.791vw);
    margin-top: min(12px, 2.791vw);
  }
  .dservice1-hero__actions > * {
    flex: 0 0 auto;
  }
}

/* FV: 430px以下はSPカンプの比率そのものなので、枠と画像の縦横比が完全に一致する
   （430/787 = 0.5464）。切り取る余地が無いため object-fit を初期値へ戻す。 */
@media (max-width: 430px) {
  .dservice1-hero__art img {
    object-fit: fill;
  }
}

@media (max-width: 550px) {
  /* SPカンプの430pxを基準にした1カラムレイアウトを550pxまで使用する。 */
  .dservice1-header {
    width: 100%;
  }

  .dservice1-container {
    width: 100%;
    padding-inline: 24px;
  }
  .dservice1-partner > .dservice1-container {
    width: 100%;
  }
  /* 背景（ノートPC合成画像）の縦横比ぶんの高さを min-height で確保する。
     旧実装は height 固定で、原稿が伸びると下がはみ出した */
  .dservice1-button {
    width: 100%;
    min-height: min(60px, 13.953vw);
    padding-inline: min(56px, 13.023vw);
    font-size: min(20px, 4.651vw);
  }
  .dservice1-button__icon {
    right: min(10px, 2.326vw);
    width: min(40px, 9.302vw);
  }
  .dservice1-hero__transition-mark {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: min(14.651vw, 63px);
    display: block;
    width: min(11.395vw, 49px);
    height: min(6.279vw, 27px);
    overflow: hidden;
  }
  .dservice1-hero__transition-mark img,
  .dservice1-issue__transition-mark img {
    position: absolute;
    display: block;
    max-width: none;
    mix-blend-mode: screen;
  }
  .dservice1-hero__transition-mark .dservice1-transition-mark__right {
    inset: 0 -0.25% -103.47% 38.33%;
    width: 61.92%;
    height: 203.47%;
  }
  .dservice1-hero__transition-mark .dservice1-transition-mark__left {
    inset: 0 38.08% -103.47% 0;
    width: 61.92%;
    height: 203.47%;
  }
  .dservice1-issue {
    width: 100%;
    min-height: min(424.884vw, 1827px);
    padding-top: min(10.465vw, 45px);
    padding-bottom: 0;
    background: #fff url("../images/dservice1/issue-background-sp.png") top
      center / 100% min(424.884vw, 1827px) no-repeat;
  }
  .dservice1-issue > .dservice1-container {
    width: 100%;
    padding-inline: 0;
  }
  .dservice1-issue .dservice1-section-label {
    color: rgb(255 255 255 / 35%);
    font-size: min(5.581vw, 24px);
    line-height: min(11.163vw, 48px);
  }
  .dservice1-issue__title {
    margin-top: min(2.558vw, 11px);
    font-size: min(8.372vw, 36px);
    line-height: 1.333;
  }
  .dservice1-sp-only {
    display: inline;
  }
  .dservice1-pc-only {
    display: none;
  }
  .dservice1-issue__list {
    grid-template-columns: 1fr;
    gap: min(4.186vw, 18px);
    min-height: 0;
    margin-top: min(6.279vw, 27px);
  }
  .dservice1-issue__item {
    padding: min(2.326vw, 10px) 0;
  }
  .dservice1-issue__item + .dservice1-issue__item {
    border-left: 0;
  }
  .dservice1-issue__icon {
    width: min(44.884vw, 193px);
    height: min(44.884vw, 193px);
  }
  .dservice1-issue__icon-pc {
    display: none;
  }
  .dservice1-issue__icon-sp {
    display: block;
    width: 100%;
    height: 100%;
  }
  .dservice1-issue__icon-sp--layered {
    position: relative;
  }
  .dservice1-issue__icon-sp--layered > img:first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .dservice1-issue__icon-glyph {
    position: absolute;
    max-width: none;
  }
  .dservice1-issue__icon-glyph--person {
    top: min(9.07vw, 39px);
    left: min(6.977vw, 30px);
    width: min(30.465vw, 131px);
    height: min(28.376vw, 122.019px);
  }
  .dservice1-issue__icon-glyph--search {
    top: min(10vw, 43px);
    left: min(10.93vw, 47px);
    width: min(25.581vw, 110px);
    height: min(25.336vw, 108.946px);
  }
  .dservice1-issue__item h3 {
    margin-top: min(2.093vw, 9px);
    font-size: min(6.512vw, 28px);
    line-height: min(11.163vw, 48px);
  }
  .dservice1-issue__item p {
    width: 100%;
    margin-top: 0;
    font-size: min(4.186vw, 18px);
    line-height: min(6.512vw, 28px);
  }
  .dservice1-issue__item p br {
    display: block;
  }
  .dservice1-issue__conclusion {
    margin-top: min(13.488vw, 58px);
    font-size: min(7.442vw, 32px);
    line-height: min(10.233vw, 44px);
    letter-spacing: 0.05em;
  }
  .dservice1-issue__resolve {
    margin-top: min(24.884vw, 107px);
    font-size: min(9.302vw, 40px);
    line-height: min(13.023vw, 56px);
  }
  .dservice1-issue__transition-mark {
    left: min(14.651vw, 63px);
    width: min(11.395vw, 49px);
    height: min(6.512vw, 28px);
  }
  .dservice1-issue__transition-mark picture {
    position: static;
    display: contents;
  }
  .dservice1-issue__transition-mark .dservice1-transition-mark__right {
    inset: -96.43% -0.25% 0.23% 38.33%;
    width: 61.92%;
    height: 196.2%;
  }
  .dservice1-issue__transition-mark .dservice1-transition-mark__left {
    inset: -96.43% 38.08% 0.23% 0;
    width: 61.92%;
    height: 196.2%;
  }
  .dservice1-step {
    width: 100%;
    padding-bottom: min(12.558vw, 54px);
  }

  /* SPはバッジと見出しが重なるので、同じグリッドセルに置いて重ねる。
     高さは中身（見出しの2行）が決めるので指定しない。 */
  .dservice1-step__header {
    display: grid;
    grid-template-areas: "stack";
    align-items: start;
    width: 100%;
    background-position: 0 min(17.674vw, 76px);
    background-size: 100% min(33.023vw, 142px);
    background-image: linear-gradient(90deg, #fff, #0055ff 53.846%, #fff);
  }
  .dservice1-step__header-inner {
    display: contents;
  } /* 内枠はPCだけの役割 */
  /* 旧実装は 152.222px の箱の中に 122.888px の円を 14.667px ずらして置いていた。
     画像1枚になったので、箱を円の実寸にして、そのずれは margin で持つ。 */
  .dservice1-step__badge {
    grid-area: stack;
    justify-self: start;
    margin: min(3.411vw, 14.667px) 0 0 min(12.016vw, 51.667px);
    width: min(28.579vw, 122.888px);
    height: min(28.579vw, 122.888px);
  }
  /* SPの画像（2step-fukidasi-sp.png / 125×125）はしっぽが円の内側に収まっている。
     PC版のように右へはみ出させる必要がないので、箱いっぱいの正方形で置く。 */
  .dservice1-step__badge img {
    width: 100%;
  }

  /* 見出しは2行。1行目は「私たちの」だけで折り返す。 */
  .dservice1-step__header h2 {
    grid-area: stack;
    display: flex;
    flex-wrap: wrap;
    margin: min(17.674vw, 76px) 0 0;
    padding-left: min(4.419vw, 19px);
    line-height: normal;
  }
  .dservice1-step__title-prefix {
    flex: 0 0 100%;
    padding-left: min(39.767vw, 171px);
    font-size: min(8.372vw, 36px);
    line-height: min(18.605vw, 80px);
  }
  /* 2行目は1行目の行送りへ食い込ませる（カンプの2行ロックアップ） */
  .dservice1-step__title-main,
  .dservice1-step__title-number {
    margin-top: max(-10vw, -43px);
  }
  .dservice1-step__title-main {
    font-size: min(11.163vw, 48px);
    line-height: min(27.907vw, 120px);
  }
  .dservice1-step__title-number {
    font-size: min(13.953vw, 60px);
    font-weight: 500;
    line-height: min(27.907vw, 120px);
  }

  .dservice1-step > .dservice1-container {
    width: min(86.047vw, 370px);
    padding-inline: 0;
  }
  .dservice1-step__list {
    grid-template-columns: 1fr;
    margin-top: min(9.302vw, 40px);
  }
  .dservice1-step__card {
    min-height: min(93.488vw, 402px);
    padding: min(7.563vw, 32.52px) 0 min(6.744vw, 29px);
    border-radius: min(6.977vw, 30px);
    box-shadow: inset 0 min(0.93vw, 4px) min(4.651vw, 20px) min(0.698vw, 3px)
      rgb(0 0 0 / 10%);
  }
  .dservice1-step__number {
    top: min(4.186vw, 18px);
    left: min(1.395vw, 6px);
    width: min(9.702vw, 41.717px);
    height: min(9.702vw, 41.717px);
  }
  .dservice1-step__number b {
    inset: auto;
    top: 50%;
    left: min(2.558vw, 11px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(4.884vw, 21px);
    height: min(6.977vw, 30px);
    font-size: min(7.442vw, 32px);
    line-height: min(11.163vw, 48px);
    transform: translateY(-50%);
  }
  .dservice1-step__visual--one {
    width: min(62.133vw, 267.172px);
    height: min(33.858vw, 145.591px);
  }
  .dservice1-step__visual--two {
    width: min(59.643vw, 256.465px);
    height: min(32.526vw, 139.863px);
  }
  .dservice1-step__text {
    margin-top: min(3.721vw, 16px);
    padding-inline: min(8.605vw, 37px) min(3.256vw, 14px);
  }
  .dservice1-step__text h3 {
    min-height: min(17.442vw, 75px);
    font-size: min(6.512vw, 28px);
    line-height: min(8.372vw, 36px);
  }
  .dservice1-step__text p {
    margin-top: 0;
    font-size: min(3.256vw, 14px);
    line-height: min(6.047vw, 26px);
  }
  .dservice1-step__arrow {
    justify-self: center;
    width: min(27.25vw, 117.177px);
    height: min(24.968vw, 107.361px);
  }
  .dservice1-step__arrow picture {
    width: min(24.968vw, 107.361px);
    height: min(27.25vw, 117.177px);
    transform: rotate(90deg);
  }
  .dservice1-heading h2 {
    font-size: 30px;
  }
  .dservice1-heading > p:last-child br {
    display: none;
  }
  .dservice1-solution {
    width: 100%;
    padding-block: 0 min(21.163vw, 91px);
  }
  .dservice1-solution > .dservice1-container {
    width: 100%;
    padding-inline: 0;
  }

  /* SPは見出しが2行になり行送りだけで高さが決まるので、間隔は個別のmarginで持つ */
  .dservice1-solution .dservice1-heading {
    width: 100%;
    gap: 0;
  }
  .dservice1-solution .dservice1-section-label {
    min-height: min(11.163vw, 48px);
    font-size: min(5.581vw, 24px);
    line-height: min(11.163vw, 48px);
  }
  .dservice1-solution .dservice1-heading h2 {
    min-height: 0;
    margin-top: min(7.209vw, 31px);
    font-size: min(9.302vw, 40px);
    line-height: min(13.023vw, 56px);
  }
  .dservice1-solution .dservice1-heading > p:last-child {
    min-height: 0;
    margin-top: min(3.721vw, 16px);
    font-size: min(3.256vw, 14px);
    line-height: min(5.116vw, 22px);
  }
  .dservice1-solution .dservice1-heading > p:last-child br {
    display: block;
  }

  .dservice1-solution__consulting {
    width: min(86.047vw, 370px);
    margin: min(8.372vw, 36px) auto 0;
    padding: min(9.302vw, 40px) 0 min(6.512vw, 28px);
    border-radius: min(6.977vw, 30px);
    background: linear-gradient(
      91.62deg,
      #5796fb 1.0268%,
      #0055ff 50.513%,
      #add7f6 100%
    );
    box-shadow: 0 min(0.93vw, 4px) min(4.651vw, 20px) rgb(0 0 0 / 25%);
  }
  .dservice1-solution__consulting h3 {
    max-width: none;
    font-size: min(8.372vw, 36px);
    line-height: min(10.233vw, 44px);
  }
  .dservice1-solution__consulting p {
    max-width: min(82.791vw, 356px);
    margin-top: min(6.977vw, 30px);
    font-size: min(3.256vw, 14px);
    line-height: min(5.116vw, 22px);
  }
  .dservice1-solution__consulting p br {
    display: block;
  }

  .dservice1-solution__list {
    grid-template-columns: 1fr;
    gap: min(7.442vw, 32px);
    width: min(87.209vw, 375px);
    margin: min(7.674vw, 33px) auto 0;
  }
  .dservice1-solution__list li {
    min-height: min(78.605vw, 338px);
    padding: min(20.465vw, 88px) 0 0;
    border-radius: min(6.977vw, 30px);
    background: rgb(255 255 255 / 20%);
    box-shadow: inset 0 min(0.93vw, 4px) min(4.651vw, 20px) min(0.698vw, 3px)
      rgb(0 0 0 / 10%);
  }
  .dservice1-solution__list li:nth-child(1) img {
    width: min(49.169vw, 211.425px);
    height: min(14.71vw, 63.254px);
  }
  .dservice1-solution__list li:nth-child(2) img {
    width: min(60.536vw, 260.306px);
    height: min(15.5vw, 66.65px);
  }
  .dservice1-solution__list li:nth-child(3) img {
    width: min(69.147vw, 297.334px);
    height: min(10.43vw, 44.849px);
  }
  .dservice1-solution__list li:nth-child(4) img {
    width: min(64.9vw, 279.072px);
    height: min(16.225vw, 69.768px);
  }
  /* SPは下端寄せではなくロゴからの一定距離（カンプが4枚とも39px） */
  .dservice1-solution__list li > div {
    margin-top: min(9.07vw, 39px);
    gap: min(1.395vw, 6px);
    padding-inline: min(3.023vw, 13px) min(3.953vw, 17px);
  }
  .dservice1-solution__list h3 {
    min-height: min(16.744vw, 72px);
    font-size: min(6.512vw, 28px);
    line-height: min(8.372vw, 36px);
  }
  .dservice1-solution__list li:nth-child(2) h3,
  .dservice1-solution__list li:nth-child(3) h3 {
    padding-top: min(8.372vw, 36px);
  }
  .dservice1-solution__list p {
    font-size: min(4.186vw, 18px);
    line-height: min(8.372vw, 36px);
  }
  .dservice1-partner {
    width: 100%;
    padding-block: min(9.767vw, 42px) min(12.093vw, 52px);
  }
  .dservice1-partner > .dservice1-container {
    width: 100%;
    padding: 0;
  }
  .dservice1-partner .dservice1-heading {
    width: 100%;
  }
  .dservice1-partner .dservice1-section-label {
    margin-bottom: min(7.209vw, 31px);
    font-size: min(5.581vw, 24px);
    line-height: 2;
  }
  .dservice1-partner .dservice1-heading h2 {
    margin-bottom: min(5.814vw, 25px);
    font-family: "Noto Sans", sans-serif;
    font-size: min(9.302vw, 40px);
    font-weight: 700;
    line-height: 1.4;
  }
  .dservice1-partner__intro-pc {
    display: none;
  }
  .dservice1-partner__intro-sp {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: min(3.256vw, 14px);
    font-weight: 400;
    line-height: min(5.116vw, 22px);
    text-align: center;
    word-break: break-word;
  }
  .dservice1-partner__intro-sp p {
    margin: 0;
    font: inherit;
    line-height: inherit;
  }
  .dservice1-partner__group-title {
    gap: min(8.023vw, 34.5px);
    margin-top: min(8.605vw, 37px);
    font-size: min(4.651vw, 20px);
    line-height: 1.8;
  }
  .dservice1-partner__group-title:last-of-type {
    margin-top: min(6.744vw, 29px);
  }
  .dservice1-partner__list {
    grid-template-columns: min(83.721vw, 360px);
    gap: min(6.047vw, 26px) 0;
    width: min(83.721vw, 360px);
    margin-top: min(5.581vw, 24px);
  }
  .dservice1-partner__list--other {
    grid-template-columns: min(83.721vw, 360px);
    margin-top: min(6.512vw, 28px);
  }
  .dservice1-partner__list li,
  .dservice1-partner__list--other li {
    min-height: min(46.744vw, 201px);
    padding: min(10.465vw, 45px) min(3.721vw, 16px) min(3.953vw, 17px)
      min(7.442vw, 32px);
    border-radius: min(6.977vw, 30px);
    box-shadow: inset 0 min(0.93vw, 4px) min(4.651vw, 20px) min(0.698vw, 3px)
      rgb(0 0 0 / 20%);
  }
  .dservice1-partner__list .dservice1-partner__company-name {
    font-size: min(4.651vw, 20px);
    line-height: 1.8;
  }
  .dservice1-partner__description {
    margin-top: min(3.256vw, 14px);
    font-size: min(3.721vw, 16px);
    line-height: 1.5;
  }
  .dservice1-partner__arrow {
    width: min(8.348vw, 35.897px);
    height: min(8.348vw, 35.897px);
    margin-right: min(0.465vw, 2px);
  }
  .dservice1-partner__logos {
    --dservice1-logo-loop-distance: -1893px;
    width: 100%;
    margin-top: min(10vw, 43px);
    padding: 41px 0 38px 72px;
  }
  .dservice1-partner__logos-track {
    gap: 41px;
    height: 73px;
  }
  .dservice1-partner__logos li:nth-child(6n + 1) img {
    width: 250px;
    height: 64px;
  }
  .dservice1-partner__logos li:nth-child(6n + 2) img {
    width: 200px;
    height: 60px;
  }
  .dservice1-partner__logos li:nth-child(6n + 3) img {
    width: 286px;
    height: 43px;
  }
  .dservice1-partner__logos li:nth-child(6n + 4) img {
    width: 268px;
    height: 67px;
  }
  .dservice1-partner__logos li:nth-child(6n + 5) img {
    width: 345px;
    height: 64px;
  }
  .dservice1-partner__logos li:nth-child(6n) img {
    width: 298px;
    height: 73px;
  }
  .dservice1-contact {
    width: 100%;
  }
  .dservice1-contact::before {
    display: none;
  }
  .dservice1-contact .dservice1-container {
    padding-block: min(7.442vw, 32px) min(6.512vw, 28px);
  }
  .dservice1-contact > div > h2 {
    width: 100%;
    font-size: min(8.372vw, 36px);
    line-height: min(11.628vw, 50px);
    white-space: normal;
  }
  /* SPは見出しの帯（294px）とフォーム（280px）で左右の余白が違う。
     カードの padding は見出し側の43pxで持ち、フォームだけ280pxに絞って中央へ置く */
  .dservice1-contact__card {
    width: min(88.372vw, 380px);
    margin-top: min(7.442vw, 32px);
    padding: min(11.628vw, 50px) min(10vw, 43px);
    border-radius: min(6.977vw, 30px);
  }
  .dservice1-contact__card header {
    width: 100%;
    white-space: normal;
  }
  .dservice1-contact__card h3 {
    width: min(67.674vw, 291px);
    margin-left: min(0.349vw, 1.5px);
    font-size: min(9.302vw, 40px);
    line-height: 1.2;
    white-space: normal;
  }
  .dservice1-contact__card header p {
    width: 100%;
    margin-top: min(4.651vw, 20px);
    font-size: min(3.256vw, 14px);
    line-height: 1.8;
    white-space: normal;
  }
  .dservice1-form {
    width: min(65.116vw, 280px);
    margin: min(6.977vw, 30px) auto 0;
    gap: min(4.651vw, 20px);
  }
  .dservice1-form > label:not(.dservice1-form__agree) {
    font-size: min(3.256vw, 14px);
  }
  .dservice1-form input:not([type="checkbox"]),
  .dservice1-form textarea {
    height: min(10.233vw, 44px);
    margin-top: min(1.112vw, 4.78px);
    padding: min(2.326vw, 10px) min(4.651vw, 20px);
    border-radius: min(1.163vw, 5px);
    font-size: min(3.721vw, 16px);
  }
  .dservice1-form textarea {
    height: min(69.767vw, 300px);
    padding: min(4.651vw, 20px);
  }
  .dservice1-form__agree {
    width: min(58.14vw, 250px);
    margin-top: min(2.326vw, 10px);
    gap: min(2.326vw, 10px);
    font-size: min(3.256vw, 14px);
  }
  .dservice1-form__agree input {
    width: min(4.651vw, 20px);
    height: min(4.651vw, 20px);
    border-radius: min(0.93vw, 4px);
  }
  .dservice1-form button {
    width: min(46.512vw, 200px);
    height: min(9.302vw, 40px);
    margin-top: min(2.326vw, 10px);
    padding: min(2.326vw, 10px) min(6.977vw, 30px);
    border-radius: min(1.163vw, 5px);
    font-size: min(3.256vw, 14px);
  }
}

@keyframes dservice1-partner-logo-marquee {
  to {
    transform: translate3d(var(--dservice1-logo-loop-distance), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dservice1-partner__logos-track {
    animation: none;
  }
  .dservice1-form button {
    transition: none;
  }
}

/* ホバーはタッチ端末で状態が残らないよう hover-fine 相当で囲う（ガイドライン06） */
@media (hover: hover) and (pointer: fine) {
  .dservice1-button:hover {
    background: #f4f4f4;
  }
  .dservice1-button--cta:hover {
    border-color: #e64500;
    background: #e64500;
  }
  .dservice1-form button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgb(65 30 15 / 22%);
  }
}

.dservice1-form button:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgb(65 30 15 / 22%);
  outline: 2px solid #0055ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dservice1-form button:hover,
  .dservice1-form button:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   ドロワーの配色 — Figma 476:1848（sp_drawer_menu / white）

   DOMはTOP（index.html）の `.site-drawer` をそのまま流用し、色だけ差し替える。
   カンプはSPのみ。PC（768〜）は同じ配色ルール
   （背景=白／ロゴ・主要ナビ・キャッチ=ブランドブルー／下位項目・注記=#666）を
   PCドロワーの構造へ当てはめたもので、カンプは存在しない。
   ========================================================================== */
.dservice1-page .site-drawer {
  color: var(--dservice1-blue);
}

.dservice1-page .site-drawer__panel {
  background: #fff;
}

/* ロゴは青版のSVGに差し替えてあるので、白抜きのfilterを外す */
.dservice1-page .site-drawer__brand img {
  filter: none;
}

/* 閉じる操作はドロワー内の × ではなくヘッダーのハンバーガー（Xに変形）が兼ねる。
   素のCSSは暗いパネル向けに白へ振っているので、白パネルでは見えなくなる */
body.dservice1-page.is-drawer-open .site-header__menu-button {
  color: var(--dservice1-blue);
}

@media (max-width: 767px) {
  /* 主要ナビ（トップページ／会社案内…）はブランドブルー。
     .site-drawer の color 継承で足りるが、button は色を継承しないので明示する */
  .dservice1-page .site-drawer__link {
    color: var(--dservice1-blue);
  }

  /* ＋／− アイコン。素のCSSは暗いパネル向けの #666 */
  .dservice1-page .site-drawer__plus::before,
  .dservice1-page .site-drawer__plus::after {
    background: var(--dservice1-blue);
  }

  /* アコーディオンの中身。素の #a6afbd は白地では薄すぎるので、
     下部リンクと同じ #666 に揃える（白地でコントラスト5.7:1／AA） */
  .dservice1-page .site-drawer__sub-link {
    color: #666;
  }

  .dservice1-page .site-drawer__footer {
    color: #666;
  }

  /* SPでも出るキャッチコピー。素のCSSは白＋#004098 */
  .dservice1-page .site-drawer__visual-kicker,
  .dservice1-page .site-drawer__visual-title {
    color: var(--dservice1-blue);
  }

  .dservice1-page .site-drawer__copyright-pc {
    color: #666;
  }
}

/* レイアウトは style.css の共通側にある（Gridの組み方・上端寄せ・下地の見せ方）。
   ここは配色だけを上書きする。 */
@media (min-width: 768px) {
  .dservice1-page .site-drawer__visual-kicker,
  .dservice1-page .site-drawer__visual-title {
    color: var(--dservice1-blue);
  }

  .dservice1-page .site-drawer__nav-pc-top,
  .dservice1-page .site-drawer__nav-pc-group h2 {
    color: var(--dservice1-blue);
  }
}

/* ==========================================================================
   ドロワーのロゴを、ヘッダーのロゴと同じ位置・同じ形にする

   開閉でロゴが動いていた原因は2つ。
   1. 構成が違う  ヘッダーは「マーク＋ワードマーク」、ドロワーのSPは
      `__brand-mobile`（ワードマークのみ）で、開くとマークが消えていた
   2. 位置の式が違う  ヘッダーは digital-service.css の絶対配置、
      ドロワーは style.css のTOP用指定（SPはフローの padding、768〜は
      ヘッダー高さの中央揃え）で、そもそも別の基準で置かれていた

   ここでは構成と座標の両方を、ヘッダー側の値へ一本化する。
   値は `.dservice1-header .site-header__brand` と同一。
   ヘッダー側を触るときは、この2ブロックを必ず一緒に直すこと。
   ========================================================================== */

/* SPでもマーク＋ワードマークの2枚組にする（ヘッダーと同じ構成） */
@media (max-width: 767px) {
  .dservice1-page .site-drawer__brand-mobile {
    display: none;
  }

  .dservice1-page .site-drawer__brand-pc {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
  }
}

/* 2枚の内訳もヘッダーと同じ比率に */
.dservice1-page .site-drawer__brand-pc img:first-child {
  width: 20.246%;
  flex: none;
}

.dservice1-page .site-drawer__brand-pc img:last-child {
  width: 72.933%;
  flex: none;
  margin-left: 6.82%;
}

/* SPでは絶対配置の基準をパネルに固定する。
   PCのパネルは style.css 側で1920×1080上限・16:9中央配置にするため、
   ここでは上書きしない。 */
@media (max-width: 767px) {
  .dservice1-page .site-drawer__panel {
    position: relative;
  }
}

.dservice1-page .site-drawer__top {
  position: static;
}

/* 〜1023: ヘッダーの基本値と同一 */
.dservice1-page .site-drawer__brand {
  position: absolute;
  z-index: 2;
  top: min(4.851vw, 20.859375px);
  left: min(3.953vw, 17px);
  width: min(25.586vw, 110.0215px);
  height: min(6.203vw, 26.671875px);
  transform: none;
}

/* 1024〜: ヘッダーの1024〜と同一 */
@media (min-width: 1024px) {
  .dservice1-page .site-drawer__brand {
    top: min(2.604cqw, 50px);
    left: min(2.083cqw, 40px);
    width: min(12.031cqw, 231px);
    height: min(2.969cqw, 57px);
  }
}

/* 768–1023: ヘッダー側が幅を 110px 系へ巻き戻す範囲に追随する */
@media (min-width: 768px) and (max-width: 1023px) {
  .dservice1-page .site-drawer__brand {
    width: min(25.586cqw, 110.0215px);
  }
}