.svg_motion_01 {
  position: absolute;
  left: -120px;
  top: 180px;
}
.svg_motion_02 {
  position: absolute;
  left: -120px;
  top: -170px;
}
.svg_motion_03 {
  position: absolute;
  right: -180px;
  top: 0;
}
.js-connect-4 {
  position: absolute;
  left: -120px;
  top: 90px;
}
.js-connect-y {
  position: absolute;
  right: -20px;
  top: 300px;
}
.js-connect-p {
  position: absolute;
  left: -60px;
  top: 170px;
}
.js-connect-4.right {
  left: 650px;
}
.js-connect-y.left {
  left: -320px;
}
.js-connect-r4 {
  position: absolute;
  right: -120px;
  top: 300px;
}
.js-connect-y5 {
  position: absolute;
  left: -320px;
  top: -450px;
}
.js-connect-p3 {
  position: absolute;
  right: -320px;
  top: 450px;
}
.js-connect-y4 {
  position: absolute;
  right: -320px;
  top: 250px;
}
.js-connect-p3b {
  position: absolute;
  left: -280px;
  bottom: -70px;
}
.js-connect-y5.event-y5 {
  top: 1850px;
}
.js-connect-g4c {
  position: absolute;
  right: -320px;
  top: -50px;
}

.ds25-connect-motion {
  --line-main: #f2d33b;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 90px;

  width: min(100%, 500px);
  aspect-ratio: 500 / 500;
}

.ds25-connect-motion__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.connect-line-outline,
.connect-line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.connect-line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.connect-line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.connect-icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.connect-icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 配置例 */
.connect-icon--01 {
  left: 115px;
  bottom: 30px;
}

.connect-icon--02 {
  left: 230px;
  top: 25px;
}

.connect-icon--03 {
  right: 55px;
  top: 245px;
}
.ds25-connect-motion.is-animated .connect-line-set--01 .connect-line-outline,
.ds25-connect-motion.is-animated .connect-line-set--01 .connect-line-main {
  animation: connectLineDraw 0.4s ease-out forwards;
}

.ds25-connect-motion.is-animated .connect-line-set--02 .connect-line-outline,
.ds25-connect-motion.is-animated .connect-line-set--02 .connect-line-main {
  animation: connectLineDraw 0.4s ease-out 0.75s forwards;
}

@keyframes connectLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.ds25-connect-2 {
  --ds25-connect-main: #ee85a5;
  --ds25-connect-outline: #ffffff;
  --ds25-connect-main-width: 6;
  --ds25-connect-outline-width: 10;
  --ds25-connect-icon-size: 92px;

  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
}

