@charset "utf-8";
/* **************************************************************** *
 * CSS Document
 * edit 2013.12.06
 * **************************************************************** */
body{
	background-color:#ede5cd;
	color:#332b17;
	font: 15px/160% "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic","ヒラギノ角ゴ","メイリオ","Meiryo","Lucida Grande","Lucida Sans Unicode","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro",Helvetica,Arial,Verdana,sans-serif;
	text-align:left;
	position:relative;
	font-weight:bold;
}
a:link,a:visited{
	color:#3eaab9;
	text-decoration:none;
	-moz-transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;
}
a:active,a:hover{
	color:#1f243c;
	text-decoration:none;
}
img{
	border:none;
	max-width:100%;
}
.emBold{
	font-weight:bold;
	
}
#wrapper{
	display:table;
	table-layout: fixed;
	width:100%;
	z-index:-1;
	left:0;top:0;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.tbl{
	display:table;
	width:100%;
}
.tbl .cel{
	display:table-cell;
	float:left;
	width:50%;
}
.sp{
	display:none;
}
.attention{
	font-size:90%;
	line-height:110%;
	color:#666
}
.center{text-align:center;}
strong{
	color:#9f302a;
}
/* ================================================================ *
 * gate
 * ================================================================ */
 #cover{
	width:100%;
	height:100%;
	position:fixed;
	background:url(../img/gate_bg.png) #fff;
	z-index:1000
 }
#gate{
	width:250px;height:375px;
	overflow:hidden;
	background:url(../img/gate.png) 0 50% no-repeat;
	margin:auto;
	position:absolute;
	top:0;left:0;bottom:110px;right:0;
}
#gate.on {
	-webkit-animation:gateopen 0.5s steps(6,end);
	animation:gateopen 0.5s steps(6,end);
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes gateopen{
	0% {background-position:0;transform:scale(1)}
	100% {background-position:-1500px;transform:scale(2.5)}
}
@-webkit-keyframes gateopen{
	0% {background-position:0;-webkit-transform:scale(1)}
	100% {background-position:-1500px;-webkit-transform:scale(2.5)}
}
/* ================================================================ *
 * sidenav
 * ================================================================ */
#sidenav{
	display:table-cell;
	background:#332b17;
	width:236px;height:100%;
	color:#fff;
	text-align:center;
	border-left:6px solid #fcc049;
	vertical-align:top;
	font-size:12px;
	line-height:120%;
}
#sidenav nav{
	position:fixed;
	width:230px;
	padding:20px 10px 0;
	z-index:100;
}
#sidenav h1 p{
	margin:10px 0 10px;
	font-weight:normal;
}
#sidenav ul{
	margin:20px 0 20px;
	border-top:1px solid #6b634e;
}
#sidenav li{
	padding:0;
	border-bottom:1px solid #6b634e;
}
#sidenav li a{
	padding:10px 0;
	display:block;
	width:100%;height:100%;
	border-radius:10px;
	position:relative;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#sidenav li a:after{
	content: '';
	position: absolute;
	border: 15px solid transparent;
	top:25px;	right:-30px;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#sidenav li a img{
	max-width:200px;
}
#sidenav li a:hover{
	background:#fcc049;
	border-radius:10px;
	transform:scale(1.05);
	z-index:2;
}
#sidenav li a.on{
	background:#e04b51;
	border-radius:10px;
	transform:scale(1.05);
	z-index:1;
}
#sidenav li a:hover:after,#sidenav li a.on:after{
	border-left: 15px solid #fcc049;right:-29px;
}
#sidenav li a.on:after{
	border-left: 15px solid #e04b51;	right:-29px;
}
/* ================================================================ *
 * Container
 * ================================================================ */
#Container{
	display:table-cell;
	position:relative;
	padding:0;
	width:100%;
	overflow:hidden;
	background:#ede5cd;
}
#Container header{
	background:#a49684;
	text-align:right;
	padding:4px 10px 0;
	height:36px;
}
.snsBox{
	display:table;
	position:absolute;
	right:0;
}
.snsBox .line{
display:none;
}
.snsBox span,.snsBox div,.snsBox iframe,.snsBox img{
	vertical-align:bottom;
	margin:0;padding:0;
}
.snsBox > div{
    display:table-cell;
    vertical-align:middle;
		padding-right:5px;
	}
