1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | :root {
|
10 | --nn-grey-bg: #f2f4f6;
|
11 | --nn-grey-border: #d2d4d6;
|
12 | --nn-green-bg: #ddffee;
|
13 | --nn-green-border: #00ddaa;
|
14 | --nn-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
15 | --nn-serif: Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
16 | --nn-monospace: MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
17 | }
|
18 |
|
19 |
|
20 | *,
|
21 | ::before,
|
22 | ::after {
|
23 | box-sizing: border-box;
|
24 | }
|
25 |
|
26 |
|
27 | html {
|
28 |
|
29 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
30 |
|
31 | overflow-y: scroll;
|
32 | cursor: default;
|
33 |
|
34 | text-decoration-skip-ink: none;
|
35 |
|
36 | -webkit-text-size-adjust: 100%;
|
37 |
|
38 | -webkit-text-decoration-skip: objects;
|
39 |
|
40 | -webkit-overflow-scrolling: touch;
|
41 | }
|
42 |
|
43 |
|
44 | body {
|
45 | margin: 0;
|
46 | line-height: 1.7;
|
47 | overflow-wrap: break-word;
|
48 |
|
49 | word-wrap: break-word;
|
50 | }
|
51 |
|
52 |
|
53 | details, main {
|
54 | display: block;
|
55 | }
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | h1, h2, h3, h4, h5, h6, p, hr,
|
64 | dl, dt, dd, ol, ul,
|
65 | address, details, figcaption, fieldset, form, pre, summary, table {
|
66 | margin-top: 0;
|
67 | margin-bottom: 1rem;
|
68 | }
|
69 |
|
70 |
|
71 | ol ol, ol ul,
|
72 | ul ol, ul ul,
|
73 | blockquote > :last-child,
|
74 | fieldset > :last-child,
|
75 | pre > :last-child {
|
76 | margin-bottom: 0;
|
77 | }
|
78 |
|
79 |
|
80 | dd, li {
|
81 | margin-left: 2.5em;
|
82 | }
|
83 |
|
84 |
|
85 | blockquote, figure {
|
86 | margin: 0 0 1rem 2.5em;
|
87 | }
|
88 |
|
89 |
|
90 | ol, ul {
|
91 | padding-left: 0;
|
92 | }
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 | h1 {
|
101 | font-size: 2em;
|
102 | }
|
103 |
|
104 | h2 {
|
105 | font-size: 1.7em;
|
106 | }
|
107 |
|
108 | h3 {
|
109 | font-size: 1.5em;
|
110 | }
|
111 |
|
112 | h4 {
|
113 | font-size: 1.2em;
|
114 | }
|
115 |
|
116 | h5, h6 {
|
117 | font-size: 1em;
|
118 | }
|
119 |
|
120 |
|
121 | caption, dt, em, th {
|
122 | font-weight: bold;
|
123 | }
|
124 |
|
125 |
|
126 | address, dfn, em, var {
|
127 | font-style: normal;
|
128 | }
|
129 |
|
130 |
|
131 | pre, code, kbd, samp, var, textarea {
|
132 |
|
133 | font-family: MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
134 | }
|
135 |
|
136 |
|
137 | code, kbd, samp, var {
|
138 | font-size: 1em;
|
139 | }
|
140 |
|
141 |
|
142 | button, input, optgroup, select {
|
143 |
|
144 | margin: 0;
|
145 | font-family: inherit;
|
146 | font-size: inherit;
|
147 | }
|
148 |
|
149 |
|
150 | textarea {
|
151 | margin: 0;
|
152 | font-size: inherit;
|
153 | }
|
154 |
|
155 |
|
156 | small {
|
157 | font-size: .8em;
|
158 | }
|
159 |
|
160 |
|
161 | sub, sup {
|
162 | position: relative;
|
163 | font-size: .75em;
|
164 | vertical-align: baseline;
|
165 | }
|
166 |
|
167 | sub {
|
168 | bottom: -.25em;
|
169 | }
|
170 |
|
171 | sup {
|
172 | top: -.5em;
|
173 | }
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 | blockquote {
|
182 |
|
183 | border: 1px solid #00ddaa;
|
184 | border-radius: 4px;
|
185 | padding: 1em;
|
186 |
|
187 | background: #ddffee;
|
188 | }
|
189 |
|
190 |
|
191 | pre {
|
192 |
|
193 | border: 1px solid #d2d4d6;
|
194 | border-radius: 4px;
|
195 | padding: 1em;
|
196 |
|
197 | background: #f2f4f6;
|
198 | overflow: auto;
|
199 | overflow-wrap: normal;
|
200 |
|
201 | word-wrap: normal;
|
202 | word-break: keep-all;
|
203 | white-space: pre;
|
204 | }
|
205 |
|
206 |
|
207 | table {
|
208 | border-collapse: collapse;
|
209 | }
|
210 |
|
211 |
|
212 | td, th {
|
213 |
|
214 | border: 1px solid #d2d4d6;
|
215 | padding: .25em .5em;
|
216 | }
|
217 |
|
218 |
|
219 | th {
|
220 | text-align: center;
|
221 |
|
222 | background: #f2f4f6;
|
223 | }
|
224 |
|
225 |
|
226 | hr {
|
227 | border: 0;
|
228 |
|
229 | border-bottom: 1px solid #d2d4d6;
|
230 | }
|
231 |
|
232 |
|
233 | fieldset {
|
234 |
|
235 | border: 1px solid #d2d4d6;
|
236 | border-radius: 4px;
|
237 | }
|
238 |
|
239 |
|
240 | figure {
|
241 |
|
242 | border-left: .5em solid #d2d4d6;
|
243 | padding-left: 1em;
|
244 | }
|
245 |
|
246 |
|
247 | summary {
|
248 | cursor: pointer;
|
249 | }
|
250 |
|
251 |
|
252 | abbr[title], dfn[title] {
|
253 |
|
254 | text-decoration: underline;
|
255 | text-decoration: underline dotted;
|
256 | cursor: help;
|
257 | }
|
258 |
|
259 |
|
260 | :not(pre) > code,
|
261 | :not(pre) > samp,
|
262 | :not(pre) > kbd,
|
263 | :not(pre) > var {
|
264 | margin: 0 .25em;
|
265 |
|
266 | border: 1px solid #d2d4d6;
|
267 | border-radius: 4px;
|
268 | padding: .1em .25em;
|
269 |
|
270 | background: #f2f4f6;
|
271 | }
|
272 |
|
273 |
|
274 | q {
|
275 | quotes: "“" "”" "‘" "’";
|
276 | }
|
277 |
|
278 | q::before {
|
279 | content: open-quote;
|
280 | }
|
281 |
|
282 | q::after {
|
283 | content: close-quote;
|
284 | }
|
285 |
|
286 |
|
287 | button, input, select, textarea {
|
288 | vertical-align: top;
|
289 | }
|
290 |
|
291 |
|
292 | [type="checkbox"], [type="radio"] {
|
293 | vertical-align: middle;
|
294 | }
|
295 |
|
296 |
|
297 | button, [type="button"], [type="reset"], [type="submit"] {
|
298 | -webkit-appearance: button;
|
299 | }
|