/* 線 */
.ds25-connect-2__line {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-2__line-outline,
.ds25-connect-2__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 初期状態では線を隠す */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-2__line-outline {
  stroke: var(--ds25-connect-outline);
  stroke-width: var(--ds25-connect-outline-width);
}

.ds25-connect-2__line-main {
  stroke: var(--ds25-connect-main);
  stroke-width: var(--ds25-connect-main-width);
}

/* アイコン */
.ds25-connect-2__icon {
  position: absolute;
  z-index: 2;
  width: var(--ds25-connect-icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-2__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下側アイコン */
.ds25-connect-2__icon--circle {
  left: 169px;
  top: 360px;
}

/* 上側アイコン */
.ds25-connect-2__icon--db {
  left: 291px;
  top: 80px;
}

/* アニメーション開始 */
.ds25-connect-2.is-animated .ds25-connect-2__line-outline,
.ds25-connect-2.is-animated .ds25-connect-2__line-main {
  animation: ds25ConnectLineDraw 0.5s ease-out forwards;
}

@keyframes ds25ConnectLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 接続後に上側アイコンを軽く反応させる */


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-2__line-outline,
  .ds25-connect-2__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-2.is-animated .ds25-connect-2__line-outline,
  .ds25-connect-2.is-animated .ds25-connect-2__line-main,
  .ds25-connect-2.is-animated .ds25-connect-2__icon--db {
    animation: none;
  }
}

.ds25-connect-r {
  width: 360px;
  height: 430px;
}

/* アイコン */
.ds25-connect-r__icon {
  position: absolute;
  z-index: 2;
  width: 88.542px;
  height: 88.569px;
}

.ds25-connect-r__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 上側アイコン */
.ds25-connect-r__icon--circle {
  left: 0;
  top: 0;
}

/* 下側アイコン */
.ds25-connect-r__icon--sync {
  left: 244px;
  top: 330px;
}

/* 線 */
.ds25-connect-r__line {
  position: absolute;
  z-index: 1;
  left: 40px;
  top: 36px;
  width: 248.635px;
  height: 338.645px;

  /* 初期状態：線を非表示 */
  clip-path: inset(0 0 100% 0);
}

.ds25-connect-r__line img {
  display: block;
  width: 100%;
  height: auto;
}

/* アニメーション開始 */
.ds25-connect-r.is-animated .ds25-connect-r__line {
  animation: ds25ConnectRLine 0.5s ease-out forwards;
}

@keyframes ds25ConnectRLine {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.ds25-connect-4 {
  --line-main: #26b39a;
  --line-outline: #ffffff;
  --line-main-width: 7;
  --line-outline-width: 12;
  --icon-size: 74px;

  width: min(100%, 520px);
  aspect-ratio: 520 / 260;
}

/* 線 */
.ds25-connect-4__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.connect-line-outline,
.connect-line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.connect-line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.connect-line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-4__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-4__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 配置 */
.ds25-connect-4__icon--01 {
  left: 0px;
  top: 70px;
}

.ds25-connect-4__icon--02 {
  right: 32px;
  top: 46px;
}

.ds25-connect-4__icon--03 {
  right: 120px;
  top: 240px;
}

.ds25-connect-4__icon--04 {
  right: -20px;
  top: 420px;
}

/* 線の描画アニメーション */
.ds25-connect-4.is-animated .connect-line-set--01 .connect-line-outline,
.ds25-connect-4.is-animated .connect-line-set--01 .connect-line-main {
  animation: ds25DrawLine 0.5s ease-out forwards;
}

.ds25-connect-4.is-animated .connect-line-set--02 .connect-line-outline,
.ds25-connect-4.is-animated .connect-line-set--02 .connect-line-main {
  animation: ds25DrawLine 0.3s ease-out 0.8s forwards;
}

.ds25-connect-4.is-animated .connect-line-set--03 .connect-line-outline,
.ds25-connect-4.is-animated .connect-line-set--03 .connect-line-main {
  animation: ds25DrawLine 0.3s ease-out 1.35s forwards;
}

@keyframes ds25DrawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.ds25-connect-y {
  --line-main: #f3d445;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 87px;

  width: min(100%, 538px);
  aspect-ratio: 538 / 412;
}

/* 線 */
.ds25-connect-y__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-y__line-outline,
.ds25-connect-y__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 初期状態：線を隠す */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-y__line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.ds25-connect-y__line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-y__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-y__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-y__icon--db {
  left: 90px;
  top: 0;
}

.ds25-connect-y__icon--server {
  left: 206px;
  top: 455px;
}

.ds25-connect-y__icon--graph {
  left: 435px;
  top: 120px;
}

.ds25-connect-y__icon--mail {
  left: 680px;
  top: 290px;
}

/* 線を順番に描画 */
.ds25-connect-y.is-animated .ds25-connect-y__line-set--01 .ds25-connect-y__line-outline,
.ds25-connect-y.is-animated .ds25-connect-y__line-set--01 .ds25-connect-y__line-main {
  animation: ds25ConnectYDraw 0.5s ease-out forwards;
}

.ds25-connect-y.is-animated .ds25-connect-y__line-set--02 .ds25-connect-y__line-outline,
.ds25-connect-y.is-animated .ds25-connect-y__line-set--02 .ds25-connect-y__line-main {
  animation: ds25ConnectYDraw 0.3s ease-out 0.85s forwards;
}

.ds25-connect-y.is-animated .ds25-connect-y__line-set--03 .ds25-connect-y__line-outline,
.ds25-connect-y.is-animated .ds25-connect-y__line-set--03 .ds25-connect-y__line-main {
  animation: ds25ConnectYDraw 0.3s ease-out 1.45s forwards;
}

@keyframes ds25ConnectYDraw {
  to {
    stroke-dashoffset: 0;
  }
}


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-y__line-outline,
  .ds25-connect-y__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-y.is-animated .ds25-connect-y__line-outline,
  .ds25-connect-y.is-animated .ds25-connect-y__line-main,
  .ds25-connect-y.is-animated .ds25-connect-y__icon {
    animation: none !important;
  }
}

.ds25-connect-p {
  --line-main: #fa869c;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 87px;

  width: min(100%, 404px);
  aspect-ratio: 404 / 356;
}

/* 線 */
.ds25-connect-p__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-p__line-outline,
.ds25-connect-p__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 初期状態：線を隠す */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-p__line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.ds25-connect-p__line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-p__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-p__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-p__icon--db {
  left: 0;
  top: 193px;
}

.ds25-connect-p__icon--cloud {
  left: 295px;
  top: 0;
}

.ds25-connect-p__icon--mail {
  left: 317px;
  top: 269px;
}

/* 線を順番に描画 */
.ds25-connect-p.is-animated .ds25-connect-p__line-set--01 .ds25-connect-p__line-outline,
.ds25-connect-p.is-animated .ds25-connect-p__line-set--01 .ds25-connect-p__line-main {
  animation: ds25ConnectPDraw 0.5s ease-out forwards;
}

.ds25-connect-p.is-animated .ds25-connect-p__line-set--02 .ds25-connect-p__line-outline,
.ds25-connect-p.is-animated .ds25-connect-p__line-set--02 .ds25-connect-p__line-main {
  animation: ds25ConnectPDraw 0.3s ease-out 0.85s forwards;
}

@keyframes ds25ConnectPDraw {
  to {
    stroke-dashoffset: 0;
  }
}


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-p__line-outline,
  .ds25-connect-p__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-p.is-animated .ds25-connect-p__line-outline,
  .ds25-connect-p.is-animated .ds25-connect-p__line-main,
  .ds25-connect-p.is-animated .ds25-connect-p__icon {
    animation: none !important;
  }
}


.ds25-connect-r4 {
  --line-main: #ea6153;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 87px;

  width: min(100%, 447px);
  aspect-ratio: 447 / 364;
}

/* 線 */
.ds25-connect-r4__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-r4__line-outline,
.ds25-connect-r4__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 初期状態：線を隠す */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-r4__line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.ds25-connect-r4__line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-r4__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-r4__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-r4__icon--db {
  left: 0;
  top: 0;
}

.ds25-connect-r4__icon--graph {
  left: 160px;
  top: 115px;
}

.ds25-connect-r4__icon--sync {
  left: 306px;
  top: 44px;
}

.ds25-connect-r4__icon--cloud {
  left: 361px;
  top: 277px;
}

/* 線を順番に描画 */
.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--01 .ds25-connect-r4__line-outline,
.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--01 .ds25-connect-r4__line-main {
  animation: ds25ConnectR4Draw 0.4s ease-out forwards;
}

.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--02 .ds25-connect-r4__line-outline,
.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--02 .ds25-connect-r4__line-main {
  animation: ds25ConnectR4Draw 0.3s ease-out 0.7s forwards;
}

.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--03 .ds25-connect-r4__line-outline,
.ds25-connect-r4.is-animated .ds25-connect-r4__line-set--03 .ds25-connect-r4__line-main {
  animation: ds25ConnectR4Draw 0.4s ease-out 1.3s forwards;
}

@keyframes ds25ConnectR4Draw {
  to {
    stroke-dashoffset: 0;
  }
}


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-r4__line-outline,
  .ds25-connect-r4__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-r4.is-animated .ds25-connect-r4__line-outline,
  .ds25-connect-r4.is-animated .ds25-connect-r4__line-main,
  .ds25-connect-r4.is-animated .ds25-connect-r4__icon {
    animation: none !important;
  }
}

