@charset "UTF-8";
/* ===================================================================
CSS information

 file name  :system.css
 style info :システムページのスタイル
=================================================================== */

/* ==========================================================
  #main
========================================================== */

#main {
  background:url(/sp/images/shared/bg_contents02.gif)
}

/* ==========================================================
  contents
========================================================== */
.contents {
  text-align: center;
}

.contents_inner {
  margin: 0 5px;
  padding-bottom: 10px;
}

/* デバイス文字 */
.contents .text {
  text-align: left;
}


/* 背景パターン
========================================================== */

/* TOP */
body.pattern01 .contents {
  position: relative;
  top: 5px;
  background: url(/sp/images/system/bg_pattern01.png) no-repeat;
  background-size: 320px 185px;
  -webkit-background-size: 320px 185px;
}

/* アドベンチャーパート */
body.pattern02 .contents {
  position: relative;
  top: 5px;
  background: url(/sp/images/system/bg_pattern02.png) no-repeat;
  background-size: 320px 130px;
  -webkit-background-size: 320px 130px;
}

/* 裁判パート */
body.pattern03 .contents {
  position: relative;
  top: 5px;
  background: url(/sp/images/system/bg_pattern03.png) no-repeat;
  background-size: 320px 130px;
  -webkit-background-size: 320px 130px;
}



/* h1
========================================================== */
#page h1.system div {
  width: 100%;
  height: 31px;
  text-indent: -9999px;
  background-position:center -110px
}


/* h2
========================================================== */
body.top h2 {
  padding: 35px 0 20px;
}

body.adv h2 {
  padding: 45px 0 10px;
}

body.advStory h2 {
  padding: 35px 0 10px;
}

body.advEncounter h2,
body.advCity h2 {
  padding: 50px 0 20px;
}

body.advMystery h2 {
  padding: 50px 0 23px;
}
body.saiban h2 {
  padding: 30px 0 10px;
}

body.saibanStory h2 {
  padding: 30px 0 10px;
}

body.saibanCity h2 {
  padding: 50px 0 30px;
}

body.saibanWitch h2 {
  padding: 50px 0 30px;
}

body.dlc h2 {
  padding: 40px 0 10px;
}