.snsBox .fb *{
    vertical-align:top;
		}

#MainTitle,#Twitter .tbl,.pg .inner,#content_MainTitle .inner{
	margin:0 auto;
	width:800px;
	padding:0 10px;
	position:relative;
}

/* ---------------------------------------------------------------- *
 * INDEX
 * ---------------------------------------------------------------- */
#MainTitle{
	position:relative;
	padding:30px 10px 5px;
	margin-top:15px;
	height:505px;
}
#MainTitle h1,#MainTitle .subRule,#MainTitle .readRule{
	overflow:hidden;
	outline:none;
	max-width:330px;
}
#MainTitle h1{
	margin:0 0 40px 10px;
}
#MainTitle .subRule{
	margin:40px 0 25px 10px;
	font-size:115%;
	line-height:150%;
	text-align:center;
	font-weight:bold;
}
#MainTitle .readRule{
	margin:0 0 0 20px;
	max-width:320px;
}
#MainTitle .pictRule{
	position:absolute;
	right:0;top:30px;
}
#index .touroku{
	text-align:center;
	margin:-10px auto 60px;
	padding:0 30px;
	max-width:860px;
}
.toppa a{
	display:block;
	line-height:11s0%;
	background:#3eaab9;
	padding:15px 20px;
	border-radius:30px;
	max-width:760px;
	margin:15px auto 20px;
	color:#fff;
	font-size:170%;line-height:110%;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
	letter-spacing:1px;
}
.toppa a:hover{
	background:#fcc049;
}
#index .owb{
	border:2px solid #9e302a;
	padding:10px;
	font-size:130%;
	margin:5px auto 20px;
	max-width:650px;
}
#index .owb a{
	color: #9e302a;
}
#index .owb2{
	background:rgba(255,255,255,0.6);
	padding:35px 30px;
	text-align:left;margin-bottom:30px;
	font-weight:normal;
	font-size:90%;line-height:170%;
}
#index .owb2 h1{
	margin:0 10px 30px;
	font-size:140%;line-height:130%;
}
#index .owb2 h2{
	font-size:120%;line-height:130%;
	margin-bottom:20px;
}
#index .owb2 p{
	margin-bottom:10px;
	padding:0 10px;
}
.owb2 .box{
	background:rgba(0,0,0,0.04);
	padding:20px;margin:25px 0;
	line-height:150%;
}
#news .owb2 .box{
	padding:20px;margin:25px 0;
	line-height:140%;
	font-size:90%;
}
.owb2 .bro{
	text-align:right;
	margin-top:40px;
}
.owb2 .red{
	color:#9f302a;
	font-weight:bold;
}
#index .release{
	text-align:center;margin-bottom:30px;
}
#index .release a{
	font-size:220%;line-height:130%;
	letter-spacing:0.1em;
}
.btn a{
	display:block;
	text-align:center;
	color:#fff;font-weight:bold;font-size:120%;
	max-width:500px;
	margin:15px auto 30px;
	background:#9f302a;
	border-radius:10px;
	padding:20px 10px;
}
.btn a:hover{
		background:#70231c;
}
#index #Twitter{
	margin:0 auto;padding:60px 0 20px;
	border-top:10px solid #746354;
	width:100%;
	text-align:center;
}
#index #Twitter .inner{
}
#index #Twitter .inner p{
	margin-bottom:10px;
}
#index #Twitter .cel{
	text-align:left;
	padding-bottom:10px;
}
#index #Twitter .pv{
	padding-top:15px;
}
#index #Twitter .pv iframe{
	border-radius:10px;
	border:6px solid #776557;
	}
#index #Twitter h1{
	padding:0 10px 10px 10px;
}
#index #Twitter .widgetBox{
	padding:8px 5px 0 8px;
	background:#d5cbb5;
	border-radius:5px;
	text-align:right;
}
#index #Twitter iframe{
	margin:0;padding:0;
	max-width:100%;
}
#index .twitter-timeline{
	height:120px;
	padding: 0;margin:0;
}
#index .bnr{
	border-top:10px solid #746354;
}
#index ul.fun_list{
	max-width:800px;
	margin:50px auto;
}
#index ul.fun_list li{
	max-width:100%;
	display:inline-block;
	text-align:center;
	//margin:0 10px 30px 0;
	margin:0 0 30px 0;
}
#index ul.fun_list li:nth-of-type(2n){
	margin:0;
}
#index .dl{
	margin:5px 0 20px;
}

