@charset "UTF-8";

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

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

/* 背景全体に画像 */
html { 
	background: url("topbg.jpg") no-repeat center center fixed; 
	background-size: cover;
	background-color: #eef2fb;
	-webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
	color: #445566;
	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: #ffffff99;
	/* background-color: #f9e9b0; */
	max-width: 1180px;
	min-width: 1180px;
	height: 100%:
	margin-top: 0px;
	margin-bottom: 0px;
	/* padding: 10px; */
	
	border-left: #b0c4dc 1px solid;
	border-right: #b0c4dc 1px solid;
	
	box-shadow: 0px 2px 5px #99aabb55;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 600px) {
	/* コンテナ・コンテンツ */
	div#container {
		padding-left: 0;
		padding-right: 0;
	}
	div.content {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100%;
		box-sizing: border-box;
	}
}

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");
	background-color: #e8f0fb;
	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: #66aacc;
	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: #4477aa;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 20px;
	
	border-bottom: #88aacc 1.5pt dashed;
}

/* ティザーサイト用サブ見出し（h3用・左ボーダー付きブロック） */
.teaser-subheading {
	font-size: 1.05em;
	margin: 18px 0 8px;
	padding: 4px 10px;
	background: #eef4fb;
	border-left: 3px solid #4477aa;
	color: #334477;
}

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

div.divp{
	margin: 10px;
}

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

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

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

h4{
	display: inline;
	color: #5577aa;
	font-weight: normal;
	font-size: 10.5pt;
	padding: 3px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 5px;
	background: linear-gradient(rgba(140,180,220,0) 50%, #c4ddf8 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 #99bbddcc;
}
.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: #5599bb 1px dotted;
	border-radius: 5px;
	padding: 2px;
	margin-right: 6px;
	background-color: #e8f4fb;
	display: inline-box;
	color: #5599bb;
}

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

.btn:hover{
	background-color: #e8aabb;
	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 #99aabb;
	border-radius: 5px;
	padding: 3px;
	padding-left: 6px;
	padding-right: 6px;
	margin-right: 6px;
	background-color: #ffffff88;
}

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

.tagitem{
	color: #6688aa;
}

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

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

a{
	color: #5577cc;
	text-decoration: none;
}
a:hover{
	color: #3355aa;
}

a.nav{
	color: #1a538b;
}

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


a.tag{
	color: #5599cc;
	text-decoration: none;
}


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

/* 発言欄 */
div.talkarea{
	border-radius: 4px;
	background-color: rgba(255,255,255, 0.72);
	background-size: 100%;
	background-repeat: no-repeat;
	
	border: 1px solid #c0cce0;
	box-shadow: 0px 1px 3px #00000033;
	
	margin: 10px;
	padding: 10px;
	margin-bottom: 5px;
}
div.framearea{
	
	border-radius: 4px;
	background-color: rgba(255,255,255, 0.68);
	
	margin: 6px;
	padding: 6px;
	margin-bottom: 10px;
	
	border-bottom: #99bbcc 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 #aabbcc;
	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 #ff9999;
	border-radius: 3px;
	margin: 0px;
	margin-left: 8px;
	padding: 0px;
	padding-left: 4px;
	padding-right: 4px;
	color: #bb4455;
	background-color: #ffeef0;
	cursor: pointer;
	font-size: 8pt;
}

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

.pager{
	border: 2px solid #88aacc;
	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: #aaccee44;
	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 #88aacc;
	border-radius: 2px;
	display: inline-block;
	color: #5577aa;
}
.roomname:hover{
	color: #3366bb;
	border-bottom: 2px solid #5599cc;
	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: #3366bb;
	border-bottom: 2px solid #5599cc;
	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: #4488bb;
	padding: 3px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
	cursor: pointer;
	user-select: none;
}
.switchbutton:hover{
	background-color: #4488bb;
	color: #ffffff;
}
.swbtnleft{
	border: 2px solid #4488bb;
	border-radius: 8px 0px 0px 8px;
	border-right: 0px solid #4488bb;
}
.swbtncenter{
	border: 2px solid #4488bb;
	border-right: 0px solid #4488bb;
}
.swbtnright{
	border: 2px solid #4488bb;
	border-radius: 0px 8px 8px 0px;
}
.enablebtn{
	background-color: #4488bb;
	color: #ffffff;
}
.disablebtn{
	background-color: #f0f6fc;
}


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

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

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

