.dmmgamelist {
	text-align:center;
	font-size: small;
	margin:0 30px 16px 30px;
	background-color: #CCFFFF;
	border: 1px solid gray;

}

.dmmgamelist ul {
	margin: 0px;
	padding: 0px;
}
.dmmgamelist li {
	display: block;
	float: left;
	padding-right: 10px;
	padding-left: 10px;
	border-left:2px solid gray;
}

.dmmgamelist .new {
	margin-left:2px;
	color:red;
	font-weight:bold;
	background-color:yellow;
}
.dmmtopimage {
	text-align:center;
	margin: 10px 10px 10px 10px;
}

.news-column-list h1.maintitle {
	margin: 10px 0px 20px 0px;
	padding: 0px;
	background-color: #FFFFFF;
	font-size: x-large;
	font-weight:bold;
	border: none;
}

.dmmlist_box {
	float: left;
	width: 386px;
	height: 160px;	
	margin-left:3px;
	background-color: #FFFFFF;
	font-size: small;
	line-height: 120%;

/*	border: 1px solid gray;*/
}
.dmmlist_box img {
	width: 160px;
}

.dmmlist_box h1 {
	margin: 0px;
	padding: 0px;
	background-color: #FFDDDD;
	font-size: small;
	font-weight:bold;
	border: none;
}

.dmmlist_box h2 {
	margin: 0px;
	padding: 0px;
	background-color: #FFDDDD;
	font-size: small;
	font-weight:bold;
	border: none;
}

.dmmpickup_box {
	margin-left:3px;
	margin:0 30px 16px 30px;
	border: 1px solid gray;
	background-color: #FFFFFF;
	font-size: small;
	line-height: 120%;
}
.dmmpickup_box img {
	width: 268px;
}

.dmmpickup_box h1 {
	margin: 0px;
	padding: 0px;
	background-color: #FFDDDD;
	font-size: small;
	font-weight:bold;
	border: none;
}
.dmmpickup_box .pickup_images {
	display: inline; 
}

.dmmpickup_box .pickup_images img{
	float:none;
	width: auto;
	height: 60px;
}

.dmmgame_banner_bottom {
	text-align: center;
	margin-bottom:10px;
}


/* ------------------------------------------
navi
------------------------------------------*/

.topnavi {
	margin: 10px 10px;
	display: block;
	overflow:hidden;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
}