#index .touroku .update{
	display:inline-block;
	max-width:380px;margin:0 10px 30px;
	vertical-align:top;
}
#index .update,#index .update2{
	max-width:780px;margin:10px auto 30px;
	padding:10px 10px 15px;
	background:#d5cbb5;
	border-radius:5px;
	text-align:left;
}
#index .update h2,#index .update2 h2{
	background:#776557;
	color:#fff;border-radius:5px;padding:5px;margin-bottom:7px;
	text-align:center;vertical-align:middle;
	letter-spacing:5px;
	font-size:130%;
}
#index .update dl,#index .update ul{
	padding:0 5px;margin:10px 0;
	height:300px;overflow-y:auto;
	font-size:90%;line-height:120%;
}
#index .update dt{
	padding:5px 10px 0;margin:0;
	border-top:2px dotted #776557;
}
#index .update dd{
	padding:0 10px 5px 20px;margin:0;
	text-indent:-8px;font-size:92%;line-height:120%;
}
#index .update li{
	text-align:center;padding:5px 0;
	border-top:2px dotted #776557;
}
#index .update2 h2{
	letter-spacing:0px;
	margin-bottom:0;
}
#index .update2 dl{
	padding: 0 10px;
	margin:0;font-size:90%
}
#index .update2 dl dt{
	border-bottom:2px dotted #776557;
	padding:10px 10px 0;
	margin-bottom:5px;
}
#index .update2 dl dd{
	padding:0px 25px 0;
}

#index .dlBox{
	margin:5px 10px 20px;
	border-radius:10px;
	padding:15px 10px 15px 40px;
	background:#d5cbb5;
}
#index .dlBox dl{
	display:table;
	margin:0;
	padding:0;
	width:100%;
}
#index .dlBox dt,#index .dlBox dd{
	display:table-cell;
	margin:0;
	padding:0;
	vertical-align:middle;
}
#index .dlBox dt{
	text-align:left;
}
#index .dlBox dt img{
	display:block;
	margin:5px 0;
}
#index .dlBox dd{
	width:400px;
}
#index .dlBox dd p{
	display:inline-block;
	margin:0;
	padding:5px 0;
}

/* ---------------------------------------------------------------- *
 * CONTENT
 * ---------------------------------------------------------------- */
#content_MainTitle{
	position:relative;
	padding:45px 10px 75px;
	margin:0 auto;
	border-bottom:10px solid #746354;
}

#content_MainTitle h1,#content_MainTitle .subRule,#content_MainTitle .logo{
	max-width:394px;
	text-align:center;
}
#content_MainTitle h1{
	margin:20px 0 0;
}
#content_MainTitle .subRule{
	margin:0 0 15px;
	font-size:110%;
	line-height:140%;
	text-align:center;
	font-weight:bold;
	padding-top:20px;
}
#content_MainTitle .readRule{
	margin:0 0 0 20px;
	max-width:320px;
}
#content_MainTitle .pictRule{
	position:absolute;
	right:0;top:0;
}
.pg{
	border-bottom:10px solid #746354;
	position:relative;
	padding:20px 10px;
}
.pg .inner{
	padding:80px 0 80px;
}
.pg:nth-last-of-type(1){
	border-bottom:none;
}
.pg:nth-last-of-type(1) .inner{
	padding-bottom:40px;
}

/* ---------------------------------------------------------------- *
 *おしらせ
 * ---------------------------------------------------------------- */
#news article{
	max-width:800px;
	margin:50px auto;
	background:url(../../news/img/point.png) -60px -50px no-repeat rgba( 221, 211, 186,0.7);
	border-radius:10px;
	padding:10px 20px 20px;
	position:relative;

}
#news article > h1{
	font-size:180%;
	line-height:120%;
	padding:15px 5px 5px;
	margin-bottom:20px;
	border-bottom:4px dotted #594537;
	color:#9f302a;

	text-align:left;
 }
