diff --git a/app/css/master.css b/app/css/master.css
index 759ae103..75ae1f8e 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -5,10 +5,12 @@ body {
 	overflow: hidden;
 	user-select: none;
 	cursor: default;
-	font-size: 13px;
 	height: 100vh;
 	color: var(--color);
 }
+html {
+	font-size: 13px;
+}
 .titlebar,
 .menubar-menu-container,
 .action-menu-item {
@@ -20,7 +22,8 @@ body {
 	filter: brightness(80%) !important;
 }
 .btn {
-	margin: 5px;
+	font-size: 1.1rem;
+	margin: 0.4rem;
 	text-transform: none;
 }
 .markdown {
@@ -89,7 +92,7 @@ option {
 }
 .badge {
 	min-width: 0 !important;
-	margin-left: 5px !important;
+	margin-left: 0.4rem !important;
 }
 .unvisible {
 	opacity: 0;
@@ -163,16 +166,16 @@ pre {
 	display: block;
 	border-left: 5px solid;
 	border-color: #079903;
-	padding-left: 10px;
-	margin-top: 5px;
-	margin-bottom: 5px;
-	margin-left: 5px;
+	padding-left: 0.75rem;
+	margin-top: 0.75rem;
+	margin-bottom: 0.75rem;
+	margin-left: 0.75rem;
 	background-color: #000;
 	padding: 1em 1em 1em;
 	position: relative;
-	border-top-left-radius: 10px;
-	border-bottom-right-radius: 10px;
-	border-bottom-left-radius: 10px;
+	border-top-left-radius: 0.75rem;
+	border-bottom-right-radius: 0.75rem;
+	border-bottom-left-radius: 0.75rem;
 }
 blockquote,
 .quote p {
@@ -184,9 +187,9 @@ blockquote,
 	background-color: #ddd;
 	padding: 1em 1em 1em;
 	position: relative;
-	border-top-left-radius: 10px;
-	border-bottom-right-radius: 10px;
-	border-bottom-left-radius: 10px;
+	border-top-left-radius: 0.75rem;
+	border-bottom-right-radius: 0.75rem;
+	border-bottom-left-radius: 0.5rem;
 }
 blockquote:before,
 .quote:before {
@@ -204,9 +207,9 @@ blockquote:before,
 	background-color: #fff;
 	padding: 1em 1em 1em;
 	position: relative;
-	border-top-left-radius: 10px;
-	border-bottom-right-radius: 10px;
-	border-bottom-left-radius: 10px;
+	border-top-left-radius: 0.75rem;
+	border-bottom-right-radius: 0.75rem;
+	border-bottom-left-radius: 0.75rem;
 	border-left: 5px solid #0096fa;
 }
 .pixiv-post :before {
@@ -223,7 +226,7 @@ blockquote:before,
 	display: none;
 	position: fixed;
 	width: 100vw;
-	height: calc(100vh - 40px);
+	height: calc(100vh - 3rem);
 	background-color: var(--bg);
 	color: var(--color);
 	z-index: 99999;
@@ -318,7 +321,7 @@ blockquote:before,
 }
 .font {
 	font-size: 1.5rem;
-	margin-bottom: 5px;
+	margin-bottom: 0.4rem;
 }
 .font:hover {
 	background-color: #999;
@@ -339,9 +342,9 @@ blockquote:before,
 	width: 540px;
 	top: calc(50% - 150px);
 	left: calc(50% - 250px);
-	padding: 5px;
+	padding: 0.4rem;
 	border: thin solid gray;
-	border-radius: 5px;
+	border-radius: 0.4rem;
 	overflow: hidden;
 }
 #menu-wrapper {
@@ -351,12 +354,12 @@ blockquote:before,
 	overflow: hidden;
 }
 #left-menu {
-	width: 230px;
+	width: 17.7rem;
 }
 #left-menu a {
-	padding-left: 5px;
+	padding-left: 0.4rem;
 	width: 100%;
-	height: 50px;
+	height: 3rem;
 	display: flex;
 	align-items: center;
 	cursor: pointer;
@@ -366,7 +369,7 @@ blockquote:before,
 	background-color: var(--beforehover);
 }
 #left-menu span {
-	margin-left: 5px;
+	margin-left: 0.4rem;
 }
 #left-menu a.active {
 	background-color: var(--emphasized);
@@ -375,7 +378,7 @@ blockquote:before,
 	width: 100%;
 	overflow-y: scroll;
 	overflow-x: hidden;
-	padding: 5px;
+	padding: 0.4rem;
 }
 #tltype {
 	display: flex;
@@ -385,13 +388,13 @@ blockquote:before,
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	width: 170px;
-	height: 40px;
+	width: 13rem;
+	height: 3.1rem;
 	cursor: pointer;
 	color: var(--color);
 }
 #tltype .type span {
-	width: calc(100% - 30px);
+	width: calc(100% - 2.3rem);
 }
 #tltype .type:hover {
 	background-color: var(--beforehover);
@@ -400,28 +403,28 @@ blockquote:before,
 	background-color: var(--emphasized);
 }
 #tltype i {
-	font-size: 30px;
+	font-size: 2.3rem;
 }
 #tltype i.sub-icon {
-	font-size: 20px;
+	font-size: 1.53rem;
 	position: absolute;
 	color: var(--beforehover);
-	left: 10px;
-	bottom: 5px;
+	left: 0.9rem;
+	bottom: 0.4rem;
 	background-color: #fff;
 }
 .drag-bar {
 	cursor: move;
 	text-align: center;
-	width: calc(100% + 10px);
+	width: calc(100% + 0.8rem);
 	border-radius: 5px;
 	background-color: var(--box);
 	filter: brightness(80%);
-	margin-left: -5px;
-	margin-right: -5px;
-	margin-top: -5px;
-	font-size: 16px;
-	padding: 4px;
+	margin-left: -0.4rem;
+	margin-right: -0.4rem;
+	margin-top: -0.4rem;
+	font-size: 1.3rem;
+	padding: 0.3rem;
 }
 #something-wrong {
 	flex-direction: column;
@@ -438,10 +441,10 @@ blockquote:before,
 	width: 100vw;
 	background-color: var(--box);
 	z-index: 9999;
-	padding: 10px;
+	padding: 0.8rem;
 	display: grid;
 	grid-template-columns: 3fr 1fr 1fr;
-	grid-template-rows: 1fr 36px;
+	grid-template-rows: 1fr 2.7rem;
 	grid-template-areas: 'note middle right' 'note close close';
 }
 #support-btm-en,
