/* リセット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); /* 上にフワッとする */
        }







    
/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCSP　お問い合わせフォーム
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 750px) {
            .iframe-container {
                width: 100vw; /* 幅を80%に設定 */
                margin: 0 auto; /* 中央揃え */
                text-align: center;
            position: absolute;
            top: calc(8vw + 6vw); /* `contactusbutton_1` の `top` + 20vw */
            left: 50%;
            transform: translateX(-50%);
        }
            }
            
            .iframe-container iframe {
                width: 100%; /* 親要素に合わせる */
                height: 80vw; /* 高さを固定 */
                display: block; /* インライン要素の隙間をなくす */
            }

    
    
    
            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 749px) {
                .iframe-container {
                    position: absolute;
                    transform: translateX(-50%);
                    left: 50%;
                    top:50vw;
                    width: 100vw; /* 幅を80%に設定 */
                    margin: 0 auto; /* 中央揃え */
                    text-align: center;
                    z-index: 101;

    
            
    
                }
                
                .iframe-container iframe {
                    width: 100%; /* 親要素に合わせる */
                    height: 480vw; /* 高さを固定 */
                    display: block; /* インライン要素の隙間をなくす */
                    opacity: 1 !important;
                    visibility: visible !important;
                    border: 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: 101; 
            }

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

            @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: 102;
    }

            /* ハンバーガー背景 */
            .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%);
        }