#news article h2{
	font-size:120%;margin-bottom:5px;
}
#news article p{
	margin:0 10px 15px;
}

#news article .left{
	width:69%;
}
#news article .right{
	width:210px;
	text-align:center;
	float:right;
}
#news article .date{
	color:#736152;
	font-size:70%;
	margin:20px 10px 0px;
	//text-align:right;
}
/* ---------------------------------------------------------------- *
 * ゲーム
 * ---------------------------------------------------------------- */
#game .game_nav{
		border-bottom:10px solid #746354;
		z-index:100;
		background:#ede5cd;
		position:absolute;top:-200px;
}
#game .game_nav ul{
	width:800px;
	margin:10px auto;
	display:table;
}
#game .game_nav li{
	display:table-cell;
	padding:2px;
}
#game .game_nav li a{
	display:block;
	background:#d6ccb6;
	border-radius:10px;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#game .game_nav li a:hover,#game .game_nav li a.on{
	background:#fcc049;
}
#game .pg{
	padding:0;
}
#game .pg .inner{
	padding:140px 0 80px;
}
#game .pg h1{
	position:relative;
	left:0;	
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#game .pg h1.off{
	left:-100px;
	left:0\9;
	-moz-opacity:0;
	opacity:0;
	opacity:1\9;
}
#game .pg .yazirusi_b{
	margin-top:120px;
	position:relative;
	top:45px;
	text-align:center;
	height:100px;
	z-index:100;
}
#game .pg .img{
	position:absolute;
	top:180px;right:0;
	-moz-opacity:0;
	opacity:0;
	opacity:1\9;
}
#game .animeimg{
	-webkit-animation: anime1 0.8s ease 0s 1;
	animation: anime1 0.8s ease 0s 1;
　　transform-origin: 0 50%;
	-moz-opacity:1 !important;
	opacity:1 !important;
}
#game #pg04 .animeimg{
	-webkit-animation: anime2 0.8s ease 0s 1;
	animation: anime2 0.8s ease 0s 1;
	top:160px;
}
@keyframes anime1{
	0%    { top:450px;transform: scale(0.5,0.5);-moz-opacity:0;opacity:0;}
	33%   { top:130px; transform: scale(0.8,1.2); -moz-opacity:1;opacity:1;}
	66%   { top:180px; transform: scale(1.2,0.8); -moz-opacity:1;opacity:1;}
	100%  { top:180px; transform: scale(1);				-moz-opacity:1;opacity:1;}
}
@-webkit-keyframes anime1 {
	0%    { top:450px;transform: scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); -webkit-opacity:0; opacity:0;}
	33%   { top:130px; transform: scale(0.8,1.2); -webkit-transform:scale(0.8,1.2); -webkit-opacity:1; opacity:1;}
	66%   { top:180px; transform: scale(1.2,0.8); -webkit-transform:scale(1.2,0.8); -webkit-opacity:1; opacity:1;}
	100%  { top:180px; transform: scale(1); 			 -webkit-transform:scale(1);			 -webkit-opacity:1; opacity:1;}
}

