@charset "utf-8";
body#cm{
	color:#222;
	font-family:"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, arial,helvetica,clean,sans-serif;
	background-color:hsl(0,0%,100%);
}

/**************************************
骨格
***************************************/
main#cmmain{}
@media screen and (max-width:699px) {
}
@media screen and (min-width:700px) {
body#cm{min-width:960px;}
#cmleft{
    width:245px;
    height:auto;
	padding-bottom:40px;
    float:left;
	text-align:left;
}
#cmright{
    width:655px;
	padding-bottom:40px;
    float:right;
}
}



/**************************************
ヘッダー
***************************************/
body#cm header{background-color:hsl(0,0%,0%);}
#cmhead{
	color:hsl(0,0%,100%);
	text-align:left;
	padding:5px;
	margin:auto;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
#cmhead a{color:#FF0;}
.cmhead2{}
.cmhead3{}
.cmhead3 span{
	font-size:1.2rem;
	line-height:150%;
	color:hsl(0,0%,0%);
	background-color:hsl(0,0%,100%);
	padding:8px;
	margin:5px 0;
	border-radius:6px;
	display:block;
	overflow:hidden;
}
.cmhead3 span img{
	margin-left:10px;
	float:right;
	border:1px solid #999;
}
@media screen and (max-width:699px) {
#cmhead{
	width:100%;
}
.cmhead2 img{
	width:100%;
}
.cmhead3{
	display:none;
}
}
@media screen and (min-width:700px) {
#cmhead{
	width:960px;
	display:table;
}
.cmhead2{
	width:400px;
	vertical-align:middle;
	display:table-cell;
}
.cmhead3{
	vertical-align:middle;
	display:table-cell;
}
}


