@charset "UTF-8";

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

/* ============================================================
   セクション7: お問い合わせ後の流れ（SP版）
   Figma準拠 — カード横スクロール
   ============================================================ */

.sec-7 {
  position: relative;
  width: 100%;
  max-width: 375px;
  height: 600px;
  margin: 0 auto;
  background: #FFFFFF;
  overflow: visible;
  z-index: 2;
}

.sec-7__inner {
  position: relative;
  width: 375px;
  height: 100%;
  margin: 0 auto;
}

/* --- タイトル画像 --- */
.sec-7__title {
  position: absolute;
  width: 250px;
  height: 35px;
  left: calc(50% - 250px/2);
  top: 55px;
  background: url("../images/sp/sec7/お問い合わせ後の流れ 1.png") center / contain no-repeat;
  z-index: 3;
}

/* --- 矢印は非表示 --- */
.sec-7__arrow {
  display: none !important;
}

/* ============================================================
   横スクロールコンテナ
   ============================================================ */
.sec-7__scroll {
  position: absolute;
  top: 115px;
  left: 0;
  width: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sec-7__scroll::-webkit-scrollbar {
  display: none;
}

/* 各スライド */
.sec-7__slide {
  min-width: 375px;
  width: 375px;
  height: 371px;
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================================
   カード背景（305px × 331px）
   ============================================================ */
.sec-7__card-lg,
.sec-7__card {
  position: absolute;
  width: 305px;
  height: 331px;
  left: calc(50% - 305px/2);
  top: 20px;
  background: #FFFFFF;
  box-shadow: 0px 3px 9.9px -3px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  z-index: 1;
}

/* ============================================================
   ナンバーサークル（小）— カード上端に半分かぶる
   ============================================================ */
.sec-7__circle-sm {
  position: absolute;
  width: 31px;
  height: 31px;
  left: calc(50% - 31px/2);
  top: 5px;
  background: #1E333B;
  border-radius: 50%;
  z-index: 4;
}

.sec-7__num {
  position: absolute;
  width: 31px;
  height: 31px;
  left: calc(50% - 31px/2);
  top: 5px;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  text-align: center;
  color: #FFFFFF;
  z-index: 5;
}

/* ============================================================
   大きい丸（アイコン背景）
   ============================================================ */
.sec-7__circle-lg {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 100px/2);
  top: 95px;
  background: #1E333B;
  border-radius: 50%;
  z-index: 2;
}

/* ============================================================
   GIFアイコン
   ============================================================ */
.sec-7__icon {
  position: absolute;
  width: 65px;
  height: 65px;
  left: calc(50% - 65px/2);
  top: 113px;
  z-index: 3;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============================================================
   カードタイトル（ナンバー直下）
   ============================================================ */
.sec-7__card-title {
  position: absolute;
  width: 271px;
  height: 28px;
  left: calc(50% - 271px/2);
  top: 50px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 175%;
  text-align: center;
  color: #1E333B;
  z-index: 3;
}

/* ============================================================
   カード説明文
   ============================================================ */
.sec-7__card-desc {
  position: absolute;
  width: 275px;
  left: calc(50% - 275px/2);
  top: 206px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 170%;
  color: #1E333B;
  z-index: 3;
}

/* SP版のbrは無効化（自然改行） */
.sec-7__card-desc br {
  display: none;
}

/* ============================================================
   GIFアイコン個別（背景画像のみ、位置はicon共通で指定済み）
   ============================================================ */
.icon-step-1 {
  background: url('../images/GIF素材/お問い合わせ.gif') no-repeat center center / contain;
}
.icon-step-2 {
  background: url('../images/GIF素材/ヒアリングシートのご記入.gif') no-repeat center center / contain;
}
.icon-step-3 {
  background: url('../images/GIF素材/制作開始.gif') no-repeat center center / contain;
}
.icon-step-4 {
  background: url('../images/GIF素材/初稿のご提出と修正対応.gif') no-repeat center center / contain;
}
.icon-step-5 {
  background: url('../images/GIF素材/フィードバックと確認.gif') no-repeat center center / contain;
}
.icon-step-6 {
  background: url('../images/GIF素材/納品.gif') no-repeat center center / contain;
}

/* ============================================================
   スクロールインジケーター
   ============================================================ */
.sec-7__scroll-indicator {
  position: absolute;
  width: 80px;
  height: 73px;
  left: 275px;
  top: 413px;
  background: url("../images/sp/sec7/scroll 1.png") center / contain no-repeat;
  z-index: 10;
  pointer-events: none;
  transform-origin: bottom center;
  animation: waveHand 1.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

} /* end @media */