@keyframes anime2 {
	0%    { top:450px;opacity:0;-moz-opacity:0;}
	33%   { top:130px;opacity:1;-moz-opacity:1;}
	66%   { top:160px;opacity:1;-moz-opacity:1;}
	100%  { top:160px;opacity:1;-moz-opacity:1;}
}
@-webkit-keyframes anime2 {
	0%    { top:450px;opacity:0;}
	33%   { top:130px;opacity:1;}
	66%   { top:160px;opacity:1;}
	100%  { top:160px;opacity:1;}
}
#game .slidewrap{
	width:800px;height:410px;
	margin:20px 0 50px;
	padding:10px 20px 5px;
	background:url(../img/box_bg_02.png) 0 0 repeat-y;
	background-size:contain;
	position:relative;
	left:0;top:0;
	z-index:1;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#game .slidewrap.off{
	left:100px;
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	opacity:1\9;
}
#game .slidebox{
	height:100%;
	width:100%;
	text-align:center;
	//border:1px solid #000;
	padding:20px 0 0;
	position:relative;	
}
#game .owl-buttons{
	position:absolute;	
	top:0;
	width:100%;
}
#game .owl-item{
	//height:330px;
}
#game #pg01 .inner{
	background:url(../img/bg_01.png) 0 145px no-repeat;
}
#game #pg01 .slidewrap{
	background:url(../img/box_bg_01.png) 0 0 repeat-y;
	background-size:contain;
}
.slidewrap:nth-of-type(2){
	-moz-transition:all 0.5s ease-out 0.3s;
	-webkit-transition:all 0.5s ease-out 0.3s;
	transition:all 0.5s ease-out 0.3s;
}
#game #pg01 .slidewrap .ttl{
	float:left;
	width:230px;height:100%;
	text-align:center;
	color:#fff;
	padding:45px 0 0 0;
	font-weight:bold;
	font-size:115%;
	line-height:170%;
}
#game #pg01 .slidewrap .ttl p{
	margin-top:15px;
}
#game #pg01 .slidebox{
	width:520px;
	float:right;
}
#game #pg02 .inner{
	background:url(../img/bg_02.png) no-repeat;
	background-position:0 200px ;
	background-attachment:fixed;
	position:relative;
}
#game #pg03 .inner{
	background:url(../img/bg_03.png) no-repeat;
	background-position:0 100px ;
	background-attachment:fixed;
	position:relative;
}
#game #pg04 .inner{
	background:url(../img/bg_04.png) no-repeat;
	background-position:0 100px ;
	background-attachment:fixed;
	position:relative;
}
#game #pg04 .img{
	z-index:0;
}
#game #pg04 .slidebox{
	margin-top:5px;
	padding:30px 0 0;
}

/* ---------------------------------------------------------------- *
 *おたのしみ
 * ---------------------------------------------------------------- */
#fun ul.fun_list{
	max-width:800px;
	margin:50px auto;
}

#fun ul.fun_list{
	max-width:800px;
	margin:50px auto;
}
#fun ul.fun_list li{
	max-width:100%;
	display:inline-block;
	text-align:center;
	//margin:0 10px 30px 0;
	margin:0 0 30px 0;
}
#fun ul.fun_list li:nth-of-type(2n){
	margin:0;
}
/* ---------------------------------------------------------------- *
 *くれじっと
 * ---------------------------------------------------------------- */
#credit .pg{
	text-align:center;
	border:none;
	padding:0 0 50px;
}
/* ---------------------------------------------------------------- *
 *さぽーと
 * ---------------------------------------------------------------- */
 #support .linkMenu {
		border-bottom:10px solid #746354;
 }
#support.top .linkMenu{
	margin:50px auto 80px;
	border:none;
}
#support .linkMenu ul{
		text-align:center;
		padding:10px;	width:840px;
		margin:0 auto;
}
#support .linkMenu li{
	display:inline-block;
	margin:2px 0.5%;width:31.5%;text-align:left;
}
#support .linkMenu li a{
	display:block;height:100%;width:100%;
	background:#d6ccb6;
	border-radius:10px;
	padding:5px;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
