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


/* 親要素コンテナのスタイル */
.background{
    position: relative;
    width: 100vw; /* ビューポートの幅に合わせる */
    min-height: 100vh; /* ビューポートの高さに合わせる */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    align-items:flex-start ; /* フレックスアイテムを交差軸に沿って引き伸ばし、コンテナのサイズに合わせます。 */

}


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

    /* ヘッター全体 */
    .pcmenubg,
    .logo,
    .toppage,
    .aboutus,
    .survice,
    .qa,
    .inquiry {
    position: fixed; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    z-index: 99; /* 他の要素より前面に表示 */
    }


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 750px) {
            .pcmenubg {
                display: block; /* PC版では表示 */
                top: 0; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

            .logo {
                display: block; /* PC版では表示 */
                top: 2vw; /* ビューポートの縦中央 */
                left: 5vw; /* 右端に固定 */
                width: 17vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

            .toppage {
                display: block; /* PC版では表示 */
                top: 2.1vw; /* ビューポートの縦中央 */
                left: 35vw; /* 右端に固定 */
                width: 8.5vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

            .aboutus {
                display: block; /* PC版では表示 */
                top: 2.1vw; /* ビューポートの縦中央 */
                left: 45vw; /* 右端に固定 */
                width: 15vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

            .survice {
                display: block; /* PC版では表示 */
                top: 2.1vw; /* ビューポートの縦中央 */
                left: 61vw; /* 右端に固定 */
                width: 8.5vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

            .qa {
                display: block; /* PC版では表示 */
                top: 2.1vw; /* ビューポートの縦中央 */
                left: 69.3vw; /* 右端に固定 */
                width: 12vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

            .inquiry {
                display: block; /* PC版では表示 */
                top: 2.2vw; /* ビューポートの縦中央 */
                left: 83vw; /* 右端に固定 */
                width: 10vw; /* 必要に応じて調整 */
                cursor: pointer;
            }
        }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 749px) {
            .pcmenubg,
            .logo,
            .toppage,
            .aboutus,
            .survice,
            .qa,
            .inquiry {
                display: none; /* スマホ版では非表示 */
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PCSP　タイトル
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 750px) {

            /* タイトルPC */
            .contactusbutton_1 {
                position: absolute; /* 親要素に対しての比率 */
                height: auto; /* 高さを自動調整 */
                display: block; /* PC版では表示 */
                top: 10vw; /* ビューポートの縦中央 */
                left: 35vw; /* 右端に固定 */
                width: 25vw;  /* 必要に応じて調整 */
                z-index: 98; /* 他の要素より前面に表示 */
            }          
        }    


        /* スマホ版（600px以下） */
        @media (max-width: 749px) {
            /* タイトルSP*/
            .contactusbutton_1 {
                position: absolute; /* 親要素に対しての比率 */
                height: auto; /* 高さを自動調整 */
                display: block; /* PC版では表示 */
                top: 55vw; /* ビューポートの縦中央 */
                left: 18vw; /* 右端に固定 */
                width: 60vw;  /* 必要に応じて調整 */
                z-index: 98; /* 他の要素より前面に表示 */
            }    
        }   


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


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 750px) {
        .iframe-container {
            width: 100vw; /* 幅を80%に設定 */
            margin: 0 auto; /* 中央揃え */
            text-align: center;
        position: absolute;
        top: calc(16vw + 6vw); /* `contactusbutton_1` の `top` + 20vw */
        left: 50%;
        transform: translateX(-50%);

        }
        
        .iframe-container iframe {
            width: 100%; /* 親要素に合わせる */
            height: 100vw; /* 高さを固定 */
            display: block; /* インライン要素の隙間をなくす */
            border: none; /* フレームの枠線を消す */
        }
         }



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

            }
            
            .iframe-container iframe {
                width: 100%; /* 親要素に合わせる */
                height: 620vw; /* 高さを固定 */
                display: block; /* インライン要素の隙間をなくす */
                opacity: 1 !important;
                visibility: visible !important;
                border: none; /* フレームの枠線を消す */
            }
             }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@
SP
@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/





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


    /* ヘッター全体 */
    .headerbg,
    .splogo {
        position: fixed; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        z-index: 98; /* 他の要素より前面に表示 */
        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 749px) {
            .headerbg {
                display: block; /* PC版では表示 */
                top: 0; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

            .splogo {
                display: block; /* PC版では表示 */
                top: 5vw; /* ビューポートの縦中央 */
                left: 8vw; /* 左端に固定 */
                width: 40vw; /* 必要に応じて調整 */
                cursor: pointer;
                z-index: 100; /* 他の要素より前面に表示 */
            }   
            
            }
  
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 750px) {
                .headerbg,
                .splogo{
                    display: none; /* PC版では非表示 */
                }
            }


 /* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ハンバーガー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/
       
        /* ハンバーガーメニュー（デフォルト非表示） */
        .humbagermenu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: none; /* 初期は非表示 */
            z-index: 100;
        }

        /* メニューを開いたときのスタイル */
        .humbagermenu.active {
            display: block;
        }

        /* ハンバーガーメニューの背景 */
        .humbargerbg1 {
            position: fixed;
            width: 100%;
            height: auto;
            z-index: 99;
        }

        /* 各メニューリンクを正しく配置 */
        .humbagermenu a {
            display: block; /* 画像を正しく表示 */
            text-align: center;
        }

        /* メニュー画像 */
        .spheadertop,
        .spheaderoverview,
        .spheaderservice,
        .spheaderreallife,
        .spheadercontactus {
            cursor: pointer;
            position: absolute;
            z-index: 101;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        /* 既存の `width`, `top`, `left` を維持 */
        .spheadertop {
            top: 20vw;
            left: 20vw;
            width: 90vw;
        }

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

        .spheaderoverview {
            top: 41vw;
            left: 20vw;
            width: 71vw;
        }

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

        .spheaderservice {
            top: 61vw;
            left: 20vw;
            width: 85vw;
        }

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

        .spheaderreallife {
            top: 80vw;
            left: 20vw;
            width: 73vw;
        }

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

        .spheadercontactus {
            top: 101vw;
            left: 20vw;
            width: 65vw;
        }

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

        /* ハンバーガーアイコン */
        .humbager {
            position: fixed;
            top: 8vw;
            left: 73vw;
            width: 13vw;
            cursor: pointer;
            z-index: 102;
        }

        /* クローズボタン */
        .humbargerclose {
            position: fixed;
            top: 11vw;
            left: 73vw;
            width: 13vw;
            cursor: pointer;
            z-index: 102;
            display: none;
        }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 750px) {
            .humbager,
            .humbargerclose,
            .humbagermenu
             {
                display: none; /* PC版では非表示 */
            }
        }