1 | @charset "UTF-8";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
|
14 |
|
15 |
|
16 | :root {
|
17 | --defFontFamily: 'Noto Sans JP', Arial, "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;
|
18 | --fontSize: 16px;
|
19 | --linkColor: #3562a0;
|
20 | --textColor: #333;
|
21 | --gutter: 1rem;
|
22 | --gap: 3rem;
|
23 | --spacing: 1rem;
|
24 | --contentWidth: 1000px;
|
25 | }
|
26 |
|
27 |
|
28 | *:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
|
29 | all: unset;
|
30 | display: revert;
|
31 | }
|
32 | *, *:before, *:after {
|
33 | box-sizing: border-box;
|
34 | }
|
35 |
|
36 | [hidden] {
|
37 | display: none !important
|
38 | }
|
39 |
|
40 |
|
41 | html {
|
42 | color: var(--textColor);
|
43 | font-family: var(--defFontFamily);
|
44 | font-size: var(--fontSize);
|
45 | font-weight: 400;
|
46 | line-height: 1.4
|
47 | }
|
48 | main :where(p,pre,ul,ol,dl,table,blockquote) {line-height: 1.8}
|
49 |
|
50 |
|
51 | body {
|
52 | display: flex;
|
53 | flex-direction: column;
|
54 | min-height: 100vh;
|
55 | -moz-text-size-adjust: 100%;
|
56 | text-size-adjust: 100%
|
57 | }
|
58 |
|
59 | main {
|
60 | display: block;
|
61 | flex-grow: 1;
|
62 | margin-bottom: auto;
|
63 | }
|
64 |
|
65 |
|
66 | a {
|
67 | color: var(--linkColor);
|
68 | text-decoration: none;
|
69 | cursor: pointer
|
70 | }
|
71 | a:hover {text-decoration: underline}
|
72 |
|
73 | ul, ol {list-style-type: none}
|
74 | ul.disc, ol.disc {
|
75 | padding-left: 1.5em;
|
76 | list-style-type: disc
|
77 | }
|
78 | ul.circle, ol.circle {
|
79 | padding-left: 1.5em;
|
80 | list-style-type: circle
|
81 | }
|
82 | ul.square, ol.square {
|
83 | padding-left: 1.5em;
|
84 | list-style-type: square
|
85 | }
|
86 | ul.decimal, ol.decimal {
|
87 | padding-left: 1.5em;
|
88 | list-style-type: decimal
|
89 | }
|
90 | ul.decimal-lz, ol.decimal-lz {
|
91 | padding-left: 2.5em;
|
92 | list-style-type: decimal-leading-zero
|
93 | }
|
94 | main ul {
|
95 | padding-left: 1.5em;
|
96 | list-style-type: disc
|
97 | }
|
98 | main ol {
|
99 | padding-left: 1.5em;
|
100 | list-style-type: decimal
|
101 | }
|
102 |
|
103 | blockquote, q {
|
104 | quotes: none
|
105 | }
|
106 | blockquote:before, blockquote:after, q:before, q:after {
|
107 | content: '';
|
108 | content: none
|
109 | }
|
110 |
|
111 | sup {
|
112 | font-size: 0.5em;
|
113 | vertical-align: super
|
114 | }
|
115 | sub {
|
116 | font-size: 0.5em;
|
117 | vertical-align: sub
|
118 | }
|
119 |
|
120 | strong {font-weight: bolder}
|
121 | em {font-weight: 700}
|
122 |
|
123 | table {
|
124 | width: max-content;
|
125 | border-collapse: collapse;
|
126 | border-spacing: 0
|
127 | }
|
128 |
|
129 | button {
|
130 | cursor: pointer
|
131 | }
|
132 |
|
133 | img {
|
134 | display: block;
|
135 | object-fit: cover;
|
136 | max-width: 100%;
|
137 | flex-shrink: 0
|
138 | }
|
139 | img.contain {object-fit: contain}
|
140 |
|
141 | hr {
|
142 | width: 60%;
|
143 | border: none;
|
144 | border-top: 2px solid var(--textColor);
|
145 | margin: var(--gap) 0;
|
146 | }
|
147 |
|
148 |
|
149 | main :where(*)+h1 {
|
150 | --theGutter: calc(var(--gutter) * 3);
|
151 | margin-block-start: var(--theGutter);
|
152 | }
|
153 | main :where(*)+h2 {
|
154 | --theGutter: calc(var(--gutter) * 2.5);
|
155 | margin-block-start: var(--theGutter);
|
156 | }
|
157 | main :where(*)+h3 {
|
158 | --theGutter: calc(var(--gutter) * 2);
|
159 | margin-block-start: var(--theGutter);
|
160 | }
|
161 | main :where(*)+h4 {
|
162 | --theGutter: calc(var(--gutter) * 1.5);
|
163 | margin-block-start: var(--theGutter);
|
164 | }
|
165 | main :where(*)+h5 {
|
166 | --theGutter: calc(var(--gutter) * 1.3);
|
167 | margin-block-start: var(--theGutter);
|
168 | }
|
169 | main :where(*)+h6 {
|
170 | --theGutter: calc(var(--gutter) * 1);
|
171 | margin-block-start: var(--theGutter);
|
172 | }
|
173 | main :where(h1,h2,h3,h4,h5,h6)+:where(h1,h2,h3,h4,h5,h6) {--theGutter: var(--gutter)}
|
174 | main :where(h1,h2,h3,h4,h5,h6)+:where(p,pre,ul,ol,dl,table,blockquote,figure,form,hr,iframe) {--theGutter: calc(var(--gutter) * 0.5)}
|
175 |
|
176 | main :where(*)+:where(p,pre,ul,ol,dl,table,blockquote,figure,form,hr,iframe),
|
177 | main :where(article,section)>:where(*)+:where(*),
|
178 | main.fb-brackets>:where(*)+:where(:not(article,section,aside,h1,h2,h3,h4,h5,h6)) {
|
179 | --theGutter: var(--gutter);
|
180 | margin-block-start: var(--theGutter);
|
181 | }
|
182 | main :where(*)+:where(article,section) {margin-block-start: calc(var(--gap))}
|
183 |
|
184 | .mb {margin-bottom: var(--gutter)}
|
185 | .mb0 {margin-bottom: 0}
|
186 | .mb_ {margin-bottom: .5rem}
|
187 | .mb1 {margin-bottom: 1rem}
|
188 | .mb1_ {margin-bottom: 1.5rem}
|
189 | .mb2 {margin-bottom: 2rem}
|
190 | .mb2_ {margin-bottom: 2.5rem}
|
191 | .mb3 {margin-bottom: 3rem}
|
192 |
|
193 | .mt {margin-top: var(--gutter)}
|
194 | .mt0 {margin-top: 0}
|
195 | .mt_ {margin-top: .5rem}
|
196 | .mt1 {margin-top: 1rem}
|
197 | .mt1_ {margin-top: 1.5rem}
|
198 | .mt2 {margin-top: 2rem}
|
199 | .mt2_ {margin-top: 2.5rem}
|
200 | .mt3 {margin-top: 3rem}
|
201 |
|
202 |
|
203 | .clearfix:after {
|
204 | content: " ";
|
205 | display: block;
|
206 | clear: both
|
207 | }
|
208 |
|
209 | .centering {
|
210 | display: block;
|
211 | margin: auto;
|
212 | width: 100%;
|
213 | max-width: var(--contentWidth);
|
214 | position: relative
|
215 | }
|
216 |
|
217 | .fb-brackets {
|
218 | display: grid;
|
219 | grid-template-columns: var(--spacing) 1fr min(calc(100% - 2 * var(--spacing)), var(--contentWidth)) 1fr var(--spacing);
|
220 | grid-auto-rows: max-content;
|
221 | width: 100%;
|
222 | }
|
223 | .fb-brackets>*:not(.full-bleed) {grid-column: 3}
|
224 | .fb-brackets>.full-bleed {grid-column: 1/-1}
|
225 |
|
226 | .hide {
|
227 | visibility: hidden;
|
228 | opacity: 0
|
229 | }
|
230 | .visible {
|
231 | visibility: visible;
|
232 | opacity: 1
|
233 | }
|
234 | .radix-modal-visible:not(.rdx-modal-item) {
|
235 | display: none !important
|
236 | }
|
237 | .none {
|
238 | display: none !important
|
239 | }
|
240 |
|
241 | .fill-parent {
|
242 | display: block;
|
243 | width: 100%;
|
244 | height: 100%
|
245 | }
|
246 |
|
247 | .text-center {text-align: center}
|
248 | .text-right {text-align: right}
|
249 | .text-left {text-align: left}
|
250 |
|
251 | .text-unit {
|
252 | display: inline-block;
|
253 | vertical-align: top
|
254 | }
|
255 |
|
256 | .text-clear {
|
257 | font: 0/0 a;
|
258 | color: transparent;
|
259 | text-shadow: none;
|
260 | white-space: nowrap
|
261 | }
|
262 |
|
263 |
|
264 | @media print {
|
265 | @page {
|
266 | size: A4 portrait;
|
267 | margin: 12.7mm 9.7mm;
|
268 | }
|
269 |
|
270 | * {
|
271 | -webkit-print-color-adjust: exact;
|
272 | print-color-adjust: exact;
|
273 | font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", "sans-serif";
|
274 | }
|
275 |
|
276 | body {
|
277 | overflow-x: visible !important;
|
278 | overflow-y: visible !important;
|
279 | width: calc(var(--contentWidth) + 200px) !important;
|
280 | }
|
281 |
|
282 | .centering {
|
283 | width: var(--contentWidth);
|
284 | }
|
285 |
|
286 | iframe {
|
287 | background: #ccc;
|
288 | }
|
289 | }
|
290 |
|
291 |
|
292 | .rdx-dummy-item {
|
293 | height: 0 !important;
|
294 | min-height: 0 !important;
|
295 | max-height: 0 !important;
|
296 | padding-top: 0 !important;
|
297 | padding-bottom: 0 !important;
|
298 | margin-top: 0 !important;
|
299 | margin-bottom: 0 !important;
|
300 | opacity: 0 !important;
|
301 | visibility: hidden !important;
|
302 | overflow: hidden !important
|
303 | }
|
304 |
|
305 |
|
306 | .rdx-scroll-appear {
|
307 | transition: .5s ease-out;
|
308 | }
|
309 | .rdx-scroll-appear:not(.active) {
|
310 | opacity: 0;
|
311 | transform: scale(.9) translateY(-5.56%);
|
312 | }
|
313 |
|
314 |
|
315 | .radix-icon {
|
316 | display: inline;
|
317 | height: 1.2em;
|
318 | vertical-align: sub;
|
319 | }
|
320 | .rdx-icon-hamburger .bar1, .rdx-icon-hamburger .bar2, .rdx-icon-hamburger .bar3 {
|
321 | stroke-linecap: butt;
|
322 | stroke-linejoin: miter;
|
323 | stroke-width: 4px;
|
324 | stroke: currentColor;
|
325 | transition: .2s all linear;
|
326 | transform: rotate(0);
|
327 | opacity: 1;
|
328 | }
|
329 | .opened .rdx-icon-hamburger .bar1 {transform: rotate(45deg) scale(1.2) translate(10%, -27%)}
|
330 | .opened .rdx-icon-hamburger .bar2 {opacity: 0}
|
331 | .opened .rdx-icon-hamburger .bar3 {transform: rotate(-45deg) scale(1.2) translate(-50%, -15%)}
|
332 |
|
333 |
|
334 | @keyframes rdx-drag-hint {
|
335 | 0% { transform: translate(0) }
|
336 | 5% { transform: translate(-7%) }
|
337 | 10% { transform: translate(7%) }
|
338 | 15% { transform: translate(-7%) }
|
339 | 20% { transform: translate(7%) }
|
340 | 25% { transform: translate(0) }
|
341 | }
|
342 | .rdx-drag-hint {
|
343 | display: grid;
|
344 | width: 100%;
|
345 | height: 100%;
|
346 | place-items: center;
|
347 | position: absolute;
|
348 | top: 0;
|
349 | left: 0;
|
350 | z-index: 2;
|
351 | background: rgba(0, 0, 0, 0.3);
|
352 | transition: .3s;
|
353 | }
|
354 | .rdx-drag-hint-inner {
|
355 | display: flex;
|
356 | flex-direction: column;
|
357 | align-items: center;
|
358 | max-width: calc(100% - 2rem);
|
359 | max-height: calc(100% - 2rem);
|
360 | color: #fff;
|
361 | line-height: 1;
|
362 | animation: rdx-drag-hint 2s infinite linear;
|
363 | animation-delay: 1s;
|
364 | }
|
365 | .rdx-drag-hint .radix-icon {height: auto}
|
366 | .rdx-drag-hint .rdx-drag-hint-text {
|
367 | padding: 0 .8rem;
|
368 | font-size: 1.5em;
|
369 | }
|
370 |
|
371 |
|
372 | .rdx-modal-viewport {
|
373 | --rmv-bg-color: rgba(0, 0, 0, 0.85);
|
374 | --rmv-text-color: #fff;
|
375 | --rmv-light: rgba(255, 255, 255, .3);
|
376 | --rmv-dark: rgba(0, 0, 0, .3);
|
377 | height: 100%;
|
378 | width: 100%;
|
379 | position: fixed;
|
380 | top: 0;
|
381 | left: 0;
|
382 | z-index: 2147483647;
|
383 | padding: 5em 1em 2em;
|
384 | background-color: var(--rmv-bg-color);
|
385 | opacity: 0;
|
386 | visibility: hidden;
|
387 | transition: .2s ease-in opacity, .2s ease-in visibility;
|
388 | font-size: 16px;
|
389 | }
|
390 | .rdx-modal-viewport.black {
|
391 | --rmv-bg-color: rgba(0, 0, 0, 0.85);
|
392 | --rmv-text-color: #fff;
|
393 | --rmv-light: rgba(255, 255, 255, .3);
|
394 | --rmv-dark: rgba(0, 0, 0, .3);
|
395 | }
|
396 | .rdx-modal-viewport.white {
|
397 | --rmv-bg-color: rgba(255, 255, 255, 0.85);
|
398 | --rmv-text-color: #666;
|
399 | --rmv-light: rgba(0, 0, 0, .3);
|
400 | --rmv-dark: rgba(255, 255, 255, .3);
|
401 | }
|
402 | .rdx-modal-viewport.black-opacity {
|
403 | --rmv-bg-color: rgba(0, 0, 0, 1);
|
404 | --rmv-text-color: #fff;
|
405 | --rmv-light: rgba(255, 255, 255, .3);
|
406 | --rmv-dark: rgba(0, 0, 0, .3);
|
407 | }
|
408 | .rdx-modal-viewport.white-opacity {
|
409 | --rmv-bg-color: rgba(255, 255, 255, 1);
|
410 | --rmv-text-color: #666;
|
411 | --rmv-light: rgba(0, 0, 0, .3);
|
412 | --rmv-dark: rgba(255, 255, 255, .3);
|
413 | }
|
414 | .rdx-modal-viewport.active {
|
415 | opacity: 1;
|
416 | visibility: visible;
|
417 | }
|
418 | .rdx-modal-area {
|
419 | display: grid;
|
420 | place-items: center;
|
421 | width: 100%;
|
422 | height: 100%;
|
423 | }
|
424 | .rdx-modal-toggles {
|
425 | display: flex;
|
426 | position: absolute;
|
427 | top: 0;
|
428 | right: 0;
|
429 | transform: translateY(-100%);
|
430 | opacity: 0;
|
431 | color: var(--rmv-text-color);
|
432 | transition: .4s ease-out;
|
433 | }
|
434 | .rdx-modal-viewport.active .rdx-modal-toggles {
|
435 | transform: translateY(0);
|
436 | opacity: 1;
|
437 | }
|
438 | .rdx-modal-magnifier {
|
439 | display: flex;
|
440 | align-items: center;
|
441 | gap: .5em;
|
442 | position: relative;
|
443 | }
|
444 | .rdx-modal-enlarge, .rdx-modal-shrink {
|
445 | display: block;
|
446 | font-size: 2em;
|
447 | cursor: pointer;
|
448 | }
|
449 | .rdx-modal-scale {
|
450 | display: grid;
|
451 | place-items: center;
|
452 | height: 40px;
|
453 | padding: 0 1em;
|
454 | margin-right: .5em;
|
455 | border: 3px solid currentColor;
|
456 | font-size: 1.3em;
|
457 | font-weight: 900;
|
458 | line-height: 1;
|
459 | cursor: pointer;
|
460 | }
|
461 | .rdx-modal-scale:hover {background: var(--rmv-light)}
|
462 | .rdx-modal-scaler {
|
463 | display: block;
|
464 | height: 100%;
|
465 | position: absolute;
|
466 | top: 50%;
|
467 | left: 0;
|
468 | transform: translateY(-50%);
|
469 | padding: 20px 0;
|
470 | background: var(--rmv-text-color);
|
471 | color: var(--rmv-bg-color);
|
472 | overflow-y: auto;
|
473 | opacity: 0;
|
474 | visibility: hidden;
|
475 | transition: .1s ease-in;
|
476 | }
|
477 | .rdx-modal-scaler.active {
|
478 | opacity: 1;
|
479 | visibility: visible;
|
480 | }
|
481 | .rdx-modal-scaler li {
|
482 | display: grid;
|
483 | height: 40px;
|
484 | place-items: center;
|
485 | padding: 0 1em;
|
486 | font-size: 1.3em;
|
487 | font-weight: 900;
|
488 | line-height: 1;
|
489 | cursor: pointer;
|
490 | }
|
491 | .rdx-modal-scaler li:hover {background: var(--rmv-dark)}
|
492 | .rdx-modal-close {
|
493 | height: 3em;
|
494 | width: 3em;
|
495 | margin: 1em;
|
496 | cursor: pointer
|
497 | }
|
498 | .rdx-modal-wrapper {
|
499 | display: grid;
|
500 | max-width: 100%;
|
501 | max-height: 100%;
|
502 | overflow: auto;
|
503 | }
|
504 | .rdx-modal-wrapper::-webkit-scrollbar {width: 7px}
|
505 | .rdx-modal-wrapper::-webkit-scrollbar:horizontal {height: 7px}
|
506 | .rdx-modal-wrapper::-webkit-scrollbar-track {
|
507 | border-radius: 5px;
|
508 | box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
|
509 | }
|
510 | .rdx-modal-wrapper::-webkit-scrollbar-thumb {
|
511 | background-color: #777;
|
512 | border-radius: 5px;
|
513 | }
|
514 | .rdx-modal-wrapper::-webkit-scrollbar-corner {background: transparent}
|
515 | .rdx-modal-frame {overflow: hidden}
|
516 | .rdx-modal-content {
|
517 | width: max-content;
|
518 | height: max-content;
|
519 | cursor: default;
|
520 | transform-origin: top left;
|
521 | }
|
522 | .rdx-modal-content > img.rdx-modal-item {display: block}
|
523 | .rdx-modal-source {cursor: pointer} |
\ | No newline at end of file |