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



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

}




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

    /* ヘッター全体 */
    .pcheaderbg,
    .logowhite,
    .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;
            }            

            .logowhite {
                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,
            .logowhite,
            .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;
            }

            .logowhite,
            .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,
    .stickergreen,
    .stickerbrown {
    position: absolute; 
    height: auto; 
    }

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

            .fvtitle {
                display: block; 
                top: 22.5vw; 
                left: 11vw; 
                width: 30vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;              
            } 

            .stickergreen {
                display: block; 
                top: 12vw; 
                right: 20vw; 
                width: 18vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;              
            }
            
            .stickerbrown {
                display: block; 
                top: 12vw; 
                right: 3vw; 
                width: 18vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;              
            }

            
            @keyframes fadeInSoft {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
            }           
        }


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

/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　サービスボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* ファーストビュー */
    .subsidy,
    .grantsbutton,
    .propertyinsurancebutton01,
    .propertyinsurancebutton02,
    .insurancereviewbutton,
    .loanbutton,
    .livingcostreviewbutton,
    .wallpainting,
    .roofpainting,
    .refome,
    .smarthouse,
    .waterarea,
    .exterior {
    position: absolute; 
    height: auto; 
    }

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

            .subsidy {
                display: block; 
                top: 39vw; 
                left: 0vw; 
                width: 66.6vw; 
            }  

            .grantsbutton {
                display: block; 
                top: 40.5vw; 
                left: 10.5vw; 
                width: 9.5vw; 
                z-index: 15;
            }    

            .propertyinsurancebutton01 {
                display: block; 
                top: 40.9vw; 
                left: 19.5vw; 
                width: 9vw; 
                z-index: 15;
            }   
            
            .propertyinsurancebutton02 {
                display: block; 
                top: 40.9vw; 
                left: 28.3vw; 
                width: 9vw; 
                z-index: 15;
            } 
            
            .insurancereviewbutton {
                display: block; 
                top: 40.9vw; 
                left: 36.9vw; 
                width: 9vw; 
                z-index: 15;
            } 
            
            .loanbutton {
                display: block; 
                top: 40.9vw; 
                left: 45.7vw; 
                width: 9vw; 
                z-index: 15;
            }                      
            
            .livingcostreviewbutton {
                display: block; 
                top: 40.9vw; 
                left: 54.5vw; 
                width: 9vw; 
                z-index: 15;
            }

            .wallpainting {
                display: block; 
                top: 51vw; 
                left: 12vw; 
                width: 7vw; 
            }    

            .roofpainting {
                display: block; 
                top: 51.3vw; 
                left: 20.3vw; 
                width: 8vw; 
            }   
            
            .refome {
                display: block; 
                top: 51.3vw; 
                left: 29.6vw; 
                width: 6.5vw; 
            } 
            
            .smarthouse {
                display: block; 
                top: 51.4vw; 
                left: 36.9vw; 
                width: 9.3vw; 
            } 
            
            .waterarea {
                display: block; 
                top: 51.2vw; 
                left: 45.7vw; 
                width: 9.3vw; 
            }                      
            
            .exterior {
                display: block; 
                top: 51.4vw; 
                left: 55vw; 
                width: 8.3vw; 
            }
        }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .subsidy,
        .grantsbutton,
        .propertyinsurancebutton01,
        .propertyinsurancebutton02,
        .insurancereviewbutton,
        .loanbutton,
        .livingcostreviewbutton,        
        .wallpainting,
        .roofpainting,
        .refome,
        .smarthouse,
        .waterarea,
        .exterior {
                display: none; /* スマホ版では非表示 */
            }
        } 




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


        /* 下からふわっと表示 */
        @keyframes fadeUpSoft {
        0% {
            opacity: 0;
            transform: translateY(1.8vw);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
        }


        @media (min-width: 601px) {
        .subsidy,
        .grantsbutton,
        .propertyinsurancebutton01,
        .propertyinsurancebutton02,
        .insurancereviewbutton,
        .loanbutton,
        .livingcostreviewbutton,         
        .wallpainting,
        .roofpainting,
        .refome,
        .smarthouse,
        .waterarea,
        .exterior{
            opacity: 0; 
            animation: fadeUpSoft 700ms ease-out forwards;
        }

        .subsidy { animation-delay: 0ms; }
        .grantsbutton { animation-delay: 0ms; }
        .propertyinsurancebutton01 { animation-delay: 120ms; }
        .propertyinsurancebutton02       { animation-delay: 240ms; }
        .insurancereviewbutton   { animation-delay: 360ms; }
        .loanbutton    { animation-delay: 480ms; }
        .livingcostreviewbutton    { animation-delay: 600ms; }                   
        .wallpainting { animation-delay: 0ms; }
        .roofpainting { animation-delay: 120ms; }
        .refome       { animation-delay: 240ms; }
        .smarthouse   { animation-delay: 360ms; }
        .waterarea    { animation-delay: 480ms; }
        .exterior     { animation-delay: 600ms; }       
        
        animation: fadeUpSoft 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;        

        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　メッセージ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .reform-message1 {
        position: absolute;           
        top: 68vw;                    
        left: 11vw;                   
        z-index: 10;     
        
        font-family: "fot-klee-pro", sans-serif;
        font-weight: 500;
        font-style: normal;

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

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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　メッセージ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

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

        /* 表示されたら発火 */
        .reform-message1.is-visible {
        animation: fadeInSoft 900ms ease-out forwards;
        }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ページジャンプ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* (PC)ページジャンプ */
    .servicejump,
    .worksjump,
    .messagejump,
    .aboutusjump,
    .qajump,
    .recruitjump,
    .telbutton,
    .businesshours,
    .mailbutton,
    .survicebutton {
    position: absolute; 
    height: auto; 
    }

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

            .worksjump {
                display: block; 
                top: 100vw; 
                left: 37.5vw; 
                width: 23vw; 
            }            

            .messagejump {
                display: block; 
                top: 100vw; 
                left: 64vw; 
                width: 23vw; 
            } 

            .aboutusjump {
                display: block; 
                top: 122vw; 
                left: 11vw; 
                width: 23vw; 
            }   

            .qajump {
                display: block; 
                top: 122vw; 
                left: 37.5vw; 
                width: 23vw; 
            }            

            .recruitjump {
                display: block; 
                top: 122vw; 
                left: 64vw; 
                width: 23vw; 
            } 

            .telbutton {
                display: block; 
                top: 148vw; 
                left: 11vw; 
                width: 23vw; 
            }            

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

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

            .mailbutton {
                display: block; 
                top: 148vw; 
                left: 37.3vw; 
                width: 23vw; 
            } 

            .survicebutton {
                display: block; 
                top: 148vw; 
                left: 63.7vw; 
                width: 23vw; 
            }             

        }      
        
        

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .telbutton,
            .businesshours,
            .mailbutton,
            .survicebutton {
                display: none; /* スマホ版では非表示 */
            }
        }    
        
        
/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　ページジャンプ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

        @media (min-width: 601px) {

        /* 初期状態 */
        .servicejump,
        .worksjump,
        .messagejump,
        .aboutusjump,
        .qajump,
        .recruitjump,
        .telbutton,
        .businesshours,
        .mailbutton,
        .survicebutton {
            opacity: 0;
        }

        /* PC：フェードインアップ */
        .is-fadeup {
            animation: fadeUp 800ms ease-out forwards;
        }
        }



/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　選ばれる理由
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* (PC)ページジャンプ */
    .grayback,
    .photo01,
    .photo02,
    .comment01,
    .comment02,
    .comment03,
    .comment04,
    .yajirusi,
    .reason,
    .photo03,
    .star,
    .reasonforchoosing01,
    .reasonforchoosing02,
    .reasonforchoosing03,
    .reasonforchoosing04,
    .telbutton02,
    .businesshours02,
    .mailbutton02,
    .survicebutton02 {
    position: absolute; 
    height: auto; 
    }

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

            .photo01 {
                display: block; 
                top: 177vw; 
                left: 20vw; 
                width: 24vw; 
            }            

            .photo02 {
                display: block; 
                top: 177vw; 
                left: 53vw; 
                width: 24vw; 
            }

            .comment01 {
                display: block; 
                top: 170vw; 
                left: 15vw; 
                width: 24vw; 
            }  
            
            .comment02 {
                display: block; 
                top: 188vw; 
                left: 58vw; 
                width: 26vw; 
            }  
            
            .comment03 {
                display: block; 
                top: 164vw; 
                left: 54vw; 
                width: 13vw; 
            }   
            
            .comment04 {
                display: block; 
                top: 160vw; 
                left: 70vw; 
                width: 18vw; 
            } 
            
            .yajirusi {
                display: block; 
                top: 195vw; 
                left: 46vw; 
                width: 6vw; 
            }    
            
             .reason {
                display: block; 
                top: 200vw; 
                left: 10vw; 
                width: 30vw; 
            }            

             .photo03 {
                display: block; 
                top: 207vw; 
                right: 0vw; 
                width: 85vw; 
            }    
            
             .star {
                display: block; 
                top: 199vw; 
                left: 60vw; 
                width: 33vw; 
            } 
            
            .reasonforchoosing01 {
            position: absolute;           
            top: 212vw;                    
            left: 55vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", 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;      /* 透明指定 */
            }             

            .reasonforchoosing02 {
            position: absolute;           
            top: 214.5vw;                    
            left: 55vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 900;
            font-style: normal;

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

            .reasonforchoosing03 {
            position: absolute;           
            top: 219vw;                    
            left: 55vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size:  1vw;   /* 文字サイズ*/
            line-height: 1.5vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }     
            
            .reasonforchoosing04 {
            position: absolute;           
            top: 233.5vw;                    
            left: 55vw;                   
            z-index: 10;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", serif;
            font-weight: 300;
            font-style: normal;

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

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

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

            .mailbutton02 {
                display: block; 
                top: 240vw; 
                left: 36.3vw; 
                width: 23vw; 
            } 

            .survicebutton02 {
                display: block; 
                top: 240vw; 
                left: 62.9vw; 
                width: 23vw; 
            }                 



        }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .grayback,
            .photo03,
            .reasonforchoosing03,
            .reasonforchoosing04,
            .telbutton02,
            .businesshours02,
            .mailbutton02,
            .survicebutton02 {
                display: none; /* スマホ版では非表示 */
            }
        }          


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　選ばれる理由（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        /* 初期状態（非表示） */
        .photo01,
        .photo02,
        .comment01,
        .comment02,
        .comment03,
        .comment04,
        .yajirusi,
        .reason,
        .photo03,
        .star,
        .reasonforchoosing01,
        .reasonforchoosing02,
        .reasonforchoosing03,
        .reasonforchoosing04,
        .telbutton02,
        .mailbutton02,
        .survicebutton02{
        opacity: 0;
        }

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　インスタグラム
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* (PC)インスタグラム */
    .instatitle,
    .instaphoto,
    .morebutton {
    position: absolute; 
    height: auto; 
    }

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

            .instaphoto {
                display: block; 
                top: 274vw; 
                left: 21.5vw; 
                width: 54vw; 
            }  

            .morebutton {
                display: block; 
                top: 303vw; 
                left: 41vw; 
                width: 15vw; 
            }              

        }     


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


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　インスタ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

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

        /* 表示されたら発火 */
        .instatitle.is-visible {
        animation: fadeInSoft 900ms ease-out forwards;
        }
        }




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


    /* (PC)フッター */
    .fotterback,
    .contactform,
    .lineregistration,
    .estimate,
    .telnumber,
    .businesshours03,
    .fotterlogo,
    .telmark,
    .mapmark,
    .telnumber02,
    .businesshours04,
    .adress,
    .instablack,
    .lineblack,
    .fottoppage,
    .fotservice,
    .fotworks,
    .fotmessage,
    .fotsupportservices,
    .fotaboutus,
    .fotqa,
    .fotrecruit,
    .fotcontact,
    .copyright {
    position: absolute; 
    height: auto; 
    }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .fotterback{
                display: block; 
                top: 313vw; 
                left: 0vw; 
                width: 100vw; 
            }       
            
             .contactform{
                display: block; 
                top: 324.5vw; 
                left: 40.9vw; 
                width: 12.5vw; 
            }  
            
            .lineregistration{
                display: block; 
                top: 324.5vw; 
                left: 56vw; 
                width: 12.5vw; 
            }  
            
            .estimate{
                display: block; 
                top: 324.5vw; 
                left: 70.8vw; 
                width: 7vw; 
            }              

            .telnumber {
            position: absolute;           
            top: 325.5vw;                    
            left: 21.5vw;                   
            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: 327.6vw;                    
            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{
                display: block; 
                top: 338vw; 
                left: 7vw; 
                width: 12vw; 
            }  

            .telmark{
                display: block; 
                top: 341vw; 
                left: 22vw; 
                width: 1.8vw; 
            }  

            .mapmark{
                display: block; 
                top: 345vw; 
                left: 22.3vw; 
                width: 1.2vw; 
            }     
            
            .telnumber02 {
            position: absolute;           
            top: 341vw;                    
            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: 343vw;                    
            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: 345vw;                    
            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{
                display: block; 
                top: 341vw; 
                left: 44.1vw; 
                width: 1.8vw; 
            }                

            .lineblack{
                display: block; 
                top: 341vw; 
                left: 46.7vw; 
                width: 1.8vw; 
            }    

            .fottoppage{
                display: block; 
                top: 336vw; 
                left: 55vw; 
                width: 15vw; 
            }          

            .fotservice{
                display: block; 
                top: 339vw; 
                left: 55vw; 
                width: 16.7vw; 
            }             

            .fotworks{
                display: block; 
                top: 342vw; 
                left: 55vw; 
                width: 14.2vw; 
            } 

            .fotmessage{
                display: block; 
                top: 345vw; 
                left: 55vw; 
                width: 16.2vw; 
            } 

            .fotsupportservices{
                display: block; 
                top: 348vw; 
                left: 55vw; 
                width: 22vw; 
            }             

            .fotaboutus{
                display: block; 
                top: 335.9vw; 
                left: 75vw; 
                width: 13.5vw; 
            }           

            .fotqa{
                display: block; 
                top: 339vw; 
                left: 75vw; 
                width: 15vw; 
            }             

            .fotrecruit{
                display: block; 
                top: 342vw; 
                left: 75vw; 
                width: 13.6vw; 
            } 

            .fotcontact{
                display: block; 
                top: 345vw; 
                left: 75vw; 
                width: 18.3vw; 
            } 

            .copyright{
            position: absolute;           
            top: 354.8vw;                    
            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,
    .stickergreensp,
    .stickerbrownsp {
    position: absolute; 
    height: auto; 
    }

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

            .fvtitlesp {
                display: block; 
                top: 133.5vw; 
                left: 0vw; 
                width: 100vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;                  
            }     

            .stickergreensp {
                display: block; 
                top: 105vw; 
                left: 2vw; 
                width: 50vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;                  
            }     

            .stickerbrownsp {
                display: block; 
                top: 105vw; 
                right: 2vw; 
                width: 50vw; 

                opacity: 0; 
                animation: fadeInSoft 900ms ease-out forwards;
                animation-delay: 200ms;                  
            }                 

            
            @keyframes fadeInSoft {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
            }              

        }


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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　補助金・保険・費用サポートボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/



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

            .supportbackgroundsp{
                display: block; 
                width: 100vw;
                height:auto; 
            }       
            
             .supporttitle{
                position: absolute;  
                top: 11.5vw; 
                left: 0vw; 
                width: 100vw; 
            }  

             .grantsbuttonsp{
                position: absolute;  
                top: 30vw; 
                left: 4vw; 
                width: 33vw; 
            }   
            
             .propertyinsurancebutton01sp{
                position: absolute;  
                top: 30vw; 
                left: 35vw; 
                width: 33vw; 
            }       
            
             .propertyinsurancebutton02sp{
                position: absolute;  
                top: 30vw; 
                left: 65vw; 
                width: 33vw; 
            }              

             .insurancereviewbuttonsp{
                position: absolute;  
                top: 65vw; 
                left: 4vw; 
                width: 32vw; 
            }    

             .loanbuttonsp{
                position: absolute;  
                top: 65vw; 
                left: 35vw; 
                width: 32vw; 
            }         
            
             .livingcostreviewbuttonsp{
                position: absolute;  
                top: 65vw; 
                left: 65vw; 
                width: 32vw; 
            }               
            }  

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .supportbackgroundsp,
            .supporttitle,
            .grantsbuttonsp,
            .propertyinsurancebutton01sp,
            .propertyinsurancebutton02sp,
            .insurancereviewbuttonsp,
            .loanbuttonsp,
            .livingcostreviewbuttonsp
             {
                display: none; 
            }
        }     



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　補助金・保険・費用サポートボタン（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

        /* SP */
        @media (max-width: 600px) {

            .supporttitle,
            .grantsbuttonsp,
            .propertyinsurancebutton01sp,
            .propertyinsurancebutton02sp,
            .insurancereviewbuttonsp,
            .loanbuttonsp,
            .livingcostreviewbuttonsp {
            opacity: 0;
        }

        .is-fadeup-sp2 {
            animation: fadeUp 700ms ease-out forwards;
        }
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　サービスボタン
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* ファーストビュー */
    .resitentialworksbgsp,
    .resitentialworkstitlesp,
    .wallpaintingsp,
    .roofpaintingsp,
    .refomesp,
    .smarthousesp,
    .waterareasp,
    .exteriorsp {
    position: absolute; 
    height: auto; 
    }


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

            .resitentialworksbgsp{
                display: block; 
                top: 263vw; 
                left: 0vw; 
                width: 100vw; 
            }  


            .resitentialworkstitlesp {
                display: block; 
                top: 270vw; 
                left: 0vw; 
                width: 100vw; 
            }  

            .wallpaintingsp {
                display: block; 
                top: 293vw; 
                left: 7vw; 
                width: 27vw; 
            }    

            .roofpaintingsp {
                display: block; 
                top: 292.2vw; 
                left: 35vw; 
                width: 32.5vw; 
            }   
            
            .refomesp {
                display: block; 
                top: 292.2vw; 
                left: 65vw; 
                width: 30vw; 
            } 
            
            .smarthousesp {
                display: block; 
                top: 327.5vw; 
                left: 5vw; 
                width: 31vw; 
            } 
            
            .waterareasp {
                display: block; 
                top: 328vw; 
                left: 35vw; 
                width: 32vw; 
            }                      
            
            .exteriorsp {
                display: block; 
                top: 327vw; 
                left: 64.5vw; 
                width: 32vw; 
            }
        }


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        .resitentialworksbgsp,
        .resitentialworkstitlesp,
        .wallpaintingsp,
        .roofpaintingsp,
        .refomesp,
        .smarthousesp,
        .waterareasp,
        .exteriorsp {
                display: none; /* PC版では非表示 */
            }
        } 


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ページジャンプ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

        /* SP */
        @media (max-width: 600px) {

        .wallpaintingsp,
        .roofpaintingsp,
        .refomesp,
        .smarthousesp,
        .waterareasp,
        .exteriorsp {
            opacity: 0;
        }

        .is-fadeup-sp {
            animation: fadeUp 700ms ease-out forwards;
        }
        }







