/* リセット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: 601px) {
            .pcmenubg {
                display: block; /* PC版では表示 */
                top: 0; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

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

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

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

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

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

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

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


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　社会背景
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 社会背景 */
    .socialbackground,
    .philosophy,
    .grandfather,
    .dog {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    }

        /* 社会背景 */
        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .socialbackground {
                display: block; /* PC版では表示 */
                top: 5vw; /* ビューポートの縦中央 */
                left: 0vw; /* 左端に固定 */
                width: 92.5vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
            }

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


            .philosophy {
                display: block; /* PC版では表示 */
                top: 20vw; /* ビューポートの縦中央 */
                left: 53vw; /* 左端に固定 */
                width: 40vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateX(50px); /* 最初は右に50pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .grandfather {
                display: block; /* PC版では表示 */
                top: 60vw; /* ビューポートの縦中央 */
                left: 73vw; /* 左端に固定 */
                width: 17vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .dog {
                display: block; /* PC版では表示 */
                top: 105vw; /* ビューポートの縦中央 */
                left: 68vw; /* 左端に固定 */
                width: 30vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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


            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .socialbackground,
                .philosophy,
                .grandfather,
                .dog {
                    display: none; /* スマホ版では非表示 */
                }
            }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　業務内容
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/            


    /* 業務内容 */
    .ourservicedetailtitle,
    .ourservicegraph
     {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    }


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

            .ourservicedetailtitle {
                display: block; /* PC版では表示 */
                top: 118vw; /* ビューポートの縦中央 */
                left: 12vw; /* 左端に固定 */
                width: 80vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
            .ourservicedetailtitle.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }


            .ourservicegraph {
                display: block; /* PC版では表示 */
                top: 130vw; /* ビューポートの縦中央 */
                left: 20vw; /* 左端に固定 */
                width: 60vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }
    
            .ourservicegraph.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }

        }

            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .ourservicedetailtitle,
                .ourservicegraph {
                    display: none; /* スマホ版では非表示 */
                }
            }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　会社概要
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 会社概要 */
    .overviewword,
    .kishi,
    .yamamoto,
    .overviewbg,
    .overviewdetail {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    }

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


            .overviewword {
                display: block; /* PC版では表示 */
                top: 180vw; /* ビューポートの縦中央 */
                left: 15vw; /* 左端に固定 */
                width: 25vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateX(-50px); /* 最初は左に50pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .kishi {
                display: block; /* PC版では表示 */
                top: 180vw; /* ビューポートの縦中央 */
                left: 51vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .yamamoto {
                display: block; /* PC版では表示 */
                top: 180vw; /* ビューポートの縦中央 */
                left: 71vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .overviewdetail {
                display: block; /* PC版では表示 */
                top: 210vw; /* ビューポートの縦中央 */
                left: 20vw; /* 左端に固定 */
                width: 70vw; /* 必要に応じて調整 */
            }


             }
             

            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .overviewword,
                .kishi,
                .yamamoto,
                .overviewbg,
                .overviewdetail {
                    display: none; /* スマホ版では非表示 */
                }
            }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　googlemap
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


            
         /* 背景PC版（601px以上の画面サイズ） */
               @media (min-width: 601px) {
              .iframe-wrp iframe {
                position: absolute;
                top: 160vw;
                left: 47vw; 
                width: 30%;
                height: 35%;
                padding-top: 75%;
                }
                }
            


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


    /* フッター */
    .footer,
    .tel,
    .contactbutton,
    .upbutton {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    z-index: 98; /* 他の要素より前面に表示 */
    }

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

            /* フッター */
            .footer {
                top: 313vw; /* ビューポートの縦中央 */
                left: 0vw; /* 右端に固定 */
                width: 100vw;  /* 必要に応じて調整 */
            } 

            /* 電話番号 */
            .tel {
                top: 366vw; /* ビューポートの縦中央 */
                left: 12vw; /* 右端に固定 */
                width: 23vw;  /* 必要に応じて調整 */
                cursor: pointer;
            }             

            .tel-link {
                display: inline-block;
            }


            /* お問い合わせボタン */
            .contactbutton {
                top: 368vw; /* ビューポートの縦中央 */
                left: 50vw; /* 右端に固定 */
                width: 30vw;  /* 必要に応じて調整 */
            }             
            
            /* 上部に戻るボタン */
            .upbutton {
                top: 377vw; /* ビューポートの縦中央 */
                left: 80vw; /* 右端に固定 */
                width: 10vw;  /* 必要に応じて調整 */
                cursor: pointer;
            }             
        }    

        /* スマホ版（600px以下） */
        @media (max-width: 600px) {
            .footer,
            .tel,
            .contactbutton,
            .upbutton {
                display: none;
            }
        }   




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







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


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

            .splogo {
                display: block; /* PC版では表示 */
                top: 5vw; /* ビューポートの縦中央 */
                left: 8vw; /* 左端に固定 */
                width: 40vw; /* 必要に応じて調整 */
                cursor: pointer;
                opacity: 0; /* 初期状態は透明 */
                transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
            }   
            
            .splogo.fade-in {
                opacity: 1; /* フェードイン後の状態 */
            }
            }
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .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;
        }

        /* 既存の `width`, `top`, `left` を維持 */
        .spheadertop {
            top: 20vw;
            left: 20vw;
            width: 90vw;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        .spheaderoverview {
            top: 41vw;
            left: 20vw;
            width: 71vw;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        .spheaderservice {
            top: 61vw;
            left: 20vw;
            width: 85vw;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        .spheaderreallife {
            top: 80vw;
            left: 20vw;
            width: 73vw;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        .spheadercontactus {
            top: 101vw;
            left: 20vw;
            width: 67vw;
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

        .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: 601px) {
            .humbager,
            .humbargerclose,
            .humbagermenu
             {
                display: none; /* PC版では非表示 */
            }
        }





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


    /* ファーストビュー */
    .spfirstview_1,
    .sprinen,
    .sprinenndetail,
    .spgrandfather,
    .spdog {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .spfirstview_1 {
                display: block; /* PC版では表示 */
                top: 28vw; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
            }

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

            .sprinen {
                display: block; /* PC版では表示 */
                top: 45vw; /* ビューポートの縦中央 */
                left: 70vw; /* 左端に固定 */
                width: 10vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }    

            .sprinen.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
            .sprinenndetail {
                display: block; /* PC版では表示 */
                top: 190vw; /* ビューポートの縦中央 */
                left: 10vw; /* 左端に固定 */
                width: 80vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }   

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

            .spgrandfather {
                display: block; /* PC版では表示 */
                top: 250vw; /* ビューポートの縦中央 */
                left: 40vw; /* 左端に固定 */
                width: 50vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }   

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

            .spdog {
                display: block; /* PC版では表示 */
                top: 310vw; /* ビューポートの縦中央 */
                left: 8vw; /* 左端に固定 */
                width: 60vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }  

            .spdog.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            }
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .spfirstview_1,
                .sprinen,
                .sprinenndetail,
                .spgrandfather,
                .spdog{
                    display: none; /* PC版では非表示 */
                }
            }


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

    /* サービス */
    .spservicetitle,
    .spserviceimage {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        }

         /* スマホ版（600px以下の画面サイズ） */
         @media (max-width: 600px) {
            .spservicetitle {
                display: block; /* PC版では表示 */
                top: 350vw; /* ビューポートの縦中央 */
                left: 0vw; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }    

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

            .spserviceimage  {
                display: block; /* PC版では表示 */
                top: 400vw; /* ビューポートの縦中央 */
                left: 9.5vw; /* 左端に固定 */
                width: 80vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }    

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

        }


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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　事務所概要
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 事務所概要 */
    .spoverviewbg02,
    .spoverviewtitle,
    .spceophoto,
    .spoverviewdetail {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .spoverviewbg02 {
                display: block; /* PC版では表示 */
                top: 510vw; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

            .spoverviewtitle {
                display: block; /* PC版では表示 */
                top: 500vw; /* ビューポートの縦中央 */
                left: 7vw; /* 左端に固定 */
                width: 60vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }    

            .spoverviewtitle.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
            .spceophoto {
                display: block; /* PC版では表示 */
                top: 530vw; /* ビューポートの縦中央 */
                left: 10vw; /* 左端に固定 */
                width: 80vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }   

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

            .spoverviewdetail {
                display: block; /* PC版では表示 */
                top: 590vw; /* ビューポートの縦中央 */
                left: 5.3vw; /* 左端に固定 */
                width: 90vw; /* 必要に応じて調整 */
            }   
          
             /* SP版地図（601px以上の画面サイズ）pcは上部に記載 */
            .iframe-wrp iframe {
                    position: absolute;
                    top: 583vw;
                    left: 10vw; 
                    width: 80%;
                    height: 25%;
                    padding-top: 75%;  
                    z-index: 96;               
                }
                  
            }


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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　社会背景
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 社会背景 */
    .spsocialbgtitle,
    .spsocialbgdetail {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .spsocialbgtitle {
                display: block; /* PC版では表示 */
                top: 882vw; /* ビューポートの縦中央 */
                left: 13.5vw; /* 左端に固定 */
                width: 70vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }

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

            .spsocialbgdetail {
                display: block; /* PC版では表示 */
                top: 905vw; /* ビューポートの縦中央 */
                left: 10.5vw; /* 左端に固定 */
                width: 80vw; /* 必要に応じて調整 */
            }

            }

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



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


    /* フッター */
    .spfooter,
    .spcontactusbutton,
    .sptel,
    .spuptopbutton {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .spfooter {
                display: block; /* PC版では表示 */
                top: 1280vw; /* ビューポートの縦中央 */
                left: 0; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

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

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

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

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