border-bottomをメディアクエリ内のPCサイズの場合のみ消したい

<span class="Year">内をborder-bottomでレスポンシブの場合のみ下線を引き、560px以上(タブレット、PC)では非表示にしたいので、
@media screen and (min-width: 560px) {
border-style: none;
}
このようにしたのですが、スマホサイズも下線が消えてしまいました。
何が問題なのか、教えていただけないでしょうか。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>無題ドキュメント</title>
6	<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
7<link href="css/reset.css" rel="stylesheet" type="text/css">
8<link href="css/style.css" rel="stylesheet" type="text/css">
9</head>
10
11<body>
12<main>
13   <section id="career">
14        <div class="wrapper">
15            <h3 class="about">about</h3>
16            <dl class="career-flex">
17                <dt class="career-flexInner-left">
18                <span class="Year">2019年
19                <span class="term">(2019.1)</span></span>
20                </dt>
21                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト
22                </dd>
23            </dl>
24            <dl class="career-flex">
25                <dt class="career-flexInner-left">2019年
26                <span class="term">(2019.1〜2019.1)</span>
27				</dt>
28                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span><p class="text">
29					テキストテキストテキストテキストテキストテキスト</p>
30                </dd>
31            </dl>
32            <dl class="career-flex">
33                <dt class="career-flexInner-left">2019年
34                <span class="term">(2019.1〜2019.1)</span>   
35                </dt>
36                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span><p class="text">
37                テキストテキストテキストテキストテキストテキスト</p>
38                </dd>
39            </dl>
40            <dl class="career-flex">
41                <dt class="career-flexInner-left">2019年
42                <span class="term">(2019.1〜2019.1)</span>   
43				</dt>
44                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span>
45                   <p class="text">
46                   テキストテキストテキストテキストテキストテキスト
47                   </p>
48                </dd>
49            </dl>
50            <dl class="career-flex">
51                <dt class="career-flexInner-left">2019年
52                <span class="term">(2019.1〜2019.1)</span>   
53				</dt>
54                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span>
55                   <p class="text">
56                   テキストテキストテキストテキストテキストテキスト<p class="text_2">テキストテキストテキストテキストテキストテキスト
57                   </p>
58                </dd>
59            </dl>
60            <dl class="career-flex">
61                <dt class="career-flexInner-left">2019年
62                <span class="term">(2019.1〜現在)</span></dt>
63                <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span>
64                   <p class="text">
65				テキストテキストテキストテキスト                  </p>
66                  <p class="text_2">テキストテキストテキストテキストテキストテキスト </p>
67                  <p class="text">
68                   テキストテキストテキストテキストテキストテキスト</p>
69					   
70                   </p>
71                </dd>
72            </dl>
73        </div>
74    </section>
75    </main>
76</body>
77</html>
78