/* APIクエリボタン */
.queryButton{
	color: #4488bb;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #4488bb;
	border-radius: 5px;
	display: inline-block;
	margin: 3px;
	cursor: pointer;
	user-select: none;
}
.queryButton:hover, .queryButtonSelect{
	background-color: #4488bb;
	color: #ffffff;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #4488bb;
	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: #2255aa;
	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: #f0f5ffee;
	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 #ffaacc;
	border-radius: 5px;
	background-color: #ffffff66;
	padding: 10px;
	margin: 10px;
	text-align: center;
}

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

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

.infomes{
	border: 1px #5588cc solid;
	background-color: #e8f0fb;
	color: #224488;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.warnmes{
	border: 1px #ddbb55 solid;
	background-color: #fffdf0;
	color: #776611;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.errormes{
	border: 1px #ff6677 solid;
	background-color: #fff0f2;
	color: #882233;
	border-radius: 2px;
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
}
.noticemes{
	border: 1px #55aaee solid;
	background-color: #e8f4ff;
	color: #115588;
	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 #aabbcc99;
	background-color: #ffffff66;
	display: inline-block;
}

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

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

.skillact{
	font-size: 13px;
}

small, span.times{
	color: #6688aa;
}
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: #5599bb;
	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: #f0f5fb;
}
tr.even{
	background-color: #f8faff;
}

.talklist_main td{
	width: 50%;
}

.subtext{
	color: #7799bb;
}
.maintext{
	/* color: #e6f9ff; */
}
.attrtext{
	color: #5577aa;
}

.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: #3377bb;
}
.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 #ffaacc;
	border-radius: 5px;
	background-color: #fff0f833;
}
.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: #f09940;
	font-size: 18pt;
	font-weight: bold;
	font-family: Verdana;
}
.c1{
	color: #44a0f0;
	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: #99aaf0;
	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: #f07020;
	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: #7799dd;
	font-style: italic;
}

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

.csblue{
	color: #15E;
}

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

.cshigh{
	color: #99ddff;
}

.cswhite{
	color: #eeffee;
}

.csbold{
	font-weight: bold;
}

.cslilac{
	color:#9966ff;
}

.csgray{
	color: #999988;
}

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

strong{
	color: #ffccdd;

}

.dashline{
	display: block;
	border: 0px #000000 solid;
	border-bottom: 1px #88aacc 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{
	padding: 5px;
	margin: 5px;
	background-image: url("colk.jpg");
}
.cdatal{
	width: 620px;
	border-radius: 4px;
	background-color: rgba(255,255,255, 0.65);
	background-size: 100%;
	background-repeat: no-repeat;
	
	border: 1px solid #ccddf022;
	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 #f0ddff22;
	box-shadow: 0px 1px 3px #ffffff33;
	
	padding: 3px;
	margin-bottom: 5px;
	
	padding: 3px;
	border-radius: 2px;
}
.profiletext{
	margin: 13px;
}

.profile{
	color: inherit;
	padding: 4px;
	font-weight: bold;
	background-color: transparent;
	margin: 3px auto;
	margin-top: 6px;
	margin-bottom: 10px;
	text-align: center;
	border: none;
}
.boardclip{
	color: #ffffff;
	padding: 4px;
	font-weight: bold;
	background-color: #4477aa;
	margin: 3px;
	margin-top: 6px;
	margin-left: -5px;
	margin-bottom: 10px;
	margin-right: 380px;
	border-radius: 0 14px 14px 0;
}

.inner_boardclip{
	color: #cc77cc;
	font-size: 14pt;
	padding:4px; margin-left: 0px; padding-left: 15px;
	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: #77aadd;
}
.marki1{
	background-color: #5588cc;
}
.marki2{
	background-color: #4499cc;
}
.marki3{
	background-color: #33aacc;
}
.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;
}
.type29{
	background-color: #9b93d6;
}
.type30{
	background-color: #ffa1bf;
}
.skills{
	background-color: #aa2222;
}

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

/* === ハンバーガーメニュー（SP向け） === */
.hamburger-btn {
	display: none;
}
.sp-menu-overlay {
	display: none;
}

