@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/* スパブル（新庭） */

/* 背景全体に画像 */
html { 
	background: url("bgtxr2.jpg"); 
	background-color: #f8e4cc;
	-webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
	color: #664422;
	font-size: 10.5pt;
	font-family:'Kosugi Maru','Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	height:100%;
	line-height: 1.5;
}
.ffserif{
	font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
@font-face {
	font-family: "ffkiniro";
	src: url("./font/GN-Kin-iro_SansSerif.ttf");
	format('ttf');
}
.ffkiniro {
	font-family: "ffkiniro";
	letter-spacing: 2px;
}
.bigicon{
	font-size: 200%;
}

/* コンテナ */
div#container {
	position: relative;
	height:100%;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

div.content{
	background: url("bgtxr.jpg");
	/* background-color: #f9e9b0; */
	max-width: 1180px;
	min-width: 1180px;
	height: 100%:
	margin-top: 0px;
	margin-bottom: 0px;
	/* padding: 10px; */
	
	border-left: #aaaa99 1px solid;
	border-right: #aaaa99 1px solid;
	
	box-shadow: 0px 2px 5px #999999;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px) {
	div.content{
		max-width: 768px !important;
		min-width: 768px !important;
	}
}

div.battlemain{
	padding: 8px;
	font-size: 10.5pt;
}

.markerA {
	display: inline-block;
	font-weight: initial;
	min-width: 250px;
	color: #334477;
	font-size: 13pt;
	padding: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 3px;
	margin-top: 15px;
	margin-left: 3px;
	background: url('p10.png') no-repeat, linear-gradient(to right,  #66bbff66 50%, #90807000 100% );
	border-radius: 4px;
	text-shadow: 0px 0px 8px #ffffff;
}
.markerA a{
	/* color: #eeeeff; */
}
.markerB {
	display: inline-block;
	font-weight: initial;
	min-width: 250px;
	color: #334477;
	font-size: 13pt;
	padding: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 3px;
	margin-top: 15px;
	margin-left: 3px;
	background: url('p10.png') no-repeat, linear-gradient(to right,  #66bbff66 50%, #90807000 100% );
	border-radius: 4px;
	text-shadow: 0px 0px 8px #ffffff;
}
.markerB a{
	/* color: #eeeeff; */
}

div.sidearea{
	background: url("bgtxr.jpg");
	max-width: 100px;
	min-width: 100px;
	width: 100px;
	min-height: 1000px;
	float: left;
}

div.sideareaR{
	width: 200px;
	margin-right: -200px;
}

div.mainarea{
	width: 1080px;
	float: left;
}

.navbar{
	background-image: url('navbarbg.png');
	border-radius: 0px 0px 20px 20px;
}

.navbar a{
	color: #ffffff;
}

.navbar a:hover{
	color: #aaccff;
}

div.navlink{
	margin: 0px;
	width: 100px;
	height: 36px;
	text-align: center;
	margin: 0px;
	padding-top: 16px;
	background-image: url("./img/img_top.png");
	background-repeat: no-repeat;
}
div.sidemenudiv{
	margin-bottom: 10px;
}
div.navlinkd{
	margin: 0px;
	margin-top: 3px;
	width: 100px;
	height: 40px;
	text-align: center;
	padding-top: 16px;
	color: #80c080;
	background-image: url("./img/img_top.png");
	background-repeat: no-repeat;
}
div.navlinknotify{
	margin: 0px;
	margin-top: 3px;
	width: 100px;
	height: 40px;
	text-align: center;
	padding-top: 16px;
	background-image: url("./img/img_top_notify.png");
	background-repeat: no-repeat;
}
div.navlink:hover{
	background-image: url("./img/img_topa.png");
}


/* 見出し */
div .title{

}

/* 小見出し */
.subtitle{
	/* background: url("white65.png"); */
	font-size: 14pt;
	color: #229922;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 20px;
	
	border-bottom: #66dd66 1.5pt dashed;
}

/* 縁つきテキスト */
p{
	margin: 15px;
}

div.divp{
	margin: 10px;
}

p, td{
	/* text-shadow: 1px 1px 4px #000000; */
}

h1{
	text-shadow: 0px 0px 6px #ff99ff;
}

h2{
	/* text-shadow: 0px 1px 2px #ffffff; */
	margin: 10px;
}

h4{
	display: inline;
	color: #557744;
	font-weight: normal;
	font-size: 10.5pt;
	padding: 3px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 5px;
	background: linear-gradient(rgba(178,203,178,0) 50%, #aaeeaa 90%) ;
	vertical-align: middle;
}


/* 項目：値　みたいなラベル */
.label{
	margin-bottom: 6px;
}
.labelleft{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width: 150px;
	border-width: 0px;
	font-weight: bold;
}

.labelright{
	display:table-cell;
	text-align:left;
	vertical-align:middle;
	padding: 7px;
	padding-left: 12px;
	border-width: 0px;
	border-left: 2px solid #ddcc99cc;
}
.labelrightcell{
	width: 360px;
}
.labelrightcell2{
	width: 200px;
}

/* 項目：値　みたいなラベル2 */
.labelb{
	margin-bottom: 6px;
	background: url('b_line01.png') repeat-x;
	background-position: bottom;
}
.labelbleft{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width: 150px;
	border-width: 0px;
	font-weight: bold;
	background: url('b_line02.png') no-repeat;
	background-position: bottom left;
}

.labelbright{
	display:table-cell;
	text-align:left;
	vertical-align:middle;
	padding: 7px;
	padding-left: 12px;
	border-width: 0px;
}
.labelbrightcell{
	width: 360px;
}
.labelbrightcell2{
	width: 200px;
}


.ctag{
	border: #227700 1px dotted;
	border-radius: 5px;
	padding: 2px;
	margin-right: 6px;
	background-color: #eeffee;
	display: inline-box;
	color: #009955;
}

.btn{
	text-align: center;
	border: #772200 1px solid;
	border-radius: 3px;
	margin-left: 400px;
	margin-right: 400px;
	background-color: #eebb66;
}

.btn:hover{
	background-color: #9999aa;
	cursor: pointer;
}


.sampleview:hover{
	background-color: #ccddee;
}

header {
	
}

.taglist{
	margin: 4px;
	margin-top: -4px;
	margin-bottom: 12px;
	padding: 5px;
	padding-left: 0px;
}

.tagitems{
	border: 1px dotted #a08060;
	border-radius: 5px;
	padding: 3px;
	padding-left: 6px;
	padding-right: 6px;
	margin-right: 6px;
	background-color: #ffffff88;
}

.tagitems:hover{
	background-color: #fcf0aa;
}

.tagitem{
	color: #907050;
}

.twitter{
	float: right;
	margin-right: 7px;
	margin-top: 10px;
}

iframe.twitter-share-button {
	width: 100px!important;
}

a{
	color: #3377ff;
	text-decoration: none;
}
a:hover{
	color: #0033cc;
}

a.nav{
	color: #fffcf3;
}

h2 a{
	/* color: #ffffff; */
}


a.tag{
	color: #66cc00;
	text-decoration: none;
}


/* 角丸アイコン */
img.icon{
	margin-right: 5px;
	border-radius: 2px;
}

/* 発言欄 */
div.talkarea{
	border-radius: 4px;
	background-color: #ffffff77;
	background-size: 100%;
	background-repeat: no-repeat;
	
	border: 1px solid #ffffff;
	box-shadow: 0px 1px 3px #00000033;
	
	margin: 10px;
	padding: 10px;
	margin-bottom: 5px;
}
div.framearea{
	
	border-radius: 4px;
	background-color: #ffffff88;
	
	margin: 6px;
	padding: 6px;
	margin-bottom: 10px;
	
	border-bottom: #bb7733 1px dashed;
}
div.frameareab{
	border-radius: 4px;
	background: #ffffff88;
	margin: 6px;
	padding: 6px;
	margin-bottom: 10px;
}
div.talkarea2{
	border-radius: 6px;
	background: #ffffff88;
	margin: 12px;
	padding: 8px;
	margin-bottom: 8px;
}

span.label{
	margin: 2px; 
}

td.tleft, td.tright{
	/* border: 1.5px solid #aa6666; */
	padding: 0;
	margin: 0;
	vertical-align: top;
	width: 50%;
}

td.tleft{

}

td.tright{
	border-left: 2px rgba(200,230,255, 0.2) solid;
}

td.iconcell{
	border: 1px solid #ccaaaa;
	background: #ffffff11;
	border-radius: 2px;
	padding: 0;
	margin: 0px;
	vertical-align: top;
	width: 60px;
	height: 60px;
	cursor:pointer;
}

td.iconcell:hover{
	border: 1px solid #666666;
}

.talklist_main{
	padding: 0;
	margin: 0;
}

span.re{
	border: 1px solid #ff9933;
	border-radius: 3px;
	margin: 0px;
	margin-left: 8px;
	padding: 0px;
	padding-left: 4px;
	padding-right: 4px;
	color: #994411;
	background-color: #ffcc66;
	cursor: pointer;
	font-size: 8pt;
}

span.del{
	border: 1px solid #ff6633;
	border-radius: 3px;
	margin: 0px;
	margin-left: 8px;
	padding: 0px;
	padding-left: 4px;
	padding-right: 4px;
	color: #994411;
	background-color: #ffdddd;
	cursor: pointer;
	font-size: 8pt;
}

.pager{
	border: 2px solid #6699ff;
	border-radius: 3px;
	margin: 3px;
	margin-left: 8px;
	padding: 0px;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 90%;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
	cursor: pointer;
}

.pager:hover{
	background-color: #6699ff33;
	transform: translateY(2px);
}


img{
	margin:0;
	padding:0;
	vertical-align:bottom;
	
	/* あまりにも大きい画像は下側をクリッピング */
	max-height: 1000px;
	object-fit: cover;
	object-position: 0% 0%;
}

/* チャット操作系 */
.roomname{
	padding: 8px;
	text-align: center;
	margin-right: 8px;
	min-width: 75px;
	font-size: 10pt;
	border-bottom: 2px solid #553322;
	border-radius: 2px;
	display: inline-block;
	color: #553322;
}
.roomname:hover{
	color: #bb4433;
	border-bottom: 2px solid #bb4433;
	background-image: url('criflash.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateY(1px);
}
.roomname a{
	color: #ffffff;
}
.roomselected{
	color: #bb4433;
	border-bottom: 2px solid #bb4433;
	background-image: url('criflash.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}

/* スイッチボタン */
.switchbutton{
	/*
	cursor: pointer;
	border: 1px solid #996666;
	padding: 6px;
	display: inline-block;
	*/
	color: #dd8877;
	padding: 3px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
	cursor: pointer;
	user-select: none;
}
.switchbutton:hover{
	background-color: #dd8877;
	color: #ffffff;
}
.swbtnleft{
	border: 2px solid #dd8877;
	border-radius: 8px 0px 0px 8px;
	border-right: 0px solid #dd8877;
}
.swbtncenter{
	border: 2px solid #dd8877;
	border-right: 0px solid #dd8877;
}
.swbtnright{
	border: 2px solid #dd8877;
	border-radius: 0px 8px 8px 0px;
}
.enablebtn{
	background-color: #dd8877;
	color: #ffffff;
}
.disablebtn{
	background-color: #fff0e6;
}


/* 基本UI */
input[type="text"], input[type="password"], textarea, select{
	border: 1px #99996699 solid;
	border-radius: 5px;
	padding: 7px;
	margin: 1px;
	background-color: #ffffff;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{
	background-color: #ffffcc;
}

input[type="submit"]{
	padding: 5px;
	padding-left: 16px;
	padding-right: 16px;
	border: 1px #cc996699 solid;
	border-radius: 2px;
	background-color: #bb7755;
	box-shadow: 0px 2px 2px #22110099;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}
input[type="submit"]:hover{
	background-color: #f0cc88;
	transform: translateY(1px);
}
input[type="button"]{
	color: #dd8877;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	border: 2px solid #dd8877;
	border-radius: 5px;
	display: inline-block;
	margin: 3px;
	cursor: pointer;
	background-color: #ffffff00;
	user-select: none;
}
input[type="button"]:hover{
	background-color: #dd8877;
	color: #ffffff;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	border: 2px solid #dd8877;
	border-radius: 5px;
	display: inline-block;
	margin: 3px;
	cursor: pointer;
}
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label{
	color: #339900;
}

summary{
	cursor: pointer;
	user-select: none;
}

/* APIクエリボタン */
.queryButton{
	color: #dd8877;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #dd8877;
	border-radius: 5px;
	display: inline-block;
	margin: 3px;
	cursor: pointer;
	user-select: none;
}
.queryButton:hover, .queryButtonSelect{
	background-color: #dd8877;
	color: #ffffff;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #dd8877;
	border-radius: 5px;
	display: inline-block;
	margin: 3px;
	cursor: pointer;
}

/* アイテム表示 */
.itemcard{
	border-radius:6px;
	display:inline-block;
	width:450px;
	padding:10px;
	background-colod:#ffffff66;
}

/* ポップアップメッセージ */
.popup-message {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #333;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 9999;
}

/* 選択ポップアップ */
.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
}

.innerpopup{
	background-color: #fff6ddee;
	padding: 10px;
	border-radius: 10px;
}

/* 画像とテキストを並べて配置するUI */
.centerline{
	display: flex;
	align-items: center;
	cursor: pointer;
}
.centerline:hover{
	background-color: #33000022;
}
.centerlinechat{
	display: flex;
	align-items: center;
}

/* エンカウント */
.encounterarea{
	border: 2px solid #ff6666;
	border-radius: 5px;
	background-color: #ffffff66;
	padding: 10px;
	margin: 10px;
	text-align: center;
}

/* マップ関係 */
.strollmaparea_close span{
	text-align: center;
}

/* ラベル */
label:hover{
	background-color: #ffffff99;
}
label{
	padding: 3px;
	display: inline-block;
}

.infomes{
	border: 1px #5588ff solid;
	background-color: #ddeeff;
	color: #113366;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.warnmes{
	border: 1px #cccc55 solid;
	background-color: #ffffdd;
	color: #666611;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.errormes{
	border: 1px #ff5555 solid;
	background-color: #ffdddd;
	color: #661111;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.noticemes{
	border: 1px #55ff55 solid;
	background-color: #ddffdd;
	color: #116611;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}

/* Chara box */
img.cicon{
	margin-right: 5px;
	border-radius: 2px;
}

div.charaframe, div.charaframe2, div.charaframeself{
	border-radius: 2px;
	margin: 8px;
	padding: 8px;
	margin-bottom: 8px;
	word-break: break-all;
	width: 450px;
	border: 1px solid #99999999;
	background-color: #ffffff66;
	display: inline-block;
}

div.charaframe2, div.charaframeself{
	border: 1px solid #ff9966;
	background-color: #ffffff99;
}

div.charaframe:hover{
	border: 1px solid #ff9966;
	
	background-color: #ffffff99;
	cursor: pointer;
	transform: translateY(2px);
}

.skillact{
	font-size: 13px;
}

small, span.times{
	color: #993300;
}
span.times{
	font-size: 9pt;
}

table.itemlist{
	min-width: 1024px;
}

table.kadanlist{
	min-width: 450px;
}

table.worklist{
	min-width: 450px;
}


table.itemlist th, table.kadanlist th, table.worklist th{
	background-color: #229966;
	border-radius: 3px;
	color: #ffffff;
	padding: 3px;
	padding-left: 8px;
	padding-right: 8px;
}

table.itemlist td, table.kadanlist td, table.worklist td{
	padding-left: 8px;
	padding-right: 2px;
}

table{
	padding-left: 5px;
}

tr.odd{
	background-color: #f0ffd0;
}
tr.even{
	background-color: #ffffdd;
}

.talklist_main td{
	width: 50%;
}

.subtext{
	color: #996644;
}
.maintext{
	/* color: #e6f9ff; */
}
.attrtext{
	color: #428000;
}

.talklist_main td{
	width: 50%;
}

/* queue */
.queue {
	width: 60px;
	height: 60px;
	margin: 5px;
	margin-right: 15px;
	display: inline-block;
	position: relative; /* .queueを相対位置指定 */
	background-repeat: no-repeat;
	background-size: cover;
	font-family: ffkiniro;
}
.queue_mini {
	width: 30px;
	height: 30px;
	margin: 5px;
	margin-right: 15px;
	display: inline-block;
	position: relative; /* .queueを相対位置指定 */
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}

.qred{
	background-image: url('./img/q_red.png');
}
.qgreen{
	background-image: url('./img/q_green.png');
}
.qblue{
	background-image: url('./img/q_blue.png');
}
.qpink{
	background-image: url('./img/q_pink.png');
}
.qyellow{
	background-image: url('./img/q_yellow.png');
}
.qcyan{
	background-image: url('./img/q_cyan.png');
}
.qviolet{
	background-image: url('./img/q_violet.png');
}

.queue .qvalue {
	color: #ffffff;
	position: absolute; /* .queue内で絶対位置指定 */
	right: 0;
	bottom: 0;
	margin-right: -10px;
	margin-bottom: -10px;
	font-size: 24pt;
	text-shadow: #222222 0px 0px 3px;
	font-weight: bold;
}
.queue_mini .qvalue {
	color: #ffffff;
	position: absolute; /* .queue内で絶対位置指定 */
	right: 0;
	bottom: 0;
	margin-right: -10px;
	margin-bottom: -10px;
	font-size: 14pt;
	text-shadow: #111111 0px 0px 2px;
	font-weight: bold;
}

/* <div class="queue qred"><span class="qvalue">25</span></div> */

/* -------------------- SectionStyle -------------------- */
.matcharea{
	text-align: center;
	margin-top: -5px;
	vertical-align: top;
}
.matcharea .mname{
	font-size: 14pt;
	font-weight: bold;
	color: #996666;
}
.matcharea .item0left{
	display: inline-block;
	width: 400px;
	text-align: left;
	vertical-align: top;
	padding: 5px;
	background-image: url('./img/item0left.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
.matcharea .item0right{
	display: inline-block;
	width: 400px;
	text-align: right;
	vertical-align: top;
	padding: 5px;
	background-image: url('./img/item0right.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
.matcharea .item1left{
	display: inline-block;
	width: 400px;
	text-align: left;
	vertical-align: top;
	padding: 5px;
	background-image: url('./img/item1left.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
.matcharea .item1right{
	display: inline-block;
	width: 400px;
	text-align: right;
	vertical-align: top;
	padding: 5px;
	background-image: url('./img/item1right.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
.matchinfo{
	margin-left: -100px;
	margin-right: -100px;
}

.log0left, .log0right{
	margin: 3px;
	padding: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border: 2px solid #6688dd;
	border-radius: 5px;
	background-color: #ddeeff33;
}
.log1left, .log1right{
	margin: 3px;
	padding: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border: 2px solid #aa66aa;
	border-radius: 5px;
	background-color: #ffddee33;
}
.logicon_container {
	width: 120px;
	height: 80px;
	overflow: hidden;
	margin: 5px;
	margin-left: 15px;
	margin-right: 15px;
	vertical-align: top;
	display: inline-block;
}
.logicon_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.t0{
	color: #ff3322;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.t1{
	color: #2266ff;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c0{
	color: #ee8833;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c1{
	color: #118866;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c2{
	color: #39dd39 ;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c3{
	color: #774488;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c4{
	color: #f3bb44;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
	text-shadow: 0 0 4px rgba(255,255,222, 0.4),0 0 3px rgba(255,255,222, 0.3), 0 0 2px rgba(255,255,222, 0.3);
	background-image: url('criflash.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.c5{
	color: #a08044;
	font-size: 10pt;
	font-family: Verdana;
}
.c6{
	color: #f08090;
	font-size: 12pt;
	font-family: Verdana;
	text-shadow: 0 0 5px rgba(255,255,255, 0.2),0 0 3px rgba(255,255,255, 0.1), 0 0 2px rgba(255,255,255, 0.1);
}
.c7{
	color: #f09040;
	font-size: 10pt;
	font-family: Verdana;
}
.heal{
	color: #55aa33;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.cri{
	color: #f3bb44;
	font-family: Verdana;
	text-shadow: 0 0 4px rgba(255,255,222, 0.4),0 0 3px rgba(255,255,222, 0.3), 0 0 2px rgba(255,255,222, 0.3);
	background-image: url('criflash.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.barhp{
	display:inline-block;
	border-bottom: 5px #39dd39 solid;
	vertical-align: top;
	margin-left: 10px;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.barst{
	display:inline-block;
	border-bottom: 5px #eeee33 solid;
	vertical-align: top;
	margin-left: 10px;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.barpd{
	display:inline-block;
	border-bottom: 5px #ff4444 solid;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.barsp{
	display:inline-block;
	border-bottom: 5px #f0a044 solid;
	vertical-align: top;
	margin-left: 10px;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.barmp{
	display:inline-block;
	border-bottom: 5px #44a0f0 solid;
	vertical-align: top;
	margin-left: 10px;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.barblank{
	display:inline-block;
	border-bottom: 5px #555555 solid;
	vertical-align: top;
	font-size: 1pt;
	transform: skewX(-45deg);
}
.fl{
	/* 1000以上 */
	font-size: 24pt;
}
.fxl{
	/* 10000以上 */
	font-size: 28pt;
}


.skill{
	font-size: 20pt;
	color: #aa7755;
	font-style: italic;
}

.csred{
	font-weight: bold;
	color: #d63939;
}

.csblue{
	color: #15E;
}

.csgold{
	font-weight: bold;
	color: #ddaa44;
}

.cshigh{
	color: #906030;
}

.cswhite{
	color: #eeffee;
}

.csbold{
	font-weight: bold;
}

.cslilac{
	color:#9966ff;
}

.csgray{
	color: #999988;
}

hr{
	color: #eecccc;
	border-width: 1px;
	size: 1px;
}

strong{
	color: #ffbbbb;

}

.dashline{
	display: block;
	border: 0px #000000 solid;
	border-bottom: 1px #c0a060 dashed ;
	margin-top: 2px;
	margin-bottom: 2px;
}

.indent{
	margin-left: 25px;
}

.iconnav{
	
}
.iconnav:hover{
	filter: drop-shadow(0px 0px 3px rgba(255,255,230, 0.7));
}
.sheet{
	border: 8px #cc9966 solid;
	padding: 5px;
	margin: 5px;
	background-image: url("colk.jpg");
}
.cdatal{
	width: 620px;
	border-radius: 4px;
	background-color: #ffffff77;
	background-size: 100%;
	background-repeat: no-repeat;
	
	border: 1px solid #fff0dd22;
	box-shadow: 0px 1px 3px #ffffff33;
	
	padding: 3px;
	margin-bottom: 5px;
	
	padding: 3px;
	border-radius: 2px;
}
.cdatar{
	width: 400px;
	border-radius: 4px;
	/* background-color: #ffffff77; */
	background-size: 100%;
	background-repeat: no-repeat;
	
	border: 1px solid #fff0dd22;
	box-shadow: 0px 1px 3px #ffffff33;
	
	padding: 3px;
	margin-bottom: 5px;
	
	padding: 3px;
	border-radius: 2px;
}
.profiletext{
	margin: 13px;
}

.profile,.boardclip{
	color: #ffffff;
	padding: 4px;
	font-weight: bold;
	background-color: #a08060;
	margin: 3px;
	margin-top: 6px;
	margin-left: -5px;
	margin-bottom: 10px;
	margin-right: 380px;
	border-radius: 0 14px 14px 0;
}

.inner_boardclip{
	padding:4px; margin-left: 0px; padding-left: 15px;
	border-bottom: 1px #f0d0c0 dashed;
	border-right: 1px #f0d0c0 dashed;
	border-top: 1px #f0d0c0 dashed;
	border-radius: 0 14px 14px 0;
}
.decoarea span{
	padding: 5px;
	border-radius: 4px;
	cursor: pointer;
}
.decoarea span:hover{
	background-color: #22111133;
}
#deco_big, #deco_small{
	font-size: 110%;
	font-weight: bold;
	padding-left: 7px;
	padding-right: 7px;
}

.markserif{
	color: #ffffff;
	width: 140px;
	margin: 1px;
	margin-right: 3px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
}
.marks{
	color: #ffffff;
	width: 38px;
	margin: 1px;
	margin-right: 3px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
}
.markd{
	color: #ffffff;
	width: 52px;
	margin: 1px;
	margin-right: 3px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
}
.markp{
	color: #ffffff;
	width: 120px;
	margin: 1px;
	margin-right: 3px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
}
.markp2{
	color: #ffffff;
	width: 80px;
	margin: 1px;
	margin-right: 3px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
}
.marki0{
	background-color: #66bb00;
}
.marki1{
	background-color: #229966;
}
.marki2{
	background-color: #55cc55;
}
.marki3{
	background-color: #44dd44;
}
.skillname{
	width: 210px;
	display: inline-block;
}
.skilldesc{
	max-width: 600px;
	display: inline-block;
}
.status{
	width: 100px;
	display: inline-block;
}
.status2{
	width: 180px;
	display: inline-block;
}
.status3{
	width: 30px;
	display: inline-block;
}
.status4{
	width: 138px;
	display: inline-block;
}
.type{
	border-radius: 20px;
	color: #ffffff;
	padding-left: 7px;
	padding-right: 7px;
	text-shadow: 0px 1px 1px rgba(0,0,0, 0.2);
	border: 1px solid rgba(255,255,255, 0.2);
	margin: 4px;
	font-style: initial;
}
.typesp{
	border-radius: 10px;
	color: #ffffff;
	padding-left: 7px;
	padding-right: 7px;
	text-shadow: 0px 1px 1px rgba(0,0,0, 0.2);
	box-shadow: 0px 0px 3px #ffffcc;
	border: 1px solid rgba(255,235,200, 1);
	margin: 4px;
}
.typen{
	border: 1px solid rgba(255,255,255, 0.0);
}
.type0{
	background-color: #ff2222;
}
.type1{
	background-color: #449922;
}
.type2{
	background-color: #2222cc;
}
.type3{
	background-color: #aa2222;
}
.type4{
	background-color: #bbaa00;
}
.type5{
	background-color: #f07070;
}
.type6{
	background-color: #25bf8b;
}
.type7{
	background-color: #ffbc50;
}
.type8{
	background-color: #ab5de7;
}
.type9{
	background-color: #88bbff;
}
.type10{
	background-color: #30d0ee;
}
.type11{
	background-color: #55f077;
}
.type12{
	background-color: #ddbb60;
}
.type13{
	background-color: #bb6640;
}
.type14{
	background-color: #664ff5;
}
.type15{
	background-color: #999999;
}
.type16{
	background-color: #f96c24;
}

.type17{
	background-color: #dddd50;
}
.type18{
	background-color: #fc9960;
}
.type19{
	background-color: #a00020;
}
.type20{
	background-color: #7148ae;
}
.type21{
	background-color: #4863ae;
}
.type22{
	background-color: #114499;
}
.type23{
	background-color: #444a50;
}
.type24{
	background-color: #702060;
}
.type25{
	background-color: #55dd66;
}
.type26{
	background-color: #445511;
}
.type27{
	background-color: #e0d033;
}
.type28{
	background-color: #665522;
}
.skills{
	background-color: #aa2222;
}

::-webkit-scrollbar{
   width: 10px;
}
::-webkit-scrollbar-track{
   background-color: #ffffff88;
}
::-webkit-scrollbar-thumb{
   background-color: #dd999988;
}