*{
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	     -o-box-sizing:border-box;
	        box-sizing:border-box;
	padding:0;
	margin:0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html{
	margin:0px;
	padding:0px;
	min-height:100%;
	height:100%;
	font-size:1vw;
	overflow-y:scroll;
}

body{
	min-height:100%;
	 height:100%; 
	background-color:#35b9ff;

	font-size:0;
	padding:0px;
	position:relative;

	display:flex;
	-webkit-flex-direction:column;
	    -ms-flex-direction:column;
	        flex-direction:column;
	align-items: center;

	-webkit-text-size-adjust: 100%;
	font-family:"游ゴシック Medium","Yu Gothic Medium","游ゴシック体", YuGothic, "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ ゴシック","MS Gothic", sans-serif;
	

/*	
	background: -moz-linear-gradient(top, #35b9ff 0%,#5a2870 100%);
	background: -webkit-linear-gradient(top, #35b9ff 0%,#5a2870 100%);
	background: linear-gradient(to bottom, #35b9ff 0%,#5a2870 100%);
	background-attachment:fixed;

*/

	background-image:url(imgs/mainbg-pc.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-position:center bottom;

}

body.ios{
	background-image: transparent;
}
body.ios:before{
	content:"";
	display: block;
	position:fixed;
	left:0;
	top:0;
	margin:0;
	padding:0;	
	width:100vw;
	height:100vh;
	z-index:-1;
	background-image:url(imgs/mainbg-pc.jpg);
	background-size:cover;
	background-position:center bottom;
}


ruby{
	position:relative;
}
ruby>rt{
	position:relative;
	top:0.5em;
}
[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -0.7em;
    line-height:1;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    white-space:nowrap;
    text-align:center;
}

#nhkheaderbox,
#footerbox{
	min-width:100%;
	-webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;/* grow,shrink,basis?*/

}
#nhkheaderbox{
	width:100%;
}

#commonbody{
	flex: 1 0 auto;
	min-height:1px;
	
	display:flex;
	-webkit-flex-direction:column;
	    -ms-flex-direction:column;
	        flex-direction:column;
	align-items: center;
	
	/* background-size:16.66666%;*/

}

#bitheaderbox,
#bitfooterbox{
	min-width:100%;
	-webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;/* grow,shrink,basis?*/

}

#nhkheaderbox{
	border-bottom:3px solid #0b1f56;
}

#contentsbody{
	width:100%;
	flex: 1 0 auto;
	/* background-color:#ffffff; */
}

#commonbody{
	padding:0px;

	font-size:0px;
	line-height:1;
	margin:0px auto;
	width:100%;
	

	/*
		border-left:3px solid #0b1f56;
		border-right:3px solid #0b1f56;
		background-color:#0b1f56;
		width:1200px;
		padding-bottom:80px;
	*/


/*
	background-image:url(imgs/mainbg-pc.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-position:center bottom;
*/
}
body.nolimit #commonbody{
	width:100%;
	border:0px;
	
}

#bitheaderbox{
	margin-top:0%;
}
#bitheaderbox nav{
	width:100%;
	background-repeat: no-repeat;
	
	background-position:0% 0%;
	background-size:cover;
	image-rendering:optimize-contrast;
	position:relative;
	margin:0px auto;

	/*background-color:rgba(255,0,0,0.5);*/

}
#bitheaderbox nav:before{
	display:block;
	content:"";
	padding-top:11.6%;

	background-image:url(imgs/header/header-bg-pc.jpg);
	background-size:cover;
	background-position: center bottom;
}

body.nolimit #bitheaderbox{

}

#bitheaderbox nav>ul>li{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	font-size:0;
	width:13%;

}
#bitheaderbox nav>ul>li>a{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

#bitheaderbox nav>ul>li a{
	display:inline-block;
	background-size:contain;
	background-repeat: no-repeat;
}

#bitheaderbox  nav>ul>li:before{
	display:block;
	content:"";
	padding-top:57.9%;
	/* background-color:rgba(0,255,0,0.5); */
}

#bitheaderbox #hd2top:before{
	padding-top:64.01%;
}
#bitheaderbox #hd2top{
    width: 12.1%;
    left: 31.3%;
    top: 14%;
}
#bitheaderbox #hd2top a{
	background-image:url(imgs/header/header-logo.png);
}