body#cm nav{
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(25,100%,45%,0.0)), to(hsla(25,100%,45%,1.0)));
	background:linear-gradient(to bottom, hsla(25,100%,45%,0.0), hsla(25,100%,45%,1.0));
	background-color:hsla(40,100%,50%,1.0);
}
ul.cmheadmn{
	padding:0;
	margin:0;
	margin:auto;
	list-style:none;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.cmheadmn li{
	text-align:left;
	padding:0;
	margin:0;
	float:left;
	border-right:1px solid #333;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.cmheadmn a{
	color:hsla(0,0%,100%,1.0);
	text-align:center;
	text-decoration:none;
	padding:10px 5px;
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(25,100%,45%,0.0)), to(hsla(25,100%,45%,1.0)));
	background:linear-gradient(to bottom, hsla(25,100%,45%,0.0), hsla(25,100%,45%,1.0));
	background-color:hsla(40,100%,50%,1.0);
	display:block;
}
ul.cmheadmn a:hover{background-color:hsla(50,100%,50%,1.0);}
@media screen and (max-width:699px) {
ul.cmheadmn li{width:50%;}
ul.cmheadmn li:nth-child(2){border-right:none;}
}
@media screen and (min-width:700px) {
ul.cmheadmn{width:960px;}
ul.cmheadmn li{width:130px;}
ul.cmheadmn li:first-child{border-left:1px solid #333}
}


/**************************************
メインコンテンツ
***************************************/
.cmsbtit{
	font-size:1.5em;
	font-weight:bold;
	border-bottom:3px dotted hsl(0,0%,0%);
	padding-bottom:5px;
	margin-bottom:10px;
}



/**************************************
 TOPページ
***************************************/
.cmpkup00{
	width:100%;
	text-align:left;
	padding:10px;
	border:5px solid #999;
	background-color:hsl(0,0%,100%);
	border-radius:10px;
	box-shadow:#DDD 2px 2px 3px;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cmpkup01{
	font-size:1.6rem;
	color:hsl(0,0%,100%);
	text-align:center;
	padding:10px 0;
	margin-bottom:10px;
	background-color:hsl(0,0%,0%);
	border-radius:4px;
}
.cmitem{
	font-size:1.6rem;
	font-weight:bold;
	height:2em;
	line-height:2em;
	margin-bottom:5px;
	border-bottom:2px dotted hsl(0,0%,0%);
	overflow:hidden;
}
.cmitem a{
	color:hsl(0,0%,0%);
	text-decoration:none;
}
ul.rdmsml{
	width:100%;
	padding:5px;
	margin:10px 0;
	border:1px solid #999;
	background-color:#eee;
	list-style:none;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
	border-radius:10px;
}
ul.rdmsml li{
	width:20%;
	width:calc(100% / 5);
	width:-webkit-calc(100% / 5);
	padding:5px;
	margin:0;
	float:left;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.rdmsml li img{width:100%;}

/** ranking **/
ul.cmtprk00{
	padding:0;
	margin:30px 0;
	overflow:hidden;
	list-style:none;
}
ul.cmtprk00 li{
	text-align:center;
	padding:5px;
	float:left;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cmrk{
	font-family:itdkfont;
	font-size:2.5rem;
	line-height:150%;
	color:hsl(0,0%,100%);
	padding:5px 0;
	background-color:hsl(0,0%,0%);
}
.cmcom{
	color:hsl(0,0%,100%);
	padding:5px;
	overflow:hidden;
	border-left:1px solid hsl(0,0%,0%);
	border-right:1px solid hsl(0,0%,0%);
	background-color:#F60;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.cmdtl{
	padding:5px;
	border:1px solid hsl(0,0%,0%);
	border-top:none;
}
.cmdtl img{
	height:150px;
	margin-bottom:5px;
}
.cmdtl h3{
	font-weight:bold;
	padding:5px;
	border-top:2px dotted hsl(0,0%,0%);
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

@media screen and (max-width:699px) {
.rdmct{margin:20px 10px;}
.cmpkup02{
	text-align:center;
	margin:10px 0;
}
.cmpkup02 img{
	width:80%;
	margin:auto;
	border:1px solid #CCC;
}
.cmpkup03{}
ul.cmtprk00 li{
	width:50%;
}
}
@media screen and (min-width:700px) {
.rdmct{
	width:100%;
	margin:10px 0;
	display:table;
}
.rdmlf{
	width:540px;
	display:table-cell;
	vertical-align:middle;
}
.rdmrt{
	padding-left:20px;
	display:table-cell;
	vertical-align:middle;
}
.cmpkup02{
	width:130px;
	text-align:center;
	float:left;
}
.cmpkup02 img{
	width:120px;
	border:1px solid #CCC;
	margin:auto;
}
.cmpkup03{
	width:370px;
	float:right;
}
ul.cmtprk00 li{
	width:20%;
}
ul.cmtprk00 li:nth-child(6){display:none;}
}

/**************************************
リストの設定 /cm/list/
***************************************/
ul.cmlst{
	width:100%;
	padding:0;
	margin:30px 0;
	list-style:none;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.cmlst li{
	padding:5px;
	float:left;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.cmlst li a{
	color:#333;
	text-decoration:none;
}
ul.cmlst li div{
	padding:10px;
	border:1px solid hsl(0,0%,0%);
	overflow:hidden;
}
ul.cmlst li a:hover div{
	background-color:#eee;
	-webkit-transition:background-color 0.3s;
	transition:background-color 0.3s ease-in;
}
ul.cmlst li div img{
	width:60px;
	border:1px solid #CCC;
	float:right;
}
ul.cmlst li div h3{
	font-weight:bold;
}
@media screen and (max-width:699px) {
ul.cmlst li{width:100%;}
}
@media screen and (min-width:700px) {
ul.cmlst li{
	width:50%;
	width:calc(100% / 2);
	width:-webkit-calc(100% / 2);
}
}



/**************************************
プロフィール /cm/profile/
***************************************/
.mmnmbg{
	color:hsla(0,0%,0%,1.0);
	text-align:center;
	padding:0;
	margin-bottom:1.5rem;
	border-bottom:1px solid hsl(0,0%,0%);
	box-shadow:0px 3px 3px hsla(0,0%,0%,0.2);
	position:relative;
}
.mmnmbg h2{
	line-height:1em;
	padding:20px 5px;
}
.mmnmbg span{
	font-family:prfont;
	line-height:100%;
	padding:10px 0;
	display:block;
	background:#FC0;
}

dl.cmprf00{
	width:100%;
	text-align:left;
	border:1px solid hsl(0,0%,0%);
	background-color:hsl(0,0%,100%);
	margin-bottom:15px;
	border-radius:10px;
	box-shadow:2px 2px 3px hsla(0,0%,0%,0.2);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cmmntitle{
	font-size:1.5em;
	font-weight:bold;
	padding:5px 0;
	margin-bottom:5px;
	border-bottom:2px dotted hsl(0,0%,0%);
}
.cmmntitle span{
	color:#999;
	font-size:1.0rem;
	font-weight:normal;
	margin-bottom:5px;
	display:block;
}
ul.cmsubdtl{
	padding:0;
	margin:0;
	list-style:none;
}
ul.cmsubdtl li{
	padding:0;
	margin:0;
}
ul.cmsubdtl li span{
	line-height:1em;
	width:70px;
	text-align:center;
	padding:5px;
	margin:2px 10px 2px 0;
	background-color:#DDC;
	border:1px solid #ccc;
	display:inline-block;
}
.cmpr{
	border-top:1px dotted #999;
	padding:15px;
	margin:20px 0;
}
.cmrevtit{
	color:hsl(0,0%,0%);
	background-color:#F90;
	padding:10px;
	margin:30px 0 15px;
	border-radius:5px;
}
ul[class^="cmrv"]{
	padding:5px;
	margin:0;
	list-style:none;
}
ul[class^="cmrv"] li{
	font-size:1.2rem;
	border-bottom:1px dotted #666;
	padding:5px;
	margin:0;
}
ul[class^="cmrv"] li p{
	margin:5px 0 0 10px;
}
ul.cmrv01{
	height:150px;
	border:1px solid #333;
	overflow-y:scroll;
}
@media screen and (max-width:699px) {
.mmnmbg h2{font-size:1.5em;}
.mmnmbg span{font-size:0.8em;}
dl.cmprf00{
	padding:10px;
}
dl.cmprf00 dt{
	text-align:center;
	padding:0;
	margin:0;
}
dl.cmprf00 dt img{
	width:80%;
	margin:auto;
}
dl.cmprf00 dd{
	padding:0;
	margin:0;
}
.cmprqr{display:none;}
}
@media screen and (min-width:700px) {
.mmnmbg h2{font-size:2em;}
dl.cmprf00{
	padding:30px;
	display:table;
}
dl.cmprf00 dt{
	width:220px;
	vertical-align:top;
	display:table-cell;
}
dl.cmprf00 dd{
	padding-left:30px;
	vertical-align:top;
	display:table-cell;
}
.cmprqr{
	text-align:center;
	border:3px double #CCC;
	padding:15px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cmprqr img{
	text-align:center;
	display:block;
	margin:auto;
	margin-bottom:10px;
}
}

/***コントロール***/
ul.cmmsctl{
	width:100%;
	display:table;
	margin:0 0 15px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
ul.cmmsctl li{
	padding:0;
	margin:0;
	display:table-cell;
	vertical-align:middle;
}
ul.cmmsctl li:nth-child(2),ul.cmmsctl li:nth-child(3){
	width:45px;
}
ul.cmmsctl li:nth-child(4){
	width:150px;
	padding-left:5px;
}
.cmmtctl01,.cmmtctl02{
	color:hsl(0,0%,100%);
	height:40px;
	text-align:center;
    box-shadow:
		0 1px hsla(0,0%,100%,0.4) inset,
		1px 0 hsla(0,0%,100%,0.4) inset,
		0 -1px hsla(0,0%,0%,0.7) inset,
		-1px 0 hsla(0,0%,0%,0.7) inset;
	position:relative;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cmmtctl01{
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(25,100%,45%,0.0)), to(hsla(25,100%,45%,1.0)));
	background:linear-gradient(to bottom, hsla(25,100%,45%,0.0), hsla(25,100%,45%,1.0));
	background-color:hsla(40,100%,50%,1.0);
}
.cmmtctl02{
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(0,0%,26%,0.0)), to(hsla(0,0%,26%,1.0)));
	background:linear-gradient(to bottom, hsla(0,0%,26%,0.0), hsla(0,0%,26%,1.0));
	background-color:hsl(0,0%,68%);
}
.cmmtctl01 img,.cmmtctl02 img{
	height:28px;
}
.cmmtctl01 span,.cmmtctl02 span{
	font-size:1.0rem;
	position:absolute;
	bottom:0;
	left: 0;
	right: 0;
	margin: auto;
}
.cm-slide{
	position:relative;
}
.cm-slide_none {
	width:150px;
	height:32px;
	position:relative;
	display:block;
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(0,0%,20%,1.0)), to(hsla(0,0%,20%,0.0)));
	background:linear-gradient(to bottom, hsla(0,0%,20%,1.0), hsla(0,0%,20%,0.0));
	background-color:hsla(0,0%,40%,1.0);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}
.cm-slide input{
	position:absolute;
	top:0px;
	width:0px;
	height:0px;
	display:block;
}
.cm-slide_vol {
	width:150px;
	height:32px;
	position:absolute;
	left:0px;
	top:0px;
    box-shadow:
		0 1px hsla(0,0%,100%,0.4) inset,
		1px 0 hsla(0,0%,100%,0.4) inset,
		0 -1px hsla(0,0%,0%,0.7) inset,
		-1px 0 hsla(0,0%,0%,0.7) inset;
	background:-webkit-gradient(linear, left top, left bottom, from(hsla(25,100%,45%,0.0)), to(hsla(25,100%,45%,1.0)));
	background:linear-gradient(to bottom, hsla(25,100%,45%,0.0), hsla(25,100%,45%,1.0));
	background-color:hsla(40,100%,50%,1.0);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;/* Android2… */
}












/** 検索 /cm/search/ **/
.cmschmain{
	color:hsl(0,0%,100%);
	text-align:left;
	border-bottom:6px double hsl(0,0%,100%);
	padding:15px 70px;
	background-color:hsl(0,0%,0%);
}


/****************************
 クエスト /cm/quest/ 
****************************/
.qst-no{
	border:1px solid #999;
	padding:2px;
	margin-bottom:10px;
	background-color:hsl(0,0%,100%);
	box-shadow:#DDD 2px 2px 3px;
}
.hstnb{
	color:hsl(0,0%,100%);
	text-align:center;
	padding:5px;
	background-color:hsl(0,0%,0%);
}
.cmcmt{
	padding:5px 10px;
}
.cmtit{
	color:#069;
	border-bottom:2px dotted #069;
	margin-bottom:5px;
}



/****************************
契約者専用ページ
****************************/
.login00{
	width:650px;
	background-color:hsl(0,0%,100%);
	margin:auto;
	padding-bottom:30px;
}
.login01{
	text-align:left;
	width:550px;
	margin:auto;
}
.login02{
	text-align:left;
	width:370px;
	margin:auto;
}
.login03{
	text-align:left;
	width:750px;
	padding:0 50px 30px 50px;
	background-color:hsl(0,0%,100%);
	margin:auto;
	padding-bottom:30px;
}
.saptitle{
	width:850px;
	text-align:center;
	color:hsl(0,0%,100%);
	height:50px;
	line-height:50px;
	font-size:1.5em;
	background-color:#F60;
	margin:auto;
}
.cmkeiyaku{
	padding-top:30px;
	padding-bottom:10px;
	border-bottom:1px solid #999;
	margin-bottom:25px;
}
	
.cmqr{
	padding:5px 15px;
	border:3px double #666;
}
.cmcau{
	padding:10px 20px;
	border-top:2px dotted #999;
	border-bottom:2px dotted #999;
	margin-bottom:10px;
}
.cmtitle{
	text-align:left;
	padding:10px;
	background-color:#FC3;
	border-right:1px solid #999;
	border-left:1px solid #999;
}
.cmsakuhin{
	text-align:center;
	color:hsl(0,0%,100%);
	padding:10px;
	background-color:hsl(0,0%,0%);
	border-radius:10px 10px 0 0;
}
.cmpic{
	text-align:center;
	width:250px;
	float:left;
}
.cmpic img{
	border:1px solid #CCC;
}
.cmmndtl{
	border:1px solid #999;
	padding:20px;
	background-color:hsl(0,0%,100%);
	margin-bottom:50px;
	box-shadow:#DDD 2px 2px 3px;
	border-radius:0 0 10px 10px;
}