@charset 'UTF-8';
/*--------------------------------------
 @msg      『ベルアイル』地上世界 地上世界とは
--------------------------------------*/
@import '../common/css/common.css';

#navigation li.list02 span.dsLabelH{
  background-position:-188px 0;
}

/*--------------------------------------
 【地上世界の概要】 #outline
--------------------------------------*/
#outline #navigation li.list02 ul li.list01 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #outline #navigation li.list02 ul li.list01 a:hover{
    text-decoration:none;
  }

#outline h2{
  background-image:url('./images/h2_outline.jpg');
}

#outline #content img{
  display:block;
  margin:0 auto 30px;
}
/*--------------------------------------
 【エピックタスク】 #epic
--------------------------------------*/
#epic #navigation li.list02 ul li.list02 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #epic #navigation li.list02 ul li.list02 a:hover{
    text-decoration:none;
  }

#epic h2{
  background-image:url('./images/h2_epic.jpg');
}

#epic h3{
  background-image:url('./images/h3_epic_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_epic_01.png", sizingMethod="crop");/*ie6*/
}

#epic .article02 h4{
  margin-bottom:18px;
  background-image:url('./images/h4_epic_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h4_epic_01.png", sizingMethod="crop");/*ie6*/
}

#epic .article02 p img{
  float:right;
  margin-left:18px;
}

#epic .article02 dl{
  width:482px;
  _width:480px;
  height:112px;
  _height:110px;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #epic .article02 dl dt{
    width:458px;
    height:15px;
    margin-bottom:11px;
    background:url('./images/title_epic_01.png') no-repeat top left;
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/title_epic_01.png", sizingMethod="crop");/*ie6*/
  }
  
  #epic .article02 dl dd{
    float:left;
    width:160px;
    height:40px;
    margin-bottom:8px;
  }

    #epic .article02 dl dd p img{
      float:left;
      margin:0 6px 0 0;
    }

    #epic .article02 dl dd p span{
      display:block;
      padding:28px 0 0;
    }

/*--------------------------------------
 【地上への道】 #road
--------------------------------------*/
#road #navigation li.list02 ul li.list03 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #road #navigation li.list02 ul li.list03 a:hover{
    text-decoration:none;
  }

#road h2{
  background-image:url('./images/h2_road.jpg');
}

#road h3{
  background-image:url('./images/h3_road_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_road_01.png", sizingMethod="crop");/*ie6*/
}

#road .article02 p img{
  float:right;
  margin-left:18px;
}

#road .article02 dl{
  width:584px;
  _width:582px;
  height:auto;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #road .article02 dl dt{
    width:584px;
    height:15px;
    margin-bottom:11px;
    background:url('./images/title_road_01.gif') no-repeat top left;
  }
  
  #road .article02 dl dd{
    float:left;
    width:584px;
    height:70px;
    margin-bottom:8px;
  }

    #road .article02 dl dd p img{
      float:left;
      margin:0 10px 0 0;
    }

    #road .article02 dl dd p b{
      display:block;
      color:#f00;
    }

/*--------------------------------------
 【幻影の竜】 #dragon
--------------------------------------*/
#dragon #navigation li.list02 ul li.list04 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #dragon #navigation li.list02 ul li.list04 a:hover{
    text-decoration:none;
  }

#dragon h2{
  background-image:url('./images/h2_dragon.jpg');
}

#dragon h3.article01{
  background-image:url('./images/h3_dragon_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_dragon_01.png", sizingMethod="crop");/*ie6*/
}
#dragon h3.article05{
  background-image:url('./images/h3_dragon_02.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_dragon_02.png", sizingMethod="crop");/*ie6*/
}

#dragon p.article{
  margin-bottom:40px;
}
  #dragon p.article04{
    margin-bottom:0;
    padding-bottom:40px;
    border-bottom:1px dashed #fff;
  }

    #dragon p.article01 img,
    #dragon p.article03 img{
      float:left;
      margin:0 18px 0 0;
    }
    #dragon p.article02 img,
    #dragon p.article04 img,
    #dragon .article06 p img{
      float:right;
      margin:0 0 0 18px;
    }

    #dragon p.article i{
      color:#f0cc4d;
    }

