@charset "utf-8";

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

body

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

body {
	background-color: #ffffff;
	color: #4f4539;
	text-align: center;
	font-size: 95%;
	font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
}


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

link

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

a:link,
a:visited {
	color: #3361ca;
	text-decoration: underline;
}

a:hover,
a:active {
	color: #3361ca;
	text-decoration: none;
}


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

opacity

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

#container a:hover img.over {
	opacity:0.7;
	filter:alpha(opacity=70);
}


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

clearfix

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

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
.clearfix {
	display: inline-table;
	position:relative;
	min-height: 1%;
}
	
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


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

header

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

#header { padding:10px 0 20px; }

#header .inner {
	width: 910px;
	margin: 0 auto;
	text-align:left;
}


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

footer

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

#footer {
	background-color:#ffffff;
	border-top:1px solid #cdcdcd;
	padding:15px 0;
}

#footer .inner {
	width: 970px;
	margin: 0 auto;
	line-height:1.2;
	text-align:right;
	font-size:75%;
	color:#7f7f7f;
}


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

container

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

#container {
	width: 970px;
	margin: 0 auto;
	text-align: left;
}

#container .pad {
	padding: 0 5px;
}


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

mainVisual

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

#mainVisual {
	position:relative;
}
#mainVisual .btn01,
#mainVisual .btn02 { position:absolute; top:340px; }
#mainVisual .btn01 { left:223px; }
#mainVisual .btn02 { left:583px; }


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

section

***************************************************/
#sec01 { margin-top:30px; }

#sec01 .comic {
	margin-top:-20px;
	text-align:center;
}

#sec01 .howto {
	width:970px;
	margin:10px auto 0;
	padding-bottom:50px;
	background:url(../images/howto_bg_btm.gif) no-repeat 0 bottom;
}

#sec01 .howto .inner {
	padding:34px 0 0;
	background:url(../images/howto_bg.gif) no-repeat 0 0;
	text-align:center;
}

#sec01 .howto .txt { margin-top:30px; }
#sec01 .howto .img { margin-top:30px; }
#sec01 .howto .tips { margin-top:25px; }
#sec01 .howto .btnArea { position:relative; width:876px; margin:38px auto 0; }
#sec01 .howto .btnArea .btn { position:absolute; top:130px; left:200px; }

#sec01 .howto .ttl { margin-top:45px; }

#sec01 .btmArea { margin-top:40px; padding-top:45px; background:url(../images/point1_btmarea_line.gif) no-repeat 0 0; }
#sec01 .btmArea .ttl { width:876px; margin:45px auto 0; text-align:left; }
#sec01 .btmArea .txt { width:876px; margin:0 auto; text-align:left; }
#sec01 .btmArea .txt dl { margin-top:1.5em; color:#000000; font-size:116%; line-height:1.5; }
#sec01 .btmArea .txt dt { float:left; width:1em; }
#sec01 .btmArea .txt dd { margin:0 0 0 1.5em; }



#sec02 {
	margin-top:25px;
}

#sec02 .comic {
	margin-top:-20px;
	text-align:center;
}

#sec02 .howto {
	width:970px;
	margin:10px auto 0;
	padding-bottom:40px;
	background:url(../images/howto_bg2_btm.gif) no-repeat 0 bottom;
}

#sec02 .howto .inner {
	padding:50px 0 0;
	background:url(../images/howto_bg2.gif) no-repeat 0 0;
	text-align:center;
}

#sec02 .howto .txt { margin-top:20px; }
#sec02 .howto .img { margin-top:40px; }
#sec02 .howto .btn { margin-top:40px; }

#sec02 .howto .ttl { margin-top:45px; }

#sec02 .btnArea1 { width:790px; margin:30px auto 0; }
#sec02 .btnArea1 li { float:left; padding:15px 17px 0; }

#sec02 .btnArea2 { position:relative; width:870px; margin:40px auto 0; }
#sec02 .btnArea2 .btn01 { position:absolute; top:215px; left:51px; }
#sec02 .btnArea2 .btn02 { position:absolute; top:215px; left:235px; }
#sec02 .btnArea2 .btn03 { position:absolute; top:215px; left:464px; }
#sec02 .btnArea2 .btn04 { position:absolute; top:215px; left:648px; }

#sec02 .point_btn_box{
	background:#e0e3f2 url(../images/point2_btn_box_top.gif) no-repeat  top;
	width:749px;
	margin: 26px auto;
}
#sec02 .point_btn_box .point_btn_box_inner{
	background: url(../images/point2_btn_box_bottom.gif) no-repeat  bottom;
	padding: 14px 0 0 0;
}
#sec02 .point_btn_box .point_btn_box_inner ul{
	width:598px;
	margin: 0 auto;
	 padding: 14px 0 14px 7px;
}
#sec02 .point_btn_box .point_btn_box_inner li{
	float:left;
	margin-left:14px;
}
#sec03 {
    margin: 30px auto 0;
}

#opinion {
	position:relative;
	width:956px;
	margin:25px auto 0;
}
#opinion .btn {
	position:absolute;
	top:169px;
	left:92px;
}

#btmLnk {
	position:relative;
	width:956px;
	margin:25px auto 0;
}
#btmLnk .flL { float:left; }
#btmLnk .flR { position:relative; float:right; padding-top:4px; }
#btmLnk .flR .btn_vol1 { position: absolute; top: 40px; left: 10px; }
#btmLnk .flR .btn_vol2 { position: absolute; top: 77px; left: 10px; }