[html][CSS]プルダウン選択値に応じて項目を表示、非表示させたい

前提・実現したいこと

プルダウンメニューで「スカート」を選んだ時のみ、丈を選択する新たなプルダウンメニューを表示させたい。

発生している問題

どの項目を選択しても[display:none]が適応され、丈を選択するメニューが出てこない

ソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="toroku.css"><!--CSSと連携-->
8    <title>登録ページ</title>
9</head>
10<body>
11    <header>
12        <h1 class="title"><a href="index.html">closet</a></h1>
13        <nav class="nav">
14          <ul class="menu-group">
15            <li class="menu-item"><a href=toroku1.html>登録</a></li><!--デフォルトで縦表示なのでCSSで設定-->
16            <li class="menu-item"><a href=itiran.html>一覧</a></li><!--デフォルトで「・」などのマーカー文字が先頭に表示されるのでCSSで設定-->
17            <li class="menu-item"><a href=index.html#zyoken>条件設定</a></li>
18          </ul>
19        </nav>
20      </header>
21    <h3>
22    <p>
23        登録フォ―ム
24        </p>
25        <p>
26        衣服を追加
27        </p>
28        <form action="kakunin.php" method="POST"><!--2で処理を行う-->
29          <p>  
30            名称
31          </p>
32          <p>
33            <input class="name" type="text" name="name" placeholder=他のアイテムと被らないようにしよう>
34          </p>
35          <p>色を選択</p>
36          <p>
37            <select class="color" name="color">
38              <option value="赤">赤系</option>
39              <option value="黒">黒系</option>
40              <option value="白">白系</option>
41            </select>
42          </p>
43
44          <p>アイテムの種類を選択</p>
45          <p>
46            <select class="kind" name="kind">
47              <option id="zubon" value="ズボン">ズボン</option>
48              <option id="skato" value="スカート">スカート</option>
49              <option id="auta" value="アウター">アウター</option>
50            </select>
51          </p>
52
53          <div class=take>
54          <p>丈</p>
55          <p>
56            <select class="take_take" name="take">
57              <option id="hiza" value="膝">膝</option>
58              <option id="hizaue" value="膝上">膝上</option>
59              <option id="hizasita" value="膝下">膝下</option>
60            </select>
61          </p>
62          </div>
63
64          <input type="submit" name="kakunin_button" value="確認する">
65        </form>
66    </h3>
67</body>
68</html>

css
1header {
2    margin-top:0px;
3    z-index:999;/*奥行設定　一番手前*/
4    display:flex;/*ヘッダーと項目を横並び*/
5    width: 100%;
6    height: 100px;
7    align-items: center;/*上下幅をセンタリング*/
8    background-color: #9bc593;
9  }
10
11  .title {
12    margin-right: auto;/*タイトルから隣接する要素の右側に自動で最大値の値を取る=タイトルだけ左寄せ*/
13  }
14
15  .menu-item {
16    display: inline-block;/*横並びにする*/
17  }
18
19  nav ul li a{
20    position: relative;/*初期位置　これを定義しないとleftが使えない*/
21    text-decoration: none;/*link設定なので下線を消す*/  
22    border: double 3px rgb(255, 255, 255);/*線の種類 太さ 色*/
23    margin:1.0em;/*ボックス間の余白*/
24    padding: 100.0em 30.0em 30.0em 30.0em;/*ボックス内の余白*/
25    background-color:rgb(255, 255, 255);
26    list-style: none;/*「・」などのマーカー文字を消す*/
27    padding: 10px;/*項目同士の間隔*/
28    font-family:'YuGothic';
29    color:#1a1a1a;
30    font-size:15px;
31}
32
33body{
34    margin:0;
35    position:0;
36    width: 100%;
37    float:left;
38    background-color: rgb(255, 250, 220);
39    font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
40    color:#1a1a1a;
41    font-size:20px
42}
43
44h1 a{/*closetロゴ*/
45    margin-top:0;
46    position: relative;/*初期位置　これを定義しないとleftが使えない*/
47    left:10px;
48    border-top: solid #ffffff 3px;/*上のボーダー*/
49    border-bottom: solid  #ffffff 3px;/*下のボーダー*/
50    padding: 0em 0em 0em 0em;
51    text-decoration: none;/*link設定なので下線を消す*/
52    font-family:'YuGothic';
53    color: #1a1a1a;
54    font-size: 50px;
55}
56
57
58h3{/*ヘッダー以外の部分*/
59  position:relative;
60  left:10px;
61  margin-top:105;
62  font-size:20px;
63}
64
65
66.name{/*名称*/
67  padding: 15px;
68  width:30%;
69  background-color: #ffffff;
70  border: #000000;
71  color: #1a1a1a;
72  border-radius: 5px;
73}
74
75.color {/*色*/
76  position: relative;
77  left: 0;
78  max-width: 360px;
79	padding: 0;
80}
81
82.kind {/*種類*/
83    position: relative;
84    left: 0;
85    max-width: 360px;
86      padding: 0;
87  }
88
89#skato:checked+.take{/*スカートにチェックを入れたとき*/
90  display:block;
91}
92
93.take {
94    display:none;
95    position: relative;
96    left: 0;
97    max-width: 360px;
98    padding: 0;
99}