import '@/styles/style.scss'
import '@/styles/contents.scss'

export default function SignUpPage(){
    return(
        <div className="center-page-wrap">
            <div className="center-page-inner">
                <div className="center-page-tit">Q.CAST3ログインID発行申請</div>
                <div className="sub-table-box signup">
                    <div className="table-box-title-wrap">
                        <div className="title-wrap">
                            <h3>販売代理店情報 <span className="important">(*必須)</span></h3>
                            <span className="option">※登録されるリセラーの会社名を入力してください。(2次店は「○○販売株式会社 (2次店：××設備株式会社）」でご記入ください。)</span>
                        </div>
                    </div>
                    <div className="common-table">
                        <table>
                            <colgroup>
                                <col style={{width : '180px'}}/>
                                <col />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th>販売代理店名 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '700px'}}>
                                            <input type="text" className="input-light" defaultValue={'株式会社エネルギア・ソリューション・アンド・サービス (2次店：山口住機販売有限会社)'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>販売代理店名フリガナ <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '700px'}}>
                                            <input type="text" className="input-light" defaultValue={'カブシキガイシャエネルギア・ソリューション・アン..'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>郵便番号/住所 <span className="important">*</span></th>
                                    <td>
                                        <div className="flx-box">
                                            <div className="input-wrap mr5" style={{width: '200px'}}>
                                                <input type="text" className="input-light" defaultValue={'1234567'}/>
                                            </div>
                                            <div className="input-wrap" style={{width: '495px'}}>
                                                <input type="text" className="input-light" defaultValue={'全角50文字以内'}/>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>電話番号 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>FAX番号 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>法人番号</th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light"/>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div className="sub-table-box signup">
                    <div className="table-box-title-wrap">
                        <div className="title-wrap">
                            <h3>担当者情報 <span className="important">(*必須)</span></h3>
                        </div>
                    </div>
                    <div className="common-table">
                        <table>
                            <colgroup>
                                <col style={{width : '180px'}}/>
                                <col />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th>担当者名 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>担当者名ふりがな</th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>アプリケーションID <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>メールアドレス <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>電話番号 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>FAX番号 <span className="important">*</span></th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>部署名</th>
                                    <td>
                                        <div className="input-wrap" style={{width: '200px'}}>
                                            <input type="text" className="input-light" />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div className="sign-up-btn-wrap">
                    <button className="btn-origin grey mr5">ログイン画面に移動</button>
                    <button className="btn-origin navy">ID承認要求</button>
                </div>
            </div>
        </div>
    )
}