@media screen and (min-width: 769px) {

  /* ============================================================
   8. セクション4: 制作の流れ
   ============================================================ */
  .sec-4 {
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    height: 1270px;
    margin: 0 auto;
    /* セクション3にてpadding-bottomで背景ごと一体化させたためマージン不要 */
    margin-top: 0;
    background: #FFFFFF; /* sec3との隙間にbody背景が見えないよう白を設定 */
    z-index: 1;
  }

  .sec-4__inner {
    position: absolute;
    width: 1920px;
    height: 1270px;
    top: 0;
    left: calc(50% - 960px);
    pointer-events: auto;
    /* 1920pxの横幅と同じベースでオーバーフローを制御 */
    overflow: hidden;
  }

  .sec-4__bg {
    position: absolute;
    width: 1920px;
    height: 1270px;
    left: 0;
    top: 0;
    background: url('../images/sec4/sec4-bg.png') no-repeat center center / contain;
    z-index: 1;
  }

  /* --- 流れるポートフォリオ背景（PC版） --- */
  .sec-4__portfolio-slider {
    position: absolute;
    width: 1920px;
    height: 540px; /* 2段分の高さ */
    left: 0;
    top: 730px; /* 763pxから少し上に調整 */
    z-index: 1;
    pointer-events: none;
    transform: rotate(-1deg) scale(1.02); /* もう一段階左に傾ける */
  }

  /* 上段：左へ流れる (pf3.png) */
  .sec-4__pf3 {
    position: absolute;
    width: 100%;
    height: 250px;
    left: 0;
    top: 0;
    background: url("../images/sec4/pf3.png") 0 0 / auto 100% repeat-x;
    animation: scrollLeft-pf3 50s linear infinite;
    opacity: 0.95;
  }

  /* 下段：右へ流れる (pf4.png) */
  .sec-4__pf4 {
    position: absolute;
    width: 100%;
    height: 250px;
    left: 0;
    top: 270px;
    background: url("../images/sec4/pf4.png") 0 0 / auto 100% repeat-x;
    animation: scrollRight-pf4 55s linear infinite;
    opacity: 0.95;
  }

  @keyframes scrollLeft-pf3 {
    0% { background-position-x: 0; }
    100% { background-position-x: -4077.5px; }
  }

  @keyframes scrollRight-pf4 {
    0% { background-position-x: 0; }
    100% { background-position-x: 4256.9px; }
  }

  .sec-4__text-1 {
    position: absolute;
    width: 100px;
    height: 30px;
    left: 909.72px;
    /* Figma指定値 */
    top: 33px;
    /* 4558 - 4525（セクション開始位置） */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    color: #FFFFFF;
    z-index: 2;
  }

  .sec-4__group-66 {
    position: absolute;
    width: 465px;
    height: 109px;
    left: calc(50% - 465px/2 - 0.5px);
    top: 131px;
    /* 4656 - 4525 */
    background: url('../images/sec4/グループ 66 1.png') no-repeat center center / contain;
    z-index: 2;
  }

  .sec-4__rect-29 {
    position: absolute;
    width: 1200px;
    height: 321px;
    left: calc(50% - 1200px/2);
    top: 308px;
    /* 4833 - 4525 */
    background: #FFFFFF url('../images/sec4/Rectangle 29.png') no-repeat center center / contain;
    z-index: 2;
  }

  .sec-4__group-64 {
    position: absolute;
    width: 727px;
    height: 91px;
    left: calc(50% - 727px/2 - 0.5px);
    top: 323px;
    /* 4848 - 4525 */
    background: url('../images/sec4/グループ 64 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__group-74 {
    position: absolute;
    width: 1200px;
    height: 76px;
    left: calc(50% - 1200px/2);
    top: 629px;
    /* 5154 - 4525 */
    background: url('../images/sec4/グループ 74 1.png') no-repeat center center / contain;
    z-index: 2;
  }

  /* --- テキストグループ--- */
  .sec-4__msg-1 {
    position: absolute;
    width: 180px;
    height: 34px;
    left: 442px;
    top: 474px;
    /* 4999 - 4525 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 170%;
    text-align: right;
    color: #1E333B;
    z-index: 3;
  }

  .sec-4__msg-bg-1 {
    position: absolute;
    width: 56px;
    height: 31px;
    left: 627px;
    top: 475px;
    /* 5000 - 4525 */
    background: #1E333B;
    border-radius: 3px;
    z-index: 3;
  }

  .sec-4__msg-2 {
    position: absolute;
    width: 48px;
    height: 41px;
    left: 631px;
    top: 470px;
    /* 4995 - 4525 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 170%;
    text-align: right;
    color: #FFFFFF;
    z-index: 4;
    /* 背景の上 */
  }

  .sec-4__msg-3 {
    position: absolute;
    width: 80px;
    height: 34px;
    left: 688px;
    top: 475px;
    /* 5000 - 4525 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 170%;
    text-align: right;
    color: #1E333B;
    z-index: 3;
  }

  .sec-4__msg-4 {
    position: absolute;
    width: 140px;
    height: 34px;
    left: 628px;
    top: 511px;
    /* 5036 - 4525 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 170%;
    text-align: right;
    color: #1E333B;
    z-index: 3;
  }

  /* --- 追加アイコン画像・テキスト画像群 --- */
  .sec-4__img-touroku {
    position: absolute;
    width: 40px;
    height: 183px;
    left: 1061px;
    top: 416px;
    /* 4941 - 4525 */
    background: url('../images/sec4/登録や申込 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__img-number {
    position: absolute;
    width: 83px;
    height: 45px;
    left: 963px;
    top: 485px;
    /* 5010 - 4525 */
    background: url('../images/sec4/1352639 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__img-susumeru {
    position: absolute;
    width: 41px;
    height: 157px;
    left: 793px;
    top: 429px;
    /* 4954 - 4525 */
    background: url('../images/sec4/読み進める 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__msg-5 {
    position: absolute;
    width: 237px;
    height: 68px;
    left: 1241px;
    top: 477px;
    /* 5002 - 4525 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 170%;
    color: #1E333B;
    z-index: 3;
  }

  /* --- GIF素材 --- */
  .sec-4__gif-scroll {
    position: absolute;
    width: 156px;
    height: 157px;
    left: 821px;
    top: 414px;
    /* 4939 - 4525 */
    background: url('../images/GIF素材/scroll.gif') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__gif-tap {
    position: absolute;
    width: 156px;
    height: 156px;
    left: 1089px;
    top: 414px;
    /* 4939 - 4525 */
    background: url('../images/GIF素材/tap.gif') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__workflow-bg {
    position: absolute;
    width: 946px;
    height: 476px;
    left: calc(50% - 946px/2);
    top: 720px;
    /* 5245 - 4525 */
    background: url('../images/sec4/グループ 80 2.png') no-repeat center center / contain;
    z-index: 2;
  }

  .sec-4__step-1 {
    position: absolute;
    width: 236px;
    height: 241px;
    left: 524px;
    top: 761px;
    /* 5286 - 4525 */
    background: url('../images/sec4/1 352640.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-arrow-1 {
    position: absolute;
    width: 78px;
    height: 78px;
    left: 758px;
    top: 843px;
    /* 5368 - 4525 */
    background: url('../images/sec4/グループ 77 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-2 {
    position: absolute;
    width: 251px;
    height: 236px;
    left: 834px;
    top: 764px;
    /* 5289 - 4525 */
    background: url('../images/sec4/2 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-arrow-2 {
    position: absolute;
    width: 78px;
    height: 78px;
    left: 1083px;
    top: 843px;
    /* 5368 - 4525 */
    background: url('../images/sec4/グループ 77 2.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-3 {
    position: absolute;
    width: 236px;
    height: 239px;
    left: 1159px;
    top: 762px;
    /* 5287 - 4525 */
    background: url('../images/sec4/3 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-triangle {
    position: absolute;
    width: 69px;
    height: 28px;
    left: calc(50% - 69px/2 + 0.5px);
    top: 1020px;
    /* 5545 - 4525 */
    background: url('../images/sec4/三角形 664 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  .sec-4__step-banner {
    position: absolute;
    width: 856px;
    height: 96px;
    left: calc(50% - 856px/2);
    top: 1058px;
    /* 5583 - 4525 */
    background: url('../images/sec4/グループ 78 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  /* ============================================================
   JS発火用アニメーション（回転出現）
   ============================================================ */
  .js-scroll-flip {
    opacity: 0;
    /* 最初は透明 */
    transform: perspective(600px) rotateY(90deg);
    /* 90度回転（横向きでペラペラ状態）*/
  }

  /* 画面内に入って .is-visible が付与されたら発動*/
  .js-scroll-flip.is-visible {
    animation: flipInY 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  /* 左から順番に出現させるための時間差（ディレイ）*/
  .sec-4__step-1.js-scroll-flip.is-visible {
    animation-delay: 0s;
  }

  .sec-4__step-2.js-scroll-flip.is-visible {
    animation-delay: 0.2s;
  }

  .sec-4__step-3.js-scroll-flip.is-visible {
    animation-delay: 0.4s;
  }

  /* 回転キーフレーム */
  @keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(600px) rotateY(90deg);
    }

    100% {
      opacity: 1;
      transform: perspective(600px) rotateY(0deg);
    }
  }


  }
}

/* end @media PC */