.navi_pre {
	background: linear-gradient(to bottom,#fff,#eef);
	background: -ms-linear-gradient(top, #fff,#eef);
	background: -moz-linear-gradient(top,#fff,#eef);
	background: -webkit-gradient(linear,left top,left bottom, from(#fff),to(#eef));
	width: 30%;
	height: 40px;
	border:solid 1px #ccc;
	border-radius: 4px;
	float:left;
	text-align: left;
	padding-left:10px;
}
.navi_post {
	background: linear-gradient(to bottom,#fff,#eef);
	background: -ms-linear-gradient(top, #fff,#eef);
	background: -moz-linear-gradient(top,#fff,#eef);
	background: -webkit-gradient(linear,left top,left bottom, from(#fff),to(#eef));
	width: 30%;
	height: 40px;
	border:solid 1px #ccc;
	border-radius: 4px;
	float:right;
	text-align: right;
	padding-right:10px;
}

.topnavi a         { color: #000000;	text-decoration: none;}
.topnavi a:link    { color: #000000;	text-decoration: none;}
.topnavi a:visited { color: #000000;	text-decoration: none;}
.topnavi a:active  { color: #000000;	text-decoration: none;}
.topnavi a:hover   { color: #000000;	text-decoration: none;}




/* ------------- */

#tok{
	width:722px;
	height:250px;
	-webkit-padding-start:0;
	padding: 0 0 0 0;
	margin:0 0 16px 30px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	overflow:hidden;
}

#tok li {
	display: list-item;
	list-style-type: none;
}

#tok li input{
	display:none;
}

#tok>li>a{
	background-color:#CCC;
	font-size:170px;
	line-height:200px;
	position:absolute;
	top:0;left:0;
	width:540px;
	height:250px;
	border-right:2px solid #000;
}
#tok>li>a>img{
	width:540px;
	height:250px;
	border:0;
}

#tok>li.c:before{
	position:absolute;
	display:block;
	content:"";
	width:15px;
	height:13px;
	background: url(data:image/gif;base64,R0lGODlhDwANAKEAAAAAAP///wAAAAAAACH5BAEKAAIALAAAAAAPAA0AAAIjlI8Gm7kbmnqhtgeqRlj7CXleJ4pgVloHaTrUJ7HSSs3cUgAAOw==) center right no-repeat;
	left:527px;
	top:120px;
	z-index:3;
}
#tok>li.c:after{
	position:absolute;
	display:block;
	content:"";
	border:2px solid #fff;
	width:176px;
	height:78px;
	left:542px;
	top:84px;
	z-index:3;
	box-shadow:0 0 3px #000 inset;
}
#tok>li>img,
#tok>li>label,
#tok>li>label>img{
	display:block;
	position:absolute;
	width:180px;
	height:82px;
	right:0;
}
#tok>li>label>img{
	filter: alpha(opacity=30);
}
#tok>li>label{
	cursor: pointer;
}


#tok>li>label.n{
	top:168px;
}
#tok>li>img{
	border:2px solid #000;
	border-width:2px 0;
	top:82px;
}
#tok>li>label:after{
	position:absolute;
	display:block;
	content:"";
	width:180px;
	height:168px;
	top:0;
	right:0;
	z-index:4;
	background-color: rgba(0,0,0,0.6);
}

#tok>li>input:checked~label:after,
#tok>li.c>label:after{
	background:rgba(0,0,0,0.6) url(data:image/gif;base64,R0lGODlhEQANAIABAP///wAAACH5BAEKAAEALAAAAAARAA0AAAIfjG+Ay+AMnYRIWhqsjnfXm4CZGE7eopFoipVPW8JVAQA7) 150px 120px no-repeat;
	top:-84px;
}

#tok>li>input:checked~label.n:after,
#tok>li.c>label.n:after{
	background:rgba(0,0,0,0.6) url(data:image/gif;base64,R0lGODlhEQANAIABAP///wAAACH5BAEKAAEALAAAAAARAA0AAAIgRI6pwOrH4kuxzlDz05pa+GEhKHVLJk2ocYlp68LUVAAAOw==) 150px 40px no-repeat;
	top:0;
}

#tok>li>input:checked~label:hover:after,
#tok>li.c>label:hover:after{
	background-color: rgba(0,0,0,0.2);
}


@-webkit-keyframes DI{from{-webkit-transform:translate(0,-84px)}30%{-webkit-transform:translate(0,-84px)}to{-webkit-transform:translate(0,0)}}
@-webkit-keyframes DO{from{-webkit-transform:translate(0,0)}30%{-webkit-transform:translate(0,0)}to{-webkit-transform:translate(0,84px)}}
@-webkit-keyframes UI{from{-webkit-transform:translate(0,84px)}30%{-webkit-transform:translate(0,84px)}to{-webkit-transform:translate(0,0)}}
@-webkit-keyframes UO{from{-webkit-transform:translate(0,0)}30%{-webkit-transform:translate(0,0)}to{-webkit-transform:translate(0,-84px)}}
@-webkit-keyframes FI{from{opacity:0}30%{opacity:0}to{opacity:1}}
@-webkit-keyframes FO{from{opacity:1}30%{opacity:1}to{opacity:0}}
@-webkit-keyframes S{from{opacity:0}to{opacity:0}}
@-webkit-keyframes H{from{opacity:1}to{opacity:1}}
@keyframes DI{from{transform:translate(0,-84px)}50%{transform:translate(0,-84px)}to{transform:translate(0,0)}}
@keyframes DO{from{transform:translate(0,0)}50%{transform:translate(0,0)}to{transform:translate(0,84px)}}
@keyframes UI{from{transform:translate(0,84px)}50%{transform:translate(0,84px)}to{transform:translate(0,0)}}
@keyframes UO{from{transform:translate(0,0)}50%{transform:translate(0,0)}to{transform:translate(0,-84px)}}
@keyframes H{from{opacity:1}to{opacity:1}}



@keyframes FI{from{opacity:0}50%{opacity:0}to{opacity:1}}
@keyframes FO{from{opacity:1}50%{opacity:1}to{opacity:0}}

@keyframes S{from{opacity:0}to{opacity:0}}


#tok>li>a,
#tok>li>img,
#tok>li>label{
	z-index:0;
}

#tok>li.c>a,
#tok>li.c>img,
#tok>li.c>label,
#tok>li>input:checked~a,
#tok>li>input:checked~img,
#tok>li>input:checked~label{
	z-index:2;
}


#tok>li>input:not(:checked)~a,
#tok>li:not(.c)>a{
	opacity:0;
	-webkit-animation:FO 0.4s;
	animation:FO 0.4s;
}
#tok>li.c>a,
#tok>li>input:checked~a{
	opacity:1;
	-webkit-animation:FI 0.4s;
	animation:FI 0.4s;
}



#tok.u>li>img,
#tok.u>li>label{
	-webkit-animation:UO 0.4s;
	animation:UO 0.4s;
}
#tok.u>li.c:after,
#tok.u>li.c:before,
#tok.u>li.c>img,
#tok.u>li.c>label{
	-webkit-animation:UI 0.4s;
	animation:UI 0.4s;
}
#tok.u>li.c>label:after{
	-webkit-animation:DI 0.4s;
	animation:DI 0.4s;
}

#tok.u>li:not(.c):after,
#tok.u>li:not(.c):before{
	opacity:0;
	animation:S 0.4s;
}



#tok.d>li>img,
#tok.d>li>label{
	-webkit-animation:DO 0.4s;
	animation:DO 0.4s;
}
#tok.d>li.c:after,
#tok.d>li.c:before,
#tok.d>li.c>img,
#tok.d>li.c>label{
	-webkit-animation:DI 0.4s;
	animation:DI 0.4s;
}
#tok.d>li.c>label:after{
	-webkit-animation:UI 0.4s;
	animation:UI 0.4s;
}
#tok.d>li:not(.c):after,
#tok.d>li:not(.c):before{
	opacity:0;
	animation:S 0.4s;
}


#tok>li>input:not(:checked)~label:after,
#tok>li:not(.c)>label:after{
	opacity:0;
}

#tok>li.c>label>img,
#tok>li>input:checked~label>img{
	opacity:1;
}
#tok>li>input:not(:checked)~label>img,
#tok>li:not(.c)>label>img{
	opacity:0;
	-webkit-animation:H 0.4s;
	animation:H 0.4s;
}


#tok{
	-webkit-animation:S 0.4s;
	animation:S 0.4s;
}