.ds25-connect-y5 {
  --line-main: #f3d445;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 87px;

  width: min(100%, 334.514px);
  aspect-ratio: 334.514 / 1175.504;
}

/* 線 */
.ds25-connect-y5__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-y5__line-outline,
.ds25-connect-y5__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-y5__line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.ds25-connect-y5__line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-y5__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-y5__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-y5__icon--circle {
  left: 93px;
  top: 1px;
}

.ds25-connect-y5__icon--db {
  left: 3px;
  top: 290px;
}

.ds25-connect-y5__icon--server {
  left: 189px;
  top: 192px;
}

.ds25-connect-y5__icon--sync {
  left: 133px;
  top: 858px;
}

.ds25-connect-y5__icon--mail {
  left: 247px;
  top: 1089px;
}

/* 線を順番に描画 */
.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--01 .ds25-connect-y5__line-outline,
.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--01 .ds25-connect-y5__line-main {
  animation: ds25ConnectY5Draw 0.5s ease-out forwards;
}

.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--02 .ds25-connect-y5__line-outline,
.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--02 .ds25-connect-y5__line-main {
  animation: ds25ConnectY5Draw 0.3s ease-out 0.65s forwards;
}

.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--03 .ds25-connect-y5__line-outline,
.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--03 .ds25-connect-y5__line-main {
  animation: ds25ConnectY5Draw 0.7s ease-out 1.2s forwards;
}

