ラジオボタンをクリックすると謎の線が表示されてしまう。

実現したいこと
ラジオボタンをクリックすると、一番上の付属画像のように、細い縦線が出てしまいます。左右のボタン両方とも線がでます。初めから細い線が出ているわけではありません。ラジオボタンをクリックすると、細い線が出ます。

しかし、ラジオボタンをクリックした状態でさらに、細い縦線が出ている状態で、マウスで別なところ（ページ内のどこでも）の場所をクリックすると、なぜか、細い線が消えます。

細い線が出ないようにしたいのですが、調べてもそのような状態の記事が見つからなく、途方に暮れています。

原因はなんでしょうか？回答よろしくお願いいたします。

線が出ている画像

ページ内のどこでも）の場所をクリックするとなぜか線が消える画像

環境
プログラミングソフトVisual Studio Code
Windows１０

html
1<!DOCTYPE html>
2 <html>
3 <head> 
4<meta charset ="utf-8"> 
5<link rel="stylesheet" href="kiyaku.css"> 
6<title></title> 
7
8
9</head>
10 <body>
11<div class="radio_text">
12
13<section> 
14<label class="radio_text"> 
15<input type="radio" name="doui" value="suru">同意する
16 </label>
17 <label class="radio_text">
18 <input type="radio" name="doui" value="shinai">同意しない
19 </label> 
20</section>
21</div>
22</body> 
23</html> 
24
25

css
1/*RadioとText*/
2label.radio_text {
3	cursor       : pointer;
4	position     : relative;
5	
6	margin-right : 20px;
7	overflow     : hidden;
8	padding-left : 32px;
9	display      : inline-block;
10}
11label.radio_text:before {
12	position      : absolute;
13	width         : 24px;
14	height        : 24px;
15	border        : 1px solid #63e02d;
16	border-radius : 50%;
17	left          : 0px;
18	top           : 4px;
19	content       : '';
20	z-index       : 3;
21}
22label.radio_text:after {
23	content          : '';
24	position         : absolute;
25	width            : 26px;
26	height           : 26px;
27	border-radius    : 100%;
28	left             : 0px;
29	top              : 5px;
30	background-color : #63e02d;
31	z-index          : 1;
32}
33label.radio_text input[type="radio"] {
34	-moz-appearance: none;
35	-webkit-appearance: none;
36	position   : absolute;
37	z-index    : 2;
38	width      : 48px;
39	height     : 48px;
40	left       : -48px;
41	top        : 1px;
42	margin     : 0px;
43	box-shadow : 26px -1px #FFF;
44}
45label.radio_text input[type="radio"]:checked {
46	box-shadow : none;
47}
48label.radio_text input[type="radio"]:focus {
49	opacity    : 0.2;
50	box-shadow : 20px -1px #FFF;
51}
52