spuit 0.1.2 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. checksums.yaml +4 -4
  2. data/.npmignore +1 -2
  3. data/Makefile +12 -0
  4. data/README.md +2 -1
  5. data/lib/spuit/version.rb +1 -1
  6. data/package.json +2 -25
  7. data/scss/components/_button.scss +28 -27
  8. data/scss/components/_group.scss +50 -0
  9. data/scss/components/_switch.scss +40 -24
  10. data/scss/components/_triangle.scss +4 -4
  11. data/scss/elements/{_custom-checkbox.scss → _custom-radio.scss} +31 -22
  12. data/scss/elements/_fieldset.scss +21 -49
  13. data/scss/elements/_input.scss +26 -11
  14. data/scss/elements/_radio.scss +39 -0
  15. data/scss/elements/_select.scss +7 -3
  16. data/scss/elements/_table.scss +4 -11
  17. data/scss/includes/_spacers.scss +1 -1
  18. data/scss/modules/_reset.scss +32 -0
  19. data/scss/spuit.scss +5 -1
  20. data/scss/variables/_defaults.scss +1 -0
  21. data/scss/variables/_fonts.scss +45 -0
  22. data/scss/variables/_media-queries.scss +2 -2
  23. data/site/.gitignore +117 -0
  24. data/site/README.md +12 -0
  25. data/site/archetypes/default.md +6 -0
  26. data/site/config.toml +24 -0
  27. data/site/content/posts/components.html +445 -0
  28. data/site/content/posts/example.md +66 -0
  29. data/site/content/posts/layouts.md +11 -0
  30. data/site/content/posts/layouts/2col.html +27 -0
  31. data/site/content/posts/layouts/holygrail.html +40 -0
  32. data/site/content/posts/layouts/stickyfooter.html +23 -0
  33. data/site/content/search.adoc +5 -0
  34. data/site/themes/spuit/.gitignore +68 -0
  35. data/site/themes/spuit/LICENSE.md +20 -0
  36. data/site/themes/spuit/README.md +66 -0
  37. data/site/themes/spuit/archetypes/default.md +7 -0
  38. data/{assets/javascripts/spuit → site/themes/spuit/assets/javascripts/_}/Common.js +0 -0
  39. data/{assets/javascripts/spuit → site/themes/spuit/assets/javascripts/_}/extend.js +0 -0
  40. data/site/themes/spuit/assets/javascripts/classes/HugoSearch.js +115 -0
  41. data/site/themes/spuit/assets/javascripts/classes/onof.js +107 -0
  42. data/site/themes/spuit/assets/javascripts/scripts.js +26 -0
  43. data/site/themes/spuit/assets/stylesheets/styles.scss +790 -0
  44. data/site/themes/spuit/assets/stylesheets/styles/components/_card.scss +160 -0
  45. data/site/themes/spuit/assets/stylesheets/styles/components/_syntax.scss +59 -0
  46. data/site/themes/spuit/assets/stylesheets/styles/config/_mixins.scss +8 -0
  47. data/site/themes/spuit/assets/stylesheets/styles/config/_variables.scss +6 -0
  48. data/site/themes/spuit/design/badge.sketch +0 -0
  49. data/site/themes/spuit/layouts/404.html +9 -0
  50. data/site/themes/spuit/layouts/_default/baseof.html +27 -0
  51. data/site/themes/spuit/layouts/_default/list.html +22 -0
  52. data/site/themes/spuit/layouts/_default/rss.xml +26 -0
  53. data/site/themes/spuit/layouts/_default/single.html +14 -0
  54. data/site/themes/spuit/layouts/_default/temp.html +5 -0
  55. data/site/themes/spuit/layouts/index.html +2 -0
  56. data/site/themes/spuit/layouts/json/single.html +28 -0
  57. data/site/themes/spuit/layouts/partials/foot.html +26 -0
  58. data/site/themes/spuit/layouts/partials/footer.html +5 -0
  59. data/site/themes/spuit/layouts/partials/head.html +52 -0
  60. data/site/themes/spuit/layouts/partials/header.html +4 -0
  61. data/site/themes/spuit/layouts/partials/parts/breadcrumbs.html +36 -0
  62. data/site/themes/spuit/layouts/partials/parts/info.html +19 -0
  63. data/site/themes/spuit/layouts/partials/parts/nextback.html +9 -0
  64. data/site/themes/spuit/layouts/partials/parts/pagenator.html +31 -0
  65. data/site/themes/spuit/layouts/partials/parts/pager.html +23 -0
  66. data/site/themes/spuit/layouts/partials/sidebar.html +52 -0
  67. data/site/themes/spuit/layouts/partials/widgets/archive.html +14 -0
  68. data/site/themes/spuit/layouts/partials/widgets/categories.html +12 -0
  69. data/site/themes/spuit/layouts/partials/widgets/recents.html +14 -0
  70. data/site/themes/spuit/layouts/partials/widgets/related.html +13 -0
  71. data/site/themes/spuit/layouts/partials/widgets/search-modal.html +19 -0
  72. data/site/themes/spuit/layouts/partials/widgets/search.html +10 -0
  73. data/site/themes/spuit/layouts/partials/widgets/tags.html +12 -0
  74. data/site/themes/spuit/layouts/shortcodes/blockquote.html +70 -0
  75. data/site/themes/spuit/layouts/shortcodes/card-amazon.html +28 -0
  76. data/site/themes/spuit/layouts/shortcodes/card-site.html +22 -0
  77. data/site/themes/spuit/layouts/shortcodes/card-store.html +28 -0
  78. data/site/themes/spuit/layouts/shortcodes/card-youtube.html +27 -0
  79. data/site/themes/spuit/layouts/shortcodes/previews.html +18 -0
  80. data/site/themes/spuit/package-lock.json +7959 -0
  81. data/site/themes/spuit/package.json +46 -0
  82. data/{dist → site/themes/spuit/static}/favicon.ico +0 -0
  83. data/site/themes/spuit/static/fonts/FontAwesome.otf +0 -0
  84. data/site/themes/spuit/static/fonts/fontawesome-webfont.eot +0 -0
  85. data/site/themes/spuit/static/fonts/fontawesome-webfont.svg +2671 -0
  86. data/site/themes/spuit/static/fonts/fontawesome-webfont.ttf +0 -0
  87. data/site/themes/spuit/static/fonts/fontawesome-webfont.woff +0 -0
  88. data/site/themes/spuit/static/fonts/fontawesome-webfont.woff2 +0 -0
  89. data/site/themes/spuit/static/images/appstore-badge.png +0 -0
  90. data/site/themes/spuit/static/images/appstore-badge_en.png +0 -0
  91. data/{dist → site/themes/spuit/static/images}/favicon.png +0 -0
  92. data/site/themes/spuit/static/images/google-play-badge.png +0 -0
  93. data/site/themes/spuit/static/images/google-play-badge_en.png +0 -0
  94. data/site/themes/spuit/static/javascripts/scripts.js +120 -0
  95. data/site/themes/spuit/static/stylesheets/styles.css +9763 -0
  96. data/site/themes/spuit/theme.toml +9 -0
  97. data/site/themes/spuit/webpack.config.js +10 -0
  98. data/site/themes/spuit/webpack/css.webpack.config.js +42 -0
  99. data/site/themes/spuit/webpack/js.webpack.config.js +21 -0
  100. data/site/themes/spuit/yarn.lock +6815 -0
  101. data/yarn.lock +337 -4942
  102. metadata +84 -16
  103. data/assets/html/index.ejs +0 -331
  104. data/assets/javascripts/scripts.js +0 -4
  105. data/assets/stylesheets/styles.scss +0 -191
  106. data/assets/stylesheets/styles/config/_mixins.scss +0 -26
  107. data/assets/stylesheets/styles/config/_variables.scss +0 -4
  108. data/dist/index.html +0 -1
  109. data/dist/javascripts/scripts.js +0 -1
  110. data/dist/stylesheets/styles.css +0 -3
  111. data/scss/_/_form.sass +0 -44