#bitheaderbox #hd2idea:before{
	padding-top:120.4081632653061%;
}

#bitheaderbox #hd2idea{
    left: 53.6%;
    top: 4%;
    width: 8.4%;
}

#bitheaderbox #hd2idea a{
		background-image: url(imgs/header/header-send.png);
}




/*
#bitheaderbox #hd2nhkbase:before{
	padding-top:60.97%;
}
#bitheaderbox #hd2nhkbase{
	left:63.9%;
	top:18.8%;
}
#bitheaderbox #hd2nhkbase a{
	background-image: url(imgs/header/headerlink-to-nhkbase.png);
}
*/

#bitheaderbox #hd2mypage:before{
	padding-top:130.1470588235294%;
}
#bitheaderbox #hd2mypage{
    width: 7.7%;
    left: 44.5%;
    top: 2%;
}
#bitheaderbox #hd2mypage a{
	background-image: url(imgs/header/header-mypage.png);
	background-position: center bottom;
}
#bitheaderbox #hd2mypage #myavator{
	margin:0 auto;
	width:74%;
	display:block;
}



#contentsbody>h1.contenttitle{
	width:100%;
	border-top:solid 2px;
	border-bottom:solid 2px;
	text-align:center;
	padding:2px 0px;
	background-color:#0b1f56;
	background-image:url(imgs/caption-bg.png);
	background-position: center center;
	background-size:cover;

}
#contentsbody>h1.contenttitle>span{
	position:relative;
	width:100%;
	display:inline-block;
	background-size:contain;
	background-repeat: repeat-x;
}
#contentsbody>h1.contenttitle>span:before{
	content:"";
	display:block;
	padding-top:3%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center 0%;
	
	
}


/* smart-min */
@media screen and (max-width:480px){
	body{
		background-image: url(imgs/mainbg-sp.jpg);
	}
	body.ios:before{
		background-image: url(imgs/mainbg-sp.jpg);
	}

	#commonbody{
		width:100%;
		border:0px;

/*	
		background-image: url(imgs/mainbg-sp.jpg);
*/
	}
	#bitheaderbox>nav{

	}
	#bitheaderbox>nav:before{
		padding-top:33.0%;
		background-image:url(imgs/header/header-bg-sp.jpg);
		background-repeat: no-repeat;
	}
	
	#bitheaderbox>nav>ul>li{
		display:inline-block;
		position:absolute;
		top:0;
		left:0;
		font-size:0;
		width:23.5%;
	}
	
	#bitheaderbox #hd2top{
		width:24.0%;
		left:0.0%;
		top:24.0%;
	}

	#bitheaderbox #hd2idea{
		left: 51%;
		top: 2%;
		width: 26%;
	}
/*
	#bitheaderbox #hd2nhkbase{
		left:50.1%;
		top:50.8%;
	}
*/
	#bitheaderbox #hd2mypage{
		width: 23.5%;
		left: 25.1%;
		top: 3.2%;
	}

	
	#contentsbody>h1.contenttitle>span{
		width:100%;
	}
	#contentsbody>h1.contenttitle>span:before{
		padding-top:7.683073229291717%;
		/* background-position: 0% 0%;*/
	}
	
}

/* smart-min */
@media screen and (max-width:800px){

	#bitheaderbox>nav:before{
		padding-top:20.0%;
		background-repeat: no-repeat;
	}
	
	#bitheaderbox #hd2idea{
		left: 51%;
		top: 2%;
		width: 15.3%;
	}
	
	#bitheaderbox #hd2top{
		width: 20%;
		left: 6%;
		top: 10%;
	}

	#bitheaderbox #hd2mypage{
		width: 14.5%;
		left: 33.1%;
		top: 0%;
	}

	
}


/* web-max */
@media screen and (min-width:480.1px) and (max-width:1200px){
	#commonbody{
		width:100%;
		border:0px;
	}
	#contentsbody>h1.contenttitle>span{
		width:100%;
	}
}


/* comoverlayers ------------------------- */
#comoverlayer{
	display:none;
	position:fixed;
	background-color:rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	text-align:center;
	margin:0px;
	padding:0px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	/*
		z-index:199;
	 */
	z-index:501;
	
}
#comoverlayer.disableclickclose{
	background-color:#404040;
}