.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--04 .ds25-connect-y5__line-outline,
.ds25-connect-y5.is-animated .ds25-connect-y5__line-set--04 .ds25-connect-y5__line-main {
  animation: ds25ConnectY5Draw 0.5s ease-out 2.1s forwards;
}

@keyframes ds25ConnectY5Draw {
  to {
    stroke-dashoffset: 0;
  }
}


/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-y5__line-outline,
  .ds25-connect-y5__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-y5.is-animated .ds25-connect-y5__line-outline,
  .ds25-connect-y5.is-animated .ds25-connect-y5__line-main,
  .ds25-connect-y5.is-animated .ds25-connect-y5__icon {
    animation: none !important;
  }
}

.ds25-connect-p3 {
  width: min(100%, 297.232px);
  aspect-ratio: 297.232 / 834.984;
}

/* 線 */
.ds25-connect-p3__line {
  position: absolute;
  z-index: 1;

  /*
    line_p_03.svg の配置
    完成形.svg基準
  */
  left: 41px;
  top: 40px;
  width: 219px;

  overflow: hidden;
  clip-path: inset(0 0 100% 0);
}

.ds25-connect-p3__line img {
  display: block;
  width: 100%;
  height: auto;
}

/* アイコン共通 */
.ds25-connect-p3__icon {
  position: absolute;
  z-index: 2;
  width: 87px;
  aspect-ratio: 1 / 1;
}

.ds25-connect-p3__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-p3__icon--db {
  left: 106px;
  top: 0;
}

.ds25-connect-p3__icon--circle {
  left: 209px;
  top: 397px;
}

.ds25-connect-p3__icon--cloud {
  left: 0;
  top: 748px;
}

/* アニメーション開始 */
.ds25-connect-p3.is-animated .ds25-connect-p3__line {
  animation: ds25ConnectP3Line 0.8s ease-out forwards;
}

@keyframes ds25ConnectP3Line {
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-p3__line {
    clip-path: inset(0 0 0 0);
  }

  .ds25-connect-p3.is-animated .ds25-connect-p3__line,
  .ds25-connect-p3.is-animated .ds25-connect-p3__icon {
    animation: none !important;
  }
}
.ds25-connect-y4 {
  --line-main: #f3d445;
  --line-outline: #ffffff;
  --line-main-width: 6;
  --line-outline-width: 10;
  --icon-size: 87px;

  width: min(100%, 278.614px);
  aspect-ratio: 278.614 / 659.512;
}

/* 線 */
.ds25-connect-y4__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ds25-connect-y4__line-outline,
.ds25-connect-y4__line-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 初期状態：線を隠す */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ds25-connect-y4__line-outline {
  stroke: var(--line-outline);
  stroke-width: var(--line-outline-width);
}

.ds25-connect-y4__line-main {
  stroke: var(--line-main);
  stroke-width: var(--line-main-width);
}

/* アイコン */
.ds25-connect-y4__icon {
  position: absolute;
  z-index: 2;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
}

.ds25-connect-y4__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-y4__icon--db {
  left: 94px;
  top: 0;
}

.ds25-connect-y4__icon--circle {
  left: 0;
  top: 210px;
}

.ds25-connect-y4__icon--sync {
  left: 192px;
  top: 294px;
}

.ds25-connect-y4__icon--mail {
  left: 33px;
  top: 572px;
}

/* 線を順番に描画 */
.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--01 .ds25-connect-y4__line-outline,
.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--01 .ds25-connect-y4__line-main {
  animation: ds25ConnectY4Draw 0.5s ease-out forwards;
}

.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--02 .ds25-connect-y4__line-outline,
.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--02 .ds25-connect-y4__line-main {
  animation: ds25ConnectY4Draw 0.4s ease-out 0.65s forwards;
}

.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--03 .ds25-connect-y4__line-outline,
.ds25-connect-y4.is-animated .ds25-connect-y4__line-set--03 .ds25-connect-y4__line-main {
  animation: ds25ConnectY4Draw 0.6s ease-out 1.25s forwards;
}

