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



/* 親要素コンテナのスタイル */
.background{
    position: relative;
    width: 100%; /* ビューポートの幅に合わせる */
    min-height: 100vh; /* ビューポートの高さに合わせる */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    align-items:flex-start ; /* フレックスアイテムを交差軸に沿って引き伸ばし、コンテナのサイズに合わせます。 */
    overflow-x: hidden;　
    font-family: "fot-klee-pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","Yu Gothic", "游ゴシック体", sans-serif;

}




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

    /* ヘッター全体 */
    .pcheaderbg,
    .logoblack,
    .toppage,
    .service,
    .works,
    .message,
    .aboutus,
    .qa,
    .recruit,
    .insta,
    .line,
    .contactus,
    .supportservices{
    position: fixed; 
    height: auto; 
    z-index: 99; 
    }


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .pcheaderbg {
                display: block; 
                top: 0; 
                left: 0; 
                width: 100vw; 
            }

            /* ヘッダー背景初期状態：薄い（20%） */
            .pcheaderbg {
                opacity: 0.2;
                transition: opacity 0.3s ease; /* ふわっと切り替え */
            }

            /* ヘッダー背景スクロール後：濃い（90%） */
            .pcheaderbg.is-scrolled {
                opacity: 0.9;
            }            

            .logoblack {
                display: block; 
                top: 1.9vw; 
                left: 5vw; 
                width: 6vw; 
            } 

            .toppage {
                display: block; 
                top: 2.2vw; 
                left: 14vw; 
                width: 6vw; 
            }             

            .service {
                display: block; 
                top: 3.1vw;
                left: 23vw; 
                width: 10vw; 
            }               

            .works {
                display: block;
                top: 2.3vw; 
                left: 34vw;
                width: 7.5vw;
            }  

            .supportservices{
                display: block;
                top: 2.8vw; 
                left: 43vw; 
                width: 10.5vw;
            }             

            .message {
                display: block; 
                top: 2.2vw; 
                left: 56vw; 
                width: 5.7vw; 
            }   

            .aboutus {
                display: block; 
                top: 2.2vw; 
                left: 64.5vw; 
                width: 6.3vw; 
            } 

            .qa {
                display: block; 
                top: 2.2vw; 
                left: 72.5vw; 
                width: 5.7vw; 
            } 

            .recruit {
                display: block; 
                top: 2.2vw; 
                left: 80vw; 
                width: 5.7vw; 
            }  

            .insta {
                display: block; 
                top: 3.3vw; 
                left: 88vw; 
                width: 1.6vw; 
            }                       
            .line {
                display: block; 
                top: 3.3vw; 
                left: 91vw; 
                width: 1.6vw; 
            } 

            .contactus {
                display: block; 
                top: 7vw; 
                right: 0vw; 
                width: 20vw; 
            }         
            }         

        

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .pcheaderbg,
            .logoblack,
            .toppage,
            .service,
            .works,
            .message,
            .aboutus,
            .qa,
            .recruit,
            .insta,
            .line,
            .contactus,
            .supportservices{
                display: none; 
            }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ヘッター（アニメ)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
           /*＜アニメ＞上からふわっと降りてくる*/ 
            @keyframes headerDrop {
            0% {
                transform: translateY(-2.5vw);
            }
            100% {
                transform: translateY(0);
            }
            }     
            
            /* ヘッダー背景初期状態：薄い */
            .pcheaderbg{
            opacity: 0.2;
            transition: opacity 0.3s ease;
            }

            /* スクロール後：不透明 */
            .pcheaderbg.is-scrolled{
            opacity: 1;
            }

            .logoblack,
            .toppage,
            .service,
            .works,
            .supportservices,
            .message,
            .aboutus,
            .qa,
            .recruit,
            .insta,
            .line{
                animation: headerDrop 700ms ease-out both;
            }

            .toppage, .service, .works, .supportservices, .message, .aboutus, .qa, .recruit{
                animation-delay: 80ms;
            }
            .insta, .line{
                animation-delay: 120ms;
            }


           /*＜アニメ＞右横から出てくる*/            
            @keyframes contactSlideIn {
            0% {
                transform: translateX(4vw);  /* 右から */
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
            }

            .contactus{
                animation: contactSlideIn 700ms ease-out both;
                animation-delay: 160ms; 
            }
            }




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


    /* ファーストビュー */
    .fvbackgroundpc,
    .fvtitle {
    position: absolute; 
    height: auto; 
    }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .fvbackgroundpc {
                display: block; 
                top: 0vw; 
                left: 0vw; 
                width: 100vw; 
            }    

            .fvtitle {
                display: block; 
                top: 12vw; 
                left: 34vw; 
                width: 30vw; 
            }     
            }               


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

        }

   
      
 /* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ファーストビュー（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* フェードイン */
        @keyframes fadeInSoft {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
        }

    @media (min-width: 601px) {
        /* 初期状態（見えていない） */
        .fvtitle{
        opacity: 0;
        }

        /* 表示されたら発火 */
        .fvtitle {
        animation: fadeInSoft 1000ms ease-out forwards;
        }
        }      
        
    

        


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



    /* タイトルボタン */
        .grants,
        .propertyinsurance,
        .insurancereview,
        .loan,
        .livingcostreview{
    position: absolute; 
    height: auto; 
    }


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

            .grants {
                display: block; 
                top: 27vw; 
                left: 5vw; 
                width: 20vw; 
            } 

            .propertyinsurance {
                display: block; 
                top: 32vw; 
                left: 5vw; 
                width: 20vw; 
            } 
            
            .insurancereview {
                display: block; 
                top: 37vw; 
                left: 5vw; 
                width: 20vw; 
            } 
            
            .loan{
                display: block; 
                top: 42vw; 
                left: 5vw; 
                width: 20vw; 
            } 
            
             .livingcostreview {
                display: block; 
                top: 47vw; 
                left: 5vw; 
                width: 20vw; 
            }            
            }         

        

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .grants,
        .propertyinsurance,
        .insurancereview,
        .loan,
        .livingcostreview{
                display: none; 
            }
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　サービス一覧（背景）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



    /* ヘッター全体 */
        .supportbg1,
        .supportbg2,
        .supportbg3,
        .supportbg4,
        .supportbg5{
    position: absolute; 
    height: auto; 
    }


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        
        .supportbg1,
        .supportbg2,
        .supportbg3,
        .supportbg4,
        .supportbg5{
                display: block; 
                top: 22vw; 
                left: 27vw; 
                width: 70vw; 
            }          
            }         

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .supportbg1,
        .supportbg2,
        .supportbg3,
        .supportbg4,
        .supportbg5{
                display: none; 
            }
        }




     /* @@@@@@@@@@@@@@@@@@@@@@@@@
    PC　サービス一覧（絵文字とボタン)
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/  


    /* ヘッター全体 */
        .checkbutton01,
        .checkbutton02,
        .checkbutton03,
        .checkbutton04,
        .checkbutton05,
        .icon01,
        .icon02,
        .icon03,
        .icon04,
        .icon05{
    position: absolute; 
    height: auto; 
    }


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        
        .checkbutton01,
        .checkbutton02,
        .checkbutton03,
        .checkbutton04,
        .checkbutton05{
                display: block; 
                left: 37vw; 
                width: 1.5vw; 
            }   
            
        .checkbutton01{
                top: 82.3vw; 
            }              

        .checkbutton02{
                top: 92.4vw; 
            }      

        .checkbutton03{
                top: 87.3vw; 
            }                  

        .checkbutton04{
                top: 82.3vw; 
            }   

        .checkbutton05{
                top: 82.3vw; 
            }      
            
        .icon01,
        .icon02,
        .icon03,
        .icon05{
                display: block; 
                top: 28vw; 
                left: 33vw; 
                width: 3vw; 
            }     
 
        .icon04{
                display: block; 
                top: 29vw; 
                left: 33vw; 
                width: 3vw; 
            }              

            }         

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .checkbutton01,
        .checkbutton02,
        .checkbutton03,
        .checkbutton04,
        .checkbutton05,
        .icon01,
        .icon02,
        .icon03,
        .icon04,
        .icon05{
                display: none; 
            }
        }


     /* @@@@@@@@@@@@@@@@@@@@@@@@@
    PC　サービス一覧（文字）
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/   

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

        /* 網羅的な補助金サポート */            
            .title01,
            .title02,
            .title03,
            .title04,
            .title05 {
            position: absolute;           
            top: 28vw;                    
            left: 37vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 1.5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext01,
            .maintext02,
            .maintext03,
            .maintext04,
            .maintext05 {
            position: absolute;           
            top: 33vw;                    
            left: 37vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 1.1vw;              /* 文字サイズ*/
            line-height: 2.5vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary01,
            .summary02,
            .summary03,
            .summary04,
            .summary05 {
            position: absolute;                              
            left: 37vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 1.5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary01{       
            top: 77vw;    
            }   

            .summary02{       
            top: 87vw;    
            } 
            
            .summary03{       
            top: 82vw;    
            } 
            
            .summary04{       
            top: 77vw;    
            } 
            
            .summary05{       
            top: 77vw;    
            }             

            .summarytext01,
            .summarytext02,
            .summarytext03,
            .summarytext04,
            .summarytext05 {
            position: absolute;                              
            left: 40.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 1.1vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .summarytext01 {          
            top: 82vw;                    
            }  

            .summarytext02 {          
            top: 92vw;                    
            }  

             .summarytext03 {          
            top: 87vw;                    
            }  
            
            .summarytext04 {          
            top: 82vw;                    
            }  
            
            .summarytext05 {          
            top: 82vw;                    
            }              

        } 

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .title01,
        .title02,
        .title03,
        .title04,
        .title05,
        .maintext01,
        .maintext02,
        .maintext03,
        .maintext04,
        .maintext05,
        .summary01,
        .summary02,
        .summary03,
        .summary04,
        .summary05,
        .summarytext01,
        .summarytext02,
        .summarytext03,
        .summarytext04,
        .summarytext05 {
                display: none; /* スマホ版では非表示 */
            }
        }  




/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　サービス（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* contents を切り替えるための共通クラス */
        .contents{
        display: none;   /* 初期は全部隠す */
        }

        /* JSで active が付いたものだけ表示 */
        .contents.is-active{
        display: block;
        }

        /* 画像ボタンをbuttonにしても見た目を崩さない */
        .tab-btn{
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        }

        /* button内のimgが変に縮まないように */
        .tab-btn img{
        display: block;
        width: 100%;
        height: auto;
        }









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


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

        /* フッター全体の基準箱 */
        .site-footer{
            position: relative;   
            width: 100vw;
            margin: 113vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }


            .fotterback{
                display: block; 
                width: 100vw;
                height:auto; 
            }       
            
             .contactform{
                position: absolute;  
                top: 11.5vw; 
                left: 40.8vw; 
                width: 12.5vw; 
            }  
            
            .lineregistration{
                position: absolute; 
                top: 11.5vw; 
                left: 56vw; 
                width: 12.5vw; 
            }  
            
            .estimate{
                position: absolute;  
                top: 11.5vw; 
                left: 70.8vw; 
                width: 7vw; 
            }              

            .telnumber {
            position: absolute;           
            top: 12.8vw;                    
            left: 22vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 1.8vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            } 

            .businesshours03 {
            position: absolute;           
            top: 15vw;                    
            left: 19vw;                   
            z-index: 10;     
            
            font-family: "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 0.9vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            } 

            .fotterlogo{
                position: absolute;   
                top: 25vw; 
                left: 7vw; 
                width: 12vw; 
            }  

            .telmark{
                position: absolute;  
                top: 27vw; 
                left: 22vw; 
                width: 1.8vw; 
            }  

            .mapmark{
                position: absolute;   
                top: 31vw; 
                left: 22.3vw; 
                width: 1.2vw; 
            }     
            
            .telnumber02 {
            position: absolute;            
            top: 26.9vw;                    
            left: 25vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif ;
            font-weight: 500;
            font-style: normal;

            color: #000000;             
            font-size: 1.5vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }            

            .businesshours04 {
            position: absolute;           
            top: 29vw;                    
            left: 25vw;                   
            z-index: 10;     
            
            font-family: "fot-klee-pro", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #000000;             
            font-size: 0.8vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            } 

            .adress{
            position: absolute;           
            top: 31vw;                    
            left: 25vw;                   
            z-index: 10;     
            
            font-family: "fot-klee-pro", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #000000;             
            font-size: 1.3vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }     
            
            .instablack{
                position: absolute;   
                top: 27vw; 
                left: 44.1vw; 
                width: 1.8vw; 
            }                

            .lineblack{
                position: absolute; 
                top: 27vw; 
                left: 46.7vw; 
                width: 1.8vw; 
            }    

            .fottoppage{
                position: absolute;  
                top: 23vw; 
                left: 55vw; 
                width: 15vw; 
            }          

            .fotservice{
                position: absolute;  
                top: 26vw; 
                left: 55vw; 
                width: 16.7vw; 
            }               

            .fotworks{
                position: absolute;   
                top: 29.5vw; 
                left: 55vw; 
                width: 14.2vw; 
            } 

            .fotmessage{
                position: absolute;  
                top: 32.5vw; 
                left: 55vw; 
                width: 16.2vw; 
            } 

            .fotsupportservices{
                position: absolute;  
                top: 36vw; 
                left: 55vw; 
                width: 22vw; 
            }             

            .fotaboutus{
                position: absolute;   
                top: 23vw; 
                left: 75vw; 
                width: 13.5vw; 
            }           

            .fotqa{
                position: absolute;   
                top: 26vw; 
                left: 75vw; 
                width: 15vw; 
            }             

            .fotrecruit{
                position: absolute;   
                top: 29.5vw; 
                left: 75vw; 
                width: 13.6vw; 
            } 

            .fotcontact{
                position: absolute;   
                top: 32.5vw; 
                left: 75vw; 
                width: 18.3vw; 
            } 

            .copyright{
            position: absolute;           
            top: 41.5vw;                    
            left: 36.5vw;                   
            z-index: 10;     
            
            font-family: "fot-klee-pro", sans-serif ;
            font-weight: 500;
            font-style: normal;

            color: #FFFFFF;             
            font-size: 1.2vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            } 


        }     


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .fotterback,
            .contactform,
            .lineregistration,
            .estimate,
            .telnumber,
            .businesshours03,
            .fotterlogo,
            .telmark,
            .mapmark,
            .telnumber02,
            .businesshours04,
            .adress,
            .instablack,
            .lineblack,
            .fottoppage,
            .fotservice,
            .fotworks,
            .fotmessage,
            .fotsupportservices,
            .fotaboutus,
            .fotqa,
            .fotrecruit,
            .fotcontact,
            .copyright {
                display: none; 
            }
        }            






/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@




  ▼▼▼▼▼ ここからSP　▼▼▼▼▼




   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */








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


    .spheaderbg {
    position: fixed; 
    height: auto; 
    z-index: 99; 
    }

    .splogo {
    position: fixed; 
    height: auto; 
    z-index: 101; 
    }    

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

            .splogo{
                display: block; 
                top: 13vw; 
                left: 7vw; 
                width: 50vw; 
            }     
            
            .spheaderbg{
                display: block; 
                top: 0vw; 
                left: 0vw; 
                width: 100vw; 
            }                

        }
        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .splogo,
            .spheaderbg {
                display: none; 
            }
        } 


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ヘッター（アニメ)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
           /*＜アニメ＞上からふわっと降りてくる*/ 
            @keyframes headerDrop {
            0% {
                transform: translateY(-2.5vw);
            }
            100% {
                transform: translateY(0);
            }
            }     
            
            /* ヘッダー背景初期状態：薄い */
            .spheaderbg{
            opacity: 0.2;
            transition: opacity 0.3s ease;
            }

            /* スクロール後：不透明 */
            .spheaderbg.is-scrolled{
            opacity: 1;
            }

            .splogo,
            .spmenu{
                animation: headerDrop 700ms ease-out both;
            }
            }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ハンバーガーメニュー
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* 開くボタン（ハンバーガー）だけは単独で固定表示 */
        .spmenu {
        position: fixed;
        height: auto;
        z-index: 99;
        }

        /* メニューパネル全体（オーバーレイ） */
        .spnav-panel {
        position: fixed;
        inset: 0;                
        z-index: 100;
        display: none;            /* 初期は非表示 */
        background-color: #FFFFFF; 
        overflow-y: auto;         
        padding-top: 35vw;        /* 上にロゴ＋余白ぶんのスペース */
        box-sizing: border-box;
        }


        /* 閉じるボタン */
        .spmenuclose {
        position: fixed;
        top: 15vw;
        right: 9vw;
        width: 10vw;
        height: auto;
        z-index: 100 ; 
        }

        .sptoppage,
        .spservice,
        .spworks,
        .spsupportservices,        
        .spmessage,
        .spaboutus,
        .spqa,
        .sprecruit,
        .spcontact,
        .spinsta,
        .spline {
        display: block;
        position: static;       
        width: 90vw;
        margin: 6vw auto 6vw;  
        height: auto;
        }


        /* SNSエリアを中央寄せ（インスタ＋LINE） */
        .spnav-sns {
        text-align: center;
        margin-top: 4vw;
        }

        /* 子SNSエリア横並び＆少し余白 */
        .spnav-sns img {
        width: 12vw;
        max-width: 60px;
        margin: 4vw 4vw 8vw;
        display: inline-block;
        }


        /* ▼ ハンバーガーアイコンの位置（SPだけ表示） */
        @media (max-width: 600px) {

        .spmenu {
            display: block;
            top: 13vw;
            left: 76vw;
            width: 15vw;
        }

        /* body に nav-open が付いているときだけメニューパネルを表示 */
        body.nav-open .spnav-panel {
            display: block;
        }

        /* メニューを開いているときは、ハンバーガーアイコンを非表示にする */
        body.nav-open .spmenu {
            display: none;
        }
        }

        /* PC版ではSPメニューを非表示 */
        @media (min-width: 601px) {
        .spmenu,
        .spnav-panel {
            display: none;
        }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ハンバーガーメニュー（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        @keyframes fadeUpMenu {
        from { opacity: 0; transform: translateY(3vw); }
        to   { opacity: 1; transform: translateY(0); }
        }


        /* メニュー項目まとめて初期は見えない */
        .sptoppage,
        .spservice,
        .spworks,
        .spsupportservices,        
        .spmessage,
        .spaboutus,
        .spqa,
        .sprecruit,
        .spcontact,
        .spinsta,
        .spline{
        opacity: 0;
        transform: translateY(3vw);
        }

        /* メニュー開いたら順番にフェードインアップ */
        body.nav-open .sptoppage { animation: fadeUpMenu 500ms ease-out both; animation-delay: 0ms; }
        body.nav-open .spservice { animation: fadeUpMenu 500ms ease-out both; animation-delay: 70ms; }
        body.nav-open .spworks   { animation: fadeUpMenu 500ms ease-out both; animation-delay: 140ms; }
        body.nav-open .spsupportservices { animation: fadeUpMenu 500ms ease-out both; animation-delay: 210ms; }
        body.nav-open .spmessage { animation: fadeUpMenu 500ms ease-out both; animation-delay: 280ms; }
        body.nav-open .spaboutus      { animation: fadeUpMenu 500ms ease-out both; animation-delay: 350ms; }
        body.nav-open .spqa  { animation: fadeUpMenu 500ms ease-out both; animation-delay: 420ms; }
        body.nav-open .sprecruit { animation: fadeUpMenu 500ms ease-out both; animation-delay: 490ms; }
        body.nav-open .spcontact   { animation: fadeUpMenu 500ms ease-out both; animation-delay: 560ms; }
        body.nav-open .spinsta    { animation: fadeUpMenu 500ms ease-out both; animation-delay: 630ms; }
        body.nav-open .spline    { animation: fadeUpMenu 500ms ease-out both; animation-delay: 630ms; }




        

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


    /* ファーストビュー */
    .fvbackgroundsp,
    .fvtitlesp,
    .reviewjumpbuttonsp {
    position: absolute; 
    height: auto; 
    }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .fvbackgroundsp {
                display: block; 
                top: 0vw; 
                left: 0vw; 
                width: 100vw; 
            }      
            
            .fvtitlesp {
                display: block; 
                top: 47vw; 
                left: 10vw; 
                width: 80vw; 
            }       
            
            .reviewjumpbuttonsp {
                display: block; 
                top: 75vw; 
                right: 0; 
                width: 60vw; 
            }                
        }


            /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .fvbackgroundsp,
                .fvtitlesp,
                .reviewjumpbuttonsp {
                display: none; 
            }

        }



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ファーストビュー（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* フェードインアップ */
        @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(2vw);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
        }

        @media (max-width: 600px){
        /* 初期状態（非表示） */
        .fvtitlesp,
        .reviewjumpbuttonsp{
        opacity: 0;
        }

        /* 見えたら発火 */
        .is-fadeup{
        animation: fadeUp 800ms ease-out forwards;
        }
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（タイトルボタン）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



        /* タイトルボタン（SP） */
        .grantssp,
        .propertyinsurancesp,
        .insurancereviewsp,
        .loansp,
        .livingcostreviewsp{
        position: absolute;
        height: auto;
        opacity: 0; 
        }

        /* ★追加：aの中のimgをa幅に追従させる */
        .grantssp img,
        .propertyinsurancesp img,
        .insurancereviewsp img,
        .loansp img,
        .livingcostreviewsp img{
        width: 100%;
        height: auto;
        display: block; /* 余計な隙間対策 */
        }


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

            .grantssp {
                display: block; 
                top: 80vw; 
                left: 0vw; 
                width: 90vw; 
            } 

            .propertyinsurancesp {
                display: block; 
                top: 100vw; 
                right: 0vw; 
                width: 93vw; 
            } 
            
            .insurancereviewsp {
                display: block; 
                top: 120vw; 
                left: 0vw; 
                width: 90vw; 
            } 
            
            .loansp{
                display: block; 
                top: 140vw; 
                right: 0vw; 
                width: 93vw; 
            } 
            
             .livingcostreviewsp {
                display: block; 
                top: 160vw; 
                left: 0vw; 
                width: 90vw; 
            }            
            }         

        

         /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
            .grantssp,
            .propertyinsurancesp,
            .insurancereviewsp,
            .loansp,
            .livingcostreviewsp{
                display: none; 
            }
        }