@media (max-width: 600px) {
	/* ハンバーガーボタン */
	.hamburger-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 8px;
		left: 8px;
		z-index: 1001;
		width: 46px;
		height: 46px;
		background-color: #4477aa;
		color: #ffffff;
		border: none;
		border-radius: 6px;
		font-size: 26px;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
		padding: 0;
	}
	.hamburger-btn:hover {
		background-color: #3366aa;
	}

	/* 背景オーバーレイ */
	.sp-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.45);
		z-index: 999;
	}
	.sp-menu-overlay.is-open {
		display: block;
	}

	/* サイドメニューをスライドパネル化 */
	div.sidearea {
		position: fixed !important;
		top: 0;
		left: -130px;
		width: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;
		height: 100% !important;
		min-height: 100vh !important;
		z-index: 1000;
		overflow-y: auto;
		transition: left 0.3s ease;
	}
	div.sidearea.is-open {
		left: 0;
	}

	/* メインエリア: フル幅 + ハンバーガーボタン分の上余白 */
	div.mainarea {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* 3-1: talkarea の固定幅（600px inline style）を解除 */
	div.talkarea {
		padding: 5px;
		margin: 12px;
		margin-left: -10px;
		font-size: 80%;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* シートの余白を最小化 */
	.sheet{
		padding: 2px;
		margin: 2px;
	}

	/* コンテンツ内の左右余白を最小化 */
	div.battlemain {
		padding-left: 3px;
		padding-right: 3px;
	}

	/* pタグの左右余白を最小化 */
	p {
		margin-left: 8px;
		margin-right: 6px;
	}

	/* テーブル横スクロール */
	table.itemlist,
	table.kadanlist,
	table.worklist {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* talklist_main（2列チャット）を 1列に */
	.talklist_main tr {
		display: block;
	}
	.talklist_main td,
	td.tleft,
	td.tright {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	td.tright {
		border-left: none;
		border-top: 2px rgba(200,230,255, 0.4) solid;
	}

	/* キャラフレーム */
	div.charaframe,
	div.charaframe2,
	div.charaframeself {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* アイテムカード */
	.itemcard {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* マッチエリア（戦闘ログ等）を縦積みに */
	.matcharea .item0left,
	.matcharea .item0right,
	.matcharea .item1left,
	.matcharea .item1right {
		display: block;
		width: auto;
		text-align: left;
	}
	.matchinfo {
		margin-left: 0;
		margin-right: 0;
	}

	/* ステータス */
	.status2 {
		width: auto;
	}

	/* ---- チャット画面 SP対応 (1-1〜1-7) ---- */

	/* 1-1: cdatal / cdatar を縦積みに */
	.cdatal,
	.cdatar {
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
		overflow: visible !important;
		white-space: normal !important;
	}

	/* 1-2: プロフィール画像をSP幅に収める */
	.cdatar img {
		text-align: center;
	}

	/* 1-3: ステータス表示ブロック（幅500px固定を解除） */
	.stat-inner-block {
		max-width: 100% !important;
		width: auto !important;
		white-space: normal !important;
	}

	/* 1-4: チャット投稿テキストエリア */
	textarea {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* 1-5: プレビューエリア */
	.ajax_text_preview {
		max-width: 100% !important;
		width: auto !important;
		display: block !important;
		box-sizing: border-box;
		white-space: normal !important;
	}

	/* 1-6: フレンド選択ポップアップ */
	.innerpopup .framearea.talkarea {
		width: 90vw !important;
		height: 70vh !important;
		box-sizing: border-box;
	}
	.innerpopup .framearea.talkarea > div {
		height: calc(70vh - 60px) !important;
	}

	/* 1-7: タイプアイコン（cdatal縦積み連動）*/
	.cdatal > div[style*="float: right"] {
		float: none !important;
		display: block;
		margin: 0 auto;
	}

	/* ---- 戦闘設定画面 SP対応 (3-1〜3-9) ---- */

	/* 3-2: ステータス表示（.mystatusdesc）を横スクロール可能に
	       ※ .mark-stats の width: !important 上書きは
	          TemplateKeizoku01.inc.php の <style> 内 @media で行う */
	.mystatusdesc,
	.statusdesc {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* 3-5: #icontable — アイコン並びをSPで「5列×4行」に切り替え
	       2行×10列 のテーブルを flex 折り返しでリフロー */
	#icontable {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	#icontable table {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		width: auto !important;
	}
	#icontable table tr {
		display: contents;
	}
	#icontable table td {
		display: inline-block;
		width: 60px !important;
		min-width: 60px;
		box-sizing: border-box;
	}

	/* 3-6 / 3-9: セリフ入力欄・テキスト入力の幅抑制 */
	input[type="text"] {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 3-7: 合成プレビュー (.talkarea の min-width と内部 width:330px を解除) */
	#synthesisPreview .talkarea {
		min-width: 0 !important;
		width: 100% !important;
		display: block !important;
		box-sizing: border-box !important;
	}
	#synthesisPreview span[style*="width:330px"] {
		width: 100% !important;
		display: block !important;
		box-sizing: border-box !important;
	}

	/* 3-8: ラベル2列（.labelrightcell）を縦積みに */
	.labelleft {
		display: block !important;
	}
	.labelrightcell,
	.labelrightcell2 {
		width: 100% !important;
		display: block !important;
		box-sizing: border-box;
	}

	/* ---- キャラクター設定画面 SP対応 (4-1〜4-9) ---- */

	/* 4-1: アイコン設定行（.draggable-item）— PCの1行3入力横並びを
	       SPで「ラベル→名称→URL→発言者名」縦積みに切り替え
	       3-5 の #icontable flex リフローと同じアプローチ */
	.draggable-item {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 8px;
	}
	.draggable-item input[type="text"] {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 4-6: 一括設定テンプレート入力（幅360px+180px横並び）を縦並びに */
	#autosetname,
	#autoseturl,
	#autosetchara {
		display: block;
		width: 100% !important;
		box-sizing: border-box !important;
		margin-bottom: 4px;
	}

	/* 4-7: DropFrame の padding:120px をSPで縮小 */
	#DropFrame {
		padding: 20px 10px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 4-8: markp 見出しをSP幅内に収める */
	span.markp {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 4-2: input[type="text"] size="80"（約640px）→ 3-6ルールで対応済み */
	/* 4-3 / 4-4: textarea cols="80" → 1-4ルールで対応済み */
	/* 4-5: #iconinput width:700px → 1-4ルール（textarea）で対応済み */
	/* 4-9: フレンド選択ポップアップ 500×500px → 1-6ルールで対応済み */
}

/* =========================================================
   Battle 出力用共通クラス
   ========================================================= */

/* --- タイムライン レベル色 --- */
.tl-lv0 { color: #1177f0; vertical-align: middle; }
.tl-lv1 { color: #50a030; vertical-align: middle; }
.tl-lv2 { color: #ccaa33; vertical-align: middle; }
.tl-lv3 { color: #f08833; vertical-align: middle; }
.tl-lv4 { vertical-align: middle; }
.tl-anchor { color: #908060; }

/* --- テーブルレイアウト共通 --- */
.dtable { display: table; vertical-align: top; }
.dcell  { display: table-cell; vertical-align: top; }
.dcell-text { display: table-cell; vertical-align: top; word-break: break-all; }

/* --- セリフ吹き出し --- */
.talkarea-serif { max-width: 400px; display: inline-block; }

/* --- テキスト配置 --- */
.text-center { text-align: center; }

/* --- 受賞アイコン --- */
.award-icon { font-size: 150%; color: #f3bb44; }

/* --- 統計カード --- */
.stat-card { width: 250px; display: inline-block; text-align: center; }

/* --- 戦闘離脱テキスト --- */
.knockout { font-size: 16pt; font-style: italic; }

/* --- 増幅ボルテージアイコン --- */
.volt-xl { color: #cc88ff; font-size: 150%; text-shadow: 0 0 4px #cc88ff; }
.volt-lg { color: #30d0ee; font-size: 125%; text-shadow: 0 0 4px #30d0ee; }
.volt-sm { color: #f3bb44; font-size: 100%; text-shadow: 0 0 4px #f3bb44; }

/* --- ゴールデングロウ（増幅・星降等） --- */
.glow-gold { color: #f3bb44; text-shadow: 0 0 4px #f3bb44; }

/* --- 星降メダル --- */
.star-medal { color: #f3bb44; }

/* --- 爆弾関連 --- */
.bomb-count   { color: #dd4433; }
.bomb-explode { color: #dd4433; font-size: 26pt; }
.bomb-dmg     { color: #dd4433; font-size: 150%; }

/* --- タイトルバー --- */
.title-score-l { float: left; margin-left: 30px; margin-top: 30px; color: #fff0f099; }
.title-score-r { float: right; margin-right: 30px; margin-top: 30px; color: #fff0f099; }
.title-text    { color: #eebb99; font-size: 16pt; font-style: italic; }

/* --- ターンナビゲーション --- */
.turn-nav { font-weight: thin; font-size: 50%; }

/* --- ダメージ表示色 --- */
.dmg-ratio { color: #cccccc; }
.dmg-shock { color: #8855dd; }

/* --- ペナルティダメージ --- */
.text-penalty { color: #cc2222; }

/* --- 実績テキスト --- */
.text-achieve { color: #ccccdd; }

/* --- ステータス詳細ダンプ --- */
.stat-dump { color: #997777; font-size: x-small; }

/* --- バー間スペーサー --- */
.bar-spacer { margin: -10px; }

/* --- スキル名サブテキスト --- */
.text-xxs { font-size: xx-small; }

/* --- HPバー空白 --- */
.hp-blank { display: inline-block; }