@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:330px; }
#mainVisual .btn01 { left:223px; }
#mainVisual .btn02 { left:583px; }


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

topBtn

***************************************************/
#topMain {
	width:863px;
	margin:36px auto 0;
	border: 6px solid #dbdada;
}
#topMain .txt_area{
	padding: 13px 0 16px 20px;
	font-weight:bold;
	color: #252525;
    	font-size: 85%;
}

#topMain .txt_area .txt_link{
	color:#2e74b1;
}

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

section

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

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

#sec01 .howto {
	width:970px;
	margin:10px auto ;
	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 .btn { margin-top:40px; }
#sec01 .howto .lt { padding-right:30px; }
#sec01 .howto .note { width:752px; margin:35px auto 0; text-align:left; color:#000000; line-height:1.5; }
#sec01 .howto .note li { text-indent:-1em; margin:0.2em 1em 0 0; font-size: 80%; }



#sec02 {
	margin-top:25px;
}

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

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

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

#sec02 .howto .txt { margin-top:35px; }
#sec02 .howto .img { margin-top:25px; }
#sec02 .howto .btn { margin-top:40px; }
#sec02 .howto .lt { padding-right:30px; }
#sec02 .howto .note { width:752px; margin:35px auto 0; text-align:left; color:#000000; line-height:1.5; }
#sec02 .howto .note li { text-indent:-1.5em; margin:0.2em 1.5em 0 0; font-size: 80%; }

#sec02 .tips2{
	margin: 50px auto 0;
    	position: relative;
    	width: 876px;
}

#sec02 .tips2 .btn {
    left: 451px;
    position: absolute;
    top: 461px;
}
#sec02 .tips2 .btn a:hover img:hover {
	opacity:0.79;
	filter:alpha(opacity=79);
}
#tips {
	position:relative;
	width:880px;
	margin:30px auto 0;
}

#tips .btn {
	position:absolute;
	top:536px;
	left:132px; 
}
#tips .btn .btn_ttl{
	padding-left:74px;
}
#tips .btn ul {
	margin: 0 auto;
	padding: 14px 0 0 0;
	width: 598px;
}
#tips .btn li {
	float: left;
	margin-left: 14px;
}

#xperia {
	position:relative;
	width:862px;
	margin:45px auto 0;
}
#xperia .btn01 { position:absolute; top:340px; left:59px; }
#xperia .btn02 { position:absolute; top:397px; left:59px; }
#xperia .btn03 { position:absolute; top:340px; left:342px; }
#xperia .btn04 { position:absolute; top:397px; left:342px; }
#xperia .btn05 { position:absolute; top:340px; left:635px; }
#xperia .btn06 { position:absolute; top:397px; left:635px; }

#present { margin: 36px auto 0; width: 867px;}

#prepare { margin-top:50px; }
#prepare .inner {
	position:relative;
	width:862px;
	margin:0 auto;
}
#prepare .btn { position:absolute; top:242px; left:192px; }

#column {
	position:relative;
	width:880px;
	margin:30px auto 0;
}
#column .btn01 { position:absolute; top:394px; left:259px; }
#column .btn02 { position:absolute; top:394px; left:443px; }
#column .btn03 {
	position:absolute; 
	top:472px; 
	left:125px;
}
#column .btn03 .btn03_ttl{
	padding-left:129px;
}
#column .btn03 ul {
	margin: 0 auto;
	padding: 14px 0 0 7px;
	width: 598px;
}
#column .btn03 li {
	float: left;
	margin-left: 14px;
}

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

#btmLnk {
	position:relative;
	width:957px;
	margin:25px auto 0;
}
#btmLnk .btn_vol1 { position: absolute; top: 40px; left: 12px; }
#btmLnk .btn_vol2 { position: absolute; top: 40px; left: 328px; }
#btmLnk .btn_vol3 { position: absolute; top: 40px; left: 644px; }