#comoverlayer #comoverlayerbox{
	display:block;
	position:absolute;
	background-color:transparent;
/*
	width:500px;
	height:300px;
*/
	text-align:center;
	margin:auto;
	padding:0px;
	left:-1000%;
	top:-1000%;
	right:-1000%;
	bottom:-1000%;
}

#comoverlayeriframecover{
	-webkit-overflow-scrolling: touch;
	height:100%;
	overflow: auto;
}

#comoverlayerbox #layermessage{
	background-color:#cccccc;
	font-size:2rem;
	border-radius:1rem;
	position:relative;
	padding-bottom:1%;
	width:100%;
	height:auto;
	line-height:1.6;
	color:#000000;
}
#comoverlayerbox #layermessage h2{
	border-radius:0.5em 0.5em 0 0 ;
	background-color:#ffff80;
	color:#ff0000;
	font-size:1.6em;
	font-weight:bold;
}
#comoverlayerbox #layermessage ul{
	list-style:none outside;
	margin:0 auto;
	padding:1% 0;
	display:inline-block;
}

#comoverlayerbox #layermessage ul li{
	border-bottom:1px solid #808080;
	text-align:left;
}

#comoverlayerbox a.layerbutton{
	border:1px solid #404040;
	display:inline-block;
	margin:1% 1%;
	min-width:30%;
	padding-left:0.5em;
	padding-right:0.5em;
	border-radius:0.3em;
	font-size:1.5em;
	text-decoration:none;
	color:#404040;
	background-color:#ffffff;
}
#comoverlayerbox a.layerbutton:hover{
	background-color:#ffffcc;
	color:#0000ff;
	border:1px solid #0000ff;
}

#comoverlayer a#comoverlayercloseicon{
	display:block;
	position:absolute;
	width:3rem;
	height:3rem;
	min-width:30px;
	min-height:30px;
	background-color:#cccccc;
	z-index:1000;
	right:2px;
	top:2px;
	border-radius:0.4em;
	border:1px solid #000080;
	
}

#comoverlayer #layermessage a#comoverlayercloseicon{
	width:1.5em !important;
	height:1.5em !important;
}

#comoverlayer a#comoverlayercloseicon:hover{
	background-color:#ffffff;
}
#comoverlayer a#comoverlayercloseicon:before,
#comoverlayer a#comoverlayercloseicon:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #000080;
}
#comoverlayer a#comoverlayercloseicon:before{
	-webkit-transform:rotate(45deg);
	   -moz-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	     -o-transform:rotate(45deg);
	        transform:rotate(45deg);
}
#comoverlayer a#comoverlayercloseicon:after{
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	    -ms-transform:rotate(-45deg);
	     -o-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

#comoverlayerbox iframe{
	-webkit-overflow-scrolling:touch;
	display:block;
	border:1px solid #808080;
}

#composteropen{
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.5);
	z-index:10000;
}
#compostermsgbox{
	position:absolute;
	left:20%;
	top:40%;
	bottom:40%;
	right:20%;		
	text-align:center;
	z-index:10000;
}
#compostermsgbox p{
	position:relative;
	width:100%;
	background-color:rgba(255,255,255,0.8);
	border-radius:100px;
	min-height:10%;
	font-size:3rem;
	line-height:2.0;
}

/* textScalingElements ------------------- */
p.txtscalingbox{
	display:block;
	position:relative;
	margin:0;
	padding:0;
	letter-spacing: -2px;
}
p.txtscalingbox>span{
	white-space: nowrap;
	-ms-word-wrap: nowrap;
	    word-wrap: nowrap;
}

p.txtscalingbox span.scaling{
	display:inline-block;
/*	position:absolute;*/
/*	left:0;*/
}


/* footers  */
#footerbox{
	border-top:3px solid #0b1f56;
}

/* 共通header隙間問題 */
#nhkheaderbox{
	background-color: #666666;
	height:auto !important;
	
}
/* 共通footer隙間問題 */
#footerbox{
	background-color: #666666;
}
#nol_footer div.nol_table div ul.nol_link:after{
	font-size:0;
}
#nol_loadcomplete{
	display:none;
}


#bitinfomationbox{
	transition: height 5s linear;
	overflow: hidden;
	background-image:none;
	width:100%;
	visibility: hidden;
}
#bitinfomationbox.open{
	visibility: visible;
}
	
