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