/* リセット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 {
    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;              
            } 
            
            @keyframes fadeInSoft {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
            }           
        }


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

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


    /* ファーストビュー */
    .wallpainting,
    .roofpainting,
    .refome,
    .smarthouse,
    .waterarea,
    .exterior {
    position: absolute; 
    height: auto; 
    }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .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) {
        .wallpainting,
        .roofpainting,
        .refome,
        .smarthouse,
        .waterarea,
        .exterior {
                display: none; /* スマホ版では非表示 */
            }
        } 


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


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

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

            .fvtitle {
                display: block; 
                top: 37vw; 
                left: 10vw; 
                width: 45vw; 
            }  
            
            .requirementsbutton {
                display: block; 
                top: 47vw; 
                left: 10vw; 
                width: 20vw; 
            }              
        }


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



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


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


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        /* 初期状態（非表示） */
        .fvtitle,
        .requirementsbutton 
        {
        opacity: 0;
        }

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


     


/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　応募者へのメッセージ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* メッセージ */
    .messagetitle,
    .messagebody,
    .illustration01,
    .illustration02 {
    position: absolute; 
    height: auto; 
    }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .messagetitle {
                display: block; 
                top: 65vw; 
                right: 20vw; 
                width: 7vw; 
            }   
            
            .messagebody {
            position: absolute;
            top: 65vw;
            right: 31vw;
            z-index: 10;

            font-family: "fot-klee-pro", sans-serif;
            font-weight: 500;
            color: #232323;

            writing-mode: vertical-rl;
            text-orientation: mixed;

            font-size: 1.2vw;
            line-height: 1.8;
            letter-spacing: 0.05em;

            height: 55vw;        /* ←縦書きの行の長さ（=高さ方向） */
            width: 22vw;         /* ←列の横幅（=何列ぶん占めるか） */
            white-space: pre-line;　 /* ▼勝手に折り返させにくくする（brは効く） */

            margin: 0;
            padding: 0;
            background: transparent;
            }

             .illustration01 {
                display: block; 
                top: 88vw; 
                left: 10vw; 
                width: 35vw; 
            }              

            .illustration02 {
                display: block; 
                top: 101vw; 
                left: 50vw; 
                width: 36vw; 
            }   

        }


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



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　応募者へのメッセージ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        /* 初期状態（非表示） */
                .messagetitle,
                .messagebody,
                .illustration01,
                .illustration02
        {
        opacity: 0;
        }

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　募集要項(タイトルとボタン)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 募集要項 */
    .requirementstitle,
    .technical,
    .sales,
    .clerical {
    position: absolute; 
    height: auto; 
    }

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .requirementstitle {
                display: block; 
                top: 125vw; 
                left: 12vw; 
                width: 45vw; 
            }  
            
            .technical {
                display: block; 
                top: 140vw; 
                left: 14vw; 
                width: 22vw; 
            }
            
             .sales {
                display: block; 
                top: 140vw; 
                left: 38.5vw; 
                width: 22vw; 
            }
            
            .clerical {
                display: block; 
                top: 140vw; 
                left: 63vw; 
                width: 22vw; 
            }  
            
            /* 募集要項ボタンを前面に出してクリックできるようにする */
            .technical,
            .sales,
            .clerical{
            z-index: 98;      /* job-specより上に */
            cursor: pointer;   /* ボタン感 */
            }           
            
            .technical:hover,
            .sales:hover,
            .clerical:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.15);
            opacity: 0.95;
            }            

            .technical:active,
            .sales:active,
            .clerical:active{
            transform: translateY(0);
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
            }  
            
            .technical.is-active,
            .sales.is-active,
            .clerical.is-active{
            box-shadow: 0 0 0 3px #ffff4a;
            opacity: 1;
            }            


        }

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



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　募集要項タイトルとボタン（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        /* 初期状態（非表示） */
            .requirementstitle,
            .technical,
            .sales,
            .clerical
        {
        opacity: 0;
        }

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　募集要項(詳細)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/

        .job-spec{ /* 技術職 */
        background:#fff;
        padding: 153vw 0 12vw;
        box-sizing: border-box;
        width: 100%;
        }

        .job-spec2{ /* 営業職 */
        background:#fff;
        padding: 153vw 0 12vw;
        box-sizing: border-box;
        width: 100%;        
        }
        
        .job-spec3{ /* 事務職 */
        background:#fff;
        padding: 153vw 0 12vw;
        box-sizing: border-box;
        width: 100%;        
        } 
        
        .job-spec2,
        .job-spec3{
        display: none;
        }        

        .job-spec__inner{
        width: 70vw;
        margin: 0 auto;
        }

        /* dlをテーブルみたいに見せる */
        .job-spec__list{
        margin: 0;
        }

        .job-spec__row{
        display:grid;
        grid-template-columns: 15vw 55vw; /* 左：項目名 / 右：内容 */
        column-gap: 1vw;
        align-items:start;
        padding: 1vw 0;
        }

        /* 左の項目名（縦棒付き） */
        .job-spec__dt{
        position: relative;
        margin: 0;
        padding-left: 1vw;
        font-weight: 700;
        color:#0b2a5a; /* 濃い紺 */
        line-height: 1.4vw;
        font-size: 1.4vw; 
        }

        /* 縦棒 */
        .job-spec__dt::before{
        content:"";
        position:absolute;
        left:0;
        top: 0.15vw;
        width: 0.3vw;
        height: 1.5vw;
        background:#0b2a5a;
        border-radius: 1vw;
        }

        .job-spec__dd{
        margin:0;
        color:#222;
        line-height: 1.5vw;
        font-weight: 400;
        font-size: 1.1vw; 
        }

        /* 応募要件ブロック */
        .job-spec__block{
        padding: 0;
        }

        .job-spec__block--mt{
        margin-top: 2vw;
        }

        .job-spec__subttl{
        font-weight: 700;
        color:#111;
        margin-bottom: 1vw;
        }

        .job-spec__lead{
        margin: 0 0 1vw;
        color:#222;
        }

        .job-spec__ul{
        margin: 1vw 0 0;
        padding-left: 1vw;
        }

        .job-spec__ul li{
        margin: 0.4vw 0;
        }

        .job-spec__note{
        margin: 0.5vw 1vw 0;
        font-size: 0.9vw;
        color:#333;
        }

        ≈
        .job-spec__row--tall{
        padding: 1.5vw 0 1.5vw;
        }
      


 /* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　募集要項タイトルとボタン（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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


        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
        /* 初期状態（非表示） */
            .job-spec__row
        {
        opacity: 0;
        }

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