/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　メッセージ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        .reform-messagesp1 {
        position: absolute;           
        top: 373vw;                    
        left: 9vw;                   
        z-index: 10;     
        
        font-family: "fot-klee-pro", sans-serif;
        font-weight: 500;
        font-style: normal;

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


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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　メッセージ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        /* 初期状態（見えていない） */
        .reform-messagesp1,
        .reform-messagesp2,
        .reform-messagesp3,
        .reform-messagesp4 {
        opacity: 0;
        }

        /* 表示されたら発火 */
        .reform-messagesp1.is-visible,
        .reform-messagesp2.is-visible,
        .reform-messagesp3.is-visible,
        .reform-messagesp4.is-visible {
        animation: fadeInSoft 900ms ease-out forwards;
        }
        }





/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　ページジャンプ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .servicejump {
                display: block; 
                top: 500vw; 
                left: 0vw; 
                width: 100vw; 
                z-index: 20;
            }

            .worksjump {
                display: block; 
                top: 580vw; 
                left: -0.1vw; 
                width: 100vw; 
                z-index: 20;
            }            

            .messagejump {
                display: block; 
                top: 660vw; 
                left: 0vw; 
                width: 100vw; 
                z-index: 20;                
            } 

            .aboutusjump {
                display: block; 
                top: 740vw; 
                left: 0vw; 
                width: 100vw; 
                z-index: 20;                
            }   

            .qajump {
                display: block; 
                top: 820vw; 
                left: 0vw; 
                width: 100vw; 
                z-index: 20;
            }            

            .recruitjump {
                display: block; 
                top: 900vw; 
                left: 0vw; 
                width: 100vw;
                z-index: 20;                 
            }         
        } 


