@charset "UTF-8";

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

  /* ============================================================
   セクション1: ファーストビュー（SP版）
   リラクタリング：詳細度を高めてPC版の干渉を防止
   ============================================================ */

  /* 親要素の調整 */
  .fv {
    position: relative;
    width: 100%;
    max-width: 375px;
    height: 733px;
    /* SP版: 375px幅で中央配置（背景を区切る） */
    margin: 0 auto;
    overflow: hidden;
    background: #E9F7F6;
  }

  /* 共通の中央寄せ定義（詳細度を確保） */
  .fv .fv__bg,
  .fv .fv__content,
  .fv .fv__light,
  .fv .fv__spotlight,
  .fv .fv__cta {
    left: 50%;
    transform: translateX(-50%);
  }

  /* --- 背景画像 --- */
  .fv .fv__bg {
    /* 背景 1 */
    position: absolute;
    width: 100%;
    /* 横幅いっぱいに拡張 */
    height: 733px;
    left: 0;
    top: 0px;
    transform: none;
    background: url("../images/sp/sec1/bg.png") center top / cover no-repeat;
    z-index: var(--z-bg);
  }

  /* FVの最下部にグラデーションを重ねてセクション2の色（#E9F7F6）へ自然にフェードアウトさせる */
  .fv::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(233, 247, 246, 0) 0%, #E9F7F6 100%);
    z-index: 2;
    /* 背景(1)より上でコンテンツ(5)より下 */
    pointer-events: none;
  }

  /* --- メインコンテンツ（画像） --- */
  .fv .fv__content {
    /* 7893789@2x 2 */
    position: absolute;
    width: 375px;
    height: 370px;
    top: 43px;
    background: url("../images/sp/sec1/main.png") center top / contain no-repeat;
    z-index: var(--z-content);
    /* PC版と同じフェードインアニメーションをスマホにも適用 */
    opacity: 0;
    animation: fadeInUp-sp 0.8s ease-out 0.3s forwards;
  }

  .fv .fv__content-img {
    display: none;
  }

  /* --- CTAボタン --- */
  .fv .fv__cta {
    /* CTA@2x 1 */
    position: absolute;
    width: 335px;
    height: 74px;
    top: 610px;
    background: url("../images/sp/sec1/cta.png") center top / contain no-repeat;
    z-index: var(--z-cta);
    border-radius: 0;
    /* 光のアニメーションがはみ出さないように */
    overflow: hidden;
  }

  /* スマホ版にも光が走るアニメーションを全復旧 */
  .fv .fv__cta::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0;
    left: -40%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.15) 70%, transparent 100%);
    z-index: 3;
    pointer-events: none;
    animation: sweepLight 3s ease-in-out infinite;
  }

  .fv .fv__cta:hover {
    /* ホバー時の中央寄せ維持 + 拡大 */
    transform: translateX(-50%) scale(1.02);
  }

  .fv .fv__cta-img {
    display: none;
  }

  /* --- 光エフェクトオーバーレイ --- */
  .fv .fv__light {
    /* 73897389@2x 1 */
    position: absolute;
    width: 375px;
    /* 元の375pxに戻す */
    height: 633px;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    background: url("../images/sp/sec1/73897389@2x.png") center top / contain no-repeat;
    z-index: var(--z-light);
    pointer-events: none;
  }

  /* --- スポットライト装飾 --- */
  .fv .fv__spotlight {
    /* 372789398@2x 1 */
    position: absolute;
    width: 305px;
    height: 95px;
    top: 0px;
    background: url("../images/sp/sec1/logo.png") center top / contain no-repeat;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    z-index: var(--z-spotlight);
    pointer-events: none;
  }

  /* --- 流れるポートフォリオ背景 --- */
  .fv .fv__slider {
    position: absolute;
    width: 100%;
    /* PC版の1711.87pxを強制上書き */
    height: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-slider);
    pointer-events: none;
    overflow: hidden;
    transform: none;
    /* PC版の translateX をリセット */
  }

  .fv .fv__pf1 {
    /* pf1 2 */
    position: absolute;
    width: 1006px;
    height: 80px;
    left: calc(50% - 375px / 2 - 209px);
    top: 415px;
    background: url("../images/sp/sec1/pf1.webp") 0 0 / auto 100% repeat-x;
    transform: none;
    opacity: 1;
    animation: scrollLeft-pf1 30s linear infinite;
  }

  .fv .fv__pf2 {
    /* pf2 2 */
    position: absolute;
    width: 1042px;
    height: 80px;
    left: calc(50% - 375px / 2 - 503px);
    top: 505px;
    background: url("../images/sp/sec1/pf2.webp") 0 0 / auto 100% repeat-x;
    transform: none;
    opacity: 1;
    animation: scrollRight-pf2 35s linear infinite;
  }

}

/* end @media */

/* ============================================================
   アニメーション定義（コンパイルエラー防止のためメディアクエリ外に配置）
   ============================================================ */
@keyframes scrollLeft-pf1 {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: -1006px;
  }
}

@keyframes scrollRight-pf2 {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 1042px;
  }
}

@keyframes fadeInUp-sp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}