@charset "UTF-8";

body{
    min-width:960px;
    background:#000;
}

/* ========================================
	#main-visual
======================================== */
#main_h2{
    position:relative;
	height: 310px;
	overflow: hidden;
    background: url("../img/h2_bg_base.jpg") no-repeat center top;
    z-index:6;
}
#main_h2 .h2_bg{
    position:absolute;
    width:100%;
    min-width:960px;
    height: 410px;
    top:-100px;
    background: url("../../img/h2_bg.png") no-repeat center top;
}
#main_h2 .inner {
    width:940px;
    margin:0 auto;
	z-index: 1;
}
#main_h2 .inner h2 {
    margin-top:60px;
}
/* ========================================
	.mech_main
======================================== */
#multi_main {
	position: relative;
	z-index: 1;
    width:100%;
    min-width:960px;
	height: 530px;
    overflow:hidden;
    margin-top:-75px;
    background: url("../img/bg1.jpg") no-repeat center top;
}
#multi_main .inner .chara{
    position:absolute;
    top:45px;
}
#multi_main .inner .chara1{
    left:24px;
    z-index:20;
}
#multi_main .inner .chara2{
    left:286px;
    z-index:19;
}
#multi_main .inner .chara3{
    left:490px;
    z-index:18;
}
#multi_main .inner .chara4{
    left:694px;
    z-index:17;
}
#multi_main .inner .title{
    position:absolute;
    top:464px;
    left:98px;
}
#multi_main .inner .banner{
    position:absolute;
    top:363px;
    left:433px;
}

/*--- #cooper ---*/
.inner2{
    position:relative;
    width:940px;
    margin:0 auto;
}
#cooper{
	position: relative;
	z-index: 1;
    width:100%;
    min-width:960px;
	height: 1868px;
    overflow:hidden;
    background: url("../img/bg2.jpg") no-repeat center top;
}
#cooper .inner2 .title{
    width:940px;
    overflow:hidden;
    margin-top:50px;
}
#cooper .ex1{
    position:relative;
    margin-top:46px;
}
#cooper .ex2{
    position:relative;
    margin-top:400px;
}
#cooper .mv{
    position:absolute;
    top:73px;
}
#cooper .mv1{
    left:0;
}
#cooper .mv2{
    left:480px;
}
#cooper .mv3{
    left:0;
}
#cooper .mv4{
    left:480px;
}
#cooper .mv .btn{
    position:absolute;
    z-index:10;
    display:none;
}
#cooper .mv .btn a:hover{
    display:block;
    width:459px;
    height:262px;
    background:rgba(0,0,0,0.4);
}
#cooper .movie-box {
	position: relative;
	width: 432px;
}
#cooper .movie-yt {
	position: absolute;
	top: 0;
	left: 0;
	width: 459px;
	height: 262px;
	overflow: hidden;
}
#cooper .movie-yt iframe {
	position: absolute;
	top: -3px;
	left: -15px;
	width: 490px;
	height: 276px;
}
#cooper .movie-frame{
    z-index:1;
}

#movie01,
#movie02,
#movie03,
#movie04{
    position:absolute;
    width: 459px;
	height: 262px;
    z-index:0;
}
#movie01 img,
#movie02 img,
#movie03 img,
#movie04 img{
    margin-left:0px;
    margin-top:0px;
}

#cooper ul.comment{
    width:459px;
    margin-top:272px;
}
#cooper ul.comment li{
    float:left;
}
#cooper ul.comment li.icon{
    width:78px;
    margin-left:6px;
}
#cooper ul.comment li.icon:first-child{
    margin-left:0px;
}
#cooper ul.comment li.txt{
    margin-left:16px;
    padding-top:13px;
}

#cooper .other{
    margin-top:412px;
}
#cooper .other .other_box{
    margin-top:20px;
}
#cooper .other .other_box .box{
    float:left;
    width:459px;
    height:417px;
}
#cooper .other .other_box .box .box_bg{
    position:absolute;
    width:459px;
    height:417px;
}
#cooper .other .other_box .box .box_inn{
    position:absolute;
    width:371px;
    height:396px;
    padding:21px 22px 0;
}
#cooper .other .other_box .box1{
    margin-right:20px;
}
#cooper .other .other_box .box .tit{
    margin-top:21px;
    margin-bottom:14px;
}
#cooper .other .other_box .box3{
    float:none;
    margin-top:437px;
    width:940px;
    height:285px;
}
#cooper .other .other_box .box3 .box_bg{
    position:absolute;
    width:940px;
    height:285px;
}
#cooper .other .other_box .box3 .box_inn{
    position:absolute;
    width:896px;
    height:264px;
    padding:21px 22px 0;
}
#cooper .other .other_box .box3 .img,
#cooper .other .other_box .box3 .tit{
    float:left;
}
#cooper .other .other_box .box3 .tit{
    margin-left:20px;
    margin-top:0px;
}
/*--- #role ---*/
#role{
	position: relative;
	z-index: 1;
    width:100%;
    min-width:960px;
	height: 1160px;
    overflow:hidden;
    background: url("../img/bg3.jpg") no-repeat center top;
}
#role .inner2 .title{
    width:940px;
    overflow:hidden;
    margin-top:108px;
}
#role .inner2 .text{
    margin-top:19px;
}
#role .inner2 .ex_box_wrap{
    margin-top:40px;
}
#role .inner2 .ex_box{
    width:912px;
    height:266px;
    padding:22px 0 0 28px;
    background: url("../img/role_waku.png") no-repeat left top;
}
#role .inner2 .ex_box2{
    margin-top:20px;
    height:302px;
    background: url("../img/role_waku2.png") no-repeat left top;
}
#role .inner2 .ex_box1 ul{
    margin-top:18px;
    margin-left:113px;
}
#role .inner2 .ex_box2 ul{
    margin-top:17px;
    margin-left:113px;
}
#role .inner2 .ex_box ul li{
    float:left;
    margin-left:10px;
}
#role .inner2 .ex_box2 ul li{
    margin-left:10px;
}
#role .inner2 .ex_box ul li:first-child{
    margin-left:0px;
}
#role .detail_list{
    margin-top:30px;
}
#role ul.select_list{
    float:left;
    width:656px;
}
#role ul.select_list li{
   float:left;
   margin-bottom:10px;
}
#role ul.select_list li.list1,
#role ul.select_list li.list3{
   margin-right:10px;
}
#role .w_link{
    float:left;
    margin-left:20px;
}