#bitinfomationbox #bitinfoboxbody{
	background-color:#404040;
	width:100%;
	display:flex;

	font-size:15px;
	line-height:15px;
	position: relative;
}
#bitinfomationbox #bitinfoboxbody .infoitem{
	display:flex;
	align-items: stretch;
	width:100%;
}

#bitinfomationbox #bitinfoboxbody .infoitem.infotype-info{
	background:#ff0000;
	transform:translate(0,110%);
	transition:transform 0.5s linear;
}
#bitinfomationbox #bitinfoboxbody .infoitem.infotype-info span.caption{
	color:#ffffff;
	font-weight:bold;
	margin:2px;
	padding:5px 3px;
	flex-grow:0;
	white-space: nowrap;
}
#bitinfomationbox #bitinfoboxbody .infoitem p{
	margin:2px;
	padding:5px 3px;
	background-color: #ffffff;
	color:#ff0000;
	flex-grow:1;
	line-height: 1.3;
	line-break: strict;
	/* word-break: auto-phrase;*/
	word-break: keep-all;
	overflow-wrap: anywhere;
}

#bitinfomationbox #bitinfoboxbody .infoitem.easein{
	transform:translate(0,0);
}
#bitinfomationbox #bitinfoboxbody .infoitem.easeout{
	transition:transform 0.5s linear;
	transform:translate(-110%,0);
}

@media screen and (max-width:480px){
	#bitinfomationbox #bitinfoboxbody .infoitem{
		flex-direction: column;
	}
}

#sidenavtogglebtn{
	position:sticky;
	display:inline-block;
	/* top:7%; */
	top:4%;
	left:100%;
	width:6.5%;
	height:0;
	margin-right:1%;
/*	margin-bottom:1%;*/
	z-index:499;
	max-width:80px;
	min-width:60px;
}
@media screen and (max-width:980px){
	#sidenavtogglebtn{
		top:6%;
		max-width:60px;
		min-width:40px;
	}
}
@media screen and (max-width:480px){
	#sidenavtogglebtn {
		top: 6%;
		width:17.5%;
		max-width: unset;
		min-width: unset;
	}
}

/* ====================================================== */
#sidenavopenbg{
	display: none;
	cursor:pointer;
}
#sidenavopenbg.stagein{
	display: block;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:501;
	background-color:rgba(0,0,0,0.5);
}

#sidenavtogglebtn:before{
	content:"";
	display: block;
	padding-top:100%;
	background-image: url(imgs/sidebar/btn-menu.png);
	background-size: contain;
	background-repeat: no-repeat;
	cursor:pointer;
}

#sidenavbox{
	border-image-slice: 30%;
	position: fixed;
	width:50%;
	min-width:246px;
	max-width:246px;
	max-height:0%;
	overflow: hidden;
	height:auto;
	right:5px;
	bottom:5px;
	/* background-color: rgba(255,255,0,0.8);*/

	margin:0;
	padding:0;
	border-image: url(imgs/sidebar/guidelink-border.png);
	border-image-slice: 12 fill;
	border-image-width: 12px 12px;	
	overflow: hidden;;
	z-index:501;

	font-size:0;
	line-height: 0;
	
	/* animation:sidebox-slide 0.5s ease-out reverse;*/
	transition:max-height 0.2s;
}



#sidenavbox div{
	max-height: calc(100vh - 24px);
	margin:12px;
    overflow: hidden;
    overflow-y: auto;
	background-image:url(imgs/sidebar/guidelink-bg.png);
	background-size:10%;
/*
	animation:sidebox-slide-inbox 0.5s ease-out reverse;
*/
	transition:max-height 0.2s;

}

#sidenavbox div::-webkit-scrollbar {
    width: 0px;
}

#sidenavbox.stagein{
	max-height: 100%;
}
#sidenavbox.stagein div{
	max-height: calc(100vh - 24px);
}