@@ -458,7 +461,7 @@ blockquote:before,
 	grid-area: close;
 }
 .select-wrapper .dropdown-content {
-	width: 250px !important;
+	width: 19.2rem !important;
 }
 input,
 textarea {
@@ -474,7 +477,7 @@ textarea {
 	color: var(--color) !important;
 }
 #src-contents svg {
-	margin-right: 5px;
+	margin-right: 0.4rem;
 }
 .contributor {
 	cursor: pointer;
@@ -484,11 +487,11 @@ textarea {
 }
 .tagComp {
 	display: grid;
-	grid-template-columns: 60px 80px 1fr;
+	grid-template-columns: 4.6rem 6.15rem 1fr;
 	grid-template-rows: 1fr 1fr;
 	grid-template-areas: 'svg toot user' 'svg toot tag' 'svg toots tag';
 	border-top: dotted 0.5px var(--gray);
-	padding: 5px;
+	padding: 0.4rem;
 }
 .tagCompSvg {
 	grid-area: svg;
@@ -506,7 +509,7 @@ textarea {
 }
 .tagCompTag {
 	grid-area: tag;
-	padding-top: 10px;
+	padding-top: 0.4rem;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -517,15 +520,15 @@ textarea {
 #pageSrc {
 	position: absolute;
 	top: 0;
-	left: calc(50vw - 150px);
-	width: 300px;
+	left: calc(50vw - 11.53rem);
+	width: 23rem;
 	max-width: 100%;
 	background-color: var(--box);
 	z-index: 501;
-	padding: 5px;
+	padding: 0.4rem;
 }
 #pageSrcInput {
-	width: 160px;
+	width: 12.3rem;
 }
 .voice {
 	clip: rect(1px, 1px, 1px, 1px);
@@ -576,7 +579,7 @@ textarea {
 	font-family: 'Material Icons';
 	font-weight: normal;
 	font-style: normal;
-	font-size: 24px;
+	font-size: 1.84rem;
 	line-height: 1;
 	letter-spacing: normal;
 	text-transform: none;
diff --git a/app/css/post.css b/app/css/post.css
index fdcc2f62..0d1132d6 100644
--- a/app/css/post.css
+++ b/app/css/post.css
@@ -1,145 +1,148 @@
 /*トゥートボックス向けCSS*/
 #post-box {
-  display: none;
-  position: fixed;
-  left: calc(50vw - 150px);
-  top: 50vh;
-  background-color: var(--postbox);
-  border: thin solid gray;
-  z-index: 501;
-  max-width: 100%;
-  padding: 5px;
-  border-radius: 5px;
-  overflow: hidden;
+	display: none;
+	position: fixed;
+	left: calc(50vw - 150px);
+	top: 50vh;
+	background-color: var(--postbox);
+	border: thin solid gray;
+	z-index: 501;
+	max-width: 100%;
+	padding: 0.4rem;
+	border-radius: 0.4rem;
+	overflow: hidden;
 }
 textarea {
-  min-height: 100px !important;
-  font-family: inherit;
+	min-height: 7.7rem !important;
+	font-family: inherit;
 }
-#post-box .ui-resizable-s, #post-box .ui-resizable-se{
-  display: none !important;
+#post-box .ui-resizable-s,
+#post-box .ui-resizable-se {
+	display: none !important;
 }
 
 .cancel {
-  font-size: 0.5rem;
-  color: gray;
-  cursor: pointer;
-  position: absolute;
-  right: 2px;
-  top: 4px;
+	font-size: 0.5rem;
+	color: gray;
+	cursor: pointer;
+	position: absolute;
+	right: 2px;
+	top: 4px;
 }
 .more-show {
-  display: none;
+	display: none;
 }
 #drag {
-  width: 100%;
-  height: 100px;
+	width: 100%;
+	height: 100px;
 }
 #post-btn {
-  display: none;
+	display: none;
 }
 #vis {
-  text-transform: capitalize;
+	text-transform: capitalize;
 }
 #cw-text {
-  display: none;
+	display: none;
 }
 #sch-box {
-  display: none;
+	display: none;
 }
 #sch-box input {
-  width: auto;
+	width: auto;
 }
 .picker__close,
 .picker__today,
 .picker__clear {
-  color: #26a69a !important;
+	color: #26a69a !important;
 }
 .cw {
-  display: none;
+	display: none;
 }
 .sensitive {
-  filter: blur(50px);
+	filter: blur(50px);
 }
 #emoji {
 }
 #suggest {
-  max-height: 300px;
-  overflow-y: scroll;
+	max-height: 23rem;
+	overflow-y: scroll;
 }
 #emoji-list {
-  width: 100%;
-  height: 200px;
-  overflow-y: scroll;
+	width: 100%;
+	height: 15.4rem;
+	overflow-y: scroll;
 }
 #preview-field {
-  display: none;
+	display: none;
 }
 .preview-img {
-  width: 50px;
-  max-height: 100px;
+	width: 4rem;
+	max-height: 7.6rem;
 }
 .pi-wrap {
-  display: inline-block;
-  width: 50px;
-  max-height: 100px;
+	display: inline-block;
+	width: 3.8rem;
+	max-height: 7.7rem;
 }
 #default-emoji a {
-  color: var(--color);
-  margin-right: 2px;
+	color: var(--color);
+	margin-right: 0.15rem;
 }
 .character-counter {
-  position: relative;
-  top: -25px;
+	position: relative;
+	top: -1.9rem;
 }
 .trendtag {
-  overflow-y: scroll;
-  max-height: 100px;
+	overflow-y: scroll;
+	max-height: 7.7rem;
 }
 #toot-btn-field {
-  display: flex;
+	display: flex;
 }
 #toot-post-btn {
-  width: calc(100% - 10px);
-  padding: 0;
-  margin-top: 10px;
+	width: calc(100% - 0.7rem);
+	padding: 0;
+	margin-top: 0.7rem;
+	height: 2.7rem;
 }
 #toot-sec-btn {
-  width: 30px;
-  padding: 0;
-  margin-top: 10px;
+	width: 2.3rem;
+	padding: 0;
+	margin-top: 0.7rem;
 }
 #left-side {
-  float: left;
-  overflow-x: hidden;
-  height: calc(100% - 32px);
+	float: left;
+	overflow-x: hidden;
+	height: calc(100% - 2.5rem);
 }
 #right-side {
-  display: none;
-  float: left;
-  width: 300px;
-  padding: 5px;
-  overflow-x: hidden;
-  height: calc(100% - 32px);
+	display: none;
+	float: left;
+	width: 23rem;
+	padding: 0.4rem;
+	overflow-x: hidden;
+	height: calc(100% - 2.5rem);
 }
-#posttgl,#toot-post-btn {
-  background-color: var(--accentbtn);
-  color: var(--color);
+#posttgl,
+#toot-post-btn {
+	background-color: var(--accentbtn);
+	color: var(--color);
 }
 /*mini*/
 .mini-post .mize {
-  display: none !important;
+	display: none !important;
 }
 .mini-post #textarea {
-  padding: 0;
+	padding: 0;
 }
 .mini-post #post-box {
-  width: 200px;
-  min-width: 100px;
+	width: 15.4rem;
+	min-width: 7.7rem;
 }
 .mini-post #toot-field {
-  padding: 0;
+	padding: 0;
 }
 .mini-post #toot-btn-field {
-  padding: 0;
+	padding: 0;
 }
diff --git a/app/css/sort.css b/app/css/sort.css
index a6a0f071..1710a976 100644
--- a/app/css/sort.css
+++ b/app/css/sort.css
@@ -3,29 +3,29 @@
   cursor: move;
   user-select: none;
   background-color: var(--modalfooter);
-  margin: 5px;
-  border-radius: 5px;
+  margin: 0.4rem;
+  border-radius: 0.4rem;
   color: var(--color);
   padding: 3px;
   display: grid;
-  grid-template-columns: 43px 1fr 60px;
+  grid-template-columns: 3.3rem 1fr 4.6rem;
   grid-template-areas: "sorticon sorttitle sorttitle" "sorticon sortacct sortaction";
 }
 .sorticon {
   grid-area: sorticon;
 }
 .sorticon i {
-  font-size: 43px;
+  font-size: 3.3rem;
 }
 .sorttitle {
-  margin-left: 5px;
+  margin-left: 0.4rem;
   grid-area: sorttitle;
 }
 .sortacct {
-  margin-left: 5px;
+  margin-left: 0.4rem;
   grid-area: sortacct;
 }
 .sortaction {
-  margin-left: 5px;
+  margin-left: 0.4rem;
   grid-area: sortaction;
 }
diff --git a/app/css/tl.css b/app/css/tl.css
index 776886d6..2e962dea 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -1,7 +1,7 @@
 /*TL CSS(ただしBBCode pulse:master.css/spin:font-awesome*/
 #main {
 	width: 100vw;
-	height: calc(100vh - 40px);
+	height: calc(100% - 3rem);
 }
 #timeline-container {
 	overflow-x: scroll;
@@ -11,18 +11,19 @@
 }
 #bottom {
 	position: absolute;
+	overflow: hidden;
 	bottom: 0;
 	width: 100vw;
-	height: 40px;
-	padding: 3px;
+	height: 3rem;
+	padding: 0.23rem;
 	padding-right: 0;
-	padding-left: 40px;
+	padding-left: 3rem;
 	background-color: var(--sidebar);
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 	z-index: 500;
-	box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0.77rem 0 0.77rem, 0.77rem rgba(0, 0, 0, 0.2);
 }
 #demobottom {
 	width: 500px;
@@ -30,24 +31,24 @@
 }
 #bottom.reverse {
 	padding-left: 0;
-	padding-right: 40px;
+	padding-right: 3rem;
 }
 .reverse {
 	flex-direction: row-reverse;
 }
 #bottom #dambox {
-	width: 300px;
-	margin-right: 10px;
+	width: 23rem;
+	margin-right: 0.76rem;
 }
 #bottom.reverse #dambox {
 	margin-right: 0;
 }
 #bottom .trendtag {
-	height: 40px;
+	height: 3rem;
 }
 #bottom #group,
 #demogroup {
-	margin-right: 40px;
+	margin-right: 3rem;
 }
 #bottom .leftside {
 	display: flex;
@@ -57,41 +58,41 @@
 	align-items: center;
 }
 #bottom #tips img {
-	vertical-align: -3px;
+	vertical-align: -0.23rem;
 }
 #bottom a,
 #demogroup a {
 	color: var(--color);
 }
 #bottom i {
-	font-size: 30px;
+	font-size: 2.3rem;
 }
 .exc-icons {
-	font-size: 20px;
+	font-size: 1.53rem;
 }
 .exc-chb {
-	padding-left: 24px !important;
+	padding-left: 1.84rem !important;
 }
 .btnsgroup {
 	border: 1px solid;
 	padding-top: 1px;
-	padding-left: 5px;
-	padding-right: 5px;
-	margin-right: 15px;
-	border-radius: 5px;
-	height: 35px;
+	padding-left: 0.4rem;
+	padding-right: 0.4rem;
+	margin-right: 1.15rem;
+	border-radius: 0.4rem;
+	height: 2.7rem;
 }
 .bgReport {
-	height: 34px;
+	height: 2.61rem;
 	padding-top: 0.45rem;
 	text-decoration: underline;
-	padding-left: 5px;
-	padding-right: 5px;
+	padding-left: 0.4rem;
+	padding-right: 0.4rem;
 }
 #spot-box {
 	display: grid;
-	grid-template-columns: 40px 30px 2.5fr 1fr 60px;
-	grid-template-rows: 22px 20px;
+	grid-template-columns: 3rem 2.3rem 2.5fr 1fr 4.6rem;
+	grid-template-rows: 1.7rem 1.5rem;
 	grid-template-areas: 'cover name name artist refresh' 'cover progress progress progress time';
 }
 #spot-refresh {
@@ -105,14 +106,14 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	line-height: 25px;
+	line-height: 1.92rem;
 }
 #spot-artist {
 	grid-area: artist;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	line-height: 25px;
+	line-height: 1.92rem;
 }
 #spot-img {
 	width: 90%;
@@ -126,7 +127,7 @@
 }
 .btnsgroup .grouptitle {
 	font-family: Open Sans;
-	font-size: 15px;
+	font-size: 1.1rem;
 }
 @media screen and (max-width: 890px) {
 	.btnsgroup .grouptitle {
@@ -140,7 +141,7 @@
 iframe,
 .cvo video {
 	max-width: 100%;
-	max-height: 300px;
+	max-height: 23rem;
 }
 @media screen and (max-width: 600px) {
 	.mobile #timeline-container {
@@ -156,12 +157,12 @@ iframe,
 }
 .box {
 	overflow: hidden;
-	min-width: 300px;
+	min-width: 23rem;
 	flex: 1;
 	border-top: none;
 	display: flex;
 	flex-direction: column;
-	margin-bottom: -10px;
+	margin-bottom: -0.75rem;
 }
 .img_FTL {
 	display: none;
@@ -215,16 +216,16 @@ iframe,
 }
 .emoji,
 .emoji-img {
-	width: 15px;
+	width: 1.153rem;
 }
 .area-toot .emoji,
 .area-toot .emoji-img {
-	width: 20px;
+	width: 1.538rem;
 	vertical-align: middle;
 	margin: -1px 0;
 }
 .bigemoji {
-	width: 100px !important;
+	width: 7.7rem !important;
 	height: auto !important;
 	position: relative;
 	z-index: 9999;
@@ -253,13 +254,13 @@ iframe,
 }
 .cvo {
 	user-select: text;
-	padding-left: 5px;
+	padding-left: 0.4rem;
 	border-bottom: 0.5px solid;
-	padding-right: 2px;
+	padding-right: 0.15rem;
 	word-break: break-word;
 	width: 100%;
 	display: grid;
-	grid-template-columns: 43px 2fr 1fr;
+	grid-template-columns: 3.3rem 2fr 1fr;
 	grid-template-rows: auto 1.6rem 1fr auto 2.5rem;
 	grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space toot toot' 'space additional additional' 'vis actions side';
 }
@@ -285,21 +286,21 @@ iframe,
 }
 
 .area-notice {
-	margin: 2px;
+	margin: 0.15rem;
 	grid-area: notice;
 }
 
 .area-icon {
-	width: 40px;
-	margin: 2px;
+	width: 3rem;
+	margin: 0.15rem;
 	grid-area: icon;
 }
 
 .area-display_name {
 	user-select: text;
 	height: 1.5em;
-	margin: 2px;
-	margin-left: 5px;
+	margin: 0.15rem;
+	margin-left: 0.4rem;
 	overflow: hidden;
 	grid-area: display_name;
 	white-space: nowrap;
@@ -310,7 +311,7 @@ iframe,
 	flex-wrap: nowrap;
 }
 .flex-name {
-	max-width: calc(100% - 60px);
+	max-width: calc(100% - 4.6rem);
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -318,9 +319,9 @@ iframe,
 .area-toot {
 	cursor: text;
 	user-select: auto;
-	margin-top: 5px;
-	margin-bottom: 5px;
-	margin-left: 5px;
+	margin-top: 0.4rem;
+	margin-bottom: 0.4rem;
+	margin-left: 0.4rem;
 	grid-area: toot;
 }
 
@@ -353,7 +354,7 @@ iframe,
 .area-actions {
 	padding: 0;
 	margin: 0;
-	top: -5px;
+	top: -0.4rem;
 	position: relative;
 	display: flex;
 	justify-content: space-around;
@@ -361,28 +362,28 @@ iframe,
 	grid-area: actions;
 }
 .area-vis {
-	margin: 2px;
+	margin: 0.4rem;
 	grid-area: vis;
 	text-align: center;
 }
 .area-side {
 	display: flex;
-	top: -5px;
+	top: -0.4rem;
 	position: relative;
 	justify-content: flex-end;
-	margin: 2px;
+	margin: 0.15rem;
 	grid-area: side;
 }
 
 .cusr {
 	user-select: text;
-	padding-left: 5px;
+	padding-left: 0.4rem;
 	border-bottom: 0.5px solid;
-	padding-right: 2px;
+	padding-right: 0.15rem;
 	word-break: break-word;
 	width: 100%;
 	display: grid;
-	grid-template-columns: 43px 2fr 1fr;
+	grid-template-columns: 3.3rem 2fr 1fr;
 	grid-template-rows: auto 1.6rem 2fr auto;
 	grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space status status' 'space actions actions';
 }
@@ -391,12 +392,12 @@ iframe,
 	grid-area: status;
 	display: flex;
 	flex-wrap: wrap;
-	margin-bottom: 5px;
+	margin-bottom: 0.75rem;
 }
 
 .cusr .cbadge {
-	margin-top: 6px;
-	margin-left: 6px;
+	margin-top: 0.46rem;
+	margin-left: 0.46rem;
 }
 
 .quote-inline {
@@ -404,16 +405,16 @@ iframe,
 }
 .quote-renote {
 	display: grid;
-	grid-template-columns: 43px 2fr 25px;
+	grid-template-columns: 3.3rem 2fr 1.92rem;
 	grid-template-areas: 'ricon ruser rdet' 'ricon rtext rdet';
 	border: 1px solid;
-	margin-top: 3px;
+	margin-top: 0.23rem;
 	padding: 1px;
-	border-radius: 3px;
+	border-radius: 0.23rem;
 }
 .renote-icon {
 	grid-area: ricon;
-	padding: 5px;
+	padding: 0.4rem;
 }
 .renote-details {
 	grid-area: rdet;
@@ -432,17 +433,17 @@ iframe,
 	color: var(--color);
 }
 .area-side i {
-	margin-left: 10px;
+	margin-left: 0.75rem;
 }
 .viabadge {
-	margin-top: 10px;
+	margin-top: 0.75rem;
 }
 .action i {
 	font-size: 1.2rem;
-	margin-right: 2px;
+	margin-right: 0.15rem;
 }
 .action .fa-quote-right {
-	margin-top: 2px;
+	margin-top: 0.15rem;
 }
 .actct {
 	color: var(--beforehover);
@@ -461,24 +462,24 @@ iframe,
 	position: fixed;
 	background-color: var(--box);
 	z-index: 9999;
-	border-radius: 5px;
-	padding: 5px;
+	border-radius: 0.4rem;
+	padding: 0.4rem;
 }
 .contextMenu.bottom:before {
 	content: '';
 	position: absolute;
 	top: 100%;
-	right: 27px;
-	border: 15px solid transparent;
-	border-top: 15px solid var(--box);
+	right: 2rem;
+	border: 1.2rem solid transparent;
+	border-top: 1.2rem solid var(--box);
 }
 .contextMenu.top:before {
 	content: '';
 	position: absolute;
-	top: -30px;
-	right: 27px;
-	border: 15px solid transparent;
-	border-bottom: 15px solid var(--box);
+	top: -2.3rem;
+	right: 2rem;
+	border: 1.5rem solid transparent;
+	border-bottom: 1.5rem solid var(--box);
 }
 .contextMenu .btn-flat {
 	text-transform: none !important;
@@ -501,26 +502,26 @@ iframe,
 }
 .toot img:not(.emoji-img) {
 	max-width: 100%;
-	max-height: 300px;
+	max-height: 23rem;
 }
 .cbadge {
 	display: inline-block;
-	min-width: 10px;
-	max-width: 100px;
-	padding: 3px 7px;
+	min-width: 0.76rem;
+	max-width: 7.7rem;
+	padding: 0.23rem 0.5rem;
 	font-size: 0.8em;
-	margin-right: 5px;
+	margin-right: 0.4rem;
 	line-height: 1;
 	color: #fff;
 	text-align: center;
 	white-space: nowrap;
 	vertical-align: middle;
 	background-color: #777;
-	border-radius: 10px;
+	border-radius: 0.75rem;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	height: calc(0.8em + 8px);
+	height: calc(0.8em + 0.6rem);
 	user-select: none;
 }
 .cbadge-hover {
@@ -534,10 +535,10 @@ iframe,
 p {
 	margin: 0;
 	margin-bottom: 0px;
-	line-height: 20px;
+	line-height: 1.53rem;
 }
 p:not(:last-child) {
-	margin-bottom: 10px;
+	margin-bottom: 0.76rem;
 }
 .shared {
 	background-color: var(--shared);
@@ -553,14 +554,14 @@ p:not(:last-child) {
 	background-color: var(--notfbox);
 	filter: brightness(110%);
 	position: relative;
-	margin-right: 10px;
+	margin-right: 0.7rem;
 	width: 100%;
-	min-height: 60px;
+	min-height: 4.6rem;
 	z-index: 500;
-	padding: 5px;
+	padding: 0.4rem;
 	display: grid;
-	grid-template-columns: 40px 65px 1fr 24px;
-	grid-template-rows: 30px 30px;
+	grid-template-columns: 3rem 5rem 1fr 1.8rem;
+	grid-template-rows: 2.3rem 2.3rem;
 	grid-template-areas: 'notice notice_name notice_name a2' 'notice a1 sta a3' 'notf-box notf-box notf-box notf-box';
 }
 .emp {
@@ -604,8 +605,8 @@ p:not(:last-child) {
 }
 #tools {
 	position: fixed;
-	top: 10px;
-	right: 10px;
+	top: 0.76rem;
+	right: 0.76rem;
 	float: right;
 }
 .setting {
@@ -618,14 +619,14 @@ p:not(:last-child) {
 }
 .notf-box {
 	position: fixed;
-	right: 70px;
+	right: 5.4rem;
 	background-color: var(--box);
 	border: thin solid gray;
 	z-index: 501;
-	width: 400px;
-	padding: 5px;
-	min-height: 100px;
-	max-height: 500px;
+	width: 30rem;
+	padding: 0.4rem;
+	min-height: 7.7rem;
+	max-height: 38.4rem;
 }
 .column-hide {
 	display: none;
@@ -633,17 +634,21 @@ p:not(:last-child) {
 	height: 0;
 }
 .prof-img {
-	border-radius: 3px;
+	border-radius: 0.23rem;
+	width: 3rem;
+}
+.prof-img-sml {
+	width: 1.5rem;
 }
 .notf-icon {
 	position: relative;
-	top: -20px;
-	width: 20px;
-	left: 20px;
+	top: -1.53rem;
+	width: 1.5rem;
+	left: 1.5rem;
 }
 .notf-indv-box {
 	width: 100%;
-	max-height: 400px;
+	max-height: 30.7rem;
 	overflow-y: scroll;
 	overflow-x: hidden;
 	border: thin solid gray;
@@ -676,44 +681,44 @@ p:not(:last-child) {
 .vote {
 	width: 100%;
 	border: 1px solid;
-	margin-top: 3px;
+	margin-top: 0.23rem;
 	padding: 1px;
-	border-radius: 3px;
+	border-radius: 0.23rem;
 	overflow: hidden;
 	position: relative;
 }
 .fa-2x > .emoji-img {
-	width: 36px !important;
-	height: 36px !important;
+	width: 2.3rem !important;
+	height: 2.3rem !important;
 }
 .fa-3x > .emoji-img {
-	width: 54px !important;
-	height: 54px !important;
+	width: 4.15rem !important;
+	height: 4.15rem !important;
 }
 .fa-4x > .emoji-img {
-	width: 72px !important;
-	height: 72px !important;
+	width: 4.6rem !important;
+	height: 4.6rem !important;
 }
 .fa-5x > .emoji-img {
-	width: 90px !important;
-	height: 90px !important;
+	width: 6.9rem !important;
+	height: 6.9rem !important;
 }
 #lists-user {
 	overflow-y: scroll;
 	overflow-x: hidden;
-	max-height: 200px;
+	max-height: 15.4rem;
 }
 .votebtn {
 	border: 1px solid;
 	color: var(--bg);
 	background-color: var(--beforehover);
 	cursor: pointer;
-	width: 50px;
-	padding: 2px;
+	width: 3.8rem;
+	padding: 1.5rem;
 	display: inline-block;
 	text-align: center;
-	margin-top: 5px;
-	border-radius: 10px;
+	margin-top: 0.38rem;
+	border-radius: 0.75rem;
 	transition-duration: 0.5s;
 }
 .votebtn:hover {
@@ -722,8 +727,8 @@ p:not(:last-child) {
 .leadPoll {
 	position: absolute;
 	background-color: var(--box);
-	height: 20px;
-	border-radius: 3px;
+	height: 1.5rem;
+	border-radius: 0.23rem;
 }
 .lpAnime {
 	animation-duration: 1s;
@@ -740,7 +745,7 @@ p:not(:last-child) {
 	width: 1.2rem !important;
 	position: relative;
 	top: -1px;
-	margin-left: 5px !important;
+	margin-left: 0.38rem !important;
 }
 .jump {
 	display: inline-block;
@@ -778,18 +783,18 @@ audio {
 	white-space: normal;
 }
 .cw_btn {
-	margin: 3px;
+	margin: 0.23rem;
 	background-color: var(--emphasized);
 	color: var(--color);
-	padding-left: 3px;
-	padding-right: 3px;
-	border-radius: 3px;
+	padding-left: 0.23rem;
+	padding-right: 0.23rem;
+	border-radius: 0.23rem;
 	border: 1px solid var(--color);
 	user-select: none;
 }
 .vis-data {
 	font-size: 1rem !important;
-	margin: 5px;
+	margin: 0.4rem;
 	user-select: none;
 }
 @keyframes jump {
@@ -863,29 +868,29 @@ audio {
 	display: none !important;
 }
 .announcement {
-	padding: 5px;
+	padding: 0.38rem;
 	border-bottom: 1px solid;
 }
 .announReaction {
-	width: 35px;
+	width: 2.7rem;
 	height: 1.7rem;
 	font-size: 1.1rem;
-	margin: 3px;
+	margin: 0.23rem;
 	cursor: pointer;
 	border: solid 1px;
-	padding-left: 2px;
+	padding-left: 0.15rem;
 	background-color: var(--notfbox);
-	border-radius: 2px;
+	border-radius: 0.15rem;
 }
 .announReaction img {
 	position: relative;
-	top: 3px;
+	top: 0.23rem;
 }
 .announReaction.reactioned {
 	background-color: var(--emphasized);
 }
 .announReaction.add {
-	width: 19px;
+	width: 1.46rem;
 }
 .reactionsPack {
 	display: flex;
diff --git a/app/css/userdata.css b/app/css/userdata.css
index 980c14d2..18c673c8 100644
--- a/app/css/userdata.css
+++ b/app/css/userdata.css
@@ -16,27 +16,27 @@
 }
 #his-prof {
   float: left;
-  width: 100px;
-  margin-right: 5px;
+  width: 7.7rem;
+  margin-right: 0.4rem;
 }
 .his-float {
   overflow-y: scroll;
-  padding: 5px;
+  padding: 0.4rem;
 }
 #his-float-data {
   height: 100%;
   overflow-y: hidden;
 }
 #his-leftside {
-  width: 500px;
+  width: 38.4rem;
 }
 #his-float-timeline {
-  max-width: 775px;
+  max-width: 59.6rem;
   height: 100%;
   overflow-y: hidden;
 }
 #his-basic-prof {
-  min-height: 130px;
+  min-height: 10rem;
 }
 #his-field {
   vertical-align: baseline;
@@ -51,14 +51,14 @@
   padding: 0;
   background-color: #757575;
   text-align: center;
-  padding: 5px;
+  padding: 0.4rem;
   margin-bottom: 1px;
   width: 30%;
 }
 .his-field-content {
   height: 1.5rem;
   padding: 0;
-  padding-left: 5px;
+  padding-left: 0.4rem;
 }
 .his-var-content a span.ellipsis:after {
   content: "...";
@@ -72,13 +72,13 @@
   display: inline !important;
 }
 #his-data-show {
-  margin: 20px;
-  margin-left: 50px;
-  margin-right: 50px;
+  margin: 1.5rem;
+  margin-left: 3.8rem;
+  margin-right: 3.8rem;
   background-color: var(--his-data);
-  height: calc(100% - 20px);
+  height: calc(100% - 1.5rem);
   margin-bottom: 0;
-  padding: 5px;
+  padding: 0.4rem;
 }
 #his-data-wrap {
   display: flex;
@@ -86,39 +86,39 @@
 .his-var-content {
   overflow-y: scroll;
   overflow-x: hidden;
-  height: calc(100% - 45px);
+  height: calc(100% - 3.4rem);
 }
 #my-data-nav .btn {
-  width: 140px;
+  width: 10.7rem;
 }
 .active-back {
   background-color: var(--active);
 }
 #his-name .emojione,
 #his-name .emoji-img {
-  width: 20px;
+  width: 1.538rem;
 }
 #his-plus-action .btn {
-  padding-right: 5px;
-  padding-left: 5px;
+  padding-right: 0.4rem;
+  padding-left: 0.4rem;
 }
 .tabs {
   display: flex;
 }
 .tabs .tab a {
-  padding: 8px 12px;
+  padding: 0.6rem 0.9rem;
 }
 #his-des {
-  max-height: 250px;
+  max-height: 17.7rem;
   overflow-y: scroll;
 }
 #his-sign-action {
   border: 1px solid;
