/* リセット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;
    align-items: flex-start;
}


/* 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ファーストビュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC ファーストビュー動画 */
        .companyinfo {
            position: absolute;
            top: 15vw;
            left: 9.5vw;
            width: 85vw;
            height: auto;
        }



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




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


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

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

        /* PCコピーライト */
        .copyright {
            position: absolute;
            top: 80vw;
            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; 
    z-index: 99; 
    }

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

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

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

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




/* @@@@@@@@@@@@@@@@@@@@@@@@@
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会社概要 */
        .overview {
            position: absolute;
            top: 46vw;
            left: 5vw;
            width: 90vw;
            height: auto;
        }  


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




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

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

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

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

             {
                display: none; 
            }
        }                        





/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCSP　ヘッターとファーストビュー（動作）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

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