body {
	width: 100%;
	height: 145vw;
	min-width: 50px;
	min-height: 145px;
	padding: 0;
	margin: 0;
	background: no-repeat url("../image/background.webp");
	background-size: 100%;
	font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}
#mainLayout {
	position: absolute;
	width: 100%;
	min-height: 127.32vw;
	background: #FFFFFF;
	opacity: 90%;
	padding: 0;
	margin: 0;
	margin-top: 17.68vw;
	z-index: 1;
}
#upperTitle {
	position: absolute;
	width: 100%;
	padding: 0.9vw 0 0.9vw 0;
	margin: 0;
	background: #FFFFFF;
	z-index: 5;
	font-size: 1.2vw;
	color: rgb(55, 53, 47);
	user-select : none;
}
#upperIcon {
	width: 1vw;
	height: 1vw;
	padding: 0;
	margin: 0;
	margin-left: 0.3vw;
	margin-right: 0.2vw;
	display: inline-block;
}
#loginPanel {
	position: absolute;
	width: 16vw;
	padding: 0.5vw;
	margin-left: 80vw;
	font-size: 1.2vw;
	display: inline-block;
	z-index: 6;
	user-select: none;
}
#loginNick {
	width: 7.5vw;
	padding: 0.4vw;
	border-radius: 0.6vw;
	display: inline-block;
	vertical-align: bottom;
}
#login, #logout {
	padding: 0.4vw;
	margin: 0;
	border-radius: 0.6vw;
	display: inline-block;
}
#loginNick:hover, #login:hover, #logout:hover {
	background: rgba(0, 0, 0, 0.1);
}
#menuPanel {
	position: absolute;
	margin: 3.4vw 0 0 79vw;
	width: 18vw;
	height: 7vw;
	z-index: 6;
	background: #FFF;
	box-shadow: 0.5vw 0.5vw 1.5vw;
	border-radius: 0.5vw;
}
#menuClose {
	position: absolute;
	width: 1vw;
	height: 1vw;
	padding: 0.3vw;
	margin: 0.3vw 0 0 15.9vw;
	border-radius: 0.3vw;
	user-select: none;
}
#menuCloseIcon {
	width: 1vw;
	height: 1vw;
	vertical-align: top;
}
#menuNick {
	margin-top: 0.6vw;
	font-size: 1.3vw;
	font-weight: 600;
}
#userBadge {
	width: 1.4vw;
	height: 1.4vw;
	margin: 0vw 0.2vw 0.1vw 1vw;
	vertical-align: bottom;
}
#menuID {
	margin: 0.1vw 0 0 2vw;
	font-size: 1.1vw;
	color: #565656;
}
#showMypage {
	width: 7.5vw;
	padding: 0.3vw 0 0.3vw 0;
	margin: 0.2vw 0 0 1.5vw;
	font-size: 1.2vw;
	color: #454545;
	text-align: center;
	border-radius: 0.5vw;
	float: left;
	user-select: none;
}
#logoutFromMenu {
	width: 7.5vw;
	padding: 0.3vw 0 0.3vw 0;
	margin-top: 0.2vw;
	font-size: 1.2vw;
	color: #454545;
	text-align: center;
	border-radius: 0.5vw;
	float: left;
	user-select: none;
}
#menuClose:hover, #showMypage:hover, #logoutFromMenu:hover {
	background: rgba(0, 0, 0, 0.1);
}
#mainTitle {
	position: absolute;
	width: 60%;
	padding: 0;
	margin: 0;
	margin-top: 21vw;
	margin-left: 20%;
	z-index: 4;
	font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 2.5vw;
	font-weight: 700;
	border-bottom: 1px solid rgb(201, 200, 195);
}
#editHomepage {
	position: absolute;
	width: 3vw;
	height: 3vw;
	padding: 0.2vw;
	margin: 0;
	margin-top: 21vw;
	margin-left: 43%;
	border-radius: 0.8vw;
	filter: invert(49%) sepia(12%) saturate(2389%) hue-rotate(167deg) brightness(94%) contrast(92%);
	content: url(../image/edit.svg);
	z-index: 4;
}
#editHomepage:hover {
	background: rgba(0, 0, 0, 0.1);
}
#changeMode {
	position: absolute;
	width: 13vw;
	height: 3vw;
	padding: 0.2vw;
	margin: 0;
	margin-top: 21vw;
	margin-left: 65%;
	font-size: 1.8vw;
	text-align: center;
	border-radius: 0.8vw;
	opacity: 0.2;
	z-index: 4;
	user-select: none;
}
#changeMode:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.1);
}
#select {
	position: absolute;
	width: 60%;
	padding: 0;
	margin: 0;
	margin-top: 26vw;
	margin-left: 20%;
	z-index: 3;
}
#contents {
	position: absolute;
	width: 60%;
	height: 102vw;
	padding: 0;
	margin: 0;
	margin-left: 20%;
	margin-top: 30vw;
	z-index: 2;
	overflow: visible;
}
#Notice, #Ranking, #PlayList, #FanOffer, #Mylist, #Now, #Help {
	width: 20%;
	padding: 0;
	padding-bottom: 0.4vw;
	margin: 0;
	font-size: 1.8vw;
	float: left;
	text-align: center;
	user-select : none;
}
#ReturnMode {
	width: 10%;
	padding-bottom: 0.4vw;
	margin: 0;
	font-size: 1.8vw;
	float: left;
	text-align: center;
	user-select : none;
}
#Notice:hover, #ReturnMode:hover, #Ranking:hover, #PlayList:hover, #FanOffer:hover, #Mylist:hover, #Now:hover, #Help:hover {
	background: rgba(0, 0, 0, 0.1);
}
#emoji {
	width: 2vw;
	height: 2vw;
	margin-left: 0.6%;
	vertical-align: middle;
}
#noticeMsg {
	width: 100%;
	min-height: 10%;
	padding: 0;
	line-height: 3vw;
	font-size: 1.5vw;
	overflow: auto;
}
#indent {
	text-indent: 0.8vw;
}
#addList {
	position: absolute;
	width: auto;
	height: 2vw;
	margin: 0;
	padding: 0 0.5w 0 0.5vw;
	font-size: 1.5vw;
	color: #FFF;
	vertical-align: center;
	border-radius: 0.3vw;
	background: #000;
	opacity: 0.7;
}
#rankList {
	width: 100%;
	height: 84vw;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#rankToList {
	width: 100%;
	height: 5vw;
	padding-top: 1vw;
	margin: 0;
	border-radius: 0.8vw;
	font-size: 3vw;
	text-align: center;
	user-select: none;
}

