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

  colopla
	Copyright (c)COLOPL, Inc. All Rights Reserved.
	CreationDate: 2010-11
	
////////////////////////////////////////////////*/

body{
	background:url(../image/bg.jpg) no-repeat center 36px;
	font:12px "Lucida Grande",Verdana,"MS P ゴシック",sans-serif;
}
body p{
	line-height:150%
	}

#head{
	width:100%;
	padding:5px 0;
	border-bottom:1px solid #ccc;
}
#head div{
	position:relative;
	width:920px;
	margin:0 auto;
}
.colopl{
	position:absolute;
	right:0;
}

#container{
	width:960px;
	margin:0 auto;
}
header{margin:5px 0 9px 0;}
header h1{float:left; margin:10px 5px 0 0; width:192px;}
header h2{float:left; width:388px;}

.top p span{
	color:#cc0000;
	font-size:14px;
	font-weight:bold;
}

.movie{
	float:left;
	padding:13px 0 0 14px;
	width:494px;
	height:448px;
	background:url(../image/bg_signboard.png) no-repeat left top;
}

.top .read{
	position:relative;
	float:right;
	width:441px;
	height:445px;
	margin:3px 0 0 0;
	background:url(../image/bg_clearboard.png) no-repeat right bottom;
}
.read h2{margin:0 0 0 7px;}
.read .readColopl{
	margin:5px 0 0 28px;
}
.pla{margin:10px 0 0 0;}
.pla figure{
	margin:0 0 0 23px;
	float:left;
	width:150px;
	}
.pla h3{margin:0 0 10px 0;}

.chara{position:absolute;
bottom:0;
left:-35px;
}
.iroTitle{
	position:absolute;
	top:340px;
	left:105px;
}
.iroTxt{
	position:absolute;
	top:365px;
	left:105px;
}
.iroImg{
	position:absolute;
	top:340px;
	right:10px;
}

.qr{
	float:left;
	position:relative;
	width:637px;
	height:171px;
	background:url(../image/bg_join.jpg) no-repeat right bottom;
}
.qr .sendMail{
	margin:5px 0 0 20px;
	}
.qr .code{
	position:absolute;
	top:83px;
	left:224px;
	border:1px solid #FF9999;
	padding:1px;
	background-color:#FFF;
	}
.qr h3{position:absolute; top:45px; left:426px;}
.qr .read{position:absolute; top:74px; left:310px;}
.pc{float:right; margin:18px 0 0 0;}


.enjoy{margin:30px 0 20px 0;}
.enjoy h2{margin:0 0 5px 0;}
.rotate{
	border-right:1px solid #3366CC;
	border-bottom:1px solid #3366CC;
	border-left:1px solid #3366CC;
	padding:15px 10px 0;
}
.enjoyDetail{
	clear:both;
	margin:0 0 10px 0;
	padding:0 0 5px 0;
	}
.border{border-bottom:1px dotted #3467CC;}
.enjoyDetail .special{
	border:3px solid #FFD6D6;
	background-color:#FFEBEB;
	padding:10px 10px 0;
}
.enjoyDetail .detail{float:right; width:810px;}
.enjoyDetail .detail2{float:right; width:785px;}
.enjoyDetail h3{margin: 0 0 5px 0;}
.enjoyDetail figure{float:left;}


.other{margin:0 0 20px 0;}

.other h2{margin:0 0 10px 0;}
.other section{
	float:left;
	width:228px;
	min-height:221px;
	height: auto !important;
	height:221px;
	margin:0 15px 0 0;
	background:url(../image/bg_other.gif) no-repeat left bottom;
}
	
.other section p{
	width:208px;
	margin:8px auto 0;
}

.other section p a{
	background:url(../image/arrow.gif) no-repeat left 3px;	
	padding:0 0 0 8px;
}
.otherBtn{
	float:left;
	width:228px;
}
.otherBtn img{margin:0 0 8px 0;}
.bear{float:right;}

footer{
	margin:30px 0;
	padding:20px 0 0 0;
	text-align:center;
	border-top:2px solid #ddd;
}
footer p{margin:0 0 15px 0;}


#android{
	margin:10px 0 20px 0;
}

#android span{
	position:relative;
	overflow:hidden;
	display:block;
	width:0;
	height:0;
}

#android a{
	background:url(../image/btn_forsmartphone.jpg) no-repeat 0 0;
	display:block;
	height:60px;
	width:450px;
	margin:0 auto;
}

#android a:hover{
	background-position:0px -60px;
	}
	
	

/*////////////////////////////////////////////////

float対策

////////////////////////////////////////////////*/

header,
.pla,
.top,
.join,
.enjoyDetail,
.special,
.other{overflow: hidden;}

header:after,
.pla:after,
.top:after,
.join:after,
.enjoyDetail:after,
.special:after,
.other:after{
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html header,
* html .pla,
* html .top,
* html .join,
* html .enjoyDetail,
* html .special,
* html .other{
    height: 1em;
    overflow: visible;
}
/**/