@charset "utf-8";
/* CSS Document */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
}

body {
  margin: 0;
  background:url(../img/jokerbg.jpg);
  color: #FFFFFF;
  font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
  font-size:1.3em;
  line-height:200%;
}

a { color:#FFFFFF; text-decoration:none;}
h1{font-size:2.0em;}
h2{font-size:1.8em;}
h3{font-size:1.6em;}
h4{font-size:1.4em;}

#topBar {
	height:32px;
}

#header {
	height:611px;
	background:url(../img/headerbg.jpg) repeat-x;
}
#logo { float:left; height:32px}
#sns { float:right; height:32px}
#sns > div { margin:0px; float:right; width:150px; overflow:hidden}
.tweet { padding:5px;}
#machi {
	height:227px;
	padding-top:360px;
}
#machibg {
		height:227px;
		background:url(../img/machibg.png) repeat-x bottom;
}
#machiImg {
	height:174px;
	background:url(../img/machi.png)  no-repeat center top;
}
.imgtitle,.imgchara,.imgtxt,.imglight { opacity:0;}
/*#header img { opacity:0;}*/

.imgtitle {
	position: absolute;
	top:100px;
	left:200px;
	z-index:2;
}
.imgchara {
	position: absolute;
	top:0px;
	right:600px;
	z-index:1;
}
.imgtxt {
	position: absolute;
	top:430px;
	left:0px;
	z-index:2;
}
.imglight {
	position: absolute;
	top:0px;
	left:5px;
	z-index:0;
}

.content { width:960px; margin:auto;}

.section {
	padding:160px 0px 160px 0px
}
.sectionIn {
	padding:50px 0px 50px 0px
}


#cam1 {}
#cam2 { background:url(../img/cam2bg.png) }
#cam3 {}
#cam4 { background:url(../img/cam2bg.png) }

#chara1 { position:absolute; top:-200px;  right:-30px; opacity:0; z-index:5}
#chara2 { position:absolute; top:-200px;  left:-30px; opacity:0; z-index:5}
#chara3 { position:absolute; top:-150px;  right:-30px; opacity:0; z-index:5}
#chara4 { position:absolute; top:-150px;  left:-30px; opacity:0; z-index:5}

.decoBar {
	background:url(../img/decobarbg.jpg);
	height:70px;
}
.decoBar div{
	background:url(../img/decobar.jpg) center no-repeat;
	height:70px;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    text-decoration: none;
    color: #fff;
    width: 103px;
    padding: 0px 0;
    text-align: center;
    display: block;
}
#page-top a:hover {
    text-decoration: none;
}


.conBox {
	background:url(../img/boxmiddle.gif) repeat-y;
	position:relative;
	line-height: 0;
}
.BoxT { background:url(../img/boxtop.gif) repeat-x; height:15px;}
.BoxB { background:url(../img/boxbottom.gif) repeat-x; height:15px;}
.BoxM { padding:40px 30px 80px 30px; line-height:200%;}
.conline { background:url(../img/syutyusen2.png) no-repeat center}
.conlineM { background:url(../img/syutyusen.png) no-repeat center}
.boxA { position:absolute; top:0; left:0}
.boxB { position:absolute; top:0; right:0}
.boxC { position:absolute; bottom:0; left:0}
.boxD { position:absolute; bottom:0; right:0}

#bottomDeco {
	background:url(../img/bottomdeco.gif) repeat-x top;
	height:160px;
}
#bottomDeco2 {
	background:url(../img/bottomdeco2.gif) repeat-x;
	height:10px;
}
#footer {
	height:200px;
	background: url(../img/footerbg.gif);
}
#copy {
	padding:40px 0px;
}
/*CLASS--------------------------------------------------*/

h3.contitle {
	margin:0px 0px 40px 0px;
	/*padding:30px 0px;
	background:bottom url(../img/contitleborder.gif) repeat-x;
	color:#b81b22;
	text-shadow:#FFFFFF 0px -1px 0px;*/
}
.tAc { text-align:center}
.tAl { text-align:left}
.tAr { text-align:right}

.imgFit {
	width:100%;
	height:auto;
}
.posRela { position:relative;}


.col1,.col2,.col4,.col6 {
	float:left;
}
.col1 { width:8.333%;}
.col2 { width:16.666%;}
.col4 { width:33.333%;}
.col6 { width:50%;}
.col12 { width:100%;}

.pd8 { padding:8px;}

.mt80 { margin-top:80px;}
.mb80 { margin-bottom:80px;}
.mb0 { margin-bottom:0px !important;}
.pb0 { padding-bottom:0px !important;}
.pb80 { padding-bottom:80px !important;}
.pb40 { padding-bottom:40px !important;}

/*160216up--------------------------------------------------*/
.breadcrumb { text-align:center; font-size:larger;}
span.on {
	background:#BC0003;
	padding:2px;
}

#formblock{
	overflow:hidden;
}
.form_q1_answer{
	background:url(../img/q1_answer.png) no-repeat;
	width:450px;
	height:355px;
}

.form_q2_answer{
	background:url(../img/q2_answer.png) no-repeat;
	width:450px;
	height:355px;
}

#formblock input[type="text"]{
	width:75%;
	margin:200px 10px 0 0;
	padding:8px 2%;
	border:solid #B4B4B4 1px;
	font-size:larger;
	text-align:center;
}

table#form_table {
	border-collapse:collapse;
}

#form_table input[type="text"]{
	width:25%;
	padding:5px 1%;
	border:solid #B4B4B4 1px;
}

table#form_table tr {
	border-bottom:1px dashed #B4B4B4;
}

.smaller {
	font-size:0.9em;
}

.next-btn {
	text-align:center;
}

input#submit_button {
	padding: 5px;
    background-color:#E4E4E4;
    color: #000;
    border-style: none;
	cursor:pointer;
}


#headerIn{
	background:url(../img/in_headerbg.jpg) repeat-x;
	height:274px;
}
#imgcharaIn{
	position:absolute;
	right:0px;
	top:0;
	z-index:1;
}
#imgtitleIn{
	position:absolute;
	top:50px;
	left:0;
	z-index:2;
}

.decoBarIn{
	position:relative;
	height:70px;
}
.decobarLayer{
	position:absolute;
	top:0;
	left:0;
	background:url(../img/in_bar.jpg) top center no-repeat;	
	height:70px;
	width:100%;
}
.decoberLeft{
	float: left;
	width:50%;
	height:70px;
}
.decoberRight{
	background:url(../img/in_decoBarLeftbg.jpg) repeat-x;
	float:right;
	width:50%;
	height:70px;
}
.imgDl ul { margin:0;}
.imgDl li {
	padding:0;
	margin:0px 5% 20px 0%;
	list-style:none;
	width:40%;
	float:left;
	text-align:center
}
.imgDl li a {
	display:block;
	padding:8px;
	background:#FF0004;
}

@media (min-width: 780px) {
	.pcNon { display:none}
}

@media (max-width: 779px) {
	body {
		font-size:1.1em;
	}
	.content { width:100%;}
	.spNon { display:none}
	.sp100p { width:100%;}
	
}

/*CREAR--------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }