@charset "UTF-8";

/**
basic
*/

body{
  font-family:Helvetica, Arial, sans-serif;
  font-size:80%;
  line-height: 1;
  background:#EEE;
}

a img,
:link img,
:visited img{
  border: none;
}

a {text-decoration: none; outline:0;}
a:link {color:#000;outline:0;}
a:visited {color: #000; outline:0;}
a:active {color: #000; outline:0;}
a:hover {
  color: #666;
  text-decoration:underline;
  outline:0;
}

#wrapper{
	width:960px;
	margin:110px auto 0 auto;
	*padding-top:110px;
}

#sidebar{
	float:left;
	width:130px;
	position:relative;
	text-align:center;
}

#main_area{
	float:left;
	width:830px;
	margin-left:130px;
}

#contents{
	clear:both;
}

/**
Header
*/

@media print {  
    #header {
		position:static;
    }  
}  

#header{
	background:url(../images/head_back.png) repeat-x;
	height:100px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
}

#header .inner{
	width:960px;
	margin:0 auto;
	position:relative;
}

#header h1 span.logo{
	position:absolute;
	top:23px;
	left:5px;
}

#header .sub_title{
	position:absolute;
	top:30px;
	right:0;
}

#header ul.list{
	position:absolute;
	top:-5px;
	left:230px;
}

#header ul.list li{
	line-height:70px;
	list-style:none;
	float:left;
	margin:5px 10px;
	vertical-align:middle;
}

#header ul.list li p.name{
	margin:-3px 0 0 0;
	text-align:center;
	font-size:10px;
	line-height:1;
	position:relative;
	z-index:100;
}

#header ul.list li.title{
	margin-right:20px;
	margin-top:15px;
}

#header ul.list li.image img{
	width:70px;
	position:relative;
	z-index:0;
}

/**
Rollover
*/

 a img:hover{
  /* IE 
  filter: alpha(opacity=70);*/
  /* Safari Opera */
  opacity:0.70;
  /* Firefox Netscape */
  -moz-opacity:0.70;
}


/**
Common
*/

p.more{
	text-align:right;
}

p.caution{
	font-size:85%;
	color:#999;
}

p.lead{
	font-size:130%;
	margin-top:-0.5em;
}

.small{
  font-size:12px;
  font-weight:normal;
}

.caution{
  font-size:85%;
  color:#666;
  line-height:1.3;
  letter-spacing:0.01em;
  margin:1em 0 0 0;
  font-weight: normal;
}

span.caution{
    margin-left:1em;
}

.center{
  text-align:center;
  }
  
img.right,
p.image.right{
 float:right;
 margin:0 0 5px 20px;
 }
 
img.left,
p.image.left{
 float:left;
 margin:0 20px 5px 0;
 }
 
hr{
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #EEE;
	height: 1px;
	margin: 1em 0;
	clear: both;
}

.clear{
	clear:both;
}

sup{
	font-size:5px !important;
	font-weight:normal;
}

/**
sidebar
*/

#sidebar_menu{
	position:fixed;
	top:110px;
	width:110px;
	padding:0 0 10px 0;
}

#sidebar ul.navi li{
	list-style:none;
	padding:1em;
}

#sidebar ul.navi{
	padding:10px 0;
	background-color:#FFF;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
	height:270px;
	display:block;
	
	box-shadow: 0px 0px 5px #CCC;
  -moz-box-shadow: 0px 0px 5px #CCC;
  -webkit-box-shadow: 0px 0px 5px #CCC;
 /*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, Direction=135, Strength=5);*/
}

#sidebar ul.navi li.arrow p{
	margin:0 0 10px 0;
}

#sidebar ul.navi li.faq{
	/*border-top: solid 1px #EEE;*/
	margin-top:-10px;
}

/**
main_block/box
*/

#layout_block{
	margin-bottom:20px;
	position:relative;
	height:850px;
}


#layout_block div.block{
	/*display:none;
	float:left;*/
	position:absolute;
	width:196px;
	height:196px;
	background:#FFF;
	margin:500px 0 0 0;
	border:solid 2px #FFF;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
	background-color:#FFF;
	
	box-shadow: 0px 0px 5px #CCC;
	-moz-box-shadow: 0px 0px 5px #CCC;
	-webkit-box-shadow: 0px 0px 5px #CCC;
  /*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, Direction=135, Strength=5);*/
}

#layout_block div.block a img:hover{
  /* IE 
  filter: alpha(opacity=70);*/
  /* Safari Opera */
  opacity:1.00;
  /* Firefox Netscape */
  -moz-opacity:1.00;
}


#layout_block  div.block.key_visual_off img.catch{
	position:absolute;
	top:60px;
	right:20px;
}

#layout_block div.block.key_visual{
	top:0;
	left:0;
}

