@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#FFF}hr{display:none}img{vertical-align:bottom}body{color:#000;background-color:#FFF;font-size:14px;-webkit-text-size-adjust:100%}select,input,button,textarea{font-size:99%}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.hd{display:block;width:0;height:0;overflow:hidden}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}*{max-height:999999px}body{font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin: 0;padding: 0;box-sizing: border-box;max-height: 999999px;outline:none;}*:focus{outline: none;}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.8;
	color: #66615b;
	background-color: #f0f1f5;
	min-width: 1280px;
	-webkit-text-size-adjust: 100%;
	word-wrap:break-word;
}
::selection {
	background: #0079e2;
	color: #fff;
}
::-moz-selection {
	background: #0079e2;
	color: #fff;
}
a { color: #66615b; }
a:hover { text-decoration: none; }
#fullWrap{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/* ▼HEADER▼ --------------------------------- 
-------------------------------------------------*/

header{
	width: 220px;
	background: #fff;
}
#headIn{
	position: fixed;
	width: 220px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	z-index: 2;
	background: #fff;
}
#headIn h1{
	width: 100%;
	height: 80px;
}
#headIn h1 a{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../../assets/img/logo.svg) no-repeat center center / 80% auto;
}
#navWrap{
	margin-bottom: 94px;
}
#howTo{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 240px;
	overflow: hidden;
}
#howToIn{
	margin-top: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	padding:20px;
	background: #fff;
}
#howTo a{
	text-decoration: none;
	display: block;
	width: 100%;
	height: 34px;
	line-height: 34px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	transition: .3s ease;
	position: relative;
	background-color: #66615b;
	border-radius: 3px;
}
#howTo a:hover{
	background-color: #000;
}
#howTo a i{ margin-right: 3px; }
#headNav > ul > li > a{
	display: block;
	text-decoration: none;
	font-weight: bold;
	width: 100%;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
	position: relative;
	transition: .3s ease;
}
#headNav > ul > li > a.acList:before{
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: bold;
	font-size: 11px;
	color: #000;
	opacity: .4;
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	transition: .3s ease;
}
ul.navInList{
	margin:10px 20px;
	background-color: #f0f1f5;
	border-radius: 3px;
	padding: 10px 0;
}
ul.navInList li{
	height: 40px; 
	line-height: 40px;
	font-weight: bold;
}
ul.navInList li.sub {
	height:40px;
	line-height:40px;
	position:relative;
}
ul.navInList li.sub:before {
	content:'-';
	padding-left:5px;
	background-color: #fff; 
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:15px;
	background: #FFF;
	z-index:15;

}
ul.navInList li a{
	text-decoration: none;
	font-size: 14px;
	padding-left: 16px;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	transition: .3s ease;
}
ul.navInList li.sub a {
	font-size:13px;
	padding-left:26px;
}
ul.navInList li a.active,
ul.navInList li a.active:after { color: #fff; opacity: 1;}
ul.navInList li a:hover{ background: #fff; }
ul.navInList li a:after{
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	font-weight: bold;
	font-size: 11px;
	color: #000;
	opacity: .4;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	transition: .3s ease;
}
ul.navInList li a:hover:after{
	right: 10px;
}
i.w_sizeI{
	display: inline-block;
	width: 24px;
	margin-left: 18px;
	text-align: center;
}
i{
	margin-right:6px;
}
#headNav{
	margin-bottom: 20px;
}
.navSubBtn{
	padding: 0 20px;
}

/* ▼RIGHT WRAP▼ --------------------------------- 
-------------------------------------------------*/

#rWrap{
	width: calc(100% - 220px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}
.rightMain:after{
	content: "";
	width: 100%;
	height:210px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#mWrap .rightMain:after{
	height:140px;
}

/*----{{ FOOTER }}----*/

footer{
	margin-top: auto;
	position: relative;
	height: 74px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}
footer #copyR{
	position: absolute;
	height: 74px;
	line-height: 74px;
	font-size: 12px;
	color: #66615b;
	right: 0;
	bottom: 0;
	padding-right: 30px;
}
#footNav > ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-left: 30px;
}
#footNav > ul li{
	height: 74px;
	line-height: 74px;
	margin-right: 26px;
}
#footNav > ul li a{
	font-size: 13px;
}