#rankToList:hover {
	background: rgba(0, 0, 0, 0.2);
}
#songList {
	width: 100%;
	height: 84vw;
	padding: 0;
	margin: 0;
}
#icon {
	width: 1.6vw;
	height: 1.6vw;
	vertical-align: bottom;
}
table {
	table-layout:fixed;
	width: 100%;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}
td {
	padding: 0;
	margin: 0;
	background: rgba(239, 236, 241, 0.8);
	border: 1px solid rgb(55, 53, 47);
	font-size: 1.2vw;
	word-break: break-all;
	text-align: center;
	user-select: none;
}
#keyword {
	width: 98%;
	text-indent: 1vw;
	font-size: 1.6vw;
	border: 0;
}
#keyword:focus {
	outline: none;
}
.co, .cn:hover {
	background: rgba(0, 0, 0, 0.1);
}
.ct, .co:hover {
	background: rgba(0, 0, 0, 0.2);
}
.ct:hover {
	background: rgba(0, 0, 0, 0.3);
}
#typeSelect {
	position: absolute;
	width: 11%;
	background: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	font-size: 1vw;
	z-index: 7;
	padding: 0.2vw;
	border-radius: 0 0 0.3vw 0.3vw;
	margin-left: 4.2%;
	margin-top: 0vw;
	user-select: none;
	text-align: center;
}
#checkPanel {
	display: block;
	text-align: left;
	padding: 0 0.6vw 0.2vw 0vw;
}
#checkPanel:hover {
	background:  rgba(0, 0, 0, 0.8);
}
#weakInst {
	position: absolute;
	width: 5.5%;
	background: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	font-size: 1vw;
	z-index: 6;
	padding: 0.1vw;
	padding-left: 0.4vw;
	padding-right: 0.4vw;
	border-radius: 0.2vw;
	margin-left: 84%;
	margin-top: -3vw;
	user-select: none;
	text-align: center;
}
#offerList {
	width: 100%;
	line-height: 2.8vw;
	font-size: 1.4vw;
	height: 90%;
	overflow: auto;
}
#checkList {
	width: 100%;
	min-height: 10vw;
	max-height: 90vw;
	padding: 0;
	margin: 0;
	overflow: auto;
}
#listEditor {
	width: 100%;
	height: 5vw;
	padding: 0;
	margin: 0;
	margin-top: 1vw;
	opacity: 0.2;
}
#listEditor:hover {
	opacity: 1;
}
.ib {
	display: inline-block;
}
.songPanel {
	width: auto;
	height: 2.2vw;
	padding: 0.2vw 0.6vw 0.4vw 0.7vw;
	margin: 0;
	margin-top: 1vw;
	margin-left: 1.5vw;
	font-size: 1.8vw;
	display: inline-block;
	user-select : none;
	background:  rgba(0, 0, 0, 0.05);
	border-radius: 0.6vw;
}
.songPanel:hover {
	background:  rgba(0, 0, 0, 0.1);
}
.songInput {
	width: 20vw;
	height: 2vw;
	padding: 0;
	margin: 0;
	margin-top: 1vw;
	margin-left: 1.5vw;
	font-size: 1.6vw;
}
#songEditor {
	width: 2.2vw;
	height: 2.2vw;
	padding: 0;
	margin: 0;
	display: inline-block;
}
#songDelete {
	width: 1.8vw;
	height: 1.8vw;
	padding: 0;
	margin: 0;
	margin-left: 0.3vw;
	filter: invert(41%) sepia(54%) saturate(5911%) hue-rotate(342deg) brightness(99%) contrast(93%);
	content: url(../image/delete.svg);
}
#songDelete:hover {
	background:  rgba(0, 0, 0, 0.3);
}
#submitPreferSong {
	width: 40%;
	height: 3vw;
	padding: 0;
	margin: 0;
	font-size: 2vw;
	padding-left: 1vw;
	margin-left: 5%;
	border-radius: 0.4vw;
	user-select: none;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}