#layout_block div.block.off1{
	top:0;
	left:210px;
}

#layout_block div.block.off2{
	top:0;
	left:420px;
}

#layout_block div.block.off3{
	top:0;
	left:630px;
}

#layout_block div.block.off4{
	top:210px;
	left:0px;
}

#layout_block div.block.off5{
	top:210px;
	left:210px;
}

#layout_block div.block.off6{
	top:210px;
	left:420px;
}

#layout_block div.block.off7{
	top:210px;
	left:630px;
}

#layout_block div.block.off8{
	top:420px;
	left:0px;
}

#layout_block div.block.off9{
	top:420px;
	left:210px;
}

#layout_block div.block.off10{
	top:420px;
	left:420px;
}

#layout_block div.block.zoom{
	top:420px;
	left:630px;
}

#layout_block div.block.pan{
	top:630px;
	left:0px;
}

#layout_block div.block.wireless{
	top:630px;
	left:210px;
}

#layout_block div.block.design{
	top:630px;
	left:420px;
}

#layout_block div.block.faq{
	top:630px;
	left:630px;
}

#layout_block div.block.zoom a img:hover,
#layout_block div.block.pan a img:hover,
#layout_block div.block.wireless a img:hover,
#layout_block div.block.design a img:hover,
#layout_block div.block.faq a img:hover{
  /* IE 
  filter: alpha(opacity=70);*/
  /* Safari Opera */
  opacity:0.70;
  /* Firefox Netscape */
  -moz-opacity:0.70;
}

#layout_block div.block.space1{
	top:840px;
	left:0px;
}

#layout_block div.block.space2{
	top:840px;
	left:210px;
}

#layout_block div.block.space3{
	top:840px;
	left:420px;
}

#layout_block div.block.space4{
	top:840px;
	left:630px;
}



/*#layout_block  div.block .balloon{
	position:absolute;
	z-index:100;
}*/


#layout_block  div.block:hover {
	/*margin: -2px;*/
	border: solid 2px #FFF;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
	/*behavior: url(border-radius.htc);*/
}

#layout_block  div.block.zoom{
	border:solid 2px #ecc800;
}

#layout_block  div.block.design{
	border:solid 2px #000;
}

#layout_block  div.block.pan{
	border:solid 2px #c0c0c0;
}

#layout_block  div.block.wireless{
	border:solid 2px #0d6fb8;
}

#layout_block  div.block.key_visual{
	width:826px;
	height:249px;
}

#layout_block  div.block.key_visual img.image{
	float:left;
	margin:0px 15px 15px 0px;
}

#layout_block  div.block.key_visual h3{
	font-size:250%;
	padding:0;
	margin:15px 0 10px 15px;
}

#layout_block  div.block.key_visual h3 span.power{
	color:#E0261B;
}

#layout_block  div.block.key_visual h3 span.play{
	color:#116fb7;
}

#layout_block  div.block.key_visual p{
	margin:0 15px 15px 15px;
}

#layout_block div.block.selected{
	height:406px;
}

#layout_block  div.block.power:hover,
#layout_block  div.block.power.selected{
	border-color:#E0261B;
}
	
#layout_block  div.block.play:hover,
#layout_block  div.block.play.selected{
	border-color:#116fb7;
}

#layout_block  div.block.other:hover,
#layout_block  div.block.other.selected{
	border-color:#9fa1a0;
}

/*
#layout_block  div.block h3{
	margin:1em 0 0 0;
	font-size:20px;
	line-height:1.2;
	text-align:center;
}

#layout_block  div.block p.text{
	text-align:center;
	line-height:1.4;
	margin:1em;
}

#layout_block  div.block.power h3,
#layout_block  div.block.power p.text{
	color:#E0261B;
}

#layout_block  div.block.play h3,
#layout_block  div.block.play p.text{
	color:#116fb7;
}

#layout_block  div.block.other h3,
#layout_block  div.block.other p.text{
	color:#9fa1a0;
}
*/

/**
main_block/list
*/	

#layout_list{
	display: none;
	margin-bottom:20px;
	clear:both;
}

#layout_list .left_column{
	float:left;
	width:410px;
	margin-right:10px;
}

#layout_list h2{
	padding:10px 0;
	font-size:18px;
	clear:both;
}

#layout_list h2.power{
	color:#E0261B;
}

#layout_list h2.play{
	color:#036EB8;
}

#layout_list h2.other{
	color:#9fa1a0;
}

#layout_list .right_column{
	float:left;
	width:410px;
}

#layout_list ul.list{
	margin-bottom:3em;
}

#layout_list ul.list li{
	list-style:none;
	margin-bottom:5px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	behavior: url(PIE.htc);
	background-color:#FFF;
	
	box-shadow: 0px 0px 5px #CCC;
  -moz-box-shadow: 0px 0px 5px #CCC;
  -webkit-box-shadow: 0px 0px 5px #CCC;
/* filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, Direction=135, Strength=5);*/
}

#layout_list ul.list li a{
	padding:10px 10px;
	display:block;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	behavior: url(PIE.htc);
	padding-left:28px;
}

#layout_list ul.list.power li a{
	background:url(../images/arrow_down_power.png) no-repeat 10px 10px;
}

#layout_list ul.list.play li a{
	background:url(../images/arrow_down_play.png) no-repeat 10px 10px;
}

#layout_list ul.list.other li a{
	background:url(../images/arrow_down_other.png) no-repeat 10px 10px;
}

#layout_list ul.list li a:hover{
	color:#FFF;
}

#layout_list ul.list.power li a:hover{
	background:#E0261B;
}

#layout_list ul.list.play li a:hover{
	background:#036EB8;
}

#layout_list ul.list.other li a:hover{
	background:#9fa1a0;
}


/**
contents
*/

#contents{
	clear:both;
}

#contents .power,
#contents .play,
#contents .other{
background-color:#FFF;
	padding:15px;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
	
	box-shadow: 0px 0px 5px #CCC;
  -moz-box-shadow: 0px 0px 5px #CCC;
  -webkit-box-shadow: 0px 0px 5px #CCC;
 /*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, Direction=135, Strength=5);*/
 margin-bottom:20px;
 }

#contents .column{
	margin:-70px 0 10px 0;
	border-bottom:solid 1px #EEE;	/*padding-top:80px;*/
	width:100%;
	padding-top:100px;
	padding-bottom:30px;
	position:relative;
	clear:both;
}

#contents .column.noborder{
	border:none;
	padding-bottom:0;
}

#contents .column:last-child{
	border:none;
}

#contents .column .content.left{
	float:left;
	width:380px;
}

#contents .column#power_01 .content.left,
#contents .column#power_02 .content.left,
#contents .column#power_05 .content.left,
#contents .column#power_14 .content.left,
#contents .column#play_02 .chara.image.left{
	width:380px;
}

#contents .column#play_04 .content.left,
#contents .column#play_05 .content.left,
#contents .column#play_06 .content.left{
	width:350px;
}

#contents .column .content.right{
	float:right;
	width:400px;
}

#contents .column#play_02 .content.right{
	margin-top:70px;
}

#contents .column#power_02 p.image.right{
	margin-top:50px;
}

#contents .column#power_09 .content.right{
	width:330px;
}

#contents .column#power_09 .image{
	margin-top:22px;
}

#contents .column#power_11 .content.left{
	width:330px;
}

#contents .column#play_05 .content.left,
#contents .column#play_07 .content.left,
#contents .column#play_08 .content.left{
	width:350px;
}

#contents .column#play_01 .content.left{
	width:360px;
}

#contents .column#play_03 .content.left,
#contents .column#play_15 .content.left{
	width:460px;
}

#contents .column#play_11 .content.left,
#contents .column#play_12 .content.left,
#contents .column#play_13 .content.left,
#contents .column#play_14 .content.left{
	width:400px;
}

#contents .column#play_05 p.image{
	margin-top:50px;
}

#contents .column.left{
	float:left;
	margin-right:40px;
	width:380px;
	border:none;
}

#contents .column.right{
	clear:none;
	float:left;
	width:380px;
	border:none;
}

#contents h2{
	color:#FFF;
	padding:20px;
	font-size:140%;
	margin-bottom:40px;
}

#contents .power h2{
	background-color:#E0261B;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
}

#contents .play h2{
	background-color:#036EB8;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
	clear:both;
}

#contents .other h2{
	background-color:#9fa1a0;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	behavior: url(PIE.htc);
}

#contents h3{
	font-size:180%;
	margin:0.8em 0;
	padding-bottom:0.5em;
	border-bottom:solid 2px #DDD;
}

#contents .column h4{
	font-size:160%;
	margin:0 0 10px 0;
}

#contents .power h3,
#contents .power h4{
	color:#E0261B;
}

#contents .power h3{
	border-bottom-color:#E0261B
}

#contents .play h3,
#contents .play h4{
	color:#036EB8;
}

#contents .play h3{
	border-bottom-color:#036EB8
}

#contents .other h3,
#contents .other h4{
	color:#9fa1a0;
}

#contents .other h3{
	border-bottom-color:#9fa1a0
}

.column h4{
  font-size:140%;
  font-family:Arial, Helvetica, sans-serif;
  margin:1em 0 .5em 0;
}

.column h4 .normal{
	font-weight:normal;
	font-size:80%;
}

.column h5{
	font-size:130%;
	color:#666;
	line-height:1.2;
	margin:1em 0 -.5em 0;
}