/* frameArea
========================================================== */
.frameArea {
  background-image: url(/sp/images/shared/frame_top.png), url(/sp/images/shared/frame_bottom.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 310px 14px;
  -webkit-background-size: 310px 14px;
  padding: 10px 0;
}

.frameArea_inner {
  border-left: 2px solid #584125;
  border-right: 2px solid #584125;
  padding: 5px 0;
}

.frameArea_inner .text {
	padding-left:20px;
	padding-right:20px;
}




/* ==========================================================
	new
========================================================== */

.contents_inner li{ position:relative}
.contents_inner li.new a:before{
  width:27px;
  height:13px;
  position:absolute;
  top: 27px;
  right: 46px;
  content: "New";
  text-indent:-9999px;
  background:url(/sp/images/shared/gnavi_new.png) no-repeat;
  background-size:27px 13px;
  -webkit-background-size:27px 13px;}


/* ==========================================================
  footerInfo
========================================================== */

/* ナビゲーション
========================================================== */

.footerInfo .saiban li,
.footerInfo .adventure li{
  position:relative;
  float:left;
  width:154px;
  margin-bottom:4px;
}

.footerInfo .saiban li:nth-child(odd),
.footerInfo .adventure li:nth-child(odd) {
  margin-right:3px;
}

.footerInfo .saiban li a,
.footerInfo .adventure li a{
  display:block;
  width:154px;
  height:40px;
  text-indent:-9999px;
  background-repeat:no-repeat;
}
.footerInfo .adventure li a { background-image:url(/sp/images/system/navigation_adv.png);background-size: 311px 240px;-webkit-background-size: 311px 240px; }
.footerInfo .saiban li a    { background-image:url(/sp/images/system/navigation_saiban.png);background-size: 311px 160px; -webkit-background-size: 311px 160px; }

.footerInfo .adventure li.new a:before,
.footerInfo .saiban li.new a:before{
  width:27px;
  height:13px;
  position:absolute;
  top:-4px;
  right:2px;
  content: "New";
  text-indent:-9999px;
  background:url(/sp/images/shared/gnavi_new.png) no-repeat;
  background-size:27px 13px;
  -webkit-background-size:27px 13px;}
  
/* default
---------------------------------------------------------- */
.footerInfo .adventure li.adv01 a{background-position:0 0;}
.footerInfo .adventure li.adv02 a{background-position:-157px 0;}
.footerInfo .adventure li.adv03 a{background-position:0 -40px;}
.footerInfo .adventure li.adv04 a{background-position:-157px -40px;}
.footerInfo .adventure li.adv05 a{background-position:0 -80px;}

.footerInfo .saiban li.saiban01 a{background-position:0 0;}
.footerInfo .saiban li.saiban02 a{background-position:-157px 0;}
.footerInfo .saiban li.saiban03 a{background-position:0 -40px;}
.footerInfo .saiban li.saiban04 a{background-position:-157px -40px;}


/* active
---------------------------------------------------------- */
body.adv .footerInfo .adventure li.adv01 a{background-position:0 -120px;}
body.advStory .footerInfo .adventure li.adv02 a{background-position:-157px -120px;}
body.advCity .footerInfo .adventure li.adv03 a{background-position:0 -160px;}
body.advMystery .footerInfo .adventure li.adv04 a{background-position:-157px -160px;}
body.advEncounter .footerInfo .adventure li.adv05 a{background-position:0 -200px;}

body.saiban .footerInfo .saiban li.saiban01 a{background-position:0 -80px;}
body.saibanStory .footerInfo .saiban li.saiban02 a{background-position:-157px -80px;}
body.saibanCity .footerInfo .saiban li.saiban03 a{background-position:0 -120px;}
body.saibanWitch .footerInfo .saiban li.saiban04 a{background-position:-157px -120px;}


/* ==========================================================
  汎用クラス
========================================================== */


.bDot {
  border-bottom: 1px dotted #382115;
}

.pB5 {
  padding-bottom: 5px
}

.pT10 {
  padding-top: 10px
}

.pB10 {
  padding-bottom: 10px
}

.pB15 {
  padding-bottom: 15px
}

.pLR15 {
  padding-left: 15px;
  padding-right: 15px;
}

/* color */
.orange { color: #ea7e5a;}
.red { color: #d90303;}

.radius_blue,
.radius_red {
  background-color: #ffffff;
  border: 2px solid #0395d9;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 10px;}

ul.listStyle {
	text-indent: -1em;
	padding: 0 0 0 1em;}
ul.listStyle li {
	padding-bottom: 10px;}

.radius_blue { border: 2px solid #0395d9;}
.radius_red { border: 2px solid #d90303;}

a div.btn_how {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */

border: 1px solid #a2a2a2;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 10px 15px 10px 10px;
text-align: center;
color: #333;

margin-bottom: 10px;
}
a div.btn_how:hover {color: #666;}

.btn_how p.floatLeft { padding: 7px 0 0 0;}
.btn_how p.floatRight {}


span.tm { font-size: 10px;}

dl.dlccontact {	
	border-bottom: 1px solid #b3b3b3;
	border-right: 1px solid #b3b3b3;}
dl.dlccontact {}
dl.dlccontact dt {
	padding: 10px;
	background: #e6e6e6;
	border-top: 1px solid #b3b3b3;
	border-left: 1px solid #b3b3b3;}
dl.dlccontact dd {
	padding: 10px;
	background: #fff;
	border-top: 1px solid #b3b3b3;
	border-left: 1px solid #b3b3b3;}
	
a.linkBlue { color:#008aff;}
	
	
	
	
.bgOrange { background:#f3e7c6; padding: 10px;}
.bgOrange h5 { border-left: 3px #382115 solid; margin-bottom: 15px; font-size: 13px;}
.bgOrange h6 {
	padding: 3px;
	margin-bottom: 10px;
	color: #fff;
	background-color: #382115;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
}
	
.bgOrange .radius_red {
	color: #382115;}