/*----{{ RIGHT-HEAD }}----*/

#rWrapHead{
	width: 100%;
	height: 70px;
	position: relative;
	z-index: 2;
}
#titleBox{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-left: 26px;
	padding-top: 20px;
}
#titleBox ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
}
#titleBox ul li{
	margin-right: 8px;
}
#titleBox ul li:last-child{
	margin-right: 0;
}
#titleBox #titleIcon{
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #5db4d6;
	border: 1px solid #fff;
}
#titleName{
	width: 340px;
	height: 40px;
	line-height: 40px;
}
#titleName span{
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 3px;
	text-decoration: none;
	padding-left: 10px;
	position: relative;
	font-size: 13px;
	font-weight: bold;
	transition: .3s ease;
}
#titleName a span:last-of-type{
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 11px;
	opacity: .8;
	transition: .3s ease;
	transform: translateX(0);
	display: block;
}
#titleName a:hover{
	background: #d8eaf9;
}
#titleName a:hover span:last-of-type{
	color: #467ef0;
	transform: translateX(5px);
}
#titleName a span:last-of-type i{
	margin-left: 5px;
}
.twBtn{
	padding: 4px 0;
	width: 100px;
	height: 40px;
}
.twBtn a{
	display: block;
	text-decoration: none;
	background-color: #00acee;
	border: 2px solid #fff;
	color: #fff;
	border-radius: 40px;
	line-height: 28px;
	width: 100%;
	height: 32px;
	padding: 0 12px;
	font-weight: 600;
	text-align: center;
	font-size: 13px;
	transition: .3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.twBtn a:hover{
	background: none;
	box-shadow: none;
}
#rWrapHeadRight{
	width: 50%;
	height: 70px;
	position: absolute;
	padding-right: 20px;
	right: 0;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
	padding-top: 20px;
}
#userName a{
	font-size: 14px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 0 16px;
	height: 40px;
	line-height: 40px;
	transition: .3s ease;
	border-radius: 3px;
}
#userName a:hover{
	background: rgba(0,0,0,.2);
}
#userName a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f107";
	font-weight: bold;
	margin-left: 11px;
}
#topicsBtn{
	width: 40px;
	height: 40px;
	margin-right: 8px;
}
#topicsBtn a{
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	position: relative;
	transition: .3s ease;
	border-radius: 3px;
}
#topicsBtn a:hover{
	background: rgba(0,0,0,.2);
}
#topicsBtn a i{
	position: absolute;
	font-size: 18px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#newTopics:before{
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 6px;
	background-color: red;
	top: 7px;
	right: 3px;
}
#updateDay{
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	height: 40px;
	line-height: 40px;
	padding: 0 16px;
	letter-spacing: 0.03em;
}

/*----{{ MAIN CONTENTS }}----*/

.rightMain{
	width: calc(100% - 60px);
	margin: 20px auto 90px;
	display: block;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.rightMain.media{
	display: none;
}
.rightMain > h2{
	color: #fff;
	font-weight: bold;
	font-size: 23px;
	letter-spacing: 0.03em;
	margin-bottom: 20px;
	width: 100%;
}
.rightMain > h2 i{
	margin-right: 12px;
	font-size: 23px;
}
.rightMain > h2 span{
	font-size: 18px;
}
#twDashboard{
	position: relative;
	width:100%;
}
.box02Cont{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-top: 30px;
}
.box02Cont .chartStyle{
	padding: 0;
	max-width: 500px;
	width: 70%;
}
.wordListWrap > h2{
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 17px;
	padding-bottom: 12px;
}
ul.tagOneList{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom:-15px;
}
ul.tagOneList li{
	font-size: 13px;
	font-weight: 600;
	padding: 3px 8px;
	color: #fff;
	border-radius: 40px;
	margin-right: 10px;
	margin-bottom:15px;
}
.twDrightArea{
	width: 280px;
	position: absolute;
	top: 0;
	right: 0;
}
.notTwitter .twDrightArea{
	width: 280px;
	position: absolute;
	top: 0;
	left: 0;
	right:auto;
}
.twDrightArea.fixed {
	width: 280px;
	position: fixed;
	top: 30px;
	right: 30px;
}
#twCover{
	height: 100px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin: -18px -18px 0;
	position: relative;
	background-color: #f0f1f5;
}
#twIcon{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 4px solid #fff;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: -35px;
	background-color: #5db4d6;
}
#twAccount{
	text-align: center;
	font-size: 13px;
	margin-top: 36px;
	margin-bottom: 20px;
}
ul#twStatus li{
	padding-bottom: 2px;
	margin-bottom: 5px;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