/* @@@@@@@@@@@@@@@@@@@@@@@@@
    SP　ページジャンプ（アニメ）
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

        @media (max-width: 600px) {

        /* 初期状態：必ず見える（opacity触らない） */
        .servicejump,
        .worksjump,
        .messagejump,
        .aboutusjump,
        .qajump,
        .recruitjump {
            opacity: 1 !important;
            transform: scale(1.05);
            transition: transform 520ms ease;
            will-change: transform;
        }

        /* 見えたら少しだけ戻す */
        .is-scalein-sp {
            transform: scale(1);
        }
        }


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　選ばれる理由
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

    .graybacksp,
    .reasonforchoosingsp03,
    .reasonforchoosingsp04 {
    position: absolute; 
    height: auto; 
    }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .graybacksp {
                display: block; 
                top: 990vw; 
                left: 0vw; 
                width: 100vw; 
            }
 
            .comment04 {
                display: block; 
                top: 985vw; 
                left: 42vw; 
                width: 50vw; 
                z-index: 20;
            }             

            .comment03 {
                display: block; 
                top: 1000vw; 
                left: 8vw; 
                width: 30vw; 
                z-index: 20;
            } 

            .photo02 {
                display: block; 
                top: 1020vw; 
                left: 15vw; 
                width: 70vw; 
                z-index: 20;
            }

            .comment02 {
                display: block; 
                top: 1055vw; 
                left: 25vw; 
                width: 70vw; 
                z-index: 20;
            }             

            .photo01 {
                display: block; 
                top: 1080vw; 
                left: 15vw; 
                width: 70vw; 
                z-index: 20;
            }             

            .comment01 {
                display: block; 
                top: 1120vw; 
                left: 9vw; 
                width: 60vw; 
                z-index: 20;
            }  
            
           
            .yajirusi {
                display: block; 
                top: 1145vw; 
                left: 44vw; 
                width: 15vw;
                z-index: 20; 
            }    
            
             .reason {
                display: block; 
                top: 1170vw; 
                left: 7vw; 
                width: 90vw;
                z-index: 20; 
            }            
            
             .star {
                display: block; 
                top: 1247vw; 
                left: 6vw; 
                width: 90vw; 
                z-index: 20;
            } 

            .reasonforchoosing01 {
            position: absolute;           
            top: 1280vw;                    
            left: 7.5vw;                   
            z-index: 20;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", serif;
            font-weight: 300;
            font-style: normal;

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

            .reasonforchoosing02 {
            position: absolute;           
            top: 1288vw;                    
            left: 7.5vw;                   
            z-index: 20;     
            
            font-family: "toppan-bunkyu-midashi-min-st", serif;
            font-weight: 900;
            font-style: normal;

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

            .reasonforchoosingsp03 {
            position: absolute;           
            top: 1308vw;                    
            left: 7.5vw;                   
            z-index: 20;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", serif;
            font-weight: 300;
            font-style: normal;

            color: #193359;             
            font-size:  4.5vw;   /* 文字サイズ*/
            line-height:7vw;         /* 行送り*/
            font-kerning: normal;         /* カーニング（メトリクス） */
            font-feature-settings: "kern";/* カーニング有効化 */
            max-width: 800px;
            margin: 0;
            padding: 0;
            background: transparent;      /* 透明指定 */
            }     
            
            .reasonforchoosingsp04 {
            position: absolute;           
            top: 1440vw;                    
            left: 7.5vw;                   
            z-index: 20;     
            
            font-family: "toppan-bunkyu-mincho-pr6n", serif;
            font-weight: 300;
            font-style: normal;

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


        }


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


/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　選ばれる理由（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        /* 初期状態（非表示） */
        .photo01,
        .photo02,
        .comment01,
        .comment02,
        .comment03,
        .comment04,
        .yajirusi,
        .reason,
        .photo03,
        .star,
        .reasonforchoosing01,
        .reasonforchoosing02,
        .reasonforchoosingsp03,
        .reasonforchoosingsp04{
        opacity: 0;
        }

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




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　インスタグラム
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

     /* (SP)インスタグラム */
    .instaphotosp {
    position: absolute; 
    height: auto; 
    }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .instatitle {
                display: block; 
                top: 1510vw; 
                left: 20vw; 
                width: 60vw;
                z-index: 20;  
            }   

            .instaphotosp {
                display: block; 
                top: 1533vw; 
                left: 6vw; 
                width: 90vw;
                z-index: 20;                  
            }  

            .morebutton {
                display: block; 
                top: 1605vw; 
                left: 25vw; 
                width: 50vw; 
                z-index: 20;                
            }              

        }     

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




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　インスタ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

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

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
        /* 初期状態（見えていない） */
        .instatitle {
        opacity: 0;
        }

        /* 表示されたら発火 */
        .instatitle.is-visible {
        animation: fadeInSoft 900ms ease-out forwards;
        }
        }




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

   .spfotterback,
   .spcontactform,
   .splineregistration,
   .spestimate,
   .sptelnumber,
   .spbusinesshours01,
   .spfotterlogo,
   .sptelnumber02,
   .spbusinesshours02,
   .spadress,
   .spinstablack,
   .splineblack {
    position: absolute ; 
    height: auto; 
    }

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

            .spfotterback {
                display: block; 
                top: 1636vw; 
                left: 0; 
                width: 100vw; 
            }

            .spcontactform {
                display: block; 
                top: 1731.8vw; 
                left: 3.8vw; 
                width: 30vw; 
            }

            .splineregistration {
                display: block; 
                top: 1732vw; 
                left: 34.5vw; 
                width: 31vw; 
            }

            .spestimate {
                display: block; 
                top: 1731.5vw; 
                left: 66vw; 
                width: 30vw; 
            }

            .sptelnumber {
            position: absolute;           
            top: 1702.5vw;                    
            left: 24vw;                   
            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: 1714vw;                    
            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 {
                display: block; 
                top: 1791vw; 
                left: 26vw; 
                width: 45vw; 
            }            

            .sptelnumber02 {
            position: absolute;           
            top: 1809vw;                    
            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: 1815vw;                    
            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: 1823vw;                    
            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 {
                display: block; 
                top: 1831vw; 
                left: 39vw; 
                width: 8vw; 
            } 

            .splineblack {
                display: block; 
                top: 1831vw; 
                left: 53vw; 
                width: 8vw; 
            }            

        }            

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