@charset "UTF-8";

@media screen and (max-width: 768px) {

/* ============================================================
   セクション4: 制作の流れ（SP版）
   ============================================================ */

.sec-4 {
  position: relative;
  width: 100%;
  max-width: 375px;
  height: 980px;
  margin: 0 auto;
  overflow: visible;
  /* SP版: 375px幅で中央配置（背景を区切る） */
  background: #FFFFFF;
  z-index: 20; /* 下のセクション（sec-5）のz-index:10よりも手前に表示する処理 */
}

/* 中央寄せの基準コンテナ */
.sec-4 .sec-4__inner {
  position: absolute;
  width: 375px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  overflow: visible;
  /* パーツがはみ出す可能性を考慮 */
}

/* --- 背景画像 (Group 106) --- */
.sec-4 .sec-4__bg {
  /* グループ 106@2x 2 */
  position: absolute;
  width: 375px;
  height: 950px;
  left: 0;
  top: 0px;
  transform: none;
  background: url("../images/sp/sec4/グループ 106@2x 2.png") center top / contain no-repeat;
  z-index: 1;
}

/* PC版の背景画像を上書き/非表示にするための設定 */
.sec-4 .sec-4__bg::before {
  display: none;
}

/* --- スライダー用バンド (SP版では非表示に修正) --- */
.sec-4 .sec-4__portfolio-slider {
  display: none !important;
}

/* --- 流れるポートフォリオ背景（スマホ版） --- */
.sec-4 .sec-4__slider-sp {
  position: absolute;
  /* 左右に無限に伸びるのを防ぎ、背景基準(375px)と同じ「特定の横幅」に制限 */
  width: 100%; 
  height: 280px;
  left: 0;
  top: 745px;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-1deg) scale(1.05);
}

/* 上段：左へ流れる (pf3.png) */
.sec-4 .sec-4__pf3-sp {
  position: absolute;
  width: 100%;
  height: 130px; /* 110pxから130pxに拡大 */
  left: 0;
  top: -130px; /* もうちょい下へ調整（20px下げる） */
  background: url("../images/sec4/pf3.png") 0 0 / auto 100% repeat-x;
  animation: scrollLeft-pf3-sp 45s linear infinite;
  opacity: 0.95;
}

/* 下段：右へ流れる (pf4.png) */
.sec-4 .sec-4__pf4-sp {
  position: absolute;
  width: 100%;
  height: 130px; /* 110pxから130pxに拡大 */
  left: 0;
  top: 140px; /* 少し大きくなった分バランスを調整 */
  background: url("../images/sec4/pf4.png") 0 0 / auto 100% repeat-x;
  animation: scrollRight-pf4-sp 50s linear infinite;
  opacity: 0.95;
}


/* --- テキスト：ところで… --- */
.sec-4 .sec-4__text-1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #FFFFFF;
  z-index: 2;
}

/* --- グループ 66 (タイトル画像系) --- */
.sec-4 .sec-4__group-66 {
  position: absolute;
  width: 270px;
  height: 63px;
  left: 50%;
  top: 61px;
  transform: translateX(-50%);
  background: url("../images/sp/sec4/グループ 66 1.png") center center / contain no-repeat;
  z-index: 2;
}

/* PC版の広幅バナーをスマホ版で非表示に修正 */
.sec-4 .sec-4__group-74 {
  display: none !important;
}

/* --- 白背景枠 (Rectangle 29) --- */
.sec-4 .sec-4__rect-29 {
  position: absolute;
  width: 335px;
  height: 374px;
  left: 50%;
  top: 144px;
  transform: translateX(-50%);
  background: url("../images/sp/sec4/Rectangle 29.png") center center / contain no-repeat, #FFFFFF;
  border-radius: 0;
  z-index: 2;
}

/* --- グループ 64 (訴求力重視のデザイン…) --- */
.sec-4 .sec-4__group-64 {
  position: absolute;
  width: 320px;
  height: 78px;
  left: 50%;
  top: 159px;
  transform: translateX(-50%);
  background: url("../images/sp/sec4/グループ 64@2x 1.png") center center / contain no-repeat;
  z-index: 3;
}

