/* ==========================================================================
   Public -2018-11-02
============================================================================= */
@import url('https://use.fontawesome.com/releases/v5.4.0/css/all.css');
body, html { width:100%; height:100%; }

body { 
	font:24px/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#ccc;
	background-color:#222;
}

img {
	border:none;
	vertical-align:middle;
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	color:#c7ee8f;
	text-decoration:none;
}
a:hover { color:#ec77ae; }


.clearfix {
    clear: both;
    display: table;
}


/* header
---------------------------------------------------------------------------------*/
header {
	position:fixed;
	width:75px;
	height:100%;
	background:#222;
	font-size:130%;
	line-height:135%;
	text-align:center;
}
header i { color:#d10c72; }

header .name { margin:10px 15px; }

header .time {
	position:fixed;
	bottom:15px;
	left:22px;
	font-size:18px;
	line-height:21px;
	letter-spacing:0;
}

header .btn {
	line-height:19px;
	font-size:14px;
	padding:6px 10px;
}
header .btn i { font-size:22px; }




/* nav
---------------------------------------------------------------------------------*/
nav {
	position:fixed;
	top:0;
	left:0;
	width:195px;
	height:100%;
	background:#242739;
	border-left:1px solid #506782;
	border-right:1px solid #506782;
}

nav .btn {
	width:100px;
	line-height:19px;
	font-size:14px;
	padding:6px 10px;
}
nav .btn i { font-size:22px; }


.content{
	overflow:auto;
	padding:0px;
	background-color:#333;
	width:50%;
	height:auto;
	text-align:center;
}

.content li {
	position:relative;
	font-size:15px;
	overflow:hidden;
}
.content li img { width:70px; }
.content li a {	
	width:195px;
	padding:6px 0 8px 0;
	display:inline-block;
}
.content.light, .content.light .mTSButton{ background-color:#242739; }
.content.light li a { border-top:1px solid #506782; color:#ccc; }
.content.light li:nth-last-child(1) a { border-bottom:1px solid #506782; padding-bottom:6px; }


.content li .btn {
	width:85px;
	color:#FFF!important;
	line-height:19px;
	font-size:16px;
	padding:6px 10px;
	margin-bottom:5px;
}
.content li .btn i { font-size:16px; padding-right:3px; }



#content-2{
	width:auto;
	height:98%;
}
#content-2{ padding:50px 0px; }


nav .no {
	position:absolute;
	top:10px;
	right:10px;
	text-align:center;
	background:#d10c72;
	width:30px;
	height:30px;
	color:#FFF;
	font-size:20px;
	border-radius:99rem;
	letter-spacing:0!important;
}



/* content
---------------------------------------------------------------------------------*/
#p_content {
	width:100%;
	padding:30px 30px 30px 225px;
}

.title {
	font-size:130%;
	color:#8bd6d7;
	font-weight:700;
	margin-bottom:10px;
}
.title img { width:50px; padding-right:5px; vertical-align:middle; }

.list { width:100%; }
.list ul { width:100%; list-style:decimal; padding-left:30px; }
.list li { width:100%; border-bottom:#888 1px dashed; padding:15px 0; }

.list .btn { font-size:80%; padding:3px 5px; vertical-align:middle; }

.list tr { border-bottom:#888 1px dashed; }
.list td { padding:15px 0; }
.list td:nth-child(1) { font-size:120%; color:#A2FF90; width:100px; }

.day { font-size:80%; letter-spacing:0; padding-left:10px; color:#FF9600;  }
.time { color:#A2FF90; padding-right:20px; }



/* user
---------------------------------------------------------------------------------*/
.user_box {
	float:left;
	width:calc(((100vw - 275px) / 5) - 20px);
	margin:10px;
	border:#ccc 1px solid;
	background:#333;
	color:#FFF;
	text-align:center;
}
.user_box p { padding:10px 0; }

.user_photo { width:100%; height:calc((((100vw - 275px) / 5) - 20px) * 1.22); overflow:hidden; background:#333; }
.user_photo img { width:100%; }





/* btn
---------------------------------------------------------------------------------*/
.btn_g {
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #74b807;
	text-align:center;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #89c403 5%, #5d8500 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #5d8500 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#5d8500');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #5d8500) );
	background-color:#89c403;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #528009;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
}.btn_g:hover {
	color:#ffffff;
	background:-moz-linear-gradient( center top, #5d8500 5%, #89c403 100% );
	background:-ms-linear-gradient( top, #5d8500 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d8500', endColorstr='#89c403');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #5d8500), color-stop(100%, #89c403) );
	background-color:#5d8500;
}.btn_g:active {
	position:relative;
	top:1px;
}


.btn_p {
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ee1eb5;
	text-align:center;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ff87c7 5%, #c9066e 100% );
	background:-ms-linear-gradient( top, #ff87c7 5%, #c9066e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff87c7', endColorstr='#c9066e');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff87c7), color-stop(100%, #c9066e) );
	background-color:#ff87c7;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #c70067;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fbafe3;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fbafe3;
 	box-shadow:inset 1px 1px 0px 0px #fbafe3;
}.btn_p:hover {
	color:#ffffff;
	background:-moz-linear-gradient( center top, #c9066e 5%, #ff87c7 100% );
	background:-ms-linear-gradient( top, #c9066e 5%, #ff87c7 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9066e', endColorstr='#ff87c7');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c9066e), color-stop(100%, #ff87c7) );
	background-color:#c9066e;
}.btn_p:active {
	position:relative;
	top:1px;
}


.btn_g i, .btn_p i { color:#FFF; }