commit 7e3099966db4a2733c85690c2994c4e2ec50904b
Author: テクニカル諏訪子 <renraku@076.ne.jp>
Date:   Tue Aug 17 18:05:23 2021 +0900

    最初コミット

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a6f8171
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+/bld/lolita_f.css.map
+/bld/lolita_f.css
+/bld/lolita_m.css.map
+/bld/lolita_m.css
+/bld/lolita.css.map
+/bld/lolita.css
\ No newline at end of file
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..9d27966
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,4 @@
+Freedom License v1 (2021年08月17日)
+
+全く無限的自由です。
+It's infinite freedom.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..fe49882
--- /dev/null
+++ b/README.md
@@ -0,0 +1,21 @@
+# ロリタ・スタイル (Lolita Style)
+クッソ小さいCSSライブラリッス！！♡<br />
+Damn small CSS library! ♡
+
+性別不明（紫のメイン）：
+
+```
+sass src/main.scss bld/lolita.css
+```
+
+ショタの色（青のメイン）：
+
+```
+sass src/main_m.scss bld/lolita_m.css
+```
+
+ロリの色（ピンクのメイン）：
+
+```
+sass src/main_f.scss bld/lolita_f.css
+```
\ No newline at end of file
diff --git a/bld/.placeholder b/bld/.placeholder
new file mode 100644
index 0000000..e69de29
diff --git a/src/colour/_dansei.scss b/src/colour/_dansei.scss
new file mode 100644
index 0000000..fe3ef95
--- /dev/null
+++ b/src/colour/_dansei.scss
@@ -0,0 +1,23 @@
+// 色
+//// メイン
+$suwa00: #9ed6ff;
+$suwa01: #8bb6d6;
+$suwa02: #6ec0fb;
+$suwa03: #3daee9;
+$suwa04: #1d99f3;
+$suwa05: #0094ff;
+$suwa06: #3498db;
+$suwa07: #2980b9;
+$suwa08: #205e7d;
+$suwa09: #2c3e50;
+$suwa10: #34495e;
+
+$evil0: #6e93ad;
+$evil1: #436a86;
+$evil2: #2b6b8b;
+$evil3: #2980b9;
+$evil4: #22699c;
+$evil5: #04547d;
+$evil6: #1a3746;
+
+@import "var";
\ No newline at end of file
diff --git a/src/colour/_fumei.scss b/src/colour/_fumei.scss
new file mode 100644
index 0000000..e1d9cfe
--- /dev/null
+++ b/src/colour/_fumei.scss
@@ -0,0 +1,23 @@
+// 色
+//// メイン
+$suwa00: #f1d0ff;
+$suwa01: #e4b4f8;
+$suwa02: #d898f3;
+$suwa03: #cb81ea;
+$suwa04: #b16cce;
+$suwa05: #a05ebd;
+$suwa06: #9b59b6;
+$suwa07: #61237c;
+$suwa08: #46195a;
+$suwa09: #341242;
+$suwa10: #220a2c;
+
+$evil0: #916ead;
+$evil1: #6b4386;
+$evil2: #5d2b8b;
+$evil3: #6c29b9;
+$evil4: #57229c;
+$evil5: #51047d;
+$evil6: #2d1a46;
+
+@import "var";
\ No newline at end of file
diff --git a/src/colour/_josei.scss b/src/colour/_josei.scss
new file mode 100644
index 0000000..24ff751
--- /dev/null
+++ b/src/colour/_josei.scss
@@ -0,0 +1,23 @@
+// 色
+//// メイン
+$suwa00: #ffe6f9;
+$suwa01: #e599e5;
+$suwa02: #ea81e8;
+$suwa03: #e93de9;
+$suwa04: #f31de8;
+$suwa05: #ea00ff;
+$suwa06: #db34d3;
+$suwa07: #b459b6;
+$suwa08: #7d2069;
+$suwa09: #502c50;
+$suwa10: #5e345c;
+
+$evil0: #ad6ea8;
+$evil1: #864386;
+$evil2: #832b8b;
+$evil3: #b929ad;
+$evil4: #9c2296;
+$evil5: #7d0469;
+$evil6: #421a46;
+
+@import "var";
\ No newline at end of file
diff --git a/src/colour/_var.scss b/src/colour/_var.scss
new file mode 100644
index 0000000..7184b1d
--- /dev/null
+++ b/src/colour/_var.scss
@@ -0,0 +1,56 @@
+// 色
+//// 青
+$dan1: #9ed6ff;
+$dan2: #3daee9;
+$dan3: #1d99f3;
+$dan4: #205e7d;
+
+//// 赤
+$ng1: #f58276;
+$ng2: #da4453;
+$ng3: #e74c3c;
+$ng4: #ff3636;
+$ng5: #ed1515;
+$ng6: #c0392b;
+$ng7: #611e24;
+
+//// グレ
+$grey1: #d6dfe4;
+$grey2: #bdc3c7;
+$grey3: #7f8c8d;
+$grey4: #727272;
+$grey5: #495051;
+
+//// 黒
+$black1: #232629;
+$black2: #31363b;
+$black3: #4d4d4d;
+
+//// 黄
+$yellow1: #c9ce3b;
+$yellow2: #ffdd00;
+$yellow3: #fdbc4b;
+$yellow4: #f39c1f;
+$yellow5: #f67400;
+
+//// 白
+$white1: #fcfcfc;
+$white2: #eff0f1;
+
+//// ピンク
+$jo1: #ffe6f9;
+$jo2: #e93de9;
+$jo3: #f31de8;
+$jo4: #7d2069;
+
+//// 緑
+$ok1: #20ec77;
+$ok2: #2ecc71;
+$ok3: #11d116;
+$ok4: #27ae60;
+$ok5: #145d33;
+
+//// 紫
+$kawaii1: #cb81ea;
+$kawaii2: #9b59b6;
+$kawaii3: #61237c;
\ No newline at end of file
diff --git a/src/conponent/_app.scss b/src/conponent/_app.scss
new file mode 100644
index 0000000..6d90a62
--- /dev/null
+++ b/src/conponent/_app.scss
@@ -0,0 +1,156 @@
+#app {
+  font-family: monospace;
+  font-size: large;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  margin-top: 48px;
+  margin-left: 0px;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  font-family: 'jpserriffont';
+  text-align: center;
+  color: $white1;
+  background-color: $black1;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  border-top: 1px solid $black1;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+
+p { margin-top: 0; margin-bottom: 1rem; }
+
+abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }
+address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
+
+ol, ul, dl { margin-top: 0; margin-bottom: 1rem; }
+ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
+
+dt { font-weight: 700; }
+dd { margin-bottom: .5rem; margin-left: 0; }
+blockquote { margin: 0 0 1rem; }
+
+b, strong { font-weight: bolder; }
+small { font-size: 80%; }
+
+sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+a { color: $suwa04; text-decoration: none; background-color: transparent; }
+a:hover { color: $suwa03; text-decoration: underline; }
+a:not([href]) { color: inherit; text-decoration: none; }
+a:not([href]):hover { color: inherit; text-decoration: none; }
+
+pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
+pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; }
+
+figure { margin: 0 0 1rem; }
+img { vertical-align: middle; border-style: none; }
+svg { overflow: hidden; vertical-align: middle; }
+
+table { border-collapse: collapse; }
+th { text-align: inherit; }
+
+caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: $grey3; text-align: left; caption-side: bottom; }
+
+label { display: inline-block; margin-bottom: 0.5rem; }
+button { border-radius: 0; }
+button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
+
+input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
+button, input { overflow: visible; }
+
+button, select { text-transform: none; }
+[role="button"] { cursor: pointer; }
+select { word-wrap: normal; }
+
+button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
+button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }
+
+input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; }
+textarea { overflow: auto; resize: vertical; }
+
+fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
+legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }
+progress { vertical-align: baseline; }
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
+[type="search"] { outline-offset: -2px; -webkit-appearance: none; }
+[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
+
+output { display: inline-block; }
+summary { display: list-item; cursor: pointer; }
+template { display: none; }
+[hidden] { display: none !important; }
+
+small, .small { font-size: 80%; font-weight: 400; }
+mark, .mark { padding: 0.2em; background-color: $white2; }
+
+.list-unstyled { padding-left: 0; list-style: none; }
+.list-inline { padding-left: 0; list-style: none; }
+.list-inline-item { display: inline-block; }
+.list-inline-item:not(:last-child) { margin-right: 0.5rem; }
+
+.initialism { font-size: 90%; text-transform: uppercase; }
+
+.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }
+.blockquote-footer { display: block; font-size: 80%; color: $grey3; }
+.blockquote-footer::before { content: "\2014\00A0"; }
+
+.img-fluid { max-width: 100%; height: auto; }
+.img-thumbnail { padding: 0.25rem; background-color: $white1; border: 1px solid $grey1; border-radius: 0.25rem; max-width: 100%; height: auto; }
+
+.figure { display: inline-block; }
+.figure-img { margin-bottom: 0.5rem; line-height: 1; }
+.figure-caption { font-size: 90%; color: $grey3; }
+
+code { font-size: 87.5%; color: $kawaii1; word-wrap: break-word; }
+a > code { color: inherit; }
+
+kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: $white1; background-color: $black1; border-radius: 0.2rem; }
+kbd kbd { padding: 0; font-size: 100%; font-weight: 700; }
+
+pre { display: block; font-size: 87.5%; color: $black1; }
+pre code { font-size: inherit; color: inherit; word-break: normal; }
+.pre-scrollable { max-height: 340px; overflow-y: scroll; }
+
+#video-wrapper { padding-top: 0px !important; }
\ No newline at end of file
diff --git a/src/conponent/_badge.scss b/src/conponent/_badge.scss
new file mode 100644
index 0000000..aa2d734
--- /dev/null
+++ b/src/conponent/_badge.scss
@@ -0,0 +1,3 @@
+.badge-danger { color: $white1; background-color: $ng5; }
+.badge-light { color: $black1; background-color: $white1; }
+.badge { padding: 2px; border-radius: 2px; font-size: 100%; }
\ No newline at end of file
diff --git a/src/conponent/_button.scss b/src/conponent/_button.scss
new file mode 100644
index 0000000..bc85ff2
--- /dev/null
+++ b/src/conponent/_button.scss
@@ -0,0 +1,190 @@
+.btn, btn:hover {
+  margin: 0 2px;
+  border: 2px solid;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: $black1;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  border-left-color: $white1;
+  border-top-color: $white1;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn:hover {
+  color: $black1;
+  text-decoration: none;
+  border-left-color: $grey3;
+  border-top-color: $grey3;
+}
+
+@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
+.btn.disabled, .btn:disabled { opacity: 0.65; }
+.btn:not(:disabled):not(.disabled) { cursor: pointer; }
+a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }
+.btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }
+.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }
+.btn-block { display: block; width: 100%; }
+.btn-block + .btn-block { margin-top: 0.5rem; }
+input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
+
+.btn-fumei, .btn-fumei.disabled, .btn-fumei:disabled {
+  background: radial-gradient(ellipse at top, $kawaii3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $kawaii2;
+  border-bottom-color: $kawaii1;
+  border-right-color: $kawaii1;
+}
+
+.btn-fumei:hover {
+  color: $white1;
+  background-color: $kawaii3;
+  border-color: transparent;
+  border-bottom-color: $kawaii2;
+  border-right-color: $kawaii2;
+}
+
+.btn-fumei-check {
+  color: $white1;
+  background-color: $kawaii3;
+  border-color: transparent;
+  border-bottom-color: $kawaii2;
+  border-right-color: $kawaii2;
+  box-shadow: 0px 0px 7px 3px $kawaii2;
+}
+
+.btn-danshi, .btn-danshi.disabled, .btn-danshi:disabled {
+  background: radial-gradient(ellipse at top, $dan2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $white1;
+  border-bottom-color: $dan1;
+  border-right-color: $dan1;
+}
+
+.btn-danshi:hover {
+  color: $white1;
+  background-color: $dan4;
+  border-color: transparent;
+  border-bottom-color: $dan3;
+  border-right-color: $dan3;
+}
+
+.btn-danshi-check {
+  color: $white1;
+  background-color: $dan4;
+  border-color: transparent;
+  border-bottom-color: $dan3;
+  border-right-color: $dan3;
+  box-shadow: 0px 0px 7px 3px $dan3;
+}
+
+.btn-joshi, .btn-joshi.disabled, .btn-joshi:disabled {
+  background: radial-gradient(ellipse at top, $jo2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $white1;
+  border-bottom-color: $jo1;
+  border-right-color: $jo1;
+}
+
+.btn-joshi:hover {
+  color: $white1;
+  background-color: $jo4;
+  border-color: transparent;
+  border-bottom-color: $jo3;
+  border-right-color: $jo3;
+}
+
+.btn-joshi-check {
+  color: $white1;
+  background-color: $jo4;
+  border-color: transparent;
+  border-bottom-color: $jo3;
+  border-right-color: $jo3;
+  box-shadow: 0px 0px 7px 3px $jo3;
+}
+
+.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
+  background: radial-gradient(ellipse at top, $suwa03, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $suwa00;
+  border-right-color: $suwa00;
+}
+
+.btn-primary:hover {
+  color: $white1;
+  background-color: $suwa08;
+  border-color: transparent;
+  border-bottom-color: $suwa04;
+  border-right-color: $suwa04;
+}
+
+.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
+  background: radial-gradient(ellipse at top, $grey3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $grey1;
+  border-right-color: $grey1;
+}
+
+.btn-secondary:hover {
+  color: $white1;
+  background-color: $grey5;
+  border-color: transparent;
+  border-bottom-color: $grey2;
+  border-right-color: $grey2;
+}
+
+.btn-success, .btn-success.disabled, .btn-success:disabled, .alert-success {
+  background: radial-gradient(ellipse at top, $ok2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $ok1;
+  border-right-color: $ok1;
+}
+
+.btn-success:hover {
+  color: $white1;
+  background-color: $ok5;
+  border-color: transparent;
+  border-bottom-color: $ok4;
+  border-right-color: $ok4;
+}
+
+.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
+  background: radial-gradient(ellipse at top, $ng3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $ng1;
+  border-right-color: $ng1;
+}
+
+.btn-danger:hover {
+  color: $white1;
+  background-color: $ng7;
+  border-color: transparent;
+  border-bottom-color: $ng3;
+  border-right-color: $ng3;
+}
+
+.btn-warning, .btn-warning.disabled, .btn-warning:disabled, .alert-warning {
+  background: radial-gradient(ellipse at top, $yellow3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $yellow1;
+  border-right-color: $yellow1;
+}
+
+.btn-warning:hover {
+  color: $white1;
+  background-color: $yellow5;
+  border-color: transparent;
+  border-bottom-color: $yellow3;
+  border-right-color: $yellow3;
+}
\ No newline at end of file
diff --git a/src/conponent/_check.scss b/src/conponent/_check.scss
new file mode 100644
index 0000000..0d6e035
--- /dev/null
+++ b/src/conponent/_check.scss
@@ -0,0 +1,4 @@
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
+{ color: $white1; background-color: $suwa03; border-color: $suwa04; }
\ No newline at end of file
diff --git a/src/conponent/_comments.scss b/src/conponent/_comments.scss
new file mode 100644
index 0000000..a501c40
--- /dev/null
+++ b/src/conponent/_comments.scss
@@ -0,0 +1,5 @@
+.fn { font-size: 16px; font-style: normal; color: $ok1; }
+.comment-meta a { color: $grey2; }
+.commentlist p { margin: 0 0 10px; padding: 10px 0 40px 0; font-size: 20px; }
+.commentnumber { float: left; margin-right: 5px; font-size: 16px; }
+ul { list-style: none; }
\ No newline at end of file
diff --git a/src/conponent/_contents.scss b/src/conponent/_contents.scss
new file mode 100644
index 0000000..4e531c3
--- /dev/null
+++ b/src/conponent/_contents.scss
@@ -0,0 +1,40 @@
+.bar { background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%); }
+.bara { background: linear-gradient(180deg, $suwa05 0, $suwa01 34%, $evil5 100%); }
+.bar, .bara, .barm {
+  text-align: center;
+  color: $white1;
+  padding: 5px;
+  font-size: 20px;
+  border-bottom: solid 2px $suwa03;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s;
+}
+.barm { background: linear-gradient(180deg, $black2 0, $black3 34%, $black1 100%); border-bottom: solid 2px $white1; font-size: 24px; cursor: default; font-weight: bolder; }
+.bar > a { color: $white1; }
+.bar > a:hover { text-decoration: none; }
+.bar:hover { color: $white1; background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%); }
+.indexborder { border: 2px solid $suwa03; box-shadow: 0px 0px 7px 3px $suwa04; padding: 8px; background-color: $black1; }
+.meta { padding: 5px; text-align: left; background-color: $suwa09; border-bottom: solid 2px $suwa03; }
+.comment { border-top: solid 2px $suwa03; }
+.back, .comment { padding: 4px; background-color: $black2; text-align: left; }
+.commentloop { padding: 10px 4px 40px 4px; }
+.commentloop > .name { color: $ok3; }
+.within { margin: 0 auto; border: 2px solid $suwa03; box-shadow: 0px 0px 7px 3px $suwa04; }
+.wny { border: solid 2px $ng5; box-shadow: 0px 0px 20px 10px $ng4; }
+.bny, .cny { background-color: $ng2; border-bottom: solid 2px $ng5; }
+.mny { background-color: $ng6; border-bottom: solid 2px $ng5; }
+.kero-section {
+  width: 100%;
+  font-size: 150%;
+  font-weight: bolder;
+  text-align: center;
+  padding: 4px;
+  margin: 8px 0;
+  background: linear-gradient(to bottom, $suwa03 0%, $evil4 34%, $suwa02 100%);
+  color: $white1;
+  border-bottom-color: $suwa00;
+  border-right-color: $suwa00;
+  border-width: 1px;
+  border-radius: 25px;
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/conponent/_form.scss b/src/conponent/_form.scss
new file mode 100644
index 0000000..3ad08ba
--- /dev/null
+++ b/src/conponent/_form.scss
@@ -0,0 +1,168 @@
+.form-control, .form-control:focus {
+  background-color: $black1; color: $white1;
+}
+.form-control {
+  border: 1px solid $suwa10;
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  background-clip: padding-box;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.form-control:focus {
+  border: 1px solid $suwa03;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem $suwa06;
+}
+.form-control:disabled, .form-control[readonly] {
+  background-color: $black1;
+  opacity: 1;
+}
+
+.form-check-input[disabled] ~ .form-check-label,
+.form-check-input:disabled ~ .form-check-label {
+  color: $grey3;
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .form-control {
+    transition: none;
+  }
+}
+
+.form-control:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 $grey5;
+}
+
+.form-control::-webkit-input-placeholder {
+  color: $grey3;
+  opacity: 1;
+}
+
+.form-control::-moz-placeholder {
+  color: $grey3;
+  opacity: 1;
+}
+
+.form-control::placeholder {
+  color: $grey3;
+  opacity: 1;
+}
+
+input[type="date"].form-control,
+input[type="time"].form-control,
+input[type="datetime-local"].form-control,
+input[type="month"].form-control {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select.form-control[size], select.form-control[multiple] {
+  height: auto;
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: 1.25rem;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: 0.3rem;
+  margin-left: -1.25rem;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group > .form-control,
+.input-group > .custom-select {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.input-group > .form-control + .form-control,
+.input-group > .form-control + .custom-select,
+.input-group > .custom-select + .form-control,
+.input-group > .custom-select + .custom-select {
+  margin-left: -1px;
+}
+
+.input-group > .form-control:focus,
+.input-group > .custom-select:focus {
+  z-index: 3;
+}
+
+.input-group > .form-control:not(:last-child),
+.input-group > .custom-select:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .form-control:not(:first-child),
+.input-group > .custom-select:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.custom-select {
+  display: inline-block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  vertical-align: middle;
+  background-color: $black1;
+  border: 1px solid $suwa10;
+  color: $white1;
+  border-radius: 0.25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) { .custom-select { transition: none; } }
+
+.custom-select[multiple], .custom-select[size]:not([size="1"]) {
+  height: auto;
+  padding-right: 0.75rem;
+  background-image: none;
+}
+
+.custom-select:disabled {
+  color: $grey3;
+  background-color: $white2;
+}
\ No newline at end of file
diff --git a/src/conponent/_grid.scss b/src/conponent/_grid.scss
new file mode 100644
index 0000000..8a7605a
--- /dev/null
+++ b/src/conponent/_grid.scss
@@ -0,0 +1,87 @@
+.container, .container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) { .container { max-width: 540px; } }
+@media (min-width: 768px) { .container { max-width: 720px; } }
+@media (min-width: 992px) { .container { max-width: 960px; } }
+@media (min-width: 1200px) { .container { max-width: 1140px; } }
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+@for $i from 1 through 12 {
+  .col, .col-auto, .col-sm, .col-sm-auto, .col-md, .col-md-auto, .col-lg, .col-lg-auto, .col-xl, .col-xl-auto, .col-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} {
+    position: relative;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+.col { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
+.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
+$perc: ('1': 8.333333%, '2': 16.666667%, '3': 25%, '4': 33.333333%, '5': 41.666667%, '6': 50%, '7': 58.333333%, '8': 66.666667%, '9': 75%, '10': 83.333333%, '11': 91.666667%, '12': 100%);
+
+@each $k, $v in $perc {
+  .col-#{$k} {
+    flex: 0 0 $v;
+    max-width: $v;
+  }
+}
+
+@media (min-width: 576px) {
+  .col-sm { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
+  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
+
+  @each $k, $v in $perc {
+    .col-sm-#{$k} {
+      flex: 0 0 $v;
+      max-width: $v;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
+  .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
+
+  @each $k, $v in $perc {
+    .col-md-#{$k} {
+      flex: 0 0 $v;
+      max-width: $v;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
+  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
+
+  @each $k, $v in $perc {
+    .col-lg-#{$k} {
+      flex: 0 0 $v;
+      max-width: $v;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
+  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
+
+  @each $k, $v in $perc {
+    .col-xl-#{$k} {
+      flex: 0 0 $v;
+      max-width: $v;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/conponent/_jpserriffont.scss b/src/conponent/_jpserriffont.scss
new file mode 100644
index 0000000..f314479
--- /dev/null
+++ b/src/conponent/_jpserriffont.scss
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "jpserriffont";
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/jpserriffont.woff?7c80edebf55afde76b91a29eb69e6e21);
+  font-display: swap;
+}
+
+body { font-family: jpserriffont; }
\ No newline at end of file
diff --git a/src/conponent/_logo.scss b/src/conponent/_logo.scss
new file mode 100644
index 0000000..7070ca8
--- /dev/null
+++ b/src/conponent/_logo.scss
@@ -0,0 +1,55 @@
+.logo-img { border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; }
+.logo-sns { transition: background 0.3s, color 0.3s; background-color: $black2; border: 1px solid $white2; padding: 8px; margin: 4px 10px; }
+.logo-sns:hover { background-color: $white2; border: 1px solid $black2; }
+.logo-play { transition: background 0.3s, color 0.3s; background-color: transparent; border-radius: 25%; padding: 2px; }
+.logo-play:hover { background-color: $ng4; }
+.logo-br { padding: 8px; }
+
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {List}            - text-shadow list
+@function stroke($stroke, $color) {
+  $shadow: ();
+  $from: $stroke*-1;
+  @for $i from $from through $stroke {
+   @for $j from $from through $stroke {
+      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
+    }
+  }
+  @return $shadow;
+}
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {Style}           - text-shadow
+@mixin stroke($stroke, $color) {
+  text-shadow: stroke($stroke, $color);
+}
+
+@keyframes sitenamehover {
+  0%   { text-shadow: stroke(4, $suwa04); }
+  25%  { text-shadow: stroke(4, $suwa03); }
+  50%  { text-shadow: stroke(4, $suwa00); }
+  75%  { text-shadow: stroke(4, $suwa03); }
+  100% { text-shadow: stroke(4, $suwa04); }
+}
+
+.logo-c {
+  font-size: 64px;
+  font-weight: bolder;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-shadow: -4px -4px 0 $suwa04, -4px -3px 0 $suwa04, -4px -2px 0 $suwa04, -4px -1px 0 $suwa04, -4px 0px 0 $suwa04, -4px 1px 0 $suwa04, -4px 2px 0 $suwa04, -4px 3px 0 $suwa04, -4px 4px 0 $suwa04, -3px -4px 0 $suwa04, -3px -3px 0 $suwa04, -3px -2px 0 $suwa04, -3px -1px 0 $suwa04, -3px 0px 0 $suwa04, -3px 1px 0 $suwa04, -3px 2px 0 $suwa04, -3px 3px 0 $suwa04, -3px 4px 0 $suwa04, -2px -4px 0 $suwa04, -2px -3px 0 $suwa04, -2px -2px 0 $suwa04, -2px -1px 0 $suwa04, -2px 0px 0 $suwa04, -2px 1px 0 $suwa04, -2px 2px 0 $suwa04, -2px 3px 0 $suwa04, -2px 4px 0 $suwa04, -1px -4px 0 $suwa04, -1px -3px 0 $suwa04, -1px -2px 0 $suwa04, -1px -1px 0 $suwa04, -1px 0px 0 $suwa04, -1px 1px 0 $suwa04, -1px 2px 0 $suwa04, -1px 3px 0 $suwa04, -1px 4px 0 $suwa04, 0px -4px 0 $suwa04, 0px -3px 0 $suwa04, 0px -2px 0 $suwa04, 0px -1px 0 $suwa04, 0px 0px 0 $suwa04, 0px 1px 0 $suwa04, 0px 2px 0 $suwa04, 0px 3px 0 $suwa04, 0px 4px 0 $suwa04, 1px -4px 0 $suwa04, 1px -3px 0 $suwa04, 1px -2px 0 $suwa04, 1px -1px 0 $suwa04, 1px 0px 0 $suwa04, 1px 1px 0 $suwa04, 1px 2px 0 $suwa04, 1px 3px 0 $suwa04, 1px 4px 0 $suwa04, 2px -4px 0 $suwa04, 2px -3px 0 $suwa04, 2px -2px 0 $suwa04, 2px -1px 0 $suwa04, 2px 0px 0 $suwa04, 2px 1px 0 $suwa04, 2px 2px 0 $suwa04, 2px 3px 0 $suwa04, 2px 4px 0 $suwa04, 3px -4px 0 $suwa04, 3px -3px 0 $suwa04, 3px -2px 0 $suwa04, 3px -1px 0 $suwa04, 3px 0px 0 $suwa04, 3px 1px 0 $suwa04, 3px 2px 0 $suwa04, 3px 3px 0 $suwa04, 3px 4px 0 $suwa04, 4px -4px 0 $suwa04, 4px -3px 0 $suwa04, 4px -2px 0 $suwa04, 4px -1px 0 $suwa04, 4px 0px 0 $suwa04, 4px 1px 0 $suwa04, 4px 2px 0 $suwa04, 4px 3px 0 $suwa04, 4px 4px 0 $suwa04;
+}
+
+.logo-c:hover { animation: sitenamehover 2s linear infinite; }
+
+@media (max-width : 1200px) {
+  .logo-c { font-size: 32px; }
+}
+@media (max-width : 968px) {
+  .logo-c { font-size: 20px; }
+}
\ No newline at end of file
diff --git a/src/conponent/_modal.scss b/src/conponent/_modal.scss
new file mode 100644
index 0000000..88caaf1
--- /dev/null
+++ b/src/conponent/_modal.scss
@@ -0,0 +1,4 @@
+.modal-header, .modal-body, .modal-footer { color: $white1; }
+.modal-header { background: linear-gradient(to bottom, $suwa04 0%, $suwa02 34%, $suwa03 100%); }
+.modal-body { background-color: $black3; }
+.modal-footer { background-color: $black2; }
\ No newline at end of file
diff --git a/src/conponent/_navbar.scss b/src/conponent/_navbar.scss
new file mode 100644
index 0000000..8d462e3
--- /dev/null
+++ b/src/conponent/_navbar.scss
@@ -0,0 +1,141 @@
+.nav {
+  // display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navbar {
+  padding: 0px;
+  background: radial-gradient(farthest-corner at 50% 85%, $suwa06 0%, $black1 100%);
+  border: 2px solid $suwa03;
+  box-shadow: 0 0 7px 3px $suwa04;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-toggler {
+  border: 0px solid transparent;
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border-radius: 0.25rem;
+}
+
+.navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; }
+.navbar-brand {
+  display: inline-block;
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  line-height: inherit;
+  white-space: nowrap;
+  padding: 5px;
+}
+.navbar-brand, .nav-item {
+  transition: background 0.3s;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.navbar-brand:hover, .nav-item:hover {
+  background-color: $suwa07;
+  text-decoration: none;
+}
+
+.sidemenu { border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; }
+.nav-pills .nav-link { border-radius: 0px; }
+
+.dropdown { position: relative; }
+.mr-auto { margin-right: auto !important; }
+.ml-auto { margin-left: auto !important; }
+
+.fixed-top, .fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; }
+.fixed-top { top: 0; }
+.fixed-bottom { bottom: 0; }
+
+.nav-link { display: block; padding: 0.5rem 1rem; }
+.nav-link:hover, .nav-link:focus { text-decoration: none; }
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: $white1; background-color: $suwa03; }
+
+.navbar .container, .navbar .container-fluid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-nav {
+  display: flex;
+  color: $white1;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.navbar-nav .dropdown-menu {
+  position: static;
+  float: none;
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: no-repeat center center;
+  background-size: 100% 100%;
+}
+
+@media (max-width: 767.98px) {
+  .navbar-expand > .container,
+  .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-expand {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand > .container,
+  .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand .navbar-toggler {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/conponent/_pagination.scss b/src/conponent/_pagination.scss
new file mode 100644
index 0000000..da7dadf
--- /dev/null
+++ b/src/conponent/_pagination.scss
@@ -0,0 +1,28 @@
+.page-link  {
+  background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%);
+}
+
+.page-link, .page-item .disabled {
+  text-align: center;
+  color: $white1;
+  padding: 8px 20px;
+  font-size: 28px;
+  border-bottom: solid 2px $suwa03;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s;
+  margin: auto;
+}
+
+.page-link > a { color: $white1; }
+
+.page-link > a:hover { text-decoration: none; }
+
+.page-link:hover {
+  color: $white1;
+  background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%);
+}
+
+.page-item.disabled > .page-link { color: $white1; background: linear-gradient(to bottom, $black3 0%, $grey4 34%, $grey5 100%); border-color: $suwa04; }
+.page-item.active > .page-link { color: $white1; background: linear-gradient(to bottom, $suwa04 0%, $suwa04 34%, $suwa06 100%); border-color: $suwa04; }
+.page-item.active > .page-link:hover { color: $white1; background: linear-gradient(to bottom, $suwa03 0%, $suwa00 34%, $suwa02 100%); }
+.pagination { display: flex; margin: auto; padding: 8px; }
\ No newline at end of file
diff --git a/src/conponent/_scroll.scss b/src/conponent/_scroll.scss
new file mode 100644
index 0000000..58ac57e
--- /dev/null
+++ b/src/conponent/_scroll.scss
@@ -0,0 +1,5 @@
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-thumb { background: $suwa03; transition: background 0.3s; }
+::-webkit-scrollbar-thumb:hover { background: $suwa01; }
+::-webkit-scrollbar-thumb:active { background: $suwa08; }
+::-webkit-scrollbar-track { background-color: $white1; background: $black1; }
\ No newline at end of file
diff --git a/src/conponent/_table.scss b/src/conponent/_table.scss
new file mode 100644
index 0000000..bb5c7d8
--- /dev/null
+++ b/src/conponent/_table.scss
@@ -0,0 +1,29 @@
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: $white1;
+  background-color: $black3;
+  border: 2px solid $suwa03;
+  transition: background-color 0.3s;
+}
+.table tbody + tbody { border-top: 2px solid $white1; }
+.table th, .table td, .table thead th { padding: 0.75rem; border-color: $suwa03; }
+.table th, .table td { border-top: 1px solid $white1; vertical-align: top; }
+.table thead th { border-bottom: 2px solid $white1; vertical-align: bottom; }
+.table tbody tr { transition: background-color 0.3s; background-color: $black3; }
+.table tbody tr:hover { color: $white1; background-color: $suwa07; }
+// .table.table-hover tbody tr {
+//   transition: background-color 0.3s;
+//   background-color: $black3;
+// }
+// .table.table-hover tbody tr:hover {
+//   color: $white1;
+//   background-color: $suwa07;
+// }
+
+.tres {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
new file mode 100644
index 0000000..6e9fb36
--- /dev/null
+++ b/src/main.scss
@@ -0,0 +1,21 @@
+/*!
+ * Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
+ * Made By テクニカル諏訪子 (TechnicalSuwako)
+ * Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
+*/
+@import "colour/fumei";
+
+@import "conponent/app";
+@import "conponent/badge";
+@import "conponent/button";
+@import "conponent/check";
+@import "conponent/comments";
+@import "conponent/contents";
+@import "conponent/form";
+@import "conponent/grid";
+@import "conponent/logo";
+@import "conponent/modal";
+@import "conponent/navbar";
+@import "conponent/pagination";
+@import "conponent/scroll";
+@import "conponent/table";
\ No newline at end of file
diff --git a/src/main_f.scss b/src/main_f.scss
new file mode 100644
index 0000000..cfbd488
--- /dev/null
+++ b/src/main_f.scss
@@ -0,0 +1,21 @@
+/*!
+ * Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
+ * Made By テクニカル諏訪子 (TechnicalSuwako)
+ * Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
+*/
+@import "colour/josei";
+
+@import "conponent/app";
+@import "conponent/badge";
+@import "conponent/button";
+@import "conponent/check";
+@import "conponent/comments";
+@import "conponent/contents";
+@import "conponent/form";
+@import "conponent/grid";
+@import "conponent/logo";
+@import "conponent/modal";
+@import "conponent/navbar";
+@import "conponent/pagination";
+@import "conponent/scroll";
+@import "conponent/table";
\ No newline at end of file
diff --git a/src/main_m.scss b/src/main_m.scss
new file mode 100644
index 0000000..237528c
--- /dev/null
+++ b/src/main_m.scss
@@ -0,0 +1,21 @@
+/*!
+ * Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
+ * Made By テクニカル諏訪子 (TechnicalSuwako)
+ * Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
+*/
+@import "colour/dansei";
+
+@import "conponent/app";
+@import "conponent/badge";
+@import "conponent/button";
+@import "conponent/check";
+@import "conponent/comments";
+@import "conponent/contents";
+@import "conponent/form";
+@import "conponent/grid";
+@import "conponent/logo";
+@import "conponent/modal";
+@import "conponent/navbar";
+@import "conponent/pagination";
+@import "conponent/scroll";
+@import "conponent/table";
\ No newline at end of file