/* --- メッセージテキスト群 --- */
.sec-4 .sec-4__msg-1,
.sec-4 .sec-4__msg-2,
.sec-4 .sec-4__msg-3,
.sec-4 .sec-4__msg-4,
.sec-4 .sec-4__msg-5 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  z-index: 3;
}

.sec-4 .sec-4__msg-1 {
  position: absolute;
  width: 126px;
  height: 24px;
  left: 75px;
  top: 254px;
  font-size: 14px;
  line-height: 170%;
  text-align: right;
  color: #1E333B;
}

.sec-4 .sec-4__msg-bg-1 {
  position: absolute;
  width: 39px;
  height: 21px;
  left: 203px;
  top: 255px;
  background: #1E333B;
  border-radius: 3px;
  z-index: 3;
}

.sec-4 .sec-4__msg-2 {
  position: absolute;
  width: 32px;
  height: 27px;
  left: 207px;
  top: 252px;
  font-size: 16px;
  line-height: 170%;
  text-align: right;
  color: #FFFFFF;
}

.sec-4 .sec-4__msg-3 {
  position: absolute;
  width: 56px;
  height: 24px;
  left: 244px;
  top: 254px;
  font-size: 14px;
  line-height: 170%;
  text-align: right;
  color: #1E333B;
}

.sec-4 .sec-4__msg-4 {
  position: absolute;
  width: 98px;
  height: 24px;
  left: 50%;
  top: 279px;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 170%;
  text-align: center;
  color: #1E333B;
}

.sec-4 .sec-4__msg-5 {
  position: absolute;
  width: 335px;
  height: auto;
  left: 50%;
  top: 459px;
  /* Figma 3894px - 起点 3435px = 459px */
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 170%;
  text-align: center;
  color: #1E333B;
  z-index: 3;
}

/* --- 読み進める 1 --- */
.sec-4 .sec-4__img-susumeru {
  position: absolute;
  width: 28px;
  height: 107px;
  left: 46px;
  top: 332px;
  background: url("../images/sp/sec4/読み進める 1.png") center center / contain no-repeat;
  z-index: 3;
}

/* --- スクロールGIF --- */
.sec-4 .sec-4__gif-scroll {
  position: absolute;
  width: 106px;
  height: 106px;
  left: 65px;
  top: 322px;
  background: url("../images/GIF素材/scroll.gif") center center / contain no-repeat;
  z-index: 3;
}

/* --- マウス操作アイコン (1352639 1) --- */
.sec-4 .sec-4__img-number {
  position: absolute;
  width: 40px;
  height: 22px;
  left: 156px;
  top: 370px;
  background: url("../images/sec4/1352639 1.png") center center / contain no-repeat;
  z-index: 3;
}

/* --- タップGIF --- */
.sec-4 .sec-4__gif-tap {
  position: absolute;
  width: 106px;
  height: 106px;
  left: 225px;
  top: 318px;
  background: url("../images/GIF素材/tap.gif") center center / contain no-repeat;
  z-index: 3;
}

/* --- 登録や申込 1 --- */
.sec-4 .sec-4__img-touroku {
  position: absolute;
  width: 27px;
  height: 124px;
  left: 206px;
  top: 319px;
  background: url("../images/sp/sec4/登録や申込 1.png") center center / contain no-repeat;
  z-index: 3;
}

/* --- スクロール・タップラベル (表示強制) --- */
section.sec-4 .sec-4__inner .sec-4__tag-bg-scroll,
section.sec-4 .sec-4__inner .sec-4__tag-bg-tap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute;
  width: 75px;
  height: 18px;
  background: #00A179;
  border-radius: 0 0 7px 7px;
  z-index: 10;
}

section.sec-4 .sec-4__inner .sec-4__tag-text-scroll,
section.sec-4 .sec-4__inner .sec-4__tag-text-tap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute;
  height: 18px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 170%;
  text-align: center;
  color: #FFFFFF;
  z-index: 11;
}

section.sec-4 .sec-4__inner .sec-4__tag-bg-scroll {
  left: 80px;
  top: 421px;
}

section.sec-4 .sec-4__inner .sec-4__tag-text-scroll {
  width: 55px;
  left: 91px;
  top: 420px;
}

section.sec-4 .sec-4__inner .sec-4__tag-bg-tap {
  left: 239px;
  top: 417px;
}