@@ -1,4 +0,0 @@
1
- // const $ = require('jquery')
2
-
3
- // $(function() {
4
- // })
@@ -1,191 +0,0 @@
1
- @import '../../spuit';
2
- @import '../../scss/includes/grid';
3
- @import '../../scss/components/wrap';
4
- @import '../../scss/components/wordwrap-fadeout';
5
- @import '../../scss/components/triangle';
6
-
7
- @import 'styles/config/variables';
8
- @import 'styles/config/mixins';
9
-
10
- @include include-animations;
11
- @include include-normalize;
12
- @include include-grid;
13
-
14
- // basic styles
15
-
16
- html {
17
- font-size: 100%;
18
- @include breakpoint-down(md) {
19
- font-size: 80%;
20
- }
21
- }
22
-
23
- body {
24
- @include font(1rem);
25
- color: $color-black;
26
- }
27
-
28
- // demo styles
29
-
30
- .demo-styles {
31
- color: $color-black;
32
-
33
- h1 {
34
- @include font(2.8rem);
35
- font-weight: 300;
36
- }
37
- h2 {
38
- @include font(2.0rem);
39
- font-weight: 300;
40
- }
41
- h3 {
42
- @include font(1.6rem);
43
- }
44
- h4 {
45
- @include font(1.5rem);
46
- }
47
- h5 {
48
- @include font(1.3rem);
49
- }
50
- h6 {
51
- @include font(1.2rem);
52
- }
53
- p {
54
- @include font(1rem);
55
- }
56
- form {
57
- @include font(1rem);
58
- }
59
- input[type=text] {
60
- @include input;
61
- }
62
- textarea {
63
- @include input;
64
- line-height: 1.6rem;
65
- height: 120px;
66
- }
67
- legend {
68
- @include font(inherit);
69
- }
70
- .radio {
71
- @include radio-base;
72
- }
73
- .radio-inside {
74
- @include radio-base(span);
75
- }
76
- .checkbox {
77
- @include checkbox-base;
78
- }
79
- .checkbox-inside {
80
- @include checkbox-base(span);
81
- }
82
- .select {
83
- @include select-base;
84
- }
85
- .table {
86
- @include table;
87
- margin-bottom: 10px;
88
-
89
- &-line{
90
- @include table-line;
91
- margin-bottom: 10px;
92
- }
93
- &-stripe{
94
- @include table-stripe;
95
- margin-bottom: 10px;
96
- }
97
- }
98
- .fieldset {
99
- @include fieldset-flex;
100
- }
101
- .button {
102
- @include button;
103
- }
104
- .button-semiflat {
105
- @include font;
106
- @include button-semiflat;
107
- }
108
- .button-border {
109
- @include font;
110
- @include button-border;
111
- }
112
- .button-emboss {
113
- @include font;
114
- @include button-emboss;
115
- }
116
- .button-group {
117
- display: flex;
118
- justify-content: space-between;
119
- > * {
120
- width: 100%;
121
- border-radius: 0;
122
- &:first-child {
123
- border-radius: 3px 0 0 3px;
124
- }
125
- &:last-child {
126
- border-radius: 0 3px 3px 0;
127
- }
128
- }
129
- }
130
- .switch {
131
- @include switch-base(38px, 20px, #529ef6, 2px);
132
- }
133
- .reset-ul {
134
- @include reset-ul;
135
- }
136
- .word-break {
137
- @include word-break;
138
- display: inline-block;
139
- width: 100px;
140
- background: #f8f8f8;
141
- padding: 10px;
142
- }
143
- .word-break-none {
144
- @include word-break(false);
145
- display: inline-block;
146
- width: 100px;
147
- background: #f8f8f8;
148
- padding: 10px;
149
- }
150
- .text-overflow {
151
- @include text-overflow();
152
- display: inline-block;
153
- width: 100px;
154
- background: #f8f8f8;
155
- padding: 10px;
156
- }
157
-
158
- .icon-hamburger {
159
- @include icon-hamburger;
160
- }
161
- .icon-twitter {
162
- @include icon-twitter;
163
- }
164
- .icon-facebook {
165
- @include icon-facebook;
166
- }
167
- .icon-hatena {
168
- @include icon-hatena;
169
- }
170
-
171
- .icon-svg {
172
- &::before {
173
- content: '';
174
- @include background-map-svg($map-svg-star);
175
- }
176
- }
177
-
178
- .wordwrap-fadeout {
179
- @include wordwrap-fadeout;
180
- }
181
-
182
- .triangle-container {
183
- @include triangle(#2dd, 10px, 15px, 0, 50%, "left", "after");
184
- // @include triangle(#2dd, 15px, 10px, 50%, 0, "down", "after");
185
-
186
- display: inline-block;
187
- width: 30px;
188
- height: 30px;
189
- background-color: #ddd;
190
- }
191
- }
@@ -1,26 +0,0 @@
1
- @include include-opensans;
2
-
3
- @mixin font($size: 1rem, $line-height: normal, $weight: 400) {
4
- font-family: 'Open Sans', $font-sans;
5
- font-size: $size;
6
- font-weight: $weight;
7
- line-height: $line-height;
8
- }
9
-
10
- @mixin button {
11
- @include font;
12
- @include button-normal;
13
- }
14
-
15
- @mixin input {
16
- @include font;
17
- @include input-normal(100%);
18
- @include breakpoint-down(md) {
19
- font-size: 16px;
20
- }
21
- }
22
-
23
- @mixin table {
24
- @include font(1rem);
25
- @include table-normal;
26
- }
@@ -1,4 +0,0 @@
1
- // colors
2
- $color-black: #444;
3
- $color-blue: #529ef6;
4
- $color-pink: #E87571;
@@ -1 +0,0 @@
1
- <!DOCTYPE html><html lang=ja><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title></title><link href=/stylesheets/styles.css rel=stylesheet></head><body><div class=container><div class=row><div class=col-12><p>Spuit</p></div></div></div><div class=container><div class=row><div class=col-md-4><section class=demo-styles><h2>Text Styles</h2><h1>heading 1</h1><h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4><h5>heading 5</h5><h6>heading 6</h6><p>paragraf <a href=#>link</a> <b>bold</b></p></section></div><div class=col-md-4><section class=demo-styles><h2>Utilities</h2><h3>word break</h3><p class=word-break>.word-break</p><br><p class=word-break-none>.word-break-none</p><h3>text-overflow</h3><p class=text-overflow>.text-overflow</p><h3>wordwrap-fadeout</h3><div class=wordwrap-fadeout><p>.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout</p></div></section></div><div class=col-md-4><section class=demo-styles><h2>button styles</h2><a href=# class=button>Button</a> <input type=submit class=button value=Button> <button type=button class=button>Button</button> <a href=# class="button is-loading">Button</a> <a href=# class=button-semiflat>Button</a> <a href=# class=button-border>Button</a> <a href=# class=button-emboss>Button</a></section><section class=demo-styles><h2>icon styles</h2><i class=icon-hamburger></i> <i class=icon-twitter></i> <i class=icon-facebook></i> <i class=icon-hatena></i></section></div></div><div class=row><div class=col-md-4><section class=demo-styles><h2>Form styles</h2><form><div class=fieldset><legend>お名前</legend><div><input id=field-text placeholder=お名前 type=text></div></div><div class=fieldset><legend>お問い合わせ内容</legend><textarea cols=50 id=field-textarea placeholder=お問い合わせ内容を入力下さい rows=10></textarea></div><div class=fieldset><legend>ラジオボタン(並列)</legend><ul class=reset-ul><li class=radio><input id=field-radio-0 name=field-radio type=radio value=0> <label for=field-radio-0>ラジオボタン 0</label></li><li class=radio><input id=field-radio-1 name=field-radio type=radio value=1> <label for=field-radio-1>ラジオボタン 1</label></li><li class=radio><input id=field-radio-2 name=field-radio type=radio value=2> <label for=field-radio-2>ラジオボタン 2</label></li></ul></div><div class=fieldset><legend>ラジオボタン(入れ子)</legend><ul class=reset-ul><li class=radio-inside><label for=field-radio-inside-0><input id=field-radio-inside-0 name=field-radio-inside type=radio value=0> <span>ラジオボタン 0</span></label></li><li class=radio-inside><label for=field-radio-inside-1><input id=field-radio-inside-1 name=field-radio-inside type=radio value=1> <span>ラジオボタン 1</span></label></li><li class=radio-inside><label for=field-radio-inside-2><input id=field-radio-inside-2 name=field-radio-inside type=radio value=2> <span>ラジオボタン 2</span></label></li></ul></div><div class=fieldset><legend>チェックボックス(並列)</legend><ul class=reset-ul><li class=checkbox><input id=field-checkbox-0 type=checkbox value=0> <label for=field-checkbox-0>チェックボックス 0</label></li><li class=checkbox><input id=field-checkbox-1 type=checkbox value=1> <label for=field-checkbox-1>チェックボックス 1</label></li><li class=checkbox><input id=field-checkbox-2 type=checkbox value=2> <label for=field-checkbox-2>チェックボックス 2</label></li></ul></div><div class=fieldset><legend>チェックボックス(入れ子)</legend><ul class=reset-ul><li class=checkbox-inside><label for=field-checkbox-inside-0><input id=field-checkbox-inside-0 type=checkbox value=0> <span>チェックボックス 0</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-1><input id=field-checkbox-inside-1 type=checkbox value=1> <span>チェックボックス 1</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-2><input id=field-checkbox-inside-2 type=checkbox value=2> <span>チェックボックス 2</span></label></li></ul></div><div class=fieldset><legend>スイッチ(チェックボックス)</legend><ul class=reset-ul><li><div class=switch><input id=field-checkbox-switch-0 type=checkbox value=0> <label for=field-checkbox-switch-0></label></div></li></ul></div><div class=fieldset><legend>セレクトボックス</legend><div class=select><select id=field-select><option value=1>選択肢1</option><option value=2>選択肢2</option><option value=3>選択肢3</option></select></div></div><div class=fieldset><div class=button-group><input class=button type=submit value=送信> <input class=button-border type=reset value=リセット></div></div></form></section></div><div class=col-md-4><section class=demo-styles><h2>Table styles</h2><table class=table><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-line><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-stripe><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table></section></div></div></div><div class="container pt-3"><div class=row><div class=col-12><p><a href=https://github.com/is8r/spuit target=_blank>github</a></p></div></div></div><script src=/javascripts/scripts.js></script><script type=text/javascript src=javascripts/scripts.js></script></body></html>
@@ -1 +0,0 @@
1
- !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]);
@@ -1,3 +0,0 @@
1
- @charset "UTF-8";@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,700);@keyframes anim-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes anim-float{0%{transform:translateY(0)}50%{transform:translateY(20%)}to{transform:translateY(0)}}@keyframes anim-arrow{0%{transform:translateX(0)}50%{transform:translateX(20%)}to{transform:translateX(0)}}@keyframes anim-scale{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}
2
-
3
- /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}.container{position:relative;margin-right:auto;margin-left:auto;box-sizing:border-box;padding-right:15px;padding-left:15px}@media (min-width:34em){.container{padding-right:15px;padding-left:15px}}@media (min-width:48em){.container{padding-right:15px;padding-left:15px}}@media (min-width:62em){.container{padding-right:15px;padding-left:15px}}@media (min-width:75em){.container{padding-right:15px;padding-left:15px}}@media (min-width:34em){.container{width:540px;max-width:100%;box-sizing:border-box}}@media (min-width:48em){.container{width:720px;max-width:100%;box-sizing:border-box}}@media (min-width:62em){.container{width:960px;max-width:100%;box-sizing:border-box}}@media (min-width:75em){.container{width:1140px;max-width:100%;box-sizing:border-box}}.container-fluid{position:relative;margin-right:auto;margin-left:auto;box-sizing:border-box;padding-right:15px;padding-left:15px}@media (min-width:34em){.container-fluid{padding-right:15px;padding-left:15px}}@media (min-width:48em){.container-fluid{padding-right:15px;padding-left:15px}}@media (min-width:62em){.container-fluid{padding-right:15px;padding-left:15px}}@media (min-width:75em){.container-fluid{padding-right:15px;padding-left:15px}}.row{display:flex;flex-wrap:wrap;box-sizing:border-box;margin-right:-15px;margin-left:-15px}@media (min-width:34em){.row{margin-right:-15px;margin-left:-15px}}@media (min-width:48em){.row{margin-right:-15px;margin-left:-15px}}@media (min-width:62em){.row{margin-right:-15px;margin-left:-15px}}@media (min-width:75em){.row{margin-right:-15px;margin-left:-15px}}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px;box-sizing:border-box}@media (min-width:34em){.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding-right:15px;padding-left:15px;box-sizing:border-box}}@media (min-width:48em){.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding-right:15px;padding-left:15px;box-sizing:border-box}}@media (min-width:62em){.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding-right:15px;padding-left:15px;box-sizing:border-box}}@media (min-width:75em){.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding-right:15px;padding-left:15px;box-sizing:border-box}}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 8.33333%;max-width:8.33333%}.col-2{flex:0 0 16.66667%;max-width:16.66667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.33333%;max-width:33.33333%}.col-5{flex:0 0 41.66667%;max-width:41.66667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.33333%;max-width:58.33333%}.col-8{flex:0 0 66.66667%;max-width:66.66667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.33333%;max-width:83.33333%}.col-11{flex:0 0 91.66667%;max-width:91.66667%}.col-12{flex:0 0 100%;max-width:100%}.pull-0{right:auto}.pull-1{right:8.33333%}.pull-2{right:16.66667%}.pull-3{right:25%}.pull-4{right:33.33333%}.pull-5{right:41.66667%}.pull-6{right:50%}.pull-7{right:58.33333%}.pull-8{right:66.66667%}.pull-9{right:75%}.pull-10{right:83.33333%}.pull-11{right:91.66667%}.pull-12{right:100%}.push-0{left:auto}.push-1{left:8.33333%}.push-2{left:16.66667%}.push-3{left:25%}.push-4{left:33.33333%}.push-5{left:41.66667%}.push-6{left:50%}.push-7{left:58.33333%}.push-8{left:66.66667%}.push-9{left:75%}.push-10{left:83.33333%}.push-11{left:91.66667%}.push-12{left:100%}.offset-1{margin-left:8.33333%}.offset-2{margin-left:16.66667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333%}.offset-5{margin-left:41.66667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333%}.offset-8{margin-left:66.66667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333%}.offset-11{margin-left:91.66667%}@media (min-width:34em){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 8.33333%;max-width:8.33333%}.col-sm-2{flex:0 0 16.66667%;max-width:16.66667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.33333%;max-width:33.33333%}.col-sm-5{flex:0 0 41.66667%;max-width:41.66667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.33333%;max-width:58.33333%}.col-sm-8{flex:0 0 66.66667%;max-width:66.66667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.33333%;max-width:83.33333%}.col-sm-11{flex:0 0 91.66667%;max-width:91.66667%}.col-sm-12{flex:0 0 100%;max-width:100%}.pull-sm-0{right:auto}.pull-sm-1{right:8.33333%}.pull-sm-2{right:16.66667%}.pull-sm-3{right:25%}.pull-sm-4{right:33.33333%}.pull-sm-5{right:41.66667%}.pull-sm-6{right:50%}.pull-sm-7{right:58.33333%}.pull-sm-8{right:66.66667%}.pull-sm-9{right:75%}.pull-sm-10{right:83.33333%}.pull-sm-11{right:91.66667%}.pull-sm-12{right:100%}.push-sm-0{left:auto}.push-sm-1{left:8.33333%}.push-sm-2{left:16.66667%}.push-sm-3{left:25%}.push-sm-4{left:33.33333%}.push-sm-5{left:41.66667%}.push-sm-6{left:50%}.push-sm-7{left:58.33333%}.push-sm-8{left:66.66667%}.push-sm-9{left:75%}.push-sm-10{left:83.33333%}.push-sm-11{left:91.66667%}.push-sm-12{left:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333%}.offset-sm-2{margin-left:16.66667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333%}.offset-sm-5{margin-left:41.66667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333%}.offset-sm-8{margin-left:66.66667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333%}.offset-sm-11{margin-left:91.66667%}}@media (min-width:48em){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 8.33333%;max-width:8.33333%}.col-md-2{flex:0 0 16.66667%;max-width:16.66667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33333%;max-width:33.33333%}.col-md-5{flex:0 0 41.66667%;max-width:41.66667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.33333%;max-width:58.33333%}.col-md-8{flex:0 0 66.66667%;max-width:66.66667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.33333%;max-width:83.33333%}.col-md-11{flex:0 0 91.66667%;max-width:91.66667%}.col-md-12{flex:0 0 100%;max-width:100%}.pull-md-0{right:auto}.pull-md-1{right:8.33333%}.pull-md-2{right:16.66667%}.pull-md-3{right:25%}.pull-md-4{right:33.33333%}.pull-md-5{right:41.66667%}.pull-md-6{right:50%}.pull-md-7{right:58.33333%}.pull-md-8{right:66.66667%}.pull-md-9{right:75%}.pull-md-10{right:83.33333%}.pull-md-11{right:91.66667%}.pull-md-12{right:100%}.push-md-0{left:auto}.push-md-1{left:8.33333%}.push-md-2{left:16.66667%}.push-md-3{left:25%}.push-md-4{left:33.33333%}.push-md-5{left:41.66667%}.push-md-6{left:50%}.push-md-7{left:58.33333%}.push-md-8{left:66.66667%}.push-md-9{left:75%}.push-md-10{left:83.33333%}.push-md-11{left:91.66667%}.push-md-12{left:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333%}.offset-md-2{margin-left:16.66667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333%}.offset-md-5{margin-left:41.66667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333%}.offset-md-8{margin-left:66.66667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333%}.offset-md-11{margin-left:91.66667%}}@media (min-width:62em){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 8.33333%;max-width:8.33333%}.col-lg-2{flex:0 0 16.66667%;max-width:16.66667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.33333%;max-width:33.33333%}.col-lg-5{flex:0 0 41.66667%;max-width:41.66667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}.col-lg-8{flex:0 0 66.66667%;max-width:66.66667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.33333%;max-width:83.33333%}.col-lg-11{flex:0 0 91.66667%;max-width:91.66667%}.col-lg-12{flex:0 0 100%;max-width:100%}.pull-lg-0{right:auto}.pull-lg-1{right:8.33333%}.pull-lg-2{right:16.66667%}.pull-lg-3{right:25%}.pull-lg-4{right:33.33333%}.pull-lg-5{right:41.66667%}.pull-lg-6{right:50%}.pull-lg-7{right:58.33333%}.pull-lg-8{right:66.66667%}.pull-lg-9{right:75%}.pull-lg-10{right:83.33333%}.pull-lg-11{right:91.66667%}.pull-lg-12{right:100%}.push-lg-0{left:auto}.push-lg-1{left:8.33333%}.push-lg-2{left:16.66667%}.push-lg-3{left:25%}.push-lg-4{left:33.33333%}.push-lg-5{left:41.66667%}.push-lg-6{left:50%}.push-lg-7{left:58.33333%}.push-lg-8{left:66.66667%}.push-lg-9{left:75%}.push-lg-10{left:83.33333%}.push-lg-11{left:91.66667%}.push-lg-12{left:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333%}.offset-lg-2{margin-left:16.66667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333%}.offset-lg-5{margin-left:41.66667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333%}.offset-lg-8{margin-left:66.66667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333%}.offset-lg-11{margin-left:91.66667%}}@media (min-width:75em){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 8.33333%;max-width:8.33333%}.col-xl-2{flex:0 0 16.66667%;max-width:16.66667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.33333%;max-width:33.33333%}.col-xl-5{flex:0 0 41.66667%;max-width:41.66667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.33333%;max-width:58.33333%}.col-xl-8{flex:0 0 66.66667%;max-width:66.66667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.33333%;max-width:83.33333%}.col-xl-11{flex:0 0 91.66667%;max-width:91.66667%}.col-xl-12{flex:0 0 100%;max-width:100%}.pull-xl-0{right:auto}.pull-xl-1{right:8.33333%}.pull-xl-2{right:16.66667%}.pull-xl-3{right:25%}.pull-xl-4{right:33.33333%}.pull-xl-5{right:41.66667%}.pull-xl-6{right:50%}.pull-xl-7{right:58.33333%}.pull-xl-8{right:66.66667%}.pull-xl-9{right:75%}.pull-xl-10{right:83.33333%}.pull-xl-11{right:91.66667%}.pull-xl-12{right:100%}.push-xl-0{left:auto}.push-xl-1{left:8.33333%}.push-xl-2{left:16.66667%}.push-xl-3{left:25%}.push-xl-4{left:33.33333%}.push-xl-5{left:41.66667%}.push-xl-6{left:50%}.push-xl-7{left:58.33333%}.push-xl-8{left:66.66667%}.push-xl-9{left:75%}.push-xl-10{left:83.33333%}.push-xl-11{left:91.66667%}.push-xl-12{left:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333%}.offset-xl-2{margin-left:16.66667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333%}.offset-xl-5{margin-left:41.66667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333%}.offset-xl-8{margin-left:66.66667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333%}.offset-xl-11{margin-left:91.66667%}}html{font-size:100%}@media (max-width:48em){html{font-size:80%}}body{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;font-weight:400;line-height:normal}.demo-styles,body{color:#444}.demo-styles h1{font-size:2.8rem}.demo-styles h1,.demo-styles h2{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-weight:400;line-height:normal;font-weight:300}.demo-styles h2{font-size:2rem}.demo-styles h3{font-size:1.6rem}.demo-styles h3,.demo-styles h4{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-weight:400;line-height:normal}.demo-styles h4{font-size:1.5rem}.demo-styles h5{font-size:1.3rem}.demo-styles h5,.demo-styles h6{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-weight:400;line-height:normal}.demo-styles h6{font-size:1.2rem}.demo-styles form,.demo-styles input[type=text],.demo-styles p{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;font-weight:400;line-height:normal}.demo-styles input[type=text]{margin:0;border-radius:0;background-image:none;background:transparent;-webkit-appearance:none;appearance:none;outline:none;text-decoration:none;font-size:inherit;display:inline-block;width:100%;padding:10px;box-sizing:border-box;line-height:1;border:1px solid #ddd}.demo-styles input[type=text]:focus{border:none;outline:none}.demo-styles input[type=text]::placeholder{font-size:inherit}.demo-styles input[type=text]:focus{outline:0}.demo-styles input[type=text]::placeholder{color:#ddd}.demo-styles input[type=text]:focus{border:1px solid rgba(82,158,246,.5);background:#fffff2}@media (max-width:48em){.demo-styles input[type=text]{font-size:16px}}.demo-styles textarea{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;font-weight:400;line-height:normal;margin:0;border-radius:0;background-image:none;background:transparent;-webkit-appearance:none;appearance:none;outline:none;text-decoration:none;font-size:inherit;display:inline-block;width:100%;padding:10px;box-sizing:border-box;line-height:1;border:1px solid #ddd;line-height:1.6rem;height:120px}.demo-styles textarea:focus{border:none;outline:none}.demo-styles textarea::placeholder{font-size:inherit}.demo-styles textarea:focus{outline:0}.demo-styles textarea::placeholder{color:#ddd}.demo-styles textarea:focus{border:1px solid rgba(82,158,246,.5);background:#fffff2}@media (max-width:48em){.demo-styles textarea{font-size:16px}}.demo-styles legend{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:inherit;font-weight:400;line-height:normal}.demo-styles .radio,.demo-styles .radio input[type=radio]{display:inline-block;margin:0}.demo-styles .radio label{display:flex;align-items:center;align-content:center;justify-content:flex-start;margin:0;padding:0 1rem 0 0;line-height:1;cursor:pointer}.demo-styles .radio label:before{content:"";display:inline-block;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIxMTEgMjMwIDYgNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHg9IjExMSIgeT0iMjMwIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMyIvPjwvc3ZnPg==");background-repeat:no-repeat;background-position:50%;flex:0 0 18px;width:18px;height:18px;vertical-align:middle;line-height:1;background-color:#fff;border:1px solid #ddd;margin:0 .4rem 0 0;padding:0;background-size:8px 8px;border-radius:18px}.demo-styles .radio input[type=radio]{display:none}.demo-styles .radio input[type=radio]:checked+label:before{background-color:#529ef6;border-color:#529ef6}.demo-styles .radio-inside,.demo-styles .radio-inside input[type=radio]{display:inline-block;margin:0}.demo-styles .radio-inside label{cursor:pointer;margin:0}.demo-styles .radio-inside span{display:flex;align-items:center;align-content:center;justify-content:flex-start;margin:0;padding:0 1rem 0 0;line-height:1;cursor:pointer}.demo-styles .radio-inside span:before{content:"";display:inline-block;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIxMTEgMjMwIDYgNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHg9IjExMSIgeT0iMjMwIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMyIvPjwvc3ZnPg==");background-repeat:no-repeat;background-position:50%;flex:0 0 18px;width:18px;height:18px;vertical-align:middle;line-height:1;background-color:#fff;border:1px solid #ddd;margin:0 .4rem 0 0;padding:0;background-size:8px 8px;border-radius:18px}.demo-styles .radio-inside input[type=radio]{display:none}.demo-styles .radio-inside input[type=radio]:checked+span:before{background-color:#529ef6;border-color:#529ef6}.demo-styles .checkbox,.demo-styles .checkbox input[type=radio]{display:inline-block;margin:0}.demo-styles .checkbox label{display:flex;align-items:center;align-content:center;justify-content:flex-start;margin:0;padding:0 1rem 0 0;line-height:1;cursor:pointer}.demo-styles .checkbox label:before{content:"";display:inline-block;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9Ijg2IDIyNiAxMSAxMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTAuNTg2IDIzMy44MjhsNC4yNDItNC4yNDJMOTYuMjQzIDIzMWwtNS42NTcgNS42NTctLjcwNy0uNzA3LTMuNTM2LTMuNTM2TDg3Ljc1NyAyMzFsMi44MjkgMi44Mjh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:50%;flex:0 0 18px;width:18px;height:18px;vertical-align:middle;line-height:1;background-color:#fff;border:1px solid #ddd;margin:0 .4rem 0 0;padding:0;background-size:16px 14px;background-position:center 0;border-radius:.2rem}.demo-styles .checkbox input[type=checkbox]{display:none}.demo-styles .checkbox input[type=checkbox]:checked+label:before{background-color:#529ef6;border-color:#529ef6}.demo-styles .checkbox-inside,.demo-styles .checkbox-inside input[type=radio]{display:inline-block;margin:0}.demo-styles .checkbox-inside label{cursor:pointer;margin:0}.demo-styles .checkbox-inside span{display:flex;align-items:center;align-content:center;justify-content:flex-start;margin:0;padding:0 1rem 0 0;line-height:1;cursor:pointer}.demo-styles .checkbox-inside span:before{content:"";display:inline-block;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9Ijg2IDIyNiAxMSAxMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTAuNTg2IDIzMy44MjhsNC4yNDItNC4yNDJMOTYuMjQzIDIzMWwtNS42NTcgNS42NTctLjcwNy0uNzA3LTMuNTM2LTMuNTM2TDg3Ljc1NyAyMzFsMi44MjkgMi44Mjh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:50%;flex:0 0 18px;width:18px;height:18px;vertical-align:middle;line-height:1;background-color:#fff;border:1px solid #ddd;margin:0 .4rem 0 0;padding:0;background-size:16px 14px;background-position:center 0;border-radius:.2rem}.demo-styles .checkbox-inside input[type=checkbox]{display:none}.demo-styles .checkbox-inside input[type=checkbox]:checked+span:before{background-color:#529ef6;border-color:#529ef6}.demo-styles .select{padding:0;margin:0;border:1px solid #ccc;width:200px;border-radius:3px;overflow:hidden;background-color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMTQ3IDIyNSA2IDEwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNTAgMjI1bDMgNGgtNmwzLTR6bTAgMTBsLTMtNGg2bC0zIDR6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:right 12px top 15px;background-size:6px 10px}.demo-styles .select select{padding:5px 12px;width:130%;height:40px;border:none;box-shadow:none;background-color:transparent;background-image:none;appearance:none;cursor:pointer}.demo-styles .select select:focus{outline:none}.demo-styles .table{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;font-weight:400;line-height:normal;width:100%;border-collapse:collapse;border-top:1px solid #eee;margin-bottom:10px}.demo-styles .table th{font-weight:700}.demo-styles .table td,.demo-styles .table th{padding:5px 10px}.demo-styles .table thead tr td,.demo-styles .table thead tr th{font-size:.8rem;border:solid #eee;border-width:1px 1px 2px}.demo-styles .table tbody tr:first-child td,.demo-styles .table tbody tr:first-child th{border-top:none}.demo-styles .table tbody th{border:solid #eee;border-width:1px 1px 2px}.demo-styles .table tbody td{border:1px solid #eee}.demo-styles .table-line{width:100%;border-collapse:collapse;margin-bottom:10px}.demo-styles .table-line th{font-weight:700}.demo-styles .table-line td,.demo-styles .table-line th{padding:5px 10px}.demo-styles .table-line thead tr td,.demo-styles .table-line thead tr th{border-bottom:2px solid #eee}.demo-styles .table-line tr:first-child td,.demo-styles .table-line tr:first-child th{border-top:none}.demo-styles .table-line td,.demo-styles .table-line th{border-top:1px solid #eee}.demo-styles .table-stripe{width:100%;border-collapse:collapse;margin-bottom:10px}.demo-styles .table-stripe th{font-weight:700}.demo-styles .table-stripe td,.demo-styles .table-stripe th{padding:5px 10px}.demo-styles .table-stripe thead tr{background-color:#fff}.demo-styles .table-stripe tbody tr:nth-child(2n){background-color:#eee}.demo-styles .table-stripe tbody tr:nth-child(odd){background-color:#f8f8f8}.demo-styles .fieldset{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:0;margin:0 0 10px;border:0}.demo-styles .fieldset:last-child,.demo-styles .fieldset label,.demo-styles .fieldset legend{margin-bottom:0}.demo-styles .fieldset>legend{width:30%;padding-right:20px}.demo-styles .fieldset>:not(legend){flex:1}.demo-styles .button{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;line-height:normal;box-sizing:border-box;box-shadow:none;appearance:none;display:inline-block;border-radius:0;background-color:transparent;background-image:linear-gradient(0deg,transparent,transparent);position:relative;cursor:pointer;text-align:center;font-weight:400;margin:0;outline:none;border-radius:2px;border:1px solid #529ef6;background-color:#529ef6;color:#fff;padding:10px;line-height:1}.demo-styles .button:active,.demo-styles .button:hover,.demo-styles .button:link,.demo-styles .button:visited{text-decoration:none}.demo-styles .button:focus{outline:none}.demo-styles .button.is-disabled,.demo-styles .button:disabled{cursor:default;pointer-events:none;opacity:.2}.demo-styles .button:focus{background-color:#529ef6}.demo-styles .button.is-current,.demo-styles .button:active,.demo-styles .button:hover{background-color:#2283f3;color:#fff;border-color:#529ef6}.demo-styles .button-semiflat{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;line-height:normal;box-sizing:border-box;box-shadow:none;appearance:none;display:inline-block;border-radius:0;background-color:transparent;background-image:linear-gradient(0deg,transparent,transparent);position:relative;cursor:pointer;text-align:center;font-weight:400;margin:0;outline:none;border-radius:4px;background-color:#529ef6;background-image:linear-gradient(0deg,#529ef6,#6aacf7);border:1px solid #6aacf7;color:#fff;padding:10px;line-height:1}.demo-styles .button-semiflat:active,.demo-styles .button-semiflat:hover,.demo-styles .button-semiflat:link,.demo-styles .button-semiflat:visited{text-decoration:none}.demo-styles .button-semiflat:focus{outline:none}.demo-styles .button-semiflat.is-disabled,.demo-styles .button-semiflat:disabled{cursor:default;pointer-events:none;opacity:.2}.demo-styles .button-semiflat:focus{background-color:#529ef6;background-image:linear-gradient(0deg,#529ef6,#6aacf7)}.demo-styles .button-semiflat.is-current,.demo-styles .button-semiflat:active,.demo-styles .button-semiflat:hover{background-color:#3a90f5;background-image:linear-gradient(0deg,#3a90f5,#529ef6)}.demo-styles .button-border{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;line-height:normal;box-sizing:border-box;box-shadow:none;appearance:none;display:inline-block;border-radius:0;background-image:linear-gradient(0deg,transparent,transparent);position:relative;cursor:pointer;text-align:center;font-weight:400;margin:0;outline:none;border-radius:2px;background-color:transparent;padding:10px;border:1px solid #529ef6;color:#529ef6;line-height:1}.demo-styles .button-border:active,.demo-styles .button-border:hover,.demo-styles .button-border:link,.demo-styles .button-border:visited{text-decoration:none}.demo-styles .button-border:focus{outline:none}.demo-styles .button-border.is-disabled,.demo-styles .button-border:disabled{cursor:default;pointer-events:none;opacity:.2}.demo-styles .button-border:focus{background-color:transparent;border:1px solid #529ef6}.demo-styles .button-border.is-current,.demo-styles .button-border:active,.demo-styles .button-border:hover{background-color:#529ef6;color:#fff;border-color:transparet}.demo-styles .button-emboss{font-family:Open Sans,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;font-size:1rem;line-height:normal;box-sizing:border-box;box-shadow:none;appearance:none;display:inline-block;border-radius:0;background-color:transparent;background-image:linear-gradient(0deg,transparent,transparent);position:relative;cursor:pointer;text-align:center;font-weight:400;margin:0;border:none;outline:none;transition:all .05s ease-out;transform:translateY(-6px);box-shadow:0 6px 0 #2283f3;border-radius:4px;background-color:#529ef6;color:#fff;padding:10px;line-height:1}.demo-styles .button-emboss:active,.demo-styles .button-emboss:hover,.demo-styles .button-emboss:link,.demo-styles .button-emboss:visited{text-decoration:none}.demo-styles .button-emboss:focus{outline:none}.demo-styles .button-emboss.is-disabled,.demo-styles .button-emboss:disabled{cursor:default;pointer-events:none;opacity:.2}.demo-styles .button-emboss:focus{background-color:#529ef6;box-shadow:0 6px 0 #2283f3}.demo-styles .button-emboss.is-current,.demo-styles .button-emboss:active,.demo-styles .button-emboss:hover{transform:translateY(0);box-shadow:0 0 0 #529ef6;background-color:#2283f3}.demo-styles .button-group{display:flex;justify-content:space-between}.demo-styles .button-group>*{width:100%;border-radius:0}.demo-styles .button-group>:first-child{border-radius:3px 0 0 3px}.demo-styles .button-group>:last-child{border-radius:0 3px 3px 0}.demo-styles .switch input[type=checkbox]{display:none}.demo-styles .switch label{cursor:pointer;text-indent:-9999px;width:38px;height:20px;background:grey;display:block;border-radius:20px;position:relative}.demo-styles .switch label:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:16px;transition:.3s}.demo-styles .switch input:checked+label{background:#529ef6}.demo-styles .switch input:checked+label:after{left:calc(100% - 2px);transform:translateX(-100%)}.demo-styles .switch label:active:after{width:20px}.demo-styles .reset-ul{margin:0;padding:0;list-style:none;display:inline-block}.demo-styles .reset-ul>li{display:inline-block}.demo-styles .word-break{white-space:normal;word-break:break-all;word-wrap:break-word}.demo-styles .word-break,.demo-styles .word-break-none{display:inline-block;width:100px;background:#f8f8f8;padding:10px}.demo-styles .word-break-none{white-space:nowrap;word-break:keep-all;word-wrap:normal}.demo-styles .text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;width:100px;background:#f8f8f8;padding:10px}.demo-styles .icon-hamburger:before{background-color:#000;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='24' viewBox='6 8 28 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M6 8h28v4H6zM6 18h28v4H6zM6 28h28v4H6z'/%3E%3C/svg%3E");background-size:45% 45%}.demo-styles .icon-hamburger:before,.demo-styles .icon-twitter:before{content:"";width:40px;height:40px;display:inline-block;background-repeat:no-repeat;background-position:50%}.demo-styles .icon-twitter:before{background-color:#1da1f2;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='22' viewBox='8 9 26 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.27 30.611c9.622 0 14.885-7.972 14.885-14.886 0-.226 0-.451-.015-.676a10.645 10.645 0 0 0 2.61-2.708c-.955.423-1.968.7-3.005.823a5.25 5.25 0 0 0 2.3-2.894 10.485 10.485 0 0 1-3.322 1.27 5.237 5.237 0 0 0-8.916 4.772 14.853 14.853 0 0 1-10.782-5.466 5.236 5.236 0 0 0 1.62 6.984 5.193 5.193 0 0 1-2.375-.655v.066a5.234 5.234 0 0 0 4.197 5.129c-.77.21-1.578.24-2.362.09a5.238 5.238 0 0 0 4.888 3.633A10.498 10.498 0 0 1 8.25 28.26a14.811 14.811 0 0 0 8.02 2.346' fill='%23FFF'/%3E%3C/svg%3E");background-size:60% 60%}.demo-styles .icon-facebook:before{background-color:#3c5999;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='34' viewBox='16 6 18 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.485 39.984V24.558h5.178l.776-6.012h-5.954v-3.838c0-1.74.484-2.927 2.98-2.927l3.183-.001V6.403c-.55-.073-2.44-.237-4.639-.237-4.59 0-7.732 2.801-7.732 7.947v4.433h-5.191v6.012h5.191v15.426h6.208z' fill='%23FEFEFE' fill-rule='evenodd'/%3E%3C/svg%3E");background-size:60% 60%}.demo-styles .icon-facebook:before,.demo-styles .icon-hatena:before{content:"";width:40px;height:40px;display:inline-block;background-repeat:no-repeat;background-position:50%}.demo-styles .icon-hatena:before{background-color:#2d92ba;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='20' viewBox='9 10 22 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.915 25.366c-.484.298-1.318.444-2.489.444h-1.732v-3.973h1.807c1.202 0 2.033.152 2.475.454.45.302.67.836.67 1.602 0 .685-.242 1.178-.73 1.473zm-4.22-10.426h1.064c1.23 0 2.056.139 2.482.415.42.278.635.757.635 1.44 0 .657-.228 1.12-.68 1.392-.457.266-1.291.401-2.512.401h-.99V14.94zm8.558 5.708c-.724-.81-1.732-1.265-3.024-1.363 1.15-.313 1.984-.772 2.513-1.384.525-.604.786-1.425.786-2.457 0-.818-.179-1.54-.525-2.165a3.905 3.905 0 0 0-1.535-1.49c-.587-.323-1.284-.55-2.096-.684-.816-.13-2.245-.196-4.296-.196H9.091v18.182h5.136c2.064 0 3.552-.072 4.462-.21.909-.143 1.671-.384 2.289-.714a4.196 4.196 0 0 0 1.753-1.713c.41-.74.612-1.591.612-2.566 0-1.349-.363-2.432-1.09-3.24zM28.606 24.485a2.302 2.302 0 1 0-.002 4.604 2.302 2.302 0 0 0 .002-4.604M26.606 23.031h4V10.91h-4z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");background-size:50% 50%}.demo-styles .wordwrap-fadeout{position:relative;overflow:hidden}.demo-styles .wordwrap-fadeout:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:10px;background:#fff}.demo-styles .wordwrap-fadeout:after{background-image:linear-gradient(0deg,#fff,hsla(0,0%,100%,0));content:"";position:absolute;bottom:10px;left:0;width:100%;height:50px}
@@ -1,44 +0,0 @@
1
- =form
2
- input[type=text],
3
- textarea,
4
- legend,
5
- .select,
6
- .radio,
7
- .radio-inside,
8
- .radio-default,
9
- .checkbox,
10
- .checkbox-inside,
11
- .checkbox-default
12
- font-size: 1rem
13
- line-height: 1.6rem
14
-
15
- p
16
- margin-bottom: 0
17
-
18
- input[type=text]
19
- +input-base
20
- textarea
21
- +input-base
22
- fieldset
23
- +fieldset-base
24
- .select
25
- +select-base
26
-
27
- .radio
28
- +radio-base
29
- padding-right: 1rem
30
- .radio-inside
31
- +radio-base(span)
32
- padding-right: 1rem
33
- .radio-default
34
- +radio-default
35
- padding-right: 1rem
36
- .checkbox
37
- +checkbox-base
38
- padding-right: 1rem
39
- .checkbox-inside
40
- +checkbox-base(span)
41
- padding-right: 1rem
42
- .checkbox-default
43
- +checkbox-default
44
- padding-right: 1rem