@charset "UTF-8";
@import url('./user.common.css');
/**************************************************/
/* ================================= common */








/**************************************************/
/* ================================= layout */
/* --- sec_1 */
#page_franchise #sec_1{ display: flex; }
#page_franchise #sec_1 .form_franchise{ display: flex; flex-flow: row wrap; align-items: center; align-content: center;}

#page_franchise #sec_1 .form_franchise *:is(.wrap_top, .wrap_bottom){ width: 100%;}

/* wrap_top */
#page_franchise #sec_1 .form_franchise .wrap_top h4{ display: inline-block; border-bottom: 1px solid #c0c0c0; color: #333; }
#page_franchise #sec_1 .form_franchise .wrap_top button{ position: absolute; background: #fff; border: 1px solid #c0c0c0;}

/* table */
#page_franchise #sec_1 .form_franchise tr > *{ overflow: visible; text-align: left; }
#page_franchise #sec_1 .form_franchise table:last-of-type th{ vertical-align: top; }
#page_franchise #sec_1 .form_franchise td > *{ width: 100%; }

#page_franchise #sec_1 .form_franchise .wrap_td{ gap: 5px;}
#page_franchise #sec_1 .form_franchise .wrap_phone > input{ width: calc(30% - 5px); max-width: 100px; text-align: center;}
#page_franchise #sec_1 .form_franchise .wrap_email input{ width: calc(50% - 14px); max-width: 200px;}
#page_franchise #sec_1 .form_franchise .wrap_email > *:not(input){ width: 100%;}
#page_franchise #sec_1 .form_franchise .wrap_area > *{ width: 100%;}

/* wrap_bottom */
#page_franchise #sec_1 .form_franchise .wrap_bottom{ display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; border-top: 1px solid #C0C0C0;}
#page_franchise #sec_1 .form_franchise .wrap_bottom a{ color: #999; }
#page_franchise #sec_1 .form_franchise .wrap_bottom .lb_chk{ color: #666; }
#page_franchise #sec_1 .form_franchise .wrap_bottom .lb_chk:has(input:checked){ color: var(--primary);}

#page_franchise #sec_1 .form_franchise .wrap_bottom .bx_scroll_Y{
    display: none; width: 100%;height: 200px; padding: 24px 28px; margin-bottom: 12px;
    background: #f5f5f5; border-radius: 4px;
    letter-spacing: -0.8px; color: #666; white-space: pre-line; line-height: 1.8;
}
#page_franchise #sec_1 .form_franchise .wrap_bottom.active .bx_scroll_Y{ display: block; }
/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    /* ==================== common */


    /* ==================== layout */
    /* --- sec_1 */
    #page_franchise #sec_1{ padding: 178px 0 250px; gap: 0 76px}
    #page_franchise #sec_1 img{ width: 35%;}

    #page_franchise #sec_1 .form_franchise{ width: 65%; max-width: 978px; gap: 0 30px; padding-right: 100px; }

    /* wrap_top */
    #page_franchise #sec_1 .form_franchise .wrap_top{ position: relative; padding-bottom: 43px; }
    #page_franchise #sec_1 .form_franchise .wrap_top h4{ padding-bottom: 15px; font-size: 25.5px; }
    #page_franchise #sec_1 .form_franchise .wrap_top button{  right: 0; top: 10px; width: 200px; height: 50px; }

    /* table */
    #page_franchise #sec_1 .form_franchise table{ width: calc(50% - 16px); }
    #page_franchise #sec_1 .form_franchise tr *{font-size: 18px; }
    #page_franchise #sec_1 .form_franchise tr > *{ height: 69px; padding: 7px 0;}
    #page_franchise #sec_1 .form_franchise th{ width: 130px; }
    #page_franchise #sec_1 .form_franchise table:last-of-type th{padding-top: 22px;}
    #page_franchise #sec_1 .form_franchise td *:is(select, .nice-select, input){ height: 55px;  }
    #page_franchise #sec_1 .form_franchise td > textarea{ height: 198px }

    /* wrap_bottom */
    #page_franchise #sec_1 .form_franchise .wrap_bottom{ margin-top: 28px;}
    #page_franchise #sec_1 .form_franchise .wrap_bottom * {font-size: 18px; }
    #page_franchise #sec_1 .form_franchise .wrap_bottom .lb_chk{ padding: 30px 0; }

}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){
    /* ==================== common */


    /* ==================== layout */
    #page_franchise #sec_1 { flex-flow: column nowrap; padding: 60px 30px 120px;}
    #page_franchise #sec_1 img{ order: 2; width: 100%;}

    #page_franchise #sec_1 .form_franchise{ position: relative; flex-flow: column nowrap; order: 1; }

    /* wrap_top */
    #page_franchise #sec_1 .form_franchise .wrap_top{ padding-bottom: 44px; text-align: center;}
    #page_franchise #sec_1 .form_franchise .wrap_top h4{ padding-bottom: 10px; font-size: 1.07rem; }
    #page_franchise #sec_1 .form_franchise .wrap_top button{ left: 0; bottom: 92px; width: 100%; height: 35px; font-size: 0.85rem; }

    /* table */
    #page_franchise #sec_1 .form_franchise table{ width: 100%;}
    #page_franchise #sec_1 .form_franchise tr *{font-size: 0.85rem; }
    #page_franchise #sec_1 .form_franchise tr > *{ height: 41px; padding: 2.5px 0;}
    #page_franchise #sec_1 .form_franchise th{ width: 100px; }
    #page_franchise #sec_1 .form_franchise table th{ padding-top: 11px; vertical-align: top;}
    #page_franchise #sec_1 .form_franchise td *:is(select, .nice-select, input){ height: 36px;  }
    #page_franchise #sec_1 .form_franchise td > textarea{ height: 102px }
    /* wrap_bottom */
    #page_franchise #sec_1 .form_franchise .wrap_bottom{ margin-top: 90px;}
    #page_franchise #sec_1 .form_franchise .wrap_bottom * {font-size: 0.85rem; }
    #page_franchise #sec_1 .form_franchise .wrap_bottom .lb_chk{ padding: 20px 0; }
}
@media screen and (max-width: 414px){
    #page_franchise #sec_1 .form_franchise th{ width: 80px; }
    #page_franchise #sec_1 .form_franchise .wrap_phone > input{ width: calc(50% - 8px); max-width: unset;}
    #page_franchise #sec_1 .form_franchise .wrap_phone > input:first-of-type{ width: calc(100% - 10px);}

    #page_franchise #sec_1 .form_franchise .wrap_email input{ max-width: unset; }
    #page_franchise #sec_1 .form_franchise .wrap_email input:nth-of-type(1){ width: 100%;}
    #page_franchise #sec_1 .form_franchise .wrap_email input:nth-of-type(2){ width: calc(100% - 16.5px);}
    
}