#sidenavbox ul{
	list-style: none outside;
	overflow-y: hidden;
	height:auto;
	overflow: hidden;
	padding:20px 1.418439716312057% 10px 4.018912529550827%;
}
#sidenavbox ul:after{
	content:"";
	width:80%;
	margin:0 auto;
	display: block;;
	padding-top: 104.48%;
	background-image: url(imgs/sidebar/guidelink-deco.png);
	background-size: contain;
}
#sidenavbox ul li{
	margin:0;
	padding:0;
	height:46px;
	margin-bottom:5px;
	background-size: contain;
}
#sidenavbox ul li a{
	display:block;
	width:100%;
	height:100%;
}
#sidenavbox ul li#sbl2top{
	background-image:urL(imgs/sidebar/guidelink-to-top.png);
}
#sidenavbox ul li#sbl2about{
	background-image:urL(imgs/sidebar/guidelink-to-about.png);
}
#sidenavbox ul li#sbl2nhkbase{
	background-image:urL(imgs/sidebar/guidelink-to-nhkbase.png);
}
#sidenavbox ul li#sbl2send{
	background-image:urL(imgs/sidebar/guidelink-to-send2.png);
}
#sidenavbox ul li#sbl2game{
	background-image:urL(imgs/sidebar/guidelink-to-game.png);
}
#sidenavbox ul li#sbl2mypage{
	background-image:urL(imgs/sidebar/guidelink-to-mypage.png);
}
#sidenavbox ul li#sbl2adoption{
	background-image:urL(imgs/sidebar/guidelink-to-adoption.png);
}
#sidenavbox ul li#sbl2faq{
	background-image:urL(imgs/sidebar/guidelink-to-faq.png);
}

/* ====================================================== */

#sidemenubox{
	position:fixed;
	display:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url(imgs/sidebar/menu-bg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center bottom;
	z-index:501;
	overflow-y:hidden;

	grid-template-columns: 0.8fr 1fr minmax(40px,60px);
    align-content: stretch;
    justify-content: start;
    align-items: stretch;
    justify-items: stretch;	

	opacity: 0;
	animation:0.5s sidememustagein;

	/* font-family:"Gothic MB101 Heavy JIS2004";*/
}

body.ios #sidemenubox{
	background-image:none;
}
body.ios #sidemenubox:before{
	position:fixed;
	content:"";
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:-1;
	background-image: url(imgs/sidebar/menu-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}

@keyframes sidememustagein{
	0%{
		display:grid;
		opacity:0;
	}
	1%{
		display:grid;
		opacity:0;
	}
	100%{
		display:grid;
		opacity:1;
	}
}

#sidemenubox.stagein{
	display:grid;
	opacity: 1;
}
#sidemenubox #sidemenulogo{
	background-image:url(imgs/top/top-logo-pc.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position:aboslute;
	margin:20% 5% 0% 5%;

	grid-column: 1/2;
	grid-row: 1/2;

}
#sidemenubox #sidemenulogo:before{
	content:"";
	display: block;
	padding-top:64.01%;
}


#sidemenubox #sidemenuclose{
	background-color:transparent;
	border:0;
	background-image: url(imgs/sidebar/menu-close.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position:absolute;
	top:1%;
	right:1%;
	width:100%;

	grid-column: 3/4;
	grid-row: 1/2;

}
#sidemenubox #sidemenuclose:before{
	content:"";
	display:block;
	padding-top:100%;
}

#sidemenubox #sidemenulist{
	position:absolute;
	top:1%;
	width:98%;
	max-height:98%;
	overflow-y:auto;
	margin:0 auto;
	font-size:3vw;
	color:#ffffff;
	font-weight:bold;

	list-style:none outside;

	

	overscroll-behavior-y: none;
	scrollbar-gutter: stable;

	grid-column: 2/3;
	grid-row: 1/2;
}
#sidemenubox #sidemenulist li{
	text-align: center;
	margin-bottom:3px;
	cursor: pointer;
	user-select: none;
	line-height:1.63;
	
	/* overflow-x:hidden;*/
}
#sidemenubox #sidemenulist a,
#sidemenubox #sidemenulist div{
	position:relative;
	padding-right:9vw;
	white-space:nowrap;
	display: block;
}
#sidemenubox #sidemenulist div.new:before,
#sidemenubox #sidemenulist a.new:before{
	content:"NEW!";
	color:#ff00a8;
	display:block;
	position:absolute;
	right:2%;
	top:0;
}
#sidemenubox #sidemenulist li.sublink div>p:after{
	content:"▼";
}
#sidemenubox #sidemenulist li.sublink.open div{
	color:#ff66eb;
}
#sidemenubox #sidemenulist li.sublink.open div>p:after{
	content:"▲";
}