-  border-radius: 5px;
+  border-radius: 0.4rem;
   display: flex;
   align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   flex-wrap: wrap;
 }
 #his-sign-action .btn {
@@ -129,7 +129,7 @@
   cursor: pointer;
 }
 #his-table{
-  max-height: 150px;
+  max-height: 11.538rem;
   overflow-y: scroll;
 }
 #his-float-blocked {
diff --git a/app/js/emoji/default-emoji.js b/app/js/emoji/default-emoji.js
index add1ebab..3285bb30 100644
--- a/app/js/emoji/default-emoji.js
+++ b/app/js/emoji/default-emoji.js
@@ -51,7 +51,7 @@ function defaultEmoji(target) {
 			emojis +
 			`${def}
             <span style="
-                width: 20px; height: 20px; display: inline-block; background-image: url('../../img/sheet.png'); background-size: 4900%;
+                width: 1.538rem; height: 1.538rem; display: inline-block; background-image: url('../../img/sheet.png'); background-size: 4900%;
                  background-position:${emoji['css']};"></span>
             </a>`
 	})
@@ -95,7 +95,7 @@ function faicon() {
 			emojis +
 			'<a onclick="emojiInsert(\'[faicon]' +
 			eje +
-			'[/faicon]\')" class="pointer white-text" style="font-size:24px"><i class="fa ' +
+			'[/faicon]\')" class="pointer white-text" style="font-size:1.8rem"><i class="fa ' +
 			emoji +
 			'"></i></a>'
 	})
