export default function OffsetTab01(){
    return(
        <>
            <div className="outline-wrap">
                <div className="guide sm">
                    辺と始点を選択して長さと方向を指定してください。
                </div>
                <div className="discrimination-box mb10">
                    <div className="d-check-radio pop mb10">
                        <input type="radio" name="radio01" id="ra01" />
                        <label htmlFor="ra01">1支店</label>
                    </div>
                    <div className="padding-form">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    長さ
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '100px'}}>
                                            <input type="text" className="input-origin block" defaultValue={100}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    方向 (矢印)
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-direction">
                                            <button className="direction up"></button>
                                            <button className="direction down act"></button>
                                            <button className="direction left"></button>
                                            <button className="direction right"></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="discrimination-box">
                    <div className="d-check-radio pop mb10">
                        <input type="radio" name="radio01" id="ra02" />
                        <label htmlFor="ra02">2支店</label>
                    </div>
                    <div className="padding-form">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    長さ
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="input-grid mr5" style={{width: '100px'}}>
                                            <input type="text" className="input-origin block" defaultValue={100}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    方向 (矢印)
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-direction">
                                            <button className="direction up"></button>
                                            <button className="direction down act"></button>
                                            <button className="direction left"></button>
                                            <button className="direction right"></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}