#support .linkMenu li a:hover,#support .linkMenu li a.on{
	background:#fcc049;
}
.helpHead{
	margin:40px auto 0;
	border-bottom:6px dotted #332b17;
	padding:0 5px 3px;
	width:800px;
	color:#9f302a;
	font-size:1.4em;
	line-height:1.2em;
}
.helpBox{
	margin:30px auto;
	width:800px;
}
.helpBox>h1{
	font-size:1.4em;
	line-height:1em;
	margin-bottom:5px;
}
.helpBox>h1 a{
	display:block;
	border-radius:6px;
	padding:9px 15px 7px;
	background:#332b17;
	color:#fff;
	position:relative;
}
.helpBox>h1 a:after{
	position:absolute;right:10px;
	content:"▼";font-size:70%;
	color:#fcc049;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.helpBox>h1 a.on:after{content:"▲";color:#fff}

.helpBox>h1 a:hover{
	background:#fcc049;
	color:#fff;
}
.helpBox>ul{
	display:none;
}
.helpBox li{
	padding:0;margin:0;
}
.helpBox>ul dl{
	margin:0;
	padding:0;
}
.helpBox>ul dt{
	margin:0;
	border-top:2px dotted #332b17;
	padding:0;
	font-size:1.2em;
	line-height:1em;
}
.helpBox>ul li:nth-of-type(1) dt{
	border:none;
}
.helpBox>ul dt a{
	margin-top:15px;
	color:#332b17;position:relative;
	display:block;width:100%;height:100%;
	padding:10px 10px 10px 30px;outline:none;
}
.helpBox>ul dt a:before{
	position:absolute;
	left:8px;content:"＊";
	color:#e04b51;
}
.helpBox>ul dd{
	display:none;
	margin:0 10px 15px 30px;
	border:1px solid rgba(0,0,0,0.2);
	padding:10px 15px;
	background:rgba(255,255,255,0.4);
	font-size:90%;
	line-height:160%;
}
.cautionBox{
	width:800px;margin:30px auto;
	min-height:60px;
	background:url(../../support/img/caution.png) 20px 50% no-repeat;
	padding:20px 20px 20px 95px;
	line-height:130%;
	border:1px solid #9f302a;
	border-radius:5px;
}
.cautionBox h1{
	font-size:160%;color:#9f302a;line-height:150%;
}
#support .border{
		border-top:10px solid #746354;
	padding:10px 0;margin-top:50px;
}
#support .aboutBox{
	max-width:800px;margin:0 auto;
}
#support .aboutBox dt{
	border-radius:6px;
	padding:5px 15px 3px;
	background:#332b17;
	color:#fff;
}
#support .aboutBox dd{
	padding:2px 15px;
}
#support .aboutBox .cautionBox{margin-bottom:5px;}
#support .aboutBox dt{margin-top:10px}
#support .attention {
	margin:10px 0;
}
#support .attention p{
	padding-left:15px;
	text-indent:-15px
}
#support .btn_mailform a{
	padding:30px;
}
#support .btn_mailform a img{
	margin-bottom:10px;
}

#support.save .aboutBox{
	margin-bottom:60px;
}
#support.save .aboutBox > h1{
	border-radius:6px;
	padding:5px 15px;
	background:#332b17;
	color:#fff;font-size:160%;line-height:150%;
	margin:20px 0;
}
#support.save .aboutBox .pd10{
	padding: 0 10px;
}
#support.save .aboutBox p{
	margin-bottom:15px;
}
#support.save .aboutBox .cautionBox{
	margin:0px 0 40px;
}
#support.save .aboutBox li{
	margin-top:5px;
	padding-left:15px;text-indent:-15px;
	font-size:95%;
}
#support.save .aboutBox .img{
	text-align:center;
}
#support.save .aboutBox .img img{
	margin:10px;
}
#support.save .aboutBox h2{
	border-bottom:2px dotted #332b17;
	padding:5px 5px 5px 30px;font-size:140%;
	position:relative;margin-bottom:20px;
}
#support.save .aboutBox h2:before{
	position:absolute;
	left:8px;content:"＊";
	color:#e04b51;
}
#support.save .aboutBox ul.pd10 li{
	padding-left:20px;text-indent:-20px;
	margin-bottom:30px;
}

#support.save .aboutBox .inbox{
 background:rgba(221, 211, 186, 0.7);
 border-radius: 10px;padding:20px;margin-bottom:30px;
}
@media screen and (max-width:700px){
	#support.top .linkMenu{
		margin:50px auto 80px;
		border:none;
	}
	#support.top .linkMenu li{
		display:inline-block;
		margin:10px 0.5%;width:70%;text-align:left;
	}
	#support .linkMenu ul{
		width:auto;
	}
	.helpHead{
		border-bottom-width:4px;
		padding:0 5px 6px !important;
		width:auto;
		font-size:1.4em;
		line-height:1.2em;
	}
	.helpBox{
		margin:30px 0 0;
		width:auto;
		font-size:90%;
	}
	.cautionBox{
		width:auto;max-width:800px
	}
	#support .pg h1{text-align:left}
}
/* ---------------------------------------------------------------- *
 * ページフッタ
 * ---------------------------------------------------------------- */
