@charset "utf-8";

/* ===================================================================
CSS information

 file name  :index.css
 style info :TOPページ用CSS
=================================================================== */


/*
  Background Stretcher jQuery Plugin
  ｩ 2011 ajaxBlender.com
  For any questions please visit www.ajaxblender.com
  or email us at support@ajaxblender.com
*/

#headerimgs {
    background: url("../img/slider01.jpg") no-repeat scroll center center transparent;
    height: 610px;
}

#imgArea{
  position:relative;
}

#nav{
  text-align:center;
  top:580px;
  left:45%;
  z-index:100;
  position:absolute;
}

#nav ul{
  overflow:hidden;
  white-space:nowrap;
}

#nav li{
  width:17px;
  height:14px;
  margin-right:5px;
  float:left;
}

#nav li a{
  background:url(../img/thumb_off.png) no-repeat;
  display:block;
  text-indent:-1000px;
}

#nav li.showPage a{
  background:url(../img/thumb_on.png) no-repeat;
}

HTML {_background: url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
  position: absolute;
  top: 0;
  left: 0;
}

.bgstretcher UL, .bgstretcher UL LI {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bgstretcher {
  background: black;
  overflow: hidden;
  width: 100%;
  /*position: fixed;*/
  z-index: 1;
  _position: absolute; /*IE6 doesn't support fixed positioning*/
  top: 0;
  left: 0;
}

#contentWrap #content .topBanner{
  width:980px;
  margin-bottom:20px;
}

#contentWrap #content .topBanner li{
  float:left;
  margin-right:13px;
}


/* お知らせ＆トピックス
---------------------------------------------------------------------- */
#contentWrap #content #main #topicsArea{
  position:relative;
  margin-bottom:30px;
}

#contentWrap #content #main #topicsArea .topBtn{
  position:absolute;
  top:13px;
  right:5px;
}

#contentWrap #content #main #topicsArea .searchbox{
  position: absolute;
  left:272px;
  top:3px;
}

#contentWrap #content #main #topicsArea ul{
  height:200px;
  overflow:scroll;
  overflow-x:hidden;
}

#contentWrap #content #main #topicsArea ul li{
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px dotted #c4c4c4;
}

#contentWrap #content #main #topicsArea ul li p{
  float:left;
}

#contentWrap #content #main #topicsArea ul li p.date{
  font-weight:bold;
  padding:0 10px;
}

#contentWrap #content #main #topicsArea ul li p.cat{
  padding-right:10px;
}


/* リンク導線エリア
---------------------------------------------------------------------- */
#contentWrap #content #main .linkArea{
  position:relative;
  margin-bottom:30px;
}

#contentWrap #content #main .linkArea .linkBox{
  width:310px;
  padding:20px;
  color:#49242d;
  font-weight:normal;
  text-decoration:none;
  position:relative;
  float:left;
  margin:0 10px 10px 0;
}
#contentWrap #content #main .linkArea .linkBox a{
  color:#49242d;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100%;
  height:auto;
}
#contentWrap #content #main .linkArea .linkBox img.left{
  float:left;
  margin-right:15px;
  height:120px;
  width:140px;
}
#contentWrap #content #main .linkArea .linkBox .right{
  float:right;
  width:155px;
}
#contentWrap #content #main .linkArea .linkBox .right h3{
  margin-bottom:15px;
  padding-top:5px;
}
#contentWrap #content #main .linkArea .linkBox .right .arrow{
  position:absolute;
  bottom:20px;
  right:20px;
}
#contentWrap #content #main .linkArea .linkBox:hover{
  opacity:0.7;
}


#contentWrap #content #main .linkArea .blue{
  background:url("../img/blue_bg.gif");
}

#contentWrap #content #main .linkArea .yellow{
  background:url("../img/yellow_bg.gif");
}

#contentWrap #content #main .linkArea .green{
  background:url("../img/green_bg.gif");
}

#contentWrap #content #main .linkArea .orange{
  background:url("../img/orange_bg.gif");
}


/* 広島翔洋高校が選ばれる理由
---------------------------------------------------------------------- */
#contentWrap #content #main #appealPoint{
  position:relative;
}

#contentWrap #content #main #appealPoint .topBtn{
  position:absolute;
  top:10px;
  right:5px;
}

#contentWrap #content #main #appealPoint .pointArea{
  background:url("../img/point_bg2.jpg") no-repeat center top;
  position:relative;
  height:670px;
  margin-bottom:35px;
}

#contentWrap #content #main #appealPoint .pointArea .point01{
  position: absolute;
  top:230px;
  left:10px;
}

#contentWrap #content #main #appealPoint .pointArea .point02{
  position: absolute;
  top:263px;
  left:277px;
}

#contentWrap #content #main #appealPoint .pointArea .point03{
  position: absolute;
  top:258px;
  left:524px;
}

#contentWrap #content #main #appealPoint .pointArea .point04{
  position: absolute;
  top:594px;
  left:10px;
}

#contentWrap #content #main #appealPoint .pointArea .point05{
  position: absolute;
  top:594px;
  left:252px;
}

#contentWrap #content #main #appealPoint .pointArea .point06{
  position: absolute;
  top:586px;
  left:556px;
}