#newSong {
	width: 40%;
	height: 3vw;
	padding: 0;
	margin: 0;
	font-size: 2vw;
	margin-left: 2%;
	display: inline-block;
	vertical-align: top;
}
#addSong {
	width: 3vw;
	height: 3vw;
	padding: 0;
	margin: 0;
	user-select: none;
	display: inline-block;
	border-radius: 0.5vw;
}
#searchTitleButton{
	width: 2.8vw;
	height: 2.8vw;
}
#searchList {
	width: 60%;
	height: 15vw;
	padding: 0;
	margin-left: 40%;
	user-select: none;
}
#submitPreferSong:hover {
	background: rgba(0, 0, 0, 0.1);
}
#addSong:hover {
	background: rgba(0, 0, 0, 0.1);
}
hr {
	width: 100%;
	height:1px;
	border: 0;
	background-color: rgb(201, 200, 195);
}
#songMainLayout {
	position: absolute;
	width: 100%;
	height: 160vw;
	min-width: 200px;
	min-height: 350px;
	padding: 0;
	margin: 0;
	background: #FFF;
}
#songModeSelect {
	position: absolute;
	width: 80%;
	padding: 0;
	margin: 0;
	margin-top: 5vw;
	margin-left: 5%;
	text-align: center;
	overflow: hidden;
}
#songModeContents {
	position: absolute;
	width: 90%;
	height: 140vw;
	padding: 0;
	margin: 0;
	margin-left: 5%;
	margin-top: 10vw;
	overflow: auto;
}
#status {
	width: 100%;
	height: 4vw;
	padding: 0;
	margin: 0;
	font-size: 2.5vw;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 1vw;
	user-select: none;
	overflow: hidden;
}