/* @@@@@@@@@@@@@@@@@@@@@@@@@
PC　エントリータイトル
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* エントリータイトル */
    .entrytitle {
    position: absolute; 
    height: auto; 
    }

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

            #entrytitle {
            scroll-margin-top: 10vw; /* タップ時のスクロール位置 */
            }            
        }

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


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   お問い合わせフォーム（PCデザイン）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

            .contact-section {
            width: 100vw;
            display: flex;
            justify-content: center;
            }

            /* PC：fvtitle の少し下に固定配置 */
            @media (min-width: 601px) {
            .contact-section {
                position: absolute;
                top: 243vw; 
                left: 0;
            }
            .contact-inner {
            width: 72vw;
            background-color: #f4f4f4;
            border: 0.5vw solid #cfcfcf;
            padding: 4vw 2vw 4vw;
            box-sizing: border-box;
            }


            /* 入力エリアと確認エリア切り替え用 */
            .contact-form-area {
            margin-top: 1vw;
            }

            .contact-confirm-area {
            display: none;
            margin-top: 2vw;
            border-top: 0.1vw solid #b0b0b0;
            padding-top: 2vw;
            }

            /* JS でこのクラスを付ける */
            .contact-inner.is-confirm .contact-form-area {
            display: none;
            }

            .contact-inner.is-confirm .contact-confirm-area {
            display: block;
            }

            /* 1行分：左から「必須/任意」「ラベル」「入力欄」 */
            .contact-row {
            display: flex;
            align-items: center;
            padding: 1vw 0 ;
            border-top: 0.1vw solid #d5d5d5;
            }

            .contact-row:last-of-type {
            border-bottom: 1vw solid #d5d5d5;
            }

            /* テキストエリア行だけ上揃えにする */
            .contact-row--textarea {
            align-items: flex-start;
            }


            /* ラベル（日本語＋英語） */
            .contact-label {
            width: 20vw;                
            padding-left: 0;
            box-sizing: border-box;
            }

            .label-jp {
            display: block;
            font-size: 1.2vw;
            }


            /* 入力欄 */
            .contact-input {
            flex: 1;
            padding-left: 1vw;
            box-sizing: border-box;
            }

            .contact-input input[type="text"],
            .contact-input input[type="email"],
            .contact-input textarea {
            width: 100%;
            padding: 1vw 1vw;
            border: 0.1vw solid #c9dfe4;
            background-color: #e9fdff;
            font-size: 1.2vw;
            box-sizing: border-box;
            }

            .contact-input textarea {
            height: 12vw;
            resize: vertical;
            }

            /* ボタン共通 */
            .contact-buttons {
            text-align: center;
            margin-top: 12vw;
            }

            .contact-buttons--center {
            margin-top: 4vw;
            }

            .btn {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1vw 5vw;
            border-radius: 0.1vw;
            border: none;
            cursor: pointer;
            font-family: "hiragino-kaku-gothic-pron", sans-serif;
            font-weight: 600;
            font-style: normal;
            }

            .btn-confirm {
            background-color: #f28c38;
            color: #ffffff;
            text-align: center;
            line-height: 1.1; 
            }


            /* 戻るボタン */
            .btn-back {
            background-color: #cccccc;
            color: #333333;
            margin-right: 8px;
            }

            /* 送信ボタン（ダミー送信） */
            .btn-submit {
            background-color: #e95527;
            color: #ffffff;
            }

            /* 確認テーブル */
            .confirm-heading {
            font-size: clamp(15px, 1vw + 10px, 20px);
            margin: 0 0 14px;
            }

            .confirm-table {
            width: 100%;
            border-collapse: collapse;
            font-size: clamp(12px, 0.8vw + 7px, 16px);
            }

            .confirm-table th,
            .confirm-table td {
            padding: 8px 0;
            border-top: 1px solid #dddddd;
            vertical-align: top;
            }

            .confirm-table th {
            width: 180px;
            padding-right: 16px;
            font-weight: 600;
            }   

            /* 必須マーク（ラベル横） */
            .reqmark{
            color:#e60012;
            font-size: 0.95vw;
            margin-left: 0.8vw;
            font-weight: 700;
            }

            /* 任意説明（小さめ） */
            .label-sub{
            display:block;
            font-size: 0.95vw;
            color:#666;
            margin-top: 0.3vw;
            }

            /* ラベル部：横並び（お名前 + ※必須） */
            .contact-label{
            display:flex;
            align-items: center;
            gap: 0.8vw;
            }

            /* 生年月日 */
            .dob-group{
            display:flex;
            align-items:center;
            gap: 0.8vw;
            }
            .dob-group input{
            width: 10vw;
            }
            .dob-unit{
            font-size: 1.1vw;
            color:#333;
            }

            /* ラジオ3択 */
            .radio-group{
            display:flex;
            align-items:center;
            gap: 2vw;
            font-size: 1.1vw;
            }
            .radio-group input{
            margin-right: 0.5vw;
            }

            /* いまの「必須/任意バッジ」を使わないので幅だけ確保（位置関係維持） */
            .contact-status{
            width: 4vw;
            }

            /* 確認画面へボタン：黒背景 */
            .btn-confirm{
            background:#000;
            color:#fff;
            padding: 1vw 5vw;
            border-radius: 0.3vw;
            }
            .btn-confirm:hover{ opacity: .85; }

            /* 確認画面：黒背景（is-confirmの時だけ） */
            .contact-inner.is-confirm{
            background:#fff;
            border-color:#000;
            color:#000;
            }
            .contact-inner.is-confirm .confirm-heading{
            color:#000;
            }
            .contact-inner.is-confirm .confirm-table th,
            .contact-inner.is-confirm .confirm-table td{
            color:#000;
            border-top: 1px solid rgba(255,255,255,.25);
            }

            }     







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


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

        /* フッター全体の基準箱 */
        .site-footer{
            position: relative;   
            width: 100vw;
            margin: 115vw 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,
    .requirementsbuttonsp {
    position: absolute; 
    height: auto; 
    }

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

            .fvtitlesp {
                display: block; 
                top: 85vw; 
                left: 10vw; 
                width: 75vw; 
            }  
            
            .requirementsbuttonsp {
                display: block; 
                top: 120vw; 
                left: 22vw; 
                width: 55vw; 
            }
            
            #requirementstitlesp {
            scroll-margin-top: 40vw; /* タップ時のスクロール位置 */
            }
        }


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


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


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

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

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