diff --git a/app/js/post/status.js b/app/js/post/status.js
index 56ed2605..3104594a 100644
--- a/app/js/post/status.js
+++ b/app/js/post/status.js
@@ -430,7 +430,7 @@ function redraft(id, acct_id) {
 								$('#preview').append(
 									'<img src="' +
 										json.media_attachments[i].preview_url +
-										'" style="width:50px; max-height:100px;">'
+										'" style="width:3.8rem; max-height:7.7rem;">'
 								)
 							} else {
 								break
diff --git a/app/js/tl/misskeyparse.js b/app/js/tl/misskeyparse.js
index 32e95077..ae171939 100644
--- a/app/js/tl/misskeyparse.js
+++ b/app/js/tl/misskeyparse.js
@@ -186,7 +186,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			noticeavatar = '<a onclick="udg(\'' + toot.user.id +
 				'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg notf-icon">' +
 				'<img src="' + noticeavatar +
-				'" width="20" class="prof-img" user="' + toot.user.username +
+				'" class="prof-img prof-img-sml" user="' + toot.user.username +
 				'"></a>';
 			if (toot.type == "reply") {
 				var what = lang.lang_parse_mentioned;
@@ -773,7 +773,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'<div class="area-icon"><a onclick="udg(\'' + toot.user.id +
 			'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' +
 			'<img src="' + avatar +
-			'" width="40" class="prof-img" user="' + toot.user.username +
+			'" class="prof-img" user="' + toot.user.username +
 			'" onerror="this.src=\'../../img/loading.svg\'"></a></div>' +
 			'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 			dis_name +
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 636bb5ce..aa43423f 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -241,7 +241,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				noticeavatar = toot.account.avatar_static
 			}
 			noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="udg">
-					<img draggable="false" src="${noticeavatar}" width="20" class="notf-icon prof-img" user="${toot.account.acct}" alt="">
+					<img draggable="false" src="${noticeavatar}" class="notf-icon prof-img prof-img-sml" user="${toot.account.acct}" alt="">
 				</a>`
 			if (toot.type == 'mention') {
 				var what = lang.lang_parse_mentioned
@@ -394,7 +394,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					noticeavatar = toot.account.avatar_static
 				}
 				noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="notf-icon udg" aria-hidden="true">
-						<img draggable="false" src="${noticeavatar}" width="20" class="prof-img" 
+						<img draggable="false" src="${noticeavatar}" class="prof-img prof-img-sml" 
 							user="${toot.account.acct}" onerror="this.src=\'../../img/loading.svg\'">
 					</a>`
 				var rebtxt = lang.lang_parse_btedsimple
@@ -1286,20 +1286,19 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 				}
 				var latest = date(toot.last_status_at, 'relative')
 				if (toot.last_status_at) {
-					var latesthtml = `<div class="cbadge" style="width:100px;">Last <span class="voice">toot</span>: ${latest}</div>`
+					var latesthtml = `<div class="cbadge" style="width:7.7rem;">Last <span class="voice">toot</span>: ${latest}</div>`
 				} else {
 					var latesthtml = ''
 				}
 				templete =
 					templete +
-					`<div class="cusr" style="padding-top:5px;" user-id="${toot.id}">
+					`<div class="cusr" style="padding-top:0.4rem;" user-id="${toot.id}">
 					<div class="area-notice">${notftext}</div>
 					<div class="area-icon">
 						${udg}
 						<img
 							draggable="false"
 							src="${avatar}"
-							width="40"
 							class="prof-img"
 							user="${toot.acct}"
 							onerror="this.src='../../img/loading.svg'"
@@ -1317,10 +1316,10 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 						</div>
 					</div>
 					<div class="area-status">
-						<div class="cbadge" style="width:100px;">
+						<div class="cbadge" style="width:7.7rem;">
 							${lang.lang_status_follow}:${toot.following_count}
 						</div>
-						<div class="cbadge" style="width:100px;">
+						<div class="cbadge" style="width:7.7rem;">
 							${lang.lang_status_followers}:${toot.followers_count}
 						</div>
 						${latesthtml}
diff --git a/app/js/tl/tag.js b/app/js/tl/tag.js
index c13b1d92..a224f581 100644
--- a/app/js/tl/tag.js
+++ b/app/js/tl/tag.js
@@ -133,7 +133,7 @@ function trendTag() {
 						</span> `
 				})
 				$('#taglist').append(
-					'<div class="trendtag">アイマストドントレンドタグ<i class="material-icons pointer" onclick="trendTag()" style="font-size:12px">refresh</i>:' +
+					'<div class="trendtag">アイマストドントレンドタグ<i class="material-icons pointer" onclick="trendTag()" style="font-size:0.9rem">refresh</i>:' +
 						tags +
 						'</div>'
 				)
diff --git a/app/js/ui/layout.js b/app/js/ui/layout.js
index efc4b857..0e22ce36 100644
--- a/app/js/ui/layout.js
+++ b/app/js/ui/layout.js
@@ -28,9 +28,7 @@ function parseColumn(target, dontclose) {
 	console.log('%c Parse column', 'color:red;font-size:125%')
 	var size = localStorage.getItem('size')
 	if (size) {
-		$('#timeline-container').css('font-size', size + 'px')
-		$('.toot-reset').css('font-size', size + 'px')
-		$('.cont-series').css('font-size', size + 'px')
+		$('html').css('font-size', size + 'px')
 	}
 	if (localStorage.getItem('menu-done')) {
 		$('#fukidashi').addClass('hide')
@@ -262,11 +260,11 @@ function parseColumn(target, dontclose) {
 							<i class="fas fa-tasks exc-icons"></i>
 						</span>
 					</label> 
-					<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('${key}')">Filter</button>`
+					<button class="btn waves-effect" style="width:4.6rem; padding:0;" onclick="exclude('${key}')">Filter</button>`
 				if (checkNotfFilter(key)) {
 					exclude =
 						exclude +
-						`<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter('${key}')">
+						`<button class="btn red waves-effect" style="width:4.6rem; padding:0;" onclick="resetNotfFilter('${key}')">
 							Clear all
 						</button>`
 				}
