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