@charset "utf-8";
/* CSS Document */

/* エリア設定
--------------------------------------------------------- */
div#album {
  position: relative;
  width: 730px;
  height: 330px;
  margin: 0 auto 1em;
  background: #ffffed;
  border: 1px #878787 solid;
}
div#album ul {
  position: absolute;
  top: 30px;
  left: 12px;
  width: 200px;
  height: 250px;
  background: url(img/bg_title.gif) no-repeat 0 187px;
}
div#album ul li {
  float: left;
  margin: 0 5px 5px 0;
  list-style-type: none;
}

/* 挙動設定
--------------------------------------------------------- */
/* サムネイル画像設定 */
div#album ul li a,
div#album ul li a:visited {
  display: block;
  width: 90px;
  height: 65px;
  border: 2px #ffffff solid;
  z-index: 50;
  outline: none;
}
  div#album ul li a:hover {
  border: 2px #ff6600 solid;
  outline: none;
}
  div#album ul li a:active,
  div#album ul li a:focus {
  border: 2px #666666 solid;
  outline: none;
}

/* メイン画像設定 */
div#album ul li a em,
div#album ul li a span {
 display: none;
}
div#album ul li a:active em,
div#album ul li a:focus em {
  position: absolute;
  top: 50px;
  left: 400px;
  display: block;
  width: 180px;
  border: 10px #e7e7e7 solid;
  z-index: 50;
}

/* タイトル設定 */
div#album ul li a:hover span {
  position: absolute;
  top: 220px;
  left: 0;
  display: block;
  width: 270px;
  text-align: center;
  font-weight: bold;
  font-size: 100%;
  color: #C7C7C7;
  background-color: #333333;
  z-index: 100;
}

/* 各サムネイルの画像の読み込み設定
--------------------------------------------------------- */
a#photo01 {background:url(photo01.buil_dairy01.jpg);}
a#photo02 {background:url(photo02.buil_dairy01.jpg);}
a#photo03 {background:url(photo03.buil_dairy01.jpg);}
a#photo04 {background:url(photo04.buil_dairy01.jpg);}