@@ -275,7 +273,7 @@ function parseColumn(target, dontclose) {
 				notfKey = 'dummy'
 			} else if (acct.type == 'home') {
 				var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex">
-						<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:24px"></i>
+						<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:1.84rem"></i>
 						<span id="sta-bt-${key}">Off</span>
 					</a>
 					${lang.lang_layout_excludingbt}
@@ -292,7 +290,7 @@ function parseColumn(target, dontclose) {
 					var any = ''
 					var none = ''
 				}
-				if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:5px;">
+				if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:0.4rem;">
 					Base: ${name}<br>
 					<div id="tagManager-${key}">
 						all: <input type="text" id="all_tm-${key}"" value="${all}">
@@ -302,7 +300,7 @@ function parseColumn(target, dontclose) {
 					<button onclick="addTag('${key}')" class="btn waves-effect" style="width: 100%">Refresh</button>
 				</div>`
 				if_tag_btn = `<a onclick="setToggleTag('${key}')" class="setting nex" 
-				title="${lang.lang_layout_tagManager}" style="width:30px">
+				title="${lang.lang_layout_tagManager}" style="width:2.4rem">
 				<i class="material-icons waves-effect nex">note_add</i>
 				</a>`
 				unread = ''
@@ -371,7 +369,7 @@ function parseColumn(target, dontclose) {
 					<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
 						<div class="area-notice">
 							<i class="material-icons waves-effect ${isMisRed}" id="notice_icon_${key}" ${notf_attr}
-								 style="font-size:40px; padding-top:25%;" 
+								 style="font-size:3rem; padding-top:25%;" 
 								 onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)"
 							 	 title="${lang.lang_layout_gotop}" aria-hidden="true">
 							</i>
@@ -417,7 +415,7 @@ function parseColumn(target, dontclose) {
 					<div id="notifications_${notfKey}" data-notf="${notfDomain}" data-type="notf" class="notf-timeline">
 					</div>
 				</div>
-				<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
+				<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
 					${unread}
 					${exclude}${left_hold}
 					${mediaFil}<br>
@@ -779,7 +777,7 @@ function webviewParse(url, key, insert, icnsert, css) {
 	var html = `<div class="box" id="timeline_box_${key}_box" tlid="${key}" style="${css}">
 			<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
 				<div class="area-notice">
-					<i class="fab fa-twitter waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;"></i>
+					<i class="fab fa-twitter waves-effect" id="notice_icon_${key}" style="font-size:3rem; padding-top:25%;"></i>
 				</div>
 				<div class="area-notice_name tl-title">WebView('${url}')</div>
 				<div class="area-sta"></div>
@@ -795,7 +793,7 @@ function webviewParse(url, key, insert, icnsert, css) {
 				</div>
 			</div>
 			<div class="column-hide notf-indv-box z-depth-4" id="notf-box_${key}"></div>
-			<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
+			<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
 				${lang.lang_layout_headercolor}
 				<br>
 				<div id="picker_${key}" class="color-picker"></div>
@@ -833,7 +831,7 @@ function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, anim
 	var html = `<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}">
 			<div class="notice-box z-depth-2" id="menu_${key}" style="${insert} ">
 				<div class="area-notice">
-					<i class="material-icons waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;" 
+					<i class="material-icons waves-effect" id="notice_icon_${key}" style="font-size:3rem; padding-top:25%;" 
 						onclick="${type}('${key}','${dataHtml}');" title="${lang.lang_layout_gotop}"></i>
 				</div>
 				<div class="area-notice_name">
@@ -852,7 +850,7 @@ function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, anim
 					</a>
 				</div>
 			</div>
-		<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
+		<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
 			${left_hold}
 			<a onclick="mediaToggle('${key}')" class="setting nex">
 				<i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i>
diff --git a/app/js/ui/tips.js b/app/js/ui/tips.js
index bb6bce74..5589fa75 100644
--- a/app/js/ui/tips.js
+++ b/app/js/ui/tips.js
@@ -26,7 +26,7 @@ function tips(mode) {
 	if (mode == 'ver') {
 		tipsToggle()
 		$('#tips-text').html(
-			'<img src="../../img/desk.png" width="20" onclick="todo(\'TheDesk is a nice client!: TheDesk ' +
+			'<img src="../../img/desk.png" class="prof-img-sml" onclick="todo(\'TheDesk is a nice client!: TheDesk ' +
 				localStorage.getItem('ver') +
 				' git: ' +
 				gitHash +
@@ -34,7 +34,7 @@ function tips(mode) {
 				localStorage.getItem('ver') +
 				' {' +
 				gitHash.slice(0, 7) +
-				'} [<i class="material-icons" style="font-size:1.2rem;top: 3px;position: relative;">supervisor_account</i><span id="persons">1+</span>]'
+				'} [<i class="material-icons" style="font-size:1.2rem;top: 0.23rem;position: relative;">supervisor_account</i><span id="persons">1+</span>]'
 		)
 		localStorage.setItem('tips', 'ver')
 	} else if (mode == 'clock') {
@@ -117,7 +117,7 @@ function trendTagonTip() {
 						</span><br>`
 				})
 				$('#tips-text').html(
-					'<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:12px">refresh</i>:<br>' +
+					'<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:0.9rem">refresh</i>:<br>' +
 						tags +
 						'</div>'
 				)
@@ -193,8 +193,8 @@ function spotifytips() {
 				var html = `
 				<div id="spot-box">
 					<div id="spot-refresh">
-						<i class="material-icons pointer" onclick="spotifytips()" style="font-size:20px">refresh</i>
-						<i class="material-icons pointer" onclick="nowplaying('spotify');show()" style="font-size:20px">send</i>
+						<i class="material-icons pointer" onclick="spotifytips()" style="font-size:1.5rem">refresh</i>
+						<i class="material-icons pointer" onclick="nowplaying('spotify');show()" style="font-size:1.5rem">send</i>
 					</div>
 					<div id="spot-cover">
 						<img src="${img}" id="spot-img">
@@ -277,7 +277,7 @@ function clockStart() {
 		(nowTime.getMonth() + 1) +
 		'/' +
 		nowTime.getDate() +
-		'<span style="font-size:20px; font-family:Open Sans">' +
+		'<span style="font-size:1.5rem; font-family:Open Sans">' +
 		nowHour +
 		':' +
 		nowMin +
diff --git a/app/js/userdata/his-data.js b/app/js/userdata/his-data.js
index 3625493c..3016b91c 100644
--- a/app/js/userdata/his-data.js
+++ b/app/js/userdata/his-data.js
@@ -709,7 +709,7 @@ function udAdd(acct_id, id, start) {
 		.then(function(json) {
 			var fields = json;
 			for (var i = 0; i < fields.length; i++) {
-				var html = '<a href="' + fields[i].proof_url + '" target="_blank" class="cbadge teal waves-effect" style="max-width:200px;" title="' + lang.lang_hisdata_key.replace("{{set}}", escapeHTML(fields[i].provider)) + '"><i class="fas fa-key" aria-hidden="true"></i>' + escapeHTML(fields[i].provider) + ":" + escapeHTML(fields[i].provider_username) + "</a>";
+				var html = '<a href="' + fields[i].proof_url + '" target="_blank" class="cbadge teal waves-effect" style="max-width:15.4rem;" title="' + lang.lang_hisdata_key.replace("{{set}}", escapeHTML(fields[i].provider)) + '"><i class="fas fa-key" aria-hidden="true"></i>' + escapeHTML(fields[i].provider) + ":" + escapeHTML(fields[i].provider_username) + "</a>";
 				$("#his-proof-prof").append(html);
 			}
 		});
@@ -734,7 +734,7 @@ function udAdd(acct_id, id, start) {
 		})
 		.then(function(json) {
 			if (json.user.public_view) {
-				var html = '<a href="' + json.user.url + '" target="_blank" class="cbadge purple waves-effect" style="max-width:200px;" title="Notestock">Notestock</a>';
+				var html = '<a href="' + json.user.url + '" target="_blank" class="cbadge purple waves-effect" style="max-width:15.4rem;" title="Notestock">Notestock</a>';
 				$("#his-proof-prof").append(html);
 			}
 		});
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index fd0bab9f..ca44cb05 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -69,16 +69,16 @@
 					<div id="demobottom">
 						<button
 							class="btn waves-effect"
-							style="width: 300px;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);"
+							style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);"
 						>
 							<i
 								class="material-icons"
-								style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;"
+								style="position: relative; top: 0.4rem; font-size: 1.5rem; text-align: center; margin-right: 0.7rem;"
 								>edit</i
 							>@@toot@@
 						</button>
 						<div class="leftside reverse" id="demogroup">
-							<div class="btnsgroup" style="margin-left: 5px;">
+							<div class="btnsgroup" style="margin-left: 0.4rem;">
 								<a href="#" class="nex waves-effect">
 									<i class="material-icons nex big-icon" title="@@acctMan@@(Ctrl+Shift+M)"
 										>account_circle</i
@@ -138,11 +138,11 @@
 								id="acct-sel-prof"
 								title="@@showSelectProf@@(Ctrl+Shift+P)"
 								data-trans-title="post_box_prof"
-								width="24px"
+								width="1.8rem"
 							/>
 						</a>
 					</div>
-					<div class="input-field mize" style="float:left; width:calc(100% - 24px); margin-top:0;">
+					<div class="input-field mize" style="float:left; width:calc(100% - 1.8rem); margin-top:0;">
 						<select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select>
 					</div>
 					<span class="cancel">
@@ -260,7 +260,7 @@
 								>
 								<input
 									id="size"
-									style="width: calc(50% - 20px); margin: 0; height: 24px;"
+									style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
 									value="12"
 								/>px
 								<i
@@ -271,7 +271,7 @@
 								>
 								<input
 									id="colorhex"
-									style="width: calc(50% - 50px); margin: 0; height: 24px;"
+									style="width: calc(50% - 3.8rem); margin: 0; height: 1.8rem;"
 									type="color"
 								/>
 								<br />
@@ -283,12 +283,12 @@
 								>
 								<input
 									id="linkt"
-									style="width: calc(50% - 20px); margin: 0; height: 24px;"
+									style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
 									placeholder="リンクテキスト"
 								/>&nbsp;
 								<input
 									id="link2"
-									style="width: calc(50% - 20px); margin: 0; height: 24px;"
+									style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
 									placeholder="リンクアドレス"
 								/>
 								<br />
@@ -300,12 +300,12 @@
 								>
 								<input
 									id="image"
-									style="width: calc(50% - 20px); margin: 0; height: 24px;"
+									style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
 									placeholder="代替テキスト"
 								/>&nbsp;
 								<input
 									id="image2"
-									style="width: calc(50% - 20px); margin: 0; height: 24px;"
+									style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
 									placeholder="画像アドレス"
 								/>
 							</div>
@@ -383,7 +383,7 @@
 								>clear</i
 							>
 						</div>
-						<div class="col s12 mize" style="margin-bottom:5px; padding:0;">
+						<div class="col s12 mize" style="margin-bottom:0.4rem; padding:0;">
 							<div id="taglist"></div>
 							<div id="preview" class="mize"></div>
 							<span class=" sml mize"
@@ -417,7 +417,7 @@
 					</div>
 					<!-- 公開範囲 Dropdown Structure -->
 					<ul id="dropdown1" class="dropdown-content">
-						<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">
+						<li style="font-size: 1.2rem; display: block; line-height: 1.69rem; padding: 1.1rem 1.23rem;">
 							@@selectVis@@
 						</li>
 						<li>
@@ -767,7 +767,7 @@
 										<span id="his-follow"></span>
 									</span>
 									<span class="cbadge">@@follower@@: <span id="his-follower"></span> </span><br />
-									<span class="cbadge" style="max-width:150px; width:150px; "
+									<span class="cbadge" style="max-width:11.5rem; width:11.5rem; "
 										>Since:
 										<span id="his-since"></span>
 									</span>
@@ -1072,7 +1072,7 @@
 				<br />
 			</div>
 			<div class="modal-footer">
-				<div style="float: left;padding-top:3px;line-height: normal;">
+				<div style="float: left;padding-top:0.23rem;line-height: normal;">
 					<span id="imgprog"></span>% <br />
 					<span id="imgsec"></span>ms <br /><span id="imgbyte"></span>KB
 				</div>
@@ -1362,7 +1362,7 @@
 									id="noauth-url"
 									type="text"
 									class="validate"
-									style="width:calc( 70% - 40px);"
+									style="width:calc( 70% - 3rem);"
 									placeholder="e.g:mstdn.jp"
 								/>
 							</div>
@@ -1370,7 +1370,7 @@
 						</div>
 						<button
 							class="btn waves-effect blue "
-							style="width:calc( 100% - 10px);"
+							style="width:calc( 100% - 0.7rem);"
 							onclick="addColumn()"
 							data-trans-i="add"
 						>
@@ -1385,11 +1385,11 @@
 							<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
 						</div>
 						<div class="input-field">
-							<input id="src" type="text" class="validate" style="width:60%" />
+							<input id="src" type="text" class="validate" style="width:57%" />
 							<label for="src" data-trans="src">@@search@@</label>
 							<button
 								class="btn waves-effect indigo"
-								style="width: 36%;padding: 0;padding-left: 15px;"
+								style="width: 36%;padding: 0;padding-left: 1.15rem;"
 								onclick="src()"
 								data-trans-i="src"
 							>
@@ -1412,12 +1412,12 @@
 								id="dirNoAuth-url"
 								type="text"
 								class="validate"
-								style="width:calc( 70% - 40px);"
+								style="width:calc( 70% - 3rem);"
 								placeholder="e.g:mastodon.social"
 							/>
 							<button
 								class="btn waves-effect indigo"
-								style="width: 120px;padding: 0;padding-left: 15px;"
+								style="width: 9.23rem;padding: 0;padding-left: 1.15rem;"
 								onclick="directory()"
 							>
 								<i class="material-icons left" style="margin:0">search</i>@@show@@
@@ -1638,7 +1638,7 @@
 					>
 						<i
 							class="material-icons"
-							style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;"
+							style="position: relative; top: 0.38rem; font-size: 1.5rem; text-align: center; margin-right: 0.76rem;"
 							>edit</i
 						>@@toot@@
 					</button>
@@ -1676,7 +1676,7 @@
 			</div>
 			<div>
 				<div id="tips-menu">
-					<div class="btnsgroup" style="height:34px">
+					<div class="btnsgroup" style="height:2.61rem">
 						<span class="grouptitle">Tips:</span>
 						<a onclick="tips('ver')" class="nex waves-effect">
 							<i class="material-icons nex" title="@@verTips@@" data-trans-title="ver">info</i>
@@ -1708,7 +1708,7 @@
 							>bubble_chart</i
 						>
 					</a>
-					<div id="tips-text" style="width:300px;"></div>
+					<div id="tips-text" style="width:23rem;"></div>
 				</div>
 			</div>
 		</div>