.sp_img{
text-align:center;
margin-top:70px;
}
.prod{
	padding:100px 0 30px;
	text-align:center;
}
#PageFooter{
	position:relative;
	margin-top:40px;
	padding-top:84px;
	width:100%;
	color:#746354;
	font-size:90%;
	color:#fff;
	background:transparent url(../img/ft_bg_char.png) center top no-repeat;
}
#PageFooter .footerContent{
	border-top:10px solid #746354;
	padding:20px 0 50px;
	background:#a49684;
}
#PageFooter .urlRule{
	margin:0 auto;
	width:282px;
}
#PageFooter .urlRule a{
	display:block;
	width:100%;
}
#PageFooter .copyrightBox{
	margin:0 auto;
	padding:5px 0 0;
	width:400px;
	font-size:.9em;
	line-height:140%;
	text-align:center;
}
#PageFooter .copyrightBox p{
	padding:5px 0 0;
}
#PageFooter .linkBox{
	margin:0 auto;
	padding:40px 0 0;
	text-align:center;
}
#PageFooter .linkBox ul{
	list-style:none;
	display:table;
	margin:0 auto;
}
#PageFooter .linkBox li{
	display:table-cell;
	padding:0 5px;
	vertical-align:middle;
}

.totop{
	position:fixed;
	z-index:1000;
	right:10px;	bottom:-60px;
	-moz-transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
	background:#fcc049;
	color:#fff;
	font-size:10px;
	font-weight:bold;
	padding:2px 10px 10px;
	border-radius:5px 5px 0 0 ;
	cursor:pointer;	
	behavior: url(PIE.htc);
}
.totop:hover{
	background:#e04b51;
	bottom:0 !important;
}


/*ubox---------------------------------------------------------------------------------------------------*/
#uBox {
	display:none;position:absolute;background:#ede5cd;z-index: 1000001;
	padding:0 0 30px 0;text-align:center;
	border-radius:3px;
	//box-shadow: 0px 0px 5px #000;
	-webkit-transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-ms-transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#uBox img{
	max-width:100%;
}
#uBox #close{
	position:absolute;
	top:-10px;right:-10px;
	width:60px;height:35px; 
	border-radius:20px;
	background:#9f302a;
	color:#fff;
	
	font-weight:bold;
	font-size:11px;
	cursor: pointer;
	border:6px solid #fff;
	transition: all 0.3s;
	border-radius:3px;
}
#uBox #close:hover{
	background:#999;
}
/* float clear-------------------------------------------------------------------------------------------*/
.tbl:after,.wrap:after{
	content:".";
	display:block;
	height:0;
 	visibility:hidden;
	clear:both !important;
}
* html .wrap,* html .tbl{height:1%;}
.tbl,.wrap{display:block;}

/* ================================================================ *
 * レイアウト：820px以下
 * ================================================================ */
