ラジオボタンと「同意する、しない」の文字が割れて表示されてしまう。

実現したいこと
ラジオボタンが半割れているのを直したいです。
また、「同意する、しない」のラジオボタンをクリックすると、「同意する、しない」の文字の上の方がすこし、割れる？ような感じになってしまいます。

ちょっと説明の意味が分かりにくいですね。付属画像１のような状態です。

付属画像１

試したこと
リセットcssを使わないければ、普通にラジオボタンも割れることなく、クリック時にも「同意する、しない」の文字も割れることもないのですが、提示したリセットｃｓｓを適応して状態でラジオボタンとその文字をきちんと表示したいのですが、出来ずに困っています。

html
1<!DOCTYPE html>
2 <html>
3 <head> 
4<meta charset ="utf-8"> 
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<link rel="stylesheet" href="reset.css"> 
7<link rel="stylesheet" href="ooo2.css"> 
8<title>初期フォーム確認画面</title> 
9<style type="text/css">
10    /* レスポンシブ対応で右に出る謎の余白を無くす */
11    .wrapper {
12         overflow: hidden;
13     }
14</style>
15
16</head>
17 <body>
18<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
19<div class="wrapper">
20
21
22<div class="main">
23 
24<p>テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、</p>
25
26
27<h4>第1条 (定義)</h4>
28
29<p>テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、</p>
30
31
32<div class="radio_text">
33
34<section> 
35<label class="radio_text"> 
36<input type="radio" name="doui" value="suru">同意する
37 </label>
38 <label class="radio_text">
39 <input type="radio" name="doui" value="shinai">同意しない
40 </label> 
41</section>
42</div>
43 
44<table> 
45
46<tr> 
47<p></p>
48<p></p>
49<p></p>
50<td colspan="2"><button id="soushin">送信する</button>
51
52<script>
53    var doui = document.getElementById('soushin');
54    doui.addEventListener('click', function() {
55        if (document.doui_form.doui.value != "suru") {
56            alert("利用規約に同意して頂けない場合は商品のご購入はお控えください。");
57        } else {
58            document.doui_form.submit();
59        }
60    })
61</script>
62
63</td>
64
65
66 </tr> 
67
68</table> 
69</div>
70 </body> 
71</html> 
72
73
74

ooo2css
1/*スクロール内のボックスの配置*/
2.main {
3	
4	margin-left: auto; /* ボックスを中央寄せにするため */
5	margin-right: auto; /* ボックス中央寄せにするため */
6 }
7
8
9
10
11/*スクロール内のボックスの指定*/
12.main{
13    width:650px;
14    height:160px;
15    border: 1.3px solid #63e02d;
16    overflow: auto;
17    color: #63e02d;
18	margin-top: 17px;/* ボックス内文字上の余白 */
19	font-size: 14px;/* 文字の大きさ */
20	padding-left: 10px;/* ボックス内文字左の余白 */
21}
22
23/*スクロールの幅の指定*/
24.main::-webkit-scrollbar{
25    width: 14px;
26    height: 10px;
27
28}
29/*スクロールの背景の指定*/
30.main::-webkit-scrollbar-track
31{
32    border-radius:5px;
33    border-left: 1px solid #63e02d;/* スクロールバーに接する左の線の表示 */
34}
35/*スクロールのつまみ部分の指定*/
36.main::-webkit-scrollbar-thumb
37{
38    border-radius: 5px;
39    background: #63e02d;
40}
41
42
43.radio_text{
44	text-align: center;/* 文字を中央に配置 */	
45	margin-top: 30px;/* 上の余白 */
46	font-size: 24px;
47}
48  
49 
50
51
52
53/*RadioとText*/
54label.radio_text {
55	cursor       : pointer;
56	position     : relative;
57	
58	margin-right : 20px;
59	overflow     : hidden;
60	padding-left : 32px;
61	display      : inline-block;
62}
63label.radio_text:before {
64	position      : absolute;
65	width         : 24px;
66	height        : 24px;
67	border        : 1px solid #63e02d;
68	border-radius : 50%;
69	left          : 0px;
70	top           : 4px;
71	content       : '';
72	z-index       : 3;
73}
74label.radio_text:after {
75	content          : '';
76	position         : absolute;
77	width            : 26px;
78	height           : 26px;
79	border-radius    : 100%;
80	left             : 0px;
81	top              : 5px;
82	background-color : #63e02d;
83	z-index          : 1;
84}
85label.radio_text input[type="radio"] {
86	-moz-appearance: none;
87	-webkit-appearance: none;
88	position   : absolute;
89	z-index    : 2;
90	width      : 48px;
91	height     : 48px;
92	left       : -48px;
93	top        : 1px;
94	margin     : 0px;
95	box-shadow : 26px -1px #FFF;
96}
97label.radio_text input[type="radio"]:checked {
98	box-shadow : none;
99}
100label.radio_text input[type="radio"]:focus {
101	opacity    : 0.2;
102	box-shadow : 20px -1px #FFF;
103}
104/*ラジオボタンをクリック時フォーカスインジケーター（縦線）が見えているので*/
105:focus {
106    outline: none;
107}

resetcss
1/* 
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com 
6Twitter: @rich_clark
7*/
8 
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure, 
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29 
30body {
31    line-height:1;
32}
33 
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section { 
36    display:block;
37}
38 
39nav ul {
40    list-style:none;
41}
42 
43blockquote, q {
44    quotes:none;
45}
46 
47blockquote:before, blockquote:after,
48q:before, q:after {
49    content:'';
50    content:none;
51}
52 
53a {
54    margin:0;
55    padding:0;
56    font-size:100%;
57    vertical-align:baseline;
58    background:transparent;
59}
60 
61/* change colours to suit your needs */
62ins {
63    background-color:#ff9;
64    color:#000;
65    text-decoration:none;
66}
67 
68/* change colours to suit your needs */
69mark {
70    background-color:#ff9;
71    color:#000; 
72    font-style:italic;
73    font-weight:bold;
74}
75 
76del {
77    text-decoration: line-through;
78}
79 
80abbr[title], dfn[title] {
81    border-bottom:1px dotted;
82    cursor:help;
83}
84 
85table {
86    border-collapse:collapse;
87    border-spacing:0;
88}
89 
90/* change border colour to suit your needs */
91hr {
92    display:block;
93    height:1px;
94    border:0;   
95    border-top:1px solid #cccccc;
96    margin:1em 0;
97    padding:0;
98}
99 
100input, select {
101    vertical-align:middle;
102}