ul#twStatus li:last-child{
	border-bottom: none;
}
ul#twStatus li .numberName{
	float: left;
	width: 40%;
	font-size: 13px;
}
ul#twStatus li .number{
	float: right;
	width: 60%;
	font-size: 14px;
	text-align: right;
	color: #5db4d6;
}
#twSetting{
	position: absolute;
	width: 36px;
	height: 36px;
	top: 7px;
	right: 8px;
}
#twSetting a{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 36px;
	transition: .3s ease;
}
#twSetting a:hover{
	background: #c5e0f7;
}
#twSetting a span{
	transition: .3s ease;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
#twSetting a:hover span{
	transform: rotate(90deg);
}
#twSetting a i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #5db4d6;
	font-size: 17px;
}
.dHeadArea,.mainCont{
	width: calc(100% - 310px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.oneDashHead{
	width: 30%;
	min-width: 260px;
	margin-right: 20px;
}
.oneDashHead:last-of-type{
	margin-right: 0;
}
.oneDashHead > h2{
	font-size: 12px;
	font-weight: bold;
}
.oneDashHeadIn{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 10px;
}
.iconBg{
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	border-radius: 70px;
	font-size: 20px;
	margin-right: 10px;
}
.oneDashHeadNum{
	font-weight: bold;
	font-size: 24px;
	line-height: 60px;
}
.preDay{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.preDay > h2{
	font-size: 13px;
	margin-right: 10px;
}
.preDay > p{
	font-weight: bold;
	font-size: 13px;
	position: relative;
}
.preDay > p.up{
	color: red;
}
.preDay > p.down{
	color: blue;
}
.preDay > p:after{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	margin-left: 5px;
}
.preDay > p.up:after{
	content: "\f35b";
}
.preDay > p.down:after{
	content: "\f358";
}
.chartStyle{
	padding: 0;
	width: 100%;
	margin: 0 auto;
}
.chartStyle.full{
	max-width: 100%;
}
.wordListWrap{
	position: relative;
}
.wordListWrap .changeBtn{
	position: absolute;
	top: 0;
	right: 0;
}
.changeBtn a{
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 10px;
	background: #fff;
	border-radius: 40px;
	border: 1px solid #cfcfcf;
	transition: .3s ease;
}
.changeBtn a:hover{
	background: #e4f3ff;
	border-color:#55acee;
	color: #55acee;
}
.changeCont{
	position: absolute;
	top: 80px;
	right: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 200px;
	height: 36px;
	border: 1px solid #fff;
	border-radius: 3px;
	overflow: hidden;
}
.changeCont li {
	width: 50%;
	height: 100%;
}
.changeCont li a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #66615b;
	background: #fff;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	line-height: 34px;
	transition: .3s ease;
}
.changeCont li a:hover,
.changeCont li a.active{
	background: none;
	color: #fff;
}
#topUserBox{
	position: absolute !important;
	top: 60px;
	right: 20px;
	padding: 0;
	width: 200px;
	z-index: 1;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	display: none;
}
#topUserBox ul li{
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}
#topUserBox ul li a{
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: .3s ease;
}
#topUserBox ul li a:hover{
	background: #f0f1f5;
}
#topUserBox ul li:last-child {
	border-bottom:none;
}
#topicsList{
	width: 380px;
	position: absolute !important;
	top: 60px;
	right: 20px;
	padding: 0;
	z-index: 1;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin-bottom: 0 !important;
	display: none;
}
#topicsList > h3{
	font-size: 13px;
	font-weight: 600;
	padding: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#topicsList ul{
	overflow-y: auto;
	max-height: 400px;
}
#topicsList ul li{
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	width: 100%;
	padding: 8px 12px;
	font-size: 13px;
	text-decoration: none;
}
#topicsList ul li:nth-child(even){
	background: #f0f1f5;
}
#topicsList ul li span{
	display: block;
}
.topicsDate{
	font-size: 11px;
	color: #999;
}
ul.btnRegistList{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	right: 30px;
	top: 96px;
}
#mWrap ul.btnRegistList{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	right: 30px;
	top: 26px;
}