css
1@charset "UTF-8";
2/* CSS Document */
3
4html {
5	font-size: 62.5%;
6}
7body {
8	font-family: 'Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
9	background: #fafafa;
10}
11
12
13#career {
14    margin: 80px 0 160px;
15}
16
17h3 {
18    font-family: 'Futura';
19    font-size: 54px;
20    letter-spacing: .3rem;
21    line-height: 1;
22    font-weight: normal;
23	text-align: center;
24    margin-bottom: 60px;
25}
26.about {
27	color: #e3a1a1;
28}
29.title-sub-page {
30    font-size: 16px;
31    letter-spacing: .2rem;
32    line-height: 34px;
33    margin-bottom: 60px;
34}
35
36.title-sub-page::before,
37.title-sub-page::after {
38    content: '';
39    display: inline-block;
40    width: 15px;
41    height: 1px;
42    margin: 0 10px;
43    background-color: #333;
44    vertical-align: middle;
45}
46
47.skills-flexAll {
48    margin-top: 60px;
49}
50
51.career-flex {
52    position: relative;
53    max-width: 800px;
54    margin: 0 auto;
55}
56
57.career-flexInner-left {
58    font-size: 18px;
59}
60
61dl {
62    display: block;
63    margin-block-start: 1em;
64    margin-block-end: 1em;
65    margin-inline-start: 0px;
66    margin-inline-end: 0px;
67}
68
69.career-bold {
70    font-size: 16px;
71    font-weight: 500;
72    color: #333;
73}
74.text {
75	font-size: 1.2rem;
76	line-height: 3;
77}
78.text_2 {
79	font-size: 1.2rem;
80	line-height: 1;
81}
82
83.term {
84	font-size: 1.0rem;
85}
86.Year {
87    border-bottom: solid 3px #e3a1a1;	
88}
89/*===============================================
90560px以上
91===============================================*/
92@media screen and (min-width: 560px) {
93#career {
94    margin: 80px 0 160px;
95}
96
97h3 {
98    font-family: 'Futura';
99    font-size: 54px;
100    letter-spacing: .3rem;
101    line-height: 1;
102    font-weight: normal;
103	text-align: center;
104    margin-bottom: 60px;
105}
106.about {
107	color: #e3a1a1;
108}
109.title-sub-page {
110    font-size: 16px;
111    letter-spacing: .2rem;
112    line-height: 34px;
113    margin-bottom: 60px;
114}
115
116.title-sub-page::before,
117.title-sub-page::after {
118    content: '';
119    display: inline-block;
120    width: 15px;
121    height: 1px;
122    margin: 0 10px;
123    background-color: #333;
124    vertical-align: middle;
125}
126
127.skills-flexAll {
128    margin-top: 60px;
129}
130
131dl {
132    display: block;
133    margin-block-start: 1em;
134    margin-block-end: 1em;
135    margin-inline-start: 0px;
136    margin-inline-end: 0px;
137}
138
139.career-bold {
140    font-size: 16px;
141    font-weight: 500;
142    color: #333;
143}
144.text {
145	font-size: 1.2rem;
146	line-height: 3;
147}
148.text_2 {
149	font-size: 1.2rem;
150	line-height: 1;
151}
152
153.term {
154	font-size: 1.0rem;
155	margin-top: 3px;
156	display: block;
157}
158.career-flex {
159    display: flex;
160    border-left: none;
161    padding-left: 0;
162    padding-top: 0;
163}
164
165.career-flexInner-left {
166    width: 20%;
167    padding-top: 30px;
168	text-align: center;
169}
170
171.career-flexInner-right {
172    width: 80%;
173    border-left: 2px solid #ddd;
174    padding-left: 8%;
175    padding-top: 30px;
176    position: relative;
177    font-size: 15px;
178}
179
180.career-flexInner-right::before {
181    content: '';
182    display: block;
183    width: 15px;
184    height: 15px;
185    border-radius: 50%;
186    background: #e3a1a1;
187    position: absolute;
188    left: -8px;
189}
190}
191
192.br-sp,p.works-item-memo-sp {
193    display: none;
194}
195.Year {
196    border-style: none;
197}	
198	
199}
200	
201/*===============================================
202960px以上
203===============================================*/
204@media screen and (min-width: 960px){
205}
206
207

css
1@charset "UTF-8";
2/* http://meyerweb.com/eric/tools/css/reset/ 
3   v2.0 | 20110126
4   License: none (public domain)
5*/
6
7html,
8body,
9div,
10span,
11applet,
12object,
13iframe,
14h1,
15h2,
16h3,
17h4,
18h5,
19h6,
20p,
21blockquote,
22pre,
23a,
24abbr,
25acronym,
26address,
27big,
28cite,
29code,
30del,
31dfn,
32em,
33img,
34ins,
35kbd,
36q,
37s,
38samp,
39small,
40strike,
41strong,
42sub,
43sup,
44tt,
45var,
46b,
47u,
48i,
49center,
50dl,
51dt,
52dd,
53ol,
54ul,
55li,
56fieldset,
57form,
58label,
59legend,
60table,
61caption,
62tbody,
63tfoot,
64thead,
65tr,
66th,
67td,
68article,
69aside,
70canvas,
71details,
72embed,
73figure,
74figcaption,
75footer,
76header,
77hgroup,
78menu,
79nav,
80output,
81ruby,
82section,
83summary,
84time,
85mark,
86audio,
87video {
88    margin: 0;
89    padding: 0;
90    border: 0;
91    font-size: 100%;
92    font: inherit;
93}
94/* HTML5 display-role reset for older browsers */
95
96article,
97aside,
98details,
99figcaption,
100figure,
101footer,
102header,
103hgroup,
104menu,
105nav,
106section {
107    display: block;
108}
109body {
110    line-height: 1;
111}
112ol,
113ul {
114    list-style: none;
115}
116blockquote,
117q {
118    quotes: none;
119}
120blockquote:before,
121blockquote:after,
122q:before,
123q:after {
124    content: '';
125    content: none;
126}
127table {
128    border-collapse: collapse;
129    border-spacing: 0;
130}/* CSS Document */
131
132

hatena19

2019/12/29 09:10

実際のHTMLとCSSを提示してください。

mimicon

2019/12/29 09:13

まだサイトの作成途中なので、ナビゲーションなどはまだなく、ただ実際の文章をテキストテキストに変更しただけであとはそのままで削っていないです。質問と違う返事をしているようでしたらすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

}が余分なのでそれ以降の設定がメディアクエリの外に出てしまってます。

css
1/*前略*/
2
3@media screen and (min-width: 560px) {
4
5/*中略*/
6
7    left: -8px;
8}
9} /*この括弧を削除してください*/
10
11.br-sp,p.works-item-memo-sp {
12    display: none;
13}
14.Year {
15    border-style: none;
16}    
17
18}