SP版ドロワーがスワイプで閉じない

前提・実現したいこと

スマホ用ドロワーを作成しており、
クリックで開く、メニュー外クリックで閉じるは実装できています。

メニュー部スワイプで閉じたいのですがうまくいきません。
イメージ：https://www.google.com/のSP版ドロワー

発生している問題・エラーメッセージ

スワイプでドロワー閉じ処理が追加できない

該当のソースコード

html
1<div class="sp-top">
2	    		<div class="top-inline hamburger menu-trigger">
3		        	<a class="top-link1 " href="#">
4		        		<img src="img/ham.png">
5		        	</a>
6		        </div>
7		    </div>
8			<input type="checkbox" id="navTgl">
9			<label for="navTgl" class="open"><span></span></label>
10			<label for="navTgl" class="close"　id="ham"></label>
11			<nav class="hammenu" id="ham">
12			   <!-- ～メニュー中身～ -->
13			</nav>
14  <div class="overlay"></div>

CSS
1.contents {
2  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
3}
4#navTgl:checked ~ .contents {
5  transform: translateX(250px);
6}
7
8/* :::::: toggle button :::::: */
9#navTgl {
10  display: none;
11}
12label {
13    cursor: pointer;
14    position: absolute;
15    top: 2.2vh;
16    left: 5vw;
17}
18.open {
19  z-index: 2;
20  width: 24px;
21  height: 24px;
22    /* background: lightSeaGreen; */
23  transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
24  background-image: url(../img/ham.png);
25  background-repeat: none;
26  background-size: 24px;
27  background-repeat: no-repeat;
28}
29.open::before,
30.open::after {
31  content: "";
32}
33.open span,
34.open::before,
35.open::after {
36  content: "";
37  position: absolute;
38  top: calc(50% - 1px);
39  left: 30%;
40  width: 40%;
41  /*border-bottom: 2px solid white;*/
42  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
43}
44.open::before {
45  transform: translateY(-8px);
46}
47.open::after {
48  transform: translateY(8px);
49}
50.close {
51  z-index: 1;
52  width: 100%;
53  height: 100%;
54  pointer-events: none;
55  transition: background .6s;
56  margin: 0 0 0 -25px;
57}
58#navTgl:checked + .open {
59  background: indianRed;
60  transform: translateX(250px);
61  display: none;
62}
63#navTgl:checked + .open span {
64  transform: scaleX(0);
65}
66#navTgl:checked + .open::before {
67  transform: rotate(45deg);
68}
69#navTgl:checked + .open::after {
70  transform: rotate(-45deg);
71}
72#navTgl:checked ~ .close {
73    pointer-events: auto;
74    background: rgba(0,0,0,.5);
75    width: 100vh;
76    height: 100vh;
77    margin: -2.2vh 0 0px -5vw;
78}
79
80/* :::::: drawer menu :::::: */
81.hammenu {
82    z-index: 1;
83    position: fixed;
84    overflow: auto;
85    top: 0;
86    left: 0;
87    width: 67vw;
88    height: 100vh;
89    margin: 0;
90    padding: 10px;
91    box-sizing: border-box;
92    background: #ffffff;
93    transform: translateX(-100%);
94    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
95}
96.hammenu h2,
97.hammenu a {
98  color: rgba(0,0,0,.54);
99  font-size: 16px;
100}
101.hammenu h2 {
102  text-align: center;
103}
104.hammenu ul {
105  margin: 0;
106  padding: 0;
107}
108.hammenu li {
109  font-size: .8em;
110  line-height: 1.4;
111  text-align: left;
112  margin: 0px 0px 0px 0px;
113}
114.hammenu li:not(:first-child) {
115  border-top: 1px solid rgba(255,255,255,.6);
116}
117.hammenu a {
118 /* display: block;*/
119/*  padding: 1em 2em;*/
120  text-decoration: inherit;
121  transition: background .6s;
122}
123/*.hammenu a:hover {
124  background: black;
125}
126*/
127.hammenu img{
128  padding:0 4vw 0 0;
129}
130
131
132#navTgl:checked ~ .hammenu {
133  transform: none;
134}
135
136.hamlogo{
137  margin:0 0 0 0;
138}