section.sec-4 .sec-4__inner .sec-4__tag-text-tap {
  width: 33px;
  left: 261px;
  top: 416px;
}


/* --- ワークフローセクション --- */
.sec-4 .sec-4__workflow-bg {
  position: absolute;
  width: 335px;
  height: 385px;
  left: 50%;
  top: 618px;
  /* Figma 4053px - 起点 3435px = 618px */
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFFFFE 0%, #FFFEBB 100%);
  box-shadow: 0px 7px 9.1px -5px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  z-index: 2;
}

.sec-4 .sec-4__step-1 {
  position: absolute;
  width: 111.8px;
  height: 114.16px;
  left: 132px;
  /* Figma calcから計算 */
  top: 636px;
  /* Figma 4071px - 起点 3435px = 636px */
  background: url("../images/sp/sec4/1 352640.png") center center / contain no-repeat;
  z-index: 3;
}

.sec-4 .sec-4__step-arrow-1 {
  position: absolute;
  width: 33.1px;
  height: 33.1px;
  left: 171px;
  /* Figma calcから計算 */
  top: 769px;
  /* Figma calcから計算値 769px */
  background: url("../images/sp/sec4/グループ 77 1.png") center center / contain no-repeat;
  z-index: 3;
}

.sec-4 .sec-4__step-2 {
  position: absolute;
  width: 118.9px;
  height: 111.8px;
  left: 45px;
  /* Figma calcから計算 */
  top: 750px;
  /* Figma 4185px - 起点 3435px = 750px */
  background: url("../images/sp/sec4/2 1.png") center center / contain no-repeat;
  z-index: 3;
}

.sec-4 .sec-4__step-arrow-2 {
  display: none !important;
  /* 新レイアウトでは不要 */
}

.sec-4 .sec-4__step-3 {
  position: absolute;
  width: 111.8px;
  height: 113.22px;
  left: 218px;
  /* Figma calcから計算 */
  top: 750px;
  /* Figma 4185px - 起点 3435px = 750px */
  background: url("../images/sp/sec4/3 1.png") center center / contain no-repeat;
  z-index: 3;
}

.sec-4 .sec-4__intro-triangle {
  position: absolute;
  width: 35px;
  height: 24px;
  left: 50%;
  top: 584px;
  /* Figma 4019px - 起点 3435px = 584px */
  transform: translateX(-50%);
  background-color: #21A75B;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 3;
}

.sec-4 .sec-4__intro-banner {
  position: absolute;
  width: 335px;
  height: 72px;
  left: 20px;
  top: 518px;
  /* Figma 3953px - 起点 3435px = 518px */
  background: #21A75B;
  z-index: 3;
  /* テキストスタイル — Figma: テキスト305×42, top差15px */
  display: block;
  padding: 15px;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 134%;
  text-align: center;
  color: #FFFFFF;
}

.sec-4 .sec-4__intro-highlight {
  color: #FFE500;
}

.sec-4 .sec-4__step-triangle {
  position: absolute;
  width: 40px;
  height: 16px;
  left: 50%;
  top: 870px;
  /* Figma 4305px - 起点 3435px = 870px */
  transform: translateX(-50%);
  background: url("../images/sp/sec4/三角形 664 1.png") center center / contain no-repeat;
  z-index: 3;
}

.sec-4 .sec-4__step-banner {
  position: absolute;
  width: 305px;
  height: 76px;
  left: 50%;
  top: 902px;
  /* Figma 4337px - 起点 3435px = 902px */
  transform: translateX(-50%);
  background: url("../images/sp/sec4/グループ 78@2x 1.png") center center / contain no-repeat;
  z-index: 3;
}

} /* end @media */

@keyframes scrollLeft-pf3-sp {
  0% { background-position-x: 0; }
  100% { background-position-x: -2121.4px; /* 130pxの高さに合わせた新しい移動幅 */ }
}

@keyframes scrollRight-pf4-sp {
  0% { background-position-x: 0; }
  100% { background-position-x: 2214.9px; /* 130pxの高さに合わせた新しい移動幅 */ }
}

/* ============================================================
   スマホ版でもPC版由来のフリップアニメーションを復活
   ============================================================ */
.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);
  }
}