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


html, body {
    overflow-x: hidden;
  }




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

}


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

            .reallifeword {
                position: absolute;
                display: block; /* PC版では表示 */
                top: 13vw; /* ビューポートの縦中央 */
                left: 30vw; /* 左端に固定 */
                width: 35vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transition: opacity 1.5s ease-in-out; /* フェードインアニメーション */
            }

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


            .case01button {
                position: absolute;
                display: block; /* PC版では表示 */
                top: 25vw; /* ビューポートの縦中央 */
                left: 9vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.5s ease;
            }

            .case02button {
                position: absolute;
                display: block; /* PC版では表示 */
                top: 25vw; /* ビューポートの縦中央 */
                left: 30vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.5s ease;
            }

            .case03button {
                position: absolute;
                display: block; /* PC版では表示 */
                top: 25vw; /* ビューポートの縦中央 */
                left: 51vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.5s ease;
            }

            .case04button {
                position: absolute;
                display: block; /* PC版では表示 */
                top: 25vw; /* ビューポートの縦中央 */
                left: 73vw; /* 左端に固定 */
                width: 18vw; /* 必要に応じて調整 */
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.5s ease;
            }

            /* ケース01〜04フェードイン＆上にふわっと */
            .fade-in-up {
                opacity: 1;
                transform: translateY(0);
            }

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

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


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

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


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

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


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

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

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

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

            /* スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .reallifebg,
                .reallifeword,
                .case01button,
                .case02button,
                .case03button,
                .case04button,
                .qabutton_1,
                .case01_1,
                .case02_1,
                .case03_1,
                .case04_1 {
                    display: none; /* スマホ版では非表示 */
                }
            }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　よくある質問（タイトル）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


            /* よくある質問タイトル */
            /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .qaword {
                    position: absolute;
                    display: block; /* PC版では表示 */
                    top: 312vw; /* ビューポートの縦中央 */
                    left: 30vw; /* 左端に固定 */
                    width: 35vw; /* 必要に応じて調整 */
                    opacity: 0; /* 初期状態は透明 */
                    transform: translateY(30px); /* 最初は下に30pxずらす */
                    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
                }

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

            }

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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　よくある質問（アコーディオン形式）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/            


        /* QAコンテナ */
        .faq-container {
            position: absolute;
            top: 330vw; /* 配置位置 */
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px; /* 余白 */
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        /* 各質問ブロック */
        .faq-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px; /* 質問と答えの間の余白 */
        }

        /* 質問の画像 */
        .faq {
            width: 80%;
            cursor: pointer; /* クリック可能にする */
        }       

        /* 答えの画像（デフォルトで非表示） */
        .faa {
            width: 65%;
            display: none; /* 初期は隠す */
        }

        /* 質問の画像 */
        .a4 {
            cursor: pointer; /* クリック可能にする */
        }        


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





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


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

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

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

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

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


            /* お問い合わせボタン */
            .contactbutton {
                top: 135vw; /* ビューポートの縦中央 */
                left: 50vw; /* 右端に固定 */
                width: 30vw;  /* 必要に応じて調整 */
                cursor: pointer;
            }             
            
            /* 上部に戻るボタン */
            .upbutton {
                top: 143vw; /* ビューポートの縦中央 */
                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　事例紹介タイトル背景
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

            .spreallifetitle {
                display: block; /* PC版では表示 */
                top: 40vw; /* ビューポートの縦中央 */
                left: 16vw; /* 左端に固定 */
                width: 65vw; /* 必要に応じて調整 */
                opacity: 0; /* 初期状態は透明 */
                transform: translateY(30px); /* 最初は下に30pxずらす */
                transition: opacity 1.2s ease-out, transform 1.2s ease-out;
            }  
            
            .spreallifetitle.fade-in-up {
                opacity: 1; /* フェードイン */
                transform: translateY(0); /* 上にフワッとする */
            }
            }
    
        
        /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .spreallifebg,
                .spreallifetitle{
                    display: none; /* PC版では非表示 */
                }
            }






/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　事例紹介ボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 事例紹介タイトル背景 */
    .spexbutton1,
    .spexbutton2,
    .spexbutton3,
    .spexbutton4,
    .spqabutton_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) {
            .spexbutton1 {
                display: block; /* PC版では表示 */
                top: 65vw; /* ビューポートの縦中央 */
                left: 4.5vw; /* 左端に固定 */
                width: 43vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

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

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

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

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

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

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

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

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







/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　事例紹介ケース
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 事例紹介タイトル背景 */
    .spcase01_1,
    .spcase02_1,
    .spcase03_1,
    .spcase04_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) {
            .spcase01_1{
                display: block; /* PC版では表示 */
                top: 260vw; /* ビューポートの縦中央 */
                left: 6.5vw; /* 左端に固定 */
                width: 100vw; /* 必要に応じて調整 */
                cursor: pointer;
            }

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

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

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

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

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

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









/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　質問（タイトルとボタン）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　質問
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* QAコンテナ */
        .spqa-container {
            position: absolute;
            top: 1180vw; /* 配置位置 */
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px; /* 余白 */
            opacity: 0; /* 初期状態は透明 */
            transform: translateY(30px); /* 最初は下に30pxずらす */
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

        /* 各質問ブロック */
        .spqa-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px; /* 質問と答えの間の余白 */
        }

        /* 質問の画像 */
        .spq {
            width: 100%;
            cursor: pointer; /* クリック可能にする */
        }

        /* 答えの画像（デフォルトで非表示） */
        .spa {
            width: 85%;
            display: none; /* 初期は隠す */
        }

        /* QAボタン（最後に表示） */
        .spqabutton {
            width: 100%;
            margin-top: 20px; /* 上に余白をつける */
        }

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





                


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

.spfooter,
.spcontactusbutton,
.sptel,
.spuptopbutton{
    position: absolute; /* 親要素に対しての比率 */
    width: 100vw;  /* 必要に応じて調整 */
    left: 0vw; /* 右端に固定 */
    height: auto; /* 高さを自動調整 */
    z-index: 98; /* 他の要素より前面に表示 */
    }


         /* スマホ版（600px以下の画面サイズ） */
         @media (max-width: 600px) {
            .spfooter {
                top: 240vw;
                left:0vw;
                width:100vw;
            }

            .spcontactusbutton {
                top: 410vw;
                left:10vw;
                width:80vw;
                cursor: pointer;
            }

            .sptel {
                top: 445vw;
                left:14vw;
                width:60vw;
                cursor: pointer;
            }

            .spuptopbutton {
                top: 490vw;
                left:40vw;
                width:20vw;
                cursor: pointer;
                
            }
        }



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