#dragon .article06 dl{
  width:584px;
  height:auto;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #dragon .article06 dl dt{
    width:584px;
    height:15px;
    margin-bottom:11px;
    background:url('null.gif') no-repeat top left;
  }
    #dragon .article06 dl.article07 dt{
      background-image:url('./images/title_dragon_01.gif');
    }
    #dragon .article06 dl.article08 dt{
      background-image:url('./images/title_dragon_02.gif');
    }
  
  #dragon .article06 dl dd{
    float:left;
    width:584px;
    height:70px;
    margin-bottom:8px;
  }

    #dragon .article06 dl dd p img{
      float:left;
      margin:0 10px 0 0;
    }

    #dragon .article06 dl dd p b{
      display:block;
      color:#f00;
    }

/*--------------------------------------
 【深淵の狂禍】 #abyss
--------------------------------------*/
#abyss #navigation li.list02 ul li.list05 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #abyss #navigation li.list02 ul li.list05 a:hover{
    text-decoration:none;
  }

#abyss h2{
  background-image:url('./images/h2_abyss.jpg');
}

#abyss h3{
  background-image:url('./images/h3_abyss_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_abyss_01.png", sizingMethod="crop");/*ie6*/
}

#abyss p.article{
  margin-bottom:40px;
}
  #abyss p.article01 img{
    float:right;
    margin:0 0 0 18px;
  }

/*--------------------------------------
 【異層の境界】 #boundary
--------------------------------------*/
#boundary #navigation li.list02 ul li.list07 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #boundary #navigation li.list02 ul li.list07 a:hover{
    text-decoration:none;
  }

#boundary h2{
  background-image:url('./images/h2_boundary.jpg');
}

#boundary h3.article01{
  background-image:url('./images/h3_boundary_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_boundary_01.png", sizingMethod="crop");/*ie6*/

}
#boundary h3.article05{
  background-image:url('./images/h3_boundary_02.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_boundary_02.png", sizingMethod="crop");/*ie6*/

}

#boundary p.article{
  margin-bottom:40px;
}
  #boundary p.article04{
    margin-bottom:0;
    padding-bottom:40px;
    border-bottom:1px dashed #fff;
  }

    #boundary p.article01 img,
    #boundary p.article03 img{
      float:left;
      margin:0 18px 0 0;
    }
    #boundary p.article02 img,
    #boundary p.article04 img,
    #boundary .article06 p img{
      float:right;
      margin:0 0 0 18px;
    }

    #boundary p.article i{
      color:#f0cc4d;
    }

#boundary .article06 dl{
  width:584px;
  height:auto;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #boundary .article06 dl dt{
    width:584px;
    height:15px;
    margin-bottom:11px;
    background:url('null.gif') no-repeat top left;
  }
    #boundary .article06 dl.article07 dt{
      background-image:url('./images/title_boundary_01.gif');
    }
    #boundary .article06 dl.article08 dt{
      background-image:url('./images/title_boundary_02.gif');
    }
  
  #boundary .article06 dl dd{
    float:left;
    width:584px;
    height:70px;
    margin-bottom:8px;
  }

    #boundary .article06 dl dd p img{
      float:left;
      margin:0 10px 0 0;
    }

    #boundary .article06 dl dd p b{
      display:block;
      color:#f00;
    }


/*--------------------------------------
 【異層の境界】 #spiral
--------------------------------------*/
#spiral #navigation li.list02 ul li.list10 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #spiral #navigation li.list02 ul li.list10 a:hover{
    text-decoration:none;
  }

#spiral h2{
  background-image:url('./images/h2_spiral.jpg');
}

#spiral h3.article01{
  background-image:url('./images/h3_spiral_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_spiral_01.png", sizingMethod="crop");/*ie6*/
}
#spiral h3.article05{
  background-image:url('./images/h3_spiral_02.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_spiral_02.png", sizingMethod="crop");/*ie6*/
}

