/* リセット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; /* 必要に応じて調整 */
        }
        }

        /* 左ヘッター文字（固定） */
        .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,
            .ourserviceword,
            .hand,
            .inheritancebutton,
            .propertybutton,
            .guardianbutton,
            .familybutton,
            .willbutton,
            .dementiabutton,        
            .afterdeathbutton,
            .leavebutton {
                display: none; /* スマホ版では非表示 */
            }
        }





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


    /* サービス一覧 */
    .survice01,
    .detailbutton,
    .support,
    .contactusbutton,
    .graph {
    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: 10vw; /* ビューポートの縦中央 */
                left: 38vw; /* 左端に固定 */
                width: 55vw; /* 必要に応じて調整 */
            }

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

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

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

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

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

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

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

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






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


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

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

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

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

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


            /* お問い合わせボタン */
            .contactbutton {
                top: 153vw; /* ビューポートの縦中央 */
                left: 50vw; /* 右端に固定 */
                width: 30vw;  /* 必要に応じて調整 */
            }             
            
            /* 上部に戻るボタン */
            .upbutton {
                top: 164vw; /* ビューポートの縦中央 */
                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: 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: 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: 60vw; /* ビューポートの縦中央 */
                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,
    .survicebutton04,
    .survicebutton05,
    .survicebutton06,
    .survicebutton07,
    .survicebutton08,
    .survicebutton09 {
        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 */
            .survicebutton04 { top: 185vw; } /* +15vw */
            .survicebutton05 { top: 200vw; } /* +15vw */
            .survicebutton06 { top: 215vw; } /* +15vw */
            .survicebutton07 { top: 230vw; } /* +15vw */
            .survicebutton08 { top: 245vw; } /* +15vw */
            .survicebutton09 { 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,
                .survicebutton09{
                    display: none; /* PC版では非表示 */
                }
            }


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


    /* サービス内容 */
    .spsurvice01_1,
    .spprice,
    .spconsulting,
    .spcontactusbutton_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); /* 上にフワッとする */
            }

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

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

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

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

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

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

        


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



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


    /* サービス内容 */
    .uptopbutton1
    {
        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: 760vw; /* ビューポートの縦中央 */
                left: 76vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }


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


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


    /* サービス内容 */
    .sptitle01
    {
        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: 300vw; /* ビューポートの縦中央 */
                left: 8vw; /* 左端に固定 */
                width: 15vw; /* 必要に応じて調整 */
            }

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

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



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


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

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

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

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

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