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



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

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


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



/* 親要素コンテナのスタイル */
.background {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;

}


/* 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 ファーストビュー動画 */
        .firstviewpc {
            position: absolute;
            top: 10vw;
            left: 5vw;
            width: 90vw;
            height: auto;
            opacity: 0; /* 初期状態は透明 */
            transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
        }

        /* PC動画カバー */
        .pcbgfirstview {
            position: absolute;
            top: 10vw;
            left: 0;
            width: 100vw;
            height: auto;
        }


        .firstviewpc.fade-in {
            opacity: 1; /* フェードイン後の状態 */
        }


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


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCサービス内容
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PCサービス背景 */
        .pcservicebg {
            position: absolute;
            top: 60vw;
            left: 9vw;
            width: 90vw;
            height: auto;
        }

         /* PCタイトル */
         .pcservicetitle {
            position: absolute;
            top: 60vw;
            left: 9vw;
            width: 30vw;
            height: auto;
        }       

         /* PC営業戦略 */
         .pcstrategy {
            position: absolute;
            top: 80vw;
            left: 10vw;
            width: 25vw;
            height: auto;
            cursor: pointer;
        }    

         /* PC営業代行 */
         .pcsalesagency {
            position: absolute;
            top: 64vw;
            left: 39vw;
            width: 25vw;
            height: auto;
            cursor: pointer;
        }   

         /* PCDXサポート- */
         .pcdxsuoort {
            position: absolute;
            top: 63vw;
            left: 72vw;
            width: 15vw;
            height: auto;
            cursor: pointer;
        }

          /* PC詳細 */
          .pcservicedetail {
            position: absolute;
            top: 95vw;
            left: 62vw;
            width: 23vw;
            height: auto;
        }       

        @media (max-width: 600px) {
            .pcservicebg,
            .pcservicetitle,
            .pcstrategy,
            .pcsalesagency,
            .pcdxsuoort,
            .pcservicedetail {
                display: none;
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCサービス内容（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



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

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



        /* 初期状態：透明＋スケール小 */
        .pcstrategy,
        .pcsalesagency,
        .pcdxsuoort {
        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);
        }

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




/* @@@@@@@@@@@@@@@@@@@@@@@@@
(PC)FDF株式会社とは
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PC背景ぼかし */
        .ourcompanybg {
            position: absolute;
            top: 110vw;
            left: 0vw;
            width: 90vw;
            height: auto;
        }

        /* PCFDFタイトル埋め込み */
        .fdftitle {
            position: absolute;
            top: 110vw;
            left: 5vw;
            width: 60vw;
            height: auto;
        }

        /* PCOURCOMPANY */
        .ourcompany {
            position: absolute;
            top: 119vw;
            left: 16vw;
            width: 30vw;
            height: auto;
        }

        /* PCFDF株式会社とは… */
        .aboutfdf {
            position: absolute;
            top: 133vw;
            left: 17vw;
            width: 30vw;
            height: auto;
        }

        /* PCaboutusボタン */
        .ourcompanybutton {
            position: absolute;
            top: 115vw;
            left: 55vw;
            width: 45vw;
            height: auto;
            cursor: pointer;
        }

        /* PC01オーダーメイドの営業戦略 */
        .aboutusstrategy {
            position: absolute;
            top: 139vw;
            left: 15.5vw;
            width: 25vw;
            height: auto;
        }
        
        /* PC02１ヶ月ごとのサブスク契約 */
        .aboutussubscription {
            position: absolute;
            top: 143vw;
            left: 15.5vw;
            width: 25vw;
            height: auto;
        }

        /* PC中小企業リスト4000社以上  */
        .aboutuslist {
            position: absolute;
            top: 147vw;
            left: 15.5vw;
            width: 25vw;
            height: auto;
        }

        @media (max-width: 600px) {
            .ourcompanybg,
            .fdftitle,
            .ourcompany,
            .aboutfdf,
            .ourcompanybutton,
            .aboutusstrategy,
            .aboutussubscription,
            .aboutuslist {
                display: none;
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCFCF株式会社とは（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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



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

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



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

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






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


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

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

        /* PCコピーライト */
        .copyright {
            position: absolute;
            top: 190vw;
            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　ヘッター
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

            /* ヘッター背景 */
            .spfooterbg {
                display: block;
                top: 0vw; 
                left: 0vw; 
                width: 100vw; 
                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) {
                .spfooterbg,
                .splogo,
                .humbarger {
                    display: none; 
                }
            }




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


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

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





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

    /* ハンバーガーメニュー */
    .spmenubg,
    .humbargerclose,
    .spheaderbgright,
    .spheaderbgleft,
    .spmenutop,
    .spmenuservice,
    .spmenuoverview,
    .spmenucontactus
     {
    position: fixed; 
    height: auto;  
    z-index: 100;
    }

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

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

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



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



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

        /* 飾り：スライドイン用の初期位置 */
        .spheaderbgleft {
            transform: translateX(-100%);
        }
        .spheaderbgright {
            transform: translateX(100%);
        }

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

        /* スライドイン */
        .menu-open .spheaderbgleft {
            transform: translateX(0%);
        }
        .menu-open .spheaderbgright {
            transform: translateX(0%);
        }





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

        /* SP ファーストビュー動画 */
        .firstviewsp {
            position: absolute;
            top: 35vw;
            left: 1vw;
            width: 98vw;
            height: auto;
            opacity: 0; /* 初期状態は透明 */
            transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
        }   

        .firstviewsp.fade-in {
            opacity: 1; /* フェードイン後の状態 */
        }
        
         /* SP ファーストビュー動画 */
         .spbgfirstview {
            position: absolute;
            top: 33.3vw;
            left: 1vw;
            width: 98vw;
            height: auto;
            z-index: 97;
        }         


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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPサービス
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* SPサービスタイトル */
        .spservicetitle {
            position: absolute;
            top: 170vw;
            left: 13vw;
            width: 70vw;
            height: auto;
        }   

        /* SPサービス背景 */
        .spservicebg {
            position: absolute;
            top: 210vw;
            left: 0;
            width: 95vw;
            height: auto;
        } 
        
        /* SP営業戦略ボタン */
        .spstrategy {
            position: absolute;
            top: 260vw;
            left: 45vw;
            width: 45vw;
            height: auto;
        }         

        /* SP営業代行ボタン */
        .spsales {
            position: absolute;
            top: 210vw;
            left: 5vw;
            width: 45vw;
            height: auto;
        }   

        /* SPDXサポートボタン */
        .spdxsupport {
            position: absolute;
            top: 200vw;
            left: 65vw;
            width: 30vw;
            height: auto;
        } 

        /* SPサービス詳細 */
        .spservicedetail {
            position: absolute;
            top: 305vw;
            left: 10vw;
            width: 50vw;
            height: auto;
        } 

        @media (min-width: 601px) {
            .spservicetitle,
            .spservicebg,
            .spstrategy,
            .spsales,
            .spdxsupport,
            .spservicedetail

             {
                display: none; 
            }
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SPサービス（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



        /* 初期状態：透明＋スケール小 */
        .spstrategy,
        .spsales,
        .spdxsupport {
        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);
        }

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



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

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

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
(SP)OUR COMPANY
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* SPOURCOMPANYボタン */
        .ourcompanybgbutton {
            position: absolute;
            top: 347vw;
            left: 4vw;
            width: 90vw;
            height: auto;
            opacity: 0; /* 初期状態は透明 */
            transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
        }   

        .ourcompanybgbutton.fade-in {
            opacity: 1; /* フェードイン後の状態 */
        }

        /* SP詳細1 */
        .ourcompanydetail1 {
            position: absolute;
            top: 395vw;
            left: 13vw;
            width: 70vw;
            height: auto;
        } 
        
        /* SP詳細2 */
        .ourcompanydetail2 {
            position: absolute;
            top: 405vw;
            left: 13vw;
            width: 70vw;
            height: auto;
        }         

        /* SP詳細3 */
        .ourcompanydetail3 {
            position: absolute;
            top: 415vw;
            left: 13vw;
            width: 70vw;
            height: auto;
        }  

        @media (min-width: 601px) {
            .ourcompanybgbutton,
            .ourcompanydetail1,
            .ourcompanydetail2,
            .ourcompanydetail3

             {
                display: none; 
            }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
(SP)OUR COMPANY（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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

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




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

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

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

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

             {
                display: none; 
            }
        }