チェックボックスのチェックが付かない

Question

###チェックボックスのカスタマイズについて

inputタグとlabelタグは、　id="agree"　for="agree"　で関連づけています。
同意するの左にチェックボックスを配置します。
inputは　#agree
labelには　.agree
を指定しています。

<ul>

   <li>
      <input type="checkbox" name="agree" id="agree">
      <label class="agree" for="agree">同意する</label>
   </li>

   <li>
      <button class="btn_agree" type="submit">送信する</button>
   </li>

</ul>

inputのチェックボックスを非表示にし、
新たにチェックボックスをチェックマークの設定をします。

#agree{
	display: none;
}

.agree{
	position: relative;
	padding-left: 30px;
}

/* チェックボックスの設定 */
.agree:after{
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	display: block;
	width: 23px;
	height: 23px;
	border: 1px solid #ccc;
	background-color: rgba(255,255,255,1);
	z-index: 1;
}

/* チェックマークの指定 */
.agree:before{
	content: "";
	position: absolute;
	top: -2px;
	left: 3px;
	display: block;
	width: 7px;
	height: 12px;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	z-index: 20;
	opacity: 0;
}

/* 要素を表示する */
#agree:checked + label:before{
	opacity: 1; 
}

でチェックボックスをクリックすれば、 opachty:1; でチェックマークが表示されるはずですが、表示されません。

###試したこと1

Z-indexが邪魔しているかなと思い、
チェックマークをz-index: 20;　に指定しても表示されません、
チェックボック、チェックマーク共に指定しなくても表示されません。
（チェックマークは隠れてしまうのでチェックボックスより上になるように設定が必要です）

###試したこと2
.agreeのpadding-leftかなと思い削除しましたが関係ないようです。

opacity:　0;を外すとチェックマークが出現します。。
チェックークの指定は合っているようです。

どうぞ宜しくお願い致します。

Answer 1

CSSの
.sec_11
が不要ではないでしょうか。

こちらが記載されているので、class=sec_11がついているDOMを指定しに行っているようなので、削除すれば動くと思われます。

追記
.sec_11を削除した状態では、こちらのローカルで確認したときは動いているので、もし動かないのであれば、別の要因があるかと思います。

環境：Chrome

Comments

[a_a]

.sec_11　間違えて入れてしまいました。
これがなくてもチェックマークが付かないです。

間違ったコードでお騒がせし申し訳ございません、、
質問修正致します。

[a_a]

ここのコードが問題ないと分かりました。
質問する前に抜き出して試してみべきでした。
どうもありがとうございます！
全体を見直してみます。