.column h5 span.normal{
	font-weight:normal;
}

.column h6{
	font-size:110%;
	color:#666;
	line-height:1.4;
	margin:1em 0 -.5em 0;
}

#contents .play .box{
	clear:both;
	margin:1em 0;
	padding:15px;
	border:solid 2px #036EB8;
}

#contents .play .box h5,
#contents .play .box p{
	margin:0;
}

#contents .play .box h5{
	margin:0 0 5px 0;
}

#contents .column p.text{
	text-align:justify;
}

#contents .chara{
	margin:0 0 1em 0;
	text-align:center;
	display:block;
}

#contents .chara.center{
	text-align:center;
}

.column .column_left{
	float:left;
	width:385px;
	margin-right:20px;
}

.column .column_right{
	float:left;
	width:385px;
}

.column ul{
	margin:1em 0 0 30px;
	color:#666;
}

.column ul li{
	margin:.4em 0;
}

.column ul.block{
	margin:0;
}

.column ul.block{
	margin-left:-10px;
}

.column ul.block li{
	list-style:none;
	width:240px;
	height:140px;
	float:left;
	margin:0 0 0 10px;
	background-color:#EEE;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	behavior: url(PIE.htc);
	padding:10px;
}

.column ul.block li h5{
	margin:0;
	border-left: solid 12px #036EB8;
	padding-left:5px;
	line-height:0.8;
	margin: 0.5em 0 -0.5em 0;
}

p.to_top{
	text-align:right;
	clear:both;
	padding-top:10px;
}

p.to_top a{
	background:url(../images/arrow_up_top.png) no-repeat center left;
	padding-left:18px;
}

#contents .column .movie{
	float:right;
	margin-left:15px;
}

#contents .column#power_14 object.movie{
	margin-bottom:10px;
}


#contents .column .movie object{
	position:relative;
}


/**
Requirements
*/

.Requirements{
	border-bottom:solid 1px #DDD;
	padding-bottom:1.5em;
	margin-bottom:1.5em;
}

.Requirements h5{
	color:#999;
	margin-bottom:1em;
}

.Requirements h6{
	color:#999;
	margin:.5em 0;
	font-size:90%;
}

.Requirements table{
	font-size:85%;
	color:#999;
}

.Requirements table th,
.Requirements table td{
	padding:.1em 0;
	vertical-align:top;
	line-height:1.3;
}

.Requirements table th{
	width:6%;
}


/**
footer
*/

p.copy{
	color:#999;
	font-size:85%;
	margin:20px 0 20px 0;
}


/**
faq
*/

#wrapper.faq{
	width:830px;
	margin:120px auto 20px auto;
}

#wrapper.faq h1{
	margin:1em 0 .5em 0;
	font-size:250%;
}

#wrapper.faq h1 span.title1{
	margin-right:15px;
}

#wrapper.faq #contents {
background-color:#FFF;
	padding:15px;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	box-shadow: 0px 0px 5px #CCC;
  -moz-box-shadow: 0px 0px 5px #CCC;
  -webkit-box-shadow: 0px 0px 5px #CCC;
	behavior: url(PIE.htc);
	}

#wrapper.faq #main_area{
	float:none;
	width:830px;
	margin-left:0;
}

#wrapper.faq dl.faq dt{
	font-size:160%;
	font-weight:bold;
	background:url(../images/icon_faq_q.png) no-repeat center left;
	padding:15px 0 15px 55px;
	margin-bottom:0px;
}

#wrapper.faq dl.faq dd{
	background:url(../images/icon_faq_a.png) no-repeat 0 15px;
	padding:15px 0 30px 55px;
	line-height:1.2;
	border-bottom:solid 1px #EEE;
	margin-bottom:20px;
}



/**
clearfix
*/

.clearfix: after{
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

* html .clearfix{
  display: inline-block;
}

/**
ie7
*/

*: first-child+html .clearfix {
  display: inline-block;
}

/**
ie8
*/

html>/**/body .clearfix
{
  display: inline-block;
}



/*
small window
**/

#small_window{
	background-color:#FFF;
}

#small_window #wrapper{
	width:710px;
	margin:0 auto;
}

#small_window #wrapper{
	position:relative;
}

#small_window #wrapper .arrow{
	position:absolute;
}

#small_window #wrapper .arrow.right{
	top:170px;
	right:0;
}

#small_window #wrapper .arrow.left{
	top:170px;
	left:0;
}

#small_window #wrapper ul.thumnail{
	border-top:solid 1px #F6F6F6;
	padding-top:1em;
	margin-top:1em;
}

#small_window #wrapper ul.thumnail li{
	list-style:none;
	float:left;
}

#small_window #wrapper ul.thumnail li img{
	width:71px;
	height:71px;
}