@media screen and (max-width:700px){
	.sp{
		display:inline-block;
	}
	.pc{
		display:none;
	}
	.tbl .cel{
		width:100% !important;
		text-align:center;
	}
	#wrapper{
		position:absolute;
		overflow-x:hidden;
	}
	#sidenav{
		display:block;
		position:fixed;
		left:0;
	}
	#sidenav nav{
	}	
	#sidenav ul{
		margin-top:15px;
	}
	#sidenav li a{
		padding:8px
	}
	#sidenav li a:hover:after,#sidenav li a.on:after{
		border:none;
	}
	#spmenu{
		position:fixed;
		background:#332b17;
		top:0;left:15px;
		border-radius:0 0 15px 15px;
		z-index:1000;
		padding:8px 15px 12px;
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
	}
	#Container{
		display:block;
		z-index:1000;
		background:#ede5cd;
		-moz-transition:all 0.3s ease-out;
		-webkit-transition:all 0.3s ease-out;
		transition:all 0.3s ease-out;
	}
	#MainTitle,#Twitter .tbl,.pg .inner,#content_MainTitle .inner{
		max-width:800px;width:auto;
	}
	#MainTitle,#content_MainTitle{
		padding-bottom:45px;
		width:auto;
		height:auto;
		margin-top:0;
	}
	#content_MainTitle{
		padding:10px 0 45px 0;
	}
	#MainTitle h1,#MainTitle .subRule,#MainTitle .readRule,#MainTitle .pictRule,
	#content_MainTitle h1,#content_MainTitle .subRule,#content_MainTitle .pictRule,#content_MainTitle .logo{
		margin-left:auto;
		margin-right:auto;
		position:static;
	}
	#MainTitle h1,#content_MainTitle .logo{
		width:292px;
		margin-bottom:20px;
	}
	#MainTitle .subRule,#content_MainTitle .subRule{
		margin-top:0px;
		margin-bottom:15px;
		max-width:617px;
	}
	#MainTitle .pictRule,#content_MainTitle .pictRule{
		margin:0 auto;
		text-align:center;;
	}
	#MainTitle .readRule,#content_MainTitle .readRule{
		margin-top:30px;
		width:414px;
	}	
	#content_MainTitle h1,#content_MainTitle .subRule,#content_MainTitle .pictRule,#content_MainTitle .logo{
		max-width:300px;
		margin-top:0;
	}
	#content_MainTitle .logo{
		margin-bottom:10px;
	}
	#content_MainTitle h1{
		max-width:100%;
	}
	#Twitter {
		height:auto;
	}
	#Twitter .tbl{
		max-width:400px;
		margin:0 auto;
		height:auto;
	}
	#Twitter iframe{
		margin:0;padding:0;
		max-width:100%;
				height:200px;
	}
	#Twitter h1{
		padding:10px 10px 0 10px;
		margin-bottom:10px;
		height:auto;
	}
	#Twitter .widgetBox{
		max-width:400px;
		margin-bottom:10px;
	}
	#index .release a{
		padding:10px 20px;
		font-size:180%;line-height:130%;
	}

	#index .wrapbox .update{
		display:block;
		width:auto;
		max-width:380px;margin:0 auto 20px;
	}
	#index .update2{margin:0 auto 20px;}
	#index .touroku .update{display:block;margin:0 0 20px;}
	#index .update ul,#index .update dl{
		height:200px;
		line-height:120%;
	}
	#index .update span{
		font-weight:bold;
	}
	#index .dl{
		margin:0 0 20px;
	}
	#index .dlBox{
		margin:0 0 20px;
		padding:15px 10px;
	}
	#index .dlBox dl{
		display:block;
	}
	#index .dlBox dt,#index .dlBox dd{
		display:block;
	}
	#index .dlBox dt{
		padding:0 20px 10px;
		text-align:center;
	}
	#index .dlBox dt img{
		display:inline;
	}
	#index .dlBox dd{
		width:auto;
	}

	#game #pg01 .inner,#game #pg02 .inner,#game #pg03 .inner,#game #pg04 .inner{
		background:none;
	}
	.pg .inner{
		padding:50px 10px 0px;
	}
	.pg h1{
		padding:0;
		text-align:center;
	}
	#news article .left{
		text-align:left;
	}
	#game .pg .inner{
		padding:50px 5px 0;
	}
	#game .slidewrap{
		max-width:800px;
		width:auto;height:auto;
		padding:0 15px 5px;
		top:-40px;
	}
	#game #pg01 .slidewrap{
		background:url(../img/box_bg_02.png) 0 0 repeat-y;
		background-size:contain;
		margin-bottom:20px;
		
	}
	#game #pg01 .slidewrap .ttl{
		width:100%;height:auto;
		display:table;
		font-size:100%;
		table-layout:fixed;
		padding:10px;margin-top:10px;
		background:#332b17;
		border-radius:10px;
	}
	#game #pg01 .slidewrap .ttl img{ 
		display:table-cell;
		vertical-align:middle;
	}
	#game #pg01 .slidewrap .ttl p{
		display:table-cell;
		vertical-align:middle;
	}
	#game #pg01 .slidebox{
		width:100%;
		height:auto;
	}
	#game #pg04 .slidebox{
		margin-top:5px;
		padding:20px 0 10px;
	}
	.sp_nav ul{
		width:100%;
		padding:0 0 0 10px;
		margin-bottom:30px;
		text-align:center;
	}
	.sp_nav ul li{
		width:49%;
		display:inline-block;
		padding:0 5px 8px 0;
		
	}
	.sp_nav ul li a{
		display:block;
		background:#332b17;
		border-radius:10px;
		padding:10px;
		
		
	}
}

@media screen and (max-width:502px){
	#PageFooter{
		background-size:contain;
		background-position:0 10%;
	}
}