@keyframes ds25ConnectY4Draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-y4__line-outline,
  .ds25-connect-y4__line-main {
    stroke-dashoffset: 0;
  }

  .ds25-connect-y4.is-animated .ds25-connect-y4__line-outline,
  .ds25-connect-y4.is-animated .ds25-connect-y4__line-main,
  .ds25-connect-y4.is-animated .ds25-connect-y4__icon {
    animation: none !important;
  }
}
.ds25-connect-p3b {
  width: min(100%, 297px);
  aspect-ratio: 297 / 835;
}

/* 線 */
.ds25-connect-p3b__line {
  position: absolute;
  z-index: 1;
  left: 40px;
  top: 40px;
  width: 218px;

  overflow: hidden;
  clip-path: inset(0 0 100% 0);
}

.ds25-connect-p3b__line img {
  display: block;
  width: 100%;
  height: auto;
}

/* アイコン共通 */
.ds25-connect-p3b__icon {
  position: absolute;
  z-index: 2;
  width: 87px;
  aspect-ratio: 1 / 1;
}

.ds25-connect-p3b__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置 */
.ds25-connect-p3b__icon--db {
  left: 106px;
  top: 0;
}

.ds25-connect-p3b__icon--circle {
  left: 10px;
  top: 397px;
}

.ds25-connect-p3b__icon--cloud {
  left: 220px;
  top: 748px;
}

/* アニメーション開始 */
.ds25-connect-p3b.is-animated .ds25-connect-p3b__line {
  animation: ds25ConnectP3bLine 0.8s ease-out forwards;
}

@keyframes ds25ConnectP3bLine {
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* モーション抑制環境 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-p3b__line {
    clip-path: inset(0 0 0 0);
  }

  .ds25-connect-p3b.is-animated .ds25-connect-p3b__line,
  .ds25-connect-p3b.is-animated .ds25-connect-p3b__icon {
    animation: none !important;
  }
}

.ds25-connect-g4c {
  width: min(100%, 420px);
  aspect-ratio: 420 / 1420;
}

/* icon */
.ds25-connect-g4c__icon {
  position: absolute;
  z-index: 2;
  width: 87px;
  aspect-ratio: 1 / 1;
}

.ds25-connect-g4c__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 完成形.svg基準の配置：必要に応じて微調整 */
.ds25-connect-g4c__icon--circle {
  left: 40px;
  top: 0;
}

.ds25-connect-g4c__icon--db {
  left: 240px;
  top: 355px;
}

.ds25-connect-g4c__icon--sync {
  left: 160px;
  top: 700px;
}

.ds25-connect-g4c__icon--mail {
  left: 212px;
  bottom: 0px;
}

/* line */
.ds25-connect-g4c__line {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ds25-connect-g4c__line img {
  display: block;
  width: 100%;
  height: auto;
}

/* line 01：Circle → DB */
.ds25-connect-g4c__line--01 {
  left: 82px;
  top: 43px;
  width: 210px;
  clip-path: inset(0 100% 0 0);
}

/* line 02：DB → Sync */
.ds25-connect-g4c__line--02 {
  left: 73px;
  top: 395px;
  width: 345px;
  clip-path: inset(0 0 100% 0);
}

/* line 03：Sync → Mail */
.ds25-connect-g4c__line--03 {
  left: 196px;
  top: 740px;
  width: 65px;
  clip-path: inset(0 100% 0 0);
}

/* animation */
.ds25-connect-g4c.is-animated .ds25-connect-g4c__line--01 {
  animation: ds25ConnectG4cLineX 0.5s ease-out forwards;
}

.ds25-connect-g4c.is-animated .ds25-connect-g4c__line--02 {
  animation: ds25ConnectG4cLineY 0.3s ease-out 0.65s forwards;
}

.ds25-connect-g4c.is-animated .ds25-connect-g4c__line--03 {
  animation: ds25ConnectG4cLineX 0.3s ease-out 1.25s forwards;
}

@keyframes ds25ConnectG4cLineX {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ds25ConnectG4cLineY {
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* モーション抑制 */
@media (prefers-reduced-motion: reduce) {
  .ds25-connect-g4c__line {
    clip-path: inset(0 0 0 0);
  }

  .ds25-connect-g4c.is-animated .ds25-connect-g4c__line,
  .ds25-connect-g4c.is-animated .ds25-connect-g4c__icon {
    animation: none !important;
  }
}