#spiral p.article{
  margin-bottom:40px;
}
  #spiral p.article04{
    margin-bottom:0;
    padding-bottom:40px;
    border-bottom:1px dashed #fff;
  }

    #spiral p.article01 img,
    #spiral p.article03 img{
      float:left;
      margin:0 18px 0 0;
    }
    #spiral p.article02 img,
    #spiral p.article04 img,
    #spiral .article06 p img{
      float:right;
      margin:0 0 0 18px;
    }

    #spiral p.article i{
      color:#f0cc4d;
    }

#spiral .article06 dl{
  width:584px;
  height:auto;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #spiral .article06 dl dt{
    width:584px;
    height:15px;
    margin-bottom:11px;
    background:url('null.gif') no-repeat top left;
  }
    #spiral .article06 dl.article07 dt{
      background-image:url('./images/title_spiral_01.gif');
    }
    #spiral .article06 dl.article08 dt{
      background-image:url('./images/title_spiral_02.gif');
    }
  
  #spiral .article06 dl dd{
    float:left;
    width:584px;
    height:70px;
    margin-bottom:8px;
  }

    #spiral .article06 dl dd p img{
      float:left;
      margin:0 10px 0 0;
    }

    #spiral .article06 dl dd p b{
      display:block;
      color:#f00;
    }

/*--------------------------------------
 【異層の境界】 #spiral2
--------------------------------------*/
#spiral2 #navigation li.list02 ul li.list11 a{
  color:#7f1;
  background:url('../common/images/bg_mainnav_list_on.gif') no-repeat left top;
}
  #spiral2 #navigation li.list02 ul li.list11 a:hover{
    text-decoration:none;
  }

#spiral2 h2{
  background-image:url('./images/h2_spiral2.jpg');
}

#spiral2 h3.article01{
  background-image:url('./images/h3_spiral2_01.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_spiral2_01.png", sizingMethod="crop");/*ie6*/
}
#spiral2 h3.article05{
  background-image:url('./images/h3_spiral2_02.png');
	_background:none;/*ie6*/
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/h3_spiral2_02.png", sizingMethod="crop");/*ie6*/
}

#spiral2 p.article{
  margin-bottom:40px;
}
  #spiral2 p.article04{
    margin-bottom:0;
    padding-bottom:40px;
    border-bottom:1px dashed #fff;
  }

    #spiral2 p.article01 img,
    #spiral2 p.article03 img{
      float:left;
      margin:0 18px 0 0;
    }
    #spiral2 p.article02 img,
    #spiral2 p.article04 img,
    #spiral2 .article06 p img{
      float:right;
      margin:0 0 0 18px;
    }

    #spiral2 p.article i{
      color:#f0cc4d;
    }

#spiral2 .article06 dl{
  width:584px;
  height:auto;
  margin:25px 0 25px;
  padding:14px;
  border:1px solid #292929;
}

  #spiral2 .article06 dl dt{
    width:584px;
    height:15px;
    margin-bottom:11px;
    background:url('null.gif') no-repeat top left;
  }
    #spiral2 .article06 dl.article07 dt{
      background-image:url('./images/title_spiral2_01.gif');
    }
    #spiral2 .article06 dl.article08 dt{
      background-image:url('./images/title_spiral2_02.gif');
    }
  
  #spiral2 .article06 dl dd{
    float:left;
    width:584px;
    height:70px;
    margin-bottom:8px;
  }

    #spiral2 .article06 dl dd p img{
      float:left;
      margin:0 10px 0 0;
    }

    #spiral2 .article06 dl dd p b{
      display:block;
      color:#f00;
    }

/*--------------------------------------
  clear fix
--------------------------------------*/
#epic .article02 p:after,
#epic .article02 dl:after,
#epic .article02 dl dd p:after,
#road .article02 dl:after,
#road .article02 dl dd p:after,
#dragon .article06 dl:after,
#dragon .article06 dl dd p:after,
#boundary .article06 dl:after,
#boundary .article06 dl dd p:after,
#abyss .article p:after{
  content:'.';
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
#epic .article02 p,
#epic .article02 dl,
#epic .article02 dl dd p,
#road .article02 dl,
#road .article02 dl dd p,
#dragon .article06 dl,
#dragon .article06 dl dd p,
#boundary .article06 dl,
#boundary .article06 dl dd p,
#abyss .article p{
  zoom:100%;}