/* =========================
  SP サービス一覧（タイトルボタン）アニメーション
========================= */

        /* 左から */
        @keyframes fadeInFromLeft {
        from {
            opacity: 0;
            transform: translateX(-8vw);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
        }

        /* 右から */
        @keyframes fadeInFromRight {
        from {
            opacity: 0;
            transform: translateX(8vw);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
        }


        @media (max-width: 600px) {

        /* 左から */
        .grantssp,
        .insurancereviewsp,
        .livingcostreviewsp{
            animation: fadeInFromLeft 0.8s ease-out forwards;
        }

        /* 右から */
        .propertyinsurancesp,
        .loansp{
            animation: fadeInFromRight 0.8s ease-out forwards;
        }

        /* ★少しずつ出したい場合（自然） */
        .grantssp { animation-delay: 0.1s; }
        .propertyinsurancesp { animation-delay: 0.2s; }
        .insurancereviewsp { animation-delay: 0.3s; }
        .loansp { animation-delay: 0.4s; }
        .livingcostreviewsp { animation-delay: 0.5s; }
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ページジャンプの高さ調整
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* 固定ヘッダーの高さ分だけズラす */
        #title01sp,
        #title02sp,
        #title03sp,
        #title04sp,
        #title05sp{
        scroll-margin-top: 60vw; /* ←ヘッダー高さに合わせて調整 */
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（補助金サポート）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/




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

        /* 基準箱 */
        .contents01sp{
            position: relative;   
            width: 100vw;
            margin: 190vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }            
 
            .supportbg1sp{
                display: block; 
                height:auto;
                width: 100vw; 
            } 
                     
            .title01sp {
            position: absolute;           
            top: 20vw;                    
            left: 28vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext01sp{
            position: absolute;           
            top: 40vw;                    
            left: 14.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 74vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary01sp {
            position: absolute;  
            top: 265vw;                                          
            left: 41vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   
          

            .summarytext01sp {
            position: absolute;   
            top: 280vw;                                        
            left: 22vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 65vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .checkbutton01sp{
                    position: absolute; 
                    top: 280.5vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }  
                
            .checkbutton02sp{
                    position: absolute;
                    top: 301vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton03sp{
                    position: absolute;
                    top: 322vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton04sp{
                    position: absolute; 
                    top: 350vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }                   

            .icon01sp{
                    position: absolute; 
                    top: 17vw; 
                    left: 14vw; 
                    width: 10vw; 
                }                  
            }         

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .supportbg1sp,
        .title01sp,
        .maintext01sp,
        .summary01sp,
        .summarytext01sp,
        .checkbutton01sp,
        .checkbutton02sp,
        .checkbutton03sp,
        .checkbutton04sp,         
        .icon01sp{
                display: none; 
            }
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（火災保険、地震保険）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {     
            
        /* 基準箱 */
        .contents02sp{
            position: relative;   
            width: 100vw;
            margin: 5vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }            
 
            .supportbg2sp{
                display: block; 
                height:auto;
                width: 100vw; 
            } 
                     
            .title02sp {
            position: absolute;           
            top: 20vw;                    
            left: 31vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext02sp{
            position: absolute;           
            top: 40vw;                    
            left: 14.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 74vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary02sp {
            position: absolute;  
            top: 310vw;                                          
            left: 41vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   
          

            .summarytext02sp {
            position: absolute;   
            top: 325vw;                                        
            left: 22vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 65vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .checkbutton05sp{
                    position: absolute; 
                    top: 326vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }  
                
            .checkbutton06sp{
                    position: absolute;
                    top: 354vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton07sp{
                    position: absolute;
                    top: 382vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton08sp{
                    position: absolute; 
                    top: 403vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }                   

            .icon02sp{
                    position: absolute; 
                    top: 17vw; 
                    left: 17vw; 
                    width: 10vw; 
                }                  
            }         

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .supportbg2sp,
        .title02sp,
        .maintext02sp,
        .summary02sp,
        .summarytext02sp,
        .checkbutton05sp,
        .checkbutton06sp,
        .checkbutton07sp,
        .checkbutton08sp,         
        .icon02sp{
                display: none; 
            }
        }




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（各種保険の見直し）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

        /* 基準箱 */
        .contents03sp{
            position: relative;   
            width: 100vw;
            margin: 5vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }            
 
            .supportbg3sp{
                display: block; 
                height:auto;
                width: 100vw; 
            } 
                     
            .title03sp {
            position: absolute;           
            top: 20vw;                    
            left: 33vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext03sp{
            position: absolute;           
            top: 40vw;                    
            left: 14.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 74vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary03sp {
            position: absolute;  
            top: 290vw;                                          
            left: 42vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   
          

            .summarytext03sp {
            position: absolute;   
            top: 305vw;                                        
            left: 22vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 65vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .checkbutton09sp{
                    position: absolute; 
                    top: 305vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }  
                
            .checkbutton10sp{
                    position: absolute;
                    top: 334vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton11sp{
                    position: absolute;
                    top: 362vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton12sp{
                    position: absolute; 
                    top: 382vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }                   

            .icon03sp{
                    position: absolute; 
                    top: 17vw; 
                    left: 17vw; 
                    width: 10vw; 
                }                  
            }         

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .supportbg3sp,
        .title03sp,
        .maintext03sp,
        .summary03sp,
        .summarytext03sp,
        .checkbutton09sp,
        .checkbutton10sp,
        .checkbutton11sp,
        .checkbutton12sp,         
        .icon03sp{
                display: none; 
            }
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（ローンの借換、金利見直し）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



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

        /* 基準箱 */
        .contents04sp{
            position: relative;   
            width: 100vw;
            margin: 5vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }           
 
            .supportbg4sp{
                display: block; 
                height:auto;
                width: 100vw; 
            } 
                     
            .title04sp {
            position: absolute;           
            top: 20vw;                    
            left: 28vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext04sp{
            position: absolute;           
            top: 40vw;                    
            left: 14.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 74vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary04sp {
            position: absolute;  
            top: 270vw;                                          
            left: 42vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   
          

            .summarytext04sp {
            position: absolute;   
            top: 285vw;                                        
            left: 22vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 65vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .checkbutton13sp{
                    position: absolute; 
                    top: 286vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }  
                
            .checkbutton14sp{
                    position: absolute;
                    top: 314vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton15sp{
                    position: absolute;
                    top: 349vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton16sp{
                    position: absolute; 
                    top: 377vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }                   

            .icon04sp{
                    position: absolute; 
                    top: 19vw; 
                    left: 14vw; 
                    width: 10vw; 
                }                  
            }         

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .supportbg4sp,
        .title04sp,
        .maintext04sp,
        .summary04sp,
        .summarytext04sp,
        .checkbutton13sp,
        .checkbutton14sp,
        .checkbutton15sp,
        .checkbutton16sp,         
        .icon04sp{
                display: none; 
            }
        }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービス一覧（生活費の見直し、削減）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/




        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {   
            
          /* 基準箱 */
        .contents05sp{
            position: relative;   
            width: 100vw;
            margin: 5vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }          

 
            .supportbg5sp{
                display: block; 
                height:auto;
                width: 100vw; 
            } 
                     
            .title05sp {
            position: absolute;           
            top: 20vw;                    
            left: 31vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }      

            .maintext05sp{
            position: absolute;           
            top: 40vw;                    
            left: 14.5vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 74vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   


            .summary05sp {
            position: absolute;  
            top: 270vw;                                          
            left: 42vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 3vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }   
          

            .summarytext05sp {
            position: absolute;   
            top: 285vw;                                        
            left: 22vw;                   
            z-index: 10;     
            
            font-family:  "fot-klee-pro", sans-serif; 
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 4.5vw;              /* 文字サイズ*/
            line-height: 7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 65vw;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }  

            .checkbutton17sp{
                    position: absolute; 
                    top: 285vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }  
                
            .checkbutton18sp{
                    position: absolute;
                    top: 313vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton19sp{
                    position: absolute;
                    top: 342vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }   
                
            .checkbutton20sp{
                    position: absolute; 
                    top: 370vw;                 
                    left: 13vw; 
                    width: 7vw; 
                }                   

            .icon05sp{
                    position: absolute; 
                    top: 17vw; 
                    left: 16vw; 
                    width: 10vw; 
                }                  
            }         

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .supportbg5sp,
        .title05sp,
        .maintext05sp,
        .summary05sp,
        .summarytext05sp,
        .checkbutton17sp,
        .checkbutton18sp,
        .checkbutton19sp,
        .checkbutton20sp,         
        .icon05sp{
                display: none; 
            }
        }






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



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


        /* フッター全体の基準箱 */
        .spfooter{
            position: relative;   
            width: 100vw;
            margin: 10vw 0 0 0;    /* ← 上のコンテンツからの距離はここで管理 */
        }

            /* 背景画像は箱の中で通常配置に */
            .spfotterback{
                display:block;
                width:100vw;
                height:auto;
            }


            .spcontactform {
                position:absolute; 
                top: 96vw; 
                left: 3.8vw;  
                width:30vw; 
            }

            .splineregistration {
                position:absolute; 
                top: 96vw; 
                left: 34.5vw; 
                width: 31vw; 
            }

            .spestimate {
                position:absolute; 
                top: 96vw; 
                left: 66vw; 
                width: 30vw; 
            }

            .sptelnumber {
            position: absolute;           
            top: 67vw;                    
            left: 23vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 7vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            } 

        
            .spbusinesshours01 {
            position: absolute;           
            top: 78vw;                    
            left: 12vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 3.5vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }

            .spfotterlogo {
                position: absolute;   
                top: 155vw; 
                left: 26vw; 
                width: 45vw; 
            }            

            .sptelnumber02 {
            position: absolute;           
            top: 174.2vw;                    
            left: 24vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 5vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }


            .spbusinesshours02 {
            position: absolute;           
            top: 180vw;                    
            left: 23vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 3.2vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }

            .spadress {
            position: absolute;           
            top: 187.3vw;                    
            left: 24vw;                   
            z-index: 10;     
            
            font-family: "fot-udkakugo-large-pr6n", sans-serif;
            font-weight: 500;
            font-style: normal;

            color: #193359;             
            font-size: 3.4vw;              /* 文字サイズ*/
            line-height: 2vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }

            .spinstablack {
                position: absolute; 
                top: 198vw; 
                left: 39vw; 
                width: 8vw; 
            } 

            .splineblack {
                position: absolute; 
                top: 198vw; 
                left: 53vw; 
                width: 8vw; 
            }            

        }            

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spfotterback,
            .spcontactform,
            .splineregistration,
            .spestimate,
            .sptelnumber,
            .spbusinesshours01,
            .spfotterlogo,
            .sptelnumber02,
            .spbusinesshours02,
            .spadress,
            .spinstablack,
            .splineblack{
             display: none; 
                        }
                    }