/* リセット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; /* 必要に応じて調整 */
                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: 600px) {
            .pcmenubg,
            .logo,
            .toppage,
            .aboutus,
            .survice,
            .qa,
            .inquiry {
                display: none; /* スマホ版では非表示 */
            }
        }



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


        /* 左ヘッター背景 */
        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .sideheader {
            position: relative;
            display: block; /* PC版では表示 */
            top: 6vw; /* ビューポートの縦中央 */
            left: 0; /* 左端に固定 */
            width: 35vw; /* 必要に応じて調整 */
            z-index: 96; /* 他の要素より前面に表示 */
        }

        .sideheader2 {
            position: relative;
            display: block; /* PC版では表示 */
            top: 0vw; /* ビューポートの縦中央 */
            left: 0; /* 左端に固定 */
            width: 35vw; /* 必要に応じて調整 */
            z-index: 96; /* 他の要素より前面に表示 */
        }

        }

        /* 左ヘッター文字（固定） */
        .ourserviceword,
        .hand,
        .inheritancebutton,
        .propertybutton,
        .guardianbutton,
        .familybutton,
        .willbutton,
        .dementiabutton,
        .afterdeathbutton,
        .leavebutton
        {
        position: fixed; /* 固定 */
        width: 100vw; /* ビューポートの幅に合わせる */
        z-index: 97; /* 他の要素より前面に表示 */
        opacity: 0;
        transform: translateY(50px); /* 下に50pxずらす */
        transition: opacity 1s ease-out, transform 1s ease-out;
        }


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

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

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

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

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

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

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

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

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

            .fade-in-up {
                opacity: 1;
                transform: translateY(0);
            }

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

            .fade-in-up {
                opacity: 1;
                transform: translateY(0);
            }

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

            .fade-in-up {
                opacity: 1;
                transform: translateY(0);
            }


        }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .sideheader,
            .sideheader2,
            .ourserviceword,
            .hand,
            .inheritancebutton,
            .propertybutton,
            .guardianbutton,
            .familybutton,
            .willbutton,
            .dementiabutton,        
            .afterdeathbutton,
            .leavebutton {
                display: none; /* スマホ版では非表示 */
            }
        }




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

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

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

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　サービス一覧
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* サービス一覧 */
    .survice01,
    .detailbutton,
    .onestoptitle,
    .onestopimage,
    .support,
    .contactusbutton,
    .survice02,
    .survice03,
    .survice04,
    .survice05,
    .survice06,
    .survice07,
    .survice08,
    .survice09 {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(30px); /* 最初は下に30pxずらす */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }


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

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

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

            .detailbutton.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
            .onestoptitle {
                display: block; /* PC版では表示 */
                top: 89vw; /* ビューポートの縦中央 */
                left: 38vw; /* 左端に固定 */
                width: 55vw; /* 必要に応じて調整 */
            }

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

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

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


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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

            }
    

            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .survice01,
                .detailbutton,
                .onestoptitle,
                .onestopimage,
                .support,
                .contactusbutton,
                .survice02,
                .survice03,
                .survice04,
                .survice05,
                .survice06,
                .survice07,
                .survice08,
                .survice09 {
                    display: none; /* スマホ版では非表示 */
                }
            }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　サービス一覧（タイトル）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* サービス一覧（タイトル */
    .title01,
    .title02,
    .title04,
    .title05,
    .title06,
    .title07,
    .title08,
    .title09 {
    position: absolute; /* 親要素に対しての比率 */
    height: auto; /* 高さを自動調整 */
    z-index: 95; /* 他の要素より前面に表示 */
    }


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

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

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

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

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

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

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

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

            }
    

            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .title01,
                .title02,
                .title04,
                .title05,
                .title06,
                .title07,
                .title08,
                .title09  {
                    display: none; /* スマホ版では非表示 */
                }
            }





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


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

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

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

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

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


            /* お問い合わせボタン */
            .contactbutton {
                top: 892vw; /* ビューポートの縦中央 */
                left: 50vw; /* 右端に固定 */
                width: 30vw;  /* 必要に応じて調整 */
            }             
            
            /* 上部に戻るボタン */
            .upbutton {
                top: 901vw; /* ビューポートの縦中央 */
                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;
            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: 68vw;
        }

        .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　お取り扱いサービスファーストビュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* ファーストビュー */
    .spoursurvicetitle,
    .spfirstview_2 {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    

        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .spoursurvicetitle {
                display: block; /* PC版では表示 */
                top: 35vw; /* ビューポートの縦中央 */
                left: 25vw; /* 左端に固定 */
                width: 50vw; /* 必要に応じて調整 */
            }

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

            .spfirstview_2 {
                display: block; /* PC版では表示 */
                top: 55vw; /* ビューポートの縦中央 */
                left: 0vw; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
                cursor: pointer;
            }        
            
            .spfirstview_2.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            }            
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .spoursurvicetitle,
                .spfirstview_2{
                    display: none; /* PC版では非表示 */
                }
            }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　お取り扱いサービス選択ボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 選択ボタン */
    .survicebutton01,
    .survicebutton02,
    .survicebutton03,
    .survicebutton04,
    .survicebutton05,
    .survicebutton06,
    .survicebutton07,
    .survicebutton08 {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */

        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            /* survicebutton の配置 */
            .spselectbutton img {
                position: absolute;
                left: 10vw;
                width: 80vw;
                cursor: pointer;
                opacity: 0; /* 初期は非表示 */
                transform: translateY(20px); /* 少し下から */
                transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            }

            /* 各ボタンの位置設定 */
            .survicebutton01 { top: 155vw; }
            .survicebutton02 { top: 170vw; } /* +15vw */
            .survicebutton03 { top: 185vw; } /* +15vw */
            .survicebutton04 { top: 200vw; } /* +15vw */
            .survicebutton05 { top: 215vw; } /* +15vw */
            .survicebutton06 { top: 230vw; } /* +15vw */
            .survicebutton07 { top: 245vw; } /* +15vw */
            .survicebutton08 { top: 260vw; } /* +15vw */

            /* 表示時のアニメーション */
            .spselectbutton img.show {
                opacity: 1;
                transform: translateY(0);
            }           
            }
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .survicebutton01,
                .survicebutton02,
                .survicebutton03,
                .survicebutton04,
                .survicebutton05,
                .survicebutton06,
                .survicebutton07,
                .survicebutton08{
                    display: none; /* PC版では非表示 */
                }
            }




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


    /* サービス内容 */
    .spsurvice01_1,
    .spsurvicedetailbutton,
    .sponestoptitle,
    .sponestop01,
    .sponestop02,
    .spconsulting,
    .spcontactusbutton_1,
    .spsurvice02_1,
    .spsurvice03_1,
    .spsurvice04_1,
    .spsurvice05_1,
    .spsurvice06_1,
    .spsurvice07_1,
    .spsurvice08_1,
    .spsurvice09_1
    
     {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;

        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {

            /* 01相続 */    
            .spsurvice01_1 {
                display: block; /* PC版では表示 */
                top: 315vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }

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

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

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

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

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

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

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

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

            .sponestop02.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
            .spconsulting {
                display: block; /* PC版では表示 */
                top: 900vw; /* ビューポートの縦中央 */
                left: 0vw; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
            }

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

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

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

            /* 02財産管理 */ 
            .spsurvice02_1 {
                display: block; /* PC版では表示 */
                top: 1100vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }

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


            /* 4後見人 */ 
            .spsurvice04_1 {
                display: block; /* PC版では表示 */
                top: 1350vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }  

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

             /* 5家族信託 */ 
             .spsurvice05_1 {
                display: block; /* PC版では表示 */
                top: 1930vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }           
            
            .spsurvice05_1.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
             /* 6遺言書 */ 
             .spsurvice06_1 {
                display: block; /* PC版では表示 */
                top: 2330vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }      

            .spsurvice06_1.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
             /* 7認知症対策 */ 
             .spsurvice07_1 {
                display: block; /* PC版では表示 */
                top: 2860vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }             
            
            .spsurvice07_1.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }

             /* 8死後事務委任 */ 
             .spsurvice08_1 {
                display: block; /* PC版では表示 */
                top: 3020vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }             
            
            .spsurvice08_1.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }

             /* 9まるっとお任せプラン */ 
             .spsurvice09_1 {
                display: block; /* PC版では表示 */
                top: 3780vw; /* ビューポートの縦中央 */
                left: 7.5vw; /* 左端に固定 */
                width: 85vw; /* 必要に応じて調整 */
            }             
            
            .spsurvice09_1.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }            

        }
    
        


        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .spsurvice01_1,
                .spsurvicedetailbutton,
                .sponestoptitle,
                .sponestop01,
                .sponestop02,
                .spconsulting,
                .spcontactusbutton_1,
                .spsurvice02_1,
                .spsurvice03_1,
                .spsurvice04_1,
                .spsurvice05_1,
                .spsurvice06_1,
                .spsurvice07_1,
                .spsurvice08_1,
                .spsurvice09_1 {
                    display: none; /* PC版では非表示 */
                }
            }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　上部に戻るボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* サービス内容 */
    .uptopbutton1,
    .uptopbutton2,
    .uptopbutton4,
    .uptopbutton5,
    .uptopbutton6,
    .uptopbutton7,
    .uptopbutton8,
    .uptopbutton9
     {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;

        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {

            /* 01相続 */    
            .uptopbutton1{
                display: block; /* PC版では表示 */
                top: 1065vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }

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

             /* 02財産管理 */    
             .uptopbutton2{
                display: block; /* PC版では表示 */
                top: 1325vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }   
            
            .uptopbutton2.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }

        
              /* 04後見人 */    
              .uptopbutton4{
                display: block; /* PC版では表示 */
                top: 1900vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }       

            .uptopbutton4.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
              /* 05家族信託 */    
              .uptopbutton5{
                display: block; /* PC版では表示 */
                top: 2305vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }       

            .uptopbutton5.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
              /* 06遺言書 */    
              .uptopbutton6{
                display: block; /* PC版では表示 */
                top: 2835vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }       
            
            .uptopbutton6.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            
               /* 07認知症対策 */    
               .uptopbutton7{
                display: block; /* PC版では表示 */
                top: 2990vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }    
            
            .uptopbutton7.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }

             /* 08死後事務委任 */    
               .uptopbutton8{
                display: block; /* PC版では表示 */
                top: 3745vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }    
            
            .uptopbutton8.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }            

            /* 09まるっとお任せプラン */    
               .uptopbutton9{
                display: block; /* PC版では表示 */
                top: 4432vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }    
            
            .uptopbutton9.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }                  
        }
    
    
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .uptopbutton1,
                .uptopbutton2,
                .uptopbutton4,
                .uptopbutton5,
                .uptopbutton6,
                .uptopbutton7,
                .uptopbutton8,
                .uptopbutton9 {
                    display: none; /* PC版では非表示 */
                }
            }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス内容（タイトル）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* サービス内容 */
    .sptitle01,
    .sptitle02,
    .sptitle03,
    .sptitle04,
    .sptitle05,
    .sptitle06,
    .sptitle07, 
    .sptitle08, 
    .sptitle09
     {
        position: absolute; /* 親要素に対しての比率 */
        height: auto; /* 高さを自動調整 */
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(30px); /* 最初は下に30pxずらす */
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;

        }
    
         /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
            .sptitle01 {
                display: block; /* PC版では表示 */
                top: 295vw; /* ビューポートの縦中央 */
                left: 8vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .sptitle01,
                .sptitle02,
                .sptitle03,
                .sptitle04,
                .sptitle05,
                .sptitle06,
                .sptitle07,
                .sptitle08,
                .sptitle09 {
                    display: none; /* PC版では非表示 */
                }
            }








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


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

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

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

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

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