/* リセットCSS */
<link href="css/reset.css" rel="stylesheet">



/* @@@@@@@@@@@@@@@@@@@@@@@@@
全体
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

/* 全体のスクロールを防ぐ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横スクロール防止 */
    box-sizing: border-box;
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC背景と全体のコンテナ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



/* 親要素コンテナのスタイル（PC背景） */
.background {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;

}


/* PC背景 */

@media (min-width: 601px) {
    .pcbg {
        display: block;
        top: 0vw; 
        left: 0vw; 
        width: 100vw; 
    }
}

@media (max-width: 600px) {
    .pcbg {
        display: none; 
    }
}



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ヘッター
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

    /* ヘッター全体 */
    .pcheaderbg,
    .pclogo,
    .headertoppage,
    .headerservice,
    .headeroverview,
    .headercontactus
     {
    position: fixed; 
    height: auto; 
    z-index: 99; 
    }


        @media (min-width: 601px) {
            .pcheaderbg {
                display: block;
                top: 3vw; 
                left: 5vw; 
                width: 90vw; 
            }

            .pclogo {
                display: block;
                top: 4vw; 
                left: 10vw; 
                width: 10vw; 
            }

            .headertoppage {
                display: block;
                top: 3.8vw; 
                left: 45vw; 
                width: 10vw; 
            }

            .headerservice {
                display: block;
                top: 3.8vw; 
                left: 55vw; 
                width: 10vw; 
            }

            .headeroverview {
                display: block;
                top: 3.8vw; 
                left: 65vw; 
                width: 10vw; 
            }

            .headercontactus {
                display: block;
                top: 3vw; 
                left: 76.5vw; 
                width: 18.5vw; 
            }

        }

        @media (max-width: 600px) {
            .pcheaderbg,
            .pclogo,
            .headertoppage,
            .headerservice,
            .headeroverview,
            .headercontactus {
                display: none; 
            }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ヘッター（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
        .pcheaderbg,
        .pclogo,
        .headertoppage,
        .headerservice,
        .headeroverview,
        .headercontactus{
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
         }
    

        .pcheaderbg.fade-in-up,
        .pclogo.fade-in-up,
        .headertoppage.fade-in-up,
        .headerservice.fade-in-up,        
        .headeroverview.fade-in-up,
        .headercontactus.fade-in-up{
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 上にフワッとする */
        }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCファーストビュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC 左上の飾り */
        .serviceleftbg {
            position: absolute;
            top: 0vw;
            left: 0vw;
            width: 30vw;
            height: auto;
        }

        /* PC 右上の飾り */
        .servicerightbg {
            position: absolute;
            top: 0vw;
            left: 70vw;
            width: 30vw;
            height: auto;
        }

        /* PC サービスタイトル */
        .servicetitle {
            position: absolute;
            top: 13vw;
            left: 40vw;
            width: 20vw;
            height: auto;
        }       

        /* PC 営業戦略ボタン */
        .strategybutton {
            position: absolute;
            top: 25.6vw;
            left: 13vw;
            width: 20vw;
            height: auto;
            cursor: pointer;
        } 

        /* PC 営業代行ボタン */
        .salesbutton {
            position: absolute;
            top: 30vw;
            left: 40vw;
            width: 15vw;
            height: auto;
            cursor: pointer;
        } 

        /* PC DXボタン */
        .dxbutton {
            position: absolute;
            top: 30.1vw;
            left: 64vw;
            width: 18.5vw;
            height: auto;
            cursor: pointer;
        } 


        @media (max-width: 600px) {
            .serviceleftbg,
            .servicerightbg,
            .servicetitle,
            .strategybutton,
            .salesbutton,
            .dxbutton

             {
                display: none;
            }
        }
    



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCファーストビュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードイン（左から） */
        .serviceleftbg {
        opacity: 0; /* 初期状態は透明 */
        transform: translateX(-50px); /* 最初は左に50pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .serviceleftbg.fade-in-left {
        opacity: 1; /* フェードイン */
        transform: translateX(0); /* 左からフワッと出現 */
        }


        /* フェードイン（右から） */

        .servicerightbg{
        opacity: 0; /* 初期状態は透明 */
        transform: translateX(50px); /* 最初は右に50pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .servicerightbg.fade-in-right {
        opacity: 1; /* フェードイン */
        transform: translateX(0); /* 右からフワッと出現 */
        }



        /* フェードインアップ */

        .servicetitle {
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .servicetitle.fade-in-up {
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 上にフワッとする */
        }



        /* 初期状態：透明＋スケール小 */
        .strategybutton,
        .salesbutton,
        .dxbutton {
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* 表示状態：ふわっとスケールアップ */
        .fade-zoom-in {
        opacity: 1;
        transform: scale(1);
        }

        /* ホバー時：ほんの少し拡大 */
        .strategybutton:hover,
        .salesbutton:hover,
        .dxbutton:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease;
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC営業戦略支援
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC 営業戦略支援タイトル */
        .salesstrategytitle {
            position: absolute;
            top: 65vw;
            left: 24vw;
            width: 55vw;
            height: auto;
        }

        /* PC 営業戦略支援詳細 */
        .salesstrategydetail {
            position: absolute;
            top: 80vw;
            left: 7.5vw;
            width: 85vw;
            height: auto;
        }

        /* PC 営業戦略支援問い合わせ */
        .salesstrategycontactus {
            position: absolute;
            top: 107vw;
            left: 20vw;
            width: 30vw;
            height: auto;
        }        

        @media (max-width: 600px) {
            .salesstrategytitle,
            .salesstrategydetail,
            .salesstrategycontactus

             {
                display: none;
            }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC営業戦略支援（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
        .salesstrategytitle,
        .salesstrategydetail,
        .salesstrategycontactus {
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .salesstrategytitle.fade-in-up,
        .salesstrategydetail.fade-in-up,
        .salesstrategycontactus.fade-in-up {
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 上にフワッとする */
        }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC営業戦略代行
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC 営業代行タイトル */
        .salestitle {
            position: absolute;
            top: 123vw;
            left: 13vw;
            width: 20vw;
            height: auto;
        }

         /* PC 営業代行タイトル詳細 */
         .salestitledetail {
            position: absolute;
            top: 133vw;
            left: 13vw;
            width: 55vw;
            height: auto;
        }       

         /* PC 営業代行ポップ１ */
         .listpop {
            position: absolute;
            top: 122vw;
            left: 35vw;
            width: 15vw;
            height: auto;
        }  

         /* PC 営業代行ポップ2 */
         .subpop {
            position: absolute;
            top: 122vw;
            left: 47vw;
            width: 15vw;
            height: auto;
        }          

         /* PC 営業代行ポップ3 */
         .satispop {
            position: absolute;
            top: 122vw;
            left: 59vw;
            width: 15vw;
            height: auto;
        }    

         /* PC 営業代行導入事例1 */
         .case1 {
            position: absolute;
            top: 145vw;
            left: 12vw;
            width: 25vw;
            height: auto;
        }    

         /* PC 営業代行導入事例2 */
         .case2 {
            position: absolute;
            top: 145vw;
            left: 38.5vw;
            width: 25vw;
            height: auto;
        }   

          /* PC 営業代行導入事例3 */
          .case3 {
            position: absolute;
            top: 145vw;
            left: 65vw;
            width: 25vw;
            height: auto;
        }          

        @media (max-width: 600px) {
            .salestitle,
            .salestitledetail,
            .listpop,
            .subpop,
            .satispop,
            .case1,
            .case2,
            .case3

             {
                display: none;
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC営業戦略代行（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
        .salestitle,
        .salestitledetail {
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .salestitle.fade-in-up,
        .salestitledetail.fade-in-up {
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 上にフワッとする */
        }


        /* 初期状態：下に30px、透明 */
        .listpop,
        .subpop,
        .satispop,
        .case1,
        .case2,
        .case3 {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 表示アニメーション（順番に付与） */
        .listpop.fade-in-up,
        .subpop.fade-in-up,
        .satispop.fade-in-up,
        .case1.fade-in-up, 
        .case2.fade-in-up, 
        .case3.fade-in-up {
        opacity: 1;
        transform: translateY(0);
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC営業代行　ご利用の流れ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PC背景飾りボール1 */
        .ball1 {
            position: absolute;
            top: 185vw;
            left: 15vw;
            width: 15vw;
            height: auto;
        }

        /* PC背景飾りボール2 */
        .ball2 {
            position: absolute;
            top: 200vw;
            left: 1vw;
            width: 13vw;
            height: auto;
        }       
        
        /* PC背景飾りボール3 */
        .ball3 {
            position: absolute;
            top: 220vw;
            left: 13vw;
            width: 13vw;
            height: auto;
        }   
        
        /* PC背景飾りボール4 */
        .ball4 {
            position: absolute;
            top: 215vw;
            left: 60vw;
            width: 30vw;
            height: auto;
        }  
        
        /* PC背景飾りボール5 */
        .ball5 {
            position: absolute;
            top: 200vw;
            left: 80vw;
            width: 10vw;
            height: auto;
        }         

        /* PCご利用の流れタイトル */
        .usageflowtitle {
            position: absolute;
            top: 185vw;
            left: 39vw;
            width: 20vw;
            height: auto;
        }

        /* PCご利用の流れ01 */
        .usageflow01 {
            position: absolute;
            top: 190vw;
            left: 20vw;
            width: 60vw;
            height: auto;
        }

        /* PCご利用の流れ02 */
        .usageflow02 {
            position: absolute;
            top: 198vw;
            left: 20vw;
            width: 60vw;
            height: auto;
        }


        /* PCご利用の流れ03 */
        .usageflow03 {
            position: absolute;
            top: 206vw;
            left: 20vw;
            width: 60vw;
            height: auto;
        }

        /* PCご利用の流れ04 */
        .usageflow04 {
            position: absolute;
            top: 214vw;
            left: 20vw;
            width: 60vw;
            height: auto;
        }

        /* PCご利用の流れ05 */
        .usageflow05 {
            position: absolute;
            top: 222vw;
            left: 20vw;
            width: 60vw;
            height: auto;
        }

        /* PCお問合せボタン-*/
        .contactusbutton {
            position: absolute;
            top: 230vw;
            left: 34vw;
            width: 30vw;
            height: auto;
        }        

        /* PCお問合せボタン-*/
        .note {
            position: absolute;
            top: 235vw;
            left: 34vw;
            width: 30vw;
            height: auto;
        }          


        @media (max-width: 600px) {
            .ball1,
            .ball2,
            .ball3,
            .ball4,
            .ball5,
            .ball6,
            .usageflowtitle,
            .usageflow01,
            .usageflow02,
            .usageflow03,
            .usageflow04,
            .usageflow05,
            .next1,
            .next2,
            .next3,
            .next4,
            .contactusbutton,
            .note

             {
                display: none;
            }
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCご利用の流れ（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/        


        /* 初期状態：下に30px、透明 */
        .usageflowtitle,
        .usageflow01,
        .usageflow02,
        .usageflow03,
        .usageflow04,
        .usageflow05,
        .contactusbutton,
        .note {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 表示アニメーション（順番に付与） */
        .usageflowtitle.fade-in-up,
        .usageflow01.fade-in-up,
        .usageflow02.fade-in-up,
        .usageflow03.fade-in-up, 
        .usageflow04.fade-in-up, 
        .usageflow05.fade-in-up,
        .contactusbutton.fade-in-up,
        .note.fade-in-up {
        opacity: 1;
        transform: translateY(0);
        }

        /* 背景のボール浮遊 */
        .ball1, .ball2, .ball3, .ball4, .ball5 {
            animation-name: float;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }

          @keyframes float {
            0% {
              transform: translateY(0);
            }
            100% {
              transform: translateY(var(--translateY));
            }
          }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCDXツール
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PCDXツールタイトル */
        .dxtooltitle {
            position: absolute;
            top: 247vw;
            left: 11vw;
            width: 30vw;
            height: auto;
        }

        /* PCDXツール説明1 */
        .dxtooldetail1 {
            position: absolute;
            top: 265vw;
            left: 11vw;
            width: 40vw;
            height: auto;
        }

        /* PCDXツール説明2 */
        .dxtooldetail2 {
            position: absolute;
            top: 268vw;
            left: 11vw;
            width: 40vw;
            height: auto;
        }        

        /* PCDXツール説明3 */
        .dxtooldetail3 {
            position: absolute;
            top: 275vw;
            left: 11vw;
            width: 40vw;
            height: auto;
        }           

        /* PCDXツールイメージ */
        .dxtoolimage {
            position: absolute;
            top: 250vw;
            left: 60vw;
            width: 30vw;
            height: auto;
        }           

        @media (max-width: 600px) {
            .dxtooltitle,
            .dxtooldetail1,
            .dxtooldetail2,
            .dxtooldetail3,
            .dxtoolimage

             {
                display: none;
            }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCDXツール（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
        .dxtooltitle,
        .dxtooldetail1,
        .dxtooldetail2,
        .dxtooldetail3,
        .dxtoolimage {
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .dxtooltitle.fade-in-up,
        .dxtooldetail1.fade-in-up,
        .dxtooldetail2.fade-in-up,
        .dxtooldetail3.fade-in-up,
        .dxtoolimage.fade-in-up {
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 上にフワッとする */
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
(PC)フッター
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PCフッター背景 */
        .pcfooter {
            position: absolute;
            top: 286vw;
            left: 0.5vw;
            width: 100vw;
            height: auto;
        }

        /* PCフッターお問合せボタン */
        .footercontactusbutton {
            position: absolute;
            top: 306vw;
            left: 47vw;
            width: 30vw;
            height: auto;
        }

        /* PCコピーライト */
        .copyright {
            position: absolute;
            top: 316vw;
            left: 36vw;
            width: 30vw;
            height: auto;
        }

        @media (max-width: 600px) {
            .pcfooter,
            .footercontactusbutton,
            .copyright{
                display: none;
            }
        }







/* -----------------------------
-----------------------------
-----------------------------




スマホ



-----------------------------
-----------------------------
-----------------------------
-----------------------------　*/





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP背景
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



/* SP背景 */
.spbackground {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 100vw;
    height: auto;
}


@media (min-width: 601px) {
    .spbackground {
        display: none;
    }
}




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ヘッター
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

    /* ヘッター全体 */
    .spheaderbgleft,
    .spheaderbgright,
    .splogo,
    .humbarger
     {
    position: fixed; 
    height: auto; 
    }

            /* ヘッター背景 */
            .spheaderbgleft {
                display: block;
                top: 0vw; 
                left: 0vw; 
                width: 70vw; 
                z-index: 99; 
            }

            /* ヘッター背景 */
            .spheaderbgright {
                display: block;
                top: 0vw; 
                right: 0vw; 
                width: 60vw; 
                z-index: 99; 
            }

            /* ヘッターロゴ */
            .splogo {
                display: block;
                top: 16vw; 
                left: 13vw; 
                width: 17vw; 
                z-index: 101; 
            }
            
            /* ヘッターハンバーガー */
            .humbarger {
                display: block;
                top: 19vw; 
                left: 73vw; 
                width: 15vw; 
                z-index: 99; 
            }            

            @media (min-width: 601px) {
                .spheaderbgleft,
                .spheaderbgright,
                .splogo,
                .humbarger {
                    display: none; 
                }
            }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ヘッダー（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードイン（左から） */
        .spheaderbgleft {
            opacity: 0; /* 初期状態は透明 */
            transform: translateX(-50px); /* 最初は左に50pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
            .spheaderbgleft.fade-in-left {
            opacity: 1; /* フェードイン */
            transform: translateX(0); /* 左からフワッと出現 */
            }
    
    
            /* フェードイン（右から） */
    
            .spheaderbgright{
            opacity: 0; /* 初期状態は透明 */
            transform: translateX(50px); /* 最初は右に50pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
            .spheaderbgright.fade-in-right {
            opacity: 1; /* フェードイン */
            transform: translateX(0); /* 右からフワッと出現 */
            }
    
    
    
            /* フェードインアップ */
    
            .humbarger,
            .splogo {
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
            .humbarger.fade-in-up,
            .splogo.fade-in-up {
            opacity: 1; /* フェードイン */
            transform: translateY(0); /* 上にフワッとする */
            }








/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ハンバーガーメニュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

    /* ハンバーガーメニュー */
    .spmenubg,
    .spheaderbgright02,
    .humbargerclose,
    .spmenutop,
    .spmenuservice,
    .spmenuoverview,
    .spmenucontactus
     {
    position: fixed; 
    height: auto;  
    }

            /* ハンバーガー背景 */
            .spmenubg {
                display: block;
                top: 0vw; 
                left: 0vw; 
                width: 100vw; 
                z-index: 100;
            }

            /* ハンバーガー背景 */
            .spheaderbgright02 {
                display: block;
                top: 0vw; 
                right: 0vw; 
                width: 60vw; 
                z-index: 101;
            }
            

            /* ハンバーガー閉じる */
            .humbargerclose {
                display: block;
                top: 17vw; 
                left: 75vw; 
                width: 13vw; 
                z-index: 102;
            }
       
            
            /* トップページ */
            .spmenutop {
                display: block;
                top: 60vw; 
                left: 10vw; 
                width: 80vw; 
                z-index: 100;
            }     
            
            /* サービス内容 */
            .spmenuservice {
                display: block;
                top: 80vw; 
                left: 10vw; 
                width: 80vw; 
                z-index: 100;
            }   
            
            /* 会社概要 */
            .spmenuoverview {
                display: block;
                top: 100vw; 
                left: 10vw; 
                width: 80vw; 
                z-index: 100;
            }     
            
            /* お問合せ */
            .spmenucontactus {
                display: block;
                top: 120vw; 
                left: 10vw; 
                width: 80vw; 
                z-index: 100;
            }               

            @media (min-width: 601px) {
                .spmenubg,
                .spheaderbgright02,
                .humbargerclose,
                .spmenutop,
                .spmenuservice,
                .spmenuoverview,
                .spmenucontactus {
                    display: none; 
                }
            }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ハンバーガーメニュー動作
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



        /* 初期状態：非表示・透明・位置ずらし */
        .spmenubg,
        .spheaderbgright02,
        .humbargerclose,
        .spmenutop,
        .spmenuservice,
        .spmenuoverview,
        .spmenucontactus {
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s ease;
        }


        /* 表示状態にするクラス */
        .menu-open .spmenubg,
        .menu-open .spheaderbgright02,
        .menu-open .humbargerclose,
        .menu-open .spmenutop,
        .menu-open .spmenuservice,
        .menu-open .spmenuoverview,
        .menu-open .spmenucontactus {
            opacity: 1;
            pointer-events: auto;
        }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPファーストビュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



        /* spサービスタイトル */
        .spfirstservicetitle {
            position: absolute;
            top: 50vw;
            left: 29vw;
            width: 50vw;
            height: auto;
        }

        /* sp営業戦略ボタン */
        .spstrategybutton {
            position: absolute;
            top: 95vw;
            left: 9vw;
            width: 25vw;
            height: auto;
        }

        /* sp営業代行ボタン */
        .spsalesbutton {
            position: absolute;
            top: 99vw;
            left: 39.5vw;
            width: 22vw;
            height: auto;
        }

        /* spDXサポートボタン */
        .spdxsupportbutton {
            position: absolute;
            top: 101vw;
            left: 68vw;
            width: 22vw;
            height: auto;
        }

        /* sp矢印 */
        .bottom {
            position: absolute;
            top: 160vw;
            left: 46vw;
            width: 10vw;
            height: auto;
        }

        @media (min-width: 601px) {
            .spfirstservicetitle,
            .spstrategybutton,
            .spsalesbutton,
            .spdxsupportbutton,
            .bottom {
                display: none;
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPファーストビュー（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
    
        .spfirstservicetitle,
        .bottom {
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
        .spfirstservicetitle.fade-in-up,
        .bottom.fade-in-up {
            opacity: 1; /* フェードイン */
            transform: translateY(0); /* 上にフワッとする */
            }


        /* スケールアップ */
        /* 初期状態：透明＋スケール小 */
        .spstrategybutton,
        .spsalesbutton,
        .spdxsupportbutton {
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* 表示状態：ふわっとスケールアップ */
        .fade-zoom-in {
        opacity: 1;
        transform: scale(1);
        }

        /* ホバー時：ほんの少し拡大 */
        .spstrategybutton:hover,
        .spsalesbutton:hover,
        .spdxsupportbutton:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease;
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP営業戦略
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



/* sp営業戦略 */
.spstrategytitle {
    position: absolute;
    top: 180vw;
    left: 5vw;
    width:90vw;
    height: auto;
}

/* sp営業戦略カセット */
.spsalesstrategy {
    position: absolute;
    top: 210vw;
    left: 5vw;
    width:90vw;
    height: auto;
}

/* sp営業戦略お問合せボタン */
.spstrategycontactus {
    position: absolute;
    top: 288vw;
    left: 20vw;
    width: 60vw;
    height: auto;
}


@media (min-width: 601px) {
    .spstrategytitle,
    .spsalesstrategy,
    .spstrategycontactus
     {
        display: none;
    }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP営業戦略（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
    
        .spstrategytitle,
        .spsalesstrategy,
        .spstrategycontactus {
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
        .spstrategytitle.fade-in-up,
        .spsalesstrategy.fade-in-up,
        .spstrategycontactus.fade-in-up {
            opacity: 1; /* フェードイン */
            transform: translateY(0); /* 上にフワッとする */
            }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP営業代行
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



/* sp営業代行タイトル */
.spsalesagenttitle {
    position: absolute;
    top: 320vw;
    left: 10vw;
    width: 40vw;
    height: auto;
}

/* sp営業代行詳細 */
.spsalesagentdetail {
    position: absolute;
    top: 350vw;
    left: 10vw;
    width:80vw;
    height: auto;
}

/* sp営業代行ポップ1 */
.spsalesagentpop1 {
    position: absolute;
    top: 377vw;
    left: 7vw;
    width: 28vw;
    height: auto;
}

/* sp営業代行ポップ2 */
.spsalesagentpop2 {
    position: absolute;
    top: 378vw;
    left: 35vw;
    width: 28vw;
    height: auto;
}

/* sp営業代行ポップ2 */
.spsalesagentpop3 {
    position: absolute;
    top: 377vw;
    left: 63vw;
    width: 28vw;
    height: auto;
}

/* sp営業代行事例1 */
.spsalesagentcase1 {
    position: absolute;
    top: 413vw;
    left: 7vw;
    width: 85vw;
    height: auto;
}

/* sp営業代行事例2 */
.spsalesagentcase2 {
    position: absolute;
    top: 513vw;
    left: 7vw;
    width: 85vw;
    height: auto;
}

/* sp営業代行事例3 */
.spsalesagentcase3 {
    position: absolute;
    top: 613vw;
    left: 7vw;
    width: 85vw;
    height: auto;
}

@media (min-width: 601px) {
    .spsalesagenttitle,
    .spsalesagentdetail,
    .spsalesagentpop1,
    .spsalesagentpop2,
    .spsalesagentpop3,
    .spsalesagentcase1,
    .spsalesagentcase2,
    .spsalesagentcase3
     {
        display: none;
    }
}




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP営業代行（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
    
        .spsalesagenttitle,
        .spsalesagentdetail {
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
        .spsalesagenttitle.fade-in-up,
        .spsalesagentdetail.fade-in-up {
            opacity: 1; /* フェードイン */
            transform: translateY(0); /* 上にフワッとする */
            }


        /* 初期状態：下に30px、透明 */
        .spsalesagentpop1,
        .spsalesagentpop2,
        .spsalesagentpop3,
        .spsalesagentcase1,
        .spsalesagentcase2,
        .spsalesagentcase3 {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 表示アニメーション（順番に付与） */
        .spsalesagentpop1.fade-in-up,
        .spsalesagentpop2.fade-in-up,
        .spsalesagentpop3.fade-in-up,
        .spsalesagentcase1.fade-in-up, 
        .spsalesagentcase2.fade-in-up, 
        .spsalesagentcase3.fade-in-up {
        opacity: 1;
        transform: translateY(0);
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPご利用の流れ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


/* spご利用の流れ背景ボール1 */
.spflowball1 {
    position: absolute;
    top: 745vw;
    left: 1vw;
    width: 50vw;
    height: auto;
}

/* spご利用の流れ背景ボール2 */
.spflowball2 {
    position: absolute;
    top: 730vw;
    left: 58vw;
    width: 30vw;
    height: auto;
}

/* spご利用の流れ背景ボール3 */
.spflowball3 {
    position: absolute;
    top: 810vw;
    left: 60vw;
    width: 40vw;
    height: auto;
}

/* spご利用の流れ背景ボール4 */
.spflowball4 {
    position: absolute;
    top: 830vw;
    left: 1vw;
    width: 30vw;
    height: auto;
}


/* spご利用の流れタイトル */
.spflowtitle {
    position: absolute;
    top: 735vw;
    left: 30vw;
    width: 40vw;
    height: auto;
}

/* spご利用の流れ01 */
.spflow1 {
    position: absolute;
    top: 750vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spご利用の流れ02 */
.spflow2 {
    position: absolute;
    top: 770vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spご利用の流れ03 */
.spflow3 {
    position: absolute;
    top: 790vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spご利用の流れ04 */
.spflow4 {
    position: absolute;
    top: 810vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spご利用の流れ05 */
.spflow5 {
    position: absolute;
    top: 830vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spお問合せボタン */
.spflowcontactus {
    position: absolute;
    top: 855vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* sp注意書き */
.spflowcontactusword {
    position: absolute;
    top: 870vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}


@media (min-width: 601px) {
    .spflowtitle,
    .spflow1,
    .spflow2,
    .spflow3,
    .spflow4,
    .spflow5,
    .spflowcontactus,
    .spflowcontactusword,
    .spflowball1,
    .spflowball2,
    .spflowball3,
    .spflowball4
     {
        display: none;
    }
}



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPご利用の流れ（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* 初期状態：下に30px、透明 */
        .spflowtitle,
        .spflow1,
        .spflow2,
        .spflow3,
        .spflow4,
        .spflow5,
        .spflowcontactus,
        .spflowcontactusword {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 表示アニメーション（順番に付与） */
        .spflowtitle.fade-in-up,
        .spflow1.fade-in-up,
        .spflow2.fade-in-up,
        .spflow3.fade-in-up, 
        .spflow4.fade-in-up, 
        .spflow5.fade-in-up,
        .spflowcontactus.fade-in-up,
        .spflowcontactusword.fade-in-up {
        opacity: 1;
        transform: translateY(0);
        }

        /* 背景のボール浮遊 */
        .spflowball1, .spflowball2, .spflowball3, .spflowball4 {
            animation-name: float;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }

          @keyframes float {
            0% {
              transform: translateY(0);
            }
            100% {
              transform: translateY(var(--translateY));
            }
          }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPDX支援
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


/* spDX支援タイトル */
.spdxsupporttitle {
    position: absolute;
    top: 890vw;
    left: 10vw;
    width: 65vw;
    height: auto;
}

/* spDX支援タイトル */
.spdxsupportimage {
    position: absolute;
    top: 930vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spDX支援詳細1 */
.spdxsupportdetail1 {
    position: absolute;
    top: 1025vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spDX支援詳細2 */
.spdxsupportdetail2 {
    position: absolute;
    top: 1035vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}

/* spDX支援詳細3 */
.spdxsupportdetail3 {
    position: absolute;
    top: 1054vw;
    left: 10vw;
    width: 80vw;
    height: auto;
}


@media (min-width: 601px) {
    .spdxsupporttitle,
    .spdxsupportimage,
    .spdxsupportdetail1,
    .spdxsupportdetail2,
    .spdxsupportdetail3

     {
        display: none;
    }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPDX支援（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* 初期状態：下に30px、透明 */
        .spdxsupporttitle,
        .spdxsupportimage,
        .spdxsupportdetail1,
        .spdxsupportdetail2,
        .spdxsupportdetail3 {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 表示アニメーション（順番に付与） */
        .spdxsupporttitle.fade-in-up,
        .spdxsupportimage.fade-in-up,
        .spdxsupportdetail1.fade-in-up,
        .spdxsupportdetail2.fade-in-up, 
        .spdxsupportdetail3.fade-in-up {
        opacity: 1;
        transform: translateY(0);
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
(SP)フッター
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* SPフッター */
        .spfooter {
            position: absolute;
            top: 1080vw;
            left: 0vw;
            width: 100vw;
            height: auto;
        }   

        /* SPフッターお問合せボタン */
        .spcontactusbutton {
            position: absolute;
            top: 1190vw;
            left: 10vw;
            width: 80vw;
            height: auto;
        } 
        
        /* SPコピーライト */
        .spcopyright {
            position: absolute;
            top: 1228vw;
            left: 15vw;
            width: 70vw;
            height: auto;
        }  

        @media (min-width: 601px) {
            .spfooter,
            .spcontactusbutton,
            .spcopyright

             {
                display: none; 
            }
        }