/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　応募者へのメッセージ
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* メッセージ */
    .messagetitlesp,
    .messagebodysp {
    position: absolute; 
    height: auto; 
    }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {            
            .messagetitlesp {
                display: block; 
                top: 155vw; 
                left: 10vw; 
                width: 80vw; 
                z-index: 10;
            }   
            
            .messagebodysp {
            position: absolute;
            top: 170vw;
            left: 10vw;
            z-index: 10;

            font-family: "fot-klee-pro", sans-serif;
            font-weight: 500;
            color: #232323;

            /* 縦書き解除 */
            writing-mode: horizontal-tb; /* 横書き */
            text-orientation: initial;   

            font-size: 4vw;
            line-height: 1.8;
            letter-spacing: 0.05em;

            /* 横書き用にサイズ調整（重要） */
            width: 80vw;      /* 横幅として使う */
            height: auto;     /* 高さ固定を解除 */

            white-space: pre-line; /* brは効く */

            margin: 0;
            padding: 0;
            background: transparent;
            }

        }


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



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　応募者へのメッセージ（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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

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




/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　募集要項(タイトルとボタン)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* 募集要項 */
    .requirementstitlesp,
    .technicalsp,
    .salessp,
    .clericalsp {
    position: absolute; 
    height: auto; 
    }


        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {            
            .requirementstitlesp {
                display: block; 
                top: 318vw; 
                left: 9vw; 
                width: 80vw; 
            }  
            
            .technicalsp {
                display: block; 
                top: 360vw; 
                left: 7vw; 
                width: 27vw; 
            }
            
             .salessp {
                display: block; 
                top: 360vw; 
                left: 36vw; 
                width: 27vw; 
            }
            
            .clericalsp {
                display: block; 
                top: 360vw; 
                left: 65vw; 
                width: 27vw; 
            }  
            
            /* 募集要項ボタンを前面に出してクリックできるようにする */
            .technicalsp,
            .salessp,
            .clericalsp{
            z-index: 98;      /* job-specより上に */
            cursor: pointer;   /* ボタン感 */
            }           
            
            .technicalsp:hover,
            .salessp:hover,
            .clericalsp:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.15);
            opacity: 0.95;
            }            

            .technicalsp:active,
            .salessp:active,
            .clericalsp:active{
            transform: translateY(0);
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
            }  
            
            .technicalsp.is-active,
            .salessp.is-active,
            .clericalsp.is-active{
            box-shadow: 0 0 0 3px #ffff4a;
            opacity: 1;
            }            


        }

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



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　募集要項タイトルとボタン（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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

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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　募集要項(詳細)
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/
        @media (max-width: 640px){

        .job-spec,
        .job-spec2,
        .job-spec3{
            padding: 405vw 7vw 10vw;  
        }

          .job-spec__inner{
            width: 100%;
            margin: 0;
        }


        .job-spec__row{
            grid-template-columns: 85vw;
            row-gap: 5vw;
            padding: 3vw 0;
        }

        .job-spec__dt{
            padding-left: 3vw;
            font-size: 5vw;
        }

        .job-spec__dd{
            line-height: 6.5vw;
            font-size: 4vw;
            padding: 2vw 3vw 2vw;
        }

        .job-spec__dt::before{
        content:"";
        position:absolute;
        left:0;
        top: -1.5vw;
        width: 1.2vw;
        height: 5vw;
        background:#0b2a5a;
        border-radius: 1vw;
        }
        
        .job-spec__note{
        margin: 0.5vw 1vw 0;
        font-size: 3vw;
        color:#333;        
        }
    }



 /* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　募集要項（アニメ）
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


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

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

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



/* @@@@@@@@@@@@@@@@@@@@@@@@@
SP　エントリータイトル
@@@@@@@@@@@@@@@@@@@@@@@@@@@@　*/


    /* エントリータイトル */
    .entrytitlesp {
    position: absolute; 
    height: auto; 
    }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .entrytitlesp {
                display: flex; 
                padding: 7vw 13vw 10vw;  
                width: 70vw; 
            }   
        }
            /* PC版（601px以上の画面サイズ） */
            @media (min-width: 601px) {
                .entrytitlesp{
                display: none; /* スマホ版では非表示 */
            }
        }




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   お問い合わせフォーム（SPデザイン）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

        @media (max-width: 600px) {

        /* セクション全体：中央寄せ＋上に少し余白 */
        .contact-section {
            width: 100vw;
            display: flex;
            justify-content: center;
            position: relative;
            margin: 30vw 0 10vw;  /* （上　左右　下のコンテンツからの距離） */
        }

        /* フォーム枠本体 */
        .contact-inner {
            width: 92vw;
            background-color: #f4f4f4;
            border: 1vw solid #cfcfcf;
            padding: 6vw 5vw 6vw;
            box-sizing: border-box;
        }

        /* 入力エリアと確認エリア切り替え用 */
        .contact-form-area {
            margin-top: 2vw;
        }

        .contact-confirm-area {
            display: none;
            margin-top: 5vw;
            border-top: 0.1vw solid #b0b0b0;
            padding-top: 5vw;
        }

        /* JS でこのクラスを付ける（PCと同じ挙動） */
        .contact-inner.is-confirm .contact-form-area {
            display: none;
        }

        .contact-inner.is-confirm .contact-confirm-area {
            display: block;
        }

        /* 1行分：SPは「縦並び」に変更 */
        .contact-row {
            display: flex;
            flex-direction: column;   /* ← ラベルの下に入力欄 */
            align-items: flex-start;
            padding: 2vw 0;
            border-top: 0.1vw solid #d5d5d5;
        }

        .contact-row:last-of-type {
            border-bottom: 0.1vw solid #d5d5d5;
        }

        /* テキストエリア行だけ上揃えにする（縦並びでも一応残しておく） */
        .contact-row--textarea {
            align-items: flex-start;
        }

        /* 必須/任意ラベル（SPでは上に乗る） */
        .contact-status {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 2vw;
        }



        /* ラベル（日本語＋英語） */
        .contact-label {
            width: 100%;
            padding-left: 0;
            margin-bottom: 3vw;
            box-sizing: border-box;
        }

        .label-jp {
            display: block;
            font-size: 4.5vw;   
        }


        /* 入力欄（常に100%幅） */
        .contact-input {
            width: 100%;
            padding-left: 0;
            box-sizing: border-box;
        }

        .contact-input input[type="text"],
        .contact-input input[type="email"],
        .contact-input textarea {
            width: 100%;
            padding: 3vw 6vw;
            border: 1px solid #c9dfe4;
            background-color: #e9fdff;
            font-size: 4.5vw;  
            box-sizing: border-box;
        }

        .contact-input textarea {
            height: 50vw;
            resize: vertical;
        }

        /* ボタン共通（PCとほぼ同じにしつつSP用サイズ） */
        .contact-buttons {
            text-align: center;
            margin-top: 12vw;
        }

        .contact-buttons--center {
            margin-top: 12vw;
        }

        .btn {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2vw 5vw;
            border-radius: 1vw;
            border: none;
            cursor: pointer;
            font-family: "hiragino-kaku-gothic-pron", sans-serif;
            font-weight: 600;
            font-style: normal;
        }

        .btn-confirm {
            background-color: #f28c38;
            color: #ffffff;
            text-align: center;
            line-height: 1.2;
        }


        /* 戻るボタン */
        .btn-back {
            background-color: #cccccc;
            color: #333333;
            margin-right: 1vw;
        }

        /* 送信ボタン（ダミー送信） */
        .btn-submit {
            background-color: #e95527;
            color: #ffffff;
        }

        /* 確認テーブル（見た目PCに近づける） */
        .confirm-heading {
            font-size: 5vw;
            margin: 2vw 0 1vw;
        }

        .confirm-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 4vw;
        }

        .confirm-table th,
        .confirm-table td {
            padding: 3vw 0;
            border-top: 0.1vw solid #dddddd;
            vertical-align: top;
        }

        .confirm-table th {
            width: 40vw;
            padding-right: 1.5vw;
            font-weight: 600;
        }

        /* ラベル行：必須マークを横に出す */
        .contact-label{
            display: flex;
            align-items: baseline;
            gap: 2vw;
            flex-wrap: wrap; /* 長いラベルも折り返し */
        }

        .reqmark{
            color:#e60012;
            font-size: 3.5vw;
            font-weight: 700;
        }

        .label-sub{
            display:block;
            width: 100%;
            font-size: 3.2vw;
            color:#666;
            margin-top: 1vw;
        }

        /* 生年月日：年/月/日を横並び＆詰める */
        .dob-group{
            display:flex;
            align-items:center;
            gap: 2vw;
            flex-wrap: wrap;
        }

        .dob-group input{
            width: 18vw;          /* 4桁/2桁にちょうどいい */
            padding: 3vw 3vw;
            border: 1px solid #c9dfe4;
            background-color: #e9fdff;
            font-size: 4.5vw;
            box-sizing: border-box;
        }

        .dob-unit{
            font-size: 4vw;
            color:#333;
        }

        /* ラジオ：3択を横並び→狭い端末は折り返し */
        .radio-group{
            display:flex;
            flex-wrap: wrap;
            gap: 4vw;
            font-size: 4vw;
        }

        .radio-group label{
            display:flex;
            align-items:center;
        }

        .radio-group input{
            margin-right: 1.5vw;
            transform: scale(1.1); /* タップしやすく */
        }

        /* 確認画面へボタン：黒背景（画像っぽく） */
        .btn-confirm{
            background:#000;
            color:#fff;
            border-radius: 1.2vw;
            padding: 3vw 10vw;
        }
        }





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



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


        /* フッター全体の基準箱 */
        .spfooter{
            position: relative;   
            width: 100vw;
            margin: 10vw 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; 
                        }
                    }