#sidemenubox #sidemenulist>li{
	padding:0 1%;
}

#sidemenubox #sidemenulist li>ul>li{
	text-align: left;
	text-indent: 1vw;
	border:2px solid #ff00ff;
	border-radius: 5px;
}
#sidemenubox #sidemenulist a{
	display: block;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
}




@media screen and (orientation: portrait){
	#sidemenubox{
	
		grid-template-columns: 1fr minmax(40px,60px);
		grid-template-rows: auto 1fr;
		padding:2% 1%;

	}
	
	#sidemenubox #sidemenulogo{
		background-image:url(imgs/sidebar/menu-logo-sp.png);
	
		grid-column: 1/2;
		grid-row: 1/2;
		width:90%;
		margin-top:0%;
		margin-left:1%;
		margin-top:minmax(20px,5%);
	}
	#sidemenubox #sidemenulogo:before{
		padding-top:21.61520190023753%;
	}

	#sidemenubox #sidemenuclose{
		margin-top:1%;
		margin-right:1%;
		
		grid-column: 2/3;
		grid-row: 1/2;
	}
	
	#sidemenubox #sidemenulist{
		top:2%;
		max-height:97%;
	
		width:100%;
		font-size:4vw;


		grid-column: 1/3;
		grid-row: 2/3;
	
	}
	#sidemenubox #sidemenulist div,
	#sidemenubox #sidemenulist a{
		padding-right:15vw;
	}

}

@media screen and (orientation: portrait) and (max-width:600px){
	#sidemenubox #sidemenulist{
		font-size:6vw;
	}
	#sidemenubox #sidemenulist div,
	#sidemenubox #sidemenulist a{
		padding-right:20vw;
	}

}












/* colors */
.cred{
	font-weight:bold;
	color: #ff0000;
}
.cblue{
	font-weight:bold;
	color: #0000ff;
}
.cgreen{
	font-weight:bold;
	color: #008000;
}
.cdgreen{
	font-weight:bold;
	color: #005000;
}
.clgreen{
	font-weight:bold;
	color: #90c000;
}

.cdblue{
	font-weight: bold;
	color: #2000b0;
}
.clblue{
	color: #0080f8;
	font-weight: bold;
}
.caqua{
	color: #00d0f0;
	font-weight: bold;
}

.cblack{
	font-weight: bold;
	color: #000000;
}
.cgray,
.cglay{
	font-weight: bold;
	color: #808080;
}

.cgold{
	font-weight: bold;
	color: #ffa000;
}

.cpink{
	font-weight: bold;
	color: #ff00ff;
}
.cpurple{
	color: #8000ff;
	font-weight: bold;
}
.cyellow{
	color: #CCCC33;
	font-weight: bold;
}
.cdyellow{
	color: #989800;
	font-weight:bold;
}
.clyellow{
	color: #ffff00;
	font-weight: bold;
}
.cnblack{
	background-color: #000000;
}

.corange{
	color: #ff9040;
	font-weight: bold;
}
.cdorange{
	color: #c15f18;
	font-weight: bold;
}
.cwinered{
	color: #a00020;
	font-weight: bold;
}

.cbrown{
	color: #804000;
	font-weight: bold;
}
.cemerald{
	color: #20e020;
	font-weight: bold;
}
.cseagreen{
	color: #20a060;
	font-weight: bold;
}

.cpeagreen{
	color: #ccff33;
	font-weight: bold;
}
.cdpeagreen{
	color: #99cc33;
	font-weight: bold;
}
.cd2peagreen{
	color: #77aa11;
	font-weight: bold;
}
.cazuki{
	color: #aa6666;
	font-weight: bold;
}

.cflesh{
	color:#fce2c4;
	font-weight:bold;
}

.cwhite{
	color:#ffffff;
	font-weight:bold;
}

/* charcter color */
.cseiko {
	color: #209000;
	font-weight: bold;
}
.casmin{
	font-weight:bold;
	color: #ef08b6;
}
.cmasunyo{
	font-weight: bold;
	color: #4040ff;
/*	color: #ff40cc;	*/

}
.ctakatlin{
	font-weight: bold;
	color: #ff6817;
}


html:after {
	content: "";

	background-image:url(imgs/sidebar/menu-bg.jpg);
}