ul.btnRegistList li{ margin-right: 8px; }
ul.btnRegistList li:last-child{ margin-right: 0; }

/* ▼LOGIN▼ ------------------------------------- 
-------------------------------------------------*/

#loginWrap{
	position: absolute;
	overflow: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 10px;
}
#loginWrapIn{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 1000px;
	height: auto;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100%;
	padding: 30px 0;
	position: relative;
}
#loginBox{
	width: 100%;
	margin-bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
	border-radius: 3px;
	background-color: #fff;
}
#login_logoArea,
#login_inputArea{
	width: 50%;
}
#login_inputArea{
	padding: 100px 40px;
}
#login_inputArea > h2 {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-bottom: 30px;
}
#login_inputArea > h2 i{
	margin-right: 6px;
	font-size: 22px;
}
#socialLoginWrap{
	padding: 50px 0 0;
	position: relative;
}
#socialLoginWrap:after{
	content: "";
	background-color: rgba(0,0,0,.1);
	width: 100%;
	height: 1px;
	left: 0;
	top: 25px;
	position: absolute;
}
ul.getPass{
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	margin-top: 16px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
ul.getPass li{
	margin: 0 8px;
}
#login_logoArea{
	background-position: center;
	background-repeat: no-repeat;
	background-size:80% auto;
}

/*TOGGLE SWITCH */
.switchWrap input[type="radio"] {
	display: none;
}
.switchLabel {
	width:65px;
	height:25px;
	position:absolute;
	top:0;
}
.switchLabel0 {
	left:0;
}
.switchLabel1 {
	right:0;
}
.switchBox {
	margin-left:-55px;
	position:relative;
}
.sepa {
	width:0px;
	height:25px;
	display: inline-block;
	position:relative;
}
.sepa:before {
	content:"";
	height:25px;
	width:10px;
	border-radius: 5px;
	box-sizing: border-box;
	position:absolute;
	background-color: #CCC;
	left:-5px;
	top:0px;
	border :1px solid #AAA;
	box-shadow:0px 0px 8px -1px #254d3d;
-moz-box-shadow:0px 0px 8px -1px #254d3d;
-webkit-box-shadow:0px 0px 8px -1px #254d3d;
}
.on,.off {
	width:60px;
	height:25px;
	display: inline-block;
	text-align: center;
	line-height: 25px;
	font-size:13px;
	font-weight: bold;
	vertical-align: top;
}
.on {
	background-color:#5AC299;
	padding-right:5px;
	color:#FFF;
	box-shadow:0px 0px 8px -1px #254d3d inset;
-moz-box-shadow:0px 0px 8px -1px #254d3d inset;
-webkit-box-shadow:0px 0px 8px -1px #254d3d inset;
}
.off {
	background-color:#EEE;
	padding-left:5px;
	color:#AAA;
	box-shadow:0px 0px 8px -1px #5f5f5f inset;
-moz-box-shadow:0px 0px 8px -1px #5f5f5f inset;
-webkit-box-shadow:0px 0px 8px -1px #5f5f5f inset;
}
.switchBox {
	width:120px;
}
.switchLabels {
    height: 25px;
    width: 65px;
    border-radius: 5px;
    background-color: #EEE;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.navbottom{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align: center;
	color:#fff;
}